/* ==========================================================================
   Vintage Photo Prop — design system
   Palette: warm ivory, champagne, taupe, antique gold, cornflower "borrowed" blue
   Type: Cormorant Garamond (editorial serif) × Jost (Futura revival, 1970s Germany)
   ========================================================================== */

:root {
  --ivory: #f6f2e9;
  --ivory-soft: #fbf8f2;
  --champagne: #ede3cf;
  --sand: #e5dac4;
  --taupe: #9c9080;
  --ink: #23201a;
  --ink-70: rgba(35, 32, 26, 0.72);
  --ink-55: rgba(35, 32, 26, 0.56);
  --gold: #a5814b;
  --gold-soft: rgba(165, 129, 75, 0.35);
  --blue: #3d4e9e;
  --blue-deep: #2c3a7d;
  --blue-night: #232c58;
  --hairline: rgba(35, 32, 26, 0.14);
  --hairline-light: rgba(246, 242, 233, 0.22);

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Jost", "Futura", "Century Gothic", sans-serif;

  --radius: 18px;
  --container: 1240px;
  --container-wide: 1440px;
  --gutter: clamp(20px, 4vw, 48px);

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

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.08; letter-spacing: -0.01em; }
em { font-style: italic; }
::selection { background: var(--blue); color: var(--ivory); }

/* film grain */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 9990;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: multiply;
}

/* ---------- layout primitives ---------- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(96px, 11vw, 176px); }

.section__head { max-width: 720px; margin-bottom: clamp(48px, 6vw, 88px); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head h2, .story__title, .bronsen__text h2, .enquire__text h2, .faq__head h2 {
  font-size: clamp(2.1rem, 4.4vw, 3.75rem);
  margin-bottom: 0.5em;
}
.section__lede { color: var(--ink-55); max-width: 56ch; }
.section__head--center .section__lede { margin-inline: auto; }

.label {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-bottom: clamp(20px, 2.5vw, 32px);
}
.label--light { color: var(--sand); }
.orn { font-size: 0.85em; letter-spacing: 0; transform: translateY(-1px); }

/* ---------- buttons & links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  padding: 1.02em 1.9em;
  border-radius: 999px;
  border: 1px solid var(--ink);
  transition: background 0.45s var(--ease-out), color 0.45s var(--ease-out),
              border-color 0.45s var(--ease-out), transform 0.45s var(--ease-out);
  will-change: transform;
}
.btn__arrow { font-style: normal; transition: transform 0.45s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(5px); }
.btn--ink { background: var(--ink); color: var(--ivory); }
.btn--ink:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.btn--line { background: transparent; color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--ivory); }
.btn--ivory { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.btn--ivory:hover { background: transparent; color: var(--ivory); }
.btn--small { padding: 0.62em 1.4em; font-size: 0.84rem; }
.btn--full { width: 100%; justify-content: center; }

.link-underline {
  position: relative;
  font-weight: 400;
  letter-spacing: 0.04em;
  padding-bottom: 3px;
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform-origin: right;
  transition: transform 0.5s var(--ease-out);
}
.link-underline:hover::after { transform: scaleX(0.35); transform-origin: left; }

/* ---------- image frames ---------- */
.frame { overflow: hidden; border-radius: var(--radius); position: relative; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.arch { border-radius: 10000px 10000px var(--radius) var(--radius); }

/* ---------- loading veil ---------- */
.veil {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--ivory);
  display: none; /* shown by JS only, so no-JS visitors never see a blank wall */
  place-items: center;
}
.veil.is-active { display: grid; }
.veil__mark { text-align: center; }

/* ---------- navigation ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  transition: transform 0.5s var(--ease-out), background 0.4s ease,
              box-shadow 0.4s ease, backdrop-filter 0.4s ease;
}
.nav.is-hidden { transform: translateY(-100%); }
.nav.is-scrolled {
  background: rgba(251, 248, 242, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--hairline);
}
.nav__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav__links { display: flex; gap: clamp(18px, 2.4vw, 34px); }
.nav__links a {
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-70);
  position: relative;
  padding-bottom: 4px;
  transition: color 0.3s ease;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease-out);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__actions { display: flex; align-items: center; gap: 16px; }
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 42px; height: 42px;
  padding: 10px;
}
.nav__toggle span {
  display: block;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.4s var(--ease-out);
}
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

/* mobile menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: 880;
  background: var(--ivory-soft);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gutter);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
.menu.is-open { opacity: 1; visibility: visible; }
.menu__links { display: flex; flex-direction: column; gap: 6px; text-align: center; }
.menu__links a {
  font-family: var(--serif);
  font-size: clamp(2rem, 8vw, 2.9rem);
  padding: 6px 0;
}
.menu__links a.menu__cta {
  margin-top: 28px;
  font-family: var(--sans);
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-deep);
}
.menu__motto {
  position: absolute;
  bottom: 32px; left: 0; right: 0;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  color: var(--taupe);
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding-top: clamp(140px, 18vh, 200px);
  background:
    radial-gradient(90rem 44rem at 50% -18rem, rgba(237, 227, 207, 0.9), transparent 62%),
    var(--ivory);
}
.hero__inner { text-align: center; position: relative; z-index: 2; }
.hero__kicker {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: clamp(22px, 3vw, 34px);
}
.hero__title {
  font-size: clamp(2.9rem, 8vw, 6.4rem);
  font-weight: 500;
  line-height: 1.02;
}
.hero__title em { color: var(--blue-deep); }
.line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.line__inner { display: inline-block; will-change: transform; }
.hero__sub {
  max-width: 54ch;
  margin: clamp(22px, 3vw, 34px) auto 0;
  color: var(--ink-55);
}
.hero__cta {
  margin-top: clamp(28px, 3.6vw, 44px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 36px);
  flex-wrap: wrap;
}
.hero__stage {
  position: relative;
  margin-top: clamp(48px, 6vw, 84px);
  display: grid;
  grid-template-columns: 1fr minmax(0, 720px) 1fr;
  align-items: end;
  gap: clamp(16px, 3vw, 48px);
}
.hero__figure {
  aspect-ratio: 4 / 3.4;
  box-shadow: 0 40px 80px -40px rgba(35, 32, 26, 0.45);
}
.hero__note {
  font-family: var(--serif);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: var(--taupe);
  line-height: 1.5;
  padding-bottom: clamp(24px, 4vw, 64px);
}
.hero__note--left { text-align: right; }
.hero__note--right { text-align: left; }
.hero__caption {
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--taupe);
  padding: 26px var(--gutter) 34px;
}

/* ---------- marquee ---------- */
.marquee {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding-block: 18px;
  overflow: hidden;
  background: var(--ivory-soft);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: 2.4em;
  width: max-content;
  white-space: nowrap;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  color: var(--ink-70);
  will-change: transform;
}
.marquee__track i { font-style: normal; color: var(--gold); }
.marquee__track em { color: var(--blue-deep); }

/* ---------- story ---------- */
.story__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.story__title { max-width: 18ch; }
.story__title em { color: var(--blue-deep); }
.story__body p + p { margin-top: 1.2em; }
.story__body { color: var(--ink-70); max-width: 58ch; }
.story__body strong { font-weight: 500; color: var(--ink); }
.story__facts {
  list-style: none;
  padding: 0;
  margin-top: clamp(36px, 4vw, 56px);
  border-top: 1px solid var(--hairline);
}
.story__facts li {
  display: flex;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--serif);
  font-size: 1.15rem;
}
.story__facts li span {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe);
  min-width: 72px;
  padding-top: 6px;
}
.story__figure { margin-top: clamp(8px, 1vw, 16px); }
.story__figure img { aspect-ratio: 4 / 5; }
.story__figure figcaption,
.plate figcaption {
  padding-top: 14px;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--taupe);
  font-style: italic;
  font-family: var(--serif);
  font-size: 1rem;
}

/* ---------- motto ---------- */
.motto {
  background: var(--blue-deep);
  color: var(--ivory);
  overflow: hidden;
  padding-block: clamp(88px, 11vw, 160px);
  text-align: center;
}
.motto__line {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 8.5vw, 7rem);
  line-height: 1.05;
  white-space: nowrap;
  will-change: transform;
}
.motto__line em { color: var(--champagne); }
.motto__sub {
  margin-top: 26px;
  font-size: 0.78rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(246, 242, 233, 0.55);
  padding-inline: var(--gutter);
}

/* ---------- offerings ---------- */
.offerings { background: var(--ivory-soft); }
.offerings__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: stretch;
}
.offer {
  border: 1px solid var(--hairline);
  border-radius: calc(var(--radius) + 6px);
  padding: clamp(32px, 4vw, 56px);
  background: var(--ivory);
  display: flex;
  flex-direction: column;
  transition: transform 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out),
              border-color 0.55s var(--ease-out);
}
.offer:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 60px -38px rgba(35, 32, 26, 0.35);
  border-color: var(--gold-soft);
}
.offer--featured {
  background: linear-gradient(175deg, #fdfbf6, var(--champagne));
  border-color: var(--gold-soft);
}
.offer__tag {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}
.offer__tag em { color: var(--blue-deep); text-transform: none; letter-spacing: 0.08em; font-family: var(--serif); font-size: 1.25em; }
.offer__name { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.offer__sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--taupe);
  margin: 6px 0 20px;
}
.offer__desc { color: var(--ink-70); }
.offer__list {
  list-style: none;
  padding: 0;
  margin: 26px 0 30px;
}
.offer__list li {
  padding: 11px 0 11px 26px;
  border-bottom: 1px solid var(--hairline);
  position: relative;
  font-size: 0.98rem;
  color: var(--ink-70);
}
.offer__list li::before {
  content: "✳";
  position: absolute;
  left: 0;
  top: 12px;
  font-size: 0.7em;
  color: var(--gold);
}
.offer__price { margin: auto 0 26px; padding-top: 8px; }
.offer__from {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe);
  display: inline-block;
  margin-right: 10px;
}
.offer__amount { font-family: var(--serif); font-size: 2rem; }
.offer__note { display: block; font-size: 0.82rem; color: var(--ink-55); margin-top: 6px; }
.offer .btn { align-self: flex-start; }

/* ---------- occasions ---------- */
.occasions__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.occasion {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 36px);
  min-height: 230px;
  display: flex;
  flex-direction: column;
  background: var(--ivory-soft);
  transition: background 0.5s var(--ease-out), border-color 0.5s var(--ease-out),
              transform 0.5s var(--ease-out);
}
.occasion:hover { background: var(--champagne); border-color: var(--gold-soft); transform: translateY(-4px); }
.occasion h3 { font-size: clamp(1.45rem, 2.2vw, 1.9rem); margin: auto 0 8px; }
.occasion p { color: var(--ink-55); font-size: 0.95rem; max-width: 34ch; }
.occasion__no {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.occasion__arrow {
  position: absolute;
  top: clamp(20px, 2.6vw, 30px);
  right: clamp(20px, 2.6vw, 30px);
  font-size: 1.1rem;
  color: var(--taupe);
  transition: transform 0.45s var(--ease-out), color 0.45s var(--ease-out);
}
.occasion:hover .occasion__arrow { transform: translateX(5px); color: var(--ink); }
.occasion--featured {
  grid-column: span 2;
  padding: 0;
  border: 0;
  color: var(--ivory);
  min-height: 320px;
  display: block;
}
.occasion--featured img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  transition: transform 1.2s var(--ease-out);
}
.occasion--featured:hover { transform: none; background: none; }
.occasion--featured:hover img { transform: scale(1.045); }
.occasion__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(12deg, rgba(24, 22, 18, 0.72) 8%, rgba(24, 22, 18, 0.12) 55%, rgba(24, 22, 18, 0.05));
}
.occasion__content {
  position: absolute;
  left: clamp(24px, 3vw, 36px);
  right: clamp(24px, 3vw, 36px);
  bottom: clamp(22px, 3vw, 32px);
}
.occasion__content .occasion__no { color: var(--champagne); }
.occasion__content h3 { margin: 8px 0 6px; }
.occasion__content p { color: rgba(246, 242, 233, 0.82); max-width: 44ch; }
.occasion--invite { background: var(--blue-deep); border-color: var(--blue-deep); color: var(--ivory); }
.occasion--invite .occasion__no { color: var(--champagne); }
.occasion--invite p { color: rgba(246, 242, 233, 0.7); }
.occasion--invite .occasion__arrow { color: var(--champagne); }
.occasion--invite:hover { background: var(--blue-night); transform: translateY(-4px); }

/* ---------- gallery ---------- */
.gallery { background: var(--ivory-soft); }
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(18px, 2.4vw, 32px);
  align-items: start;
}
.plate { position: relative; }
.plate figcaption span {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-block;
  margin-right: 12px;
}
.plate img { transition: transform 1.4s var(--ease-out); }
.plate.frame:hover img { transform: scale(1.05) !important; }
.plate--wide { grid-column: 1 / span 8; }
.plate:nth-child(2) { grid-column: 9 / span 4; margin-top: clamp(40px, 6vw, 96px); }
.plate:nth-child(3) { grid-column: 1 / span 5; margin-top: clamp(-40px, -2vw, -16px); }
.plate:nth-child(4) { grid-column: 6 / span 3; margin-top: clamp(28px, 4vw, 72px); }
.plate:nth-child(5) { grid-column: 9 / span 4; }
.plate:nth-child(6) { grid-column: 1 / span 6; margin-top: clamp(16px, 2vw, 40px); }
.plate:nth-child(7) { grid-column: 7 / span 3; margin-top: clamp(48px, 6vw, 110px); }
.plate:nth-child(8) { grid-column: 10 / span 3; margin-top: clamp(24px, 3vw, 60px); }
.plate--placeholder .plate__reserved {
  border: 1px dashed var(--gold-soft);
  border-radius: var(--radius);
  background: linear-gradient(170deg, #fdfbf6, var(--champagne));
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 24px;
}
.plate__orn { color: var(--gold); font-size: 1.1rem; }
.plate--placeholder p { font-family: var(--serif); font-size: 1.3rem; line-height: 1.3; }
.plate--placeholder small { font-size: 0.78rem; letter-spacing: 0.08em; color: var(--taupe); line-height: 1.6; }

/* ---------- experience ---------- */
.steps {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 40px);
  counter-reset: step;
}
.step { border-top: 1px solid var(--ink); padding-top: 22px; }
.step__no {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--gold);
}
.step h3 { font-size: 1.5rem; margin: 10px 0 10px; }
.step p { font-size: 0.95rem; color: var(--ink-55); }
.experience__includes {
  margin-top: clamp(56px, 7vw, 96px);
  border: 1px solid var(--hairline);
  border-radius: calc(var(--radius) + 6px);
  padding: clamp(28px, 3.6vw, 44px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
  background: var(--ivory-soft);
}
.experience__includes-label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--blue-deep);
  flex: 0 0 auto;
}
.experience__includes ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
}
.experience__includes li {
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  color: var(--ink-70);
  position: relative;
  padding-left: 18px;
}
.experience__includes li::before {
  content: "✳";
  position: absolute;
  left: 0;
  font-size: 0.65em;
  top: 5px;
  color: var(--gold);
}

/* ---------- bronsen ---------- */
.bronsen { background: var(--ink); color: var(--ivory); }
.bronsen__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(48px, 7vw, 110px);
  align-items: center;
}
.bronsen__portrait { margin: 0; }
.bronsen__portrait figcaption {
  padding-top: 16px;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  color: rgba(246, 242, 233, 0.55);
}
.bronsen__text h2 { color: var(--ivory); }
.bronsen__text p { color: rgba(246, 242, 233, 0.72); max-width: 56ch; }
.bronsen__text [data-reveal-group] p + p { margin-top: 1.2em; }
.bronsen__quote {
  margin: clamp(30px, 4vw, 44px) 0;
  padding-left: 26px;
  border-left: 1px solid var(--gold);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.4;
  color: var(--champagne);
}
.bronsen__quote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--taupe);
}

.bronsen__portrait img { aspect-ratio: 4 / 5.1; object-fit: cover; }

/* portfolio strip */
.folio { margin-top: clamp(64px, 8vw, 112px); }
.folio__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 40px;
  margin-bottom: clamp(28px, 3.6vw, 44px);
}
.folio__head .label { margin-bottom: 0; }
.folio__lede { color: rgba(246, 242, 233, 0.6); font-size: 0.95rem; max-width: 52ch; }
.folio__lede a { color: var(--champagne); }
.folio__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
}
.folio__item { position: relative; }
.folio__item img { aspect-ratio: 4 / 5; transition: transform 1.3s var(--ease-out); }
.folio__item:hover img { transform: scale(1.05) !important; }
.folio__item figcaption {
  padding-top: 10px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  color: rgba(246, 242, 233, 0.55);
}

/* ---------- enquire ---------- */
.enquire {
  background:
    radial-gradient(70rem 40rem at 85% 0%, rgba(237, 227, 207, 0.75), transparent 60%),
    var(--ivory);
}
.enquire__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(48px, 7vw, 110px);
  align-items: start;
}
.enquire__text p { color: var(--ink-70); max-width: 44ch; }
.enquire__alt { list-style: none; padding: 0; margin-top: clamp(28px, 3.4vw, 40px); }
.enquire__alt li {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hairline);
}
.enquire__alt span {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe);
  min-width: 64px;
}
.enquire__fine { font-size: 0.8rem; color: var(--ink-55); margin-top: 24px; font-style: italic; }

.form {
  background: var(--ivory-soft);
  border: 1px solid var(--hairline);
  border-radius: calc(var(--radius) + 6px);
  padding: clamp(28px, 4vw, 52px);
  box-shadow: 0 40px 80px -50px rgba(35, 32, 26, 0.3);
}
.form__row + .form__row { margin-top: 22px; }
.form__row--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.field label {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 8px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-weight: 300;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  padding: 8px 2px 12px;
  border-radius: 0;
  transition: border-color 0.35s ease;
  -webkit-appearance: none;
  appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239c9080' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 26px;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--gold); }
.field input::placeholder,
.field textarea::placeholder { color: rgba(35, 32, 26, 0.34); }

.form__radios {
  border: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.form__radios legend {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 12px;
}
.radio { position: relative; display: block; cursor: pointer; }
.radio input { position: absolute; opacity: 0; }
.radio span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.35;
  transition: border-color 0.35s ease, background 0.35s ease;
}
.radio small { font-weight: 300; font-size: 0.78rem; color: var(--ink-55); }
.radio input:checked + span {
  border-color: var(--blue-deep);
  background: rgba(61, 78, 158, 0.07);
  box-shadow: inset 0 0 0 1px var(--blue-deep);
}
.radio input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.form .btn--full { margin-top: 30px; }
.form__confirm {
  margin-top: 16px;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  color: var(--blue-deep);
  min-height: 1.4em;
}

/* ---------- faq ---------- */
.faq { background: var(--ivory-soft); border-top: 1px solid var(--hairline); }
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.faq__head p { color: var(--ink-70); }
.faq__list { border-top: 1px solid var(--hairline); }
.qa { border-bottom: 1px solid var(--hairline); }
.qa summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 4px;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  transition: color 0.3s ease;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--blue-deep); }
.qa__icon {
  position: relative;
  flex: 0 0 auto;
  width: 14px; height: 14px;
}
.qa__icon::before, .qa__icon::after {
  content: "";
  position: absolute;
  background: var(--gold);
  transition: transform 0.4s var(--ease-out);
}
.qa__icon::before { left: 0; top: 6.25px; width: 14px; height: 1.5px; }
.qa__icon::after { left: 6.25px; top: 0; width: 1.5px; height: 14px; }
.qa[open] .qa__icon::after { transform: scaleY(0); }
.qa__panel { overflow: hidden; }
.qa__panel p {
  padding: 0 4px 24px;
  color: var(--ink-70);
  max-width: 64ch;
}

/* ---------- footer ---------- */
.footer {
  background: var(--ink);
  color: var(--ivory);
  padding: clamp(72px, 9vw, 128px) 0 36px;
}
.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--hairline-light);
}
.footer__motto { font-family: var(--serif); font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--champagne); }
.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(28px, 4vw, 48px);
  padding-block: clamp(40px, 5vw, 64px);
}
.footer__col { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.footer__col p {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 6px;
}
.footer__col a, .footer__col span {
  color: rgba(246, 242, 233, 0.75);
  font-size: 0.95rem;
  transition: color 0.3s ease;
}
.footer__col a:hover { color: var(--ivory); }
.footer__col a.btn--ivory { color: var(--ink); }
.footer__col a.btn--ivory:hover { color: var(--ivory); }
.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  justify-content: space-between;
  padding-top: 28px;
  border-top: 1px solid var(--hairline-light);
  font-size: 0.8rem;
  color: rgba(246, 242, 233, 0.45);
}
.footer__up:hover { color: var(--ivory); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .hero__stage { grid-template-columns: 1fr; }
  .hero__note { display: none; }
  .hero__figure { max-width: 720px; margin-inline: auto; width: 100%; }
  .occasions__grid { grid-template-columns: 1fr 1fr; }
  .occasion--featured { grid-column: span 2; }
  .steps { grid-template-columns: 1fr 1fr; gap: 40px clamp(24px, 3vw, 40px); }
  .plate--wide { grid-column: 1 / span 12; }
  .plate:nth-child(2) { grid-column: 1 / span 6; margin-top: 0; }
  .plate:nth-child(3) { grid-column: 7 / span 6; margin-top: clamp(40px, 6vw, 80px); }
  .plate:nth-child(4) { grid-column: 1 / span 6; margin-top: 0; }
  .plate:nth-child(5) { grid-column: 7 / span 6; margin-top: clamp(40px, 6vw, 80px); }
  .plate:nth-child(6) { grid-column: 1 / span 7; margin-top: 0; }
  .plate:nth-child(7) { grid-column: 8 / span 5; margin-top: clamp(40px, 6vw, 80px); }
  .plate:nth-child(8) { grid-column: 3 / span 8; margin-top: 0; }
}

@media (max-width: 900px) {
  .story__grid, .bronsen__grid, .enquire__grid, .faq__grid { grid-template-columns: 1fr; }
  .story__figure { max-width: 560px; }
  .bronsen__portrait { max-width: 420px; margin-inline: auto; width: 100%; }
  .offerings__grid { grid-template-columns: 1fr; }
  .form__radios { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .folio__grid { grid-template-columns: 1fr 1fr; }
  .occasions__grid { grid-template-columns: 1fr; }
  .occasion--featured { grid-column: span 1; min-height: 360px; }
  .occasion { min-height: 0; padding-block: 28px; }
  .occasion h3 { margin-top: 14px; }
  .steps { grid-template-columns: 1fr; }
  .form__row--split { grid-template-columns: 1fr; }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .gallery__grid > .plate { grid-column: 1 / span 12 !important; margin-top: 0 !important; }
  .motto__line { white-space: normal; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .veil { display: none; }
}

/* ==========================================================================
   WORDMARK — "Vintage Photo Prop"
   Upright / blue-italic / upright. The italic gives the eye the same hinge the
   old ampersand gave it, but the accent now lands on a word that carries
   meaning. Set widths descend on their own (Vintage > Photo > Prop), so the
   veil stack reads as a title page rather than a list.
   ========================================================================== */

/* Accent colour. MEASURED: raw --blue (#3d4e9e) on --ink (#23201a) is 2.15:1 —
   survivable for a decorative ampersand, not for the word "Photo". --blue-lift
   measures 4.9:1 on ink and is still plainly the car's cornflower. Dark footer
   only; on ivory (nav + veil) raw --blue measures 6.76:1 and is left alone. */
:root { --blue-lift: #838cba; }
@supports (color: color-mix(in srgb, red, blue)) {
  :root { --blue-lift: color-mix(in srgb, var(--blue) 62%, var(--ivory)); }
}

.wordmark__em {
  font-style: italic;
  font-weight: inherit;
  color: var(--blue);
}
/* Cormorant's italic leans into whatever follows it — give the next word its
   air back. Not applied on the veil, where the accent is its own centred line. */
.nav__brand .wordmark__em,
.footer__wordmark .wordmark__em { padding-right: 0.03em; }

/* ---------- nav ---------- */
.nav__brand {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.1rem, 0.92rem + 0.75vw, 1.38rem);
  letter-spacing: 0.015em;
  word-spacing: 0.05em;
  white-space: nowrap;
}
.nav__brand .wordmark__em { transition: color 0.35s ease; }
.nav__brand:hover .wordmark__em { color: var(--blue-deep); }

/* The new mark is ~33px wider than the old one at desktop, which pushed the six
   nav links into wrapping across 901–999px (the old mark already broke at
   901–920px). Moving the burger breakpoint to 1000px fixes the regression and
   the pre-existing bug. Scoped to the nav on purpose — the 900px block still
   restacks .story__grid etc. and should stay at 900px. */
@media (max-width: 1000px) {
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
}

/* ---------- loading veil ---------- */
.veil__monogram {          /* class kept — js/main.js animates this node */
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 7.6vw, 4.6rem);
  line-height: 1;          /* clears Cormorant's long g-descender */
  letter-spacing: -0.005em;
  color: var(--ink);
}
.veil__line { display: block; }
.veil__monogram .wordmark__em { text-indent: 0.04em; } /* optically centre the lean */

.veil__word {              /* class kept — js/main.js animates this node */
  display: block;
  margin-top: clamp(16px, 2.2vw, 22px);
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(0.66rem, 0.58rem + 0.18vw, 0.78rem);
  letter-spacing: 0.34em;
  text-indent: 0.34em;     /* cancel the trailing letter-space: optically centred */
  text-transform: uppercase;
  color: #6f6659;          /* NOT --taupe: that measures 2.80:1 on ivory (fails
                              WCAG 1.4.3). This is 5.05:1, same warm hue. */
}
.veil__word::before {
  content: "";
  display: block;
  width: clamp(34px, 4.2vw, 58px);
  height: 1px;
  margin: 0 auto clamp(14px, 1.8vw, 20px);
  background: var(--gold-soft);
}
/* The rule draws itself outward. Pure CSS — GSAP can't tween a pseudo-element,
   so this needs no JS change. The reduced-motion block already neutralises it. */
.veil.is-active .veil__word::before {
  animation: veilRuleDraw 0.6s var(--ease-out) 0.38s both;
}
@keyframes veilRuleDraw {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* ---------- footer ---------- */
.footer__wordmark {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.95rem, 4.6vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -0.005em;
  word-spacing: 0.04em;
}
.footer__wordmark .wordmark__em {
  color: var(--blue-lift);   /* NOT --blue — see contrast note above */
  font-style: italic;
}

/* ---------- 400px and below ---------- */
@media (max-width: 400px) {
  .nav__brand { font-size: 1.1rem; letter-spacing: 0.012em; word-spacing: 0.04em; }
  .veil__monogram { font-size: 2.6rem; }
  .veil__word { font-size: 0.64rem; letter-spacing: 0.3em; text-indent: 0.3em; }
  .footer__wordmark { font-size: 1.95rem; }
  .footer__top { gap: 10px 16px; }
}

/* Below ~348px the wordmark + Enquire pill + burger exceed the viewport and the
   burger is pushed past the right edge (body has overflow-x: clip, so there is
   no scrollbar to recover it). Reclaim the width. */
@media (max-width: 360px) {
  .nav__brand { font-size: 1rem; word-spacing: 0.02em; }
  .nav__inner { gap: 12px; }
  .nav__actions { gap: 10px; }
}