/* ==========================================================================
   makerinparadise.com
   Rebuilt from design_handoff_makerinparadise (rev 2026.07).
   Desktop reference canvas 1280px, mobile reference canvas 390px.
   Single responsive document; breakpoint at 900px per the handoff's
   "single column below ~900px using the mobile reference's stacking order".
   ========================================================================== */

/* ---------- Fonts (self-hosted per handoff: "self-host them in production") --
   Archivo and JetBrains Mono are variable fonts, so one file serves every
   weight in its subset. unicode-range means unused subsets never download. */

@font-face{font-family:Archivo;font-style:normal;font-weight:400 900;font-stretch:100%;font-display:swap;src:url(assets/archivo-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Archivo;font-style:normal;font-weight:400 900;font-stretch:100%;font-display:swap;src:url(assets/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Archivo;font-style:normal;font-weight:400 900;font-stretch:100%;font-display:swap;src:url(assets/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/jetbrains-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/jetbrains-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/jetbrains-greek.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/jetbrains-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/jetbrains-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/jetbrains-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Design tokens ---------- */

:root{
  --ink:#0e0b10;
  --ink-deep:#0b090d;
  --ink-plum:#140f18;
  --cream:#fdf6ec;
  --cream-82:rgba(253,246,236,.82);
  --cream-70:rgba(253,246,236,.7);
  --cream-62:rgba(253,246,236,.62);
  --cream-55:rgba(253,246,236,.55);
  --cream-50:rgba(253,246,236,.5);
  --cream-45:rgba(253,246,236,.45);
  --cream-35:rgba(253,246,236,.35);
  --rule:rgba(253,246,236,.2);
  --rule-soft:rgba(253,246,236,.14);
  --rule-strong:rgba(253,246,236,.3);
  --paper:#f2f0eb;
  --paper-card:#f8f7f4;
  --paper-ink:#14120f;
  --paper-ink-60:rgba(20,18,15,.6);
  --paper-ink-55:rgba(20,18,15,.55);
  --paper-ink-50:rgba(20,18,15,.5);
  --paper-rule:rgba(20,18,15,.25);
  --paper-rule-soft:rgba(20,18,15,.14);
  --amber:#fbbf4c;
  --coral:#f2743e;
  --rose:#e2497f;
  --rose-paper:#c2295f;
  --orange-paper:#e4622c;
  --violet:#8a4fd3;
  --gradient:linear-gradient(120deg,#fbbf4c,#f2743e 55%,#e2497f);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:Archivo,system-ui,-apple-system,sans-serif;
  --pad-x:40px;
  --icon-shadow:0 6px 18px rgba(4,3,6,.72),0 0 0 1px rgba(4,3,6,.55),0 2px 4px rgba(4,3,6,.6);
  --hatch:repeating-linear-gradient(45deg,#14120f 0 2px,transparent 2px 4px);
  --sheet-grid:repeating-linear-gradient(0deg,rgba(20,18,15,.05) 0 1px,transparent 1px 26px),
               repeating-linear-gradient(90deg,rgba(20,18,15,.05) 0 1px,transparent 1px 26px);
  /* The colour the drawing sheet's photo mask fades DOWN into. Was a pale
     dawn blue; the footage is a warm sunset now. Sampled from the bottom of
     jefferson-loop.mp4. Renamed because a token called "blue" holding peach is
     exactly what misleads the next import. */
  --sheet-wash:#b16f5f;
  /* Rounded-frame system (AGENT-BRIEF 2026-08-02): 14 panels / 12 media /
     10 cards, 18px desktop gaps and 14px mobile. */
  --r-lg:14px; --r-md:12px; --r-sm:10px; --frame-gap:18px;
  --gh-green:#39d353; --gh-coral:#f2743e;
  --photo-stripe:repeating-linear-gradient(45deg,#e2ded4 0 10px,#dcd7cc 10px 20px);
}

/* ---------- Base ---------- */

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}

/* The handoff is a fixed two-tier composition: 1280 max content width,
   centred, with sections stretching to full-bleed background colour. */
.site{max-width:1280px;margin:0 auto;position:relative}

a{color:var(--coral);text-decoration:none}
a:hover{color:var(--amber)}

/* Real focus rings — the reference draws interactive elements as <span>s;
   the handoff requires actual <a>/<button> with visible focus. */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:2px;
}

h1,h2,h3,p{margin:0}
img{max-width:100%}

.mono{font-family:var(--mono)}

/* Screen-reader-only, for labels that are visually implied by design */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Animations ---------- */

@keyframes mipblink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes mipmarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){
  .caret{animation:none}
  .marquee__track{animation:none;transform:none}
  /* Petals go static; the ticker only slows (see the generated block) — a
     frozen ticker would read as a broken widget stuck on one word. */
  .petal,.petal__i{animation:none !important}
  /* A looping video cannot be paused without JS, and JS is blocked here, so
     hide it — the band keeps its flat colour and Model C its static crop. */
  /* Loops hidden: A and B keep their scrims over the band's static poster,
     and C falls back to a still crop of the same scene. */
  .hero__vid,.lagoon__vid,.model__vid,.sheet__vid{display:none}
  .lagoon__img{background:url(assets/lagoon-anime-v3.jpg?v=8be1a6e2) center 32%/cover no-repeat #7fd3dd}
  .model--c{
    background-image:linear-gradient(rgba(9,7,11,.81),rgba(9,7,11,.81)),url(assets/lagoon-anime-v3.jpg?v=8be1a6e2);
    background-position:0 0,-849px -966px;background-size:auto,1280px auto;
  }
  *{transition-duration:.01ms !important}
}

/* ==========================================================================
   1. Title-block header
   ========================================================================== */

.masthead{
  position:relative;z-index:3;
  display:grid;grid-template-columns:auto 1fr auto;align-items:stretch;
  background:var(--ink-deep);
  border-bottom:1px solid var(--rule);
}

.masthead__brand{
  display:flex;align-items:center;gap:16px;
  padding:12px 24px;
  border-right:1px solid var(--rule);
}
.brand{display:flex;flex-direction:column;gap:7px}
.brand__prompt{font:400 11px var(--mono);color:var(--cream-45)}
.brand__name{
  display:flex;align-items:center;
  font:700 25px/1 var(--mono);letter-spacing:-.03em;color:var(--cream);
}
.brand__at{color:var(--coral)}
.brand__in{color:var(--rose)}
.caret{
  display:inline-block;width:12px;height:25px;margin-left:8px;
  background:var(--amber);
  animation:mipblink 1.05s steps(1) infinite;
}
.brand__strap{font:400 10.5px var(--mono);color:rgba(253,246,236,.42)}

.nav{
  display:flex;align-items:center;gap:26px;padding:0 26px;
  font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;
}
.nav a{color:var(--cream-62);transition:color .16s ease}
.nav a:hover{color:var(--cream)}
/* The nav carries its own RFQ button for the mobile panel; on desktop the
   masthead__meta copy is the visible one. */
.nav .btn-rfq{display:none}

.masthead__meta{display:flex;border-left:1px solid var(--rule)}
.metacell{
  padding:12px 16px;border-right:1px solid var(--rule-soft);
  font:400 9.5px/1.7 var(--mono);color:var(--cream-45);
}
.metacell b{font-weight:600;color:var(--cream);display:block}
.metacell b.is-amber{color:var(--amber)}

.btn-rfq{
  display:flex;align-items:center;padding:0 22px;
  background:var(--gradient);color:var(--ink);
  font:700 12.5px var(--mono);letter-spacing:.06em;
}
.btn-rfq:hover{color:var(--ink);filter:brightness(1.08)}

/* Mobile nav disclosure — CSS/HTML only. The site ships script-src 'none',
   so this is a focusable checkbox driving a sibling selector, not a JS menu.
   The checkbox stays .vh (clipped, not display:none) so it remains tabbable. */
.navtoggle{display:none}
.navtoggle__cb:focus-visible+.nav,
.navtoggle__cb:focus-visible~.masthead__meta .navtoggle{outline:2px solid var(--amber);outline-offset:3px}

/* ==========================================================================
   2. Hero
   ========================================================================== */

.hero{
  position:relative;
  background:url(assets/hero-sunset.jpg?v=c95e59b7) center 42%/cover no-repeat,var(--ink-plum);
}
/* The still stays as .hero's background: it is the poster, the reduced-motion
   fallback, and what shows if the decode fails. The loop layers over it. */
.hero__vid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 42%;
  z-index:0;pointer-events:none;
}
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,rgba(10,8,12,.34) 0%,rgba(10,8,12,0) 22%,rgba(10,8,12,.12) 58%,rgba(10,8,12,.5) 100%);
}
/* The hero video used to stop on a hard horizontal edge against the marquee.
   Fade its last 150px into the page ink so it dissolves instead. z-index 1 keeps
   it under .hero__inner (z-index 2), so the copy over it stays at full contrast. */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:150px;
  z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(14,11,16,0),var(--ink));
}
.hero__inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 396px;gap:48px;
  padding:64px var(--pad-x) 60px;align-items:start;
}

.tag{position:relative;width:540px;margin:0 0 18px -40px}
.tag__splat{display:block;width:100%}
.tag__lockup{
  position:absolute;left:-16px;top:-46px;width:665px;height:454px;
  /* max-width:none is load-bearing. The lockup is authored at 665px inside a
     540px .tag because it is MEANT to overhang the splat; the global
     img{max-width:100%} otherwise clamps it to 540px while height:454px stays
     fixed, so it renders both smaller and horizontally squashed. */
  max-width:none;
}

.eyebrow{
  font:500 11px var(--mono);letter-spacing:.22em;text-transform:uppercase;
  color:rgba(253,246,236,.78);margin:0 0 18px;
}
.h1{font:800 74px/.95 var(--sans);letter-spacing:-.045em}
.lede{
  margin:24px 0 0;max-width:48ch;
  font:400 16.5px/1.62 var(--sans);color:var(--cream-82);text-wrap:pretty;
}

.cta{display:flex;gap:12px;margin-top:32px}
.btn{
  padding:15px 26px;background:var(--ink);color:var(--cream);
  font:700 13.5px var(--sans);transition:background .16s ease;
}
.btn:hover{background:#1b1620;color:var(--cream)}
.btn--ghost{
  background:transparent;border:1px solid rgba(253,246,236,.45);
  font:500 13.5px var(--mono);
}

/* Skills ticker — replaces the old `cat resume.md` button. Fixed 232px so the
   layout never reflows as words change length; sized to the longest entry
   ("iOS App Development", 19ch). Widen it rather than let anything clip. */
.ticker{
  display:flex;align-items:center;flex-wrap:nowrap;gap:10px;
  width:232px;padding:15px 16px;
  border:1px solid rgba(253,246,236,.45);
  font:500 13.5px/1.4 var(--mono);color:var(--cream);
}
.ticker__b{color:var(--amber);flex:none}
/* min-width:0 is load-bearing. A flex item defaults to min-width:auto, so this
   window refuses to shrink below its widest nowrap entry ("iOS App
   Development"); it then overflows and pushes the closing bracket onto its own
   line. Seen on iPhone at 390px. */
.ticker__win{flex:1 1 0;min-width:0;height:1.4em;overflow:hidden}
.ticker__strip{display:block;will-change:transform}
.ticker__strip span{
  display:block;height:1.4em;line-height:1.4em;
  text-align:center;white-space:nowrap;
}
.btn--ghost:hover{background:rgba(253,246,236,.07);color:var(--cream)}

/* ---------- capability.json + ventures rail ---------- */

.rail{display:flex;flex-direction:column;gap:16px}

.card{
  border:1px solid rgba(253,246,236,.42);
  background:rgba(9,7,11,.72);
  box-shadow:0 18px 40px rgba(4,3,6,.5);
}
.card__bar{
  display:flex;align-items:center;gap:8px;padding:11px 14px;
  border-bottom:1px solid rgba(253,246,236,.24);
  font:400 11px var(--mono);color:var(--cream-55);
}
.card__bar--split{justify-content:space-between}
.dot{width:7px;height:7px;border-radius:50%}
.dot--coral{background:var(--coral)}
.dot--amber{background:var(--amber)}
.dot--violet{background:var(--violet)}

.kv{padding:16px 18px;font:400 12px/2 var(--mono)}
.kv__row{display:flex;justify-content:space-between;border-bottom:1px dotted rgba(253,246,236,.22)}
.kv__row:last-child{border-bottom:0}
.kv__k{color:var(--cream-50)}
.kv__v--amber{color:var(--amber)}

.bench{position:relative;border-top:1px solid rgba(253,246,236,.24);overflow:hidden;aspect-ratio:946/742}
.bench img{display:block;width:100%;height:auto;margin-top:-15.9%}
.bench__fade{position:absolute;inset:0;background:linear-gradient(to top,rgba(11,9,13,.75),rgba(11,9,13,0) 55%)}
.bench__cap{
  position:absolute;left:12px;bottom:10px;
  font:400 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(253,246,236,.75);
}

/* Venture rows */
.vrow{
  display:flex;align-items:center;gap:14px;padding:14px;
  border-bottom:1px solid rgba(253,246,236,.16);
  color:var(--cream);transition:background .16s ease;
}
.vrow:last-child{border-bottom:0}
.vrow:hover,.vrow:focus-visible{background:rgba(253,246,236,.07);color:var(--cream)}
.vrow--sub{padding:12px 14px 12px 34px;background:rgba(253,246,236,.03);gap:12px}
.vrow__tree{font:400 13px var(--mono);color:var(--rule-strong);margin-left:-20px;width:12px}
.ico{display:block;width:64px;height:64px;flex:none;transition:transform .2s cubic-bezier(.34,1.4,.64,1)}
.vrow:hover .ico,.vrow:focus-visible .ico{transform:scale(1.14)}
.ico img{display:block;width:64px;height:64px;border-radius:14px;object-fit:cover;box-shadow:var(--icon-shadow)}
.vrow__text{flex:1;min-width:0}
.vrow__name{display:block;font:700 15.5px var(--sans);letter-spacing:-.01em}
.vrow--sub .vrow__name{font:600 14px var(--sans)}
.vrow__desc{display:block;margin-top:4px;font:400 11.5px/1.45 var(--mono);color:var(--cream-55)}
.vrow--sub .vrow__desc{margin-top:3px;font-size:11px;color:var(--cream-50)}
.vrow__arrow{font:400 15px var(--mono)}
.vrow__chip{
  padding:4px 8px;border:1px solid rgba(253,246,236,.22);border-radius:3px;
  font:500 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cream-50);
}

/* ==========================================================================
   5. Location marquee
   ========================================================================== */

.marquee{
  overflow:hidden;padding:16px 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background:var(--ink-deep);
}
.marquee__track{
  display:flex;gap:32px;width:max-content;
  font:500 11.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--cream-45);
  animation:mipmarq 26s linear infinite;
}

/* ==========================================================================
   6-7. Drawing sheet (paper skin)
   ========================================================================== */

.sheetband{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--pad-x);
  margin:var(--frame-gap) var(--pad-x) 0;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:rgba(242,240,235,.7);color:var(--paper-ink);
  border-bottom:1px solid rgba(20,18,15,.5);
  font:600 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;
}
.sheetband--end{
  background:transparent;border-bottom:0;border-top:1px solid rgba(253,246,236,.35);
  padding:13px var(--pad-x);color:rgba(253,246,236,.8);
  text-shadow:0 1px 10px rgba(24,14,20,.7),0 1px 2px rgba(24,14,20,.55);
}
.sheetband__muted{color:rgba(20,18,15,.5)}

/* The drawing sheet is a five-layer stack (AGENT-BRIEF §5b). Order matters:
   0 base blue · 1 masked photo + scrim · 2 petals · 3 ghosted grid · 4 content. */
.sheet{
  position:relative;isolation:isolate;overflow:hidden;
  margin:0 var(--pad-x) var(--frame-gap);
  border-radius:0 0 var(--r-lg) var(--r-lg);
  color:var(--paper-ink);background:var(--sheet-wash);
}
.sheet__base,.sheet__photo,.sheet__scrim,.sheet__petals,.sheet__grid{position:absolute;inset:0}
.sheet__base{z-index:0;background:var(--sheet-wash)}
.sheet__photo{
  /* Its OWN box at the footage's natural aspect, pinned to the top — not the
     full sheet. Two consequences, both wanted:
       1. object-fit:cover inside a box of the same aspect crops NOTHING, so the
          whole frame shows instead of the 31% side-crop that filling a 1.05
          sheet with 1.52 footage required.
       2. The mask's percentages are of THIS box, so the fade always completes
          exactly at the media's bottom edge at any viewport width. The sheet's
          own height no longer has to be guessed at.
     Below it, .sheet__base's --sheet-wash carries the rest.
     min-height keeps a narrow viewport from becoming mostly flat colour. */
  bottom:auto;
  aspect-ratio:1168/768;
  min-height:46%;
  z-index:1;
  background:url(assets/jefferson-still.jpg?v=aaa5911a) center top/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 42%,rgba(0,0,0,.88) 60%,rgba(0,0,0,.58) 75%,rgba(0,0,0,.26) 89%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 42%,rgba(0,0,0,.88) 60%,rgba(0,0,0,.58) 75%,rgba(0,0,0,.26) 89%,transparent 100%);
}
/* Nested inside .sheet__photo so it inherits that layer's fade mask — a mask
   applies to descendants, so the loop fades into --sheet-wash exactly as the
   still did. The still stays on .sheet__photo's background underneath, serving
   as poster, pre-buffer cover and reduced-motion fallback. */
.sheet__vid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center top;
  pointer-events:none;
}
.sheet__scrim{z-index:1;background:rgba(22,32,48,.16)}
.sheet__petals{z-index:2;overflow:hidden}
.sheet__petals--m{display:none}
.sheet__grid{
  z-index:3;
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.16) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 1px,transparent 1px 26px);
}
.sheet__section{position:relative;z-index:4}

/* Petals: the OUTER span is full-height and carries the fall — translateY(100%)
   resolves against the SHEET. Animating the percentage on the petal itself
   resolves against its own 8px box and they vibrate on the top edge instead. */
.petal{position:absolute;top:0;height:100%}
.petal__i{display:block;border-radius:70% 12% 70% 12%/70% 70% 12% 12%}
@keyframes mippetalA{0%{transform:translate3d(0,-4%,0);opacity:0}7%{opacity:1}90%{opacity:1}100%{transform:translate3d(70px,100%,0);opacity:0}}
@keyframes mippetalB{0%{transform:translate3d(0,-4%,0);opacity:0}9%{opacity:1}88%{opacity:1}100%{transform:translate3d(-90px,100%,0);opacity:0}}
@keyframes mippetalC{0%{transform:translate3d(0,-4%,0);opacity:0}6%{opacity:1}92%{opacity:1}100%{transform:translate3d(24px,100%,0);opacity:0}}
@keyframes mipsway{0%,100%{margin-left:0}50%{margin-left:24px}}
@keyframes mippetalspin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.sheet__section{padding:52px var(--pad-x) 44px}
/* Headings and notes sit on the photograph now, not on paper. */
.sheet .h2,.sheet .sechead__note,.sheet .tooling,.ptable__note{
  color:var(--cream);text-shadow:0 1px 10px rgba(24,14,20,.7),0 1px 2px rgba(24,14,20,.55);
}
.sheet .sechead__note{color:rgba(253,246,236,.85)}
.sheet .tooling,.ptable__note{color:rgba(253,246,236,.82)}
.sheet__section--tight{padding:0 var(--pad-x) 52px}

.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:24px}
.h2{font:800 30px var(--sans);letter-spacing:-.035em}
.sechead__note{
  font:400 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--paper-ink-55);
}

/* Capability matrix */
.matrix-scroll{overflow-x:auto}
/* One translucent layer only — a 75% card with a 75% fill inside multiplies to
   94% and reads as a different opacity from its neighbours. */
.matrix{border:1px solid rgba(20,18,15,.75);background:rgba(248,247,244,.75);min-width:640px}
.matrix__row{display:grid;grid-template-columns:296px repeat(5,1fr);align-items:center;border-bottom:1px solid rgba(20,18,15,.2)}
.matrix__row:last-child{border-bottom:0}
.matrix__row--head{
  border-bottom:1px solid var(--paper-ink);
  font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper-ink-50);
}
.matrix__row--head>*{padding:12px;text-align:center;border-right:1px solid var(--paper-rule)}
.matrix__row--head>*:first-child{padding:12px 16px;text-align:left}
.matrix__row--head>*:last-child{border-right:0}
.matrix__label{padding:14px 16px;border-right:1px solid var(--paper-rule);font:600 15.5px var(--sans)}
.matrix__cell{padding:14px;text-align:center;border-right:1px solid var(--paper-rule-soft)}
.matrix__cell:last-child{border-right:0}
.mk{display:inline-block;width:13px;height:13px}
.mk--lead{background:var(--paper-ink)}
.mk--advise{background:var(--hatch);border:1px solid var(--paper-ink)}
.mk--network{border:1px solid rgba(20,18,15,.45)}
.tooling{margin-top:14px;font:400 12px var(--mono);color:var(--paper-ink-60)}
/* Desktop shows all five phases, so the swipe hint is mobile-only. It exists
   because the ::-webkit-scrollbar styling below cannot be verified on iOS from
   here, and a cropped-looking table with no affordance reads as broken. */
.matrix-hint{display:none}

/* Project index */
.projects{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--paper-ink);border:1px solid var(--paper-ink)}
.pcard{background:var(--paper-card)}
.pcard--wide{grid-column:span 2}
.pcard__img{
  height:214px;background:var(--photo-stripe);
  border-bottom:1px solid var(--paper-ink);
  display:flex;align-items:center;justify-content:center;
  font:400 10.5px var(--mono);color:rgba(20,18,15,.45);
}
.pcard__img--sm{height:116px;border-bottom:1px solid var(--paper-rule)}
.pcard__body{padding:16px}
.pcard__body--sm{padding:13px}
.pcard__meta{
  display:flex;justify-content:space-between;gap:10px;
  font:500 10px var(--mono);letter-spacing:.14em;color:var(--paper-ink-50);margin-bottom:8px;
}
.pcard__meta--sm{font-size:9.5px;letter-spacing:.12em;margin-bottom:5px}
.pcard__title{font:700 20px var(--sans);letter-spacing:-.02em}
.pcard__title--sm{font:600 14.5px var(--sans)}
.pcard__blurb{margin-top:7px;font:400 13px/1.55 var(--sans);color:rgba(20,18,15,.62)}
.tag--med{color:var(--rose-paper)}
.tag--def{color:var(--orange-paper)}

.filtercell{
  background:var(--paper-card);display:flex;flex-direction:column;
  justify-content:space-between;gap:14px;padding:16px;
}
.filtercell__label{font:500 10px var(--mono);letter-spacing:.14em;color:var(--paper-ink-50)}
.chips{display:flex;flex-direction:column;gap:8px;font:500 12px var(--mono)}
.chip{padding:7px 10px;border:1px solid rgba(20,18,15,.3);color:var(--paper-ink)}
.chip--on{background:var(--paper-ink);color:var(--paper);border-color:var(--paper-ink)}

/* Project index uses the identical table formatting as the capability matrix:
   same border, header row, dividers and padding. */
.ptable{border:1px solid rgba(20,18,15,.75);background:rgba(248,247,244,.75)}
.ptable__row{
  display:grid;grid-template-columns:296px 1fr 1fr 1fr .6fr .6fr;align-items:center;
  border-bottom:1px solid rgba(20,18,15,.2);
}
.ptable__row:last-child{border-bottom:0}
.ptable__row--head{
  border-bottom:1px solid var(--paper-ink);
  font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper-ink-50);
}
.ptable__row>*{padding:12px;text-align:center;border-right:1px solid var(--paper-rule-soft)}
.ptable__row>*:first-child{padding:12px 16px;text-align:left;border-right:1px solid var(--paper-rule)}
.ptable__row>*:last-child{border-right:0}
.ptable__row--head>*{border-right:1px solid var(--paper-rule)}
.ptable__row--head>*:last-child{border-right:0}
.ptable__name{font:600 15.5px var(--sans);color:var(--paper-ink)}
.ptable__pn{font:500 11px var(--mono);letter-spacing:.1em}
.ptable__note{margin-top:14px;font:400 12px var(--mono)}
.ptable__note span{color:var(--amber)}

.viewall{
  grid-column:span 2;background:var(--paper-card);
  display:flex;align-items:center;justify-content:center;gap:10px;
  font:600 12.5px var(--mono);letter-spacing:.06em;color:var(--rose-paper);
  padding:20px;
}
.viewall span{color:rgba(20,18,15,.45)}

/* ==========================================================================
   8. Revision history + live feeds
   ========================================================================== */

.band{display:grid;grid-template-columns:1fr 420px;border-bottom:1px solid var(--rule-soft)}
.band__main{padding:56px var(--pad-x);border-right:1px solid var(--rule-soft)}
.band__side{padding:56px 34px;background:var(--ink-deep)}

.band__head{display:flex;align-items:baseline;gap:14px;margin-bottom:6px;flex-wrap:wrap}
.band__kicker{font:400 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.band__intro{margin:0 0 24px;max-width:54ch;font:400 14.5px/1.6 var(--sans);color:var(--cream-62)}

.revs{border:1px solid rgba(253,246,236,.22)}
.rev{display:grid;grid-template-columns:52px 116px 1fr 116px;border-bottom:1px solid rgba(253,246,236,.12);font:400 13px var(--sans)}
.rev:last-child{border-bottom:0}
.rev--head{
  border-bottom:1px solid rgba(253,246,236,.22);
  font:600 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cream-50);
}
.rev--head>*{padding:11px 14px;border-right:1px solid rgba(253,246,236,.16)}
.rev--head>*:last-child{border-right:0}
.rev>*{padding:13px 14px;border-right:1px solid rgba(253,246,236,.12)}
.rev>*:last-child{border-right:0}
.rev__n{font:600 12px var(--mono)}
.rev__d{font:400 12px var(--mono);color:var(--cream-55)}
.rev__desc{color:rgba(253,246,236,.9)}
.rev__tag{font:500 11px var(--mono)}
.t-fw{color:var(--coral)}.t-med{color:var(--rose)}.t-shop{color:var(--amber)}.t-ven{color:var(--violet)}
.revs__foot{margin-top:14px;font:600 12.5px var(--mono);color:var(--amber)}

.sidehead{
  margin:0 0 18px;font:600 11px var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--cream-50);
}
.feed{border:1px solid var(--rule);margin-bottom:14px}
.feed__head{
  display:flex;justify-content:space-between;padding:11px 14px;
  border-bottom:1px solid var(--rule);font:600 11.5px var(--mono);
}
.feed__head span{color:var(--cream-45)}
.feed__body{padding:5px 14px;font:400 11.5px var(--mono)}
.commit{display:flex;gap:10px;padding:9px 0;border-bottom:1px dotted rgba(253,246,236,.16)}
.commit:last-child{border-bottom:0}
.commit__sha{color:var(--amber)}
.commit__msg{flex:1;color:var(--cream-70)}
.commit__age{color:rgba(253,246,236,.35)}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(253,246,236,.16)}
.thumbs div{height:80px;background:repeating-linear-gradient(45deg,#1d1822 0 9px,#191420 9px 18px)}
.feed__foot{padding:10px 14px;font:400 11px var(--mono);color:var(--cream-50)}

.vlist{display:flex;flex-direction:column;gap:10px}
.vlist__row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px;border:1px solid var(--rule);color:var(--cream);
  transition:background .16s ease;
}
.vlist__row:hover{background:rgba(253,246,236,.07);color:var(--cream)}
.vlist__name{display:block;font:700 14.5px var(--sans)}
.vlist__desc{display:block;margin-top:3px;font:400 11.5px var(--mono);color:var(--cream-50)}

/* ==========================================================================
   9. Engagement models
   ========================================================================== */

.models{padding:56px var(--pad-x);border-bottom:1px solid var(--rule-soft)}
.models__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.model{background:var(--ink);padding:28px}
.model--paper{background:var(--paper);color:var(--paper-ink)}
.model__head{
  display:flex;justify-content:space-between;gap:10px;
  font:600 10.5px var(--mono);letter-spacing:.14em;color:var(--cream-50);margin-bottom:14px;
}
.model--paper .model__head{color:var(--paper-ink-55)}
.model__title{font:700 24px var(--sans);letter-spacing:-.025em}
.model__body{margin:10px 0 0;font:400 13.5px/1.6 var(--sans);color:var(--cream-62)}
.model--paper .model__body{color:rgba(20,18,15,.68)}
.model__foot{margin-top:16px;font:500 12px var(--mono)}

/* ==========================================================================
   10. RFQ + footer
   ========================================================================== */

.rfq{
  position:relative;padding:60px var(--pad-x) 56px;
  background:
    /* Top layer: the section's plum fill and its warm radials used to switch on
       at full strength on the first row, drawing a hard line under the lagoon
       card. This fades them up out of the page ink over 200px. It is a
       background layer, so it can never sit over the copy. Pairs with the
       matching mask on .rfq__grain. */
    linear-gradient(to bottom,var(--ink) 0,rgba(14,11,16,0) 200px),
    radial-gradient(90% 120% at 8% 120%,rgba(251,191,76,.5),transparent 58%),
    radial-gradient(85% 110% at 72% 130%,rgba(226,73,127,.45),transparent 62%),
    radial-gradient(70% 90% at 40% 140%,rgba(242,116,62,.4),transparent 66%),
    var(--ink-plum);
}
/* The 112deg hatch used to switch on at full strength on the RFQ's top edge,
   reading as a hard line under the lagoon card. Masked so it fades up out of
   black over 190px. The video above it is untouched. */
.rfq__grain{
  position:absolute;inset:0;
  background-image:repeating-linear-gradient(112deg,rgba(255,255,255,.04) 0 1px,transparent 1px 11px);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 190px);
          mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 190px);
}
.rfq__inner{position:relative;display:grid;grid-template-columns:1fr 560px;gap:52px;align-items:start}
.rfq__h2{font:800 52px/1 var(--sans);letter-spacing:-.04em}
.rfq__lede{margin:20px 0 0;max-width:34ch;font:400 15px/1.65 var(--sans);color:rgba(253,246,236,.75)}
.rfq__contact{margin-top:26px;display:flex;flex-direction:column;gap:8px;font:500 12.5px var(--mono);align-items:flex-start}
.rfq__contact a{color:rgba(253,246,236,.8)}
.rfq__contact a:hover{color:var(--amber)}
.rfq__lockup{width:220px;opacity:.9;margin-top:30px}

.form{border:1px solid var(--rule-strong);background:rgba(11,9,13,.5)}
.form__split{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid rgba(253,246,236,.22)}
.field{padding:14px 16px}
.form__split .field:first-child{border-right:1px solid rgba(253,246,236,.22)}
.field--block{border-bottom:1px solid rgba(253,246,236,.22)}
.field__label{font:600 9.5px var(--mono);letter-spacing:.16em;color:var(--cream-50)}
.field__ph{margin-top:6px;font:400 14px var(--sans);color:var(--cream-35)}
.field__ph--tall{min-height:66px}
.scope{display:flex;flex-wrap:wrap;gap:7px;font:500 11px var(--mono);margin-top:10px}
.scope span{padding:7px 11px;border:1px solid var(--rule-strong)}
.scope span.is-on{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.form__foot{display:grid;grid-template-columns:1fr auto;align-items:stretch}
.form__note{padding:14px 16px;font:400 11px var(--mono);color:var(--cream-50);align-self:center}
.form__submit{
  display:flex;align-items:center;padding:16px 30px;
  background:var(--gradient);color:var(--ink);
  font:700 13px var(--mono);letter-spacing:.06em;border:0;cursor:pointer;
}
.form__submit:hover{color:var(--ink);filter:brightness(1.08)}

.footer{
  display:grid;grid-template-columns:1fr auto auto;background:var(--ink-deep);
  font:400 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cream-50);
}
.footer>*{padding:16px 22px;border-right:1px solid var(--rule-soft)}
.footer>*:last-child{border-right:0}

/* ==========================================================================
   Responsive — single column below 900px, following the mobile reference's
   stacking order and type scale (390px canvas, 18px gutters).
   ========================================================================== */

@media (max-width:1100px){
  .hero__inner{grid-template-columns:1fr 340px;gap:32px}
  .band{grid-template-columns:1fr 360px}
  .rfq__inner{grid-template-columns:1fr 440px;gap:36px}
  .h1{font-size:60px}
  .rfq__h2{font-size:44px}
}

@media (max-width:900px){
  :root{--pad-x:18px}

  /* --- header: lockup + hamburger disclosure --- */
  .masthead{grid-template-columns:1fr auto;padding:10px var(--pad-x);align-items:center;gap:12px}
  .masthead__brand{padding:0;border-right:0}
  .brand{gap:5px}
  .brand__prompt{font-size:9px}
  .brand__name{font-size:16px}
  .caret{width:8px;height:16px;margin-left:6px}
  .brand__strap{display:none}
  .masthead__meta{border-left:0;flex-direction:column;align-items:flex-end;gap:8px}
  .metacell{display:none}
  .metacell--rev{display:block;padding:0;border-right:0;font-size:9.5px;color:var(--cream-50)}
  .metacell--rev b{display:inline;font-weight:400;color:var(--cream-50)}
  .metacell--rev b::before{content:' '}
  .btn-rfq{display:none}

  .navtoggle{
    display:flex;flex-direction:column;gap:4px;
    padding:4px 0;cursor:pointer;
  }
  .navtoggle span:not(.vh){display:block;width:20px;height:1.5px;background:rgba(253,246,236,.8)}

  /* Panel is closed by default and revealed by the checkbox. */
  .nav{
    display:none;
    position:absolute;left:0;right:0;top:100%;z-index:5;
    flex-direction:column;align-items:stretch;gap:0;
    padding:6px var(--pad-x) 14px;
    background:var(--ink-deep);border-bottom:1px solid var(--rule);
  }
  .navtoggle__cb:checked~.nav{display:flex}
  .nav a{padding:12px 0;border-bottom:1px solid var(--rule-soft)}
  .nav .btn-rfq{
    display:flex;justify-content:center;margin-top:12px;padding:14px;
    border-bottom:0;
  }

  /* --- hero --- */
  .hero{background-position:center 40%}
  .hero__vid{object-position:center 40%}
  .hero__inner{grid-template-columns:1fr;gap:28px;padding:24px var(--pad-x) 30px}
  .tag{width:100%;max-width:293px;margin:0 0 12px}
  .tag__lockup{left:-8px;top:-19px;width:346px;height:239px;max-width:none}
  .h1{font-size:42px;line-height:.96}
  .lede{margin-top:16px;font-size:15px;max-width:none}
  .cta{flex-direction:column;gap:9px;margin-top:20px}
  .btn{padding:14px;text-align:center;font-size:13px}
  .btn--ghost{font-size:12.5px}

  /* --- rail: capability + ventures --- */
  .rail{gap:14px}
  .kv{font-size:11px;padding:14px 16px}

  /* --- marquee --- */
  .marquee{padding:14px 0}
  .marquee__track{animation-duration:18s;gap:24px;font-size:10.5px}

  /* --- drawing sheet --- */
  .sheetband{padding:11px var(--pad-x);font-size:9.5px;letter-spacing:.18em;gap:12px}
  .sheetband__muted{display:none}
  .sheet__section{padding:24px var(--pad-x)}
  .sheet__section--tight{padding:0 var(--pad-x) 24px}
  .sechead{flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:14px}
  .h2{font-size:24px}

  /* Matrix keeps all 6 disciplines and all 5 phases; it scrolls sideways
     rather than dropping columns, so no capability data is lost on a phone. */
  .matrix-scroll{
    /* `scroll`, not `auto`: the bar must be visible so the matrix reads as
       scrollable. iOS hides overlay scrollbars until you drag, and without the
       affordance the discipline column looks cropped rather than scrolled.
       -webkit-appearance:none is what makes iOS render a styled, persistent
       bar instead of the transient overlay one. */
    overflow-x:scroll;-webkit-overflow-scrolling:touch;
    /* No outline. The 1px paper-ink border framed the whole scroll viewport,
       which is wider than the table, so it read as a hard black box around a
       floating panel. The pane fill and the radius live on the scroller now,
       so the window IS the panel and the scrollbar sits inside it. */
    border:0;
    border-radius:var(--r-sm);
    background:rgba(248,247,244,.75);
    scrollbar-width:thin;
    scrollbar-color:rgba(20,18,15,.55) rgba(20,18,15,.12);
    padding-bottom:2px;
  }
  .matrix-scroll::-webkit-scrollbar{height:8px;-webkit-appearance:none}
  .matrix-scroll::-webkit-scrollbar-track{background:rgba(20,18,15,.10)}
  .matrix-scroll::-webkit-scrollbar-thumb{
    background:rgba(20,18,15,.55);border-radius:100px;
    border:2px solid transparent;background-clip:content-box;
  }
  .matrix{border:0;background:transparent;min-width:560px}
  .matrix__row,.matrix__row--head{grid-template-columns:160px repeat(5,1fr)}
  .matrix__label{padding:12px 11px;font-size:13px}
  .matrix__cell{padding:12px 4px}
  .matrix__row--head{font-size:8.5px;letter-spacing:.1em}
  .matrix__row--head>*{padding:9px 4px}
  .matrix__row--head>*:first-child{padding:9px 11px}
  .mk{width:11px;height:11px}
  .tooling{font-size:11px;line-height:1.7}
  .matrix-hint{
    display:block;margin-top:8px;
    font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;
    color:var(--cream);text-shadow:0 1px 10px rgba(24,14,20,.7),0 1px 2px rgba(24,14,20,.55);
  }

  /* Ticker goes full width on mobile (brief §5). */
  .ticker{width:100%;font-size:12.5px;padding:14px}

  /* 34 petals on mobile instead of 68. */
  .sheet__petals--d{display:none}
  .sheet__petals--m{display:block}

  /* Project index drops to Project · Sector · Phase (brief §5b). */
  .ptable__row{grid-template-columns:1fr 62px 62px}
  .ptable__row>*:nth-child(2),
  .ptable__row>*:nth-child(5),
  .ptable__row>*:nth-child(6){display:none}
  .ptable__row>*{padding:9px 6px;font-size:10px}
  .ptable__row>*:first-child{padding:9px 11px}
  .ptable__name{font-size:13px}
  .ptable__row--head{font-size:8.5px;letter-spacing:.1em}
  .ptable__note{font-size:11px;line-height:1.7}

  .projects{grid-template-columns:repeat(2,1fr)}
  .pcard--wide,.viewall{grid-column:span 1}
  .pcard{display:flex;flex-direction:column}
  .pcard__img{height:104px;font-size:9px}
  .pcard__img--sm{height:104px}
  .pcard__body,.pcard__body--sm{padding:11px 12px;flex:1}
  .pcard__meta{font-size:9px;letter-spacing:.1em;margin-bottom:5px;flex-wrap:wrap;gap:2px 6px}
  .pcard__meta--sm{font-size:9px}
  .pcard__title{font-size:14.5px;letter-spacing:-.015em}
  .pcard__title--sm{font-size:13.5px}
  /* The two featured blurbs would unbalance a 2-up grid at this width. */
  .pcard__blurb{display:none}
  .filtercell{gap:10px;padding:12px}
  .chips{flex-direction:row;flex-wrap:wrap;gap:6px;font-size:10px}
  .chip{padding:5px 7px}
  .viewall{padding:14px 12px;font-size:11px;text-align:center;flex-wrap:wrap;gap:4px}
  .viewall span{display:none}

  /* --- revision history + feeds stack --- */
  .band{grid-template-columns:1fr}
  .band__main{padding:28px var(--pad-x);border-right:0;border-bottom:1px solid var(--rule-soft)}
  .band__side{padding:28px var(--pad-x)}
  .band__intro{font-size:13.5px;max-width:none}

  /* Rev table -> stacked cards. Date/tag ride together above the description. */
  .revs{border:0}
  .rev--head{display:none}
  .rev{
    display:grid;grid-template-columns:auto 1fr;gap:2px 10px;
    border:1px solid rgba(253,246,236,.22);margin-bottom:10px;padding:12px 14px;
  }
  .rev:last-child{margin-bottom:0}
  .rev>*{padding:0;border-right:0}
  .rev__n{grid-column:1;grid-row:1}
  .rev__n::before{content:'REV ';color:var(--cream-45)}
  .rev__d{grid-column:2;grid-row:1;text-align:right}
  .rev__desc{grid-column:1/-1;grid-row:2;margin-top:6px;font-size:13.5px;line-height:1.5}
  .rev__tag{grid-column:1/-1;grid-row:3;margin-top:8px}

  /* --- engagement models stack --- */
  .models{padding:28px var(--pad-x)}
  .models__grid{grid-template-columns:1fr}
  .model{padding:22px}
  .model__title{font-size:21px}

  /* --- RFQ stacks --- */
  .rfq{padding:34px var(--pad-x)}
  .rfq__inner{grid-template-columns:1fr;gap:26px}
  .rfq__h2{font-size:34px}
  .rfq__lede{max-width:none;font-size:14.5px}
  .rfq__lockup{width:180px;margin-top:24px}
  .form__foot{grid-template-columns:1fr}
  .form__submit{justify-content:center;padding:16px}

  /* --- footer stacks --- */
  .footer{grid-template-columns:1fr}
  .footer>*{border-right:0;border-bottom:1px solid var(--rule-soft);padding:14px var(--pad-x)}
  .footer>*:last-child{border-bottom:0}
}

@media (max-width:420px){
  .h1{font-size:36px}
  .rfq__h2{font-size:30px}
  .ico,.ico img{width:52px;height:52px}
  .vrow{gap:11px;padding:12px}
  .vrow--sub{padding-left:28px}
  .form__split{grid-template-columns:1fr}
  .form__split .field:first-child{border-right:0;border-bottom:1px solid rgba(253,246,236,.22)}
}

/* ==========================================================================
   Above the 1280 reference canvas: content column stays at 1280, but section
   backgrounds bleed edge to edge (handoff, Layout system). Two techniques —
   image/gradient sections get a real 100vw break-out; flat-colour sections
   use a clipped box-shadow so no extra wrapper markup is needed.
   ========================================================================== */

@media (min-width:1281px){
  /* Guard: 100vw includes the scrollbar, which would otherwise overflow. */
  body{overflow-x:hidden}

  .hero,.rfq{
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
  }
  .hero__inner{max-width:1280px;margin-left:auto;margin-right:auto}
  .rfq__inner{max-width:1200px;margin-left:auto;margin-right:auto}

  /* Only the masthead and footer are still full-bleed bars. The marquee, the
     drawing sheet and the revision band are rounded cards now — bleeding their
     fill to the edges painted paper (and ink) past the rounded corners, which
     is what produced the cream margins either side of the sheet. */
  .masthead,.footer{clip-path:inset(0 -100vmax)}
  .masthead{box-shadow:0 0 0 100vmax var(--ink-deep)}
  .footer{box-shadow:0 0 0 100vmax var(--ink-deep)}
}

/* Print: the drawing sheet should read as paper. */
@media print{
  body{background:#fff}
  .marquee,.navtoggle{display:none}
}

/* ==========================================================================
   4b / 4c. social.d channel strips (GitHub, Thingiverse)
   Built as channel 1 and 2 of 4; X and LinkedIn reuse this anatomy.
   NOTE: the [data-gh]/[data-tv] hook containers are written by
   site-src/github-heatmap-sync, which emits INLINE-styled children. Style the
   chrome here, but never restyle the generated cells/cards by class — a sync
   would overwrite it. See MAKING-THE-DATA-REAL.md.
   ========================================================================== */

.chan{background:var(--ink-deep)}

.chan__banner{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px var(--pad-x);border-bottom:1px solid var(--rule-soft);
  font:600 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--cream-45);
}

.chan__head{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;
  padding:18px var(--pad-x);border-bottom:1px solid var(--rule-soft);
}
.chan__mark{display:block;width:44px;height:44px;flex:none;transition:transform .2s cubic-bezier(.34,1.4,.64,1)}
.chan__mark:hover{transform:scale(1.12)}
.chan__mark--tile>span{
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:10px;background:var(--cream);
  box-shadow:0 6px 18px rgba(4,3,6,.72),0 0 0 1px rgba(4,3,6,.55);
}
.chan__id{min-width:0}
.chan__handle{font:700 19px var(--mono);letter-spacing:-.02em;color:var(--cream)}
.chan__handle:hover{color:var(--amber)}
.chan__strap{margin-top:5px;font:400 12px var(--mono);color:var(--cream-50)}
.chan__countsm{display:none;margin-top:6px;font:500 11px var(--mono);color:var(--cream-45)}

.chan__counts{display:flex;align-items:center;gap:22px}
.count{text-align:right}
.count__n{font:700 18px var(--mono);color:var(--cream)}
.count__l{
  margin-top:4px;font:500 9.5px var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:rgba(253,246,236,.4);
}
.btn-outline{
  padding:12px 20px;border:1px solid rgba(253,246,236,.35);
  font:600 12px var(--mono);letter-spacing:.08em;color:var(--cream);
  white-space:nowrap;transition:background .16s ease,border-color .16s ease;
}
.btn-outline:hover{background:rgba(253,246,236,.07);border-color:rgba(253,246,236,.55);color:var(--cream)}

/* ---- contribution heatmap ---- */
.heat{
  display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;
  padding:22px var(--pad-x);border-bottom:1px solid var(--rule-soft);
}
.heat__chart{min-width:0}
.heat__months{
  display:flex;gap:3px;margin-bottom:6px;
  font:500 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:rgba(253,246,236,.4);
}
.heat__months span:nth-child(odd){width:77px}
.heat__months span:nth-child(even){width:61px}
/* The 53 week columns carry their own explicit grid-template-columns from the
   renderer — without it every square collapses to zero width and the strip
   fails silently. Do not strip inline styles off the generated cells. */
.heat__grid--desktop i{width:13px}
.heat__grid--mobile{display:none !important}
.heat__side{display:flex;flex-direction:column;gap:12px;align-items:flex-end;text-align:right}
.heat__total{font:700 30px var(--sans);letter-spacing:-.03em;color:var(--cream)}
.legend{
  display:flex;align-items:center;gap:7px;
  font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:rgba(253,246,236,.4);
}
.legend i{width:11px;height:11px;border-radius:2px}

/* ---- stats strip ---- */
.statstrip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--rule-soft);border-bottom:1px solid var(--rule-soft);
}
.stat{background:var(--ink-deep);padding:13px 18px}
.stat__n{font:700 20px var(--mono);color:var(--cream)}

/* ---- repo cards (generated) ---- */
.cards--mobile{display:none !important}

/* ---- thingiverse ---- */
.chan__blurb{padding:20px var(--pad-x);border-bottom:1px solid var(--rule-soft)}
.chan__blurb p{max-width:104ch;font:400 14px/1.62 var(--sans);color:var(--cream-62);text-wrap:pretty}
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--rule-soft)}
.tile{display:flex;flex-direction:column;background:var(--ink-deep);color:var(--cream)}
.tile:hover{background:rgba(253,246,236,.055);color:var(--cream)}
.tile__img{
  /* width:100% is load-bearing. As a flex item with aspect-ratio AND text
     content, this box shrink-to-fits around the label instead of stretching,
     so the ratio then derives a tiny height and the thumbnail collapses to a
     ~66px chip. An explicit width gives the ratio a definite basis. */
  width:100%;
  aspect-ratio:4/3;background:repeating-linear-gradient(45deg,#1d1822 0 9px,#191420 9px 18px);
  display:flex;align-items:center;justify-content:center;
  font:400 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:rgba(253,246,236,.32);
}
/* A synced design gets a real thumbnail; the inline background-image from
   render-thingiverse.mjs overrides the shorthand's image slot while keeping
   the cover sizing and fallback colour from this rule. */
.tile__img--photo{background:#191420 center/cover no-repeat;font-size:0}
.tile__body{display:flex;flex-direction:column;gap:6px;padding:13px 15px;flex:1}
/* Real Thingiverse titles run long ("Folgertech FT-5/FT-6 SOLID Bowden (+dual)
   extruder mount"), which left every tile's download row at a different
   height. Clamp to two lines and pin the meta row to the bottom so the grid
   reads as a row again. */
.tile__name{
  font:600 13px/1.35 var(--mono);color:var(--cream);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.tile__meta{
  margin-top:auto;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream-45);
}
/* Thingiverse blue #2b52fe measures 3.53:1 on #0b090d at 10px — below AA.
   Text uses the lightened #8fa4ff (~6:1); keep the split if restyling. */
.tile__dl{color:#8fa4ff}

@media (max-width:900px){
  .chan__head{grid-template-columns:auto 1fr;gap:14px;padding:14px var(--pad-x)}
  .chan__handle{font-size:15px}
  .chan__strap{font-size:11px}
  .chan__countsm{display:block}
  .chan__counts{grid-column:1/-1;justify-content:flex-start;gap:14px}
  .chan__counts .count{display:none}
  .btn-outline{flex:1;text-align:center;padding:12px}

  .heat{grid-template-columns:1fr;gap:14px;padding:16px var(--pad-x)}
  /* Keep the month labels on mobile — without them the strip has no time
     axis and the recent cluster reads as decoration. Even flex tracks
     replace the desktop's fixed 77/61px columns. */
  .heat__months{display:flex;gap:0;margin-bottom:5px;font-size:9px;letter-spacing:.04em}
  .heat__months span,
  .heat__months span:nth-child(odd),
  .heat__months span:nth-child(even){width:auto;flex:1;min-width:0}
  .heat__grid--desktop{display:none !important}
  /* The renderer emits fixed 5px cells + 1px gaps = 317px inside ~354px, which
     left a dead strip on the right. space-between distributes the slack across
     the 52 gaps so the grid spans the full column and lines up with the labels. */
  .heat__grid--mobile{display:flex !important;justify-content:space-between}
  .heat__side{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;text-align:left;width:100%}
  .heat__total{font-size:24px}
  .legend{gap:5px;font-size:9px;letter-spacing:.1em}
  .legend i{width:9px;height:9px}

  /* Handoff: mobile shows the first two stats only. */
  .statstrip{grid-template-columns:repeat(2,1fr)}
  .stat--wide{display:none}

  .cards--desktop{display:none !important}
  .cards--mobile{display:grid !important}

  .chan__blurb{padding:16px var(--pad-x)}
  .chan__blurb p{font-size:13.5px}
  /* Handoff: four tiles on mobile, not six. */
  .tiles{grid-template-columns:repeat(2,1fr)}
  .tiles--desktop a:nth-child(n+5){display:none}
}

/* >>> skills-ticker (generated by site-src/build-skills.mjs — do not hand-edit) */
/* 46 entries. A CSS ticker has to know the count; skills.json is the source
   of truth and this block is derived from it, so adding a skill stays one line. */
.ticker__strip{
  animation:mipskills 9.108s steps(46) infinite;
}
@keyframes mipskills{
  /* -100% is 100% of the STRIP, which is already all 46 lines tall, so
     steps(46) advances exactly one line per tick. Using -4600% here would
     advance 46 lines per step and the box would flicker through garbage. */
  from{transform:translateY(0)}
  to{transform:translateY(-100%)}
}
@media (prefers-reduced-motion:reduce){
  /* A fast strobe is a genuine accessibility problem — slow, never freeze. */
  .ticker__strip{animation-duration:101.200s !important}
}
/* <<< skills-ticker */


/* ==========================================================================
   01 — Open source: rounded channel frames, repo split, project cards
   ========================================================================== */

.sechead--os{padding:34px var(--pad-x) 16px;margin:0}
.sechead--os .sechead__note{color:var(--cream-45)}

/* Each channel is its own rounded panel now, not a full-bleed band. */
.chan{
  background:var(--ink-deep);
  border:1px solid var(--rule-soft);
  border-radius:var(--r-lg);
  overflow:hidden;
  margin:0 var(--pad-x) var(--frame-gap);
}
.chan__banner{padding:11px 20px;border-bottom:1px solid rgba(253,246,236,.12)}
.chan__head,.heat,.statstrip,.chan__blurb{padding-left:20px;padding-right:20px}

/* ---- repository split -------------------------------------------------- */
.repos{display:flex;flex-direction:column;gap:8px;min-width:206px}
.repos__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.repos__n{font:700 18px var(--mono);color:var(--cream)}
.repos__bar{
  display:flex;gap:2px;height:7px;border-radius:100px;overflow:hidden;
  background:rgba(253,246,236,.1);
}
.repos__bar>span{display:block}
.repos__key{
  display:flex;gap:16px;
  font:500 9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--cream-45);
}
.repos__key span{display:flex;align-items:center;gap:6px}
.repos__key i{width:7px;height:7px;border-radius:2px;flex:none}
.repos__key b{font-weight:700;color:var(--cream)}

/* ---- project index cards (3x2 desktop) --------------------------------- */
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--frame-gap)}
.pcard{
  display:flex;flex-direction:column;
  background:rgba(248,247,244,.58);
  border:1px solid rgba(20,18,15,.55);
  border-radius:var(--r-sm);overflow:hidden;
}
.pcard__photo{
  height:184px;border-bottom:1px solid var(--paper-rule);
  background:repeating-linear-gradient(45deg,rgba(20,18,15,.09) 0 10px,rgba(20,18,15,.02) 10px 20px);
  display:flex;align-items:center;justify-content:center;
  font:600 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper-ink-50);
}
.pcard__body{padding:18px 20px 20px}
.pcard__meta{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper-ink-50);margin-bottom:9px;
}
.pcard__title{font:700 19px var(--sans);letter-spacing:-.025em;color:var(--paper-ink)}
.pcard__desc{margin:8px 0 0;font:400 13px/1.55 var(--sans);color:rgba(20,18,15,.65);text-wrap:pretty}
.tag--med{color:var(--rose-paper)}.tag--def{color:var(--orange-paper)}
.tag--opt{color:#6b3fa0}.tag--lab{color:#1d6a5a}
.tag--oss{color:#2b52aa}.tag--aero{color:#8a4a12}

/* ---- rounded-frame pass on the existing furniture ---------------------- */
.card,.matrix,.form,.models__grid{border-radius:var(--r-lg);overflow:hidden}
.marquee{border-radius:var(--r-lg);margin:0 var(--pad-x);border-left:1px solid var(--rule);border-right:1px solid var(--rule)}
.bench{border-radius:0}
/* Thingiverse design thumbnails are rounded. They sit flush at the top of a
   tile in a 1px-gap grid, so they need their own inset for the radius to read
   as a rounded picture rather than a clipped corner. Padding on the tile, not
   a margin on the image — .tile__img keeps width:100% (load-bearing above) and
   a margin would push it past the tile. */
.tile__img{border-radius:var(--r-sm)}
.btn,.btn--ghost,.ticker,.btn-outline,.btn-rfq,.form__submit{border-radius:var(--r-sm)}
.tile{border-radius:0}
.cards--desktop>a:first-child{border-top-left-radius:0}

@media (max-width:900px){
  :root{--frame-gap:14px}
  .sechead--os{padding:24px var(--pad-x) 12px}
  .chan{margin:0 var(--pad-x) var(--frame-gap)}
  .chan__banner,.chan__head,.heat,.statstrip,.chan__blurb{padding-left:16px;padding-right:16px}
  .marquee{margin:0 var(--pad-x)}
  /* Repo split spans the row on mobile; the bar is the point, not the columns. */
  .repos{min-width:0;width:100%;order:-1}
  .repos__key{gap:12px;font-size:9px}
  /* Project cards: 2x2 — four of the six, per the reference. */
  .pcards{grid-template-columns:repeat(2,1fr);gap:var(--frame-gap)}
  .pcards .pcard:nth-child(n+5){display:none}
  .pcard__photo{height:96px;font-size:8.5px}
  .pcard__body{padding:12px 13px 14px}
  .pcard__meta{font-size:8.5px;letter-spacing:.1em;margin-bottom:6px;flex-wrap:wrap;gap:2px 6px}
  .pcard__title{font-size:14.5px}
  .pcard__desc{display:none}
}

/* ==========================================================================
   04 — whoami_
   ========================================================================== */

/* No border-bottom: the cards below are inset by --pad-x, so a rule spanning
   the full content width overhangs them on both sides. Sections are separated
   by the --frame-gap between cards instead. */
.who{padding:56px var(--pad-x) 34px}
.who__head{display:flex;align-items:baseline;gap:14px;margin-bottom:30px;flex-wrap:wrap}
.who__grid{display:grid;grid-template-columns:452px 1fr;gap:44px;align-items:start}
.who__col{display:flex;flex-direction:column;gap:14px}
.who__panel{border-radius:var(--r-md)}
.who__rec{margin-left:auto;display:flex;align-items:center;gap:6px}
.who__photo{display:block;width:100%;height:auto}
.who__det{
  display:flex;flex-wrap:wrap;gap:14px;padding:10px 14px;
  border-top:1px solid rgba(253,246,236,.24);
  font:400 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cream-45);
}
.who__det b,.who__stats b{color:var(--cream);font-weight:600}
.who__stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(253,246,236,.24);
  font:400 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cream-45);
}
.who__stats>div{padding:10px 14px;border-right:1px solid var(--rule-soft)}
.who__stats>div:last-child{border-right:0}
.who__stats b.is-amber{color:var(--amber)}
.who__soc{padding:12px 14px}
.who__ai{padding:14px;font:400 13px/1.62 var(--sans);color:var(--cream-62);text-wrap:pretty}
.who__ailist{border-top:1px solid rgba(253,246,236,.16);font:400 11px var(--mono)}
.who__ailist>div{
  display:flex;justify-content:space-between;gap:12px;padding:9px 14px;
  border-bottom:1px dotted rgba(253,246,236,.16);
}
.who__ailist>div:last-child{border-bottom:0}
.who__ailist b{color:var(--cream);font-weight:600}
.who__ailist span{color:var(--cream-50);text-align:right}

.who__prompt{font:400 11px var(--mono);color:var(--cream-45);margin-bottom:10px}
.who__prompt span{color:var(--amber)}
.who__h3{font:800 30px var(--sans);letter-spacing:-.035em;color:var(--cream);margin-bottom:22px}
.who__blk{margin-bottom:20px}
.who__n{
  display:block;margin-bottom:7px;
  font:500 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--amber);
}
.who__blk p{font:400 15px/1.68 var(--sans);color:var(--cream-82);text-wrap:pretty}
.who__facts{
  margin-top:26px;border-top:1px solid var(--rule-soft);
  font:400 11.5px/1.9 var(--mono);
}
.who__facts>div{display:flex;gap:14px;padding:7px 0;border-bottom:1px dotted rgba(253,246,236,.14)}
.who__facts>div:last-child{border-bottom:0}
.who__facts span{width:88px;flex:none;color:var(--cream-45);text-transform:uppercase;letter-spacing:.12em;font-size:10px}
.who__facts b{color:var(--cream-82);font-weight:400}

@media (max-width:900px){
  .who{padding:28px var(--pad-x)}
  .who__head{margin-bottom:18px}
  .who__grid{grid-template-columns:1fr;gap:20px}
  .who__h3{font-size:23px;margin-bottom:16px}
  .who__blk p{font-size:14px}
  .who__ailist span{font-size:10px}
  .who__facts span{width:70px;font-size:9px}
  .who__facts b{font-size:11px}
}

/* ==========================================================================
   Lagoon band behind 05 — 08
   ========================================================================== */

.lagoon{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--r-lg);margin:0 var(--pad-x) var(--frame-gap);
}
.lagoon__img,.lagoon__strip{position:absolute;inset:0}
/* Flat colour only. This used to carry the still as a background image; with
   the video on top, that still showed through wherever the video did not
   reach — which is how a frame of the OLD artwork (with a second boat) ended
   up filling the right ~20% of the band. */
.lagoon__img{z-index:0;overflow:hidden;background:#7fd3dd}
/* Load-bearing: without this the <video> lays out at its intrinsic size
   instead of filling the layer, and that gap is what exposed the still. */
.lagoon__vid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 32%;
}
/* .lagoon__scrim is gone this revision — the loop plays at full vibrance. */
/* Right-hand strip. Anchored to the RIGHT in pixels, not at a percentage.
   The side column is 420px and .band__side insets its panels by 34px, so the
   panels begin 386px from the right edge; a 410px strip therefore starts 24px
   to their LEFT, exactly as the reference does, and Model C overlaps it.
   A percentage cannot do this: the reference canvas is 1280 but this card is
   inset by --pad-x, so 68% landed 2px to the RIGHT of the panels and the strip
   read as a hard edge behind them instead of a margin beside them. */
.lagoon__strip{
  z-index:1;top:0;bottom:0;right:0;left:auto;background:rgba(9,7,11,.46);
  display:none;                       /* desktop-only; enabled in the query below */
  /* Width is derived from the engagement grid so the strip's edge always falls
     21px INSIDE Model C — the line runs down through the card rather than
     stopping at its border. (100% - 108px)/3 is the engagement column width:
     108 = 2 x 40px section padding + 2 x 14px gaps. Model C's left edge sits
     (40 + col) from the right, so col+19 puts the strip 21px inside it.
     Holds at any card width; a fixed px or a % does not. */
  width:calc((100% - 108px)/3 + 19px);
}
/* Desktop only. `.lagoon .band` is 0,2,0 and a media query adds no specificity,
   so leaving this unscoped beat the 0,1,0 `.band{grid-template-columns:1fr}`
   in the mobile block — the band never stacked on a phone and the feed column
   stayed a clipped sliver with the strip showing behind it. */
@media (min-width:901px){
  .lagoon__strip{display:block}
  /* The feed column is narrowed to match: the strip must also clear the panels
     by 24px, and .band__side insets them 34px, so side = strip + 10px. */
  .lagoon .band{grid-template-columns:1fr calc((100% - 108px)/3 + 29px)}
}
.lagoon__in{position:relative;z-index:2}

/* the band's own furniture goes transparent — the lagoon is the background now */
.lagoon .band{border-bottom:0}
.lagoon .band__main{border-right:0}
.lagoon .band__side{background:transparent}
.lagoon .models{border-bottom:0;padding-top:0}

/* ghosted cells: readable panels floating on the photo */
.lagoon .revs,
.lagoon .feed,
.lagoon .vlist__row{
  border:1px solid rgba(253,246,236,.38);
  border-radius:var(--r-sm);overflow:hidden;
  background:rgba(9,7,11,.58);
}
.lagoon .thumbs{background:rgba(253,246,236,.16)}

/* ---- engagement cards: opaque windows onto one aligned lagoon crop -------
   Each card shows a different slice of the SAME image (offsets -40/-445/-849
   at -966px), so the three read as windows onto one continuous picture.
   Scrim first, photo second — the gradient is the readability layer. */
.models__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  background:none;border:0;border-radius:0;
}
.model{
  position:relative;overflow:hidden;
  border:2px solid #7d8b8b;border-radius:var(--r-sm);
  /* 27px, not 28: the rim went 1px -> 2px, so the inner box stays the same. */
  padding:27px;background-repeat:no-repeat;
}
.model>*{position:relative;z-index:2}
/* Model C is a self-contained window onto the same loop rather than a still
   crop. Offsets match the reference; they only pick a pleasing slice, they do
   not have to align with the band (which uses object-fit:cover at a different
   scale), so they are NOT re-derived for the inset card. */
.model__vid{
  position:absolute;left:-849px;top:-789px;width:1280px;height:1042px;
  object-fit:cover;object-position:center 32%;z-index:0;pointer-events:none;
}
.model--c{background-image:none;background-color:var(--ink)}
/* Readability scrim over the loop — without it the card's copy sits on bright
   moving water. Pseudo-element so Model C needs no extra markup. */
.model--c::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(9,7,11,.7)}
/* A and B are TRANSLUCENT SCRIMS, not baked-in crops. The band behind them is
   a live video now, so a static slice of the old still froze on the card and
   drifted out of step with the motion behind it — the "background stuck to
   them". Letting the real loop show through is the whole effect.
   C is the exception: it is an opaque window with its own synced loop. */
.model--a{background:rgba(9,7,11,.7)}
.model--b{background:rgba(242,240,235,.72);color:var(--paper-ink)}

@media (max-width:900px){
  .lagoon{margin:0 var(--pad-x) var(--frame-gap)}
  /* .lagoon__strip is display:none by default and only enabled >900px */
  .models__grid{grid-template-columns:1fr;gap:12px}
  /* The crops are aligned to the 1280 canvas; at 390px they would show
     meaningless slivers, so mobile keeps flat cards. */
  /* (removed) This forced background-color:var(--ink) — fully opaque — on all
     three cards. It was left over from when A and B carried static crops. */
/* Readability scrim over the loop — without it the card's copy sits on bright
   moving water. Pseudo-element so Model C needs no extra markup. */
.model--c::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(9,7,11,.7)}
  /* Only the band loop runs on mobile — three simultaneous decodes on a phone
     is a battery and scroll-jank cost for a card-sized crop. */
  .model__vid{display:none}
  /* C's loop is off on mobile, so its readability scrim has nothing to darken —
     it was just stacking .7 on top of the card's own .58 and reading as solid
     black. Without it C matches A. */
  .model--c::before{display:none}
  .model{background:rgba(9,7,11,.58);padding:22px}
  /* Match the desktop value; .9 read as opaque next to A's .58. */
  .model--paper{background:rgba(242,240,235,.72);color:var(--paper-ink)}
}

/* ---- 06 live from the shop: last three uploads ------------------------- */
.push{
  display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:10px;
  padding:9px 0;border-bottom:1px dotted rgba(253,246,236,.16);
  color:var(--cream);
}
.push:last-child{border-bottom:0}
a.push:hover{color:var(--cream)}
a.push:hover .push__name{color:var(--amber)}
.push__vis{
  font:600 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber);
}
.push__name{
  font:500 11.5px var(--mono);color:var(--cream);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.push__ago{font:400 11px var(--mono);color:rgba(253,246,236,.35)}


/* ==========================================================================
   PAGE 2 — quality.html
   Only what page 2 adds. Masthead, footer, type, tokens, .sechead, .btn and
   the card system are shared with page 1 above.
   ========================================================================== */

/* Active-page marker in the shared nav. */
.nav a.is-here{color:var(--amber);border-bottom:1px solid var(--amber);padding-bottom:2px}

/* --- hero ---------------------------------------------------------------
   The still is on the CONTAINER, not only the video's poster attribute.
   prefers-reduced-motion sets video{display:none}, which hides the poster
   with it — poster alone leaves a flat dark-green rectangle. */
.qhero{
  position:relative;
  background:url(assets/trees-still.jpg?v=9004859b) center 45%/cover no-repeat,#152018;
}
.qhero__vid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 45%;
  z-index:0;pointer-events:none;
}
.qhero__scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,rgba(10,8,12,.42),rgba(10,8,12,.14) 26%,rgba(10,8,12,.3) 62%,rgba(10,8,12,.62));
}
/* Same treatment as page 1: dissolve the bottom edge rather than stopping dead. */
.qhero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:150px;
  z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(14,11,16,0),var(--ink));
}
.qhero__inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 396px;gap:48px;
  padding:96px var(--pad-x) 104px;
  /* The copy only needs ~490px, which barely showed the canopy. Give the loop
     room and centre the columns in it so the extra height reads as deliberate
     rather than as padding at the bottom. Capped in px so it does not become
     absurd on a tall desktop display. */
  min-height:min(76vh,780px);
  align-items:center;
}
.qpill{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px;
  border:1px solid rgba(253,246,236,.4);border-radius:100px;
  font:500 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--cream);margin:0 0 20px;
}
.qpill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber)}
.qh1{font:800 72px/.95 Archivo,system-ui,sans-serif;letter-spacing:-.045em;margin:0 0 18px;color:var(--cream)}
.qlede{font:400 16.5px/1.62 Archivo,system-ui,sans-serif;color:rgba(253,246,236,.85);max-width:48ch;margin:0 0 26px}
.qcta{display:flex;gap:12px;flex-wrap:wrap}

/* --- posture.json (mirrors capability.json) --- */
.qpost .kv__k{color:var(--cream-45)}
.qreadout{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule)}
.qreadout div{padding:12px 14px;border-right:1px solid var(--rule);font:400 9.5px/1.7 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cream-45)}
.qreadout div:last-child{border-right:0}
.qreadout b{display:block;font:600 15px var(--mono);letter-spacing:0;text-transform:none;color:var(--cream);margin-top:2px}
.qreadout .is-green{color:#39d353}

/* Page-2 sections are inset like page 1's; see LOCAL-DEVIATIONS C0 — the
   reference is a flush 1280 canvas, this site insets by --pad-x. */
.qsec{padding:44px var(--pad-x) 30px}
.qsec + .qsec{padding-top:10px}

/* A DARK pane. Do NOT reuse page 1's .matrix here — that one is the light
   paper fill from the drawing sheet and makes cream text unreadable. */
.qpane{
  border:1px solid var(--rule);border-radius:var(--r-sm);
  background:var(--ink-deep);overflow:hidden;
}

/* --- standards marquee --- */
.qmarq{overflow:hidden;margin:0 var(--pad-x) var(--frame-gap);border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--ink-deep)}
.qmarq__track{display:flex;gap:34px;padding:13px 0;width:max-content;animation:mipmarq 30s linear infinite}
.qmarq span{font:500 10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--cream-50);white-space:nowrap}
@keyframes mipmarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --- 01 standards matrix --- */
.qmx{width:100%;border-collapse:collapse}
.qmx th{
  padding:13px 16px;text-align:center;border-bottom:1px solid var(--rule);
  font:500 9.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--cream-45);
}
.qmx th:first-child{text-align:left}
.qmx td{padding:14px 16px;border-bottom:1px solid var(--rule);text-align:center;vertical-align:middle}
.qmx tr:last-child td,.qmx tr:last-child th{border-bottom:0}
.qmx__name{text-align:left}
.qmx__name b{display:block;font:600 13.5px var(--mono);color:var(--cream);letter-spacing:0}
.qmx__name span{display:block;margin-top:3px;font:400 10px var(--mono);color:var(--amber);letter-spacing:.02em}
/* tier marks — 1 lead (filled) · 2 advise (45deg hatch) · 3 network (outline) */
.mk{display:inline-block;width:13px;height:13px}
.mk--lead{background:var(--cream)}
.mk--advise{background:repeating-linear-gradient(45deg,var(--cream) 0 1.5px,transparent 1.5px 4px);outline:1px solid rgba(253,246,236,.5);outline-offset:-1px}
.mk--network{border:1px solid rgba(253,246,236,.5)}
.qkey{font:400 9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cream-45)}
.qchips{display:flex;flex-wrap:wrap;gap:8px;padding:16px 0 0}
.qchips span{padding:6px 12px;border:1px solid var(--rule);border-radius:100px;font:500 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cream-50)}

/* --- 02 the machinery --- */
.qmach{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.qmach__c{border:1px solid var(--rule);border-radius:var(--r-sm);padding:16px 17px;background:var(--ink-deep)}
.qmach__n{font:600 9.5px var(--mono);letter-spacing:.18em;display:block;margin-bottom:9px}
.qmach__c:nth-child(4n+1) .qmach__n{color:var(--amber)}
.qmach__c:nth-child(4n+2) .qmach__n{color:var(--coral)}
.qmach__c:nth-child(4n+3) .qmach__n{color:var(--rose)}
.qmach__c:nth-child(4n+4) .qmach__n{color:var(--violet)}
.qmach__t{font:700 17px Archivo,system-ui,sans-serif;color:var(--cream);margin:0 0 7px}
.qmach__d{font:400 12.5px/1.55 Archivo,system-ui,sans-serif;color:var(--cream-50);margin:0}

/* --- 03 validation + 04 filings, side by side --- */
.qsplit{display:grid;grid-template-columns:1fr 1fr;gap:var(--frame-gap);align-items:start}
.qval{width:100%;border-collapse:collapse}
.qval th{padding:11px 14px;text-align:left;border-bottom:1px solid var(--rule);font:500 9.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--cream-45)}
.qval td{padding:12px 14px;border-bottom:1px solid var(--rule);font:400 13px Archivo,system-ui,sans-serif;color:rgba(253,246,236,.86)}
.qval tr:last-child td,.qval tr:last-child th{border-bottom:0}
.qval__s{font:600 12px var(--mono);letter-spacing:.06em}
.qval tr:nth-child(1) .qval__s{color:var(--amber)}
.qval tr:nth-child(2) .qval__s{color:var(--coral)}
.qval tr:nth-child(3) .qval__s{color:var(--rose)}
.qval tr:nth-child(4) .qval__s{color:var(--violet)}
.qval tr:nth-child(5) .qval__s{color:#7fd3dd}
.qval__o{font:400 10.5px var(--mono);color:var(--cream-45);letter-spacing:.06em;white-space:nowrap}
.qfile{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 16px;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--ink-deep);margin-bottom:10px}
.qfile:last-child{margin-bottom:0}
.qfile b{display:block;font:700 13.5px Archivo,system-ui,sans-serif;color:var(--cream)}
.qfile span{display:block;margin-top:3px;font:400 10.5px var(--mono);color:var(--cream-45)}
.qfile__tag{font:600 9.5px var(--mono);letter-spacing:.18em;flex:none}
.qfile__tag--lead{color:var(--amber)}
.qfile__tag--advise{color:var(--cream-45)}

/* --- 05 how to start --- */
.qmodels{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.qmodel{border:2px solid #7d8b8b;border-radius:var(--r-sm);padding:24px;background:rgba(9,7,11,.7)}
/* Q2 is OPAQUE by design. On page 1 the paper card sits over the bright lagoon
   video and rgba(242,240,235,.72) composites to real paper. This section has no
   backdrop, so the same alpha over flat --ink lands at RGB(178,176,174) and the
   dark labels fall to 2.6:1. Do not restore the alpha without a backdrop. */
.qmodel--paper{background:#eae7e0;color:var(--paper-ink)}
.qmodel__h{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.qmodel__m{font:500 9.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--cream-45)}
.qmodel--paper .qmodel__m{color:var(--paper-ink-55)}
.qmodel__d{font:600 9.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.qmodel__t{font:800 25px Archivo,system-ui,sans-serif;letter-spacing:-.02em;margin:0 0 10px}
.qmodel__x{font:400 13px/1.55 Archivo,system-ui,sans-serif;color:var(--cream-50);margin:0 0 18px}
.qmodel--paper .qmodel__x{color:var(--paper-ink-55)}
/* The accent amber is 1.34:1 on #eae7e0 — effectively invisible. The card was
   made opaque to fix exactly this class of problem (a 2.6:1 label), so the
   duration gets a dark amber instead: same hue, 5.82:1. */
.qmodel--paper .qmodel__d{color:#7a4e08}
.qmodel__f{font:600 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cream)}
.qmodel--paper .qmodel__f{color:var(--paper-ink)}

@media (prefers-reduced-motion:reduce){
  .qhero__vid{display:none}
  .qmarq__track{animation:none}
}

@media (max-width:900px){
  .qhero__inner{
    grid-template-columns:1fr;gap:28px;
    padding:40px var(--pad-x) 48px;
    min-height:min(74vh,620px);
    align-items:start;
  }
  .qhero{background-position:center 42%}
  .qhero__vid{object-position:center 42%}
  .qh1{font-size:42px;line-height:.96}
  .qmach{grid-template-columns:1fr;gap:12px}
  .qsplit{grid-template-columns:1fr;gap:14px}
  .qmodels{grid-template-columns:1fr;gap:12px}
  .qmodel{padding:22px}
  .qmarq{margin:0 var(--pad-x) 14px}
  /* The matrix is wider than 390px; give it its own scroll pane with a visible
     bar, matching how page 1 handles the capability matrix. */
  /* `scroll`, not `auto` — same reason as page 1's .matrix-scroll: iOS hides
     overlay scrollbars until you drag, so the matrix would not read as
     scrollable. Colours inverted here because this pane is dark. */
  .qmx-scroll{
    overflow-x:scroll;-webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:rgba(253,246,236,.5) rgba(253,246,236,.12);
  }
  .qmx-scroll::-webkit-scrollbar{height:8px;-webkit-appearance:none}
  .qmx-scroll::-webkit-scrollbar-track{background:rgba(253,246,236,.10)}
  .qmx-scroll::-webkit-scrollbar-thumb{
    background:rgba(253,246,236,.5);border-radius:100px;
    border:2px solid transparent;background-clip:content-box;
  }
  .qmx{min-width:660px}
  /* Keep the standard designator on one line; only its subtitle may wrap. */
  .qmx__name b{white-space:nowrap}
}