/* Kangaroo: the page is a road, every fact is a sign on it. Flat colours, Overpass only. */
:root{
  --earth:#6E2E17;--earth-hi:#8A3D1E;--earth-lo:#4F200F;
  --ochre:#D9952F;--ink:#17110D;--chalk:#F0E4CC;
  --asphalt:#2A2421;--guide:#23503C;--guide-lo:#1B4231;--signred:#B5321E;
  --sky:#E0B27A;--dust:#C27A45;--steel:#8E8478;
  --gut:clamp(16px,4.4vw,64px);
}
*{margin:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{background:var(--earth);color:var(--chalk);font:600 17px/1.5 Overpass,system-ui,sans-serif;min-height:100vh;overflow-x:hidden}
img{max-width:100%}
a{color:inherit}
p a,.lk{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
a,button,[role=button],[onclick],summary,label,.ca,select,input[type=range],input[type=file]{cursor:pointer}
button{font:inherit;color:inherit;background:none;border:0}
.num{font-variant-numeric:tabular-nums;font-weight:800}
.mono{font-family:'Overpass Mono',ui-monospace,monospace;font-weight:500}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--ochre);outline-offset:3px}
[hidden]{display:none!important}

/* ---------- sign-construction buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 22px;border-radius:7px;white-space:nowrap;
  font:800 16px/1 Overpass,sans-serif;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  border:2.5px solid currentColor;box-shadow:0 0 0 3px var(--bgc);transition:background-color .15s,color .15s}
.btn-warn{--bgc:var(--ochre);background:var(--ochre);color:var(--ink)}
.btn-guide{--bgc:var(--guide);background:var(--guide);color:var(--chalk)}
.btn-reg{--bgc:var(--chalk);background:var(--chalk);color:var(--ink)}
.btn:hover:not(:disabled){background:var(--ink);color:var(--bgc)}
.btn:disabled,.btn.busy{opacity:.6;cursor:not-allowed}
.btn.sq{width:52px;padding:0}
.btn svg{width:18px;height:18px;flex:none;fill:currentColor}
.btn.sm{height:40px;font-size:13px;padding:0 14px}
.btn.sm.sq{width:40px}

.ca{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 5px 0 12px;border-radius:7px;background:var(--chalk);
  border:2px solid var(--ink);color:var(--ink);font:500 14px 'Overpass Mono',monospace;max-width:100%;min-width:0}
.ca b{font:900 13px Overpass;letter-spacing:.1em}
.ca .mono{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ca button{height:34px;min-width:44px;border-radius:5px;background:var(--ink);color:var(--chalk);font:800 12px Overpass;letter-spacing:.08em;padding:0 10px;flex:none}
.ca button:disabled{opacity:.45;cursor:default}
.ca.copied button,[data-copy].copied{background:var(--guide);color:var(--chalk)}
.demo{display:inline-block;background:var(--ochre);color:var(--ink);font:900 12px/1 Overpass;letter-spacing:.14em;padding:5px 8px 3px;border-radius:4px;border:2px solid var(--ink);vertical-align:middle}
.live{display:inline-block;background:var(--ochre);color:var(--ink);font:900 11px/1 Overpass;letter-spacing:.14em;padding:4px 7px 3px;border-radius:3px}

/* ---------- header ---------- */
.nav{position:sticky;top:0;z-index:30;height:76px;display:flex;align-items:center;gap:22px;padding:0 var(--gut);background:var(--earth-lo);color:var(--chalk);border-bottom:3px solid var(--earth-hi)}
body.home .nav{position:absolute;left:0;right:0;background:none;border:0;color:var(--ink)}
.nav .brand{display:flex;align-items:center;gap:10px;font:900 22px Overpass;letter-spacing:.02em;text-decoration:none;flex:none}
.nav .brand img{width:38px;height:38px}
.nav .links{display:flex;gap:24px;font:700 15px Overpass}
.nav .links a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.nav .links a:hover,.nav .links a[aria-current]{border-color:currentColor}
.nav .sp{flex:1}
.nav .btn{height:42px;font-size:14px;padding:0 16px}.nav .btn.sq{width:42px;padding:0}
.menu-b{display:none;width:42px;height:42px;border-radius:7px;background:var(--chalk);border:2.5px solid var(--ink);flex-direction:column;gap:4px;align-items:center;justify-content:center}
.menu-b span{display:block;width:18px;height:2.5px;background:var(--ink)}
.drawer{position:fixed;inset:0;z-index:50;background:var(--earth-lo);padding:84px 24px 24px;display:flex;flex-direction:column;gap:6px;overflow:auto}
.drawer>a{font:900 30px/1.2 Overpass;text-decoration:none;padding:8px 0;border-bottom:2px dashed rgba(240,228,204,.3)}
.drawer .ca{margin-top:18px;align-self:flex-start}
.dlg-x{position:absolute;right:16px;top:16px;width:48px;height:48px;border-radius:7px;background:var(--chalk);color:var(--ink);font:900 30px/1 Overpass}
@media (max-width:1180px){.nav .links{display:none}.menu-b{display:flex}}
@media (max-width:860px){.nav-ca{display:none}}
@media (max-width:560px){.nav{gap:8px;height:64px}.nav .brand span{display:none}.nav .btn{font-size:13px;padding:0 12px}.nav .btn.sq{padding:0}}
@media (max-width:440px){.nav [data-wallet]{display:none}}
.drawer [data-wallet]{align-self:flex-start;margin-top:14px}

/* ---------- section scaffolding ---------- */
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--gut) 0 calc(var(--gut) + 48px);position:relative}
.sec-t{font:900 clamp(40px,5vw,72px)/.9 Overpass;letter-spacing:-.01em;text-transform:uppercase}
.sec-t.guide{text-transform:none;font-weight:800}
.sec-s{font:600 clamp(17px,1.5vw,21px)/1.35 Overpass;max-width:540px;margin-top:16px;opacity:.94}
.road-line{position:absolute;left:calc(var(--gut) + 6px);top:0;bottom:0;width:8px;background:repeating-linear-gradient(180deg,var(--chalk) 0 54px,transparent 54px 108px);opacity:.9;pointer-events:none}

/* ---------- HERO: the road ---------- */
.hero{position:relative;height:100svh;min-height:640px;max-height:1100px;overflow:hidden;background:var(--sky) url(/assets/art/hero-road.webp) center 38%/cover no-repeat}
.sky{position:absolute;left:0;right:0;top:clamp(92px,11vh,112px);text-align:center;color:var(--ink);padding:0 16px;z-index:2}
.sky .lede{font:800 clamp(24px,2.6vw,36px)/1.1 Overpass;letter-spacing:-.005em}
.sky .acts{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.sky .nums{margin-top:22px;font:600 15px Overpass;display:flex;gap:10px 28px;justify-content:center;flex-wrap:wrap}
.sky .nums b{font-weight:900;font-size:19px}
.sky .hero-ca{display:none;margin-top:16px}
.paint{position:absolute;left:50%;bottom:6px;width:1000px;margin-left:-500px;perspective:1100px;perspective-origin:50% -40%;text-align:center;pointer-events:none}
.paint h1{font:900 176px/.8 Overpass;letter-spacing:.03em;color:var(--chalk);opacity:.94;text-transform:uppercase;
  transform:rotateX(50deg) scaleY(1.7);transform-origin:50% 100%}
.sign{position:absolute;display:block;text-decoration:none}
.sign>img.post{display:block;width:100%;height:auto}
.sign>img.face{position:absolute;left:-1.5%;top:-.5%;width:103%;height:auto}
.plate{position:absolute;left:16.1%;width:67.7%;top:57.3%;height:10.3%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--ink);line-height:1;text-align:center;container-type:inline-size}
.plate .t{font:900 7.4cqw/1 Overpass;letter-spacing:.04em;white-space:nowrap;margin-top:.25em}
.plate .n{font:900 11.6cqw/1 Overpass;margin-top:.1em}
.plate .n:empty{display:none}
.hsign{right:max(16px,calc(50% - 630px));top:calc(29% + 10px);width:236px;aspect-ratio:640/1230}
@media (max-width:1180px){.hsign{width:180px;right:24px;top:auto;bottom:220px}}
@media (max-width:760px){
  .hero{height:auto;min-height:100svh;max-height:none;background-size:auto 140%;background-position:60% 0}
  .sky{top:78px}
  .sky .acts{gap:12px}.sky .acts .btn{height:46px;font-size:14px;padding:0 16px}
  .sky .hero-ca{display:flex;justify-content:center}
  .hsign{width:150px;right:12px;bottom:calc(22vw + 40px)}
  .paint{width:100%;left:0;margin:0;bottom:4px;perspective:600px}
  .paint h1{font-size:17.6vw;letter-spacing:0;transform:rotateX(42deg) scaleY(1.45)}
}
@media (max-width:760px) and (max-height:700px){.hsign{display:none}}

/* ---------- SCENE 2: the pouch ---------- */
.s-pouch{position:relative;background:linear-gradient(180deg,var(--earth) 0 46%,#763219 46% 47.2%,var(--earth) 47.2% 78%,var(--earth-hi) 78% 79%,var(--earth) 79%);padding:84px 0 96px}
.pouch-grid{display:grid;grid-template-columns:minmax(0,780px) minmax(260px,400px);gap:48px 68px;align-items:start;margin-top:56px}
.mama{position:relative;display:block;text-decoration:none;background:var(--guide);border-radius:16px;box-shadow:inset 0 0 0 7px var(--guide),inset 0 0 0 10px var(--chalk);padding:34px 40px;min-height:520px;color:var(--chalk);overflow:hidden}
.mama .head{display:flex;gap:20px;align-items:center;padding-right:170px}
.mama .head img{width:92px;height:92px;border-radius:8px;border:3px solid var(--chalk);flex:none;object-fit:cover;background:var(--guide-lo)}
.mama .tk{font:900 46px/1 Overpass;overflow-wrap:anywhere}
.mama .meta{font:600 15px/1.35 Overpass;opacity:.88;margin-top:6px}
.mama .fee{position:absolute;right:40px;top:36px;text-align:right}
.mama .fee .num{font-size:34px;display:block;font-weight:900}
.mama .fee span{font:700 13px Overpass;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.milk{position:absolute;left:50%;top:150px;width:6px;height:112px;overflow:hidden;margin-left:-3px}
.milk::before{content:"";position:absolute;left:0;right:0;top:-26px;bottom:0;background:repeating-linear-gradient(180deg,var(--chalk) 0 14px,transparent 14px 26px);animation:milk 1.2s linear infinite}
.milk.pulse::before{animation-duration:.35s}
.milk.off::before{animation:none;opacity:.35}
@keyframes milk{to{transform:translateY(26px)}}
.pocket{position:absolute;left:40px;right:40px;bottom:34px;height:250px;background:var(--guide-lo);border-radius:6px 6px 40px 40px;border:3px solid var(--ochre);border-top:8px solid var(--ochre)}
.pocket-in{position:absolute;inset:0;overflow:hidden;border-radius:0 0 36px 36px}
.joey{position:absolute;left:24px;right:24px;top:-6px;min-height:226px;background:var(--ochre);color:var(--ink);border-radius:10px;
  box-shadow:inset 0 0 0 5px var(--ochre),inset 0 0 0 7.5px var(--ink);padding:22px 26px;display:grid;grid-template-columns:76px 1fr auto;gap:6px 18px;align-content:start;
  transition:transform .42s cubic-bezier(.3,1.35,.5,1)}
.joey img{width:76px;height:76px;border-radius:6px;border:2.5px solid var(--ink);grid-row:span 2;object-fit:cover;background:var(--sky)}
.joey .tk{font:900 34px/1 Overpass}
.joey .meta{font:700 14px/1.35 Overpass;letter-spacing:.03em}
.joey .left{text-align:right;font:900 26px/1.1 Overpass}
.joey .left small{display:block;font:700 12px Overpass;letter-spacing:.08em}
.joey .milkline{grid-column:2/4}
.trip{grid-column:1/-1;margin-top:12px}
.trip .bar{position:relative;height:26px;background:var(--asphalt);border-radius:3px;overflow:hidden}
.trip .bar::before{content:"";position:absolute;left:0;right:0;top:11px;height:4px;background:repeating-linear-gradient(90deg,var(--chalk) 0 22px,transparent 22px 40px)}
.trip .bar i{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--p,0));transition:transform .6s ease}
.trip .bar b{position:absolute;top:0;bottom:0;left:0;width:5px;background:var(--chalk);transform:translateX(var(--px,0));transition:transform .6s ease}
.trip .lab{display:flex;justify-content:space-between;font:800 13px Overpass;letter-spacing:.06em;margin-top:8px;text-transform:uppercase;gap:8px}
/* the jump: the joey rises out of the pocket and docks into its own guide sign */
.mama.jump .joey{transform:translateY(-115%)}
.jsign{position:absolute;right:40px;bottom:120px;width:min(330px,60%);background:var(--guide);color:var(--chalk);border-radius:10px;box-shadow:inset 0 0 0 5px var(--guide),inset 0 0 0 8px var(--chalk);
  padding:18px 22px;transform:translateX(130%);transition:transform .45s cubic-bezier(.3,1.2,.5,1);z-index:3}
.mama.jump .jsign{transform:none}
.jsign .t{font:900 22px/1.05 Overpass;text-transform:uppercase}
.jsign .s{font:700 14px/1.3 Overpass;margin-top:6px}
.jsign .meter{margin-top:10px}
.uturn{position:absolute;right:120px;top:120px;width:120px;height:120px;border:6px dashed var(--chalk);border-left:0;border-bottom:0;border-radius:0 60px 0 0;opacity:0;transition:opacity .3s}
.mama.jump .uturn{opacity:.9}
.pouch-free{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font:900 26px/1.1 Overpass;letter-spacing:.08em;color:var(--ochre);padding:0 24px}
.legend{display:grid;gap:26px;padding-top:30px}
.legend div{display:grid;grid-template-columns:36px 1fr;gap:14px;font:700 19px/1.3 Overpass}
.legend i{width:26px;height:26px;margin:4px;background:var(--ochre);border:2px solid var(--ink);transform:rotate(45deg);border-radius:3px}
.legend .ln{display:block;margin-top:6px;padding-left:50px}
.legend .ln a{font:800 15px Overpass;letter-spacing:.06em;text-transform:uppercase}
.split{font:700 14px/1.4 Overpass;opacity:.9}
@media (max-width:1000px){.pouch-grid{grid-template-columns:1fr}.legend{padding-top:0}}
@media (max-width:640px){
  .mama{padding:24px 20px;min-height:0;padding-bottom:340px}
  .mama .head{padding-right:0;gap:14px}.mama .head img{width:64px;height:64px}.mama .tk{font-size:32px}
  .mama .fee{position:static;text-align:left;margin-top:16px}.mama .fee .num{display:inline;font-size:26px;margin-right:8px}
  .milk{top:auto;bottom:288px;height:40px}
  .trip .lab{font-size:11px;letter-spacing:.02em}
  .pocket{left:14px;right:14px;bottom:20px;height:256px}
  .joey{left:10px;right:10px;padding:16px;grid-template-columns:56px 1fr;gap:4px 12px;min-height:236px}
  .joey img{width:56px;height:56px}.joey .tk{font-size:26px}
  .joey .left{grid-column:1/-1;text-align:left;font-size:20px;display:flex;gap:8px;align-items:baseline}
  .joey .left small{display:inline}
  .joey .milkline{grid-column:1/-1}
  .jsign{right:14px;bottom:140px;width:calc(100% - 28px)}
  .uturn{display:none}
}

/* ---------- SCENE 3: distance to migration (light) ---------- */
.s-dist{position:relative;background:var(--sky) url(/assets/art/scene-noon.webp) center bottom/max(1440px,100%) auto no-repeat;color:var(--ink);padding:84px 0 0;min-height:900px}
.s-dist .road-line{background:repeating-linear-gradient(180deg,var(--ink) 0 54px,transparent 54px 108px);opacity:.25}
.dist-grid{display:grid;grid-template-columns:1fr 400px;gap:40px;align-items:start}
.dsign{position:relative;width:400px;max-width:100%;aspect-ratio:640/1451;container-type:inline-size;margin-top:12px}
.dsign img{display:block;width:100%;height:auto}
.dface{position:absolute;left:0;top:0;width:100%;height:67.8%;padding:8.5cqw 8.5cqw 0;color:var(--chalk);overflow:hidden}
.dface .hd{font:800 3.75cqw Overpass;letter-spacing:.14em;text-transform:uppercase;display:flex;justify-content:space-between;border-bottom:2.5px solid var(--chalk);padding-bottom:2.5cqw;margin-bottom:1cqw}
.drow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:2.6cqw 0;border-bottom:1px solid rgba(240,228,204,.35);text-decoration:none}
.drow b{font:700 6.6cqw/1.05 Overpass;display:block}
.drow small{display:block;font:600 3.3cqw Overpass;opacity:.85}
.drow .num{font-size:7.5cqw;font-weight:900}
.drow.invite b{color:var(--ochre)}
a.drow:hover b{text-decoration:underline;text-decoration-thickness:2px}
.dist-note{margin-top:28px;max-width:440px;font:700 17px/1.4 Overpass}
@media (max-width:900px){.s-dist{min-height:0;padding-bottom:min(42vw,360px);background-size:max(900px,100%) auto}.dist-grid{grid-template-columns:1fr}.dsign{width:min(400px,100%);margin:0 auto}}

/* ---------- SCENE 4: grown joeys pay back ---------- */
.s-thanks{position:relative;background:var(--dust) url(/assets/art/scene-dusk.webp) center bottom/max(1440px,100%) auto no-repeat;color:var(--ink);padding:84px 0 0;min-height:880px}
.s-thanks .road-line{background:repeating-linear-gradient(180deg,var(--ink) 0 54px,transparent 54px 108px);opacity:.25}
.thanks-grid{display:grid;grid-template-columns:minmax(0,760px) 200px minmax(160px,220px);gap:36px;align-items:start;margin-top:40px}
.gsign{position:relative;width:100%;aspect-ratio:1000/698;container-type:inline-size}
.gsign>img{display:block;width:100%;height:auto}
.gface{position:absolute;left:0;top:0;width:100%;height:49.6%;padding:5.2cqw 7cqw;color:var(--chalk);display:flex;flex-direction:column;justify-content:center}
.gface .big{font:900 7.6cqw/.95 Overpass;letter-spacing:.01em;text-transform:uppercase;overflow-wrap:anywhere}
.gface .sub{font:700 2.6cqw/1.3 Overpass;margin-top:1.6cqw}
.meters{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:2.6cqw}
.meter div,.meter{font:800 12px Overpass;letter-spacing:.08em;text-transform:uppercase}
.mbar{display:block;height:12px;background:var(--guide-lo);border:2px solid var(--chalk);border-radius:2px;margin:6px 0 4px;position:relative;overflow:hidden}
.mbar i{position:absolute;inset:0;background:var(--chalk);transform-origin:0 50%;transform:scaleX(var(--p,0));transition:transform .6s ease}
.meter .num{font-size:15px}
.dsmall{position:relative;width:200px;aspect-ratio:640/1230;container-type:inline-size}
.dsmall img{display:block;width:100%;height:auto}
.dia-t{position:absolute;left:0;right:0;top:15%;height:22%;display:grid;place-items:center;text-align:center;font:900 9.5cqw/1 Overpass;letter-spacing:.04em;color:var(--ink)}
.fell{font:700 17px/1.35 Overpass;padding-top:30px}
.tfeed{max-width:1440px;margin:0 auto;padding:40px var(--gut) 0 calc(var(--gut) + 48px);position:relative;z-index:2}
.tlog{display:grid;gap:10px;max-width:760px}
.trow{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;background:var(--chalk);color:var(--ink);border:2.5px solid var(--ink);border-radius:8px;padding:10px 14px;text-decoration:none}
.trow img{width:44px;height:44px;border-radius:5px;border:2px solid var(--ink);object-fit:cover}
.trow b{font:800 16px/1.2 Overpass}
.trow small{display:block;font:600 13px Overpass;opacity:.8}
.trow .num{font-size:16px;white-space:nowrap}
.trow.invite{background:var(--ochre)}
.s-thanks .spacer{height:min(30vw,400px)}
@media (max-width:1100px){.thanks-grid{grid-template-columns:1fr 200px}.thanks-grid .fell{grid-column:2}}
@media (max-width:760px){
  .s-thanks{min-height:0;background-size:max(900px,100%) auto}
  .thanks-grid{grid-template-columns:1fr;gap:20px}
  .gface .sub{font-size:3.6cqw}
  .meters.out{display:grid}
  .gface .meters{display:none}
  .dsmall{width:150px}
  .thanks-grid .fell{grid-column:auto;padding-top:0}
  .branch{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center}
}
.meters.out{display:none;color:var(--ink);margin-top:0}
.meters.out .mbar{background:var(--sky);border-color:var(--ink)}
.meters.out .mbar i{background:var(--ink)}
@media (max-width:760px){.meters.out{display:grid}}
.branch{display:contents}
@media (max-width:760px){.branch{display:grid}}

/* ---------- SCENE 5: rules of the road ---------- */
.s-rules{position:relative;background:var(--asphalt);border-top:10px solid var(--chalk);border-bottom:10px solid var(--chalk);padding:72px 0 80px}
.limits{display:flex;gap:46px;margin-top:40px;flex-wrap:wrap}
.lim{width:190px;text-align:center}
.lim .ls{position:relative;width:100%;aspect-ratio:190/280;overflow:hidden;container-type:inline-size}
.lim .ls img{display:block;width:100%;height:auto}
.lim .v{position:absolute;left:0;right:0;top:0;height:66%;display:flex;align-items:center;justify-content:center;color:var(--ink);font:900 29.5cqw/1 Overpass;letter-spacing:-.02em}
.lim .v small{font-size:13.6cqw;margin:7cqw 0 0 1cqw}
.lim .v.long{font-size:20cqw}
.lim p{font:700 15px/1.3 Overpass;margin-top:14px}
.rules-note{margin-top:30px;font:600 15px/1.4 Overpass;opacity:.85;max-width:720px}
@media (max-width:760px){.limits{gap:22px 14px;justify-content:space-between}.lim{width:calc(50% - 8px);max-width:190px}}

/* ---------- ENDING ---------- */
.s-end{position:relative;background:var(--earth-lo) url(/assets/art/scene-end.webp) center bottom/max(1440px,100%) auto no-repeat;text-align:center;padding:96px 16px 0;min-height:560px}
.s-end h2{font:900 clamp(38px,4.6vw,64px)/.95 Overpass;text-transform:uppercase}
.s-end .acts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px;align-items:center}
.s-end .fine{margin-top:22px;font:600 14px Overpass;opacity:.8}
.s-end .fine a{margin:0 8px}
.s-end .spacer{height:min(26vw,300px)}

/* ---------- inner pages ---------- */
.page{max-width:1240px;margin:0 auto;padding:56px var(--gut) 96px}
.page h1{font:900 clamp(38px,5vw,64px)/.95 Overpass;text-transform:uppercase}
.page .lead{font:600 19px/1.4 Overpass;max-width:640px;margin-top:14px;opacity:.94}
.panel{background:var(--guide);border-radius:14px;box-shadow:inset 0 0 0 6px var(--guide),inset 0 0 0 9px var(--chalk);padding:30px 32px;color:var(--chalk)}
.panel.warn{background:var(--ochre);color:var(--ink);box-shadow:inset 0 0 0 6px var(--ochre),inset 0 0 0 8.5px var(--ink)}
.panel.chalk{background:var(--chalk);color:var(--ink);box-shadow:inset 0 0 0 6px var(--chalk),inset 0 0 0 8.5px var(--ink)}
.panel h2,.panel h3{font:900 24px/1.1 Overpass;text-transform:uppercase;letter-spacing:.02em;margin-bottom:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:36px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.grid2,.grid3{grid-template-columns:1fr}}
.kv{display:grid;gap:0}
.kv>div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid rgba(240,228,204,.3);font:600 15px/1.35 Overpass}
.panel.warn .kv>div,.panel.chalk .kv>div{border-color:rgba(23,17,13,.25)}
.kv .lab{opacity:.85}
.kv .num{text-align:right}
.field{display:grid;gap:6px;margin-bottom:16px}
.field>span{font:800 13px Overpass;letter-spacing:.08em;text-transform:uppercase}
.field input,.field textarea,.field select{font:600 17px Overpass;color:var(--ink);background:var(--chalk);border:2.5px solid var(--ink);border-radius:7px;padding:11px 12px;width:100%}
.field textarea{min-height:76px;resize:vertical}
.field small{font:600 13px/1.35 Overpass;opacity:.85}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.row2{grid-template-columns:1fr}}
.pic{display:flex;gap:14px;align-items:center;background:var(--guide);color:var(--chalk);border-radius:9px;box-shadow:inset 0 0 0 4px var(--guide),inset 0 0 0 6.5px var(--chalk),0 0 0 2.5px var(--ink);padding:14px 16px;font:800 13px/1.3 Overpass;letter-spacing:.06em;text-transform:uppercase;transition:background-color .15s}
.pic::before{content:"";flex:none;width:44px;height:44px;border-radius:5px;border:2.5px solid var(--chalk);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v14M5 10l7-7 7 7M4 21h16' fill='none' stroke='%23F0E4CC' stroke-width='3' stroke-linecap='square'/%3E%3C/svg%3E") center/24px no-repeat}
.pic:has(img:not([hidden]))::before{display:none}
.pic:hover{background:var(--guide-lo);box-shadow:inset 0 0 0 4px var(--guide-lo),inset 0 0 0 6.5px var(--chalk),0 0 0 2.5px var(--ink)}
.pic:focus-within{outline:3px solid var(--ink);outline-offset:3px}
.pic img{width:64px;height:64px;object-fit:cover;border-radius:6px;border:2.5px solid var(--chalk)}
.pic input{position:absolute;opacity:0;width:1px;height:1px}
.zv{font:900 22px Overpass}
/* range = a stretch of road, thumb = a warning diamond */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:36px;background:transparent;margin:2px 0}
input[type=range]::-webkit-slider-runnable-track{height:16px;border-radius:3px;border:2px solid var(--ink);background:repeating-linear-gradient(90deg,var(--chalk) 0 14px,transparent 14px 26px) center/100% 2px no-repeat,var(--asphalt)}
input[type=range]::-moz-range-track{height:12px;border-radius:3px;border:2px solid var(--ink);background:repeating-linear-gradient(90deg,var(--chalk) 0 14px,transparent 14px 26px) center/100% 2px no-repeat,var(--asphalt)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;margin-top:-11px;border:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M17 2 32 17 17 32 2 17Z' fill='%23D9952F' stroke='%2317110D' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='M17 7 27 17 17 27 7 17Z' fill='none' stroke='%2317110D' stroke-width='1.4'/%3E%3C/svg%3E") center/100% no-repeat;transition:transform .12s}
input[type=range]::-moz-range-thumb{width:34px;height:34px;border:0;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M17 2 32 17 17 32 2 17Z' fill='%23D9952F' stroke='%2317110D' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='M17 7 27 17 17 27 7 17Z' fill='none' stroke='%2317110D' stroke-width='1.4'/%3E%3C/svg%3E") center/100% no-repeat}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12)}
input[type=range]:focus-visible{outline-offset:2px}
.acts-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.note{font:600 14px/1.45 Overpass;opacity:.9;margin-top:12px}
.empty{font:700 17px/1.4 Overpass;padding:20px;border:2.5px dashed currentColor;border-radius:10px;text-align:center}
.coinhead{display:flex;gap:20px;align-items:center;margin-top:24px}
.coinhead img{width:110px;height:110px;border-radius:10px;border:3px solid var(--chalk);object-fit:cover;background:var(--guide-lo)}
.coinhead .tk{font:900 clamp(34px,5vw,56px)/1 Overpass;overflow-wrap:anywhere}
.coinhead .nm{font:700 17px Overpass;opacity:.9}
.badge{display:inline-block;font:900 12px/1 Overpass;letter-spacing:.12em;text-transform:uppercase;padding:6px 8px 4px;border-radius:4px;background:var(--chalk);color:var(--ink);border:2px solid var(--ink);margin-right:6px}
.badge.g{background:var(--guide);color:var(--chalk);border-color:var(--chalk)}
.badge.o{background:var(--ochre)}
.carow{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;font:700 14px Overpass}
.carow .lab{font:900 13px Overpass;letter-spacing:.1em}
.cachip{display:inline-flex;gap:8px;align-items:center;height:34px;padding:0 4px 0 10px;border-radius:6px;background:var(--chalk);color:var(--ink);border:2px solid var(--ink);font:500 13px 'Overpass Mono',monospace}
.cachip .cl{font:800 11px Overpass;letter-spacing:.08em;background:var(--ink);color:var(--chalk);border-radius:4px;padding:5px 7px 4px}
.cachip.copied .cl{background:var(--guide)}
.list{display:grid;gap:12px;margin-top:16px}
.lrow{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;padding:12px 14px;border-radius:9px;background:var(--earth-lo);text-decoration:none;color:var(--chalk);border:2px solid var(--earth-hi)}
.panel .lrow{background:var(--guide-lo);border-color:rgba(240,228,204,.25)}
.lrow img{width:52px;height:52px;border-radius:6px;object-fit:cover;border:2px solid var(--chalk)}
.lrow b{font:800 17px/1.2 Overpass}
.lrow small{display:block;font:600 13px/1.3 Overpass;opacity:.85}
.lrow .num{font-size:16px;text-align:right;white-space:nowrap}
a.lrow:hover{border-color:var(--ochre)}
.steps{counter-reset:s;display:grid;gap:16px;margin-top:10px}
.steps li{list-style:none;display:grid;grid-template-columns:38px 1fr;gap:12px;font:600 16px/1.4 Overpass}
.steps li::before{counter-increment:s;content:counter(s);width:30px;height:30px;margin:2px 4px;transform:rotate(45deg);background:var(--ochre);border:2px solid var(--ink);border-radius:3px;display:grid;place-items:center;font:900 14px Overpass;color:var(--ink)}
.steps li>span{display:block}
.killer{font:900 clamp(30px,4.4vw,58px)/1 Overpass;margin-top:22px}
.killer .num{font-weight:900;color:var(--ochre)}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}
.stat{background:var(--chalk);color:var(--ink);border:2.5px solid var(--ink);border-radius:9px;padding:16px 18px}
.stat b{display:block;font:900 30px/1 Overpass;font-variant-numeric:tabular-nums}
.stat span{font:800 12px Overpass;letter-spacing:.08em;text-transform:uppercase}
@media (max-width:900px){.statgrid{grid-template-columns:1fr 1fr}}
.docs h2{font:900 30px/1.1 Overpass;text-transform:uppercase;margin:44px 0 12px}
.docs p,.docs li{font:600 17px/1.55 Overpass;max-width:760px}
.docs ul{padding-left:22px;display:grid;gap:6px}
.docs .panel{margin-top:16px}

/* ---------- toasts + modal ---------- */
.tstack{position:fixed;right:16px;bottom:16px;z-index:60;display:grid;gap:10px;width:min(420px,calc(100vw - 32px))}
.toast{display:grid;grid-template-columns:1fr auto;gap:4px 10px;background:var(--chalk);color:var(--ink);border:2.5px solid var(--ink);border-radius:8px;padding:12px 14px;font:700 15px/1.35 Overpass}
.toast.err{background:var(--ochre)}
.toast.ok{background:var(--guide);color:var(--chalk);border-color:var(--chalk)}
.toast a{grid-column:1;font:800 13px Overpass}
.toast .tx{grid-row:1;grid-column:2;font:900 22px/1 Overpass;width:32px;height:32px}
.modal{position:fixed;inset:0;z-index:70;background:rgba(23,17,13,.72);display:grid;place-items:center;padding:16px}
.modal .box{position:relative;width:min(460px,100%);max-height:90vh;overflow:auto;background:var(--chalk);color:var(--ink);border-radius:12px;border:3px solid var(--ink);padding:26px 22px 22px}
.modal h3{font:900 22px Overpass;text-transform:uppercase;margin-bottom:12px}
.modal .dlg-x{top:10px;right:10px;width:40px;height:40px;background:var(--ink);color:var(--chalk)}
.wlist{display:grid;gap:10px}
.wlist button{display:flex;gap:12px;align-items:center;padding:12px;border:2.5px solid var(--ink);border-radius:8px;font:800 16px Overpass;text-align:left}
.wlist button:hover{background:var(--ochre)}
.wlist img{width:28px;height:28px}

/* ---------- footer (inner pages) ---------- */
.foot{background:var(--earth-lo);border-top:10px solid var(--asphalt);padding:34px var(--gut) 40px}
.foot-in{max-width:1240px;margin:0 auto;display:flex;gap:18px 32px;align-items:center;flex-wrap:wrap}
.foot .brand{display:flex;gap:10px;align-items:center;font:900 20px Overpass;text-decoration:none}
.foot nav{display:flex;gap:18px;flex-wrap:wrap;font:700 15px Overpass}
.foot nav a{text-decoration:none}
.foot nav a:hover{text-decoration:underline}
.foot .fine{margin-left:auto;font:600 13px Overpass;opacity:.8}
.foot .fine a{text-decoration:underline}

/* ---------- 404 ---------- */
.lost{min-height:calc(100vh - 76px);display:grid;place-items:center;text-align:center;padding:40px 16px}
.lost img{width:min(600px,100%);height:auto;border-radius:10px;border:3px solid var(--chalk)}
.lost h1{font:900 clamp(34px,5vw,56px)/1 Overpass;text-transform:uppercase;margin:26px 0 22px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
.drow.ask small{color:var(--ochre);opacity:1}

@media (max-width:560px){
  .trow{grid-template-columns:44px 1fr;row-gap:2px}.trow img{grid-row:span 2}.trow .num{grid-column:2;font-size:14px}
  .s-end{background-size:max(900px,100%) auto}.s-end .spacer{height:200px}
}
/* wallet picker (kit/wallet.js dialog) */
dialog.dlg{border:3px solid var(--ink);border-radius:12px;background:var(--chalk);color:var(--ink);padding:26px 22px 22px;width:min(440px,calc(100vw - 32px));max-height:90vh}
dialog.dlg::backdrop{background:rgba(23,17,13,.72)}
dialog.dlg h2{font:900 22px Overpass;text-transform:uppercase;margin-bottom:14px;padding-right:44px}
dialog.dlg .dlg-x{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:7px;background:var(--ink);color:var(--chalk);font:900 26px/1 Overpass}
.wp-list{display:grid;gap:10px}
.wp-item{display:flex;gap:12px;align-items:center;padding:12px;border:2.5px solid var(--ink);border-radius:8px;font:800 16px Overpass;text-align:left;background:var(--chalk)}
.wp-item:hover{background:var(--ochre)}
.wp-item img{width:28px;height:28px}
.wp-dot{width:28px;height:28px;border-radius:5px;background:var(--guide);display:inline-block}
.wp-get{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;font:700 14px Overpass}
.wp-get a{text-decoration:underline;text-decoration-thickness:2px}
.wp-cur,.wp-none{font:600 15px Overpass;margin-bottom:12px}
.wp-err{margin-top:10px;font:700 14px Overpass;color:var(--signred)}
.btn.ghost{--bgc:var(--chalk);background:var(--chalk);color:var(--ink);margin-top:14px;height:44px}
@media (max-width:760px){
  .sky .nums{display:inline-flex;background:var(--chalk);border:2px solid var(--ink);border-radius:7px;padding:7px 12px 5px;gap:4px 14px;font-size:13px;margin-top:16px}
  .sky .nums b{font-size:16px}
}
@media (max-width:360px){.sky .lede{font-size:21px}.sky .acts .btn{height:42px;font-size:12px;padding:0 12px}}

.s-end .fine a{display:inline-block;padding:9px 4px}
.legend .ln a{display:inline-block;padding:9px 0}
.foot nav a{display:inline-block;padding:9px 0}
.foot .fine a,.dist-note a,.page p a,.carow .lk{display:inline-block;padding:7px 0}
.cachip{height:36px}
@media (max-width:760px) and (max-height:760px){.hsign{display:none}}
@media (max-height:500px){.hsign{display:none}.hero{min-height:560px}}

.dfoot{position:absolute;left:8.5cqw;right:8.5cqw;bottom:6cqw;border-top:2.5px solid var(--chalk);padding-top:2.5cqw;display:grid;gap:1.6cqw}
.dfoot div{display:flex;justify-content:space-between;font:800 3.6cqw Overpass;letter-spacing:.1em;text-transform:uppercase}
.dfoot b{font:900 5cqw/1 Overpass;letter-spacing:0}

.panel.warn .killer .num{color:var(--ink)}

/* How it works dialog */
.howto { width: min(1280px, calc(100vw - 32px)); max-width: none; padding: 0; border: 0; border-radius: 10px; background: var(--earth-lo); color: var(--chalk); box-shadow: inset 0 0 0 3px var(--chalk); }
.howto::backdrop { background: rgba(23, 17, 13, .86); }
.howto-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 20px; margin: 0; }
.howto-bar h2 { margin: 0; font: 900 26px/1.1 Overpass, sans-serif; text-transform: uppercase; }
.howto video { display: block; width: calc(100% - 6px); height: auto; margin: 0 3px 3px; aspect-ratio: 16 / 9; background: var(--ink); border-radius: 0 0 8px 8px; }
@media (max-width: 759px) { .howto-bar h2 { font-size: 20px; } }

/* ---------- inner pages: the road in the header ---------- */
.page::before{content:"";display:block;height:clamp(130px,17vw,240px);margin:-56px calc(50% - 50vw) 34px;border-bottom:6px solid var(--earth-hi);
  background:url(/assets/mark.svg) right calc(max(16px,50vw - 600px) - 3px) top calc(clamp(130px,17vw,240px)*.06)/calc(clamp(130px,17vw,240px)*.53) no-repeat,
  url(/assets/art/cut-sign-diamond.webp) right max(16px,50vw - 600px) top calc(clamp(130px,17vw,240px)*.06)/auto 102% no-repeat,
  url(/assets/art/scene-noon.webp) center 84%/max(1440px,100%) auto no-repeat,var(--sky)}
.page h1:first-child,.page>.empty:first-child{margin-top:0}
:not(.panel)>.list{position:relative;padding-left:34px}
:not(.panel)>.list::before{content:"";position:absolute;left:6px;top:0;bottom:0;width:6px;background:repeating-linear-gradient(180deg,var(--chalk) 0 34px,transparent 34px 64px);opacity:.75}
/* thanks: live board in the dusk sky */
.tfeed{display:grid;grid-template-columns:minmax(0,760px) minmax(260px,460px);gap:36px;align-items:start}
.tboard{display:block;text-decoration:none}
.tboard .gface{justify-content:center;gap:1.4cqw;padding:4cqw 7cqw}
.tboard .bh{font:900 3.8cqw/1 Overpass;letter-spacing:.08em;text-transform:uppercase;border-bottom:2.5px solid var(--chalk);padding-bottom:1.8cqw;margin-bottom:.6cqw}
.tboard .br{display:flex;justify-content:space-between;align-items:baseline;gap:4cqw;font:800 3.4cqw/1.1 Overpass;letter-spacing:.04em;text-transform:uppercase}
.tboard .br b{font:900 6cqw/1 Overpass;letter-spacing:0;white-space:nowrap}
.tboard .br b small{font-size:.5em;margin-left:.3em}
@media (max-width:900px){.tfeed{grid-template-columns:1fr}.tboard{width:min(460px,100%);margin-top:6px}}
@media (max-width:560px){.tboard .br{font-size:4cqw}.tboard .bh{font-size:4.2cqw}}
/* landscape phones: keep the painted name on the first screen */
@media (orientation:landscape) and (max-height:520px){
  .hero{height:100svh;min-height:360px;max-height:none;background-size:cover;background-position:center 46%}
  body.home .nav{height:60px}
  .sky{top:58px}.sky .lede{font-size:19px}
  .sky .acts{margin-top:10px;gap:10px}.sky .acts .btn{height:40px;font-size:13px;padding:0 14px}
  .sky .nums{margin-top:8px;font-size:13px}.sky .nums b{font-size:15px}
  .sky .hero-ca{display:none}
  .hsign{display:none}
  .paint{width:100%;left:0;margin:0;bottom:2px;perspective:500px}
  .paint h1{font-size:min(15vw,22svh);letter-spacing:0;transform:rotateX(40deg) scaleY(1.4)}
}