/* sprawl — parcelscope's chrome with roads instead of boxes. Cream day theme,
   dim theme toggled with body.dim. The map fills the page, which does not
   scroll: a wheel or trackpad over the map zooms it. The story is a panel
   opened from the card (body.story-open), right side on a desk, a sheet from
   the bottom on a phone. */
:root {
  --bg: #f4efe6;
  --water: #b9c6cf;
  --ink: #2a2622;
  --ink-soft: #6a625a;
  --card: rgba(250, 247, 241, 0.95);
  --line: rgba(42, 38, 34, 0.14);
  --accent: #8b1a1a;
  --story-bg: #f9f6f0;
}
body.dim {
  --bg: #17181c;
  --water: #2d3a45;
  --ink: #ece7dd;
  --ink-soft: #a39c91;
  --card: rgba(24, 25, 30, 0.9);
  --line: rgba(236, 231, 221, 0.16);
  --accent: #e2735a;
  --story-bg: #1d1e23;
}
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink);
  font: 15px/1.45 -apple-system, "Helvetica Neue", Segoe UI, Roboto, sans-serif; }
#map { position: fixed; inset: 0; background: var(--bg); }

.card { position: fixed; top: 16px; left: 16px; z-index: 5; width: 300px; max-width: calc(100vw - 32px);
  padding: 14px 16px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.12); backdrop-filter: blur(6px); transition: opacity 0.25s; }
.card h1 { margin: 0 0 6px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.wordmark { color: var(--accent); }
.card select { font: inherit; font-weight: 600; color: var(--ink); background: transparent; border: 0;
  border-bottom: 1px dashed var(--ink-soft); padding: 0; cursor: pointer; }
.sentence { margin: 0 0 4px; }
.near { margin: 0 0 6px; font-size: 12px; color: var(--accent); }
.caveat { margin: 0 0 8px; color: var(--ink-soft); font-size: 13px; }
.year-row { display: flex; align-items: baseline; justify-content: space-between; }
.year { font-size: 48px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.theme { font: inherit; font-size: 12px; color: var(--ink-soft); background: none; border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 9px; cursor: pointer; }
.controls { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.play { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--ink); color: var(--bg);
  font-size: 15px; cursor: pointer; flex: none; padding: 0 0 0 3px; }
.play.playing { padding: 0; }
.slider-wrap { flex: 1; min-width: 0; }
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 5px; margin: 0;
  background: linear-gradient(90deg, #888, #888); outline: none; cursor: pointer; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 22px; border-radius: 4px;
  background: var(--card); border: 1.5px solid var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.slider::-moz-range-thumb { width: 16px; height: 22px; border-radius: 4px; background: var(--card); border: 1.5px solid var(--ink); }
.ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-soft); margin-top: 3px;
  font-variant-numeric: tabular-nums; }
.story-toggle { display: block; width: 100%; margin: 10px 0 0; padding: 7px 10px; font: inherit; font-size: 13px;
  font-weight: 600; text-align: left; color: var(--ink); background: none; border: 1px solid var(--line);
  border-radius: 6px; cursor: pointer; }
.story-toggle:hover { background: rgba(127,127,127,0.08); }
.story-toggle span { float: right; color: var(--ink-soft); }
body.story-open .story-toggle { display: none; }

/* Event caption on the map: a zero-size anchor at the ring, the caption
   hangs to its upper right, or upper left (.flip) near the right edge. */
.caption-anchor { width: 0; height: 0; position: relative; pointer-events: none; }
.caption-anchor .caption { position: absolute; bottom: 16px; left: 18px; width: 230px; }
.caption-anchor.flip .caption { left: auto; right: 18px; }
.caption { pointer-events: none; max-width: 230px; padding: 6px 9px; background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 6px; font-size: 13px; line-height: 1.35;
  box-shadow: 0 3px 12px rgba(0,0,0,0.15); }
.caption b { display: block; font-size: 12px; color: var(--ink-soft); font-weight: 600; letter-spacing: 0.02em; }
.caption strong { font-weight: 600; }
/* Held at an event for five seconds: a small pill says how to go on, and the
   play button breathes. Not before, so the reader is never hurried. */
.nudge { position: fixed; z-index: 5; left: 50%; bottom: 40px; transform: translate(-50%, 6px);
  padding: 6px 14px; border-radius: 999px; background: var(--ink); color: var(--card);
  font-size: 13px; letter-spacing: 0.02em; box-shadow: 0 3px 12px rgba(0,0,0,0.2);
  opacity: 0; pointer-events: none; transition: opacity 0.6s ease, transform 0.6s ease; }
body.nudging .nudge { opacity: 0.88; transform: translate(-50%, 0); }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 31, 143, 0.45); } 50% { box-shadow: 0 0 0 7px rgba(255, 31, 143, 0); } }
body.nudging .play { animation: breathe 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { body.nudging .play { animation: none; } .nudge { transition: none; } }
/* Its sources, as in the panel; clickable only while the caption shows. */
.caption .src { font-size: 11px; color: var(--ink-soft); }
.caption .src a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.caption .src a:hover { color: var(--accent); }
.caption-anchor.live .caption .src a { pointer-events: auto; }
body.held #map { cursor: pointer; }

/* Segment popup */
.maplibregl-popup-content { background: var(--card); color: var(--ink); font: 13px/1.4 inherit; border-radius: 6px; padding: 8px 10px; }
.maplibregl-popup-tip { border-top-color: var(--card) !important; }

/* The story: docked under the card, the same width, so card and story are
   one column on the left and the map keeps everything to its right. --story-top
   is the card's bottom edge, set from js. It follows the year (.now marks the
   era and events the slider is in) and a click in it moves the slider. */
.story { position: fixed; z-index: 6; top: var(--story-top, 16px); left: 16px; bottom: 16px; width: 332px; max-width: calc(100vw - 34px);
  display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.12); backdrop-filter: blur(6px);
  transform: translateX(calc(-100% - 24px)); visibility: hidden; transition: transform 0.3s ease, visibility 0s 0.3s; }
body.story-open .story { transform: none; visibility: visible; transition: transform 0.3s ease; }
.story-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 8px 16px;
  border-bottom: 1px solid var(--line); flex: none; }
.story-title { font-weight: 600; }
.story-close { font: inherit; font-size: 20px; line-height: 1; width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: none; color: var(--ink-soft); cursor: pointer; }
.story-close:hover { background: rgba(127,127,127,0.12); }
.story-body { overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 24px; }
.story section { margin: 0 0 26px; }
.story h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin: 0 0 8px; }
.eras { list-style: none; margin: 0; padding: 0; }
.eras li { display: block; padding: 8px 6px 8px 9px; margin: 0 -6px;
  border-top: 1px solid var(--line); border-radius: 4px; cursor: pointer; font-size: 14px; }
.eras li:hover { background: rgba(127,127,127,0.08); }
.eras li.now:hover { background: rgba(127,127,127,0.13); }
.eras li.now { background: rgba(127,127,127,0.13); box-shadow: inset 3px 0 0 var(--accent); }
/* An event inside its era: the map caption's look, so the two read as one thing. */
.eras .event { margin: 8px 0 2px; padding: 6px 9px; border-left: 3px solid var(--line); border-radius: 0 4px 4px 0;
  font-size: 13px; line-height: 1.4; }
.eras .event:hover { background: rgba(127,127,127,0.1); }
.eras .event.now { border-left-color: var(--accent); background: var(--card); }
.eras .event b { color: var(--ink-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
.eras .event strong { font-weight: 600; }
.eras .when { margin-bottom: 1px; font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: 12px; padding-top: 2px; }
.eras .when i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.eras h3 { margin: 0 0 2px; font-size: 15px; font-weight: 600; }
.eras p, #about-text p { margin: 0; }
#about-text p { margin-bottom: 10px; font-size: 14px; }
/* Citations after a sentence: quiet, but a real link. */
.eras .src { font-size: 11px; color: var(--ink-soft); white-space: normal; }
.eras .src a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.eras .src a:hover { color: var(--accent); }
.sources { font-size: 12px; color: var(--ink-soft); }
.sources a, .story a { color: inherit; }

/* On a desk the story docks under the card, sliding in from the left: it
   opens from the card's button, or by itself once a play has run to the end. */
@media (min-width: 521px) {
  .story-body { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 36px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 36px), transparent 100%); }
}

/* The phone's event note (#note): one box at the foot of the screen, full
   width, body type, instead of a 230 px caption hung beside its ring. Never
   shown on a desk. */
.note { display: none; }

@media (max-width: 520px) {
  /* A compact card (2026-11-05, "the top banner is way too big"): the year
     moves up beside the title, the play button and slider share one row, and
     the sentence and caveat fold away after the first play
     (body.started), leaving the title, year and slider. */
  .card { top: 8px; left: 8px; right: 8px; width: auto; padding: 8px 12px 8px; }
  .card h1 { font-size: 17px; margin: 0 0 3px; padding-right: 118px; line-height: 1.3; }
  .year-row { position: absolute; top: 6px; right: 12px; flex-direction: row-reverse; align-items: center; gap: 8px; }
  .year { font-size: 28px; }
  .sentence { font-size: 14px; line-height: 1.35; margin-bottom: 3px; }
  .caveat { font-size: 12px; line-height: 1.35; margin-bottom: 2px; }   /* the caveat stays on the first screen, even on a phone */
  body.started .sentence, body.started .caveat { display: none; }
  .controls { margin-top: 4px; gap: 8px; }
  .play { width: 34px; height: 34px; }
  .ticks { margin-top: 1px; }
  .story-toggle { margin-top: 5px; padding: 4px 9px; font-size: 12px; }
  .note { display: block; position: fixed; z-index: 4; left: 8px; right: 8px; bottom: 30px; max-width: none;
    padding: 9px 12px; font-size: 15px; line-height: 1.4; transition: none; }
  .note[hidden] { display: none; }
  .note b { font-size: 13px; }
  .note .src { font-size: 13px; color: var(--ink-soft); }
  .note .src a { color: inherit; }
  .note.live .src a { pointer-events: auto; }
  body.noting .maplibregl-ctrl-bottom-right { display: none; }
  /* A sheet from the bottom; the card and the top of the map stay in view. */
  .story { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-width: none; height: 55vh;
    transform: translateY(calc(100% + 16px)); }
  body.story-open .maplibregl-ctrl-bottom-right { display: none; }
}