/* ==========================================================
   AIWine · Learn v3 — paged chapters + games
   (loads after learn-v2.css; overrides + new components)
   ========================================================== */

/* ---------- paged router ---------- */
.pg{ display:none; }
.pg.active{ display:block; }
html{ scroll-behavior:auto; }
section.block{ border-top:none; min-height:calc(100svh - 140px); }

/* nav + progress stay put during page transitions */
.lnav{ view-transition-name:lnav; }
.scroll-progress{ view-transition-name:progress; }

/* chapter progress (JS-driven, replaces scroll progress) */
.scroll-progress{ background:none; transform:none; animation:none !important; height:3px; }
.scroll-progress i{ display:block; height:100%; width:var(--cp,0%); background:linear-gradient(90deg,var(--brass),var(--claret));
  border-radius:0 99px 99px 0; transition:width .6s cubic-bezier(.22,1,.36,1); }

/* directional page transitions (View Transitions API) — scoped to nav only,
   so in-page view transitions (cards, quiz) crossfade instead of sliding */
@media (prefers-reduced-motion: no-preference){
  html[data-nav-vt]::view-transition-old(root){ animation:pg-out .38s cubic-bezier(.4,0,.2,1) both; }
  html[data-nav-vt]::view-transition-new(root){ animation:pg-in .46s cubic-bezier(.22,1,.36,1) both; }
  html[data-nav-vt][data-dir="-1"]::view-transition-old(root){ animation-name:pg-out-b; }
  html[data-nav-vt][data-dir="-1"]::view-transition-new(root){ animation-name:pg-in-b; }
  /* fallback for browsers without VT */
  html.no-vt .pg.active{ animation:pg-in .46s cubic-bezier(.22,1,.36,1) both; }
  html.no-vt[data-dir="-1"] .pg.active{ animation-name:pg-in-b; }
}
@keyframes pg-out{ to{ opacity:0; transform:translateX(-46px);} }
@keyframes pg-in{ from{ opacity:0; transform:translateX(46px);} }
@keyframes pg-out-b{ to{ opacity:0; transform:translateX(46px);} }
@keyframes pg-in-b{ from{ opacity:0; transform:translateX(-46px);} }

/* chapter kicker number */
.pg .blab .chno{ color:var(--muted); margin-left:10px; letter-spacing:.14em; }

/* pagenav (bottom of every chapter) */
.pagenav{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:52px; padding-top:24px; border-top:1px solid var(--line); }
.pagenav button{ display:inline-flex; align-items:center; gap:9px; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:12px 17px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--ink); cursor:pointer; transition:.15s; }
.pagenav button:hover{ border-color:var(--claret); color:var(--claret); transform:translateY(-2px); }
.pagenav button:active{ transform:scale(.97); }
.pagenav .pn-menu{ color:var(--ink-soft); }
.pagenav .pn-count{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.14em; color:var(--muted); }

/* floating side arrows (desktop) */
.side-arrow{ position:fixed; top:50%; transform:translateY(-50%); z-index:55; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line); background:color-mix(in oklab,var(--card),transparent 8%); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; color:var(--ink-soft); cursor:pointer;
  transition:.2s; box-shadow:0 8px 26px rgba(27,20,16,.1); }
.side-arrow:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.side-arrow.prev{ left:16px; } .side-arrow.next{ right:16px; }
.side-arrow[disabled]{ opacity:0; pointer-events:none; }
@media (max-width:900px){ .side-arrow{ display:none; } }

/* compact hero on home */
.lhero-compact{ min-height:min(78svh,680px); }
.lhero-compact .lw{ padding-bottom:70px; }

/* home hero — living vine canvas */
#hero-vine canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
#hero-vine .lw{ position:relative; z-index:2; }
#hero-vine .hy-chip{ position:absolute; z-index:2; right:20px; bottom:16px; pointer-events:none; }
#hero-vine .hy-chip .hint{ font-family:'JetBrains Mono',monospace; font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(244,239,229,.5); }
@media (max-width:720px){ #hero-vine .hy-chip{ display:none; } }
#home .topics{ display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:13px; padding:30px 0 60px; }

/* ---------- seasons (paged stage — full-bleed, pointer-scrubbed) ---------- */
.season-stage{ position:relative; margin-top:30px; height:clamp(420px,62vh,620px); overflow:hidden;
  width:100vw; margin-left:calc(50% - 50vw); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  cursor:ew-resize; touch-action:pan-y; }
.season-stage .ss-sky{ opacity:0; will-change:opacity; transition:none; }
.season-stage .ss-sun{ transition:none; width:74px; height:74px; transform:translate(-50%,-50%); will-change:left,top; }
.season-stage .ss-vines{ position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  height:min(74%, 68vw); width:auto; max-width:none; opacity:.94; pointer-events:none; }
/* season card sits below the scene so the full artwork stays visible */
.season-card{ position:static; margin:16px auto 0; max-width:660px;
  background:color-mix(in oklab,#14100C,transparent 6%);
  border:1px solid rgba(244,239,229,.16); border-radius:16px; padding:18px 22px; color:#F4EFE5; }
.ss-hint2{ position:absolute; z-index:6; top:16px; left:50%; transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(244,239,229,.8); background:rgba(20,16,12,.45); border:1px solid rgba(244,239,229,.2);
  padding:8px 16px; border-radius:999px; backdrop-filter:blur(6px); white-space:nowrap; pointer-events:none; }
@media (max-width:720px){ .ss-hint2{ font-size:7.5px; } }
.season-card{ position:absolute; z-index:5; left:16px; right:16px; bottom:16px; margin:0 auto; max-width:620px;
  background:color-mix(in oklab,#14100C,transparent 20%); backdrop-filter:blur(10px);
  border:1px solid rgba(244,239,229,.16); border-radius:16px; padding:18px 22px; color:#F4EFE5; }
.season-card .mo{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--brass-soft); }
.season-card h4{ font-family:'Cormorant Garamond',serif; font-size:clamp(22px,3.4vw,30px); font-weight:600; line-height:1; display:flex; align-items:center; gap:10px; }
.season-card h4 .sym{ font-size:.72em; }
.season-card p{ font-size:13.5px; line-height:1.6; color:color-mix(in oklab,#F4EFE5,transparent 16%); margin-top:8px; }
#grow .seg{ margin-top:16px; display:flex; gap:6px; flex-wrap:wrap; }
#grow .seg button{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:10px 16px; border:1px solid var(--line); border-radius:999px; background:var(--card); cursor:pointer; transition:.15s; }
#grow .seg button:hover{ border-color:var(--r2); }
#grow .seg button.on{ background:var(--r2); color:#fff; border-color:var(--r2); }

/* ---------- soil explorer ---------- */
.soil-lab{ display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(20px,3.5vw,44px); margin-top:34px; align-items:start; }
.soil-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.soil-col{ cursor:pointer; text-align:center; background:none; border:none; padding:0; }
.soil-col .tube{ height:280px; border-radius:12px; overflow:hidden; border:2px solid var(--line); display:flex; flex-direction:column; position:relative;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), border-color .25s, box-shadow .3s; }
.soil-col:hover .tube{ transform:translateY(-4px); }
.soil-col.on .tube{ border-color:var(--ink); transform:translateY(-6px); box-shadow:0 18px 40px rgba(27,20,16,.16); }
.soil-col .band{ position:relative; overflow:hidden; }
.soil-col .band::after{ content:''; position:absolute; inset:0; opacity:.35; mix-blend-mode:overlay;
  background-image:radial-gradient(3px 3px at 20% 30%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(4px 4px at 70% 60%, rgba(0,0,0,.5), transparent 60%),
    radial-gradient(3px 3px at 45% 80%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(5px 5px at 85% 20%, rgba(0,0,0,.4), transparent 60%);
  background-size:46px 46px; }
.soil-col .drop{ position:absolute; top:-12px; width:7px; height:11px; border-radius:50% 50% 60% 60%; background:#7FB3D4; opacity:0; z-index:3; }
.soil-col.on .drop{ opacity:.9; }
@media (prefers-reduced-motion: no-preference){
  .soil-col.on .drop{ animation:drop-fall var(--dur,2s) linear infinite; animation-delay:var(--dd,0s); }
}
@keyframes drop-fall{ 0%{ transform:translateY(0); opacity:0;} 8%{ opacity:.9;} 90%{ opacity:.7;} 100%{ transform:translateY(280px); opacity:0;} }
.soil-col .sname{ margin-top:10px; font-weight:700; font-size:13.5px; }
.soil-col .sdrain{ font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:2px; }
.soil-detail{ border:1px solid var(--line); border-radius:18px; background:var(--card); padding:24px 26px; view-transition-name:soil-card; }
.soil-detail .where{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ac); }
.soil-detail h5{ font-family:'Cormorant Garamond',serif; font-size:28px; font-weight:600; margin-top:4px; }
.soil-detail p{ font-size:13.5px; color:var(--ink-soft); line-height:1.62; margin-top:10px; }
.soil-detail .sfact{ margin-top:14px; font-size:13px; color:var(--ink-soft); line-height:1.58; border-left:2px solid var(--ac); padding-left:13px; font-style:italic; }
.soil-detail .count{ margin-top:14px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
@media (max-width:820px){ .soil-lab{ grid-template-columns:1fr; } .soil-col .tube{ height:200px; } @keyframes drop-fall{ 100%{ transform:translateY(200px); opacity:0;} } }

/* ---------- memory game ---------- */
.mem-hud{ display:flex; align-items:center; gap:18px; margin-top:28px; flex-wrap:wrap;
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.mem-hud .btn{ margin-left:auto; }
.mem-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:18px; max-width:640px; perspective:1200px; }
.mcard{ aspect-ratio:3/4; background:none; border:none; padding:0; cursor:pointer; }
.mcard .inner{ width:100%; height:100%; position:relative; transform-style:preserve-3d; transition:transform .5s cubic-bezier(.22,1,.36,1); }
.mcard.flip .inner{ transform:rotateY(180deg); }
.mcard .face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:13px; border:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
.mcard .front{ background:linear-gradient(160deg,var(--claret),var(--claret-deep)); color:var(--brass-soft); }
.mcard .front .qm{ font-family:'Cormorant Garamond',serif; font-size:34px; font-style:italic; }
.mcard .front .dots{ display:flex; gap:4px; }
.mcard .front .dots i{ width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.6; }
.mcard .back{ transform:rotateY(180deg); background:var(--card); padding:8px; }
.mcard .back .sw{ width:34px; height:34px; border-radius:50%; }
.mcard .back .nm{ font-family:'Cormorant Garamond',serif; font-size:15px; font-weight:600; text-align:center; line-height:1.1; }
.mcard.done{ pointer-events:none; }
.mcard.done .back{ border-color:var(--r2); box-shadow:0 0 0 2px color-mix(in oklab,var(--r2),transparent 60%); }
@media (prefers-reduced-motion: no-preference){ .mcard.done .inner{ animation:m-pop .5s cubic-bezier(.34,1.56,.64,1); } }
@keyframes m-pop{ 0%{ transform:rotateY(180deg) scale(1);} 45%{ transform:rotateY(180deg) scale(1.07);} 100%{ transform:rotateY(180deg) scale(1);} }
@media (max-width:560px){ .mem-grid{ gap:8px; } }

/* ---------- blend lab ---------- */
.blend-lab{ display:grid; grid-template-columns:minmax(240px,320px) 1fr; gap:clamp(24px,4vw,60px); margin-top:36px; align-items:center; }
.blend-glass-wrap{ text-align:center; }
.blend-glass{ position:relative; width:170px; height:190px; margin:0 auto;
  border:3px solid color-mix(in oklab,var(--ink),transparent 72%); border-top:none;
  border-radius:0 0 130px 130px; overflow:hidden; background:color-mix(in oklab,#fff,transparent 55%); }
.blend-glass::after{ content:''; position:absolute; left:0; right:0; bottom:-3px; height:3px; }
.blend-glass .liquid{ position:absolute; left:0; right:0; bottom:0; height:66%; background:var(--lc,#C9A23A);
  transition:background .5s ease, height .4s cubic-bezier(.22,1,.36,1); }
.blend-glass .liquid::before{ content:''; position:absolute; left:-10%; right:-10%; top:-9px; height:18px; border-radius:50%;
  background:color-mix(in oklab,var(--lc,#C9A23A),white 18%); }
@media (prefers-reduced-motion: no-preference){
  .blend-glass.slosh .liquid{ animation:slosh .7s ease; }
}
@keyframes slosh{ 0%,100%{ transform:rotate(0);} 30%{ transform:rotate(-2.4deg);} 65%{ transform:rotate(1.8deg);} }
.blend-glass .shine{ position:absolute; top:8%; left:12%; width:14px; height:56%; border-radius:99px; background:rgba(255,255,255,.4); transform:rotate(4deg); pointer-events:none; }
.blend-stem{ width:8px; height:44px; margin:0 auto; background:color-mix(in oklab,var(--ink),transparent 72%); }
.blend-verdict{ margin-top:18px; }
.blend-verdict .vword{ font-family:'Cormorant Garamond',serif; font-size:26px; font-weight:600; line-height:1.1; min-height:1.2em; }
.blend-verdict .vdesc{ font-size:13px; color:var(--ink-soft); line-height:1.55; margin-top:6px; min-height:3.2em; }
.blend-verdict .vbar{ height:6px; border-radius:99px; background:var(--bg-alt); margin-top:14px; overflow:hidden; }
.blend-verdict .vbar i{ display:block; height:100%; width:var(--bw,0%); border-radius:99px;
  background:linear-gradient(90deg,var(--brass),var(--r2)); transition:width .5s cubic-bezier(.22,1,.36,1); }
.blend-verdict .vnum{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:8px; }
.blend-controls{ display:flex; flex-direction:column; gap:26px; max-width:520px; }
.bslider .bs-head{ display:flex; justify-content:space-between; align-items:baseline; }
.bslider .bs-name{ font-weight:700; font-size:15px; }
.bslider .bs-val{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ac,var(--claret)); }
.bslider .bs-ends{ display:flex; justify-content:space-between; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:6px; }
.bslider input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:26px; background:none; cursor:pointer; margin-top:4px; }
.bslider input[type=range]::-webkit-slider-runnable-track{ height:6px; border-radius:99px;
  background:linear-gradient(90deg, color-mix(in oklab,var(--bc,var(--claret)),transparent 75%), var(--bc,var(--claret))); }
.bslider input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; margin-top:-8px;
  background:var(--card); border:3px solid var(--bc,var(--claret)); box-shadow:0 3px 10px rgba(27,20,16,.25); transition:transform .15s; }
.bslider input[type=range]:active::-webkit-slider-thumb{ transform:scale(1.2); }
.bslider input[type=range]::-moz-range-track{ height:6px; border-radius:99px;
  background:linear-gradient(90deg, color-mix(in oklab,var(--bc,var(--claret)),transparent 75%), var(--bc,var(--claret))); }
.bslider input[type=range]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:var(--card); border:3px solid var(--bc,var(--claret)); }
@media (max-width:720px){ .blend-lab{ grid-template-columns:1fr; } }

/* ---------- vintage weather game ---------- */
.wx-game{ margin-top:32px; max-width:720px; }
.wx-meters{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px; }
.wx-meter{ border:1px solid var(--line); border-radius:13px; background:var(--card); padding:13px 16px; }
.wx-meter .k{ display:flex; justify-content:space-between; font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.wx-meter .k b{ color:var(--ink); font-size:11px; }
.wx-meter .bar{ height:7px; border-radius:99px; background:var(--bg-alt); margin-top:8px; overflow:hidden; }
.wx-meter .bar i{ display:block; height:100%; border-radius:99px; width:var(--w,60%); transition:width .7s cubic-bezier(.22,1,.36,1); }
.wx-meter.q .bar i{ background:var(--claret); }
.wx-meter.y .bar i{ background:var(--r2); }
.wx-card{ border:1px solid var(--line); border-radius:18px; background:var(--card); padding:26px 28px; view-transition-name:wx-card; }
.wx-season{ display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:var(--wc,var(--r2)); border-radius:999px; padding:6px 13px; }
.wx-card h4{ font-family:'Cormorant Garamond',serif; font-size:clamp(24px,3.4vw,32px); font-weight:600; margin-top:14px; line-height:1.08; }
.wx-card .wx-d{ font-size:14.5px; color:var(--ink-soft); line-height:1.62; margin-top:10px; }
.wx-opts{ display:flex; flex-direction:column; gap:9px; margin-top:18px; }
.wx-opt{ text-align:left; padding:14px 17px; border:1px solid var(--line); border-radius:12px; background:var(--bg); cursor:pointer; font-size:14.5px; font-weight:600; transition:.15s; }
.wx-opt:hover{ border-color:var(--wc,var(--r2)); transform:translateX(3px); }
.wx-opt:active{ transform:scale(.985); }
.wx-result{ margin-top:16px; padding:15px 17px; background:var(--bg); border-radius:12px; border-left:2px solid var(--wc,var(--r2)); font-size:14px; line-height:1.6; color:var(--ink-soft); }
.wx-delta{ display:flex; gap:14px; margin-top:10px; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; }
.wx-delta .up{ color:var(--r2); } .wx-delta .down{ color:var(--r1); }
.wx-final{ text-align:center; padding:12px 0; }
.wx-final .score{ font-family:'Cormorant Garamond',serif; font-size:60px; font-weight:600; color:var(--claret); line-height:1; }
.wx-final .title{ font-family:'Cormorant Garamond',serif; font-size:26px; font-style:italic; margin-top:6px; }
.wx-final p{ font-size:14px; color:var(--ink-soft); margin-top:10px; line-height:1.6; }
.wx-next{ margin-top:16px; }

/* ---------- glossary ---------- */
#glossary{ position:relative; overflow:hidden; }
#glossary .gbg{ position:absolute; z-index:0; left:50%; top:50%; transform:translate(-50%,-50%); width:min(680px,80%); opacity:.5; mix-blend-mode:multiply; pointer-events:none;
  -webkit-mask-image:radial-gradient(75% 75% at 50% 50%, black 52%, transparent 78%); mask-image:radial-gradient(75% 75% at 50% 50%, black 52%, transparent 78%); }
#glossary .lw{ position:relative; z-index:1; }
.gloss-hud{ display:flex; align-items:center; gap:14px; margin-top:26px;
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.gloss-hud .bar{ flex:1; max-width:220px; height:5px; border-radius:99px; background:var(--bg-alt); overflow:hidden; }
.gloss-hud .bar i{ display:block; height:100%; width:var(--w,0%); background:var(--r6); border-radius:99px; transition:width .5s cubic-bezier(.22,1,.36,1); }
.gloss-detail{ border:1px solid var(--line); border-radius:16px; background:var(--card); padding:20px 24px; margin-top:18px; min-height:96px; view-transition-name:gloss-card; }
.gloss-detail .gw{ font-family:'Cormorant Garamond',serif; font-size:26px; font-weight:600; }
.gloss-detail .gp{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--r6); margin-left:8px; }
.gloss-detail p{ font-size:14px; color:var(--ink-soft); line-height:1.6; margin-top:7px; }
.gloss-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:11px; margin-top:18px; perspective:1000px; }
.gcard{ aspect-ratio:4/3; background:none; border:none; padding:0; cursor:pointer; }
.gcard .inner{ width:100%; height:100%; position:relative; transform-style:preserve-3d; transition:transform .5s cubic-bezier(.22,1,.36,1); transform:rotate(var(--tilt,0deg)); }
.gcard:hover .inner{ transform:rotate(0deg); }
.gcard.got .inner{ transform:rotate(0deg) rotateY(180deg); }
.gcard .face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:12px; border:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:8px; overflow:hidden; }
.gcard .front{ background:
    radial-gradient(circle at var(--ringx,72%) var(--ringy,26%), transparent 21%, rgba(122,46,58,.22) 22%, rgba(122,46,58,.26) 26%, transparent 27.5%),
    radial-gradient(circle at var(--ringx,72%) var(--ringy,26%), transparent 17%, rgba(122,46,58,.1) 18%, rgba(122,46,58,.1) 27%, transparent 28%),
    linear-gradient(155deg,#F7F1E3,#EDE3CC); }
.gcard .front .rn{ font-family:'Cormorant Garamond',serif; font-size:30px; font-style:italic; font-weight:600; color:var(--claret); line-height:1; }
.gcard .front .no{ font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.gcard .back{ transform:rotateY(180deg); background:var(--ink); color:var(--bg); }
.gcard .back .w{ font-family:'Cormorant Garamond',serif; font-size:16.5px; font-weight:600; text-align:center; line-height:1.1; }
.gcard.sel .face{ box-shadow:0 0 0 2px var(--r6); }

/* ---------- pathway map ---------- */
.path-map{ margin:34px 0 14px; border:1px solid var(--line); border-radius:18px; background:var(--card); padding:22px; overflow-x:auto; }
.path-in{ position:relative; min-width:640px; }
.path-cols{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:clamp(30px,6vw,90px); position:relative; z-index:2; }
.path-col h6{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.path-col{ display:flex; flex-direction:column; }
.pnode{ border:1px solid var(--line); border-radius:10px; background:var(--bg); padding:9px 12px; font-size:12.5px; font-weight:600;
  margin-bottom:8px; transition:.2s; cursor:default; }
.path-col.jobs .pnode{ cursor:pointer; }
.path-col.jobs .pnode:hover{ border-color:var(--r4); transform:translateX(-2px); }
.pnode.lit{ background:var(--r4); border-color:var(--r4); color:#fff; }
.pnode.dim{ opacity:.38; }
.path-svg{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:visible; }
.path-svg path{ fill:none; stroke:var(--line); stroke-width:1.5; transition:.25s; }
.path-svg path.lit{ stroke:var(--r4); stroke-width:2.5; }
.path-svg path.dim{ opacity:.25; }
.path-hint{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:10px; }

/* ---------- passport ---------- */
.passbook{ display:grid; grid-template-columns:minmax(220px,300px) 1fr; margin-top:32px; border:1px solid var(--line); border-radius:20px; overflow:hidden;
  background:var(--card); box-shadow:0 24px 60px rgba(27,20,16,.08); }
.pass-id{ background:linear-gradient(165deg,var(--claret),var(--claret-deep)); color:#F4EFE5; padding:30px 26px; display:flex; flex-direction:column; }
.pass-id .pk{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass-soft); }
.pass-id h4{ font-family:'Cormorant Garamond',serif; font-size:28px; font-weight:600; margin-top:8px; line-height:1.05; }
.pass-id .prow{ margin-top:14px; font-size:12px; line-height:1.5; color:color-mix(in oklab,#F4EFE5,transparent 25%); }
.pass-id .prow b{ display:block; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-soft); margin-bottom:2px; }
.pass-ring{ margin-top:auto; padding-top:22px; display:flex; align-items:center; gap:14px; }
.pass-ring svg{ width:64px; height:64px; transform:rotate(-90deg); }
.pass-ring circle{ fill:none; stroke-width:6; }
.pass-ring .t{ stroke:rgba(244,239,229,.2); }
.pass-ring .p{ stroke:var(--brass-soft); stroke-linecap:round; transition:stroke-dashoffset .8s cubic-bezier(.22,1,.36,1); }
.pass-ring .pct{ font-family:'Cormorant Garamond',serif; font-size:26px; font-weight:600; }
.pass-ring .plbl{ font-family:'JetBrains Mono',monospace; font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-soft); }
.pass-stamps{ padding:26px; display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:12px; align-content:start;
  background-image:radial-gradient(color-mix(in oklab,var(--line),transparent 40%) 1px, transparent 1px); background-size:22px 22px; }
.stamp{ aspect-ratio:1; border:2px dashed var(--line); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--muted); text-align:center; padding:8px; }
.stamp .sn{ font-family:'JetBrains Mono',monospace; font-size:7.8px; letter-spacing:.1em; text-transform:uppercase; line-height:1.25; }
.stamp.hit{ border-style:solid; border-color:var(--sc,var(--r2)); color:var(--sc,var(--r2)); transform:rotate(var(--rot,-6deg));
  background:color-mix(in oklab,var(--sc,var(--r2)),transparent 92%); }
@media (prefers-reduced-motion: no-preference){ .stamp.hit.fresh{ animation:stamp-in .5s cubic-bezier(.34,1.56,.64,1); } }
@keyframes stamp-in{ 0%{ transform:scale(1.7) rotate(var(--rot)); opacity:0;} 100%{ transform:scale(1) rotate(var(--rot)); opacity:1;} }
.pass-sub{ font-family:'Cormorant Garamond',serif; font-size:26px; font-weight:600; margin-top:44px; }
@media (max-width:720px){ .passbook{ grid-template-columns:1fr; } }