/* Earth Bound Explorer */
@font-face{font-family:"Klein Black";src:url(/fonts/KleinBlack.woff2) format("woff2");font-display:swap}
:root{
  --ground:#e9e4d8;--surface:#fbf9f4;--raise:#ffffff;--ink:#1d2622;--muted:#5f6b64;--line:#d9d3c4;
  --accent:#b8862a;--accentInk:#ffffff;
  --cat-swim:#2c78ae;--cat-gem:#c08a1c;--cat-history:#a9523a;--cat-nature:#4c8657;--cat-drive:#e0662e;--cat-track:#7b4bd8;--cat-spooky:#4d7d68;
  --shadow:0 6px 24px rgba(30,40,35,.14);
  --paper:#f7f2e7;--paperInk:#24201a;--paperMuted:#6e6656;--paperLine:#e2d8c3;
  --f-display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-brand:"Klein Black","Outfit","Arial Black",system-ui,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --ground:#121715;--surface:#18201d;--raise:#202a26;--ink:#ebe8df;--muted:#a3ada6;--line:#2f3a35;
  --accent:#d8a845;--accentInk:#1a1406;--cat-swim:#5aa6dc;--cat-gem:#e0b04a;--cat-history:#d77a5f;--cat-nature:#73b07e;--cat-drive:#f08a52;--cat-track:#a07ef0;--cat-spooky:#7fbfa3;
  --shadow:0 6px 24px rgba(0,0,0,.45);color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--ground);color:var(--ink);font:15px/1.45 var(--f-body);-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit}
img{max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.app{position:relative;margin:0 auto;width:100%;max-width:520px;height:100vh;height:100dvh;background:var(--surface);display:flex;flex-direction:column;overflow:hidden}
@media (min-width:600px){.app{box-shadow:var(--shadow)}}
.view{flex:1;min-height:0;position:relative;display:none}
.view.on{display:flex;flex-direction:column}
.scroller{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.scroller.pad{padding:calc(18px + var(--safe-t)) 18px 28px;display:flex;flex-direction:column;gap:14px}
.h{font:700 30px/1 var(--f-display);margin:0;letter-spacing:.01em}
.sub{margin:4px 0 0;color:var(--muted)}
.note{font-size:13px;color:var(--muted);margin:0}

/* Map */
#map{position:absolute;inset:0;background:#dfe6e2}
.mapfail{position:absolute;left:14px;right:14px;top:calc(120px + var(--safe-t));z-index:5;background:var(--raise);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:4px;font-size:14px}
.topbar{position:absolute;top:0;left:0;right:0;z-index:6;padding:calc(12px + var(--safe-t)) 12px 0;display:flex;flex-direction:column;gap:9px;pointer-events:none}
.topbar>*{pointer-events:auto}
.search{display:flex;align-items:center;gap:8px;background:var(--raise);border-radius:14px;padding:10px 14px;box-shadow:var(--shadow)}
.search input{border:0;background:transparent;flex:1;min-width:0;font:inherit;color:var(--ink);outline:none}
.search svg{flex:none;opacity:.6}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--line);background:var(--raise);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;display:flex;gap:6px;align-items:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.chip .dot{width:9px;height:9px;border-radius:50%}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.mapbtns{position:absolute;right:12px;bottom:calc(84px);z-index:6;display:flex;flex-direction:column;gap:8px}
.roundbtn{width:44px;height:44px;border-radius:50%;border:0;background:var(--raise);box-shadow:var(--shadow);display:grid;place-items:center;cursor:pointer}
.roundbtn.on{color:#1a73e8}
.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right{bottom:68px}
.maplibregl-ctrl-attrib{font-size:10px}
.maplibregl-user-location-dot,.maplibregl-user-location-dot:before{background-color:#1a73e8}

.pin{width:30px;height:30px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--c);border:2px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.3);display:grid;place-items:center;cursor:pointer;transition:transform .15s}
.pin svg{transform:rotate(45deg);width:15px;height:15px;color:#fff}
.pin.locked{filter:saturate(.45)}
.pin.sel{transform:rotate(-45deg) scale(1.25)}
.areaTag{font:600 11px/1 var(--f-body);background:var(--raise);color:var(--ink);padding:5px 8px;border-radius:7px;box-shadow:0 2px 6px rgba(0,0,0,.22);white-space:nowrap;display:inline-flex;gap:5px;align-items:center;cursor:pointer}
.areaTag i{width:8px;height:8px;border-radius:50%;background:var(--c)}

.nearby{position:absolute;left:10px;right:10px;bottom:10px;z-index:7;background:var(--raise);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;max-height:48%}
.nearby-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border:0;background:transparent;width:100%;cursor:pointer;text-align:left}
.nearby-head b{font:700 18px/1.1 var(--f-display);letter-spacing:.02em}
.nearby-head span{color:var(--muted);font-size:13px}
.nearby-list{overflow-y:auto;border-top:1px solid var(--line)}
.row{display:flex;gap:12px;align-items:center;padding:10px 16px;border:0;border-bottom:1px solid var(--line);background:transparent;width:100%;text-align:left;cursor:pointer}
.row:last-child{border-bottom:0}
.row .badge{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;font-size:13px}
.row .t{flex:1;min-width:0}
.row .t b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .t small{color:var(--muted)}
.row .dist{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}

.sheet{position:absolute;left:0;right:0;bottom:0;z-index:9;background:var(--raise);border-radius:22px 22px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.2);transform:translateY(105%);transition:transform .28s ease;max-height:82%;display:flex;flex-direction:column}
.sheet.open{transform:none}
.sheet-in{overflow-y:auto;padding:4px 20px calc(22px + var(--safe-b));display:flex;flex-direction:column;gap:12px}
.grab{width:42px;height:5px;border-radius:3px;background:var(--line);margin:10px auto 2px}
.sphoto{display:block;position:relative;border:0;padding:0;margin:0 -6px;border-radius:16px;overflow:hidden;aspect-ratio:16/10;background:#2a261f;cursor:pointer;flex:none}
.sphoto img{width:100%;height:100%;object-fit:cover;display:block}
.sphoto .vbadge{position:absolute;left:10px;bottom:10px;font:600 12px/1 var(--f-body);color:#fff;background:rgba(0,0,0,.55);padding:6px 9px;border-radius:999px}
.sheet .x{z-index:2;background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(0,0,0,.2)}
.row .thumb{flex:none;width:44px;height:44px;border-radius:10px;overflow:hidden;position:relative;box-shadow:0 0 0 2px var(--c)}
.row .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.row .thumb i{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.35);font-style:normal;font-size:14px}
.sheet h2{font:400 28px/1 var(--f-brand);margin:0;text-wrap:balance}
.x{position:absolute;right:14px;top:12px;border:0;background:var(--surface);width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:18px}
.meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tag{font-size:12px;font-weight:600;padding:4px 9px;border-radius:999px;color:#fff}
.guideName{font-size:13px;color:var(--muted)}
.access{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--ac) 12%,var(--raise));border:1px solid color-mix(in srgb,var(--ac) 40%,var(--raise))}
.access b{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ac)}
.access p{margin:0;font-size:14px}
.etq{font-size:14px;margin:0;padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.etq b{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.blurb{font-size:16px;line-height:1.55;margin:0}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{border:0;border-radius:12px;padding:11px 16px;font-weight:600;cursor:pointer;display:inline-flex;gap:8px;align-items:center;text-decoration:none;font-size:15px}
.btn.primary{background:var(--accent);color:var(--accentInk)}
.btn.dark{background:var(--ink);color:var(--surface)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn[disabled]{opacity:.5;cursor:default}
.lockcard{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:14px;border:1px dashed var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--raise))}
.lockcard p{margin:0}
.approx{font-size:12px;color:var(--muted);margin:0}

/* Tabs */
.tabs{display:flex;border-top:1px solid var(--line);background:var(--surface);padding:6px 6px calc(6px + var(--safe-b));z-index:20}
.tabs button{flex:1;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;border-radius:12px}
.tabs button[aria-selected="true"]{color:var(--ink);background:color-mix(in srgb,var(--accent) 16%,transparent)}
.tabs svg{width:22px;height:22px}

/* Library */
.hero{position:relative;aspect-ratio:4/5;max-height:64vh;width:100%;overflow:hidden;background:#111}
.hero img,.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 35%,rgba(0,0,0,.8) 100%)}
.hero-in{position:absolute;left:18px;right:18px;bottom:18px;z-index:2;color:#fff;display:flex;flex-direction:column;gap:10px}
.hero-in small{font:600 11px/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;opacity:.85}
.hero-in h2{font:400 40px/.95 var(--f-brand);margin:0;text-transform:uppercase;text-shadow:3px 3px 10px rgba(0,0,0,.35)}
.hero-in .btn.ghost{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(0,0,0,.25)}
.shelfrow{display:flex;flex-direction:column;gap:10px;padding-top:20px}
.shelfrow h3{font:700 21px/1 var(--f-display);margin:0;padding-inline:18px;letter-spacing:.02em}
.strip{display:flex;gap:10px;overflow-x:auto;padding-inline:18px;scroll-padding-inline:18px;padding-bottom:4px;scroll-snap-type:x mandatory;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.tile{flex:none;border:0;padding:0;background:#222;border-radius:8px;overflow:hidden;position:relative;cursor:pointer;scroll-snap-align:start;color:#fff;text-align:left}
.tile.portrait{width:128px;aspect-ratio:2/3}
.tile.land{width:196px;aspect-ratio:16/10}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.78))}
.tile .tt{position:absolute;left:9px;right:9px;bottom:8px;z-index:2;display:flex;flex-direction:column;gap:3px}
.tile .tt b{font:400 16px/1 var(--f-brand);text-transform:uppercase}
.tile .tt small{font-size:11px;opacity:.85}
.tile .play{position:absolute;top:8px;right:8px;z-index:2;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.55);display:grid;place-items:center}
.tile .bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.25);z-index:3}
.tile .bar i{display:block;height:100%;background:var(--accent)}
.tile.soon{filter:grayscale(.3)}
.tile .soonTag{position:absolute;top:8px;left:8px;z-index:2;font:700 10px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;background:var(--accent);color:var(--accentInk);padding:4px 6px;border-radius:4px}
.art{position:absolute;inset:0}
.libfoot{padding:24px 18px 30px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}

/* Reader */
.reader{position:absolute;inset:0;z-index:30;background:#14110d;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .25s;padding-top:var(--safe-t)}
.reader.open{opacity:1;pointer-events:auto}
.rtop{display:flex;align-items:center;gap:8px;padding:12px 12px 8px;color:#f1eadb}
.rtop button{border:0;background:rgba(255,255,255,.1);color:#f1eadb;border-radius:10px;height:36px;min-width:36px;padding:0 10px;cursor:pointer;font-weight:600}
.rtop b{flex:1;min-width:0;font:400 16px/1.1 var(--f-brand);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rtop .pg{font-variant-numeric:tabular-nums;font-size:12px;opacity:.75;flex:none;color:#f1eadb}
.bookstage{flex:1;min-height:0;position:relative;perspective:1800px;margin:4px 12px;touch-action:pan-y}
.leaf{position:absolute;inset:0;background:var(--paper);color:var(--paperInk);border-radius:4px 10px 10px 4px;overflow:hidden;transform-origin:left center;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 10px 30px rgba(0,0,0,.45);display:flex;flex-direction:column}
.leaf *{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.leaf::before{content:"";position:absolute;left:0;top:0;bottom:0;width:16px;background:linear-gradient(90deg,rgba(0,0,0,.16),transparent);z-index:3;pointer-events:none}
.leaf .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.35));opacity:0;pointer-events:none;z-index:4}
.rbottom{display:flex;align-items:center;gap:10px;padding:8px 12px calc(10px + var(--safe-b))}
.rbottom button{border:0;background:rgba(255,255,255,.12);color:#f1eadb;border-radius:50%;width:40px;height:40px;cursor:pointer;font-size:18px;flex:none}
.rbottom input{flex:1;accent-color:var(--accent)}

.vp{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px 18px 26px 22px;display:flex;flex-direction:column;gap:12px}
.vp .rh{display:flex;justify-content:space-between;font:600 10px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--paperMuted)}
.vp .ph{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:3/2;flex:none;background:#2a261f}
.vp .ph img,.vp .ph video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vp .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.6));pointer-events:none}
.vp .ph h2{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;margin:0;color:#fff;font:400 30px/.95 var(--f-brand);text-shadow:2px 2px 8px rgba(0,0,0,.45);text-wrap:balance}
.vp .playbtn{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:3;width:58px;height:58px;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.45);color:#fff;display:grid;place-items:center;cursor:pointer}
.vp h3{font:700 17px/1.15 var(--f-body);margin:4px 0 0}
.vp h3.sec{font:400 24px/1 var(--f-brand);margin-top:10px}
.vp h4{font:700 12px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;margin:6px 0 0}
.vp p.t{font:400 15px/1.55 var(--f-body);margin:0;color:#2f2a22}
.chipc{align-self:flex-start;font:600 11px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:#fff;padding:5px 8px;border-radius:4px}
.vp .dyk{background:#efe7d6;border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.vp .dyk b{font:700 15px/1 var(--f-body)}
.vp .dyk p{margin:0;font:500 14px/1.5 var(--f-body)}
.vp .ph2{border-radius:12px;overflow:hidden;flex:none;aspect-ratio:4/3;background:#2a261f}
.vp .ph2 img{width:100%;height:100%;object-fit:cover;display:block}
.vp .look{border-left:3px solid var(--accent);padding:4px 0 4px 12px;display:flex;flex-direction:column;gap:3px}
.vp .look b{font:700 11px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--paperMuted)}
.vp .look p{margin:0;font:500 14px/1.5 var(--f-body)}
.vp .minimap{height:190px;border-radius:12px;overflow:hidden;flex:none;border:1px solid var(--paperLine);background:#e8e4da;position:relative}
.vp ul.an{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font:400 14px/1.5 var(--f-body)}
.vp .areanote{font:500 14px/1.5 var(--f-body);background:#f6e3dc;border-left:3px solid var(--cat-history);padding:10px 12px;border-radius:0 10px 10px 0;margin:0}
.kbg{border-left:3px solid var(--ac);background:#efe7d6;padding:10px 12px;border-radius:0 8px 8px 0;font-size:14px;color:var(--paperInk)}
.kbg b{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--paperMuted);margin-bottom:3px}
.pact{display:flex;flex-wrap:wrap;gap:8px}
.pact a,.pact button{border:1px solid var(--paperLine);background:#fff;color:var(--paperInk);border-radius:999px;padding:9px 13px;font:600 13px var(--f-body);cursor:pointer;text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.pact .gold{background:var(--paperInk);color:var(--paper);border-color:var(--paperInk)}
.lockp{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px dashed #b8862a;border-radius:10px;background:#fbf3df}
.endnext{text-align:right;font:600 12px var(--f-body);color:var(--paperMuted);padding-top:4px}
.vcover{position:absolute;inset:0}
.vcover img{width:100%;height:100%;object-fit:cover;display:block}
.vch{position:absolute;inset:0;color:#fff;display:flex;flex-direction:column;padding:24px 20px;gap:10px;overflow-y:auto}
.vch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.vch::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15) 20%,rgba(0,0,0,.82) 75%);z-index:1}
.vch>*{position:relative;z-index:2}
.vch .eb{margin-top:auto;font:600 11px/1 var(--f-body);letter-spacing:.22em;text-transform:uppercase;opacity:.9}
.vch h2{font:400 40px/.92 var(--f-brand);margin:0;text-wrap:balance}
.vch .tg{font:700 12px/1.35 var(--f-body);letter-spacing:.06em;text-transform:uppercase;opacity:.92;margin:0}
.vch p{font:400 14px/1.5 var(--f-body);margin:0;opacity:.92}
.toc{display:flex;flex-direction:column}
.toc h4{font:400 21px/1 var(--f-brand);letter-spacing:.01em;text-transform:uppercase;color:var(--hc);margin:22px 0 4px;padding-bottom:6px;border-bottom:2px solid var(--hc)}
.toc h4:first-child{margin-top:12px}
.toc button{border:0;background:transparent;color:var(--paperInk);display:flex;align-items:baseline;gap:8px;padding:8px 0 8px 2px;cursor:pointer;text-align:left;font:500 15px/1.2 var(--f-body);border-bottom:1px dotted var(--paperLine)}
.toc button span{flex:1}
.toc button em{font:600 13px var(--f-body);font-style:normal;color:var(--paperMuted);font-variant-numeric:tabular-nums}
.toc .dot{width:9px;height:9px;border-radius:50%;flex:none;align-self:center}
.openfx{position:absolute;z-index:40;border-radius:8px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.5);pointer-events:none}
.openfx img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Account & saved */
.card{background:var(--raise);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px}
.card h3{font:700 22px/1.05 var(--f-display);margin:0}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:600;color:var(--muted)}
.field input,.field textarea{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px 12px;width:100%}
.field textarea{min-height:110px;resize:vertical}
.status{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--cat-nature) 14%,var(--raise));border:1px solid color-mix(in srgb,var(--cat-nature) 40%,var(--raise))}
.status.no{background:color-mix(in srgb,var(--accent) 12%,var(--raise));border-color:color-mix(in srgb,var(--accent) 40%,var(--raise))}
.msg{font-size:14px;margin:0}
.msg.err{color:#b3261e}
.list{background:var(--raise);border-radius:16px;border:1px solid var(--line);overflow:hidden}
.empty{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:10px 2px}

.toast{position:absolute;left:50%;bottom:calc(86px + var(--safe-b));transform:translateX(-50%);z-index:50;background:var(--ink);color:var(--surface);padding:10px 14px;border-radius:10px;font-size:13px;font-weight:600;opacity:0;transition:opacity .2s;pointer-events:none;max-width:90%;text-align:center}
.toast.on{opacity:1}
@media (prefers-reduced-motion:reduce){.sheet{transition:none}}
.brandlogo svg{display:block;width:100%;height:auto}

/* Shop header (matches the Earth Bound Shopify store; scrolls away with the page) */
.shopbar{background:#0b0e16;color:#fff;text-align:center;font:700 13px/1.35 Montserrat,var(--f-body);letter-spacing:.08em;padding:calc(10px + var(--safe-t)) 16px 10px}
.shophead{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:#fafafa;color:#121212;padding:8px 10px;border-bottom:1px solid #eee}
.shophead .shopicons{display:flex;justify-content:flex-end;gap:2px}
.iconbtn{width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;color:#121212;cursor:pointer;border-radius:10px;text-decoration:none}
.shoplogo{display:block;width:92px;color:#121212}
.shoplogo svg{display:block;width:100%;height:auto}
.shopdrawer{position:absolute;inset:0;z-index:60;background:rgba(0,0,0,0);transition:background .25s}
.shopdrawer.on{background:rgba(0,0,0,.35)}
.sdpanel{position:absolute;inset:0;background:#fafafa;color:#121212;transform:translateX(-100%);transition:transform .25s ease;display:flex;flex-direction:column;padding-top:var(--safe-t)}
.shopdrawer.on .sdpanel{transform:none}
.sdtop{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;justify-items:center;padding:14px 10px;border-bottom:1px solid #eee}
.sdtop .shoplogo{width:92px}
.sdlinks{display:flex;flex-direction:column;padding:10px 0}
.sdlinks a,.sdlinks summary{display:flex;justify-content:space-between;align-items:center;padding:14px 26px;font:400 20px/1.2 var(--f-body);color:#121212;text-decoration:none;letter-spacing:.02em;cursor:pointer;list-style:none}
.sdlinks summary::-webkit-details-marker{display:none}
.sdlinks a:active,.sdlinks summary:active{background:#f0f0f0}
.sdlinks details a{padding-left:42px;font-size:17px;color:#444}
.sdfoot{margin-top:auto;background:#f2f2f2;padding:22px 26px calc(22px + var(--safe-b));display:flex;flex-direction:column;gap:16px;font-size:16px}
.sdfoot a{display:flex;align-items:center;gap:10px;color:#121212;text-decoration:none;font-weight:600}
@media (prefers-reduced-motion:reduce){.sdpanel,.shopdrawer{transition:none}}

.regionmenu{position:absolute;right:62px;z-index:6;bottom:84px;background:#fff;border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,.22);padding:6px;display:flex;flex-direction:column;min-width:170px}
.regionmenu button{all:unset;cursor:pointer;padding:11px 14px;border-radius:9px;font:600 15px/1.1 var(--f-body);color:#1d2622}
.regionmenu button:hover,.regionmenu button:focus-visible{background:#f1ede4}
.far .areaTag span{display:none}
.far .areaTag{padding:5px}

/* Guides page rows */
.rowhead{display:flex;align-items:center;justify-content:space-between;padding-right:18px}
.nearbtn{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--raise);color:var(--ink);font:600 12px/1 var(--f-body);padding:7px 11px;border-radius:999px;cursor:pointer}
.tile .tbadge{position:absolute;top:0;left:0;z-index:2;background:var(--accent);color:var(--accentInk);font:800 10px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;padding:6px 8px;border-bottom-right-radius:8px}
.rankrow .strip{gap:16px}
.rk{flex:none;display:flex;align-items:flex-end;scroll-snap-align:start;position:relative}
.rk .n{display:inline-block;font:800 168px/.74 Outfit,var(--f-display);color:#000;letter-spacing:-6px;margin-right:-16px;margin-left:-4px;transform:scaleX(.92);transform-origin:right bottom;user-select:none}
.rk .tile{z-index:1}

/* Promo break */
.promo{position:relative;margin-top:28px;min-height:330px;overflow:hidden;color:#fff;
  background:radial-gradient(120% 90% at 85% 45%,rgba(64,170,220,.55),rgba(10,40,70,0) 55%),linear-gradient(160deg,#04121d 0%,#08263a 55%,#04121d 100%)}
.promo::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 2px,transparent 2px 46px);pointer-events:none}
.promo-in{position:relative;z-index:2;padding:46px 0 42px 22px;width:58%;display:flex;flex-direction:column;gap:12px}
.promo h2{margin:0;font:800 31px/1.08 Outfit,var(--f-display);letter-spacing:-.01em}
.promo h2 span{color:#7fd3f2}
.promo p{margin:0;font:400 15px/1.45 var(--f-body);opacity:.9}
.promo-btn{align-self:flex-start;margin-top:6px;border:0;background:#fff;color:#0b1b26;font:700 16px/1 var(--f-body);padding:14px 22px;border-radius:999px;cursor:pointer}
.promo-art{position:absolute;right:-8px;top:50%;width:46%;height:260px;transform:translateY(-50%);z-index:1}
.promo-art .pc{position:absolute;width:118px;aspect-ratio:800/1233;object-fit:cover;border-radius:12px;
  box-shadow:0 0 0 2px rgba(190,235,255,.85),0 0 22px 6px rgba(110,200,245,.6),0 18px 40px rgba(0,0,0,.55)}
.promo-art .pc0{right:62px;top:22px;transform:rotate(-8deg)}
.promo-art .pc1{right:6px;top:4px;transform:rotate(7deg)}
.tile.bookcover{aspect-ratio:800/1233;box-shadow:0 6px 14px rgba(0,0,0,.25)}
.tile.bookcover::after,.tile.bookcover .tt{display:none}

/* Section themes for promo breaks */
.promo .pcfake{display:flex;flex-direction:column;justify-content:flex-start;gap:4px;padding:14px 10px;color:#fff;text-align:left}
.promo .pcfake b{font:800 19px/1 Outfit,var(--f-display);text-transform:uppercase}
.promo .pcfake small{font:600 11px/1.1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;opacity:.9}
.promo .pcfake i{margin-top:auto;font:700 9px/1 var(--f-body);font-style:normal;letter-spacing:.14em;text-transform:uppercase;background:rgba(255,255,255,.9);color:#111;padding:5px 6px;border-radius:4px;align-self:flex-start}
.promo.gems{background:radial-gradient(120% 90% at 85% 45%,rgba(214,170,80,.45),rgba(40,30,10,0) 55%),linear-gradient(160deg,#0e110a 0%,#25230f 55%,#0e110a 100%)}
.promo.gems h2 span{color:#e9c46a}
.promo.gems .promo-art .pc{box-shadow:0 0 0 2px rgba(255,236,190,.85),0 0 22px 6px rgba(233,196,106,.55),0 18px 40px rgba(0,0,0,.55)}
.promo.wild{background:radial-gradient(120% 90% at 85% 45%,rgba(110,190,120,.45),rgba(10,30,15,0) 55%),linear-gradient(160deg,#08130c 0%,#14301c 55%,#08130c 100%)}
.promo.wild h2 span{color:#9ee6a8}
.promo.wild .promo-art .pc{box-shadow:0 0 0 2px rgba(220,255,225,.85),0 0 22px 6px rgba(120,210,140,.5),0 18px 40px rgba(0,0,0,.55)}
.promo.spooky{background:radial-gradient(120% 90% at 85% 45%,rgba(150,230,120,.35),rgba(20,10,30,0) 55%),linear-gradient(160deg,#0b0a12 0%,#1d1a2c 55%,#0b0a12 100%)}
.promo.spooky h2 span{color:#c6f08a}
.promo.spooky .promo-art .pc{box-shadow:0 0 0 2px rgba(220,255,200,.8),0 0 22px 6px rgba(160,230,110,.5),0 18px 40px rgba(0,0,0,.6)}
.promo.road{background:radial-gradient(120% 90% at 85% 45%,rgba(240,120,60,.5),rgba(60,20,40,0) 55%),linear-gradient(160deg,#120a1c 0%,#2c1530 55%,#120a1c 100%)}
.promo.road h2 span{color:#ffab70}
.promo.road .promo-art .pc{box-shadow:0 0 0 2px rgba(255,214,190,.85),0 0 22px 6px rgba(255,140,80,.55),0 18px 40px rgba(0,0,0,.55)}
.promo.road::before{background:repeating-linear-gradient(90deg,transparent 0 46%,rgba(255,220,150,.07) 46% 54%,transparent 54% 100%);background-size:100% 60px}

/* Drives */
.stopnum{width:24px;height:24px;border-radius:50%;background:#fff;color:var(--cat-drive);border:2.5px solid var(--cat-drive);font:800 12px/19px var(--f-body);text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.stopnum.end{background:var(--cat-drive);color:#fff}
.routefacts{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 4px}
.routefacts span{font:700 12px/1 var(--f-body);background:color-mix(in srgb,var(--cat-drive) 14%,var(--raise));color:var(--ink);padding:7px 10px;border-radius:999px}
.stoplist{list-style:none;margin:6px 0 4px;padding:0;counter-reset:s}
.stoplist li{position:relative;padding:0 0 12px 36px;font:500 14px/1.35 var(--f-body)}
.stoplist li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:-2px;width:24px;height:24px;border-radius:50%;border:2.5px solid var(--cat-drive);color:var(--cat-drive);background:#fff;font:800 12px/19px var(--f-body);text-align:center}
.stoplist li:not(:last-child)::after{content:"";position:absolute;left:11px;top:24px;bottom:2px;width:3px;background:color-mix(in srgb,var(--cat-drive) 45%,transparent)}
.stoplist li:first-child::before,.stoplist li:last-child::before{background:var(--cat-drive);color:#fff}
.stoplist small{display:block;color:var(--paperMuted,var(--muted));font-size:12.5px}
.vp .see{font:600 13px/1.45 var(--f-body);color:var(--paperMuted,var(--muted));margin:0 0 6px}

.vp .legalbox{background:color-mix(in srgb,var(--cat-track) 12%,var(--paper,#fff));border-left:3px solid var(--cat-track);border-radius:0 10px 10px 0;padding:11px 13px;margin:6px 0}
.vp .legalbox b{display:block;font:800 13px/1.2 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--cat-track);margin-bottom:4px}
.vp .legalbox p{margin:0;font:500 14.5px/1.45 var(--f-body)}
.roadnote{font:600 12.5px/1.4 var(--f-body);background:color-mix(in srgb,var(--cat-history) 12%,var(--raise));border-radius:10px;padding:8px 10px;margin:4px 0}