/* Layout: a dusk roadside in Mehville. Full-bleed bands; the world map is a run of highway exit signs. */
:root {
  --night: #140f17;       /* page ground */
  --dusk: #22182a;        /* raised bands */
  --line: #3a2c3f;
  --text: #efe6dc;
  --dim: #b3a5a9;
  --sodium: #f4a43b;      /* streetlight accent */
  --hwy: #1d6b47;         /* highway-sign green */
  --hwy-edge: #e9f2ec;
  --pill: #d9f3e8;        /* MehGen ad paper */
  --pill-ink: #173a30;
  --pill-red: #c2412d;
  --display: "Bungee", "Impact", "Arial Black", sans-serif;
  --body: "Archivo", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }
body { background: var(--night); color: var(--text); font: 400 16px/1.6 var(--body) }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--night) }
a { color: inherit }
:focus-visible { outline: 3px solid var(--sodium); outline-offset: 3px }
h1, h2, h3 { text-wrap: balance; margin: 0 }
p { margin: 0 }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
.eyebrow { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sodium) }
.btn { display: inline-flex; align-items: center; gap: 8px; font: 800 15px/1 var(--body); text-decoration: none; padding: 14px 20px; border-radius: 4px; border: 2px solid var(--sodium); transition: transform .15s ease }
.btn:hover { transform: translateY(-2px) }
.btn.main { background: var(--sodium); color: var(--night) }
.btn.ghost { color: var(--sodium) }
@media (prefers-reduced-motion: reduce) { .btn { transition: none } .btn:hover { transform: none } }

/* nav */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: color-mix(in srgb, var(--night) 88%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line) }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px }
.logo { font: 400 18px/1 var(--display); text-decoration: none; letter-spacing: .02em }
.logo span { color: var(--sodium) }
.nav ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; font-weight: 600; font-size: 14px }
.nav ul a { text-decoration: none; color: var(--dim) }
.nav ul a:hover { color: var(--text) }
@media (max-width: 760px) { .nav ul { display: none } }

/* hero */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line) }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block }
.hero .wrap { position: relative; padding-block: 96px 200px; display: grid; gap: 22px; justify-items: start }
.tag { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 8px 12px; border: 1px dashed var(--sodium); color: var(--sodium); background: color-mix(in srgb, var(--night) 70%, transparent) }
.hero h1 { font: 400 clamp(44px, 8.4vw, 104px)/.92 var(--display); max-width: 11ch; text-shadow: 0 4px 0 #000a }
.hero h1 em { font-style: normal; color: var(--sodium) }
.hero .sub { font-size: clamp(17px, 2vw, 20px); max-width: 46ch; color: var(--text); text-shadow: 0 2px 8px #000 }
.ctas { display: flex; flex-wrap: wrap; gap: 12px }

/* facts strip */
.facts { background: var(--dusk); border-bottom: 1px solid var(--line) }
.facts dl { margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 }
.facts dl > div { padding-block: 20px; padding-inline: 16px; border-left: 1px solid var(--line) }
.facts dl > div:first-child { border-left: 0; padding-left: 0 }
.facts dt { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim) }
.facts dd { margin: 8px 0 0; font: 400 22px/1 var(--display); font-variant-numeric: tabular-nums }
@media (max-width: 760px) {
  .facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .facts dl > div { border-left: 0; padding-left: 0; border-top: 1px solid var(--line) }
  .facts dl > div:nth-child(-n+2) { border-top: 0 }
}

section { padding-block: 88px }
.head { display: grid; gap: 12px; margin-bottom: 40px; max-width: 62ch }
.head h2 { font: 400 clamp(30px, 4.4vw, 48px)/1 var(--display) }
.head p { color: var(--dim); font-size: 18px }

/* loop */
.loop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; counter-reset: step }
.loop article { display: grid; gap: 10px; align-content: start; border-top: 3px solid var(--sodium); padding-top: 18px; min-width: 0 }
.loop article::before { counter-increment: step; content: "STEP " counter(step); font: 500 11px/1 var(--mono); letter-spacing: .14em; color: var(--sodium) }
.loop h3 { font: 800 22px/1.15 var(--body) }
.loop p { color: var(--dim) }
@media (max-width: 900px) { .loop { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 520px) { .loop { grid-template-columns: minmax(0, 1fr) } }

/* highway */
.world { background: var(--dusk); border-block: 1px solid var(--line) }
.road { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px }
@media (max-width: 1000px) { .road { grid-template-columns: repeat(2, minmax(0, 1fr)) } .road .sign:last-child { grid-column: 1 / -1 } }
@media (max-width: 560px) { .road { grid-template-columns: minmax(0, 1fr) } }
.sign { display: grid; gap: 0; align-content: start; min-width: 0 }
.sign .plate { background: var(--hwy); color: var(--hwy-edge); border-radius: 10px; padding: 6px }
.sign .plate > div { border: 2px solid var(--hwy-edge); border-radius: 6px; padding: 12px 14px 14px; display: grid; gap: 6px; align-content: start; min-height: 112px }
.sign .exit { justify-self: start; font: 400 11px/1 var(--display); letter-spacing: .04em; background: var(--hwy-edge); color: var(--hwy); padding: 5px 8px; border-radius: 3px }
.sign h3 { font: 400 22px/1 var(--display); letter-spacing: .01em }
.sign .lv { font: 500 12px/1.3 var(--mono); opacity: .85 }
.sign .post { width: 10px; height: 18px; background: #6c6470; justify-self: center }
.sign .info { display: grid; gap: 6px; padding-top: 10px; font-size: 14.5px; color: var(--dim) }
.sign .info b { color: var(--text); font-weight: 600 }
.sign.final .plate { background: #7a2a1f }
.sign.final .exit { color: #7a2a1f }
.townnote { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px 28px; color: var(--dim) }
.townnote b { color: var(--text) }

/* MehGen ad */
.ad { background: var(--pill); color: var(--pill-ink); border-radius: 6px; display: grid; grid-template-columns: 1.1fr 1fr; overflow: hidden }
@media (max-width: 860px) { .ad { grid-template-columns: minmax(0, 1fr) } }
.ad .copy { padding: 40px; display: grid; gap: 18px; align-content: start; min-width: 0 }
.ad .brand { font: 800 15px/1 var(--body); letter-spacing: .2em; text-transform: uppercase }
.ad .brand sup { font-size: 9px }
.ad h2 { font: 800 clamp(30px, 4vw, 44px)/1.05 var(--body); letter-spacing: -.01em }
.ad .ask { font-size: 18px }
.ad .fine { font: 500 11.5px/1.5 var(--mono); opacity: .8; border-top: 1px solid currentColor; padding-top: 14px }
.ad .stamp { justify-self: start; font: 400 14px/1 var(--display); color: var(--pill-red); border: 3px solid var(--pill-red); padding: 8px 12px; transform: rotate(-4deg) }
.ad .art { background: #c4ebdb; display: grid; place-items: center; padding: 32px; min-width: 0 }
.ad .art svg { width: 100%; max-width: 360px; height: auto }
.story { margin-top: 40px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; list-style: none; padding: 0 }
.story li { display: grid; gap: 4px; align-content: start; padding-left: 14px; border-left: 2px solid var(--line); min-width: 0 }
.story li b { font: 400 15px/1.1 var(--display); color: var(--sodium) }
.story li span { color: var(--dim); font-size: 14.5px }
@media (max-width: 900px) { .story { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 520px) { .story { grid-template-columns: minmax(0, 1fr) } }

/* features */
.feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden }
.feat article { background: var(--night); padding: 26px; display: grid; gap: 8px; align-content: start; min-width: 0 }
.feat h3 { font: 800 19px/1.2 var(--body) }
.feat p { color: var(--dim) }
@media (max-width: 900px) { .feat { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 560px) { .feat { grid-template-columns: minmax(0, 1fr) } }

/* events */
.events { background: var(--dusk); border-block: 1px solid var(--line) }
.ev { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px }
@media (max-width: 900px) { .ev { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 520px) { .ev { grid-template-columns: minmax(0, 1fr) } }
.ev article { border: 1px solid var(--line); border-radius: 6px; padding: 20px; display: grid; gap: 8px; align-content: start; background: var(--night); min-width: 0 }
.ev .meta { font: 500 11.5px/1 var(--mono); color: var(--sodium); letter-spacing: .06em }
.ev h3 { font: 400 19px/1.1 var(--display) }
.ev p { color: var(--dim); font-size: 15px }

/* roadmap */
.map { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 }
.map li { position: relative; padding: 30px 20px 0 0; display: grid; gap: 6px; align-content: start; border-top: 3px solid var(--line); min-width: 0 }
.map li::before { content: ""; position: absolute; top: -10px; left: 0; width: 17px; height: 17px; border-radius: 50%; background: var(--night); border: 3px solid var(--line) }
.map li.done { border-top-color: var(--sodium) }
.map li.done::before { background: var(--sodium); border-color: var(--sodium) }
.map li.now::before { border-color: var(--sodium); box-shadow: 0 0 0 6px color-mix(in srgb, var(--sodium) 25%, transparent) }
.map .when { font: 500 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim) }
.map li.now .when { color: var(--sodium) }
.map h3 { font: 800 20px/1.2 var(--body) }
.map p { color: var(--dim); font-size: 15px }
@media (max-width: 760px) {
  .map { grid-template-columns: minmax(0, 1fr); gap: 0; border-left: 3px solid var(--line); margin-left: 8px }
  .map li { border-top: 0; padding: 0 0 28px 26px }
  .map li::before { top: 2px; left: -10px }
}

/* join */
.join { text-align: left }
.join .box { border: 2px dashed var(--sodium); border-radius: 8px; padding: 44px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center }
@media (max-width: 800px) { .join .box { grid-template-columns: minmax(0, 1fr); padding: 28px } }
.join h2 { font: 400 clamp(30px, 4.4vw, 46px)/1 var(--display) }
.join p { color: var(--dim); font-size: 18px; margin-top: 14px; max-width: 48ch }
.join ol { margin: 0; padding-left: 22px; display: grid; gap: 10px }
.join ol li::marker { font-family: var(--display); color: var(--sodium) }

footer { border-top: 1px solid var(--line); padding-block: 32px; color: var(--dim); font-size: 14px }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px }

.warn { padding-block: 0 88px }
.warnbox { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: start; border-block: 3px solid var(--sodium); padding-block: 32px; background: repeating-linear-gradient(-45deg, transparent 0 18px, color-mix(in srgb, var(--sodium) 6%, transparent) 18px 36px) }
.warntag { font: 400 15px/1.1 var(--display); color: var(--night); background: var(--sodium); padding: 10px 12px; transform: rotate(-3deg); justify-self: start; margin-left: 8px }
.warncopy { display: grid; gap: 14px; justify-items: start; max-width: 62ch }
.warncopy h2 { font: 400 clamp(26px, 3.6vw, 38px)/1.05 var(--display) }
.warncopy p { color: var(--dim); font-size: 17px }
@media (max-width: 700px) { .warnbox { grid-template-columns: minmax(0, 1fr) } }
.punch { font: 400 clamp(20px, 2.6vw, 26px)/1.15 var(--display) !important; color: var(--sodium) !important }
.about .wrap { max-width: 760px; display: grid; gap: 0 }
.ab { padding-block: 48px; border-bottom: 1px solid var(--line); display: grid; gap: 14px }
.ab:last-child { border-bottom: 0 }
.ab h2 { font: 400 clamp(26px, 3.8vw, 38px)/1.05 var(--display) }
.ab p { font-size: 17.5px; color: var(--text) }
.ab a { color: var(--sodium) }
.ab.loud { border-left: 4px solid var(--sodium); padding-left: 24px; background: color-mix(in srgb, var(--sodium) 5%, transparent) }
.ab blockquote { margin: 4px 0; font: 800 clamp(22px, 3vw, 30px)/1.2 var(--body); font-style: italic; color: var(--text) }
.qa { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding-block: 12px; border-block: 1px dashed var(--line) }
.qa + .qa { border-top: 0 }
.qa .q { font-weight: 600 }
.qa .a { font: 400 22px/1 var(--display); color: var(--sodium) }
.jobs { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
.jobs li { border: 1px solid var(--line); border-radius: 4px; padding: 12px 14px; font-weight: 600; background: var(--dusk) }
.jobs li::before { content: "☐ "; color: var(--sodium) }
@media (max-width: 520px) { .jobs { grid-template-columns: minmax(0, 1fr) } }
.outro h2 { color: var(--sodium) }

.brainbox { padding-block: 0 }
.brain { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center; text-decoration: none; border: 2px dashed var(--sodium); border-radius: 8px; padding: 28px 32px; background: var(--dusk); transition: background .15s ease }
.brain:hover { background: color-mix(in srgb, var(--sodium) 10%, var(--dusk)) }
.braincopy { display: grid; gap: 6px }
.braincopy b { font: 400 clamp(20px, 2.6vw, 26px)/1.1 var(--display) }
.braincopy span { color: var(--dim) }
.brain i { font: 800 16px/1 var(--body); font-style: normal; color: var(--sodium); white-space: nowrap }
@media (max-width: 800px) { .brain { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 24px } }

.promise { padding-top: 0 }
.prom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px }
@media (max-width: 760px) { .prom { grid-template-columns: minmax(0, 1fr) } }
.prom article { border: 1px solid var(--line); border-top: 4px solid var(--sodium); border-radius: 6px; padding: 28px; display: grid; gap: 12px; align-content: start; background: var(--dusk); min-width: 0 }
.prom .big { font: 400 56px/1 var(--display); color: var(--sodium) }
.prom h3 { font: 800 22px/1.2 var(--body) }
.prom p { color: var(--dim); font-size: 16.5px }
.prom .note { color: var(--text); font-weight: 600 }

.phases { padding-top: 40px }
.phases .wrap { display: grid; gap: 16px; max-width: 900px }
.overall { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; padding-bottom: 12px }
.overall b { font: 400 48px/1 var(--display); color: var(--sodium) }
.overall span { color: var(--dim); font-size: 15px; display: block; margin-top: 8px }
.bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden }
.bar i { display: block; height: 100%; background: var(--sodium) }
.ph { border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 6px; background: var(--dusk); padding: 24px 26px; display: grid; gap: 18px; min-width: 0 }
.ph.done { border-left-color: var(--sodium) }
.ph.now { border-left-color: var(--sodium); box-shadow: 0 0 0 1px color-mix(in srgb, var(--sodium) 35%, transparent) }
.ph header { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 6px 12px; align-items: center }
.ph .num { font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim) }
.ph .st { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: 3px; border: 1px solid var(--line); color: var(--dim); justify-self: start }
.ph.done .st { background: var(--sodium); border-color: var(--sodium); color: var(--night) }
.ph.now .st { border-color: var(--sodium); color: var(--sodium) }
.ph h2 { grid-column: 1 / -1; font: 400 clamp(22px, 3vw, 28px)/1.1 var(--display) }
.ph header p { grid-column: 1 / -1; color: var(--dim) }
.ph .bar { grid-column: 1 / 4 }
.ph .cnt { font: 500 13px/1 var(--mono); color: var(--dim) }
.ph ul { list-style: none; margin: 0; padding: 0; display: grid }
.ph li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding-block: 10px; border-top: 1px solid var(--line) }
.ph .box { width: 18px; height: 18px; border: 2px solid var(--dim); border-radius: 3px; margin-top: 2px; position: relative }
.ph li.y .box { background: var(--sodium); border-color: var(--sodium) }
.ph li.y .box::after { content: ""; position: absolute; left: 4px; top: 0; width: 5px; height: 10px; border: solid var(--night); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) }
.ph li.y .t { color: var(--text) }
.ph li.n .t { color: var(--dim) }
.ph .d { font: 500 12.5px/1.6 var(--mono); color: var(--sodium); white-space: nowrap }
.ph li.n .d { color: var(--dim) }
.phnote { color: var(--dim); font-size: 14px; padding-top: 8px }
@media (max-width: 560px) {
  .ph { padding: 20px 18px }
  .ph li { grid-template-columns: 22px minmax(0, 1fr) }
  .ph .d { grid-column: 2 }
  .overall b { font-size: 38px }
}

.devlog .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; padding-block: 48px 72px }
.day { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; border-top: 1px solid var(--line); padding-top: 32px }
.day:first-child { border-top: 0; padding-top: 0 }
.dayhead { display: grid; gap: 8px; min-width: 0 }
.dayhead h2, .notes li { overflow-wrap: anywhere }
.dayhead .when { font: 500 13px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sodium) }
.dayhead h2 { font: 400 clamp(26px, 4vw, 40px)/1 var(--display) }
.dayhead p { color: var(--dim); font-size: 18px; max-width: 64ch }
.notes { margin: 0; padding-left: 20px; display: grid; gap: 8px; max-width: 72ch }
.notes b { color: var(--text) }
.day .sub { font: 500 13px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-top: 8px }
.day .sub span { text-transform: none; letter-spacing: 0; color: var(--dim); opacity: .7; margin-left: 8px }
.pairs, .shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 18px }
.dshot, .dpair { margin: 0; display: grid; gap: 8px }
.dshot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: block }
.dshot a:hover img { border-color: var(--sodium) }
figcaption { color: var(--dim); font-size: 14.5px }
.cmp { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); background: var(--dusk) }
.cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block }
.cmp img.b { clip-path: inset(0 calc(100% - var(--p)) 0 0) }
.cmp .bar { position: absolute; top: 0; bottom: 0; left: var(--p); width: 3px; margin-left: -1.5px; background: var(--sodium); box-shadow: 0 0 8px #0009; pointer-events: none }
.cmp .tag { position: absolute; top: 10px; font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; background: #140f17cc; color: var(--text); padding: 6px 8px; border-radius: 4px; pointer-events: none }
.cmp .tag.l { left: 10px } .cmp .tag.r { right: 10px }
.cmp input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize }
.cmp:focus-within .bar { width: 5px }

.testers .wrap { display: grid; gap: 18px; max-width: 760px; padding-block: 32px 72px }
.tstats { display: grid; grid-template-columns: 2fr 1fr; gap: 12px }
.tstat { display: grid; gap: 6px; padding: 18px 20px; border: 1px solid var(--sodium); border-radius: 6px; background: color-mix(in srgb, var(--dusk) 60%, transparent) }
.tstat .tlab { font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim) }
.tstat b { font: 400 clamp(30px, 6vw, 44px)/1 var(--display); color: var(--sodium) }
.tadded { margin: -6px 0 0; font: 500 13px/1.4 var(--mono); color: var(--dim) }
.tnote { color: var(--dim); font-size: 17px; margin: 0 }
.tsmall { color: var(--dim); font-size: 14px; margin: 0; opacity: .8 }
.tlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.tlist li { display: grid; grid-template-columns: 40px 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 6px; background: color-mix(in srgb, var(--dusk) 60%, transparent) }
.tlist li.top { border-color: var(--sodium) }
.tlist .rk { font: 400 22px/1 var(--display); color: var(--dim); text-align: center }
.tlist li.top .rk { color: var(--sodium) }
.tlist img { width: 44px; height: 44px; border-radius: 4px; background: var(--line); display: block }
.tlist .nm { font-weight: 600; overflow-wrap: anywhere }
.tlist .dev { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 4px; background: var(--sodium); color: #111; font: 700 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px }
.tlist .tm { font: 500 15px/1 var(--mono); color: var(--text); white-space: nowrap }
@media (max-width: 480px) { .tlist li { grid-template-columns: 28px 36px minmax(0, 1fr) auto; gap: 10px; padding: 8px 10px } .tlist img { width: 36px; height: 36px } }

html, body { margin: 0 }
[hidden] { display: none !important }
img { max-width: 100% }
.navbtn { padding: 10px 14px; font-size: 14px }
.nav ul a[aria-current="page"] { color: var(--sodium) }
.pagehead { border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #2a1a2c, var(--night)) }
.pagehead .wrap { padding-block: 64px 48px; display: grid; gap: 14px }
.pagehead h1 { font: 400 clamp(36px, 6vw, 68px)/.95 var(--display) }
.pagehead p { color: var(--dim); font-size: 18px; max-width: 60ch }
.explore { background: var(--dusk); border-block: 1px solid var(--line) }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 520px) { .cards { grid-template-columns: minmax(0, 1fr) } }
.cards a { text-decoration: none; background: var(--night); border: 1px solid var(--line); border-radius: 6px; padding: 22px; display: grid; gap: 8px; align-content: start; transition: border-color .15s ease }
.cards a:hover { border-color: var(--sodium) }
.cards b { font: 400 19px/1.1 var(--display) }
.cards span { color: var(--dim) }
.cards i { font: 500 12px/1 var(--mono); font-style: normal; color: var(--sodium); margin-top: 6px }
.soon { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 }
.soon li { display: flex; justify-content: space-between; gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--line) }
.soon li:last-child { border-bottom: 0 }
.soon b { font: 500 12px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim) }
.mapscope .wrap { display: grid; gap: 16px }
.mapnav button { font-size: 14px; padding: 9px 14px }
.mapscope .legend { font-size: 13.5px }
.mapnote { color: var(--dim); font-size: 14px }
footer .flinks a { text-decoration: none }
footer .flinks a:hover { color: var(--text) }