@font-face { font-family: "Newsreader"; src: url(/fonts/newsreader.woff2) format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(/fonts/newsreader-italic.woff2) format("woff2"); font-weight: 400 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Mulish"; src: url(/fonts/mulish.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }

/* Brand palette (Brand/prompts.txt). Coral is for the map pin only. */
:root {
  --navy: #152236;
  --cream: #F3EAD7;
  --slate: #53657A;
  --map: #7D98AC;
  --sans: "Avenir Next", Avenir, Mulish, "Helvetica Neue", sans-serif;
  --serif: Newsreader, "New York", Georgia, serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--navy); color: var(--cream); font: 400 1.0625rem/1.55 var(--sans); }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:focus-visible { outline: 2px solid var(--map); outline-offset: 4px; border-radius: 2px; }
h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; margin: 0; }
h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.1; margin-bottom: 1.6rem; }
p { margin: 0; }

/* The plate: a night map with graticule and contours, the print stack on top. */
.plate { position: relative; overflow: hidden; padding: 1.5rem clamp(1.25rem, 5vw, 4rem) clamp(3rem, 8vw, 6rem); }
.graticule { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; }
.graticule .grid { stroke: var(--map); stroke-width: 1; opacity: .16; }
.graticule .contours { stroke: var(--slate); stroke-width: 2; opacity: .55; }
.masthead { position: relative; display: flex; align-items: center; justify-content: space-between; max-width: 72rem; margin: 0 auto; font-size: .95rem; }
.wordmark { display: inline-flex; align-items: center; gap: .6rem; font-weight: 650; font-size: 1.3rem; letter-spacing: -.02em; text-decoration: none; }
.wordmark svg { width: 2.2rem; height: 2.2rem; }

.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); max-width: 72rem; margin: clamp(3rem, 8vw, 6rem) auto 0; }
.hero h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); line-height: 1.02; max-width: 12ch; margin-bottom: 1.5rem; }
.hero p { max-width: 36rem; font-size: 1.15rem; color: color-mix(in srgb, var(--cream) 82%, var(--navy)); }
.stack { width: 100%; max-width: 30rem; justify-self: end; filter: drop-shadow(0 18px 24px rgb(5 12 24 / .45)); }

/* The one moment of motion: the pin lands on the map. */
.pin { animation: drop .7s cubic-bezier(.3, 1.5, .5, 1) .35s both; }
@keyframes drop { from { transform: translateY(-90px); opacity: 0; } 40% { opacity: 1; } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .pin { animation: none; } }

/* Sections alternate paper and plate, like an atlas. */
section { padding: clamp(3.5rem, 9vw, 6.5rem) clamp(1.25rem, 5vw, 4rem); }
.column { max-width: 44rem; margin: 0 auto; }
.paper { background: var(--cream); color: var(--navy); }
.paper p { font-size: 1.125rem; }
.note { margin-top: 2rem; max-width: 38rem; }
.legend .note { color: color-mix(in srgb, var(--cream) 82%, var(--navy)); }

/* Gazetteer: the atlas index, with dotted leaders out to an example search in map italic. */
.gazetteer { list-style: none; margin: 0; padding: 0; }
.gazetteer li { display: flex; align-items: baseline; gap: .6rem; padding: .55rem 0; font-size: 1.2rem; }
.gazetteer .term { font-weight: 600; }
.gazetteer .leader { flex: 1; min-width: 2rem; border-bottom: 2px dotted color-mix(in srgb, var(--slate) 60%, transparent); transform: translateY(-.3em); }
.gazetteer em { font-family: var(--serif); font-size: 1.3rem; color: var(--slate); text-align: right; }

/* Legend: map-key symbols for the three kinds of duplicate. */
.legend dl { margin: 0; display: grid; gap: 1.4rem; }
.legend dt { display: flex; align-items: center; gap: .9rem; font-weight: 600; font-size: 1.2rem; }
.legend dt svg { width: 2.5rem; height: 2rem; flex: none; fill: none; stroke: var(--cream); stroke-width: 2; stroke-linejoin: round; }
.legend dt svg rect + rect { fill: var(--navy); }
.legend dd { margin: .2rem 0 0 3.4rem; color: color-mix(in srgb, var(--cream) 78%, var(--navy)); }

footer { box-sizing: content-box; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; max-width: 72rem; margin: 0 auto; padding: 2.5rem clamp(1.25rem, 5vw, 4rem); font-size: .95rem; color: color-mix(in srgb, var(--cream) 75%, var(--navy)); }

/* Privacy page */
.page { max-width: 40rem; margin: 0 auto; padding: 2rem clamp(1.25rem, 5vw, 4rem) 5rem; }
.page .masthead { margin-bottom: 4rem; }
.page h1 { font-size: clamp(2.4rem, 6vw, 3.4rem); margin-bottom: 1.5rem; }
.page p { margin-bottom: 1rem; font-size: 1.125rem; }

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
  .stack { justify-self: center; max-width: 18rem; order: -1; }
  .gazetteer li { flex-wrap: wrap; gap: 0 .6rem; }
  .gazetteer .leader { display: none; }
  .gazetteer em { flex-basis: 100%; text-align: left; font-size: 1.15rem; }
}

/* Download: the unlock form on the plate. Cream controls; coral stays on the pin. */
[hidden] { display: none !important; }  /* the form and link set display, which would beat hidden */
.download p { max-width: 38rem; color: color-mix(in srgb, var(--cream) 82%, var(--navy)); }
#reveal { margin-top: 2rem; }
#reveal form { display: flex; flex-wrap: wrap; gap: .6rem; }
#reveal input, #reveal button, .button { font: inherit; font-size: 1rem; padding: .7rem 1rem; border-radius: .5rem; }
#reveal input { flex: 1 1 11rem; min-width: 0; background: transparent; color: var(--cream); border: 1px solid color-mix(in srgb, var(--cream) 45%, transparent); }
#reveal input::placeholder { color: color-mix(in srgb, var(--cream) 55%, var(--navy)); }
#reveal button, .button { background: var(--cream); color: var(--navy); border: 1px solid var(--cream); font-weight: 650; cursor: pointer; text-decoration: none; display: inline-block; }
#reveal input:focus-visible, #reveal button:focus-visible, .button:focus-visible { outline: 2px solid var(--map); outline-offset: 3px; }
.reveal-msg:not(:empty) { margin-top: 1rem; }
.release { margin-top: .9rem; font-size: .95rem; }