/* ==========================================================================
   THE NEXT COIN CLUB — v2
   One stylesheet. No inheritance from app/effects/states/responsive/cinema.
   Those seven layers fought each other and every fix broke something else.
   This file owns the landing page outright.

   THE IDEA
     Most crypto sites shout in neon. The most expensive-looking companies in
     the world whisper in black and white and let scale do the work — Apple,
     Hermès, The Economist, Kinfolk. Confidence is the absence of decoration.

     So: no gradients, no glass, no glow, no icons in boxes. Instead —
     enormous type, real asymmetry, one accent used four times on the whole
     page, and photography treated like a magazine spread rather than a card.

   THE VOLTAGE
     1. Display type at 160px. Not 40. A number that large is a statement of
        intent before a single word is read.
     2. A live ticker. The page has a pulse.
     3. Numerals at 320px as background architecture, type sitting over them.
     4. A full-bleed founder portrait with the quote laid into the image.
     5. The membership credential as a physical object with real weight.
     6. Exactly one accent colour, and it is not blue.
   ========================================================================== */

/* ==========================================================================
   TOKENS
   ========================================================================== */
:root{
  --ink:        #0A0A0B;
  --ink-2:      #3D3E42;
  --ink-3:      #77787E;
  --ink-4:      #A8A9AF;
  --paper:      #FFFFFF;
  --paper-2:    #FAF9F7;   /* warm, not gray — gray reads cheap at scale */
  --paper-3:    #F1EFEB;
  --line:       rgba(10,10,11,.10);
  --line-2:     rgba(10,10,11,.18);

  /* NO CHROMATIC ACCENT. The brand is black, white and grey — introducing a
     colour was me veering outside the identity, and it was wrong. Emphasis
     is created by CONTRAST and WEIGHT instead: the accent is simply full-
     strength ink against everything else being softer. That is how Hermès,
     The Economist and Apple's print work create hierarchy without hue. */
  --accent:     var(--ink);

  --serif: 'Newsreader', 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --ease:   cubic-bezier(.16,1,.3,1);

  --page:   1240px;
  --gut:    clamp(20px,5vw,48px);
}

[data-theme="dark"]{
  --ink:     #F5F4F2;
  --ink-2:   #B9BABE;
  --ink-3:   #85868C;
  --ink-4:   #5A5B61;
  --paper:   #0A0A0B;
  --paper-2: #121214;
  --paper-3: #1A1A1D;
  --line:    rgba(245,244,242,.12);
  --line-2:  rgba(245,244,242,.2);
  --accent:  var(--ink);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body.nc{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:'kern' 1,'liga' 1,'calt' 1;
  overflow-x:hidden;
  transition:background .4s var(--ease), color .4s var(--ease);
}

.nc img{ max-width:100%; display:block; }
.nc a{ text-decoration:none; }
/* Deliberately NOT `color:inherit` here. That rule is (0,1,1) and silently
   outranked .btn-1's (0,1,0) colour, so every button rendered its label in
   the inherited ink — black text on a black button. Links inherit via the
   cascade instead, and buttons keep their own colour. */
.nc a:not([class]){ color:inherit; }
.wrap{ max-width:var(--page); margin-inline:auto; padding-inline:var(--gut); }

/* Focus that looks designed rather than bolted on. */
.nc :focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
  border-radius:2px;
}

/* ==========================================================================
   TYPE
   ========================================================================== */
.dsp{
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-.045em;
  line-height:.9;
  margin:0;
  text-wrap:balance;
}
.dsp em{ font-style:italic; }

.eyebrow{
  font-size:11px;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0 0 clamp(20px,3vw,32px);
}
.eyebrow .dot{
  display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--ink); margin-right:9px; vertical-align:middle;
  transform:translateY(-1px);
}

.lede{
  font-size:clamp(17px,1.85vw,21px);
  line-height:1.55;
  color:var(--ink-2);
  max-width:46ch;
  margin:0;
  text-wrap:pretty;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-size:15px; font-weight:600;
  letter-spacing:-.006em;
  padding:17px 34px;
  border-radius:100px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .28s var(--ease), background .25s var(--ease),
             color .25s var(--ease), border-color .25s var(--ease),
             box-shadow .25s var(--ease);
}
.nc .btn-1,
a.btn-1, button.btn-1{
  background:var(--ink); color:var(--paper);
  box-shadow:0 1px 2px rgba(0,0,0,.06), 0 12px 28px -12px rgba(0,0,0,.42);
}
.btn-1:hover{ transform:translateY(-2px); box-shadow:0 2px 4px rgba(0,0,0,.08), 0 20px 40px -14px rgba(0,0,0,.5); }
.btn-1:active{ transform:translateY(0) scale(.985); }
.nc .btn-2,
a.btn-2, button.btn-2{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn-2:hover{ border-color:var(--ink); transform:translateY(-1px); }
.btn-lg{ padding:20px 42px; font-size:16px; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nc-nav{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
.nc-nav.stuck{ border-bottom-color:var(--line); }
.nc-nav .in{
  max-width:var(--page); margin-inline:auto;
  padding:16px var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.nc-nav .mark img{ height:30px; width:auto; }
.nc-nav .primary{
  display:flex; align-items:center; gap:clamp(18px,2.4vw,32px);
  margin-inline:auto;
}
.nc-nav .primary a{
  color:var(--ink-2); font-size:13.5px; font-weight:600;
  transition:color .2s var(--ease);
}
.nc-nav .primary a:hover{ color:var(--ink); }
.nc-nav .right{ display:flex; align-items:center; gap:12px; }

.theme{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line-2); background:transparent;
  color:var(--ink-2); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:color .2s, border-color .2s, transform .3s var(--ease);
}
.theme:hover{ color:var(--ink); border-color:var(--ink); }
.theme:active{ transform:scale(.92); }
.theme svg{ width:17px; height:17px; }
.theme i{ display:none; }
.theme i.on{ display:flex; }

@media (max-width:620px){
  .nc-nav .in{ padding:13px var(--gut); }
  .nc-nav .mark img{ height:24px; }
  .nc-nav .primary{ display:none; }
  .nc-nav .right{ gap:8px; }
  .nc-nav .btn{ padding:10px 14px; font-size:13px; }
  .theme{ width:36px; height:36px; }
}

/* ==========================================================================
   1. HERO
   The logo is large. The headline is enormous. Nothing else competes.
   ========================================================================== */
.hero{
  position:relative;
  padding:clamp(56px,9vw,120px) 0 clamp(40px,6vw,72px);
  text-align:center;
  overflow:hidden;
}
.hero .mark{
  width:clamp(170px,24vw,250px);
  margin:0 auto clamp(28px,4vw,44px);
}
.hero .dsp{
  font-size:clamp(46px,8.4vw,96px);
  max-width:13ch;
  margin-inline:auto;
}
/* The italic line carries the promise. Emphasis by weight and form, never
   by hue — it is the same ink as the roman line, set in italic on its own
   line so the turn in the sentence is structural rather than coloured. */
.hero .dsp em{
  color:var(--ink);
  display:block;
}
.hero .lede{
  margin:clamp(28px,3.6vw,40px) auto 0;
  max-width:48ch;
}
.hero .acts{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
  margin-top:clamp(32px,4vw,44px);
}
.hero .risk{
  font-size:13.5px; color:var(--ink-3); margin:18px 0 0;
}

@media (max-width:560px){
  .hero .acts{ flex-direction:column; }
  .hero .acts .btn{ width:100%; }
  .hero .dsp{ max-width:none; }
}

/* ==========================================================================
   2. TICKER — the page has a pulse
   Four facts moving slowly. Static proof looks like a footer; moving proof
   looks like a company that is running.
   ========================================================================== */
.ticker{
  border-block:1px solid var(--line);
  background:var(--paper-2);
  overflow:hidden;
  padding:20px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker .track{
  display:flex; gap:0; width:max-content;
  animation:slide 42s linear infinite;
}
.ticker:hover .track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.ticker .it{
  display:flex; align-items:center; gap:14px;
  padding:0 clamp(28px,4vw,54px);
  white-space:nowrap;
}
.ticker .it b{
  font-size:clamp(14px,1.5vw,16px); font-weight:600; letter-spacing:-.01em;
}
.ticker .it span{
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700;
}
.ticker .sep{ width:4px; height:4px; border-radius:50%; background:var(--ink-4); }
@media (prefers-reduced-motion:reduce){
  .ticker .track{ animation:none; width:100%; justify-content:space-around; flex-wrap:wrap; gap:16px; }
  .ticker{ -webkit-mask-image:none; mask-image:none; }
}

/* The curriculum explorer.
   Without JavaScript every path remains visible and every link still works.
   JavaScript upgrades the curriculum to a compact, keyboard-operable tab set. */
.workshop{
  padding:clamp(72px,9vw,120px) 0;
  background:var(--ink);
  color:var(--paper);
}
.workshop-intro{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);
  gap:clamp(44px,7vw,96px);
  align-items:end;
}
.section-note{
  margin:0 0 20px;
  font-size:15px;
  font-weight:600;
  color:var(--ink-3);
}
.workshop .section-note{ color:#A8A9AF; }
.workshop .dsp{
  font-size:clamp(40px,6vw,74px);
  line-height:.98;
  letter-spacing:-.038em;
  max-width:13ch;
}
.workshop .dsp em{ display:block; color:#B9BABE; }
.workshop-statement p{
  max-width:46ch;
  margin:0;
  color:#D6D6DA;
  font-size:clamp(16px,1.7vw,18px);
  line-height:1.7;
}
.workshop-statement .text-link{ display:inline-flex; margin-top:22px; }
.text-link{ color:#FFFFFF; font-size:14px; font-weight:600; }
.text-link span{ display:inline-block; margin-left:6px; transition:transform .2s var(--ease); }
.text-link:hover span{ transform:translateX(4px); }

.build-trace{
  margin-top:clamp(48px,6.5vw,80px);
  border:1px solid rgba(255,255,255,.18);
  background:#0F0F11;
  overflow:hidden;
  contain:layout paint;
}
.trace-topline{
  display:flex; justify-content:space-between; gap:20px;
  padding:13px clamp(18px,2.5vw,28px);
  border-bottom:1px solid rgba(255,255,255,.12);
  color:#85868C; font-size:10.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
}
.trace-path{
  --trace-pad:clamp(22px,4vw,48px);
  position:relative;
  display:grid; grid-template-columns:repeat(4,1fr);
  padding:26px var(--trace-pad) 24px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.trace-path::before,.trace-path::after{
  content:''; position:absolute;
  left:calc(var(--trace-pad) + 20px); right:calc(var(--trace-pad) + 20px);
  top:46px; height:1px; transform-origin:left center;
  pointer-events:none;
}
.trace-path::before{ background:rgba(255,255,255,.16); }
.trace-path::after{
  background:#FFFFFF;
  transform:scaleX(var(--trace-progress));
  transition:transform .6s var(--ease);
}
.trace-step{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  min-height:62px; color:#85868C;
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  transition:color .25s var(--ease);
}
.trace-step:hover,.trace-step.is-active,.trace-step.is-reached{ color:#FFFFFF; }
.trace-node{
  width:40px; height:40px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.24); border-radius:50%;
  background:#0F0F11; color:#A8A9AF;
  font-size:10px; font-variant-numeric:tabular-nums;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease);
}
.trace-step:hover .trace-node{ border-color:#FFFFFF; transform:translateY(-2px); }
.trace-step.is-reached .trace-node,.trace-step.is-active .trace-node{
  background:#FFFFFF; color:#0B0B0C; border-color:#FFFFFF;
}
.trace-step.is-active .trace-node{ box-shadow:0 0 0 5px rgba(255,255,255,.1); }

.trace-panels{ min-height:360px; }
.trace-panel{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);
  gap:clamp(34px,6vw,78px);
  align-items:end;
  padding:clamp(32px,5vw,64px);
  overflow:hidden;
}
.trace-index{
  position:absolute; right:clamp(20px,4vw,48px); top:50%;
  transform:translateY(-50%);
  color:#FFFFFF; opacity:.035;
  font-family:var(--serif); font-size:clamp(160px,24vw,310px);
  line-height:.7; letter-spacing:-.08em; pointer-events:none; user-select:none;
}
.trace-copy,.trace-evidence{ position:relative; z-index:1; }
.trace-state{
  display:inline-flex; align-items:center; gap:8px;
  color:#D6D6DA; font-size:11px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
}
.trace-state i{
  width:7px; height:7px; border-radius:50%; background:#FFFFFF;
  box-shadow:0 0 0 4px rgba(255,255,255,.1);
}
.trace-state.testing{ color:#A8A9AF; }
.trace-state.testing i{ background:#85868C; box-shadow:0 0 0 4px rgba(255,255,255,.06); }
.trace-copy h3{
  max-width:17ch; margin:18px 0 0;
  color:#FFFFFF; font-family:var(--serif); font-size:clamp(30px,4vw,50px);
  font-weight:400; line-height:1.04; letter-spacing:-.032em; text-wrap:balance;
}
.trace-copy p{
  max-width:55ch; margin:18px 0 0;
  color:#A8A9AF; font-size:15.5px; line-height:1.7;
}
.trace-copy > a{
  display:inline-flex; gap:8px; margin-top:24px;
  color:#FFFFFF; font-size:14px; font-weight:600;
}
.trace-copy > a span{ transition:transform .2s var(--ease); }
.trace-copy > a:hover span{ transform:translate(3px,-3px); }
.trace-evidence{ margin:0; border-top:1px solid rgba(255,255,255,.2); }
.trace-evidence div{
  display:flex; justify-content:space-between; gap:20px;
  padding:14px 0; border-bottom:1px solid rgba(255,255,255,.1);
}
.trace-evidence dt{
  color:#85868C; font-size:10px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
}
.trace-evidence dd{
  margin:0; color:#D6D6DA; font-size:12.5px; font-weight:600; text-align:right;
}
.trace-panel + .trace-panel{ border-top:1px solid rgba(255,255,255,.14); }
.js .trace-panel{ display:none; border-top:0; }
.js .trace-panel.is-active{
  display:grid;
  animation:trace-in .48s var(--ease) both;
}
@keyframes trace-in{
  from{ opacity:0; transform:translateY(10px); clip-path:inset(0 0 12% 0); }
  to{ opacity:1; transform:none; clip-path:inset(0); }
}
.truth-strip{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.16);
  background:#0B0B0C;
}
.truth-strip span{
  display:flex; justify-content:space-between; gap:14px;
  padding:17px clamp(16px,2.4vw,26px);
  color:#85868C; font-size:10px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  border-right:1px solid rgba(255,255,255,.1);
}
.truth-strip span:last-child{ border-right:0; }
.truth-strip strong{ color:#FFFFFF; font-size:10px; text-align:right; }
.trace-note{
  max-width:72ch; margin:18px 0 0;
  color:#85868C; font-size:12px; line-height:1.6;
}
@media (max-width:820px){
  .workshop-intro{ grid-template-columns:1fr; align-items:start; }
  .workshop .dsp{ max-width:15ch; }
  .trace-panel{ grid-template-columns:1fr; align-items:start; }
  .trace-panels{ min-height:0; }
  .truth-strip{ grid-template-columns:1fr; }
  .truth-strip span{ border-right:0; border-bottom:1px solid rgba(255,255,255,.1); }
  .truth-strip span:last-child{ border-bottom:0; }
}
@media (max-width:560px){
  .trace-topline{ align-items:flex-start; }
  .trace-topline span:last-child{ text-align:right; }
  .trace-path{ --trace-pad:14px; padding-block:22px 19px; }
  .trace-path::before,.trace-path::after{ left:34px; right:34px; top:42px; }
  .trace-step{ font-size:10px; min-height:58px; gap:8px; }
  .trace-node{ width:36px; height:36px; }
  .trace-panel{ padding:28px 20px 32px; gap:30px; }
  .trace-copy h3{ font-size:clamp(28px,9vw,38px); }
  .trace-evidence div{ align-items:flex-start; }
}

/* ==========================================================================
   3. COMMUNITY CONTEXT
   ========================================================================== */
.collective{
  padding:clamp(76px,10vw,140px) 0;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.collective-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
  gap:clamp(48px,8vw,110px);
  align-items:start;
}
.collective .section-note{margin-bottom:22px;color:var(--ink-3)}
.collective .dsp{
  font-size:clamp(38px,6vw,78px);
  line-height:.96;
  max-width:12ch;
}
.collective .dsp em{display:block;color:var(--ink-2)}
.collective-copy>p{
  margin:0;
  max-width:57ch;
  color:var(--ink-2);
  font-size:clamp(16px,1.8vw,19px);
  line-height:1.72;
}
.collective-lines{margin:clamp(30px,4vw,42px) 0;border-top:1px solid var(--line-2)}
.collective-lines div{
  display:grid;
  grid-template-columns:90px minmax(0,1fr);
  gap:24px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
}
.collective-lines b{font-size:14px}
.collective-lines span{color:var(--ink-2);font-size:14px;line-height:1.55}
.live-lab{
  background:var(--paper-2);
}
.live-lab .collective-title{
  position:sticky;
  top:clamp(96px,12vw,138px);
}
@media(max-width:820px){
  .collective-grid{grid-template-columns:1fr;gap:38px}
  .collective .dsp{max-width:15ch}
  .live-lab .collective-title{position:static}
}
@media(max-width:480px){
  .collective-lines div{grid-template-columns:1fr;gap:4px}
  .collective-copy .btn{width:100%}
}

/* ==========================================================================
   4. STAGES — oversized numerals as architecture
   The numeral is not a label. It is the structure the type sits inside.
   ========================================================================== */
.become{ padding:clamp(80px,11vw,150px) 0; }
.sechead{ max-width:var(--page); margin:0 auto clamp(48px,7vw,88px); text-align:center; }
.sechead .section-note{ margin-bottom:18px; }
.sechead .dsp{ font-size:clamp(36px,6.4vw,86px); max-width:16ch; margin-inline:auto; }

.stage{
  position:relative;
  display:grid;
  grid-template-columns:1fr minmax(0,620px) 1fr;
  align-items:center;
  padding:clamp(48px,7vw,96px) 0;
  border-top:1px solid var(--line);
}
.stage:first-of-type{ border-top:0; }
.stage > .body{ grid-column:2; position:relative; z-index:2; }

/* The numeral. Absolutely positioned, enormous, low contrast — architecture
   rather than decoration. It anchors the eye without competing for it. */
.stage .n{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--serif);
  font-size:clamp(180px,34vw,420px);
  line-height:1;
  color:var(--ink);
  opacity:.045;
  z-index:1;
  pointer-events:none;
  user-select:none;
  letter-spacing:-.06em;
}
[data-theme="dark"] .stage .n{ opacity:.07; }

.stage h3{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(34px,5.4vw,68px);
  line-height:1.02; letter-spacing:-.036em;
  margin:0;
}
.stage .say{
  font-size:clamp(17px,2vw,22px); font-weight:500;
  color:var(--ink); margin:16px 0 0;
}
.stage p{
  font-size:clamp(15.5px,1.7vw,17px);
  line-height:1.72; color:var(--ink-2);
  margin:18px auto 0; max-width:52ch;
}
.stage .tags{
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
  margin-top:26px;
}
.stage .tags i{
  font-style:normal; font-size:11.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3);
  border:1px solid var(--line-2); border-radius:100px;
  padding:7px 15px;
}
.stage .body{ text-align:center; }

@media (max-width:820px){
  .stage{ grid-template-columns:1fr; }
  .stage > .body{ grid-column:1; }
  .stage .n{ font-size:clamp(200px,54vw,300px); }
}

/* ==========================================================================
   4. FOUNDER — full-bleed spread, quote laid into the image
   The most persuasive content on the page treated like the cover of a
   magazine, not a testimonial card.
   ========================================================================== */
.founder{
  position:relative;
  background:var(--paper-3);
  padding:clamp(72px,10vw,130px) 0;
  overflow:hidden;
}
.fgrid{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(32px,6vw,88px);
  align-items:center;
}
.fportrait{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--paper-2);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.45);
}
.fportrait img{
  width:100%; height:100%; object-fit:cover; object-position:center 22%;
  filter:grayscale(1) contrast(1.08);
  transition:transform 1.2s var(--ease), filter .6s var(--ease);
}
.founder:hover .fportrait img{ transform:scale(1.03); filter:grayscale(.86) contrast(1.08); }

/* The accent rule is the only colour in this section. */
.fquote{ margin:0; }
.fquote .rule{
  width:56px; height:3px; background:var(--ink); margin-bottom:clamp(24px,3.4vw,36px);
}
.fquote q{
  quotes:none;
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:clamp(26px,4.2vw,54px);
  line-height:1.16; letter-spacing:-.032em;
  display:block;
}
.fquote q + q{ margin-top:.4em; color:var(--ink-2); }

.fbody{
  font-size:clamp(15.5px,1.7vw,17px); line-height:1.74; color:var(--ink-2);
  max-width:48ch;
  margin:clamp(26px,3.4vw,36px) 0 0;
  padding-top:clamp(24px,3vw,30px);
  border-top:1px solid var(--line);
}
.fname{
  font-size:clamp(17px,2vw,21px); font-weight:600; letter-spacing:-.018em;
  margin:clamp(24px,3vw,32px) 0 0;
}
.frole{ font-size:13.5px; color:var(--ink-3); margin:5px 0 0; }

@media (max-width:860px){
  .fgrid{ grid-template-columns:1fr; gap:32px; }
  .fportrait{ aspect-ratio:4/5; max-height:none; }
}

/* ==========================================================================
   5. THE CREDENTIAL — a physical object
   Real weight, real edge light, subtle tilt. Flat on touch devices.
   ========================================================================== */
.member{ padding:clamp(80px,11vw,150px) 0; background:var(--paper); }

.card-stage{ perspective:1600px; display:flex; justify-content:center; }
.card{
  width:min(480px,92%);
  background:var(--paper);
  border:1px solid var(--line-2);
  border-radius:22px;
  padding:clamp(28px,4vw,38px);
  box-shadow:
    0 2px 4px rgba(0,0,0,.04),
    0 18px 40px -18px rgba(0,0,0,.24),
    0 50px 90px -50px rgba(0,0,0,.5);
  transform:rotateX(6deg) rotateY(-5deg);
  transition:transform .8s var(--ease), box-shadow .8s var(--ease);
}
.card:hover{
  transform:rotateX(2deg) rotateY(-1.5deg) translateY(-6px);
  box-shadow:
    0 2px 4px rgba(0,0,0,.05),
    0 26px 54px -20px rgba(0,0,0,.3),
    0 70px 120px -60px rgba(0,0,0,.55);
}
@media (hover:none){ .card{ transform:none; } }

.card .top{
  display:flex; align-items:baseline; justify-content:space-between;
  padding-bottom:20px; border-bottom:1px solid var(--line);
}
.card .brand{ font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.card .kind{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); font-weight:700; }
.card .rows{ padding:6px 0; }
.card .row{
  display:flex; align-items:center; gap:12px;
  padding:15px 0; border-bottom:1px solid var(--line);
  font-size:14.5px;
}
.card .row:last-child{ border-bottom:0; }
.card .row .d{ width:6px; height:6px; border-radius:50%; background:var(--ink); flex-shrink:0; }
.card .row .d.wait{ background:var(--ink-4); }
.card .row .t{ flex:1; font-weight:500; }
.card .row .s{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); font-weight:700; }
.card .foot{
  padding-top:18px; margin-top:6px; border-top:1px solid var(--line);
  font-size:12px; color:var(--ink-3); letter-spacing:.02em;
}

.member .caption{
  text-align:center; margin:clamp(40px,5vw,56px) auto 0; max-width:44ch;
  font-size:clamp(15.5px,1.7vw,17px); line-height:1.7; color:var(--ink-2);
}

/* ==========================================================================
   6. LESSON PREVIEW — the writing does the selling
   ========================================================================== */
.taste{ padding:clamp(72px,10vw,130px) 0; background:var(--paper-2); }
.paper{
  max-width:720px; margin-inline:auto;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:4px;
  padding:clamp(32px,5vw,64px);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.28);
}
.paper .meta{
  display:flex; gap:16px; flex-wrap:wrap;
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700;
  padding-bottom:18px; border-bottom:1px solid var(--line);
}
.paper h3{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(28px,4vw,46px); line-height:1.08; letter-spacing:-.03em;
  margin:26px 0 0;
}
.paper .read{ position:relative; margin-top:22px; max-height:270px; overflow:hidden; }
.paper .read p{
  font-size:clamp(16px,1.8vw,18px); line-height:1.78; color:var(--ink-2);
  margin:0 0 18px;
}
.paper .read p strong{ color:var(--ink); font-weight:500; }
.paper .read::after{
  content:''; position:absolute; inset:auto 0 0; height:120px;
  background:linear-gradient(to bottom,transparent,var(--paper));
}
.paper .go{ margin-top:26px; }

/* ==========================================================================
   7. JOIN — the calmest, most confident thing on the page
   ========================================================================== */
.join{ padding:clamp(88px,12vw,160px) 0; text-align:center; }
.join .dsp{ font-size:clamp(40px,7vw,96px); max-width:12ch; margin-inline:auto; }
.steps{ max-width:520px; margin:clamp(44px,6vw,68px) auto 0; text-align:left; }
.step{
  display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:baseline;
  padding:20px 0; border-bottom:1px solid var(--line);
}
.step .k{
  font-size:11px; font-weight:700; letter-spacing:.18em; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.step .v{ font-size:clamp(16px,1.8vw,18px); }
.join .acts{ margin-top:clamp(40px,5vw,56px); }
.join .risk{ font-size:13.5px; color:var(--ink-3); margin:18px 0 0; }

/* ==========================================================================
   8. FOOTER
   ========================================================================== */
.nc-foot{
  border-top:1px solid var(--line);
  padding:clamp(48px,6vw,72px) 0 clamp(36px,4vw,48px);
  background:var(--paper-2);
}
.fcols{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:clamp(24px,4vw,48px);
}
.fcols h4{
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; margin:0 0 16px;
}
.fcols a{ display:block; font-size:14.5px; color:var(--ink-2); padding:6px 0; transition:color .2s; }
.fcols a:hover{ color:var(--ink); }
.fcols .brand img{ height:28px; margin-bottom:16px; }
.fcols .brand p{ font-size:13.5px; color:var(--ink-3); line-height:1.6; max-width:32ch; margin:0; }
.legal{
  margin-top:clamp(36px,5vw,56px); padding-top:24px; border-top:1px solid var(--line);
  font-size:12px; color:var(--ink-3); line-height:1.65;
}
.legal p{ margin:0 0 8px; max-width:80ch; }
@media (max-width:760px){ .fcols{ grid-template-columns:1fr 1fr; } .fcols .brand{ grid-column:1/-1; } }

/* ==========================================================================
   9. REVEALS — short, once, and never load-bearing
   Content is visible by default. The animation only runs when JS confirms it
   can drive it, so a script failure can never blank the page.
   ========================================================================== */
.js .rv{ opacity:0; transform:translateY(14px); }
.js .rv.in{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.js .rv.d1{ transition-delay:.08s; }
.js .rv.d2{ transition-delay:.16s; }
.js .rv.d3{ transition-delay:.24s; }
.js .rv.d4{ transition-delay:.32s; }

/* Failsafe: visible after 1.4s no matter what. */
@keyframes ncFail{ to{ opacity:1; transform:none; } }
.js .rv{ animation:ncFail .01s linear 1.4s forwards; }

@media (prefers-reduced-motion:reduce){
  .js .rv{ opacity:1 !important; transform:none !important; transition:none !important; animation:none !important; }
  .card{ transform:none !important; }
  .trace-path::after,
  .trace-step,
  .trace-node,
  .trace-copy > a span{ transition:none !important; }
  .js .trace-panel.is-active{ animation:none !important; }
}

@media (max-width:900px){
  .nc-nav .primary{ display:none; }
}


/* ==========================================================================
   10. MOBILE — the gaps an audit found, closed
   The page was already fluid (47 clamp() values, zero fixed large type, no
   100vh anywhere). These are the three things that were genuinely missing.
   ========================================================================== */

/* ---- A. SAFE AREA ----------------------------------------------------
   index.html sets viewport-fit=cover, which lets the page paint under the
   notch and the home indicator — but nothing was reserving space for them.
   On an iPhone in portrait the footer sat under the home bar; in landscape
   the gutters ran beneath the notch. env() resolves to 0 everywhere else,
   so this costs nothing on other devices. */
.wrap,
.nc-nav .in{
  padding-left:  max(var(--gut), env(safe-area-inset-left));
  padding-right: max(var(--gut), env(safe-area-inset-right));
}
.nc-foot{ padding-bottom: max(clamp(36px,4vw,48px), env(safe-area-inset-bottom)); }
.ticker{ padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }

/* ---- B. TAP TARGETS ---------------------------------------------------
   The theme control was 38px. Apple's HIG and WCAG 2.5.8 both put the floor
   at 44px. It stays visually 38px — the hit area is expanded with a
   pseudo-element so the design does not change but the thumb gets its
   target. This is the correct fix; enlarging the circle would not be. */
.theme{ position:relative; }
.theme::after{
  content:''; position:absolute; top:50%; left:50%;
  width:44px; height:44px; transform:translate(-50%,-50%);
}
/* Buttons are 17px padding on ~19px line-height = ~53px tall. Already fine. */

/* ---- C. THE TWO SECTIONS WITH NO MOBILE RULE ------------------------- */
@media (max-width:620px){
  /* Lesson card: 64px of padding on a 375px screen leaves 247px of measure,
     which is too narrow to read comfortably. */
  .paper{ padding:clamp(22px,6vw,30px); border-radius:2px; }
  .paper .read{ max-height:230px; }
  .paper .go .btn{ width:100%; }

  /* Join: the numeral column was fixed-width and cramped the step text. */
  .steps{ max-width:none; }
  .step{ grid-template-columns:auto 1fr; gap:14px; padding:17px 0; }
  .join .acts .btn{ width:100%; }
}

/* ---- D. SMALL PHONES (320–375px) --------------------------------------
   The floor of the range. Nothing here should ever require a horizontal
   scroll or a two-line button label. */
@media (max-width:400px){
  :root{ --gut:18px; }
  .hero .mark{ width:min(78vw,280px); }
  .btn, .btn-lg{ padding:16px 22px; font-size:15px; }
  .stage .tags i{ font-size:10.5px; padding:6px 11px; }
  .card{ padding:22px 20px; border-radius:18px; }
  .card .row{ font-size:13.5px; padding:13px 0; }
  .fcols{ grid-template-columns:1fr; }
}

/* ---- E. LANDSCAPE PHONE ------------------------------------------------
   Short viewports were where the previous build's pinned scenes clipped
   content. Nothing pins now, but the vertical rhythm is still tuned for a
   tall screen, so it is compressed rather than left to sprawl. */
@media (max-height:520px) and (orientation:landscape){
  .hero{ padding:32px 0 24px; }
  .hero .mark{ width:min(200px,30vw); margin-bottom:20px; }
  .become, .member, .taste, .join{ padding:44px 0; }
  .founder{ padding:44px 0; }
  .fportrait{ aspect-ratio:16/10; }
}

/* ---- F. iOS TEXT-SIZE + TAP HIGHLIGHT ---------------------------------- */
.nc{ -webkit-tap-highlight-color:transparent; }
.nc a, .nc button{ touch-action:manipulation; }   /* removes the 300ms delay */