/* ==========================================================================
   Applied AI — "Drawing Set"  (dark edition)
   A portfolio built as a set of engineering drawing sheets, drawn on a dark
   drafting sheet instead of paper. One sheet — Field Notes — flips back to
   warm paper on purpose, the same "one different act" idea the light
   version used, just pointed the other way.
   Tokens and rules are documented in /DESIGN.md. Hand-written, no build step.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* --- the ground: dark drafting sheet --- */
  --paper:      #17150F;
  --paper-2:    #1E1B14;
  --paper-3:    #26221A;
  --ink:        #EDE6D6;
  --ink-soft:   #B9B09B;
  --graphite:   #8B846F;
  --line:       #3D3928;
  --line-soft:  #2B2820;
  --signal:     #D9603A;
  --signal-dk:  #F0855F;
  --blueprint:  #7FA2B8;

  /* RGB triplets so grid/wash layers can use rgba() without a second token */
  --ink-rgb:   237,230,214;
  --line-rgb:  61,57,40;

  /* --- the one paper act (Field Notes swaps back to light) --- */
  --night:        #F3EFE7;
  --night-2:      #EAE3D5;
  --night-text:   #1A1712;
  --night-soft:   #4B463C;
  --night-line:   #C9C0AC;
  --night-signal: #C0391A;

  /* --- families --- */
  --f-display: "Instrument Serif", "Times New Roman", serif;
  --f-prose:   "Newsreader", Georgia, "Times New Roman", serif;
  --f-tech:    "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* --- scale --- */
  --t-hero:    clamp(38px, 7.1vw, 128px);
  --t-display: clamp(36px, 5.6vw, 86px);
  --t-title:   clamp(27px, 3.4vw, 50px);
  --t-sub:     clamp(20px, 2vw, 27px);
  --t-lede:    clamp(17.5px, 1.5vw, 22px);
  --t-body:    17.5px;
  --t-label:   11.5px;
  --t-micro:   10.5px;

  /* --- space --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:18px; --s5:26px;
  --s6:38px; --s7:56px; --s8:82px; --s9:120px; --s10:176px; --s11:248px;

  /* --- sheet --- */
  --sheet:  1500px;
  --gutter: clamp(18px, 2.4vw, 34px);
  --margin: clamp(20px, 4.2vw, 76px);

  --ease: cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-prose);
  font-size:var(--t-body);
  font-weight:350;
  line-height:1.68;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  font-optical-sizing:auto;
}

img,svg{ max-width:100%; }
::selection{ background:var(--signal); color:var(--paper); }
a{ color:inherit; }

/* everything square. drawings do not have rounded cards. */
*{ border-radius:0; }

:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:400;
  background:var(--ink); color:var(--paper); padding:10px 18px;
  font-family:var(--f-tech); font-size:12px;
}
.skip:focus{ left:0; }

.wrap{
  width:100%; max-width:var(--sheet); margin-inline:auto;
  padding-inline:var(--margin);
}

/* --------------------------------------------------------------------------
   2. THE SHEET — grid, tooth, ghost geometry (parallax layers 1 and 2)
   -------------------------------------------------------------------------- */
.paperbed{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }

.paperbed__grid{
  position:absolute; inset:-15% -10%;
  background-image:
    linear-gradient(to right,  rgba(var(--ink-rgb),.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--ink-rgb),.045) 1px, transparent 1px),
    linear-gradient(to right,  rgba(var(--ink-rgb),.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--ink-rgb),.09) 1px, transparent 1px);
  background-size:24px 24px, 24px 24px, 120px 120px, 120px 120px;
  will-change:transform;
}
.paperbed__tooth{
  position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23t)' opacity='.22'/%3E%3C/svg%3E");
}
.paperbed__wash{
  position:absolute; inset:0; background:var(--night);
  opacity:var(--night-mix, 0); transition:opacity .1s linear;
}

/* --------------------------------------------------------------------------
   3. SHEET FRAME + TITLE BLOCK (persistent chrome — lives on the dark
   ground by default; body.is-night is the ONE section, Field Notes, that
   is actually light paper, so the chrome flips to match while it is on
   screen. The class name stayed; the roles swapped.)
   -------------------------------------------------------------------------- */
.frame{
  position:fixed; inset:12px; z-index:90; pointer-events:none;
  border:1px solid rgba(var(--ink-rgb),.18);
  transition:border-color .5s var(--ease);
}
.frame::before,.frame::after{
  content:""; position:absolute; background:rgba(var(--ink-rgb),.24);
  transition:background .5s var(--ease);
}
.frame::before{ left:-1px; top:38px; width:9px; height:1px; box-shadow:0 76px rgba(var(--ink-rgb),.24), 0 152px rgba(var(--ink-rgb),.24); }
.frame::after{ right:-1px; top:38px; width:9px; height:1px; box-shadow:0 76px rgba(var(--ink-rgb),.24), 0 152px rgba(var(--ink-rgb),.24); }
body.is-night .frame{ border-color:rgba(26,23,18,.22); }
body.is-night .frame::before,
body.is-night .frame::after{ background:rgba(26,23,18,.3); }

/* fixed drawing-set navigation, styled as a real title block */
.tblock{
  position:fixed; right:26px; bottom:26px; z-index:95;
  border:1px solid var(--line); background:var(--paper-2);
  font-family:var(--f-tech); font-size:var(--t-micro);
  letter-spacing:.16em; text-transform:uppercase;
  transition:background .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease);
}
body.is-night .tblock{ background:var(--night-2); border-color:var(--night-line); color:var(--night-text); --signal:var(--night-signal); }
.tblock__row{ display:flex; border-bottom:1px solid var(--line); }
body.is-night .tblock__row{ border-color:var(--night-line); }
.tblock__row:last-child{ border-bottom:0; }
.tblock__k{
  padding:7px 11px; color:var(--graphite); min-width:74px;
  border-right:1px solid var(--line);
}
body.is-night .tblock__k{ color:var(--night-soft); border-color:var(--night-line); }
.tblock__v{ padding:7px 13px; min-width:132px; color:var(--ink); }
body.is-night .tblock__v{ color:var(--night-text); }
.tblock__v b{ font-weight:500; color:var(--signal); }

/* --------------------------------------------------------------------------
   4. MASTHEAD
   -------------------------------------------------------------------------- */
.mast{
  position:fixed; top:0; left:0; right:0; z-index:96;
  display:flex; align-items:baseline; gap:var(--s5);
  padding:22px calc(var(--margin) + 12px) 14px;
  font-family:var(--f-tech);
  transition:padding .4s var(--ease), background .4s var(--ease);
}
.mast.is-stuck{
  padding-block:12px 10px;
  background:linear-gradient(to bottom, var(--paper) 55%, rgba(23,21,15,0));
}
body.is-night .mast.is-stuck{
  background:linear-gradient(to bottom, var(--night) 55%, rgba(243,239,231,0));
}
.mast__id{
  display:flex; align-items:baseline; gap:11px; text-decoration:none;
  margin-right:auto; font-size:13px; letter-spacing:.04em;
}
.mast__id b{ font-weight:500; color:var(--ink); }
body.is-night .mast__id b{ color:var(--night-text); }
.mast__id span{ color:var(--graphite); font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase; }
body.is-night .mast__id span{ color:var(--night-soft); }

.mast__nav{ display:flex; gap:var(--s5); }
.mast__nav a{
  text-decoration:none; color:var(--graphite);
  font-size:var(--t-label); letter-spacing:.16em; text-transform:uppercase;
  padding-bottom:3px; border-bottom:1px solid transparent;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
body.is-night .mast__nav a{ color:var(--night-soft); }
.mast__nav a:hover,.mast__nav a[aria-current="true"]{ color:var(--signal); border-color:var(--signal); }
/* the mast only ever sits over light ground while is-night is set (the
   Field Notes act), so this scoping is exact, not a guess */
body.is-night .mast{ --signal:var(--night-signal); }

/* --------------------------------------------------------------------------
   5. BUTTONS — stamped labels, never pills
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 24px; text-decoration:none; cursor:pointer;
  font-family:var(--f-tech); font-size:12.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  border:1.6px solid var(--ink); color:var(--ink); background:transparent;
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:3px 3px 0 var(--ink); }
.btn--fill{ background:var(--ink); color:var(--paper); }
.btn--fill:hover{ background:var(--signal); border-color:var(--signal); color:var(--paper); box-shadow:3px 3px 0 var(--ink); }
.btn--lg{ padding:19px 34px; font-size:14px; }
body.is-night .btn{ border-color:var(--night-text); color:var(--night-text); }
body.is-night .btn--fill{ background:var(--night-text); color:var(--night); }
body.is-night .btn:hover{ box-shadow:3px 3px 0 var(--signal); }

/* --------------------------------------------------------------------------
   6. SHEET STRUCTURE
   -------------------------------------------------------------------------- */
.sheet{ position:relative; z-index:2; padding-block:var(--s10); }
.sheet--tight{ padding-block:var(--s9); }
.sheet--band{ background:linear-gradient(to bottom, rgba(var(--ink-rgb),.05), rgba(var(--ink-rgb),0) 70%); }
section[id]{ scroll-margin-top:110px; }

.sheetmark{
  display:flex; align-items:baseline; gap:var(--s4);
  font-family:var(--f-tech); font-size:var(--t-label);
  letter-spacing:.2em; text-transform:uppercase; color:var(--graphite);
  padding-bottom:var(--s3); margin-bottom:var(--s6);
  border-bottom:1px solid var(--line);
}
.sheetmark b{ color:var(--signal); font-weight:500; }
.sheetmark i{ font-style:normal; margin-left:auto; }
body.is-night .sheetmark{ color:var(--night-soft); border-color:var(--night-line); }

.h-display{
  font-family:var(--f-display); font-weight:400;
  font-size:var(--t-display); line-height:1.0; letter-spacing:-.018em;
  margin:0 0 var(--s5); max-width:17ch;
}
.h-display em{ font-style:italic; color:var(--signal); }
.h-title{
  font-family:var(--f-display); font-weight:400;
  font-size:var(--t-title); line-height:1.04; letter-spacing:-.016em; margin:0 0 var(--s3);
}
.lede{
  font-size:var(--t-lede); color:var(--ink-soft); line-height:1.62;
  max-width:56ch; margin:0 0 var(--s4);
}
.label{
  font-family:var(--f-tech); font-size:var(--t-label);
  letter-spacing:.18em; text-transform:uppercase; color:var(--graphite);
  margin:0 0 var(--s3);
}

/* --------------------------------------------------------------------------
   7. SHEET 01 — THE BRIEF (hero)
   -------------------------------------------------------------------------- */
.brief{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  padding-block:clamp(118px,13vh,180px) var(--s8);
}
/* left-anchored, not right-anchored: the anchor point is a fixed fraction
   of the viewport no matter how wide the window gets, so the stage can
   never creep left far enough to sit under the headline. That drift into
   the text column was the actual bug — not the animation. */
.brief__stage{
  position:absolute; top:0; bottom:0; left:54%;
  width:min(860px, 44%); z-index:1; pointer-events:none;
  display:flex; align-items:center;
}
.brief__stage svg{ width:100%; height:auto; overflow:visible; }
/* the hero drawing is scaled down hard, so its lines need real weight */
.brief__stage .hair{ stroke-width:1.6; }
.brief__stage .dim{ stroke-width:1.7; }
.brief__stage .anno{ font-size:15px; letter-spacing:.14em; }

/* far depth: ghosted geometry behind the type, moves on its own. Faint
   enough (14% stroke alpha) to sit under the headline without a fight. */
.brief__ghost{
  position:absolute; left:calc(var(--margin) * -0.4); top:8%;
  width:min(760px, 56%); z-index:0; pointer-events:none;
}
.brief__ghost svg{ width:100%; height:auto; overflow:visible; }

.brief__inner{ position:relative; z-index:2; width:100%; }
.brief__meta{
  display:flex; gap:var(--s5); flex-wrap:wrap; align-items:center;
  font-family:var(--f-tech); font-size:var(--t-label);
  letter-spacing:.2em; text-transform:uppercase; color:var(--graphite);
  margin:0 0 var(--s6); padding-bottom:var(--s3);
  border-bottom:1px solid var(--line); max-width:58ch;
}
.brief__meta b{ color:var(--signal); font-weight:500; }

.brief__h{
  font-family:var(--f-display); font-weight:400;
  font-size:var(--t-hero); line-height:.92; letter-spacing:-.028em;
  margin:0 0 var(--s6); max-width:14ch;
}
.brief__h em{ font-style:italic; }
.brief__h u{
  text-decoration:none; position:relative; white-space:nowrap;
}
.brief__h u::after{
  content:""; position:absolute; left:0; right:0; bottom:.1em; height:.055em;
  background:var(--signal); transform:scaleX(var(--p, 1)); transform-origin:left;
}
/* deliberately unbalanced: text on 7 cols, breathing room on 5 */
.brief__cols{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:var(--gutter) calc(var(--gutter) * 2); align-items:end;
}
.brief__note{
  border-left:1.6px solid var(--signal); padding-left:var(--s4);
  font-size:15.5px; color:var(--ink-soft); max-width:36ch;
}
.brief__note b{ font-weight:500; color:var(--ink); }
.brief__cta{ display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s6); }

.scrollcue{
  position:absolute; left:var(--margin); bottom:34px; z-index:3;
  display:flex; align-items:center; gap:12px;
  font-family:var(--f-tech); font-size:var(--t-micro);
  letter-spacing:.24em; text-transform:uppercase; color:var(--graphite);
}
.scrollcue span{ display:block; width:52px; height:1px; background:var(--line); position:relative; overflow:hidden; }
.scrollcue span::after{
  content:""; position:absolute; inset:0; background:var(--signal);
  animation:sweep 2.8s var(--ease) infinite;
}
@keyframes sweep{ 0%{transform:translateX(-100%)} 55%,100%{transform:translateX(100%)} }

/* --------------------------------------------------------------------------
   8. SHEET 02 — SPECIFICATION (stepped cascade, never a 3-up card row)
   -------------------------------------------------------------------------- */
.spec{ display:grid; gap:0; }
.spec__row{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  gap:var(--gutter) calc(var(--gutter)*2); align-items:start;
  padding-block:var(--s8); border-top:1px solid var(--line);
}
.spec__row:nth-child(2){ margin-left:6%; }
.spec__row:nth-child(3){ margin-left:12%; }
.spec__n{
  font-family:var(--f-display); font-size:clamp(46px,6vw,92px);
  line-height:.8; color:var(--line); margin:0 0 var(--s4);
}
.spec__row h3{
  font-family:var(--f-display); font-weight:400;
  font-size:var(--t-sub); letter-spacing:-.012em; margin:0 0 var(--s3);
}
.spec__row p{ color:var(--ink-soft); margin:0 0 var(--s4); max-width:52ch; }
.spec__art svg{ width:100%; height:auto; overflow:visible; }

.tags{ display:flex; flex-wrap:wrap; gap:0; }
.tags li{
  list-style:none; font-family:var(--f-tech); font-size:var(--t-micro);
  letter-spacing:.14em; text-transform:uppercase; color:var(--graphite);
  border:1px solid var(--line); padding:5px 10px; margin:-1px 0 0 -1px;
}

/* --------------------------------------------------------------------------
   9. SHEETS 03–07 — THE WORK
   -------------------------------------------------------------------------- */
.work__intro{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:var(--gutter) calc(var(--gutter)*2); align-items:end; margin-bottom:var(--s9);
}

.job{ position:relative; padding-block:var(--s9); border-top:1px solid var(--line); }
.job__stage{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:visible;
  display:flex; align-items:center;
}
.job__stage svg{ width:100%; height:auto; overflow:visible; }
.job__grid{ position:relative; z-index:2; display:grid; gap:var(--gutter) calc(var(--gutter)*2); }

/* every sheet gets its own split. no template rhythm. */
.job--a .job__grid{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
.job--b .job__grid{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
.job--c .job__grid{ grid-template-columns:minmax(0,6fr) minmax(0,6fr); }
.job--d .job__grid{ grid-template-columns:minmax(0,8fr) minmax(0,4fr); }
.job--e .job__grid{ grid-template-columns:minmax(0,4fr) minmax(0,8fr); }
.job--b .job__main,.job--e .job__main{ order:2; }
.job--b .job__side,.job--e .job__side{ order:1; }

.job__no{
  font-family:var(--f-tech); font-size:var(--t-label); letter-spacing:.24em;
  color:var(--signal); margin:0 0 var(--s3);
}
.job__h{
  font-family:var(--f-display); font-weight:400;
  font-size:var(--t-title); line-height:1.02; letter-spacing:-.02em; margin:0 0 var(--s3);
}
.job__kind{
  font-family:var(--f-tech); font-size:12px; color:var(--graphite);
  letter-spacing:.06em; margin:0 0 var(--s6);
}
.block{ margin-bottom:var(--s5); max-width:62ch; }
.block h4{
  font-family:var(--f-tech); font-size:var(--t-label); font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--signal);
  margin:0 0 var(--s2);
}
.block p{ margin:0 0 var(--s3); color:var(--ink-soft); }
.block p:last-child{ margin-bottom:0; }
.block code{
  font-family:var(--f-tech); font-size:.86em;
  border-bottom:1px solid var(--signal); padding-bottom:1px; color:var(--ink);
}

/* real title block, as on a drawing */
.meta{ border:1px solid var(--line); font-family:var(--f-tech); font-size:12px; }
.meta div{ display:grid; grid-template-columns:96px 1fr; border-bottom:1px solid var(--line); }
.meta div:last-child{ border-bottom:0; }
.meta dt{
  padding:11px 12px; color:var(--graphite); border-right:1px solid var(--line);
  font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase;
}
.meta dd{ margin:0; padding:11px 14px; color:var(--ink); line-height:1.5; }

.linkout{
  display:inline-flex; align-items:center; gap:9px; margin-top:var(--s5);
  font-family:var(--f-tech); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; text-decoration:none; color:var(--signal);
  border-bottom:1.4px solid var(--signal); padding-bottom:4px;
  transition:gap .25s var(--ease), color .25s var(--ease);
}
.linkout:hover{ gap:15px; color:var(--signal-dk); }

/* the smaller builds — a parts list, not cards */
.parts{ border-top:1px solid var(--line); margin-top:var(--s8); padding-top:var(--s7); }
.parts__row{
  display:grid; grid-template-columns:52px minmax(0,3fr) minmax(0,5fr) minmax(0,2.4fr);
  gap:var(--gutter); align-items:baseline;
  padding-block:var(--s5); border-bottom:1px solid var(--line-soft);
}
.parts__row:first-of-type{ border-top:1px solid var(--line-soft); }
.parts__row b{ font-family:var(--f-tech); font-size:12px; color:var(--signal); font-weight:500; }
.parts__row h4{ font-family:var(--f-display); font-weight:400; font-size:21px; margin:0; letter-spacing:-.01em; }
.parts__row p{ margin:0; color:var(--ink-soft); font-size:16px; }
.parts__row span{
  font-family:var(--f-tech); font-size:var(--t-micro); color:var(--graphite);
  letter-spacing:.12em; text-transform:uppercase; line-height:1.7;
}

/* --------------------------------------------------------------------------
   10. SHEET 08 — FIELD NOTES (the one paper act — everything else on the
   site is dark; this sheet flips back to warm paper on purpose, the same
   "one different act" idea the earlier light version used, just aimed the
   other way)
   -------------------------------------------------------------------------- */
.night{
  position:relative; z-index:2; color:var(--night-text);
  background:var(--night); padding-block:var(--s10);
  --line:#C9C0AC; --line-soft:#DCD4C3; --graphite:#5F5A4C; --ink-soft:#4B463C; --ink:#1A1712;
  --blueprint:#2E4A5E;
  /* the dark-mode signal is tuned for dark ground; on this paper interlude
     the original vermilion is the one that meets contrast */
  --signal:var(--night-signal);
}
.night__stage{ position:absolute; inset:0; z-index:0; pointer-events:none; display:flex; align-items:center; }
.night__stage svg{ width:100%; height:auto; overflow:visible; }
.night .wrap{ position:relative; z-index:2; }

.ledger{ list-style:none; margin:var(--s8) 0 0; padding:0; }
.ledger li{
  display:grid; grid-template-columns:70px minmax(0,4.4fr) minmax(0,6fr);
  gap:var(--gutter); align-items:start;
  padding-block:var(--s6); border-top:1px solid var(--night-line);
}
.ledger li:last-child{ border-bottom:1px solid var(--night-line); }
.ledger b{ font-family:var(--f-tech); font-size:12px; color:var(--signal); font-weight:500; letter-spacing:.16em; }
.ledger h3{
  font-family:var(--f-display); font-weight:400; font-size:clamp(22px,2.2vw,30px);
  line-height:1.1; letter-spacing:-.014em; margin:0;
}
.ledger p{ margin:0; color:var(--night-soft); }

.pullquote{
  margin-top:var(--s9); display:grid;
  grid-template-columns:minmax(0,8fr) minmax(0,4fr);
  gap:var(--gutter) calc(var(--gutter)*2); align-items:end;
}
.pullquote q{
  font-family:var(--f-display); font-style:italic; font-weight:400;
  font-size:clamp(32px,5vw,74px); line-height:1.02; letter-spacing:-.024em;
  quotes:'\201C' '\201D'; display:block;
}
.pullquote figcaption{ color:var(--night-soft); font-size:16px; border-left:1.6px solid var(--signal); padding-left:var(--s4); }

/* --------------------------------------------------------------------------
   11. SHEET 09 — THE OPERATOR (about)
   -------------------------------------------------------------------------- */
.operator{
  display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:var(--gutter) calc(var(--gutter)*2.4); align-items:start;
}
.operator__art{ position:sticky; top:132px; }
.operator__art svg{ width:100%; height:auto; overflow:visible; }
.prose p{ font-size:var(--t-lede); line-height:1.72; color:var(--ink-soft); margin:0 0 var(--s5); max-width:60ch; }
.prose p:first-of-type::first-letter{
  font-family:var(--f-display); float:left; font-size:4.1em; line-height:.78;
  padding:.06em .1em 0 0; color:var(--ink);
}
.prose em{ font-style:italic; color:var(--ink); }
.prose .kick{
  font-family:var(--f-display); font-size:clamp(23px,2.3vw,32px);
  line-height:1.22; color:var(--ink); max-width:26ch; margin-top:var(--s6);
}
.stack{
  display:flex; flex-wrap:wrap; gap:0; margin:var(--s7) 0 0; padding:0;
  border-top:1px solid var(--line);
}
.stack li{
  list-style:none; font-family:var(--f-tech); font-size:12px; color:var(--graphite);
  padding:11px 16px 11px 0; margin-right:16px;
  border-bottom:1px solid var(--line-soft); flex:1 1 auto; min-width:190px;
}
.stack li::before{ content:attr(data-n) "  "; color:var(--signal); }

/* --------------------------------------------------------------------------
   12. SHEET 10 — SCOPE OF WORK (a schedule table, not cards)
   -------------------------------------------------------------------------- */
.schedule{ width:100%; border-collapse:collapse; margin-top:var(--s7); text-align:left; }
.schedule th{
  font-family:var(--f-tech); font-size:var(--t-micro); font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--graphite);
  padding:0 var(--gutter) var(--s3) 0; border-bottom:1.6px solid var(--ink);
  vertical-align:bottom;
}
.schedule td{
  padding:var(--s6) var(--gutter) var(--s6) 0;
  border-bottom:1px solid var(--line); vertical-align:top;
}
.schedule tr:hover td{ background:rgba(217,96,58,.08); }
.schedule .c-ref{ width:74px; font-family:var(--f-tech); font-size:12px; color:var(--signal); }
.schedule .c-name{ width:24%; }
.schedule .c-name strong{
  font-family:var(--f-display); font-weight:400; font-size:var(--t-sub);
  display:block; letter-spacing:-.012em; line-height:1.12;
}
.schedule .c-desc{ color:var(--ink-soft); }
.schedule .c-fit{
  width:23%; font-family:var(--f-tech); font-size:11.5px; color:var(--graphite);
  line-height:1.75; letter-spacing:.02em;
}

/* --------------------------------------------------------------------------
   13. SHEET 11 — SIGN-OFF (contact)
   -------------------------------------------------------------------------- */
.signoff{ position:relative; padding-block:var(--s10) var(--s9); }
/* top-right and height-capped on purpose: it used to span the whole
   section and drift straight into the reply-card column below. Capping
   it to the headline's own band keeps it clear of that grid entirely. */
.signoff__stage{
  position:absolute; top:0; right:0; z-index:0; pointer-events:none;
  width:min(520px, 40%); height:min(56%, 480px);
  display:flex; align-items:flex-start; justify-content:center;
}
.signoff__stage svg{ width:100%; height:auto; overflow:visible; }
.signoff__inner{ position:relative; z-index:2; }
.signoff__h{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(42px,7.6vw,120px); line-height:.94; letter-spacing:-.028em;
  margin:0 0 var(--s6); max-width:15ch;
}
.signoff__h em{ font-style:italic; color:var(--signal); }
.signoff__grid{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:var(--gutter) calc(var(--gutter)*2); align-items:start; margin-top:var(--s8);
}
.signline{
  display:block; font-family:var(--f-display); font-size:clamp(24px,3.4vw,46px);
  text-decoration:none; color:var(--ink); letter-spacing:-.014em;
  border-bottom:1.6px solid var(--ink); padding-bottom:var(--s3);
  transition:color .25s var(--ease), border-color .25s var(--ease);
  word-break:break-word;
}
.signline:hover{ color:var(--signal); border-color:var(--signal); }
.signline small{
  display:block; font-family:var(--f-tech); font-size:var(--t-micro);
  letter-spacing:.2em; text-transform:uppercase; color:var(--graphite); margin-bottom:var(--s3);
}
.brief3{ border:1px solid var(--line); padding:var(--s5); }
.brief3 h4{
  font-family:var(--f-tech); font-size:var(--t-label); font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--signal); margin:0 0 var(--s4);
}
.brief3 ol{ margin:0 0 var(--s4); padding-left:1.15em; color:var(--ink-soft); }
.brief3 li{ margin-bottom:var(--s2); }
.brief3 p{ margin:0; font-size:15px; color:var(--graphite); }

/* --------------------------------------------------------------------------
   14. COLOPHON
   -------------------------------------------------------------------------- */
.colophon{
  position:relative; z-index:2; border-top:1.6px solid var(--ink);
  padding-block:var(--s5) var(--s7); font-family:var(--f-tech); font-size:11.5px;
  letter-spacing:.1em; color:var(--graphite);
}
.colophon__row{ display:flex; justify-content:space-between; gap:var(--s5); flex-wrap:wrap; }
.colophon a{ color:var(--graphite); text-decoration:none; margin-left:var(--s5); }
.colophon a:hover{ color:var(--signal); }

/* --------------------------------------------------------------------------
   15. THE ASSEMBLY — scroll-driven exploded drawings
   Container carries --p (1 = assembled, 0 = exploded). JS decides which
   direction that runs in for a given scroll position; CSS just draws
   whatever --p says right now.
   -------------------------------------------------------------------------- */
[data-assembly] .piece{
  --inv: calc(1 - var(--p, 0));
  transform-box:fill-box; transform-origin:50% 50%;
  transform:
    translate3d(calc(var(--dx,0) * var(--inv) * 1px), calc(var(--dy,0) * var(--inv) * 1px), 0)
    rotate(calc(var(--r,0) * var(--inv) * 1deg))
    scale(calc(1 - (1 - var(--sc,1)) * var(--inv)));
  opacity:calc(.16 + .84 * var(--p, 0));
}
/* annotation marks track the object rather than lagging behind it now
   that assemblies can run in either direction */
[data-assembly] .piece--note{ opacity:var(--p, 0); }
/* lines that draw themselves */
[data-assembly] .draw{ stroke-dashoffset:calc(var(--len,600) * (1 - var(--p,0))); }

.ink-line{ stroke:var(--ink); fill:none; }
.hair{ stroke:var(--line); fill:none; stroke-width:1; }
.dim{ stroke:var(--blueprint); fill:none; stroke-width:1; }
.mark{ stroke:var(--signal); fill:none; }
.ghost{ stroke:rgba(var(--ink-rgb),.16); fill:none; stroke-width:1; }
.fill-paper{ fill:var(--paper); }
.fill-band{ fill:rgba(var(--ink-rgb),.07); }
.fill-mark{ fill:var(--signal); }
.night .ghost{ stroke:rgba(26,23,18,.14); }
.night .fill-band{ fill:rgba(26,23,18,.05); }

.anno{
  font-family:var(--f-tech); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; fill:var(--graphite);
}
.anno--mark{ fill:var(--signal); }
.anno--dim{ fill:var(--blueprint); letter-spacing:.08em; }

/* the spine — a single line drawn down the whole document, tying the acts
   together. It lives in the right margin so it never crosses a text column. */
main{ position:relative; }
.spine{
  position:absolute; right:26px; top:0; bottom:0; width:1px; z-index:1;
  background:var(--signal); opacity:.42;
  transform-origin:top; transform:scaleY(var(--spine, 0));
  pointer-events:none;
}
@media (max-width:1180px){ .spine{ display:none; } }

/* --------------------------------------------------------------------------
   16. REVEALS
   -------------------------------------------------------------------------- */
.rise{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease) var(--d,0s), transform .9s var(--ease) var(--d,0s); }
.rise.is-in{ opacity:1; transform:none; }
.no-js .rise{ opacity:1; transform:none; }
.no-js [data-assembly] .piece{ transform:none !important; opacity:1 !important; }
.no-js [data-assembly] .draw{ stroke-dashoffset:0 !important; }
.no-js .spine{ transform:scaleY(1); }

/* --------------------------------------------------------------------------
   17. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width:1180px){
  .brief__cols{ grid-template-columns:1fr; }
  /* below this width the text column reflows to full width, so the stage
     has no safe zone left to sit beside — fade it back instead of trying
     to dodge text that can appear anywhere */
  .brief__stage{ opacity:.32; }
  .operator{ grid-template-columns:1fr; }
  .operator__art{ position:static; max-width:340px; }
  .pullquote{ grid-template-columns:1fr; }
  .job--a .job__grid,.job--b .job__grid,.job--c .job__grid,
  .job--d .job__grid,.job--e .job__grid{ grid-template-columns:1fr; }
  .job--b .job__main,.job--e .job__main,
  .job--b .job__side,.job--e .job__side{ order:0; }
  .work__intro{ grid-template-columns:1fr; }
  .signoff__grid{ grid-template-columns:1fr; }
  .signoff__stage{ width:52%; height:34%; }
  .spec__row{ grid-template-columns:1fr; }
  .spec__art{ max-width:320px; }
  .ledger li{ grid-template-columns:52px 1fr; }
  .ledger p{ grid-column:2; }
  .parts__row{ grid-template-columns:44px 1fr; }
  .parts__row p,.parts__row span{ grid-column:2; }
}

@media (max-width:840px){
  .mast__nav{ display:none; }
  .tblock{ right:14px; bottom:14px; }
  .tblock__row:nth-child(2){ display:none; }
  .frame{ inset:7px; }
  .spec__row:nth-child(2),.spec__row:nth-child(3){ margin-left:0; }
  .schedule thead{ display:none; }
  .schedule tr{ display:block; border-bottom:1px solid var(--line); padding-block:var(--s5); }
  .schedule td{ display:block; padding:0 0 var(--s3); border:0; width:auto !important; }
  .schedule .c-fit{ width:auto; padding-top:var(--s3); border-top:1px solid var(--line-soft); }
  .brief{ min-height:auto; padding-block:132px var(--s8); }
  .brief__stage{ opacity:.22; }
  .signoff__stage{ opacity:.4; }
  .scrollcue{ display:none; }
  .prose p:first-of-type::first-letter{ font-size:3.2em; }
}

@media (max-width:520px){
  .parts__row{ grid-template-columns:1fr; gap:var(--s2); }
  .parts__row p,.parts__row span{ grid-column:1; }
  .ledger li{ grid-template-columns:1fr; gap:var(--s2); }
  .ledger p{ grid-column:1; }
  .brief__cta .btn{ width:100%; justify-content:center; }
  .meta div{ grid-template-columns:1fr; }
  .meta dt{ border-right:0; border-bottom:1px solid var(--line-soft); padding-bottom:6px; }
}

/* --------------------------------------------------------------------------
   18. REDUCED MOTION + PRINT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-assembly] .piece{ transform:none !important; opacity:1 !important; }
  [data-assembly] .draw{ stroke-dashoffset:0 !important; }
  .rise{ opacity:1 !important; transform:none !important; }
  .paperbed__grid{ transform:none !important; }
  .spine{ transform:scaleY(1); }
}

@media print{
  .paperbed,.frame,.tblock,.mast,.scrollcue{ display:none; }
  body{ background:#fff; color:#000; }
}