/* ==========================================================================
   vaiblog.com — design system v2
   tokens → reset → primitives → chrome → hero → sections → utilities → motion
   ========================================================================== */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────── */

:root {
  /* ── Canonical design tokens. Values fixed; do not change. ──────────────
     The longer names further down are the working aliases used throughout
     the stylesheet, so both vocabularies resolve to the same colours. */
  --bg:  #faf8f4;
  --bg2: #f1ede4;
  --ink: #0e0d0b;
  --text:#28231c;
  --muted:#6b6055;
  --gold:  #b5820a;
  --gold2: #d4a017;
  --gold-l:#f5c842;
  --fd:'Cormorant Garamond', Georgia, serif;
  --fb:'Syne', system-ui, sans-serif;

  /* brand ramp — gold stays constant across themes, the ground shifts */
  --gold-900:#6b4c05;
  --gold-700:#8f6708;
  --gold-400:var(--gold2);
  --gold-300:#e8bb3d;
  --gold-200:#f5d67a;

  /* Brand gold at #b5820a is only ~3.4:1 on cream, so it is a fill colour, not
     a text colour. These two are the text-safe golds: --gold-text clears 4.5:1
     for body-sized type, --gold-strong clears 3:1 for display sizes. */
  --gold-text:#7d5a07;
  --gold-strong:#8f6708;
  --gold-deep:#8f6708;      /* gold that carries white text */

  /* hero headline ramp, kept entirely inside the readable range */
  --gild-1:#6b4c05; --gild-2:#b5820a; --gild-3:#8f6708; --gild-4:#a8790a;

  /* light ground */
  --bg-sunk:var(--bg2);
  --bg-raised:#ffffff;
  --bg-invert:#0d0c0a;

  --ink:#0e0d0b;
  --text:#2a251d;
  --muted:#6a6155;
  --faint:#6b6153;

  --line:rgba(14,13,11,.10);
  --line-soft:rgba(14,13,11,.06);
  --line-gold:rgba(181,130,10,.22);

  --wash-gold:rgba(181,130,10,.07);
  --glow-gold:rgba(181,130,10,.28);

  --on-invert:#f6f2ea;
  --on-invert-muted:rgba(246,242,234,.58);
  --on-invert-line:rgba(246,242,234,.13);
  /* gold legible against --bg-invert, which flips with the theme */
  --gold-invert:#e8bb3d;

  --shadow-sm:0 1px 2px rgba(14,13,11,.05), 0 2px 8px rgba(14,13,11,.04);
  --shadow-md:0 4px 12px rgba(14,13,11,.06), 0 16px 40px rgba(14,13,11,.07);
  --shadow-lg:0 8px 24px rgba(14,13,11,.08), 0 32px 80px rgba(14,13,11,.10);
  --shadow-gold:0 10px 34px rgba(181,130,10,.26);

  --grain-opacity:.032;
  --hero-veil:rgba(250,248,244,.42);

  /* type */
  --f-display:var(--fd);
  --f-ui:var(--fb);
  --f-mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* fluid scale — clamp(min, preferred, max) */
  --t-xs:.6875rem;
  --t-sm:.8125rem;
  --t-base:clamp(.95rem, .9rem + .2vw, 1.0625rem);
  --t-lg:clamp(1.05rem, .98rem + .35vw, 1.25rem);
  --t-h4:clamp(1.1rem, 1rem + .5vw, 1.35rem);
  --t-h3:clamp(1.3rem, 1.1rem + .9vw, 1.85rem);
  --t-h2:clamp(2rem, 1.5rem + 2.4vw, 3.6rem);
  --t-h1:clamp(2.6rem, 1.7rem + 4.1vw, 5.4rem);
  --t-mega:clamp(3.4rem, 1.4rem + 9vw, 11rem);

  /* space */
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem;   --s-7:3rem;   --s-8:4rem;
  --s-9:6rem;   --s-10:8rem;
  --gutter:clamp(1.25rem, 4vw, 2.75rem);
  --bay:clamp(4.5rem, 9vw, 9rem);
  --measure:min(1240px, 100%);

  /* shape + motion */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:32px; --r-pill:999px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --dur-fast:180ms;
  --dur:340ms;
  --dur-slow:720ms;

  --nav-h:74px;
  color-scheme: light;
}

[data-theme="dark"] {
  --bg:#0b0a09;
  --bg-sunk:#000000;
  --bg-raised:#141210;
  --bg-invert:#f7f3eb;

  --ink:#f7f3ea;
  --text:#e2dbcd;
  --muted:#9a9285;
  --faint:#8a8175;

  --line:rgba(247,243,234,.12);
  --line-soft:rgba(247,243,234,.07);
  --line-gold:rgba(212,160,23,.30);

  --gold:#d4a017;
  --gold-400:#e8bb3d;
  --gold-300:#f5d67a;
  --gold-text:#d4a017;
  --gold-strong:#e8bb3d;
  --gold-deep:#8f6708;
  --gild-1:#8f6708; --gild-2:#f5d67a; --gild-3:#d4a017; --gild-4:#e8bb3d;

  --wash-gold:rgba(212,160,23,.09);
  --glow-gold:rgba(212,160,23,.34);

  --on-invert:#0e0d0b;
  --on-invert-muted:rgba(14,13,11,.62);
  --on-invert-line:rgba(14,13,11,.14);
  /* the inverted band is near-white in dark mode, so this goes deep, not pale */
  --gold-invert:#7d5a07;

  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow-md:0 6px 18px rgba(0,0,0,.5), 0 20px 48px rgba(0,0,0,.42);
  --shadow-lg:0 10px 30px rgba(0,0,0,.55), 0 40px 90px rgba(0,0,0,.5);
  --shadow-gold:0 10px 36px rgba(212,160,23,.24);

  --grain-opacity:.055;
  --hero-veil:rgba(11,10,9,.5);

  color-scheme: dark;
}

/* ── 2. RESET ──────────────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 1rem)}
body{
  font-family:var(--f-ui);
  font-size:var(--t-base);
  line-height:1.7;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
img,video,svg,canvas{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
::selection{background:var(--gold-deep);color:#fff}

h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.04;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
h1{font-size:var(--t-h1);font-weight:700}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3)}
h4{font-size:var(--t-h4)}
p{text-wrap:pretty}
strong,b{font-weight:600;color:var(--ink)}
em{font-style:italic}

:focus-visible{outline:2px solid var(--gold-400);outline-offset:3px;border-radius:4px}
.skip-link{position:absolute;left:1rem;top:-100px;z-index:2000;background:var(--gold-deep);color:#fff;
  padding:.75rem 1.25rem;border-radius:var(--r-sm);font-size:var(--t-sm);font-weight:700;transition:top var(--dur) var(--ease)}
.skip-link:focus{top:1rem}

/* ── 3. PRIMITIVES ─────────────────────────────────────────────────────── */

.shell{width:var(--measure);margin-inline:auto;padding-inline:var(--gutter)}
.shell-narrow{width:min(820px,100%);margin-inline:auto;padding-inline:var(--gutter)}
/* Containment for the decorative orbs and the marquee, all of which are
   deliberately wider than the viewport. Clip at section level, never on html or
   body: a root-level clip makes the root a clip container and silently kills
   position:sticky everywhere (the story page's chapter years). */
.bay,.phead,.ribbon,.closer{overflow-x:clip}
.bay{position:relative;padding-block:var(--bay)}

/* eyebrow / section label */
.eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--f-mono);font-size:var(--t-xs);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text);
  margin-bottom:var(--s-4);
}
.eyebrow::before{content:'';width:1.75rem;height:1px;background:currentColor;opacity:.7}
.eyebrow--invert{color:var(--gold-invert)}

/* dot that pulses — used for "available" state */
.pulse-dot{width:7px;height:7px;border-radius:50%;background:currentColor;position:relative;flex:none}
.pulse-dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:currentColor;animation:ping 2.4s var(--ease) infinite}

/* section head: title left, action right */
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-5);flex-wrap:wrap;margin-bottom:var(--s-7)}
.head p{color:var(--muted);max-width:52ch;margin-top:var(--s-3)}

/* buttons */
.btn{
  --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--line);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:46px;padding:.8rem 1.6rem;
  font-family:var(--f-ui);font-size:var(--t-sm);font-weight:700;letter-spacing:.06em;
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bd);
  border-radius:var(--r-pill);cursor:pointer;overflow:hidden;isolation:isolate;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease),
             background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn svg{width:16px;height:16px;flex:none}
.btn::after{ /* wipe fill */
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--gold-700);transform:scaleX(0);transform-origin:right;
  transition:transform var(--dur) var(--ease);
}
.btn:hover::after{transform:scaleX(1);transform-origin:left}
.btn:hover{border-color:var(--gold-text);color:#fff}

.btn--gold{--btn-bg:var(--gold-deep);--btn-fg:#fff;--btn-bd:var(--gold-deep);box-shadow:var(--shadow-gold)}
.btn--gold::after{background:var(--ink)}
.btn--gold:hover{color:#fff;border-color:var(--ink);box-shadow:var(--shadow-md)}
/* dark mode flips the pairing: bright gold fill carries dark ink */
[data-theme="dark"] .btn--gold{--btn-bg:var(--gold);--btn-bd:var(--gold);--btn-fg:#17130a}
[data-theme="dark"] .btn--gold::after{background:var(--gold-300)}
[data-theme="dark"] .btn--gold:hover{color:#17130a;border-color:var(--gold-300)}

.btn--solid{--btn-bg:var(--ink);--btn-fg:var(--bg);--btn-bd:var(--ink)}
.btn--onDark{--btn-fg:var(--on-invert);--btn-bd:var(--on-invert-line)}
.btn--onDark:hover{color:#fff}
.btn--sm{min-height:38px;padding:.5rem 1.1rem;font-size:var(--t-xs)}

/* arrow that slides on hover */
.btn .arw{transition:transform var(--dur) var(--ease)}
.btn:hover .arw{transform:translateX(3px)}

/* text link with underline draw */
.tlink{
  display:inline-flex;align-items:center;gap:.45rem;position:relative;
  font-size:var(--t-sm);font-weight:700;letter-spacing:.05em;color:var(--gold-text);
  padding-bottom:2px;
}
.tlink::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform var(--dur) var(--ease)}
.tlink:hover::after{transform:scaleX(1);transform-origin:left}
.tlink svg{width:14px;height:14px;transition:transform var(--dur) var(--ease)}
.tlink:hover svg{transform:translateX(3px)}

/* chips / tags */
.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.4rem .85rem;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--bg-raised);font-size:var(--t-xs);font-weight:600;color:var(--muted);
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.chip::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--gold);flex:none}
.chip:hover{border-color:var(--line-gold);color:var(--ink);transform:translateY(-2px)}
.chip-row{display:flex;flex-wrap:wrap;gap:.5rem}

.tag{
  display:inline-flex;align-items:center;padding:.3rem .8rem;border-radius:var(--r-pill);
  background:var(--wash-gold);border:1px solid var(--line-gold);color:var(--gold-text);
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.05em;
}

/* surface card */
.surface{
  background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* ── 4. TEXTURE & OVERLAYS ─────────────────────────────────────────────── */

/* film grain over everything — the single biggest "expensive" tell */
.grain{
  position:fixed;inset:-150%;z-index:900;pointer-events:none;
  opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 700ms steps(4) infinite;
  will-change:transform;
}

/* the breathing mesh behind the homepage */
#mesh{
  position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 40%,#000 25%,transparent 85%);
          mask-image:radial-gradient(ellipse 90% 80% at 50% 40%,#000 25%,transparent 85%);
}
body > main, body > footer, body > header, body > .closer{position:relative;z-index:1}

/* faint gold grid, masked to a soft ellipse */
.meshgrid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--line-gold) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-gold) 1px,transparent 1px);
  background-size:54px 54px;
  opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 42%,#000 15%,transparent 78%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 42%,#000 15%,transparent 78%);
}

/* soft gold orb */
.orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(2px);
  background:radial-gradient(circle,var(--wash-gold),transparent 68%)}

/* scroll progress rail */
#progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:800;pointer-events:none;
  background:linear-gradient(90deg,var(--gold),var(--gold-300));transform:scaleX(0);transform-origin:left;
  will-change:transform}

/* ── 5. CURSOR ─────────────────────────────────────────────────────────── */

.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;z-index:950;pointer-events:none;
  border-radius:50%;opacity:0;transition:opacity var(--dur) var(--ease)}
body.cursor-live .cursor-dot,body.cursor-live .cursor-ring{opacity:1}
.cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--gold);
  transition:opacity var(--dur) var(--ease), transform var(--dur-fast) var(--ease)}
.cursor-ring{width:40px;height:40px;margin:-20px 0 0 -20px;border:1px solid var(--line-gold);
  display:grid;place-items:center;
  transition:opacity var(--dur) var(--ease), width var(--dur) var(--ease), height var(--dur) var(--ease),
             margin var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease)}
.cursor-ring .clabel{font-family:var(--f-mono);font-size:9px;letter-spacing:.14em;color:#fff;opacity:0;
  transition:opacity var(--dur) var(--ease);text-transform:uppercase}
body.cur-hover .cursor-ring{width:62px;height:62px;margin:-31px 0 0 -31px;border-color:var(--gold-text)}
body.cur-hover .cursor-dot{transform:scale(0)}
body.cur-view .cursor-ring{width:82px;height:82px;margin:-41px 0 0 -41px;background:var(--gold);border-color:var(--gold-text)}
body.cur-view .cursor-ring .clabel{opacity:1}
body.cur-down .cursor-ring{transform:scale(.82)}

/* pointer:fine only — never hide the real cursor on touch */
@media (hover:hover) and (pointer:fine){
  body.cursor-live,body.cursor-live a,body.cursor-live button,
  body.cursor-live [role="button"],body.cursor-live input,body.cursor-live textarea{cursor:none}
}
@media not all and (min-width:769px){.cursor-dot,.cursor-ring{display:none}}

/* comet trail behind the ring */
.cursor-trail{
  position:fixed;top:0;left:0;z-index:940;pointer-events:none;
  width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
  background:var(--gold);opacity:0;
  transition:background var(--dur) var(--ease);
}
body.cur-lit .cursor-trail{background:var(--gold-l);box-shadow:0 0 10px rgba(245,200,66,.55)}
body.cur-lit .cursor-dot{background:var(--gold-l)}
@media not all and (min-width:769px){.cursor-trail{display:none}}

/* ── 6. PRELOADER ──────────────────────────────────────────────────────── */

#preloader{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:var(--bg);
  transition:opacity 600ms var(--ease), visibility 600ms}
#preloader.done{opacity:0;visibility:hidden}
.pre-inner{text-align:center;width:min(320px,72vw)}
.pre-mark{font-family:var(--f-display);font-size:clamp(2rem,6vw,3rem);font-weight:700;color:var(--ink);letter-spacing:-.03em}
.pre-mark span{color:var(--gold-text)}
.pre-bar{height:1px;background:var(--line);margin:var(--s-5) 0 var(--s-3);overflow:hidden}
.pre-bar i{display:block;height:100%;width:0;background:var(--gold);transition:width 220ms linear}
.pre-num{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.2em;color:var(--faint)}

/* ── 7. HEADER / NAV ───────────────────────────────────────────────────── */

#masthead{
  position:fixed;top:0;left:0;right:0;z-index:700;
  transition:background var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease), transform 420ms var(--ease);
  border-bottom:1px solid transparent;
}
#masthead.stuck{
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
          backdrop-filter:blur(18px) saturate(1.4);
  border-bottom-color:var(--line-soft);
}
#masthead.hidden{transform:translateY(-102%)}
.mast-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);height:var(--nav-h)}

.brand{display:inline-flex;align-items:baseline;font-family:var(--f-display);font-size:1.45rem;font-weight:700;
  letter-spacing:-.03em;color:var(--ink);flex:none}
.brand span{color:var(--gold-text)}
.brand em{font-style:normal;font-family:var(--f-mono);font-size:.55rem;letter-spacing:.2em;color:var(--faint);
  margin-left:.5rem;text-transform:uppercase}

.nav-list{display:flex;align-items:center;gap:clamp(1.2rem,2.4vw,2.2rem)}
.nav-list a{position:relative;font-size:var(--t-sm);font-weight:600;letter-spacing:.02em;color:var(--muted);
  padding:.45rem 0;transition:color var(--dur) var(--ease)}
.nav-list a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform var(--dur) var(--ease)}
.nav-list a:hover,.nav-list a[aria-current="page"]{color:var(--ink)}
.nav-list a:hover::after,.nav-list a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}

.mast-actions{display:flex;align-items:center;gap:.6rem;flex:none}

/* theme toggle */
.theme-btn{
  width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line);color:var(--muted);
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease)}
.theme-btn:hover{border-color:var(--line-gold);color:var(--gold-text);transform:rotate(18deg)}
.theme-btn svg{width:17px;height:17px}
.theme-btn .i-moon{display:none}
[data-theme="dark"] .theme-btn .i-moon{display:block}
[data-theme="dark"] .theme-btn .i-sun{display:none}

/* burger */
.burger{display:none;width:44px;height:44px;place-items:center;border:1px solid var(--line);border-radius:50%}
.burger i{display:block;width:16px;height:1.5px;background:var(--ink);border-radius:2px;
  transition:transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease)}
.burger i+i{margin-top:4px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* full-screen mobile drawer */
#drawer{
  position:fixed;inset:0;z-index:690;background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;padding:var(--nav-h) var(--gutter) var(--s-7);
  clip-path:inset(0 0 100% 0);
  transition:clip-path 640ms var(--ease);
  overflow-y:auto;
}
#drawer.open{clip-path:inset(0 0 0 0)}
#drawer nav{display:flex;flex-direction:column;gap:.25rem}
#drawer nav a{
  font-family:var(--f-display);font-size:clamp(2rem,10vw,3.2rem);font-weight:600;color:var(--ink);
  padding:.35rem 0;border-bottom:1px solid var(--line-soft);
  opacity:0;transform:translateY(28px);
  transition:opacity 460ms var(--ease), transform 460ms var(--ease), color var(--dur) var(--ease);
}
#drawer.open nav a{opacity:1;transform:none}
#drawer nav a:hover{color:var(--gold-text)}
#drawer nav a .n{font-family:var(--f-mono);font-size:.6rem;color:var(--gold-text);vertical-align:super;margin-right:.6rem}
.drawer-foot{margin-top:var(--s-7);display:flex;flex-wrap:wrap;gap:var(--s-5);justify-content:space-between;
  font-size:var(--t-sm);color:var(--muted);opacity:0;transition:opacity 400ms 320ms var(--ease)}
#drawer.open .drawer-foot{opacity:1}

@media (max-width:900px){
  .nav-list,.mast-actions .btn{display:none}
  .burger{display:grid}
}

/* ── 8. HERO ───────────────────────────────────────────────────────────── */

.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding-top:var(--nav-h);
  overflow:hidden;isolation:isolate}
#gl{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 56% 68% at 24% 46%, var(--bg) 12%, transparent 72%),
    linear-gradient(to bottom, transparent 58%, var(--bg) 99%)}
.hero .meshgrid{z-index:1}
.hero-body{position:relative;z-index:3;width:100%;padding-block:clamp(3rem,7vh,6rem)}
.hero-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,380px);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}

.hero h1{font-size:var(--t-h1);margin-bottom:var(--s-5);letter-spacing:-.035em}
/* The gradient is painted on the element that actually holds the glyphs.
   Split text moves them into a child .ch, and background-clip:text does not
   reach a child box — so both selectors carry the gradient. data-whole keeps
   the gild to a single .ch, so the ramp still spans the whole phrase. */
.hero h1 .gild,
.hero h1 .gild .ch{
  color:var(--gold-text);font-style:italic;
  background:linear-gradient(100deg,var(--gild-1),var(--gild-2) 42%,var(--gild-3) 68%,var(--gild-4));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  background-size:220% 100%;animation:shimmer 7s linear infinite;
}
.hero-lede{font-size:var(--t-lg);color:var(--muted);max-width:46ch;margin-bottom:var(--s-6);font-weight:300}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:var(--s-8)}

/* A gold rule that draws itself under the gilded line once the headline has
   landed. scaleX is compositor-only, so it costs nothing to animate. */
/* inline-block so the span is one box rather than a fragment per line: an
   absolutely positioned rule cannot span a fragmented inline. The line mask
   that drives the char reveal has to open up, or it clips the rule away. */
.split .ln:has(.gild){overflow:visible;padding-bottom:.14em}
.hero h1 .gild{position:relative;display:inline-block;padding-bottom:.10em}
.hero h1 .gild::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--gild-1),var(--gild-2),var(--gild-4));
  border-radius:2px;transform:scaleX(0);transform-origin:left;
}
.hero h1.run .gild::after{
  transform:scaleX(1);
  transition:transform .9s cubic-bezier(.16,1,.3,1) .3s;
}

/* split-text char reveal */
.split .ln{display:block;overflow:hidden}
.split .wd{display:inline-block;white-space:nowrap}
.split .ch{display:inline-block;will-change:transform,opacity}
.split.pending .ch{opacity:0;transform:translateY(.75em) rotateX(-55deg)}
.split.run .ch{opacity:1;transform:none;transition:opacity 620ms var(--ease), transform 720ms var(--ease)}

/* hero stat strip */
.statstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:var(--s-5);
  padding-top:var(--s-5);border-top:1px solid var(--line)}
.stat-n{display:block;font-family:var(--f-display);font-weight:700;font-size:clamp(1.9rem,3.2vw,2.9rem);
  line-height:1;color:var(--gold-strong);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat-l{display:block;font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint);margin-top:.45rem;line-height:1.4}

/* identity card */
.idcard-wrap{perspective:1400px}
.idcard{
  position:relative;padding:clamp(1.6rem,3vw,2.2rem);border-radius:var(--r-lg);
  background:color-mix(in srgb, var(--bg-raised) 88%, transparent);
  -webkit-backdrop-filter:blur(22px) saturate(1.3); backdrop-filter:blur(22px) saturate(1.3);
  border:1px solid var(--line);box-shadow:var(--shadow-lg);
  transform-style:preserve-3d;transition:box-shadow var(--dur) var(--ease);
  overflow:hidden;
}
.idcard::before{content:'';position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.idcard::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(340px circle at var(--px,50%) var(--py,50%),var(--wash-gold),transparent 60%)}
.idcard > *{position:relative;z-index:1}
.id-top{display:flex;align-items:center;gap:.95rem;margin-bottom:var(--s-5)}
.id-avatar{width:62px;height:62px;border-radius:50%;overflow:hidden;flex:none;
  border:1px solid var(--line-gold);box-shadow:0 0 0 4px var(--wash-gold)}
.id-avatar img{width:100%;height:100%;object-fit:cover;object-position:top center}
.id-name{font-family:var(--f-display);font-size:1.2rem;font-weight:700;color:var(--ink);line-height:1.2}
.id-role{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.09em;color:var(--gold-text);margin-top:.25rem}
.id-rows{display:grid;gap:.05rem;border-top:1px solid var(--line-soft);padding-top:var(--s-4)}
.id-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.42rem 0}
.id-key{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.id-val{font-size:var(--t-sm);font-weight:600;color:var(--text);text-align:right}
.id-status{display:inline-flex;align-items:center;gap:.5rem;margin-top:var(--s-5);padding:.45rem 1rem;
  border-radius:var(--r-pill);background:var(--wash-gold);border:1px solid var(--line-gold);
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.09em;color:var(--gold-text);text-transform:uppercase}

.scroll-hint{position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.scroll-hint i{display:block;width:1px;height:38px;background:linear-gradient(var(--gold),transparent);
  animation:drip 2.2s var(--ease-io) infinite}

@media (max-width:1000px){
  .hero-layout{grid-template-columns:1fr;gap:var(--s-7)}
  .idcard-wrap{max-width:420px}
  .scroll-hint{display:none}
}

/* ── 9. MARQUEE ────────────────────────────────────────────────────────── */

.ribbon{position:relative;background:var(--bg-invert);color:var(--on-invert);padding-block:.9rem;overflow:hidden}
.ribbon::before,.ribbon::after{content:'';position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.ribbon::before{left:0;background:linear-gradient(90deg,var(--bg-invert),transparent)}
.ribbon::after{right:0;background:linear-gradient(-90deg,var(--bg-invert),transparent)}
.ribbon-track{display:flex;width:max-content;animation:slide 44s linear infinite}
.ribbon:hover .ribbon-track{animation-play-state:paused}
.ribbon-item{display:inline-flex;align-items:center;gap:.7rem;padding-inline:1.9rem;white-space:nowrap;
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.15em;text-transform:uppercase;
  color:var(--on-invert-muted)}
.ribbon-item b{color:var(--gold-invert);font-weight:500}
.ribbon-item::after{content:'';width:4px;height:4px;border-radius:50%;background:var(--gold-invert);opacity:.5;margin-left:1.2rem}

/* ── 10. BENTO / WORK GRID ─────────────────────────────────────────────── */

.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.85rem,1.6vw,1.25rem)}
.bento > *{grid-column:span 3}
.bento .w-full{grid-column:span 6}
.bento .w-2{grid-column:span 2}
.bento .w-4{grid-column:span 4}

.work{
  position:relative;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;
  background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--r-lg);
  min-height:280px;
  transform:translateY(var(--lift,0px));
  transition:transform var(--dur-slow) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur-slow) var(--ease);
}
.work:hover{--lift:-6px;border-color:var(--line-gold);box-shadow:var(--shadow-lg)}
.work-shot{position:relative;overflow:hidden;background:var(--bg-sunk);
  flex:1 1 auto;min-height:clamp(180px,20vw,240px)}
.work-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform 900ms var(--ease), filter var(--dur-slow) var(--ease)}
.work:hover .work-shot img{transform:scale(1.055)}
.work-shot::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,color-mix(in srgb,var(--bg-raised) 92%,transparent),transparent 55%)}
.work-body{padding:clamp(1.3rem,2.4vw,1.9rem);display:flex;flex-direction:column;gap:.8rem;flex:1}
.work-meta{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text)}
.work h3{font-size:var(--t-h4)}
.work p{font-size:var(--t-sm);color:var(--muted);line-height:1.75}
.work-foot{margin-top:auto;padding-top:.4rem;display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}

/* inline KPI row inside a card */
.kpi-inline{display:flex;flex-wrap:wrap;gap:1.4rem;padding-top:.5rem}
.kpi-inline div{display:flex;flex-direction:column}
.kpi-inline b{font-family:var(--f-display);font-size:1.5rem;font-weight:700;color:var(--gold-strong);line-height:1;
  font-variant-numeric:tabular-nums}
.kpi-inline span{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.09em;color:var(--faint);margin-top:.3rem}

@media (max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento > *,.bento .w-full,.bento .w-2,.bento .w-4{grid-column:span 2}
}

/* ── 11. METRIC RINGS (SVG data viz) ───────────────────────────────────── */

.rings{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s-5)}
.ring{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.9rem;
  padding:var(--s-5) var(--s-4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-raised);
  transform:translateY(var(--lift,0px));
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease)}
.ring:hover{border-color:var(--line-gold);--lift:-3px}
.ring figure{position:relative;width:118px;height:118px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .trk{fill:none;stroke:var(--line);stroke-width:6}
.ring .arc{fill:none;stroke:url(#goldgrad);stroke-width:6;stroke-linecap:round;
  stroke-dasharray:326.7;stroke-dashoffset:326.7;
  transition:stroke-dashoffset 1600ms var(--ease)}
.ring figcaption{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring-v{font-family:var(--f-display);font-size:1.75rem;font-weight:700;color:var(--ink);line-height:1;
  font-variant-numeric:tabular-nums}
.ring-s{font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;color:var(--faint);text-transform:uppercase;margin-top:.3rem}
.ring-l{font-size:var(--t-sm);font-weight:600;color:var(--text);line-height:1.4}
.ring-note{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--faint);letter-spacing:.06em}

/* horizontal metric bars */
.bars{display:flex;flex-direction:column;gap:var(--s-5)}
.bar-row{display:grid;gap:.55rem}
.bar-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.bar-name{font-size:var(--t-sm);font-weight:600;color:var(--text)}
.bar-val{font-family:var(--f-mono);font-size:var(--t-sm);color:var(--gold-text);font-variant-numeric:tabular-nums}
.bar-trk{height:6px;border-radius:var(--r-pill);background:var(--line);overflow:hidden}
.bar-fil{height:100%;width:0;border-radius:inherit;
  background:linear-gradient(90deg,var(--gold-700),var(--gold-400));
  transition:width 1500ms var(--ease)}

/* ── 12. SERVICES ──────────────────────────────────────────────────────── */

.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(.85rem,1.6vw,1.25rem)}
.svc{
  position:relative;padding:clamp(1.5rem,2.6vw,2.1rem);border-radius:var(--r-lg);
  background:var(--bg-raised);border:1px solid var(--line);overflow:hidden;isolation:isolate;
  transform:translateY(var(--lift,0px));
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.svc::before{content:'';position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(420px circle at var(--px,50%) var(--py,0%),var(--wash-gold),transparent 62%);
  transition:opacity var(--dur) var(--ease)}
.svc:hover{--lift:-5px;border-color:var(--line-gold);box-shadow:var(--shadow-md)}
.svc:hover::before{opacity:1}
.svc-ico{width:46px;height:46px;display:grid;place-items:center;border-radius:12px;margin-bottom:var(--s-4);
  background:var(--wash-gold);border:1px solid var(--line-gold);color:var(--gold-text)}
.svc-ico svg{width:21px;height:21px}
.svc h3{font-size:var(--t-h4);margin-bottom:.6rem}
.svc p{font-size:var(--t-sm);color:var(--muted)}
.svc-n{position:absolute;top:1.1rem;right:1.4rem;font-family:var(--f-mono);font-size:var(--t-xs);color:var(--faint);opacity:.7}

/* ── 13. TIMELINE ──────────────────────────────────────────────────────── */

.timeline{position:relative;padding-left:clamp(1.5rem,4vw,3.5rem)}
.timeline::before{content:'';position:absolute;left:0;top:.5rem;bottom:.5rem;width:1px;background:var(--line)}
.timeline-fill{position:absolute;left:0;top:.5rem;width:1px;height:0;
  background:linear-gradient(var(--gold),var(--gold-300));box-shadow:0 0 12px var(--glow-gold)}
.tl-item{position:relative;padding-bottom:var(--s-7)}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:'';position:absolute;left:calc(-1 * clamp(1.5rem,4vw,3.5rem) - 4px);top:.55rem;
  width:9px;height:9px;border-radius:50%;background:var(--bg);border:1.5px solid var(--gold);z-index:1}
.tl-date{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold-text);margin-bottom:.5rem}
.tl-role{font-family:var(--f-display);font-size:var(--t-h4);font-weight:600;color:var(--ink);line-height:1.25}
.tl-org{font-size:var(--t-sm);font-weight:600;color:var(--muted);margin:.25rem 0 .75rem}
.tl-item p{font-size:var(--t-sm);color:var(--muted);max-width:62ch}
.tl-tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.9rem}
@media (min-width:900px){
  .tl-item{display:grid;grid-template-columns:170px minmax(0,1fr);column-gap:clamp(2rem,4vw,3.5rem)}
  .tl-date{grid-column:1;grid-row:1 / span 20;margin-bottom:0;padding-top:.35rem}
  .tl-item > :not(.tl-date){grid-column:2}
  .tl-item p{max-width:70ch}
}

/* ── 13b. STORY RAIL ───────────────────────────────────────────────────── */

.story-rail{
  position:fixed;left:clamp(.6rem,2.2vw,1.6rem);top:22vh;bottom:14vh;width:2px;z-index:600;
  background:var(--line);border-radius:2px;pointer-events:none;
  opacity:0;transition:opacity var(--dur-slow) var(--ease);
}
.story-rail.on{opacity:1}
.story-rail i{
  display:block;width:100%;height:100%;border-radius:inherit;transform-origin:top;
  background:linear-gradient(var(--gold),var(--gold-l));
  box-shadow:0 0 14px var(--glow-gold);
}
@media (max-width:900px){.story-rail{display:none}}

/* a chapter's year lights up once as it arrives */
.chapter-year.pulse{animation:yearPulse 1.5s var(--ease) 1}
@keyframes yearPulse{
  0%  {-webkit-text-stroke-color:var(--line-gold); filter:none}
  28% {-webkit-text-stroke-color:var(--gold2);
       filter:drop-shadow(0 0 14px var(--glow-gold))}
  100%{-webkit-text-stroke-color:var(--line-gold); filter:none}
}

/* ── 14. TESTIMONIALS ──────────────────────────────────────────────────── */

.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(.85rem,1.6vw,1.25rem)}
.quote{position:relative;padding:clamp(1.6rem,2.8vw,2.2rem);border-radius:var(--r-lg);
  background:var(--bg-raised);border:1px solid var(--line);display:flex;flex-direction:column;gap:1rem;
  transform:translateY(var(--lift,0px));
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease)}
.quote:hover{border-color:var(--line-gold);--lift:-4px;box-shadow:var(--shadow-md)}
.quote::before{content:'”';position:absolute;top:.1rem;right:1.2rem;font-family:var(--f-display);
  font-size:5.5rem;line-height:1;color:var(--gold-text);opacity:.14}
.stars{display:flex;gap:.2rem;color:var(--gold-text)}
.stars svg{width:14px;height:14px}
.quote blockquote{font-family:var(--f-display);font-size:var(--t-lg);font-style:italic;line-height:1.5;
  color:var(--text);flex:1}
.q-who{display:flex;align-items:center;gap:.75rem;padding-top:.6rem;border-top:1px solid var(--line-soft)}
.q-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--wash-gold);border:1px solid var(--line-gold);color:var(--gold-text);
  font-family:var(--f-display);font-weight:700;font-size:.95rem}
.q-name{font-size:var(--t-sm);font-weight:700;color:var(--ink);line-height:1.3}
.q-role{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--faint);letter-spacing:.05em}

/* ── 15. GALLERY / LIGHTBOX ────────────────────────────────────────────── */

.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:clamp(.7rem,1.4vw,1.1rem)}
.gal-item{position:relative;overflow:hidden;border-radius:var(--r-md);border:1px solid var(--line);
  background:var(--bg-sunk);cursor:pointer;aspect-ratio:4/5;
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease)}
.gal-item img,.gal-item video{width:100%;height:100%;object-fit:cover;
  transition:transform 900ms var(--ease), filter var(--dur-slow) var(--ease)}
.gal-item:hover{border-color:var(--line-gold);transform:translateY(-3px)}
.gal-item:hover img,.gal-item:hover video{transform:scale(1.06)}
.gal-cap{position:absolute;left:0;right:0;bottom:0;padding:1.4rem .95rem .8rem;
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.07em;color:#fff;
  background:linear-gradient(to top,rgba(8,7,6,.86),transparent);
  opacity:0;transform:translateY(8px);transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease)}
.gal-item:hover .gal-cap,.gal-item:focus-visible .gal-cap{opacity:1;transform:none}
.gal--wide .gal-item{aspect-ratio:16/10}
.gal--video .gal-item{aspect-ratio:9/16;
  background:linear-gradient(155deg,var(--bg-sunk),var(--wash-gold) 55%,var(--bg-sunk))}
/* A video tile must read as a video tile before a single byte of it decodes.
   The gradient, badge and caption stand alone; a decoded frame, when the
   browser produces one, simply paints over the top. */
.gal--video video{opacity:0;transition:opacity 420ms var(--ease)}
.gal--video video.ready{opacity:1}
.gal--video .gal-item::before{
  content:'';position:absolute;inset:0;margin:auto;width:54px;height:54px;border-radius:50%;z-index:2;
  background:var(--gold-deep);box-shadow:var(--shadow-md);
  transition:transform var(--dur) var(--ease)}
.gal--video .gal-item::after{
  content:'';position:absolute;inset:0;margin:auto;z-index:3;width:0;height:0;
  border-left:15px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;
  transform:translateX(4px)}
.gal--video .gal-item:hover::before{transform:scale(1.12)}
.gal--video .gal-cap{opacity:1;transform:none}

#lightbox{position:fixed;inset:0;z-index:1100;display:none;place-items:center;padding:clamp(1rem,4vw,3rem);
  background:rgba(6,5,4,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#lightbox.open{display:grid}
#lightbox figure{max-width:min(1100px,100%);max-height:88vh;display:flex;flex-direction:column;gap:.9rem;align-items:center}
#lightbox img,#lightbox video{max-width:100%;max-height:80vh;width:auto;border-radius:var(--r-md);
  box-shadow:0 40px 120px rgba(0,0,0,.6)}
#lightbox figcaption{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.12em;
  color:rgba(255,255,255,.62);text-transform:uppercase}
.lb-btn{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;display:grid;place-items:center;
  border-radius:50%;border:1px solid rgba(255,255,255,.2);color:#fff;background:rgba(255,255,255,.05);
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease)}
.lb-btn:hover{background:var(--gold);border-color:var(--gold-text)}
.lb-prev{left:clamp(.75rem,3vw,2rem)} .lb-next{right:clamp(.75rem,3vw,2rem)}
.lb-close{position:absolute;top:clamp(.75rem,3vw,2rem);right:clamp(.75rem,3vw,2rem);transform:none}
.lb-btn svg{width:20px;height:20px}
@media (max-width:640px){.lb-prev,.lb-next{top:auto;bottom:1rem;transform:none}}

/* ── 16. BLOG ──────────────────────────────────────────────────────────── */

.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(.9rem,1.8vw,1.4rem)}
.post-card{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-lg);
  background:var(--bg-raised);border:1px solid var(--line);transform:translateY(var(--lift,0px));
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease)}
.post-card:hover{--lift:-5px;border-color:var(--line-gold);box-shadow:var(--shadow-md)}
.post-shot{aspect-ratio:16/9;overflow:hidden;background:var(--bg-sunk);flex:none}
.post-shot img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease)}
.post-card:hover .post-shot img{transform:scale(1.06)}
.post-body{padding:var(--s-5);display:flex;flex-direction:column;gap:.65rem;flex:1}
.post-cat{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text)}
.post-card h3{font-size:var(--t-h4);line-height:1.25}
.post-card p{font-size:var(--t-sm);color:var(--muted)}
.post-more{margin-top:auto;padding-top:.5rem;font-size:var(--t-sm);font-weight:700;color:var(--gold-text);
  display:inline-flex;align-items:center;gap:.4rem}
.post-more svg{width:14px;height:14px;transition:transform var(--dur) var(--ease)}
.post-card:hover .post-more svg{transform:translateX(4px)}

/* article */
.article{max-width:none}
.article-head{padding-top:calc(var(--nav-h) + var(--s-8));padding-bottom:var(--s-6);position:relative}
.article-meta{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:var(--s-5);
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.article-hero{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);margin-bottom:var(--s-7)}
.prose{width:min(720px,100%);margin-inline:auto}
.prose > * + *{margin-top:1.35em}
.prose h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-top:2.2em}
.prose h3{font-size:var(--t-h4);margin-top:1.8em}
.prose p,.prose li{font-size:var(--t-lg);line-height:1.85;color:var(--muted);font-weight:300}
.prose ul{display:grid;gap:.7rem;padding-left:0}
.prose ul li{position:relative;padding-left:1.5rem}
.prose ul li::before{content:'';position:absolute;left:.25rem;top:.75em;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.prose ol{counter-reset:n;display:grid;gap:.7rem}
.prose ol li{position:relative;padding-left:2rem;counter-increment:n}
.prose ol li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:.05em;
  font-family:var(--f-mono);font-size:var(--t-xs);color:var(--gold-text)}
.prose blockquote{border-left:2px solid var(--gold);padding:.2rem 0 .2rem 1.5rem;margin-block:1.8em;
  font-family:var(--f-display);font-size:clamp(1.2rem,2.4vw,1.55rem);font-style:italic;line-height:1.5;color:var(--ink)}
.prose a{color:var(--gold-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--gold-400)}
.prose strong{color:var(--ink)}
.prose .callout{background:var(--wash-gold);border:1px solid var(--line-gold);border-radius:var(--r-md);
  padding:var(--s-5);display:grid;gap:.5rem}
.prose .callout p{font-size:var(--t-base);color:var(--text);margin:0}
.prose .callout b{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text)}

/* ── 17. PAGE HEAD (interior pages) ────────────────────────────────────── */

.phead{position:relative;padding-top:calc(var(--nav-h) + clamp(3.5rem,8vw,7rem));
  padding-bottom:clamp(2.5rem,6vw,5rem);overflow:hidden;background:var(--bg-sunk);isolation:isolate}
.phead #gl{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.phead .shell{position:relative;z-index:2}
.phead .phead-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 62% 74% at 22% 50%,var(--bg-sunk) 18%,transparent 76%)}
.phead h1{font-size:clamp(2.4rem,7vw,5rem);max-width:22ch}
.phead .gild{color:var(--gold-strong);font-style:italic}
.phead p{font-size:var(--t-lg);color:var(--muted);max-width:56ch;margin-top:var(--s-4);font-weight:300}
.phead-figures{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3rem);margin-top:var(--s-6);
  padding-top:var(--s-5);border-top:1px solid var(--line)}

/* ── 18. CONTACT ───────────────────────────────────────────────────────── */

.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.cline{display:flex;align-items:flex-start;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--line-soft)}
.cline-ico{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:11px;
  background:var(--wash-gold);border:1px solid var(--line-gold);color:var(--gold-text)}
.cline-ico svg{width:18px;height:18px}
.cline-k{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.11em;text-transform:uppercase;color:var(--faint)}
.cline-v{font-size:var(--t-base);font-weight:600;color:var(--ink);word-break:break-word}
.cline-v a:hover{color:var(--gold-text)}

.form{display:grid;gap:var(--s-4);padding:clamp(1.5rem,3vw,2.4rem);border-radius:var(--r-lg);
  background:var(--bg-raised);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.field{display:grid;gap:.45rem}
.field label{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea{
  width:100%;padding:.85rem 1rem;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--bg);color:var(--ink);font-size:var(--t-base);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease)}
.field textarea{min-height:140px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--gold-text);box-shadow:0 0 0 3px var(--wash-gold)}
.field .hint{font-size:var(--t-xs);color:var(--faint)}
.field.bad input,.field.bad textarea{border-color:#c0392b}
.field .err{font-size:var(--t-xs);color:#c0392b;display:none}
.field.bad .err{display:block}
.form-note{font-size:var(--t-xs);color:var(--faint);text-align:center}
.form-ok{display:none;gap:.6rem;place-items:center;text-align:center;padding:var(--s-6) var(--s-4)}
.form-ok.on{display:grid}
.form-ok svg{width:44px;height:44px;color:var(--gold-text)}

/* ── 19. CTA + FOOTER ──────────────────────────────────────────────────── */

.closer{position:relative;background:var(--bg-invert);color:var(--on-invert);overflow:hidden;isolation:isolate;
  padding-block:clamp(4.5rem,10vw,9rem);text-align:center}
.closer .orb{width:min(760px,120vw);aspect-ratio:1;left:50%;top:35%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(212,160,23,.18),transparent 62%)}
.closer h2{color:var(--on-invert);font-size:clamp(2.2rem,6vw,4.5rem);margin-bottom:var(--s-4)}
.closer h2 .gild{color:var(--gold-invert);font-style:italic}
.closer p{color:var(--on-invert-muted);max-width:48ch;margin-inline:auto;font-size:var(--t-lg);font-weight:300}
.closer-cta{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:var(--s-6)}
.closer-mail{display:inline-block;margin-top:var(--s-6);font-family:var(--f-mono);font-size:var(--t-xs);
  letter-spacing:.14em;color:var(--on-invert-muted);text-transform:uppercase}
.closer-mail:hover{color:var(--gold-invert)}

#colophon{background:var(--bg-sunk);border-top:1px solid var(--line);padding-block:var(--s-8) var(--s-5)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:var(--s-6)}
@media (max-width:820px){.foot-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr}}
.foot-brand .brand{font-size:1.6rem}
.foot-brand p{font-size:var(--t-sm);color:var(--muted);max-width:34ch;margin-top:.7rem}
.foot-social{display:flex;gap:.5rem;margin-top:var(--s-5)}
.foot-social a{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line);color:var(--muted);
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease)}
.foot-social a:hover{color:var(--gold-text);border-color:var(--line-gold);transform:translateY(-3px)}
.foot-social svg{width:17px;height:17px}
.foot-col h5{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin-bottom:var(--s-4);font-weight:500}
.foot-col li+li{margin-top:.6rem}
.foot-col a{font-size:var(--t-sm);color:var(--muted);transition:color var(--dur) var(--ease)}
.foot-col a:hover{color:var(--gold-text)}
.foot-bottom{margin-top:var(--s-8);padding-top:var(--s-5);border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.06em;color:var(--faint)}

/* ── 20. MISC LAYOUT HELPERS ───────────────────────────────────────────── */

.split-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split-2--top{align-items:start}
@media (max-width:900px){.split-2{grid-template-columns:1fr}}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(.85rem,1.6vw,1.25rem)}
.stack{display:grid;gap:var(--s-4)}
.stack-lg{display:grid;gap:var(--s-6)}
.bg-sunk{background:var(--bg-sunk)}
.bg-raised{background:var(--bg-raised)}
.tc{text-align:center}
.mt-6{margin-top:var(--s-6)} .mt-5{margin-top:var(--s-5)} .mt-7{margin-top:var(--s-7)}
.muted{color:var(--muted)}
.lede{font-size:var(--t-lg);font-weight:300;color:var(--muted)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* portrait */
.portrait{position:relative}
.portrait figure{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;
  background:var(--bg-sunk);box-shadow:var(--shadow-lg)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform 900ms var(--ease)}
.portrait:hover img{transform:scale(1.03)}
.portrait figure::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,9,7,.34),transparent 52%)}
.portrait-edge{position:absolute;inset:-1px;border-radius:var(--r-lg);border:1px solid var(--line-gold);
  pointer-events:none;z-index:2}
.portrait-badge{position:absolute;right:-.9rem;bottom:-1.1rem;z-index:3;padding:1rem 1.3rem;border-radius:var(--r-md);
  background:var(--gold-deep);color:#fff;box-shadow:var(--shadow-lg);animation:bob 6s var(--ease-io) infinite}
.portrait-badge b{display:block;font-family:var(--f-display);font-size:1.6rem;font-weight:700;line-height:1}
.portrait-badge span{display:block;font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.92);margin-top:.25rem;max-width:14ch}

/* particle portrait: the canvas sits over the photo and only paints on hover */
.portrait-canvas{
  position:absolute;inset:0;z-index:2;border-radius:var(--r-lg);
  pointer-events:none;opacity:0;transition:opacity 260ms var(--ease)}
.portrait-canvas.on{opacity:1}
.portrait[data-particles] figure img{transition:opacity 260ms var(--ease)}
.portrait[data-particles]:hover figure img{opacity:0}

/* fact grid */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.6rem}
.fact{padding:.9rem 1.1rem;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-raised);
  transition:border-color var(--dur) var(--ease)}
.fact:hover{border-color:var(--line-gold)}
.fact dt{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.11em;text-transform:uppercase;color:var(--faint)}
.fact dd{font-size:var(--t-sm);font-weight:600;color:var(--ink);margin-top:.2rem}

/* checklist */
.ticks{display:grid;gap:.75rem}
.tick{display:flex;align-items:flex-start;gap:.85rem;padding-bottom:.75rem;border-bottom:1px solid var(--line-soft)}
.tick svg{width:16px;height:16px;color:var(--gold-text);flex:none;margin-top:.32em}
.tick b{display:block;font-size:var(--t-sm);font-weight:600;color:var(--ink);line-height:1.4}
.tick span{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--faint);letter-spacing:.04em}

/* music feature */
.music{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);
  align-items:center;padding:clamp(1.5rem,3vw,2.5rem);border-radius:var(--r-lg);
  background:var(--bg-raised);border:1px solid var(--line)}
@media (max-width:760px){.music{grid-template-columns:1fr}}
.music-art{border-radius:var(--r-md);overflow:hidden;aspect-ratio:1;box-shadow:var(--shadow-md);position:relative}
.music-art img{width:100%;height:100%;object-fit:cover}
.music-art::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--line-gold);border-radius:inherit}
.music-links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--s-5)}

/* story chapters */
.chapter{position:relative;padding-block:clamp(3.5rem,7vw,6rem);border-bottom:1px solid var(--line-soft)}
.chapter-grid{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem)}
@media (max-width:760px){.chapter-grid{grid-template-columns:1fr;gap:var(--s-4)}}
.chapter-year{font-family:var(--f-display);font-size:clamp(2.6rem,6vw,4.4rem);font-weight:700;line-height:.9;
  color:transparent;-webkit-text-stroke:1px var(--line-gold);letter-spacing:-.04em;position:sticky;top:calc(var(--nav-h) + 2rem);height:max-content}
[data-theme="dark"] .chapter-year{-webkit-text-stroke-color:var(--line-gold)}
.chapter-body h3{font-size:clamp(1.4rem,3vw,2.1rem);margin-bottom:var(--s-4)}
.chapter-body p+p{margin-top:1.1rem}
.chapter-body p{color:var(--muted)}
.pullquote{margin-block:var(--s-6);padding-left:1.5rem;border-left:2px solid var(--gold);
  font-family:var(--f-display);font-size:clamp(1.2rem,2.6vw,1.7rem);font-style:italic;line-height:1.45;color:var(--ink)}

/* ── 20b. 3D CARD DEPTH ────────────────────────────────────────────────── */

/* JS adds .tilt3d and drives --rx/--ry; the lift stays a variable so hover and
   tilt compose into one transform instead of overwriting each other. */
.tilt3d{
  transform-style:preserve-3d;
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));
  transition:transform 620ms var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur-slow) var(--ease);
}
/* while the pointer is on the card, track it closely; on exit, ease back */
.tilt3d:hover{transition:transform 90ms linear, border-color var(--dur) var(--ease), box-shadow var(--dur-slow) var(--ease)}
.tilt3d > *{transform-style:preserve-3d}
.tilt3d [style*="translate3d"]{transition:transform 260ms var(--ease)}

/* a glare that follows the pointer, so the tilt reads as a lit surface */
.tilt3d::after{
  content:'';position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;
  opacity:0;transition:opacity var(--dur) var(--ease);
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),
             rgba(255,255,255,.30), transparent 55%);
  mix-blend-mode:overlay;
}
.tilt3d:hover::after{opacity:1}
[data-theme="dark"] .tilt3d::after{
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),
             rgba(245,214,122,.16), transparent 58%)}

/* the quote card already owns ::after for its quotation mark */
.quote.tilt3d::after{background:none;mix-blend-mode:normal}

/* ── 21. ANIMATION ─────────────────────────────────────────────────────── */

@keyframes ping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(3.2);opacity:0}}
@keyframes shimmer{to{background-position:220% 0}}
@keyframes slide{to{transform:translateX(-50%)}}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes grainShift{
  0%{transform:translate(0,0)}25%{transform:translate(-2%,1%)}
  50%{transform:translate(1%,-2%)}75%{transform:translate(-1%,-1%)}100%{transform:translate(0,0)}}

/* scroll reveal */
[data-rise]{opacity:0;transform:translateY(26px);
  transition:opacity 760ms var(--ease), transform 860ms var(--ease)}
[data-rise="left"]{transform:translateX(-30px)}
[data-rise="right"]{transform:translateX(30px)}
[data-rise="scale"]{transform:scale(.955)}
[data-rise="3d"]{transform:perspective(1200px) rotateX(10deg) translateY(34px)}
[data-rise].seen{opacity:1;transform:none}

/* ── 22. REDUCED MOTION ────────────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  [data-rise]{opacity:1 !important;transform:none !important}
  .split.pending .ch{opacity:1;transform:none}
  .grain{animation:none}
  .ribbon-track{animation:none}
  .cursor-dot,.cursor-ring,.cursor-trail{display:none}
  .story-rail{display:none}
  .portrait-canvas{display:none}
  .portrait[data-particles]:hover figure img{opacity:1}
  .hero h1 .gild::after{transform:scaleX(1)}
  .chapter-year.pulse{animation:none}
  body.cursor-live,body.cursor-live a,body.cursor-live button{cursor:auto}
}

/* ── 23. PRINT ─────────────────────────────────────────────────────────── */

@media print{
  #masthead,#drawer,.grain,.cursor-dot,.cursor-ring,#progress,#gl,.scroll-hint,#preloader,.closer{display:none !important}
  body{background:#fff;color:#000}
  .bay{padding-block:1.5rem}
  a::after{content:" (" attr(href) ")";font-size:.7em;color:#666}
}