@font-face { font-family: "Bespoke Stencil"; src: url("/assets/fonts/bespoke-stencil-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Bespoke Stencil"; src: url("/assets/fonts/bespoke-stencil-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* Same street-at-night palette as Eyes Off Stark: one brand family. */
:root {
  --asphalt: #121110;
  --raised: #1a1815;
  --seam: #2a2722;
  --bone: #ece4d3;
  --dim: #a39b8c;
  --sodium: #c99a55;
  --sodium-lo: #8a6a3d;
  --stencil: "Bespoke Stencil", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1240px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--asphalt); color: var(--bone); font: 400 1.0625rem/1.6 var(--body); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
sup { font-size: .62em; line-height: 0; }
sup a { color: var(--sodium); text-decoration: none; padding: 0 .1em; }
sup a:hover { color: var(--bone); }
strong { font-weight: 650; }
:focus-visible { outline: 2px solid var(--sodium); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--bone); color: var(--asphalt); padding: 10px 14px; font-weight: 600; }
.skip:focus { top: 16px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
section[id] { scroll-margin-top: 72px; }

/* Nav: rides on the map's dark sea, solidifies once you scroll past the hero. */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 20;
  display: flex; align-items: center; gap: 24px;
  padding: 14px var(--gutter);
  transition: background-color .3s;
}
.nav.is-solid { background: var(--asphalt); }
.nav__mark { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 1.05rem/1 var(--stencil); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.nav__eye { width: 30px; height: 18px; }
.nav__links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav__links a { text-decoration: none; color: var(--dim); font-size: .92rem; padding: 8px 12px; transition: color .2s; }
.nav__links a:hover { color: var(--bone); }
.nav__links .nav__cta { color: var(--asphalt); background: var(--bone); font-weight: 650; padding: 8px 16px; border-radius: 3px; transition: background-color .2s; }
.nav__links .nav__cta:hover { color: var(--asphalt); background: var(--sodium); }
@media (max-width: 640px) { .nav__links a:not(.nav__cta) { display: none; } }

/* Hero: the map IS the hero. Its south edge dissolves into the page so the headline sits on open asphalt. */
.atlas { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; overflow: clip; }
.atlas__map {
  position: relative; margin: 0; justify-self: center; align-self: start;
  width: min(100%, calc(100svh * 1.6)); aspect-ratio: 1950 / 1220;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgb(0 0 0 / .86) 70%, rgb(0 0 0 / .62) 77%, rgb(0 0 0 / .38) 84%, rgb(0 0 0 / .18) 91%, rgb(0 0 0 / .06) 96%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgb(0 0 0 / .86) 70%, rgb(0 0 0 / .62) 77%, rgb(0 0 0 / .38) 84%, rgb(0 0 0 / .18) 91%, rgb(0 0 0 / .06) 96%, transparent 100%);
}
.atlas__map img { width: 100%; height: 100%; }
.reticle { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--bone); pointer-events: none; }
.reticle__g { transition: transform 1.1s cubic-bezier(.65, 0, .25, 1); }
.reticle__g circle { animation: lock 3.4s ease-out infinite; }
@keyframes lock { 0%, 30% { stroke-width: 1.6; } 34% { stroke-width: 3.2; } 44%, 100% { stroke-width: 1.6; } }
.readout {
  position: absolute; margin: 0; left: 0; top: 0;
  display: grid; gap: 2px; padding: 4px 0 0 14px;
  font: 500 .74rem/1.35 var(--mono); color: rgb(236 228 211 / .82); white-space: nowrap;
  text-shadow: 0 0 6px var(--asphalt), 0 0 2px var(--asphalt);
  transition: transform 1.1s cubic-bezier(.65, 0, .25, 1), opacity .3s;
}
.readout__count { color: var(--sodium); }
.readout.is-left { padding: 4px 14px 0 0; text-align: right; }
@media (prefers-reduced-motion: reduce) { .reticle__g, .readout { transition: none; } .reticle__g circle { animation: none; } }

.atlas__words {
  position: relative; z-index: 1;
  width: min(100% - 2 * var(--gutter), 1500px); margin: -16vw auto 0;
  padding-bottom: clamp(28px, 5vh, 56px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 31rem); gap: 18px clamp(24px, 4vw, 64px);
}
@media (min-aspect-ratio: 16/10) { .atlas__words { margin-top: calc(-100svh * .26); } }
.atlas__title {
  grid-column: 1 / -1;
  margin: 0; font: 700 clamp(3.2rem, 8.6vw, 9rem)/.86 var(--stencil); text-transform: uppercase; letter-spacing: .005em;
  text-shadow: 0 2px 14px rgb(18 17 16 / .9);
  white-space: nowrap;
}
.atlas__lede { grid-column: 2; margin: 0; color: rgb(236 228 211 / .86); font-size: 1.08rem; text-wrap: pretty; }
.atlas__lede strong { color: var(--bone); }
.atlas__go { display: inline-flex; align-items: center; gap: 6px; margin-left: .3em; color: var(--sodium); font-weight: 650; text-decoration: none; white-space: nowrap; }
.atlas__go svg { width: 12px; height: 12px; transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.atlas__go:hover { color: var(--bone); }
.atlas__go:hover svg { transform: translate(2px, -2px); }
@media (max-width: 900px) {
  .atlas { min-height: 0; }
  .atlas__map { margin-top: 64px; }
  .atlas__words { grid-template-columns: 1fr; margin-top: -6vw; }
  .atlas__lede { grid-column: 1; }
  .atlas__title { white-space: normal; font-size: clamp(3.4rem, 17vw, 7rem); }
  .readout { font-size: .64rem; }
}

/* Ledger: the receipts, set as one long column of big figures. */
.ledger { padding: clamp(90px, 14vh, 150px) 0 clamp(70px, 10vh, 120px); }
.ledger__title { margin: 0 0 clamp(36px, 6vh, 64px); font: 700 clamp(2.4rem, 6vw, 5rem)/.92 var(--stencil); text-transform: uppercase; }
.ledger__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(28px, 4.5vh, 44px); }
.ledger__list li { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 8px clamp(20px, 4vw, 60px); align-items: baseline; }
.ledger__list b { font: 700 clamp(3rem, 8.5vw, 7.4rem)/.9 var(--stencil); color: var(--sodium); letter-spacing: .02em; text-align: right; font-variant-numeric: tabular-nums; }
.ledger__list p { margin: 0; max-width: 34ch; color: rgb(236 228 211 / .86); font-size: 1.12rem; }
@media (max-width: 700px) {
  .ledger__list li { grid-template-columns: 1fr; }
  .ledger__list b { text-align: left; }
}

/* What we want: one big plank, then four that share a row. */
.want { padding: clamp(70px, 10vh, 120px) 0; background: var(--raised); }
.planks { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(36px, 6vh, 60px) clamp(20px, 3vw, 44px); }
.plank { margin: 0; }
.plank dt { font: 700 clamp(1.5rem, 2.3vw, 2rem)/1 var(--stencil); text-transform: uppercase; margin-bottom: 12px; text-wrap: balance; }
.plank dd { margin: 0; color: rgb(236 228 211 / .8); }
.plank--lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 16px clamp(24px, 4vw, 60px); align-items: end; }
.plank--lead dt { font-size: clamp(2.6rem, 6.4vw, 5.6rem); line-height: .9; margin: 0; }
.plank--lead dd { font-size: 1.2rem; color: var(--bone); padding-bottom: .4em; }
@media (max-width: 960px) { .planks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .planks, .plank--lead { grid-template-columns: 1fr; } }

/* Chapters: Stark is a crop of the same map, ringed on East Canton. */
.chapters { padding: clamp(90px, 13vh, 140px) 0 clamp(60px, 9vh, 100px); }
.chapters__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.chapter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); text-decoration: none; background: var(--raised); border-radius: 6px; overflow: hidden; box-shadow: inset 0 1px 0 rgb(236 228 211 / .05); }
/* The crop is an SVG viewBox on East Canton (1495, 476 on the 1950 x 1220 map), so any box shape stays centered on it. */
.chapter__view { position: relative; min-height: 220px; color: var(--bone); background: var(--asphalt); }
.chapter__view svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.chapter__text { display: grid; align-content: center; gap: 10px; padding: clamp(20px, 3vw, 36px); }
.chapter__name { font: 700 clamp(1.7rem, 3vw, 2.4rem)/1 var(--stencil); text-transform: uppercase; }
.chapter__what { color: rgb(236 228 211 / .8); }
.chapter__go { display: inline-flex; align-items: center; gap: 6px; color: var(--sodium); font-weight: 650; }
.chapter__go svg { width: 12px; height: 12px; transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.chapter:hover .chapter__go { color: var(--bone); }
.chapter:hover .chapter__go svg { transform: translate(2px, -2px); }
.chapters__title { margin: 0 0 16px; font: 700 clamp(2.2rem, 4.6vw, 3.8rem)/.92 var(--stencil); text-transform: uppercase; }
.chapters__next p { margin: 0; color: rgb(236 228 211 / .84); max-width: 36ch; font-size: 1.1rem; }
@media (max-width: 860px) { .chapters__grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .chapter { grid-template-columns: 1fr; } .chapter__view { min-height: 0; aspect-ratio: 16 / 10; } }

/* Join */
.join { padding: clamp(60px, 9vh, 110px) 0 clamp(90px, 13vh, 140px); }
.join__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.join__title { margin: 0; font: 700 clamp(3rem, 7.6vw, 6.6rem)/.88 var(--stencil); text-transform: uppercase; position: sticky; top: 96px; }
@media (max-width: 860px) { .join__grid { grid-template-columns: 1fr; } .join__title { position: static; } }
.form { display: grid; gap: 16px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 480px) { .form .row { grid-template-columns: 1fr; } }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
.form input:not([type=checkbox]), .form textarea {
  width: 100%; font: 400 1.02rem/1.4 var(--body); color: var(--bone);
  background: var(--raised); border: 1px solid var(--seam); border-radius: 4px; padding: 12px 13px;
  transition: border-color .2s;
}
.form input:focus, .form textarea:focus { outline: none; border-color: var(--sodium); }
.form textarea { resize: vertical; }
.form fieldset { margin: 4px 0; padding: 0; border: 0; display: grid; gap: 10px; }
.form legend { font-weight: 600; font-size: .95rem; margin-bottom: 10px; padding: 0; }
.form .check { display: flex; align-items: center; gap: 12px; font-weight: 400; font-size: 1rem; cursor: pointer; }
.form .check input { width: 20px; height: 20px; margin: 0; accent-color: var(--sodium); flex: none; }
.hint { font-weight: 400; color: var(--dim); font-size: .9rem; margin: 0; }
.hint a { color: var(--bone); text-underline-offset: 3px; }
.turnstile:not(:empty) { margin: 0; }
.form__error { margin: 0; color: #e7a48f; font-weight: 600; }
.form__go, .done__share {
  justify-self: start; font: 700 1.25rem/1 var(--stencil); text-transform: uppercase; letter-spacing: .03em;
  color: var(--asphalt); background: var(--bone); border: 0; border-radius: 4px; padding: 16px 34px; cursor: pointer;
  transition: background-color .2s;
}
.form__go:hover, .done__share:hover { background: var(--sodium); }
.form__go[disabled] { opacity: .6; cursor: progress; }
.done { grid-column: 2; }
@media (max-width: 860px) { .done { grid-column: 1; } }
.done:focus { outline: none; }
.done__title { margin: 0 0 14px; font: 700 clamp(2.6rem, 6vw, 4.6rem)/.9 var(--stencil); text-transform: uppercase; }
.done p { margin: 0 0 22px; color: rgb(236 228 211 / .86); max-width: 40ch; }

/* Footer */
.foot { padding: 40px 0 48px; background: #0d0c0b; color: var(--dim); font-size: .92rem; }
.foot__grid { display: grid; grid-template-columns: 1fr auto; gap: 14px 32px; align-items: baseline; }
.foot__line, .foot__links { margin: 0; }
.foot__links { display: flex; gap: 20px; }
.foot a { color: var(--bone); text-underline-offset: 3px; text-decoration-color: var(--sodium-lo); }
.sources { grid-column: 1 / -1; }
.sources summary { cursor: pointer; color: var(--bone); width: max-content; }
.sources ol { margin: 14px 0 0; padding-left: 1.4em; display: grid; gap: 8px; max-width: 90ch; }
.sources li:target { color: var(--bone); }
.sources code { font: .88em var(--mono); }
@media (max-width: 600px) { .foot__grid { grid-template-columns: 1fr; } }