/* =============================================================================
   APEX-DECK — apex-deck.css
   The leematulis.com person-door composition: type-forward word-triple + a
   fanned deck of selves, one bronze "Go in" door, a low Pulse proof band.
   Ported from the Claude Design handoff (Onboarding Ancient Future, 2026-06-04)
   into the kit: tokens + fonts + nav + theme come from brand.css — this file
   adds ONLY the composition's component CSS (no :root token redefinition), so
   it stays kit-governed and the drift guard stays clean.

   2026-06-04 locked refinements applied (APEX-REDESIGN-SPEC.md):
     · industrial GRID texture inside the lit card (not the CD dot screen)
     · no eyebrow brandmark (the nav brandmark is the only one)
     · no footer seal (the Pulse band is the only bottom element)
     · Pulse bottom-right = honest live stat (no second "Pulse" word)
     · drawn figure nudged larger (proof = big)
   Discrete + addressable for code-wired motion: .word-line .neighbor/.locked,
   .deck .card[data-pos], .fig, .rank, .door, .spin-cta, .pulse.
   ============================================================================= */

/* fan geometry — scoped to the stage (overridable; no :root pollution) */
.apex-stage{
  /* brand.css HARDCODES font families (no font vars); mirror them verbatim so
     every var() below resolves to the kit faces, not a fallback serif. */
  --serif-display:"DM Serif Display",Georgia,serif;        /* display / oracle word — italic */
  --serif-body:"Cormorant Garamond",Georgia,serif;         /* body / teasers */
  --sans-chrome:"Inter",system-ui,sans-serif;              /* eyebrows, nav, labels, buttons */
  --sigil-face:"Noto Sans Symbols 2","Apple Symbols","Segoe UI Symbol",serif;
  --ts:1;
  --card-w:min(268px, 29vh);   /* scale the deck to the viewport so the Pulse band stays on the fold */
  --fan1:10deg; --fan2:20deg;
  --sc1:.9;     --sc2:.8;
  --dim1:.42;   --dim2:.26;
  --tx1:152px;  --tx2:300px;
  --ty1:0px;    --ty2:0px;   /* level fan — side cards rotate + spread only */
}

/* ---- stage — one desktop composition, top→bottom rhythm. Background is the
   kit body (warm-black radial in dark, paper in light) showing through. ----- */
.apex-stage{position:relative;width:100%;min-height:100vh;
  display:flex;flex-direction:column;overflow:hidden;
  color:var(--linen);font-family:var(--serif-body);-webkit-font-smoothing:antialiased}

/* ---- eyebrow ----------------------------------------------------------- */
.apex-stage .eyebrow{text-align:center;margin:6px 0 0;font-family:var(--sans-chrome);font-size:10.5px;
  letter-spacing:.32em;text-transform:uppercase;color:var(--stone)}
.apex-stage .eyebrow .sep{color:var(--bronze);margin:0 9px}

/* =============================================================================
   HEADLINE — the word TRIPLE  (faded · LOCKED · faded), rhymes with the fan
   ============================================================================= */
.apex-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,3vh,44px);
  min-height:0;padding:10px 40px 6px}
.head-group{text-align:center}
.head{text-align:center;margin:0;padding:0 40px}
.head .lead{font-family:var(--serif-display);font-style:italic;font-size:calc(34px*var(--ts));
  letter-spacing:.01em;line-height:1.1;
  background-image:var(--spectrum);background-size:300% auto;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:apex-drift 20s linear infinite}
.subline{font-family:var(--sans-chrome);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--stone);margin-top:18px}
.word-line{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;column-gap:.34em;margin-top:6px;
  font-family:var(--serif-display);font-style:italic;font-size:calc(clamp(56px,6.6vw,98px)*var(--ts));line-height:1.02;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
.wl-side{display:flex;align-items:baseline;gap:.34em;white-space:nowrap}
.wl-l{justify-self:end}
.wl-r{justify-self:start}
/* the locked word is plain linen WHILE spinning (no shimmer until lock); the
   spectrum + drift ignite only when .lit is added on landing. */
/* the drift runs CONTINUOUSLY on .locked (never restarts on lock) so its gradient
   phase stays identical to .lead's — same start, same 20s. .lit only REVEALS the
   spectrum; while spinning the word is plain linen but the timeline keeps running. */
.word-line .locked{justify-self:center;white-space:nowrap;color:var(--linen);
  background-size:300% auto;animation:apex-drift 20s linear infinite}
.word-line .locked.lit{
  background-image:var(--spectrum);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
.word-line .neighbor{font-size:.42em;color:var(--shell);opacity:.24;white-space:nowrap}
.word-line .sep{font-size:.4em;color:var(--bronze);opacity:.5;transform:translateY(-.18em)}

@keyframes apex-drift{from{background-position:0% center}to{background-position:150% center}}
@media (prefers-reduced-motion:reduce){.word-line .locked,.head .lead{animation:none}}

/* spin affordance — sits beneath the door (reads as "draw the next") */
.spin-row{display:flex;justify-content:center;margin:0}
.spin-cta{display:inline-flex;align-items:center;gap:10px;background:none;border:1px solid var(--line);
  border-radius:999px;padding:9px 18px;cursor:pointer;color:var(--stone);
  font-family:var(--sans-chrome);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  transition:color .2s,border-color .2s}
.spin-cta:hover{color:var(--bronze);border-color:var(--bronze)}
.spin-cta .sg{font-size:15px;line-height:1}

/* =============================================================================
   THE DECK — 5:7 cards, central drawn card + fanned dormant selves
   ============================================================================= */
.deck{position:relative;width:100%;max-width:1040px;height:calc(var(--card-w)*7/5 + 62px);
  transition:opacity .28s ease;cursor:grab;touch-action:pan-y;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.deck.grabbing{cursor:grabbing}
.deck.spinning{opacity:0}
.card{cursor:pointer}            /* tap/click a card to bring that self front + centre */
.card{position:absolute;left:50%;bottom:34px;width:var(--card-w);height:calc(var(--card-w)*7/5);
  border-radius:16px;overflow:hidden;transform-origin:50% 50%;
  border:1px solid rgba(245,240,232,.13);background:var(--panel);
  box-shadow:0 16px 40px -22px rgba(0,0,0,.78);
  transition:transform .42s cubic-bezier(.22,.61,.36,1),opacity .42s ease}
.card-face{position:absolute;inset:0}

/* fan placement — addressable by data-pos */
.card[data-pos="0"]{transform:translateX(-50%);z-index:5;opacity:1}
.card[data-pos="-1"]{transform:translateX(calc(-50% - var(--tx1))) translateY(calc(-1 * var(--ty1))) rotate(calc(-1 * var(--fan1))) scale(var(--sc1));z-index:4;opacity:var(--dim1)}
.card[data-pos="1"]{transform:translateX(calc(-50% + var(--tx1))) translateY(calc(-1 * var(--ty1))) rotate(var(--fan1)) scale(var(--sc1));z-index:4;opacity:var(--dim1)}
.card[data-pos="-2"]{transform:translateX(calc(-50% - var(--tx2))) translateY(calc(-1 * var(--ty2))) rotate(calc(-1 * var(--fan2))) scale(var(--sc2));z-index:3;opacity:var(--dim2)}
.card[data-pos="2"]{transform:translateX(calc(-50% + var(--tx2))) translateY(calc(-1 * var(--ty2))) rotate(var(--fan2)) scale(var(--sc2));z-index:3;opacity:var(--dim2)}

/* the drawn (centre) card — luminous obsidian, bronze inner hairline */
.card.center{background:radial-gradient(118% 78% at 50% 6%, rgba(176,128,48,.13), transparent 58%), var(--obsidian);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.85)}
.card.center::after{content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;
  border:1px solid rgba(176,128,48,.30)}
/* industrial GRID texture — faint bronze lines, ~20px cells, behind the figure.
   Ignites with the draw: only on the LIT centre card (locked refinement
   2026-06-04 · memory card-industrial-grid-texture). */
.card.center.lit .card-face::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(176,128,48,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(176,128,48,.055) 1px, transparent 1px);
  background-size:20px 20px}

/* figure — baked PNG, kept in a central safe-box so it never collides with the
   corner rank marks. Nudged larger per the locked refinement (proof = big).
   The luminous glow ignites only once the centre lands (.lit). */
.fig{position:absolute;left:50%;bottom:11%;transform:translateX(-50%);
  width:88%;height:86%;object-fit:contain;object-position:center bottom}
.card.center.lit .fig{filter:drop-shadow(0 0 24px rgba(245,240,232,.20))}
:root[data-theme="light"] .card.center.lit .fig{filter:drop-shadow(0 10px 20px rgba(20,15,8,.26))}

/* card rank — initial letter + mercury sigil, like a card index (not a suit).
   Shown only on the landed/lit centre (hidden while spinning). */
.rank{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:1;color:var(--bronze);
  z-index:2;text-shadow:0 0 7px var(--obsidian),0 1px 2px var(--obsidian)}
.card.center:not(.lit) .rank{display:none}
.rank.tl{top:15px;left:16px}
.rank.br{bottom:15px;right:16px;transform:rotate(180deg)}
.rank .ltr{font-family:var(--serif-display);font-style:italic;font-size:27px}
.rank .sig{font-family:var(--sigil-face);font-size:15px;margin-top:3px}

/* dormant flank cards — dim, a vertically-symmetric hairline + the stone self */
.card.flank .card-face{background:radial-gradient(120% 80% at 50% 10%, var(--panel), var(--bg))}
.card.flank .card-face::after{content:"";position:absolute;inset:13px;border-radius:9px;border:1px solid rgba(176,128,48,.12)}

/* =============================================================================
   DOOR — the single dominant gesture
   ============================================================================= */
.door-row{display:flex;justify-content:center;padding:6px 40px 0}
.door{display:inline-flex;align-items:center;gap:15px;text-decoration:none;background:var(--bronze);
  border-radius:999px;padding:15px 28px;transition:transform .2s ease,box-shadow .2s ease}
.door:hover{transform:translateY(-2px);box-shadow:0 16px 36px -18px rgba(176,128,48,.75)}
.door .d-go{font-family:var(--serif-display);font-style:italic;font-size:21px;color:#14110A;line-height:1}
.door .d-div{width:1px;height:20px;background:rgba(14,13,9,.34)}
.door .d-to{font-family:var(--sans-chrome);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:#14110A;display:flex;align-items:center;gap:8px}
.door .d-arr{font-size:14px}

/* =============================================================================
   PULSE — low, quiet proof band. The whole band links to the Pulse (secondary
   door); bottom-right is the honest live stat (anti-grifter proof).
   ============================================================================= */
.pulse{display:flex;align-items:center;gap:24px;padding:18px 48px;border-top:1px solid var(--line2);margin-top:26px;
  text-decoration:none;color:inherit;transition:background .2s}
.pulse:hover{background:rgba(176,128,48,.04)}
.pulse-ecg{height:32px;width:220px;flex:0 0 auto;display:block;overflow:visible}
.pulse-ptrace{fill:none;stroke:url(#pgrad);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.pulse-live{fill:var(--linen);stroke:var(--bronze);stroke-width:1.4}
.pulse-cap{font-family:var(--sans-chrome);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pulse-stat{margin-left:auto;display:flex;align-items:center;gap:8px;font-family:var(--sans-chrome);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);white-space:nowrap}
.pulse-stat b{color:var(--shell);font-weight:600;letter-spacing:.04em}
.pulse-sep{color:var(--bronze)}
.pulse-arr{color:var(--stone);font-size:13px;margin-left:2px;transition:color .2s,transform .2s}
.pulse:hover .pulse-arr{color:var(--bronze);transform:translateX(3px)}

/* =============================================================================
   RESPONSIVE — desktop is designed for desktop; phone stacks the fan tighter
   ============================================================================= */
/* ≤820px the apex uses the shared kit behavior: links collapse into the "Menu"
   dropdown and the theme toggle sits in the top bar (rightmost, beside Menu). We
   only trim the nav padding and keep the brandmark on one line. */
@media (max-width:820px){
  .apex-stage .nav{padding-left:18px;padding-right:18px}
  .apex-stage .brandmark{white-space:nowrap}
}

@media (max-width:760px){
  .apex-stage{--card-w:200px;--tx1:74px;--tx2:128px;--fan1:8deg;--fan2:15deg;--sc1:.82;--sc2:.66}
  .apex-center{gap:30px;padding:8px 18px}
  .word-line{font-size:calc(clamp(40px,12vw,70px)*var(--ts))}
  /* Pulse band centred on phones — ECG, caption, and stat stacked and centred */
  .pulse{flex-direction:column;justify-content:center;text-align:center;gap:8px;padding:16px 20px}
  .pulse-ecg{margin:0 auto}
  .pulse-cap{text-align:center}
  .pulse-stat{margin-left:0;justify-content:center}
}

/* keep the brandmark tidy on small phones (≤430px); the Menu button + toggle
   already fit the kit defaults down to ~320px. */
@media (max-width:430px){
  .apex-stage .brandmark{font-size:10.5px;letter-spacing:.14em}
}

/* =============================================================================
   ABOUT (body.world-about) — the About page reuses this Oracle Deck as its HERO,
   then flows into the kit-styled bio (.world-about .head/.arc/.foot in brand.css).
   Two deltas vs the apex front door:
     1. The deck sizes as a hero, not a full-viewport door — let .apex-stage take
        its natural height so the bio shows right beneath the cards (the apex
        forces 100vh to pin its Pulse band to the fold; About has no Pulse band).
     2. Re-assert the stage head's padding so the kit's `.world-about .head` bio
        rule (padding:54px 30px 10px) doesn't bleed into the HERO head — the
        deck's word-triple keeps its own tight apex spacing.
   Scoped to .world-about, so the apex front door (.world-apex) is untouched.
   ============================================================================= */
.world-about .apex-stage{min-height:auto}
.world-about .apex-stage .head{padding:0 40px}
/* lift the hero off the top bar at every width (4px was hugging); vh-based so it
   scales down on short windows instead of crowding */
.world-about .apex-center{padding-top:clamp(40px,6.5vh,84px);padding-bottom:22px}
/* match the contained kit nav (World + venture pages live in .wrap max-width:1040)
   so the top bar is uniform across pages instead of full-bleed on About */
.world-about .apex-stage .nav{max-width:1040px;margin-left:auto;margin-right:auto;width:100%}
/* keep the lit word dead-centered on narrow viewports: a long neighbor word would
   otherwise overflow its 1fr track and shove the centred column off (measured -15px
   left on mobile); minmax(0,1fr) forces equal side tracks at any width. */
.world-about .word-line{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}

/* =============================================================================
   ABOUT opt-in — sits beneath the Spin CTA. Adapted from the Pulse "pjoin" form
   (pulse/pulse-ui.css), posts to the SAME pulse-spine Worker (source=about).
   Scoped to .world-about so the apex front door is untouched. Narrower + centered
   to sit under the centered hero rather than a left-aligned feed. ----------- */
.world-about .pjoin{width:100%;max-width:440px;margin:0 auto;padding:0 22px}
.world-about .pjoin-inner{position:relative;overflow:hidden;border:1px solid var(--line);
  border-radius:16px;background:var(--panel);padding:24px 22px 20px;text-align:center}
.world-about .pjoin-inner::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--spectrum);opacity:.9}
.world-about .pjoin-eyebrow{margin:0 0 9px;color:var(--bronze);
  font:600 11px/1 "Inter",sans-serif;letter-spacing:.18em;text-transform:uppercase}
.world-about .pjoin-h{margin:0 0 6px;color:var(--linen);font:400 23px/1.15 "DM Serif Display",Georgia,serif}
.world-about .pjoin-sub{margin:0 0 16px;color:var(--muted);font:400 14px/1.5 "Inter",sans-serif}
.world-about .pjoin-row{display:flex;gap:10px;text-align:left}
.world-about .pjoin-email{flex:1;min-width:0;background:var(--obsidian);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;color:var(--linen);font:400 15px/1.2 "Inter",sans-serif;
  outline:none;transition:border-color .15s}
.world-about .pjoin-email::placeholder{color:var(--stone)}
.world-about .pjoin-email:focus{border-color:var(--bronze)}
.world-about .pjoin-btn{flex:0 0 auto;border:0;border-radius:10px;padding:12px 20px;cursor:pointer;
  color:var(--obsidian);background:var(--linen);font:600 14px/1.2 "Inter",sans-serif;
  letter-spacing:.02em;transition:transform .12s,opacity .15s}
.world-about .pjoin-btn:hover{transform:translateY(-1px)}
.world-about .pjoin-btn:disabled{opacity:.55;cursor:default;transform:none}
.world-about .pjoin-fine{margin:12px 0 0;color:var(--stone);font:400 12.5px/1.45 "Inter",sans-serif}
.world-about .pjoin-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.world-about .pjoin-msg{margin:11px 0 0;min-height:1.2em;font:400 14px/1.4 "Inter",sans-serif}
.world-about .pjoin-msg.ok{color:#8FC53A}
.world-about .pjoin-msg.err{color:#E2631F}
/* shimmering heart — opt-in success ♥ (vault CLAUDE.md §37). Markup forces text
   presentation (VS-15) so the spectrum clip tints it, not the OS RED emoji.
   Identical rule across every surface's additive layer; uses kit globals only. */
.hrt{background-image:var(--spectrum);background-size:300% auto;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;animation:drift-af 20s linear infinite}
@media (prefers-reduced-motion:reduce){.hrt{animation:none}}
.world-about .pjoin-form.done .pjoin-row,.world-about .pjoin-form.done .pjoin-fine{display:none}
@media (max-width:480px){.world-about .pjoin-row{flex-direction:column}.world-about .pjoin-btn{width:100%}}