/* ============================================================
   POST-IT & FIELD · direction 05 — robertberris.com
   The hub's skeleton and motion on the book cover's colours, in the
   type and materials that won the Frankenstein Board vote.

   ONE PALETTE   navy #0B2935 · post-it #FDD007 · marker blue #02ADEC,
                 on cream. Coral only as something drawn, once a page.
   TWO VOICES    Bricolage says the claim. Fraunces says what a person
                 says — whole sentences only, never a word inside a
                 Bricolage headline. Instrument Sans reads and labels.
                 Caveat once a page, in Robert's hand.
   THREE MATERIALS
                 SURFACE  raised cream, hairline, soft shadow — things you open
                 TILE     flat, 26px radius — things that are stated
                 CLOSE    navy, tearing over the paper — the moment you act;
                          it runs straight into the footer as one piece
   Surfaces flip in dark; objects (gold, chips, the sticky) don't.
   ============================================================ */

:root{
  color-scheme:light;
  --paper:#F7F3E9;
  --surface:#FFFDF7;
  --surface-2:#EFE8D8;
  --ink:#0B2935;
  --ink-soft:#3E5560;
  --ink-faint:#6E828A;
  --ink-ground:#0B2935;
  --ink-surface:#12333F;
  --ink-surface-2:#173D4A;
  --on-ink:#F7F3E9;
  --on-ink-soft:rgba(247,243,233,.78);
  --on-ink-faint:rgba(247,243,233,.55);
  --gold:#FDD007;
  --gold-deep:#E5BC00;
  --gold-wash:rgba(253,208,7,.18);
  --blue:#02ADEC;
  --blue-text:#0284B5;
  --blue-tint:#D3EDF9;
  --coral:#F26B4E;
  --hair:rgba(11,41,53,.16);
  --hair-soft:rgba(11,41,53,.08);
  --shadow-sm:0 1px 2px rgba(11,41,53,.05),0 10px 26px -8px rgba(11,41,53,.14);
  --shadow-lg:0 2px 8px rgba(11,41,53,.06),0 30px 60px -24px rgba(11,41,53,.32);
  --nav-bg:rgba(247,243,233,.8);
  --mark-ground:#0B2935;
  --mark-glyph:#FDD007;
  --field-rgb:11,41,53;
  --contact-rgb:2,173,236;
  --field-a:1;
  --contact-a:1;
  /* the marker highlight: stripe colours and the ink that sits on them (see .hl) */
  --hl-gold:#FDD007;--hl-blue:#A9E1F7;--hl-ink:#0B2935;
  --display:'Bricolage Grotesque',system-ui,-apple-system,sans-serif;
  --voice:'Fraunces','Iowan Old Style',Georgia,serif;
  --sans:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --hand:'Caveat','Segoe Print',cursive;
  --wrap:1120px;
  --gutter:clamp(20px,4vw,40px);
  --measure:62ch;
  --r-card:14px;
  --r-tile:26px;
  /* the page's own paper and ink, held under names no band overrides (see .tear) */
  --page-paper:var(--paper);
  --page-ink:var(--ink);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#0A1F29;--surface:#10303C;--surface-2:#143845;
    --ink:#F1ECDF;--ink-soft:#B9C4C8;--ink-faint:#8A9AA1;
    --ink-ground:#1A4453;--ink-surface:#215263;--ink-surface-2:#27596B;
    --gold-wash:rgba(253,208,7,.12);
    --blue-text:#5FD0F5;--blue-tint:#164A5D;
    --hair:rgba(241,236,223,.15);--hair-soft:rgba(241,236,223,.08);
    --shadow-sm:0 1px 2px rgba(0,0,0,.3),0 10px 26px -8px rgba(0,0,0,.4);
    --shadow-lg:0 2px 8px rgba(0,0,0,.35),0 30px 60px -24px rgba(0,0,0,.6);
    --nav-bg:rgba(10,31,41,.8);
    --mark-ground:#FDD007;--mark-glyph:#0B2935;
    --field-rgb:241,236,223;--contact-rgb:79,203,247;--field-a:.85;--contact-a:.8;
    --hl-gold:#6B661B;--hl-blue:#4A6D7B;--hl-ink:#F1ECDF;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0A1F29;--surface:#10303C;--surface-2:#143845;
  --ink:#F1ECDF;--ink-soft:#B9C4C8;--ink-faint:#8A9AA1;
  --ink-ground:#1A4453;--ink-surface:#215263;--ink-surface-2:#27596B;
  --gold-wash:rgba(253,208,7,.12);
  --blue-text:#5FD0F5;--blue-tint:#164A5D;
  --hair:rgba(241,236,223,.15);--hair-soft:rgba(241,236,223,.08);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3),0 10px 26px -8px rgba(0,0,0,.4);
  --shadow-lg:0 2px 8px rgba(0,0,0,.35),0 30px 60px -24px rgba(0,0,0,.6);
  --nav-bg:rgba(10,31,41,.8);
  --mark-ground:#FDD007;--mark-glyph:#0B2935;
  --field-rgb:241,236,223;--contact-rgb:79,203,247;--field-a:.85;--contact-a:.8;
    --hl-gold:#6B661B;--hl-blue:#4A6D7B;--hl-ink:#F1ECDF;
}

/* ---------- reset ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-gutter:stable;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
p,ul,ol,figure,blockquote{margin:0}
ul{padding:0;list-style:none}
img{max-width:100%;display:block;height:auto}
::selection{background:var(--gold);color:#0B2935}
:focus-visible{outline:2.5px solid var(--blue);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--ink);color:var(--gold);padding:8px 12px;z-index:99}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- type ---------- */
h1,h2,h3,h4{margin:0;text-wrap:balance;font-family:var(--display);font-weight:800;font-variation-settings:"opsz" 96,"wdth" 100}
h1{font-size:clamp(40px,6.4vw,84px);line-height:.98;letter-spacing:-.025em}
h2{font-size:clamp(30px,4vw,50px);line-height:1.02;letter-spacing:-.02em}
h3{font-size:clamp(20px,2vw,24px);line-height:1.2;letter-spacing:-.01em;font-weight:700}
h4{font-size:18px;line-height:1.3;letter-spacing:-.005em;font-weight:700}
/* the marker highlight replaces the hub's italic word. ONE SHAPE IN BOTH THEMES:
   a half-height stripe behind the lower part of the word. Only the three --hl-*
   tokens change with the theme. In dark the word is cream, so the stripe is the
   same gold (or blue) deepened until cream reads on it; full-strength gold
   there swallows the bottom half of the letters. Do not give a theme its own
   shape here. Until 10 Oct 2026 dark mode drew a full-height block instead, and
   the same headline looked like two different designs. */
.hl{--hl:var(--hl-gold);background:linear-gradient(transparent 55%,var(--hl) 55%,var(--hl) 92%,transparent 92%);padding:0 .1em;color:var(--hl-ink)}
.hl.blue{--hl:var(--hl-blue)}
/* the voice: Fraunces, whole sentences only */
.voice{font-family:var(--voice);font-weight:400;font-variation-settings:"opsz" 72,"SOFT" 30,"WONK" 0;letter-spacing:-.005em}
.voice b{font-weight:700}
.voice em{font-style:italic;font-weight:500;font-variation-settings:"opsz" 72,"SOFT" 40,"WONK" 1}
.hand{font-family:var(--hand);font-weight:500}
.lede{font-size:clamp(19px,1.6vw,22px);line-height:1.5;max-width:60ch;color:var(--ink)}
.prose{max-width:var(--measure);display:grid;gap:1.05em}
p.prose{display:block}
.prose p{color:var(--ink-soft)}
.prose strong{color:var(--ink);font-weight:600}
.prose em{font-style:italic}
.prose a{color:var(--blue-text);text-underline-offset:.18em}
.prose ul{padding-left:20px;display:grid;gap:8px;list-style:disc;color:var(--ink-soft)}
.prose li::marker{color:var(--blue)}
.src{font-size:13px;color:var(--ink-faint);line-height:1.5;max-width:72ch}
.src a{color:var(--blue-text)}
/* small labels: Instrument Sans, tracked caps. Retires Plex Mono. */
.kicker{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);line-height:1.3}
.kicker.blue{color:var(--blue-text)}
.idx{font-weight:600;font-size:13px;letter-spacing:.14em;color:var(--ink-faint);white-space:nowrap;font-variant-numeric:tabular-nums}
.idx b{color:var(--ink);font-weight:600}
/* the chip: names a section or an offer by kind */
.label{display:inline-block;width:max-content;max-width:100%;font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:var(--surface);border:1.5px solid var(--ink);border-radius:5px;padding:4px 9px;line-height:1.2}
.label.gold{background:var(--gold);color:#0B2935;border-color:#0B2935}
.label.blue{background:#D3EDF9;color:#0B2935;border-color:#0B2935}
.label.coral{background:var(--coral);color:#0B2935;border-color:#0B2935}
.chip{display:inline-block;background:var(--gold);color:#0B2935;font-weight:600;font-size:14px;padding:3px 10px;border-radius:3px}

/* ---------- buttons: the arrow pill ---------- */
.pill{display:inline-flex;align-items:center;gap:12px;padding:8px 8px 8px 18px;border-radius:999px;border:1.5px solid var(--ink);background:var(--surface);color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;line-height:1.2;font-family:var(--sans);cursor:pointer;transition:background .18s,color .18s,border-color .18s,box-shadow .18s;white-space:nowrap}
.pill i{width:28px;height:28px;border-radius:50%;background:var(--ink);display:grid;place-items:center;flex:none;transition:transform .22s cubic-bezier(.2,.9,.3,1.3),background .18s}
.pill i::before{content:"";width:9px;height:9px;border-top:2px solid var(--gold);border-right:2px solid var(--gold);transform:translateX(-1px) rotate(45deg)}
.pill:hover{box-shadow:var(--shadow-sm)}
.pill:hover i{transform:translateX(4px)}
.pill:active i{transform:translateX(6px) scale(.92)}
.pill.primary{background:var(--gold);color:#0B2935;border-color:#0B2935}
.pill.primary i{background:#0B2935}.pill.primary i::before{border-color:var(--gold)}
.pill.ink{background:var(--ink);color:var(--paper)}
.pill.ink i{background:var(--gold)}.pill.ink i::before{border-color:#0B2935}
.pill.ghost{background:transparent}
.pill.sm{font-size:14px;padding:6px 6px 6px 14px}.pill.sm i{width:24px;height:24px}
.pill.down i::before{transform:translateY(-1px) rotate(135deg)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
@media (max-width:520px){.pill{white-space:normal}}
.more{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;text-decoration:none}
.more i{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;transition:background .18s,transform .2s}
.more i::before{content:"";width:7px;height:7px;border-top:1.8px solid currentColor;border-right:1.8px solid currentColor;transform:translateX(-1px) rotate(45deg)}
.more:hover i{background:var(--blue);border-color:var(--blue);color:#0B2935;transform:translateX(3px)}

/* ---------- nav: the hub's, re-tokened ----------
   The mark is mounted on the window: it rises out of the bar's top padding
   and sits flush against the viewport edge, corners cut square.
   At the top of the page the bar is clear, so a head's field runs on under
   the mark instead of stopping on a pale band; it frosts once the page has
   scrolled under it (from 19 Oct 2026). */
.nav{position:fixed;inset:0 0 auto;z-index:80;background:transparent;border-bottom:1px solid transparent;transition:border-color .3s,background-color .3s;--nav-pad-y:13px}
.nav.scrolled{background:var(--nav-bg);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);border-bottom-color:var(--hair)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:var(--wrap);margin:0 auto;padding:var(--nav-pad-y) var(--gutter)}
.brand{display:flex;align-items:center;text-decoration:none;align-self:flex-start;margin-top:calc(var(--nav-pad-y) * -1);margin-bottom:calc(var(--nav-pad-y) * -1);background:var(--mark-ground);border-radius:0 0 11% 11%}
/* The mark: an upside-down Syne 800 "R" on the plaque. It is set as type, cut
   to its cap box so it centres optically; the font file is the R and the six
   other letters of the name only (see FONT_MARK in _shell.py). It turns
   upright under the pointer; site.js plays the flip that takes it back. */
.mark{display:grid;place-items:center;width:58px;height:58px;flex:none;font-size:40px;overflow:hidden;perspective:220px;border-radius:0 0 11% 11%}
.mark-spin{display:grid;place-items:center}
.mark-r{display:block;font-family:'Syne',sans-serif;font-weight:800;line-height:1;text-box-trim:trim-both;text-box-edge:cap alphabetic;color:var(--mark-glyph);transform:rotate(180deg);transition:transform .6s cubic-bezier(.7,0,.2,1)}
.brand:hover .mark-r,.brand:focus-visible .mark-r{transform:rotate(0deg)}
@media (max-width:700px){.mark{width:44px;height:44px;font-size:30px}}
.nav-right{display:flex;align-items:center;gap:12px}
.nav-right .pill,.drawer-cta{padding:6px 6px 6px 14px;font-size:14px}
.nav-right .pill i,.drawer-cta i{width:24px;height:24px}
.nav.menu-open{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent}
.nav.menu-open .nav-right .pill{opacity:0;pointer-events:none}
/* the burger — the hub's, in this system's pill language. Every destination
   lives behind it at every width, so it is the only route to them. */
.burger{width:44px;height:44px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;cursor:pointer;background:none;border:0;border-radius:100px;transition:background .18s}
.burger span{display:block;width:22px;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s,opacity .2s,background .2s}
.burger:hover{background:var(--surface-2)}
/* the bars close into an X — the two outer ones travel to the middle and cross */
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
/* Once open, the X sits on the drawer's navy — in BOTH themes, because the
   drawer is always navy-grounded. So it takes the on-ink foreground. */
.burger[aria-expanded="true"]{background:transparent;border:1.5px solid rgba(247,243,233,.45)}
.burger[aria-expanded="true"]:hover{background:rgba(247,243,233,.12);border-color:var(--on-ink)}
.burger[aria-expanded="true"] span{background:var(--on-ink)}

/* ---------- the menu: the hub's drawer, on navy ----------
   A right-hand panel that lands on the same navy as the close and the footer,
   so the menu reads as the same object those two are made of. The numbers are
   the point: this is the only surface that shows the whole sequence at once.
   visibility, not just transform: a translated-off panel keeps its links in
   the tab order, so keyboard focus would walk into a drawer nobody can see. */
.nav-scrim{position:fixed;inset:0;z-index:60;background:rgba(11,41,53,.42);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.nav-scrim.open{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:70;width:min(392px,88vw);
  background:var(--ink-ground);color:var(--on-ink);
  padding:104px 32px 32px 32px;overflow-y:auto;display:flex;flex-direction:column;justify-content:center;
  transform:translateX(100%);visibility:hidden;
  transition:transform .32s cubic-bezier(.22,.61,.36,1),visibility 0s .32s}
.drawer.open{transform:none;visibility:visible;transition:transform .32s cubic-bezier(.22,.61,.36,1),visibility 0s}
.drawer-eyebrow{font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--on-ink-faint);padding-bottom:18px;border-bottom:1px solid rgba(247,243,233,.14);margin:0 0 6px}
.drawer-list{list-style:none;margin:0;padding:0}
.drawer-list a{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;
  text-decoration:none;color:var(--on-ink);padding:13px 0;
  border-bottom:1px solid rgba(247,243,233,.14);
  font-family:var(--display);font-weight:800;font-size:27px;line-height:1.1;
  letter-spacing:-.02em;transition:color .2s}
.drawer-list i{font-family:var(--sans);font-style:normal;font-weight:600;font-size:12px;
  letter-spacing:.14em;color:var(--gold);font-variant-numeric:tabular-nums;transition:color .2s}
.drawer-list a:hover{color:var(--blue)}
.drawer-list a[aria-current="page"]{color:var(--gold)}
.drawer-list a[aria-current="page"] i{color:var(--blue)}
.drawer-list li:last-child a{border-bottom:0}
/* The drawer opens on its own pre-order pill, then the site list, then
   LinkedIn and Substack as their own group. The auto margins split the spare
   height: the pill + list float in the upper middle, the socials drop to the
   foot. The ↗ is narrower than 01–04, so the number slot has a fixed width. */
.drawer-list i{min-width:18px}
.drawer-cta{align-self:flex-start;margin:auto 0 28px}
.drawer-list.social{margin-top:auto;padding-top:40px}
.drawer-list.social li:first-child a{border-top:1px solid rgba(247,243,233,.14)}
/* The drawer is a fixed 392px panel, so its type is a fixed size rather than
   scaling with the window; it steps down once on phones, where the panel
   narrows to 88vw. The ways off the site sit 25% smaller than the site list. */
.drawer-list.social a{font-size:20px;padding:10px 0}
@media (max-width:440px){.drawer-list a{font-size:23px}.drawer-list.social a{font-size:17px}}
@media (max-width:520px){.drawer{padding:96px 22px 26px 22px}}
@media (prefers-reduced-motion:reduce){.drawer,.nav-scrim,.burger span,.drawer-list a{transition:none}}

/* ---------- tape: available, not on a torn edge ---------- */
.tape{position:absolute;left:0;top:0;bottom:0;width:30px;background:#0B2935;color:var(--gold);overflow:hidden;z-index:2}
.tape .run{position:absolute;left:0;top:0;writing-mode:vertical-rl;white-space:nowrap;font-weight:700;font-size:11px;letter-spacing:.24em;text-transform:uppercase;line-height:30px;animation:tape-v 40s linear infinite}
.tape .run span{padding:0 0 22px;display:inline-block}
.tape .run span::after{content:"•";display:inline-block;margin-top:22px;color:var(--blue)}
@keyframes tape-v{to{transform:translateY(-50%)}}
/* the gold variant — the tape as an object, navy type on post-it yellow. */
.tape.gold{background:var(--gold);color:#0B2935}
.tape.gold .run span::after{color:#0284B5}
.tape.diag{left:auto;top:auto;bottom:auto;width:auto;height:30px;transform-origin:center;white-space:nowrap}
.tape.diag .run{writing-mode:horizontal-tb;position:static;display:block;line-height:30px;animation:tape-h 30s linear infinite}
.tape.diag .run span{padding:0 22px 0 0}
.tape.diag .run span::after{margin:0 0 0 22px}
@keyframes tape-h{to{transform:translateX(-50%)}}

/* ---------- the torn edge: Paper & Field's, unchanged ----------
   Only where light meets dark: the top of the emphasis section and the top
   of the close. The tear is the colour of the band it belongs to. */
.tear{position:absolute;left:0;right:0;top:0;height:38px;transform:translateY(-97%);color:var(--ink-ground);pointer-events:none;z-index:1}
.tear svg{display:block;width:100%;height:100%}
/* An edge is drawn half on the page and half on its band, in --paper and --ink.
   A navy section re-points both at its own ground, which would fill the far
   dunes and peaks with navy; the edge takes the page's values back. */
.tear{--paper:var(--page-paper);--ink:var(--page-ink)}

/* ---------- pagehead & hero ---------- */
.hero,.pagehead{position:relative;overflow:hidden}
.hero{padding:172px 0 72px}
.pagehead{padding:150px 0 40px}
@media (max-width:760px){.hero{padding:124px 0 56px}.pagehead{padding:112px 0 32px}}
.hero .wrap,.pagehead .wrap{position:relative;z-index:1;display:grid;gap:24px;justify-items:start}
.hero h1{max-width:15ch}
.pagehead h1{max-width:16ch}
@media (min-width:1100px){.pagehead h1{max-width:22ch}}
@media (min-width:1100px){.pagehead.about h1{font-size:clamp(40px,5.12vw,67px)}}
.pagehead .lede{max-width:54ch;color:var(--ink-soft)}
.hero .cred{font-size:16.5px;line-height:1.6;color:var(--ink-soft);max-width:58ch}
.hero .cred b{color:var(--ink);font-weight:600}
.hero .cred .chip{margin-top:10px}
/* the field: one per page, behind the head. Masked off the copy. */
.field-bridge,.field-head,.field-full,.field-rule{position:absolute;left:0;top:0;width:100%;display:block;pointer-events:none;z-index:0}
.field-bridge{height:76px}
.field-rule{height:26px}
.field-head{height:100%;-webkit-mask-image:linear-gradient(102deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.28) 32%,rgba(0,0,0,.74) 60%,#000 82%);mask-image:linear-gradient(102deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.28) 32%,rgba(0,0,0,.74) 60%,#000 82%)}
/* Home only. Opened up on 10 Oct 2026 (it ran .12 / .22 / .66): the field shows
   through behind the name now, and a second gradient fades it out over the
   last fifth so it does not stop on a line where the work ends. */
.field-full{height:100%;-webkit-mask-image:linear-gradient(118deg,rgba(0,0,0,.38) 0%,rgba(0,0,0,.45) 30%,rgba(0,0,0,.76) 58%,#000 80%),linear-gradient(to bottom,#000 78%,transparent 98%);-webkit-mask-composite:source-in;mask-image:linear-gradient(118deg,rgba(0,0,0,.38) 0%,rgba(0,0,0,.45) 30%,rgba(0,0,0,.76) 58%,#000 80%),linear-gradient(to bottom,#000 78%,transparent 98%);mask-composite:intersect}
@media (max-width:760px){.field-head,.field-full{display:none}}

/* the proof strip: Sticky Wall's rule, Bricolage figures */
.proof{display:grid;grid-template-columns:repeat(3,1fr);border-top:1.5px solid var(--ink);width:100%}
.proof div{padding:18px 22px 18px 0;border-right:1.5px solid var(--hair);display:grid;gap:6px;align-content:start}
.proof div+div{padding-left:22px}
.proof div:last-child{border-right:0}
.proof b{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.2vw,30px);line-height:1;letter-spacing:-.02em}
.proof span{font-size:14px;line-height:1.4;color:var(--ink-soft)}
@media (max-width:760px){.proof{grid-template-columns:1fr}.proof div{border-right:0;border-bottom:1.5px solid var(--hair);padding-left:0!important}.proof div:last-child{border-bottom:0}}

/* ---------- sections: the hub's rhythm ---------- */
.section{position:relative;padding:clamp(60px,7vw,100px) 0;border-top:1px solid var(--hair-soft)}
.section.tight{padding:clamp(36px,5vw,60px) 0}
.section.deep{background:var(--surface-2)}
.section.tint{background:var(--blue-tint)}
/* the emphasis block: one per page, on navy, tearing over the paper above.
   In light it sinks; in dark it lifts. The cards inside keep their cream. */
.section.ink{background:var(--ink-ground);color:var(--on-ink);border-top:0;padding-top:clamp(72px,8vw,112px);
  --ink:#F1ECDF;--ink-soft:rgba(247,243,233,.8);--ink-faint:rgba(247,243,233,.55);
  --hair:rgba(247,243,233,.18);--hair-soft:rgba(247,243,233,.1);--paper:var(--ink-ground)}
.section.ink .lede{color:var(--on-ink)}
.section.ink .label:not(.gold):not(.blue):not(.coral){color:var(--on-ink);border-color:var(--on-ink);background:transparent}
.section.ink .pill.ghost{color:var(--on-ink);border-color:var(--on-ink)}
.section.ink .pill.ghost i{background:var(--on-ink)}.section.ink .pill.ghost i::before{border-color:#0B2935}
.section.ink .more i{border-color:var(--on-ink)}
.section.ink .card{--ink:#0B2935;--ink-soft:#3E5560;--ink-faint:#6E828A;background:var(--surface);border-color:transparent;color:#0B2935}
:root[data-theme="dark"] .section.ink .card{--ink:#F1ECDF;--ink-soft:#B9C4C8;--ink-faint:#8A9AA1;color:#F1ECDF;background:var(--ink-surface)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .section.ink .card{--ink:#F1ECDF;--ink-soft:#B9C4C8;--ink-faint:#8A9AA1;color:#F1ECDF;background:var(--ink-surface)}}
.sec-row{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;margin-bottom:clamp(26px,3.4vw,42px);padding-bottom:16px;border-bottom:1.5px solid var(--hair)}
.sec-head{display:grid;gap:14px;justify-items:start;max-width:680px}
.two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:start}
.two.even{grid-template-columns:1fr 1fr}
.two.rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
@media (max-width:860px){.two,.two.even,.two.rev{grid-template-columns:1fr}}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:960px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr}}
@media (max-width:700px){.g2{grid-template-columns:1fr}}
@media (max-width:520px){.g4{grid-template-columns:1fr}}

/* ---------- SURFACE: the hub's card, re-tokened ---------- */
.card{position:relative;background:var(--surface);border:1px solid var(--hair-soft);border-radius:var(--r-card);padding:24px 22px 26px;box-shadow:var(--shadow-sm);display:grid;gap:10px;align-content:start;text-decoration:none;color:inherit;transition:border-color .22s,transform .22s}
a.card:hover,.card.lift:hover{border-color:var(--blue);transform:translateY(-3px)}
.card.tint{background:var(--blue-tint);border-color:transparent}
.card p{font-size:15.5px;line-height:1.55;color:var(--ink-soft)}
.card .kicker{color:var(--blue-text)}
.card .kicker.soft{color:var(--ink-faint)}
.card h3{font-size:clamp(19px,1.8vw,22px)}
.card .more{margin-top:auto;padding-top:10px}
.card .icon{width:46px;height:46px}
.card .icon svg{width:100%;height:100%;overflow:visible}
.card .go{position:absolute;top:18px;right:18px;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;opacity:.35;transition:opacity .2s,background .2s,transform .2s}
.card .go::before{content:"";width:7px;height:7px;border-top:1.8px solid var(--ink);border-right:1.8px solid var(--ink);transform:translateX(-1px) rotate(45deg)}
a.card:hover .go,.card.lift:hover .go{opacity:1;background:var(--blue);border-color:var(--blue);transform:translateX(3px)}
.metas{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.metas span{font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);background:var(--surface-2);border-radius:999px;padding:6px 12px}
.card.tint .metas span{background:rgba(255,253,247,.6)}
:root[data-theme="dark"] .card.tint .metas span{background:rgba(10,31,41,.35)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .card.tint .metas span{background:rgba(10,31,41,.35)}}

/* ---------- TILE: flat, the bento ---------- */
.tile{border-radius:var(--r-tile);padding:clamp(22px,3vw,34px);background:var(--surface-2);display:grid;gap:10px;align-content:start;position:relative;overflow:hidden}
.tile.gold{background:var(--gold);color:#0B2935}
.tile.blue{background:var(--blue-tint)}
.tile.dashed{background:transparent;border:1.5px dashed var(--ink)}
.tile.statement{font-family:var(--display);font-weight:800;font-size:clamp(24px,2.6vw,34px);line-height:1.06;letter-spacing:-.02em}
.tile p{font-size:15.5px;line-height:1.5;color:var(--ink-soft)}
.tile.gold p{color:#0B2935}
.tile.photo{padding:0;min-height:280px;background:var(--surface-2)}
.tile.photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.tile.photo .tag{position:absolute;left:16px;bottom:16px;background:#0B2935;color:#F7F3E9;font-size:13px;font-weight:600;padding:8px 12px;border-radius:999px}
:root[data-theme="dark"] .tile.photo .tag{background:var(--gold);color:#0B2935}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tile.photo .tag{background:var(--gold);color:#0B2935}}
.stat{display:grid;gap:8px}
.stat b{font-family:var(--display);font-weight:800;font-size:clamp(40px,5vw,66px);line-height:.95;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat span{font-size:15px;line-height:1.45;color:var(--ink-soft)}
.stat.gold span{color:#0B2935}
.section.ink .tile:not(.gold):not(.blue){background:var(--ink-surface);color:var(--on-ink)}
.section.ink .tile:not(.gold):not(.blue) p,.section.ink .stat:not(.gold):not(.blue) span{color:var(--on-ink-soft)}
.section.ink .tile.blue{color:#0B2935}.section.ink .tile.blue span{color:#0B2935}
:root[data-theme="dark"] .section.ink .tile.blue{color:#F1ECDF}:root[data-theme="dark"] .section.ink .tile.blue span{color:#B9C4C8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .section.ink .tile.blue{color:#F1ECDF}:root:not([data-theme="light"]) .section.ink .tile.blue span{color:#B9C4C8}}
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.bento>*{grid-column:span 4}
.bento .c6{grid-column:span 6}.bento .c8{grid-column:span 8}.bento .c12{grid-column:span 12}
@media (max-width:900px){.bento>*{grid-column:span 6}.bento .c12{grid-column:span 12}}
@media (max-width:600px){.bento>*,.bento .c6,.bento .c8{grid-column:span 12}}

/* ---------- spec rows, callout, quote, sticky, aside ---------- */
.spec{display:grid;border-top:1.5px solid var(--hair)}
.spec div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:12px 0;border-bottom:1.5px solid var(--hair);font-size:15px}
.spec b{font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.spec span{font-weight:500;text-align:right;color:var(--ink)}
.roles{display:grid;border-top:1.5px solid var(--hair)}
.roles .role{padding:14px 0;border-bottom:1.5px solid var(--hair)}
.roles .role b{display:block;font-weight:700;font-size:16px;line-height:1.22;color:var(--ink)}
.roles .role .co{display:block;font-weight:500;font-size:14px;color:var(--ink);margin-top:2px}
.roles .role .ind{display:block;font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-top:6px}
.roles .role .pin{display:inline-block;vertical-align:middle;margin-left:8px;font-weight:700;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#0B2935;background:var(--gold);padding:2px 7px;border-radius:100px;transform:translateY(-1px)}
.callout{background:var(--gold-wash);border-left:3px solid var(--gold);padding:22px 24px;border-radius:0 10px 10px 0;max-width:var(--measure);display:grid;gap:8px}
.callout .k{font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.callout p{color:var(--ink);font-size:16px;line-height:1.55}
.callout a{color:var(--blue-text)}
.quote{font-family:var(--voice);font-size:clamp(22px,2.2vw,30px);line-height:1.3;font-weight:400;font-variation-settings:"opsz" 72,"SOFT" 30;max-width:30ch;display:grid;gap:14px}
.quote cite{font-family:var(--sans);font-style:normal;font-size:13px;font-weight:600;color:var(--ink-soft);letter-spacing:.02em;line-height:1.6}
.quote cite em{font-style:italic;font-weight:500}
.quote::before{content:"\201C";font-size:2.6em;line-height:.4;color:var(--blue);display:block;height:.35em;margin-top:.2em}
.note{background:var(--gold);color:#0B2935;padding:18px 18px 22px;font-family:var(--hand);font-weight:500;font-size:clamp(21px,1.8vw,26px);line-height:1.15;box-shadow:0 2px 3px rgba(11,41,53,.08),0 14px 24px -8px rgba(11,41,53,.22);position:relative;transform:rotate(var(--r,-1.5deg));transition:transform .2s cubic-bezier(.2,1.2,.3,1);max-width:300px}
.note:hover{transform:rotate(0) scale(1.03);z-index:2}
.note::before{content:"";position:absolute;top:-10px;left:50%;width:56px;height:18px;transform:translateX(-50%) rotate(var(--t,-2deg));background:rgba(255,255,255,.55);border:1px solid rgba(11,41,53,.08)}
.note cite{display:block;font-style:normal;font-family:var(--sans);font-weight:600;font-size:13px;margin-top:12px;color:#3E5560}
.aside{font-family:var(--hand);font-weight:500;font-size:24px;line-height:1.15;color:var(--ink-soft);transform:rotate(-1.5deg);max-width:26ch;display:grid;gap:6px}
.aside svg{width:54px;height:30px;stroke:var(--coral);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.jump{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;margin-bottom:30px}
.jump b{font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-right:4px}
.jump a{text-decoration:none;font-weight:600;border:1.5px solid var(--hair);border-radius:999px;padding:7px 14px;background:var(--surface);transition:border-color .18s,background .18s}
.jump a:hover{border-color:var(--ink);background:var(--gold);color:#0B2935}
.cover{border-radius:12px;overflow:hidden;box-shadow:var(--shadow-lg);max-width:380px}

/* ---------- the scribble: coral, drawn, once a page ---------- */
.ul{position:relative;display:inline-block;white-space:nowrap}
.ul svg{position:absolute;left:-2%;right:-2%;bottom:-.14em;width:104%;height:.36em;overflow:visible}
.ul svg path{fill:none;stroke:var(--coral);stroke-width:5;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset 1.1s .5s cubic-bezier(.4,0,.2,1)}
.ul.drawn svg path{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.ul svg path{stroke-dashoffset:0}}

/* ---------- CLOSE + FOOTER: one navy piece ---------- */
.close{position:relative;background:var(--ink-ground);color:var(--on-ink);padding:clamp(84px,9vw,128px) 0 clamp(48px,5vw,72px);margin-top:38px}
.close .inner{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px}
.close h2{font-family:var(--voice);font-weight:400;font-size:clamp(34px,4.6vw,64px);line-height:1.05;letter-spacing:-.012em;max-width:17ch;font-variation-settings:"opsz" 144,"SOFT" 20;color:var(--on-ink)}
.close h2 em{font-style:italic;font-weight:500;color:var(--gold);font-variation-settings:"opsz" 144,"SOFT" 40,"WONK" 1}
.close .pill{border-color:var(--on-ink);color:var(--on-ink);background:transparent}
.close .pill i{background:var(--on-ink)}.close .pill i::before{border-color:#0B2935}
.close .pill.primary{background:var(--gold);color:#0B2935;border-color:var(--gold)}
.close .pill.primary i{background:#0B2935}.close .pill.primary i::before{border-color:var(--gold)}
footer{position:relative;margin-top:38px;background:var(--ink-ground);color:var(--on-ink);padding:clamp(56px,6vw,84px) 0 32px}
footer .wrap{display:grid;gap:clamp(40px,5vw,60px)}
/* The page's close copy + CTAs sit left, the site links right, sharing one band. */
footer .top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(36px,5vw,72px);align-items:start}
@media (max-width:860px){footer .top{grid-template-columns:1fr;gap:clamp(36px,6vw,48px)}}
footer .lead{max-width:34ch}
footer .lead h2{margin:0;font-family:var(--voice);font-weight:400;font-size:clamp(30px,3.6vw,48px);line-height:1.05;letter-spacing:-.012em;color:var(--on-ink);font-variation-settings:"opsz" 144,"SOFT" 20}
footer .lead h2 em{font-style:italic;font-weight:500;color:var(--gold);font-variation-settings:"opsz" 144,"SOFT" 40,"WONK" 1}
footer .lead .ctas{margin-top:clamp(24px,2.6vw,32px)}
footer .lead .pill{border-color:var(--on-ink);color:var(--on-ink);background:transparent}
footer .lead .pill i{background:var(--on-ink)}footer .lead .pill i::before{border-color:#0B2935}
footer .lead .pill.primary{background:var(--gold);color:#0B2935;border-color:var(--gold)}
footer .lead .pill.primary i{background:#0B2935}footer .lead .pill.primary i::before{border-color:var(--gold)}
footer .cols{display:grid;grid-template-columns:repeat(2,minmax(0,auto));gap:clamp(22px,3vw,48px)}
@media (max-width:520px){footer .cols{grid-template-columns:1fr 1fr}}
footer .col{display:grid;gap:9px;align-content:start;font-size:15px}
footer .col b{font-weight:600;color:var(--gold);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px}
footer .col a{text-decoration:none;color:var(--on-ink-soft)}
footer .col a:hover{color:var(--on-ink);text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:2px;text-underline-offset:4px}
footer .bottom{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;font-size:13px;color:var(--on-ink-faint);border-top:1px solid rgba(247,243,233,.14);padding-top:22px}
footer .bottom em{font-style:normal}

/* ---------- reveal on scroll, from a visible resting state ---------- */
.reveal{transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .7s}
.reveal.pre{opacity:.001;transform:translateY(16px)}
@media (prefers-reduced-motion:reduce){.reveal.pre{opacity:1;transform:none}}

/* ---------- essay rows: the hub's list, on hairlines ---------- */
.essays{border-top:1.5px solid var(--hair)}
.essay{display:grid;grid-template-columns:130px 1fr auto;gap:28px;align-items:baseline;padding:26px 0;border-bottom:1.5px solid var(--hair);text-decoration:none;transition:background .2s}
.essay:hover{background:var(--surface)}
.essay .no{font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-text)}
.essay h3{margin-bottom:8px}
.essay p{color:var(--ink-soft);max-width:58ch;font-size:15.5px;line-height:1.55}
.essay .go{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;white-space:nowrap}
.essay .go i{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;transition:background .18s,transform .2s}
.essay .go i::before{content:"";width:7px;height:7px;border-top:1.8px solid currentColor;border-right:1.8px solid currentColor;transform:translateX(-1px) rotate(45deg)}
.essay:hover .go i{background:var(--blue);border-color:var(--blue);color:#0B2935;transform:translateX(3px)}
@media (max-width:860px){.essay{grid-template-columns:1fr;gap:10px}.essay .go{white-space:normal}}

/* ---------- forms ---------- */
.field{display:block;margin-bottom:20px}
.field > span{display:block;font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}
.field input,.field textarea,.field select{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--surface);border:1.5px solid var(--hair);border-radius:10px;padding:12px 15px;transition:border-color .2s,box-shadow .2s}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;background-size:6px 6px;background-repeat:no-repeat}
.field textarea{min-height:150px;resize:vertical;line-height:1.6}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(2,173,236,.28)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formnote{font-size:14px;line-height:1.6;color:var(--ink-faint);margin-top:14px}
.status{margin-top:18px;font-size:15px;line-height:1.6;padding:14px 16px;border-radius:10px;display:none}
.status.show{display:block}
.status.ok{background:var(--gold-wash);color:var(--ink);border-left:3px solid var(--gold)}
.status.err{background:var(--surface-2);color:var(--ink);border-left:3px solid var(--coral)}

/* ---------- the podcast's pre-launch state ---------- */
.pod{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,64px);align-items:start}
@media (max-width:860px){.pod{grid-template-columns:1fr}}