/* The site's paper and ink. Stop cards, place names and region names are drawn into the map exactly
   as styled here, so nothing that matters may lie outside an element's border box. */

@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader.woff2") format("woff2"); font-weight: 200 800; font-style: normal; }
@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; }
@font-face { font-family: "Source Sans 3"; src: url("/fonts/source-sans-3.woff2") format("woff2"); font-weight: 200 900; }

:root {
  --paper: #fdfcf9;
  --paper-2: #f6f2eb;
  --ink: #221c16;
  --ink-2: #615548;
  --rule: #221c161f;
  --accent: #9e4f2c;
  --display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --body: "Source Sans 3", -apple-system, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); }
body { margin: 0; font: 400 17px/1.5 var(--body); }
html[data-depth] { background: #d8cdb6; overflow: hidden; }

/* The page. Every drawable element is a child of #journeys: on the map they must be the canvas's own. */
#journeys {
  display: grid;
  grid-template-columns: repeat(2, 340px);
  justify-content: center;
  gap: 16px 24px;
  padding: 0 24px 160px;
}
#journeys[data-depth] { display: block; height: 100vh; padding: 0; }
.stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.intro, .journey-title { grid-column: 1 / -1; text-align: center; }
.intro { padding: 120px 0 40px; max-width: 760px; justify-self: center; }
.intro .kicker { margin: 0; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.intro h1 { margin: 16px 0 20px; font: 350 88px/1 var(--display); letter-spacing: -0.03em; }
.intro .lede { margin: 0 auto; max-width: 32ch; font: italic 400 24px/1.4 var(--display); color: var(--ink-2); }
.intro .note { margin: 28px auto 0; max-width: 56ch; font-size: 14px; color: var(--ink-2); }

.journey-title { margin: 72px 0 16px; }
.journey-title h2 { margin: 0; font: 400 44px/1.1 var(--display); letter-spacing: -0.02em; }
.journey-title h2::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 14px; border-radius: 50%; background: var(--c); vertical-align: 0.15em; }
.journey-title .meta { margin: 6px 0 0; font-size: 15px; color: var(--ink-2); }
.journey-title .summary { margin: 12px auto 0; max-width: 46ch; font: italic 400 20px/1.4 var(--display); color: var(--ink-2); }

.stop {
  width: 340px;
  padding: 16px 20px 16px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 4px 0 var(--c);
}
.stop .num { margin: 0; font: 600 12px var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 70%, #000); }
.stop h3 { margin: 4px 0 0; font: 400 28px/1.1 var(--display); letter-spacing: -0.01em; }
.stop .where { margin: 2px 0 8px; font-size: 14px; color: var(--ink-2); }
.stop .text { margin: 0; color: var(--ink-2); }
.stop .refs { margin: 10px 0 0; font: italic 400 17px/1.3 var(--display); }
.stop .letters { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--ink-2); }
.stop .letters b { font-weight: 600; color: var(--ink); }

/* Only the map shows these: place names standing over their cities, and region names on the land. */
.place, .region { display: none; }
#journeys[data-depth] :is(.place, .region) { display: block; width: fit-content; }
.place {
  padding: 3px 10px 4px;
  border-radius: 999px;
  background: #fdfcf9ee;
  font: 600 15px/1.2 var(--body);
  color: var(--ink);
  white-space: nowrap;
}
.place[data-current] { background: var(--c); color: #fff; }
.place[data-hover] { background: var(--ink); color: var(--paper); }
.region {
  font: italic 500 30px/1 var(--display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #3b3122;
  white-space: nowrap;
}
.region.sea { color: #1f4f61; letter-spacing: 0.3em; }
.region.big { font-size: 56px; }

/* Chrome around the map */
.hud {
  position: fixed;
  inset: 0 0 auto;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  pointer-events: none;
}
html:not([data-depth]) .hud { background: linear-gradient(var(--paper) 65%, transparent); }
.hud > * { pointer-events: auto; }
.brand { font: 400 18px var(--display); color: inherit; text-decoration: none; }
.hud .actions { display: flex; gap: 8px; }
.hud button {
  font: 600 14px var(--body);
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 7px 10px 7px 16px;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.hud .help-button { padding: 0; width: 36px; }
kbd { font: 500 12px ui-monospace, monospace; padding: 2px 6px; border-radius: 6px; background: color-mix(in srgb, currentColor 10%, transparent); }

.readout {
  position: fixed;
  left: 24px;
  top: 72px;
  z-index: 2;
  max-width: 22em;
  padding: 14px 18px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  border: 1px solid var(--rule);
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.readout p { margin: 0; }
.readout .journey { font: 600 13px var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.readout .here { font: 400 30px/1.15 var(--display); margin-top: 4px; }
.readout .hint { margin-top: 8px; font-size: 13px; color: var(--ink-2); }

.picker {
  position: fixed;
  left: 50%;
  bottom: 18px;
  translate: -50% 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  border: 1px solid var(--rule);
  backdrop-filter: blur(8px);
}
.picker button {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  font: 600 14px var(--body);
}
.picker button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.picker button kbd { order: 2; opacity: 0.6; }
.picker button[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 24%, transparent); }
.picker button:focus-visible { outline: 2px solid var(--c); }

.help { position: fixed; inset: 0; z-index: 3; display: grid; place-items: center; background: #0008; backdrop-filter: blur(4px); }
.help .panel { width: min(560px, 100% - 32px); padding: 28px 32px; border-radius: 18px; background: var(--paper); }
.help h2 { margin: 0 0 12px; font: 400 32px var(--display); }
.help dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin: 0; }
.help dt { white-space: nowrap; }
.help dd { margin: 0; color: var(--ink-2); }
.help p { margin: 18px 0 0; font: italic 400 17px var(--display); }

[hidden] { display: none !important; }

@media (max-width: 760px) {
  .intro h1 { font-size: 56px; }
  #journeys { grid-template-columns: minmax(0, 340px); }
  .stop { width: 100%; }
}

.intro .note a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.credit { position: fixed; right: 12px; bottom: 10px; z-index: 1; margin: 0; padding: 3px 8px; border-radius: 6px; font-size: 11px; color: var(--ink-2); background: color-mix(in srgb, var(--paper) 82%, transparent); }
.credit a { color: inherit; }
.intro .open-3d { margin: 32px auto 0; padding: 14px 28px; font: 600 17px var(--body); color: var(--paper); background: var(--accent); border: 0; border-radius: 999px; cursor: pointer; box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--accent) 80%, black); transition: transform 0.2s, box-shadow 0.2s; }
.intro .open-3d:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--accent) 90%, black); }
.intro .open-3d:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.intro .open-3d[hidden] { display: none; }