/* =========================================================
   Mary & Jacob — faithful recreation of Figma frame 398-14
   Fluid / responsive rebuild. Colors unchanged from Figma.
   Design reference canvas: 1920 x 3364.
   ========================================================= */

:root {
  /* Colors — synced to updated Figma frame 398-14 */
  --ink:        #1e1e1d;   /* headings (The Wedding), nav, date, buttons */
  --ink-soft:   #4d4c49;   /* address / detail lines */
  --stone:      #878576;   /* script captions, story copy, footer names */
  --page-bg:    #f3f2ee;   /* page + nav background */
  --sand:       #ebe6dd;   /* Story section band */
  --olive:      #e9e6db;   /* Proposal section band (now light oat, not olive) */
  --footer-bg:  #f3f2ee;   /* footer background (now matches page) */
  --hero-tint:  #56471b;   /* hero brown overlay */
  --white:      #ffffff;

  /* Fonts */
  --font-body:   'Work Sans', sans-serif;
  --font-serif:  'Lora', serif;
  --font-script: 'La Belle Aurore', cursive; /* temporary 'for now' substitute for De Lionist */

  /* Light antique paper grain level (flat-color sections only) */
  --grain-opacity: 0.09;

  /* Offset "floating frame" keyline (Figma 398:45: 1px stroke set ~16px off a
     659px photo, so a ~2.4% gap). Figma's stroke is white, but white is
     effectively invisible on the warm paper/oat bands, so the keyline is a thin
     stone hairline at the same weight + offset for legibility. */
  --frame-gap:    clamp(10px, 1.5vw, 16px);   /* consistent gap between keyline and photo */
  --frame-line:   rgba(135, 133, 118, 0.5);   /* stone hairline */
  --frame-shadow: 0 16px 34px -20px rgba(30, 28, 20, 0.26);
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

/* =========================================================
   SCROLL-SNAP "catch"  (gentle per-section snap)
   The viewport scroll root (html) softly catches each major
   section. PROXIMITY — the browser only snaps when a scroll
   settles near a snap point, so the user is NEVER trapped on
   tall / variable-height content sections. Parallax-safe: the
   hero parallax reads scroll position independently of snap.
   Disabled entirely under prefers-reduced-motion.
   ========================================================= */
html {
  scroll-snap-type: y proximity;
}
.hero,
.wedding,
.proposal,
.story,
.footer {
  scroll-snap-align: start;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
}

/* Subtle paper grain used ONLY on flat-color bands */
.grain {
  position: absolute;
  inset: 0;
  background-image: url('assets/grain.png');
  background-size: cover;
  background-position: center;
  opacity: var(--grain-opacity);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 45px;
  line-height: 1.3;
  min-height: 48px;              /* comfortable touch target */
  transition: opacity 0.2s ease;
}
.btn:hover { opacity: 0.85; }

/* ---------- Shared type helpers ---------- */
.heading {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--stone);   /* display-serif headlines in stone #878576 */
  letter-spacing: -1px;
  margin: 0;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.script {
  font-family: var(--font-script);
  color: var(--stone);   /* Figma: all script captions #878576 */
  margin: 0;
  line-height: 0.86;
}

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 108px;
  padding: 24px clamp(20px, 4vw, 40px);
  background: transparent;
  z-index: 30;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}
/* subtle top-down scrim so the cream links stay legible over the photo */
.nav::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 170px;
  background: linear-gradient(to bottom, rgba(22, 20, 14, 0.34) 0%, rgba(22, 20, 14, 0.10) 55%, transparent 100%);
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.3s ease;
}
/* once scrolled past the hero: subtle cream/blur bar, dark links */
.nav--scrolled {
  background: rgba(243, 242, 238, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 14px rgba(30, 28, 20, 0.08);
}
.nav--scrolled::before { opacity: 0; }

.nav__toggle,
.nav__burger { display: none; }

.nav__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}

.nav__link {
  padding: 8px clamp(12px, 1.4vw, 20px);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(12.5px, 1vw, 14.5px);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #f6f1e7;   /* cream over the hero photo (matches wordmark) */
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s ease, opacity 0.2s ease;
}
.nav__link:hover { opacity: 0.7; }
.nav--scrolled .nav__link { color: var(--ink); }   /* dark once the bar is solid */

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;   /* full viewport height (desktop); mobile height set in media query */
  overflow: hidden;
}

.hero__photo {
  position: absolute;
  top: -24%;
  left: 0;
  right: 0;
  height: 148%;                /* extra headroom so parallax reveals no edge at 100vh */
  background-image: url('assets/hero-couple.jpg');
  background-size: cover;
  background-position: center 30%;
  will-change: transform;
}
/* subtle film grain over the hero photo (Figma re-added light photo texture) */
.hero__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/grain.png') center / cover;
  opacity: 0.14;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.hero__tint {
  position: absolute;
  inset: 0;
  background: var(--hero-tint);
  opacity: 0.25;   /* Figma 398:25 */
  pointer-events: none;
}

.hero__stamp {
  position: absolute;
  top: clamp(20px, 3.2vw, 55px);
  left: clamp(16px, 3vw, 48px);
  width: clamp(121px, 16.5vw, 322px);   /* +10% (was clamp(110px,15vw,293px)) */
  height: auto;
  z-index: 3;
}

.hero__script {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(502px, 46.8%);   /* -10% (was min(558px,52%)) */
  height: auto;
  z-index: 3;
}

/* =========================================================
   THE WEDDING  (flat sand band)
   ========================================================= */
.wedding {
  position: relative;
  background: var(--page-bg);   /* Figma: wedding band = page field #f3f2ee */
  padding: clamp(64px, 8vw, 130px) clamp(24px, 5vw, 80px) clamp(80px, 9vw, 150px);
  overflow: hidden;
}
.wedding::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('assets/grain.png');
  background-size: cover;
  opacity: var(--grain-opacity);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}

.wedding__tree {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(240px, 34vw, 644px);
  height: auto;
  /* sage-green tinted asset composites via its own alpha (no murky multiply) */
  mix-blend-mode: normal;
  opacity: 0.7;
  pointer-events: none;
  z-index: 1;
}

.wedding__celebrate {
  position: absolute;
  left: clamp(24px, 4vw, 80px);
  top: clamp(70px, 11vw, 165px);
  /* Head chef's handwriting PNG (#878576, transparent). The artwork already has
     ~24° of up-to-right tilt baked in, so a small +4° CSS nudge lands the final
     on-screen angle at ~-20° to match the previous caption (no double-rotate). */
  width: clamp(168px, 14.2vw, 266px);
  height: auto;
  transform: rotate(4deg);
  transform-origin: center;
  z-index: 2;
}

.wedding__inner {
  position: relative;
  max-width: 870px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 2;
}

.wedding__title {
  font-size: clamp(30px, 3vw, 41.4px);
  line-height: 1.35;
  margin-bottom: 16px;
}

.wedding__when {
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 18px;
}

.wedding__where,
.wedding__attire {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.2vw, 17.5px);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 16px;
}
.wedding__attire { margin-bottom: clamp(32px, 4vw, 56px); }

/* =========================================================
   PROPOSAL  (olive band — Figma geometry via % canvas)
   Canvas coordinate system: 1920 x 1022 (matches Figma).
   ========================================================= */
.proposal {
  position: relative;
  background-color: var(--olive);
  overflow: hidden;
  /* Bottom room so the dropped oak caption (centered near the oak's lowered
     bottom edge, so its lower half spills past the canvas) never clips. The
     caption fills most of this space, so it reads as breathing room, not a gap.
     Sized to clear the worst-case overflow (~mid-desktop, where the px drops max
     out but the fixed-aspect canvas is still short). */
  padding-bottom: clamp(48px, 6vw, 88px);
}
.proposal::before { /* subtle paper grain on the olive only */
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('assets/grain.png');
  background-size: cover;
  opacity: var(--grain-opacity);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}

.proposal__canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1022;
  z-index: 1;
}

/* Offset keyline frame (oak) — a thin hairline floats a consistent gap off the
   photo edge (Figma 398:45), rather than sitting flush on it. */
.framed {
  position: relative;
  margin: 0;
  padding: var(--frame-gap);
  border: 1px solid var(--frame-line);
  background: transparent;
  box-shadow: var(--frame-shadow);
}
.framed img { width: 100%; height: 100%; object-fit: cover; }
/* subtle film grain over proposal photos (Figma 398:47/398:54, ~15%) */
.framed::after {
  content: '';
  position: absolute;
  inset: var(--frame-gap);   /* grain over the photo only, inside the offset gap */
  background: url('assets/grain.png') center / cover;
  opacity: 0.12;
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 1;
}
.matted__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/grain.png') center / cover;
  opacity: 0.12;
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 1;
}

/* Near-white filled mat (couple) — the head-chef-approved treatment: a mounted
   cream mat + soft shadow, NOT the offset keyline used for the oak/feature photos. */
.matted {
  margin: 0;
  background: #fdfdfb;   /* near-white mat */
  padding: 1.05%;
  box-shadow: var(--frame-shadow);
}
.matted__img { position: relative; width: 100%; height: 100%; overflow: hidden; }
/* zoom in so the couple fill the frame and the blown-out sky is cropped out */
.matted__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transform: scale(1.34);
  transform-origin: center 38%;
}

/* Inner fillet: a hairline right at the photo edge, so the offset gap stays
   legible even when the photo has very light edges (e.g. the oak's bright sky).
   Without it, a light photo edge blends into the light gap and the frame reads
   as flush. Shared by every offset-keyline frame so they match exactly. */
.framed::before,
.photo-frame::before,
.section-feature::before {
  content: '';
  position: absolute;
  inset: var(--frame-gap);
  border: 1px solid rgba(135, 133, 118, 0.34);
  pointer-events: none;
  z-index: 2;
}
.member__photo::before { content: none; }   /* round portraits stay flush */

.proposal__oak {
  position: absolute;
  left: 1.15%;
  /* Dropped ~100px below its Figma anchor (head chef request); the caption
     shifts by the same amount so their overlap is preserved. Clamp eases the
     drop on narrower desktop so nothing clips the fixed-aspect canvas. */
  top: calc(5.2% + clamp(64px, 7vw, 100px));
  width: 36%;
  /* Taller than the Figma anchor (head chef requests): +~60px then +~40px more,
     photo crops to fill via object-fit:cover. Clamps ease the extra height on
     narrower desktop so the taller frame never clips the fixed-aspect canvas. */
  height: calc(67.7% + clamp(38px, 4.2vw, 60px) + clamp(25px, 2.8vw, 40px));
}

/* Head chef's handwriting PNG (#878576, transparent), centered on the same anchor
   the text caption used. The artwork has ~15° up-to-right tilt baked in, so a small
   -5° CSS nudge lands the final on-screen angle at ~-20° (no double-rotate). */
.proposal__caption {
  position: absolute;
  left: 41%;
  /* Drops with the oak: base ~100px placement offset, plus the SAME growth clamps
     the oak's height gained (+~60px then +~40px), so the original overlap holds
     across widths. */
  top: calc(72% + clamp(64px, 7vw, 100px) + clamp(38px, 4.2vw, 60px) + clamp(25px, 2.8vw, 40px));
  width: clamp(210px, 23vw, 350px);
  height: auto;
  transform: translate(-50%, -50%) rotate(-5deg);
  transform-origin: center;
  z-index: 3;
}

.proposal__couple {
  position: absolute;
  left: 62.54%;
  top: 8.4%;
  width: 37.44%;
  height: 83.15%;
}

.proposal__stamp {
  position: absolute;
  left: 51.3%;
  top: 45.5%;
  width: 15.4%;
  height: auto;
  /* nudged ~20px up from its canvas anchor (translate keeps the % layout intact, no clip) */
  transform: translateY(-20px) rotate(6.5deg);
  /* drop-shadow follows the PNG's scalloped alpha (no rectangular halo) */
  filter: drop-shadow(0 8px 16px rgba(30, 28, 20, 0.2));
  z-index: 4;
}

/* =========================================================
   SOMETHING SWEET  (flat sand band)
   ========================================================= */
.story {
  position: relative;
  background-color: var(--sand);
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 40px);
  padding: clamp(72px, 8vw, 110px) clamp(24px, 6vw, 120px);
  overflow: visible;
}
.story::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('assets/grain.png');
  background-size: cover;
  opacity: var(--grain-opacity);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}

.story__text {
  position: relative;
  flex: 0 0 auto;
  width: clamp(280px, 47vw, 700px);   /* holds the 2-line love-story heading on desktop */
  z-index: 1;
}
.story__title {
  font-size: clamp(28px, 3vw, 40.9px);
  line-height: 1.35;
  margin-bottom: 14px;
  color: var(--stone);   /* Figma 398:309 story heading #878576 */
}
.story__body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.2vw, 17.5px);
  line-height: 1.5;
  color: var(--stone);   /* Figma 398:311 story body #878576 */
  margin: 0;
}

.story__divider {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 1px;
  background: var(--stone);   /* Figma 398:314 divider #878576 */
  z-index: 1;
}

.story__btn { position: relative; flex: 0 0 auto; z-index: 1; }


/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  background: var(--footer-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: clamp(28px, 4vw, 40px) 24px;
}
.footer__monogram { width: clamp(96px, 8vw, 125px); height: auto; }
.footer__names {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(13.5px, 1vw, 15.5px);
  letter-spacing: 0.5px;
  color: var(--stone);   /* Figma 398:454 footer names #878576 */
  line-height: 1.35;
  margin: 0;
  text-align: center;
}

/* =========================================================
   TABLET  (≤ 1024px) — soften desktop proportions
   ========================================================= */
@media (max-width: 1024px) {
  .story__text { width: clamp(260px, 34vw, 360px); }
}

/* =========================================================
   MOBILE / SMALL TABLET  (≤ 768px) — real reflow
   ========================================================= */
@media (max-width: 768px) {
  /* --- Nav: collapse to hamburger --- */
  .nav {
    justify-content: space-between;
    min-height: 72px;
    padding: 16px 20px;
  }
  .nav__burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-left: auto;
    cursor: pointer;
  }
  .nav__burger span {
    display: block;
    height: 2px;
    width: 26px;
    background: #f6f1e7;   /* cream over the hero photo */
    transition: transform 0.25s ease, opacity 0.25s ease, background-color 0.25s ease;
  }
  .nav--scrolled .nav__burger span { background: var(--ink); }
  .nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: center;
    gap: 0;
    background: var(--page-bg);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.06);
  }
  .nav__toggle:checked ~ .nav__menu { max-height: 60vh; }
  .nav__link {
    width: 100%;
    text-align: center;
    padding: 16px;
    font-size: 14px;
    border-top: 1px solid rgba(30, 30, 29, 0.08);
    color: var(--ink-body);   /* links live inside the cream dropdown → dark */
  }
  /* burger → X when open */
  .nav__toggle:checked ~ .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__toggle:checked ~ .nav__burger span:nth-child(2) { opacity: 0; }
  .nav__toggle:checked ~ .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* --- Hero --- */
  .hero { height: clamp(480px, 86svh, 720px); }
  .hero__script { width: min(324px, 59.4%); }   /* -10% (was min(360px,66%)) */

  /* --- Wedding: celebrate script flows above the details --- */
  .wedding {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: clamp(160px, 42vw, 240px); /* room for the tree */
  }
  .wedding__celebrate {
    position: static;
    transform: rotate(16deg);   /* baked-in ~-24° + 16° → ~-8° final (matches old mobile tilt) */
    margin-bottom: 28px;
    width: clamp(185px, 59vw, 253px);
    height: auto;
  }
  .wedding__tree {
    width: clamp(220px, 60vw, 360px);
    opacity: 0.45;
  }

  /* --- Proposal: stack the composition --- */
  .proposal__canvas {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(28px, 7vw, 44px);
    padding: clamp(48px, 11vw, 72px) clamp(24px, 6vw, 48px);
  }
  .proposal__oak {
    position: static;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 691 / 692;
    height: auto;
  }
  .proposal__caption {
    position: static;
    width: clamp(220px, 62vw, 320px);
    height: auto;
    order: 2;
    margin-top: -12px;
    transform: rotate(3deg);   /* baked-in ~-15° + 3° → ~-12° final (matches old mobile tilt) */
  }
  .proposal__couple {
    position: static;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 718 / 850;
    height: auto;
    order: 3;
  }
  .proposal__stamp {
    position: static;
    order: 4;
    width: clamp(150px, 42vw, 210px);
    margin-top: clamp(-90px, -24vw, -70px);
    margin-right: clamp(-140px, -38vw, -110px);
    align-self: center;
    transform: translateX(-4%) rotate(6deg);
  }

  /* --- Story: stack --- */
  .story {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    padding: clamp(56px, 12vw, 80px) clamp(24px, 7vw, 48px);
    overflow: hidden;
  }
  .story__text { width: 100%; max-width: 460px; }
  .story__divider { display: none; }
}

/* =========================================================
   SMALL PHONES  (≤ 420px)
   ========================================================= */
@media (max-width: 420px) {
  .nav__menu { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08); }
  .hero__stamp { width: 119px; }   /* +10% (was 108px), keeps parity with the desktop bump */
  .wedding__where, .wedding__attire { font-size: 15px; }
  .proposal__stamp {
    margin-right: -30%;
    margin-top: -22vw;
  }
}

/* =========================================================
   Respect reduced motion — no hero parallax transform
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero__photo { transform: none !important; }
}

/* =========================================================
   =========================================================
   CONTENT SUBPAGES  (our-story, wedding-party, q+a,
   things-to-do, travel) — reuse the homepage design system:
   same tokens, Lora headings, Work Sans body, La Belle Aurore
   accents, paper-grain bands, stone rules, ink letterpress
   buttons, monogram footer. No full-bleed hero, so the nav
   rides as a solid translucent cream bar from the top.
   =========================================================
   ========================================================= */

:root { --ink-body: #1e1e1d; }   /* names the previously-undefined mobile nav link color */

/* Subpages have no hero: the fixed nav needs its height reserved. */
body.subpage { padding-top: 108px; }

/* No section-snap on content pages (homepage keeps its proximity snap). */
html:has(body.subpage) { scroll-snap-type: none; }

/* --- Nav: solid cream bar from the start (no over-photo transparent state) --- */
.nav--solid {
  background: rgba(243, 242, 238, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 14px rgba(30, 28, 20, 0.08);
}
.nav--solid::before { display: none; }          /* drop the over-photo scrim */
.nav--solid .nav__link { color: var(--ink); }
.nav--solid .nav__burger span { background: var(--ink); }

/* Active page marker: a short stone underline, centered under the link.
   Color is left to the nav state (cream over the hero photo, ink on the
   solid subpage/scrolled bar) so the active link never loses contrast. */
.nav__link--active { position: relative; }
.nav__link--active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 18px;
  height: 1px;
  background: var(--stone);
  transform: translateX(-50%);
}

/* --- Shared layout helpers --- */
.wrap { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; }
.wrap--narrow { max-width: 780px; }

.band { position: relative; overflow: hidden; }
/* Background grain removed from content-page bands (homepage keeps its texture). */
.band--paper { background: var(--page-bg); }
.band--oat   { background: var(--olive); }
.band--sand  { background: var(--sand); }

.section { padding: clamp(56px, 8vw, 104px) clamp(24px, 6vw, 80px); }

.section__head { position: relative; z-index: 1; text-align: center; max-width: 720px; margin: 0 auto clamp(30px, 4vw, 50px); }
.section__title { font-family: var(--font-serif); font-weight: 400; color: var(--stone); letter-spacing: -0.5px; font-size: clamp(25px, 3vw, 37px); line-height: 1.2; margin: 0; }
.section__intro { font-family: var(--font-body); font-weight: 400; color: var(--ink-soft); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; margin: 14px auto 0; max-width: 60ch; }

/* --- Page header band --- */
.page-header {
  position: relative;
  text-align: center;
  background: var(--page-bg);
  padding: clamp(52px, 7vw, 96px) clamp(24px, 5vw, 48px) clamp(40px, 5vw, 66px);
  overflow: hidden;
}
/* Background grain removed: the flat header color now reads as one continuous
   surface with the section directly below it (no two-tone seam under the title). */
/* Oat header for pages whose first section is an oat band (things-to-do, travel). */
.page-header--oat { background: var(--olive); }
.page-header__title {
  position: relative;
  z-index: 1;
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--stone);
  letter-spacing: -1px;
  font-size: clamp(34px, 5.4vw, 60px);
  line-height: 1.04;
  margin: 0;
}
.page-header__sub {
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--stone);
  font-size: clamp(14px, 1.2vw, 16.5px);
  letter-spacing: 0.4px;
  line-height: 1.5;
  margin: 14px auto 0;
  max-width: 52ch;
}

/* Shared thin-white photo frame (echoes the homepage .framed treatment). */
.photo-frame { position: relative; margin: 0; padding: var(--frame-gap); border: 1px solid var(--frame-line); background: transparent; box-shadow: var(--frame-shadow); }
.photo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-frame::after {   /* subtle film grain over the photo only, inside the offset gap */
  content: '';
  position: absolute;
  inset: var(--frame-gap);
  background: url('assets/grain.png') center / cover;
  opacity: 0.12;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* =========================================================
   OUR STORY
   ========================================================= */
/* Two columns: framed hero photo (left) + one unified prose block (right). */
.story-columns {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.82fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
}

/* Polaroid mat — echoes the homepage proposal .matted photo treatment:
   near-white paper border, subtle drop shadow, slight tilt. */
.story-hero-frame {
  position: relative;
  z-index: 1;
  margin: 0;
  align-self: center;
  background: #fdfdfb;                 /* same near-white mat as the homepage .matted */
  padding: clamp(12px, 1.4vw, 20px);   /* cream paper border */
  box-shadow: 0 16px 36px rgba(30, 28, 20, 0.18);
  transform: rotate(-2.2deg);
  transform-origin: center;
}
.story-hero-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
/* subtle film grain over the photo only, like the homepage framed/matted photos */
.story-hero-frame::after {
  content: '';
  position: absolute;
  inset: clamp(12px, 1.4vw, 20px);     /* matches the mat padding — grain sits over the image */
  background: url('assets/grain.png') center / cover;
  opacity: 0.12;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.story-quote {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--stone);
  font-family: var(--font-script);
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: 1.05;
  max-width: 16ch;
  margin: clamp(52px, 7vw, 96px) auto clamp(8px, 1vw, 12px);
}

.story-prose {
  position: relative;
  z-index: 1;
  max-width: 68ch;
  margin: 0 auto;
}
.story-prose p {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink-soft);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.75;
  margin: 0 0 1.2em;
}
.story-prose p:last-child { margin-bottom: 0; }

/* Engagement gallery — calm masonry of framed photos. */
.gallery {
  position: relative;
  z-index: 1;
  column-count: 3;
  column-gap: clamp(10px, 1.2vw, 16px);
  max-width: 1180px;
  margin: 0 auto;
}
.gallery__item { break-inside: avoid; margin: 0 0 clamp(10px, 1.2vw, 16px); }
/* Masonry items have no fixed aspect box, so the image flows at natural height
   (the shared .photo-frame img rule's height:100% would collapse here). */
.gallery__item img { height: auto; }

/* =========================================================
   WEDDING PARTY
   ========================================================= */
/* One interspersed single column: one member per row, stacked
   photo-on-top -> name -> role -> bio. No side-by-side grid. */
.party-list {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 8vw, 100px);
}
.member { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* Round (circular) photo, centered. Moderate fixed size keeps the lower-res
   portraits (Kevin, Nick, Connor) from being pushed too large. */
/* Round member portraits keep a flush thin ring (the offset keyline is for the
   rectangular framed photos; a circular crop needs overflow clipping). */
.member__photo { width: clamp(200px, 24vw, 260px); aspect-ratio: 1 / 1; border-radius: 50%; margin: 0 0 clamp(20px, 2.4vw, 30px); padding: 0; border-color: var(--white); box-shadow: none; overflow: hidden; }
.member__photo::after { inset: 0; }
.member__name { font-family: var(--font-serif); font-weight: 400; color: var(--ink); letter-spacing: -0.4px; font-size: clamp(22px, 2vw, 29px); line-height: 1.2; margin: 0; }
.member__role {
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--stone);
  font-size: clamp(11px, 0.9vw, 12.5px);
  margin: 9px 0 18px;
}
/* Photo, name, role, and bio all center in the column; the wider measure keeps
   the long paragraphs on fewer lines so the page reads shorter. */
.member__bio { font-family: var(--font-body); font-weight: 400; color: var(--ink-soft); font-size: clamp(14.5px, 1.1vw, 16px); line-height: 1.72; margin: 0 auto; max-width: 760px; text-align: center; }
.member__bio + .member__bio { margin-top: 1em; }

/* =========================================================
   Q + A  (two-column editorial FAQ — numbered, open answers)
   Left: stacked display-serif title + script. Right: numbered
   list with outline numerals, uppercase questions, open answers,
   thin stone hairlines between items. No accordion.
   ========================================================= */
.faq__wrap {
  position: relative;
  z-index: 1;
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.72fr 1fr;
  gap: clamp(32px, 6vw, 100px);
  align-items: center;
}

/* Left — stacked title */
.faq__title-serif {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--stone);
  letter-spacing: 0.02em;
  font-size: clamp(38px, 5.4vw, 72px);
  line-height: 1.06;
  margin: 0;
}
/* Head chef's "questions" handwriting PNG (#878576, transparent). ~12° up-to-right
   tilt is baked into the artwork; the previous script word had no CSS rotation, so
   none is applied here (the natural tilt is the intended look — no double-rotate). */
.faq__title-script {
  display: block;
  width: clamp(210px, 30vw, 316px);
  height: auto;
  margin: clamp(2px, 0.6vw, 10px) 0 0 clamp(6px, 1vw, 18px);
}

/* Right — numbered list */
.faq__list { list-style: none; margin: 0; padding: 0; }
.faq__item {
  display: grid;
  grid-template-columns: clamp(40px, 4vw, 68px) 1fr;
  gap: clamp(14px, 2vw, 34px);
  padding: clamp(22px, 2.8vw, 34px) 0;
}
.faq__item:first-child { padding-top: 0; }
.faq__item + .faq__item { border-top: 1px solid rgba(135, 133, 118, 0.42); }
.faq__num {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--stone);
  font-size: clamp(19px, 1.9vw, 28px);
  line-height: 1.15;
  letter-spacing: 0.02em;
}
.faq__q {
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
  font-size: clamp(13px, 1.15vw, 15.5px);
  line-height: 1.4;
  margin: 0 0 10px;
}
.faq__a {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink-soft);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.66;
  margin: 0;
  max-width: 56ch;
}

@media (max-width: 768px) {
  .faq__wrap { grid-template-columns: 1fr; gap: clamp(28px, 8vw, 46px); align-items: start; }
  .faq__title-serif { font-size: clamp(42px, 13vw, 62px); }
  .faq__title-script { width: clamp(200px, 52vw, 290px); }
}
@media (max-width: 480px) {
  .faq__item { grid-template-columns: clamp(30px, 9vw, 44px) 1fr; gap: 14px; }
}

/* =========================================================
   THINGS TO DO
   ========================================================= */
/* One framed landscape feature photo per category, above its card grid.
   Echoes the site's framed-photo treatment: offset keyline, soft lift,
   subtle film grain. Natural image ratio (no crop); scales cleanly on mobile. */
.section-feature {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto clamp(34px, 4.2vw, 58px);
  padding: var(--frame-gap);
  border: 1px solid var(--frame-line);
  background: transparent;
  box-shadow: var(--frame-shadow);
}
.section-feature img { display: block; width: 100%; height: auto; }
.section-feature::after {   /* subtle film grain over the photo only, inside the offset gap */
  content: '';
  position: absolute;
  inset: var(--frame-gap);
  background: url('assets/grain.png') center / cover;
  opacity: 0.10;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.things-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
  max-width: 1120px;
  margin: 0 auto;
}
.thing {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: clamp(20px, 2.2vw, 30px);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(135, 133, 118, 0.28);
}
.thing__name { font-family: var(--font-serif); font-weight: 400; color: var(--ink); letter-spacing: -0.3px; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.25; margin: 0; }
.thing__flag { font-family: var(--font-script); color: var(--stone); font-size: clamp(21px, 2vw, 27px); line-height: 0.8; margin: -2px 0 0; }
.thing__blurb { font-family: var(--font-body); font-weight: 400; color: var(--ink-soft); font-size: clamp(13.5px, 1vw, 15px); line-height: 1.6; margin: 0; }

/* =========================================================
   TRAVEL (coming soon)
   ========================================================= */
.coming {
  position: relative;
  z-index: 1;
  min-height: 46vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(14px, 1.8vw, 22px);
  max-width: 620px;
  margin: 0 auto;
}
.coming__script { font-family: var(--font-script); color: var(--stone); font-size: clamp(38px, 6vw, 68px); line-height: 0.95; margin: 0; }
.coming__msg { font-family: var(--font-body); font-weight: 400; color: var(--ink-soft); font-size: clamp(15px, 1.25vw, 17.5px); line-height: 1.7; margin: 0; max-width: 46ch; }
.coming__meta { font-family: var(--font-body); font-weight: 500; text-transform: uppercase; letter-spacing: 2px; color: var(--stone); font-size: clamp(11.5px, 0.95vw, 13px); margin: 6px 0 0; }

/* =========================================================
   SUBPAGE RESPONSIVE
   ========================================================= */
@media (max-width: 768px) {
  body.subpage { padding-top: 72px; }

  /* Story: stack the framed photo above the unified prose. */
  .story-columns { grid-template-columns: 1fr; gap: clamp(28px, 7vw, 40px); }
  .story-hero-frame { max-width: 340px; margin: 0 auto; transform: rotate(-1.6deg); }

  .gallery { column-count: 2; }
}

@media (max-width: 440px) {
  .gallery { max-width: 360px; }   /* stays 2 columns to keep the 14-photo scroll reasonable */
}