/* Map landing pages (/maps/island/, /maps/desert/) — Hangar tokens + the sim's self-hosted brand faces
   (same origin: cacheable, works offline). Generated pages: tools/buildMapPages.mjs. */
@font-face { font-family:"Barlow"; font-weight:400; font-display:swap; src:url(/assets/fonts/Barlow-400.woff2) format("woff2"); }
@font-face { font-family:"Barlow"; font-weight:500; font-display:swap; src:url(/assets/fonts/Barlow-500.woff2) format("woff2"); }
@font-face { font-family:"Barlow"; font-weight:600; font-display:swap; src:url(/assets/fonts/Barlow-600.woff2) format("woff2"); }
@font-face { font-family:"Barlow"; font-weight:700; font-display:swap; src:url(/assets/fonts/Barlow-700.woff2) format("woff2"); }
@font-face { font-family:"Barlow Semi Condensed"; font-weight:600; font-display:swap; src:url(/assets/fonts/BarlowSemiCondensed-600.woff2) format("woff2"); }
@font-face { font-family:"Barlow Semi Condensed"; font-weight:700; font-display:swap; src:url(/assets/fonts/BarlowSemiCondensed-700.woff2) format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-weight:400; font-display:swap; src:url(/assets/fonts/JetBrainsMono-400.woff2) format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-weight:500; font-display:swap; src:url(/assets/fonts/JetBrainsMono-500.woff2) format("woff2"); }

:root { --bg:#0e1117; --panel:#131a22; --panel2:#18212b; --line:#30363d; --line2:#3d444d; --text:#e6edf3; --muted:#8b949e; --dim:#6b7480;
  --blue:#1f9bd9; --blue-b:#3eb5e8; --blue-d:#1580c4; --gold:#f0c24b; --silver:#c8d2da; --bronze:#d0894f; --green:#62e58a; --amber:#f2b33d;
  --cond:"Barlow Semi Condensed","Arial Narrow",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --sans:"Barlow",-apple-system,"Segoe UI",system-ui,sans-serif; }
* { box-sizing:border-box; }
html { background:var(--bg); scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.55 var(--sans); -webkit-font-smoothing:antialiased; }
a { color:var(--blue-b); text-decoration:none; }
a:hover { text-decoration:underline; }
img { display:block; max-width:100%; }
button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
.wrap { max-width:1240px; margin:0 auto; padding:0 32px; }
.eyebrow { font-family:var(--mono); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--blue-b); }
.beta { display:inline-block; padding:3px 7px 2px; border-radius:5px; background:var(--amber); color:#1b1404; font:700 11px/1 var(--mono); letter-spacing:.14em; vertical-align:middle; }

/* top bar (over the hero) */
.top { position:absolute; inset:0 0 auto; z-index:3; }
.top .wrap { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:22px; }
/* THE MOTHER BRAND — the landing hero's Nanawing lockup (blue tile + white wing, two-tone wordmark) */
.brand { color:var(--text); }
.brand:hover { text-decoration:none; }
.lockup { display:inline-flex; align-items:center; gap:12px; }
.lockup .tile { flex:0 0 auto; display:grid; place-items:center; width:40px; height:40px; border-radius:11px; background:linear-gradient(160deg,#1f9bd9,#1580c4); box-shadow:0 6px 20px rgba(31,155,217,.35); }
.lockup .tile svg { width:62%; height:62%; }
.lockup .wm { display:flex; flex-direction:column; line-height:1; }
.lockup .wm b { font:800 22px/1 var(--sans); letter-spacing:-.01em; color:#fff; }
.lockup .wm b i { font-style:normal; color:var(--blue-b); }
.lockup .wm small { margin-top:5px; font:500 11px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:#9fb0bf; }
.lockup.sm .tile { width:38px; height:38px; } .lockup.sm .wm b { font-size:21px; }
.lockup.lg .tile { width:56px; height:56px; border-radius:14px; } .lockup.lg .wm b { font-size:34px; } .lockup.lg .wm small { font-size:12px; }
.lockup.xl { gap:16px; } .lockup.xl .tile { width:68px; height:68px; border-radius:17px; box-shadow:0 10px 32px rgba(31,155,217,.5); }
.lockup.xl .wm b { font-size:clamp(40px,5vw,58px); text-shadow:0 3px 20px rgba(0,0,0,.45); } .lockup.xl .wm small { font-size:12.5px; margin-top:8px; color:#c3ccd5; }
.hlock { margin-bottom:22px; }
.nav { display:flex; align-items:center; gap:22px; font-size:14.5px; }
.nav a { color:#c9d1d9; }
.nav a.on { color:#fff; font-weight:600; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; height:48px; padding:0 22px; border-radius:9px; font-weight:700; font-size:15.5px;
  color:#05141d; background:linear-gradient(180deg,var(--blue-b),var(--blue-d)); box-shadow:0 0 26px rgba(31,155,217,.38); transition:filter .15s, transform .15s; }
.btn:hover { filter:brightness(1.1); text-decoration:none; transform:translateY(-1px); }
.btn.sm { height:40px; padding:0 16px; font-size:14px; }
.btn.ghost { color:var(--text); background:rgba(14,17,23,.55); border:1px solid var(--line2); box-shadow:none; backdrop-filter:blur(6px); }
.btn .tri { width:0; height:0; border-left:10px solid currentColor; border-top:6px solid transparent; border-bottom:6px solid transparent; }

/* hero */
.hero { position:relative; min-height:min(92vh,860px); display:flex; align-items:flex-end; overflow:hidden; isolation:isolate; }
.hero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.hero::after { content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,rgba(9,12,17,.9) 0%,rgba(9,12,17,.55) 38%,rgba(9,12,17,.08) 70%),
             linear-gradient(180deg,rgba(9,12,17,.55) 0%,rgba(9,12,17,0) 22%,rgba(9,12,17,0) 55%,var(--bg) 100%); }
.hero .wrap { width:100%; padding-top:112px; padding-bottom:72px; }
.hero h1 { margin:12px 0 10px; font:700 clamp(64px,10vw,132px)/.88 var(--cond); letter-spacing:.01em; text-transform:uppercase; text-shadow:0 4px 30px rgba(0,0,0,.45); }
.hero .lede { max-width:600px; margin:0 0 26px; font-size:19px; color:#d6dde4; text-shadow:0 1px 10px rgba(0,0,0,.6); }
.hero .ctas { display:flex; flex-wrap:wrap; gap:12px; }
/* phones: the sim needs a keyboard, gamepad or RC radio — say so where the CTA is (most shared links open on a phone) */
.touch { display:none; max-width:560px; margin-top:18px; padding:14px 16px; border-radius:12px; background:rgba(9,12,17,.72); border:1px solid rgba(242,179,61,.5); font-size:15px; color:#e6edf3; backdrop-filter:blur(6px); }
.touch b { color:var(--amber); }
.touch span { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
@media (pointer:coarse) { .touch { display:block; } }
.facts { display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:26px; font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; color:#aeb8c2; }
.facts span::before { content:"◆"; color:var(--blue-b); margin-right:8px; font-size:9px; vertical-align:2px; }

section.block { padding:72px 0 0; }
.sh { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:24px; flex-wrap:wrap; }
.sh h2 { margin:6px 0 0; font:700 clamp(34px,4vw,48px)/1 var(--cond); text-transform:uppercase; letter-spacing:.01em; }
.sh p { margin:0; color:var(--muted); max-width:560px; }

/* gallery */
.gallery { display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:240px 240px; gap:12px; }
.gallery figure { position:relative; margin:0; overflow:hidden; border-radius:12px; border:1px solid var(--line); background:var(--panel); }
.gallery figure:first-child { grid-row:span 2; }
.gallery img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.gallery figure:hover img { transform:scale(1.04); }
.gallery figcaption { position:absolute; left:0; right:0; bottom:0; padding:28px 14px 11px; font-size:13.5px; color:#e6edf3;
  background:linear-gradient(180deg,transparent,rgba(9,12,17,.85)); }

/* tracks */
.tracks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.track { display:flex; flex-direction:column; border:1px solid var(--line2); border-radius:14px; overflow:hidden; background:var(--panel); }
.tmap { position:relative; background:#0b0f14; }
.tmap img { width:100%; height:auto; }
.tmap svg { position:absolute; inset:0; width:100%; height:100%; }
.tmap .other polyline { stroke:rgba(255,255,255,.28); stroke-width:3; stroke-dasharray:2 7; }
.tmap .other circle { display:none; }
.tmap .me polyline { stroke-width:6; filter:drop-shadow(0 0 6px rgba(0,0,0,.8)); }
.tmap .me .g { stroke:#0b0f14; stroke-width:2; }
.tmap .me .s { stroke:#fff; stroke-width:3; }
.tmap .me text { font:700 22px var(--mono); fill:#fff; paint-order:stroke; stroke:#0b0f14; stroke-width:5px; }
.tmap .pill { position:absolute; left:14px; top:14px; padding:5px 9px; border-radius:6px; background:rgba(9,12,17,.75); font:600 11.5px var(--mono); letter-spacing:.12em; color:#d6dde4; }
.tbody { display:flex; flex-direction:column; gap:12px; padding:18px 20px 20px; flex:1; }
.tbody h3 { margin:0; font:700 34px/1 var(--cond); text-transform:uppercase; letter-spacing:.02em; }
.tbody .meta { font-family:var(--mono); font-size:13px; color:var(--muted); }
.tbody .meta b { color:var(--text); font-weight:500; }
.tbody p { margin:0; color:#c9d1d9; }
.lb { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#0f151c; }
.lb .lbh { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line); }
.lb .lbh .t { white-space:nowrap; font:600 11.5px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.lb .lbh .t i { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--green); margin-right:7px; vertical-align:1px; box-shadow:0 0 8px var(--green); }
.wings { display:flex; gap:4px; }
.wings button { padding:4px 8px; border-radius:6px; font:600 12px var(--sans); color:var(--muted); border:1px solid transparent; }
.wings button:hover { color:#fff; border-color:var(--line2); }
.wings button[aria-pressed="true"] { color:#fff; background:rgba(31,155,217,.2); border-color:var(--blue); }
.lb ol { list-style:none; margin:0; padding:4px 0; }
.lb li { display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:8px; align-items:center; padding:7px 12px; font-size:14.5px; }
.lb li .r { font:600 13px var(--mono); color:var(--dim); }
.lb li:nth-child(1) .r { color:var(--gold); } .lb li:nth-child(2) .r { color:var(--silver); } .lb li:nth-child(3) .r { color:var(--bronze); }
.lb li .n { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
.lb li .tm { font:600 14px var(--mono); }
.lb .state { padding:14px 12px; font-size:14px; color:var(--muted); }
.lb .more { display:block; padding:9px 12px; border-top:1px solid var(--line); font-size:13.5px; }
.tcta { display:flex; gap:10px; flex-wrap:wrap; margin-top:auto; }

/* features */
.feats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.feat { padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.feat b { display:block; margin-bottom:6px; font:700 21px/1.1 var(--cond); text-transform:uppercase; letter-spacing:.02em; }
.feat span { color:var(--muted); font-size:14.5px; }

/* the long-form map guide (Island: merged from the retired /guides/the-island) — numbered stops, heading left,
   prose right at a readable measure */
.tour { border-top:1px solid var(--line); }
.stop { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:12px 40px; padding:28px 0; border-bottom:1px solid var(--line); }
.stop .sh3 { display:flex; flex-direction:column; gap:8px; }
.stop .n { font:500 12px var(--mono); letter-spacing:.2em; color:var(--blue-b); }
.stop h3 { margin:0; font:700 clamp(24px,2.6vw,30px)/1.05 var(--cond); text-transform:uppercase; letter-spacing:.01em; }
.stop .tx { max-width:68ch; }
.stop .tx > p { margin:0 0 14px; color:#c9d1d9; font-size:16.5px; }
.stop .tx > p:last-child { margin-bottom:0; }
kbd { display:inline-block; min-width:1.7em; padding:1px 6px; border:1px solid var(--line2); border-bottom-width:2px; border-radius:5px; background:var(--panel2);
  font:500 13px/1.4 var(--mono); color:var(--text); text-align:center; }
.medals { list-style:none; margin:4px 0 0; padding:0; display:grid; gap:8px; }
.medals li { display:grid; grid-template-columns:repeat(4,auto); justify-content:start; align-items:baseline; gap:6px 22px; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--panel); }
.medals b { grid-column:1 / -1; font:700 19px/1.1 var(--cond); text-transform:uppercase; letter-spacing:.02em; }
.medals span { font:500 13.5px var(--mono); color:var(--muted); }
.medals span:nth-of-type(1) { color:var(--bronze); } .medals span:nth-of-type(2) { color:var(--silver); }
.medals span:nth-of-type(3) { color:var(--gold); } .medals span:nth-of-type(4) { color:var(--blue-b); }
.tip { margin-top:18px; padding:16px 18px; border:1px solid rgba(62,181,232,.35); border-left:3px solid var(--blue-b); border-radius:10px; background:rgba(31,155,217,.08); }
.tip b { display:block; margin-bottom:4px; font:700 18px/1.1 var(--cond); text-transform:uppercase; letter-spacing:.02em; }
.tip p { margin:0; color:#c9d1d9; font-size:15px; }

/* "This is Nanawing" */
.brandbox { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:32px; align-items:center; padding:34px; border-radius:18px; border:1px solid rgba(62,181,232,.35);
  background:radial-gradient(90% 120% at 100% 0%,rgba(31,155,217,.22),transparent 60%),linear-gradient(180deg,#121a24,#0f151d); }
.brandbox h2 { margin:20px 0 12px; font:700 clamp(30px,3.4vw,42px)/1.05 var(--cond); text-transform:uppercase; }
.brandbox p { margin:0 0 20px; color:#c9d1d9; max-width:580px; }
.bstats { display:flex; flex-wrap:wrap; gap:12px 28px; margin-bottom:24px; }
.bstats b { display:block; font:700 34px/1 var(--cond); color:var(--blue-b); }
.bstats span { font:500 12px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.brandbox .ctas { display:flex; flex-wrap:wrap; gap:12px; }
.bwings { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.bwing { padding:12px; border-radius:12px; background:rgba(9,12,17,.55); border:1px solid var(--line); }
.bwing img { width:100%; aspect-ratio:4/3; object-fit:contain; margin-bottom:8px; }
.bwing b { display:block; font:700 19px/1.1 var(--cond); text-transform:uppercase; }
.bwing span { font-size:13px; color:var(--muted); }

/* share */
.share { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:28px; align-items:center; padding:28px; border:1px solid var(--line2); border-radius:16px;
  background:radial-gradient(120% 120% at 0% 0%,rgba(31,155,217,.14),transparent 55%),var(--panel); }
.share h2 { margin:6px 0 10px; font:700 40px/1 var(--cond); text-transform:uppercase; }
.share p { margin:0 0 18px; color:#c9d1d9; }
.sbtns { display:flex; flex-wrap:wrap; gap:8px; }
.sbtn { display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 14px; border-radius:8px; border:1px solid var(--line2); background:var(--panel2); color:var(--text); font-weight:600; font-size:14px; }
.sbtn:hover { border-color:var(--blue-b); text-decoration:none; }
.sbtn.wa { background:#128c4a; border-color:#1fae5f; }
.sbtn svg { width:17px; height:17px; fill:currentColor; }
.kit { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; }
.kit a { display:block; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#0b0f14; color:var(--muted); font-size:13px; }
.kit a:hover { border-color:var(--blue-b); text-decoration:none; }
.kit img { width:100%; aspect-ratio:1/1; object-fit:cover; }
.kit a.story img { aspect-ratio:9/16; object-fit:cover; height:100%; }
.kit span { display:block; padding:8px 10px; }
.kit span b { color:var(--text); }

/* other map + footer */
.other { position:relative; display:flex; align-items:flex-end; min-height:300px; border-radius:16px; overflow:hidden; isolation:isolate; border:1px solid var(--line2); color:var(--text); }
.other img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .6s; }
.other:hover img { transform:scale(1.03); }
.other:hover { text-decoration:none; }
.other::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(9,12,17,.88),rgba(9,12,17,.2)); }
.other div { padding:30px; }
.other b { display:block; margin:6px 0 6px; font:700 54px/1 var(--cond); text-transform:uppercase; }
.other span { color:#c9d1d9; }
.foot { margin-top:72px; padding:28px 0 40px; border-top:1px solid var(--line); color:var(--dim); font-size:13.5px; }
.foot .wrap { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.foot a { color:var(--muted); }
.toast { position:fixed; left:50%; bottom:26px; transform:translateX(-50%); padding:10px 16px; border-radius:8px; background:#1d2733; border:1px solid var(--line2); font-size:14px; opacity:0; transition:opacity .2s; pointer-events:none; }
.toast.on { opacity:1; }

@media (max-width:980px) {
  .gallery { grid-template-columns:1fr 1fr; grid-template-rows:none; grid-auto-rows:180px; }
  .gallery figure:first-child { grid-column:span 2; grid-row:auto; }
  .tracks, .share, .brandbox { grid-template-columns:1fr; }
  .feats { grid-template-columns:1fr 1fr; }
  .stop { grid-template-columns:1fr; padding:24px 0; }
}
@media (max-width:620px) {
  .wrap { padding:0 16px; }
  /* phones: the top bar is a solid bar ABOVE the hero (floating, it sat under the hero's tall content and the two
     Nanawing lockups overlapped); the hero lockup shrinks and its tagline wraps */
  .top { position:sticky; top:0; background:rgba(9,12,17,.94); border-bottom:1px solid var(--line); backdrop-filter:blur(8px); }
  .top .wrap { padding-top:10px; padding-bottom:10px; }
  .lockup.sm .wm small { display:none; }
  .lockup.sm .tile { width:34px; height:34px; } .lockup.sm .wm b { font-size:20px; }
  .hero { min-height:auto; }
  .hero .wrap { padding-top:30px; padding-bottom:44px; }
  .lockup.xl { gap:12px; } .lockup.xl .tile { width:50px; height:50px; border-radius:13px; }
  .lockup.xl .wm b { font-size:38px; } .lockup.xl .wm small { font-size:10px; letter-spacing:.1em; line-height:1.45; white-space:normal; margin-top:6px; }
  .hlock { margin-bottom:16px; }
  .nav a:not(.btn) { display:none; }
  .hero { min-height:88vh; }
  .hero .lede { font-size:17px; }
  .feats { grid-template-columns:1fr; }
  .medals li { grid-template-columns:repeat(2,auto); }
  .tbody h3 { font-size:28px; }
}