:root {
  /* The palette, unchanged from the app's tokens. */
  --paper: #F4EFE6;
  --paper-raise: #FCF8EF;
  --well: #EBE2D2;
  --hairline: #D8CDB8;
  --ink: #1A1712;
  --ink-soft: #6B6151;
  --pine: #12332B;
  --brass: #C08A2D;
  --vermilion: #D9532B;
  --leaf: #3E7C4F;
  --rust: #B23A28;
  --faded: #A79B86;

  /* The reading weights of the two warm accents.
     Brass and vermilion were picked as ink on a screen the app fills with
     dark chrome; on this paper they measure 2.65:1 and 3.79:1, under the
     4.5:1 a sentence needs and under the 3:1 a focus ring needs. Darkening
     the tokens themselves would dull the button, the pips and the mode bar,
     which are fills and pass comfortably — so the hue is kept and a reading
     weight of each sits beside it, used wherever the colour becomes a word,
     a numeral or an outline. Same hue, enough ink to be read: 5.1:1 and
     4.5:1 on paper. */
  --brass-ink: #835E1F;
  --vermilion-ink: #BB4825;

  --accent: var(--pine);
  --accent-ink: var(--pine);
  --accent-text: var(--paper);

  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.375rem;
  --radius-pill: 999px;

  --measure: 38rem;
  --wrap: 68rem;

  /* Easy mode multiplies this and every rem on the page follows. */
  --text-scale: 1;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  color-scheme: light;
}

[data-text-scale="easy"] {
  --text-scale: 1.35;
  /* Atkinson Hyperlegible was drawn for low vision: the shapes that usually
     collide — l/I/1, O/0, b/d — are drawn apart. It replaces the humanist sans
     only when Easy mode is on, so the brand face carries the normal reading. */
  --font-body: "Atkinson Hyperlegible", -apple-system, system-ui, sans-serif;
}

html {
  font-size: calc(100% * var(--text-scale));
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  /* The faintest laid-paper tooth: two crossing gradients, no image request. */
  background-image:
    repeating-linear-gradient(90deg, rgba(26, 23, 18, 0.014) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(26, 23, 18, 0.014) 0 1px, transparent 1px 3px);
}

*, *::before, *::after { box-sizing: border-box; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.4em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.85rem); }
h3 { font-size: 1.15rem; font-weight: 600; }
h4 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--pine); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--brass-ink); }

:focus-visible {
  outline: 3px solid var(--brass-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

img, svg { max-width: 100%; height: auto; }
ul, ol { padding-left: 1.2em; }

/* ---------------------------------------------------------------- layout */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.prose { max-width: var(--measure); }
.lead { font-size: 1.1rem; color: var(--ink-soft); }
.muted { color: var(--ink-soft); }

section { margin: 3.5rem 0; }
section > h2 + .lead { margin-top: -0.4em; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--pine);
  color: var(--paper);
  padding: 0.6rem 1rem;
  z-index: 10;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------- header */
.masthead {
  border-bottom: 1px solid var(--hairline);
  background: var(--paper-raise);
}
.masthead-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding-block: 0.9rem;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.wordmark:hover { color: var(--ink); }
.wordmark .rose { color: var(--brass); flex: none; }
.masthead nav { margin-left: auto; }
.masthead-tools { display: flex; align-items: center; gap: 0.5rem 1rem; flex-wrap: wrap; }
.city-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
}
.city-nav a { color: var(--ink-soft); text-decoration: none; }
.city-nav a:hover, .city-nav a[aria-current="page"] { color: var(--pine); text-decoration: underline; }
.city-nav a[aria-current="page"] { font-weight: 600; }

/* Language switcher and the text-size control: plain links and a form, so both
   work with scripting off — as does every other control on the site, the map
   being the only piece of JavaScript anywhere in it. */
.lang-switch, .text-switch { display: flex; align-items: center; gap: 0.4rem; }
.lang-switch ul { display: flex; gap: 0.35rem; list-style: none; margin: 0; padding: 0; }
.pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink-soft);
  text-decoration: none;
  line-height: 1.5;
}
a.pill:hover { border-color: var(--brass); color: var(--ink); }
.pill[aria-current="true"] { background: var(--pine); border-color: var(--pine); color: var(--paper); }
button.pill { cursor: pointer; font-family: var(--font-mono); }

/* ------------------------------------------------------------ breadcrumbs */
.crumbs { padding-block: 0.9rem 0; font-size: 0.85rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.crumbs li + li::before { content: "›"; color: var(--faded); margin-right: 0.4rem; }
.crumbs a { color: var(--ink-soft); }
.crumbs [aria-current="page"] { color: var(--ink); }

/* ------------------------------------------------------------- ornaments */
/* A drawn rule: hairline, lozenge, hairline. The app's <Flourish>, in one
   element and no markup of its own. */
.flourish {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 2rem 0;
  color: var(--brass);
}
.flourish::before, .flourish::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline) 20%, var(--hairline) 80%, transparent);
}
.flourish::after { transform: scaleX(-1); }
.flourish span { font-size: 0.7rem; letter-spacing: 0.3em; }

/* The perforated tear-off edge from the ticket card. */
.perforated {
  position: relative;
  padding-top: 1.5rem;
}
.perforated::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 0.7rem;
  background:
    radial-gradient(circle at 0.35rem 0, var(--paper) 0.35rem, transparent 0.36rem) repeat-x;
  background-size: 0.85rem 0.7rem;
}

/* The brass stamp: a price, a state, a mode. Dashed like an inked rubber mark. */
.stamp {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border: 1.5px dashed var(--brass);
  border-radius: var(--radius-sm);
  color: var(--brass-ink);
  white-space: nowrap;
}
.stamp.free { border-color: var(--leaf); color: var(--leaf); }
.stamp.reward { border-color: var(--faded); color: var(--ink-soft); }

/* The mode emblem: a bordered plate carrying the mode glyph. */
.emblem {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border: 1.5px solid currentColor;
  border-radius: 0.7rem;
  background: var(--well);
  font-family: var(--font-display);
  font-size: 1.05rem;
}

/* --------------------------------------------------------------- surfaces */
.plate {
  background: var(--paper-raise);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: clamp(1.1rem, 0.8rem + 1.2vw, 1.75rem);
  box-shadow: 0 4px 12px rgba(26, 23, 18, 0.06);
}
.well {
  background: var(--well);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: clamp(1rem, 0.8rem + 1vw, 1.5rem);
}
/* The price on a pricing plate. It is the answer to the heading above it, so
   it is set like the tour page's own price rather than left to inherit body
   copy — a "what it costs" panel whose number reads at the same weight as the
   caveat beneath it is a panel a shopper has to hunt through. */
.price-line {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.5rem + 1.4vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  margin: 0 0 0.5rem;
}

.grid { display: grid; gap: 1rem; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* ------------------------------------------------------------------ hero */
.hero { padding-block: clamp(2rem, 1rem + 4vw, 3.75rem) 0; }
.hero h1 { max-width: 20ch; }
.hero .lead { max-width: var(--measure); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-ink);
  margin: 0 0 0.9rem;
}

/* ------------------------------------------------------------- city cards */
.city-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  background: var(--paper-raise);
  border: 1px solid var(--hairline);
  border-top: 4px solid var(--brass);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.city-card:hover { box-shadow: 0 8px 20px rgba(26, 23, 18, 0.1); transform: translateY(-2px); color: inherit; }
.city-card h3 { font-size: 1.35rem; margin: 0; }
.city-card p { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }
.city-card .meta { margin-top: auto; padding-top: 0.5rem; }

/* ------------------------------------------------------------- tour cards */
.tour-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.25rem;
  background: var(--paper-raise);
  border: 1px solid var(--hairline);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 12px rgba(26, 23, 18, 0.06);
}
.tour-card.mode-explore { --accent: var(--pine); --accent-ink: var(--pine); }
.tour-card.mode-scavenger_hunt { --accent: var(--vermilion); --accent-ink: var(--vermilion-ink); }
/* h3 on a tour page, h4 under a city page's mode heading: the card looks the
   same either way, because its level says where it sits, not how big it is. */
.tour-card h3, .tour-card h4 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; margin: 0; }
.tour-card :is(h3, h4) a { text-decoration: none; color: var(--ink); }
.tour-card :is(h3, h4) a:hover { color: var(--accent-ink); text-decoration: underline; }
.tour-card > p { margin: 0; color: var(--ink-soft); }
.tour-card .card-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.mode-chip {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  color: var(--accent-ink);
}
.card-foot {
  display: flex;
  align-items: center;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--hairline);
}
.card-foot .stamp { margin-left: auto; }

/* Meta rows: the mono line of ◆ stops ◷ time ⇢ distance. */
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin: 0;
  list-style: none;
  padding: 0;
}
.meta li { white-space: nowrap; }
.meta .glyph { color: var(--brass-ink); margin-right: 0.25rem; }

/* Difficulty as pips. The label is beside them in text; the pips are silent. */
.pips { display: inline-flex; gap: 0.22rem; vertical-align: middle; }
.pips i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--accent); }
.pips i.hollow { background: transparent; box-shadow: inset 0 0 0 1px var(--faded); }

/* -------------------------------------------------------------- fact list */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 1.1rem; margin: 0; }
.facts > div { display: flex; flex-direction: column; gap: 0.2rem; }
.facts dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.facts dd { margin: 0; font-size: 1.05rem; font-weight: 600; }

/* Practical panel on a stop page: label / value rows that stack on a phone. */
.rows { margin: 0; }
.rows > div {
  display: grid;
  grid-template-columns: minmax(7rem, 12rem) 1fr;
  gap: 0.4rem 1.25rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--hairline);
}
.rows > div:first-child { border-top: 0; padding-top: 0; }
.rows dt {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 0.2rem;
}
.rows dd { margin: 0; }
.rows .hours { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.rows .hours span { font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink-soft); margin-right: 0.6rem; }
@media (max-width: 34rem) {
  .rows > div { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- stop list */
.stop-index { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.stop-index li {
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
  padding: 0.9rem 1rem;
  background: var(--paper-raise);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
.stop-index .dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; flex: none; align-self: center; }
.stop-index .body { min-width: 0; }
.stop-index a { font-weight: 600; text-decoration: none; color: var(--ink); }
.stop-index a:hover { color: var(--pine); text-decoration: underline; }
.stop-index p { margin: 0.15rem 0 0; font-size: 0.92rem; color: var(--ink-soft); }
.stop-index .tail { margin-left: auto; align-self: center; flex: none; }

/* An ordered route reads better numbered than bulleted. */
.route { list-style: none; counter-reset: stop; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.route li { display: flex; gap: 0.9rem; align-items: baseline; counter-increment: stop; }
.route li::before {
  content: counter(stop);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--brass-ink);
  border: 1px solid var(--hairline);
  border-radius: 50%;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  flex: none;
  align-self: center;
}

/* Category dots. One class per category, so nothing needs an inline style and
   the CSP can refuse them outright. */
.cat-landmark { background: var(--pine); color: var(--pine); }
.cat-museum { background: #6C3A5B; color: #6C3A5B; }
.cat-church { background: #3B5A6B; color: #3B5A6B; }
.cat-park { background: var(--leaf); color: var(--leaf); }
.cat-viewpoint { background: #8A5A2B; color: #8A5A2B; }
.cat-food { background: var(--vermilion); color: var(--vermilion); }
.cat-thermal-spa { background: #14675E; color: #14675E; }
.cat-none { background: var(--faded); color: var(--faded); }

.legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; list-style: none; margin: 0.75rem 0 0; padding: 0; font-size: 0.85rem; }
.legend li { display: flex; align-items: center; gap: 0.4rem; }
.legend i { width: 0.6rem; height: 0.6rem; border-radius: 50%; flex: none; }

/* --------------------------------------------------------------------- map */
.map-figure { margin: 0; }
.map-figure svg { display: block; width: 100%; height: auto; border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--paper-raise); }
.map-figure figcaption { margin-top: 0.6rem; font-size: 0.85rem; color: var(--ink-soft); }
.map-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.9rem 0 0; padding: 0; list-style: none; }

/* ------------------------------------------------------------------- sale */
.buy {
  display: grid;
  gap: 1rem;
  background: var(--pine);
  color: var(--paper);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
}
.buy h2 { color: var(--paper); margin: 0; }
.buy .price { font-family: var(--font-display); font-size: clamp(2rem, 1.6rem + 2vw, 2.8rem); line-height: 1; }
.buy .price small { font-family: var(--font-body); font-size: 0.9rem; font-weight: 400; opacity: 0.75; margin-left: 0.5rem; }
.buy p { color: rgba(244, 239, 230, 0.82); margin: 0; }
.buy a { color: var(--paper); }

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  padding: 0.85rem 1.6rem;
  min-height: 2.75rem;
  border: 1.5px solid var(--brass);
  border-radius: var(--radius-pill);
  background: var(--brass);
  color: #1A1712;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  transition: background 200ms ease, color 200ms ease;
}
.btn:hover { background: #D19B3E; color: #1A1712; }
.btn.ghost { background: transparent; color: var(--pine); border-color: var(--pine); }
.btn.ghost:hover { background: var(--pine); color: var(--paper); }
.buy .btn:focus-visible { outline-color: var(--paper); }

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.checks li { display: flex; gap: 0.7rem; align-items: baseline; }
.checks li::before { content: "◆"; color: var(--brass-ink); font-size: 0.7rem; flex: none; }

/* -------------------------------------------------------------------- faq */
.faq { display: grid; gap: 0; }
.faq > div { padding: 1.2rem 0; border-top: 1px solid var(--hairline); }
.faq > div:last-child { border-bottom: 1px solid var(--hairline); }
.faq dt { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; margin-bottom: 0.35rem; }
.faq dd { margin: 0; color: var(--ink-soft); max-width: var(--measure); }

/* ------------------------------------------------------------------ steps */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  margin-bottom: 0.7rem;
  border: 1.5px solid var(--brass);
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--brass-ink);
}
.steps h3 { margin-bottom: 0.25rem; }
.steps p { color: var(--ink-soft); margin: 0; }

/* ----------------------------------------------------------------- footer */
.foot {
  margin-top: 4rem;
  border-top: 1px solid var(--hairline);
  background: var(--paper-raise);
  padding-block: 2.5rem;
  font-size: 0.9rem;
}
.foot .grid { align-items: start; }
.foot h2 { font-size: 1rem; font-family: var(--font-body); font-weight: 600; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.foot .colophon { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--hairline); color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }

/* ------------------------------------------------------------------ legal */
/* Five documents that have to be readable rather than skimmable, on the one
   part of the site where a reader is looking for a specific clause. Everything
   here is measure-constrained and anchored: a link that says "see the refund
   page" lands on the section it names, and the numbered contents list at the
   top is how someone finds the clause they were told about. No sticky sidebar,
   no disclosure widgets — both would need script the site does not ship. */
.legal-doc { padding-bottom: 1rem; }
.legal-doc .hero { padding-bottom: 0; }
.legal-doc section { margin: 2.5rem 0; scroll-margin-top: 1.5rem; }
.legal-doc h2 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }
.legal-doc .rows { margin-top: 1.25rem; max-width: var(--measure); }
.legal-doc .notice { margin: 1.25rem 0; max-width: var(--measure); }
.legal-doc .prose + .prose, .legal-doc .prose + .legal-list { margin-top: 1em; }

.legal-updated {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 1.25rem 0 0;
}

.legal-toc {
  margin: 2.5rem 0;
  padding: 1.1rem 1.35rem;
  background: var(--well);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
.legal-toc h2 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.6rem;
}
.legal-toc ol { list-style: none; counter-reset: clause; margin: 0; padding: 0; columns: 2; column-gap: 2rem; }
.legal-toc li { counter-increment: clause; break-inside: avoid; margin-bottom: 0.35rem; font-size: 0.92rem; }
.legal-toc li::before { content: counter(clause) ". "; font-family: var(--font-mono); font-size: 0.78rem; color: var(--brass-ink); }
@media (max-width: 42rem) { .legal-toc ol { columns: 1; } }

.legal-list { max-width: var(--measure); padding-left: 1.15em; }
.legal-list li { margin-bottom: 0.5rem; }
.legal-list li::marker { color: var(--brass-ink); }

/* The consent sentence, quoted rather than paraphrased, so a reader can see it
   is the wording they will be asked to tick and not our gloss on it. */
.legal-quote {
  max-width: var(--measure);
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--pine);
  background: var(--paper-raise);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
}
.legal-quote p { margin: 0; }

.legal-index { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

/* ------------------------------------------------------------- checkout */
/* The consent step: a summary table and two checkboxes, and the only form on
   the site that writes a row. It is styled to be read rather than skimmed past,
   because that is the whole point of the page — a box small enough to tick
   without noticing is a box that proves nothing.

   The grid puts the control in a fixed first column and the label in the second
   so that a label running to three lines stays aligned under itself instead of
   wrapping beneath the box. The box is aligned to the top of the label rather
   than centred against it, so it sits level with the first line. */
.checkout .rows dd > div + div { margin-top: 0.35rem; }
.checkout .rows dd .muted { font-size: 0.88rem; }

.consent { max-width: var(--measure); margin-top: 1.5rem; }
.consent-box {
  display: grid;
  grid-template-columns: 1.35rem 1fr;
  gap: 0.35rem 0.75rem;
  align-items: start;
  padding: 1rem 1.15rem;
  margin-bottom: 1rem;
  background: var(--well);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
.consent-box input[type="checkbox"] {
  /* 1.15rem rather than the browser default, because this is a control a
     reader in a hurry has to hit on a phone and then has to see the state of. */
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.2rem 0 0;
  accent-color: var(--pine);
  cursor: pointer;
}
.consent-box label { cursor: pointer; line-height: 1.55; }
.consent-help {
  grid-column: 2;
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.consent-submit { margin: 1.5rem 0 0.5rem; }

/* The pre-contract line under a buy button: the tax position, and the two
   pages a shopper is entitled to have read before paying. Small, because it is
   a reference rather than an argument, but never hidden. */
.buy .fine { font-size: 0.85rem; }
.buy .fine a { color: var(--paper); text-underline-offset: 0.2em; }

/* -------------------------------------------------------------- fallback */
.notice {
  border-left: 4px solid var(--brass);
  background: var(--well);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.error-page { padding-block: 4rem 2rem; }

/* Print: the storefront gets folded into a pocket often enough to be worth
   twelve lines. Chrome and ornament go; the words and the map stay. */
@media print {
  .masthead-tools, .city-nav, .buy .btn, .map-links, .foot { display: none; }
  body { background: #fff; }
  .plate, .well, .tour-card, .city-card { box-shadow: none; border-color: #ccc; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; color: #555; }
}

/* --- the map, and the control that upgrades it ------------------------- */
/* The drawing is the page; the button sits on top of it and only appears when
   JavaScript inserted it, so a reader without scripts sees an unblemished
   diagram rather than a dead control. */
.map-mount { position: relative; }
.map-open {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  font: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  padding: 0.5em 0.9em;
  color: var(--ink);
  background: var(--paper-raise);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgb(26 23 18 / 18%);
}
.map-open:hover { background: var(--paper); }
.map-open:disabled { cursor: progress; opacity: 0.75; }
.map-canvas {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-md);
  overflow: hidden;
}
/* MapLibre draws its own pins from these; the focused stop gets the brass the
   rest of the site uses for "this one". */
.map-pin {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pine);
  border: 2px solid var(--paper-raise);
  box-shadow: 0 1px 2px rgb(26 23 18 / 35%);
}
.map-pin-focus {
  width: 18px;
  height: 18px;
  background: var(--brass);
}
@media (prefers-reduced-motion: reduce) {
  .map-canvas * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------- cinematic
   Dark, warm, photographic. The accent carries the play button and every
   number, so it is chosen to clear 4.5:1 as text on the darkest surface
   (#D89A4E on #0B0B0C measures 8.6:1) rather than only to look good as a fill. */
[data-theme="cinematic"] {
  --paper: #0B0B0C;
  --paper-raise: #141416;
  --well: #1A1A1D;
  --hairline: #26262A;
  --ink: #F2EDE6;
  --ink-soft: #A79E90;
  --faded: #6E675C;
  --pine: #D89A4E;
  --brass: #D89A4E;
  --brass-ink: #E0A85F;
  --vermilion: #E0785A;
  --vermilion-ink: #E8907A;
  --leaf: #6FA87C;
  --rust: #C9705A;
  --accent: #D89A4E;
  --accent-ink: #E0A85F;
  --accent-text: #14100B;
  --font-display: "Bodoni Moda", Didot, "Times New Roman", serif;
  --font-body: "Archivo", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color-scheme: dark;
}

/* ------------------------------------------------------------------ transit
   Signage. Square corners, black hairlines, one signal blue for anything the
   reader can act on. The hairline is ink rather than a tint because at arm's
   length in sunlight a 12% grey rule is not there at all. */
[data-theme="transit"] {
  --paper: #FFFFFF;
  --paper-raise: #F4F4F6;
  --well: #EDEDF0;
  --hairline: #101012;
  --ink: #101012;
  --ink-soft: #56565C;
  --faded: #8A8A90;
  --pine: #101012;
  --brass: #D8402F;
  --brass-ink: #1F4FD8;
  --vermilion: #D8402F;
  --vermilion-ink: #B8321F;
  --leaf: #2E8B57;
  --rust: #D8402F;
  --accent: #101012;
  --accent-ink: #1F4FD8;
  --accent-text: #FFFFFF;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --font-display: "Space Grotesk", "Helvetica Neue", Helvetica, sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color-scheme: light;
}

/* ------------------------------------------------------- the control itself
   Three buttons, drawn from the tokens so each one is already wearing the
   theme it names once that theme is on. */
.look {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.look-set {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--paper-raise);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}
.look-set:hover { border-color: var(--accent-ink); }
.look-set[aria-pressed="true"] {
  border-color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px var(--accent-ink);
}
/* The swatch shows the ground and the accent of the theme it offers, so the
   button is a preview and not only a word. */
.look-chip {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  flex-shrink: 0;
}
.look-chip-field { background: linear-gradient(135deg, #F4EFE6 50%, #835E1F 50%); }
.look-chip-cinematic { background: linear-gradient(135deg, #0B0B0C 50%, #D89A4E 50%); }
.look-chip-transit { background: linear-gradient(135deg, #FFFFFF 50%, #D8402F 50%); }

/* The first-visit panel is in the document for everyone and shown to nobody
   until the script says this reader has never chosen. A reader without
   JavaScript never sees it, which is correct: they cannot act on it. */
.look-ask { display: none; }
[data-theme-ask] .look-ask {
  display: block;
  margin: 0 0 1.5rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--paper-raise);
}
.look-ask h2 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.look-ask p { margin: 0 0 0.85rem; color: var(--ink-soft); font-size: 0.95rem; }

/* The same control in the footer, above the colophon. It stays visible without
   JavaScript on purpose: the buttons do nothing, but a reader learns the choice
   exists and that it lives on their device rather than in an account. */
.look-foot {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  align-items: flex-start;
}
.look-foot h2 { margin: 0; font-size: 0.95rem; }
.look-foot p { margin: 0; font-size: 0.9rem; }