/* =========================================================
   N & M  ::  Wedding
   Deep brown, beaten gold, zebra hide
   ========================================================= */

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

:root {
  /* --- Browns --- */
  --espresso:   #150C06;
  --cocoa:      #241408;
  --umber:      #38200F;
  --bark:       #55341C;
  --clay:       #7A4B27;

  /* --- Gold --- */
  --gold:       #C9A227;
  --gold-lt:    #F0DB96;
  --gold-pale:  #FFF3C4;
  --gold-dark:  #8A6712;

  /* --- Zebra --- */
  --zblack:     #120C08;
  --zwhite:     #FAF4E8;

  /* --- Neutrals --- */
  --cream:      #F9F2E4;
  --bone:       #EFE2CA;

  /* --- Contextual (overridden inside light panels) --- */
  --ink:        var(--cream);
  --charcoal:   var(--bone);
  --muted:      #C4A87E;
  --gold-deep:  #E0BC55;
  --ivory:      var(--cream);
  --line:       rgba(201, 162, 39, 0.34);
  --line-soft:  rgba(201, 162, 39, 0.18);

  /* --- Type --- */
  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans:  'Jost', 'Helvetica Neue', Arial, sans-serif;

  /* --- Rhythm --- */
  --page:    1280px;
  --narrow:  820px;
  --gutter:  clamp(1.5rem, 5vw, 5rem);
  --section: clamp(5.5rem, 11vw, 10rem);
  --band:    44px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --zebra: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Crect x='-400' y='-2' width='1200' height='64' fill='%23FAF4E8'/%3E%3Cpath d='M-390,0 C-394,20 -415,40 -418,60 L-398,60 C-395,40 -376,20 -372,0 Z' fill='%23120C08'/%3E%3Cpath d='M-348,0 C-352,20 -357,40 -360,60 L-350,60 C-347,40 -340,20 -336,0 Z' fill='%23120C08'/%3E%3Cpath d='M-312,0 C-316,20 -325,40 -328,60 L-308,60 C-305,40 -292,20 -288,0 Z' fill='%23120C08'/%3E%3Cpath d='M-266,0 C-270,20 -279,40 -282,60 L-282,60 C-279,40 -260,20 -256,0 Z' fill='%23120C08'/%3E%3Cpath d='M-234,0 C-238,20 -221,40 -224,60 L-204,60 C-201,40 -216,20 -212,0 Z' fill='%23120C08'/%3E%3Cpath d='M-188,0 C-192,20 -203,40 -206,60 L-199,60 C-196,40 -180,20 -176,0 Z' fill='%23120C08'/%3E%3Cpath d='M-154,0 C-158,20 -183,40 -186,60 L-162,60 C-159,40 -134,20 -130,0 Z' fill='%23120C08'/%3E%3Cpath d='M-108,0 C-112,20 -125,40 -128,60 L-128,60 C-125,40 -102,20 -98,0 Z' fill='%23120C08'/%3E%3Cpath d='M-76,0 C-80,20 -67,40 -70,60 L-48,60 C-45,40 -58,20 -54,0 Z' fill='%23120C08'/%3E%3Cpath d='M-32,0 C-36,20 -57,40 -60,60 L-52,60 C-49,40 -24,20 -20,0 Z' fill='%23120C08'/%3E%3Cpath d='M10,0 C6,20 -15,40 -18,60 L2,60 C5,40 24,20 28,0 Z' fill='%23120C08'/%3E%3Cpath d='M52,0 C48,20 43,40 40,60 L50,60 C53,40 60,20 64,0 Z' fill='%23120C08'/%3E%3Cpath d='M88,0 C84,20 75,40 72,60 L92,60 C95,40 108,20 112,0 Z' fill='%23120C08'/%3E%3Cpath d='M134,0 C130,20 121,40 118,60 L118,60 C121,40 140,20 144,0 Z' fill='%23120C08'/%3E%3Cpath d='M166,0 C162,20 179,40 176,60 L196,60 C199,40 184,20 188,0 Z' fill='%23120C08'/%3E%3Cpath d='M212,0 C208,20 197,40 194,60 L201,60 C204,40 220,20 224,0 Z' fill='%23120C08'/%3E%3Cpath d='M246,0 C242,20 217,40 214,60 L238,60 C241,40 266,20 270,0 Z' fill='%23120C08'/%3E%3Cpath d='M292,0 C288,20 275,40 272,60 L272,60 C275,40 298,20 302,0 Z' fill='%23120C08'/%3E%3Cpath d='M324,0 C320,20 333,40 330,60 L352,60 C355,40 342,20 346,0 Z' fill='%23120C08'/%3E%3Cpath d='M368,0 C364,20 343,40 340,60 L348,60 C351,40 376,20 380,0 Z' fill='%23120C08'/%3E%3Cpath d='M410,0 C406,20 385,40 382,60 L402,60 C405,40 424,20 428,0 Z' fill='%23120C08'/%3E%3Cpath d='M452,0 C448,20 443,40 440,60 L450,60 C453,40 460,20 464,0 Z' fill='%23120C08'/%3E%3Cpath d='M488,0 C484,20 475,40 472,60 L492,60 C495,40 508,20 512,0 Z' fill='%23120C08'/%3E%3Cpath d='M534,0 C530,20 521,40 518,60 L518,60 C521,40 540,20 544,0 Z' fill='%23120C08'/%3E%3Cpath d='M566,0 C562,20 579,40 576,60 L596,60 C599,40 584,20 588,0 Z' fill='%23120C08'/%3E%3Cpath d='M612,0 C608,20 597,40 594,60 L601,60 C604,40 620,20 624,0 Z' fill='%23120C08'/%3E%3Cpath d='M646,0 C642,20 617,40 614,60 L638,60 C641,40 666,20 670,0 Z' fill='%23120C08'/%3E%3Cpath d='M692,0 C688,20 675,40 672,60 L672,60 C675,40 698,20 702,0 Z' fill='%23120C08'/%3E%3Cpath d='M724,0 C720,20 733,40 730,60 L752,60 C755,40 742,20 746,0 Z' fill='%23120C08'/%3E%3Cpath d='M768,0 C764,20 743,40 740,60 L748,60 C751,40 776,20 780,0 Z' fill='%23120C08'/%3E%3C/svg%3E");

  --foil: linear-gradient(101deg,
    #8A6712 0%, #C9A227 12%, #F0DB96 26%, #FFF3C4 34%,
    #D8B441 46%, #8A6712 58%, #E8CE72 74%, #C9A227 88%, #8A6712 100%);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cocoa);
  color: var(--bone);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.02rem;
  line-height: 1.78;
  letter-spacing: 0.012em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- Type ---------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.06;
  color: var(--ink);
  margin: 0 0 0.55em;
  letter-spacing: 0.003em;
}
h1 {
  font-size: clamp(2.7rem, 7.6vw, 6.2rem);
  font-weight: 300;
  overflow-wrap: break-word;
}
h2 { font-size: clamp(2.3rem, 5.4vw, 4.2rem); font-weight: 300; }
h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
h4 { font-size: 1.15rem; }
p  { margin: 0 0 1.35em; }
p:last-child { margin-bottom: 0; }

/* Beaten-gold headings on dark ground */
.hero h1,
.page-hero h1,
.section:not(.section--bone) h2,
.cta-band h2,
.day-head h2,
.footer-monogram {
  background: var(--foil);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* ...but never inside a light panel */
.form-card h2, .form-card h3,
.account-card h2, .account-card h3,
.section--bone h2, .section--bone h3 {
  background: none;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero h1, .page-hero h1, .cta-band h2, .day-head h2,
  .footer-monogram, .monogram, .count-num,
  .section:not(.section--bone) h2 {
    color: var(--gold-lt);
    -webkit-text-fill-color: var(--gold-lt);
  }
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.5rem;
  display: block;
}
.lede {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  line-height: 1.6;
  color: var(--gold-lt);
  font-style: italic;
  font-weight: 300;
}
.script { font-family: var(--serif); font-style: italic; font-weight: 300; }

/* ---------- Light panels: flip the contextual tokens ---------- */
.section--bone,
.form-card,
.account-card,
.lightbox-caption {
  --ink:       #150C06;
  --charcoal:  #38200F;
  --muted:     #6B4226;
  --gold-deep: #8A6712;
  --line:      rgba(122, 75, 39, 0.3);
  --line-soft: rgba(122, 75, 39, 0.16);
}

/* ---------- Zebra ---------- */
.zebra-band,
.section::before,
.site-footer::before,
.hero::after {
  background-image: var(--zebra);
  background-size: 400px 60px;
  background-repeat: repeat-x;
}
.zebra-band { height: var(--band); width: 100%; }
.stripe-rule {
  height: 34px;
  width: clamp(240px, 34vw, 340px);
  margin: 0 auto;
  background-image: var(--zebra);
  background-size: 400px 60px;
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
}
.stripe-rule.left { margin-left: 0; }
.stripe-band {
  height: var(--band);
  width: 100%;
  background-image: var(--zebra);
  background-size: 400px 60px;
}
.gold-diamond {
  display: block;
  width: 13px; height: 13px;
  margin: 0 auto;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 0 5px rgba(201,162,39,0.16), 0 0 0 6px rgba(201,162,39,0.4);
}

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { width: 100%; max-width: var(--narrow); margin: 0 auto; padding: 0 var(--gutter); }

.section {
  padding: calc(var(--section) + var(--band)) 0 var(--section);
  position: relative;
  background: var(--cocoa);
}
.section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--band);
  border-bottom: 1px solid var(--gold);
}
/* ---------- The film, running faintly behind a section ---------- */
.has-film { overflow: hidden; }
.has-film::before { z-index: 1; }          /* keep the zebra band above the wash */
.section-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 2.4s var(--ease);
  mix-blend-mode: screen;                  /* on the dark grounds: a faint glow */
  --film-level: 0.12;
}
.section--bone .section-film,
.section--bone.has-film .section-film {
  mix-blend-mode: multiply;                /* on cream: laid in like a watermark */
  --film-level: 0.07;
}
.page-hero.has-film .section-film { --film-level: 0.16; }   /* already behind a scrim */
.has-film.is-live .section-film { opacity: var(--film-level); }
.has-film > .wrap,
.has-film > .wrap-narrow,
.has-film > .center { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .has-film.is-live .section-film { opacity: 0; }
}

.section--tight { padding: calc(3.5rem + var(--band)) 0 3.5rem; }
.section--bone { background: var(--cream); color: var(--umber); }
.section--ink  { background: var(--espresso); }
.center { text-align: center; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 1.6rem 0;
  transition: background 0.45s var(--ease), padding 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.site-header.is-solid {
  background: rgba(21, 12, 6, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 46px -30px rgba(0,0,0,0.9);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }

.monogram {
  font-family: var(--serif);
  font-size: 1.85rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  line-height: 1;
  white-space: nowrap;
  background: var(--foil);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.monogram span { font-style: italic; padding: 0 0.1em; }

.nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.1rem); }
.nav a {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bone);
  position: relative;
  padding: 0.45rem 0;
  transition: color 0.3s var(--ease);
  white-space: nowrap;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background-image: var(--zebra);
  background-size: 40px 100%;
  transition: width 0.4s var(--ease);
}
.nav a:hover { color: var(--gold-lt); }
.nav a:hover::after, .nav a[aria-current="page"]::after { width: 100%; }
.nav a[aria-current="page"] { color: var(--gold); }

.nav-cta {
  border: 1px solid var(--gold);
  padding: 0.75rem 1.6rem !important;
  color: var(--gold-lt) !important;
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.nav-cta::after { display: none; }
.nav-cta:hover { background: var(--gold); color: var(--espresso) !important; }

/* Burger */
.burger {
  display: none;
  background: none; border: 0; cursor: pointer;
  width: 36px; height: 24px;
  position: relative; padding: 0; z-index: 120;
}
.burger span {
  position: absolute; left: 0; right: 0; height: 2px;
  background: var(--gold);
  transition: all 0.35s var(--ease);
}
.burger span:nth-child(1) { top: 3px; }
.burger span:nth-child(2) { top: 11px; }
.burger span:nth-child(3) { top: 19px; }
.burger.is-open span:nth-child(1) { top: 11px; transform: rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { top: 11px; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: var(--espresso);
}
.hero-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 20%;
  transform: scale(1.07);
  animation: heroDrift 26s var(--ease) forwards;
  filter: saturate(0.82) contrast(1.06);
}
@keyframes heroDrift { to { transform: scale(1); } }
.hero-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(36,20,8,0.28) 0%, rgba(21,12,6,0.86) 78%),
    linear-gradient(to bottom, rgba(21,12,6,0.72) 0%, rgba(21,12,6,0.3) 40%, rgba(21,12,6,0.94) 100%);
}
.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--band);
  border-top: 1px solid var(--gold);
  z-index: 3;
}

/* ---------- Paired hero: bride and groom, full height ---------- */
.hero--pair .hero-pair {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  transform: scale(1.05);
  animation: heroDrift 26s var(--ease) forwards;
}
.hero-half {
  background-size: cover;
  background-repeat: no-repeat;
  filter: saturate(0.9) contrast(1.04);
}
/* 0%, not a crop off the top: both of them stand close to the top edge of
   their photographs, so any positive value pushes their heads off screen. */
.hero-half--bride { background-position: 50% 0%; }
.hero-half--groom { background-position: 50% 0%; }

.hero-seam {
  position: absolute;
  top: 8%; bottom: 8%; left: 50%;
  width: 1px;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(201,162,39,0) 0%,
    rgba(201,162,39,0.7) 20%,
    rgba(240,219,150,0.95) 50%,
    rgba(201,162,39,0.7) 80%,
    rgba(201,162,39,0) 100%);
}

.hero-scrim--pair {
  background:
    linear-gradient(90deg,
      rgba(21,12,6,0.18) 0%, rgba(21,12,6,0.30) 18%,
      rgba(21,12,6,0.88) 50%,
      rgba(21,12,6,0.30) 82%, rgba(21,12,6,0.18) 100%),
    linear-gradient(180deg,
      rgba(21,12,6,0.75) 0%, rgba(21,12,6,0.10) 26%,
      rgba(21,12,6,0.10) 62%, rgba(21,12,6,0.88) 100%);
}

/* ---------- The film, cross-fading with the portraits ---------- */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0;
  pointer-events: none;
  filter: saturate(0.9) contrast(1.04);
  transition: opacity 1.6s var(--ease);
}
.hero--pair .hero-pair,
.hero--pair .hero-seam,
.hero-scrim--pair,
.hero-scrim--film { transition: opacity 1.6s var(--ease); }

.hero-scrim--film { opacity: 0; }

.hero.is-film .hero-video,
.hero.is-film .hero-scrim--film { opacity: 1; }
.hero.is-film .hero-pair,
.hero.is-film .hero-seam,
.hero.is-film .hero-scrim--pair { opacity: 0; }

/* The frame loses its top edge on the paired hero. Their faces sit between
   58px and 262px from the top depending on the viewport, and the frame line
   sits at 54px, so there is no height at which a full box clears both of
   them. Three sides, closed by the zebra band at the bottom. */
.hero--pair .hero-frame,
.hero--pair .hero-frame::before { border-top: 0; }

/* The type carries its own shadow, so the photographs stay bright */
.hero--pair h1 {
  filter: drop-shadow(0 2px 16px rgba(9,5,2,0.95)) drop-shadow(0 0 44px rgba(9,5,2,0.7));
}
.hero--pair .eyebrow,
.hero--pair .hero-meta {
  text-shadow: 0 2px 16px rgba(9,5,2,0.95), 0 0 30px rgba(9,5,2,0.8);
}
.hero--pair .count-unit { background: rgba(21,12,6,0.64); }
.hero--pair .stripe-rule { box-shadow: 0 4px 26px rgba(9,5,2,0.8); }

@media (max-width: 760px) {
  .hero--pair .hero-pair { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .hero-half--bride { background-position: 50% 0%; }
  .hero-half--groom { background-position: 50% 0%; }
  .hero-seam {
    top: 50%; bottom: auto; left: 12%; right: 12%;
    width: auto; height: 1px;
    background: linear-gradient(90deg,
      rgba(201,162,39,0) 0%, rgba(201,162,39,0.8) 24%,
      rgba(240,219,150,0.95) 50%,
      rgba(201,162,39,0.8) 76%, rgba(201,162,39,0) 100%);
  }
  .hero-scrim--pair {
    background:
      linear-gradient(90deg, rgba(21,12,6,0.10) 0%, rgba(21,12,6,0.42) 50%, rgba(21,12,6,0.10) 100%),
      linear-gradient(180deg,
        rgba(21,12,6,0.72) 0%, rgba(21,12,6,0.14) 24%,
        rgba(21,12,6,0.14) 60%, rgba(21,12,6,0.90) 100%);
  }
}
.hero-inner {
  position: relative;
  z-index: 2;
  color: var(--cream);
  padding: 9rem clamp(1rem, 3vw, 2.5rem) 7rem;
  max-width: 1120px;
  width: 100%;
}
.hero-frame {
  position: absolute;
  top: calc(clamp(1.4rem, 3.2vw, 3.4rem) + 5.4rem);
  right: clamp(1.4rem, 3.2vw, 3.4rem);
  bottom: clamp(1.4rem, 3.2vw, 3.4rem);
  left: clamp(1.4rem, 3.2vw, 3.4rem);
  border: 1px solid rgba(201,162,39,0.5);
  z-index: 2;
  pointer-events: none;
}
.hero-frame::before {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(201,162,39,0.24);
}
.hero h1 { margin-bottom: 0.3em; }
.hero h1 .amp { font-style: italic; display: inline-block; padding: 0 0.1em; }

.hero-meta {
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin-top: 2.2rem;
}
.hero-meta .dot { color: var(--gold); padding: 0 0.9rem; }

/* Page hero */
.page-hero {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  background: var(--espresso);
  overflow: hidden;
}
/* Taller variant so the heading sits lower, with more photo showing above it */
.page-hero--tall { min-height: 82vh; }

/* A hero that shows the whole photograph rather than a slice of it.

   The usual hero crops to fill, which is right for a wide landscape shot.
   The Heritage picture is nearly square and its subject is two people, so
   filling a wide band meant cutting their heads off. This variant fits the
   picture inside instead and lets the hero grow tall enough to hold it,
   with the dark ground framing whatever is left over. */
.page-hero--fit { min-height: min(86vh, 58vw); }
.page-hero--fit .page-hero-media {
  /* The zebra band is drawn over the bottom of the hero, so the picture has
     to end above it. Without this the band sat across the shoulders and the
     photograph looked cropped again, having just been un-cropped. */
  bottom: var(--band);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  opacity: 0.62;
}

/* The two cuts of the DD Heritage picture.

   Named here rather than passed in from the markup: a url() carried through
   a custom property is resolved against this stylesheet, not against the
   page, so 'assets/img/...' quietly became 'assets/css/assets/img/...' and
   the hero came up empty. Written out here, the relative path is honest. */
.hero-ddh { background-image: url('../img/heritage/hero.jpg'); }

/* The advert is a landscape composition: a headline set beside a photograph.
   Fitted into a tall narrow frame it shrinks to a band across the middle and
   its own words become unreadable, so a phone gets the photograph on its own.
   Only the file that matches is ever downloaded. */
@media (max-width: 899px) {
  .hero-ddh { background-image: url('../img/heritage/hero-photo.jpg'); }
  .page-hero--fit .page-hero-media { background-position: center top; }
}
/* The words sit low, so the scrim only needs to darken the bottom */
.page-hero--fit .page-hero-scrim {
  background: linear-gradient(to bottom,
    rgba(21,12,6,0.42), rgba(21,12,6,0.30) 38%, rgba(21,12,6,0.92) 84%, rgba(21,12,6,0.99));
}
@media (max-width: 640px) {
  /* On a phone the frame is already tall and narrow, so filling it wastes
     nothing: the picture fits across the width with room to spare. */
  .page-hero--fit { min-height: min(72vh, 132vw); }
}
@media (max-width: 640px) {
  .page-hero--tall { min-height: 72vh; }
}
.page-hero-media {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0.5;
  filter: saturate(0.8);
}
.page-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(21,12,6,0.82), rgba(21,12,6,0.42) 50%, rgba(21,12,6,0.97));
}
.page-hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--band);
  background-image: var(--zebra);
  background-size: 400px 60px;
  border-top: 1px solid var(--gold);
  z-index: 3;
}
.page-hero-inner {
  position: relative; z-index: 2;
  padding: 10rem 0 5rem;
  color: var(--cream);
  width: 100%;
}
.page-hero h1 { font-size: clamp(2.9rem, 7.5vw, 5.6rem); margin-bottom: 0.22em; }
.page-hero p { color: var(--bone); max-width: 48ch; margin: 0; font-size: 1.06rem; }

/* ---------- Countdown ---------- */
.countdown {
  display: flex;
  justify-content: center;
  gap: clamp(0.7rem, 2.4vw, 1.6rem);
  margin-top: 3.2rem;
}
.count-unit {
  text-align: center;
  min-width: clamp(74px, 12vw, 118px);
  padding: 1.1rem 0.5rem 0.9rem;
  border: 1px solid rgba(201,162,39,0.42);
  background: rgba(21,12,6,0.42);
  position: relative;
}
.count-unit::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--gold);
}
.count-num {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 400;
  line-height: 1;
  display: block;
  font-variant-numeric: tabular-nums;
  background: var(--foil);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.count-label {
  font-size: 0.56rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 0.75rem;
  display: block;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.71rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 1.2rem 2.8rem;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold-lt);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition: color 0.4s var(--ease);
  text-align: center;
}
.btn::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
  z-index: -1;
}
.btn::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--gold-dark);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.btn:hover { color: var(--espresso); }
.btn:hover::before { transform: scaleX(1); }
.btn:hover::after { opacity: 1; }
.btn--solid { background: var(--gold); color: var(--espresso); }
.btn--solid::before { background: var(--gold-lt); }
.btn--solid:hover { color: var(--espresso); }
.btn--light { border-color: var(--gold-lt); color: var(--gold-pale); }
.btn--light::before { background: var(--gold-lt); }
.btn--light:hover { color: var(--espresso); }
.btn--wide { width: 100%; }
.btn--lg { padding: 1.45rem 3.6rem; font-size: 0.74rem; }
.section--bone .btn { color: var(--gold-dark); }
.section--bone .btn:hover { color: var(--espresso); }

/* ---------- Split feature ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6.5rem);
}
.split--reverse .split-media { order: 2; }
.split-media { position: relative; z-index: 0; padding: 12px; }
.split-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  position: relative;
  z-index: 1;
  border: 1px solid var(--gold);
}
.split-media::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--zebra);
  background-size: 300px 45px;
  z-index: 0;
}
.split-media::after {
  content: '';
  position: absolute;
  inset: -14px;
  border: 1px solid var(--line);
  z-index: 0;
}
/* A framed image that breathes: a very slow push in and out */
.media-zoom {
  position: relative;
  z-index: 1;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--gold);
}
.media-zoom img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border: 0;
  display: block;
  transform-origin: 52% 42%;   /* pushes towards their faces, not the frame centre */
  animation: slowZoom 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes slowZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.13); }
}
@media (prefers-reduced-motion: reduce) {
  .media-zoom img { animation: none; transform: none; }
}

.split-body { max-width: 48ch; }

.media-credit {
  margin: 1.6rem 0 0;
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

/* ---------- Heritage: the styles ---------- */
.style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: clamp(1.8rem, 3.4vw, 3rem);
}
.style-card { margin: 0; }
.style-shot {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--line);
}
.style-shot::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold);
  z-index: 2;
}
.style-shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.4s var(--ease);
}
.style-card:hover .style-shot img { transform: scale(1.06); }
.style-card h3 {
  margin: 1.4rem 0 0.6rem;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
}
.style-card p { font-size: 0.97rem; margin-bottom: 0.7rem; }
.style-card .style-note {
  font-size: 0.87rem;
  font-style: italic;
  color: var(--muted);
  margin: 0;
}
.style-price {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-deep);
  border-top: 1px solid var(--line);
  padding-top: 0.8rem;
}

/* A single photograph run full width */
.wide-figure { margin: 0; position: relative; }
.wide-figure img {
  width: 100%;
  height: clamp(280px, 34vw, 560px);
  object-fit: cover;
  object-position: center 20%;
  display: block;
}
/* Soften the hard edges so the band blends into the section around it,
   rather than reading as a separate, disconnected block */
.wide-figure::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow:
    inset 0 3.5rem 3rem -3rem var(--cocoa),
    inset 0 -3.5rem 3rem -3rem var(--cocoa);
  pointer-events: none;
}

/* ---------- The bridal team ---------- */
.party-group + .party-group { margin-top: clamp(2.8rem, 5vw, 4.5rem); }
.party-head { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.9rem; }
.party-head span {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  white-space: nowrap;
}
.party-head i { flex: 1; height: 1px; background: var(--line); }

.party-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: clamp(1.1rem, 2.4vw, 1.9rem);
}
.party { margin: 0; text-align: center; }
.party-frame {
  aspect-ratio: 3 / 4;
  border: 1px solid var(--line);
  background: rgba(201, 162, 39, 0.07);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.section--bone .party-frame { background: rgba(122, 75, 39, 0.06); }
.party-frame::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold);
}
.party:hover .party-frame {
  border-color: var(--gold-dark);
  background: rgba(201, 162, 39, 0.15);
}
.party-frame span {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 2.9rem);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--gold-deep);
}
/* When the photographs arrive, drop an <img> in and it fills the frame */
.party-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.party figcaption {
  margin-top: 0.95rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--charcoal);
}

@media (max-width: 480px) {
  .party-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  .party figcaption { font-size: 0.66rem; letter-spacing: 0.16em; }
}

/* ---------- Cards ---------- */
.grid { display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--umber);
  border: 1px solid var(--line);
  padding: clamp(2rem, 3.4vw, 3rem);
  position: relative;
  color: var(--bone);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold);
}
.card::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid transparent;
  transition: border-color 0.5s var(--ease);
  pointer-events: none;
}
.card:hover {
  transform: translateY(-8px);
  border-color: var(--gold);
  box-shadow: 0 34px 70px -34px rgba(0,0,0,0.85);
}
.card:hover::after { border-color: var(--line-soft); }
.card h3 { color: var(--gold-lt); margin-bottom: 0.6rem; }
.card p { font-size: 0.95rem; color: var(--muted); }
.card .card-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.6rem;
  line-height: 1;
  display: block;
  margin-bottom: 0.9rem;
  color: var(--gold-dark);
}
.section--bone .card {
  background: var(--bone);
  border-color: rgba(122,75,39,0.28);
  color: var(--umber);
}
.section--bone .card h3 { color: var(--espresso); }
.section--bone .card .card-num { color: var(--clay); }
.section--bone .card:hover { box-shadow: 0 30px 60px -34px rgba(56,32,15,0.5); }
.section--ink .card { background: var(--cocoa); }

/* ---------- Timeline ---------- */
.timeline { position: relative; }
.timeline::before {
  content: '';
  position: absolute;
  left: 122px; top: 14px; bottom: 14px;
  width: 2px;
  background: var(--line);
}
.tl-item {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 3.4rem;
  padding: 2.3rem 0;
  position: relative;
}
.tl-time {
  font-family: var(--serif);
  font-size: 1.45rem;
  color: var(--gold);
  text-align: right;
  padding-top: 0.1rem;
  white-space: nowrap;
}
.tl-item::before {
  content: '';
  position: absolute;
  left: 116px; top: 2.6rem;
  width: 15px; height: 15px;
  background: var(--gold);
  transform: rotate(45deg);
  border: 2px solid var(--cocoa);
}
.section--bone .tl-item::before { border-color: var(--cream); }
.tl-body h3 { margin-bottom: 0.35rem; color: var(--gold-lt); }
.section--bone .tl-body h3 { color: var(--espresso); }
.tl-body p { font-size: 0.96rem; color: var(--muted); margin: 0; }

.day-head {
  border-top: 2px solid var(--gold);
  padding-top: 2.2rem;
  margin-top: 4rem;
  display: flex;
  align-items: baseline;
  gap: 1.6rem;
  flex-wrap: wrap;
}
.day-head:first-child { margin-top: 0; }
.day-head h2 { margin: 0; }
.day-head .day-date {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- Gallery ---------- */
.gallery { columns: 3; column-gap: clamp(0.9rem, 1.7vw, 1.5rem); }
.gallery figure {
  margin: 0 0 clamp(0.9rem, 1.7vw, 1.5rem);
  break-inside: avoid;
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--umber);
  border: 1px solid var(--line-soft);
  transition: border-color 0.5s var(--ease);
}
.gallery figure:hover { border-color: var(--gold); }
.gallery img {
  width: 100%;
  transition: transform 0.9s var(--ease), filter 0.6s var(--ease);
}
.gallery figure:hover img { transform: scale(1.06); }
.gallery figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 3rem 1.5rem 1.3rem;
  background: linear-gradient(to top, rgba(21,12,6,0.94), transparent);
  color: var(--gold-lt);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.45s var(--ease);
}
.gallery figure:hover figcaption { opacity: 1; transform: translateY(0); }

/* A handful of photographs reads better as an even row than as masonry */
.gallery--few {
  columns: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(0.9rem, 1.7vw, 1.5rem);
}
.gallery--few figure { margin: 0; }
.gallery--few img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(13, 7, 3, 0.97);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 5vw, 4rem);
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: 100%; max-height: 86vh; object-fit: contain; border: 1px solid var(--line); }
.lightbox-close {
  position: absolute; top: 2rem; right: 2rem;
  background: none; border: 0; color: var(--gold-lt);
  font-size: 2.2rem; cursor: pointer; line-height: 1;
  font-family: var(--serif);
}
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: 1px solid var(--line);
  color: var(--gold-lt); width: 52px; height: 52px;
  cursor: pointer; font-size: 1.2rem;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.lightbox-nav:hover { background: var(--gold); color: var(--espresso); }
.lightbox-prev { left: clamp(0.5rem, 2vw, 2rem); }
.lightbox-next { right: clamp(0.5rem, 2vw, 2rem); }

/* ---------- Quote ---------- */
.quote { text-align: center; max-width: 44ch; margin: 0 auto; }
.quote blockquote {
  margin: 0 0 1.6rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.6rem, 3.6vw, 2.7rem);
  line-height: 1.42;
  color: var(--gold-lt);
}
.section--bone .quote blockquote { color: var(--umber); }
.quote cite {
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- Forms ---------- */
.form-card {
  background: var(--cream);
  border: 1px solid var(--gold);
  padding: clamp(2rem, 5vw, 4.5rem);
  color: var(--umber);
  position: relative;
}
.form-card::before,
.account-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gold);
}
.field { margin-bottom: 2rem; }
.field label {
  display: block;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 0.8rem;
}
.field .req { color: var(--gold-dark); }
.field .hint {
  display: block;
  font-size: 0.83rem;
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
  margin-top: 0.5rem;
  font-style: italic;
}
.input, select.input, textarea.input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 0.9rem 0;
  font-size: 1.02rem;
  font-weight: 300;
  color: var(--ink);
  transition: border-color 0.35s var(--ease);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
select.input {
  background-image: linear-gradient(45deg, transparent 50%, var(--gold-dark) 50%),
                    linear-gradient(135deg, var(--gold-dark) 50%, transparent 50%);
  background-position: calc(100% - 12px) center, calc(100% - 7px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
  cursor: pointer;
}
.input:focus { outline: none; border-bottom-color: var(--gold-dark); }
.input::placeholder { color: #a58a6c; }
textarea.input { resize: vertical; min-height: 118px; border: 1px solid var(--line); padding: 1rem; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.7rem; }

.choice-group { display: grid; gap: 0.9rem; }
.choice {
  position: relative;
  display: block;
  border: 1px solid var(--line);
  padding: 1.25rem 1.5rem 1.25rem 3.6rem;
  cursor: pointer;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
  overflow: hidden;
}
.choice:hover { border-color: var(--gold-dark); }
.choice input { position: absolute; opacity: 0; }
.choice .mark {
  position: absolute;
  left: 1.35rem; top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 13px; height: 13px;
  border: 1px solid var(--gold-dark);
  transition: background 0.3s var(--ease);
}
.choice input:checked ~ .mark { background: var(--gold); }
.choice:has(input:checked) { border-color: var(--gold-dark); background: rgba(201,162,39,0.1); }
.choice:has(input:checked)::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--gold);
}
.choice-text { font-size: 0.96rem; color: var(--charcoal); }
.choice-text strong { display: block; font-weight: 500; color: var(--ink); }
.choice-text small { display: block; font-size: 0.83rem; color: var(--muted); margin-top: 0.2rem; }

.form-step { display: none; }
.form-step.is-active { display: block; animation: fadeUp 0.6s var(--ease); }
.step-track {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 3rem;
  justify-content: center;
  flex-wrap: wrap;
}
.step-dot {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.6rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted);
}
.step-dot i {
  font-style: normal;
  width: 30px; height: 30px;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-size: 0.68rem;
  transition: all 0.35s var(--ease);
}
.step-dot.is-active i, .step-dot.is-done i { border-color: var(--gold-dark); background: var(--gold); color: var(--espresso); }
.step-dot.is-active { color: var(--ink); }
.step-sep { width: 30px; height: 1px; background: var(--gold-dark); }

.form-actions { display: flex; gap: 1rem; margin-top: 2.6rem; flex-wrap: wrap; }
.form-actions .btn { flex: 1; min-width: 165px; color: var(--gold-dark); }
.form-actions .btn--solid { color: var(--espresso); }
.form-actions .btn:hover { color: var(--espresso); }

.form-success { display: none; text-align: center; padding: 2rem 0; }
.form-success.is-active { display: block; animation: fadeUp 0.7s var(--ease); }

.error-msg { color: #9c2c1b; font-size: 0.83rem; margin-top: 0.5rem; display: none; }
.field.has-error .input { border-bottom-color: #9c2c1b; }
.field.has-error .error-msg { display: block; }

/* ---------- Gift / account block ---------- */
.account-card {
  border: 1px solid var(--gold);
  padding: clamp(2rem, 3.6vw, 3rem);
  background: var(--cream);
  color: var(--umber);
  position: relative;
}
.account-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.6rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.account-row:last-of-type { border-bottom: 0; }
.account-row dt {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.account-row dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.28rem;
  color: var(--ink);
  text-align: right;
  word-break: break-word;
}
.copy-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--gold-dark);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.55rem 1rem;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  white-space: nowrap;
}
.copy-btn:hover, .copy-btn.is-copied { background: var(--gold); color: var(--espresso); border-color: var(--gold); }

.fill-note {
  background: rgba(201,162,39,0.13);
  border: 1px solid var(--line);
  border-left: 5px solid var(--gold);
  padding: 1.2rem 1.5rem;
  font-size: 0.88rem;
  color: var(--bone);
  margin: 0 0 2rem;
}
.fill-note strong { font-weight: 500; color: var(--gold-lt); }
.fill-note code { font-family: monospace; color: var(--gold-lt); }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  padding: 1.9rem 3.2rem 1.9rem 0;
  cursor: pointer;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.1vw, 1.55rem);
  color: var(--ink);
  position: relative;
  line-height: 1.3;
  transition: color 0.3s var(--ease);
}
.faq-q:hover { color: var(--gold); }
.faq-item.is-open .faq-q { color: var(--gold-lt); }
.faq-q::after {
  content: '';
  position: absolute;
  right: 4px; top: 50%;
  width: 15px; height: 2px;
  background: var(--gold);
}
.faq-q::before {
  content: '';
  position: absolute;
  right: 10px; top: 50%;
  width: 2px; height: 15px;
  background: var(--gold);
  margin-top: -7px;
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.faq-item.is-open .faq-q::before { transform: rotate(90deg); opacity: 0; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease); }
.faq-a-inner { padding: 0 3.2rem 2.1rem 0; color: var(--muted); }
.faq-item.is-open .faq-a { max-height: 560px; }

/* ---------- Info list ---------- */
.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li {
  padding: 1.15rem 0 1.15rem 2.1rem;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  font-size: 0.96rem;
}
.info-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 1.7rem;
  width: 9px; height: 9px;
  background: var(--gold);
  transform: rotate(45deg);
}
.info-list li:last-child { border-bottom: 0; }

/* ---------- Swatches ---------- */
.swatches { display: flex; gap: 1.3rem; flex-wrap: wrap; }
.swatch { text-align: center; }
.swatch i {
  display: block;
  width: 74px; height: 74px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  margin-bottom: 0.75rem;
  background-size: cover;
  background-position: center;
}
.swatch span {
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.swatch-zebra {
  background-image: var(--zebra);
  background-size: 210px 32px !important;
}

/* Bare grid photographs (home teaser) get the gold hairline too */
.grid > div > img { border: 1px solid var(--line); }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  background-size: cover;
  background-position: center 30%;
  background-attachment: fixed;
  text-align: center;
  color: var(--cream);
  overflow: hidden;
}
.cta-band::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(21,12,6,0.9), rgba(21,12,6,0.78));
  z-index: 1;
}
.cta-band > * { position: relative; z-index: 2; }
.cta-band p { color: var(--bone); max-width: 50ch; margin-inline: auto; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--espresso);
  color: var(--muted);
  padding: calc(4.5rem + var(--band)) 0 2.6rem;
  text-align: center;
  position: relative;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--band);
  border-bottom: 1px solid var(--gold);
}
.footer-monogram {
  font-family: var(--serif);
  font-size: 3.2rem;
  letter-spacing: 0.16em;
  margin-bottom: 1.1rem;
  line-height: 1;
}
.footer-monogram span { font-style: italic; }
.footer-date {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2.6rem;
}
.footer-nav {
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 2.4vw, 2.2rem);
  flex-wrap: wrap;
  margin-bottom: 2.6rem;
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.footer-nav a { color: var(--bone); transition: color 0.3s var(--ease); }
.footer-nav a:hover { color: var(--gold); }
.footer-fine {
  border-top: 1px solid var(--line-soft);
  padding-top: 2.1rem;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--clay);
}

/* ---------- Maker's credit ---------- */
.made-by {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.9rem, 2vw, 1.3rem);
  margin-top: 2.2rem;
  opacity: 0.7;
  transition: opacity 0.45s var(--ease);
}
.made-by:hover { opacity: 1; }
.made-by-label {
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--clay);
}
.made-by img { display: block; width: auto; }
.made-by .mark-discover { height: 30px; }
.made-by .mark-unfold { height: 24px; }
.made-by-sep { width: 1px; height: 22px; background: var(--line-soft); }

/* Sits under the two marks rather than beside them: on a phone a third
   thing in that row would wrap awkwardly, and an address wants to be read
   straight rather than squeezed between logos. */
.made-by-email {
  margin: 0.9rem 0 0;
  text-align: center;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  opacity: 0.75;
  transition: opacity 0.45s var(--ease);
}
.made-by-email:hover { opacity: 1; }
.made-by-email a {
  color: var(--gold);
  border-bottom: 1px solid rgba(201, 162, 39, 0.35);
  padding-bottom: 2px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.made-by-email a:hover { color: var(--gold-lt); border-color: var(--gold-lt); }

/* ---------- After the RSVP ----------
   A takeover rather than a panel, so that sending the form feels like
   arriving somewhere rather than watching a box appear. */
.thanks {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  overflow-y: auto;
  background: var(--espresso);
  overscroll-behavior: contain;
}
.thanks.is-open {
  display: grid;
  place-items: center;
  animation: fadeUp 0.8s var(--ease);
}
/* The film. Barely there on purpose: it should be felt rather than watched,
   and the words in front of it have to stay the brightest thing on screen. */
.thanks-film {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.11;
  pointer-events: none;
}
/* Darkens the corners so the type never has to fight a bright frame */
.thanks-veil {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(21,12,6,0) 0%, rgba(21,12,6,0.55) 70%, rgba(21,12,6,0.9) 100%);
}
.thanks-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(3rem, 9vh, 6rem) clamp(1.4rem, 5vw, 3rem);
  text-align: center;
}
.thanks-inner h2 {
  margin: 0.6rem 0 1.6rem;
  font-size: clamp(2rem, 5.4vw, 3.4rem);
  line-height: 1.15;
}
.thanks-line {
  margin: 0 auto;
  max-width: 34ch;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-style: italic;
  line-height: 1.7;
  color: var(--gold-pale, #F0DB96);
}
.thanks .countdown { margin-top: clamp(2.4rem, 5vh, 3.4rem); }
.thanks-signoff {
  margin: clamp(2.4rem, 5vh, 3.4rem) auto 0;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.6vw, 1.55rem);
  font-style: italic;
  color: var(--gold);
}

/* Its own play button, because the one in the corner is behind this screen */
.thanks-play {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: clamp(2rem, 4.5vh, 3rem);
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: rgba(21, 12, 6, 0.6);
  color: var(--gold-lt);
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.thanks-play:hover { background: var(--gold); color: var(--espresso); }

/* Until someone presses it, it asks. A pill is the wrong shape for a ring
   pulse, so it breathes light instead. Nothing here moves the button: a
   target that will not hold still is a harder one to hit, and this is the
   one control on the screen that matters. It stops on the first press. */
.thanks-play.is-hinting { animation: thanksAsk 2.6s var(--ease) infinite; }
@keyframes thanksAsk {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(201, 162, 39, 0);
    background: rgba(21, 12, 6, 0.6);
    border-color: var(--gold);
  }
  45% {
    box-shadow: 0 0 30px -3px rgba(201, 162, 39, 0.85);
    background: rgba(201, 162, 39, 0.18);
    border-color: var(--gold-lt);
  }
}
@media (prefers-reduced-motion: reduce) {
  .thanks-play.is-hinting {
    animation: none;
    box-shadow: 0 0 24px -6px rgba(201, 162, 39, 0.7);
  }
}
.thanks-play svg { width: 15px; height: 15px; }
.thanks-play .icon-pause { display: none; }
.thanks-play.is-playing { background: var(--gold); color: var(--espresso); }
.thanks-play.is-playing .icon-play  { display: none; }
.thanks-play.is-playing .icon-pause { display: block; }

.thanks-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-top: clamp(2.2rem, 5vh, 3.2rem);
}
.btn--sm { padding: 0.9rem 1.5rem; font-size: 0.58rem; letter-spacing: 0.22em; }

.thanks-fine {
  margin-top: clamp(2.2rem, 5vh, 3rem);
  font-size: 0.82rem;
  color: rgba(240, 219, 150, 0.55);
}
.thanks-fine a { color: var(--gold); border-bottom: 1px solid rgba(201,162,39,0.4); }

@media (prefers-reduced-motion: reduce) {
  .thanks.is-open { animation: none; }
}

/* ---------- Pay step ----------
   Sits inside the pale confirmation card once an order has gone through.
   Dark on cream, because paying is the half of the transaction that has
   not happened yet and small print would not carry it. */
.pay-step {
  position: relative;
  /* .form-success drops the card's side padding, so the panel sets its own
     inset rather than running into the gold border. */
  margin: 0.5rem clamp(1.25rem, 4vw, 3rem) 0;
  padding: clamp(1.9rem, 3.6vw, 2.8rem);
  border: 1px solid var(--gold);
  background: var(--espresso);
}
.pay-step::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold);
}
.form-card .pay-step h3 {
  margin: 0 0 1rem;
  background: none;
  color: var(--gold-lt);
  -webkit-text-fill-color: var(--gold-lt);
}
.pay-step .eyebrow { margin-bottom: 1rem; color: var(--gold); }
.pay-step .pay-note {
  margin: 0 auto 1.9rem;
  max-width: 42ch;
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(240, 219, 150, 0.78);
}
.pay-step .pay-note strong { font-weight: 500; color: var(--gold-lt); }

/* ---------- Our song ---------- */
.music-toggle {
  position: fixed;
  right: clamp(1rem, 2.4vw, 2.2rem);
  bottom: clamp(1rem, 2.4vw, 2.2rem);
  z-index: 90;
  width: 58px; height: 58px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: rgba(21, 12, 6, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--gold-lt);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
              transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.music-toggle:hover {
  background: var(--gold);
  color: var(--espresso);
  transform: translateY(-3px);
}
/* Two gold rings breathing outwards, so the button is not missed.
   Removed for good the moment the guest presses it. */
.music-toggle::before,
.music-toggle::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  opacity: 0;
  pointer-events: none;
}
.music-toggle.is-hinting::before { animation: musicRipple 3s cubic-bezier(0.22,0.61,0.36,1) infinite; }
.music-toggle.is-hinting::after  { animation: musicRipple 3s cubic-bezier(0.22,0.61,0.36,1) 1.5s infinite; }
.music-toggle.is-hinting { box-shadow: 0 0 22px -4px rgba(201,162,39,0.55); }
.music-toggle.is-hinting:hover::before,
.music-toggle.is-hinting:hover::after { animation: none; }

@keyframes musicRipple {
  0%   { transform: scale(1);    opacity: 0.9; }
  65%  { transform: scale(2.05); opacity: 0; }
  100% { transform: scale(2.05); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .music-toggle.is-hinting::before,
  .music-toggle.is-hinting::after { animation: none; opacity: 0; }
}

.music-toggle svg { width: 20px; height: 20px; }
.music-toggle .icon-pause { display: none; }
.music-toggle.is-playing { background: var(--gold); color: var(--espresso); }
.music-toggle.is-playing .icon-play { display: none; }
.music-toggle.is-playing .icon-pause { display: block; }
.music-toggle.is-error { opacity: 0.4; pointer-events: none; }

/* Sound bars pulse while it plays */
.music-toggle::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  opacity: 0;
}
.music-toggle.is-playing::after { animation: musicPulse 2.4s var(--ease) infinite; }
@keyframes musicPulse {
  0%   { opacity: 0.55; transform: scale(1); }
  70%  { opacity: 0;    transform: scale(1.35); }
  100% { opacity: 0;    transform: scale(1.35); }
}

.music-label {
  position: absolute;
  right: 74px;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  white-space: nowrap;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-lt);
  background: rgba(21, 12, 6, 0.9);
  border: 1px solid var(--line);
  padding: 0.5rem 0.9rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.music-toggle:hover .music-label { opacity: 1; transform: translateY(-50%) translateX(0); }

/* ---------- "Press play" ----------
   A little gold plaque beside the button, for as long as the rings are
   still going. The rings say there is something here; this says what to
   do about it. It leaves the moment the button is pressed, like the
   rings, and does not come back for the rest of the visit. */
.music-cue {
  position: absolute;
  right: 74px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--sans, inherit);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-indent: 0.26em;            /* the tracking would otherwise sit it off-centre */
  color: var(--espresso);
  background: var(--gold);
  border: 1px solid var(--gold);
  padding: 0.55rem 0.9rem;
  box-shadow: 0 12px 30px -16px rgba(21, 12, 6, 0.85);
  opacity: 0;
  visibility: hidden;             /* so it cannot be clicked while hidden */
  cursor: pointer;
}
/* the tail, so it points at the button rather than floating near it */
.music-cue::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  width: 9px; height: 9px;
  background: var(--gold);
  transform: translateY(-50%) rotate(45deg);
}
/* Arrives a moment after the page has settled, so it reads as an offer
   rather than as something demanding attention on arrival. */
.music-toggle.is-hinting .music-cue {
  visibility: visible;
  animation: musicCueIn 0.9s var(--ease) 1.4s both;
}
/* On a desktop, hovering brings up the track name in the same spot.
   The sign steps out of its way. */
.music-toggle.is-hinting:hover .music-cue { animation: none; opacity: 0; }

@keyframes musicCueIn {
  from { opacity: 0; transform: translateY(-50%) translateX(12px); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .music-toggle.is-hinting .music-cue { animation: none; opacity: 1; }
}

#songAudio { display: none; }

@media (max-width: 560px) {
  .music-toggle { width: 50px; height: 50px; }
  .music-toggle svg { width: 17px; height: 17px; }
  .music-label { display: none; }
  .music-cue {
    right: 62px;
    font-size: 0.53rem;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    padding: 0.45rem 0.75rem;
  }
}

/* ---------- Reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: 0.12s; }
[data-reveal][data-delay="2"] { transition-delay: 0.24s; }
[data-reveal][data-delay="3"] { transition-delay: 0.36s; }
[data-reveal][data-delay="4"] { transition-delay: 0.48s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Quiz ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.quiz-q { padding: 1.9rem 0; border-top: 1px solid var(--line); }
.quiz-q:first-child { border-top: 0; padding-top: 0; }

.quiz-ask { display: flex; gap: 1.05rem; align-items: baseline; margin-bottom: 1.15rem; }
.quiz-n {
  flex: 0 0 1.9rem;
  font-family: var(--serif);
  font-size: 1.06rem;
  line-height: 1.5;
  color: var(--gold-dark);
}
.quiz-ask > p {
  margin: 0;
  font-size: 1.04rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink);
}
.quiz-body { margin-left: 2.95rem; }
.quiz-note {
  font-size: 0.83rem;
  font-style: italic;
  color: var(--muted);
  margin-top: 0.55rem;
}

.pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 0.7rem; }
.pick-opt { position: relative; display: block; }
.pick-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick-opt span {
  display: block;
  text-align: center;
  border: 1px solid var(--line);
  padding: 0.82rem 0.9rem;
  font-size: 0.93rem;
  font-weight: 300;
  color: var(--charcoal);
  cursor: pointer;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.pick-opt span:hover { border-color: var(--gold-dark); color: var(--ink); }
.pick-opt input:checked + span {
  border-color: var(--gold-dark);
  background: rgba(201,162,39,0.14);
  color: var(--ink);
  font-weight: 400;
}
.pick-opt input:focus-visible + span { outline: 2px solid var(--gold-dark); outline-offset: 3px; }

.quiz-heading { display: flex; align-items: center; gap: 1.2rem; margin: 3.4rem 0 2rem; }
.quiz-heading span {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-dark);
  white-space: nowrap;
}
.quiz-heading i { flex: 1; height: 1px; background: var(--line); }

.quiz-count {
  text-align: center;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3rem;
}
.quiz-count b { color: var(--gold-dark); font-weight: 500; }

.quiz-print { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .gallery { columns: 2; }
  .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .cta-band { background-attachment: scroll; }
}

/* 1180, not 820: the nav carries ten items and one of them is "DD Heritage
   Sale", so the burger has to appear sooner or the links overflow the header
   on a small laptop. Measured, not guessed: the row stops fitting at 1160. */
@media (max-width: 1180px) {
  :root { --band: 30px; }
  .burger { display: block; }

  /* No blur on the header at this width, and it matters more than it looks.
     A backdrop-filter makes an element the containing block for any fixed
     child inside it. The menu below is a fixed, full-screen panel that lives
     inside the header, so the moment the header went solid on scroll the
     menu stopped measuring itself against the window and started measuring
     itself against the header: fifty-eight pixels tall, its translateY(-100%)
     no longer enough to hide it, and its links spilling unreadably over the
     page. The background is already 95% opaque, so nothing is lost. */
  .site-header.is-solid {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(21, 12, 6, 0.97);
  }

  .nav {
    position: fixed;
    inset: 0;
    background: var(--espresso);
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    transform: translateY(-100%);
    transition: transform 0.6s var(--ease);
    z-index: 110;
  }
  .nav::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 30px;
    background-image: var(--zebra);
    background-size: 400px 60px;
    border-bottom: 1px solid var(--gold);
  }
  .nav::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 30px;
    background-image: var(--zebra);
    background-size: 400px 60px;
    border-top: 1px solid var(--gold);
  }
  .nav.is-open { transform: none; }
  .nav a { font-size: 1rem; letter-spacing: 0.32em; color: var(--cream); }
  .nav a[aria-current="page"] { color: var(--gold); }

  .split, .grid-2, .grid-3, .grid-4, .field-row { grid-template-columns: 1fr; }
  .split--reverse .split-media { order: 0; }
  .split-media::after { display: none; }
  .split-media img { aspect-ratio: 3 / 4; }
  .media-zoom { aspect-ratio: 3 / 4; }
  .media-zoom img { aspect-ratio: auto; }

  .timeline::before { left: 5px; }
  .tl-item { grid-template-columns: 1fr; gap: 0.5rem; padding-left: 2.2rem; }
  .tl-item::before { left: 0; top: 2.7rem; }
  .tl-time { text-align: left; }

  .account-row { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .account-row dd { text-align: left; }
}

@media (max-width: 560px) {
  .gallery { columns: 1; }
  .countdown { gap: 0.4rem; flex-wrap: wrap; }
  .count-unit { min-width: 68px; padding: 0.8rem 0.35rem 0.7rem; }
  .hero-meta { letter-spacing: 0.22em; font-size: 0.64rem; }
  .hero-meta .dot { padding: 0 0.5rem; }
  .form-actions .btn { flex: 1 1 100%; }
  .hero-frame { top: calc(0.9rem + 5.4rem); right: 0.9rem; bottom: 0.9rem; left: 0.9rem; }
  .quiz-body { margin-left: 0; }
  .quiz-ask { gap: 0.8rem; }
  .quiz-n { flex-basis: 1.5rem; }
  .pick { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .btn, .cta-band,
  .music-toggle, .page-hero, .no-print { display: none !important; }
  body { background: #fff; color: #000; }

  /* Scroll reveal leaves anything below the fold at opacity 0, which prints blank */
  [data-reveal] { opacity: 1 !important; transform: none !important; }

  /* The quiz prints as a paper answer sheet */
  .quiz-print { display: block !important; }
  .section { padding: 0 !important; }
  .form-card { border: 0; padding: 0; background: #fff; }
  .form-card::before { display: none; }
  .quiz-q { padding: 0.5rem 0; border-top: 1px solid #ddd; break-inside: avoid; page-break-inside: avoid; }
  .quiz-ask { margin-bottom: 0.45rem; }
  .quiz-ask > p, .quiz-n { font-size: 0.87rem; color: #000; }
  .quiz-body { margin-left: 2.4rem; }
  .pick { gap: 0.4rem; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); }
  .pick-opt span { padding: 0.3rem 0.4rem; font-size: 0.76rem; border-color: #999; color: #000; }
  .quiz-heading { margin: 1.3rem 0 0.7rem; }
  .quiz-heading span { color: #000; }
  .quiz-count, .quiz-note, .form-actions { display: none !important; }
  .input { border-bottom: 1px solid #999; }
}