/* ---------------------------------------------------------
   LIFEGUIDE — stylesheet
   Built on the brief's restraint principles.
   All transitions honor prefers-reduced-motion.
---------------------------------------------------------- */

/* Design tokens — Heckfield ground + 단청 (dancheong) accents.
   Warm ivory base. Weathered-temple accent colors derived from five cardinal
   hues (오방색), desaturated toward ivory/taupe so nothing reads as costume.
   Used sparingly: CTA, drawer current-state, chapter grounds, form states. */
:root {
  --bg: #F4EFE2;              /* 백 — refined warm paper, low-sat (Heckfield / Aesop register) */
  --bg-alt: #ECE5D2;          /* a quiet step deeper for alternate sections */
  --bg-deeper: #DCD3BB;       /* deepest cream for cards / image grounds */
  --ink: #2B261D;             /* 흑 — warm near-black, slight brown */
  --ink-soft: #6E6557;        /* muted warm taupe */
  --hairline: #DCD2BB;        /* warm beige divider, softened */
  --overlay: #1A1612;         /* warm near-black for dim overlays */
  --ink-footer: #232A26;      /* 단청 흑 — deep sage-infused near-black, footer anchor */
  --ink-footer-hair: #333B36; /* hairline that reads on --ink-footer */

  /* 단청 accents — two tones drawn from the palace reference (weathered
     pillar vermillion + faded door-lattice seafoam-sage). Both sit low-
     saturation, blended toward ivory, in the Heckfield/Azuma register.
     The third palette element is the warm ivory ground itself. */
  --dancheong-red:        #A35A4C;   /* 주 — weathered pillar vermillion, used only on small accents */
  --dancheong-red-soft:   #C08676;   /* softer echo for hover / subtle tints */
  --dancheong-red-wash:   #ECE1D3;   /* barely-there terracotta cast — Heckfield register */
  --dancheong-green:      #87A297;   /* 하엽 — faded door lattice seafoam-sage */
  --dancheong-green-soft: #B0C2B6;   /* pale sage echo for hover / details */
  --dancheong-green-wash: #E7EDE0;   /* calm pastel sage — desaturated, hue lifted off the yellow-green fluorescence zone */

  --accent:      var(--dancheong-green);
  --accent-warm: var(--dancheong-red);

  /* Editorial Classic pairing.
     Fraunces (display)        — modern variable serif with editorial gravity;
                                 stands in for Canela Deck. Optical sizing on,
                                 SOFT axis dialed back, italic kept as a
                                 disciplined accent.
     Libre Baskerville (body)  — Tiempos-adjacent. Readable at long-form scale.
     Canela / Tiempos listed as post-launch licensed targets in the colophon. */
  --serif-display: "Fraunces", "Canela Deck", "Tiempos Headline", Georgia, serif;
  --serif-body:    "Libre Baskerville", "Tiempos Text", Georgia, serif;

  --text-max: 640px;
  --page-pad: clamp(1.75rem, 4vw, 3rem);

  /* The single source of truth for section vertical padding.
     Every full-width section (statement, opening-prose, foundation,
     programs, who, reserve-scope, .section on chapter pages) uses
     this exact value top and bottom — so the distance from any text
     to any section break is uniform throughout the site. */
  --section-vpad: clamp(5rem, 12vh, 8rem);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile reduces section vpad ~30% so scroll length on phones stays
   reasonable while keeping the atelier register on desktop intact. */
@media (max-width: 780px) {
  :root { --section-vpad: clamp(3.5rem, 8vh, 5.5rem); }
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Disable iOS Safari rubber-band overscroll so the dark footer
     doesn't bleed past the bottom and the skip-link doesn't peek
     above the top when the user pulls the page beyond its bounds. */
  overscroll-behavior: none;
  /* Micro-typography: variable-font optical sizing, editorial hanging punctuation. */
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  hanging-punctuation: first last;
}
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* Brand-colored selection — replaces default browser blue. */
::selection { background: var(--ink); color: var(--bg); }
::-moz-selection { background: var(--ink); color: var(--bg); }

/* Base */
html, body { background: var(--bg); color: var(--ink); }

body {
  font-family: var(--serif-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "liga", "kern", "calt";
}

/* Typography — calmer Heckfield-adjacent scale.
   Moderate display sizes, relaxed tracking, italic used sparingly for accent. */
h1, h2, h3, h4 {
  font-family: var(--serif-display);
  font-weight: 300;
  letter-spacing: -0.008em;
  line-height: 1.08;
  color: var(--ink);
  text-wrap: balance;
}
.display-xl { font-size: clamp(2.2rem, 5.4vw, 4.3rem); font-weight: 300; line-height: 1.05; letter-spacing: -0.012em; text-wrap: balance; }
/* Phones: trim the display-xl + display-l floors. Atelier register
   on mobile asks for slightly smaller display sizes than the fluid
   clamp would otherwise produce — a more spare, restrained feel. */
@media (max-width: 600px) {
  .display-xl { font-size: clamp(1.7rem, 5vw, 4.3rem); }
  .display-l  { font-size: clamp(1.55rem, 4vw, 3rem); }
}
.display-l  { font-size: clamp(1.75rem, 4vw, 3rem);    font-weight: 300; line-height: 1.1;  letter-spacing: -0.008em; text-wrap: balance; }
.display-m  { font-size: clamp(1.4rem, 2.7vw, 2.05rem);font-weight: 400; line-height: 1.2;  letter-spacing: -0.005em; text-wrap: balance; }
.display-s  { font-size: clamp(1.1rem, 1.75vw, 1.4rem);font-weight: 400; line-height: 1.3;  text-wrap: balance; }

.eyebrow {
  font-family: var(--serif-body);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 400;
}
/* Phones: bump the size up a notch (11.8 → 12.8px) so the small-caps
   eyebrow doesn't drop below the atelier readability floor, and trim
   the tracking — 0.22em opens letters too wide on small font sizes
   and starts to read as gaps rather than tracking. */
@media (max-width: 540px) {
  .eyebrow { font-size: 0.8rem; letter-spacing: 0.16em; }
}

.prose p + p { margin-top: 1.2em; }
.prose {
  max-width: var(--text-max);
  /* Balances the last few lines of a paragraph so we avoid stranded single words. */
  text-wrap: pretty;
}

.lede {
  font-family: var(--serif-display);
  font-size: clamp(1.125rem, 1.8vw, 1.3rem);
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink);
  text-wrap: pretty;
}

em { font-style: italic; }

/* Links */
a.inline, .link {
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 1px;
  transition: border-color 240ms var(--ease);
}
a.inline:hover, .link:hover { border-bottom-color: var(--ink); }

.link-arrow {
  display: inline-block;
  font-family: var(--serif-display);
  font-style: italic;
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
  border-bottom: 1.5px solid var(--ink);
  padding: 0.2rem 0 0.5rem;
  transition: color 240ms var(--ease), border-color 240ms var(--ease), transform 240ms var(--ease);
}
.link-arrow:hover {
  border-bottom-color: transparent;
}
/* Tap feedback on touch devices — desktop covers this with hover. */
.link-arrow:active,
.movement-link:active,
.program-link:active,
.header-cta:active,
.footer-contact a:active,
.footer-legal a:active {
  opacity: 0.6;
}

/* Layout */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--page-pad);
}
.narrow { max-width: 720px; margin-inline: auto; }
.medium { max-width: 920px; margin-inline: auto; }

/* ---------- Header (fixed) ----------
   Persistent across scroll. Left: nav toggle (icon + label).
   Right: wordmark. Default: transparent over content.
   On scroll: subtle cream backdrop with blur.
   When open: full-screen overlay with large serif menu items. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: transparent;
  transition: background 360ms var(--ease);
}
.site-header.is-scrolled {
  background: rgba(244, 239, 226, 0.84);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}

/* Chapter pages overlay the masthead onto a full-bleed chapter-hero
   image. Without a permanent backdrop, dark-ink wordmark + nav-toggle
   text disappear against bright patches in the photo (e.g. sky on Jeju).
   The class is applied in HTML on chapter pages only, and is ignored by
   the scroll handler so it persists at all scroll positions. */
.site-header.is-overlay {
  background: rgba(244, 239, 226, 0.84);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}

/* Scroll-collapse: the header shrinks to a slim bar and the descriptor
   (row 2) retracts. Heckfield Place register — the masthead breathes at
   rest and condenses once the page is in motion. Menu and Reserve span
   both rows so they stay visually centered as row 2 disappears. */
.site-header.is-scrolled .header-inner {
  padding-top: clamp(0.9rem, 1.6vh, 1.15rem);
  padding-bottom: clamp(0.9rem, 1.6vh, 1.15rem);
  row-gap: 0;
}
.site-header.is-scrolled .wordmark-sub {
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}
.site-header.is-scrolled .wordmark-sub::before {
  opacity: 0;
}

/* Drawer open — collapse the header to its slim form regardless of scroll
   position. Without this, opening the drawer on the hero (where the header
   is in its tall .is-transparent state) leaves the close button sitting
   ~80px from the top, where it overlaps the drawer's first nav item. The
   .header-inner already has a padding transition, so the collapse is
   smooth rather than a jump. */
body.nav-open .site-header .header-inner {
  padding-top: clamp(0.9rem, 1.6vh, 1.15rem);
  padding-bottom: clamp(0.9rem, 1.6vh, 1.15rem);
  row-gap: 0;
}
body.nav-open .site-header .wordmark-sub {
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}
body.nav-open .site-header .wordmark-sub::before {
  opacity: 0;
}

/* Inverted state: home hero (over dark image) */
.site-header.is-transparent .wordmark,
.site-header.is-transparent .nav-toggle,
.site-header.is-transparent .header-cta { color: var(--bg); }
.site-header.is-transparent .nav-toggle-icon span { background: var(--bg); }
.site-header.is-transparent .wordmark-sub {
  color: rgba(248, 244, 232, 0.78);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}
.site-header.is-transparent .wordmark-sub::before {
  background: rgba(248, 244, 232, 0.42);
}

/* Two-row masthead (Heckfield / Azuma register).
   Row 1: toggle · wordmark · Reserve CTA — the utility/brand line.
   Row 2: descriptor — its own strip, full-width, centered. The sentence
   gets breathing room instead of being crammed under the wordmark, and the
   flanking elements sit cleanly at the wordmark line (no floating above a
   stacked brandmark).
   HTML keeps the existing `<div class="brandmark">` wrapper; we use
   `display: contents` so its children become direct grid items and we can
   place them in separate grid areas. */
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    "toggle wordmark cta"
    "toggle sub      cta";
  align-items: center;
  padding: clamp(2.2rem, 4.6vh, 3.2rem) var(--page-pad) clamp(1.7rem, 3.4vh, 2.4rem);
  row-gap: clamp(1.2rem, 2.4vh, 1.7rem);
  column-gap: 1rem;
  max-width: 100%;
  margin: 0 auto;
  transition: padding 420ms var(--ease), row-gap 420ms var(--ease);
}
.header-inner > .nav-toggle  { grid-area: toggle; justify-self: start; }
.header-inner > .header-cta  { grid-area: cta; justify-self: end; }

/* Brandmark wrapper — pass-through. The wordmark and descriptor lay out as
   direct grid items of .header-inner, positioned via grid-area below. */
.header-inner > .brandmark { display: contents; }
.brandmark > .wordmark     { grid-area: wordmark; justify-self: center; text-align: center; }
.brandmark > .wordmark-sub { grid-area: sub; justify-self: center; text-align: center; }

.wordmark {
  font-family: var(--serif-display);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink);
  position: relative;
  z-index: 60;
  line-height: 1;
}

/* Wordmark descriptor — small lowercase editorial line in its own row strip.
   Body serif (different register from display wordmark), lowercase (via CSS
   transform so HTML stays properly cased for SR/SEO), light tracking. Hidden
   on mobile — 62 chars doesn't fit the narrow chrome; phones rely on hero
   and scroll for context.
   Preceded by a short centered hairline (::before) as a formal editorial
   divider between wordmark and descriptor — book chapter separator register. */
.wordmark-sub {
  font-family: var(--serif-body);
  font-size: clamp(0.72rem, 0.92vw, 0.82rem);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: lowercase;
  color: var(--ink-soft);
  line-height: 1.4;
  white-space: nowrap;
  /* overflow + max-height allows a clean collapse on scroll without
     reflowing surrounding grid items abruptly */
  overflow: hidden;
  max-height: 4rem;
  transform-origin: top center;
  transition:
    color 360ms var(--ease),
    max-height 420ms var(--ease),
    opacity 320ms var(--ease),
    transform 420ms var(--ease);
}
.wordmark-sub::before {
  content: "";
  display: block;
  width: clamp(5rem, 8.5vw, 7rem);
  height: 1px;
  margin: 0 auto 0.7rem;
  background: var(--hairline);
  transition: background 360ms var(--ease), opacity 320ms var(--ease);
}

/* Reserve call-to-action on the right of the header.
   A quiet pill enclosure — thin hairline border, generous horizontal
   padding, mixed-case body serif. Register-matched to the Azuma Farms
   "Book Your Stay" treatment: the border does the structural work of a
   button without the loudness of a filled CTA. */
.header-cta {
  font-family: var(--serif-body);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  padding: 0.55rem 1.2rem;
  border: 1px solid rgba(43, 38, 29, 0.35);
  border-radius: 999px;
  transition: color 220ms var(--ease), border-color 220ms var(--ease), background 220ms var(--ease);
  white-space: nowrap;
  line-height: 1;
}
.header-cta:hover { border-color: var(--ink); }
.site-header.is-transparent .header-cta { border-color: rgba(244, 239, 226, 0.5); }
.site-header.is-transparent .header-cta:hover {
  color: rgba(248, 244, 232, 0.85);
  border-color: rgba(248, 244, 232, 0.85);
}
body.nav-open .header-cta,
body.nav-open .site-header.is-transparent .header-cta { color: var(--ink); border-color: rgba(43, 38, 29, 0.35); }

/* Nav toggle (left) — icon + "Menu" label.
   The ::before overlay extends the tap area to ≥44×44px without
   changing the button's visual metrics. */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 4px 0;
  font-family: var(--serif-body);
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
  z-index: 60;
  line-height: 1;
}
.nav-toggle::before {
  content: "";
  position: absolute;
  inset: -15px -12px;
  /* Invisible hit-slop. No visual, no hover effect. */
}
.nav-toggle-icon {
  width: 22px;
  height: 14px;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.nav-toggle-icon span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ink);
  transition: top 320ms var(--ease), transform 320ms var(--ease), opacity 220ms var(--ease), background 360ms var(--ease);
}
.nav-toggle-icon span:nth-child(1) { top: 2px; }
.nav-toggle-icon span:nth-child(2) { top: 7px; }
.nav-toggle-icon span:nth-child(3) { top: 12px; }

/* Open state: icon morphs to X. Toggle sits above drawer cream → ink.
   Wordmark sits above dimmed backdrop → light ivory for contrast. */
/* Force ink color on the toggle even when the header is .is-transparent
   (hero page). The earlier .site-header.is-transparent rule has equal
   specificity, so we raise ours by including .site-header. */
body.nav-open .site-header .nav-toggle-icon span,
body.nav-open .site-header.is-transparent .nav-toggle-icon span { background: var(--ink); }
body.nav-open .nav-toggle-icon span:nth-child(1) { top: 7px; transform: rotate(45deg); }
body.nav-open .nav-toggle-icon span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle-icon span:nth-child(3) { top: 7px; transform: rotate(-45deg); }
body.nav-open .nav-toggle,
body.nav-open .site-header.is-transparent .nav-toggle { color: var(--ink); }
body.nav-open .wordmark { color: var(--bg); }
body.nav-open .wordmark-sub { color: rgba(244, 239, 226, 0.7); }
body.nav-open .wordmark-sub::before { background: rgba(244, 239, 226, 0.4); }
body.nav-open .site-header { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

.nav-toggle-label { display: inline-block; }

/* Backdrop — dims the rest of the page while drawer is open */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 54;
  background: rgba(26, 22, 18, 0.38);
  opacity: 0;
  visibility: hidden;
  transition: opacity 480ms var(--ease), visibility 480ms var(--ease);
  cursor: pointer;
}
.nav-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

/* Left drawer nav */
.primary-nav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(420px, 92vw);
  z-index: 55;
  background: var(--bg);
  /* Top padding holds a safety gap below the close button in every header
     state. The collapsed-on-open header sits ≈15px + button height (~40px),
     so 7rem (~112px) leaves a clean ~50px breathing space before the first
     nav item — no overlap, no crowded close. */
  padding: 7rem 2.6rem 2.6rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  transform: translateX(-100%);
  transition: transform 520ms var(--ease), box-shadow 320ms ease;
  box-shadow: 0 0 60px rgba(26, 22, 18, 0.12);
  overflow-y: auto;
}
.primary-nav.is-open {
  transform: translateX(0);
}

/* When the second drawer extends from the primary, drop the primary's
   right-edge shadow — otherwise it lays a faint dark stripe across
   the second panel where the two meet. The second drawer carries the
   panel-to-page shadow now (its own right-side directional shadow). */
body.has-second-drawer .primary-nav {
  box-shadow: none;
}

/* Drawer close button — clearly visible, top-right inside drawer */
.primary-nav a {
  font-family: var(--serif-display);
  font-size: 1.7rem;
  font-weight: 300;
  letter-spacing: 0.002em;
  color: var(--ink);
  line-height: 1.3;
  padding: 0.85rem 0;
  transition: color 220ms var(--ease), padding-left 360ms var(--ease);
  display: block;
}
.primary-nav a:hover { color: var(--ink-soft); padding-left: 0.35rem; }
.primary-nav a.is-current {
  font-style: italic;
  color: var(--ink);
  position: relative;
  padding-left: 0.85rem;
}
.primary-nav a.is-current::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 1.6rem;
  background: var(--ink);
}

/* Body scroll lock while drawer is open */
body.nav-open { overflow: hidden; }

@media (max-width: 780px) {
  /* Collapse 2-row masthead back to a single utility row on phones.
     Descriptor is hidden; flanking elements align with wordmark as before
     the two-row redesign. */
  .header-inner {
    grid-template-areas: "toggle wordmark cta";
    padding: 18px var(--page-pad);
    row-gap: 0;
    column-gap: 0.5rem;
  }
  .nav-toggle-label { display: none; }
  .header-cta { font-size: 0.76rem; letter-spacing: 0.03em; padding: 0.65rem 1.1rem; }
  .wordmark { font-size: 1.28rem; }
  .wordmark-sub { display: none; }
  .primary-nav { padding: 5rem 1.75rem 2rem; }
  .primary-nav a { font-size: 1.45rem; padding: 0.75rem 0; }
}
/* Ultra-narrow viewports (e.g. iPhone SE 1st-gen at 320px).
   Tighten inner gutters and chrome so the 3-column header
   never overflows. */
@media (max-width: 380px) {
  .header-inner { gap: 0.35rem; padding: 16px 1rem; }
  .header-cta { font-size: 0.72rem; letter-spacing: 0.03em; padding: 0.4rem 0.8rem; }
  .wordmark { font-size: 1.15rem; }
  .header-inner > * { min-width: 0; }
}

/* ---------- Hero (Home) ---------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 720px;
  max-height: 980px;
  overflow: hidden;
  background: var(--overlay);
  color: var(--bg);
}
/* Phones: drop the 720px desktop min so small devices (iPhone SE)
   don't get a hero taller than the viewport. 75vh leaves a sliver
   of what follows visible as a scroll cue. */
@media (max-width: 600px) {
  .hero {
    min-height: 0;
    height: 75vh;
  }
}
/* (Brand opening line moved to the masthead descriptor; hero image
   stands alone, with .statement immediately below as the page h1.) */

.hero-image {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.74) saturate(0.92);
}
/* Functional vignette only — for text legibility, not decoration. */
.hero-image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,26,23,0.38) 0%, rgba(26,26,23,0) 35%, rgba(26,26,23,0) 58%, rgba(26,26,23,0.58) 100%);
}
/* ---------- Page hero (interior pages) ---------- */
/* Top padding accounts for the taller two-row masthead (up to ~124px) plus
   editorial breathing room below it. */
.page-hero {
  /* Top retains the masthead-clearance amount; bottom uses the global
     section-vpad so the distance from page-hero text to the next
     section's first text matches every other section boundary.
     No bottom hairline — when the next section shares the same bg
     (about / philosophy / inquiry / colophon / how-it-works) the line
     would create a visible boundary that text below sits flush
     against; without it the gap reads as a clean breath. Chapter
     pages with a tinted page-hero get their visual boundary from
     the colour change itself. */
  padding: clamp(9rem, 19vh, 12.5rem) 0 var(--section-vpad);
}
/* Plain page-hero that opens a page (no chapter image above) gets a
   minimum height and flex centring so the H1+lede sit visually
   balanced, not pinned to the top of the masthead-clearance band. */
main > .page-hero:first-child {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Phones: trim the masthead-clearance top padding and the first-
   child min-height so body content arrives sooner. Atelier register
   asks for less whitespace below the lede on mobile — the page-hero
   shouldn't take more than ~40vh on a phone. */
@media (max-width: 780px) {
  .page-hero { padding: clamp(5rem, 10vh, 7.5rem) 0 var(--section-vpad); }
  main > .page-hero:first-child { min-height: 38vh; }
}
/* Chapter pages place a 21/9 image above the page-hero — when the
   page-hero scrolls into view, the masthead is no longer occupying
   that vertical band, so the full masthead-clearance amount becomes
   excess space. Reduce to the standard section-vpad rhythm. */
.chapter-hero + .page-hero {
  padding-top: clamp(5rem, 12vh, 8rem);
}
/* Modifier — when the page-hero is followed by an in-page module
   (e.g. a timeline strip on the Journey hub) and the hairline between
   would over-divide the reading flow. */
.page-hero--no-border { border-bottom: none; }
.page-hero .eyebrow { margin-bottom: 1.2rem; display: inline-block; }
.page-hero h1 { margin-bottom: 1.4rem; }
.page-hero .lede { color: var(--ink-soft); margin-top: 1.8rem; }

/* ---------- Section blocks ---------- */
.section {
  padding: var(--section-vpad) 0;
}
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* ---------- About: two-col held/not-held ---------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
}
@media (max-width: 780px) {
  .two-col { grid-template-columns: 1fr; gap: 2.5rem; }
}
.plain-list {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 0;
}
.plain-list li {
  padding: 1.1rem 0;
  border-top: 1px solid var(--hairline);
  color: var(--ink-soft);
  font-family: var(--serif-body);
  font-size: 1rem;
  line-height: 1.55;
}
.plain-list li:last-child { border-bottom: 1px solid var(--hairline); }

/* ---------- About: letter passage ---------- */
.passage.letter {
  /* Framed letter panel — a warm ground that reads as the host's voice,
     held apart from the surrounding ivory so the signature lands. */
  background: var(--dancheong-red-wash);
  padding: clamp(3rem, 7vh, 5rem) clamp(2rem, 6vw, 4rem);
  border-bottom: none;
}
.passage.letter .prose p:first-of-type { font-style: italic; }
.passage.letter .prose .sig {
  font-style: normal;
  color: var(--ink-soft);
  margin-top: 1.5rem;
  font-family: var(--serif-body);
}

/* Statement carries the page h1 as the SECOND declaration on the home
   page, sitting after the opening prose and before The Foundation. Top
   padding is moderate (the prose above already supplies bottom breath),
   bottom padding spaces it from the next section. */
.statement {
  text-align: center;
  padding: var(--section-vpad) 0;
}
/* Same-background section pairs (no colour change, no border, no
   visual boundary between them) collapse the second section's top
   padding so the visible gap stays equal to one section-vpad — the
   same distance the eye reads between any text and a colour-
   boundary elsewhere on the page.

   Sections that DO have a boundary marker (a different background
   colour, the .next-chapter hairline, a tinted page-hero) keep their
   full top padding so the text inside has room to breathe below
   the boundary. */
.statement + .opening-prose,
.page-hero + .section,
.page-hero + .journey-overview,
.section + .section,
.journey-overview + .section {
  padding-top: 0;
}
/* Restore full top padding when the next section IS itself a colour
   change or a bordered transition — these need breathing room below
   their own visible boundary. */
.page-hero--seoul + .section,
.page-hero--temple + .section,
.page-hero--jeju + .section,
.page-hero--retreat-village + .section,
.page-hero--retreat-activities + .section,
.section + .evidence-section,
.section + .triad {
  padding-top: var(--section-vpad);
}
.statement h1 {
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.012em;
  max-width: 900px;
  margin: 0 auto;
  font-style: italic;
  font-family: var(--serif-display);
  text-wrap: balance;
  /* Ink, not branded red — italic carries the register without color
     shouting. The display-l class on the element supplies size. */
  color: var(--ink);
}
/* ---------- Opening prose (home) ----------
   Editorial reading column immediately under the statement. Paired with the
   statement above via asymmetric padding — the two sections read as a single
   extended thought, not two independent declarations. */
.opening-prose {
  padding: var(--section-vpad) 0;
}
.opening-prose-wrap {
  max-width: 58ch;
  margin: 0 auto;
}
.opening-prose p {
  font-family: var(--serif-body);
  font-size: clamp(0.95rem, 1.25vw, 1.08rem);
  line-height: 1.78;
  color: var(--ink);
  text-wrap: pretty;
  margin: 0;
}
.opening-prose p + p {
  margin-top: 1.2em;
}

/* ---------- Home — On Korea (fundamentals beat) ----------
   Sits between the editorial hook and the program cards. The brand's
   "place" claim — why this country, what's already here that the week
   leans on. Beige ground (--bg-alt) so it reads as its own moment, a
   tonal step between the ivory opening prose and the ivory programs
   section, without becoming costume. */
.on-korea-home {
  padding: var(--section-vpad) 0;
  background: var(--bg-alt);
  text-align: center;
  position: relative;
  isolation: isolate;
}
/* Paper-grain texture — a barely-there fractal noise layer that sits
   above the section's flat ground and beneath its text. Same SVG noise
   reused for .who below; together they give the editorial surfaces a
   quiet, hand-printed register without literal patterns. */
.on-korea-home::after,
.who::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.14 0 0 0 0 0.11 0 0 0 0.06 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
}
.on-korea-home .eyebrow { display: block; margin-bottom: 1.5rem; }
.on-korea-home h2 {
  margin-bottom: clamp(2rem, 4vh, 3rem);
  text-wrap: balance;
}
.on-korea-home .prose {
  max-width: 56ch;
  margin: 0 auto;
  text-wrap: pretty;
}
.on-korea-home .prose p {
  font-family: var(--serif-body);
  font-size: 0.98rem;
  line-height: 1.78;
  color: var(--ink);
  margin-bottom: 1.2em;
  text-wrap: pretty;
}
.on-korea-home .prose p:last-of-type { margin-bottom: 0; }

/* ---------- Home — Two programs cards (Journey + Retreat) ----------
   Parallel cards, side-by-side on desktop, stacked on mobile. Each card
   is one large clickable anchor wrapping figure + text. No card lift on
   hover (restraint-first); only the inline link-CTA underline fades.
   4:5 image ratio reads as a magazine spread. */
.programs {
  padding: var(--section-vpad) 0;
  background: var(--bg);
}
.programs-header {
  text-align: center;
  /* Internal spacing — header to grid. Held a touch larger than the
     editorial line-height so the cards feel like a separate movement. */
  margin-bottom: clamp(3rem, 7vh, 5rem);
}
.programs-header .eyebrow { display: block; margin-bottom: 1.6rem; }
.programs-header h2 { text-wrap: balance; }
.programs-header .lede {
  max-width: 52ch;
  margin: 1.6rem auto 0;
}

.program-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}
@media (max-width: 820px) {
  .program-grid {
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 6vh, 4rem);
  }
}

.program-card-link {
  display: block;
  color: var(--ink);
}
.program-card-link:hover .program-link {
  border-bottom-color: transparent;
}

.program-image {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--bg-deeper);
  background-size: cover;
  background-position: center;
  margin: 0 0 clamp(1.6rem, 3vh, 2.4rem);
  overflow: hidden;
}
@media (max-width: 600px) {
  .program-image { aspect-ratio: 3 / 4; }
}

.program-text {
  padding: 0 clamp(0.5rem, 1.5vw, 1.5rem);
}

.program-eyebrow {
  font-family: var(--serif-body);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 1.2rem;
}

.program-title {
  font-family: var(--serif-display);
  font-weight: 300;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.1;
  margin-bottom: 1.4rem;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.program-title em {
  display: block;
  font-style: italic;
  font-size: 0.6em;
  color: var(--ink-soft);
  margin-top: 0.45em;
  font-weight: 300;
}

.program-summary {
  font-family: var(--serif-body);
  font-size: 0.95rem;
  line-height: 1.72;
  color: var(--ink);
  margin-bottom: 1.6rem;
  text-wrap: pretty;
}
.program-summary + .program-summary { margin-top: 0; } /* defensive — single paragraph preferred */

.program-meta {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  border-top: 1px solid var(--hairline);
}
.program-meta li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--serif-body);
  font-size: 0.92rem;
  color: var(--ink);
}
.program-meta li span {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  align-self: center;
}

.program-link {
  display: inline-block;
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink);
  border-bottom: 1.5px solid var(--ink);
  padding: 0.2rem 0 0.45rem;
  transition: border-color 240ms var(--ease);
}

/* ---------- Home — Journey preview (alternating editorial rows) ---------- */
.movement {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
  padding: clamp(3.5rem, 8vh, 6rem) 0;
  border-top: 1px solid var(--hairline);
}
/* First movement follows the page-hero or .journey-overview — those
   already supply the section-vpad gap above, so the first movement
   doesn't need its own top padding or hairline. The last movement
   keeps its default padding-bottom so the space below the final
   image matches the space above it (between hairline dividers). */
.movement:first-of-type {
  border-top: none;
  padding-top: 0;
}
.movement--reverse {
  grid-template-columns: 5fr 6fr;
}
.movement--reverse .movement-image { order: 2; }
.movement--reverse .movement-text  { order: 1; }

@media (max-width: 820px) {
  .movement, .movement--reverse {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 3rem 0;
  }
  .movement--reverse .movement-image { order: 0; }
  .movement--reverse .movement-text  { order: 0; }
}

.movement-image {
  aspect-ratio: 4 / 5;
  background: var(--bg-deeper);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
@media (max-width: 820px) { .movement-image { aspect-ratio: 4 / 3; } }

.movement-text { max-width: 480px; }

.movement-number {
  font-family: var(--serif-display);
  font-weight: 300;
  font-size: clamp(3rem, 6vw, 4.6rem);
  line-height: 1;
  color: var(--ink-soft);
  opacity: 0.55;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}
.movement-eyebrow {
  font-family: var(--serif-body);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1.2rem;
}
.movement-title {
  font-family: var(--serif-display);
  font-weight: 300;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.1;
  margin-bottom: 0.2em;
}
.movement-title em {
  display: block;
  font-style: italic;
  font-size: 0.55em;
  color: var(--ink-soft);
  margin-top: 0.5em;
  font-weight: 300;
}
.movement-prose {
  margin-top: 1.6rem;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink);
  text-wrap: pretty;
}
.movement-link {
  display: inline-block;
  margin-top: 1.8rem;
  font-family: var(--serif-display);
  font-size: 1rem;
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 2px;
  transition: border-color 240ms var(--ease);
}
.movement-link:hover { border-bottom-color: var(--ink); }

/* Detail strip (collapsible) */
.detail-strip {
  /* No margin-top — the parent .section's padding (and the global
     collapse rule) already supply the gap above. Padding-top sets
     the breathing between the hairline divider and the title — kept
     generous so the title reads as settled between the line above
     and the list below, not pinned to either. */
  margin-top: 0;
  padding-top: clamp(4rem, 8vh, 5.5rem);
  border-top: 1px solid var(--hairline);
}
/* Suppress the inter-block hairline when the detail-strip sits
   directly under a full-bleed image — the image itself acts as the
   visual boundary, and an extra line on top of the title would
   double-mark the transition. */
.detail-strip--no-border {
  border-top: none;
}
.detail-list {
  margin-top: 1.5rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms var(--ease);
}

/* Static variant — chapter pages display the within-these-days list
   openly rather than behind a toggle, since each chapter now has its
   own page and the list is the page's practical close. */
.detail-strip--open .detail-list {
  max-height: none;
  overflow: visible;
  margin-top: 1.5rem;
}
.detail-strip-title {
  font-family: var(--serif-display);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  letter-spacing: 0.005em;
}
.detail-list ul { padding-top: 0.5rem; }
/* Side-by-side CTA pair (Retreat overview closing block) — two
   .passage articles sit in a .two-col grid. Override the .passage
   padding/border so each column reads as a single clean block,
   top-aligned, without the usual inter-passage rhythm. Typography
   is scaled down a step from the editorial passages above so the
   pair reads as quiet next-step indicators, not headlines. */
.cta-pair {
  align-items: start;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.cta-pair > .passage {
  padding: 0;
  border-bottom: none;
}
.cta-pair > .passage h2 {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  margin-bottom: 0.9rem;
  letter-spacing: -0.002em;
}
.cta-pair > .passage .prose p {
  font-size: clamp(0.92rem, 1.15vw, 1rem);
  line-height: 1.6;
}
.cta-pair > .passage .link-arrow {
  font-size: 0.88rem;
}
@media (max-width: 780px) {
  /* On mobile the two CTAs stack vertically and each ends with an
     underlined link-arrow that reads as a clear section close. A
     tighter desktop column gap reads as cramped row gap here. Also
     add a hairline above the pair so the smaller typography below
     reads as a deliberate 'next-step indicator' section rather than
     a downshift from the passage rhythm above. */
  .cta-pair {
    gap: clamp(2.8rem, 6vh, 4rem);
    padding-top: clamp(2rem, 4vh, 3rem);
    border-top: 1px solid var(--hairline);
  }
  /* Bump the CTA typography to close the gap with .passage above
     (24px h2 / 16.8px body). Still smaller than passages, but the
     drop is now -13% / 0% instead of -27% / -13%. */
  .cta-pair > .passage h2 { font-size: 1.3rem; }
  .cta-pair > .passage .prose p {
    font-size: 1rem;
    line-height: 1.65;
  }
}

/* Quiet italic note that sits under the detail list — for "in addition
   to these, other arrangements can be made" style asides. */
.detail-note {
  font-family: var(--serif-display);
  font-style: italic;
  color: var(--ink-soft);
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.65;
  margin: 1.8rem 0 0;
  text-wrap: pretty;
  max-width: 56ch;
}
.detail-list li {
  font-family: var(--serif-body);
  font-size: 1rem;
  padding: 0.45rem 0;
  color: var(--ink);
  position: relative;
  padding-left: 1.5rem;
}
.detail-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--ink-soft);
}

/* ---------- Philosophy passages ---------- */
.passage {
  padding: clamp(3rem, 7vh, 5rem) 0;
  border-bottom: 1px solid var(--hairline);
}
/* First/last plain passages don't need top/bottom padding — the
   containing .section already supplies var(--section-vpad). Without
   this collapse the first passage would sit 8-13rem below the
   section start (section-vpad + passage padding-top) instead of
   the standard one-unit gap. Bg-tinted passages (.letter / sage)
   are excluded because they need their internal padding to keep
   text off the coloured edge. */
.passage:first-child:not(.letter):not(.passage--sage) {
  padding-top: 0;
}
.passage:last-child:not(.letter):not(.passage--sage) {
  padding-bottom: 0;
}
.passage:last-child {
  border-bottom: none;
}
/* Drop the inter-passage hairline when an .inline-image sits
   directly after — the image itself acts as the visual boundary,
   and the line on top would double-mark the transition. */
.passage:has(+ .inline-image) {
  border-bottom: none;
}
.passage h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 300;
  margin-bottom: 1.8rem;
  color: var(--ink);
}
.passage p {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.7;
  text-wrap: pretty;
}
.passage p + p { margin-top: 1.2em; }
/* Eyebrow inside a passage — used on How it works for "Step 01", "Step 02", etc.
   Sits above the italic h2 with breathing space so the step number reads as a
   label rather than part of the heading. */
.passage > .eyebrow {
  display: block;
  margin-bottom: 1rem;
}

/* Mobile typography breathing — narrow phone screens benefit from
   slightly more air between paragraphs, a deeper gap below headings,
   and a clearer eyebrow → heading rhythm. The body of text already
   carries generous line-height (1.7+); these adjustments tune the
   structural spacing between paragraph blocks. */
@media (max-width: 780px) {
  .passage p + p { margin-top: 1.4em; }
  .passage h2 { margin-bottom: 2.2rem; }
  .passage > .eyebrow { margin-bottom: 1.3rem; }
}

/* Triad — full-bleed sage beat.
   Section is full width; inner .container handles the reading-column horizontal
   padding. This lifts the sage wash to edge-to-edge so the triad reads as a
   "major moment" rather than a centered card. */
.triad {
  text-align: center;
  padding: var(--section-vpad) 0;
  background: var(--dancheong-green-wash);
}
/* Philosophy ends with the green-wash triad. Drop the footer's
   default top margin on this page so the colour-banded section
   meets the ink footer flush — no ivory body strip between. */
body.flush-footer .site-footer {
  margin-top: 0;
}
.triad p {
  font-family: var(--serif-display);
  font-weight: 300;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.5;
  color: var(--ink);
}

/* ---------- Host page ---------- */
.host-text .role {
  font-family: var(--serif-body);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 2rem;
}
.host-text p { font-size: 1.08rem; line-height: 1.75; text-wrap: pretty; }
.host-text p + p { margin-top: 1.2em; }

.evidence {
  margin-top: clamp(3rem, 8vh, 5rem);
  padding-top: 2.5rem;
  border-top: 1px solid var(--hairline);
}
.evidence .eyebrow { margin-bottom: 1.4rem; }
.evidence-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem 2rem;
}
.evidence-list li {
  font-family: var(--serif-display);
  font-size: 1rem;
  letter-spacing: 0.02em;
  padding: 0.4rem 0;
  position: relative;
  padding-left: 1.5rem;
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
}
.evidence-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--ink-soft);
}
/* Link inside the evidence list — sits alongside the static facts
   as a clickable item, with a subtle hairline underline so it reads
   as interactive without breaking the row register. */
.evidence-link {
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 1px;
  transition: border-color 240ms var(--ease), color 240ms var(--ease);
}
.evidence-link:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* Inline link inside body prose — same hairline underline pattern. */
.inline-link {
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 1px;
  transition: border-color 240ms var(--ease);
}
.inline-link:hover {
  border-bottom-color: var(--ink);
}

/* ---------- Reserve (inquiry) ---------- */

/* Form — Heckfield register.
   Labels italic serif, quieter than the input itself.
   Fields sit on a single hairline; no borders, no fills. */
.inquiry-form { max-width: 640px; }
.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 2.4rem;
}
.field label {
  font-family: var(--serif-body);
  font-weight: 400;
  font-size: 0.92rem;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}
.field label .optional {
  color: var(--ink-soft);
  font-style: italic;
  font-size: 0.88em;
  margin-left: 0.35em;
  opacity: 0.75;
}
.field label .required {
  color: var(--ink-soft);
  font-size: 0.85em;
  margin-left: 0.15em;
  font-style: normal;
  letter-spacing: 0;
}
/* Netlify Forms honeypot — off-screen, not display:none (bots skip hidden fields). */
.hp-field {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.field input,
.field select,
.field textarea {
  font-family: var(--serif-body);
  font-size: 1.02rem;
  font-weight: 400;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline);
  padding: 0.6rem 0 0.75rem;
  outline: none;
  transition: border-color 300ms var(--ease);
  width: 100%;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
}
.field select {
  /* Chevron uses current --ink (#2B261D) rather than the old green stroke. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%232B261D' stroke-width='1'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.25rem center;
  background-size: 10px;
  padding-right: 1.5rem;
  cursor: pointer;
}
.field textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.55;
  font-family: var(--serif-body);
  font-size: 1.02rem;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-bottom-color: var(--ink); }
/* Placeholder uses the same italic register as the label. */
.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-soft);
  font-style: italic;
  opacity: 0.55;
}
.field .counter {
  font-size: 0.8rem;
  color: var(--ink-soft);
  align-self: flex-end;
  font-style: italic;
  /* Monospaced figures prevent the counter from jittering as digits change. */
  font-variant-numeric: tabular-nums;
}

.field.is-error input,
.field.is-error textarea,
.field.is-error select { border-bottom-color: var(--dancheong-red); }
.field .error-msg {
  font-size: 0.85rem;
  color: var(--dancheong-red);
  font-style: italic;
}

/* Form-level error banner — editorial tone, replaces native alert() */
.form-banner {
  margin-bottom: 2rem;
  padding: 1.1rem 1.3rem;
  background: var(--bg-alt);
  border-left: 2px solid var(--dancheong-red);
  font-family: var(--serif-body);
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink);
}
.form-banner p { margin: 0; }
.form-banner a {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
}

.form-actions {
  /* No border-top — the textarea already carries its own under-line, so a
     second hairline above the submit reads as duplication. */
  margin-top: 2.5rem;
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.btn {
  align-self: flex-start;
  font-family: var(--serif-body);
  font-size: 0.95rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid rgba(43, 38, 29, 0.35);
  border-radius: 999px;
  padding: 0.7rem 1.7rem;
  letter-spacing: 0.04em;
  line-height: 1;
  transition: color 220ms var(--ease), border-color 220ms var(--ease), background 220ms var(--ease);
}
.btn:hover { border-color: var(--ink); }

.privacy-note {
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 520px;
}

/* Thank-you / confirmation state */
.confirmation {
  padding: clamp(6rem, 16vh, 10rem) 0;
}
.confirmation .prose p { font-size: 1.05rem; line-height: 1.75; }
.confirmation .prose p + p { margin-top: 1.2em; }
.confirmation .sig {
  margin-top: 2.5rem;
  font-family: var(--serif-display);
  font-style: italic;
  color: var(--ink-soft);
}

/* Colophon */
.colophon-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 1.5rem 3rem;
}
@media (max-width: 640px) { .colophon-grid { grid-template-columns: 1fr; gap: 0.4rem; } }
.colophon-grid dt {
  font-family: var(--serif-body);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.colophon-grid dd {
  font-size: 1rem;
  color: var(--ink);
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 640px) { .colophon-grid dd { margin-bottom: 1rem; } }

/* Copyright line at the foot of the About this site page —
   moved off the global footer so the site footer stays clean. */
.colophon-copy {
  margin-top: clamp(3rem, 6vh, 4rem);
  font-family: var(--serif-body);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

/* Policy body (Privacy policy, Terms of use) — straightforward
   typographic register for legal/functional text. Numbered h2s
   act as section markers, paragraphs and lists flow underneath. */
.policy-body p {
  font-family: var(--serif-body);
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  line-height: 1.75;
  color: var(--ink);
  margin: 0;
}
.policy-body p + p {
  margin-top: 1.1em;
}
.policy-body h2 {
  font-family: var(--serif-display);
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  font-weight: 400;
  color: var(--ink);
  margin: clamp(2.5rem, 5vh, 3.5rem) 0 1.2rem;
  letter-spacing: -0.002em;
}
.policy-body ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}
.policy-body ul li {
  font-family: var(--serif-body);
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  line-height: 1.75;
  color: var(--ink);
  padding-left: 1.5rem;
  position: relative;
}
.policy-body ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--ink-soft);
}
.policy-body ul li + li {
  margin-top: 0.3rem;
}

/* ---------- Footer ----------
   Two-column band: brand block (wordmark + tagline) on the left,
   correspondence and legal links on the right. Typography is set a
   step larger than the body baseline so the footer reads as a quiet
   close, with both columns carrying equal visual weight. */
.site-footer {
  background: var(--ink-footer);
  color: #BFB5A0;
  padding: clamp(3rem, 6vh, 4.5rem) 0;
  margin-top: clamp(3rem, 7vh, 5rem);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.footer-brand {
  max-width: 580px;
}
.footer-brand .wordmark {
  font-family: var(--serif-display);
  color: var(--bg);
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  line-height: 1;
  letter-spacing: -0.005em;
  display: inline-block;
  margin-bottom: 1.4rem;
}
.footer-brand .tagline {
  font-family: var(--serif-body);
  font-style: normal;
  font-weight: 400;
  color: #BFB5A0;
  line-height: 1.7;
  font-size: clamp(0.92rem, 1.1vw, 1.02rem);
  letter-spacing: 0;
  margin: 0;
  max-width: 42ch;
  text-wrap: pretty;
}
.footer-contact,
.footer-legal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  padding-top: calc(clamp(1.6rem, 2.5vw, 2rem) + 1.5rem);
}
.footer-contact a,
.footer-legal a {
  color: #C9BEA8;
  font-family: var(--serif-body);
  font-size: clamp(0.92rem, 1.1vw, 1.02rem);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color 240ms var(--ease), color 240ms var(--ease);
}
.footer-contact a:hover,
.footer-legal a:hover {
  color: #E8DCC1;
  border-bottom-color: #8A8374;
}
.footer-bottom {
  margin-top: clamp(2.5rem, 4vh, 3rem);
  padding-top: clamp(1.4rem, 2vh, 1.8rem);
  border-top: 1px solid rgba(191, 181, 160, 0.18);
  font-family: var(--serif-body);
  font-size: clamp(0.82rem, 0.9vw, 0.88rem);
  color: #8A8374;
  letter-spacing: 0.08em;
}

@media (max-width: 780px) {
  /* On mobile the contact and legal blocks stack with the brand,
     but we want a single uniform 0.8rem rhythm between all four
     links (email, Instagram, Privacy policy, Terms of use). Set
     the grid gap to 0 and re-establish spacing explicitly:
     a generous gap below brand, a tight 0.8rem above legal. */
  .footer-grid { grid-template-columns: 1fr; gap: 0; }
  .footer-brand { margin-bottom: 2.5rem; }
  .footer-contact,
  .footer-legal { padding-top: 0; }
  .footer-legal { margin-top: 0.8rem; }
}

/* ---------- Mobile: drawer-open header behavior ----------
   On phones the drawer overlay covers most of the header but the
   right-edge CTA button peeks through, which reads as clutter.
   Hide it while the drawer is open. Also suppress the focus-visible
   underline on drawer links — iOS triggers it on programmatic focus
   of the first item when the drawer opens, which looks like a bug. */
@media (max-width: 780px) {
  body.nav-open .header-cta {
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms var(--ease);
  }
  .primary-nav a:focus-visible,
  .primary-nav .nav-items a:focus-visible {
    border-bottom: none !important;
    padding-bottom: 0.75rem;
  }
}

/* ---------- Utilities ---------- */
.stack > * + * { margin-top: 1.2rem; }
.divider { height: 1px; background: var(--hairline); border: 0; margin: 2rem 0; }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Skip-to-content — visually hidden until focused via keyboard.
   Screen-reader users and keyboard navigators can jump past the
   fixed header and drawer into the main content. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 0.9rem 1.4rem;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--serif-body);
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  border-bottom: 0;
  transform: translateY(-120%);
  transition: transform 200ms var(--ease);
}
.skip-link:focus-visible {
  transform: translateY(0);
  outline: none;
  border-bottom: 0 !important;
}

/* Fade in on load — respected by reduced motion */
.fade-in { opacity: 0; transform: translateY(8px); animation: fadeIn 700ms var(--ease) forwards; }
.fade-in.delay-1 { animation-delay: 120ms; }
.fade-in.delay-2 { animation-delay: 240ms; }

@keyframes fadeIn {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .fade-in { opacity: 1; transform: none; }
}

/* Focus states — hairline underline, restrained */
:focus-visible {
  outline: none;
}
a:focus-visible,
button:focus-visible {
  border-bottom: 2px solid var(--ink) !important;
  padding-bottom: 2px;
}
.nav-toggle:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 6px;
  border-bottom: 0 !important;
}
.primary-nav a:focus-visible {
  border-bottom: 1px solid currentColor !important;
  padding-bottom: 2px;
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  border-bottom-color: var(--ink);
  border-bottom-width: 2px;
}
.btn:focus-visible {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--ink);
}

/* ---------------------------------------------------------
   Editorial: pull-quote
   Inspired by Azuma Farms / Heckfield Place:
   a sparing pull-quote block for Jay's declarations.
---------------------------------------------------------- */

/* Pull-quote — Jay's declarative register.
   Top/bottom sage hairlines, generous vertical rhythm,
   centered italic display type. Deploy sparingly. */
.pull-quote {
  font-family: var(--serif-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.55rem, 3vw, 2.3rem);
  line-height: 1.35;
  letter-spacing: -0.005em;
  text-align: center;
  text-wrap: balance;
  color: var(--ink);
  max-width: 720px;
  /* Generous outer margin so the quote sits with breathing room
     between the hairline of the passage above and the next passage
     below — reads as a settled moment, not pinned to the line. */
  margin: clamp(3rem, 7vh, 5rem) auto;
  padding: clamp(1rem, 2vh, 1.5rem) 1rem;
}
/* Phones: push the pull-quote larger so it reads as a moment, not
   like body italic. Extra vertical margin frames the quote with
   more empty space on either side. */
@media (max-width: 600px) {
  .pull-quote {
    font-size: clamp(1.75rem, 5.5vw, 2.3rem);
    line-height: 1.3;
    margin: clamp(3.5rem, 8vh, 5.5rem) auto;
  }
}
/* About-page pull-quote sits alone in its own .section--flush-top
   .section--flush-bottom wrapper. Both sides need exactly the same
   amount of empty ivory before the next visual marker — the
   previous section's padding-bottom supplies it above, so we
   restore the next section's padding-top (overriding the global
   collapse rule) to supply the same amount below. Pull-quote keeps
   no outer margin in this configuration so it doesn't add to either
   side. */
.section--flush-top.section--flush-bottom .pull-quote {
  margin: 0 auto;
}
.section--flush-top.section--flush-bottom + .section {
  padding-top: var(--section-vpad);
}

/* When pull-quote is the only child of its container (retreat
   overview "By the third day…" — sits in its own narrow section,
   not nested inside passages), drop its outer margin so the
   surrounding section paddings alone supply the rhythm. Otherwise
   the doubled spacing reads as a hole. */
.container > .pull-quote:only-child {
  margin: 0 auto;
}

/* Philosophy: when pull-quote follows the green-wash .passage--sage,
   the colour edge above sits very close to the quote while the plain
   .passage below contributes its own padding-top to the bottom gap.
   Use asymmetric margins so the visible distance from colour edge
   above and from next-passage text below both land near ~5-7rem. */
.passage--sage + .pull-quote {
  margin: clamp(4rem, 8vh, 5.5rem) auto clamp(1rem, 2vh, 1.5rem);
}

/* And the surrounding sections themselves also collapse their
   adjacent paddings to a single tight beat (~2-3rem) — without
   this, the default section-vpad on each side would still leave
   ~6-9.5rem of empty space, which reads as a wide pause rather
   than the quiet interstitial the quote is meant to be. */
.section:has(> .container > .pull-quote:only-child) {
  padding: 0;
}
.section:has(+ .section:has(> .container > .pull-quote:only-child)) {
  padding-bottom: clamp(1rem, 2vh, 1.5rem);
}
.section:has(> .container > .pull-quote:only-child) + .section {
  padding-top: clamp(2rem, 4vh, 3rem);
}
/* When the pull-quote section opens the content area (preceded by
   .page-hero rather than another .section), .page-hero keeps its
   own section-vpad padding-bottom inside its tinted ground — we
   can't reach in there. Instead, give the pull-quote section its
   own padding-top so the gap of neutral --bg above the quote
   matches the side below it. The bump (3-4rem) sits a step above
   the inter-section default so the village page reads with a
   touch more breathing between page-hero and the lead pull-quote
   than the inline retreat-overview pattern. The matching rule
   below restores symmetry on the bottom side. */
.page-hero + .section:has(> .container > .pull-quote:only-child) {
  padding-top: clamp(3rem, 5.5vh, 4rem);
}
.page-hero + .section:has(> .container > .pull-quote:only-child) + .section {
  padding-top: clamp(3rem, 5.5vh, 4rem);
}
.pull-quote p { margin: 0; }
.pull-quote p + p { margin-top: 0.6em; }
.pull-quote cite {
  display: block;
  font-family: var(--serif-body);
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 1.8rem;
}

/* ---------------------------------------------------------
   v.LOCKED additions (placement freeze)
   - Philosophy: sage-tinted On Korea passage
   - About: brick-tinted Evidence beat (no portrait)
   - Reserve: framed facts, fee section, booking, On Ojina note
   - Journey: chapter title hairline color per chapter
   - Header drawer: brand block + nav items + CTA + meta links
---------------------------------------------------------- */

/* ---------- Philosophy ---------- */
/* On Korea passage carries the sage beat. Wash background bleeds slightly
   wider than the prose column so it reads as a tonal "ground" the words
   stand on, not a card the words sit inside. Hairlines stripped — the
   color shift does the dividing. */
.passage--sage {
  background: var(--dancheong-green-wash);
  padding-top: clamp(3rem, 6vh, 4.5rem);
  padding-bottom: clamp(3rem, 6vh, 4.5rem);
  padding-left: clamp(1.5rem, 4vw, 3rem);
  padding-right: clamp(1.5rem, 4vw, 3rem);
  border-bottom: none;
  /* Top margin matches the pull-quote margin set just below this
     section — the line above On Korea sits the same distance from
     the green box as it does from the pull-quote that follows. */
  margin-top: clamp(4rem, 8vh, 5.5rem);
  margin-bottom: clamp(2rem, 4vh, 3rem);
}

/* ---------- About ---------- */
/* Evidence section — brick-toned beat at the end of the host bio.
   The brick wash echoes the home-host block (page-internal rhythm) and
   gives the Evidence list a tonal ground that lets it land as a quiet
   capstone, not a list dropped into ivory. */
.evidence-section {
  background: var(--dancheong-red-wash);
  padding-top: var(--section-vpad);
  padding-bottom: var(--section-vpad);
  margin-top: 0;
}
.evidence-section .evidence {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* ---------- Reserve — facts (framed), fee, booking, on-ojina ---------- */
/* Facts already carry the sage wash (.facts above). Add a soft sage hairline
   frame so the dl reads as a contained "card" rather than a wash that bleeds
   to its neighbors. Subtle — the frame is the same hue as the wash, one tonal
   step deeper. */
/* Fee — itemized coverage. Two lists divided by italic subheads on a
   sage-toned hairline. The structure quietly signals: here is what is
   covered; here is what is arranged separately. No marketing register,
   no promotional language. */
.fee {
  margin-bottom: clamp(3rem, 6vh, 5rem);
  max-width: 740px;
}
.fee-headline {
  font-family: var(--serif-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.2;
  margin-bottom: 0.6rem;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.fee-subline {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 clamp(2rem, 5vh, 3rem);
  max-width: 540px;
}
.fee-subhead {
  font-family: var(--serif-body);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: clamp(2.4rem, 5vh, 3rem) 0 1.2rem;
}
/* Phones: more breathing between fee sub-sections (INCLUDED, EXCLUDED,
   BOOKING & TERMS, THE RECOVERY PACKAGE) so the how-it-works page reads
   as a series of atelier reveals rather than a tightly-packed information
   table. ~42px → ~59px between sub-blocks. */
@media (max-width: 600px) {
  .fee-subhead { margin-top: clamp(3.5rem, 7vh, 4.5rem); }
}
.fee-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fee-list li {
  font-family: var(--serif-body);
  font-size: 1rem;
  line-height: 1.6;
  padding: 0.5rem 0 0.5rem 1.6rem;
  color: var(--ink);
  position: relative;
  text-wrap: pretty;
}
.fee-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0.5rem;
  color: var(--ink-soft);
}

/* Booking and postponement — quieter prose register, slightly smaller than
   chapter prose so the page hierarchy reads: hero → facts → fee → booking,
   each block a step quieter than the last. */
.booking {
  margin-bottom: clamp(3rem, 6vh, 5rem);
  max-width: 640px;
}
.booking .prose p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
}

/* On Ojina — formal scope clarification.
   Quiet bg-alt panel with sage hairline at the left edge — reads as a
   "footnote that does not whisper." Italic prose, soft ink color. */
.on-ojina {
  background: var(--bg-alt);
  padding: clamp(1.8rem, 3.5vw, 2.6rem) clamp(2rem, 4vw, 3rem);
  /* No margin-bottom — the parent .section's padding already
     supplies the gap to whatever follows; doubling here would
     create an excessive trailing space. */
  margin-bottom: 0;
  border-left: 2px solid var(--hairline);
  max-width: 720px;
}
.on-ojina .prose p:first-of-type {
  font-style: italic;
}

/* ---------- Header drawer — restructure ---------- */
/* The drawer now reads as four distinct strata, top to bottom:
     1. nav-brand     — wordmark + descriptor + hairline divider
     2. nav-items     — primary navigation
     3. nav-cta-link  — italic "Begin an inquiry →" (lower, separated by hairline)
     4. nav-meta-links — email and Instagram
   Restructured in v.LOCKED so the drawer carries brand identity and a
   prominent CTA, not just a list of links. */

.primary-nav .nav-items {
  display: flex;
  flex-direction: column;
}
.primary-nav .nav-items a {
  font-family: var(--serif-display);
  font-size: 1.7rem;
  font-weight: 300;
  letter-spacing: 0.002em;
  color: var(--ink);
  line-height: 1.3;
  padding: 0.85rem 0;
  transition: color 220ms var(--ease), padding-left 360ms var(--ease);
  display: block;
}
.primary-nav .nav-items a:hover {
  color: var(--ink-soft);
  padding-left: 0.35rem;
}
.primary-nav .nav-items a.is-current {
  font-style: italic;
  color: var(--ink);
  position: relative;
  padding-left: 0.85rem;
}
.primary-nav .nav-items a.is-current::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 1.6rem;
  background: var(--ink);
}

/* Drawer: expandable groups (Journey, Retreat) — Heckfield-style nested
   nav. Each group is a button + collapsed child list. Chevron points
   right (›) when collapsed, rotates 90° to point down when expanded.
   Only one group expands at a time (enforced in JS); opening one
   collapses the other. Children animate via max-height; visibility
   removes them from focus order while collapsed. */
.nav-group { display: block; }
.nav-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-family: var(--serif-display);
  font-size: 1.7rem;
  font-weight: 300;
  letter-spacing: 0.002em;
  color: var(--ink);
  line-height: 1.3;
  padding: 0.85rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  transition: color 220ms var(--ease), padding-left 360ms var(--ease);
}
.nav-group-toggle:hover {
  color: var(--ink-soft);
  padding-left: 0.35rem;
}
.nav-group-chevron {
  font-family: var(--serif-display);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--ink-soft);
  margin-left: 0.5rem;
  display: inline-block;
  line-height: 1;
  transition: transform 320ms var(--ease);
}
/* (chevron stays pointing right — horizontal extension means no rotation) */

/* The chevron and back-button affordances were retired — the second
   drawer is meant to read as the primary drawer simply growing
   rightward, not as a child panel with its own chrome. */
.nav-group-chevron,
.nav-group-back { display: none; }

.nav-group-children {
  /* Second-level drawer — a fixed panel that slides in from primary's
     right edge. Both group panels (Journey + Retreat) occupy the
     identical position and slide together as one extension of the
     primary drawer. Only the active group's content is opacity 1;
     the other fades to opacity 0. This produces the Heckfield
     "one drawer that grows; content swaps inside" feel:
       — slide in once, when the second drawer first opens
       — no further slide animations as the user toggles groups
       — slide out only when the primary drawer closes (one unit)
     Same background and shadow profile as primary so there is no
     visible seam between them. */
  position: fixed;
  top: 0;
  bottom: 0;
  left: min(420px, 92vw);
  width: min(380px, 80vw);
  background: var(--bg);
  /* Top padding aligns the first sub-link with 'Philosophy' on the
     left drawer (i.e. drawer-top + one link-line). */
  padding: 10.9rem 2.6rem 2.6rem;
  display: flex;
  flex-direction: column;
  z-index: 56;
  /* Directional shadow — only on the right edge so the panel meets
     the primary drawer flush on the left, reading as one unit. */
  box-shadow: 30px 0 60px -10px rgba(26, 22, 18, 0.12);

  /* Default closed state — panel is shifted left by the primary
     drawer's full width so its left edge tracks the primary's right
     edge throughout any open/close transition. This keeps the two
     panels visually attached as one unit and eliminates the faint
     vertical seam that appears when they slide at independent rates. */
  transform: translateX(calc(-1 * min(420px, 92vw)));
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  /* x: hidden so the children's translateX swap motion stays inside
     the panel; y: auto so long lists scroll within the second drawer. */
  overflow-x: hidden;
  overflow-y: auto;
  /* Closing transition matches the primary drawer's 520ms transform so
     both panels reach their resting positions at the same instant. */
  transition:
    transform 520ms var(--ease),
    visibility 0s linear 520ms,
    opacity 200ms var(--ease);
}

/* When the primary drawer is open AND any group is expanded, BOTH
   second-drawer panels slide in together (one shared movement) with
   the same easing curve and duration as the primary drawer.
   Both panels are kept at opacity 1 here so the swap is carried by
   the children animation below — not by a parent cross-fade (which
   reads as a "refresh" of the whole panel). The inactive panel sits
   behind the active one via z-index, and its bg + shadow are hidden
   so the active panel reads as the only panel on screen. */
body.nav-open.has-second-drawer .nav-group-children {
  transform: translateX(0);
  visibility: visible;
  opacity: 1;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  transition:
    transform 520ms var(--ease),
    visibility 0s linear 0s,
    opacity 220ms var(--ease);
}

/* The active group: bg + shadow restored, on top via z-index, and
   interactive. Bg/shadow snap (no transition) on swap — both panels
   share the exact same bg color and position, so the user perceives
   only a single panel that never moves; the children animation does
   all of the visible work. */
body.nav-open.has-second-drawer .nav-group-children.is-expanded {
  background: var(--bg);
  box-shadow: 30px 0 60px -10px rgba(26, 22, 18, 0.12);
  z-index: 57;
  pointer-events: auto;
}

/* Heckfield-style content swap: when the active group changes, the
   outgoing group's links slide quickly out to the left and clear the
   way; the incoming group's links slide in from a small left offset
   with a noticeable stagger so the text appears to settle one line at
   a time. The panel chrome (background, shadow) stays in place — only
   the text moves. */
.nav-group-children > * {
  transform: translateX(-32px);
  opacity: 0;
  /* Default (used when this group is INCOMING — slow, expressive) */
  transition:
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 280ms ease;
}
/* When this group is OUTGOING (parent is the active aside losing
   .is-expanded), the children clear out fast so they don't ghost
   under the incoming text. */
.nav-group-children:not(.is-expanded) > * {
  transition:
    transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 140ms ease;
}
.nav-group-children.is-expanded > * {
  transform: translateX(0);
  opacity: 1;
}
/* Stagger only on the INCOMING group; outgoing leaves all at once.
   nth-child(1) is the hidden .nav-group-back; visible links start at 2. */
.nav-group-children.is-expanded > *:nth-child(2) { transition-delay: 80ms; }
.nav-group-children.is-expanded > *:nth-child(3) { transition-delay: 120ms; }
.nav-group-children.is-expanded > *:nth-child(4) { transition-delay: 160ms; }
.nav-group-children.is-expanded > *:nth-child(5) { transition-delay: 200ms; }
.nav-group-children.is-expanded > *:nth-child(6) { transition-delay: 240ms; }
.nav-group-children.is-expanded > *:nth-child(7) { transition-delay: 280ms; }

/* Children links match the primary drawer's typographic register so the
   second panel reads as a continuation, not a sub-section. */
.nav-group-children a {
  font-family: var(--serif-display);
  font-size: 1.7rem;
  font-weight: 300;
  letter-spacing: 0.002em;
  color: var(--ink);
  line-height: 1.3;
  padding: 0.85rem 0;
  display: block;
  transition: color 220ms var(--ease), padding-left 360ms var(--ease);
}
.nav-group-children a:hover {
  color: var(--ink-soft);
  padding-left: 0.35rem;
}
.nav-group-children a.is-current {
  font-style: italic;
  color: var(--ink);
  position: relative;
  padding-left: 0.85rem;
}
.nav-group-children a.is-current::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 1.6rem;
  background: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .nav-group-children { transition: none; }
}

@media (max-width: 780px) {
  .nav-group-toggle { font-size: 1.45rem; padding: 0.75rem 0; }
  .nav-group-children {
    /* Cover the primary drawer entirely — no room beside it on phones */
    left: 0;
    width: min(420px, 92vw);
    /* Mobile alignment: drawer-top (5rem) + one mobile link-line. */
    padding-top: 8.4rem;
  }
  .nav-group-children a { font-size: 1.45rem; padding: 0.75rem 0; }
}

.nav-foot {
  margin-top: auto;
  padding-top: 2.5rem;
  border-top: 1px solid var(--hairline);
}
.nav-meta-links {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.nav-meta-links a {
  font-family: var(--serif-body);
  font-size: 0.88rem;
  font-style: italic;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
  border-bottom: 1px solid transparent;
  padding: 0.2rem 0;
  width: max-content;
  display: block;
  transition: color 220ms var(--ease), border-color 220ms var(--ease);
}
.nav-meta-links a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink-soft);
}

/* Mobile — tighten drawer chrome. */
@media (max-width: 780px) {
  .primary-nav .nav-items a { font-size: 1.45rem; padding: 0.75rem 0; }
  .nav-cta-link { font-size: 1.1rem; }
}

/* ==========================================================================
   Home — 5-section vertical narrative
   --------------------------------------------------------------------------
   The landing carries the brand story in one scroll: hero, statement,
   journey arc, who, reserve scope, footer. The "why" beat was removed —
   philosophy now lives only on its own page; the home leads directly
   from statement into journey, restraint-first.

   Color rhythm of the page (top → bottom):
     hero (image)
     statement + opening-prose       — ivory
     .journey-overview + movements   — ivory
     .who                            — brick wash        ← phase shift
     .reserve-scope                  — ivory
     footer                          — ink
   ========================================================================== */

/* ---------- Journey overview (header + timeline strip) ----------
   The eyebrow + h2 + small timeline strip frame the three movement
   chapters that follow. The strip stands in for the prior triad block:
   it carries the geographic arc (City · Mountain · Island) without
   demanding a full sage beat. */
.journey-overview {
  padding: var(--section-vpad) 0;
  text-align: center;
}
/* Equal rhythm: eyebrow, h2, lede, and timeline all separated by the same
   clamp() so the four elements read as one stacked header. */
.journey-overview .eyebrow { display: block; margin-bottom: clamp(1.6rem, 3vh, 2.2rem); }
.journey-overview h2 {
  margin-bottom: clamp(1.6rem, 3vh, 2.2rem);
  text-wrap: balance;
}
.journey-overview .lede {
  margin-bottom: clamp(1.6rem, 3vh, 2.2rem);
}
.journey-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
}
.timeline-stop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  min-width: 7rem;
}
.timeline-place {
  font-family: var(--serif-display);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.timeline-days {
  font-family: var(--serif-body);
  font-size: 0.82rem;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.timeline-arrow {
  font-family: var(--serif-display);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--ink-soft);
  align-self: flex-start;
  padding-top: 0.1em;
}
@media (max-width: 600px) {
  /* Stack vertically — the three stops can't fit on one row on phones,
     and the in-line arrow loses its meaning once items wrap. Stacked
     order (City → Mountain → Island) carries the sequence on its own. */
  .journey-timeline {
    flex-direction: column;
    align-items: center;
    gap: 1.8rem;
  }
  .timeline-stop { min-width: 0; }
  .timeline-arrow { display: none; }
}

/* ---------- Who (short host moment on home) ----------
   Brick wash full-bleed beat. Sibling envelope to the existing .home-host
   pattern but slightly more generous to carry the h2 + paragraph + CTA.
   The longer host bio lives on About; this is the appetizer. */
.who {
  background: var(--dancheong-red-wash);
  padding: var(--section-vpad) 0;
  position: relative;
  isolation: isolate;
}
.who .eyebrow { display: block; margin-bottom: 1.5rem; }
.who h2 {
  margin-bottom: clamp(1.5rem, 3vh, 2rem);
  text-wrap: balance;
}
.who p {
  font-family: var(--serif-body);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ink);
  max-width: 56ch;
}
.who-cta { margin-top: clamp(2rem, 4vh, 3rem); }

/* ---------- Reserve scope (program scope, no pricing) ----------
   The closing chapter of the home landing — what is included, what is
   arranged separately, when the season opens. Pricing and the inquiry
   form live on the Reserve page; the home stays scope-only by design. */
.reserve-scope {
  padding: var(--section-vpad) 0;
}
.reserve-scope .eyebrow { display: block; margin-bottom: 1.5rem; }
.reserve-scope h2 {
  margin-bottom: clamp(2rem, 4vh, 2.8rem);
  text-wrap: balance;
}
.reserve-scope p {
  font-family: var(--serif-body);
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--ink);
  max-width: 58ch;
  margin-bottom: 1.2em;
}
.reserve-scope p:last-of-type { margin-bottom: 0; }
.reserve-scope-cta { margin-top: clamp(2.5rem, 5vh, 3.5rem); }

/* ==========================================================================
   Journey chapter pages — standalone Seoul / Geumseonsa / Jeju pages
   --------------------------------------------------------------------------
   Each chapter (Seoul / Observation, Geumseonsa / Stillness, Jeju /
   Living wisdom) has its own page so the most pivotal weeks of the
   journey carry their own URL, depth, and image rhythm. The shared
   chrome below: a signature hero image at the top, a tinted page-hero
   carrying the eyebrow + h1 + lede, then the standard .passage stack
   for sub-narratives, the existing .detail-strip accordion, and a
   .next-chapter transition card at the foot.
   ========================================================================== */

/* Signature image at the very top of each chapter page. Sits above the
   masthead in z-order; the page-hero below absorbs its color shift.
   21:9 cinematic crop reads as a chapter title plate, not a blog hero —
   reference register: Heckfield / Azumi / Ranchoecuero. */
.chapter-hero {
  width: 100%;
  aspect-ratio: 21 / 9;
  background: var(--bg-deeper);
  background-size: cover;
  background-position: center;
}
@media (max-width: 760px) {
  .chapter-hero { aspect-ratio: 4 / 5; }
  /* Retreat Village photo crops awkwardly when centered on the
     tall mobile 4:5 container — anchor at top so the photo's upper
     subject stays visible. Desktop 21:9 keeps the centered crop. */
  .chapter-hero--village { background-position: center top !important; }
}

/* ---------------------------------------------------------
   Image slots — placement-ready figure containers for the
   photography library that ships later. Three patterns:

   1. .inline-image   — single image, full container width, 16:10
      cinematic ratio. The most common slot, between passages.

   2. .image-bleed    — full-bleed atmospheric image, 21:9 desktop,
      4:5 portrait on mobile. A visual breather between sections.

   3. .image-pair     — image + text grid (5:6 columns, image 4:5
      portrait). For "show, then tell" beats.

   All three set background-image inline so the real photography
   can drop in by replacing only the style="background-image: …"
   attribute. aria-label provides the alt text.
---------------------------------------------------------- */
.inline-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  background-color: var(--bg-deeper);
  background-size: cover;
  background-position: center;
  margin: clamp(2.5rem, 6vh, 4rem) 0;
}
/* Variant that shows the source image at its native aspect ratio,
   uncropped — for cases where the image's own composition should
   be preserved. Uses an inner <img> instead of background-image. */
.inline-image--natural {
  aspect-ratio: auto;
  background: none;
}
.inline-image--natural img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 760px) {
  .inline-image { aspect-ratio: 4 / 3; }
}

.image-bleed {
  width: 100%;
  aspect-ratio: 21 / 9;
  background-color: var(--bg-deeper);
  background-size: cover;
  background-position: center;
  /* No own margin — sits between sections as a visual boundary, with
     the surrounding sections' padding (var(--section-vpad)) supplying
     the breathing on each side. Doubling here would create excess. */
  margin: 0;
}
@media (max-width: 760px) {
  .image-bleed { aspect-ratio: 4 / 5; }
}

.image-pair {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  /* No default outer margin — the parent .section's padding already
     supplies the rhythm above and below. Inter-item gap between two
     adjacent image-pairs is set below. */
  margin: 0;
}
.image-pair + .image-pair {
  margin-top: clamp(3.5rem, 8vh, 6rem);
}
.image-pair-img {
  aspect-ratio: 4 / 5;
  background-color: var(--bg-deeper);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.image-pair-img > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Typography inside .image-pair-text matches the .passage register
   so an image-pair section reads in the same voice as a text-only
   passage block elsewhere on the site. */
.image-pair-text h2 {
  font-family: var(--serif-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 300;
  margin: 0 0 1.6rem;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.image-pair-text .prose p {
  font-family: var(--serif-body);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.7;
  color: var(--ink);
  text-wrap: pretty;
  margin: 0;
}
.image-pair-text .prose p + p {
  margin-top: 1.2em;
}
.image-pair--reverse { grid-template-columns: 6fr 5fr; }
.image-pair--reverse .image-pair-img { order: 2; }
.image-pair--reverse .image-pair-text { order: 1; }
@media (max-width: 820px) {
  .image-pair,
  .image-pair--reverse {
    grid-template-columns: 1fr;
    /* Once the columns stack, the desktop column gap becomes a row
       gap between text and image. Open it up so the image lands as
       a deliberate beat after the text rather than crowding it. */
    gap: clamp(3rem, 6vh, 4.5rem);
  }
  /* Below 820px the layout collapses to one column and the photo
     spans full width. Show photos at their natural aspect ratio
     instead of forcing a fixed crop — portrait photos stay tall,
     landscape photos stay wide. */
  .image-pair-img { aspect-ratio: auto; order: 2; }
  .image-pair-img > img { height: auto; }
  /* On mobile, lead with the section's text first so the reader gets
     the heading and intent before the photo. The image then lands as
     confirmation/atmosphere, not as a hook the reader has to scroll
     past to find what the section is about. Applies to both regular
     and --reverse pairs — the desktop reverse order is no longer
     relevant once the grid collapses to one column. */
  .image-pair-text { order: 1; }
  .image-pair--reverse .image-pair-img { order: 2; }
  .image-pair--reverse .image-pair-text { order: 1; }
}

/* Page-hero tints — one per chapter, mirroring the prior single-page
   Journey's chapter grounds: ivory observation → seafoam stillness →
   brick living. The .page-hero already supplies padding and bottom
   hairline; the modifier only adds the wash. */
.page-hero--seoul              { background: var(--bg-alt); }
.page-hero--temple             { background: var(--dancheong-green-wash); }
.page-hero--jeju               { background: var(--dancheong-red-wash); }
.page-hero--retreat-village    { background: var(--dancheong-red-wash); }    /* echoes Jeju ground — Ojina, the table */
.page-hero--retreat-activities { background: var(--dancheong-green-wash); }  /* sage — outdoor / forest / mountain energy */

/* Chapter h1 — italic, slightly tighter than the standard display-xl
   so the chapter title reads as a name rather than a headline. */
.chapter-title-line {
  font-style: italic;
  text-wrap: balance;
  margin-top: 1.2rem;
}
.chapter-title-line em {
  font-style: normal;
  display: block;
  font-size: 0.55em;
  color: var(--ink-soft);
  margin-top: 0.4em;
  letter-spacing: 0.01em;
}

/* ---------- How it works — Step 04 chapter links ----------
   Three stacked rows, each with the chapter number + place + subtitle.
   Editorial register — reads as a small contents page, not a row of CTAs. */
@media (max-width: 540px) {
  .chapter-links a {
    grid-template-columns: 2.6rem 1fr;
    gap: 0.8rem;
  }
  .chapter-links-sub {
    grid-column: 2;
    margin-top: 0.15rem;
  }
}

/* Transition card — quiet panel at each chapter's tail with a short
   cue line and one or two arrow links to what follows. The hairline at
   the top + ample vertical padding read as a chapter break, not a CTA. */
.next-chapter {
  border-top: 1px solid var(--hairline);
  padding: var(--section-vpad) 0;
}
.next-chapter .eyebrow {
  display: block;
  margin-bottom: 1.2rem;
}
.next-chapter-cue {
  font-family: var(--serif-display);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 300;
  line-height: 1.5;
  font-style: italic;
  color: var(--ink);
  max-width: 38ch;
  margin-bottom: 2.2rem;
  text-wrap: balance;
}
.next-chapter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.4rem;
}
@media (max-width: 600px) {
  /* Two CTAs side by side feel cramped on phones — stack vertically
     so each link gets its own line with proper breathing room. */
  .next-chapter-actions {
    flex-direction: column;
    gap: 1.4rem;
    align-items: flex-start;
  }
}