/* Round 3 · type and colour. Tokens first; components below only read them.
   Use scene: a phone on a bus, in sun glare, held by readers in their 50s to 70s. So: big, dark, high contrast.
   Contrast (WCAG 2.2, computed): ink on bg 16.7:1, muted on bg 9.1:1, accent on bg 8.0:1, accent on gold 6.4:1.
   Dark: ink 16.6:1, muted 10.9:1, accent 10.5:1. All text clears AAA; only the hairlines are decorative. */
:root {
  color-scheme: light dark;
  --bg: #faf6ee;
  --surface: #ffffff;
  --ink: #1d150e;
  --muted: #4d4234;
  --line: #cfc4ae;
  --chev: #6b604f;
  --accent: #7a3a18;
  --accent-ink: #ffffff;
  --press: rgba(122, 58, 24, .10);
  --gold: #f3dc9d;
  --gold-line: #b88a2c;
  --serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Type scale in rem, so layout follows the reader's text size (Dynamic Type, see html below). 1rem = 17px. */
  --t-small: .9rem;
  --t-body: 1rem;
  --t-lead: 1.125rem;
  --t-h2: 1.65rem;
  --t-title: 1.95rem;
  /* Spacing rhythm: 4, 8, 12, 16, 24, 32, 48 (in rem at 17px) */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem;
  --gut: 1.25rem;
  --radius: 16px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14100b; --surface: #211a12; --ink: #f7efe2; --muted: #cfc3ae; --line: #4a3f30; --chev: #b7aa94;
    --accent: #f0b57a; --accent-ink: #14100b; --press: rgba(240, 181, 122, .14);
    --gold: #44371b; --gold-line: #d6a64a;
  }
}
/* Motion: one critically damped spring (damping 1.0, response about .35 s), no overshoot, so nothing wobbles.
   Sampled as linear() because CSS has no spring easing; browsers without linear() get a close ease-out. */
:root { --spring-dur: 380ms; --spring: cubic-bezier(.22, 1, .36, 1); }
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, 0.029, 0.099, 0.189, 0.285, 0.381, 0.47, 0.552, 0.624, 0.687, 0.741, 0.787, 0.825, 0.857, 0.884, 0.906, 0.924, 0.939, 0.951, 0.96, 0.968, 0.975, 0.98, 0.984, 0.987, 0.99, 0.992, 0.994, 1); }
}
* { box-sizing: border-box; }
html { font-size: 106.25%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); scroll-behavior: smooth; scroll-padding-top: calc(6rem + env(safe-area-inset-top, 0px));
  -webkit-tap-highlight-color: transparent; overscroll-behavior-y: contain; }
/* Dynamic Type: where iOS offers it (home-screen app), the root size follows the reader's text-size setting;
   everything below is in rem, so spacing and layout scale with it. 17px is the default size, same as above. */
@supports (font: -apple-system-body) { html { font: -apple-system-body; } }
body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--ink); font: 400 var(--t-body)/1.5 var(--sans); font-optical-sizing: auto; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
/* Display type: tighter leading and negative tracking as it grows (Apple, Details of UI Typography). */
h1, h2 { font-family: var(--serif); font-weight: 600; line-height: 1.12; margin: 0; font-optical-sizing: auto; }
h1 { letter-spacing: -.022em; }
h2 { font-size: var(--t-h2); letter-spacing: -.015em; margin-bottom: var(--s3); text-wrap: balance; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 8px; z-index: 10; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); color: inherit; }
/* Controls are not content: no long-press text selection or link callout on them. Content stays selectable. */
a, summary, .btn { touch-action: manipulation; -webkit-touch-callout: none; }
summary, .btn, .rail a, .maplink { -webkit-user-select: none; user-select: none; }

main { display: flex; flex-direction: column; }
main > * { width: 100%; }
/* Page columns. Side padding never goes below the screen's safe area (landscape notch). */
.hello, .now, .journey, .block { max-width: 640px; margin-inline: auto; padding-inline: var(--gl) var(--gr); }
:root { --gl: max(var(--gut), env(safe-area-inset-left, 0px)); --gr: max(var(--gut), env(safe-area-inset-right, 0px)); }
/* On the tour days the Today card comes first, before the intro. */
.is-live .now { order: -1; padding-top: calc(var(--s4) + env(safe-area-inset-top, 0px)); }

/* Hero */
.hero { position: relative; min-height: 78svh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: #2a2118; }
.hero picture, .hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,14,8,.15) 0%, rgba(20,14,8,.55) 30%, rgba(20,14,8,.92) 100%); }
.hero__text { position: relative; z-index: 1; padding: 0 var(--gr) calc(var(--s6) + env(safe-area-inset-bottom, 0px)) var(--gl); max-width: 640px; text-shadow: 0 1px 14px rgba(0,0,0,.35); }
.hero h1 { font-size: clamp(2.35rem, 11vw, 3.5rem); margin-bottom: var(--s4); text-wrap: balance; }
.hero__line { font: 500 clamp(1.3rem, 5.6vw, 1.55rem)/1.3 var(--serif); letter-spacing: -.01em; margin: 0 0 var(--s2); text-wrap: balance; }
.hero__lead { margin: 0 0 var(--s4); font-size: var(--t-lead); line-height: 1.45; }
.hero__meta { margin: 0; display: grid; gap: 2px; font-size: var(--t-body); }
.hero__meta strong { font-weight: 700; }

.hello { padding-top: var(--s5); padding-bottom: var(--s1); font-size: var(--t-lead); line-height: 1.45; color: var(--muted); }
.hello p { margin: 0; }

/* Now / Today card: the hero of the page during the tour */
.now { padding-top: var(--s4); padding-bottom: var(--s1); }
.now:empty { display: none; }
.is-live .now { padding-bottom: var(--s5); }
.card { background: var(--gold); border: 2px solid var(--gold-line); border-radius: var(--radius); padding: var(--s5) var(--s5) var(--s4); }
.card--plain { background: var(--surface); border: 1px solid var(--line); padding: var(--s5); }
.card__kicker { display: inline-flex; margin: 0 0 var(--s3); padding: 3px var(--s3) 4px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: var(--t-small); font-weight: 600; letter-spacing: .01em; line-height: 1.3; }
.card--plain .card__kicker { padding: 0; margin-bottom: var(--s1); background: none; color: var(--accent); font-size: var(--t-body); }
.card__title { font: 600 var(--t-title)/1.12 var(--serif); letter-spacing: -.018em; margin: 0 0 var(--s3); text-wrap: balance; }
.card p { margin: 0 0 var(--s3); }
.card .stops { --stop-line: color-mix(in srgb, var(--gold-line) 45%, transparent); font-size: var(--t-lead); margin-bottom: var(--s2); }
.card .day__night { padding-top: var(--s2); }
.card .btn { margin-top: var(--s1); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0 var(--s5); border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none; transition: transform .24s var(--spring), filter .24s; }

/* Journey */
.journey { padding-top: var(--s6); padding-bottom: var(--s2); }
.rail { position: sticky; top: 0; z-index: 5; margin: 0 calc(var(--gr) * -1) var(--s4) calc(var(--gl) * -1); padding: calc(var(--s3) + env(safe-area-inset-top, 0px)) var(--gr) var(--s3) var(--gl); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border-bottom: 1px solid var(--line); }
.rail__track { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.rail__track::-webkit-scrollbar { display: none; }
.rail a { flex: 0 0 auto; scroll-snap-align: center; min-width: 3.3rem; min-height: 3.6rem; display: grid; place-items: center; align-content: center; padding: var(--s1) var(--s2); border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); text-decoration: none; line-height: 1.1; transition: transform .24s var(--spring), background-color .25s; }
.rail small { font-size: .85rem; color: var(--muted); }
.rail b { font-size: 1.2rem; font-weight: 700; }
.rail a[aria-current="date"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.rail a[aria-current="date"] small { color: inherit; }

/* Day list: one grouped list (iOS inset grouped), rows separated by hairlines */
.days { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.day + .day { border-top: 1px solid var(--line); }
.day summary { list-style: none; display: grid; grid-template-columns: 4rem 1fr auto 1.4rem; gap: var(--s3); align-items: center; min-height: 4.9rem; padding: var(--s3) var(--s4); cursor: pointer; transition: background-color .25s; }
.day summary::-webkit-details-marker { display: none; }
.day summary:focus-visible { outline-offset: -3px; border-radius: 0; }
.day summary::after { grid-column: 4; content: ""; width: 1.4rem; height: 1.4rem; background: var(--chev); -webkit-mask: no-repeat center / 1rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E"); mask: no-repeat center / 1rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E"); transition: transform var(--spring-dur) var(--spring); }
.day[open]:not(.is-closing) summary::after { transform: rotate(180deg); }
.day__date { display: grid; justify-items: center; line-height: 1.05; }
.day__date b { font: 600 2rem/1 var(--serif); letter-spacing: -.02em; }
.day__date small { white-space: nowrap; font-size: .85rem; color: var(--muted); margin-top: 2px; letter-spacing: .01em; }
.day__main { display: grid; min-width: 0; }
.day__n { font-size: var(--t-small); font-weight: 600; letter-spacing: .01em; color: var(--accent); }
.day__sub { font-size: var(--t-body); font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.badge { grid-column: 3; background: var(--accent); color: var(--accent-ink); font-size: .85rem; font-weight: 600; letter-spacing: .01em; padding: 3px var(--s3) 4px; border-radius: 999px; }
.badge[hidden] { display: none; }
.day.is-today { background: var(--gold); }
.day__body { box-sizing: content-box; padding: 0 var(--s4) var(--s4); overflow: clip; }
.day__text { margin: 0 0 var(--s3); }

/* Stops. The Map link is a quiet text button, so the place name leads. */
.stops { --stop-line: var(--line); list-style: none; margin: 0 0 var(--s2); padding: 0; }
.stops li { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 3.4rem; padding-block: var(--s1); border-top: 1px solid var(--stop-line); line-height: 1.3; }
.stops li:first-child { border-top: 0; }
.stop__name { padding-block: var(--s2); }
.maplink { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem; padding: 0 var(--s2) 0 var(--s3); margin-right: calc(var(--s2) * -1); border-radius: 12px; font-size: var(--t-small); font-weight: 600; color: var(--accent); text-decoration: none; transition: background-color .25s; }
.maplink::after { content: ""; width: .8rem; height: .8rem; margin-left: .3rem; background: currentColor; -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12L12 4M5.5 4H12v6.5'/%3E%3C/svg%3E"); mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12L12 4M5.5 4H12v6.5'/%3E%3C/svg%3E"); }
.day__night { margin: 0; color: var(--muted); font-size: var(--t-body); }
.day__night span { font-weight: 700; color: var(--ink); }
.confirm { margin: var(--s4) var(--s1) 0; color: var(--muted); font-size: var(--t-body); }

.block { padding-top: var(--s6); padding-bottom: var(--s1); }
.stay { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stay li { padding: var(--s3) var(--s4); display: grid; }
.stay li + li { border-top: 1px solid var(--line); }
.stay small { color: var(--muted); font-size: var(--t-small); letter-spacing: .01em; }
.stay span { font: 600 1.2rem/1.25 var(--serif); letter-spacing: -.01em; }
.know { list-style: none; margin: 0; padding: 0; }
.know li { padding: var(--s3) 0 var(--s3) var(--s5); border-top: 1px solid var(--line); position: relative; }
.know li::before { content: ""; position: absolute; left: 2px; top: 1.3rem; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.know li:first-child { border-top: 0; }
.foot { text-align: center; padding: var(--s7) var(--gut) calc(var(--s7) + env(safe-area-inset-bottom, 0px)); color: var(--muted); font-size: var(--t-small); }
.foot p { margin: 0; }

/* Press feedback: instant on touch-down, soft on release. Hover only where a real pointer can hover. */
.btn:active, .rail a:active { transition-duration: 0s; transform: scale(.96); }
.day summary:active, .maplink:active { transition-duration: 0s; background-color: var(--press); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { filter: brightness(1.1); }
  .rail a:hover { border-color: var(--accent); }
  .day summary:hover, .maplink:hover { background-color: var(--press); }
}

@media (min-width: 700px) {
  .hero { min-height: 70svh; }
  .hero__text { margin-left: max(var(--gl), calc((100vw - 640px) / 2)); }
}
@media (prefers-contrast: more) {
  :root { --line: #7d725f; --muted: var(--ink); }
}
@media (prefers-reduced-transparency: reduce) {
  .rail { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* Reduced motion: no springs, no slides, no scale. State changes still read (instant, or a short fade in app.js). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .day summary::after, .btn, .rail a { transition: none; }
  .btn:active, .rail a:active { transform: none; filter: brightness(.9); }
}