:root {
  --ink: #1A1614;
  --paper: #F4EFE3;
  --paper-warm: #EAE3D2;
  --vermilion: #C04A1C;
  --ink-56: rgba(26, 22, 20, 0.56);
  --ink-36: rgba(26, 22, 20, 0.36);
  --ink-16: rgba(26, 22, 20, 0.16);

  /* Vertical rhythm tokens. Reference these instead of hand-tuning
     one-off clamp() values elsewhere. Extend the scale here only if
     a step is genuinely missing. */
  --space-hero: clamp(6.75rem, 12vw, 11rem);      /* home hero band; major section pause */
  --space-section-lg: clamp(5.5rem, 9.5vw, 8.5rem); /* major section-to-section gap */
  --space-section-md: clamp(4.75rem, 7.75vw, 6.5rem); /* medium block gap; image block margins */
  --space-section-sm: clamp(3rem, 5vw, 3.75rem);  /* small block gap */
  --space-block: clamp(3.75rem, 6.5vw, 5.5rem);   /* interior block-to-block */
  --space-inset: clamp(1.5rem, 3vw, 2.25rem);     /* interior padding */
  --space-kicker: 1.5rem;                         /* mono kicker to Fraunces heading */

  /* Component-scale spacing. Use these instead of raw rem values
     for paragraphs, captions, form fields, small gaps. */
  --space-3xs: clamp(0.25rem, 0.5vw, 0.4rem);
  --space-2xs: clamp(0.4rem, 0.8vw, 0.6rem);
  --space-xs:  clamp(0.6rem, 1vw, 0.85rem);
  --space-sm:  clamp(0.85rem, 1.5vw, 1.15rem);
  --space-md:  clamp(1.15rem, 2vw, 1.5rem);
  --space-lg:  clamp(1.25rem, 2.15vw, 1.7rem);
  --space-xl:  clamp(1.7rem, 3vw, 2.35rem);
  --space-2xl: clamp(2.35rem, 3.85vw, 3.2rem);
}

*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, form { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--vermilion); color: var(--paper); }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 1px solid var(--vermilion);
  outline-offset: 4px;
  border-radius: 1px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
}
.skip-link:focus,
.skip-link:focus-visible {
  left: 1rem;
  top: 1rem;
  padding: 0.6rem 0.9rem;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  outline: 1px solid var(--paper);
  outline-offset: 2px;
}

.mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 400;
}

.container {
  max-width: 82rem;
  margin: 0 auto;
  padding-left: max(clamp(1.5rem, 5vw, 5rem), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(1.5rem, 5vw, 5rem), env(safe-area-inset-right, 0px));
}

/* Masthead */
.masthead {
  position: sticky;
  top: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--ink-16);
  z-index: 10;
  padding: var(--space-md) 0;
}
.masthead-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}
.wordmark {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}
.wordmark a { color: inherit; text-decoration: none; }
.wordmark .dot { color: var(--vermilion); }

.nav-list {
  display: flex;
  gap: var(--space-lg);
  list-style: none;
  flex-wrap: wrap;
}
.nav-list a {
  color: var(--ink-56);
  text-decoration: none;
  transition: color 220ms ease;
}
.nav-list a:hover { color: var(--vermilion); }

/* Nav item that leaves the page (its own dedicated page, not an anchor jump). */
.nav-list a.leaves { display: inline-flex; align-items: baseline; }
.nav-list a.leaves::after {
  content: "";
  display: inline-block;
  width: 0.32em;
  height: 0.32em;
  border-radius: 50%;
  background: var(--vermilion);
  margin-left: 0.55em;
  align-self: center;
  opacity: 0.9;
}
.nav-list a.leaves.is-here { color: var(--ink); }

/* Sections */
section {
  padding: var(--space-hero) 0;
  border-bottom: 1px solid var(--ink-16);
}
section:last-of-type { border-bottom: 0; }

.kicker {
  color: var(--vermilion);
  display: inline-block;
  margin-bottom: var(--space-kicker);
}

/* Home */
.hero-promise {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(2.4rem, 6.4vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  max-width: 22ch;
  margin-bottom: var(--space-section-sm);
}
.hero-promise em { font-style: italic; }

.hero-sub {
  max-width: 46ch;
  font-size: 1.15rem;
  line-height: 1.55;
}
.hero-sub p + p { margin-top: var(--space-md); }
.hero-sub .faint { color: var(--ink-56); }

.pillars {
  margin-top: var(--space-section-lg);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-2xl);
}
.pillar h2 {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1.15;
  margin-bottom: var(--space-sm);
  letter-spacing: -0.012em;
}
.pillar h2 em { font-style: italic; }
.pillar p {
  color: var(--ink-56);
  font-size: 1rem;
}
/* Pull quote */
.pullquote {
  margin: var(--space-section-lg) 0 0;
  padding: 0.4rem 0 0.4rem 1.8rem;
  border-left: 3px solid var(--vermilion);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.55rem, 3.2vw, 2.4rem);
  line-height: 1.25;
  max-width: 32ch;
  letter-spacing: -0.01em;
}
.pullquote .attribution {
  display: block;
  margin-top: var(--space-md);
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 400;
  color: var(--ink-56);
}

/* Section titles */
.section-title {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(1.9rem, 3.8vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
  max-width: 20ch;
  margin-bottom: var(--space-2xl);
}
.section-title em { font-style: italic; }
.section-lede {
  max-width: 46ch;
  font-size: 1.1rem;
  margin-bottom: var(--space-block);
}
.section-lede em { font-style: italic; }

/* Typographic list */
.quiet-list {
  list-style: none;
  border-top: 1px solid var(--ink-16);
}
.quiet-list li {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: var(--space-md);
  align-items: baseline;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--ink-16);
}
.quiet-list .idx { color: var(--vermilion); }
.quiet-list .name {
  font-family: 'Fraunces', serif;
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: -0.008em;
}
.quiet-list .name em {
  font-style: italic;
  color: var(--ink-56);
  font-weight: 300;
}
.quiet-list .meta { color: var(--ink-56); }

/* Big figure */
.big-figure {
  margin-top: var(--space-section-lg);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xl);
  align-items: end;
  max-width: 62rem;
}
.big-figure .figure {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  color: var(--vermilion);
  font-size: clamp(6rem, 16vw, 13.5rem);
  line-height: 0.82;
  letter-spacing: -0.04em;
}
.big-figure .figure-note {
  color: var(--ink-56);
  max-width: 30ch;
  padding-bottom: var(--space-sm);
}

/* Read prose paragraph */
.read-prose {
  max-width: 46ch;
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(1.15rem, 1.7vw, 1.35rem);
  line-height: 1.5;
  letter-spacing: -0.006em;
  color: var(--ink);
  margin-bottom: 0;
}
.read-prose em { font-style: italic; }

/* Contact */
.contact-line {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(1.55rem, 3.4vw, 2.4rem);
  line-height: 1.28;
  letter-spacing: -0.015em;
  max-width: 32ch;
  margin-bottom: var(--space-2xl);
}
.contact-line em { font-style: italic; }

/* Section CTA: one per section, mono, restrained vermilion */
.cta {
  margin-top: var(--space-block);
  max-width: 40ch;
}
.cta-prompt {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-56);
  margin-bottom: var(--space-md);
  line-height: 1.5;
}
/* Unified CTA control : a bounded, ink-outlined rectangle with a mono uppercase
   label. Fills vermilion (label flips to paper) on hover, focus, or when active
   (aria-expanded="true" on a toggle). Squared corners, no shadow. Reserved for
   ACTIONS : navigation and in-page nav links keep the understated mono-link style. */
.cta-link,
.cta-scroll a,
button.cta-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 0.9em 1.5em;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 320ms ease, color 320ms ease, border-color 320ms ease;
}
.cta-link:hover,
.cta-link:focus-visible,
.cta-link:active,
button.cta-link[aria-expanded="true"],
.cta-scroll a:hover,
.cta-scroll a:focus-visible,
.cta-scroll a:active {
  background: var(--vermilion);
  color: var(--paper);
  border-color: var(--vermilion);
}
.cta-link:focus-visible,
.cta-scroll a:focus-visible,
button.cta-link:focus-visible {
  outline: 1px solid var(--vermilion);
  outline-offset: 4px;
}
.cta-scroll {
  margin-top: var(--space-block);
  display: inline-block;
}
.cta-scroll a .arrow {
  display: inline-block;
  transition: transform 400ms ease;
}
.cta-scroll a:hover .arrow { transform: translateY(3px); }

/* Unfolding form. Default: open (no-JS graceful state). With JS: collapsed until toggled. */
.cta-form-wrap {
  margin-top: var(--space-xl);
}
.js .cta-form-wrap {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  transition: grid-template-rows 320ms ease, opacity 260ms ease, margin-top 260ms ease;
}
.js .cta-form-wrap.open {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: var(--space-xl);
}
.js .cta-form-inner {
  min-height: 0;
  overflow: hidden;
}
.cta-form {
  background: var(--paper-warm);
  padding: var(--space-xl) var(--space-inset);
  max-width: 44rem;
  display: grid;
  gap: var(--space-md);
}
.cta-form .field { display: block; }
.cta-form label {
  display: block;
  color: var(--ink-56);
  margin-bottom: var(--space-2xs);
}
.cta-form label .opt {
  color: var(--ink-36);
  font-size: 0.66rem;
  margin-left: var(--space-3xs);
}
.cta-form input[type="text"],
.cta-form input[type="email"],
.cta-form input[type="number"],
.cta-form select,
.cta-form textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  padding: 0.55rem 0;
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  color: var(--ink);
  outline: none;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.cta-form textarea {
  min-height: 3.6rem;
  resize: vertical;
  line-height: 1.5;
}
.cta-form input[type="text"]:focus,
.cta-form input[type="email"]:focus,
.cta-form input[type="number"]:focus,
.cta-form select:focus,
.cta-form textarea:focus {
  border-bottom-color: var(--vermilion);
}
.cta-form .pay-terms {
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  margin: var(--space-3xs) 0 0;
}
.cta-form .pay-terms em {
  font-style: italic;
  color: var(--vermilion);
}
.cta-form .guest-fields {
  display: grid;
  gap: var(--space-md);
}
.cta-form .guest-fields[hidden] { display: none; }
.cta-form .select-field { position: relative; }
.cta-form .select-field::after {
  content: '\02C5';
  position: absolute;
  right: 0.2rem;
  bottom: 0.6rem;
  color: var(--vermilion);
  pointer-events: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
}
.cta-form .check {
  display: flex;
  gap: var(--space-xs);
  align-items: baseline;
  cursor: pointer;
}
.cta-form .check input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--vermilion);
  margin: 0;
  flex-shrink: 0;
  position: relative;
  top: 2px;
}
.cta-form .check span {
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.4;
}
/* Form submit : the same bounded CTA control. For contact/newsletter forms it
   uses the standard ink-outline resting state (fills vermilion on hover). For
   booking forms it sits at rest already filled (BOOK & PAY NOW is the loudest
   moment on the site), inverting to the ink outline on hover. Same control,
   two resting states. */
.cta-form .cta-submit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 0.9em 1.7em;
  cursor: pointer;
  justify-self: start;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  font-weight: 500;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 320ms ease, color 320ms ease, border-color 320ms ease;
}
.cta-form .cta-submit:hover,
.cta-form .cta-submit:focus-visible,
.cta-form .cta-submit:active {
  background: var(--vermilion);
  color: var(--paper);
  border-color: var(--vermilion);
}
.cta-form .cta-submit:focus-visible {
  outline: 1px solid var(--vermilion);
  outline-offset: 4px;
}

/* Booking submit : rests in the filled vermilion state, inverts on hover. */
.cta-form[data-form-kind="booking"] .cta-submit {
  background: var(--vermilion);
  color: var(--paper);
  border-color: var(--vermilion);
}
.cta-form[data-form-kind="booking"] .cta-submit:hover,
.cta-form[data-form-kind="booking"] .cta-submit:focus-visible,
.cta-form[data-form-kind="booking"] .cta-submit:active {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.cta-thanks {
  color: var(--vermilion);
  margin-top: var(--space-md);
}

@media (prefers-reduced-motion: reduce) {
  .cta-form-wrap { transition: none; }
  button.cta-link { transition: none; }
}

/* Footer : colophon-style, hairline rule top, three quiet columns.
   Left: identity + colophon. Middle: sitewide links (Get in touch,
   newsletter). Right: copyright. No fat sitemap, no fill. */
footer {
  padding: var(--space-section-sm) 0;
  border-top: 1px solid var(--ink-16);
  color: var(--ink-56);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  /* Split-axis gap: --space-xl vertical for when columns wrap on
     narrow screens (a lighter stack), --space-2xl horizontal to
     hold the colophon columns apart at desktop width. */
  gap: var(--space-xl) var(--space-2xl);
  flex-wrap: wrap;
  align-items: flex-start;
}
.footer-col { min-width: 12rem; }
footer .set-in { color: var(--ink-36); margin-top: var(--space-2xs); }
footer .right { text-align: right; }
.footer-links a {
  color: var(--ink-56);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-16);
  padding-bottom: 1px;
  transition: color 240ms ease, border-color 240ms ease;
}
.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--vermilion);
  border-color: var(--vermilion);
}
.footer-links .set-in a {
  color: var(--ink-36);
}
.footer-links .set-in a:hover,
.footer-links .set-in a:focus-visible {
  color: var(--vermilion);
}

/* Quiet-list row variant : the tour entry lives inside the Retreats list.
   It replaces the .meta right-column with a compact CTA link to its own page,
   so that one experience type reveals as leading somewhere else. */
.quiet-list li.has-leaves { align-items: center; }
.cta-quiet {
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.68rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--ink);
  transition: color 240ms ease, border-color 240ms ease;
}
.cta-quiet .arrow {
  display: inline-block;
  transition: transform 320ms ease;
}
.cta-quiet:hover,
.cta-quiet:focus-visible {
  color: var(--vermilion);
  border-color: var(--vermilion);
}
.cta-quiet:hover .arrow,
.cta-quiet:focus-visible .arrow {
  transform: translateX(3px);
}

/* Standalone contact page : the Get in Touch page carries the form directly,
   not inside a toggled disclosure. Give the section the same breathing room as
   any interior section, and constrain the section-lede width for readability. */
/* Dedicated content pages (contact, legal) use section-lg rather
   than the base --space-hero. Hero-scale padding suits landing
   sections that need a chapter-break pause between them; on a
   single-topic page there is no adjacent section to separate from,
   so a smaller major pause reads as intentional, not sparse. */
.contact-page {
  padding-top: var(--space-section-lg);
  padding-bottom: var(--space-section-lg);
}
.contact-page .section-lede { max-width: 44rem; }

/* Rise animation */
.rise {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 900ms ease, transform 900ms ease;
}
.rise.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { opacity: 1; transform: none; transition: none; }
}

/* Tour feature block on homepage.
   align-items: start so the headline sits immediately below the kicker
   (not pushed down by a taller plate when centred). Top spacing
   inherits from the base section rule: clamp(6rem, 12vw, 11rem). */
.tour-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 5rem);
  align-items: start;
}
.tour-feature .tour-headline {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.016em;
  margin-bottom: var(--space-2xl);
  max-width: 20ch;
}
.tour-feature .tour-headline em { font-style: italic; }
.tour-feature .tour-lede {
  color: var(--ink-56);
  max-width: 34ch;
  font-size: 1.05rem;
  margin-bottom: var(--space-lg);
}
.tour-feature .tour-lede em { font-style: italic; color: var(--ink); }
.tour-feature .tour-cta { margin-top: var(--space-2xs); }
.tour-feature .plate { max-width: none; }

/* Book plates */
.plate {
  margin: 0;
  max-width: 34rem;
}
.plate .plate-frame {
  display: block;
  width: 100%;
  height: auto;
  background: var(--paper-warm);
}
.plate figcaption {
  margin-top: var(--space-sm);
  color: var(--ink-56);
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.68rem;
}
.plate--right { margin-left: auto; }

/* Founder note : sign-off section on the homepage. Personal, first-person.
   Reads as a short letter, not a bio spread : text-led at a comfortable
   reading measure, a modest portrait plate to the right, and a real-sized
   signature at the foot of the prose. The signature inks in gently
   (soft fade + blur-to-sharp resolve, like ink settling into paper),
   plays once, then rests. Reduced motion shows it finished, static. */
#founder {
  padding-top: var(--space-section-lg);
  padding-bottom: var(--space-section-lg);
}
.founder-heading {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin-bottom: var(--space-xl);
  max-width: 22ch;
}
.founder-heading em { font-style: italic; }

.founder-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(22rem, 28rem);
  gap: clamp(3rem, 6vw, 4.5rem);
  align-items: start;
  max-width: 70rem;
}
.founder-prose {
  max-width: 46ch;
  font-size: 1.1rem;
  line-height: 1.7;
}
.founder-prose p + p { margin-top: var(--space-md); }
.founder-prose em { font-style: italic; }

/* Founder portrait : the one photograph on the site, toned into the ink
   and paper register via an SVG duotone filter so it reads in the same
   language as the illustrated plates. Scaled to hold its own beside the
   words : roughly the height of the text block, ~40 to 50% of the
   section on wide screens. */
.founder-portrait {
  margin: 0;
  max-width: 28rem;
  /* Nudge down so the image's crisp top edge aligns with the visible
     cap-height of the first line of prose (compensates for the
     line-height half-leading above the first text line). */
  margin-top: 0.55rem;
}
.founder-portrait img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--paper-warm);
  filter: url(#duotone-founder);
}
.founder-portrait figcaption { margin-top: var(--space-sm); }

.founder-signature {
  margin: var(--space-inset) 0 0;
}
.founder-signature img {
  display: block;
  height: 2.5rem;
  width: auto;
  mix-blend-mode: multiply;
  opacity: 0;
  filter: blur(5px);
  transform: translateY(6px);
}
.founder-signature.visible img {
  animation: ink-in-signature 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.5s forwards;
}
@keyframes ink-in-signature {
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .founder-signature img {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none;
  }
}

@media (max-width: 780px) {
  .founder-body {
    grid-template-columns: 1fr;
    gap: var(--space-section-sm);
    max-width: none;
  }
  .founder-portrait {
    order: 2;
    max-width: 22rem;
    margin: 0;
  }
}

/* Tour page */
.tour-lede-main {
  max-width: 46ch;
  font-size: 1.15rem;
  margin-bottom: var(--space-2xl);
}
.tour-lede-main em { font-style: italic; }

.tour-prose {
  max-width: 46ch;
  font-size: 1.1rem;
}
.tour-prose p + p { margin-top: var(--space-md); }
.tour-prose em { font-style: italic; }
.tour-prose .faint { color: var(--ink-56); }

.tour-heading {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-xl);
  max-width: 24ch;
}
.tour-heading em { font-style: italic; }

/* Plates sit inside a .tour-section, which owns the section-scale
   pauses above and below via padding. The plate itself only needs
   a small companion gap from the content it follows. */
.tour-plate-block {
  margin: var(--space-lg) 0 0;
}

/* Return link (appendix style) */
.return-link {
  margin-top: var(--space-section-lg);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--ink-16);
}
.return-link a {
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  color: var(--ink-56);
  text-decoration: none;
  transition: color 220ms ease;
}
.return-link a:hover { color: var(--vermilion); }

/* Tour map: hand-drawn Lake District plate with vermilion pins overlaid.
   The dashed route between pins draws itself in once, when the map scrolls
   into view, then rests. The pace is deliberately slow : a walking pace,
   not a typical web animation. For reduced-motion the finished dashed line
   is shown statically. */
.tour-map {
  margin: var(--space-lg) auto 0;
  max-width: 48rem;
  padding: 0;
}
.tour-map .map-svg {
  display: block;
  width: 100%;
  height: auto;
  background: var(--paper);
}
.tour-map .tour-route-mask-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}
.tour-map.visible .tour-route-mask-path {
  animation: draw-tour-route 7s cubic-bezier(0.42, 0, 0.58, 1) 0.55s forwards;
}
@keyframes draw-tour-route {
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-map .tour-route-mask-path {
    stroke-dashoffset: 0;
    animation: none;
  }
}
.tour-map figcaption {
  margin-top: var(--space-sm);
  color: var(--ink-56);
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.68rem;
  text-align: center;
}

/* Extended prose paragraph (introduces a subsection) */
.tour-prose-mini {
  max-width: 46ch;
  font-size: 1.05rem;
  color: var(--ink-56);
  margin-bottom: var(--space-xl);
}
.tour-prose-mini em { font-style: italic; color: var(--ink); }

/* Poem block: indented, italic Fraunces, mono attribution */
.poem {
  margin: var(--space-block) 0;
  padding-left: clamp(1.25rem, 5vw, 4.5rem);
  max-width: 44rem;
}
.poem-title {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: -0.005em;
  color: var(--ink-56);
  margin-bottom: var(--space-lg);
}
.poem-title em { font-style: italic; color: var(--ink-36); }
.poem-body {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
  line-height: 1.65;
  letter-spacing: -0.003em;
  color: var(--ink);
}
.poem-stanza { margin-bottom: var(--space-lg); }
.poem-stanza:last-child { margin-bottom: 0; }
.poem-line { display: block; }
.poem-attribution {
  margin-top: var(--space-lg);
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.68rem;
  color: var(--ink-56);
}
.poem-link {
  color: var(--vermilion);
  text-decoration: none;
  transition: letter-spacing 220ms ease;
}
.poem-link:hover { letter-spacing: 0.22em; }

/* Poem: full text toggle */
.poem-toggle {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--vermilion);
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.68rem;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2xs);
  transition: letter-spacing 220ms ease;
}
.poem-toggle:hover { letter-spacing: 0.22em; }
.poem-toggle .chev {
  display: inline-block;
  transition: transform 300ms ease;
  font-size: 0.9rem;
  line-height: 0;
  position: relative;
  top: 1px;
}
.poem-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* Poem: full text collapsible wrapper. No-JS default: open. */
.poem-full-wrap { margin-top: var(--space-xl); }
.js .poem-full-wrap {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  transition: grid-template-rows 380ms ease, opacity 300ms ease, margin-top 300ms ease;
}
.js .poem-full-wrap.open {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: var(--space-xl);
}
.js .poem-full-inner {
  min-height: 0;
  overflow: hidden;
}

/* Part heading inside a full-length poem (I., II. ...) */
.poem-part {
  color: var(--vermilion);
  margin: var(--space-2xl) 0 var(--space-lg);
}
.poem-part:first-child { margin-top: 0; }

/* Alternate-line indent used by the 1798 Mariner setting */
.poem-line-indent { padding-left: 1.75em; }

/* Source note at end of an expanded poem */
.poem-source {
  color: var(--ink-36);
  margin-top: var(--space-xl);
  font-style: normal;
  font-size: 0.66rem;
}
.poem-source a { color: var(--ink-56); text-decoration: none; }
.poem-source a:hover { color: var(--vermilion); }

@media (prefers-reduced-motion: reduce) {
  .poem-full-wrap { transition: none; }
  .poem-toggle .chev { transition: none; }
}

/* Poetic subhead beneath the hero H1 (tour page). The very tight
   gap here is deliberate: the h1 and italic subhead read as a
   title/subtitle pairing (like a book title-page), not as a heading
   followed by body copy. The subhead then carries --space-2xl below
   itself before the page's actual content begins. */
.tour-hero .section-title { margin-bottom: var(--space-2xs); }
.tour-subhead {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  line-height: 1.3;
  letter-spacing: -0.008em;
  color: var(--ink-56);
  margin-bottom: var(--space-2xl);
  max-width: 30ch;
}
.tour-subhead em { font-style: normal; color: var(--ink); }

/* The final page-bottom scroll CTA carries the same bounded control style as
   every other CTA : Round 13 made CTA style consistent site-wide, so the old
   "quieter" bare-mono variant is no longer applied. Class kept for HTML
   compatibility, but it now inherits the base .cta-scroll a treatment. */

/* Poems: inset panel, a page within the page.
   Sits on paper-warm with vermilion hairlines above and below. */
.tour-poems-panel {
  background: var(--paper-warm);
  border-top: 1px solid var(--vermilion);
  border-bottom: 1px solid var(--vermilion);
  margin: var(--space-section-lg) calc(50% - 50vw);
  padding: var(--space-section-md) 0;
}
.tour-poems-inner {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}
.tour-poems-panel .kicker { margin-bottom: var(--space-kicker); }
.tour-poems-panel .tour-heading { margin-bottom: var(--space-md); }
.tour-poems-panel .tour-prose-mini { margin-bottom: var(--space-section-sm); }

.poems-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-section-sm);
}
@media (min-width: 900px) {
  .poems-pair { grid-template-columns: 1fr 1fr; gap: var(--space-section-md); }
}

/* Excerpt-level overrides inside the panel: centred, slightly larger italic */
.tour-poems-panel .poem {
  margin: 0;
  padding-left: 0;
  max-width: none;
}
.tour-poems-panel .poem > .poem-body {
  text-align: center;
  font-size: clamp(1.15rem, 1.75vw, 1.32rem);
  line-height: 1.85;
}
.tour-poems-panel .poem-attribution {
  text-align: center;
  margin-top: var(--space-xl);
}
/* Full expansion returns to left-aligned reading; keeps its normal type size. */
.tour-poems-panel .poem-full-wrap .poem-body {
  text-align: left;
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  line-height: 1.65;
}

/* Individual date blocks (own price, own reserve CTA) */
.dates-intro {
  max-width: 46ch;
  color: var(--ink-56);
  margin-bottom: var(--space-section-sm);
  font-size: 1.05rem;
}
.dates-intro em { font-style: italic; color: var(--ink); }

.dates {
  list-style: none;
  border-top: 1px solid var(--ink-16);
}
.date-block {
  padding: var(--space-section-sm) 0;
  border-bottom: 1px solid var(--ink-16);
}
.date-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-lg);
  align-items: baseline;
  margin-bottom: var(--space-md);
}
.date-label {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(1.3rem, 2.2vw, 1.55rem);
  letter-spacing: -0.008em;
}
.date-label em {
  font-style: italic;
  color: var(--ink-56);
  font-weight: 300;
}
.date-price {
  font-family: 'JetBrains Mono', monospace;
  color: var(--vermilion);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.date-price .holding {
  color: var(--ink-36);
  font-weight: 400;
  margin-left: var(--space-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.66rem;
}
.date-form-note {
  color: var(--ink-56);
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.68rem;
  margin-bottom: var(--space-3xs);
}

@media (max-width: 640px) {
  .date-head {
    grid-template-columns: 1fr;
    gap: var(--space-2xs);
  }
}

.date-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-left: var(--space-xs);
  vertical-align: middle;
  transform: translateY(-0.15em);
}
.date-tag.last-few { color: var(--vermilion); }
.date-tag.sold-out { color: var(--ink-36); }
.date-tag[hidden] { display: none; }

.date-count {
  color: var(--ink-56);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  margin: -0.75rem 0 1.5rem;
}

.cta-sold-out {
  color: var(--ink-36);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0;
}

.date-block.is-sold-out { opacity: 0.62; }
.date-block.is-sold-out .date-price { color: var(--ink-36); }

.payment-element {
  margin: var(--space-sm) 0 var(--space-md);
  padding: var(--space-sm);
  border: 1px solid var(--ink-16);
  border-radius: 4px;
  background: var(--paper-warm);
}
.payment-element[hidden] { display: none; }

.booking-confirmed-banner {
  margin: 0 0 var(--space-xl);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--ink-16);
  border-left: 3px solid var(--vermilion);
  background: var(--paper-warm);
}
.booking-confirmed-banner p { margin: 0; }
.booking-confirmed-banner[hidden] { display: none; }

/* Hand-drawn line work (Lyrical Ballads page + homepage teaser only) */
.linework {
  position: absolute;
  pointer-events: none;
  z-index: -1;
  color: var(--ink);
  opacity: 0.36;
}
.linework svg {
  display: block;
  width: 100%;
  height: 100%;
}
.linework path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.linework path.dotted {
  stroke-dasharray: 1 8;
  stroke-width: 1.2;
}
.linework path.faint {
  opacity: 0.6;
}

.tour-hero {
  position: relative;
  isolation: isolate;
}
.linework-a {
  top: -3rem;
  right: -4rem;
  width: min(38rem, 60%);
  aspect-ratio: 3 / 2;
  opacity: 0.34;
}

.tour-dates-wrap {
  margin-top: var(--space-section-md);
}

.tour-feature { isolation: isolate; position: relative; }
.linework-home {
  /* Restricted to the right (plate) column only, never over the text. */
  top: 0;
  left: 50%;
  right: 0;
  width: auto;
  height: clamp(4rem, 6vw, 5.5rem);
  aspect-ratio: auto;
  opacity: 0.16;
}
.linework-home svg { height: 100%; width: 100%; }

/* Small screens */
@media (max-width: 820px) {
  .tour-feature {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
  .tour-feature .plate { max-width: 34rem; }
  .plate--right { margin-left: 0; }
  .linework-a { right: -2rem; width: 70%; }
  .linework-home { display: none; }
}

@media (max-width: 720px) {
  .masthead { position: static; }
  .masthead-inner { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
  .nav-list { gap: var(--space-sm) var(--space-md); }
  .quiet-list li {
    grid-template-columns: 2.4rem 1fr;
  }
  .quiet-list .meta {
    grid-column: 2;
    margin-top: var(--space-3xs);
  }
  .big-figure {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .big-figure .figure-note { padding-bottom: 0; }
}

/* In-page table of contents (tour page). Sits below the hero, quietly pins
   to the top under the masthead as the reader scrolls. Hairline rule only,
   no shadow, paper background so the pinned strip stays legible. */
.tour-toc {
  position: sticky;
  top: 3.9rem;
  z-index: 5;
  margin: var(--space-block) 0 var(--space-section-sm);
  padding: var(--space-sm) 0;
  background: var(--paper);
  border-bottom: 1px solid var(--ink-16);
}
.tour-toc-kicker {
  display: block;
  margin: 0 0 var(--space-2xs);
  color: var(--vermilion);
}
.tour-toc-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  align-items: baseline;
}
.tour-toc-list li {
  display: inline-flex;
  align-items: baseline;
}
.tour-toc-list li + li::before {
  content: "\00b7";
  color: var(--ink-36);
  margin-right: var(--space-md);
  margin-left: calc(-1 * var(--space-lg));
}
.tour-toc-list a {
  color: var(--ink-56);
  text-decoration: none;
  transition: color 220ms ease;
}
.tour-toc-list a:hover,
.tour-toc-list a.is-current {
  color: var(--vermilion);
}

@media (max-width: 720px) {
  .tour-toc { position: static; }
  .tour-toc-list { gap: var(--space-2xs) var(--space-sm); }
  .tour-toc-list li + li::before { margin-right: var(--space-sm); margin-left: calc(-1 * var(--space-sm)); }
}

/* Anchored sub-sections on the tour page. Each gets generous breathing room
   above, and a scroll-margin so anchor jumps don't land under the sticky
   masthead + toc strip. */
.tour-section {
  scroll-margin-top: clamp(7rem, 12vw, 10rem);
  padding-top: var(--space-hero);
}
.tour-dates-wrap {
  scroll-margin-top: clamp(7rem, 12vw, 10rem);
}
.tour-poems-panel {
  scroll-margin-top: clamp(7rem, 12vw, 10rem);
}

/* ------------------------------------------------------------------
   Mobile-first : Round 20.
   Build for the phone first, enhance upward, keep the print-document
   feel on small screens. Below the tablet breakpoint (820px) the
   desktop nav collapses to a hamburger that opens a full-height
   cream panel (no dark scrim, which would break the paper illusion).
   Tap targets meet 44 to 48px throughout. On coarse pointers the
   primary conversion CTAs rest already filled in vermilion, since
   hover can't teach them they're actionable. Sanctioned pattern
   here : hamburger. Still banned : bottom tab bars, floating action
   buttons.
   ------------------------------------------------------------------ */

/* Hamburger trigger : three hairline ink rules (not a heavy icon).
   Hidden on desktop and when JS is off, shown when JS is present
   below the tablet breakpoint. Meets a 48px tap target. */
.menu-trigger {
  display: none;
  background: transparent;
  border: 0;
  padding: 0.75rem;
  margin: -0.75rem;
  cursor: pointer;
  color: var(--ink);
  min-height: 48px;
  min-width: 48px;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none;
  appearance: none;
}
.menu-trigger-rules {
  display: block;
  position: relative;
  width: 26px;
  height: 16px;
}
.menu-trigger-rules span {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform 320ms ease, opacity 220ms ease, top 320ms ease;
}
.menu-trigger-rules span:nth-child(1) { top: 0; }
.menu-trigger-rules span:nth-child(2) { top: calc(50% - 0.75px); }
.menu-trigger-rules span:nth-child(3) { top: calc(100% - 1.5px); }

.menu-trigger[aria-expanded="true"] .menu-trigger-rules span:nth-child(1) {
  top: calc(50% - 0.75px);
  transform: rotate(45deg);
}
.menu-trigger[aria-expanded="true"] .menu-trigger-rules span:nth-child(2) {
  opacity: 0;
}
.menu-trigger[aria-expanded="true"] .menu-trigger-rules span:nth-child(3) {
  top: calc(50% - 0.75px);
  transform: rotate(-45deg);
}

/* Full-height menu panel : cream background, no scrim, gentle fade.
   Set [hidden] by default in the HTML; JS toggles it. */
.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--paper);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity 320ms ease;
}
.menu-panel[hidden] { display: none; }
.menu-panel.is-open { opacity: 1; }
.menu-panel-inner {
  min-height: 100dvh;
  padding: calc(var(--space-md) + env(safe-area-inset-top, 0px))
           max(clamp(1.5rem, 5vw, 5rem), env(safe-area-inset-right, 0px))
           calc(var(--space-section-sm) + env(safe-area-inset-bottom, 0px))
           max(clamp(1.5rem, 5vw, 5rem), env(safe-area-inset-left, 0px));
  display: flex;
  flex-direction: column;
}
.menu-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-block);
}
.menu-close {
  background: transparent;
  border: 0;
  padding: 0.75rem;
  margin: -0.75rem;
  cursor: pointer;
  color: var(--ink);
  min-height: 48px;
  min-width: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none;
  appearance: none;
}
.menu-close-mark {
  display: inline-block;
  width: 22px;
  height: 22px;
  position: relative;
}
.menu-close-mark::before,
.menu-close-mark::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.75px);
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
}
.menu-close-mark::before { transform: rotate(45deg); }
.menu-close-mark::after  { transform: rotate(-45deg); }

.menu-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}
.menu-list a {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  padding: 0.85rem 0;
  min-height: 48px;
  transition: color 220ms ease;
}
.menu-list a:hover,
.menu-list a:focus-visible {
  color: var(--vermilion);
}
.menu-list-contact {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--ink-16);
}

/* Body-scroll lock while the panel is open (set by JS). */
.body-menu-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .menu-panel { transition: none; }
  .menu-trigger-rules span { transition: none; }
}

/* Hamburger takes over below the tablet breakpoint. Only revealed
   when JS is present, so the desktop nav remains a working fallback
   for no-JS visitors. */
@media (max-width: 820px) {
  .js .menu-trigger { display: inline-flex; }
  .js .masthead .nav-list { display: none; }
  .masthead { position: sticky; top: 0; }
  .masthead-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    flex-wrap: nowrap;
  }
}

/* Mobile CTA affordance : on coarse pointers, hover can't teach a
   control that it's actionable, so primary conversion CTAs rest
   already filled. Secondary CTAs keep the outline but every CTA
   gains an :active state so a tap feels acknowledged. */
@media (hover: none) and (pointer: coarse) {
  /* Primary conversion CTAs : rest filled in vermilion. */
  button.cta-link[data-cta-target="form-retreats"],
  button.cta-link[data-cta-target^="form-tour-"] {
    background: var(--vermilion);
    color: var(--paper);
    border-color: var(--vermilion);
  }

  /* Physical tap feedback across every CTA and link. */
  .cta-link:active,
  .cta-scroll a:active,
  button.cta-link:active,
  .cta-form .cta-submit:active,
  .cta-quiet:active,
  .menu-list a:active,
  .footer-links a:active,
  .tour-toc-list a:active,
  .return-link a:active {
    opacity: 0.72;
  }

  /* 44 to 48px tap targets. */
  .cta-link,
  button.cta-link,
  .cta-form .cta-submit,
  .cta-scroll a {
    min-height: 48px;
  }
  .cta-quiet {
    min-height: 44px;
    padding: 0.6rem 0;
    align-items: center;
  }
  .footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .poem-toggle {
    min-height: 44px;
    padding: 0.35rem 0;
  }
  .poem-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.35rem 0;
  }
  .tour-toc-list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.4rem 0;
  }
  .return-link a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Sixteen-pixel form fields : iOS Safari zooms the viewport in on
     any field with a smaller resting font-size. */
  .cta-form input[type="text"],
  .cta-form input[type="email"],
  .cta-form input[type="number"],
  .cta-form select,
  .cta-form textarea {
    font-size: 16px;
    padding: 0.75rem 0;
    min-height: 44px;
  }

  /* Full-width form fields already occur naturally (width: 100%),
     but confirm the check-row stays a comfortable tap target too. */
  .cta-form .check {
    padding: 0.4rem 0;
    min-height: 44px;
  }
}

/* Tour in-page TOC : below the tablet breakpoint, becomes a
   horizontally scrollable mono strip. Full six anchors reachable
   in one gesture without stealing vertical space. */
@media (max-width: 720px) {
  .tour-toc {
    position: static;
    padding: var(--space-sm) 0;
    margin-left: calc(-1 * max(clamp(1.5rem, 5vw, 5rem), env(safe-area-inset-left, 0px)));
    margin-right: calc(-1 * max(clamp(1.5rem, 5vw, 5rem), env(safe-area-inset-right, 0px)));
  }
  .tour-toc .tour-toc-kicker {
    padding: 0 max(clamp(1.5rem, 5vw, 5rem), env(safe-area-inset-left, 0px));
  }
  .tour-toc-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding: var(--space-3xs) max(clamp(1.5rem, 5vw, 5rem), env(safe-area-inset-left, 0px));
    gap: 0 var(--space-lg);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tour-toc-list::-webkit-scrollbar { display: none; }
  .tour-toc-list li {
    scroll-snap-align: start;
    flex-shrink: 0;
  }
  .tour-toc-list li + li::before {
    margin: 0 var(--space-2xs) 0 calc(-1 * var(--space-2xs));
  }
  .tour-toc-list a { white-space: nowrap; }
}

/* Overflow safety on Fraunces headlines : at light weight, a long
   single word can push past a narrow viewport. Allow soft breaking
   rather than horizontal scroll. */
.hero-promise,
.section-title,
.tour-headline,
.founder-heading,
.tour-heading,
.tour-subhead,
.contact-line,
.pullquote,
.date-label {
  overflow-wrap: break-word;
}

/* Individual dates : each date-block becomes a comfortable
   full-width block on small screens, with a large tappable
   Reserve control. */
@media (max-width: 640px) {
  .date-price { font-size: 0.85rem; }
  .cta-form { padding: var(--space-lg) var(--space-md); }
}

/* Very small screens : release the founder portrait cap, and
   loosen the footer to a single readable column with the copyright
   left-aligned so it doesn't drift to the far edge. */
@media (max-width: 480px) {
  .founder-portrait { max-width: 100%; }
  .footer-inner { gap: var(--space-md); }
  footer .right { text-align: left; }
}

/* -------------------------------------------------------------------
   ROUND 22 : Legal & Compliance surface
   Standalone Terms / Privacy pages, plus footer legal row, plus the
   booking-form T&C row (checkbox + short cancellation summary) and
   the contact-form privacy line. All in the same restrained
   typographic voice as the rest of the site.
   ------------------------------------------------------------------- */

/* Footer : second row for legal links + company details. Sits beneath
   the colophon columns, separated by a hairline rule so it reads as
   a small print band, not another column. */
.footer-legal {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--ink-16);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-lg) var(--space-2xl);
  flex-wrap: wrap;
}
.footer-legal-links {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  flex-wrap: wrap;
  color: var(--ink-56);
}
.footer-legal-links a {
  color: var(--ink-56);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-16);
  padding-bottom: 1px;
  transition: color 240ms ease, border-color 240ms ease;
}
.footer-legal-links a:hover,
.footer-legal-links a:focus-visible {
  color: var(--vermilion);
  border-color: var(--vermilion);
}
.footer-legal-links .sep {
  color: var(--ink-36);
}
.footer-legal-company {
  color: var(--ink-36);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  max-width: 46rem;
}

/* Legal document pages (terms, privacy). A quiet reading column on
   the paper background : Fraunces body, mono kickers per clause,
   a warm inset for the "not legal advice" notice. */
.legal-doc {
  padding-top: var(--space-section-lg);
  padding-bottom: var(--space-section-lg);
}
.legal-doc-head {
  max-width: 44rem;
  margin-bottom: var(--space-block);
}
.legal-doc-head .section-title {
  margin-bottom: var(--space-sm);
}
.legal-doc-updated {
  color: var(--ink-56);
  margin-top: var(--space-2xs);
  margin-bottom: var(--space-xl);
}
.legal-doc-warning {
  background: var(--paper-warm);
  border-left: 3px solid var(--vermilion);
  padding: var(--space-md) var(--space-lg);
  margin-top: var(--space-md);
}
.legal-doc-warning p {
  font-family: 'Fraunces', serif;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
.legal-doc-warning p + p { margin-top: var(--space-xs); }
.legal-doc-warning strong {
  font-weight: 500;
  color: var(--vermilion);
  letter-spacing: 0.01em;
}
.legal-doc-body {
  max-width: 38rem;
}
.legal-clause {
  margin-bottom: var(--space-section-sm);
}
.legal-clause .kicker {
  display: block;
  color: var(--vermilion);
  margin-bottom: var(--space-sm);
}
.legal-clause-title {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  line-height: 1.18;
  letter-spacing: -0.012em;
  margin: 0 0 var(--space-xl);
}
.legal-clause-title em { font-style: italic; }
.legal-clause p,
.legal-clause li {
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink);
}
.legal-clause p { margin: 0 0 var(--space-sm); }
.legal-clause p:last-child { margin-bottom: 0; }
.legal-clause a {
  color: var(--ink);
  border-bottom: 1px solid var(--vermilion);
  text-decoration: none;
  transition: color 240ms ease;
}
.legal-clause a:hover,
.legal-clause a:focus-visible {
  color: var(--vermilion);
}
.legal-clause strong {
  font-weight: 500;
}
.legal-clause em { font-style: italic; }
.legal-clause ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-sm);
  border-top: 1px solid var(--ink-16);
}
.legal-clause li {
  border-bottom: 1px solid var(--ink-16);
  padding: var(--space-xs) 0;
}
.legal-clause li strong {
  color: var(--vermilion);
  font-weight: 500;
}
.legal-clause blockquote {
  margin: var(--space-sm) 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--paper-warm);
  border-left: 3px solid var(--ink-16);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.98rem;
  color: var(--ink-56);
}
.legal-colophon {
  margin-top: var(--space-section-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--ink-16);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-56);
  max-width: 38rem;
}

/* Booking form : T&C row (required checkbox) and cancellation summary.
   Both sit directly above the pay button so no one pays without seeing
   them. Cancellation summary uses a small warm inset so it reads as
   plain-language reassurance, not fine print. */
.cta-form .cancellation-summary {
  background: var(--paper-warm);
  border-left: 3px solid var(--vermilion);
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-2xs);
}
.cta-form .cancellation-summary p {
  font-family: 'Fraunces', serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
.cta-form .cancellation-summary p + p { margin-top: var(--space-2xs); }
.cta-form .cancellation-summary a {
  color: var(--ink);
  border-bottom: 1px solid var(--vermilion);
  text-decoration: none;
}
.cta-form .cancellation-summary a:hover,
.cta-form .cancellation-summary a:focus-visible {
  color: var(--vermilion);
}
.cta-form .check.check-required span {
  color: var(--ink);
}
.cta-form .check.check-required a {
  color: var(--ink);
  border-bottom: 1px solid var(--vermilion);
  text-decoration: none;
}
.cta-form .check.check-required a:hover,
.cta-form .check.check-required a:focus-visible {
  color: var(--vermilion);
}
.cta-form .terms-link {
  color: var(--ink-56);
  margin: var(--space-2xs) 0 0;
  padding-left: 1.85rem;
}
.cta-form .terms-link a {
  color: var(--ink);
  border-bottom: 1px solid var(--vermilion);
  text-decoration: none;
}
.cta-form .terms-link a:hover,
.cta-form .terms-link a:focus-visible {
  color: var(--vermilion);
}

/* Contact / newsletter forms : short privacy line under the submit,
   linking through to the Privacy Policy. Kept small and warm so it
   reads as a note, not a disclaimer. */
.form-privacy-note {
  font-family: 'Fraunces', serif;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-56);
  margin: var(--space-sm) 0 0;
  max-width: 40ch;
}
.form-privacy-note a {
  color: var(--ink-56);
  border-bottom: 1px solid var(--ink-16);
  text-decoration: none;
  transition: color 240ms ease, border-color 240ms ease;
}
.form-privacy-note a:hover,
.form-privacy-note a:focus-visible {
  color: var(--vermilion);
  border-color: var(--vermilion);
}

/* Honeypot : off-screen but still in the accessibility tree as hidden.
   Bots that fill every input trip it; humans never see it. */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Legal pages on narrow screens : match the rest of the mobile plan
   (comfortable side gutters, single column, no horizontal scroll). */
@media (max-width: 640px) {
  .legal-doc-warning { padding: var(--space-sm); }
  .legal-clause p,
  .legal-clause li { font-size: 1rem; }
  .footer-legal { flex-direction: column; align-items: flex-start; }
  .footer-legal-company { font-size: 0.66rem; }
}

/* -------------------------------------------------------------------
   Footer newsletter subscribe : an always-visible email field and
   subscribe control sitting above the colophon columns. One field,
   one CTA, one privacy note. No toggle required : the whole footer
   is already a quiet moment, and subscribe needs no friction here.
   ------------------------------------------------------------------- */
.footer-subscribe {
  padding-bottom: var(--space-xl);
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid var(--ink-16);
}
.footer-subscribe-label {
  color: var(--ink-56);
  margin-bottom: var(--space-sm);
  display: block;
}
.footer-sub-form { display: contents; }
.form-error,
.footer-sub-error {
  color: var(--vermilion);
  font-size: 0.85rem;
  margin: var(--space-xs) 0 0;
  line-height: 1.45;
}
.footer-sub-row {
  display: flex;
  align-items: stretch;
  gap: var(--space-xs);
  flex-wrap: wrap;
}
.footer-sub-row input[type="email"] {
  flex: 1 1 16rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  padding: 0.6rem 0;
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  color: var(--ink);
  outline: none;
  border-radius: 0;
  min-height: 44px;
  -webkit-appearance: none;
  appearance: none;
}
.footer-sub-row input[type="email"]:focus {
  border-bottom-color: var(--vermilion);
}
.footer-sub-row input[type="email"]::placeholder {
  color: var(--ink-36);
  font-style: italic;
}
.footer-sub-row .cta-link {
  align-self: flex-end;
}
.footer-sub-note {
  margin-top: var(--space-sm);
  font-family: 'Fraunces', serif;
  font-size: 0.88rem;
  color: var(--ink-36);
  line-height: 1.5;
}
.footer-sub-note a {
  color: var(--ink-36);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-16);
  transition: color 240ms ease, border-color 240ms ease;
}
.footer-sub-note a:hover,
.footer-sub-note a:focus-visible {
  color: var(--vermilion);
  border-color: var(--vermilion);
}
.footer-sub-thanks {
  color: var(--vermilion);
  margin-top: var(--space-xs);
}

@media (hover: none) and (pointer: coarse) {
  .footer-sub-row input[type="email"] {
    font-size: 16px;
    padding: 0.75rem 0;
  }
}