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

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,300;1,9..144,400;1,9..144,500&family=Inter:wght@300;400;500&display=swap');

/* ---------- TOKENS ---------- */
:root {
  --paper:        #efe7d6;
  --paper-warm:   #e9dfca;
  --paper-light:  #f5edd9;
  --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;
  --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: 'Fraunces', 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', sans-serif;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--paper-on-dark-soft);
}
.masthead-nav .right { text-align: right; }
.masthead-nav .center {
  font-family: 'Fraunces', 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: 'Fraunces', serif;
  color: var(--ink);
  cursor: pointer;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.nav-overlay-mark {
  font-family: 'Fraunces', 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: 'Fraunces', 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', 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', sans-serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* 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', 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%),
    url('media/home-hero.jpeg') center 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 */
  backdrop-filter: blur(22px) saturate(1.4) brightness(0.94);
  -webkit-backdrop-filter: blur(22px) saturate(1.4) brightness(0.94);
  background: rgba(11,7,3,0.20);

  /* 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 var(--brass);
  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', sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  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', sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--paper-on-dark-soft);
  white-space: nowrap;
  flex: 0 0 auto;
}

/* 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: 16px 30px;
  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', sans-serif;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background .25s, color .25s, border-color .25s;
}
.hero-button:hover {
  background: var(--paper-on-dark);
  color: var(--ink);
  border-color: var(--paper-on-dark);
}

/* Primary CTA — solid brass accent */
.hero-button.primary {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--paper-on-dark);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hero-button.primary:hover {
  background: var(--brass-deep);
  border-color: var(--brass-deep);
  color: var(--paper-on-dark);
}
.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 — brass transition mark used between major sections ---------- */
.ornament {
  text-align: center;
  background: var(--paper);
  padding: 96px var(--gutter) 0;
  font-family: 'Fraunces', serif;
  font-size: 22px;
  color: var(--brass);
  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;
}
.thesis p {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(48px, 7.8vw, 132px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 14ch;
  margin: 0 auto;
  color: var(--ink);
}
.thesis p em {
  font-style: italic;
  font-weight: 300;
  color: var(--brass);
}

/* ---------- 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; }

/* ---------- 3. PROMISE ---------- */
.promise {
  padding: 128px var(--gutter);
  background: var(--paper);
  text-align: center;
}
.promise h1 {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-variation-settings: "opsz" 96;
  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 {
  font-style: italic;
  font-weight: 400;
  color: var(--brass-deep);
}
.promise-place {
  margin-top: 32px;
  font-family: 'Inter', 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.jpg') 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: 'Fraunces', 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', sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 28px;
}
.note-text p {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 20px;
}
.note-text p:last-child { margin-bottom: 0; }

/* ---------- 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: 144px var(--gutter);
  background: var(--paper);
  text-align: center;
}
.returns-inner {
  max-width: 760px;
  margin: 0 auto;
}
.returns-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 28px;
}
.returns-ornament {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--brass);
  opacity: 0.7;
  margin-bottom: 24px;
}
.returns-title {
  font-family: 'Fraunces', 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(--brass-deep);
}
.returns-list {
  list-style: none;
  padding: 0;
  margin: 0 auto 64px;
  font-family: 'Fraunces', 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', 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: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--brass-deep);
  margin-left: 6px;
}

/* ---------- 5. DOORS — Photo-led offerings ---------- */
.doors {
  padding: 128px var(--gutter);
  background: var(--paper);
}
.doors-head {
  max-width: var(--max);
  margin: 0 auto 72px;
  text-align: center;
}
.doors-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 28px;
}
.doors-ornament {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  color: var(--brass);
  line-height: 1;
  margin-bottom: 36px;
  opacity: 0.85;
}
.doors-title {
  font-family: 'Fraunces', 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(--brass);
}
.doors-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.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.jpg'); }
.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.jpg'); }
.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.jpg'); }
.door-text {
  padding: 24px 4px 4px;
}
.door-text h3 {
  font-family: 'Fraunces', 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', 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-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 16px;
  max-width: 30ch;
}
.door-price {
  font-family: 'Inter', 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', sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 36px;
}
.framework-ornament {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  color: var(--brass);
  line-height: 1;
  margin-bottom: 44px;
  opacity: 0.85;
}
.framework-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: 'Fraunces', 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(--brass);
}
.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: 'Fraunces', 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', 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', sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 28px;
}
.voices-ornament {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  color: var(--brass);
  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: 'Fraunces', 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: 'Fraunces', 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', 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: 'Fraunces', 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', sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 20px;
}
.team-text h2 {
  font-family: 'Fraunces', 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: 'Fraunces', 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', 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: 'Fraunces', 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', 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: 'Fraunces', 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;
}

/* ---------- 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', sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 28px;
}
.closer-ornament {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  color: var(--brass);
  line-height: 1;
  margin-bottom: 36px;
  opacity: 0.85;
}
.closer-title {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(48px, 7vw, 112px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 24px;
}
.closer-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--brass);
}
.closer-sub {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.closer-sub em {
  font-style: italic;
  font-weight: 500;
  color: var(--brass-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: 16px 30px;
  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', sans-serif;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background .25s, color .25s, border-color .25s;
  cursor: pointer;
}
.closer-button:hover {
  background: var(--ink);
  color: var(--paper);
  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);
}
.closer-recognition {
  margin-top: 72px;
  padding-top: 36px;
  border-top: 1px solid rgba(138, 85, 32, 0.22);
  font-family: 'Inter', 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: 'Fraunces', 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: 'Fraunces', 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: 'Fraunces', serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-mute);
}
.footer-col h4 {
  font-family: 'Inter', 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', 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', 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) ---------- */
.sticky-cta {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .35s ease, transform .35s ease;
}
.sticky-cta.shown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
/* Matches .hero-button.primary exactly — brass pill, paper-on-dark text,
   brass-deep hover. The only added property is the box-shadow that lifts the
   pill off the page (it's floating, so it needs to read as elevated). */
.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', sans-serif;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background .25s, border-color .25s, color .25s;
  box-shadow: 0 10px 28px rgba(11, 7, 3, 0.22);
}
.sticky-cta a:hover {
  background: var(--brass-deep);
  border-color: var(--brass-deep);
  color: var(--paper-on-dark);
}

/* ---------- 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', sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 16px;
}
.lookbook-card h3 {
  font-family: 'Fraunces', 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', 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', 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: 'Fraunces', serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-mute);
}
.lookbook-sent {
  font-family: 'Fraunces', 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', 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', sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 28px;
}
.journal-intro-ornament {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--brass);
  opacity: 0.7;
  margin-bottom: 24px;
}
.journal-intro-title {
  font-family: 'Fraunces', 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: 'Fraunces', serif;
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  max-width: 620px;
  margin: 0 auto;
}

/* ---------- 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', sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 16px;
}
.journal-card-title {
  font-family: 'Fraunces', 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: 'Fraunces', serif;
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 20px;
  max-width: 52ch;
}
.journal-card-meta {
  font-family: 'Inter', 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', 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: 'Fraunces', 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;
  border-bottom: 1px solid rgba(138, 85, 32, 0.40);
  padding-bottom: 1px;
  transition: border-color .2s ease;
}
.journal-closer-text a:hover { border-bottom-color: var(--brass-deep); }

/* ---------- 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', sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 28px;
}
.article-ornament {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--brass);
  opacity: 0.7;
  margin-bottom: 24px;
}
.article-title {
  font-family: 'Fraunces', 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: 'Fraunces', serif;
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(18px, 1.5vw, 23px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 auto 40px;
}
.article-byline {
  font-family: 'Inter', 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: 680px;
  margin: 0 auto;
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(18px, 1.3vw, 21px);
  line-height: 1.65;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.article-body-inner p {
  margin: 0 0 28px;
}
.article-body-inner p.lede {
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.45;
  color: var(--ink);
  font-weight: 300;
  letter-spacing: -0.012em;
  margin-bottom: 40px;
}
.article-body-inner h2 {
  font-family: 'Fraunces', 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: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  color: var(--brass);
  margin-right: 12px;
}
.article-body-inner h3 {
  font-family: 'Fraunces', 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);
}
.article-body-inner a {
  color: var(--brass-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(138, 85, 32, 0.30);
  padding-bottom: 1px;
}
.article-body-inner a:hover { border-bottom-color: var(--brass-deep); }

/* 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: 'Fraunces', 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', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--ink-mute);
}

/* Article CTA block — discreet brass-bordered band */
.article-cta {
  margin: 64px 0 24px;
  padding: 40px 32px;
  background: rgba(138, 85, 32, 0.04);
  border: 1px solid rgba(138, 85, 32, 0.25);
  border-radius: 14px;
  text-align: center;
}
.article-cta-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 12px;
}
.article-cta-title {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 26px);
  color: var(--ink);
  margin: 0 0 18px;
  line-height: 1.25;
}
.article-cta-link {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--brass);
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none;
  border: none;
  transition: background-color .25s ease;
}
.article-cta-link:hover { background: var(--brass-deep); border-bottom: none; }

/* 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', 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) {
@media (max-width: 900px) {
  body { font-size: 17px; }

  /* ── Masthead: show hamburger, hide desktop nav list ─────────── */
  .masthead-nav { padding: 0 20px; grid-template-columns: 1fr auto 1fr; }
  .masthead-nav .right ul { display: none; }
  .masthead-nav .right { gap: 0; }
  .nav-toggle { display: inline-flex; }
  .masthead-nav .wordmark-image { height: 36px; }
  .masthead-nav .left { font-size: 9px; 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%),
      url('media/home-hero.jpeg') center 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: 9px; letter-spacing: 0.22em; line-height: 1.5; }
  .hero-recognition em { font-size: 11px; letter-spacing: 0.02em; margin: 0 2px; }
  .hero-mark { font-size: 9px; 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 p { font-size: clamp(40px, 13vw, 72px); }

  /* ── Wall: vertical stack on mobile.
     Each image full-width and SQUARE (1:1) so the section doesn't eat the
     whole screen per card. The cascade reveal still fires top-to-bottom. */
  .wall { padding: 24px 20px 56px; }
  .wall-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    overflow: visible;
  }
  .wall-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    /* No stagger in single-column layout */
    --stagger-y: 0px;
  }
  /* Padding-top fallback (used where aspect-ratio isn't supported) needs to
     match the 1:1 ratio on mobile too. */
  .wall-img::before { padding-top: 100%; }
  /* Reset the 5th-image grid-column / 16:9 spans from older mobile rules */
  .wall-img-5 {
    grid-column: unset;
    aspect-ratio: 1 / 1;
  }
  .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 { font-size: clamp(28px, 8.6vw, 46px); }

  /* ── 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: 88px 24px; }
  .doors-head { margin-bottom: 40px; }
  .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; }
  .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: 9px; 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: 9px;
    letter-spacing: 0.22em;
    line-height: 1.55;
  }
  .closer-recognition em { font-size: 12px; 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: 9px; 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-right with safe-area inset for iPhones with home bar. */
  .sticky-cta {
    bottom: max(20px, env(safe-area-inset-bottom));
    right: 16px;
    left: auto;
  }
  .sticky-cta a {
    display: inline-block;
    padding: 15px 22px;   /* ~44px tall — minimum thumb-friendly tap target */
    font-size: 10px;
    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: 32px 24px; margin: 48px 0 24px; }
  .article-continue { padding: 64px 24px; }
  .article-continue-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- VERY SMALL PHONES (≤380px) ---------- */
@media (max-width: 380px) {
  .masthead-nav .left { display: none; } /* free up horizontal space */
  .masthead-nav { grid-template-columns: auto 1fr auto; }
  .masthead-nav .center { justify-self: start; }
  .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; }
}