/* ==========================================================================
   Long Horn Wine Tours
   Design system — "the day as a route"

   Palette is drawn from the materials of the tour itself: post-oak smoke,
   Hill Country limestone, Tempranillo, aged brass, live oak, bluebonnet.
   The page runs dark -> light -> dark, the shape of the day: leave in the
   dark, spend it in the sun, end up back where you started.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/publicsans-latin.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Ground */
  --ink:        #17120e;   /* smoked post oak */
  --ink-2:      #211a14;
  --ink-3:      #2f251c;
  --caliche:    #dcd8cd;   /* Hill Country limestone */
  --caliche-2:  #e7e4db;
  --bone:       #f6f3ec;

  /* Accents */
  --tempranillo:    #6b2233;
  --tempranillo-lt: #8e3247;
  --horn:           #c9973f;
  --horn-lt:        #e0b968;
  --liveoak:        #5e6b52;
  --bluebonnet:     #39406b;

  /* Semantic — light ground (default) */
  --bg:        var(--caliche);
  --surface:   var(--caliche-2);
  --fg:        var(--ink);
  --fg-muted:  #5c5044;
  --fg-faint:  #675b4e;
  --rule:      rgba(23, 18, 14, 0.16);
  --rule-soft: rgba(23, 18, 14, 0.09);
  --accent:    var(--tempranillo);

  /* Type */
  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --body:    'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --step--2: clamp(0.70rem, 0.68rem + 0.10vw, 0.76rem);
  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.90rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.10rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.38vw, 1.42rem);
  --step-2:  clamp(1.48rem, 1.32rem + 0.78vw, 1.95rem);
  --step-3:  clamp(1.85rem, 1.55rem + 1.45vw, 2.75rem);
  --step-4:  clamp(2.30rem, 1.75rem + 2.65vw, 3.90rem);
  --step-5:  clamp(2.85rem, 1.90rem + 4.55vw, 5.60rem);

  /* Space */
  --gutter:  clamp(1.25rem, 0.9rem + 1.7vw, 2.5rem);
  --measure: 62ch;
  --wrap:    76rem;
  --wrap-narrow: 54rem;
  --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);

  --radius:    2px;
  --radius-lg: 3px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);

  /* A whisper of paper grain so the flats read like material, not pixels. */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='0.045'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Dark ground: applied to sections, not the root */
.on-ink {
  --bg:        var(--ink);
  --surface:   var(--ink-2);
  --fg:        var(--caliche);
  --fg-muted:  #a89e90;
  --fg-faint:  #918879;
  --rule:      rgba(220, 216, 205, 0.18);
  --rule-soft: rgba(220, 216, 205, 0.10);
  --accent:    var(--horn);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  /* Phones stretch/bounce the page at the top edge, which visibly "zooms"
     the hero photo mid-scroll. Contain it (also stops accidental
     pull-to-refresh while reading). */
  overscroll-behavior-y: none;
}

body {
  background: var(--caliche);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* A fast scroll-flick can register as a double tap and smart-zoom the
     page. Pinch zoom still works. */
  touch-action: manipulation;
}

img, picture, video, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }

/* ---------- Type ---------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.018em;
  font-variation-settings: 'SOFT' 26, 'WONK' 1, 'opsz' 120;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); font-variation-settings: 'SOFT' 20, 'WONK' 0, 'opsz' 36; letter-spacing: -0.012em; }
h4 { font-size: var(--step-1); font-variation-settings: 'SOFT' 14, 'WONK' 0, 'opsz' 24; letter-spacing: -0.008em; }

p { text-wrap: pretty; }

a { color: inherit; }

/* Eyebrow / label — a lone star, then the words. */
.eyebrow {
  font-family: var(--body);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-bottom: 1.4rem;
}
.eyebrow::before {
  content: '★';
  font-size: 0.95em;
  line-height: 1;
  transform: translateY(-0.06em);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--fg-muted);
  max-width: 46ch;
  font-weight: 300;
}

.prose p + p { margin-top: 1.15em; }
.prose { max-width: var(--measure); color: var(--fg-muted); }

.tnum { font-variant-numeric: tabular-nums; }

/* ---------- Layout ---------- */
.wrap {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
}
.wrap--narrow { --wrap: var(--wrap-narrow); }

.section {
  background-color: var(--bg);
  background-image: var(--grain);
  color: var(--fg);
  padding-block: var(--section-y);
  position: relative;
}
.section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.section--flush-top { padding-top: 0; }

.section-head { margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.section-head .lede { margin-top: 1.35rem; }

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -100%;
  z-index: 200;
  background: var(--ink);
  color: var(--caliche);
  padding: 0.7rem 1.1rem;
  font-size: var(--step--1);
  font-weight: 600;
  transition: top 0.18s var(--ease);
}
.skip-link:focus { top: 0.75rem; }

/* ---------- Focus ---------- */
:where(a, button, summary, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--horn);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: 1rem;
  transition: background-color 0.35s var(--ease), backdrop-filter 0.35s var(--ease),
              box-shadow 0.35s var(--ease), padding 0.35s var(--ease),
              transform 0.42s var(--ease);
}
.site-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(23, 18, 14, 0.72), rgba(23, 18, 14, 0));
  opacity: 1;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
  z-index: -1;
}
.site-header.is-stuck { padding-block: 0.6rem; }
.site-header.is-stuck::after { opacity: 0; }

/* On scroll the bar dissolves to solid ink and tightens. */
.site-header.is-stuck {
  background: var(--ink);
  box-shadow: 0 1px 0 rgba(220, 216, 205, 0.13);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.brand img {
  width: auto;
  height: clamp(34px, 2.1rem + 1vw, 46px);
  transition: height 0.35s var(--ease);
}
.is-stuck .brand img { height: clamp(30px, 1.8rem + 0.8vw, 38px); }

.nav { display: flex; align-items: center; gap: clamp(1.1rem, 0.4rem + 1.5vw, 2.1rem); }
.nav a {
  color: var(--caliche);
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.02em;
  position: relative;
  padding-block: 0.4rem;
  white-space: nowrap;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0.15rem;
  width: 100%;
  height: 1px;
  background: var(--horn);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease-out);
}
.nav a:hover::after, .nav a[aria-current='page']::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current='page'] { color: var(--horn-lt); }

/* ---------- Buttons — dance-hall poster: flat ink, a pinstripe inside the edge ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95em 1.7em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  position: relative;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
  white-space: nowrap;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid currentColor;
  border-radius: 1px;
  opacity: 0.35;
  pointer-events: none;
}

.btn--primary { background: var(--tempranillo); color: var(--bone); }
.btn--primary:hover { background: var(--tempranillo-lt); }

.btn--ghost { border-color: currentColor; color: var(--fg); }
.btn--ghost::after { display: none; }
.btn--ghost:hover { color: var(--bg); background: var(--fg); }

.btn--gold { background: var(--horn); color: var(--ink); }
.btn--gold:hover { background: var(--horn-lt); }

.btn--sm { padding: 0.72em 1.25em; font-size: var(--step--2); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }

/* Text link with wiping underline */
.tlink {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.35s var(--ease-out), color 0.25s var(--ease);
  padding-bottom: 0.12em;
}
.tlink:hover { background-size: 0% 1px; }

/* ---------- Mobile nav ---------- */
/* Header reserve shortcut: hidden on desktop (the nav has its own), shown beside the hamburger on mobile. */
.nav-reserve { display: none; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--caliche);
  position: relative;
  z-index: 120;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  position: relative;
  transition: background-color 0.2s var(--ease);
}
.nav-toggle span::before, .nav-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.34s var(--ease-out), top 0.2s var(--ease);
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
body.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .nav-reserve { display: inline-flex; margin-left: auto; }
  .header-inner { gap: 0.75rem; }
  .nav {
    position: fixed;
    inset: 0;
    background: var(--ink);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: 6rem var(--gutter) 3rem;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.6s var(--ease-out);
    z-index: 110;
    overflow-y: auto;
  }
  body.nav-open .nav { clip-path: inset(0 0 0 0); }
  body.nav-open { overflow: hidden; }
  /* keep the wordmark above the open panel */
  .brand { position: relative; z-index: 120; }
  .nav a {
    font-family: var(--display);
    font-size: var(--step-3);
    font-weight: 400;
    font-variation-settings: 'SOFT' 20, 'WONK' 1, 'opsz' 60;
    letter-spacing: -0.015em;
    text-transform: none;
    padding-block: 0.42em;
    width: 100%;
    border-bottom: 1px solid rgba(220, 216, 205, 0.12);
    opacity: 0;
    transform: translateY(14px);
  }
  .nav a::after { display: none; }
  body.nav-open .nav a {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s var(--ease-out) calc(var(--i) * 55ms + 120ms),
                transform 0.5s var(--ease-out) calc(var(--i) * 55ms + 120ms);
  }
  .nav .btn {
    margin-top: 1.75rem;
    font-family: var(--body);
    font-size: var(--step--1);
    text-transform: uppercase;
    border-bottom: 0;
    width: auto;
    padding: 1em 1.9em;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  /* The daystrip sits just below; leave room so both fit the first screen.
     The vh line is a fallback for browsers without svh; site.js then pins
     whichever resolves, in px, and ratchets it to the smallest viewport
     seen so mobile URL bars can't re-crop the cover image. */
  min-height: min(calc(100vh - 6.5rem), 54rem);
  min-height: min(calc(100svh - 6.5rem), 54rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 8rem;
  padding-bottom: 0;
  background: var(--ink);
  color: var(--caliche);
  overflow: hidden;
}
.hero--short { min-height: min(66vh, 40rem); min-height: min(66svh, 40rem); }

.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* Hero pit phase: a looping animated image (or a still, for reduced
   motion) sits over the photo, faded in and out by site.js.
   The ::after scrim paints above all layers, keeping the headline readable. */
.hero-media .hero-loop,
.hero-media .hero-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0;
  transition: opacity 0.65s var(--ease);
}
.hero-media .hero-loop.is-on,
.hero-media .hero-still.is-on { opacity: 1; }

/* Desktop composition: the pit clip is a narrow centered column showing
   just the fire pit, and the wine photo behind it is zoomed so its outer
   two glasses flank the pit instead of hiding behind it (the photo's
   three glasses sit dead centre at 1×). The zoom also pushes the blurry
   diners off the right edge. Phones keep the full-bleed treatment.
   ⚠️ This targets the PHOTO ONLY via its .hero-photo class. The pit layers
   are also <img>s inside .hero-media; an `.hero--home .hero-media img`
   selector here (0,2,1) outranks the pit rules below (0,2,0) and hands
   the pit this zoom/offset/stretch — the pit then swallows the whole
   hero and the white glass disappears. That is exactly what happened
   once (6f4f6e7); don't widen this selector again. */
@media (min-width: 861px) {
  .hero--home .hero-photo {
    position: absolute;
    width: 160%;
    max-width: none; /* the global img reset caps at 100% */
    height: 160%;
    left: -31.5%;
    top: -26%;
    object-position: 50% 42%;
    /* Owner: wider glasses, same height — a horizontal-only stretch. The
       scene is mostly bokeh, so 20% reads as fuller glasses, not a
       distorted photo. Origin at the box centre keeps the pit's hidden
       middle glass in place. */
    transform: scaleX(1.2);
    transform-origin: 50% 50%;
  }
  /* The pit owns everything right of the first (white) glass: it starts
     where that glass ends (~35% of the hero — measured off a ruler
     overlay, and constant across widths because the photo geometry
     above is all percentages) and runs off the right edge, hiding the
     rosé and red glasses completely. Only the left edge is feathered.
     object-position 52% keeps the FIRE in frame; the top of the hood is
     what gets cropped as the band grows. */
  .hero-media .hero-loop,
  .hero-media .hero-still {
    left: 35.5%;
    right: auto;
    width: 64.5%; /* an <img> with width:auto keeps its own ratio and ignores right:0 */
    transform: none;
    object-position: 50% 64%;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 5.5%);
    mask-image: linear-gradient(to right, transparent, #000 5.5%);
  }
}

.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--ink) 2%, rgba(23, 18, 14, 0.34) 26%, rgba(23, 18, 14, 0.10) 60%, rgba(23, 18, 14, 0.48) 100%),
    linear-gradient(to right, rgba(23, 18, 14, 0.68) 0%, rgba(23, 18, 14, 0.42) 32%, rgba(23, 18, 14, 0.12) 60%, rgba(23, 18, 14, 0) 100%);
}

/* Narrow screens crop into the busiest part of the photo, so the scrim
   has to work harder for the headline to stay readable. */
@media (max-width: 700px) {
  .hero-media img { object-position: 62% 45%; }
  .hero-media::after {
    background:
      linear-gradient(to top, var(--ink) 3%, rgba(23, 18, 14, 0.55) 32%, rgba(23, 18, 14, 0.32) 70%, rgba(23, 18, 14, 0.60) 100%);
  }
}

/* Home hero only — split layout: the headline rides the upper third
   while "Half a day tour" and the CTAs keep their original bottom-anchored
   spot. flex:1 stretches the body across the hero; margin-bottom:auto on
   the h1 does the split. Other pages' heroes stay bottom-anchored. */
.hero-body { position: relative; z-index: 1; padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.hero--home .hero-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding-top: clamp(1rem, 6vh, 4rem);
}
.hero--home .hero-body h1 { margin-bottom: auto; }
.hero h1 { max-width: 15ch; }
.hero h1 em {
  font-style: normal;
  color: var(--horn-lt);
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 144;
}
/* Three-line lockup: "Texas" as a small kicker in the site's eyebrow
   voice (lone star included), then the two display lines. */
.hero h1 .h1-kicker {
  display: flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--body);
  font-size: var(--step-3);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 1.1rem;
}
.hero h1 .h1-kicker::before {
  content: '★';
  font-size: 0.95em;
  transform: translateY(-0.06em);
  color: var(--caliche);
}
.hero h1 .h1-kicker ~ em { display: block; }
.hero .lede { color: rgba(220, 216, 205, 0.86); margin-top: 1.65rem; max-width: 48ch; }
.hero .btn-row { margin-top: 2.4rem; }

/* ---------- The day strip (route diagram) ----------
   Lives right under the hero; on wide screens it pins beneath the
   header and its gold bar advances with the itinerary rail. */
.daystrip {
  --strip-pad: 1.35rem;
  position: sticky;
  top: var(--header-h, 3.4rem);
  z-index: 90; /* under the fixed header (100), over everything else */
  background: var(--ink);
  background-image: var(--grain);
  color: var(--caliche);
  transition: box-shadow 0.35s var(--ease), top 0.42s var(--ease);
}
.daystrip.is-pinned { box-shadow: 0 14px 30px -18px rgba(23, 18, 14, 0.65); }
.daystrip-track { position: relative; }
.daystrip-inner {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  padding-block: var(--strip-pad) 1.5rem;
}

/* Anchor jumps land below the header + pinned strip (index only). */
html:has(.daystrip) { scroll-padding-top: 8.75rem; }
@media (min-width: 781px) {
  html:has(.daystrip) { scroll-padding-top: 11rem; }
}

/* The gold bar: spans tick-to-tick, driven by --dayp from site.js */
.daystrip-progress {
  position: absolute;
  top: calc(var(--strip-pad) + 4px);
  left: 5px;
  width: calc((100% / 6) * 5);
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--horn) 0%, var(--horn-lt) 100%);
  transform: scaleX(var(--dayp, 0));
  transform-origin: left;
  transition: transform 0.6s var(--ease);
  pointer-events: none;
}

/* The E-450: parked over the current stop's tick. --dayp arrives snapped
   to a stop (site.js), and the matched 0.6s transitions mean the bus and
   the gold bar drive to the next tick together when you scroll into the
   next leg of the day. */
.daystrip-bus {
  position: absolute;
  top: calc(var(--strip-pad) + 8px); /* wheels planted on the line */
  left: max(18px, calc(5px + (100% / 6) * 5 * var(--dayp, 0)));
  z-index: 2; /* above the ticks it rolls over */
  width: 52px;
  transform: translate(-50%, -100%); /* centered over the tick it's parked at */
  transition: left 0.6s var(--ease);
  pointer-events: none;
  filter: drop-shadow(0 4px 5px rgba(23, 18, 14, 0.55));
  animation: busArrive 0.7s var(--ease-out) 1.25s backwards;
}
.daystrip-bus svg { display: block; width: 100%; height: auto; }
.daystrip-bus .bus-body { fill: var(--caliche); }
.daystrip-bus .bus-glass { fill: var(--ink-2); }
.daystrip-bus .bus-stripe { fill: var(--horn); }
.daystrip-bus .bus-tire { fill: #241c15; stroke: rgba(220, 216, 205, 0.4); stroke-width: 1; }
.daystrip-bus .bus-hub { fill: var(--caliche); }
.daystrip-bus .bus-light { fill: var(--horn-lt); }
@keyframes busArrive {
  from { opacity: 0; transform: translate(-130%, -100%); }
  to { opacity: 1; transform: translate(-50%, -100%); }
}

/* While the bus is between stops, site.js puts .is-driving on the strip
   (.is-reversing too when headed back up the page). The wheels only turn
   when the bus is actually moving. */
.daystrip-bus .bus-spoke {
  fill: none;
  stroke: #241c15;
  stroke-width: 1.1;
  stroke-linecap: round;
}
.daystrip-bus .bus-wheel {
  transform-box: fill-box;
  transform-origin: center;
  /* Two turns as it drives in on page load, timed with busArrive. */
  animation: wheelRoll 0.5s linear 1.25s 2;
}
.daystrip.is-driving .bus-wheel { animation: wheelRoll 0.5s linear infinite; }
.daystrip.is-reversing .bus-wheel { animation-direction: reverse; }
@keyframes wheelRoll { to { transform: rotate(360deg); } }

/* Suspension: lean back off the line, settle with a small spring on arrival. */
.daystrip-bus svg {
  transform-origin: 50% 100%;
  transition: transform 0.5s cubic-bezier(0.34, 1.9, 0.5, 1);
}
.daystrip.is-driving .daystrip-bus svg {
  transform: rotate(-2.2deg);
  transition: transform 0.16s var(--ease);
}
.daystrip.is-reversing .daystrip-bus svg { transform: rotate(2.2deg); }

/* Caliche dust kicked up behind the rear wheel while rolling forward. */
.daystrip-bus::before,
.daystrip-bus::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220, 216, 205, 0.7), rgba(220, 216, 205, 0) 68%);
  opacity: 0;
  pointer-events: none;
}
.daystrip.is-driving:not(.is-reversing) .daystrip-bus::before {
  animation: dustKick 0.42s ease-out infinite;
}
.daystrip.is-driving:not(.is-reversing) .daystrip-bus::after {
  animation: dustKick 0.42s ease-out 0.21s infinite;
  bottom: 4px;
}
@keyframes dustKick {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
  30% { opacity: 0.65; }
  100% { opacity: 0; transform: translate(-12px, -4px) scale(1.5); }
}
.daystrip-stop {
  position: relative;
  padding-top: 1.5rem;
  padding-right: 0.6rem;
}
/* the line */
.daystrip-stop::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(220, 216, 205, 0.24);
  transform: scaleX(0);
  transform-origin: left;
  animation: drawLine 0.85s var(--ease-out) forwards;
  animation-delay: calc(0.55s + var(--i) * 0.11s);
}
.daystrip-stop:last-child::before { right: 50%; }
/* the tick */
.daystrip-stop::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; /* above the progress bar */
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--horn);
  background: var(--ink);
  opacity: 0;
  transform: scale(0.4);
  animation: popTick 0.5s var(--ease-out) forwards;
  animation-delay: calc(0.55s + var(--i) * 0.11s);
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.daystrip-stop--major::after { background: var(--horn); }
/* Stops fill in gold as the bus rolls over them — the delays hold the
   tick and its time until the 0.6s drive has all but reached them.
   Un-filling (scrolling back up) is immediate: no delay on the base rules. */
.daystrip-stop.is-past::after {
  background: var(--horn-lt);
  border-color: var(--horn-lt);
  transition-delay: 0.38s;
}
.daystrip-time { transition: color 0.3s var(--ease); }
.daystrip-stop.is-past .daystrip-time { color: var(--horn-lt); transition-delay: 0.42s; }
@keyframes drawLine { to { transform: scaleX(1); } }
@keyframes popTick { to { opacity: 1; transform: scale(1); } }

.daystrip-time {
  display: block;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--caliche);
}
.daystrip-label {
  display: block;
  font-size: var(--step--2);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(220, 216, 205, 0.58);
  margin-top: 0.2rem;
}

/* Slim single-row strip on small screens: times and ticks only. */
@media (max-width: 780px) {
  .daystrip { --strip-pad: 0.85rem; }
  .daystrip-inner { padding-block: var(--strip-pad) 0.9rem; }
  .daystrip-stop { padding-top: 1.1rem; padding-right: 0.35rem; }
  .daystrip-time { font-size: 0.72rem; letter-spacing: 0; }
  .daystrip-label { display: none; }
  .daystrip-bus { width: 40px; }
}

/* ==========================================================================
   Spec band — the facts, as a spec sheet
   ========================================================================== */
.spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.spec-item {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: clamp(1.4rem, 1rem + 1.2vw, 2.1rem) clamp(1rem, 0.7rem + 0.8vw, 1.5rem);
}
.spec-item dt {
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 0.7rem;
}
.spec-item dd {
  font-family: var(--display);
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  font-variation-settings: 'SOFT' 18, 'WONK' 0, 'opsz' 40;
  font-variant-numeric: tabular-nums;
}
.spec-item dd small {
  display: block;
  font-family: var(--body);
  font-size: var(--step--2);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--fg-faint);
  margin-top: 0.45rem;
  line-height: 1.4;
}

/* ==========================================================================
   The route — signature element
   ========================================================================== */
.route { position: relative; }

/* rail: the road */
.route::before,
.route::after {
  content: '';
  position: absolute;
  left: var(--rail-x, 0.5rem);
  top: 0.6rem;
  bottom: 4.5rem;
  width: 2px;
  border-radius: 2px;
}
.route::before { background: var(--rule); }
.route::after {
  background: linear-gradient(to bottom, var(--horn) 0%, var(--tempranillo) 55%, var(--tempranillo) 100%);
  transform-origin: top;
  transform: scaleY(var(--progress, 0));
  transition: transform 0.12s linear;
}

.stop {
  position: relative;
  padding-left: calc(var(--rail-x, 0.5rem) + 2.2rem);
  padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}
.stop:last-child { padding-bottom: 0; }

/* marker */
.stop-dot {
  position: absolute;
  left: calc(var(--rail-x, 0.5rem) - 8px);
  top: 0.35rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--rule);
  background: var(--bg);
  transition: border-color 0.5s var(--ease), background-color 0.5s var(--ease), transform 0.5s var(--ease-out);
  z-index: 2;
}
.stop-dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--tempranillo);
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease-out);
}
.stop.is-on .stop-dot { border-color: var(--tempranillo); transform: scale(1.12); }
.stop.is-on .stop-dot::after { opacity: 1; transform: scale(1); }

.stop-time {
  display: block;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.13em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  margin-bottom: 0.55rem;
}
.stop h3 { margin-bottom: 0.7rem; }
.stop h3 .stop-sub {
  display: block;
  font-family: var(--body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-top: 0.55rem;
}
.stop-body { display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem); }
.stop p { color: var(--fg-muted); max-width: 52ch; }
.stop p + p { margin-top: 0.85em; }

.stop-figure { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--rule-soft); }
.stop-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

/* ---------- Slideshow ----------
   Any figure with [data-slideshow] (itinerary stops, the private-tours
   feature) carries a small crossfading album. Without JS only the first
   slide (.is-active) shows; JS adds arrows, dots and the timer. */
[data-slideshow] { position: relative; }
[data-slideshow] .slides { position: relative; aspect-ratio: 4 / 3; }
[data-slideshow] .slides img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
[data-slideshow] .slides img.is-active { opacity: 1; }

.slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--bone);
  background: rgba(23, 18, 14, 0.55);
  border-radius: var(--radius);
  font-size: 1.5rem;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.3s var(--ease), background-color 0.25s var(--ease);
}
.slide-arrow--prev { left: 0.65rem; }
.slide-arrow--next { right: 0.65rem; }
.slide-arrow:hover { background: rgba(23, 18, 14, 0.8); }
[data-slideshow]:hover .slide-arrow,
[data-slideshow]:focus-within .slide-arrow { opacity: 1; }
@media (hover: none) { .slide-arrow { opacity: 1; } }

.slide-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.5rem;
  display: flex;
  justify-content: center;
  gap: 0.15rem;
  z-index: 2;
}
.slide-dots button {
  width: 26px;
  height: 20px;
  display: grid;
  place-items: center;
}
.slide-dots button::after {
  content: '';
  width: 20px;
  height: 4px;
  border-radius: 1px;
  background: rgba(246, 243, 236, 0.5);
  box-shadow: 0 1px 2px rgba(23, 18, 14, 0.45);
  transition: background-color 0.3s var(--ease);
}
.slide-dots button:hover::after { background: var(--bone); }
.slide-dots button[aria-current='true']::after { background: var(--horn); }

/* facts under each stop */
.stop-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.5rem;
  margin-top: 1.15rem;
}
/* Stamped square tags, like a cattle brand — not pills. */
.chip {
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-muted);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.42em 0.9em;
  white-space: nowrap;
}
.chip--pay { color: var(--tempranillo); border-color: rgba(107, 34, 51, 0.32); }
.on-ink .chip--pay { color: var(--horn-lt); border-color: rgba(224, 185, 104, 0.35); }

/* Menu chip is a real button — it opens the venue's menu in a modal. */
.chip--menu {
  color: var(--tempranillo);
  border-color: rgba(107, 34, 51, 0.45);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.chip--menu::before { content: '★'; font-size: 0.8em; margin-right: 0.5em; }
.chip--menu:hover { background: var(--tempranillo); border-color: var(--tempranillo); color: var(--bone); }

@media (min-width: 760px) {
  .route { --rail-x: 7.25rem; }
  .stop { padding-left: calc(var(--rail-x) + 3rem); }
  .stop-time {
    position: absolute;
    left: 0;
    top: 0.4rem;
    width: calc(var(--rail-x) - 1.35rem);
    text-align: right;
    margin: 0;
    font-size: var(--step-0);
    letter-spacing: 0.03em;
    white-space: nowrap;
  }
  .stop-body { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
}
@media (min-width: 1080px) {
  .route { --rail-x: 8.5rem; }
}

/* ==========================================================================
   Menu modal — a venue's menu card, set on bone paper
   ========================================================================== */
.menu-modal {
  border: 0;
  padding: 0;
  background-color: var(--bone);
  background-image: var(--grain);
  color: var(--ink);
  width: min(92vw, 52rem);
  max-height: 85dvh;
  margin: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px -20px rgba(23, 18, 14, 0.55);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu-modal::backdrop, .photo-modal::backdrop { background: rgba(23, 18, 14, 0.74); }
body.modal-open { overflow: hidden; }
/* Entrance: the card rises and settles, the backdrop fades — no JS, and browsers
   without @starting-style just pop it open as before. */
.menu-modal, .photo-modal, .menu-modal::backdrop, .photo-modal::backdrop {
  transition-property: opacity, transform, overlay, display;   /* overlay/display: hold the top layer for the exit fade */
  transition-duration: 0.3s;
  transition-timing-function: var(--ease);
  transition-behavior: allow-discrete;
}
.menu-modal, .photo-modal { opacity: 0; transform: translateY(14px) scale(0.985); }
.menu-modal::backdrop, .photo-modal::backdrop { opacity: 0; }
.menu-modal[open], .photo-modal[open] {
  opacity: 1;
  transform: none;
  transition-duration: 0.45s, 0.55s, 0.55s, 0.55s;
  transition-timing-function: var(--ease-out);
}
.menu-modal[open]::backdrop, .photo-modal[open]::backdrop { opacity: 1; transition-duration: 0.45s; }
@starting-style {
  .menu-modal[open], .photo-modal[open] { opacity: 0; transform: translateY(14px) scale(0.985); }
  .menu-modal[open]::backdrop, .photo-modal[open]::backdrop { opacity: 0; }
}

.menu-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--bone);
  background-image: var(--grain);
  padding: clamp(1.25rem, 3vw, 1.9rem) clamp(1.25rem, 4vw, 2.5rem) 1.1rem;
  border-bottom: 2px solid var(--ink);
}
.menu-venue {
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--tempranillo);
  margin-bottom: 0.5rem;
}
.menu-venue::before { content: '★ '; }
.menu-head h3 { padding-right: 3rem; }
.menu-hours { margin-top: 0.7rem; font-size: var(--step--1); }
.menu-hours b { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--step--2); }
.menu-fine { margin-top: 0.35rem; font-size: var(--step--2); color: var(--fg-faint); }

.menu-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--fg-muted);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.menu-close:hover { color: var(--bone); background: var(--tempranillo); border-color: var(--tempranillo); }

.menu-body { padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 4vw, 2.5rem) clamp(1.25rem, 3vw, 2rem); }
.menu-cols { columns: 2 20rem; column-gap: 3rem; }

.menu-section { break-inside: avoid; margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.menu-section h4 {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.5rem;
  margin-bottom: 0.6rem;
}
.menu-section h4::before { content: '★'; color: var(--horn); font-size: 0.62em; margin-right: 0.6em; vertical-align: 0.18em; }
.menu-sub { font-size: var(--step--1); color: var(--fg-muted); margin-bottom: 0.5rem; }

.menu-item { padding-block: 0.42rem; }
.menu-row { display: flex; align-items: baseline; gap: 0.55rem; }
.menu-name { font-weight: 600; }
.menu-tag {
  font-style: normal;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--liveoak);
  white-space: nowrap;
}
.menu-leader { flex: 1; min-width: 1.25rem; border-bottom: 1px dotted rgba(23, 18, 14, 0.35); transform: translateY(-0.22em); }
.menu-price { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.menu-desc { font-size: var(--step--1); color: var(--fg-muted); margin-top: 0.15rem; line-height: 1.45; }

.menu-foot {
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
  font-size: var(--step--2);
  color: var(--fg-faint);
}

/* ==========================================================================
   The ledger — what the day actually costs
   ========================================================================== */
.ledger-wrap {
  display: grid;
  gap: clamp(2rem, 1rem + 3.5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 900px) { .ledger-wrap { grid-template-columns: 1fr 1.05fr; } }

.ledger {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.6rem);
  box-shadow: 0 1px 2px rgba(23, 18, 14, 0.05), 0 12px 30px -18px rgba(23, 18, 14, 0.35);
}
.ledger-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-faint);
  font-weight: 600;
}
.ledger-line {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.6rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--rule-soft);
}
.ledger-line p { display: flex; flex-direction: column; gap: 0.18rem; }
.ledger-line p small {
  font-size: var(--step--2);
  color: var(--fg-faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ledger-line dd {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: var(--step-0);
  white-space: nowrap;
}
.ledger-line--paid dd { color: var(--tempranillo); }
.on-ink .ledger-line--paid dd { color: var(--horn-lt); }

.ledger-note {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 2px solid var(--fg);
  font-size: var(--step--1);
  color: var(--fg-faint);
  line-height: 1.5;
}

/* ==========================================================================
   Included / not included
   ========================================================================== */
.cols-2 {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 4rem);
}
@media (min-width: 760px) { .cols-2 { grid-template-columns: 1fr 1fr; } }

.ticklist li {
  position: relative;
  padding: 0.85rem 0 0.85rem 1.6rem;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--fg-muted);
}
.ticklist li::before {
  content: '★';
  position: absolute;
  left: 0;
  top: 0.85rem;
  font-size: 0.72rem;
  line-height: 1.6rem;
  color: var(--liveoak);
}
.ticklist--out li::before {
  content: '\2715'; /* ✕ */
  color: var(--tempranillo);
}
.ticklist li b { color: var(--fg); font-weight: 600; }

/* ==========================================================================
   Gallery
   ========================================================================== */
/* A deterministic mosaic: every cell is a fixed row height, two items take
   deliberate spans. Tiles exactly at both 2 and 4 columns. */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: clamp(8rem, 30vw, 13rem);
  gap: clamp(0.5rem, 0.2rem + 0.9vw, 1rem);
}
@media (min-width: 720px) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: clamp(9rem, 14vw, 14.5rem);
  }
}
.gallery .g-big { grid-column: span 2; grid-row: span 2; }
.gallery .g-wide { grid-column: span 2; }

.gallery figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--rule-soft);
  min-height: 0;
}
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out), filter 0.6s var(--ease);
  filter: saturate(0.9) contrast(1.02);
}
.gallery figure:hover img { transform: scale(1.06); filter: saturate(1.05); }
.gallery figcaption {
  position: absolute;
  inset: auto 0 0 0;
  pointer-events: none;             /* an overlay — taps go through to the zoom button beneath */
  padding: 2.5rem 0.9rem 0.8rem;
  background: linear-gradient(to top, rgba(23, 18, 14, 0.85), transparent);
  color: var(--caliche);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease-out);
}
.gallery figure:hover figcaption,
.gallery figure:focus-within figcaption { opacity: 1; transform: none; }
.gallery .g-zoom { display: block; width: 100%; height: 100%; padding: 0; cursor: zoom-in; }
.gallery .g-zoom:focus-visible { outline-offset: -3px; }   /* the figure clips, so keep the ring inside */

/* ==========================================================================
   Photo modal — a "Captured moments" photo, matted on the same bone paper as
   the venue menus. One dialog, filled by site.js.
   ========================================================================== */
.photo-modal {
  --mat: clamp(0.5rem, 0.3rem + 1vw, 0.9rem);   /* the paper border around the print */
  border: 0;
  padding: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  margin: auto;
  overflow: visible;
  touch-action: pan-y;              /* keep horizontal drags as pointer events → swipe (site.js) */
}
.photo-mat {
  background-color: var(--bone);
  background-image: var(--grain);
  color: var(--ink);
  padding: var(--mat);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px -20px rgba(23, 18, 14, 0.55);
}
.photo-frame { display: flex; flex-direction: column; }
.photo-img {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(94vw - 2 * var(--mat));   /* site.js sets the exact box; these are the fallback caps */
  max-height: calc(78dvh - 2 * var(--mat));
  border-radius: var(--radius);
  background: var(--rule-soft);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.photo-img.is-loaded { opacity: 1; }
.photo-cap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.75rem 0.15rem 0.15rem;
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--tempranillo);
}
.photo-title::before { content: '★ '; }
.photo-idx { color: var(--fg-faint); font-weight: 500; }
.photo-close {                      /* sits over the photo's corner, on its own scrap of paper */
  top: calc(var(--mat) + 0.5rem);
  right: calc(var(--mat) + 0.5rem);
  background-color: var(--bone);
  background-image: var(--grain);
}
.photo-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--bone);
  background: rgba(23, 18, 14, 0.55);
  border-radius: var(--radius);
  font-size: 1.9rem;
  line-height: 1;
  transition: background-color 0.25s var(--ease);
}
.photo-nav:hover { background: rgba(23, 18, 14, 0.85); }
.photo-nav--prev { left: calc(var(--mat) + 0.5rem); }
.photo-nav--next { right: calc(var(--mat) + 0.5rem); }


/* ==========================================================================
   Testimonials
   ========================================================================== */
.quotes { display: grid; gap: clamp(1rem, 0.5rem + 1.5vw, 1.75rem); }
@media (min-width: 800px) { .quotes { grid-template-columns: repeat(3, 1fr); } }

.quote {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 1rem + 1.4vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.quote-mark {
  font-family: var(--display);
  font-size: 3.4rem;
  line-height: 1;
  color: var(--horn);
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 144;
  height: 1.55rem;
  overflow: hidden;
  margin-bottom: -0.35rem;
}
.quote-body {                       /* text + "more" toggle; grows so the footer sits at the bottom */
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.quote p {
  font-family: var(--display);
  font-size: var(--step-1);
  line-height: 1.42;
  font-weight: 400;
  font-variation-settings: 'SOFT' 16, 'WONK' 0, 'opsz' 28;
  letter-spacing: -0.005em;
}
/* Long reviews fold to six lines behind a "more" toggle. site.js adds .is-clamped
   only to cards whose text overflows the fold (short reviews show whole, no button)
   and .is-open when the reader expands one. Without JS: full text, no button. The
   whole review is always in the DOM — the fold is purely visual. */
.quote.is-clamped:not(.is-open) p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
}
/* JS splits a folded review into head (shown) + tail (hidden) at a word boundary,
   so the ellipsis lands after a whole word rather than the clamp's mid-word cut. */
.quote.is-clamped:not(.is-open) .quote-tail { display: none; }
.quote.is-clamped:not(.is-open) .quote-head::after { content: '\2026'; }
.quote-more {
  display: none;
  align-self: flex-start;
  font-family: var(--body);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 0.1rem 0;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 0.3em;
  transition: text-decoration-color 0.2s;
}
.quote.is-clamped .quote-more { display: inline-block; }
.quote-more:hover { text-decoration-color: currentColor; }
/* The whole card is the click target once it can fold (site.js) — the button
   stays as the keyboard/AT control. Hover borrows .partner's accent border. */
.quote.is-clamped { cursor: pointer; transition: border-color 0.3s var(--ease); }
.quote.is-clamped:hover { border-color: var(--accent); }
.quote.is-clamped:hover .quote-more { text-decoration-color: currentColor; }
/* Fold/unfold: site.js runs the paragraph's height from folded to open (FLIP) with
   the same slow ease-out as the section reveals, while the hidden tail fades in. */
.quote p.is-animating { overflow: hidden; transition: height 0.6s var(--ease-out); }
.quote-tail { transition: opacity 0.7s var(--ease); }
@starting-style { .quote.is-open .quote-tail { opacity: 0; } }
.quote footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.7rem;
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
  font-weight: 600;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule-soft);
}
.quote-who { color: var(--fg-muted); }
.quote-src { margin-left: auto; white-space: nowrap; }   /* "Viator · July 2026" — sits right, drops to its own line on narrow cards */
.stars { color: var(--horn); letter-spacing: 0.12em; font-size: var(--step--1); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { border-top: 1px solid var(--rule); }
.faq details {
  border-bottom: 1px solid var(--rule);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding-block: clamp(1.1rem, 0.9rem + 0.7vw, 1.6rem);
  padding-right: 3rem;
  position: relative;
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.008em;
  font-variation-settings: 'SOFT' 16, 'WONK' 0, 'opsz' 28;
  transition: color 0.25s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary::after,
.faq summary::before {
  content: '';
  position: absolute;
  right: 0.4rem;
  top: 50%;
  background: currentColor;
  transition: transform 0.4s var(--ease-out), opacity 0.3s var(--ease);
}
.faq summary::before { width: 15px; height: 1.5px; margin-top: -0.75px; }
.faq summary::after { width: 1.5px; height: 15px; margin-top: -7.5px; right: calc(0.4rem + 6.75px); }
.faq details[open] summary::after { transform: rotate(90deg); opacity: 0; }
.faq details[open] summary { color: var(--accent); }
.faq-answer { overflow: hidden; }
.faq-answer > div {
  padding-bottom: clamp(1.2rem, 1rem + 0.7vw, 1.7rem);
  color: var(--fg-muted);
  max-width: 62ch;
}
.faq-answer p + p { margin-top: 0.9em; }

/* ==========================================================================
   Booking
   ========================================================================== */
.booking-panel {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: clamp(1.25rem, 0.8rem + 1.6vw, 2rem);
}
.booking-frame {
  width: 100%;
  min-height: 640px;
  border: 0;
  display: block;
  background: transparent;
}

.cta-final { text-align: center; }
.cta-final h2 { max-width: 18ch; margin-inline: auto; }
.cta-final .lede { margin-inline: auto; margin-top: 1.4rem; text-align: center; }
.cta-final .btn-row { justify-content: center; margin-top: 2.4rem; }

/* ==========================================================================
   Partners
   ========================================================================== */
.partners {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.55rem;
}
.partner {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.6em 1.15em;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--fg-muted);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.partner:hover { border-color: var(--accent); color: var(--fg); }

/* ==========================================================================
   Contact / forms
   ========================================================================== */
.contact-grid { display: grid; gap: clamp(2rem, 1rem + 3.5vw, 4.5rem); align-items: start; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1.1fr; } }

.contact-list > div {
  padding-block: 1.35rem;
  border-bottom: 1px solid var(--rule);
}
.contact-list > div:first-child { border-top: 1px solid var(--rule); }
.contact-list dt {
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 0.5rem;
}
.contact-list dd {
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variation-settings: 'SOFT' 16, 'WONK' 0, 'opsz' 28;
  word-break: break-word;
}
.contact-list dd a { text-decoration: none; }
.contact-list dd a:hover { color: var(--accent); }

.field { display: block; margin-bottom: 1.1rem; }
.field span {
  display: block;
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-faint);
  margin-bottom: 0.5rem;
}
.field input, .field textarea, .field select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.85em 1em;
  font-size: var(--step-0);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(107, 34, 51, 0.14);
}
.on-ink .field input:focus, .on-ink .field textarea:focus, .on-ink .field select:focus {
  box-shadow: 0 0 0 3px rgba(224, 185, 104, 0.2);
}
.field textarea { resize: vertical; min-height: 8rem; }
.form-note { font-size: var(--step--1); color: var(--fg-faint); margin-top: 1rem; }

/* ==========================================================================
   Feature rows (about page)
   ========================================================================== */
.feature {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 4rem);
  align-items: center;
}
@media (min-width: 860px) {
  .feature { grid-template-columns: 1fr 1fr; }
  .feature--flip .feature-media { order: 2; }
}
.feature-media { overflow: hidden; border-radius: var(--radius-lg); background: var(--rule-soft); }
.feature-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.feature + .feature { margin-top: clamp(3.5rem, 2rem + 5vw, 7rem); }

/* Steps (how it works) */
.steps { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); counter-reset: step; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { border-top: 2px solid var(--fg); padding-top: 1.3rem; }
.step-n {
  display: block;
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
  font-weight: 700;
  margin-bottom: 0.9rem;
}
.step h3 { margin-bottom: 0.7rem; }
.step p { color: var(--fg-muted); font-size: var(--step--1); }

/* Callout */
.callout {
  border-left: 3px solid var(--horn);
  padding: 0.4rem 0 0.4rem 1.4rem;
  color: var(--fg-muted);
  max-width: 56ch;
}

/* Notice (build note) */
.notice {
  border: 1px dashed var(--rule);
  border-radius: var(--radius-lg);
  padding: 1rem 1.2rem;
  font-size: var(--step--1);
  color: var(--fg-faint);
  background: var(--surface);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background-color: var(--ink);
  background-image: var(--grain);
  color: var(--caliche);
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 5.5rem) 2rem;
}
.footer-top {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  border-bottom: 1px solid rgba(220, 216, 205, 0.14);
}
@media (min-width: 800px) { .footer-top { grid-template-columns: 1.5fr 1fr 1fr; } }

.footer-brand img { height: 46px; width: auto; margin-bottom: 1.35rem; }
.footer-brand p { color: rgba(220, 216, 205, 0.62); max-width: 34ch; font-size: var(--step--1); }

.footer-col h3 {
  font-family: var(--body);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--horn);
  margin-bottom: 1.1rem;
}
.footer-col li { margin-bottom: 0.65rem; }
.footer-col a {
  color: rgba(220, 216, 205, 0.78);
  text-decoration: none;
  font-size: var(--step--1);
  transition: color 0.25s var(--ease);
}
.footer-col a:hover { color: var(--horn-lt); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.75rem;
  font-size: var(--step--2);
  color: rgba(220, 216, 205, 0.48);
  letter-spacing: 0.04em;
}
.footer-bottom a { color: inherit; text-decoration: none; }
.footer-bottom a:hover { color: var(--horn-lt); }

/* ==========================================================================
   Reveal on scroll — a plain fade, no sliding furniture
   ========================================================================== */
.reveal {
  opacity: 0;
  transition: opacity 0.55s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.reveal.is-in { opacity: 1; }

/* Hero entrance */
.hero-body > * {
  opacity: 0;
  animation: riseIn 0.9s var(--ease-out) forwards;
}
.hero-body > *:nth-child(1) { animation-delay: 0.1s; }
.hero-body > *:nth-child(2) { animation-delay: 0.2s; }
.hero-body > *:nth-child(3) { animation-delay: 0.3s; }
.hero-body > *:nth-child(4) { animation-delay: 0.4s; }
.hero-body > *:nth-child(5) { animation-delay: 0.5s; }
@keyframes riseIn { to { opacity: 1; } }

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after, ::backdrop {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-body > * { opacity: 1; transform: none; }
  .daystrip-stop::before { transform: scaleX(1); }
  .daystrip-stop::after { opacity: 1; transform: none; }
  .route::after { transform: scaleY(1); }
  /* Bus and bar still track the current stop — --dayp arrives snapped and
     the zeroed transitions above make each hop instant instead of a glide. */
  .daystrip-bus { animation: none; }
}

/* ==========================================================================
   Utilities
   ========================================================================== */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.center { text-align: center; }

/* Divider with a lone star set into it. */
.rule { height: 1px; background: var(--rule); border: 0; position: relative; overflow: visible; }
.rule::after {
  content: '★';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg);
  padding-inline: 0.8rem;
  color: var(--horn);
  font-size: 0.75rem;
  line-height: 1;
}