/* ============================================================
   THE YELLOW LEDGER — zeroto1.co
   Paper is the environment. Ink is the voice. Film is the proof.
   ============================================================ */

:root{
  /* paper — a tonal field, never one flat hex */
  --paper-hi:   #FFE93B;
  --paper:      #F7DC14;
  --paper-low:  #EDCE06;
  --paper-deep: #E0BE00;
  --paper-dusk: #C7A404;
  --amber:      #9C7E03;

  /* ink */
  --ink:        #171204;
  --ink-80:     rgba(23,18,4,.8);
  --ink-60:     rgba(23,18,4,.62);
  --ink-40:     rgba(23,18,4,.4);
  --ink-25:     rgba(23,18,4,.25);
  --ink-14:     rgba(23,18,4,.14);
  --ink-08:     rgba(23,18,4,.08);

  /* film */
  --film:       #0D0B06;
  --film-2:     #171208;
  --tungsten:   #FFB846;
  --tungsten-2: #FFDD7A;

  --serif: "Mona Sans", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif-text: "Libre Caslon Text", Georgia, serif;
  --grot:  "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono:  "Fragment Mono", "Courier New", monospace;

  --w: min(1360px, 100vw - 8rem);
  --rule: 1px solid var(--ink);
  --hair: 1px solid var(--ink-25);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; overflow-x: hidden; overflow-x: clip; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background:
    radial-gradient(120% 90% at 50% -10%, var(--paper-hi) 0%, transparent 55%),
    radial-gradient(140% 120% at 50% 115%, var(--paper-dusk) 0%, transparent 46%),
    linear-gradient(178deg, var(--paper) 0%, var(--paper) 46%, var(--paper-low) 100%);
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--grot);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; overflow-x: clip;
}

::selection{ background: var(--ink); color: var(--paper); }
html{ scrollbar-color: var(--ink) var(--paper-low); scrollbar-width: thin; }
body::-webkit-scrollbar{ width: 10px; }
body::-webkit-scrollbar-track{ background: var(--paper-low); }
body::-webkit-scrollbar-thumb{ background: var(--ink); border: 2px solid var(--paper-low); }

a{ color: inherit; }
:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 1px; }

/* paper grain over everything */
.grain{
  position: fixed; inset: 0; z-index: 60; pointer-events: none; /* was inset:-50%: iOS Safari counts oversized fixed layers toward the scroll width and shrinks the page to fit */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .07; mix-blend-mode: multiply;
}

.wrap{ width: var(--w); margin-inline: auto; }

/* ------------------------------------------------------------
   Type
------------------------------------------------------------ */
.d1,.d2,.d3{ font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em; }
.d1{ font-size: clamp(3rem, 6.6vw, 6rem); line-height: .98; }
.d2{ font-size: clamp(2.4rem, 4.6vw, 4.4rem); line-height: 1.02; }
.d3{ font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.12; }
em.sw{ font-style: italic; letter-spacing: -0.01em; }

.section-head{
  position:relative; display:flex; align-items: baseline; gap: 1.25rem;
  border-top: var(--rule); padding-top: .8rem; margin-bottom: clamp(2.6rem, 5vw, 4.2rem);
}
.section-head .no{ font-family: var(--mono); font-size: .78rem; color: var(--ink-60); white-space: nowrap; }
.section-head .ti{
  font-family: var(--grot); font-weight: 600; font-size: .82rem;
  letter-spacing: .14em; text-transform: uppercase;
}
.section-head .fill{ flex:1; border-bottom: var(--hair); transform: translateY(-.42em); }
.section-head .folio{ font-family: var(--mono); font-size: .78rem; color: var(--ink-60); }
.section-head .stamp{ position:absolute; right:0; top:.55rem; width:52px; height:52px; display:block; border:1px solid var(--ink); border-radius:0; padding:0; background:none; box-shadow:none; object-fit:cover; } /* divider stamp: the mark, still only, out of the flow so the head keeps its height */

.foot{ font-size: .8rem; color: var(--ink-60); line-height: 1.5; }
sup.fn{ font-family: var(--mono); font-size: .55em; vertical-align: super; margin-left: .25em; color: var(--ink-80); }

/* ------------------------------------------------------------
   Masthead
------------------------------------------------------------ */
.masthead{
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(180deg, var(--paper-hi), var(--paper));
  border-bottom: var(--rule);
  transition: box-shadow .35s ease;
}
.masthead.scrolled{ box-shadow: 0 10px 30px -18px rgba(23,18,4,.45); }
.masthead .bar{
  width: var(--w); margin-inline: auto;
  display:flex; align-items:center; gap: 2rem;
  padding: .9rem 0;
}
.masthead::after{
  content:""; display:block; height: 3px; margin-top: 0;
  background: var(--ink);
}
.brand{ display:flex; align-items:center; gap:.8rem; text-decoration:none; }
.brand svg{ display:block; height: 26px; width:auto; }
.brand img{ display:block; height: 17px; width:auto; }
.mast-nav{ margin-left:auto; display:flex; gap: 1.9rem; }
.mast-nav a{
  font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; position: relative; padding: .2rem 0;
}
.mast-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background: var(--ink);
  transition: right .28s cubic-bezier(.2,.7,0,1);
}
.mast-nav a:hover::after{ right:0; }

/* buttons — inked ledger buttons */
.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family: var(--grot); font-weight: 600; font-size: .84rem;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  padding: 1.02rem 1.6rem; border: 1.5px solid var(--ink);
  background: var(--ink); color: var(--paper);
  box-shadow: 0 6px 18px -8px rgba(23,18,4,.55);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  cursor: pointer; white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(23,18,4,.6); }
.btn:active{ transform: translateY(0); box-shadow: 0 3px 10px -6px rgba(23,18,4,.6); }
.btn.ghost{ background: transparent; color: var(--ink); box-shadow:none; }
.btn.ghost:hover{ background: var(--ink); color: var(--paper); }
svg.arr{ width: .95em; height: .95em; flex: none; display:inline-block; vertical-align: -0.08em; transition: transform .2s ease; }
.btn:hover svg.arr, .tlink:hover svg.arr, .sur-row:hover svg.arr{ transform: translateX(3px); }
.btn.small{ padding: .68rem 1.1rem; font-size: .76rem; }

/* text links */
.tlink{
  display:inline-flex; align-items:baseline; gap:.55rem;
  font-weight:600; font-size:.84rem; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; border-bottom: 2px solid var(--ink); padding-bottom:.28rem;
  transition: gap .2s ease, color .2s ease;
}
.tlink:hover{ gap: .95rem; }

/* ------------------------------------------------------------
   Film plates
------------------------------------------------------------ */
.plate{
  position: relative; background: var(--film); overflow: hidden;
  border: 1px solid var(--ink);
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 24px 50px -30px rgba(23,18,4,.75),
    0 6px 16px -10px rgba(23,18,4,.5);
}
.plate::before{ /* film grain */
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity:.14; mix-blend-mode: screen;
}
.plate::after{ /* lens vignette */
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background: radial-gradient(120% 100% at 50% 42%, transparent 42%, rgba(0,0,0,.55) 100%);
}
.plate .scene{ position:absolute; inset:0; z-index:1; }
.plate .tag{
  white-space:nowrap;
  position:absolute; z-index:4; left: .9rem; bottom: .8rem; right:.9rem;
  display:flex; justify-content:space-between; gap:1rem;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .08em;
  color: rgba(255,235,0,.85);
  text-transform: uppercase;
}
.plate .tag .shoot{ color: rgba(255,255,255,.55); }

/* scene recipes — cinematic stand-ins, abstract by intent */
.scene.studio{
  background:
    /* key light cone */
    conic-gradient(from 195deg at 66% 18%, transparent 0 40%, rgba(255,196,90,.16) 47%, rgba(255,196,90,.05) 55%, transparent 62%),
    radial-gradient(34% 26% at 66% 20%, rgba(255,199,92,.55), rgba(255,184,70,.14) 60%, transparent 75%),
    radial-gradient(20% 15% at 28% 52%, rgba(255,221,122,.2), transparent 70%),
    /* ring-light stand */
    linear-gradient(rgba(255,221,122,.30), rgba(255,221,122,.04)) 67.5% 72% / 2px 34% no-repeat,
    /* floor wash + reflection */
    radial-gradient(70% 26% at 55% 88%, rgba(255,184,70,.22), transparent 72%),
    linear-gradient(180deg, #1A1408 0%, #0E0B06 52%, #090805 78%, #0C0A06 100%);
}
.scene.studio::before{
  content:""; position:absolute; left:10%; right:10%; top:74%; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,221,122,.4) 30%, rgba(255,221,122,.4) 70%, transparent);
}
.scene.studio::after{ /* ring light on its stand */
  content:""; position:absolute; left:52%; top:14%; width:30%; aspect-ratio:1; border-radius:50%;
  border: 2.5px solid rgba(255,231,150,.9);
  box-shadow:
    0 0 30px 6px rgba(255,196,90,.55),
    0 0 90px 30px rgba(255,184,70,.22),
    inset 0 0 34px 10px rgba(255,196,90,.35);
  background: radial-gradient(closest-side, rgba(255,214,120,.16), transparent);
}
.scene.shelf{
  background:
    radial-gradient(8% 14% at 20% 40%, rgba(255,221,122,.75), transparent 70%),
    radial-gradient(8% 14% at 38% 39%, rgba(255,199,92,.6), transparent 70%),
    radial-gradient(8% 14% at 57% 41%, rgba(255,221,122,.65), transparent 70%),
    radial-gradient(8% 14% at 76% 40%, rgba(255,199,92,.5), transparent 70%),
    radial-gradient(7% 12% at 30% 72%, rgba(255,221,122,.4), transparent 70%),
    radial-gradient(7% 12% at 52% 73%, rgba(255,199,92,.45), transparent 70%),
    radial-gradient(7% 12% at 70% 71%, rgba(255,221,122,.35), transparent 70%),
    radial-gradient(60% 40% at 50% 16%, rgba(255,184,70,.3), transparent 74%),
    linear-gradient(180deg, #17120A 0%, #0D0B06 70%, #0A0906 100%);
}
.scene.shelf::before{
  content:""; position:absolute; left:6%; right:6%; top:48%; height:1px;
  background: rgba(255,221,122,.45); box-shadow: 0 -14px 26px 2px rgba(255,184,70,.18);
}
.scene.shelf::after{
  content:""; position:absolute; left:6%; right:6%; top:80%; height:1px;
  background: rgba(255,221,122,.35); box-shadow: 0 -12px 22px 2px rgba(255,184,70,.14);
}
.scene.adsglow{
  background:
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(255,235,0,.06) 27px 28px),
    radial-gradient(70% 55% at 26% 42%, rgba(255,184,70,.3), transparent 70%),
    linear-gradient(160deg, #120F08 0%, #0B0A06 100%);
}
.scene.crowd{
  background:
    radial-gradient(8px 8px at 22% 62%, rgba(255,221,122,.8), transparent 60%),
    radial-gradient(6px 6px at 38% 40%, rgba(255,184,70,.7), transparent 60%),
    radial-gradient(10px 10px at 57% 68%, rgba(255,221,122,.6), transparent 60%),
    radial-gradient(7px 7px at 72% 34%, rgba(255,184,70,.75), transparent 60%),
    radial-gradient(5px 5px at 84% 58%, rgba(255,221,122,.6), transparent 60%),
    radial-gradient(9px 9px at 12% 30%, rgba(255,184,70,.5), transparent 60%),
    radial-gradient(80% 60% at 50% 80%, rgba(255,184,70,.14), transparent 70%),
    linear-gradient(185deg, #14100A 0%, #0C0A06 100%);
  filter: blur(.4px);
}
.scene.blueprint{
  background:
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(255,235,0,.09) 34px 35px),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(255,235,0,.09) 34px 35px),
    radial-gradient(60% 50% at 60% 30%, rgba(255,184,70,.2), transparent 70%),
    linear-gradient(180deg, #100D07 0%, #0B0906 100%);
}
.scene.portrait{
  background:
    /* soft key from upper left, falloff to seat */
    radial-gradient(46% 30% at 34% 22%, rgba(255,214,120,.52), rgba(255,184,70,.12) 62%, transparent 78%),
    radial-gradient(60% 44% at 50% 60%, rgba(255,184,70,.1), transparent 72%),
    radial-gradient(80% 30% at 50% 96%, rgba(255,184,70,.14), transparent 75%),
    linear-gradient(168deg, #1A1409 0%, #0E0B06 56%, #090806 100%);
}
.scene.portrait::before{
  content:""; position:absolute; left:24%; top:10%; width:24%; height:15%;
  border:1px solid rgba(255,228,140,.35); transform: skewX(-14deg);
  background: linear-gradient(180deg, rgba(255,228,140,.14), transparent);
  filter: blur(1px);
}
.scene.portrait::after{
  content:""; position:absolute; left:16%; right:16%; bottom:18%; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,221,122,.35), transparent);
  box-shadow: 0 -14px 40px 6px rgba(255,184,70,.12);
}
/* variant B — rim light from the right, low monitor glow (live) */
.scene.portrait.pb{
  background:
    radial-gradient(40% 46% at 86% 34%, rgba(255,214,120,.46), rgba(255,184,70,.1) 60%, transparent 76%),
    radial-gradient(34% 20% at 30% 78%, rgba(255,196,90,.3), transparent 70%),
    radial-gradient(80% 30% at 50% 98%, rgba(255,184,70,.12), transparent 75%),
    linear-gradient(192deg, #191308 0%, #0E0B06 54%, #090806 100%);
}
.scene.portrait.pb::before{
  left:auto; right:8%; top:16%; width:3%; height:44%; transform:none;
  border:0; border-radius:2px;
  background: linear-gradient(180deg, rgba(255,231,150,.7), rgba(255,196,90,.08));
  box-shadow: -6px 0 26px 4px rgba(255,196,90,.3);
  filter:none;
}
/* variant C — two key pools, two subjects */
.scene.portrait.pc{
  background:
    radial-gradient(30% 26% at 30% 24%, rgba(255,214,120,.48), rgba(255,184,70,.1) 62%, transparent 78%),
    radial-gradient(30% 26% at 72% 28%, rgba(255,214,120,.42), rgba(255,184,70,.08) 62%, transparent 78%),
    radial-gradient(70% 30% at 50% 96%, rgba(255,184,70,.14), transparent 75%),
    linear-gradient(174deg, #1A1409 0%, #0E0B06 58%, #090806 100%);
}
.scene.portrait.pc::before{
  left:20%; right:auto; top:9%; width:60%; height:12%;
  border:1px solid rgba(255,228,140,.28); transform: skewX(-8deg);
  background: linear-gradient(180deg, rgba(255,228,140,.1), transparent);
}
.scene.contentwall{
  --cell-w: 25%; --cell-h: 33.34%;
  background:
    /* lit cells of the wall */
    linear-gradient(180deg, rgba(255,199,92,.5), rgba(255,184,70,.12)) 0% 0% / var(--cell-w) var(--cell-h) no-repeat,
    linear-gradient(180deg, rgba(255,221,122,.34), rgba(255,184,70,.08)) 50% 33.4% / var(--cell-w) var(--cell-h) no-repeat,
    linear-gradient(180deg, rgba(255,199,92,.4), rgba(255,184,70,.1)) 100% 66.7% / var(--cell-w) var(--cell-h) no-repeat,
    linear-gradient(180deg, rgba(255,221,122,.22), transparent) 75% 0% / var(--cell-w) var(--cell-h) no-repeat,
    linear-gradient(180deg, rgba(255,221,122,.16), transparent) 25% 66.7% / var(--cell-w) var(--cell-h) no-repeat,
    repeating-linear-gradient(90deg, rgba(255,235,0,.08) 0 1px, transparent 1px 25%),
    repeating-linear-gradient(0deg, rgba(255,235,0,.08) 0 1px, transparent 1px 33.4%),
    radial-gradient(60% 50% at 50% 50%, rgba(255,184,70,.08), transparent 75%),
    linear-gradient(180deg, #131008 0%, #0B0A06 100%);
}

/* ------------------------------------------------------------
   FILM MEDIA — a plate accepts a muted loop, falls back to the still
------------------------------------------------------------ */
.filmmedia{ position:absolute; inset:0; z-index:1; }
.filmmedia video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition: opacity .8s ease;
}
.filmmedia.has-video video{ opacity:1; }
.filmmedia .scene{ position:absolute; inset:0; transition: opacity .8s ease; }
.filmmedia.has-video .scene{ opacity:0; }

/* ------------------------------------------------------------
   FILM BREAKS — reading happens on yellow, watching happens on black
------------------------------------------------------------ */
.film{ position:relative; padding: clamp(2.5rem, 5vw, 4.5rem) 0; background: var(--film); }
.sizzle{ padding: clamp(1rem, 2.5vw, 2rem) 0 clamp(2.4rem, 4vw, 3.4rem); }
.reel{ position:relative; margin:0; width: min(100%, 1040px); margin-inline:auto; aspect-ratio: 16/9; overflow:hidden; background: var(--film);
  border: 1px solid var(--ink); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 24px 50px -30px rgba(23,18,4,.75), 0 6px 16px -10px rgba(23,18,4,.5); }
.reel video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.reel .leader{ position:absolute; z-index:4; top:0; left:0; right:0; display:flex; justify-content:space-between; gap:1.5rem; padding: .9rem 1.4rem;
  font-family: var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color: rgba(255,235,0,.8); border-bottom: 1px solid rgba(255,235,0,.16); pointer-events:none; }
.hero-plate .hero-scroll{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.film .frame{
  position: relative; width: min(var(--w), 1040px); margin: 0 auto; aspect-ratio: 16/9; overflow: hidden;
  background: var(--film);
}
.film::before{ /* film grain, over the whole band so the frame never reads as a lighter rectangle */
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity:.13; mix-blend-mode: screen;
}
.film::after{ /* lens vignette */
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background: radial-gradient(120% 100% at 50% 44%, transparent 44%, rgba(0,0,0,.6) 100%);
}
.film .leader{
  position:absolute; z-index:4; top:0; left:0; right:0;
  display:flex; justify-content:space-between; gap:1.5rem;
  padding: 1.05rem clamp(1.5rem, 4vw, 4rem);
  font-family: var(--mono); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase;
  color: rgba(255,235,0,.8); border-bottom: 1px solid rgba(255,235,0,.16);
  white-space: nowrap;
}
.film .leader .shoot{ color: rgba(255,255,255,.5); }
.film .film-line{
  position:absolute; z-index:4;
  left: clamp(1.5rem, 4vw, 4rem); bottom: clamp(1.8rem, 4.5vw, 3.6rem);
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 2.4rem); line-height: 1.2; letter-spacing: -0.01em;
  color: var(--paper); max-width: 22ch; text-wrap: balance;
}
.film .film-line::before{
  content:""; display:block; width: 52px; margin-bottom: 1rem;
  border-top: 2px solid rgba(255,235,0,.85);
  box-shadow: 0 0 18px rgba(255,184,70,.4);
}

/* ------------------------------------------------------------
   HERO
------------------------------------------------------------ */
.hero{ position: relative; padding: clamp(3.4rem, 6.5vw, 6rem) 0 clamp(3rem, 5vw, 4.6rem); }
.hero .wrap{ position: relative; }
.cropmark{ position:absolute; width:18px; height:18px; border-color: var(--ink-40); border-style: solid; border-width:0; }
.cm-tl{ top:-10px; left:-26px; border-top-width:1px; border-left-width:1px; }
.cm-tr{ top:-10px; right:-26px; border-top-width:1px; border-right-width:1px; }
.cm-bl{ bottom:-6px; left:-26px; border-bottom-width:1px; border-left-width:1px; }
.cm-br{ bottom:-6px; right:-26px; border-bottom-width:1px; border-right-width:1px; }

.hero-top{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family: var(--mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--ink-60); margin-bottom: clamp(2.2rem, 4vw, 3.6rem);
}
.hero-grid{
  display:grid; grid-template-columns: 1fr clamp(230px, 22vw, 320px);
  gap: clamp(2rem, 4vw, 4.5rem); align-items: stretch;
}
.hero h1{
  font-family: var(--serif); font-weight:400;
  font-size: clamp(3.1rem, 6.8vw, 6rem);
  line-height: .97; letter-spacing: -0.018em;
  max-width: 11ch;
}
.hero h1 .ln{ display:block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em; }
.hero h1 .ln > span{ display:block; }
.hero-sub{
  margin-top: clamp(2rem, 3.4vw, 3rem);
  display:grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr);
  gap: 2.5rem; align-items:end;
}
.hero h2{
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(1.35rem, 2.1vw, 1.9rem); line-height: 1.25; letter-spacing: -0.005em;
  max-width: 24ch;
}
.hero .lede{ font-size: 1.02rem; color: var(--ink-80); max-width: 44ch; border-left: 1px solid var(--ink-40); padding-left: 1.4rem; }
.hero-ctas{ display:flex; gap: 1rem; margin-top: clamp(2.2rem, 3.6vw, 3.2rem); flex-wrap: wrap; }
.hero-plate{ min-height: 460px; height: 100%; margin-right: calc((100vw - var(--w)) / -2); border-right: 0; }

/* ------------------------------------------------------------
   FIGURES — audited table
------------------------------------------------------------ */
.figures{ padding: clamp(2rem,4vw,3rem) 0 clamp(3.4rem,5vw,4.6rem); }
.fig-table{
  border-top: 2.5px solid var(--ink); border-bottom: var(--rule);
  display:grid; grid-template-columns: repeat(5, 1fr);
}
.fig-cell{
  padding: 2.3rem 1.6rem 2rem 0; border-right: var(--hair); margin-right: 1.6rem;
  position: relative;
}
.fig-cell:last-child{ border-right: 0; margin-right: 0; }
.fig-cell .v{
  font-family: var(--serif); font-size: clamp(2.2rem, 3.4vw, 3.4rem);
  line-height: 1; letter-spacing: -0.02em; white-space: nowrap;
}
.fig-foot{
  display:flex; flex-wrap: wrap; gap: .5rem 2.2rem;
  border-bottom: var(--hair); padding: 1rem 0;
}
.fnote{ font-size: .8rem; color: var(--ink-80); }
.fnote i{ font-style: normal; font-family: var(--mono); font-size: .76rem; color: var(--ink-60); margin-right: .45rem; }
.fnote a{ color: inherit; text-underline-offset: 3px; }
.fig-notes{
  display:flex; justify-content: space-between; align-items: center; gap: 2rem;
  padding-top: 1rem; flex-wrap: wrap;
}
.stamps{
  display:flex; gap: .6rem; flex-wrap: wrap; flex: 1 1 0; min-width: 0; max-width: calc(100% - 270px); /* pills wrap into a block; the badge plate sits beside it at the block's height */
}
@media (max-width: 760px){ .stamps{ max-width: none; flex-basis: 100%; } }
.partner-badge{ display:block; width: 230px; height:auto; flex: 0 0 auto; align-self:center; margin-left:auto; filter: drop-shadow(0 14px 28px rgba(23,18,4,.28)); } /* TikTok-issued plate, used as supplied: the one dark object in the proof bar */
@media (max-width: 700px){ .partner-badge{ width: 180px; } }
.stamp{
  font-family: var(--mono); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--ink-60); padding: .42rem .7rem; border-radius: 999px;
  color: var(--ink-80); background: rgba(255,255,255,.14);
}

/* ------------------------------------------------------------
   BRANDS
------------------------------------------------------------ */
.brands{ padding: clamp(2.5rem,4vw,3.5rem) 0 clamp(3.6rem,6vw,5rem); }
.brand-grid{
  border-top: var(--rule); border-left: var(--hair);
  display:grid; grid-template-columns: repeat(7, 1fr);
}
.brand-cell{
  border-right: var(--hair); border-bottom: var(--hair);
  min-height: 132px; display:flex; align-items:center; justify-content:center;
  padding: 1.5rem 1.15rem;
  transition: background .25s ease;
}
.brand-cell img{
  display:block; width:100%; height:auto;      /* one canvas for every mark: they align by construction */
  opacity:.88; transition: opacity .25s ease, transform .25s ease;
}
.brand-cell:hover{ background: var(--paper-hi); }
.brand-cell:hover img{ opacity:1; transform: scale(1.035); }

/* ------------------------------------------------------------
   MANIFESTO
------------------------------------------------------------ */
.manifesto{ padding: clamp(3rem,6vw,5.5rem) 0; }
.mani-grid{ display:grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3.4fr); gap: clamp(2.5rem,5vw,5rem); }
.mani-grid h2{ margin-bottom: clamp(2rem,3.4vw,3rem); max-width: 12ch; }
.essay{
  font-family: var(--serif-text); font-size: 1.16rem; line-height: 1.72; color: var(--ink);
  max-width: 66ch;
}
.essay p + p{ margin-top: 1.4em; }
.essay .dropcap::first-letter{
  font-family: var(--serif); float:left; font-size: 4.35em; line-height: .78;
  padding: .08em .14em 0 0;
}
.margin-col{ border-left: var(--rule); padding-left: clamp(1.4rem,2.4vw,2.2rem); align-self: start; position: sticky; top: 96px; }
.mnote{ padding: 1.15rem 0 1.3rem; border-bottom: var(--hair); }
.mnote .mv{ font-family: var(--serif); font-size: clamp(1.9rem,2.6vw,2.5rem); line-height: 1; letter-spacing:-0.02em; }
.mnote .mvs{ font-family: var(--serif-text); font-style: italic; font-size: 1rem; color: var(--ink-80); margin-left:.4rem; }
.mnote .ml{ margin-top:.55rem; font-size:.78rem; color: var(--ink-60); line-height: 1.45; max-width: 26ch; }

.early{ margin-top: clamp(3rem,5vw,4.4rem); }
.early h3{
  font-family: var(--serif); font-weight:400; font-size: clamp(1.5rem,2vw,1.9rem);
  margin-bottom: 1.4rem;
}
.early-rows{ border-top: 2px solid var(--ink); }
.early-row{
  display:grid; grid-template-columns: 8ch 1fr auto; gap: 1.6rem; align-items: baseline;
  padding: 1.05rem 0; border-bottom: var(--hair);
}
.early-row .yr{ font-family: var(--serif); font-size: 1.55rem; letter-spacing: -0.01em; }
.early-row .what{ font-family: var(--serif-text); font-style: italic; font-size: 1.08rem; color: var(--ink-80); }
.early-row .tick{ font-family: var(--mono); font-size: .76rem; color: var(--ink-40); letter-spacing: .12em; }
.early .built{ margin-top: 1.6rem; font-family: var(--serif); font-weight: 600; font-size: clamp(1.15rem,1.7vw,1.4rem); letter-spacing:-.015em; line-height:1.3; max-width: 30ch; }
.shipt{
  margin-top: 1.8rem; padding-left: 1.4rem; border-left: 1px solid var(--ink-40);
  font-size: .92rem; color: var(--ink-80); max-width: 62ch;
}

/* ------------------------------------------------------------
   MACHINE
------------------------------------------------------------ */
.machine{ padding: clamp(3rem,6vw,5.5rem) 0; }
.machine-grid{ display:grid; grid-template-columns: minmax(0,5fr) minmax(0,6fr); gap: clamp(2.5rem,5vw,5rem); align-items:start; }
.machine h2{ max-width: 11ch; margin-bottom: 1.8rem; }
.machine .body{ font-family: var(--serif-text); font-size: 1.1rem; line-height: 1.7; max-width: 58ch; }
.machine .body b{ font-weight: 700; }
.machine .body p + p{ margin-top: 1.3em; }
.motto{
  margin-top: 2.2rem; display:inline-flex; align-items:center; gap: .9rem;
  font-family: var(--grot); font-weight: 700; font-size: .84rem; letter-spacing: .16em; text-transform: uppercase;
  border: 1.5px solid var(--ink); padding: .78rem 1.15rem;
  background: rgba(255,255,255,.16);
}
.motto .dot{ width: .55em; height: .55em; border-radius: 50%; background: var(--ink); }
/* ---- the creator flywheel ---- */
.fly-card svg.flywheel{ display:block; width:100%; height:auto; overflow:visible; --halo: #1E3D8F; }
.flywheel .mark-bar{ fill: var(--ink); }
.flywheel .mark-ring{ fill:none; stroke: var(--ink); stroke-width: 3; }
.flywheel .rail{ fill:none; stroke: var(--ink); stroke-width: 1.6; opacity:.9; }
.flywheel .inring{ fill:none; stroke: var(--ink); stroke-width: 1.2; opacity:.6; }
.flywheel .halo{ fill:none; stroke: var(--halo); stroke-width: 2; opacity:.9; }
.flywheel .halofill{ fill: var(--halo); fill-opacity:.09; }
.flywheel .ghost{ fill:none; stroke: var(--halo); stroke-width: 1; opacity:.32; animation: ghostin .8s ease-out both; }
@keyframes ghostin{ from{ opacity:.9; } to{ opacity:.32; } }
.flywheel .ripple{ fill:none; stroke: var(--halo); stroke-width: 2.5; pointer-events:none; }
.flywheel .flow{ fill:none; stroke: var(--ink); stroke-width: 1.6; opacity:.8; }
.flywheel .flow-arrow{ fill:none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity:.8; }
.flywheel .dot{ fill: var(--ink); opacity:.85; transform-box: fill-box; transform-origin: center; }
.flywheel .dot.new{ animation: dotin .5s cubic-bezier(.2,.9,.2,1) both; }
@keyframes dotin{ from{ opacity:0; transform: scale(.2);} to{ opacity:.85; transform: scale(1);} }
.flywheel text{ font-family: var(--mono); fill: var(--ink); letter-spacing: .12em; }
.flywheel .knock{ stroke: var(--paper); stroke-width: 5; paint-order: stroke; stroke-linejoin: round; }
.flywheel .slab{ font-size: 14px; font-weight:700; letter-spacing:.16em; }
.flywheel .plab{ font-size: 12px; font-weight:600; letter-spacing:.14em; }
.flywheel .halolab{ font-size: 12px; font-weight:700; letter-spacing:.2em; fill: var(--halo); }
.flywheel .halosub{ font-size: 10.5px; font-style: italic; letter-spacing:.06em; fill: var(--halo); opacity:.85; }
.flywheel .hublab{ font-size: 10px; opacity:.78; }
.flywheel .ann{ font-size: 11.5px; opacity:.68; font-style: italic; letter-spacing:.06em; }
.flywheel .hovernote{ font-size: 12px; opacity:0; transition: opacity .25s; letter-spacing:.06em; }
.flywheel .hovernote.on{ opacity:.85; }
.flywheel .tick{ stroke: var(--ink); stroke-width: 2.2; }
.flywheel .pad{ fill: transparent; cursor: help; }
.flywheel .station:focus, .flywheel .pillar:focus{ outline: none; }
.flywheel .station:focus .slab, .flywheel .station:hover .slab, .flywheel .pillar:focus .plab, .flywheel .pillar:hover .plab{ text-decoration: underline; text-underline-offset: 3px; }
.flywheel .pay{ stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; opacity:0; transform-box: fill-box; transform-origin: center; }
.flywheel .pay.hit{ animation: payhit .7s ease-out both; }
@keyframes payhit{ 0%{ opacity:0; transform: scale(.4);} 25%{ opacity:1; transform: scale(1.25);} 100%{ opacity:0; transform: scale(1);} }
.flywheel .tk{ fill: var(--ink); }
.flywheel .stamp{ fill: var(--ink); opacity:.16; transition: opacity .2s; } .flywheel .stamp.on{ opacity:1; }
.flywheel .token, .flywheel .pillar{ will-change: transform; }
html.flat .flywheel .pay{ opacity:0; } html.flat .flywheel .stamp{ opacity:1; } html.flat .flywheel .mark-bar, html.flat .flywheel .mark-ring{ display:none; }
@media (max-width: 700px){
  /* mobile pass: tap targets ≥ 40px tall on text links, mono labels never under 11px */
  .tlink, .sur-row .lab, .colo-right a, .colo-foot span{ display:inline-block; padding-block:.5rem; }
  .sur-row .go .lab{ padding-block:.4rem; }
  .chip, .plate.server .nm, .srv-head, .srv-chan, .film-plate .fp-head, .film-plate .fp-foot{ font-size: 11px; }
  .figure-card .fig-head{ flex-direction:column; align-items:flex-start; gap:.25rem; } .figure-card .fig-head span:last-child{ font-size:.66rem; }
  .pod-card .podfig-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; margin: 0 -.4rem; padding: 0 .4rem; }
  .pod-card svg.podfig{ min-width: 640px; } .bench-exhibits > *, .pod-card, .figure-card{ min-width:0; }
  .pod-card .fig-foot{ flex-direction:column; gap:.3rem; }
  .surfaces .sur-row .go .lab{ display:inline-block; padding: .55rem 0 .45rem; }
  .fig-notes a, .fig-foot a, .colo-right div a, .hero-sub a{ display:inline-block; padding-block:.45rem; }
  .cases .cs-body .lab{ display:inline-block; padding: .5rem 0; }
  .hero-top span:last-child{ display:none; }
  .srv-feed{ --feed-h: 19rem; }
  .film{ height:auto; } .film .frame{ aspect-ratio:auto; } .film .filmmedia{ position:relative; inset:auto; aspect-ratio:16/9; }
  .film .film-line{ position:static; margin: 1rem 1.1rem 1.25rem; max-width:none; font-size: 1.35rem; }
  .film .film-line::before{ margin-bottom:.7rem; width: 40px; }
  .film .film-line.stat::after{ display:none; } .film .film-line.stat .v{ font-size: 2.8rem; text-shadow:none; } .film .film-line.stat .k{ text-shadow:none; }
  .pod-card .podfig-scroll{ -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
}
@media (max-width: 700px){
  .flywheel .slab{ font-size: 21px; } .flywheel .plab{ font-size: 16px; } .flywheel .halolab{ font-size: 18px; } .flywheel .halosub{ font-size: 15px; }
  .flywheel .hublab{ font-size: 14px; } .flywheel .ann{ font-size: 15px; } .flywheel .hovernote{ display:none; }
  .flywheel .knock{ stroke-width: 6; }
}
@media (max-width: 900px){ .machine-grid{ grid-template-columns: 1fr; } }
.figure-card{ border: var(--rule); background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0)); padding: clamp(1.4rem,2.4vw,2.2rem); box-shadow: 0 20px 44px -30px rgba(23,18,4,.55); }
.figure-card .fig-head{
  display:flex; justify-content:space-between; align-items: baseline; margin-bottom: 1.2rem;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-60);
}
.figure-card svg{ display:block; width: 100%; height: auto; }
.fig-cap{ margin-top: 1.1rem; font-family: var(--serif-text); font-style: italic; font-size: .95rem; color: var(--ink-80); }

/* ------------------------------------------------------------
   SURFACES index
------------------------------------------------------------ */
.surfaces{ padding: clamp(3rem,6vw,5.5rem) 0; }
.sur-rows{ border-top: 2.5px solid var(--ink); }
.sur-row{
  display:grid; grid-template-columns: 5.5ch minmax(0,1fr) minmax(0,1.25fr) 172px;
  gap: clamp(1.2rem,2.6vw,2.6rem); align-items:center;
  padding: 1.7rem 0; border-bottom: var(--rule);
  text-decoration:none; position:relative;
}
.sur-row .idx{ font-family: var(--mono); font-size: .8rem; color: var(--ink-60); }
.sur-row .name{
  font-family: var(--serif); font-size: clamp(1.5rem, 2.5vw, 2.3rem); line-height: 1.05; letter-spacing: -0.015em;
  transition: transform .28s cubic-bezier(.2,.7,0,1);
}
.sur-row:hover .name{ transform: translateX(.35em); }
.sur-row .hook{ font-size: .95rem; color: var(--ink-80); max-width: 40ch; }
.sur-row .go{
  justify-self:end; display:flex; flex-direction:column; align-items:flex-end; gap:.6rem;
}
.sur-row .go .lab{
  font-size:.76rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  border-bottom: 1.5px solid var(--ink); padding-bottom:.2rem; white-space:nowrap;
}
.sur-thumb{ width: 172px; height: 100px; }
.sur-thumb .tag{ display:none; }
/* isometric thumbs: still first, loop over it on hover (or in view on touch); the still "arrives" via the existing .drawn hook */
.sur-thumb.iso{ background:#000; }
.sur-thumb.iso .still, .sur-thumb.iso .loop{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.sur-thumb.iso .still{ opacity:0; transform: scale(.94); transition: opacity .55s ease, transform .9s cubic-bezier(.2,1.2,.3,1); }
.sur-thumb.iso.drawn .still{ opacity:1; transform:none; }
.sur-thumb.iso .loop{ opacity:0; transition: opacity .08s linear; pointer-events:none; }
.sur-thumb.iso.playing .loop{ opacity:1; }
.sur-row:hover .sur-thumb.iso .still, .sur-row:hover .sur-thumb.iso .loop{ transform: scale(1.04); transition: transform .25s cubic-bezier(.2,.9,.2,1), opacity .08s linear; }
html.flat .sur-thumb.iso .still{ opacity:1; transform:none; transition:none; }
@media (prefers-reduced-motion: reduce){ .sur-thumb.iso .still{ opacity:1; transform:none; transition:none; } .sur-thumb.iso .loop{ display:none; } }
.sur-row:hover .sur-thumb{ box-shadow: 0 16px 34px -18px rgba(23,18,4,.8); }

/* ------------------------------------------------------------
   PROOF
------------------------------------------------------------ */
.proof{ padding: clamp(3rem,6vw,5.5rem) 0; }
.proof h2{ max-width: 14ch; }

/* ---- where we play: the category band ---- */
.play{ padding: 0 0 clamp(3rem,6vw,5.5rem); }
.play .proof-lead{ margin-bottom: clamp(1.8rem,3.4vw,3rem); }
.band{ margin:0; }
.band-strip{ display:grid; grid-template-columns: 38fr 23fr 22fr 7fr 5fr 4fr 1fr; height: clamp(120px, 15vw, 190px); border-top: 2.5px solid var(--ink); border-bottom: var(--rule); }
.band .seg{ position:relative; overflow:hidden; border-right: 1px solid var(--ink-25); transform: scaleX(0); transform-origin: left center; transition: transform .75s cubic-bezier(.16,1,.3,1); }
.band .seg:last-child{ border-right:0; }
.band .seg:nth-child(2){ transition-delay:.06s } .band .seg:nth-child(3){ transition-delay:.12s } .band .seg:nth-child(4){ transition-delay:.18s } .band .seg:nth-child(5){ transition-delay:.24s } .band .seg:nth-child(6){ transition-delay:.30s } .band .seg:nth-child(7){ transition-delay:.36s }
.band.in .seg, html.flat .band .seg{ transform:none; }
.band .seg.s1{ background: var(--paper-hi); } .band .seg.s2{ background: var(--paper); } .band .seg.s3{ background: var(--paper-low); }
.band .seg.t1{ background: var(--ink); } .band .seg.t2{ background: var(--ink-80); } .band .seg.t3{ background: var(--ink-60); } .band .seg.t4{ background: var(--ink-40); }
.band .seg .v{ position:absolute; left:.8rem; top:.55rem; font-family: var(--serif); font-weight:640; font-stretch:112%; letter-spacing:-.03em; font-size: clamp(1.7rem,3.6vw,3.4rem); line-height:1; color: var(--ink); }
.band .seg .l{ position:absolute; left:.8rem; bottom:.7rem; font-family: var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-80); white-space:nowrap; }
.band-keys{ list-style:none; margin:.9rem 0 0; padding:0; display:flex; justify-content:flex-end; gap:1.6rem; font-family: var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-60); }
.band-keys .k{ display:flex; align-items:center; white-space:nowrap; }
.band-keys .k.core{ display:none; }
.band-keys .k i{ display:inline-block; width:10px; height:10px; margin-right:.5rem; background: var(--ink); border:1px solid var(--ink); }
.band-keys .k.t2 i{ background: var(--ink-80); } .band-keys .k.t3 i{ background: var(--ink-60); } .band-keys .k.t4 i{ background: var(--ink-40); }
.band-keys .k.s1 i{ background: var(--paper-hi); } .band-keys .k.s2 i{ background: var(--paper); } .band-keys .k.s3 i{ background: var(--paper-low); }
.band-keys .k b{ font-weight:400; color: var(--ink); margin-left:.4rem; }
.band figcaption{ margin-top:.9rem; font-family: var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-60); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:-1px; padding:0; border:0; }
@media (max-width: 700px){
  .band-strip{ height: 72px; }
  .band .seg .v, .band .seg .l{ display:none; }
  .band-keys{ flex-direction:column; gap:0; margin-top:.4rem; }
  .band-keys .k, .band-keys .k.core{ display:flex; justify-content:space-between; padding:.55rem 0 .55rem .9rem; border-left: 1px solid var(--ink-25); border-bottom: 1px solid var(--ink-14); }
  .band-keys .k i{ margin-right:auto; order:-1; margin-right:.6rem; }
  .band-keys .k b{ margin-left:1rem; }
}
/* ---- ACE tags on the proof ---- */
.proof-sub{ flex-basis:100%; margin:.9rem 0 0; font-family: var(--serif-text); font-size:1.08rem; line-height:1.5; color: var(--ink-80); max-width:60ch; }
.ace{ font-family: var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; border:1px solid var(--ink-60); border-radius:2px; padding:.18rem .45rem; color: var(--ink-80); white-space:nowrap; flex:none; line-height:1.2; }
.cs-top{ display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; flex-wrap:nowrap; }
.cs-top .cs-brand{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.case-a .fig-head .ace{ margin-left:auto; }
.halo-link{ margin-top:1.2rem; } .halo-link .tlink{ margin-top:.5rem; }
.proof-lead{ margin-bottom: clamp(2.6rem,4.5vw,4rem); display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; }
.case-a{
  border: var(--rule); background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.02));
  box-shadow: 0 26px 60px -34px rgba(23,18,4,.6);
  padding: clamp(1.6rem,3vw,3rem);
  display:grid; grid-template-columns: minmax(0,7fr) minmax(0,4fr); gap: clamp(2rem,4vw,3.6rem);
}
.case-a .chart-side .fig-head{
  display:flex; justify-content:space-between; margin-bottom: 1rem;
  font-family: var(--mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-60);
}
.case-a h3, .case-b h3{
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem,2.6vw,2.5rem);
  line-height: 1.05; letter-spacing: -0.015em; margin-bottom: 1.2rem;
}
.case-a .txt{ font-family: var(--serif-text); font-size: 1.02rem; line-height: 1.68; color: var(--ink); }
.case-honest{
  margin-top: 1.5rem; padding: 1.2rem 1.4rem; border-left: 2px solid var(--ink);
  background: rgba(255,255,255,.16);
  font-family: var(--serif-text); font-style: italic; font-size: .98rem; line-height: 1.6; color: var(--ink-80);
}
.case-a .tlink, .case-b .tlink{ margin-top: 1.6rem; }
.chart-notes{ display:flex; gap: 1.4rem; margin-top: 1rem; flex-wrap:wrap; }
.chart-note{ font-family: var(--mono); font-size: .76rem; letter-spacing:.05em; color: var(--ink-60); display:flex; align-items:center; gap:.5rem; }
.chart-note .key{ width: 22px; height: 0; border-top: 2px solid var(--ink); }
.chart-note .key.dash{ border-top-style: dashed; border-top-color: var(--ink-60); }

/* ---- case scroller ---- */
.cases{ margin-top: clamp(1.6rem,3vw,2.4rem); }
.cs-head{ display:flex; justify-content:space-between; align-items:center; padding: .6rem 0; border-top: var(--rule); }
.cs-head .mono{ font-family: var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-60); }
.cs-nav{ display:flex; align-items:center; gap:.8rem; }
.cs-btn{ width:38px; height:38px; border:1.5px solid var(--ink); background: transparent; color: var(--ink); font-family: var(--mono); font-size:1rem; cursor:pointer; display:grid; place-items:center; transition: background .2s, color .2s; }
.cs-btn:hover{ background: var(--ink); color: var(--paper); }
.cs-dots{ display:flex; gap:.4rem; } .cs-dots i{ width:8px; height:8px; border-radius:50%; border:1.5px solid var(--ink); display:block; } .cs-dots i.on{ background: var(--ink); }
.cs-track{ list-style:none; margin:0; padding: .4rem 0 1.2rem; display:flex; gap: clamp(1rem,2vw,1.6rem); overflow-x:auto; scroll-snap-type: x mandatory; scrollbar-width:none; -webkit-overflow-scrolling: touch; }
.cs-track::-webkit-scrollbar{ display:none; }
.cs-card{ flex: 0 0 min(100%, 1060px); scroll-snap-align: start; border: var(--rule); background: rgba(255,255,255,.1); box-shadow: 0 22px 50px -32px rgba(23,18,4,.55);
  display:grid; grid-template-columns: minmax(0,5.2fr) minmax(0,5.8fr); min-height: 380px; }
.cs-fig{ margin:0; position:relative; border-right: var(--rule); background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)); padding: 1.2rem 1.4rem 1rem; display:flex; flex-direction:column; }
.cs-figcap{ display:flex; justify-content:space-between; font-family: var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-60); margin-bottom:.6rem; }
.cs-fig .fig{ width:100%; height:auto; flex:1; }
.fig .grid path{ fill:none; stroke: var(--ink); stroke-width:1.2; opacity:.35; }
.fig .bands rect{ fill: var(--ink); opacity:.05; }
.fig .lab text, .fig text.lab{ font-family: var(--mono); font-size: 11px; letter-spacing:.08em; fill: var(--ink); opacity:.62; }
.fig .lab text.inv{ fill: var(--paper); opacity:.95; }
.fig .area{ fill: var(--ink); opacity:.08; } .fig .line{ fill:none; stroke: var(--ink); stroke-width:3; stroke-linejoin:round; stroke-linecap:round; }
.fig .dot{ fill: var(--ink); } .fig .dot.s{ opacity:.7; }
.fig text.call{ font-family: var(--serif); font-weight:700; font-size: 20px; fill: var(--ink); letter-spacing:-.01em; } .fig text.call.s{ font-size: 12px; font-family: var(--mono); font-weight:400; letter-spacing:.06em; opacity:.8; } .fig text.call.s.inv{ fill: var(--paper); opacity:1; }
.fig .bar{ fill: var(--ink); opacity:.28; } .fig .bar.hi{ opacity:1; }
.fig .arrow{ fill:none; stroke: var(--ink); stroke-width:2; stroke-dasharray: 4 5; }
.cs-body{ padding: clamp(1.4rem,2.6vw,2.4rem); display:flex; flex-direction:column; gap: .9rem; }
.cs-brand{ font-family: var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-60); }
.cs-body h3{ font-family: var(--serif); font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height:1.05; letter-spacing:-.02em; margin:0; }
.cs-body .txt{ font-family: var(--serif-text); font-size: 1.02rem; line-height:1.5; color: var(--ink-80); max-width: 46ch; margin:0; }
.cs-body .cb-figs{ margin-top:.4rem; display:flex; gap: clamp(1.2rem,2.4vw,2.4rem); flex-wrap:wrap; }
.cs-body .cb-figs .f{ min-width: 7ch; }
.cs-body .cb-figs .v{ font-family: var(--serif); font-weight:700; font-size: clamp(1.5rem,2.4vw,2.1rem); letter-spacing:-.02em; line-height:1; }
.cs-body .cb-figs .l{ font-size:.8rem; color: var(--ink-60); margin-top:.35rem; max-width: 16ch; }
.cs-body .lab{ margin-top:auto; }
@media (max-width: 900px){ .cs-card{ grid-template-columns: 1fr; } .cs-fig{ border-right:0; border-bottom: var(--rule); } }
.case-b{
  margin-top: clamp(1.6rem,3vw,2.4rem);
  border: var(--rule); background: rgba(255,255,255,.1);
  box-shadow: 0 22px 50px -32px rgba(23,18,4,.55);
  display:grid; grid-template-columns: minmax(0,4.4fr) minmax(0,6.6fr); min-height: 330px;
}
.case-b .plate{ border:0; border-right: var(--rule); box-shadow:none; }
.case-b .cb-body{ padding: clamp(1.6rem,3vw,2.6rem); display:flex; flex-direction:column; justify-content:center; }
.case-b .txt{ font-family: var(--serif-text); font-size: 1.02rem; line-height: 1.66; max-width: 52ch; }
.case-b .cb-figs{ display:flex; gap: 2.4rem; margin: 1.4rem 0 .2rem; flex-wrap:wrap; }
.case-b .cb-figs .f .v{ font-family: var(--serif); font-size: clamp(1.7rem,2.4vw,2.3rem); letter-spacing:-0.02em; }
.case-b .cb-figs .f .l{ font-size:.76rem; color: var(--ink-60); margin-top:.35rem; }

/* ------------------------------------------------------------
   ARMOR — protocol sheet
------------------------------------------------------------ */
.armor{ padding: clamp(3rem,6vw,5.5rem) 0; }
/* collage break: the knockout mark filled with creator footage, medium width on a flat band of the clip's own paper (#F6DA12) so it reads as transparent, no frame */
.pbreak{ padding:0; margin: calc(-1 * clamp(1.6rem,3.5vw,3rem)) 0; display:grid; place-items:center; position:relative; z-index:1; } /* pulled into the neighbours' padding; the loop's edges are feathered into the page paper, so no rectangle can show */
.pbreak-loop{ display:block; width:min(100%, 820px); aspect-ratio:1.81/1; height:auto; object-fit:cover; object-position: 50% 39%; /* v2 render carries 300px of headroom above the mark; this window keeps the raised hand with margin and trims only empty paper */
  -webkit-mask-image: radial-gradient(ellipse 60% 84% at 50% 50%, #000 62%, transparent 98%); mask-image: radial-gradient(ellipse 60% 84% at 50% 50%, #000 62%, transparent 98%); }
@media (prefers-reduced-motion: reduce){ .pbreak-loop{ pointer-events:none; } }
.protocol{
  border: 1.5px solid var(--ink);
  background:
    linear-gradient(180deg, var(--paper-hi) 0%, var(--paper) 60%);
  box-shadow: 0 30px 70px -40px rgba(23,18,4,.65), 0 4px 14px -8px rgba(23,18,4,.3);
  padding: clamp(1.8rem,3.4vw,3.4rem);
  position: relative;
}
.protocol::before{
  content:""; position:absolute; inset: 10px; border: 1px solid var(--ink-25); pointer-events:none;
}
.protocol .p-head{
  display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem; flex-wrap:wrap;
  border-bottom: var(--rule); padding-bottom: 1.4rem; margin-bottom: 2rem;
}
.protocol .p-head .t{ font-family: var(--serif); font-size: clamp(1.7rem,2.6vw,2.4rem); letter-spacing:-0.015em; }
.protocol .p-head .m{ font-family: var(--mono); font-size:.76rem; text-transform:uppercase; letter-spacing:.1em; color: var(--ink-60); }
.protocol .p-claim{
  font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem,1.9vw,1.7rem); line-height:1.3;
  max-width: 30ch; margin-bottom: 2rem;
}
.protocol .p-grid{ display:grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: clamp(2rem,4vw,3.6rem); align-items:start; }
.protocol .p-body + .p-body{ margin-top: 1rem; }
.p-body{ font-family: var(--serif-text); font-size: 1.02rem; line-height: 1.68; max-width: 56ch; }
.clock{ border-top: 2px solid var(--ink); }
.clock-row{
  display:grid; grid-template-columns: 9ch 1fr; gap: 1.5rem; align-items:baseline;
  padding: 1.1rem 0; border-bottom: var(--hair);
}
.clock-row .h{ font-family: var(--serif); font-size: clamp(1.8rem,2.4vw,2.3rem); letter-spacing:-0.02em; white-space:nowrap; }
.clock-row .h span{ font-family: var(--mono); font-size:.76rem; letter-spacing:.1em; color: var(--ink-60); margin-left:.3rem; }
.clock-row .w{ font-size:.9rem; color: var(--ink-80); line-height:1.5; }
.protocol .p-close{ margin-top: 1.6rem; font-family: var(--serif-text); font-style: italic; font-size: 1.05rem; }

/* ------------------------------------------------------------
   BENCH
------------------------------------------------------------ */
.bench{ padding: clamp(3rem,6vw,5.5rem) 0; }
.bench h2{ max-width: 13ch; margin-bottom: clamp(2.4rem,4vw,3.6rem); }
.bench-grid{ display:grid; grid-template-columns: repeat(20, 1fr); gap: clamp(1.2rem,2.2vw,2rem); }
.bench-grid .person{ grid-column: span 5; } .bench-grid .person:nth-child(n+5){ grid-column: span 4; }
.bench-grid .person:nth-child(n+5) .bio{ font-size:.86rem; }
.person .plate{ aspect-ratio: 4/4.35; }
.person .portrait-plate{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.person figcaption{ padding-top: 1.15rem; }
.person .nm{ font-family: var(--serif); font-size: 1.45rem; letter-spacing:-0.01em; }
.person .rl{ font-family: var(--mono); font-size:.76rem; text-transform:uppercase; letter-spacing:.12em; color: var(--ink-60); margin-top:.3rem; }
.person .bio{ margin-top:.8rem; font-size:.92rem; line-height:1.55; color: var(--ink-80); }
.bench-close{ margin-top: clamp(2.4rem,4vw,3.4rem); border-top: var(--rule); padding-top: 1.6rem; }
.bench-close .big{ font-family: var(--serif-text); font-size: 1.12rem; line-height: 1.65; max-width: 58ch; }
/* bench exhibits: the pod + the summit film plate */
.bench-exhibits{ margin-top: clamp(1.8rem,3vw,2.6rem); display:grid; grid-template-columns: minmax(0,1fr) minmax(260px, 340px); gap: clamp(1.4rem,2.6vw,2.4rem); align-items:start; }
.pod-card{ margin:0; }
.pod-card svg.podfig{ display:block; width:100%; height:auto; overflow:visible; }
.podfig text{ font-family: var(--mono); fill: var(--ink); letter-spacing:.12em; }
.podfig .box{ fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.podfig .box.lead{ stroke-width: 2.2; }
.podfig .wire{ stroke: var(--ink); stroke-width: 1.4; opacity:.85; }
.podfig .wire.bus{ stroke-width: 1.4; }
.podfig .cell{ fill: none; stroke: var(--ink); stroke-width: 1.5; }
.podfig .cell.open{ stroke-dasharray: 5 4; }
.podfig .hatch{ fill: url(#hatch); }
.podfig #hatch line{ stroke: var(--ink); stroke-width: 1.1; opacity:.55; }
.podfig .slab{ font-size: 12.5px; font-weight:700; letter-spacing:.16em; }
.podfig .nlab{ font-size: 10.5px; font-weight:600; letter-spacing:.12em; }
.podfig .idx{ font-size: 9px; opacity:.6; }
.podfig .ann{ font-size: 11px; font-style: italic; opacity:.68; letter-spacing:.06em; }
.podfig .hovernote{ font-size: 11.5px; opacity:0; transition: opacity .25s; letter-spacing:.06em; }
.podfig .hovernote.on{ opacity:.85; }
.podfig .node, .podfig .director{ cursor: help; } .podfig .node:focus, .podfig .director:focus{ outline:none; }
.podfig .node:hover .box, .podfig .node:focus .box{ fill: var(--ink); } .podfig .node:hover .nlab, .podfig .node:focus .nlab{ fill: var(--paper); }
.pod-card .fig-foot{ display:flex; justify-content:space-between; gap:1rem; margin-top: .6rem; padding-top: .7rem; border-top: 1px solid var(--ink-25); font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-60); }
.film-plate{ margin:0; padding: .9rem 1rem 1rem; display:flex; flex-direction:column; gap:.7rem; color: var(--paper); font-family: var(--mono); }
.film-plate .fp-head, .film-plate .fp-foot{ display:flex; justify-content:space-between; align-items:center; gap:.8rem; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color: rgba(255,235,0,.8); }
.film-plate .fp-foot{ color: rgba(255,255,255,.5); }
.film-plate .chip{ border: 1px solid rgba(255,235,0,.5); padding: .15rem .45rem; border-radius: 2px; letter-spacing:.08em; }
.film-plate .fp-media{ position:relative; aspect-ratio: 9 / 16; background: #000; overflow:hidden; }
.film-plate video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.film-plate .fp-play{ position:absolute; inset:0; margin:auto; width:72px; height:72px; border-radius:50%; border:1.5px solid var(--paper); background: rgba(13,11,6,.55); cursor:pointer; display:grid; place-items:center; transition: background .2s, transform .2s; }
.film-plate .fp-play:hover{ background: var(--paper); transform: scale(1.04); } .film-plate .fp-play:hover .tri{ border-left-color: var(--ink); }
.film-plate .fp-play .tri{ width:0; height:0; border-style:solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent var(--paper); margin-left: 4px; transition: border-color .2s; }
.film-plate.playing .fp-play{ display:none; }
.film-plate .fp-preview{ z-index:1; pointer-events:none; }
.film-plate .fp-play{ z-index:2; }
.film-plate.playing .fp-preview{ display:none; }
@media (prefers-reduced-motion: reduce){ .film-plate .fp-preview{ display:none; } }
@media (max-width: 900px){ .bench-exhibits{ grid-template-columns: 1fr; } .film-plate{ max-width: 340px; } }

/* ------------------------------------------------------------
   AI clause
------------------------------------------------------------ */
.ai{ padding: clamp(2.6rem,5vw,4.2rem) 0; }
.ai-box{
  display:grid; grid-template-columns: auto minmax(0,1fr) 400px; gap: clamp(1.6rem,3vw,3rem); align-items:start;
  border-top: var(--rule); border-bottom: var(--rule); padding: clamp(1.8rem,3vw,2.6rem) 0;
}
/* the creator server plate: Jonny covers the channels, people keep welcome and VIP */
.plate.server{ margin:0; width:100%; padding: 1.1rem 1.15rem 1.2rem; display:flex; flex-direction:column; gap:.8rem; color: var(--paper); font-family: var(--mono); font-size:.78rem; letter-spacing:.04em; }
.plate.server::after{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(120% 100% at 80% 0%, rgba(255,184,70,.16), transparent 55%); }
.srv-head{ display:flex; align-items:center; gap:.6rem; padding-bottom:.7rem; border-bottom: 1px solid rgba(247,220,20,.18); position:relative; z-index:1; }
.srv-head .dc{ width:20px; height:20px; fill: var(--paper); flex:0 0 auto; }
.srv-name{ text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; opacity:.85; }
.srv-bot{ margin-left:auto; display:inline-flex; align-items:center; gap:.45rem; font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color: var(--tungsten-2); }
.srv-bot .dot{ width:8px; height:8px; border-radius:50%; background: var(--paper); box-shadow: 0 0 0 0 rgba(247,220,20,.6); animation: srvpulse 1.8s ease-out infinite; }
@keyframes srvpulse{ 0%{ box-shadow:0 0 0 0 rgba(247,220,20,.55);} 100%{ box-shadow:0 0 0 9px rgba(247,220,20,0);} }
.srv-chan{ display:flex; align-items:center; gap:.4rem; font-size:.74rem; position:relative; z-index:1; }
.srv-chan .hash{ opacity:.45; } .srv-chan .who{ margin-left:auto; font-size:.6rem; text-transform:uppercase; letter-spacing:.1em; opacity:.6; white-space:nowrap; } .srv-chan .who b{ font-weight:400; opacity:1; color: var(--tungsten-2); }
.srv-feed{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; height: var(--feed-h, 15.5rem); justify-content:flex-end; position:relative; z-index:1; overflow:hidden; } /* fixed height: the feed must never resize the page as messages cycle (was min-height, which let long wrapped lines grow the plate and shove the sections below) */
.srv-feed li{ display:grid; grid-template-columns: 26px minmax(0,1fr); gap:.6rem; align-items:start; animation: msgin .38s cubic-bezier(.2,.8,.2,1) both; }
.srv-feed li.out{ animation: msgout .3s ease both; }
@keyframes msgin{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform:none;} }
@keyframes msgout{ to{ opacity:0; transform: translateY(-8px);} }
.srv-feed .av{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:.66rem; background: rgba(247,220,20,.14); color: var(--paper); border:1px solid rgba(247,220,20,.3); }
.srv-feed li.bot .av{ background: var(--paper); color: var(--film); border-color: var(--paper); }
.srv-feed .nm{ font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; opacity:.6; display:flex; gap:.45rem; align-items:center; }
.srv-feed li.bot .nm{ opacity:.9; color: var(--tungsten-2); }
.srv-feed .nm .bt{ font-size:.55rem; padding:.05rem .35rem; border-radius:3px; background: var(--paper); color: var(--film); letter-spacing:.12em; }
.srv-feed .tx{ font-family: var(--grot); font-size:.86rem; line-height:1.4; letter-spacing:0; color: rgba(255,245,200,.92); margin-top:.15rem; }
.srv-feed li.bot .tx{ color: var(--paper); }
.srv-feed .tp{ display:inline-flex; gap:5px; padding:.5rem .7rem; border-radius:12px; background: rgba(247,220,20,.1); margin-top:.2rem; }
.srv-feed .tp i{ width:6px; height:6px; border-radius:50%; background: var(--paper); opacity:.35; animation: srvtype 1.1s ease-in-out infinite; }
.srv-feed .tp i:nth-child(2){ animation-delay:.18s } .srv-feed .tp i:nth-child(3){ animation-delay:.36s }
@keyframes srvtype{ 0%,100%{ opacity:.35; transform: translateY(0);} 50%{ opacity:1; transform: translateY(-3px);} }
html.flat .srv-bot .dot, html.flat .srv-feed .tp i{ animation:none; } html.flat .srv-feed li{ animation:none; }
.ai-box .k{ font-family: var(--mono); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-60); padding-top:.4rem; white-space:nowrap; }
.ai-box .t{ font-family: var(--serif-text); font-size: clamp(1.1rem,1.7vw,1.45rem); line-height: 1.55; max-width: 52ch; }
.ai-side{ display:flex; flex-direction:column; gap: 1rem; }
.ai-side .t2{ margin:0; font-family: var(--serif-text); font-size: 1rem; line-height: 1.5; color: var(--ink-80); }
.ai-side .t2 b{ font-weight:700; color: var(--ink); }
.ai-box .t b{ font-family: var(--serif); font-weight:400; font-style: italic; }
.ai-copy{ display:flex; flex-direction:column; gap: 1.1rem; min-width:0; }
.ai-copy h2{ margin:0; max-width: 12ch; }
.ai-copy .t{ margin:0; }
.ai-rail{ list-style:none; margin:.4rem 0 0; padding:0; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 1.6rem; border-top: 2px solid var(--ink); }
.ai-rail li{ font-family: var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-80); padding:.7rem 0; border-bottom: 1px solid var(--ink-25); }
.ai-copy .tlink{ margin-top:.2rem; }
@media (max-width: 700px){ .ai-rail{ grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   TESTIMONIAL — deep gold field
------------------------------------------------------------ */
.testimonial{
  margin: clamp(3rem,6vw,5rem) 0;
  background:
    radial-gradient(90% 130% at 50% -20%, rgba(255,235,0,.35), transparent 60%),
    linear-gradient(180deg, var(--paper-deep), var(--paper-dusk));
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  padding: clamp(3.4rem,6.5vw,6rem) 0;
}
.testimonial blockquote{
  font-family: var(--serif); font-size: clamp(1.5rem, 2.7vw, 2.5rem); line-height: 1.32;
  letter-spacing: -0.012em; max-width: 30ch; line-height: 1.32;
}
.testimonial blockquote::before{ content:"“"; }
.testimonial blockquote::after{ content:"”"; }
.testi-grid{ display:grid; grid-template-columns: minmax(0,1fr) 340px; gap: clamp(2rem,5vw,5rem); align-items:center; }
.testi-body{ position:relative; }
.testi-mark{ position:absolute; left:-.08em; top:-.55em; font-family: var(--serif); font-weight:800; font-size: clamp(6rem, 11vw, 10rem); line-height:1; color: var(--ink); opacity:.16; pointer-events:none; }
.testimonial blockquote::before, .testimonial blockquote::after{ content:none; }
.testi-client{ margin:0; border: 1.5px solid var(--ink); background: linear-gradient(180deg, var(--paper-hi), var(--paper) 70%); padding: 1.3rem 1.5rem 1.5rem; box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 28px 60px -36px rgba(23,18,4,.75), 0 6px 16px -10px rgba(23,18,4,.4); position:relative; }
.testi-client::before{ content:"+"; position:absolute; left:.5rem; top:.3rem; font-family: var(--mono); font-size:.9rem; color: var(--ink-40); }
.testi-client::after{ content:"+"; position:absolute; right:.5rem; bottom:.25rem; font-family: var(--mono); font-size:.9rem; color: var(--ink-40); }
.tc-head, .tc-sub{ display:flex; justify-content:space-between; font-family: var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-60); }
.tc-logo{ display:block; width:58%; height:auto; margin: 1.2rem auto 1rem; }
.tc-rule{ border-top: 1px solid var(--ink-25); margin: .2rem 0 .9rem; }
.tc-brand{ display:block; width:62%; height:auto; margin: .7rem auto 0; opacity:.9; }
.testimonial .sig{ margin-top: 2.2rem; display:flex; align-items:center; gap: 1.1rem; }
.testimonial .sig .rulee{ width: 46px; border-top: 2px solid var(--ink); }
.testimonial .sig .who b{ font-weight: 700; }
.testimonial .sig .who{ font-size: .92rem; color: var(--ink-80); }
/* client quote rotator: the case scroller pattern, without the case-card chrome */
.quotes .cs-head{ border-top: 0; border-bottom: var(--rule); margin-bottom: clamp(1.6rem,3vw,2.6rem); }
.quotes .cs-track{ padding: 0; }
.qt-card{ flex: 0 0 100%; scroll-snap-align: start; border: 0; background: transparent; box-shadow: none; display:grid; grid-template-columns: minmax(0,1fr); align-content:center; padding: 0 .1rem; }
.qt-card.nologo .testi-grid{ grid-template-columns: minmax(0,1fr); }
.qt-card.nologo blockquote{ max-width: 34ch; }
.tc-logo.wide{ width: 78%; margin: 1.6rem auto 1.2rem; }
.tc-logo.tt path{ fill: var(--ink); } .tc-logo.tt text{ font-family: var(--serif); font-weight: 800; font-size: 30px; letter-spacing: -.02em; fill: var(--ink); }

/* ------------------------------------------------------------
   FINAL CTA — reply card
------------------------------------------------------------ */
.finale{ padding: clamp(3rem,6vw,5rem) 0 clamp(2rem,4vw,3rem); }
.reply{
  border: 1.5px solid var(--ink);
  background: linear-gradient(180deg, var(--paper-hi), var(--paper) 70%);
  box-shadow: 0 34px 80px -44px rgba(23,18,4,.7), 0 6px 18px -12px rgba(23,18,4,.35);
  padding: clamp(2rem,4.5vw,4.4rem);
  position:relative; overflow:hidden;
}
.reply::before{
  content:""; position:absolute; inset:10px; border:1px dashed var(--ink-25); pointer-events:none;
}
.reply .r-top{
  display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap;
  font-family: var(--mono); font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-60);
  margin-bottom: clamp(1.8rem,3vw,2.8rem);
}
.reply h2{
  font-family: var(--serif); font-weight:400; font-size: clamp(3rem, 7vw, 6rem);
  line-height: .98; letter-spacing:-0.02em; max-width: 13ch;
}
.reply .r-grid{ display:grid; grid-template-columns: minmax(0,7fr) minmax(0,4fr); gap: clamp(2rem,4vw,4rem); align-items:end; }
.reply .r-left h2{ margin-bottom: clamp(1.6rem,3vw,2.4rem); }
.reply .r-body{ font-family: var(--serif-text); font-size: 1.08rem; line-height: 1.68; max-width: 46ch; }
.reply .r-ctas{ display:flex; flex-direction:column; gap: .9rem; align-items:stretch; }
.reply .r-ctas .btn{ justify-content:center; }
/* finale CTA mark: ink-black card, right edge on the buttons' right edge, 32px above the first button; the mark never sits on bare paper */
.cta-mark{ margin: 0 0 calc(32px - .9rem); align-self:flex-end; width: 240px; text-align:right; }
.cta-mark .cta-card{ position:relative; width:240px; aspect-ratio:1; background:#0D0B06; border:1px solid var(--ink); overflow:hidden; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 24px 50px -30px rgba(23,18,4,.75); }
.cta-mark .cta-still, .cta-mark .cta-loop{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.cta-mark .cta-loop{ opacity:0; transition: opacity .5s ease; } .cta-mark.live .cta-loop{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .cta-mark .cta-loop{ display:none; } }

/* ------------------------------------------------------------
   FAQ + footer
------------------------------------------------------------ */
.faq{ padding: clamp(2.4rem,4vw,3.6rem) 0 clamp(3.4rem,6vw,5rem); }
.faq .wrap{ display:block; }
/* FAQ accordion: native <details name="faq"> (one open at a time), all collapsed on arrival */
.faq-item{ border-top: 2px solid var(--ink); display:block; }
.faq-item:last-of-type{ border-bottom: 2px solid var(--ink); }
.faq-item summary{ list-style:none; cursor:pointer; display:grid; grid-template-columns: 4ch minmax(0,1fr) 2.2rem; gap: clamp(1rem,2vw,2rem); align-items:center; padding: 1.15rem 0; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:focus-visible{ outline: 2px solid var(--ink); outline-offset: 4px; }
.faq-item .n{ font-family: var(--mono); font-size:.72rem; letter-spacing:.12em; color: var(--ink-60); }
.faq-item .q{ font-family: var(--serif); font-size: clamp(1.15rem,1.6vw,1.45rem); line-height: 1.2; max-width: 40ch; margin:0; color: var(--ink-80); transition: color .2s, font-size .25s; }
.faq-item summary:hover .q{ color: var(--ink); }
.faq-item[open] .q{ font-size: clamp(1.5rem,2.3vw,2.1rem); max-width: 26ch; color: var(--ink); }
.faq-item .plus{ position:relative; width: 2.2rem; height: 2.2rem; border: 1.5px solid var(--ink); border-radius: 50%; justify-self:end; transition: background .2s; }
.faq-item .plus::before, .faq-item .plus::after{ content:""; position:absolute; left:50%; top:50%; width: 12px; height: 1.6px; background: var(--ink); transform: translate(-50%,-50%); transition: transform .25s, background .2s; }
.faq-item .plus::after{ transform: translate(-50%,-50%) rotate(90deg); }
.faq-item[open] .plus{ background: var(--ink); } .faq-item[open] .plus::before, .faq-item[open] .plus::after{ background: var(--paper); }
.faq-item[open] .plus::after{ transform: translate(-50%,-50%) rotate(0deg); }
.faq-item .a{ display:grid; grid-template-columns: 4ch minmax(0,1fr) 2.2rem; gap: clamp(1rem,2vw,2rem); padding: .2rem 0 2rem; font-family: var(--serif-text); font-size: 1.02rem; line-height: 1.66; color: var(--ink); animation: faqin .35s ease-out both; }
.faq-item .a > *{ grid-column: 2; max-width: 60ch; margin: 0; }
.faq-item .a > p + p{ margin-top: .8em; }
@keyframes faqin{ from{ opacity:0; transform: translateY(-4px);} to{ opacity:1; transform:none;} }
.faq-item .a .worked{
  margin-top: 1.2rem; font-family: var(--mono); font-size: .76rem; line-height: 1.9; color: var(--ink-60);
  border-left: 1px solid var(--ink-40); padding-left: 1.2rem;
}

footer.colophon{
  border-top: 2.5px solid var(--ink);
  background: linear-gradient(180deg, var(--paper-low), var(--paper-deep));
  padding: clamp(2.4rem,4vw,3.4rem) 0 2rem;
}
.colo-grid{ display:flex; justify-content:space-between; align-items:flex-start; gap: 2rem; flex-wrap:nowrap; }
.colo-grid > div:first-child{ flex: 1 1 auto; min-width: 0; }
.colo-right{ flex: 0 0 auto; }
.colo-brand{ display:flex; align-items:center; gap: 1rem; }
.colo-brand svg{ height: 34px; width:auto; }
.colo-brand img{ height: 20px; width:auto; }
.colo-right{ display:flex; align-items:flex-start; gap: 1.6rem; white-space:nowrap; text-align:right; font-family: var(--mono); font-size: .7rem; letter-spacing:.08em; color: var(--ink-80); line-height: 2; text-transform: uppercase; }
.colo-badges{ margin-top: 1.8rem; font-size: .78rem; color: var(--ink-60); max-width: 62ch; }
.colo-award{ display:block; width: 120px; height: auto; flex: 0 0 auto; }
.colo-badge{ display:block; height: 120px; width: auto; flex: 0 0 auto; align-self:flex-start; }
.colo-loop{ margin:0; flex:0 0 auto; width: 180px; }
.colo-loop .zt1-mark{ width:100%; mix-blend-mode: darken; } /* no box: the sprite's paper ground drops out against the footer, the knockout stays */
@media (prefers-reduced-motion: reduce){ .colo-loop{ display:none; } }
.colo-foot{
  margin-top: 2rem; padding-top: 1rem; border-top: var(--hair);
  display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  font-family: var(--mono); font-size: .76rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-60);
}

/* ------------------------------------------------------------
   Responsive
------------------------------------------------------------ */
@media (max-width: 1080px){
  :root{ --w: min(1360px, 100vw - 4rem); }
  .fig-table{ grid-template-columns: repeat(3, 1fr); border-bottom:0; }
  .fig-cell{ border-bottom: var(--hair); }
  .fig-cell:nth-child(3n){ border-right:0; margin-right:0; }
  .brand-grid{ grid-template-columns: repeat(4, 1fr); }
  .mani-grid{ grid-template-columns: 1fr; }
  .margin-col{ position:static; display:grid; grid-template-columns: repeat(3,1fr); gap: 0 2rem; border-left:0; border-top: var(--rule); padding-left:0; }
  .machine-grid{ grid-template-columns: 1fr; }
  .case-a{ grid-template-columns: 1fr; }
  .case-b{ grid-template-columns: 1fr; }
  .case-b .plate{ border-right:0; border-bottom: var(--rule); min-height: 240px; }
  .protocol .p-grid{ grid-template-columns: 1fr; }
  .bench-grid{ grid-template-columns: 1fr 1fr; } .bench-grid .person, .bench-grid .person:nth-child(n+5){ grid-column: span 1; } .bench-grid .person:nth-child(n+5) .bio{ font-size:.92rem; }
  .testi-grid{ grid-template-columns: 1fr; } .testi-client{ max-width: 340px; }
  .ai-box{ grid-template-columns: auto minmax(0,1fr); } .ai-side{ grid-column: 1 / -1; max-width: 440px; }
  .bench-close{ grid-template-columns: 1fr; }
  .faq-item summary, .faq-item .a{ grid-template-columns: 3ch minmax(0,1fr) 2rem; gap: .8rem; }
  .reply .r-grid{ grid-template-columns: 1fr; }
  .reply .r-ctas{ flex-direction:column; align-items:stretch; min-width:0; } .reply .r-ctas .btn{ white-space:normal; text-align:center; width:100%; } .reply .r-left, .reply .r-left h2, .reply .r-body{ max-width:100%; min-width:0; } .cta-mark{ width:100%; margin: 0 0 .6rem; align-self:stretch; } .cta-mark .cta-card{ width:min(240px,100%); margin-left:auto; }
}
@media (max-width: 760px){
  :root{ --w: min(1360px, 100vw - 2.5rem); }
  body{ font-size: 16px; }
  .mast-nav{ display:none; }
  .masthead .bar{ gap: 1rem; justify-content: space-between; }
  .brand svg{ height: 22px; }
  .brand img{ height: 14px; }
  .btn.small{ padding: .55rem .8rem; font-size: .76rem; letter-spacing: .06em; }
  .hero-ctas .btn{ width: 100%; justify-content: center; }
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-plate{ min-height: 300px; margin-right: 0; border-right: 1px solid var(--ink); }
  .hero-sub{ grid-template-columns: 1fr; gap: 1.6rem; }
  .fig-table{ grid-template-columns: 1fr 1fr; }
  .fig-cell{ margin-right: 1rem; padding-right: 1rem; }
  .fig-cell:nth-child(3n){ border-right: var(--hair); margin-right:1rem; }
  .fig-cell:nth-child(2n){ border-right:0; margin-right:0; }
  .brand-grid{ grid-template-columns: repeat(2, 1fr); }
  .brand-cell{ min-height: 84px; }
  .margin-col{ grid-template-columns: 1fr; }
  .sur-row{ grid-template-columns: 1fr; gap: .9rem; padding: 1.4rem 0; }
  .sur-row .go{ flex-direction:row; align-items:center; justify-content:space-between; width:100%; }
  .sur-thumb{ order: -1; width: 100%; height: auto; aspect-ratio: 172 / 100; }
  .bench-grid{ grid-template-columns: 1fr; }
  .early-row{ grid-template-columns: 6ch 1fr; }
  .early-row .tick{ display:none; }
  .ai-box{ grid-template-columns: 1fr; gap: .8rem; }
  .film{ height: auto; } /* was 118vh: a tall black band on phones */
  .film .leader{ white-space: normal; }
  .cropmark{ display:none; }
  .colo-grid{ flex-wrap:wrap; } .colo-right{ flex: 1 1 100%; width:100%; min-width:0; text-align:left; flex-wrap:wrap; gap: 1.2rem 1rem; white-space:normal; } .colo-right > div{ flex: 1 1 100%; } .colo-loop{ width: 84px; } .colo-badge{ width: 150px; height:auto; } .colo-award{ width: 72px; } /* phones: loop + badge on one line, links beneath */
}

/* ============================================================
   TYPE B — display voice: Mona Sans (luxury operator)
   Same page, same world; only the display face and its fit.
   ============================================================ */
.d1,.d2,.d3, .hero h1, .case-a h3, .case-b h3, .protocol .p-head .t,
.person .nm, .sur-row .name, .reply h2, .faq-item .q, .early h3{
  font-weight: 640; letter-spacing: -0.03em; font-stretch: 112%;
}
.hero h1{ font-size: clamp(2.9rem, 6vw, 5.35rem); line-height: 1.0; letter-spacing: -0.032em; max-width: 16ch; }
.hero h1 .ln:nth-child(2) > span{ font-weight: 780; letter-spacing: -0.036em; }
.d1{ font-size: clamp(2.9rem, 6vw, 5.35rem); line-height: 1.0; }
.d2{ font-size: clamp(2.15rem, 4.1vw, 3.8rem); line-height: 1.04; }
.d3{ font-size: clamp(1.55rem, 2.4vw, 2.2rem); }
.reply h2{ font-size: clamp(2.7rem, 6vw, 5.2rem); line-height: 1.0; }
.testimonial blockquote{
  font-size: clamp(1.35rem, 2.35vw, 2.15rem); line-height: 1.36;
  font-weight: 560; letter-spacing: -0.022em; font-stretch: 106%;
}
.hero h2{ font-weight: 520; font-stretch: 104%; letter-spacing: -0.018em; }
.protocol .p-claim{ font-weight: 520; font-stretch: 104%; letter-spacing: -0.018em; }
/* a figure caption on film: mono label over a display figure, the ledger's own stat grammar */
.film .film-line.stat{ font-style: normal; max-width: none; }
.film .film-line.stat .k{ display:block; font-family: var(--mono); font-style: normal; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,235,0,.85); margin-bottom: .55rem; }
.film .film-line.stat .v{ display:block; font-family: var(--serif); font-weight: 700; font-size: clamp(3.2rem, 6.5vw, 6rem); line-height: .95; letter-spacing: -.035em; color: var(--paper); text-shadow: 0 3px 14px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.6); }
.film .film-line.stat .k{ text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.film .film-line.stat::after{ content:""; position:absolute; z-index:-1; left:-3rem; right:-4rem; top:-2.5rem; bottom:-2.5rem; background: radial-gradient(60% 70% at 30% 60%, rgba(0,0,0,.45), transparent 75%); pointer-events:none; }
.p-close, .fig-cap{ /* stays Caslon Text italic — the essay voice is untouched */ }
.fig-cell .v, .cb-figs .f .v, .mnote .mv, .early-row .yr, .clock-row .h{
  font-weight: 610; letter-spacing: -0.03em; font-stretch: 108%; font-variant-numeric: tabular-nums;
}
.fig-cell .v{ font-size: clamp(2rem, 2.95vw, 2.95rem); }
.early-row .yr{ font-size: 1.4rem; }
.person .nm{ font-size: 1.3rem; }
.sur-row .name{ font-size: clamp(1.4rem, 2.3vw, 2.05rem); letter-spacing: -0.028em; }
.essay .dropcap::first-letter{ font-weight: 640; font-stretch: 112%; padding: .1em .16em 0 0; font-size: 3.9em; }
.film .film-line{ font-weight: 540; font-stretch: 105%; letter-spacing: -0.018em; }
.ai-box .t b{ font-weight: 630; font-style: italic; }
.masthead .brand img{ /* wordmark untouched */ }

/* capture/flat mode (?nomotion): film frames at a fixed height so full-page
   captures and reduced-motion reading both get the composed frame */
html.flat .film{ height: auto; }
html.flat .film .frame{ position: relative; }

/* reduced motion: everything is visible by default; JS adds motion only */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}


.zt1-mark{ width:min(20vw,250px); aspect-ratio:1380/938; background-image:url("/assets/brand/loader/web/zt1_loader_sprite_360.jpg"); background-image:image-set(url("/assets/brand/loader/web/zt1_loader_sprite_360.jpg") 1x, url("/assets/brand/loader/web/zt1_loader_sprite_720.jpg") 2x); background-size:100% 2000%; background-repeat:no-repeat; animation: zt1-click 5s steps(20, jump-none) infinite; }
@keyframes zt1-click{ from{ background-position:0 0; } to{ background-position:0 100%; } }
 #loader .zt1-mark{ width: 46vw; }

/* ---- insights: the reading surface (Read mode) ---- */
.art{ padding: clamp(2.6rem,5vw,4.4rem) 0 clamp(3rem,6vw,5rem); }
.art .wrap{ display:grid; grid-template-columns: minmax(0, 66ch) minmax(0, 1fr); gap: clamp(2rem,4vw,4.5rem); align-items:start; }
.art-head{ grid-column: 1 / -1; }
.art-head .eyebrow{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; font-family: var(--mono); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-60); border-top: var(--rule); padding-top:.8rem; margin-bottom: clamp(1.6rem,3vw,2.4rem); }
.art-head h1{ font-family: var(--serif); font-weight:640; font-stretch:112%; letter-spacing:-.03em; font-size: clamp(2.6rem,5.2vw,4.6rem); line-height:1.0; max-width: 18ch; margin:0 0 1.4rem; }
.founders{ display:grid; grid-template-columns: minmax(260px, 34%) minmax(0,1fr); gap: clamp(1.4rem,3.5vw,3rem); align-items:center; padding: clamp(1.4rem,2.6vw,2rem) 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink-25); }
.founders .ph{ margin:0; aspect-ratio:1; border:1.5px solid var(--ink); background: var(--film); overflow:hidden; box-shadow: 0 20px 44px -30px rgba(23,18,4,.55); }
.founders .ph img{ display:block; width:100%; height:100%; object-fit:cover; }
.founders .k{ font-family: var(--mono); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-60); margin:0 0 .6rem; }
.founders p{ font-family: var(--serif-text); font-size: clamp(1.15rem,1.6vw,1.45rem); line-height:1.5; margin:0; max-width:40ch; }
.founders .who{ font-family: var(--mono); font-size: max(.66rem,11px); letter-spacing:.12em; text-transform:uppercase; color: var(--ink-60); margin:.7rem 0 0; }
@media (max-width: 700px){ .founders{ grid-template-columns: 1fr; } .founders .ph{ max-width: 100%; } }
.art-head .stand{ font-family: var(--serif-text); font-style: italic; font-size: 1.2rem; line-height:1.55; color: var(--ink-80); max-width: 60ch; }
.art-head .byline{ display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; margin-top: 1.6rem; font-family: var(--mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-60); }
.art-head .byline b{ font-weight:400; color: var(--ink); }
.cover{ grid-column: 1 / -1; margin: clamp(1.8rem,3vw,2.6rem) 0 clamp(1rem,2vw,1.6rem); }
.cover .plate{ aspect-ratio: 16 / 9; }
.cover .plate img, .cover .plate video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.cover .plate video{ opacity:0; transition: opacity .8s ease; } .cover .plate.live video{ opacity:1; }
.cover figcaption{ display:flex; justify-content:space-between; gap:1rem; margin-top:.7rem; font-family: var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-60); }
.art-body{ font-family: var(--serif-text); font-size: 1.16rem; line-height: 1.72; color: var(--ink); max-width: 66ch; }
.art-body p{ margin: 0 0 1.4em; }
.art-body p.claim{ font-family: var(--serif); font-weight:520; font-stretch:104%; letter-spacing:-.018em; font-size: 1.32rem; line-height: 1.38; color: var(--ink); margin: 1.6em 0; }
.art-body h2{ font-family: var(--serif); font-weight:640; font-stretch:112%; letter-spacing:-.03em; font-size: clamp(1.9rem,3vw,2.5rem); line-height:1.05; margin: 3.2em 0 1em; padding-top: 1rem; border-top: 2px solid var(--ink); }
.art-body h3{ font-family: var(--grot); font-weight:600; font-size:.84rem; letter-spacing:.12em; text-transform:uppercase; margin: 2.6em 0 .9em; color: var(--ink); }
.art-body h2 + h3{ margin-top: 1.6em; }
.art-body strong{ font-weight:700; }
.zt{ font-weight:700; }
.art-body ul.list, .art-body ol.list{ margin: 0 0 1.4em; padding-left: 1.3em; } .art-body .list li{ margin: 0 0 .55em; padding-left: .2em; } .art-body ol.list li::marker{ font-family: var(--mono); font-size:.8em; letter-spacing:.06em; color: var(--ink-60); }
.convert{ border: 1.5px solid var(--ink); background: linear-gradient(180deg, var(--paper-hi), var(--paper) 70%); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 28px 60px -36px rgba(23,18,4,.75); padding: 1.1rem 1.15rem 1.2rem; position:relative; }
.convert::before{ content:""; position:absolute; inset:7px; border:1px dashed var(--ink-40); pointer-events:none; }
.convert .ey{ font-family: var(--mono); font-size: max(.66rem,11px); letter-spacing:.14em; text-transform:uppercase; color: var(--ink-60); margin:0 0 .5rem; }
.convert h3{ font-family: var(--serif); font-weight:640; font-stretch:112%; letter-spacing:-.025em; font-size:1.25rem; line-height:1.1; margin:0 0 .6rem; }
.convert p{ font-family: var(--serif-text); font-size:.98rem; line-height:1.5; margin:0 0 .8rem; color: var(--ink-80); }
.convert ul{ margin:0 0 1rem; padding:0; list-style:none; } .convert li{ position:relative; padding-left:1.1rem; font-family: var(--serif-text); font-size:.95rem; line-height:1.45; margin-bottom:.4rem; }
.convert li::before{ content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%; background: var(--ink); }
.convert{ min-width:0; max-width:100%; box-sizing:border-box; } .convert .btn{ display:inline-flex; width:100%; justify-content:center; box-sizing:border-box; white-space:normal; text-align:center; line-height:1.25; }
.convert .or{ display:flex; align-items:center; gap:.7rem; margin: 1.1rem 0 .9rem; font-family: var(--mono); font-size: max(.66rem,11px); letter-spacing:.14em; text-transform:uppercase; color: var(--ink-60); }
.convert .or::before, .convert .or::after{ content:""; flex:1; border-top:1px solid var(--ink-25); }
.convert .btn.ghost{ background:transparent; color: var(--ink); }
.convert .fine{ font-family: var(--mono); font-size: max(.62rem,11px); letter-spacing:.06em; color: var(--ink-60); margin:.7rem 0 0; line-height:1.5; }
@media (max-width: 1080px){ .convert{ grid-column: 1 / -1; } }
.part{ margin: 4.2em 0 -2.2em; display:flex; align-items:center; gap:1rem; font-family: var(--mono); font-size: max(.66rem,11px); letter-spacing:.16em; text-transform:uppercase; color: var(--ink-60); }
.part::before{ content:""; width: 2.2rem; border-top: 2.5px solid var(--ink); } .part b{ font-weight:400; color: var(--ink); }
.bars{ display:grid; grid-template-columns: minmax(0, 11rem) minmax(0,1fr) 4.5rem; gap: .55rem .8rem; align-items:center; font-family: var(--mono); font-size: max(.66rem,11px); letter-spacing:.08em; text-transform:uppercase; }
.bars .l{ color: var(--ink); line-height:1.3; } .bars .b{ height: 14px; background: var(--ink); } .bars .b.lo{ background: var(--ink-40); } .bars .v{ text-align:right; color: var(--ink); font-variant-numeric: tabular-nums; }
.bars .grp{ grid-column: 1 / -1; margin-top:.5rem; padding-top:.5rem; border-top:1px solid var(--ink-25); color: var(--ink-60); }
.bars .grp:first-child{ margin-top:0; padding-top:0; border-top:0; }
@media (max-width: 700px){ .bars{ grid-template-columns: minmax(0,1fr) 4.2rem; } .bars .l{ grid-column: 1 / -1; margin-top:.2rem; } }
.statrow.four{ grid-template-columns: repeat(4, minmax(0,1fr)); } @media (max-width: 700px){ .statrow.four{ grid-template-columns: 1fr 1fr; } }
.statrow .v .sub{ display:block; font-size:.5em; color: var(--ink-60); letter-spacing:0; }
.paths{ display:grid; grid-template-columns: 5.2rem repeat(4, minmax(0,1fr)); gap: .5rem .6rem; align-items:stretch; font-family: var(--mono); text-transform:uppercase; }
.paths .rl{ font-size: max(.66rem,11px); letter-spacing:.14em; color: var(--ink-60); align-self:center; }
.paths .st{ position:relative; border:1px solid var(--ink); padding:.7rem .6rem .7rem .7rem; font-size: max(.66rem,11px); letter-spacing:.1em; line-height:1.45; background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)); }
.paths .st .n{ display:block; color: var(--ink-60); margin-bottom:.35rem; }
.paths .st:not(.last)::after{ content:"→"; position:absolute; right:-.62rem; top:50%; transform:translateY(-50%); background: var(--paper); padding:0 .1rem; color: var(--ink); font-size:.9rem; }
.paths .end{ grid-column: 2 / -1; border-top: 1.6px solid var(--ink); margin-top:.3rem; padding-top:.6rem; font-size: max(.66rem,11px); letter-spacing:.14em; }
@media (max-width: 700px){ .paths{ grid-template-columns: 1fr; } .paths .rl{ margin-top:.8rem; } .paths .st:not(.last)::after{ content:"↓"; right:auto; left:50%; top:auto; bottom:-.75rem; transform:translateX(-50%); } .paths .end{ grid-column: 1; } }
.clients{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink-25); }
.clients div{ display:flex; align-items:center; justify-content:center; min-height: 92px; padding: .8rem; border-right: 1px solid var(--ink-25); }
.clients div:last-child{ border-right:0; } .clients img{ height: 34px; width:auto; } .clients span{ font-family: var(--serif); font-weight:640; font-stretch:112%; letter-spacing:-.02em; font-size:1.25rem; text-align:center; }
@media (max-width: 700px){ .clients{ grid-template-columns: repeat(2, minmax(0,1fr)); } .clients div:nth-child(2){ border-right:0; } .clients div:nth-child(-n+2){ border-bottom: 1px solid var(--ink-25); } }
.eq{ margin: 2em 0 2.2em; border: var(--rule); background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0)); padding: 1.3rem 1.5rem 1.5rem; box-shadow: 0 20px 44px -30px rgba(23,18,4,.55); position:relative; }
.eq::before{ content:""; position:absolute; inset:8px; border:1px solid var(--ink-25); pointer-events:none; }
.eq-head{ font-family: var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-60); margin-bottom: .9rem; }
.eq-body{ margin:0 !important; font-family: var(--serif); font-weight:640; font-stretch:108%; letter-spacing:-.02em; font-size: clamp(1.15rem,1.9vw,1.5rem); line-height:1.3; display:flex; flex-wrap:wrap; gap:.25em .5em; align-items:baseline; }
.eq-body .op{ font-family: var(--mono); font-weight:400; color: var(--ink-60); }
.eq-body .rhs{ font-weight:520; }
.ledger-table{ margin: 1.8em 0 2.2em; overflow-x:auto; -webkit-overflow-scrolling: touch; }
.ledger-table table{ width:100%; border-collapse: collapse; font-family: var(--grot); font-size:.9rem; line-height:1.3; font-variant-numeric: tabular-nums; border-top: 2px solid var(--ink); border-bottom: var(--rule); min-width: 540px; table-layout: auto; }
.ledger-table th{ font-family: var(--mono); font-weight:400; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-60); text-align:left; padding: .7rem .6rem .6rem 0; border-bottom: var(--rule); white-space:normal; vertical-align:bottom; line-height:1.35; }
.ledger-table td, .ledger-table tbody th{ padding: .65rem .6rem .65rem 0; border-bottom: var(--hair); vertical-align: top; }
.ledger-table tbody th{ font-family: var(--grot); font-weight:600; font-size:.92rem; letter-spacing:0; text-transform:none; color: var(--ink); border-bottom: var(--hair); white-space:nowrap; }
.ledger-table td{ font-family: var(--serif); font-weight:610; font-stretch:104%; letter-spacing:-.02em; font-size:.94rem; white-space:nowrap; }
.ledger-table td strong{ font-weight:780; }
.ledger-table tbody tr:last-child td, .ledger-table tbody tr:last-child th{ border-bottom:0; }
.steps{ list-style:none; margin: 1.6em 0 2.2em; padding:0; border-top: 2px solid var(--ink); }
.steps li{ padding: 1rem 0 1rem 3.4rem; border-bottom: var(--hair); position:relative; font-family: var(--serif); font-weight:520; font-stretch:104%; letter-spacing:-.015em; font-size:1.18rem; line-height:1.35; }
.steps li strong{ font-weight:520; }
.steps li::before{ content: counter(step, decimal-leading-zero); counter-increment: step; position:absolute; left:0; top:1.15rem; font-family: var(--mono); font-size:.72rem; letter-spacing:.12em; color: var(--ink-60); }
.steps{ counter-reset: step; }
.art-side{ position: sticky; top: 96px; align-self:start; display:flex; flex-direction:column; gap: 2.4rem; padding-top: .4rem; }
.pull{ margin:0; border-left: 2px solid var(--ink); padding-left: 1.3rem; font-family: var(--serif); font-weight:560; font-stretch:106%; letter-spacing:-.022em; font-size: clamp(1.25rem,1.7vw,1.6rem); line-height:1.3; }
.pull footer{ margin-top:.8rem; font-family: var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-60); }
.toc{ font-family: var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; line-height:2; color: var(--ink-60); border-top: var(--hair); padding-top:.9rem; }
.toc a{ text-decoration:none; color: inherit; } .toc a:hover{ color: var(--ink); }
.endplate{ padding: clamp(2.4rem,5vw,4rem) 0 clamp(3rem,6vw,5rem); }
.endplate .reply{ padding: clamp(1.8rem,3.5vw,3rem); }
.endplate .r-grid{ align-items:center; }
.endplate .r-body{ font-size: 1.05rem; }
@media (max-width: 1080px){ .art .wrap{ grid-template-columns: minmax(0,1fr); } .art-side{ position:static; display:grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; } .toc{ display:none; } }
@media (max-width: 700px){ .art-head .eyebrow > span:last-child{ display:none; } .cover figcaption > span:last-child{ display:none; } .art-side{ grid-template-columns: 1fr; } .art-body{ font-size: 1.06rem; } .art-head h1{ font-size: clamp(2.1rem, 9vw, 2.9rem); } .ledger-table table{ font-size:.86rem; } .ledger-table td{ font-size:.94rem; } }
@media (prefers-reduced-motion: reduce){ .cover .plate video{ display:none; } }
/* webinar plate (one instance per article at most) */
.webinar{ margin: 3em 0 3.2em; }
.webinar .eyebrow-row{ font-family: var(--mono); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-60); border-top: var(--rule); padding-top:.8rem; }
.webinar-line{ font-family: var(--serif) !important; font-weight:640; font-stretch:112%; letter-spacing:-.03em; font-size: clamp(1.7rem,2.6vw,2.3rem) !important; line-height:1.05 !important; margin: .8rem 0 1.2rem !important; }
.webinar .plate{ padding: .6rem; background: var(--film); }
.webinar .ratio{ position:relative; width:100%; height:0; padding-bottom:56.25%; z-index:4; }
.webinar iframe{ position:absolute; left:0; top:0; width:100%; height:100%; border:0; overflow:hidden; display:block; }
.webinar figcaption{ margin-top:.7rem; font-family: var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-60); }
.webinar figcaption a{ color: var(--ink); text-underline-offset: 3px; }
.art-faq{ margin-top: 3.2em; } .art-faq h2{ margin-bottom: 1.2em; }
.art-faq .faq-item .q{ font-size: clamp(1.15rem,1.6vw,1.4rem); }
.art-faq .faq-item .a{ font-size: 1.08rem; }
.cover-webinar .webinar{ margin:0; } .cover-webinar .webinar .eyebrow-row{ border-top:0; padding-top:0; }
.figplate{ margin: 2em 0 2.6em; } .figplate .plate{ aspect-ratio: 16 / 9; padding:0; } .figplate .plate img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.figplate figcaption{ margin-top:.7rem; font-family: var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-60); }
.deckplate{ margin: 0 0 3.2em; }
.deckplate .eyebrow-row{ font-family: var(--mono); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-60); border-top: var(--rule); padding-top:.8rem; }
.deckplate a.plate{ display:block; aspect-ratio: 16 / 9; text-decoration:none; }
.deckplate a.plate img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; transition: transform .6s ease; }
.deckplate a.plate:hover img{ transform: scale(1.02); }
.deckplate a.plate .tag{ pointer-events:none; }
.statrow{ margin: 1.6em 0 2.4em; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 2px solid var(--ink); border-bottom: var(--rule); }
.statrow .stat{ padding: 1.3rem 1.2rem 1.2rem 0; border-right: var(--hair); margin-right: 1.2rem; }
.statrow .stat:last-child{ border-right:0; margin-right:0; }
.statrow .v{ font-family: var(--serif); font-weight:610; font-stretch:108%; letter-spacing:-.03em; font-variant-numeric: tabular-nums; font-size: clamp(1.35rem,1.9vw,1.75rem); line-height:1.05; overflow-wrap: anywhere; }
.statrow .v .to{ display:block; font-family: var(--mono); font-weight:400; font-size:.55em; color: var(--ink-60); letter-spacing:.1em; margin: .3em 0 .2em; }
.statrow .k{ margin-top:.7rem; font-family: var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-60); line-height:1.55; }
@media (max-width: 700px){ .statrow{ grid-template-columns: 1fr; } .statrow .stat{ border-right:0; margin-right:0; border-bottom: var(--hair); padding: 1rem 0; } .statrow .stat:last-child{ border-bottom:0; } }
.quote-card{ margin: 2em 0 2.2em; padding: 1.4rem 1.6rem 1.3rem; border: var(--rule); background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0)); box-shadow: 0 20px 44px -30px rgba(23,18,4,.55); position:relative; }
.quote-card::before{ content:""; position:absolute; inset:8px; border:1px solid var(--ink-25); pointer-events:none; }
.quote-card p{ margin:0 !important; font-family: var(--serif); font-weight:560; font-stretch:106%; letter-spacing:-.02em; font-size: clamp(1.15rem,1.8vw,1.45rem); line-height:1.35; }
.quote-card footer{ margin-top:1rem; font-family: var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-60); }
.calc{ margin: 2.6em 0 0; }
.calc .plate{ aspect-ratio: 16 / 8; min-height: 320px; }
.calc .plate .shot{ position:absolute; inset:0; z-index:1; display:block; }
.calc .plate .shot img{ position:absolute; top:7%; right:-3%; width:50%; height:auto; object-fit:cover; border:1px solid rgba(255,255,255,.18); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); transition: transform .5s ease; }
.calc .plate .shot:hover img{ transform: translateY(-4px); }
.calc .plate::after{ background: linear-gradient(90deg, rgba(13,11,6,.97) 0%, rgba(13,11,6,.9) 42%, rgba(13,11,6,.1) 58%); }
.calc-in{ pointer-events:none; } .calc-in .tlink{ pointer-events:auto; }
@media (max-width: 700px){ .calc .plate{ aspect-ratio: auto; min-height: 0; } .calc .plate .shot{ position:relative; height: 200px; overflow:hidden; } .calc .plate .shot img{ position:absolute; top:8%; right:-8%; width:88%; } .calc-in{ position:relative; inset:auto; width:auto; } .calc .plate::after{ display:none; } }
.calc-in{ position:absolute; z-index:5; inset:0; right:auto; width: 50%; padding: clamp(1.4rem,3vw,2.4rem); display:flex; flex-direction:column; justify-content:center; gap: .9rem; color: var(--paper); }
.calc-in .eyebrow-row{ font-family: var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: rgba(255,235,0,.85); }
.calc-line{ margin:0 !important; font-family: var(--serif) !important; font-weight:640; font-stretch:112%; letter-spacing:-.03em; font-size: clamp(1.35rem,2.1vw,1.9rem) !important; line-height:1.08 !important; color: var(--paper); }
.calc-in .tlink{ color: var(--paper); border-bottom-color: rgba(255,235,0,.85); align-self:flex-start; margin-top:.4rem; }
.art-body a{ color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.figsvg{ margin: 1.8em 0 2.4em; }
.figsvg .figbox{ border: var(--rule); background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0)); padding: clamp(1rem,2vw,1.6rem); box-shadow: 0 20px 44px -30px rgba(23,18,4,.55); position:relative; }
.figsvg .figbox::before{ content:""; position:absolute; inset:8px; border:1px solid var(--ink-25); pointer-events:none; }
.figsvg svg{ display:block; width:100%; height:auto; overflow:visible; }
.figsvg .arc{ fill:none; stroke: var(--ink); stroke-width:1.6; }
.figsvg marker path{ fill: var(--ink); }
.figsvg .node{ fill: var(--ink); }
.figsvg .svglab{ font-family: var(--mono); font-size: 15px; letter-spacing:.12em; fill: var(--ink); }
.figsvg .idx{ font-family: var(--mono); font-size: 11px; letter-spacing:.12em; fill: var(--ink-60); }
.figsvg .core{ font-size: 15px; font-weight:700; letter-spacing:.16em; } .figsvg .core2{ font-size: 10px; fill: var(--ink-60); }
.figsvg figcaption{ margin-top:.7rem; font-family: var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-60); }
.loopfig svg{ max-width: 520px; margin: 0 auto; }
.loop-list{ display:none; }
@media (max-width: 700px){ .loopfig svg{ display:none; } .loop-list{ display:block; list-style:none; margin:0; padding:0; counter-reset: loop; }
  .loop-list li{ position:relative; padding: .7rem 0 .7rem 2.6rem; font-family: var(--mono); font-size:.76rem; letter-spacing:.12em; border-bottom: var(--hair); }
  .loop-list li::before{ content: counter(loop, decimal-leading-zero); counter-increment: loop; position:absolute; left:0; top:.75rem; color: var(--ink-60); }
  .loop-list li:not(:last-child)::after{ content:"↓"; position:absolute; right:0; top:.7rem; color: var(--ink-60); }
  .loop-list li.back{ border-bottom:0; color: var(--ink-60); } .loop-list li.back::before{ content:"↺"; color: var(--ink); } }
.figsvg .yr{ font-family: var(--mono); font-size: 26px; font-weight:700; letter-spacing:.06em; fill: var(--ink); }
.tl-grid{ list-style:none; margin:0; padding:.4rem 0 .2rem; display:grid; grid-template-columns:repeat(5,1fr); position:relative; font-family: var(--mono); text-transform:uppercase; }
.tl-grid::before{ content:""; position:absolute; left:10%; right:10%; top:calc(.4rem + 2.35rem); border-top:1.6px solid var(--ink); }
.tl-grid li{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 .35rem; }
.tl-grid .yr{ font-size:1.05rem; font-weight:700; letter-spacing:.06em; line-height:1; height:1.5rem; }
.tl-grid .dot{ width:14px; height:14px; border-radius:50%; background: var(--ink); margin:.45rem 0 .7rem; position:relative; z-index:1; }
.tl-grid .tl-lab{ font-size:.72rem; letter-spacing:.1em; line-height:1.45; max-width:11ch; }
@media (max-width: 700px){ .tl-grid{ grid-template-columns:1fr; padding:0; } .tl-grid::before{ display:none; }
  .tl-grid li{ flex-direction:row; align-items:baseline; text-align:left; gap:1rem; padding:.7rem 0; border-bottom: var(--hair); }
  .tl-grid li:last-child{ border-bottom:0; } .tl-grid .yr{ font-size:.8rem; height:auto; } .tl-grid .dot{ display:none; } .tl-grid .tl-lab{ max-width:none; font-size:.78rem; letter-spacing:.12em; } }
.statrow-one{ grid-template-columns: 1fr; }
.statrow-one .v{ font-size: clamp(2.2rem,3.6vw,3.2rem); } .statrow-one .v .to{ display:inline; font-size:.5em; margin: 0 .2em; }
/* ---- hub ---- */
.hub .section-head h1.ti{ margin:0; line-height: 1.2; }
.hub{ padding: clamp(2.6rem,5vw,4.4rem) 0 clamp(3rem,6vw,5rem); }
.hub-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: clamp(1.4rem,2.6vw,2.4rem); border-top: var(--rule); padding-top: clamp(1.4rem,2.6vw,2.4rem); }
.card{ display:block; text-decoration:none; color:inherit; }
.card .plate{ aspect-ratio: 16 / 9; }   /* covers are 16:9 objects; never crop a slide's headline */
.card .plate img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; transition: transform .6s var(--ease, ease); }
.card:hover .plate img{ transform: scale(1.03); }
.card .k{ display:flex; justify-content:space-between; gap:1rem; margin-top:.9rem; font-family: var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-60); }
.card h2{ font-family: var(--serif); font-weight:640; font-stretch:112%; letter-spacing:-.028em; font-size: clamp(1.45rem,2.2vw,1.9rem); line-height:1.08; margin:.55rem 0 .6rem; }
.card .dek{ font-family: var(--serif-text); font-size:1.02rem; line-height:1.55; color: var(--ink-80); }
.card .by{ margin-top:.8rem; font-family: var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-60); }