/* ============================================================
   backstageessentials.com — architecture.css
   ------------------------------------------------------------
   One stylesheet for all five sheets. Loaded once, then cached,
   so pages two through five download no CSS at all.

   The design is a set of drafted sheets: paper, a drafting grid,
   blueline ink. Courier Prime carries the paperwork layer —
   headings, schedules, title blocks, numbers. Public Sans carries
   reading text. Caveat appears only on sheet 1, for handwriting.

   Sheet 1 is the marked-up working copy: tape, a coffee ring,
   a stamp, elements a fraction off square. Sheets 2 to 5 are
   clean. Keep that split.
   ============================================================ */

/* --------------------------------------------------------------
   TYPEFACES
   Self-hosted. Nothing is fetched from Google, so no visitor IP
   leaves the site to a third party and there is no outside request
   to wait on.

   Files are subsetted to the characters this site uses (basic Latin,
   Latin-1, dashes, curly quotes, arrows) and served as woff2.
   Courier Prime is static at two weights; Public Sans and Caveat are
   variable, so one file covers every weight.

   Caveat is declared on sheet 1 only — it sets one word, the stamp,
   and the other four sheets should not download it.

   All three are SIL Open Font License 1.1. The licences sit beside
   the font files in /fonts/.

   font-display: swap means text paints immediately in a fallback and
   reflows when the webfont lands, rather than showing nothing.
   -------------------------------------------------------------- */
@font-face {
    font-family: 'Courier Prime';
    src: url('/fonts/courier-prime-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
@font-face {
    font-family: 'Courier Prime';
    src: url('/fonts/courier-prime-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
@font-face {
    font-family: 'Public Sans';
    src: url('/fonts/public-sans-var.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }
@font-face {
    font-family: 'Public Sans';
    src: url('/fonts/public-sans-italic-var.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
  }

/* --------------------------------------------------------------
   TOKENS
   Every colour and face is declared once, here. Change a value
   in this block and it changes on all five sheets.
   -------------------------------------------------------------- */

:root{
    --paper:#E6EAE3; --blue:#33466E; --blue-2:rgba(51,70,110,.79);
    --blue-55:rgba(51,70,110,.55); --blue-faint:rgba(51,70,110,.13);
    /* --blue-2 is secondary TEXT. .79 is the lowest alpha that clears
       WCAG AA 4.5:1 on --paper. Do not lower it.
       --blue-55 and --blue-faint are LINE WORK only: borders, rules,
       leader dots, bullets. Never put text in them. */
    --graphite:#3B403B; --red:#A8392C; --mat:#FAFBF7;
    --mono:'Courier Prime',ui-monospace,monospace;
    --text:'Public Sans',system-ui,sans-serif;
    --hand:'Caveat',cursive;
  }

/* --------------------------------------------------------------
   PAGE FOUNDATION
   Paper colour, the drafting grid (two repeating gradients), and
   the centred sheet the content sits on.
   -------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
    background:var(--paper); color:var(--graphite);
    font-family:var(--text); font-size:16px; line-height:1.68;
    padding:0 0 72px;
    background-image:linear-gradient(var(--blue-faint) 1px,transparent 1px),
                     linear-gradient(90deg,var(--blue-faint) 1px,transparent 1px);
    background-size:28px 28px,28px 28px; background-position:-1px -1px;
  }
.sheet{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 28px}
a{color:var(--blue)}
.sheetno{font-size:13px;color:var(--blue);text-align:right;line-height:1.5;white-space:nowrap}
.sheetno b{display:block;font-size:30px;letter-spacing:.02em}

/* --------------------------------------------------------------
   HEADER STRIP
   Name and tagline on the left, sheet number on the right, ruled
   off underneath. The .mono selector list is what pins the
   paperwork layer to Courier; everything else inherits the
   reading face from body.
   -------------------------------------------------------------- */

.who h1{font-family:var(--mono);font-weight:700;font-size:clamp(26px,4.6vw,46px);
    line-height:1.04;letter-spacing:-.01em;color:var(--blue)}
.who p{font-size:15.5px;color:var(--graphite);margin-top:7px;max-width:48ch}
.crumb{font-size:12px;color:var(--blue-2);letter-spacing:.06em}
.crumb a{text-decoration:none;color:var(--blue-2)}
.crumb a:hover{color:var(--blue);text-decoration:underline}

/* --------------------------------------------------------------
   PROSE
   Reading text is capped near 66 characters. Section heads are
   Courier and ruled, so they read as sheet divisions rather than
   as web headings.
   -------------------------------------------------------------- */

.body p{margin-bottom:17px}
h2.head{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--blue);
    border-bottom:1.5px solid var(--blue);padding-bottom:5px;margin:54px 0 0}

/* --------------------------------------------------------------
   PLATES
   Photographs are pasted prints: a white mat, a soft drop shadow,
   the caption typed on the paper beneath. Without the mat, dark
   production stills read as holes punched in the sheet.
   -------------------------------------------------------------- */

.plate{margin:0}
.plate-mat{
    background:var(--mat);padding:9px 9px 9px;
    box-shadow:0 2px 5px rgba(40,46,38,.17),0 10px 22px rgba(40,46,38,.09);
    cursor:zoom-in;
  }
.plate-mat img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#cdd2c9}
.plate-cap{font-size:11.5px;line-height:1.45;color:var(--blue-2);padding-top:9px}
.plate-cap b{color:var(--blue);font-weight:700;letter-spacing:.08em}

/* --------------------------------------------------------------
   SCHEDULES AND TABLES
   Modelled on an instrument schedule. Tabular figures keep the
   year column aligned. On narrow screens the table collapses to
   labelled blocks — see the responsive section at the foot.
   -------------------------------------------------------------- */

.schedule thead th{font-size:10.5px;letter-spacing:.14em;color:var(--blue-2);
    text-align:left;padding:9px 14px;border-bottom:1.5px solid var(--blue);white-space:nowrap}
.schedule td{padding:8px 14px;border-bottom:1px solid var(--blue-faint);
    font-size:13px;line-height:1.5;color:var(--graphite);vertical-align:baseline}
.schedule tr:last-child td{border-bottom:none}
.schedule tr.grp td{border-top:1px solid var(--blue-55)}
.sch-year{color:var(--blue);font-weight:700;width:62px;white-space:nowrap}
.sch-title{font-weight:700;color:var(--blue)}
.sch-note{color:var(--blue-2);font-size:12px}
.schedule a{color:var(--red);text-decoration:none;font-size:12px}
.schedule a:hover{text-decoration:underline}
.certs th{font-size:10.5px;letter-spacing:.14em;color:var(--blue-2);text-align:left;
    padding:9px 14px;border-bottom:1.5px solid var(--blue)}
.certs td{padding:9px 14px;border-bottom:1px solid var(--blue-faint);font-size:13px;color:var(--graphite)}
.certs tr:last-child td{border-bottom:none}
.certs .c-code{color:var(--blue);font-weight:700;width:76px}

/* --------------------------------------------------------------
   SHEET INDEX
   Sheet 1 only. A drawing set lists its sheets; this site has
   five pages, so the navigation is that list.
   -------------------------------------------------------------- */

.idx-row:hover{background:rgba(51,70,110,.05)}
.idx-row:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* --------------------------------------------------------------
   KEYBOARD ACCESS
   Every link gets the same red focus ring the sheet index already
   had. Nothing suppresses outlines anywhere, so this replaces the
   browser default rather than restoring a removed one.

   The skip link sits off-canvas until it takes focus, so the first
   Tab on any sheet offers a jump past the header strip.
   -------------------------------------------------------------- */
a:focus-visible,
.dl-btn:focus-visible{outline:2px solid var(--red);outline-offset:2px}

.skip{position:absolute;left:-9999px;top:0;z-index:50;
    font-family:var(--mono);font-size:12px;letter-spacing:.08em;
    background:var(--mat);color:var(--blue);
    border:1.5px solid var(--red);padding:9px 14px;text-decoration:none}
.skip:focus{left:10px;top:10px}

.idx-no{color:var(--blue);font-weight:700;font-size:15px}
.idx-ttl{font-weight:600;color:var(--blue)}
.idx-sub{display:block;font-weight:400;font-size:14px;color:var(--blue-2);font-family:var(--text)}
.idx-rev{font-size:11.5px;color:var(--blue-2);white-space:nowrap}

/* --------------------------------------------------------------
   TITLE BLOCK
   Lower right, where it belongs on a plate. Project, sheet title,
   designer, scale, date, sheet number.
   -------------------------------------------------------------- */

.titleblock{border:1.5px solid var(--blue);background:rgba(255,255,255,.4);
    width:min(470px,100%);position:relative}
.tb-row{display:grid;border-bottom:1px solid var(--blue-55)}
.tb-row:last-child{border-bottom:none}
.tb-2{grid-template-columns:1fr 1fr}
.tb-3{grid-template-columns:1fr 1fr 1fr}
.tb-c{padding:7px 11px;border-right:1px solid var(--blue-55)}
.tb-c:last-child{border-right:none}
.tb-k{font-size:9.5px;letter-spacing:.14em;color:var(--blue-2);line-height:1.5}
.tb-v{font-size:14px;font-weight:700;color:var(--blue);line-height:1.35}
.tb-title{padding:11px;border-bottom:1px solid var(--blue-55)}
.tb-title .tb-v{font-size:17px}

/* --------------------------------------------------------------
   RESPONSIVE
   Phone layout. The grid tightens, multi-column grids drop to one
   or two, tables become labelled blocks, and the deliberate
   off-square rotations are switched off — they read as a mistake
   at phone width rather than as a hand-placed sheet.
   -------------------------------------------------------------- */

@media (max-width:760px){
    body{background-size:22px 22px,22px 22px}
    .sheet{padding:0 18px}
    .g3,.g4{grid-template-columns:repeat(2,1fr)}
    .schedule thead{display:none}
    .schedule,.schedule tbody,.schedule tr,.schedule td{display:block;width:100%}
    .schedule tr{border-bottom:1px solid var(--blue-55);padding:11px 0}
    .schedule td{border:none;padding:1px 14px}
    .schedule td:empty{display:none}
    .schedule td[data-k]::before{content:attr(data-k) " ";font-size:10px;
      letter-spacing:.14em;color:var(--blue-2)}
    .schedule td.sch-year::before{content:none}
    .idx-row{grid-template-columns:40px 1fr;gap:10px}
    .idx-rev{grid-column:2}
  }
@media (max-width:620px){
    .rail-row{grid-template-columns:1fr;gap:3px}
  }
@media (max-width:620px){
    .certs thead{display:none}
    .certs,.certs tbody,.certs tr,.certs td{display:block;width:100%}
    .certs tr{border-bottom:1px solid var(--blue-55);padding:9px 0}
    .certs td{border:none;padding:1px 14px}
    .certs td[data-k]::before{content:attr(data-k) " ";font-size:10px;letter-spacing:.14em;color:var(--blue-2)}
  }

/* --------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* --------------------------------------------------------------
   COMPONENTS
   -------------------------------------------------------------- */

/* paperwork layer — always mono */
  .mono,.sheetno,.schedule,.titleblock,.idx-no,.idx-rev,.cap,.plate-cap,
  .crumb,.col-k{font-family:var(--mono)}
/* header strip */
  .strip{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
    flex-wrap:wrap;padding:40px 0 10px;border-bottom:1.5px solid var(--blue)}
/* prose */
  .body{max-width:66ch;margin:42px 0 0}
/* pasted prints */
  .plate-grid{display:grid;gap:30px 22px;margin-top:26px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
/* schedule */
  .schedule{width:100%;border-collapse:collapse;border:1.5px solid var(--blue);
    margin-top:18px;background:rgba(255,255,255,.3);font-variant-numeric:tabular-nums}
/* sheet index */
  .idx-row{display:grid;grid-template-columns:48px 1fr auto;gap:14px;align-items:baseline;
    padding:12px 2px;border-bottom:1px solid var(--blue-faint);
    color:var(--graphite);text-decoration:none}
/* title block */
  .tb-wrap{display:flex;justify-content:flex-end;margin-top:56px}
/* ---- rail: key on the left, entry hanging to the right ---- */
  .rail{margin-top:16px}
.rail-row{display:grid;grid-template-columns:142px 1fr;gap:20px;
    padding:11px 0;border-bottom:1px solid var(--blue-faint);align-items:baseline}
.rail-row:last-child{border-bottom:none}
.rail-k{font-family:var(--mono);font-size:12.5px;color:var(--blue);
    font-variant-numeric:tabular-nums;line-height:1.5}
.rail-t{font-weight:600;color:var(--graphite);line-height:1.45}
.rail-m{font-size:14px;color:var(--blue-2);line-height:1.5;margin-top:2px}
.rail-n{font-size:14px;color:var(--graphite);line-height:1.6;margin-top:6px;max-width:64ch}
.sub{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;color:var(--blue-2);
    margin:28px 0 2px;padding-bottom:4px;border-bottom:1px solid var(--blue-55)}
/* ---- certifications ---- */
  .certs{width:100%;border-collapse:collapse;border:1.5px solid var(--blue);margin-top:16px;
    background:rgba(255,255,255,.3);font-family:var(--mono)}
/* ---- competency / subject groups ---- */
  .grp{margin-top:22px;max-width:70ch}
.grp-k{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--blue);margin-bottom:3px}
.grp-v{font-size:14.5px;color:var(--graphite);line-height:1.65}
.plain{list-style:none;margin:6px 0 0;max-width:64ch}
.plain li{padding:5px 0 5px 22px;position:relative}
.plain li::before{content:'';position:absolute;left:4px;top:14px;width:7px;height:1.5px;background:var(--blue-55)}
.inline-list{font-family:var(--mono);font-size:13px;color:var(--blue);line-height:2;margin-top:12px}
.dl-btn{display:inline-block;font-family:var(--mono);font-size:12.5px;color:var(--blue);
    border:1.5px solid var(--blue);padding:7px 15px;text-decoration:none;margin-top:16px}
.dl-btn:hover{background:rgba(51,70,110,.08)}

/* --------------------------------------------------------------
   SHEET FOOTER
   The same three-part footer closes every sheet. Pulled out of the
   markup so the rule lives in one place.
   -------------------------------------------------------------- */
.sheet-foot {
    margin-top: 56px;
    padding-top: 18px;
    border-top: 1.5px solid var(--blue);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--blue-2);
  }
.sheet-foot a { color: var(--blue-2); }

/* --------------------------------------------------------------
   SPACING AND WIDTH UTILITIES
   A short list, used where a one-off needs nudging. Kept small on
   purpose: if a utility starts appearing everywhere it should
   become a real component rule instead.
   -------------------------------------------------------------- */
/* Scoped to .sheet on purpose. A bare .mt-34 loses to a component
   rule like h2.head (element + class beats class alone), so the
   margin would silently not apply. Two classes beats element+class. */
.sheet .mt-0  { margin-top: 0; }
.sheet .mt-20 { margin-top: 20px; }
.sheet .mt-30 { margin-top: 30px; }
.sheet .mt-34 { margin-top: 34px; }
.sheet .measure { max-width: 66ch; }
.note-fine {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--blue-2);
    max-width: 72ch;
  }
.note-links {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--blue-2);
  }
.book-prose {
    margin-top: 0;
    flex: 1;
    min-width: 300px;
  }