/*
 * THE DEEP END — shared design system.
 * One stylesheet for all four pages (Home, Apply, Hosts, FAQ).
 *
 * Layers, back to front:
 *   0. The living field (breathing/drifting gradient blobs)
 *   1. The atmosphere veil (video, mix-blend into the field) + scrim + grain
 *   2. Content
 *   30. The overture (darkness that lifts on arrival)
 *
 * Design language is held firm by the design system: two typefaces in fixed
 * roles, the six-hour day-arc palette, square corners, hairline rules, no icons.
 */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');

:root {
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "DM Sans", system-ui, -apple-system, sans-serif;
  --bg: #e7d6d2;
  --ink: #2a2622;
  --b1: #f2b8c6;
  --b2: #f3d9a4;
  --b3: #9fa3bf;
  --b4: #eac3ae;
  --accent: #9fa3bf;
  --section-pad-y: clamp(4.25rem, 9vh, 7rem);
  --section-pad-x: clamp(1.5rem, 5vw, 4.5rem);
  --spread-max: 1280px;
  --content-max: 880px;

  /* ---- TYPE SCALE ----
     Every size below the display headings used to be a flat rem literal, so as
     the viewport grew the headings scaled on vw and the small tiers did not:
     h2 gains 66% between phone and desktop while an eyebrow gained nothing, and
     the small type ends up reading as an afterthought on a wide screen. These
     tiers are fluid, with floors at (or just above) the old flat values so
     phones never shrink, and ceilings 15–22% higher so desktop catches up. */
  --fs-micro:   clamp(0.72rem, 0.675rem + 0.20vw, 0.82rem);
  --fs-eyebrow: clamp(0.82rem, 0.775rem + 0.28vw, 0.94rem);
  --fs-small:   clamp(0.95rem, 0.915rem + 0.28vw, 1.06rem);
  --fs-body:    clamp(1.12rem, 1.070rem + 0.22vw, 1.21rem);
  --fs-body-lg: clamp(1.17rem, 1.120rem + 0.24vw, 1.28rem);
  --fs-h4:      clamp(1.28rem, 1.210rem + 0.42vw, 1.60rem);
  --fs-h3:      clamp(1.45rem, 1.380rem + 0.55vw, 1.78rem);
  /* Atmosphere veil — soft-light @ 80% is locked (survives all six day-arc hours) */
  --veil-blend: soft-light;
  --veil-opacity: 0.8;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: #241b3a; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.04;
  text-wrap: balance;
}
h2 { margin-bottom: 1.5rem; font-size: clamp(2.2rem, 4.5vw, 3.65rem); }
/* h3 is the sub-heading tier: one step under a section h2, used for the named
   sub-blocks inside a spread ("After Dark", "We think this is probably for
   you if:"). Those used to be a 0.72rem uppercase eyebrow and a 1.6rem serif
   paragraph respectively — same job, wildly different sizes. */
h3 { margin-bottom: 0.7rem; font-size: var(--fs-h3); font-weight: 500; line-height: 1.2; }
h4 { margin-bottom: 0.55rem; font-size: var(--fs-h4); font-weight: 500; line-height: 1.22; }
em { font-family: var(--font-serif); font-weight: 400; }
/* Inline emphasis inside running body copy stays in DM Sans (true italic), so a
   single emphasised word never flips to serif mid-sentence and reads like a bug.
   Standalone serif asides/titles (their own classes, or <cite>) keep Cormorant. */
.spread-content p em, .letter p em, .biobody p em, .group p em, .checklist li em { font-family: var(--font-sans); font-weight: 400; font-style: italic; }

/* ---------- THE SHELL (hour system) ---------- */
.site-shell {
  position: relative;
  min-height: 100vh;
  overflow: clip;
  background: var(--bg);
  color: var(--ink);
  transition: background 0.6s ease, color 0.6s ease;
  --rule: color-mix(in srgb, var(--ink) 25%, transparent);
  --rule-soft: color-mix(in srgb, var(--ink) 14%, transparent);
  --muted: color-mix(in srgb, var(--ink) 82%, transparent);
  --faint: color-mix(in srgb, var(--ink) 70%, transparent);
}
.site-shell main { position: relative; z-index: 2; }

/* ---------- FIXED-HOUR PALETTES ----------
   The home page travels the full arc via JS. Interior pages hold ONE hour:
   add .hour-N to the shell to pour that hour's six values + accent. */
.site-shell.hour-0 { --bg: #e7d6d2; --ink: #2a2622; --b1: #f2b8c6; --b2: #f3d9a4; --b3: #9fa3bf; --b4: #eac3ae; --accent: #9fa3bf; }
.site-shell.hour-1 { --bg: #dce7e2; --ink: #22302c; --b1: #8fc1bc; --b2: #3e7d74; --b3: #b9d8c2; --b4: #6fa3a8; --accent: #3e7d74; }
.site-shell.hour-2 { --bg: #d9dcc8; --ink: #28301f; --b1: #7e9b6e; --b2: #c2b25a; --b3: #4e7d72; --b4: #a96e85; --accent: #4e7d72; }
.site-shell.hour-3 { --bg: #e3cdaf; --ink: #33261a; --b1: #e0a45c; --b2: #b96a33; --b3: #d8b98c; --b4: #8c6b4f; --accent: #b96a33; }
.site-shell.hour-4 { --bg: #cbb6c6; --ink: #2b2333; --b1: #de9ab2; --b2: #8b87b3; --b3: #e4b98f; --b4: #6e6584; --accent: #6e6584; }
.site-shell.hour-5 { --bg: #241b3a; --ink: #f1e9dc; --b1: #3d2c66; --b2: #5a2b4e; --b3: #6e2a3c; --b4: #8d7fb0; --accent: #8d7fb0; }

/* ---------- 0. THE LIVING FIELD ---------- */
.field {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: var(--bg);
  pointer-events: none;
  transition: background 0.6s ease;
}
.field-blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.85; will-change: transform; }
.field-blob-1 { top: -18vmax; left: -20vmax; width: 70vmax; height: 70vmax; background: radial-gradient(circle at 40% 40%, var(--b1), transparent 65%); animation: breathe 11s ease-in-out infinite, drift-1 85s ease-in-out infinite; }
.field-blob-2 { top: 8vmax; right: -18vmax; width: 60vmax; height: 60vmax; background: radial-gradient(circle at 55% 45%, var(--b2), transparent 65%); animation: breathe 11s ease-in-out infinite 2.5s, drift-2 95s ease-in-out infinite; }
.field-blob-3 { bottom: -28vmax; left: 8vmax; width: 65vmax; height: 65vmax; background: radial-gradient(circle at 50% 40%, var(--b3), transparent 65%); animation: breathe 11s ease-in-out infinite 5s, drift-3 75s ease-in-out infinite; }
.field-blob-4 { right: 5vmax; bottom: -12vmax; width: 50vmax; height: 50vmax; background: radial-gradient(circle at 45% 50%, var(--b4), transparent 65%); animation: breathe 11s ease-in-out infinite 7.5s, drift-4 105s ease-in-out infinite; }

@keyframes breathe { 0%, 100% { transform: scale(1) translate(0, 0); } 45% { transform: scale(1.07) translate(0, -0.6vmax); } }
@keyframes drift-1 { 0%, 100% { left: -20vmax; top: -18vmax; } 50% { left: -12vmax; top: -10vmax; } }
@keyframes drift-2 { 0%, 100% { right: -18vmax; top: 8vmax; } 50% { right: -8vmax; top: 16vmax; } }
@keyframes drift-3 { 0%, 100% { left: 8vmax; bottom: -28vmax; } 50% { left: 18vmax; bottom: -20vmax; } }
@keyframes drift-4 { 0%, 100% { right: 5vmax; bottom: -12vmax; } 50% { right: 14vmax; bottom: -4vmax; } }

/* ---------- 1. THE ATMOSPHERE VEIL ---------- */
.atmosphere {
  position: fixed;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: var(--veil-blend);
  opacity: var(--veil-opacity);
  transition: opacity 1.2s ease;
}
.atmosphere video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 1.8s linear;
  filter: saturate(var(--veil-sat, 1)) contrast(var(--veil-contrast, 1)) brightness(var(--veil-bright, 1));
}
.atmosphere video.on { opacity: 1; }
.atmosphere.veil-off { opacity: 0; }

/* ---------- THE SCRIM (darkens the frame so light ink can read) ---------- */
.scrim {
  position: fixed;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: #1c1815;
  opacity: var(--scrim, 0);
  transition: opacity 0.8s ease;
}

/* ---------- FILM GRAIN (below content — grains the world, not the words) ---------- */
.grain {
  position: fixed;
  z-index: 1;
  inset: 0;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.08'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

/* ---------- THE OVERTURE (darkness that lifts) ---------- */
.overture {
  position: fixed;
  z-index: 30;
  inset: 0;
  background: #1c1815;
  opacity: 1;
  transition: opacity 3.2s ease-in-out;
  pointer-events: none;
}
body.arrived .overture { opacity: 0; }
/* Instant arrival: interior pages and repeat home visits within a session snap
   straight to the lit state with the overture's long fades suppressed. Paired
   with `arrived` in JS, so these elements land on their final state immediately. */
body.instant .overture,
body.instant .site-header,
body.instant .motion-toggle,
body.instant .opening-eyebrow,
body.instant .opening h1,
body.instant .opening-lede,
body.instant .opening-facts,
body.instant .opening .bracket-link,
body.instant .scroll-cue { transition: none !important; }

/* ---------- MOTION CONTROL (accessibility) ----------
   Visible but quiet. A faint hour-tinted backdrop keeps it legible over the
   moving clouds (same justified exception as the scrolled nav blur). */
.motion-toggle {
  position: fixed;
  z-index: 12;
  right: clamp(1rem, 3vw, 2.2rem);
  bottom: 1.1rem;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  background: color-mix(in srgb, var(--bg) 66%, transparent);
  backdrop-filter: blur(8px);
  padding: 0.6em 0.95em;
  opacity: 0;
  transition: opacity 1.4s ease 2.4s, color 0.3s ease;
}
body.arrived .motion-toggle { opacity: 1; }
.motion-toggle:hover { color: var(--ink); }
.motion-toggle .mt-br { font-family: var(--font-serif); font-size: 1.45em; font-weight: 400; }
/* Stilled: freeze the autonomous motion (blobs + scroll cue). Clouds are paused
   in JS. Text carries no motion of its own any more, so there is nothing else
   here to still — the entrance slides, parallax and scroll reveals are gone. */
body.motion-off .field-blob,
body.motion-off .scroll-cue i::after { animation: none !important; }
@media (max-width: 460px) { .motion-toggle { right: 0.8rem; bottom: 0.8rem; letter-spacing: 0.18em; } }

/* ---------- HEADER / NAV ---------- */
.site-header {
  position: fixed;
  z-index: 10;
  top: 0; right: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 0.9rem clamp(1.25rem, 4vw, 3rem);
  color: var(--ink);
  opacity: 0;
  transition: opacity 2s ease 2.4s, background 0.6s ease, color 0.6s ease;
}
body.arrived .site-header { opacity: 1; }
.site-header.scrolled {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(12px);
}
.wordmark { display: flex; flex-direction: column; line-height: 1; }
.wordmark > span { font-family: var(--font-serif); font-size: 1.45rem; }
.wordmark small { margin-top: 0.25rem; font-family: var(--font-serif); font-size: var(--fs-micro); opacity: 0.72; }
.navlinks { display: flex; align-items: center; gap: clamp(0.9rem, 1.8vw, 1.6rem); }
.navlinks > a:not(.bracket-link) {
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.75;
  transition: opacity 0.3s ease;
}
.navlinks > a:not(.bracket-link):hover,
.navlinks > a[aria-current="page"] { opacity: 1; }
.navlinks > a[aria-current="page"] { border-bottom: 1px solid currentColor; padding-bottom: 0.15em; }
.navlinks .bracket-link { font-size: var(--fs-micro); }
/* The inline nav is replaced by the hamburger menu at the SAME breakpoint the
   links would start dropping out. Previously links were hidden from 880px but
   the burger only appeared at 600px, so between those widths the nav silently
   lost every destination except the current page and the CTA — you could not
   navigate anywhere. One breakpoint, no dead zone. */
.nav-toggle { display: none; }
@media (max-width: 1024px) {
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; padding: 8px; margin: -8px -8px -8px 0;
    background: none; border: 0; cursor: pointer; color: var(--ink);
  }
  .nav-toggle .bar { display: block; width: 22px; height: 1.5px; background: currentColor;
    transition: transform 0.3s ease, opacity 0.3s ease; }
  .site-header.nav-open .nav-toggle .bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .site-header.nav-open .nav-toggle .bar:nth-child(2) { opacity: 0; }
  .site-header.nav-open .nav-toggle .bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .navlinks {
    display: none;
    position: fixed; top: 76px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0.5rem clamp(1.25rem, 4vw, 3rem) 1.6rem;
    background: color-mix(in srgb, var(--bg) 95%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--rule);
  }
  .site-header.nav-open .navlinks { display: flex; }
  .site-header.nav-open .navlinks > a { display: block; }
  .navlinks > a:not(.bracket-link) {
    padding: 0.95rem 0; font-size: var(--fs-small); opacity: 0.9;
    border-bottom: 1px solid var(--rule-soft);
  }
  .navlinks > a[aria-current="page"] { padding-bottom: 0.95rem; }
  .navlinks .bracket-link { margin-top: 1.1rem; font-size: var(--fs-small); }
}

/* Mobile-only line breaks (e.g. the hero tagline breaking at its commas). */
.comma-break { display: none; }
@media (max-width: 600px) { .comma-break { display: inline; } }

/* ---------- BRACKET CTA (the only button style) ---------- */
.bracket-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  width: fit-content;
  font-size: clamp(0.86rem, 0.825rem + 0.22vw, 0.97rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  line-height: 1.35;
  text-transform: uppercase;
}
.bracket-link > span:first-child, .bracket-link > span:last-child {
  font-family: var(--font-serif);
  font-size: 2em;
  font-weight: 400;
  line-height: 0.9;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.bracket-link:hover > span:first-child { transform: translateX(-0.35em); }
.bracket-link:hover > span:last-child { transform: translateX(0.35em); }

.mail-link { border-bottom: 1px solid var(--rule); transition: border-color 0.3s ease; }
.mail-link:hover { border-color: currentColor; }

/* ---------- THE OPENING FRAME (home hero) ---------- */
.opening {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: clamp(6rem, 13vh, 8.5rem) var(--section-pad-x) clamp(2.5rem, 7vh, 4.5rem);
  text-align: center;
}
.opening-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.1rem, 2.6vh, 1.9rem);
  will-change: transform, opacity;
}
.opening-eyebrow {
  margin: 0;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--faint);
  opacity: 0;
  transition: opacity 2.2s ease 2.6s;
}
body.arrived .opening-eyebrow { opacity: 1; }

.opening h1 {
  margin: 0;
  font-size: clamp(5rem, 19vw, 19rem);
  line-height: 0.96;
  opacity: 0;
  filter: blur(18px);
  letter-spacing: 0.06em;
  transition: opacity 3.4s ease 0.9s, filter 4.2s ease 1.1s, letter-spacing 4.6s cubic-bezier(0.22, 1, 0.36, 1) 0.9s;
  will-change: transform, filter;
}
body.arrived .opening h1 { opacity: 1; filter: blur(0); letter-spacing: -0.015em; }

.opening-lede {
  margin: 0;
  /* Clear the long "Deeply." descenders sitting above this line */
  margin-top: clamp(1.5rem, 4vh, 3.25rem);
  font-family: var(--font-serif);
  /* Sized to run as one line on tablet/desktop; wraps on phones (below) */
  font-size: clamp(1rem, 2.3vw, 1.7rem);
  line-height: 1.34;
  max-width: none;
  white-space: nowrap;
  color: var(--ink);
  opacity: 0;
  transition: opacity 2.2s ease 3.1s;
}
@media (max-width: 620px) {
  .opening-lede { white-space: normal; max-width: 26ch; font-size: clamp(1.2rem, 5.2vw, 1.5rem); text-wrap: balance; }
}
body.arrived .opening-lede { opacity: 1; }

.opening-facts {
  margin: 0;
  font-size: var(--fs-small);
  letter-spacing: 0.05em;
  color: var(--muted);
  opacity: 0;
  transition: opacity 2.2s ease 3.4s;
}
body.arrived .opening-facts { opacity: 1; }
.opening-facts b { font-weight: 400; color: var(--ink); }
.opening-facts:first-of-type { margin-top: clamp(0.6rem, 2.4vh, 1.8rem); }
.opening-facts-2 { transition-delay: 3.7s; }

.opening .bracket-link { opacity: 0; transition: opacity 2.2s ease 4s; }
body.arrived .opening .bracket-link { opacity: 1; }

.scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  margin-top: clamp(0.8rem, 3vh, 2.2rem);
  opacity: 0;
  transition: opacity 2.2s ease 4.4s;
}
body.arrived .scroll-cue { opacity: 1; }
.scroll-cue span {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--faint);
}
.scroll-cue i { display: block; width: 1px; height: 52px; background: var(--rule); overflow: hidden; position: relative; }
.scroll-cue i::after {
  content: "";
  position: absolute;
  top: -40%; left: 0;
  width: 1px; height: 40%;
  background: var(--ink);
  animation: cue-fall 2.6s ease-in-out infinite;
}
@keyframes cue-fall { 0% { top: -40%; } 60%, 100% { top: 110%; } }

/* ---------- THE INVITATION (settles in whole) ---------- */
.invitation {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 90svh;
  width: min(940px, 100%);
  margin: 0 auto;
  padding: var(--section-pad-y) var(--section-pad-x);
}
.invitation-eyebrow {
  width: min(240px, 100%);
  margin-bottom: 3rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--rule);
  color: var(--faint);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.invitation .lede-passage {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  line-height: 1.32;
  max-width: 21em;
  margin-bottom: 0;
}
.invitation .join-us { margin-top: 1.4rem; font-family: var(--font-serif); font-size: clamp(1.5rem, 3vw, 2.4rem); }

.eyebrow-spacer { width: 100%; }

/* ---------- SPREADS (editorial grid) ---------- */
.spread {
  position: relative;
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(0, 880px);
  gap: clamp(2rem, 5vw, 5rem);
  width: min(var(--spread-max), 100%);
  margin: 0 auto;
  padding: var(--section-pad-y) var(--section-pad-x);
}
.eyebrow {
  width: 100%;
  margin-bottom: 0;
  padding-top: 0.65rem;
  border-top: 1px solid var(--rule);
  color: var(--faint);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.3em;
  line-height: 1.4;
  text-transform: uppercase;
}
.spread-content { width: 100%; max-width: var(--content-max); }
.spread-content > p { max-width: 66ch; font-size: var(--fs-body-lg); }
.spread-content > p + p { margin-top: 1.05rem; }
.spread-content > :last-child { margin-bottom: 0; }

.lede-copy {
  max-width: 800px !important;
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 2.8vw, 2.1rem) !important;
  line-height: 1.36;
  text-wrap: balance;
}
.pull-copy {
  max-width: 800px !important;
  margin-bottom: 1.5rem;
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3.4vw, 2.75rem) !important;
  line-height: 1.25;
  text-wrap: balance;
}
.join-us { margin-top: 1.9rem; font-family: var(--font-serif); font-size: clamp(1.45rem, 1.3rem + 0.7vw, 1.85rem) !important; }
/* A second stacked headline within one spread (e.g. Designed for Attention) */
.h2-stack { margin-top: -0.4rem; }

/* ---------- THE PROMISE ---------- */
.reunion-lines {
  display: flex;
  flex-direction: column;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  margin-top: 2.5rem;
  container-type: inline-size;
}
.reunion-lines span {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 4vw, 3.25rem);
  line-height: 1.08;
  text-wrap: balance;
}
.reunion-lines span:nth-child(1) { font-size: clamp(2rem, 4.6vw, 3.6rem); }
.reunion-lines span:nth-child(2) { font-size: clamp(2.4rem, 5.4vw, 4.2rem); }
.reunion-lines span:nth-child(3) { font-size: clamp(1.5rem, 3vw, 2.4rem); }
.reunion-lines span:nth-child(4) { font-size: clamp(1.9rem, 4.2vw, 3.2rem); }
.reunion-lines span:nth-child(5) { font-size: clamp(1.6rem, 3.4vw, 2.7rem); }
.reunion-lines span:nth-child(6) { font-size: clamp(2.2rem, 5vw, 3.9rem); }
.reunion-lines span:nth-child(2), .reunion-lines span:nth-child(5) { margin-left: 8%; }
.reunion-lines span:nth-child(3), .reunion-lines span:nth-child(6) { margin-left: 16%; }
.reunion-lines span:last-child { margin-top: 0.5rem; font-size: clamp(1.7rem, 3.6vw, 2.9rem); }

/* ---------- THE CASCADE (What Belongs Here: Make / Decide / Reorient) ---------- */
.cascade { margin: 3rem 0 2.4rem; }
.stratum + .stratum { margin-top: clamp(2.2rem, 6vh, 4rem); }
.stratum-2 { margin-left: 16%; }
.stratum-3 { margin-left: 34%; }
.cascade-item h3 {
  margin-bottom: 0.5rem;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.8rem, 7vw, 6rem);
  line-height: 1;
  letter-spacing: -0.015em;
}
.cascade-item p { max-width: 34ch; margin: 0; color: var(--muted); }

/* ---------- THE WEEK (day list) ---------- */
.days { list-style: none; margin: 2.5rem 0 0; padding: 0; max-width: var(--content-max); }
.days li {
  border-top: 1px solid var(--rule-soft);
  padding: 1.5rem 0;
  display: grid;
  grid-template-columns: minmax(56px, 90px) minmax(140px, 210px) 1fr;
  gap: 1.2rem;
  align-items: baseline;
}
.days .num { font-family: var(--font-serif); font-size: 1.75rem; color: var(--ink); line-height: 1; }
.days .when { font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--faint); }
.days p { margin: 0; color: var(--muted); max-width: 56ch; }
@media (max-width: 640px) {
  .days li { grid-template-columns: 48px 1fr; }
  .days .when { grid-column: 2; }
  .days p { grid-column: 2; }
}

/* Sub-blocks inside a spread */
.subrule { border-top: 1px solid var(--rule); margin-top: 3rem; padding-top: 2.2rem; }
.sub-eyebrow {
  display: block;
  margin-bottom: 1.1rem;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--faint);
}
.subrule p + p { margin-top: 1.05rem; }
.subrule > p { color: var(--muted); font-size: var(--fs-body-lg); }

/* Crossed off — the copy sets these words as struck through, so they are simply
   struck through. (This used to draw itself on scroll.) */
.strike { text-decoration: line-through; opacity: 0.55; }

/* ---------- ROOMS: FIGURE, TIERS, CHOOSER, FOLDS ---------- */
.tuition-figure {
  margin-bottom: 1.25rem;
  font-family: var(--font-serif);
  font-size: clamp(3.2rem, 8vw, 6rem) !important;
  line-height: 1;
}
.principle { font-weight: 400; }

/* Home slim room tiers — name + price + one line, three paths only */
.tiers { list-style: none; margin: 2.6rem 0 0; padding: 0; max-width: var(--content-max); }
.tiers li {
  border-top: 1px solid var(--rule);
  padding: 1.5rem 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
}
.tiers .tname { font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--faint); }
.tiers .tprice { font-family: var(--font-serif); font-size: 1.9rem; text-align: right; white-space: nowrap; line-height: 1; }
.tiers .tdesc { grid-column: 1 / -1; margin: 0; color: var(--muted); max-width: 60ch; }
@media (max-width: 560px) { .tiers li { grid-template-columns: 1fr; } .tiers .tprice { text-align: left; } }

.chooser { margin-top: 3rem; border-top: 1px solid var(--rule); padding-top: 2.2rem; }
.chq { font-family: var(--font-serif); font-size: var(--fs-h3); margin: 0 0 0.9rem; }
.chq2 { margin-top: 1.6rem; }
.chrow { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.chip {
  font-size: var(--fs-small);
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--muted);
  border: 1px solid var(--rule-soft);
  padding: 0.65em 1.1em;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.chip:hover { color: var(--ink); border-color: var(--rule); }
.chip[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); }
.navnote { margin: 1.8rem 0 0; font-size: var(--fs-small); line-height: 1.55; color: var(--muted); max-width: 62ch; }
.navnote:empty { margin: 0; }
.navreset { font: inherit; color: var(--ink); border-bottom: 1px solid var(--rule); white-space: nowrap; transition: border-color 0.3s ease; }
.navreset:hover { border-color: currentColor; }
.chresults { margin-top: 2.2rem; display: grid; gap: 1.3rem; }
.rcard {
  border-top: 1px solid var(--rule);
  padding-top: 1.2rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.9rem 1.5rem;
  align-items: baseline;
}
.rcard h3 { margin: 0; font-size: var(--fs-h3); }
.rcard .price { font-family: var(--font-serif); font-size: 1.9rem; text-align: right; white-space: nowrap; }
.rcard .price small {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: right;
}
.rcard .meta { grid-column: 1 / -1; margin: 0; font-size: var(--fs-small); color: var(--muted); max-width: 58ch; }
.chnote { margin: 0; font-size: var(--fs-small); color: var(--muted); border-top: 1px solid var(--rule-soft); padding-top: 1.2rem; }
.chassure { margin: 0; font-family: var(--font-serif); font-size: var(--fs-h4); color: var(--muted); }
@media (max-width: 560px) {
  .rcard { grid-template-columns: 1fr; }
  .rcard .price, .rcard .price small { text-align: left; }
}

.allrooms { margin-top: clamp(2.5rem, 6vw, 4.5rem); border-top: 1px solid var(--rule); padding-top: 2.2rem; }
/* Qualified against `.spread-content > p` (0,1,1), which would otherwise win the
   font-size over a bare single-class selector. Same reason .lede-copy and
   friends carry !important. */
.allrooms-note,
.spread-content > p.allrooms-note { margin: 0.9rem 0 1.2rem; font-size: var(--fs-small); color: var(--muted); }
.folds { border-bottom: 1px solid var(--rule-soft); }
.fold { border-top: 1px solid var(--rule-soft); }
.foldbtn {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1.2rem;
  align-items: baseline;
  text-align: left;
  padding: 1.2rem 0;
  color: var(--ink);
  font-weight: 300;
}
.foldbtn .fname { font-family: var(--font-serif); font-size: var(--fs-h3); }
.foldbtn .ffrom { font-size: var(--fs-small); color: var(--muted); }
/* The room rows carry a two-part price range, which needs to wrap on a phone. */
.roombtn .ffrom { text-align: right; }
@media (max-width: 560px) {
  .roombtn { grid-template-columns: 1fr auto; }
  .roombtn .ffrom { grid-column: 1; text-align: left; margin-top: 0.3rem; }
  .roombtn .plus { grid-row: 1; grid-column: 2; }
}
.foldbtn .plus { font-size: 1.3rem; color: var(--faint); width: 1em; text-align: center; transition: transform 0.3s ease; }
/* Room accordions show their one-line description while closed (per architecture) */
.roombtn .fdesc { grid-column: 1 / -1; margin-top: 0.4rem; color: var(--muted); font-size: var(--fs-small); font-weight: 300; }
.dietary-note { margin: 2.2rem 0 0; font-family: var(--font-serif); font-size: var(--fs-h4); line-height: 1.5; color: var(--muted); }
.dietary-note a { border-bottom: 1px solid var(--rule); }
.fold.open .plus { transform: rotate(45deg); }
.foldbody { display: none; padding: 0 0 1.5rem; max-width: 62ch; }
.fold.open .foldbody { display: block; }
.room-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0.4rem 0 1.3rem; }
.room-photos figure { margin: 0; }
.room-photos figure:first-child { grid-column: 1 / -1; }
.room-photos img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(0.82) sepia(0.12) contrast(0.96) brightness(1.02);
}
.room-photos figure:first-child img { aspect-ratio: 16 / 10; }
.foldbody .note { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.roommeta { margin: 0.45rem 0 0; font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--faint); }
.pricerows { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.pricerows li { display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem; border-top: 1px solid var(--rule-soft); padding: 0.6rem 0; font-size: var(--fs-small); }
.pricerows .pr { font-family: var(--font-serif); font-size: 1.3rem; white-space: nowrap; }
.rooms-assure { margin-top: 1.6rem !important; font-family: var(--font-serif); font-size: var(--fs-h4) !important; color: var(--muted); }

/* ---------- PATH / PROCESS STEPS ---------- */
.pathsteps { list-style: none; margin: 2.5rem 0 0; padding: 0; max-width: var(--content-max); }
.pathsteps li {
  border-top: 1px solid var(--rule-soft);
  padding: 1.5rem 0;
  display: grid;
  grid-template-columns: minmax(52px, 80px) 1fr;
  gap: 1.2rem;
}
.pathsteps .num { font-family: var(--font-serif); font-size: 1.7rem; color: var(--ink); line-height: 1; }
.pathsteps h3 { margin: 0 0 0.3rem; font-size: var(--fs-h3); }
.pathsteps .here { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-small); color: var(--muted); margin-left: 0.35em; }
.pathsteps p { margin: 0; font-size: var(--fs-body); color: var(--muted); max-width: 60ch; }
.pathsteps li > div > p { font-size: var(--fs-body-lg); }

/* ---------- FIELD NOTES ESSAYS ---------- */
.essays { list-style: none; margin: 2.5rem 0 0; padding: 0; max-width: var(--content-max); }
.essays li {
  border-top: 1px solid var(--rule);
  padding: 1.9rem 0;
  display: grid;
  grid-template-columns: minmax(52px, 72px) 1fr;
  gap: 1.2rem;
}
.essays .num { font-family: var(--font-serif); font-size: 1.7rem; color: var(--ink); line-height: 1; }
.essays h3 { margin: 0 0 0.45rem; font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.6rem, 1.45rem + 0.75vw, 2.05rem); }
.essays p { margin: 0 0 1rem; color: var(--muted); max-width: 60ch; }
.read-link {
  display: inline-flex; align-items: baseline; gap: 0.5em;
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--faint); border-bottom: 1px solid var(--rule); padding-bottom: 0.2em;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.read-link:hover { color: var(--ink); border-color: var(--ink); }
@media (max-width: 560px) { .essays li { grid-template-columns: 1fr; gap: 0.5rem; } }

/* ---------- ESSENTIAL FACTS (label — value) ---------- */
.facts { list-style: none; margin: 2.5rem 0 0; padding: 0; max-width: var(--content-max); }
.facts li {
  border-top: 1px solid var(--rule-soft);
  padding: 1.15rem 0;
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr;
  gap: 1.2rem;
  align-items: baseline;
}
.facts .flabel { font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--faint); }
.facts .fval { margin: 0; color: var(--ink); font-size: var(--fs-small); }
.facts .fval a { border-bottom: 1px solid var(--rule); transition: border-color 0.3s ease; }
.facts .fval a:hover { border-color: currentColor; }
@media (max-width: 560px) { .facts li { grid-template-columns: 1fr; gap: 0.35rem; } }

/* ---------- FACT PANELS (Start the Conversation) ----------
   The same facts as .facts, but as a grid of small panels rather than a stack of
   full-width rows — so the page doesn't read as three identical tables. */
.factgrid { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule-soft); }
.factgrid li { background: var(--bg); padding: 1.6rem 1.4rem 1.7rem; }
.factgrid .flabel { display: block; margin-bottom: 0.7rem; font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--faint); }
.factgrid .fval { margin: 0; font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.25; color: var(--ink); }
.factgrid .fval small { display: block; margin-top: 0.4rem; font-family: var(--font-sans); font-size: var(--fs-micro); letter-spacing: 0.06em; line-height: 1.5; color: var(--muted); }
.factgrid .fval small a { border-bottom: 1px solid var(--rule); transition: border-color 0.3s ease; }
.factgrid .fval small a:hover { border-color: currentColor; }
.factnote,
.spread-content > p.factnote { margin: 1.6rem 0 0; font-size: var(--fs-small); color: var(--muted); max-width: 62ch; }
.factnote + .factnote { margin-top: 0.5rem; }
.factnote a { border-bottom: 1px solid var(--rule); transition: border-color 0.3s ease; }
.factnote a:hover { border-color: currentColor; }
@media (max-width: 820px) {
  .factgrid { grid-template-columns: repeat(2, 1fr); }
  /* An odd number of panels leaves the last one orphaned, and the grid's tinted
     background then shows through the empty cell as a stray block. Let it span. */
  .factgrid li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 480px) { .factgrid { grid-template-columns: 1fr; } }

/* ---------- WHAT'S INCLUDED (three groups) ---------- */
.groups { margin-top: 2.5rem; }
.group { border-top: 1px solid var(--rule); padding: 1.8rem 0 0; }
.group + .group { margin-top: 1.6rem; }
.group p { margin: 0; color: var(--muted); max-width: 64ch; font-size: var(--fs-body-lg); }
.group .glink { display: inline; }

/* ---------- COMMON AREAS STRIP (What's Included) ---------- */
.placestrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin: 2.6rem 0 0; }
.placestrip figure { margin: 0; }
.placestrip img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  filter: saturate(0.82) sepia(0.12) contrast(0.96) brightness(1.02);
}
.placestrip figcaption { margin-top: 0.55rem; font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); }
@media (max-width: 640px) { .placestrip { grid-template-columns: 1fr 1fr; } .placestrip figure:first-child { grid-column: 1 / -1; } }

/* ---------- THE PLACE (Home) ----------
   An editorial band of the property that scrolls with the page: no carousel, no
   arrows, nothing that moves on its own. The first plate spans and sets the
   scene; the rest fall into an asymmetric two/three-column rhythm. */
.placeband { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.7rem; margin: 2.8rem 0 0; }
.placeband figure { margin: 0; }
.placeband img {
  display: block; width: 100%; height: auto; object-fit: cover;
  filter: saturate(0.82) sepia(0.12) contrast(0.96) brightness(1.02);
}
.placeband figure:nth-child(1) { grid-column: span 6; }
.placeband figure:nth-child(1) img { aspect-ratio: 21 / 9; }
.placeband figure:nth-child(2) { grid-column: span 4; }
.placeband figure:nth-child(3) { grid-column: span 2; }
.placeband figure:nth-child(4) { grid-column: span 2; }
.placeband figure:nth-child(5) { grid-column: span 4; }
.placeband figure:nth-child(n+2) img { aspect-ratio: 3 / 2; }
.placeband figcaption { margin-top: 0.5rem; font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); }
@media (max-width: 700px) {
  .placeband { grid-template-columns: repeat(2, 1fr); }
  .placeband figure:nth-child(1) { grid-column: span 2; }
  .placeband figure:nth-child(n+2) { grid-column: span 1; }
  .placeband figure:nth-child(1) img { aspect-ratio: 16 / 10; }
}

/* ---------- HOSTING TEAM VIDEO GRID (Home) ---------- */
.videogrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin: 2.6rem 0 1.6rem; }
.vplate { margin: 0; }
.vplate .frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-top: 1px solid var(--rule);
  overflow: hidden;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.vplate .frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82) sepia(0.12) contrast(0.96) brightness(1.02); }
.vplate .frame .placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  padding: 1rem;
  font-family: var(--font-serif); font-size: 1rem; color: var(--faint);
}
/* Two of the three films are 9:16 reels and fill the portrait plate. The train
   tour is 16:9 cinema, so it letterboxes inside the same plate — black bands
   top and bottom, whole frame visible, grid untouched. */
.vplate .frame.landscape { background: #1c1815; }
.vplate .frame.landscape video,
.vplate .frame.landscape img { object-fit: contain; }
.vplate .vlabel { margin-top: 0.6rem; font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); line-height: 1.4; }
.vplate .vlabel b { font-weight: 500; color: var(--ink); font-family: var(--font-serif); letter-spacing: 0; text-transform: none; font-size: var(--fs-h4); display: block; margin-bottom: 0.2rem; }
.videonote { margin: 0 0 1.4rem; font-size: var(--fs-small); color: var(--faint); font-family: var(--font-serif); }
@media (max-width: 640px) { .videogrid { grid-template-columns: 1fr; } .vplate .frame { aspect-ratio: 16 / 10; } }

/* ---------- HOSTS PAGE ---------- */
.about-intro {
  min-height: 62svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: min(var(--spread-max), 100%);
  margin: 0 auto;
  padding: clamp(7rem, 16vh, 11rem) var(--section-pad-x) clamp(2rem, 5vh, 4rem);
}
.about-eyebrow {
  margin-bottom: 1.4rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--rule);
  color: var(--faint);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  width: min(240px, 100%);
}
.about-intro h1 { font-size: clamp(2.6rem, 6vw, 5rem); max-width: 18ch; margin-bottom: 1.6rem; }
.about-intro .lede { font-family: var(--font-serif); font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.36; max-width: 44ch; color: var(--ink); text-wrap: balance; }

/* Host cards with full-bio expansions */
.host-list { list-style: none; margin: 0 0 2.2rem; padding: 0; }
.host-list > li {
  border-top: 1px solid var(--rule);
  padding: 2.2rem 0 1.6rem;
  display: grid;
  grid-template-columns: minmax(96px, 132px) 1fr;
  gap: 1.8rem;
  align-items: start;
  scroll-margin-top: 90px;
}
.host-cut { align-self: start; }
.host-cut img { display: block; width: 100%; height: auto; filter: saturate(0.78) sepia(0.08) contrast(0.97); }
.host-list > li.no-photo { grid-template-columns: 1fr; }
.host-num { font-family: var(--font-serif); font-size: var(--fs-small); color: var(--ink); }
.host-list h3 { display: flex; flex-wrap: wrap; gap: 0.4em; align-items: baseline; margin: 0.2rem 0 0.15rem; font-size: clamp(1.5rem, 1.35rem + 0.75vw, 1.95rem); }
.host-role { font-family: var(--font-sans); font-weight: 300; font-size: var(--fs-small); color: var(--faint); letter-spacing: 0.02em; }
.host-identity { margin: 0 0 0.9rem; font-family: var(--font-serif); font-size: var(--fs-h4); color: var(--muted); max-width: 52ch; }
.host-list .host-lead { margin: 0; font-size: var(--fs-body); color: var(--muted); max-width: 62ch; }
.biofold { margin-top: 1rem; }
.biobtn {
  display: inline-flex; align-items: baseline; gap: 0.5em;
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint);
  transition: color 0.3s ease;
}
.biobtn:hover { color: var(--ink); }
.biobtn .plus { font-family: var(--font-serif); font-size: 1.2rem; transition: transform 0.3s ease; }
.biofold.open .biobtn .plus { transform: rotate(45deg); }
.biobody { display: none; margin-top: 1.2rem; max-width: 64ch; }
.biofold.open .biobody { display: block; }
.biobody p { margin: 0 0 1rem; color: var(--muted); }
.biobody .exp-label { display: block; margin: 1.2rem 0 0.7rem; font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--faint); }
.biobody ul.exp { list-style: none; margin: 0; padding: 0; }
.biobody ul.exp li { border-top: 1px solid var(--rule-soft); padding: 0.7rem 0; color: var(--muted); font-size: var(--fs-small); }
@media (max-width: 640px) { .host-list > li { grid-template-columns: 76px 1fr; gap: 1rem; } }

/* Jenn & Anna letter */
.letter p { font-family: var(--font-serif); font-size: clamp(1.2rem, 2.2vw, 1.55rem); line-height: 1.5; color: var(--ink); max-width: 40ch; }
.letter p + p { margin-top: 1.3rem; }

/* How We Design — principle pairs */
.principles { margin-top: 2.5rem; }
.principle-item { border-top: 1px solid var(--rule-soft); padding: 1.6rem 0; }
.principle-item h3 { margin: 0 0 0.4rem; font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h3); }
.principle-item p { margin: 0; color: var(--muted); max-width: 62ch; }

.about-close { border-top: 1px solid var(--rule); margin-top: 1rem; padding-top: 1.8rem; }
.about-close p { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--muted); max-width: 52ch; }
.about-back { margin-top: 2.2rem; display: inline-flex; }

/* ---------- FAQ ---------- */
.faqsearch { display: flex; align-items: baseline; gap: 1.2rem; margin: 2.2rem 0 1.5rem; }
#faqinput {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  color: var(--ink);
  padding: 0.4em 0;
  outline: none;
}
#faqinput::placeholder { color: var(--faint); }
#faqinput:focus { border-color: var(--ink); }
.faqcount { font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
/* Category navigation */
.catnav { display: flex; flex-wrap: wrap; gap: 0.7rem 0.9rem; margin: 0 0 1.8rem; }
.catnav a {
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint);
  padding-bottom: 0.2em; border-bottom: 1px solid transparent; transition: color 0.3s ease, border-color 0.3s ease;
}
.catnav a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.faq-cat-head { margin: 2.8rem 0 0.2rem; padding-top: 1.3rem; border-top: 1px solid var(--rule); font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--faint); scroll-margin-top: 90px; }
/* Reduce line clutter: the category rule is the divider — drop the folds'
   container border and the first question's rule so they don't double up. */
#faqbody .folds { border-bottom: none; }
#faqbody .folds .fold:first-child { border-top: none; }
#faqbody .fold { border-top-color: var(--rule-soft); }
#faqbody .foldbtn { padding: 1rem 0; }
.faq-q { font-family: var(--font-serif); font-size: var(--fs-h3); }
.faq-cat { font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.faq-ask { margin-top: 2.2rem !important; }
.faq-placeholder { margin: 0.6rem 0 0; font-size: var(--fs-small); font-family: var(--font-serif); color: var(--faint); }

/* ---------- CLOSING + QUOTE + FOOTER ---------- */
.closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: clamp(7rem, 16vh, 12rem) var(--section-pad-x);
  text-align: center;
}
.closing .eyebrow { width: min(560px, 100%); margin-bottom: 2.5rem; }
.closing h2 { max-width: none; font-size: clamp(2.4rem, 5.2vw, 4.4rem); text-wrap: balance; }
.closing > p { max-width: 600px; margin-bottom: 2.25rem; color: var(--muted); }

.quote-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: var(--section-pad-y) var(--section-pad-x);
  text-align: center;
}
/* Home now ends on the closing CTA — the Odell quote moved to the FAQ, so the
   two Home-only height clamps that closed the gap between the stacked scenes
   are gone. Give Home's final scene a little breathing room off the footer. */
body[data-arc="on"] .closing { padding-bottom: clamp(4rem, 10vh, 7rem); }
.quote-scene blockquote {
  margin: 0;
  max-width: 24em;
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 3.2vw, 2.8rem);
  line-height: 1.4;
}
.quote-scene cite {
  margin-top: 2.2rem;
  font-style: normal;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--faint);
}

.site-footer {
  position: relative;
  z-index: 2;
  width: min(var(--spread-max), 100%);
  margin: 0 auto;
  padding: 3.5rem var(--section-pad-x) 3rem;
  border-top: 1px solid var(--rule);
}
.footer-wordmark { margin: 0; font-family: var(--font-serif); font-size: 1.65rem; line-height: 1.05; }
.footer-tagline { margin: 0; font-family: var(--font-serif); font-size: var(--fs-small); line-height: 1.05; }
.footer-nav { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; }
.footer-nav a { font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); transition: color 0.3s ease; }
.footer-nav a:hover { color: var(--ink); }
.footer-contact { margin-top: 1.1rem; font-size: var(--fs-small); color: var(--muted); letter-spacing: 0.06em; }
.footer-contact a { border-bottom: 1px solid var(--rule); }
.footer-land { margin-top: 1.5rem; margin-bottom: 0; font-size: var(--fs-small); color: var(--muted); max-width: 72ch; }
.footer-copy { margin-top: 1.5rem; margin-bottom: 0; font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--faint); }

/* ---------- CHECKLIST ----------
   No marker glyph. Every other list on this site (.days, .tiers, .facts,
   .pricerows, .essays) marks a row with a hairline rule above it and no bullet;
   this list used to be the one outlier, carrying a ✓ that also read as
   "done" rather than "here is an item". It now matches the house pattern. */
.checklist { list-style: none; margin: 1.2rem 0 0; padding: 0; max-width: 62ch; }
.checklist li {
  border-top: 1px solid var(--rule-soft);
  padding: 0.85rem 0;
  color: var(--ink);
  font-size: var(--fs-body-lg);
  line-height: 1.55;
}
/* A checklist directly under its h3 sits tight to it. */
.subrule > h3 + .checklist { margin-top: 0.9rem; }

/* ---------- LINE SET ----------
   Short standalone sentences, one per line. Not a list — no rules, no markers,
   just the lines given room to sit as sentences. */
.spread-content > p.line-set,
.line-set {
  margin: 1.3rem 0 1.6rem;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.35rem + 0.9vw, 1.95rem);
  line-height: 1.6;
  color: var(--ink);
}

/* ---------- ROOM ACCORDION DETAIL (image beside the price table) ---------- */
.room-detail {
  display: grid;
  grid-template-columns: minmax(0, 210px) minmax(0, 300px);
  gap: 1.2rem 1.6rem;
  align-items: start;
  margin-top: 1.1rem;
}
.room-photo { margin: 0; }
.room-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.82) sepia(0.12) contrast(0.96) brightness(1.02);
}
.room-detail .pricerows { margin: 0; }
.room-detail .pricerows li { gap: 1.4rem; }
@media (max-width: 560px) {
  .room-detail { grid-template-columns: 1fr; }
  .room-photo { order: 2; }
  .room-detail .pricerows { order: 1; }
}

/* ---------- HOSTING-TEAM FILMS (click to open an enlarged player) ---------- */
.vplate .frame video { width: 100%; height: 100%; object-fit: cover; display: block; background: #1c1815; }
.vplate button.frame { cursor: pointer; padding: 0; }
.vplate .frame .playcue {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 0.4em;
  font-family: var(--font-sans); font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase;
  color: #f1e9dc;
  background: color-mix(in srgb, #1c1815 22%, transparent);
  transition: background 0.4s ease;
}
.vplate .frame .playcue span[aria-hidden] { font-family: var(--font-serif); font-size: 1.5em; font-weight: 400; }
.vplate button.frame:hover .playcue,
.vplate button.frame:focus-visible .playcue { background: color-mix(in srgb, #1c1815 42%, transparent); }

/* The enlarged film player: scales up on open, retracts on close/end */
.film-lightbox {
  position: fixed; z-index: 50; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 5vw, 4rem);
  background: color-mix(in srgb, #1c1815 84%, transparent);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}
.film-lightbox.open { opacity: 1; visibility: visible; transition: opacity 0.45s ease; }
.film-lightbox-inner {
  position: relative;
  width: min(1100px, 100%);
  transform: scale(0.9);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.film-lightbox.open .film-lightbox-inner { transform: scale(1); }
.film-player { width: 100%; height: auto; max-height: 82vh; display: block; background: #1c1815; }
.film-close {
  position: absolute; top: -2.6rem; right: 0;
  display: inline-flex; align-items: baseline; gap: 0.4em;
  font-family: var(--font-sans); font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase;
  color: #f1e9dc; opacity: 0.85; transition: opacity 0.3s ease;
}
.film-close:hover { opacity: 1; }
.film-close span[aria-hidden] { font-family: var(--font-serif); font-size: 1.45em; font-weight: 400; }
@media (prefers-reduced-motion: reduce) {
  .film-lightbox, .film-lightbox-inner { transition: none; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 760px) {
  .spread { grid-template-columns: 1fr; gap: 1.6rem; }
  .stratum-2 { margin-left: 8%; }
  .stratum-3 { margin-left: 16%; }
}

/* ---------- REDUCED MOTION ----------
   Text carries no motion of its own now, so this block only has to calm the
   arrival sequence and the two autonomous animations (blobs, scroll cue). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .overture { transition-duration: 0.4s; }
  .opening h1, .opening-eyebrow, .opening-lede, .opening-facts, .opening .bracket-link,
  .scroll-cue, .site-header, .motion-toggle {
    transition-duration: 0.4s; transition-delay: 0s;
  }
  .field-blob, .scroll-cue i::after { animation: none; }
}