/* ==========================================================================
   Bloom & Style — Smoky Mountain Bridal Beauty
   Canonical brief §9–13 + §23 post-review refinements (2026-08-11):
   Bloom Forward / Refined Botanical · QE+RB hybrid palette (§10) ·
   Modern Atelier type (§11). Ivory dominates, Olive carries the branded
   functional work (§23.A), Antique Gold stays a memory accent.
   ========================================================================== */

/* ---- Fonts (self-hosted) ------------------------------------------------ */
/* Headline trial (owner, Aug 12): Playfair Display. Bodoni and Cormorant
   woff2 files remain in fonts/ for quick swaps. */
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/PlayfairDisplay-var.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/PlayfairDisplay-italic-var.woff2') format('woff2');
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens (approved hybrid palette, brief §10) ------------------------- */
:root {
  --ivory: #F7F5F0;            /* dominant background */
  --cream: #EDE4D7;            /* secondary warm neutral */
  --sage: #A8AA9D;             /* supporting neutral */
  --olive: #59614B;            /* principal branded functional color (§23.A) */
  --olive-deep: #47503C;       /* hover / footer */
  --charcoal: #242620;         /* primary text / authority */
  --gold: #B58A4A;             /* antique gold — restrained accent / memory cue */
  --gold-text: #8F6C36;        /* gold deepened for small type on ivory */
  --gold-on-dark: #CFA76B;     /* gold lifted for dark bands */
  --btn-gold: #C3A47A;         /* owner-directed button color */
  --btn-gold-deep: #B08F63;
  --blush: #C89C96;            /* soft blush — sparing human accent */
  --blush-soft: #EFDEDB;
  --ink-soft: #565A4E;         /* secondary text on ivory */
  --paper: #F7F5F0;
  --hairline: rgba(36, 38, 32, 0.16);
  --hairline-dark: rgba(247, 245, 240, 0.22);

  --font-display: 'Playfair Display', 'Palatino Linotype', Georgia, serif;
  --font-body: 'Inter', 'Helvetica Neue', 'Segoe UI', sans-serif;

  /* Type scale — larger, fashion-editorial */
  --fs-hero: clamp(2.6rem, 6.8vw, 5.4rem);
  --fs-h2: clamp(2rem, 4.4vw, 3.6rem);
  --fs-h3: clamp(1.4rem, 2.4vw, 1.9rem);
  --fs-h4: 1.2rem;
  --fs-lead: clamp(1.02rem, 1.5vw, 1.2rem);
  --fs-body: 1.02rem;
  --fs-small: 0.9rem;
  --fs-micro: 0.75rem;

  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 1rem; --s-4: 1.5rem;
  --s-5: 2.5rem; --s-6: 4rem; --s-7: 6.5rem;
  --section-pad: clamp(4.5rem, 10vw, 8rem);

  --measure: 60ch;
  --max-w: 82rem;
  --ease-out: cubic-bezier(0.22, 0.8, 0.36, 1);
}

/* ---- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--charcoal);
  background: var(--ivory);
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0 0 var(--s-3); line-height: 1.05; }
p { margin: 0 0 var(--s-3); max-width: var(--measure); }
a { color: var(--olive); }
strong { font-weight: 700; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
::selection { background: var(--cream); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--olive); color: var(--paper);
  padding: var(--s-2) var(--s-3);
}
.skip-link:focus { left: 0; }

/* ---- Type roles --------------------------------------------------------- */
.display { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 500; letter-spacing: 0.004em; }
h1.display { font-size: var(--fs-hero); }
h2.display { font-size: var(--fs-h2); }
h3.display { font-size: var(--fs-h3); font-weight: 500; }
.display-italic { font-family: var(--font-display); font-style: italic; font-weight: 470; }

.lead { font-size: var(--fs-lead); font-weight: 390; line-height: 1.65; color: var(--ink-soft); }
.small { font-size: var(--fs-small); }
.muted { color: var(--ink-soft); }

/* The signature ampersand + vine (§13) */
.amp { font-family: var(--font-display); font-style: italic; font-weight: 480; color: var(--gold); }
.amp-vine { position: relative; display: inline-block; }
.amp-vine svg {
  position: absolute; top: -0.45em; left: 54%; transform: translateX(-50%);
  width: 1.6em; height: auto; color: var(--gold); pointer-events: none;
}
.on-dark .amp, .site-footer .amp { color: var(--gold-on-dark); }
.on-dark .amp-vine svg, .site-footer .amp-vine svg { color: var(--gold-on-dark); }

/* Eyebrow between gold rules — "—— REAL WEDDINGS ——", mirroring the
   header lockup's "— BRIDAL BEAUTY —" descriptor (same gold, bold) */
.eyebrow {
  display: flex; align-items: center; gap: 0.9rem;
  font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gold-text); margin: 0 0 var(--s-4);
}
.eyebrow::before, .eyebrow::after { content: ""; width: 2.6rem; height: 1px; background: var(--gold); flex: 0 0 auto; }
.center .eyebrow, .eyebrow.center { justify-content: center; }
.on-dark .eyebrow { color: var(--gold-on-dark); }



/* ---- Layout ------------------------------------------------------------- */
.wrap { width: min(100% - 3rem, var(--max-w)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 3rem, 48rem); margin-inline: auto; }
section { padding-block: var(--section-pad); }
section.compact { padding-block: clamp(2.8rem, 6vw, 4.5rem); }  /* §23.B functional zones */
.band-cream { background: var(--cream); }
.band-olive { background: var(--olive); color: var(--paper); }
.band-charcoal { background: var(--olive-deep); color: var(--paper); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--paper); }
.on-dark .lead, .on-dark .muted, .on-dark p { color: rgba(246, 241, 232, 0.82); }
.on-dark a { color: var(--paper); }

.grid-2 { display: grid; gap: clamp(2rem, 5vw, 4.5rem); }
.grid-3 { display: grid; gap: clamp(1.5rem, 3vw, 3rem); }
@media (min-width: 46em) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-2.offset > :last-child { margin-top: var(--s-6); }  /* controlled asymmetry */
}
.grid-2 > *, .grid-3 > * { min-width: 0; }
.center { text-align: center; }
.center p { margin-inline: auto; }

/* Thin rule separating sections where bands don't change */
.rule { border: 0; border-top: 1px solid var(--hairline); margin: 0; }

/* Editorial drop cap — used sparingly on major prose openings */
.dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: 540;
  font-size: 3.3em;
  line-height: 0.78;
  float: left;
  padding: 0.06em 0.14em 0 0;
  color: var(--olive);
}
.on-dark .dropcap::first-letter { color: var(--gold-on-dark); }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 1.05rem 2.1rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out),
              border-color 180ms var(--ease-out);
}
.btn-primary { background: var(--btn-gold); color: #fff; }
.btn-primary:hover { background: var(--btn-gold-deep); color: #fff; }
.on-dark .btn-primary { background: var(--btn-gold); color: #fff; }
.on-dark .btn-primary:hover { background: var(--btn-gold-deep); color: #fff; }
.btn-ghost { background: transparent; color: var(--charcoal); border-color: var(--btn-gold); }
.btn-ghost:hover { background: var(--btn-gold); color: #fff; border-color: var(--btn-gold); }
.on-dark .btn-ghost { color: var(--paper); border-color: var(--btn-gold); }
.on-dark .btn-ghost:hover { background: var(--btn-gold); color: #fff; border-color: var(--btn-gold); }

/* Owner-directed oversized CTA — double the standard button, font included */
.btn-xl { font-size: calc(var(--fs-micro) * 1.6); padding: 1.68rem 3.36rem; }

.text-link {
  font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
  font-size: var(--fs-micro); text-decoration: none; color: var(--charcoal);
  border-bottom: 1px solid var(--gold); padding-bottom: 4px;
}
.text-link:hover { border-bottom-color: var(--charcoal); }
.on-dark .text-link { color: var(--paper); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; margin-top: var(--s-5); }

/* ---- Hello bar + header stack ------------------------------------------- */
/* The bar and the nav travel together. .hello-shell is a one-row grid; sliding
   that row to 0fr collapses the bar and lifts the nav with it, which no
   height/transform pair does as cleanly across wrapping text. */
.top-stack { position: sticky; top: 0; z-index: 50; }
/* Anchor landings clear the sticky nav instead of hiding under it. */
section[id], [id].scroll-target { scroll-margin-top: clamp(4.5rem, 9vh, 6.5rem); }
.hello-shell {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows 160ms cubic-bezier(0.32, 0, 0.16, 1);
}
.top-stack.tucked .hello-shell { grid-template-rows: 0fr; }
.hello-bar {
  overflow: hidden; min-height: 0;
  background: var(--olive-deep); color: var(--gold-on-dark);
  font-family: var(--font-display); font-style: italic; font-weight: 520;
  font-size: 1.05rem; letter-spacing: 0.02em;
  text-align: center;
}
.hello-bar > .wrap { padding-block: 0.55rem; }
.hello-bar a { color: var(--gold-on-dark); text-decoration: none; border-bottom: 1px solid rgba(207, 167, 107, 0.45); }
.hello-bar a:hover { border-bottom-color: var(--gold-on-dark); }

@media (prefers-reduced-motion: reduce) {
  .hello-shell { transition: none; }
}

/* ---- Header ------------------------------------------------------------- */
.site-header {
  background: rgba(246, 241, 232, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.nav-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding-block: 0.85rem;
}
/* Stacked mini-lockup (from the concept mockups) */
.brand { text-decoration: none; color: var(--charcoal); text-align: center; line-height: 1; }
.brand .brand-name {
  display: block; font-family: var(--font-display); font-weight: 540;
  font-size: 1.42rem; letter-spacing: 0.30em; text-indent: 0.30em;
}
.brand .brand-sub {
  display: flex; align-items: center; justify-content: center; gap: 0.55rem;
  margin-top: 0.32rem;
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.42em; text-indent: 0.42em;
  text-transform: uppercase; color: var(--gold-text);
}
.brand .brand-sub::before, .brand .brand-sub::after {
  content: ""; width: 1.6rem; height: 1px; background: var(--gold);
}
.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); list-style: none; margin: 0; padding: 0; }
.nav-links a:not(.btn) {
  text-decoration: none; color: var(--charcoal); font-weight: 700;
  font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding-bottom: 5px; border-bottom: 1px solid transparent;
}
.nav-links a:not(.btn):hover, .nav-links a[aria-current="page"]:not(.btn) { border-bottom-color: var(--olive); }
.nav-links .btn { padding: 0.75rem 1.4rem; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: var(--s-2); color: var(--charcoal); }
.nav-toggle svg { width: 26px; height: 26px; }

@media (max-width: 62em) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ivory); border-bottom: 1px solid var(--hairline);
    padding: var(--s-3) var(--s-4) var(--s-4);
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links li { border-bottom: 1px solid var(--hairline); }
  .nav-links li:last-child { border-bottom: 0; padding-top: var(--s-3); }
  .nav-links a:not(.btn) { display: block; padding: 0.9rem 0; border-bottom: 0; }
  .nav-links .btn { display: block; }
}

/* ---- Hero: editorial split, photo bleeding to the edge ------------------- */
.hero { padding: 0; position: relative; background: var(--cream); }
/* Cap the hero at the content width so the photo stops scaling on
   ultra-wide windows; the copy's left pad shrinks in step so the
   headline stays aligned with the sections below at every width. */
.hero-split { display: grid; min-height: min(82vh, 46rem); max-width: var(--max-w); margin-inline: auto; }
@media (min-width: 56em) {
  .hero-split { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); }
}
.hero-copy {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 4vw, 4rem)
           clamp(3rem, 7vw, 6rem)
           clamp(0rem, calc(1.5rem - (100vw - var(--max-w)) / 2), 1.5rem);
}
.hero-copy .lead { max-width: 32rem; }
.hero-media { position: relative; min-height: 56vw; }
@media (min-width: 56em) { .hero-media { min-height: 0; } }
.hero-media img, .hero-media .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {                 /* thin keyline inset over the photo */
  content: ""; position: absolute; inset: 1.1rem;
  border: 1px solid rgba(246, 241, 232, 0.6);
  pointer-events: none;
}
/* Sub-hero strip: quiet fact line under the hero */
.hero-strip { border-top: 1px solid var(--hairline); padding: 1.1rem 0; }
.hero-strip .wrap {
  display: flex; flex-wrap: wrap; gap: 0.6rem 2.5rem; justify-content: space-between;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold-text);
}
.hero-strip .gold { color: var(--gold-text); }
/* Inline star sits on the text baseline (the global `svg { display:block }`
   would otherwise break it out onto its own line) */
.star {
  display: inline-block; width: 0.9em; height: 0.9em;
  vertical-align: 0.05em; margin: 0 0.1em;
}

/* ---- Photography -------------------------------------------------------- */
/* Offset gold keyline behind photos — the editorial frame device */
.photo { position: relative; }
.photo img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.photo.frame { margin: 0 12px 12px 0; }
.photo.frame::after {
  content: ""; position: absolute; inset: 0;
  transform: translate(12px, 12px);
  border: 1px solid var(--gold);
  z-index: 0;
}
figure.photo { margin: 0; }

/* ---- Photo carousel (About: The Approach) --------------------------------
   Manual crossfade only — no autoplay. The nav sits quietly at the foot
   of the image: thin chevrons + small dots on a soft scrim. */
.carousel-track { position: relative; aspect-ratio: 4 / 5; z-index: 1; }
.carousel-track img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 480ms var(--ease-out);
}
.carousel-track img.active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .carousel-track img { transition: none; } }
.carousel-track::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 5rem;
  background: linear-gradient(to top, rgba(36, 38, 32, 0.35), transparent);
  pointer-events: none;
}
.carousel-nav {
  position: absolute; left: 0; right: 0; bottom: 0.8rem; z-index: 2;
  display: none; align-items: center; justify-content: center; gap: 0.9rem;
}
html.js .carousel-nav { display: flex; }
/* Milky-glass circular buttons; the chevron reads as negative space
   cut into the glass */
.carousel-btn {
  width: 2.1rem; height: 2.1rem; border-radius: 50%; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(247, 245, 240, 0.34);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(247, 245, 240, 0.45);
  color: rgba(36, 38, 32, 0.55);
  cursor: pointer;
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out);
}
.carousel-btn:hover, .carousel-btn:focus-visible {
  background: rgba(247, 245, 240, 0.55);
  color: rgba(36, 38, 32, 0.8);
}
.carousel-dots { display: flex; gap: 0.5rem; }
.carousel-dot {
  width: 7px; height: 7px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid rgba(246, 241, 232, 0.85); background: transparent;
  transition: background-color 180ms var(--ease-out);
}
.carousel-dot.active { background: rgba(246, 241, 232, 0.95); }

/* Photo slot — styled frame fallback, real photo when supplied */
.ph {
  position: relative;
  background: linear-gradient(160deg, var(--cream) 0%, var(--sage) 115%);
  display: flex; align-items: flex-end;
  min-height: 300px;
}
.ph::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cpath d='M60 300 C 80 220 70 160 110 120 M110 120 c -18 -2 -30 8 -34 22 M110 120 c 16 -8 32 -6 40 4 M92 180 c -16 0 -26 10 -28 22 M92 180 c 14 -8 28 -4 34 6' fill='none' stroke='%23F7F5F0' stroke-opacity='0.65' stroke-width='1.6'/%3E%3C/svg%3E");
  background-size: cover;
}
.ph .ph-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.ph .ph-label {
  position: relative; margin: var(--s-3);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--olive); background: rgba(246, 241, 232, 0.9);
  padding: 0.45rem 0.7rem;
  max-width: calc(100% - 2rem);
}
.ph-tall { aspect-ratio: 4 / 5; }

/* ---- Editorial mosaic --------------------------------------------------- */
.mosaic { display: grid; gap: clamp(0.8rem, 1.6vw, 1.4rem); grid-template-columns: repeat(2, 1fr); }
.mosaic .photo { overflow: hidden; }
.mosaic img { aspect-ratio: 1; }
@media (min-width: 46em) {
  .mosaic { grid-template-columns: repeat(12, 1fr); align-items: start; }
  .mosaic .m-lg { grid-column: span 5; }
  .mosaic .m-md { grid-column: span 4; }
  .mosaic .m-sm { grid-column: span 3; }
  .mosaic .m-lg img { aspect-ratio: 4 / 5; }
  .mosaic .m-md img { aspect-ratio: 3 / 4; }
  .mosaic .m-sm img { aspect-ratio: 3 / 4; }
  .mosaic .drop { margin-top: var(--s-6); }     /* staggered editorial rhythm */
}

/* Even six-tile gallery (01 · Real Weddings) */
.gallery-even { display: grid; gap: clamp(0.8rem, 1.6vw, 1.4rem); grid-template-columns: repeat(2, 1fr); }
.gallery-even .photo { overflow: hidden; }
.gallery-even img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; }
@media (min-width: 46em) { .gallery-even { grid-template-columns: repeat(3, 1fr); } }

/* Four-across portfolio wall. Flex rather than grid so a short final row
   centres under the full ones instead of hanging off the left edge. */
.gallery-quad {
  --gq: clamp(0.6rem, 1.3vw, 1.1rem);
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gq);
}
.gallery-quad .photo { flex: 0 0 calc((100% - var(--gq)) / 2); overflow: hidden; margin: 0; }
.gallery-quad img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; display: block; }
@media (min-width: 40em) { .gallery-quad .photo { flex-basis: calc((100% - 2 * var(--gq)) / 3); } }
@media (min-width: 60em) { .gallery-quad .photo { flex-basis: calc((100% - 3 * var(--gq)) / 4); } }
[data-lightbox-gallery] img { cursor: zoom-in; transition: opacity 180ms ease, transform 320ms cubic-bezier(0.2, 0, 0.2, 1); }
[data-lightbox-gallery] .photo:hover img { opacity: 0.92; transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) {
  [data-lightbox-gallery] img { transition: none; }
  [data-lightbox-gallery] .photo:hover img { transform: none; }
}

/* ---- Lightbox ----------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3.5rem);
  background: rgba(26, 26, 24, 0.9);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: lb-in 180ms ease both;
}
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lb-stage { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); max-width: 100%; }
.lb-img {
  max-width: min(100%, 78rem); max-height: 78vh;
  width: auto; height: auto; object-fit: contain;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  animation: lb-rise 220ms cubic-bezier(0.2, 0, 0.2, 1) both;
}
@keyframes lb-rise { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
.lb-cap {
  margin: 0; text-align: center; max-width: 56ch;
  color: rgba(246, 241, 232, 0.82); font-size: var(--fs-small);
}
.lb-btn {
  position: absolute; display: grid; place-items: center;
  width: 3rem; height: 3rem; padding: 0;
  border: 1px solid rgba(246, 241, 232, 0.28);
  background: rgba(246, 241, 232, 0.08);
  color: var(--paper); cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.lb-btn:hover { background: rgba(246, 241, 232, 0.18); border-color: rgba(246, 241, 232, 0.5); }
.lb-btn svg { width: 1.4rem; height: 1.4rem; }
.lb-close { top: clamp(0.7rem, 2vw, 1.6rem); right: clamp(0.7rem, 2vw, 1.6rem); }
.lb-prev { left: clamp(0.4rem, 1.6vw, 1.6rem); top: 50%; transform: translateY(-50%); }
.lb-next { right: clamp(0.4rem, 1.6vw, 1.6rem); top: 50%; transform: translateY(-50%); }
body.lb-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lb-img { animation: none; }
}

/* ---- Brand interlude (stacked lockup from the mockups) ------------------- */
.lockup { text-align: center; }
.lockup .lk-name {
  font-family: var(--font-display); font-weight: 520;
  font-size: clamp(2.1rem, 6vw, 4.4rem);
  letter-spacing: 0.16em; text-indent: 0.16em;
  line-height: 1.08;
}
.lockup .lk-rule {
  width: clamp(3rem, 8vw, 5.5rem); height: 1px; background: var(--gold);
  margin: 1.2rem auto 0;
}
.lockup .lk-desc {
  margin-top: 1.3rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.5em; text-indent: 0.5em;
  text-transform: uppercase; color: var(--gold-text);
}
.lockup .lk-tag {
  margin-top: 0.9rem;
  font-family: var(--font-display); font-style: italic; font-weight: 460;
  font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--ink-soft);
}
.on-dark .lockup .lk-desc { color: var(--gold-on-dark); }
.on-dark .lockup .lk-tag { color: rgba(246, 241, 232, 0.78); }

/* ---- Bloom emblem & seal ------------------------------------------------- */
.emblem-line { color: var(--gold); }
.on-dark .emblem-line { color: var(--gold-on-dark); }
.emblem-divider { display: block; margin: 0 auto var(--s-4); width: 3.2rem; height: auto; }
.seal { width: clamp(6.5rem, 10vw, 8.5rem); height: auto; margin-inline: auto; }

/* ---- Claims (proof attached to testimonials) ----------------------------- */
.claims { display: grid; gap: 0; border-top: 1px solid var(--hairline); }
@media (min-width: 46em) { .claims { grid-template-columns: repeat(3, 1fr); } }
.claim {
  padding: var(--s-5) var(--s-4) var(--s-5) 0;
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 46em) {
  .claim { border-bottom: 0; border-right: 1px solid var(--hairline); padding-inline: var(--s-5); }
  .claim:first-child { padding-left: 0; }
  .claim:last-child { border-right: 0; }
}
.claim .claim-num { font-family: var(--font-display); font-style: italic; font-weight: 460; font-size: 1.6rem; color: var(--gold-text); margin-bottom: var(--s-3); }
.claim h3 { font-size: var(--fs-h3); }
.claim blockquote {
  margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 450;
  font-size: 1.12rem; line-height: 1.55; color: var(--charcoal);
}
.claim figcaption { font-size: var(--fs-small); color: var(--ink-soft); margin-top: var(--s-3); }

/* Anchor testimonial + supporting voices (§23.I) */
.anchor-quote {
  margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 450;
  font-size: clamp(1.3rem, 2.6vw, 1.85rem); line-height: 1.5; color: var(--charcoal);
}
.voice { margin: 0; border-top: 1px solid var(--hairline); padding-top: var(--s-4); }
.voice blockquote {
  margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 450;
  font-size: 1.05rem; line-height: 1.55; color: var(--charcoal);
}
.voice figcaption { font-size: var(--fs-small); color: var(--ink-soft); margin-top: var(--s-3); }
.trust-strip {
  margin-top: var(--s-6); padding-top: var(--s-4);
  border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between; align-items: baseline;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--olive);
}
/* Verified Google rating — the score carries display weight so it reads as
   evidence rather than another small-caps label. */
.trust-rating {
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  color: var(--gold-text); letter-spacing: 0.14em;
}
/* Under a page headline the rating is a caption, not a banner — micro caps,
   and the numeral only a shade larger than the words beside it. */
.hero-rating {
  /* Tight to the headline it belongs to, open before the lead beneath. */
  margin-top: var(--s-3); margin-bottom: var(--s-4);
  font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.hero-rating .score { font-size: 1.35rem; }
.trust-rating .score {
  font-family: var(--font-display); font-weight: 560; font-size: 1.7rem;
  letter-spacing: 0; line-height: 1;
}
.trust-rating .star { width: 1.05em; height: 1.05em; }
.trust-strip .owner-note {
  font-weight: 400; letter-spacing: 0.02em; text-transform: none;
  color: var(--gold-text); font-size: var(--fs-small);
}

/* Owner-input flags */
.owner-input {
  border: 1px dashed var(--blush);
  background: var(--blush-soft);
  padding: var(--s-3);
  font-size: var(--fs-small);
  color: var(--olive-deep);
}
.owner-input strong { letter-spacing: 0.1em; text-transform: uppercase; font-size: var(--fs-micro); display: block; margin-bottom: var(--s-1); }

/* ---- Process ------------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: var(--s-5); }
@media (min-width: 46em) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); } }
.step { position: relative; padding-top: var(--s-4); border-top: 1px solid var(--hairline); }
/* Number sits on the heading line — "1 CHECK YOUR DATE" (owner) */
.step h3 {
  display: flex; align-items: baseline; gap: 0.5rem;
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.step h3::before {
  counter-increment: step;
  content: counter(step);
  flex: 0 0 auto;
  font-family: var(--font-display); font-style: italic; font-weight: 450;
  font-size: 1.9rem; line-height: 1; letter-spacing: 0; color: var(--gold);
}
.step p { font-size: var(--fs-small); color: var(--ink-soft); }

/* ---- Services ------------------------------------------------------------ */
.svc { display: grid; gap: var(--s-4); }
@media (min-width: 46em) { .svc { grid-template-columns: repeat(3, 1fr); } }
.svc-item img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; }
.svc-item h3 { margin-top: var(--s-4); }
.svc-item .muted { font-size: var(--fs-small); }

/* ---- Pricing ------------------------------------------------------------- */
/* Two columns × two rows. Because the four tables are siblings in one grid
   rather than stacked inside two column wrappers, row 2's captions (Trials,
   Extras) sit on the same baseline even though the Bride table above carries
   a two-line note and Bridal Party carries none. */
.price-grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem) clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 46em) { .price-grid { grid-template-columns: repeat(2, 1fr); } }
.price-grid > * { min-width: 0; }
.price-table { width: 100%; border-collapse: collapse; }
.price-table caption {
  text-align: left; font-family: var(--font-display); font-size: var(--fs-h3);
  font-weight: 540; padding-bottom: var(--s-4);
}
.price-table td {
  text-align: left; padding: 0.95rem 0.25rem;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.price-table td:last-child { text-align: right; white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
.price-table .note-row td { font-size: var(--fs-small); color: var(--ink-soft); font-weight: 400; text-align: left; white-space: normal; }
/* "Inquire" sits in the price column but is not a figure — lighter and
   italic so the eye reads it as an invitation, not an amount. */
.price-table td.price-ask { font-weight: 400; font-style: italic; color: var(--ink-soft); }

/* ---- FAQ ------------------------------------------------------------------ */
.faq-list { max-width: 48rem; }
/* Two independent question columns on the FAQ page (opening an item
   only reflows its own column) */
.faq-cols { max-width: none; display: grid; gap: 0 clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 52em) { .faq-cols { grid-template-columns: 1fr 1fr; } }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-col > .faq-item:first-child { border-top: 1px solid var(--hairline); }
.faq-item summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
  padding: 1.05rem 0;
  font-family: var(--font-display); font-size: 1.22rem; font-weight: 600;
  transition: color 150ms var(--ease-out);
}
.faq-item summary:hover { color: var(--olive); }
.faq-item[open] summary { color: var(--olive); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex: 0 0 auto;
  font-family: var(--font-body); font-size: 1.3rem; font-weight: 300;
  color: var(--gold); transition: transform 200ms var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-body { padding: 0 0 var(--s-4); }
.faq-item .faq-body p { color: var(--ink-soft); }

/* ---- Forms ---------------------------------------------------------------- */
.form-grid { display: grid; gap: var(--s-4); }
@media (min-width: 40em) {
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid .full { grid-column: 1 / -1; }
}
.field label {
  display: block; font-weight: 700; font-size: var(--fs-micro);
  letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: var(--s-2);
}
.field .hint { font-weight: 400; color: var(--ink-soft); letter-spacing: 0.02em; text-transform: none; font-size: var(--fs-micro); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--charcoal);
  background: #fff; border: 1px solid var(--sage);
  padding: 0.85rem 0.95rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--olive); box-shadow: 0 0 0 3px var(--blush-soft);
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field .error-msg { display: none; color: #8C2F22; font-size: var(--fs-small); margin-top: var(--s-1); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #8C2F22; }
.field.invalid .error-msg { display: block; }

.form-confirm {
  display: none;
  border: 1px solid var(--gold);
  background: var(--cream);
  padding: var(--s-5);
  text-align: center;
}
.form-confirm.visible { display: block; }
.form-confirm h2 { font-family: var(--font-display); font-size: var(--fs-h3); }

/* ---- Footer (charcoal, centered lockup — from the mockups) ---------------- */
.site-footer { background: var(--olive-deep); color: rgba(246, 241, 232, 0.82); }
.site-footer .wrap { padding-block: var(--s-7) var(--s-4); }
.footer-lockup { margin-bottom: var(--s-6); }
.footer-lockup .lk-name { font-size: clamp(1.6rem, 3.4vw, 2.3rem); color: var(--paper); }
.footer-lockup .lk-desc { font-size: 0.62rem; margin-top: 0.9rem; color: var(--gold-on-dark); }
.footer-lockup .lk-tag { font-size: 1.05rem; margin-top: 0.7rem; color: rgba(246, 241, 232, 0.72); }
.footer-social-text { color: rgba(246, 241, 232, 0.65); }
.footer-social-text a { color: rgba(246, 241, 232, 0.9); }
.footer-bottom .footer-legal a { color: inherit; text-decoration: none; }
.footer-bottom .footer-legal a:hover { color: rgba(246, 241, 232, 0.9); }
.footer-cols {
  display: grid; gap: var(--s-5);
  border-top: 1px solid var(--hairline-dark);
  padding-top: var(--s-5);
}
@media (min-width: 46em) { .footer-cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .footer-cols { grid-template-columns: 1fr 1fr 1.4fr 0.8fr; } }

/* Social icon links (footer "Follow" column, About "Follow along") */
.social-links { display: flex; align-items: center; gap: 1.1rem; }
.social-links a { display: inline-flex; padding: 0.15rem; color: inherit; }
.social-links svg { display: block; }
.site-footer .social-links a { color: var(--gold-on-dark); }
.site-footer .social-links a:hover { color: var(--paper); }
.social-follow {
  margin-top: var(--s-5);
  display: flex; align-items: center; justify-content: center; gap: 1rem;
}
.social-follow .small { letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; }
.social-follow .social-links a { color: var(--gold-text); }
.social-follow .social-links a:hover { color: var(--charcoal); }
.site-footer h4 {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--gold-on-dark); margin-bottom: var(--s-3);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--s-2); }
.site-footer a { color: rgba(246, 241, 232, 0.9); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-bottom {
  margin-top: var(--s-6); padding-top: var(--s-4);
  border-top: 1px solid var(--hairline-dark);
  display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between;
  font-size: var(--fs-small); color: rgba(246, 241, 232, 0.6);
}
.footer-bottom .display-italic { color: var(--gold-on-dark); }
.footer-seal-line { display: inline-flex; align-items: center; gap: 0.65rem; }
.footer-seal-line .seal-mini { width: 2.4rem; height: auto; }

/* ---- Parallax bands (fixed-background version, restored by owner) --------
   The imagery holds still while the page scrolls over it.
   .parallax-smokies shows images/smokies.jpg, falling back to the drawn
   ridge SVG. .parallax-pattern shows the owner's fleur damask
   (assets/background-fleur.jpg). Touch devices fall back to static
   edge-to-edge bands. */
.parallax {
  min-height: clamp(18rem, 52vh, 30rem);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.parallax-smokies {
  background-image: url('../images/smokies.jpg'), url('../assets/smokies-ridges.svg');
}
.parallax-pattern {
  min-height: clamp(11rem, 32vh, 18rem);
  background-color: var(--cream);
  background-image: url('../assets/background-fleur.jpg');
}
@media (hover: none), (max-width: 52em) {
  .parallax { background-attachment: scroll; }
}

/* ---- Family closing (About) ---------------------------------------------- */
.family-photo { max-width: 52rem; margin-inline: auto; }
.family-photo .ph { aspect-ratio: 3 / 2; min-height: 0; }
.family-caption {
  font-family: var(--font-display); font-style: italic; font-weight: 460;
  font-size: 1.15rem; color: var(--ink-soft); text-align: center;
  margin-top: var(--s-4);
  max-width: 72ch;   /* ~20% wider than the 60ch body measure (owner) */
  margin-inline: auto;
}

/* ---- Methodology (About: The Approach) — editorial subheads over thin
   rules, deliberately not numbered steps */
.method { margin-top: var(--s-5); }
.method-item { padding: 1.1rem 0 0.2rem; border-top: 1px solid var(--hairline); }
.method-h {
  font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--charcoal);
  margin: 0 0 0.45rem;
}
.method-item p { font-size: var(--fs-small); }

/* ---- Two-step inquiry form ------------------------------------------------
   Fieldsets carry the grid so each step lays out like the old single form.
   Without JS both steps render and the form works as one long form. */
.form-step { border: 0; margin: 0; padding: 0; min-width: 0; }
/* An author `display` declaration beats the UA sheet's [hidden] rule, so
   .form-grid would keep a hidden fieldset visible. Make hidden mean hidden. */
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.step-indicator {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--gold-text); margin: 0 0 var(--s-4);
}
.step-actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-3) var(--s-4); margin-top: var(--s-2);
}
.step-actions .text-link {
  background: none; border: 0; border-bottom: 1px solid var(--gold);
  cursor: pointer; font-family: var(--font-body);
}

/* ---- Legal documents (privacy, terms) -------------------------------------
   Long-form prose: smaller display headings, comfortable rhythm. */
.legal-doc h2.display { font-size: 1.35rem; margin-top: var(--s-5); }
.legal-doc h2.display:first-of-type { margin-top: var(--s-4); }
.legal-doc p, .legal-doc li { color: var(--ink-soft); }
.legal-doc ul { margin: 0 0 var(--s-3); padding-left: 1.2rem; max-width: var(--measure); }
.legal-doc li { margin-bottom: 0.4rem; }

/* ---- Reveal (reduced-motion aware) ---------------------------------------- */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 650ms var(--ease-out), transform 650ms var(--ease-out); }
  .js .reveal.in { opacity: 1; transform: none; }
}

/* ---- Print ----------------------------------------------------------------- */
@media print {
  .site-header, .nav-toggle, .site-footer, .btn { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  body { background: #fff; }
}