/* =========================================================================
   CompCode Solutions — BEAT
   Homepage design system, ported from the ZXY "One Thread" prototype
   (prototypes/zxy/assets/zxy.css) onto CompCode's own palette.

   What was taken:  paper ground, ink type, one accent "thread", bronze
                    stitch rules, numbered beats, mono labels, clamp() type
                    scale, reveal-on-scroll, the fixed progress rail.
   What was NOT:    the orbit stage and the four-worlds metaphor — those are
                    ZXY's, not ours — and ZXY's orange #E2571F. The thread
                    here is CompCode's existing accent, ink-blue #1C4B7C
                    (css/tokens.css line 32), so this is our brand in their
                    grammar rather than a copy of their brand.

   No framework. No build step. One stylesheet, one script.
   ========================================================================= */

/* ── fonts (self-hosted, SIL OFL) ─────────────────────────────────── */
@font-face{font-family:"Fraunces";src:url("../assets/fonts/fraunces-display.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces Fallback";src:local("Georgia");size-adjust:103%;ascent-override:90%;descent-override:22%;line-gap-override:0%}
@font-face{font-family:"Archivo";src:url("../assets/fonts/archivo-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";src:url("../assets/fonts/archivo-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";src:url("../assets/fonts/archivo-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo Fallback";src:local("Arial"),local("Helvetica Neue");size-adjust:98%;ascent-override:96%;descent-override:24%}
@font-face{font-family:"IBM Plex Mono";src:url("../assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";src:url("../assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono Fallback";src:local("ui-monospace"),local("SF Mono"),local("Menlo");size-adjust:100%}

/* ── tokens ───────────────────────────────────────────────────────── */
:root{
  --ground:#EAE3D6;
  --paper:#F7F4EF; --paper-2:#EFEAE1; --paper-3:#E7E0D4;
  --ink:#16150F; --ink-2:#3F3B32; --muted:#7A7367;
  --rule:#DFDAD1; --rule-2:#C6BFB2;

  /* one accent — CompCode ink-blue, used as ZXY uses its thread */
  --thread:#1C4B7C;
  --thread-deep:#12355A;
  --thread-soft:rgba(28,75,124,.14);

  /* the counter-thread: bronze hairlines and stitch rules */
  --bronze:#8A6420;

  --plate:#14130E;          /* the one dark beat */
  --plate-2:#1E1C15;

  --display:"Fraunces","Fraunces Fallback",Georgia,"Times New Roman",serif;
  --ui:"Archivo","Archivo Fallback","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono","IBM Plex Mono Fallback",ui-monospace,"SF Mono",Menlo,monospace;

  --gut:clamp(20px,5vw,72px);
  --max:1380px;
  --ease:cubic-bezier(.22,.71,.16,1);
  --beat:clamp(52px,6.5vw,104px);
  --hdr-veil:rgba(247,244,239,.94);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--ground);scroll-behavior:smooth}
body{
  margin:0;background:var(--ground);color:var(--ink-2);
  font-family:var(--ui);font-size:16px;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
main{position:relative}
img,svg{max-width:100%}
img{display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--thread);outline-offset:3px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:200;background:var(--ink);color:var(--paper);padding:10px 16px}

/* ── type ─────────────────────────────────────────────────────────── */
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;color:var(--ink);letter-spacing:-.012em;line-height:1.04;text-wrap:balance;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 144}
h1{font-size:clamp(42px,6.6vw,92px);line-height:.96;letter-spacing:-.02em}
h2{font-size:clamp(30px,4.3vw,62px)}
h3{font-size:clamp(20px,2.1vw,29px)}
em{font-style:italic}
p{margin:0}

.lede{font-size:clamp(16.5px,1.3vw,20px);line-height:1.5;color:var(--ink-2);max-width:52ch}
.body{font-size:15.5px;line-height:1.62;color:var(--ink-2);max-width:60ch}
.label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);display:inline-block;padding-bottom:5px;box-shadow:0 1px 0 var(--bronze)}
.thread-word{color:var(--thread-deep);font-style:italic}

/* ── layout ───────────────────────────────────────────────────────── */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.beat{position:relative;padding-block:var(--beat)}
.beat__head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(18px,4vw,64px);align-items:end;margin-bottom:clamp(28px,4vw,56px)}
.beat__no{display:flex;align-items:center;gap:12px;margin-bottom:16px;min-height:26px}
.beat__no b{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bronze);font-weight:500;line-height:1;flex:0 0 auto}
.beat__no span{flex:1;height:1px;background:var(--bronze);opacity:.5;min-width:24px}

/* the stitch: a dashed bronze hairline at the top of every section */
.stitch{height:1px;border:0;margin:0;
  background:repeating-linear-gradient(90deg,var(--bronze) 0 5px,transparent 5px 11px);opacity:.55}
main > section{position:relative}
main > section::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--bronze) 0 5px,transparent 5px 11px);opacity:.55}

/* ── header ───────────────────────────────────────────────────────── */
.hdr{position:fixed;inset:0 0 auto;z-index:60;transition:background .5s var(--ease),border-color .5s}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:70px;
  max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.hdr.solid{background:var(--hdr-veil);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule)}
.mark{display:flex;align-items:baseline;gap:9px;color:var(--ink)}
.mark b{font-family:var(--display);font-size:21px;letter-spacing:.06em;font-weight:500;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 144}
.mark small{font-family:var(--mono);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}

.nav{display:flex;align-items:center;gap:clamp(13px,1.9vw,28px);font-size:12.5px;letter-spacing:.04em}
.nav a{color:var(--ink-2);padding-block:6px;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--thread);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1)}
.hdr__end{display:flex;align-items:center;gap:12px}

.menu-btn{display:none;width:42px;height:42px;border:1px solid var(--rule-2);position:relative;flex:0 0 auto}
.menu-btn span{position:absolute;left:11px;right:11px;height:1px;background:var(--ink);transition:transform .3s}
.menu-btn span:nth-child(1){top:17px}
.menu-btn span:nth-child(2){top:24px}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

/* ── buttons ──────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:46px;padding-inline:22px;
  border:1px solid var(--ink);color:var(--ink);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;white-space:nowrap;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn--thread{border-color:var(--thread);background:var(--thread);color:#fff}
.btn--thread:hover{background:var(--thread-deep);border-color:var(--thread-deep);color:#fff}
.btn--ghost{border-color:var(--rule-2);color:var(--ink-2)}
.btn--ghost:hover{border-color:var(--ink);background:transparent;color:var(--ink)}
.btn--sm{height:38px;padding-inline:16px;font-size:11px;letter-spacing:.12em}

/* ── the thread rail ──────────────────────────────────────────────── */
.rail{position:fixed;left:calc(var(--gut) * .42);top:0;bottom:0;width:7px;z-index:5;pointer-events:none}
.rail__base{position:absolute;inset:0;opacity:.6;background:
  radial-gradient(circle 1.5px at 1.5px 1.5px, var(--bronze) 99%, transparent) 0 0 / 7px 7px,
  radial-gradient(circle 1.5px at 5px 5px, var(--bronze) 99%, transparent) 0 0 / 7px 7px}
.rail__live{position:absolute;left:3px;top:0;width:1px;height:100%;background:var(--thread);
  transform-origin:top;transform:scaleY(var(--p,0))}
.rail__beat{position:absolute;left:50%;width:7px;height:7px;border-radius:50%;background:var(--paper);
  border:1px solid var(--bronze);transform:translate(-50%,-50%) scale(0);
  transition:background .4s,border-color .4s,box-shadow .4s,transform .4s var(--ease)}
.rail__beat.shown{transform:translate(-50%,-50%) scale(1)}
.rail__beat.on{background:var(--thread);border-color:var(--thread);box-shadow:0 0 0 4px var(--thread-soft)}
@media (max-width:1000px){.rail{display:none}}

/* ── reveals ──────────────────────────────────────────────────────── */
.rv{opacity:1}
.js .rv{opacity:0;transform:translateY(20px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .85s var(--ease),transform .95s var(--ease);
  transition-delay:var(--d,0s)}

/* ── hero ─────────────────────────────────────────────────────────── */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(100svh,920px);
  padding-top:calc(70px + clamp(28px,5vh,64px));
  padding-bottom:clamp(36px,6vh,80px);
  display:flex;align-items:center;
}
.hero::before{display:none}

/* full-bleed motion plane — Wembi/Cuberto energy, CompCode palette */
.hero__viz{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.hero__canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  opacity:.92;
}
.hero__glow{
  position:absolute;border-radius:50%;filter:blur(48px);will-change:transform;
  mix-blend-mode:multiply;opacity:.55;
}
.hero__glow--a{
  width:min(58vw,620px);height:min(58vw,620px);
  right:-8%;top:8%;
  background:radial-gradient(circle at 40% 40%,rgba(28,75,124,.28),rgba(28,75,124,.06) 55%,transparent 72%);
  animation:orbA 16s var(--ease) infinite alternate;
}
.hero__glow--b{
  width:min(42vw,440px);height:min(42vw,440px);
  right:18%;bottom:6%;
  background:radial-gradient(circle at 50% 50%,rgba(138,100,32,.18),rgba(138,100,32,.04) 50%,transparent 70%);
  animation:orbB 19s var(--ease) infinite alternate;
}
.hero__glow--c{
  width:min(36vw,360px);height:min(36vw,360px);
  left:42%;top:18%;
  background:radial-gradient(circle at 50% 50%,rgba(247,244,239,.9),rgba(234,227,214,.2) 60%,transparent 75%);
  opacity:.7;mix-blend-mode:soft-light;
  animation:orbC 22s var(--ease) infinite alternate;
}
@keyframes orbA{from{transform:translate(0,0) scale(1)}to{transform:translate(-4%,6%) scale(1.08)}}
@keyframes orbB{from{transform:translate(0,0) scale(1)}to{transform:translate(6%,-5%) scale(1.12)}}
@keyframes orbC{from{transform:translate(0,0)}to{transform:translate(-5%,4%)}}

.hero__in{position:relative;z-index:1;width:100%}
.hero__copy{max-width:38rem;position:relative}
.hero__brand{
  font-family:var(--display);font-size:clamp(28px,4.2vw,44px);line-height:1;
  color:var(--ink);letter-spacing:.04em;margin:0 0 clamp(18px,2.4vh,28px);
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 144;
}
.hero__brand span{
  display:block;margin-top:6px;
  font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--muted);font-weight:400;
}
.hero h1{margin-top:clamp(14px,1.8vh,20px)}
.hero h1 .l2{display:block;font-style:italic;color:var(--thread-deep)}
.hero .lede{margin-top:clamp(18px,2vw,26px)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,3vw,32px)}
.hero__note{margin-top:16px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted)}

/* magnetic CTA micro-motion */
.btn--mag{will-change:transform;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s,transform .45s var(--ease)}

/* live products bar */
.livebar{display:flex;align-items:center;gap:14px;margin-top:26px;padding:13px 16px;
  background:rgba(247,244,239,.82);border:1px solid var(--rule);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(138,100,32,.16);
  transition:border-color .4s var(--ease),transform .4s var(--ease);max-width:34rem}
.livebar:hover{border-color:var(--thread);transform:translateY(-1px)}
.livebar__dots{display:inline-flex;gap:4px;flex:0 0 auto}
.livebar__dots i{width:6px;height:6px;border-radius:50%;background:var(--thread);opacity:.35;
  animation:pulse 2.8s var(--ease) infinite}
.livebar__dots i:nth-child(2){animation-delay:.15s}
.livebar__dots i:nth-child(3){animation-delay:.3s}
.livebar__dots i:nth-child(4){animation-delay:.45s}
.livebar__dots i:nth-child(5){animation-delay:.6s}
.livebar__dots i:nth-child(6){animation-delay:.75s}
.livebar__dots i:nth-child(7){animation-delay:.9s}
.livebar__dots i:nth-child(8){animation-delay:1.05s}
.livebar__dots i:nth-child(9){animation-delay:1.2s}
.livebar__dots i:nth-child(10){animation-delay:1.35s}
@keyframes pulse{0%,100%{opacity:.28}45%{opacity:1}}
.livebar__text{flex:1;font-size:13.5px;color:var(--ink-2);min-width:0}
.livebar__text b{color:var(--ink);font-weight:500}
.livebar__go{font-family:var(--mono);font-size:13px;color:var(--thread);flex:0 0 auto;
  transition:transform .4s var(--ease)}
.livebar:hover .livebar__go{transform:translateX(4px)}

/* desktop: copy left, fragments right, lattice behind */
@media (min-width:901px){
  .hero__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,0.92fr);gap:clamp(24px,4vw,56px);align-items:center}
  .hero__copy{max-width:38rem;z-index:2}
  .hero__canvas{opacity:.85}
}
@media (max-width:900px){
  .hero{min-height:auto}
  .hero__glow--a{right:-20%;top:0;opacity:.4}
  .hero__glow--b{opacity:.35}
  .hero__glow--c{opacity:.4}
  .hero__canvas{opacity:.4}
  .hero__stage{display:none}
}

/* ── statement cards (beat 02) ────────────────────────────────────── */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule);
  border-block:1px solid var(--rule)}
.tile{background:var(--paper);padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;gap:14px;
  position:relative;transition:background .45s var(--ease)}
.tile::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--thread);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.tile:hover::after,.tile:focus-within::after{transform:scaleX(1)}
.tile__no{font-family:var(--display);font-size:clamp(30px,3.2vw,46px);line-height:1;color:var(--bronze);
  opacity:.55;font-variant-numeric:tabular-nums}
.tile h3{max-width:22ch}
.tile p{font-size:15px;line-height:1.62;color:var(--ink-2)}
.tile__more{margin-top:auto;padding-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:8px}
.tile__more::after{content:"";width:18px;height:1px;background:var(--thread);transition:width .4s var(--ease)}
.tile:hover .tile__more::after{width:34px}

/* ── the dark beat: proof ─────────────────────────────────────────── */
.plate{background:var(--plate);color:#C9C3B4;--ink:#F4F0E6;--ink-2:#C9C3B4;--muted:#8E8674;
  --rule:rgba(255,255,255,.12);--rule-2:rgba(255,255,255,.2);--paper:#1C1A14;--bronze:#A88A50}
.plate h2,.plate h3{color:#F4F0E6}
.plate .btn{border-color:rgba(255,255,255,.34);color:#F4F0E6}
.plate .btn:hover{background:#F4F0E6;color:var(--plate)}
.plate .btn--thread{border-color:var(--thread);background:var(--thread);color:#fff}
.plate .btn--thread:hover{background:#2C6099;border-color:#2C6099}
.plate .tile{background:#1C1A14}
.proof-card__url{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:#8FB9E0;word-break:break-all}
.proof-card__links{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:14px}

/* ── engagements (beat 04) ────────────────────────────────────────── */
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);
  border-block:1px solid var(--rule)}
.grid-4 .tile{min-height:clamp(220px,22vw,290px)}

/* ── prose beat (05) ──────────────────────────────────────────────── */
.prose{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);
  align-items:start}
.prose__body p + p{margin-top:18px}
.prose__body p{font-size:16px;line-height:1.68;color:var(--ink-2);max-width:62ch}
.prose__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ── writing list (beat 06) ───────────────────────────────────────── */
.writing{border-top:1px solid var(--rule)}
.writing li{border-bottom:1px solid var(--rule)}
.writing a{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(12px,3vw,48px);
  padding:clamp(18px,2.4vw,30px) 0;align-items:baseline;transition:padding-left .45s var(--ease)}
.writing a:hover{padding-left:14px}
.writing__t{font-family:var(--display);font-size:clamp(19px,1.8vw,26px);color:var(--ink);line-height:1.2;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 144}
.writing__d{font-size:14.5px;color:var(--ink-2);line-height:1.6}
.writing a:hover .writing__t{color:var(--thread-deep)}

/* ── the invitation (beat 07) ─────────────────────────────────────── */
.invite{background:var(--paper)}
.invite .wrap{padding-block:clamp(56px,8vw,112px)}
.invite h2{font-size:clamp(32px,5vw,74px)}
.invite h2 em{color:var(--thread-deep)}
.invite__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(24px,5vw,72px);align-items:start}
.invite__steps{display:grid;gap:12px;margin-top:16px;font-size:14.5px;color:var(--ink-2)}
.invite__steps li{display:flex;gap:12px}
.invite__steps b{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--bronze);
  flex:0 0 auto;padding-top:3px;font-weight:500}
.invite__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* FIND-style layers + Zelt fragments */
.hero__stage{position:relative;min-height:420px;z-index:1}
.hero__layer{position:absolute;inset:-8% -4%;pointer-events:none;border-radius:50%}
.hero__layer--back{background:radial-gradient(circle at 70% 40%,rgba(28,75,124,.16),transparent 62%);filter:blur(8px)}
.hero__layer--mid{inset:12% 8% auto auto;width:58%;height:58%;background:radial-gradient(circle at 40% 40%,rgba(247,244,239,.7),transparent 70%);mix-blend-mode:soft-light}
.hero__layer--front{inset:auto -6% -10% 30%;height:42%;background:radial-gradient(circle at 50% 0,rgba(234,227,214,.85),transparent 70%);z-index:3}
.frags{position:relative;z-index:2;margin:48px 0 0 auto;max-width:22rem;display:grid;gap:12px;padding:0}
.frag{list-style:none;background:rgba(247,244,239,.88);border:1px solid var(--rule);padding:14px 16px;
  font-size:13.5px;line-height:1.45;color:var(--ink-2);backdrop-filter:blur(10px);
  box-shadow:0 18px 40px -28px rgba(20,19,14,.45)}
.frag b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--thread);margin-bottom:6px;font-weight:500}
.frag--a{transform:rotate(-1.2deg)}
.frag--b{transform:translateX(18px) rotate(.8deg)}
.frag--c{transform:translateX(-6px) rotate(-.4deg)}
.js .frag{opacity:0;transform:translateY(16px)}
.js .frag.in{opacity:1;transition:opacity .9s var(--ease),transform 1s var(--ease)}
.js .frag--a.in{transform:rotate(-1.2deg)}
.js .frag--b.in{transform:translateX(18px) rotate(.8deg);transition-delay:.12s}
.js .frag--c.in{transform:translateX(-6px) rotate(-.4deg);transition-delay:.24s}

.proofband{background:var(--paper);border-block:1px solid var(--rule);padding-block:clamp(22px,3vw,36px)}
.proofband__in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule)}
.proofband__item{background:var(--paper);padding:18px 16px;text-align:center}
.proofband__item b{display:block;font-family:var(--display);font-size:clamp(28px,3.4vw,44px);line-height:1;
  color:var(--thread-deep);font-variant-numeric:tabular-nums}
.proofband__item span{display:block;margin-top:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
@media (max-width:720px){.proofband__in{grid-template-columns:repeat(2,minmax(0,1fr))}}

.lead{margin-top:16px;display:grid;gap:12px}
.lead label{display:grid;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.lead input,.lead select,.lead textarea{
  font:inherit;font-family:var(--ui);font-size:15px;letter-spacing:0;text-transform:none;
  color:var(--ink);background:var(--paper);border:1px solid var(--rule-2);padding:10px 12px;width:100%}
.lead textarea{resize:vertical;min-height:72px}
.lead__opt{letter-spacing:.04em;text-transform:none}
.lead__hp{position:absolute;left:-9999px;height:0;width:0;opacity:0}
.lead__msg{font-size:14px;color:var(--ink-2);min-height:1.2em}
.lead__msg.ok{color:var(--thread-deep)}
.lead__msg.err{color:#8A2A1B}
.lead__alt{font-size:13.5px;color:var(--muted)}
.lead__alt a{color:var(--thread-deep);text-decoration:underline;text-underline-offset:3px}
.lead .btn{width:100%;margin-top:4px}

.data-magic-divider{height:1px;background:var(--bronze);transform:scaleX(0);transform-origin:left}
.data-magic-divider.magic-in,.data-magic-divider.in{transform:scaleX(1);transition:transform .8s var(--ease)}

html.lenis{scroll-behavior:smooth}
.hero__layer{will-change:transform}
.js .frag.in{transform:translateY(var(--py,0))}
.js .frag--a.in{transform:rotate(-1.2deg) translateY(var(--py,0))}
.js .frag--b.in{transform:translateX(18px) rotate(.8deg) translateY(var(--py,0))}
.js .frag--c.in{transform:translateX(-6px) rotate(-.4deg) translateY(var(--py,0))}

.js [data-magic="header"]{opacity:0;transform:translateY(18px)}
.js [data-magic="header"].magic-in{opacity:1;transform:none;transition:opacity .85s var(--ease),transform .95s var(--ease)}
.js [data-magic="items"] > *{opacity:0;transform:translateY(16px)}
.js [data-magic="items"].magic-in > *{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .8s var(--ease);transition-delay:var(--stagger,0s)}
.js [data-magic="buttons"] > *{opacity:0;transform:translateY(10px) scale(.98)}
.js [data-magic="buttons"].magic-in > *{opacity:1;transform:none;transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js [data-magic="form"]{opacity:0;transform:translateY(12px)}
.js [data-magic="form"].magic-in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .8s var(--ease)}
.js [data-magic="text"]{opacity:0;transform:translateY(10px)}
.js [data-magic="text"].magic-in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .75s var(--ease)}
.js [data-magic="show"]{opacity:0}
.js [data-magic="show"].magic-in{opacity:1;transition:opacity .6s var(--ease)}
.js [data-magic="digits"]{opacity:1;transform:none}

:root[data-motion="reduced"] [data-magic],
:root[data-motion="reduced"] [data-magic] > *,
:root[data-motion="reduced"] [data-magic="header"]{opacity:1;transform:none}

/* ── footer ───────────────────────────────────────────────────────── */
.ftr{background:var(--ground);border-top:1px solid var(--rule);padding-block:clamp(40px,5vw,68px) 28px}
.ftr__grid{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));
  gap:clamp(24px,4vw,56px)}
.ftr__h{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:500;margin:0 0 14px;padding-bottom:5px;
  box-shadow:0 1px 0 var(--bronze);display:inline-block}
.ftr ul{display:grid;gap:9px}
.ftr li a{font-size:14px;color:var(--ink-2);transition:color .3s}
.ftr li a:hover{color:var(--thread-deep)}
.ftr__blurb{max-width:42ch;margin-top:14px;font-size:14px;color:var(--ink-2)}
.ftr__social{margin-top:18px;display:flex;gap:10px}
.ftr__social a{width:36px;height:36px;border:1px solid var(--rule-2);display:inline-flex;
  align-items:center;justify-content:center;color:var(--ink-2);transition:all .35s var(--ease)}
.ftr__social a:hover{border-color:var(--thread);color:var(--thread)}
.ftr__base{margin-top:clamp(32px,4vw,52px);padding-top:20px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted)}
.ftr__base a{color:var(--muted)}
.ftr__base a:hover{color:var(--thread-deep)}
.ftr__base .sp{margin-left:auto}

/* ── mobile ───────────────────────────────────────────────────────── */
.menu{position:fixed;inset:70px 0 auto;z-index:55;background:var(--hdr-veil);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);padding:18px var(--gut) 26px;display:none}
.menu.open{display:block}
.menu ul{display:grid;gap:2px}
.menu a{display:block;padding:12px 0;border-bottom:1px solid var(--rule);font-size:15px;color:var(--ink)}
.menu .btn{margin-top:18px;width:100%}

@media (max-width:1080px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .nav{display:none}
  .menu-btn{display:block}
  .hdr__end .btn{display:none}
  .beat__head{grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
  .prose,.invite__grid{grid-template-columns:minmax(0,1fr)}
  .writing a{grid-template-columns:minmax(0,1fr);gap:6px}
}
@media (max-width:620px){
  .grid-2,.grid-4{grid-template-columns:minmax(0,1fr)}
  .livebar{flex-wrap:wrap}
  .livebar__text{flex:1 1 100%;order:3}
}

/* ── reduced motion — the inline head script always sets data-motion ── */
:root[data-motion="reduced"] *,
:root[data-motion="reduced"] *::before,
:root[data-motion="reduced"] *::after{
  animation-duration:.001ms!important;animation-iteration-count:1!important;
  transition-duration:.001ms!important;scroll-behavior:auto!important}
:root[data-motion="reduced"].js .rv,
:root[data-motion="reduced"] .rv,
:root[data-motion="reduced"] [data-magic],
:root[data-motion="reduced"] [data-magic] > *{opacity:1;transform:none}
:root[data-motion="reduced"].lenis{scroll-behavior:auto}
:root[data-motion="reduced"] .hero__glow{animation:none!important}
:root[data-motion="reduced"] .rail__beat{transform:translate(-50%,-50%) scale(1)}

@media print{
  .hdr,.rail,.menu,.livebar__go{display:none}
  body{background:#fff}
  .js .rv{opacity:1;transform:none}
}