/* deploy bust: 1779913847 */
/* =========================================================================
   Zion Springs — Editorial Cinematic
   A photographic monograph. Less chrome. Photography carries.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Inter:wght@300;400;500&display=swap');

/* ---------- PAPER TEXTURE — subtle grain overlay for tactile premium feel ----------
   Fine SVG noise multiplied at low opacity across the entire viewport.
   Makes cream paper feel like actual paper instead of flat color.
   Fixed position so the grain stays as a stable layer while content scrolls. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.10 0 0 0 0 0.08 0 0 0 0 0.05 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.07;
  mix-blend-mode: multiply;
}

/* ---------- PHOTO GRADE — unified treatment across every image source ----------
   Subtle desaturation + warmth + slight contrast curve. Pulls disparate
   photo shoots into one cohesive brand library without replacing them. */
.hero-photo,
.wall-img img,
.note-photo,
.door-photo,
.article-hero-img,
.journal-card-image,
.team-portrait,
.team-member-photo,
.about-origin-photo,
.about-place-img {
  filter: saturate(0.88) sepia(0.05) contrast(0.98) brightness(0.97);
}

/* ---------- BALANCED TEXT WRAPPING ----------
   Applied across every display headline + multi-line subhead. Prevents
   single-word orphans on the last line ("most.", "other.", etc.) and lets
   the browser equalize line lengths. Body text is left alone so reading
   paragraphs flow naturally. */
.promise h1,
.promise h2,
.thesis-line,
.note-title,
.returns-title,
.returns-coda,
.why-exist-body,
.doors-title,
.framework-meta,
.voices-coda,
.team-text h2,
.closer-title,
.closer-sub,
.article-title,
.article-dek,
.article-body-inner p.lede,
.article-body-inner h2,
.article-body-inner h3,
.article-cta-title,
.journal-intro-title,
.journal-intro-sub,
.journal-card-title,
.journal-closer-text,
.about-origin-title,
.about-beliefs-title,
.about-sides-title,
.about-side-title,
.about-place-title,
.about-mission-body,
.book-intro-title,
.book-intro-sub,
.book-discovery-title,
.book-discovery-note,
.book-fallback-title,
.book-fallback-body,
.alt-path-title,
.alt-path-body,
.included-title,
.included-sub,
.schedule-title,
.why-title,
.why-card h3,
.suites-title,
.seasons-title,
.season h3,
.team-credo-line,
.team-credo-note,
.team-member-name,
.about-belief-body {
  text-wrap: balance;
}

/* ---------- TOKENS ---------- */
:root {
  /* Cream paper — brand guide value #F5F0E8. Slightly warmer than the
     original #efe7d6, photographs better with brass and sage. */
  --paper:        #F5F0E8;
  --paper-warm:   #ecdfc8;
  --paper-light:  #f8f2e6;
  --ink:          #1a140e;
  --ink-soft:     rgba(26,20,14,0.82);
  --ink-mute:     rgba(26,20,14,0.55);
  --ink-faint:    rgba(26,20,14,0.16);
  --brass:        #8a5520;
  --brass-deep:   #5a3711;
  /* Sage — brand-guide third accent, pushed deeper/more saturated so it
     reads as distinctly green against the warm brass tones. sage-deep
     matches the brand guide's Deep Forest Green for italic emphasis. */
  --sage:         #3D7250;
  --sage-deep:    #1C3A2F;
  --paper-on-dark: rgba(248,240,220,0.96);
  --paper-on-dark-soft: rgba(248,240,220,0.78);

  --max:    1240px;
  --gutter: 7%;

  /* Hero frosted-band height — matches the SVG mask (100/850 of hero height) */
  --hero-band: 11.764vh;
  --hero-band-min: 86px;
}

/* ---------- RESET ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  line-height: 1.55;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
section { position: relative; }
p { font-variation-settings: "opsz" 14; }

/* ---------- MASTHEAD NAV (floats over hero, vertically centered in top frosted band) ---------- */
.masthead-nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--hero-band);
  min-height: var(--hero-band-min);
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 60px;
  color: var(--paper-on-dark);
}
.masthead-nav .left,
.masthead-nav .right {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--paper-on-dark-soft);
}
.masthead-nav .right { text-align: right; }
.masthead-nav .center {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-variation-settings: "opsz" 144;
  font-size: 22px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
}
.masthead-nav .center a { display: inline-flex; align-items: center; }
.masthead-nav .wordmark-image {
  height: 48px;
  width: auto;
  display: block;
  filter: brightness(1.04);
}
.masthead-nav .right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
}
.masthead-nav ul { list-style: none; display: inline-flex; gap: 28px; }

/* Paper-variant nav: when a page has no dark hero photo, the nav floats over
   cream paper instead. Same anatomy, dark ink colors so it remains legible.
   Apply with class "masthead-nav on-paper" on the <nav> element.
   Also adds a hairline rule at bottom so the nav reads as part of the page,
   not just floating text. */
.masthead-nav.on-paper {
  color: var(--ink);
  border-bottom: 1px solid rgba(138, 85, 32, 0.18);
}
.masthead-nav.on-paper .left,
.masthead-nav.on-paper .right {
  color: var(--ink-mute);
}
.masthead-nav.on-paper ul a { color: var(--ink); }
.masthead-nav.on-paper ul a:hover { color: var(--brass-deep); }
.masthead-nav.on-paper .nav-toggle span { background: var(--ink); }
.masthead-nav.on-paper .wordmark-image { filter: none; }

/* Mobile hamburger toggle — hidden on desktop, visible on small screens */
.nav-toggle {
  display: none;
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--paper-on-dark);
  transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav overlay — slides in from right */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 32px 32px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(24px);
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.6,.2,1);
}
.nav-overlay.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.nav-overlay-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 48px;
  height: 48px;
  background: transparent;
  border: none;
  font-size: 32px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--ink);
  cursor: pointer;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.nav-overlay-mark {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-variation-settings: "opsz" 144;
  font-size: 18px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 56px;
}
.nav-overlay-links {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  text-align: center;
}
.nav-overlay-links li { margin-bottom: 24px; }
.nav-overlay-links a {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-variation-settings: "opsz" 144;
  font-size: clamp(34px, 9vw, 56px);
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.nav-overlay-links a:active { color: var(--brass-deep); }
.nav-overlay-cta {
  display: inline-block;
  margin: 12px 0 48px;
  padding: 18px 36px;
  background: var(--brass);
  color: var(--paper-on-dark);
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--brass);
  transition: background .25s, border-color .25s;
}
.nav-overlay-cta:active { background: var(--brass-deep); border-color: var(--brass-deep); }
.nav-overlay-foot {
  position: absolute;
  bottom: 28px;
  left: 0; right: 0;
  text-align: center;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.nav-overlay-foot a { color: inherit; text-decoration: none; }
.hero-copy-sub a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Nav links: distinguished from the masthead's editorial metadata by a brighter color,
   slightly heavier weight, and an animated brass underline on hover — so clickability is
   immediately legible without resorting to buttons or competing color. */
.masthead-nav ul a {
  position: relative;
  color: var(--paper-on-dark);
  font-weight: 500;
  letter-spacing: 0.28em;
  padding-bottom: 5px;
  transition: color .2s;
}
.masthead-nav ul a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .35s cubic-bezier(.2,.6,.2,1);
}
.masthead-nav ul a:hover { color: var(--brass); }
.masthead-nav ul a:hover::after { transform: scaleX(1); }

/* Nav CTA — small brass pill, persistent across scroll */
.masthead-nav .nav-cta {
  display: inline-block;
  padding: 10px 18px;
  background: rgba(138,85,32,0.92);
  color: var(--paper-on-dark);
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: background .2s;
}
.masthead-nav .nav-cta:hover { background: var(--brass-deep); }

/* ---------- 1. HERO — Photo only, parallax-ready ---------- */
.hero {
  position: relative;
  /* Extends 50px below the viewport. The photo bleeds into that strip,
     but every UI element (frame, cutout border, CTAs, bottom band) is
     pinned 50px up, anchored to the original viewport bottom.
     dvh prevents iOS Safari from hiding the bottom band behind the URL bar;
     vh is the fallback for older browsers. */
  min-height: calc(100vh + 50px);
  min-height: calc(100dvh + 50px);
  --hero-bleed: 50px;
  overflow: hidden;
  isolation: isolate;
}
/* Stage: handles the slow Ken Burns scale; sits where the photo used to sit. */
.hero-photo-stage {
  position: absolute;
  inset: -10% 0 -10% 0;  /* extra height for parallax travel */
  z-index: 1;
  transform-origin: center center;
  animation: hero-breath 24s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes hero-breath {
  from { transform: scale(1.0); }
  to   { transform: scale(1.045); }
}
/* Photo: handles the JS-driven parallax translate, fills its stage. */
.hero-photo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8,5,2,0.18) 0%, rgba(8,5,2,0.00) 22%, rgba(8,5,2,0.00) 65%, rgba(8,5,2,0.28) 100%),
    image-set(url('media/home-hero.avif') type('image/avif'), url('media/home-hero.webp') type('image/webp')) 42% 50%/cover;
  background-color: #1c130d;
  will-change: transform;
  transition: transform 0s linear; /* JS-driven */
}

/* ---------- HERO FROSTED FRAME (Liquid Glass) ---------- */
.hero-frame {
  position: absolute;
  /* Pinned to the original viewport rectangle — the 50px bleed below it has no frame. */
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--hero-bleed);
  z-index: 2;
  pointer-events: none;

  /* The frost: blurs the photo behind, adds a slight warm-dark tint for UI legibility.
     Background opacity reduced so the photo breathes more — the matted-print
     effect was fighting the unified photo grade. */
  backdrop-filter: blur(18px) saturate(1.2) brightness(0.96);
  -webkit-backdrop-filter: blur(18px) saturate(1.2) brightness(0.96);
  background: rgba(11,7,3,0.12);

  /* SVG mask: paints the full element, then cuts out a rounded inner window.
     viewBox proportions roughly match a wide hero; preserveAspectRatio='none'
     stretches the mask to fit any viewport. */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1500 850'><path d='M 0 0 H 1500 V 850 H 0 Z M 86 100 H 1414 a 42 42 0 0 1 42 42 V 708 a 42 42 0 0 1 -42 42 H 86 a 42 42 0 0 1 -42 -42 V 142 a 42 42 0 0 1 42 -42 Z' fill='white' fill-rule='evenodd'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1500 850'><path d='M 0 0 H 1500 V 850 H 0 Z M 86 100 H 1414 a 42 42 0 0 1 42 42 V 708 a 42 42 0 0 1 -42 42 H 86 a 42 42 0 0 1 -42 -42 V 142 a 42 42 0 0 1 42 -42 Z' fill='white' fill-rule='evenodd'/></svg>");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* Brass hairline tracing the inner cutout edge.
   Positions and corner radius are percentage-based so they match the SVG mask
   (which uses preserveAspectRatio='none') across any viewport. */
.hero-cutout-border {
  position: absolute;
  /* Anchored to the original 100vh frame, not the 50px-taller hero. */
  top: 11.7647vh;
  bottom: calc(11.7647vh + var(--hero-bleed));
  left: 2.9333%;     /* 44 / 1500 */
  right: 2.9333%;
  z-index: 3;
  pointer-events: none;
  border: 1px solid rgba(138, 85, 32, 0.32);  /* lighter brass — the matte feels less heavy */
  border-radius: 2.975% / 6.462%;  /* matches SVG corner radius of 42 */
}

/* Bottom frosted band — recognition strip on left, place mark on right, vertically centered */
.hero-bottom-band {
  position: absolute;
  /* Pinned to the original viewport bottom, sitting above the 50px image bleed. */
  bottom: var(--hero-bleed);
  left: 0; right: 0;
  height: var(--hero-band);
  min-height: var(--hero-band-min);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 60px;
  gap: 32px;
}
.hero-recognition {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--paper-on-dark-soft);
  line-height: 1.4;
  flex: 1 1 auto;
  min-width: 0;
}
.hero-recognition em {
  font: inherit;
  font-style: normal;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

/* Authority anchor — rotator.
   A hidden sizer em (the LONGEST publication name) sits in normal flow inside
   the rotator. It does three things: sizes the rotator to the widest pub,
   anchors the rotator's baseline to the parent text, and never shifts the line
   as pubs rotate. The visible ems are absolutely positioned ON TOP of the sizer
   at inset:0 — sharing the same font metrics, they share the same baseline. */
.rotator {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
}
.rotator-sizer {
  visibility: hidden;
  white-space: nowrap;
}
.rotator > em:not(.rotator-sizer) {
  position: absolute;
  inset: 0;
  white-space: nowrap;
  opacity: 0;
  text-align: inherit;
  animation: pub-rotate 20s infinite ease-in-out;
}
/* Visible pubs are the 2nd through 6th children of the rotator (after the sizer) */
.rotator > em:nth-of-type(2) { animation-delay: 0s;  }
.rotator > em:nth-of-type(3) { animation-delay: 4s;  }
.rotator > em:nth-of-type(4) { animation-delay: 8s;  }
.rotator > em:nth-of-type(5) { animation-delay: 12s; }
.rotator > em:nth-of-type(6) { animation-delay: 16s; }

@keyframes pub-rotate {
  /* 0–4% fade in, 16% start fade out, 20% invisible until next cycle. */
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  16%  { opacity: 1; }
  20%  { opacity: 0; }
  100% { opacity: 0; }
}
/* Inside the rotator, drop the lateral em margins — they were for the dotted
   list and would now skew alignment of every name. Text-align is inherited by
   the visible ems via `text-align: inherit` above, so:
   • hero recognition is left-aligned → pub sits flush after "Recognized by"
   • closer recognition is centered  → pub centers within its slot */
.hero-recognition .rotator > em,
.closer-recognition .rotator > em { margin: 0; }
.hero-mark {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--paper-on-dark-soft);
  white-space: nowrap;
  flex: 0 0 auto;
}

/* ─── Hero bottom-left shade ───────────────────────────────────────────
   A soft radial wash that darkens the bottom-left corner where the hero
   copy + CTA sit. Sits above the photo but below the cutout border /
   frame so the frosted edges aren't muddied. The gradient is heavily
   feathered so it reads as natural photo grading, not a visible shape. */
.hero-shade-bl {
  position: absolute;
  /* Cover the full hero so the gradient has no box edges to cut against.
     Previously this was a 1060x760 clamped box, which left visible hard
     edges on wide viewports where the box ended before the photo did. */
  inset: 0;
  pointer-events: none;
  z-index: 4;
  /* Stacked radial + linear gradient. The radial sizes are now relative to
     the FULL hero (not a fixed box) so the dark corner stays roughly the
     same visual size while fading out smoothly well inside the photo
     bounds. Tuned for white text legibility on bright/varied backgrounds. */
  background:
    radial-gradient(
      ellipse 62% 70% at 0% 100%,
      rgba(0, 0, 0, 0.95) 0%,
      rgba(0, 0, 0, 0.82) 22%,
      rgba(0, 0, 0, 0.60) 45%,
      rgba(0, 0, 0, 0.28) 70%,
      rgba(0, 0, 0, 0.00) 92%
    ),
    linear-gradient(
      to top right,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0.12) 32%,
      rgba(0, 0, 0, 0.00) 50%
    );
  /* Same fade-in motion as the rest of the hero. */
  opacity: 0;
  animation: hero-fade-in .85s cubic-bezier(.2,.6,.2,1) .55s forwards;
}
@media (max-width: 900px) {
  .hero-shade-bl {
    /* Mobile: shorter ellipse + linear fade from the bottom so the CTAs
       remain legible on smaller heroes without bleeding into the upper
       photo content. */
    background:
      radial-gradient(
        ellipse 110% 55% at 0% 100%,
        rgba(0, 0, 0, 0.95) 0%,
        rgba(0, 0, 0, 0.82) 26%,
        rgba(0, 0, 0, 0.60) 52%,
        rgba(0, 0, 0, 0.30) 75%,
        rgba(0, 0, 0, 0.00) 95%
      ),
      linear-gradient(
        to top,
        rgba(0, 0, 0, 0.48) 0%,
        rgba(0, 0, 0, 0.14) 36%,
        rgba(0, 0, 0, 0.00) 55%
      );
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-shade-bl { animation: none; opacity: 1; }
}

/* ─── Hero copy overlay (weddings, retreats) ──────────────────────────
   Editorial moment sitting just above the CTA in the bottom-left
   cutout. Eyebrow → italic Fraunces headline → optional sub. All set
   on paper-on-dark so it reads against the photo's darker zones. The
   max-width keeps the headline within the unfrosted cutout window. */
.hero-copy {
  position: absolute;
  /* Sit above .hero-actions which is at calc(var(--hero-band) + 30px + var(--hero-bleed)).
     The CTAs are ~50px tall, so the additional offset here = visible gap + CTA height.
     88px gives ~38px of breathing room between the sub line and the top of the CTA. */
  bottom: calc(var(--hero-band) + 30px + var(--hero-bleed) + 88px);
  left: 72px;
  max-width: 540px;
  z-index: 5;
  pointer-events: none;
}
.hero-copy-eyebrow {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--paper-on-dark-soft);
  margin-bottom: 18px;
}
.hero-copy-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--paper-on-dark);
  margin: 0;
  text-shadow: 0 2px 18px rgba(8, 5, 2, 0.32);
  text-wrap: balance;
}
.hero-copy-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--paper-on-dark);
}
.hero-copy-sub {
  margin-top: 16px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.45;
  color: var(--paper-on-dark-soft);
  text-shadow: 0 2px 14px rgba(8, 5, 2, 0.32);
  max-width: 44ch;
}

/* Same fade-in motion as the rest of the hero */
.hero-copy { opacity: 0; transform: translateY(10px); animation: hero-rise-in .85s cubic-bezier(.2,.6,.2,1) .65s forwards; }

/* Optional frosted-glass backplate behind the hero copy. Auto-sizes to the
   text via an inset-anchored ::before so it grows and shrinks with the
   typography on responsive widths — no JS, no extra DOM.

   Sits at z-index: -1 inside .hero-copy's stacking context — behind the
   text, above .hero-photo, .hero-shade-bl, .hero-frame, and the cutout
   border. The bottom-left corner uses a much larger radius (42px) that
   echoes the hero cutout border's elliptical curve, so when the panel is
   anchored in the bottom-left of the hero (as it is here) the panel
   visually nests into the hero's rounded window rather than competing
   with hard interior corners. */
/* ─── Homepage hero card ─────────────────────────────────────────────
   A single frosted-glass card anchored in the bottom-left of the rounded
   hero viewport. Wraps the headline block AND the CTA row in one panel.
   Width fits the CTA row (the natural-width child) plus uniform padding,
   so the card reads as "exactly CTA-sized + breathing room". External
   margins from the cutout border, internal padding, and the gap between
   the text and CTA blocks are all the same value (28px desktop / 20px
   mobile) so the rhythm reads as one consistent unit. */
.hero-card {
  position: absolute;
  /* External margin from the cutout border:
     - cutout left edge sits at 2.9333% from hero left → +28px puts the
       card's left edge exactly 28px inside the cutout
     - cutout bottom edge sits at calc(--hero-band + --hero-bleed) above
       hero bottom → +28px puts the card 28px above the cutout bottom */
  left: max(72px, calc(2.9333% + 28px));
  bottom: calc(var(--hero-band) + var(--hero-bleed) + 28px);
  /* Width = max-content of children = the CTA row, since the headline
     is constrained by max-width on .hero-copy below. Hard ceiling at
     the symmetric "cutout - 28px" boundary so the card never grows
     past the right cutout edge on narrow viewports. */
  width: fit-content;
  max-width: calc(100% - 2 * (2.9333% + 28px));
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  background: rgba(11, 7, 3, 0.36);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  border: 1px solid rgba(248, 240, 220, 0.18);
  border-radius: 24px;
  z-index: 5;
  box-sizing: border-box;
  /* Fade in with the rest of the hero composition. */
  opacity: 0;
  animation: hero-fade-in .85s cubic-bezier(.2,.6,.2,1) .65s forwards;
}
/* When .hero-copy lives inside .hero-card, drop the absolute positioning
   the weddings/retreats pages use and let it flow inside the card. Cap
   its width so the title wraps within roughly the CTA-row width. */
.hero-card .hero-copy {
  position: static;
  bottom: auto;
  left: auto;
  max-width: 480px;
  opacity: 1;
  transform: none;
  animation: none;
}
.hero-card .hero-copy-title {
  /* Tighter type so the headline wraps cleanly within the CTA-row width
     instead of forcing the card to expand to a 60px-font line. */
  font-size: clamp(28px, 2.6vw, 38px);
  text-wrap: balance;
}
/* Same — let .hero-actions flow inside the card. */
.hero-card .hero-actions {
  position: static;
  bottom: auto;
  left: auto;
  opacity: 1;
  transform: none;
  animation: none;
}
/* Secondary CTA on the glass card: solid paper-on-dark (cream-white)
   instead of the transparent glass treatment, so it reads as a real
   button against the frosted backplate. */
.hero-card .hero-button:not(.primary) {
  background: var(--paper-on-dark);
  border-color: var(--paper-on-dark);
  color: var(--ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hero-card .hero-button:not(.primary):hover {
  background: rgba(248, 240, 220, 0.88);
  border-color: rgba(248, 240, 220, 0.88);
  color: var(--ink);
  transform: translateY(-2px);
  letter-spacing: 0.30em;
}

@media (max-width: 900px) {
  .hero-card {
    left: 20px;
    right: 20px;
    width: auto;
    max-width: none;
    bottom: calc(var(--hero-band) + var(--hero-bleed) + 20px);
    padding: 20px;
    gap: 20px;
    border-radius: 18px;
  }
  .hero-card .hero-copy { max-width: none; }
  .hero-card .hero-copy-title { font-size: clamp(26px, 6.6vw, 32px); }
}

@media (max-width: 900px) {
  .hero-copy {
    left: 20px;
    right: 20px;
    max-width: none;
    /* Mobile CTAs stack vertically (2 buttons × ~50px + 12px gap = ~112px on the
       homepage; ~50px on weddings/retreats with one button). 152px clears the
       worst case with comfortable breathing room. */
    bottom: calc(var(--hero-band) + var(--hero-bleed) + 152px);
  }
  .hero-copy-title { font-size: clamp(28px, 8.4vw, 40px); }
  .hero-copy-sub { font-size: 15px; }
}

/* CTAs — tucked into the bottom-left of the unfrosted cutout */
.hero-actions {
  position: absolute;
  /* Add the 50px bleed to keep CTAs at their original viewport-relative position. */
  bottom: calc(var(--hero-band) + 30px + var(--hero-bleed));
  left: 72px;
  display: flex;
  gap: 12px;
  z-index: 5;
}
.hero-button {
  display: inline-block;
  padding: 17px 32px;
  border: 1px solid rgba(248,240,220,0.65);
  background: rgba(11,7,3,0.18);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  color: var(--paper-on-dark);
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  border-radius: 999px;
  transition:
    background .35s cubic-bezier(.2,.6,.2,1),
    color .35s cubic-bezier(.2,.6,.2,1),
    border-color .35s cubic-bezier(.2,.6,.2,1),
    transform .45s cubic-bezier(.2,.6,.2,1),
    box-shadow .45s cubic-bezier(.2,.6,.2,1),
    letter-spacing .35s cubic-bezier(.2,.6,.2,1);
}
.hero-button:hover {
  background: var(--paper-on-dark);
  color: var(--ink);
  border-color: var(--paper-on-dark);
  transform: translateY(-2px);
  letter-spacing: 0.30em;
}

/* Primary CTA — solid brass accent. Sage-tinted shadow on hover plants the
   button on the page rather than floating it generically. Resting box-shadow
   gives the button presence over the frosted hero frame so it doesn't wash
   out against lighter zones of the photo. */
.hero-button.primary {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--paper-on-dark);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 6px 20px rgba(11, 7, 3, 0.28);
}
.hero-button.primary:hover {
  background: var(--brass-deep);
  border-color: var(--brass-deep);
  color: var(--paper-on-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(28, 58, 47, 0.22);
  letter-spacing: 0.30em;
}
.hero .scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 44px;
  background: var(--paper-on-dark);
  opacity: 0.55;
  z-index: 5;
}

/* Composed first-paint entry. Photo paints, then the frame materializes,
   then the cutout border, then the bottom band, then the CTAs. */
.hero-frame,
.hero-cutout-border,
.hero-fade { opacity: 0; }
.hero-bottom-band,
.hero-actions { opacity: 0; transform: translateY(10px); }

.hero-frame         { animation: hero-fade-in .85s cubic-bezier(.2,.6,.2,1) .30s forwards; }
.hero-cutout-border { animation: hero-fade-in .85s cubic-bezier(.2,.6,.2,1) .45s forwards; }
.hero-fade          { animation: hero-fade-in .85s cubic-bezier(.2,.6,.2,1) .40s forwards; }
.hero-bottom-band   { animation: hero-rise-in .85s cubic-bezier(.2,.6,.2,1) .60s forwards; }
.hero-actions       { animation: hero-rise-in .85s cubic-bezier(.2,.6,.2,1) .70s forwards; }

@keyframes hero-fade-in { to { opacity: 1; } }
@keyframes hero-rise-in { to { opacity: 1; transform: translateY(0); } }

/* Image bleed fade — the bottom 50px strip where the hero photo continues past the frame.
   Treated with the same Liquid Glass as the hero frame, then dissolved into the cream paper
   of the section below using two stacked gradients:
   • a short dark-tint layer that eases the frame's warm-dark tint out within ~25% of the strip
     (so the fade meets the bottom band cleanly, without leaving a visible dark band of its own),
   • and a longer cream-paper layer that grows smoothly from transparent at the top to solid
     paper at the bottom, washing the blurred photo into the section that follows. */
.hero-fade {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: var(--hero-bleed);
  z-index: 4; /* above the photo, below the UI band/actions */
  backdrop-filter: blur(26px) saturate(1.2) brightness(1.02);
  -webkit-backdrop-filter: blur(26px) saturate(1.2) brightness(1.02);
  background:
    linear-gradient(
      to bottom,
      rgba(11, 7, 3, 0.18) 0%,
      rgba(11, 7, 3, 0) 22%
    ),
    linear-gradient(
      to bottom,
      rgba(239, 231, 214, 0) 0%,
      rgba(239, 231, 214, 0.30) 25%,
      rgba(239, 231, 214, 0.65) 55%,
      rgba(239, 231, 214, 0.92) 85%,
      var(--paper) 100%
    );
  pointer-events: none;
}

/* ---------- 2. THESIS ---------- */
/* ---------- Ornament — sage transition mark, threading the relationship
   accent across every section break per the brand guide. ---------- */
.ornament {
  text-align: center;
  background: var(--paper);
  padding: 96px var(--gutter) 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  color: var(--sage);
  line-height: 1;
  opacity: 0.85;
}

/* Subtle infinite scale breath on every brass ornament — the brand mark always alive */
@keyframes ornament-breath {
  from { transform: scale(0.97); }
  to   { transform: scale(1.00); }
}
.ornament > *,
.framework-ornament,
.doors-ornament,
.voices-ornament,
.closer-ornament {
  display: inline-block;
  transform-origin: center center;
  animation: ornament-breath 5s ease-in-out infinite alternate;
  will-change: transform;
}

.thesis {
  padding: 144px var(--gutter) 96px;
  background: var(--paper);
  text-align: center;
}
/* Rotator: grid-stack so the container sizes to the tallest line, and all
   lines occupy the same cell. JS toggles .active every 7s.
   Width tuned so the longest tagline ("A sanctuary for gathering,
   celebration, and renewal.") wraps to 2–3 balanced lines. */
.thesis-rotator {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  padding: 0 var(--gutter);
}
.thesis-line {
  grid-area: 1 / 1;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(36px, 5vw, 80px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
  text-wrap: balance;
}
.thesis-line.active {
  opacity: 1;
  pointer-events: auto;
}
.thesis-line em {
  font-style: italic;
  font-weight: 300;
  color: var(--sage-deep);
}

/* ---------- 2b. WALL — Staggered editorial strip (companion to the section above) ---------- */
.wall {
  padding: 32px var(--gutter) 64px;
  background: var(--paper);
  overflow: hidden; /* contain stagger overflow so it never bleeds into adjacent sections */
}
.wall-row {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
  align-items: stretch;
}
.wall-img {
  position: relative;
  width: 100%;
  background-color: #3a2e1c;
  border: 1px solid var(--brass);
  border-radius: 14px;
  margin: 0;
  overflow: hidden;
  /* Subtle lift — adds a faint shadow under each card so they don't feel
     pasted flat onto the paper. Easier to read against cream backgrounds. */
  box-shadow: 0 6px 28px rgba(11, 7, 3, 0.06);
  /* Initial state: offset further down + invisible. .wall.in flips both. */
  opacity: 0;
  transform: translateY(calc(var(--stagger-y, 0px) + 40px));
  transition:
    opacity .9s cubic-bezier(.2,.6,.2,1),
    transform .9s cubic-bezier(.2,.6,.2,1);
  will-change: opacity, transform;
}
.wall.in .wall-img {
  opacity: 1;
  transform: translateY(var(--stagger-y, 0px));
}
/* Padding-top hack for an ironclad 4:5 aspect (5/4 = 125%). Works everywhere. */
.wall-img::before {
  content: "";
  display: block;
  padding-top: 125%;
}
.wall-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Stagger offsets live as custom properties so the reveal cascade and the static
   composition can coexist on the same transform. */
.wall-img-1 { --stagger-y: -28px; }
.wall-img-2 { --stagger-y:  20px; }
.wall-img-3 { --stagger-y: -14px; }
.wall-img-4 { --stagger-y:  28px; }
.wall-img-5 { --stagger-y: -20px; }

/* Second wall: inverted stagger so the two walls feel like a matched pair, not a repeat */
.wall--two .wall-img-1 { --stagger-y:  22px; }
.wall--two .wall-img-2 { --stagger-y: -26px; }
.wall--two .wall-img-3 { --stagger-y:  14px; }
.wall--two .wall-img-4 { --stagger-y: -22px; }
.wall--two .wall-img-5 { --stagger-y:  26px; }

/* Per-image left-to-right cascade delays */
.wall .wall-img-1 { transition-delay: 0ms; }
.wall .wall-img-2 { transition-delay: 90ms; }
.wall .wall-img-3 { transition-delay: 180ms; }
.wall .wall-img-4 { transition-delay: 270ms; }
.wall .wall-img-5 { transition-delay: 360ms; }

/* Two-row variant — one cohesive 10-image gallery. The second row picks up
   the cascade where the first left off, so the whole thing reads as one
   continuous motion, not two separate strips. */
.wall--two-rows .wall-row--second {
  /* Vertical gap matches the horizontal column gap (22px) so the two rows
     read as one cohesive grid. The stagger then causes adjacent images to
     overlap or interlock — they sit on top of each other rather than as
     two separate strips. */
  margin-top: 22px;
}
.wall--two-rows .wall-row--second .wall-img-1 { transition-delay: 450ms; }
.wall--two-rows .wall-row--second .wall-img-2 { transition-delay: 540ms; }
.wall--two-rows .wall-row--second .wall-img-3 { transition-delay: 630ms; }
.wall--two-rows .wall-row--second .wall-img-4 { transition-delay: 720ms; }
.wall--two-rows .wall-row--second .wall-img-5 { transition-delay: 810ms; }
@media (max-width: 900px) {
  /* On mobile both rows collapse into a single 10-image column. Match the
     16px gap that already exists between images within a row — keeps the
     whole gallery reading as one continuous flow. */
  .wall--two-rows .wall-row--second { margin-top: 16px; }
}

/* ---------- 3. PROMISE ---------- */
.promise {
  padding: 128px var(--gutter);
  background: var(--paper);
  text-align: center;
}
.promise h1,
.promise h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-variation-settings: "opsz" 96;
  text-wrap: balance;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1.12;
  letter-spacing: -0.022em;
  max-width: 22ch;
  margin: 0 auto;
  color: var(--ink);
}
.promise h1 em,
.promise h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--sage-deep);
}
.promise-place {
  margin-top: 32px;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---------- 4. NOTE — Image + sensory paragraph ---------- */
.note {
  padding: 128px var(--gutter);
  background: var(--paper);
}
.note-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  gap: 80px;
  align-items: center;
}
.note-photo {
  aspect-ratio: 1/1;
  background: url('media/home-note.webp') center/cover;
  background-color: #3a2e1c;
  border: 1px solid var(--brass);
  border-radius: 14px;
  box-shadow: 0 6px 28px rgba(11, 7, 3, 0.06);
}
.note-text { padding-right: 0; }
.note-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-variation-settings: "opsz" 96;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 28px;
  max-width: 18ch;
}
.note-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--brass-deep);
}
.note-eyebrow {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 28px;
}
.note-text p {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.note-text p:last-child { margin-bottom: 0; }

/* ---------- 4a. WHY WE EXIST — Brand-guide tertiary message rendered as a
   quiet typographic moment. Smaller than the Thesis (which is the loudest
   moment), but holding the page's deepest claim. Sage emphasis on "presence". */
.why-exist {
  padding: 128px var(--gutter);
  background: var(--paper);
  text-align: center;
  /* Sage hairlines (deeper than brass at 0.18) give the section a quiet
     visual break from the Returns above and Two Paths below. Threads the
     relationship accent at the structural level. */
  border-top: 1px solid rgba(61, 114, 80, 0.32);
  border-bottom: 1px solid rgba(61, 114, 80, 0.32);
}
.why-exist-inner {
  max-width: 760px;
  margin: 0 auto;
}
.why-exist-eyebrow {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 24px;
}
.why-exist-ornament {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  color: var(--sage);
  opacity: 0.8;
  margin-bottom: 28px;
}
.why-exist-body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.why-exist-body em {
  font-style: italic;
  font-weight: 400;
  color: var(--sage-deep);
}

/* ---------- 4b. RETURNS — A typographic-only editorial moment that names
   what togetherness looks like in practice. Cream paper, centered, the page's
   quietest section. Same eyebrow → ornament → display headline → body anatomy
   as other editorial moments, but with a centered italic list at the heart
   and a hairline-bound coda below. */
.returns {
  padding: 128px var(--gutter);
  background: var(--paper);
  text-align: center;
}
.returns-inner {
  max-width: 760px;
  margin: 0 auto;
}
.returns-eyebrow {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 28px;
}
.returns-ornament {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  color: var(--sage);
  opacity: 0.75;
  margin-bottom: 24px;
}
.returns-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-variation-settings: "opsz" 96;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0 0 56px;
}
.returns-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--sage-deep);
}
.returns-list {
  list-style: none;
  padding: 0;
  margin: 0 auto 64px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-style: italic;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 2;
  letter-spacing: -0.012em;
  color: var(--ink-soft);
  max-width: 640px;
}
.returns-list li {
  position: relative;
  padding: 4px 0;
}
.returns-coda {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 auto;
  padding-top: 32px;
  border-top: 1px solid rgba(138, 85, 32, 0.30);
  max-width: 520px;
}
.returns-coda em {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sage-deep);
  margin-left: 6px;
}

/* ---------- 5. DOORS — Photo-led offerings ---------- */
.doors {
  padding: 112px var(--gutter);
  background: var(--paper);
}
.doors-head {
  max-width: var(--max);
  margin: 0 auto 56px;
  text-align: center;
}
.doors-eyebrow {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 28px;
}
.doors-ornament {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  color: var(--sage);
  line-height: 1;
  margin-bottom: 36px;
  opacity: 0.85;
}
.doors-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}
.doors-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--sage-deep);
}
.doors-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
/* Two-paths variant: two equal columns, tighter aspect ratio so the section
   doesn't dominate the scroll. Each card still carries more weight than
   the three-door version. */
.doors--two .doors-grid {
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 1040px;
}
.doors--two .door-photo {
  aspect-ratio: 3/4;
}
.doors--two .door-text {
  padding-top: 22px;
}
.doors--two .door-text h3 {
  font-size: 30px;
  margin-bottom: 12px;
}
.doors--two .door-text p {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  max-width: 38ch;
  margin-bottom: 14px;
}
/* Small-caps eyebrow above each door title — names the brand-guide intent
   ("Launching" / "Strengthening") without leading with marketing language. */
.door-eyebrow {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 12px;
}
.door {
  display: block;
  color: inherit;
  position: relative;
}
.door-photo {
  aspect-ratio: 3/4;
  background-size: cover;
  background-position: center;
  background-color: #3a2e1c;
  border: 1px solid var(--brass);
  border-radius: 14px;
  overflow: hidden;
  transition:
    transform .8s cubic-bezier(.2,.6,.2,1),
    filter .45s ease;
}
.door:hover .door-photo {
  transform: scale(1.04);
  filter: brightness(0.92);
}
.door-weddings { background-image: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.18) 100%), url('media/home-door-weddings.webp'); }
.door-retreats { background-image: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.18) 100%), url('media/home-door-retreats.webp'); }
.door-stays    { background-image: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.18) 100%), url('media/home-door-stays.webp'); }
/* Lodging-page room chooser (interim imagery — Austin may swap for dedicated room shots) */
.door-barn-rooms   { background-image: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.18) 100%), url('media/gallery-03-barn-exterior.webp'); }
.door-manor-suites { background-image: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.18) 100%), url('media/gallery-05-suites-bedroom.webp'); }
.door-text {
  padding: 24px 4px 4px;
}
.door-text h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-variation-settings: "opsz" 96;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin-bottom: 10px;
  transition: color .25s ease;
}
.door-text h3::after {
  content: '↗';
  display: inline-block;
  margin-left: 14px;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 22px;
  color: var(--brass);
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity .35s ease,
    transform .4s cubic-bezier(.2,.6,.2,1);
}
.door:hover .door-text h3 { color: var(--brass-deep); }
.door:hover .door-text h3::after { opacity: 1; transform: translateX(0); }
.door-text p {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 16px;
  max-width: 30ch;
}
.door-price {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
}

/* ---------- 6. FRAMEWORK — Editorial brand mark on cream paper ---------- */
.framework {
  position: relative;
  padding: 144px var(--gutter) 96px;
  background: var(--paper);
  color: var(--ink);
  text-align: center;
}
.framework-inner {
  max-width: 760px;
  margin: 0 auto;
}
.framework-label {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 36px;
}
.framework-ornament {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  color: var(--sage);
  line-height: 1;
  margin-bottom: 44px;
  opacity: 0.85;
}
.framework-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(56px, 8vw, 128px);
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0;
}
.framework-stack span {
  display: block;
  /* Cascade reveal: each line rises in with a 120ms stagger */
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .85s cubic-bezier(.2,.6,.2,1),
    transform .85s cubic-bezier(.2,.6,.2,1);
}
.framework.in .framework-stack span { opacity: 1; transform: translateY(0); }
.framework.in .framework-stack span:nth-child(1) { transition-delay: 100ms; }
.framework.in .framework-stack span:nth-child(2) { transition-delay: 220ms; }
.framework.in .framework-stack span:nth-child(3) { transition-delay: 340ms; }
.framework.in .framework-stack span:nth-child(4) { transition-delay: 460ms; }

.framework-stack em {
  font-style: italic;
  font-weight: 300;
  color: var(--sage-deep);
}
.framework-rule {
  width: 1px;
  height: 64px;
  margin: 56px auto 32px;
  background: var(--brass);
  opacity: 0.55;
  /* Brass hairline draws in from the top after the four Ones land */
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .9s cubic-bezier(.2,.6,.2,1);
}
.framework.in .framework-rule {
  transform: scaleY(1);
  transition-delay: 620ms;
}
.framework-meta {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 22px);
  color: var(--ink-soft);
  margin-bottom: 36px;
}
.framework-meta em {
  font-style: italic;
  font-weight: 500;
  color: var(--brass);
}
.framework-link {
  display: inline-block;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--ink-faint);
  padding-bottom: 5px;
  transition: color .2s, border-color .2s;
}
.framework-link:hover {
  color: var(--ink);
  border-color: var(--brass);
}

/* ---------- 7. VOICES — A guest-book ledger. Year · quote · couple. ---------- */
.voices {
  padding: 96px var(--gutter) 144px;
  background: var(--paper);
}
.voices-inner {
  max-width: 1040px;
  margin: 0 auto;
  text-align: center;
}
.voices-eyebrow {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 28px;
}
.voices-ornament {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  color: var(--sage);
  line-height: 1;
  margin-bottom: 64px;
  opacity: 0.85;
}

/* The ledger itself — three columns of editorial type, separated by brass hairlines */
.ledger {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  text-align: left;
  border-top: 1px solid var(--brass);
  border-top-color: rgba(138, 85, 32, 0.55);
}
.ledger-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) auto;
  gap: 48px;
  align-items: baseline;
  padding: 30px 0;
  border-bottom: 1px solid rgba(138, 85, 32, 0.22);
  /* Row-by-row cascade reveal: each entry signs itself into the guest book */
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .7s cubic-bezier(.2,.6,.2,1),
    transform .7s cubic-bezier(.2,.6,.2,1),
    background-color .35s ease;
}
.voices.in .ledger-row { opacity: 1; transform: translateY(0); }
.voices.in .ledger-row:nth-child(1) { transition-delay: 80ms; }
.voices.in .ledger-row:nth-child(2) { transition-delay: 160ms; }
.voices.in .ledger-row:nth-child(3) { transition-delay: 240ms; }
.voices.in .ledger-row:nth-child(4) { transition-delay: 320ms; }
.voices.in .ledger-row:nth-child(5) { transition-delay: 400ms; }
.voices.in .ledger-row:nth-child(6) { transition-delay: 480ms; }
.voices.in .ledger-row:nth-child(7) { transition-delay: 560ms; }
.ledger-row:hover { background-color: rgba(138, 85, 32, 0.04); }
.ledger-year {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-variation-settings: "opsz" 144;
  font-weight: 300;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--brass);
  line-height: 1;
}
.ledger-quote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-variation-settings: "opsz" 96;
  font-size: clamp(20px, 1.85vw, 26px);
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.ledger-quote em {
  font-style: italic;
  font-weight: 300;
  color: var(--brass-deep);
}
.ledger-couple {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
}

/* Closing line — turns the old stat row into a single editorial breath */
.voices-coda {
  margin-top: 72px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--ink-soft);
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity .8s cubic-bezier(.2,.6,.2,1),
    transform .8s cubic-bezier(.2,.6,.2,1);
}
.voices.in .voices-coda {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 720ms;
}
.voices-coda em {
  font-style: italic;
  font-weight: 400;
  color: var(--brass);
}

/* ---------- 8. TEAM — One portrait, tight prose ---------- */
.team {
  padding: 128px var(--gutter);
  background: var(--paper);
}
.team-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
  gap: 80px;
  align-items: center;
}
/* Left column: portrait stack. Each portrait is absolutely positioned at the
   same spot; only the .active one is visible. background-image is set inline
   per portrait so the swap is just an HTML edit. */
.team-portrait-stack {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 14px;
  overflow: hidden;
}
.team-portrait {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: #3a2e1c;
  border: 1px solid var(--brass);
  border-radius: 14px;
  /* Outgoing — drift + blur + desaturate as it fades. Snappy. */
  opacity: 0;
  transform: scale(1.035);
  filter: saturate(0.6) blur(8px);
  transition:
    opacity .15s ease-out,
    transform .25s cubic-bezier(.2,.6,.2,1),
    filter .18s ease-out;
}
.team-portrait.active {
  /* Incoming — settles + focuses + saturates. .1s delay separates from outgoing. */
  opacity: 1;
  transform: scale(1);
  filter: saturate(0.94) blur(0);
  transition:
    opacity .16s ease-in .1s,
    transform .28s cubic-bezier(.2,.6,.2,1) .08s,
    filter .18s ease-in .1s;
}

/* Subtle dark gradient overlay on each portrait, applied via ::after so the
   background-image inline style stays untouched. */
.team-portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.15) 100%);
  border-radius: 14px;
  pointer-events: none;
}
.team-eyebrow {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 20px;
}
.team-text h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-variation-settings: "opsz" 96;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin-bottom: 28px;
  max-width: 22ch;
}
.team-text h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--brass-deep);
}
.team-text p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.team-caption {
  margin-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 18px;
  border-top: 1px solid var(--ink-faint);
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.team-caption span:first-child { color: var(--ink); }
.team-caption span:last-child {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-mute);
}

/* Right column: story stack. Stories stack at the same position via grid-area,
   so the column's height is the tallest story (no layout shift as members
   rotate). Only the .active story is opaque. */
.team-story-stack {
  display: grid;
  grid-template-areas: "stack";
}
.team-story {
  grid-area: stack;
  opacity: 0;
  transition: opacity .14s ease-out;
  pointer-events: none;
}
.team-story.active {
  opacity: 1;
  pointer-events: auto;
  /* Delay matches the portrait's incoming delay so they arrive together */
  transition: opacity .16s ease-in .12s;
}
.team-story p:last-of-type { margin-bottom: 0; }

/* Prev/next nav — same outline-pill aesthetic as the closer's secondary CTA,
   smaller. Counter in italic Fraunces with the current index in brass. */
.team-nav {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  margin-top: 36px;
}
.team-nav-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(26, 20, 14, 0.30);
  background: rgba(26, 20, 14, 0.04);
  color: var(--ink);
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 16px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.team-nav-btn:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.team-nav-btn:active { transform: scale(0.96); }
.team-nav-counter {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
  min-width: 4ch;
  text-align: center;
}
.team-nav-counter em {
  font-style: italic;
  color: var(--brass-deep);
  font-weight: 500;
  font-size: 17px;
  margin-right: 2px;
}

/* ---------- 8b. DISCOVERY STRIP — Editorial sign-posts for Real Weddings,
   Gallery, FAQ. Sits between Team and Closer on the homepage so visitors
   discover the estate's deeper pages before the conversion ramp. ---------- */
.discovery {
  padding: 96px var(--gutter);
  background: var(--paper);
  border-top: 1px solid rgba(138, 85, 32, 0.18);
  text-align: center;
}
.discovery-inner {
  max-width: var(--max);
  margin: 0 auto;
}
.discovery-eyebrow {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 22px;
}
.discovery-ornament {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  color: var(--sage);
  opacity: 0.85;
  margin-bottom: 28px;
}
.discovery-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-variation-settings: "opsz" 96;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 56px;
  text-wrap: balance;
}
.discovery-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--sage-deep);
}
.discovery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(138, 85, 32, 0.30);
  border-bottom: 1px solid rgba(138, 85, 32, 0.30);
}
.discovery-card {
  display: block;
  padding: 36px 28px;
  text-decoration: none;
  color: inherit;
  border-right: 1px solid rgba(138, 85, 32, 0.18);
  transition: background-color .35s cubic-bezier(.2,.6,.2,1);
}
.discovery-card:last-child { border-right: none; }
.discovery-card:hover { background: rgba(138, 85, 32, 0.04); }
.discovery-card-label {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 14px;
}
.discovery-card-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-variation-settings: "opsz" 96;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 12px;
}
.discovery-card-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--brass-deep);
}
.discovery-card-dek {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.discovery-card-cue {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sage-deep);
  transition: letter-spacing .35s cubic-bezier(.2,.6,.2,1);
}
.discovery-card:hover .discovery-card-cue { letter-spacing: 0.32em; }

@media (max-width: 900px) {
  .discovery { padding: 72px 24px; }
  .discovery-title { font-size: clamp(24px, 7vw, 32px); margin-bottom: 36px; }
  .discovery-grid { grid-template-columns: 1fr; }
  .discovery-card { border-right: none; border-bottom: 1px solid rgba(138, 85, 32, 0.18); padding: 28px 0; }
  .discovery-card:last-child { border-bottom: none; }
}

/* ---------- 9. CLOSER — Cream paper editorial moment. Final beat of the page. ---------- */
section.closer {
  padding: 144px var(--gutter) 128px;
  background: var(--paper);
  text-align: center;
}
.closer-inner {
  max-width: 760px;
  margin: 0 auto;
}
.closer-eyebrow {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 28px;
}
.closer-ornament {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  color: var(--sage);
  line-height: 1;
  margin-bottom: 36px;
  opacity: 0.85;
}
.closer-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  text-wrap: balance;
  font-size: clamp(48px, 7vw, 112px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 24px;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}
.closer-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--sage-deep);
}
.closer-sub {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 auto;
  max-width: 36ch;
  text-wrap: balance;
}
.closer-sub em {
  font-style: italic;
  font-weight: 500;
  color: var(--sage-deep);
}
.closer-rule {
  width: 1px;
  height: 64px;
  margin: 56px auto 40px;
  background: var(--brass);
  opacity: 0.55;
}
/* CTAs — exact match to .hero-button anatomy (padding, font, pill radius, transitions).
   Color scheme is the cream-paper equivalent of the hero's dark-photo treatment:
   the primary brass pill is identical; the secondary inverts the hero's "dark frost + light
   border + light text" to "subtle ink frost + dark border + dark text" so the same visual
   relationship (transparent wash + outlined frame + opposing text) holds against either surface. */
.closer-actions {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.closer-button {
  display: inline-block;
  padding: 17px 32px;
  border: 1px solid rgba(26, 20, 14, 0.40);
  background: rgba(26, 20, 14, 0.04);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  color: var(--ink);
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  border-radius: 999px;
  transition:
    background .35s cubic-bezier(.2,.6,.2,1),
    color .35s cubic-bezier(.2,.6,.2,1),
    border-color .35s cubic-bezier(.2,.6,.2,1),
    transform .45s cubic-bezier(.2,.6,.2,1),
    box-shadow .45s cubic-bezier(.2,.6,.2,1),
    letter-spacing .35s cubic-bezier(.2,.6,.2,1);
  cursor: pointer;
}
.closer-button:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-2px);
  letter-spacing: 0.30em;
  border-color: var(--ink);
}
.closer-button.primary {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--paper-on-dark);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.closer-button.primary:hover {
  background: var(--brass-deep);
  border-color: var(--brass-deep);
  color: var(--paper-on-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(28, 58, 47, 0.22);
  letter-spacing: 0.30em;
}
.closer-recognition {
  margin-top: 72px;
  padding-top: 36px;
  border-top: 1px solid rgba(138, 85, 32, 0.22);
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1.5;
}
.closer-recognition em {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-soft);
}

/* ---------- REGULAR FOOTER (cream paper, sitelink grid + email capture) ---------- */
footer {
  padding: 96px var(--gutter) 56px;
  background: var(--paper);
  border-top: 1px solid var(--ink-faint);
}
.footer-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 80px;
}
.footer-brand .footer-wordmark {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-variation-settings: "opsz" 144;
  font-size: 18px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 14px;
}
.footer-brand p {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-mute);
  max-width: 36ch;
}
.footer-col h4 {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 400;
  margin-bottom: 16px;
}
.footer-col ul {
  list-style: none;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul a {
  color: var(--ink-soft);
  transition: color .2s;
}
.footer-col ul a:hover { color: var(--ink); }

.footer-base {
  max-width: var(--max);
  margin: 56px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--ink-faint);
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-base a {
  color: var(--ink-soft);
  transition: color .2s;
}
.footer-base a:hover { color: var(--ink); }
.footer-base-right span { margin: 0 8px; color: var(--brass); }

/* ---------- STICKY CTA (appears after hero) ----------
   Anchored bottom-LEFT so it doesn't collide with the HighLevel chat
   widget in the bottom-right corner. */
.sticky-cta {
  position: fixed;
  bottom: 24px;
  left: 24px;
  right: auto;
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .35s ease, transform .35s ease;
  /* Two pills (Retreat glassy, Vision Session brass) sit side by side */
  display: flex;
  gap: 10px;
  align-items: center;
}
.sticky-cta.shown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
/* Default sticky pill = brass, matching .hero-button.primary.
   Shared base for both variants — the glass variant overrides bg/border/color. */
.sticky-cta-btn,
.sticky-cta a {
  display: inline-block;
  padding: 16px 30px;
  border: 1px solid var(--brass);
  background: var(--brass);
  color: var(--paper-on-dark);
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  border-radius: 999px;
  transition:
    background .35s cubic-bezier(.2,.6,.2,1),
    border-color .35s cubic-bezier(.2,.6,.2,1),
    color .35s cubic-bezier(.2,.6,.2,1),
    transform .45s cubic-bezier(.2,.6,.2,1),
    box-shadow .45s cubic-bezier(.2,.6,.2,1);
  box-shadow: 0 10px 28px rgba(11, 7, 3, 0.22);
}
/* Glass variant — dark frosted pill with light text and a light hairline.
   Mirrors the default .hero-button on the hero photo, adapted so it stays
   legible when the page behind it is light cream paper rather than a photo. */
.sticky-cta-btn--glass {
  background: rgba(11, 7, 3, 0.45);
  border-color: rgba(248, 240, 220, 0.55);
  color: var(--paper-on-dark);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 10px 28px rgba(11, 7, 3, 0.18);
}
.sticky-cta-btn--glass:hover {
  background: rgba(11, 7, 3, 0.70);
  border-color: rgba(248, 240, 220, 0.80);
}
.sticky-cta-btn:hover,
.sticky-cta a:hover {
  background: var(--brass-deep);
  border-color: var(--brass-deep);
  color: var(--paper-on-dark);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(28, 58, 47, 0.28);
}

/* ---------- LOOKBOOK MODAL (email capture, low-friction) ---------- */
.lookbook-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(11,7,3,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lookbook-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.lookbook-card {
  background: var(--paper);
  max-width: 440px;
  width: 100%;
  padding: 56px 48px 48px;
  position: relative;
  text-align: left;
  transform: translateY(16px) scale(0.98);
  transition: transform .4s cubic-bezier(.2,.6,.2,1);
}
.lookbook-overlay.open .lookbook-card {
  transform: translateY(0) scale(1);
}
.lookbook-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--ink-mute);
  cursor: pointer;
  transition: color .2s;
}
.lookbook-close:hover { color: var(--ink); }
.lookbook-eyebrow {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 16px;
}
.lookbook-card h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-variation-settings: "opsz" 96;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.014em;
  color: var(--ink);
  margin-bottom: 32px;
}
.lookbook-card h3 em {
  font-style: italic;
  font-weight: 400;
  color: var(--brass-deep);
}
.lookbook-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}
.lookbook-form input[type=email] {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 15px;
  padding: 14px 16px;
  background: transparent;
  border: 1px solid var(--ink-faint);
  color: var(--ink);
  border-radius: 1px;
  outline: none;
  transition: border-color .2s;
}
.lookbook-form input[type=email]:focus {
  border-color: var(--brass);
}
.lookbook-form input[type=email]::placeholder {
  color: var(--ink-mute);
  font-style: italic;
}
.lookbook-form button {
  padding: 14px 16px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 1px;
  transition: background .2s;
}
.lookbook-form button:hover {
  background: var(--brass-deep);
  border-color: var(--brass-deep);
}
.lookbook-promise {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-mute);
}
.lookbook-sent {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-variation-settings: "opsz" 96;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.014em;
  color: var(--ink);
  margin-bottom: 16px;
}
.lookbook-sent em {
  font-style: italic;
  color: var(--brass-deep);
}
.lookbook-close-bottom {
  margin-top: 24px;
  padding: 12px 24px;
  background: transparent;
  border: 1px solid var(--ink-faint);
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 1px;
  transition: border-color .2s, color .2s;
}
.lookbook-close-bottom:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* ---------- REVEAL ANIMATIONS (Emil's atmosphere) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  transition: opacity 1s cubic-bezier(.2,.6,.2,1), transform 1s cubic-bezier(.2,.6,.2,1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ============================================================
   THE JOURNAL — editorial article system
   Index page: typographic intro + magazine-style card grid.
   Article pages: longform editorial layout with eyebrow → ornament →
   title → dek → byline, then a max-680px body column for reading.
   Shared by journal.html and all journal-*.html post pages.
   ============================================================ */

/* ---------- Journal intro (shared with all journal pages) ---------- */
.journal-intro {
  padding: 140px var(--gutter) 72px;
  background: var(--paper);
  text-align: center;
}
.journal-intro-inner {
  max-width: 820px;
  margin: 0 auto;
}
.journal-intro-eyebrow {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 28px;
}
.journal-intro-ornament {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  color: var(--sage);
  opacity: 0.75;
  margin-bottom: 24px;
}
.journal-intro-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-variation-settings: "opsz" 96;
  font-size: clamp(38px, 5.2vw, 72px);
  line-height: 1.06;
  letter-spacing: -0.024em;
  color: var(--ink);
  margin: 0 0 32px;
}
.journal-intro-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--brass-deep);
}
.journal-intro-sub {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.65;
  letter-spacing: 0;
  color: var(--ink-soft);
  max-width: 540px;
  margin: 0 auto;
}

/* ---------- Categories strip ---------- */
.journal-categories {
  padding: 24px var(--gutter) 64px;
  background: var(--paper);
  text-align: center;
}
.journal-categories-inner {
  max-width: 920px;
  margin: 0 auto;
  padding-top: 32px;
  border-top: 1px solid rgba(74, 124, 89, 0.30);
}
.journal-categories-label {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 24px;
}
.journal-categories-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-variation-settings: "opsz" 96;
  font-size: clamp(14px, 1.1vw, 16px);
  letter-spacing: -0.005em;
  color: var(--ink);
}
.journal-categories-list li {
  font-style: italic;
  color: var(--brass-deep);
}

@media (max-width: 900px) {
  .journal-categories { padding: 16px 24px 48px; }
  .journal-categories-inner { padding-top: 24px; }
  .journal-categories-list { gap: 8px 18px; font-size: 14px; }
}

/* ---------- Article grid (index page) ---------- */
.journal-grid-wrap {
  padding: 32px var(--gutter) 96px;
  background: var(--paper);
}
.journal-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px 56px;
}
.journal-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform .35s cubic-bezier(.2,.6,.2,1);
}
.journal-card:hover { transform: translateY(-4px); }
.journal-card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #3a2e1c center/cover;
  border-radius: 14px;
  border: 1px solid rgba(138, 85, 32, 0.18);
  box-shadow: 0 6px 28px rgba(11, 7, 3, 0.06);
  margin-bottom: 32px;
  transition: box-shadow .35s ease;
}
.journal-card:hover .journal-card-image {
  box-shadow: 0 12px 40px rgba(11, 7, 3, 0.10);
}
.journal-card-body { padding: 0 4px; }
.journal-card-eyebrow {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 16px;
}
.journal-card-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-variation-settings: "opsz" 96;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 16px;
}
.journal-card-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--brass-deep);
}
.journal-card-dek {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 20px;
  max-width: 52ch;
}
.journal-card-meta {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 16px;
}
.journal-card-cta {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-deep);
  border-bottom: 1px solid rgba(138, 85, 32, 0.40);
  padding-bottom: 2px;
}

/* Featured card spans full width with horizontal layout */
.journal-card--featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: center;
}
.journal-card--featured .journal-card-image {
  margin-bottom: 0;
  aspect-ratio: 5 / 4;
}
.journal-card--featured .journal-card-title {
  font-size: clamp(34px, 3.6vw, 56px);
}
.journal-card--featured .journal-card-dek {
  font-size: 19px;
}

/* ---------- Journal closer (index page) ---------- */
.journal-closer {
  padding: 64px var(--gutter) 144px;
  background: var(--paper);
  text-align: center;
  border-top: 1px solid rgba(138, 85, 32, 0.18);
}
.journal-closer-inner {
  max-width: 540px;
  margin: 0 auto;
  padding-top: 64px;
}
.journal-closer-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.journal-closer-text a {
  color: var(--brass-deep);
  text-decoration: none;
  background-image: linear-gradient(var(--sage), var(--sage));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  padding-bottom: 2px;
  transition: background-size .45s cubic-bezier(.2,.6,.2,1), color .3s ease;
}
.journal-closer-text a:hover {
  color: var(--sage-deep);
  background-size: 100% 2px;
}

/* ---------- Article page (journal-*.html) ---------- */
.article-head {
  padding: 140px var(--gutter) 56px;
  background: var(--paper);
  text-align: center;
}
.article-head-inner {
  max-width: 820px;
  margin: 0 auto;
}
.article-eyebrow {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 28px;
}
.article-ornament {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  color: var(--sage);
  opacity: 0.75;
  margin-bottom: 24px;
}
.article-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-variation-settings: "opsz" 96;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0 0 32px;
}
.article-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--brass-deep);
}
.article-dek {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--ink-soft);
  max-width: 560px;
  margin: 0 auto 40px;
}
.article-byline {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 32px;
  border-top: 1px solid rgba(138, 85, 32, 0.30);
  max-width: 440px;
  margin: 0 auto;
}

/* Article hero image — sits between head and body */
.article-hero {
  padding: 0 var(--gutter);
  background: var(--paper);
}
.article-hero-img {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  border: 1px solid rgba(138, 85, 32, 0.18);
  box-shadow: 0 8px 32px rgba(11, 7, 3, 0.08);
  background: #3a2e1c center/cover;
  display: block;
}

/* Article body — narrow, readable column */
.article-body {
  padding: 96px var(--gutter) 96px;
  background: var(--paper);
}
.article-body-inner {
  max-width: 660px;
  margin: 0 auto;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.7;
  letter-spacing: 0;
  color: var(--ink);
}
.article-body-inner p {
  margin: 0 0 24px;
}
.article-body-inner p.lede {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(22px, 1.8vw, 28px);
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin-bottom: 40px;
}
/* Drop cap — italic Fraunces in sage-deep, floated left so the lede wraps
   around it. Sets an editorial tone the moment the reader enters the piece. */
.article-body-inner p.lede::first-letter {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(64px, 6.4vw, 96px);
  line-height: 0.82;
  float: left;
  margin: 6px 14px -4px -2px;
  color: var(--sage-deep);
  letter-spacing: -0.025em;
}
.article-body-inner h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-variation-settings: "opsz" 96;
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 72px 0 24px;
}
.article-body-inner h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--brass-deep);
}
.article-body-inner h2 .num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  color: var(--brass);
  margin-right: 12px;
}
.article-body-inner h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.2;
  color: var(--brass-deep);
  margin: 48px 0 18px;
}
.article-body-inner ul, .article-body-inner ol {
  padding: 0 0 0 22px;
  margin: 0 0 32px;
}
.article-body-inner li {
  margin-bottom: 12px;
}
.article-body-inner em {
  font-style: italic;
  color: var(--brass-deep);
}
.article-body-inner strong {
  font-weight: 500;
  color: var(--ink);
}
/* Animated sage underline — draws left-to-right on hover. Adds craft and
   reinforces the sage relationship thread. */
.article-body-inner a {
  color: var(--brass-deep);
  text-decoration: none;
  background-image: linear-gradient(var(--sage), var(--sage));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  padding-bottom: 2px;
  transition: background-size .45s cubic-bezier(.2,.6,.2,1), color .3s ease;
}
.article-body-inner a:hover {
  color: var(--sage-deep);
  background-size: 100% 2px;
}

/* Article pull-quote — sets it apart from body text */
.article-body-inner blockquote {
  margin: 56px 0;
  padding: 32px 0;
  border-top: 1px solid rgba(138, 85, 32, 0.30);
  border-bottom: 1px solid rgba(138, 85, 32, 0.30);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.32;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-align: center;
}
.article-body-inner blockquote cite {
  display: block;
  margin-top: 18px;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--ink-mute);
}

/* Article CTA — editorial close, not an ad box.
   A pair of brass hairlines top and bottom, with the ornament/eyebrow/headline
   pattern and a quiet underlined call-to-action. Matches the editorial cadence
   of the rest of the site rather than introducing a foreign rounded card. */
.article-cta {
  margin: 88px 0 32px;
  padding: 56px 0 24px;
  text-align: center;
  border-top: 1px solid rgba(138, 85, 32, 0.40);
}
.article-cta-eyebrow {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 22px;
}
.article-body-inner .article-cta-title,
.article-cta .article-cta-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(22px, 2.2vw, 32px);
  color: var(--ink);
  margin: 0 auto 32px;
  line-height: 1.25;
  letter-spacing: -0.012em;
  max-width: 32ch;
  text-wrap: balance;
}
.article-cta-link {
  display: inline-block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(17px, 1.4vw, 21px);
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(var(--sage-deep), var(--sage-deep));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  padding-bottom: 4px;
  transition: background-size .45s cubic-bezier(.2,.6,.2,1), color .3s ease;
}
.article-cta-link:hover {
  color: var(--sage-deep);
  background-size: 100% 2px;
}
.article-cta-link::after {
  content: '\00a0\2192';
  color: var(--brass-deep);
  font-style: normal;
}

/* Continue reading — small editorial moment at the end of an article */
.article-continue {
  padding: 96px var(--gutter);
  background: var(--paper);
  border-top: 1px solid rgba(138, 85, 32, 0.18);
}
.article-continue-inner {
  max-width: var(--max);
  margin: 0 auto;
}
.article-continue-eyebrow {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 40px;
  text-align: center;
}
.article-continue-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}

/* ---------- MOBILE (thumb-first) ---------- */
@media (max-width: 900px) {
  body { font-size: 17px; }

  /* ── Masthead: hamburger + the three nav links stay visible (compact) ── */
  .masthead-nav { padding: 0 20px; grid-template-columns: 1fr auto 1fr; }
  .masthead-nav .right ul { display: inline-flex; gap: 14px; }
  .masthead-nav .right { gap: 14px; }
  .masthead-nav .right ul a { font-size: 10px; letter-spacing: 0.14em; }
  .nav-toggle { display: inline-flex; }
  .masthead-nav .wordmark-image { height: 36px; }
  .masthead-nav .left { font-size: 11px; letter-spacing: 0.22em; }

  /* ── Hero: redesigned for portrait viewports.
     The SVG-masked frame was built for landscape; at mobile aspect ratios its
     42-unit radius renders as a stretched oval. On mobile we drop the frame
     and cutout border entirely and use an edge-to-edge photo with a frosted
     bottom band as the only chrome. Much cleaner; more photo visible. */
  .hero {
    min-height: calc(90vh + 50px);
    min-height: calc(90dvh + 50px);
  }
  :root { --hero-band: 92px; --hero-band-min: 92px; }

  /* Kill the frame + cutout entirely — they don't work portrait */
  .hero-frame,
  .hero-cutout-border { display: none; }

  /* Strengthen the photo's own bottom gradient so the CTAs and band text
     read against any photo content. */
  .hero-photo {
    background:
      linear-gradient(180deg,
        rgba(8,5,2,0.18) 0%,
        rgba(8,5,2,0.00) 24%,
        rgba(8,5,2,0.00) 42%,
        rgba(8,5,2,0.42) 100%),
      image-set(url('media/home-hero-1200.avif') type('image/avif'), url('media/home-hero-1200.webp') type('image/webp')) 38% 50%/cover;
  }

  /* Bottom band: stronger frosted-glass treatment + brass hairline so the band
     reads as a distinct UI strip rather than blending into the photo. */
  .hero-bottom-band {
    padding: 14px 20px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    backdrop-filter: blur(26px) saturate(1.4) brightness(0.88);
    -webkit-backdrop-filter: blur(26px) saturate(1.4) brightness(0.88);
    background: rgba(11,7,3,0.42);
    border-top: 1px solid rgba(138, 85, 32, 0.7);
    box-shadow: inset 0 1px 0 rgba(248,240,220,0.06);
  }
  .hero-recognition { font-size: 11px; letter-spacing: 0.22em; line-height: 1.5; }
  .hero-recognition em { font-size: 13px; letter-spacing: 0.02em; margin: 0 2px; }
  .hero-mark { font-size: 11px; letter-spacing: 0.22em; }

  /* CTAs: above the band with breathing room — the math is now band height +
     bleed + a clear 24px gap so they never overlap. */
  .hero-actions {
    left: 20px; right: 20px;
    bottom: calc(var(--hero-band) + var(--hero-bleed) + 24px);
    flex-direction: column;
    gap: 12px;
  }
  .hero-button {
    width: 100%;
    text-align: center;
    padding: 16px 18px;
    font-size: 11px;
    letter-spacing: 0.24em;
  }

  /* ── Ornament: smaller, no padding-top jump on mobile ───────── */
  .ornament { padding: 72px 24px 0; font-size: 18px; }

  /* ── Thesis ─────────────────────────────────────────────────── */
  .thesis { padding: 96px 24px 72px; }
  .thesis-line { font-size: clamp(36px, 11vw, 64px); }

  /* ── Wall: vertical stack on mobile.
     Each image full-width and 4:3 landscape so the section doesn't eat the
     whole screen per card — especially important on the homepage's two-row
     wall which stacks to 10 images on mobile. The cascade reveal still fires
     top-to-bottom. */
  .wall { padding: 48px 20px 56px; }
  .wall-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    overflow: visible;
  }
  .wall-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    /* No stagger in single-column layout */
    --stagger-y: 0px;
  }
  /* Padding-top fallback (used where aspect-ratio isn't supported) needs to
     match the 4:3 ratio on mobile too (3 / 4 = 75%). */
  .wall-img::before { padding-top: 75%; }
  /* Reset the 5th-image grid-column / 16:9 spans from older mobile rules */
  .wall-img-5 {
    grid-column: unset;
    aspect-ratio: 4 / 3;
  }
  .wall--two .wall-img-1,
  .wall--two .wall-img-2,
  .wall--two .wall-img-3,
  .wall--two .wall-img-4,
  .wall--two .wall-img-5 { --stagger-y: 0px; }

  /* ── Promise ────────────────────────────────────────────────── */
  .promise { padding: 80px 24px; }
  .promise h1,
  .promise h2 { font-size: clamp(28px, 8.6vw, 46px); }

  /* ── Why we exist ───────────────────────────────────────────── */
  .why-exist { padding: 64px 24px; }
  .why-exist-body { font-size: clamp(20px, 5.4vw, 26px); }

  /* ── Returns ────────────────────────────────────────────────── */
  .returns { padding: 96px 24px; }
  .returns-title { font-size: clamp(28px, 9vw, 42px); margin-bottom: 40px; }
  .returns-list { font-size: clamp(18px, 5vw, 22px); line-height: 1.85; margin-bottom: 48px; }
  .returns-coda { font-size: 11px; letter-spacing: 0.22em; padding-top: 24px; }
  .returns-coda em { font-size: 14px; }

  /* ── Note ───────────────────────────────────────────────────── */
  .note { padding: 80px 24px; }
  .note-grid { grid-template-columns: 1fr; gap: 32px; }
  .note-photo { aspect-ratio: 1/1; }
  .note-title { font-size: clamp(30px, 9vw, 44px); margin-bottom: 20px; max-width: none; }
  .note-text p { font-size: 16px; }

  /* ── Doors ──────────────────────────────────────────────────── */
  .doors { padding: 72px 24px; }
  .doors-head { margin-bottom: 36px; }
  .doors-ornament { margin-bottom: 24px; font-size: 18px; }
  .doors-title { font-size: clamp(30px, 8.5vw, 48px); }
  .doors-grid { grid-template-columns: 1fr; gap: 40px; }
  .doors--two .doors-grid { grid-template-columns: 1fr; gap: 48px; }
  .doors--two .door-photo { aspect-ratio: 4/3; }
  .doors--two .door-text h3 { font-size: 28px; }
  .door-photo { aspect-ratio: 4/3; }
  .door:active .door-photo { transform: scale(1.02); filter: brightness(0.95); }
  /* Touch users can't hover — keep the arrow always visible on mobile */
  .door-text h3::after { opacity: 0.65; transform: translateX(0); }

  /* ── Framework ──────────────────────────────────────────────── */
  .framework { padding: 96px 24px 80px; }
  .framework-ornament { font-size: 18px; margin-bottom: 28px; }
  .framework-stack { font-size: clamp(44px, 16vw, 84px); gap: 4px; }
  .framework-rule { height: 48px; margin: 40px auto 24px; }
  .framework-meta { font-size: 17px; margin-bottom: 28px; }
  .framework-link { font-size: 10px; letter-spacing: 0.22em; }

  /* ── Voices ledger ──────────────────────────────────────────── */
  .voices { padding: 88px 24px 112px; }
  .voices-inner { max-width: 100%; }
  .voices-ornament { margin-bottom: 40px; font-size: 18px; }
  .ledger-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 22px 0;
  }
  .ledger-year { font-size: 17px; }
  .ledger-quote { font-size: clamp(20px, 5.6vw, 26px); margin: 4px 0 6px; line-height: 1.35; }
  .ledger-couple { font-size: 11px; letter-spacing: 0.26em; }
  .voices-coda { margin-top: 48px; font-size: clamp(18px, 5.2vw, 22px); }

  /* ── Team ───────────────────────────────────────────────────── */
  .team { padding: 88px 24px; }
  .team-inner { grid-template-columns: 1fr; gap: 36px; }
  .team-text h2 { font-size: clamp(24px, 7.4vw, 36px); }
  .team-portrait-stack { aspect-ratio: 1/1; max-height: 70vh; }

  /* ── Closer ─────────────────────────────────────────────────── */
  section.closer { padding: 96px 24px 80px; }
  .closer-eyebrow { margin-bottom: 22px; }
  .closer-ornament { margin-bottom: 28px; font-size: 18px; }
  .closer-title { font-size: clamp(44px, 14vw, 88px); }
  .closer-sub { font-size: 16px; max-width: 36ch; margin: 0 auto; }
  .closer-rule { height: 48px; margin: 40px auto 28px; }
  .closer-actions { flex-direction: column; gap: 10px; width: 100%; }
  .closer-button { width: 100%; text-align: center; padding: 16px 18px; font-size: 11px; letter-spacing: 0.24em; }
  .closer-recognition {
    margin-top: 48px;
    padding-top: 28px;
    font-size: 11px;
    letter-spacing: 0.22em;
    line-height: 1.55;
  }
  .closer-recognition em { font-size: 13px; letter-spacing: 0.02em; }

  .lookbook-card { padding: 48px 28px 36px; }
  .lookbook-card h3 { font-size: 22px; }

  /* ── Footer ─────────────────────────────────────────────────── */
  footer { padding: 64px 24px 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-base {
    margin-top: 40px;
    padding-top: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
  }
  .footer-col h4 { font-size: 11px; letter-spacing: 0.24em; }
  .footer-col ul { font-size: 11px; letter-spacing: 0.12em; }
  .footer-col ul li { margin-bottom: 12px; }

  /* ── Sticky CTA: still a floating pill — not full-width.
     Anchored bottom-LEFT (away from the HighLevel chat bubble in the
     bottom-right) with safe-area inset for iPhones with home bar. */
  .sticky-cta {
    bottom: max(20px, env(safe-area-inset-bottom));
    left: 16px;
    right: auto;
  }
  .sticky-cta a {
    display: inline-block;
    padding: 15px 22px;   /* ~44px tall — minimum thumb-friendly tap target */
    font-size: 11px;
    letter-spacing: 0.22em;
  }

  /* ── Performance/battery: idle ornament breath is invisible at this scale
     and burns frames on mobile — disable. ─────────────────────── */
  .ornament > *,
  .framework-ornament,
  .doors-ornament,
  .voices-ornament,
  .closer-ornament { animation: none; }

  /* ── Cap Ken Burns range on mobile — less travel needed on a narrower hero */
  .hero-photo-stage { animation-duration: 30s; }

  /* ── Journal ──────────────────────────────────────────────────── */
  .journal-intro { padding: 96px 24px 48px; }
  .journal-intro-title { font-size: clamp(32px, 9vw, 44px); margin-bottom: 24px; }
  .journal-intro-sub { font-size: 16px; }
  .journal-grid-wrap { padding: 24px 24px 64px; }
  .journal-grid { grid-template-columns: 1fr; gap: 56px; }
  .journal-card-image { aspect-ratio: 4 / 3; margin-bottom: 24px; }
  .journal-card-title { font-size: clamp(24px, 6.8vw, 32px); }
  .journal-card-dek { font-size: 16px; }
  .journal-card--featured { grid-template-columns: 1fr; gap: 24px; }
  .journal-card--featured .journal-card-image { aspect-ratio: 4 / 3; margin-bottom: 0; }
  .journal-card--featured .journal-card-title { font-size: clamp(28px, 8vw, 38px); }
  .journal-card--featured .journal-card-dek { font-size: 16px; }
  .journal-closer { padding: 48px 24px 96px; }
  .journal-closer-inner { padding-top: 48px; }
  .journal-closer-text { font-size: 17px; }

  /* ── Article (post page) ──────────────────────────────────────── */
  .article-head { padding: 96px 24px 40px; }
  .article-title { font-size: clamp(32px, 8.4vw, 44px); margin-bottom: 24px; }
  .article-dek { font-size: 17px; margin-bottom: 32px; }
  .article-byline { font-size: 10px; padding-top: 24px; }
  .article-hero-img { aspect-ratio: 4 / 3; border-radius: 10px; }
  .article-body { padding: 56px 24px 64px; }
  .article-body-inner { font-size: 17px; line-height: 1.7; }
  .article-body-inner p.lede { font-size: 19px; line-height: 1.5; margin-bottom: 32px; }
  .article-body-inner h2 { font-size: clamp(24px, 6.8vw, 30px); margin: 56px 0 18px; }
  .article-body-inner h3 { font-size: clamp(19px, 5.4vw, 22px); margin: 36px 0 14px; }
  .article-body-inner blockquote { font-size: clamp(20px, 5.8vw, 24px); margin: 40px 0; padding: 24px 0; }
  .article-cta { padding: 40px 0 16px; margin: 64px 0 24px; }
  .article-cta-title { font-size: clamp(20px, 6vw, 26px); }
  .article-cta-link { font-size: clamp(16px, 4.8vw, 18px); }
  .article-continue { padding: 64px 24px; }
  .article-continue-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- VERY SMALL PHONES (≤380px) ---------- */
/* Phones: drop the "Est. 2010" mark and shrink the wordmark so the three
   nav links keep fitting on one line beside the hamburger. */
@media (max-width: 600px) {
  .masthead-nav { padding: 0 14px; grid-template-columns: auto 1fr auto; }
  .masthead-nav .left { display: none; }
  .masthead-nav .center { justify-self: start; }
  .masthead-nav .wordmark-image { height: 30px; }
  .masthead-nav .right ul { gap: 10px; }
  .masthead-nav .right { gap: 10px; }
  .masthead-nav .right ul a { font-size: 9.5px; letter-spacing: 0.08em; }
}

@media (max-width: 380px) {
  .masthead-nav .wordmark-image { height: 26px; }
  .masthead-nav .right ul { gap: 8px; }
  .masthead-nav .right { gap: 8px; }
  .masthead-nav .right ul a { font-size: 9px; letter-spacing: 0.05em; }
  .hero-recognition em { font-size: 10px; }
  .ledger-quote { font-size: 18px; }
  .framework-stack { font-size: clamp(40px, 14vw, 64px); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-photo { transform: none !important; }
  .hero-photo-stage,
  .ornament > *,
  .framework-ornament,
  .doors-ornament,
  .voices-ornament,
  .closer-ornament { animation: none !important; }
  .hero-frame,
  .hero-cutout-border,
  .hero-fade,
  .hero-bottom-band,
  .hero-actions { animation: none !important; opacity: 1 !important; transform: none !important; }
  .wall-img,
  .framework-stack span,
  .framework-rule,
  .ledger-row,
  .voices-coda {
    opacity: 1 !important;
    transform: translateY(var(--stagger-y, 0px)) !important;
    transition: none !important;
  }
  .framework-rule { transform: scaleY(1) !important; }
  html { scroll-behavior: auto; }
}

/* =====================================================================
   v7 ADDITIONS - StoryBrand sections (STAKES, PLAN, CONTRAST)
   All on cream paper, same brand vocabulary as the rest of the site.
   ===================================================================== */

/* --- STAKES ------------------------------------------------------- */
.stakes {
  padding: 144px var(--gutter) 128px;
  background: var(--paper);
  border-top: 1px solid rgba(138, 85, 32, 0.18);
  text-align: center;
}
.stakes-inner {
  max-width: var(--max);
  margin: 0 auto;
}
.stakes-eyebrow {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 22px;
}
.stakes-ornament {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  color: var(--sage);
  opacity: 0.85;
  margin-bottom: 28px;
}
.stakes-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(32px, 3.8vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 auto 28px;
  text-wrap: balance;
  max-width: 22ch;
}
.stakes-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--brass-deep);
}
.stakes-lede {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 auto 80px;
  text-wrap: balance;
}
.stakes-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  text-align: left;
  border-top: 1px solid rgba(138, 85, 32, 0.30);
  border-bottom: 1px solid rgba(138, 85, 32, 0.30);
}
.stakes-card {
  padding: 56px 44px;
  border-right: 1px solid rgba(138, 85, 32, 0.18);
}
.stakes-card:last-child { border-right: none; }
.stakes-card-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 38px;
  color: var(--brass);
  line-height: 1;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}
.stakes-card-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(22px, 1.8vw, 28px);
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 18px;
  text-wrap: balance;
}
.stakes-card-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--brass-deep);
}
.stakes-card-body {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}
@media (max-width: 900px) {
  .stakes { padding: 96px 24px 80px; }
  .stakes-title { font-size: clamp(28px, 8vw, 40px); margin-bottom: 22px; }
  .stakes-lede { font-size: 16px; margin-bottom: 48px; }
  .stakes-grid { grid-template-columns: 1fr; }
  .stakes-card {
    border-right: none;
    border-bottom: 1px solid rgba(138, 85, 32, 0.18);
    padding: 40px 0;
  }
  .stakes-card:last-child { border-bottom: none; }
}

/* --- PLAN --------------------------------------------------------- */
.plan {
  padding: 144px var(--gutter) 128px;
  background: var(--paper);
  text-align: center;
}
.plan-inner {
  max-width: var(--max);
  margin: 0 auto;
}
.plan-eyebrow {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 22px;
}
.plan-ornament {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  color: var(--sage);
  opacity: 0.85;
  margin-bottom: 28px;
}
.plan-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(32px, 3.8vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 auto 84px;
  text-wrap: balance;
  max-width: 24ch;
}
.plan-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--sage-deep);
}
.plan-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  text-align: left;
}
.plan-step {
  padding: 32px 0 0;
  border-top: 1px solid rgba(138, 85, 32, 0.40);
}
.plan-step-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 56px;
  color: var(--brass);
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
}
.plan-step-meta {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-bottom: 18px;
}
.plan-step-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 16px;
  text-wrap: balance;
}
.plan-step-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--brass-deep);
}
.plan-step-body {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}
@media (max-width: 900px) {
  .plan { padding: 96px 24px 80px; }
  .plan-title { font-size: clamp(28px, 8vw, 40px); margin-bottom: 56px; }
  .plan-steps { grid-template-columns: 1fr; gap: 48px; }
  .plan-step-num { font-size: 44px; }
}

/* --- PRICING (transparent pricing block on weddings page) -------- */
.pricing {
  padding: 128px var(--gutter) 144px;
  background: var(--paper);
  border-top: 1px solid rgba(138, 85, 32, 0.18);
  text-align: center;
}
.pricing-inner {
  max-width: 760px;
  margin: 0 auto;
}
.pricing-eyebrow {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 22px;
}
.pricing-ornament {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  color: var(--sage);
  opacity: 0.85;
  margin-bottom: 28px;
}
.pricing-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 auto 36px;
  text-wrap: balance;
  max-width: 24ch;
}
.pricing-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--brass-deep);
}
.pricing-body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0 auto 24px;
}
.pricing-body em {
  font-style: normal;
  font-weight: 500;
  color: var(--brass-deep);
}
.pricing-note {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
  max-width: 52ch;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .pricing { padding: 80px 24px 96px; }
  .pricing-title { font-size: clamp(24px, 7vw, 32px); margin-bottom: 28px; }
  .pricing-body { font-size: 17px; }
}

/* --- CONTRAST ----------------------------------------------------- */
.contrast {
  padding: 144px var(--gutter) 128px;
  background: var(--paper);
  border-top: 1px solid rgba(138, 85, 32, 0.18);
  text-align: center;
}
.contrast-inner {
  max-width: var(--max);
  margin: 0 auto;
}
.contrast-eyebrow {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 22px;
}
.contrast-ornament {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  color: var(--sage);
  opacity: 0.85;
  margin-bottom: 28px;
}
.contrast-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(32px, 3.8vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 auto 84px;
  text-wrap: balance;
  max-width: 26ch;
}
.contrast-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--sage-deep);
}
.contrast-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 64px;
  align-items: start;
  text-align: left;
  max-width: 1040px;
  margin: 0 auto;
}
.contrast-col-label {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 32px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(138, 85, 32, 0.30);
}
.contrast-col--with .contrast-col-label {
  color: var(--sage-deep);
  border-bottom-color: rgba(61, 114, 80, 0.45);
}
.contrast-divider {
  background: rgba(138, 85, 32, 0.22);
  width: 1px;
  height: 100%;
  min-height: 240px;
  justify-self: center;
}
.contrast-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.contrast-list li {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.45;
  color: var(--ink-mute);
  padding: 18px 0;
  border-bottom: 1px solid rgba(138, 85, 32, 0.14);
}
.contrast-list li:last-child { border-bottom: none; }
.contrast-list--with li {
  color: var(--ink);
  font-style: italic;
  font-weight: 400;
}
@media (max-width: 900px) {
  .contrast { padding: 96px 24px 80px; }
  .contrast-title { font-size: clamp(28px, 8vw, 40px); margin-bottom: 56px; }
  .contrast-grid { grid-template-columns: 1fr; gap: 48px; }
  .contrast-divider { display: none; }
  .contrast-col-label { margin-bottom: 20px; }
  .contrast-list li { font-size: 18px; padding: 14px 0; }
}