/* ==========================================================================
   Demitre Mender — "Drawing Set"
   A portfolio built as a set of engineering drawing sheets.
   Tokens and rules are documented in /DESIGN.md — read that before editing.
   Hand-written. No framework, no build step.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* --- paper & ink --- */
  --paper:      #F3EFE7;
  --paper-2:    #EAE3D5;
  --paper-3:    #E2DACA;
  --ink:        #1A1712;
  --ink-soft:   #4B463C;
  --graphite:   #5F5A4C;
  --line:       #C9C0AC;
  --line-soft:  #DCD4C3;
  --signal:     #C0391A;
  --signal-dk:  #96290F;
  --blueprint:  #2E4A5E;

  /* --- the dark act --- */
  --night:      #131210;
  --night-2:    #1C1A16;
  --night-text: #EFE9DC;
  --night-soft: #A29A89;
  --night-line: #33302A;

  /* --- 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%; }

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 PAPER — 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(26,23,18,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26,23,18,.055) 1px, transparent 1px),
    linear-gradient(to right,  rgba(26,23,18,.11) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26,23,18,.11) 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:multiply;
  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='.28'/%3E%3C/svg%3E");
}
/* the page darkens as it enters the night act, then returns */
.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)
   -------------------------------------------------------------------------- */
.frame{
  position:fixed; inset:12px; z-index:90; pointer-events:none;
  border:1px solid rgba(26,23,18,.22);
  transition:border-color .5s var(--ease);
}
.frame::before,.frame::after{
  content:""; position:absolute; background:rgba(26,23,18,.3);
  transition:background .5s var(--ease);
}
.frame::before{ left:-1px; top:38px; width:9px; height:1px; box-shadow:0 76px rgba(26,23,18,.3), 0 152px rgba(26,23,18,.3); }
.frame::after{ right:-1px; top:38px; width:9px; height:1px; box-shadow:0 76px rgba(26,23,18,.3), 0 152px rgba(26,23,18,.3); }
body.is-night .frame{ border-color:rgba(239,233,220,.2); }
body.is-night .frame::before,
body.is-night .frame::after{ background:rgba(239,233,220,.28); }

/* 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);
  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); }
.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(243,239,231,0));
}
body.is-night .mast.is-stuck{
  background:linear-gradient(to bottom, var(--night) 55%, rgba(19,18,16,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); }

/* --------------------------------------------------------------------------
   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); 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: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(226,218,202,.55), rgba(226,218,202,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; color:var(--line); }
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);
}
/* the assembly sits in the right third, at a size we control, so the
   composition holds at every width instead of drifting off the sheet */
.brief__stage{
  position:absolute; top:0; bottom:0; right:calc(var(--margin) * -0.5);
  width:min(1060px, 62%); 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 */
.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 dark act)
   -------------------------------------------------------------------------- */
.night{
  position:relative; z-index:2; color:var(--night-text);
  background:var(--night); padding-block:var(--s10);
  --line:#33302A; --line-soft:#26241F; --graphite:#A29A89; --ink-soft:#CFC7B7; --ink:#EFE9DC;
}
.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(192,57,26,.045); }
.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); }
.signoff__stage{ position:absolute; inset:0; z-index:0; pointer-events:none; display:flex; align-items:center; justify-content:flex-end; }
.signoff__stage svg{ width:46%; 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 (0 = exploded, 1 = assembled). CSS moves each piece.
   -------------------------------------------------------------------------- */
[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 arrive last, once the object exists */
[data-assembly] .piece--note{ opacity:calc(max(0, var(--p,0) * 2.4 - 1.4)); }
/* 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(26,23,18,.14); fill:none; stroke-width:1; }
.fill-paper{ fill:var(--paper); }
.fill-band{ fill:rgba(26,23,18,.05); }
.fill-mark{ fill:var(--signal); }
.night .ink-line{ stroke:var(--night-text); }
.night .hair{ stroke:var(--night-line); }
.night .ghost{ stroke:rgba(239,233,220,.12); }
.night .fill-paper{ fill:var(--night); }
.night .fill-band{ fill:rgba(239,233,220,.06); }

.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; }
  .brief__stage svg{ width:170%; }
  .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; }
  .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:.5; }
  .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; }
}