/* THE WINE ROAD — design system
   Contract: DESIGN.md. Drenched dark palette; the surface is the cellar. */

:root {
  --plum-black: oklch(0.16 0.03 330);
  --plum-deep: oklch(0.13 0.025 330);
  --cellar: oklch(0.21 0.045 20);
  --wine: oklch(0.38 0.14 20);
  --wine-bright: oklch(0.52 0.17 20);
  --clay: oklch(0.62 0.10 45);
  --amber: oklch(0.78 0.12 75);
  --amber-dim: oklch(0.68 0.10 75);
  --ink-light: oklch(0.93 0.015 75);
  --ink-muted: oklch(0.78 0.035 60);
  --sewanee-purple: oklch(0.32 0.09 300);
  --sewanee-gold: oklch(0.80 0.11 90);

  --font-display: 'Cinzel', 'Times New Roman', serif;
  --font-serif: 'Alegreya', Georgia, serif;
  --font-sans: 'Alegreya Sans', -apple-system, 'Segoe UI', sans-serif;

  --step-0: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --step-1: clamp(1.33rem, 1.2rem + 0.6vw, 1.55rem);
  --step-2: clamp(1.66rem, 1.45rem + 1vw, 2rem);
  --step-3: clamp(2.1rem, 1.7rem + 1.9vw, 2.9rem);
  --step-4: clamp(2.6rem, 1.9rem + 3.4vw, 4.2rem);
  --step-5: clamp(3.2rem, 2.1rem + 5.4vw, 5.8rem);

  --space-1: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
  --space-2: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  --space-3: clamp(1.75rem, 1.5rem + 1.25vw, 2.75rem);
  --space-4: clamp(3rem, 2.4rem + 3vw, 5.5rem);
  --space-5: clamp(5rem, 3.8rem + 6vw, 9rem);

  --card-glass: color-mix(in oklch, var(--plum-deep) 62%, transparent);
  --card-border: color-mix(in oklch, var(--amber) 26%, transparent);
  --hairline: color-mix(in oklch, var(--amber) 16%, transparent);

  /* z scale */
  --z-bg: 0; --z-content: 2; --z-rail: 40; --z-header: 50; --z-toast: 60;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--plum-black);
  color: var(--ink-light);
  font-family: var(--font-serif);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: var(--amber); text-decoration-color: color-mix(in oklch, var(--amber) 45%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--sewanee-gold); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; max-width: 70ch; }

/* film grain + vignette over everything */
body::after {
  content: ''; position: fixed; inset: -50%; z-index: 100; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.05; mix-blend-mode: overlay;
}

/* ---------- header / draft mark ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(var(--space-2) * 0.9) var(--space-3);
  pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in oklch, var(--plum-deep) 72%, transparent), transparent);
}
.wordmark {
  font-family: var(--font-display); font-weight: 600; letter-spacing: 0.18em;
  font-size: 0.95rem; color: var(--ink-light); text-decoration: none; pointer-events: auto;
}
.wordmark span { color: var(--amber); }
.header-right { display: flex; align-items: center; gap: 0.6rem; pointer-events: auto; }
.sound-toggle {
  display: inline-flex; align-items: center; gap: 0.55em; cursor: pointer;
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber-dim);
  border: 1px solid var(--card-border); border-radius: 999px;
  padding: 0.3em 0.9em; min-height: 28px;
  background: color-mix(in oklch, var(--plum-deep) 55%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: color 0.25s, border-color 0.25s;
}
.sound-toggle:hover { color: var(--amber); border-color: var(--amber-dim); }
.sound-toggle[aria-pressed="true"] { color: var(--sewanee-gold); border-color: var(--sewanee-gold); }
.st-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.st-bars i { width: 2px; height: 4px; background: currentColor; border-radius: 1px; }
.sound-toggle[aria-pressed="true"] .st-bars i { animation: st-eq 1.1s ease-in-out infinite; }
.sound-toggle[aria-pressed="true"] .st-bars i:nth-child(2) { animation-delay: 0.25s; }
.sound-toggle[aria-pressed="true"] .st-bars i:nth-child(3) { animation-delay: 0.5s; }
@keyframes st-eq { 0%, 100% { height: 4px; } 50% { height: 10px; } }

.draft-tag {
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber-dim);
  border: 1px solid var(--card-border); border-radius: 999px;
  padding: 0.3em 0.9em; pointer-events: auto;
  background: color-mix(in oklch, var(--plum-deep) 55%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* ---------- journey rail ---------- */
.rail {
  position: fixed; left: clamp(0.8rem, 2vw, 2rem); top: 50%; translate: 0 -50%;
  z-index: var(--z-rail); display: flex; flex-direction: column; gap: 0.55rem;
  padding: 0.8rem 0.5rem; border-radius: 999px;
}
.rail::before {
  content: ''; position: absolute; left: 50%; top: 1rem; bottom: 1rem;
  width: 1px; background: var(--hairline); translate: -50% 0;
}
.rail button {
  position: relative; width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid var(--amber-dim); background: var(--plum-black);
  padding: 0; cursor: pointer; transition: background 0.3s, scale 0.3s;
}
.rail button.active { background: var(--amber); scale: 1.35; box-shadow: 0 0 12px color-mix(in oklch, var(--amber) 60%, transparent); }
.rail button:hover { background: var(--amber-dim); }
.rail .rail-label {
  position: absolute; left: 1.4rem; top: 50%; translate: 0 -50%;
  font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.1em;
  color: var(--amber); white-space: nowrap; opacity: 0; transition: opacity 0.25s;
  pointer-events: none; text-transform: uppercase;
}
.rail button:hover .rail-label, .rail button.active .rail-label { opacity: 1; }
@media (max-width: 900px) { .rail { display: none; } }

/* thin top progress bar (mobile) */
.progress-bar {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform-origin: 0 50%; scale: 0 1; z-index: var(--z-header);
  background: linear-gradient(90deg, var(--wine-bright), var(--amber));
}
@media (min-width: 901px) { .progress-bar { display: none; } }

/* ---------- chapters ---------- */
.chapter { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: clip; }
.chapter-bg { position: absolute; inset: -6% 0; z-index: var(--z-bg); }
.chapter-bg img { width: 100%; height: 100%; object-fit: cover; }
.chapter-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 108%, color-mix(in oklch, var(--plum-deep) 92%, transparent) 8%, transparent 55%),
    radial-gradient(140% 110% at 50% -20%, color-mix(in oklch, var(--plum-deep) 80%, transparent) 4%, transparent 48%),
    linear-gradient(color-mix(in oklch, var(--plum-black) 34%, transparent), color-mix(in oklch, var(--plum-black) 34%, transparent));
}
.chapter-inner { position: relative; z-index: var(--z-content); width: min(1120px, 92vw); padding: var(--space-5) 0; }

/* ---------- hero ---------- */
.hero { min-height: 108svh; }
.hero .chapter-inner { text-align: center; display: grid; justify-items: center; gap: var(--space-2); }
.hero-kicker {
  font-family: var(--font-sans); font-weight: 500; letter-spacing: 0.32em;
  text-transform: uppercase; font-size: clamp(0.72rem, 0.65rem + 0.35vw, 0.92rem);
  color: var(--sewanee-gold);
}
.hero-title {
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-5);
  letter-spacing: 0.06em; line-height: 1.04; margin: 0; color: var(--ink-light);
  text-shadow: 0 2px 40px color-mix(in oklch, var(--plum-black) 80%, transparent);
}
.hero-title .word { white-space: nowrap; display: inline-block; }
.hero-title .char { display: inline-block; }
.hero-sub {
  font-family: var(--font-serif); font-style: italic; font-size: var(--step-2);
  color: var(--amber); margin: 0; letter-spacing: 0.02em;
}
.hero-meta { font-family: var(--font-sans); color: var(--ink-muted); font-size: 0.95rem; letter-spacing: 0.08em; }
.scroll-cue {
  position: absolute; bottom: max(4.5vh, 2.2rem); left: 50%; translate: -50% 0; z-index: var(--z-content);
  display: grid; justify-items: center; gap: 0.5rem;
  font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--ink-muted);
}
.scroll-cue::after {
  content: ''; width: 1px; height: 3.2rem;
  background: linear-gradient(var(--amber), transparent);
}
.motion .scroll-cue::after { animation: cue-drip 2.4s ease-out infinite; }
@keyframes cue-drip { 0% { clip-path: inset(0 0 100% 0); } 45% { clip-path: inset(0); } 100% { clip-path: inset(100% 0 0 0); } }

/* ---------- legend (Bacchus myth) ---------- */
.legend .chapter-inner { width: min(880px, 90vw); text-align: center; }
.legend-text {
  font-size: var(--step-2); line-height: 1.55; margin: 0 auto;
  color: var(--ink-light); font-weight: 400;
}
.legend-text em { color: var(--amber); font-style: italic; }
.legend-frame { margin-top: var(--space-3); color: var(--ink-muted); font-size: var(--step-1); font-style: italic; }
.legend-ornament { width: 72px; margin: 0 auto var(--space-3); color: var(--clay); }

/* ---------- route map ---------- */
.route .chapter-inner { width: min(1200px, 94vw); }
.route h2, .section-title {
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-3);
  letter-spacing: 0.08em; text-align: center; margin: 0 0 var(--space-2); color: var(--ink-light);
}
.route-map { width: 100%; height: auto; overflow: visible; }
.route-map .land { fill: color-mix(in oklch, var(--cellar) 70%, transparent); stroke: var(--hairline); }
.route-map .road {
  fill: none; stroke: var(--amber); stroke-width: 2.2; stroke-linecap: round;
  stroke-dasharray: 6 7;
  filter: drop-shadow(0 0 6px color-mix(in oklch, var(--amber) 45%, transparent));
}
.route-map .stop { fill: var(--amber); }
.route-map .stop-ring { fill: none; stroke: var(--amber-dim); }
.route-map .stop-label {
  font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.08em;
  fill: var(--ink-light); text-transform: uppercase;
}
.route-map .stop-sub { font-family: var(--font-serif); font-style: italic; font-size: 12.5px; fill: var(--ink-muted); text-transform: none; letter-spacing: 0.02em; }
.trip-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.trip-card {
  position: relative; border-radius: 1rem; padding: var(--space-3);
  background: var(--card-glass); border: 1px solid var(--card-border);
  -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1);
  overflow: clip;
}
.trip-card.future { opacity: 0.85; }
.trip-card .trip-no {
  font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.22em;
  color: var(--sewanee-gold);
}
.trip-card h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); margin: 0.35em 0 0.15em; letter-spacing: 0.04em; }
.trip-card .trip-tagline { font-style: italic; color: var(--amber); margin: 0 0 0.6em; font-size: var(--step-1); }
.trip-card p { color: var(--ink-muted); font-size: 0.98rem; margin: 0; }
.trip-card .trip-badge {
  position: absolute; top: var(--space-2); right: var(--space-2);
  font-family: var(--font-sans); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--plum-black); background: var(--amber); border-radius: 999px; padding: 0.28em 0.8em; font-weight: 700;
}
.trip-card.future .trip-badge { background: transparent; color: var(--ink-muted); border: 1px solid var(--hairline); font-weight: 500; }

/* ---------- harvest + explorer ---------- */
.harvest .chapter-inner { width: min(1120px, 92vw); }
.harvest-lead { font-size: var(--step-1); color: var(--ink-light); margin: 0 auto var(--space-2); max-width: 62ch; }
.harvest-sources { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; justify-content: center; padding: 0; margin: var(--space-2) 0 0; list-style: none; }
.harvest-sources a { font-family: var(--font-sans); font-size: 0.85rem; color: var(--ink-muted); }
.harvest-sources a:hover { color: var(--amber); }

.explorer { margin-top: var(--space-4); }
.explorer-intro { text-align: center; color: var(--ink-muted); margin: 0 auto var(--space-3); font-style: italic; }
.window-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-2); }
.window-btn {
  font-family: var(--font-sans); text-align: left; cursor: pointer;
  border-radius: 0.9rem; padding: var(--space-2);
  background: var(--card-glass); border: 1px solid var(--hairline); color: var(--ink-light);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: border-color 0.3s, translate 0.3s, background 0.3s;
  min-height: 44px;
}
.window-btn:hover { translate: 0 -3px; border-color: var(--card-border); }
.window-btn[aria-pressed="true"] {
  border-color: var(--amber); background: color-mix(in oklch, var(--wine) 26%, var(--card-glass));
  box-shadow: 0 12px 40px -18px color-mix(in oklch, var(--wine-bright) 60%, transparent);
}
.window-btn .w-label { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; letter-spacing: 0.05em; display: block; color: var(--amber); }
.window-btn[aria-pressed="true"] .w-label { color: var(--sewanee-gold); }
.window-btn .w-dates { display: block; font-size: 0.95rem; margin-top: 0.3em; font-weight: 500; }
.window-btn .w-level { display: inline-block; margin-top: 0.55em; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); border: 1px solid var(--hairline); padding: 0.2em 0.7em; border-radius: 999px; }

.explorer-panel {
  margin-top: var(--space-2); border-radius: 1rem; padding: var(--space-3);
  background: var(--card-glass); border: 1px solid var(--card-border);
  -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1);
  display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-3);
}
.explorer-panel .ep-rationale { font-size: var(--step-1); line-height: 1.5; margin: 0; color: var(--ink-light); }
.explorer-panel .ep-weather { color: var(--ink-muted); font-size: 0.95rem; margin: var(--space-2) 0 0; }
.ep-costs { display: grid; gap: 0.7rem; align-content: start; font-family: var(--font-sans); }
.ep-flights { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.4rem; }
.ep-flights a {
  font-family: var(--font-sans); font-size: 0.88rem; font-weight: 500; text-decoration: none;
  border: 1px solid var(--card-border); border-radius: 999px; padding: 0.5em 1.1em;
  color: var(--amber); transition: background 0.25s, color 0.25s;
  min-height: 44px; display: inline-flex; align-items: center;
}
.ep-flights a:hover { background: var(--amber); color: var(--plum-black); }
.ep-note, .estimate-note { font-family: var(--font-sans); font-size: 0.82rem; color: var(--ink-muted); }
@media (max-width: 760px) { .explorer-panel { grid-template-columns: 1fr; } }

/* ---------- trip intro ---------- */
.trip-intro .chapter-inner { width: min(920px, 90vw); text-align: center; }
.trip-intro .trip-no { font-family: var(--font-display); letter-spacing: 0.24em; color: var(--sewanee-gold); font-size: 0.95rem; }
.trip-intro h2 { font-family: var(--font-display); font-size: var(--step-4); font-weight: 700; letter-spacing: 0.06em; margin: 0.2em 0 0.1em; }
.trip-intro .trip-tagline { font-style: italic; color: var(--amber); font-size: var(--step-2); margin: 0 0 var(--space-3); }
.trip-intro p.trip-lede { margin: 0 auto; font-size: var(--step-1); color: var(--ink-light); }
.trip-meta { display: flex; gap: var(--space-3); justify-content: center; margin-top: var(--space-3); font-family: var(--font-sans); color: var(--ink-muted); font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase; flex-wrap: wrap; }
.trip-meta b { color: var(--ink-light); font-weight: 500; }

/* ---------- day chapters ---------- */
.day .chapter-inner { display: grid; padding: clamp(5.5rem, 12vh, 8rem) 0; }
.day[data-align="left"] .chapter-inner { justify-items: start; }
.day[data-align="right"] .chapter-inner { justify-items: end; }
.day[data-align="center"] .chapter-inner { justify-items: center; }

.day-card {
  width: min(560px, 100%); border-radius: 1.1rem;
  background: var(--card-glass); border: 1px solid var(--card-border);
  -webkit-backdrop-filter: blur(18px) saturate(1.12); backdrop-filter: blur(18px) saturate(1.12);
  box-shadow: 0 30px 80px -30px color-mix(in oklch, var(--plum-black) 90%, transparent);
  padding: var(--space-3);
  border-top: 1px solid color-mix(in oklch, var(--sewanee-gold) 34%, transparent);
}
.day-marker { display: flex; align-items: baseline; gap: 1rem; }
.day-marker .d-no {
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.2em;
  color: var(--sewanee-gold); font-size: 0.92rem;
}
.day-marker .d-loc { font-family: var(--font-sans); font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.day-card h3 {
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-2);
  letter-spacing: 0.03em; line-height: 1.2; margin: 0.5em 0 0.4em; color: var(--ink-light);
}
.day-card .d-theme { font-style: italic; color: var(--amber); margin: 0 0 0.7em; font-size: 1.05rem; }
.day-card .d-narrative { color: var(--ink-light); font-size: 0.99rem; margin: 0 0 var(--space-2); }

.d-activities { list-style: none; margin: 0; padding: 0; font-family: var(--font-sans); }
.d-activities li { display: grid; gap: 0.2rem; padding: 0.6rem 0; border-top: 1px solid var(--hairline); }
.d-activities .a-name { font-weight: 500; color: var(--ink-light); font-size: 0.97rem; }
.d-activities .a-desc { color: var(--ink-muted); font-size: 0.87rem; font-family: var(--font-serif); font-style: italic; }
.d-lodging { border-top: 1px solid var(--hairline); margin-top: 0.2rem; padding-top: 0.7rem; font-family: var(--font-sans); font-size: 0.85rem; color: var(--ink-muted); }

/* personal photo polaroid */
.field-note {
  position: absolute; z-index: 3; width: clamp(180px, 22vw, 300px);
  background: oklch(0.96 0.01 85); padding: 9px 9px 2.4rem; border-radius: 4px;
  box-shadow: 0 24px 60px -18px color-mix(in oklch, var(--plum-black) 95%, transparent);
  rotate: var(--tilt, -3.2deg);
}
.field-note img { border-radius: 2px; }
.field-note figcaption {
  font-family: var(--font-sans); font-size: 0.78rem; color: oklch(0.35 0.02 330);
  padding-top: 0.55rem; line-height: 1.35;
}
.field-note .fn-kicker {
  display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--sewanee-purple); margin-bottom: 0.2rem;
}
.day[data-align="left"] .field-note { right: clamp(1rem, 6vw, 5rem); bottom: 9vh; --tilt: 2.8deg; }
.day[data-align="right"] .field-note { left: clamp(1rem, 6vw, 5rem); bottom: 9vh; --tilt: -3.2deg; }
.day[data-align="center"] .field-note { right: clamp(1rem, 5vw, 4rem); bottom: 7vh; --tilt: 2.2deg; }
@media (max-width: 900px) {
  .field-note { position: relative; inset: auto; margin: var(--space-2) auto 0; --tilt: -2deg; width: min(300px, 78%); }
}

/* ---------- map interlude ---------- */
.interlude { min-height: 64svh; background: var(--plum-deep); }
.interlude .chapter-inner { width: min(760px, 90vw); text-align: center; }
.interlude svg { width: 100%; height: auto; overflow: visible; }
.interlude .leg-road { fill: none; stroke: var(--amber); stroke-width: 2; stroke-dasharray: 5 7; stroke-linecap: round; }
.interlude .leg-stop { fill: var(--amber); }
.interlude .leg-label { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.1em; fill: var(--ink-light); text-transform: uppercase; }
.interlude .leg-note { font-style: italic; color: var(--ink-muted); font-size: var(--step-1); margin: var(--space-2) auto 0; }

/* ---------- leaders ---------- */
.leaders { background: linear-gradient(color-mix(in oklch, var(--sewanee-purple) 26%, var(--plum-deep)), var(--plum-deep)); }
.leaders .chapter-inner { width: min(1120px, 94vw); }
.leaders-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(620px, 84vw);
  gap: var(--space-3); overflow-x: auto; padding: var(--space-2) 6vw var(--space-3);
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  margin: 0 calc(50% - 50vw); width: 100vw;
  scrollbar-width: none;
}
.leaders-track::-webkit-scrollbar { display: none; }
.leader-card {
  scroll-snap-align: center; display: grid; grid-template-columns: 200px 1fr; gap: var(--space-3);
  background: var(--card-glass); border: 1px solid color-mix(in oklch, var(--sewanee-gold) 30%, transparent);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-radius: 1.1rem; padding: var(--space-3); align-items: start;
}
.leader-card img { width: 200px; height: 240px; object-fit: cover; border-radius: 0.6rem; filter: saturate(0.92); }
.leader-card h3 { font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; margin: 0; letter-spacing: 0.03em; }
.leader-card .l-title { color: var(--sewanee-gold); font-family: var(--font-sans); font-size: 0.9rem; letter-spacing: 0.05em; margin: 0.3em 0 0.8em; }
.leader-card p { color: var(--ink-light); font-size: 0.94rem; margin: 0; }
.leader-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: var(--space-2); padding: 0; list-style: none; }
.leader-chips li {
  font-family: var(--font-sans); font-size: 0.76rem; letter-spacing: 0.06em;
  color: var(--ink-muted); border: 1px solid var(--hairline); border-radius: 999px; padding: 0.3em 0.85em;
}
.leaders-hint { text-align: center; font-family: var(--font-sans); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); }
@media (max-width: 700px) {
  .leader-card { grid-template-columns: 1fr; }
  .leader-card img { width: 132px; height: 158px; }
}

/* SRAS block */
.sras-block {
  margin-top: var(--space-4); border-top: 1px solid var(--hairline); padding-top: var(--space-3);
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start;
}
.sras-block h3 { font-family: var(--font-display); letter-spacing: 0.1em; font-size: var(--step-1); margin: 0; color: var(--ink-light); white-space: nowrap; }
.sras-block p { color: var(--ink-muted); font-size: 0.95rem; margin: 0 0 0.8em; }
@media (max-width: 760px) { .sras-block { grid-template-columns: 1fr; } }

/* ---------- closing ---------- */
.closing { text-align: center; background: radial-gradient(90% 70% at 50% 110%, color-mix(in oklch, var(--wine) 34%, var(--plum-deep)), var(--plum-deep)); }
.closing .chapter-inner { width: min(880px, 90vw); }
.closing .seal {
  font-family: var(--font-display); letter-spacing: 0.3em; color: var(--sewanee-gold);
  font-size: 0.9rem; margin-bottom: var(--space-3);
}
.closing h2 { font-family: var(--font-display); font-size: var(--step-3); font-weight: 600; letter-spacing: 0.06em; margin: 0 0 var(--space-2); }
.closing .close-lede { font-size: var(--step-1); color: var(--ink-light); margin: 0 auto var(--space-3); }
.scope-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); text-align: left; margin: var(--space-3) 0; }
.scope-cols h3 { font-family: var(--font-sans); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sewanee-gold); margin: 0 0 0.5em; }
.scope-cols p { color: var(--ink-muted); font-size: 0.94rem; margin: 0; }
@media (max-width: 640px) { .scope-cols { grid-template-columns: 1fr; } }
.closing .contact-line { font-family: var(--font-sans); color: var(--ink-light); }
.closing .fine-print { font-family: var(--font-sans); font-size: 0.8rem; color: var(--ink-muted); margin-top: var(--space-3); }
.closing .fine-print a { color: var(--ink-muted); }

/* closing sits over a busy group photo: deepen the veil for legibility */
.closing .chapter-bg::after {
  background:
    radial-gradient(120% 90% at 50% 108%, color-mix(in oklch, var(--plum-deep) 96%, transparent) 10%, transparent 60%),
    linear-gradient(color-mix(in oklch, var(--plum-black) 62%, transparent), color-mix(in oklch, var(--plum-black) 74%, transparent));
}

/* ---------- motion gating ----------
   Content is ALWAYS visible by default. Hidden initial states exist ONLY under
   .motion (added pre-paint when motion is allowed, removed by failsafe). */
.motion .m-rise { opacity: 0; translate: 0 42px; filter: blur(6px); }
.motion .m-fade { opacity: 0; }
.motion .hero-title .char { opacity: 0; translate: 0 0.35em; }
.motion .route-map .road { stroke-dashoffset: var(--road-len, 2400); }
.motion .interlude .leg-road { stroke-dashoffset: var(--leg-len, 800); }

@media (prefers-reduced-motion: reduce) {
  .motion .m-rise, .motion .m-fade, .motion .hero-title .char { opacity: 1; translate: none; filter: none; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

@media (max-width: 900px) {
  .day-card { width: 100%; }
  .chapter-inner { width: 92vw; }
}