/* Layout concept: a trail map read top to bottom — an elevation rail down the left edge,
   each section a marked "run", sticker-bomb and topo contour as the ground texture.
   Committed single dark world (night session under the lift lights). */
:root{
  color-scheme: dark;
  --ink:#080c14;          /* deepest base, page ground */
  --navy:#121a28;         /* panel */
  --slate:#2e4367;        /* structural lines, raised panel */
  --steel:#7183a0;        /* secondary text */
  --ice:#d1d7e0;          /* body text */
  --frost:#fbffff;        /* headline white */
  --cyan:#00acff;         /* primary accent */
  --deep:#004c71;         /* accent shade */
  --heat:#ff5a2b;         /* single warning/price accent */

  --f-display:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;
  --f-body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --f-mono:"Martian Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --rail:34px;
  --gut-l: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
}
*{box-sizing:border-box}
body{
  background:var(--ink); color:var(--ice);
  font-family:var(--f-body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3{font-family:var(--f-display); font-weight:800; line-height:.95; text-wrap:balance; margin:0}
p{margin:0}
a{color:var(--cyan)}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:2px}

/* ---- ground texture ---- */
#topo{position:fixed; inset:0; width:100%; height:100%; z-index:0; opacity:.5; pointer-events:none}
.grain{position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.4;
  background-image:radial-gradient(var(--slate) .5px, transparent .5px);
  background-size:4px 4px; mix-blend-mode:overlay}

/* ---- shell ---- */
.wrap{position:relative; z-index:2; max-width:1080px; margin:0 auto;
  padding-left:calc(var(--gut-l) + var(--rail)); padding-right:var(--gut-r)}
.band{position:relative; z-index:2; border-top:1px solid color-mix(in srgb, var(--slate) 60%, transparent)}
.band-inner{max-width:1080px; margin:0 auto; padding-block:clamp(44px,7vw,84px);
  padding-left:calc(var(--gut-l) + var(--rail)); padding-right:var(--gut-r)}

/* elevation rail */
.rail{position:fixed; left:0; top:0; bottom:0; width:calc(var(--gut-l) + var(--rail)); z-index:3;
  pointer-events:none; display:flex; flex-direction:column; justify-content:space-between;
  padding-block:18px; padding-left:var(--gut-l);
  font-family:var(--f-mono); font-size:9px; letter-spacing:.08em; color:var(--steel)}
.rail span{writing-mode:vertical-rl; transform:rotate(180deg)}
.rail::after{content:""; position:absolute; left:calc(var(--gut-l) + 15px); top:0; bottom:0; width:1px;
  background:linear-gradient(var(--slate),transparent 18%,var(--slate) 55%,transparent)}

/* ---- labels ---- */
.tag{font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan)}
.tag-dim{color:var(--steel)}
.rule{display:flex; align-items:center; gap:12px; margin-bottom:22px}
.rule::after{content:""; flex:1; height:1px; background:color-mix(in srgb, var(--slate) 70%, transparent)}

/* ---- hero ---- */
.hero{padding-block:clamp(40px,8vw,76px) clamp(36px,6vw,64px)}
.mark{display:flex; align-items:center; gap:12px; margin-bottom:clamp(26px,5vw,46px)}
.mark svg{width:34px; height:34px; flex:none}
.mark b{font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; color:var(--frost); font-weight:600}

.wordmark{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(3.4rem,13.5vw,9.5rem); letter-spacing:-.045em; line-height:.86;
  color:var(--frost); margin:0;
  text-shadow:
    0 1px 0 #aebfd4, 0 2px 0 #90a4bd, 0 3px 0 #74899f,
    0 4px 0 #5a7187, 0 5px 0 var(--slate), 0 6px 0 #253752,
    0 10px 24px rgba(0,0,0,.65);
}
.hero-sub{font-family:var(--f-display); font-weight:500; font-size:clamp(1.3rem,3.4vw,2rem);
  color:var(--frost); margin-top:clamp(16px,2.5vw,24px); max-width:20ch; line-height:1.1}
.hero-meta{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:20px}
.hero-meta span{font-family:var(--f-mono); font-size:12px; color:var(--steel)}
.hero-meta b{color:var(--ice); font-weight:400}

.cta-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:clamp(26px,4vw,38px)}
.btn{display:inline-flex; align-items:center; gap:10px; border:0; cursor:pointer;
  font-family:var(--f-mono); font-weight:600; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  padding:14px 22px; border-radius:2px; text-decoration:none;
  background:var(--cyan); color:#02131d; box-shadow:0 3px 0 var(--deep);
  transition:transform .12s ease, box-shadow .12s ease}
.btn:hover{transform:translateY(-2px); box-shadow:0 5px 0 var(--deep)}
.btn:active{transform:translateY(1px); box-shadow:0 1px 0 var(--deep)}
.btn-ghost{background:transparent; color:var(--ice); box-shadow:inset 0 0 0 1px var(--slate)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--cyan); color:var(--frost)}
.fineprint{font-family:var(--f-mono); font-size:11px; color:var(--steel); margin-top:14px}

/* ---- stickers ---- */
.stickers{position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:-1}
.stk{position:absolute; opacity:.9; filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.stk svg{display:block; width:100%; height:auto}
.s1{width:88px; top:4%;  right:2%;  transform:rotate(14deg)}
.s2{width:62px; top:46%; right:11%; transform:rotate(-21deg)}
.s3{width:54px; bottom:6%; right:26%; transform:rotate(8deg)}
.s4{width:70px; top:22%; right:30%;  transform:rotate(-9deg); opacity:.45}
@media (max-width:860px){ .s2,.s4{display:none} .s1{width:62px} .s3{width:42px} }

/* ---- pass cards ---- */
.passes{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr)); gap:18px}
.pass{min-width:0; position:relative; background:linear-gradient(170deg,var(--navy),#0c121d);
  border:1px solid var(--slate); border-radius:4px; overflow:hidden; display:flex; flex-direction:column}
.pass-top{padding:20px 20px 16px; display:flex; gap:16px; align-items:flex-start; justify-content:space-between}
.pass-place{font-family:var(--f-display); font-weight:800; font-size:1.9rem; color:var(--frost); letter-spacing:-.02em}
.pass-kind{font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; color:var(--cyan); margin-top:6px}
.date{text-align:right; flex:none}
.date b{display:block; font-family:var(--f-display); font-weight:800; font-size:2.6rem; color:var(--frost); line-height:.85;
  font-variant-numeric:tabular-nums}
.date i{font-style:normal; font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; color:var(--steel)}
.pass-list{list-style:none; margin:0; padding:0 20px 18px; display:flex; flex-direction:column; gap:9px}
.pass-list li{display:flex; gap:10px; font-size:14.5px; color:var(--ice); min-width:0}
.pass-list i{font-style:normal; color:var(--cyan); flex:none; font-size:12px; margin-top:3px}
.pass-note{margin:0 20px 18px; padding-top:14px; border-top:1px dashed color-mix(in srgb,var(--slate) 80%, transparent);
  font-family:var(--f-mono); font-size:11.5px; line-height:1.7; color:var(--steel)}
.barcode{height:34px; display:flex; gap:2px; align-items:stretch; padding:0 20px 18px; opacity:.55}
.barcode span{background:var(--steel); border-radius:1px}

/* ---- split math ---- */
.math{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(20px,4vw,44px); align-items:start}
@media (max-width:760px){ .math{grid-template-columns:1fr} }
.math-copy p{color:var(--ice); max-width:48ch; margin-bottom:14px}
.calc{min-width:0; background:var(--navy); border:1px solid var(--slate); border-radius:4px; padding:22px}
.calc-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:4px}
.calc-head .tag{color:var(--steel)}
.price{font-family:var(--f-display); font-weight:800; font-size:clamp(3.2rem,9vw,4.6rem); color:var(--frost);
  line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.price small{font-family:var(--f-mono); font-size:13px; font-weight:400; color:var(--steel); letter-spacing:.1em;
  display:block; margin-top:8px}
.slider-wrap{margin-top:24px}
.slider-top{display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:11px;
  letter-spacing:.1em; color:var(--steel); margin-bottom:10px}
.slider-top b{color:var(--cyan); font-weight:600}
input[type=range]{width:100%; -webkit-appearance:none; appearance:none; background:transparent; height:26px; cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:3px; background:var(--slate); border-radius:2px}
input[type=range]::-moz-range-track{height:3px; background:var(--slate); border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:20px; height:20px; margin-top:-8.5px;
  background:var(--cyan); border:3px solid var(--ink); border-radius:50%; box-shadow:0 0 0 1px var(--cyan)}
input[type=range]::-moz-range-thumb{width:20px; height:20px; background:var(--cyan);
  border:3px solid var(--ink); border-radius:50%; box-shadow:0 0 0 1px var(--cyan)}
.ledger{margin-top:22px; padding-top:16px; border-top:1px solid color-mix(in srgb,var(--slate) 70%, transparent);
  font-family:var(--f-mono); font-size:12px; display:flex; flex-direction:column; gap:7px}
.ledger div{display:flex; justify-content:space-between; gap:14px; color:var(--steel)}
.ledger b{color:var(--ice); font-weight:400; font-variant-numeric:tabular-nums}
.ledger .warn b{color:var(--heat)}
.bunks{display:flex; flex-wrap:wrap; gap:4px; margin-top:20px}
.bunk{width:13px; height:18px; border-radius:1px; background:var(--slate); transition:background .18s ease}
.bunk.on{background:var(--cyan)}

/* ---- rive stage ---- */
.stage{position:relative; min-width:0; border:1px dashed var(--slate); border-radius:4px;
  aspect-ratio:16/7; max-width:100%; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(circle at 50% 120%, color-mix(in srgb,var(--deep) 55%, transparent), transparent 70%)}
.stage canvas{position:absolute; inset:0; width:100%; height:100%}
.stage-fallback{position:relative; text-align:center; padding:20px}
.stage-fallback .tag{display:block; margin-bottom:8px}
.stage-fallback p{font-family:var(--f-mono); font-size:11.5px; color:var(--steel); line-height:1.8}

/* ---- why ---- */
.why{font-family:var(--f-display); font-weight:500; font-size:clamp(1.35rem,3.6vw,2.15rem);
  line-height:1.25; color:var(--frost); max-width:22ch}
.why em{font-style:normal; color:var(--cyan)}
.why-note{margin-top:22px; max-width:46ch; color:var(--steel); font-size:15.5px}

/* ---- closer ---- */
.closer{text-align:center}
.closer h2{font-size:clamp(2.2rem,7vw,4rem); color:var(--frost); letter-spacing:-.03em}
.closer p{color:var(--steel); font-family:var(--f-mono); font-size:12px; margin-top:16px}
.closer .cta-row{justify-content:center}

/* ---- footer ---- */
footer{position:relative; z-index:2; border-top:1px solid var(--slate)}
.foot{max-width:1080px; margin:0 auto; padding-block:34px;
  padding-left:calc(var(--gut-l) + var(--rail)); padding-right:var(--gut-r);
  display:flex; flex-wrap:wrap; gap:26px 44px; justify-content:space-between;
  font-family:var(--f-mono); font-size:11px; color:var(--steel); line-height:2}
.foot b{color:var(--frost); font-weight:600; letter-spacing:.14em; display:block; margin-bottom:6px}
.foot a{color:var(--steel); text-decoration:none}
.foot a:hover{color:var(--cyan)}

.skip{position:absolute;left:16px;top:-60px;z-index:10;padding:12px;background:var(--cyan);color:var(--ink)}
.skip:focus{top:10px}
.site-nav{position:relative;z-index:3;display:flex;justify-content:flex-end;gap:26px;padding-top:24px;padding-bottom:8px;font:12px var(--f-mono)}
.site-nav a{color:var(--steel);text-decoration:none;padding-block:10px}
.site-nav a:hover,.site-nav a:focus-visible{color:var(--cyan)}
.wordmark img{display:block;width:min(100%,650px);height:auto;filter:brightness(0) invert(1)}
.stage-fallback{z-index:1;max-width:650px;margin:auto;padding:48px 24px}
.stage-fallback h2{font:800 clamp(28px,5vw,48px)/1.05 var(--f-display);letter-spacing:-.04em}
.stage-fallback p{margin:20px 0 24px}
.stage canvas{pointer-events:none}
.arcade-preview{display:block;position:relative;margin-top:22px;border:1px solid var(--slate);overflow:hidden;border-radius:4px}
.arcade-preview img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.arcade-preview span{position:absolute;bottom:18px;left:18px;background:var(--ink);color:var(--frost);padding:10px 14px;font:11px var(--f-mono)}
.level-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
.level-links a{font:11px/1.5 var(--f-mono);padding:16px 12px;border:1px solid var(--slate);color:var(--frost);text-decoration:none}
.level-links a:hover,.level-links a:focus-visible{border-color:var(--cyan);color:var(--cyan)}
@media(max-width:700px){.site-nav{justify-content:flex-start;gap:18px;flex-wrap:wrap}.level-links{grid-template-columns:repeat(2,minmax(0,1fr))}.s3{display:none}.stage{aspect-ratio:auto;min-height:340px}.stage-fallback{padding:36px 18px}}
@media(max-width:380px){.pass-top{flex-wrap:wrap;gap:20px}.date{text-align:left}}
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }