/* ==========================================================================
   Venues Only - site stylesheet

   Every value comes from css/tokens.css. The look: near-black grounds and
   warm ivory pages in alternating bands, oversized regular-weight Cormorant
   headings, small letter-spaced DM Sans labels, square edges, hairline
   rules, and gold used only where it earns its place.

   Sections
     1  Reset & base
     2  Layout
     3  Typography
     4  Buttons
     5  Header & navigation
     6  Footer
     7  Hero
     8  Photographs & placeholders
     9  Icon rows
     10 Cards & grids
     11 Packages
     12 Gallery & lightbox
     13 FAQ
     14 Booking & inquiry form
     15 Booking banner
     16 Motion & print
   ========================================================================== */

/* ======================= 1. Reset & base ================================= */

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font: 400 var(--text-base) / var(--leading-body) var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; }
li { list-style: none; }

img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }

a {
  color: var(--accent-ink);
  text-decoration: none;
  transition: var(--transition-control);
}
a:hover { color: var(--gold-800); }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
/* On near-black grounds the ring switches to champagne so it stays visible. */
.on-dark :focus-visible,
.hero :focus-visible,
.cta-band :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible,
.section--dark :focus-visible,
.lightbox :focus-visible,
.pkg--featured :focus-visible { outline-color: var(--focus-ring-dark); }

::selection { background: var(--gold-300); color: var(--ink-800); }

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

.skip-link {
  position: absolute;
  left: 8px;
  top: -80px;
  z-index: 100;
  padding: 14px 20px;
  background: var(--gold-500);
  color: var(--ink-800);
  font: 500 var(--text-xs) / 1 var(--font-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 8px; color: var(--ink-800); }

/* ======================= 2. Layout ====================================== */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-page);
}

.page__main { flex: 1; }

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  width: 100%;
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide {
  max-width: var(--container-wide);
  padding-inline: clamp(16px, 2.6vw, 36px);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }
.section--loose { padding-block: var(--section-y-loose); }

.section--dark {
  background: var(--surface-dark);
  color: var(--text-inverse-soft);
}
.section--subtle { background: var(--surface-subtle); }
.section--paper { background: var(--white); }
.section--hairline-top { border-top: var(--hairline) solid var(--border-hairline); }
.section--hairline-bottom { border-bottom: var(--hairline) solid var(--border-hairline); }

.stack { display: flex; flex-direction: column; }
.stack--xs { gap: var(--space-2); }
.stack--sm { gap: var(--space-4); }
.stack--md { gap: var(--space-6); }
.stack--lg { gap: var(--space-8); }
.stack--xl { gap: var(--space-10); }

/* Two columns that collapse to one. The text column never drops below a
   comfortable measure, so the split breaks rather than crushes. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4.6vw, 72px);
  align-items: center;
}
.split--top { align-items: start; }
@media (min-width: 768px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Image first in the markup, text first on screen. */
  .split--media-first > :first-child { order: 2; }
}
/* A narrow text column beside a wider panel, as on the venue page where the
   spec grid needs the room. */
@media (min-width: 1024px) {
  .split--aside { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr); }
}

/* ======================= 3. Typography ================================== */

/* Display sizes. Regular weight throughout - Cormorant carries the page on
   size and line length, never on boldness. */
.h-hero    { font-size: var(--display-hero);    line-height: var(--leading-display); }
.h-page    { font-size: var(--display-page);    line-height: var(--leading-display); }
.h-section { font-size: var(--display-section); line-height: var(--leading-heading); }
.h-sub     { font-size: var(--display-sub);     line-height: var(--leading-heading); }
.h-card    { font-size: var(--display-card);    line-height: var(--leading-heading); }

/* A gold phrase inside a heading. Inline by default; --block starts a line. */
.h-gold { color: var(--accent-on-dark); }
.h-gold--block { display: block; }
.section:not(.section--dark) .h-gold,
.section--paper .h-gold { color: var(--accent-ink); }

/* An italic heading or phrase - Cormorant's true italic, loaded at 400.
   Section headings are set italic throughout, matching the heroes. */
.h-italic,
.h-page,
.h-section,
.h-sub { font-style: italic; }

/* Small uppercase label above a heading. In a hero it carries a short gold
   rule above it; elsewhere it stands alone. */
.eyebrow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin: 0;
  font: 500 var(--text-2xs) / 1.3 var(--font-body);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-ink);
}
.eyebrow--on-dark { color: var(--accent-on-dark); }
.eyebrow--center { align-items: center; text-align: center; }

.rule {
  width: var(--rule-w);
  height: var(--rule-h);
  background: var(--gold-500);
  border: 0;
  margin: 0;
  flex: 0 0 auto;
}
.section-head--center .rule { margin-inline: auto; }

.section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  max-width: 54rem;
}
.section-head--center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}
.section-head .lead { max-width: 62ch; }

.lead {
  font-size: var(--text-lg);
  line-height: 1.65;
  color: var(--text-body);
}
.body-text { color: var(--text-body); }
.small-text { font-size: var(--text-ms); color: var(--text-muted); }

.label {
  display: block;
  font: 500 var(--text-2xs) / 1.3 var(--font-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.label--accent { color: var(--accent-ink); }
.label--on-dark { color: var(--accent-on-dark); }

.measure { max-width: 58ch; }
.measure--tight { max-width: 46ch; }
.measure--head { max-width: 15ch; }
.measure--head-wide { max-width: 20ch; }

.head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
}

/* Anything sitting on a near-black ground. */
.on-dark { color: var(--text-inverse-soft); }
.on-dark h1,
.on-dark h2,
.on-dark h3,
.on-dark h4 { color: var(--text-inverse); }
.on-dark .lead,
.on-dark .body-text { color: var(--text-inverse-soft); }
.on-dark .label { color: var(--text-inverse-faint); }
.on-dark a:not(.btn) { color: var(--accent-on-dark); }

.center { text-align: center; align-items: center; }

/* Copy the client still has to supply, e.g. [PHONE NUMBER]. Search for
   this class to find every outstanding content gap. */
.placeholder {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--text-faint);
}
.on-dark .placeholder,
.site-footer .placeholder { color: var(--text-inverse-faint); }

/* ======================= 4. Buttons ===================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  height: var(--control-h-md);
  padding-inline: var(--btn-pad-md);
  border: var(--hairline) solid transparent;
  border-radius: var(--radius-control);
  background: var(--gold-500);
  color: var(--on-accent);
  font: 500 var(--btn-font) / 1 var(--font-body);
  letter-spacing: var(--btn-tracking);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-control);
}
.btn:hover {
  background: var(--gold-400);
  color: var(--on-accent);
}
.btn:active { background: var(--gold-600); }
.btn .icon { width: 16px; height: 16px; }

.btn--sm { height: var(--control-h-sm); padding-inline: var(--btn-pad-sm); font-size: var(--text-2xs); }
.btn--lg { height: var(--control-h-lg); padding-inline: var(--btn-pad-lg); }
.btn--block { width: 100%; }

/* Champagne: the gold that belongs on a near-black ground. */
.btn--champagne { background: var(--gold-300); }
.btn--champagne:hover { background: var(--gold-200); }
.btn--champagne:active { background: var(--gold-400); }

/* Outline on a light ground. */
.btn--outline {
  background: transparent;
  color: var(--text-strong);
  border-color: var(--ink-800);
}
.btn--outline:hover {
  background: var(--ink-800);
  color: var(--white);
  border-color: var(--ink-800);
}

/* Outline on a near-black ground. */
.btn--outline-inverse {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.5);
}
.btn--outline-inverse:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  border-color: var(--white);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  background: var(--surface-muted);
  color: var(--text-faint);
  border-color: transparent;
  cursor: not-allowed;
  pointer-events: none;
}
.btn--outline-inverse[disabled],
.btn--outline-inverse[aria-disabled="true"] {
  background: transparent;
  color: var(--text-inverse-faint);
  border-color: rgba(255, 255, 255, 0.22);
}
.btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* ======================= 5. Header & navigation ========================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--surface-header);
  border-bottom: var(--hairline) solid var(--border-dark);
}

.site-header__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: 0 clamp(16px, 2.6vw, 36px);
  min-height: 82px;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 40px);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 0 0 auto;
  color: var(--white);
}
.brand:hover { color: var(--white); opacity: 0.86; }
.brand__logo {
  height: 58px;
  width: auto;
}
.brand__tagline {
  padding-left: var(--space-4);
  border-left: var(--hairline) solid var(--border-dark);
  font: 500 var(--text-2xs) / 1.7 var(--font-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-inverse-faint);
  white-space: nowrap;
}
.brand__tagline span { display: block; }

/* The links sit to the right, so the Book button reads as the last of them
   rather than a separate item at the far edge. */
.nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(16px, 2vw, 34px);
  flex: 1 1 auto;
  min-width: 0;
}
.nav__link {
  position: relative;
  padding-block: 6px;
  font: 500 var(--text-ms) / 1 var(--font-body);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.74);
  white-space: nowrap;
}
.nav__link:hover { color: var(--white); }
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--gold-500);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.nav__link[aria-current="page"] { color: var(--accent-on-dark); }
.nav__link[aria-current="page"]::after { opacity: 1; }

.header-actions { display: flex; align-items: center; flex: 0 0 auto; }
.header-actions .btn { font-size: var(--text-xs); }

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  border: var(--hairline) solid var(--border-dark);
  color: var(--white);
  cursor: pointer;
  transition: var(--transition-control);
}
.nav-toggle:hover { border-color: var(--gold-500); color: var(--gold-300); }
/* Swap the burger for a close mark. Scoped to .nav-toggle so these outrank
   the generic `.icon { display: inline-block }` rule. */
.nav-toggle .nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: inline-block; }

.mobile-nav {
  display: none;
  background: var(--ink-800);
  border-top: var(--hairline) solid var(--border-dark);
  padding: var(--space-2) var(--gutter) var(--space-6);
  flex-direction: column;
}
.mobile-nav[data-open="true"] { display: flex; }
.mobile-nav__links { display: flex; flex-direction: column; }
.mobile-nav__link {
  padding-block: var(--space-4);
  border-bottom: var(--hairline) solid var(--border-dark);
  font: 500 var(--text-sm) / 1.3 var(--font-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}
.mobile-nav__link:hover { color: var(--white); }
.mobile-nav__link[aria-current="page"] { color: var(--accent-on-dark); }
.mobile-nav__foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-5);
}
.mobile-nav__phone {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font: 400 var(--text-ms) / 1 var(--font-body);
  color: var(--text-inverse-soft);
}
.mobile-nav__phone .icon { color: var(--gold-500); }

@media (max-width: 1023px) {
  .site-header__inner > .nav,
  .site-header__inner > .header-actions { display: none; }
  .nav-toggle { display: flex; }
  .site-header__inner { min-height: 68px; }
  .brand__logo { height: 40px; }
}
@media (max-width: 560px) {
  .brand__tagline { display: none; }
}

/* ======================= 6. Footer ====================================== */

.site-footer {
  background: var(--surface-footer);
  color: var(--text-inverse-soft);
}

/* The brand column - logo, tagline, address and contact - then three link
   columns, each under a small uppercase heading. */
.site-footer__main {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: var(--space-10) clamp(16px, 2.6vw, 36px) var(--space-9);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10) var(--space-8);
}
@media (min-width: 560px) {
  .site-footer__main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .site-footer__main { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: auto; }
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
.footer-brand__logo:hover { opacity: 0.86; }
.footer-brand__logo img { height: 64px; width: auto; }
.footer-brand__tagline {
  font: italic 400 var(--display-card) / 1.2 var(--font-display);
  color: var(--text-inverse);
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-style: normal;
  font-size: var(--text-base);
  line-height: 1.6;
}
.footer-contact__link { color: var(--text-inverse-soft); }
.footer-contact__link:hover { color: var(--accent-on-dark); }

.footer-col__title {
  margin-bottom: var(--space-4);
  font: 500 var(--text-sm) / 1.3 var(--font-body);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-on-dark);
}
.footer-col__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer-col__link {
  font-size: var(--text-base);
  line-height: 1.4;
  color: var(--text-inverse-soft);
}
.footer-col__link:hover { color: var(--accent-on-dark); }

.social { display: flex; gap: var(--space-3); }
.social__link {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-500);
  transition: var(--transition-control);
}
.social__link:hover { color: var(--accent-on-dark); }

/* The fine print under a hairline: copyright at the left, the service area
   and any legal links at the right. */
.site-footer__fine {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: var(--space-6) clamp(16px, 2.6vw, 36px) var(--space-8);
  border-top: var(--hairline) solid var(--border-dark);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
}
.footer-fine__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-ms);
  color: var(--text-inverse-faint);
}
.footer-fine__link { color: var(--text-inverse-faint); }
.footer-fine__link:hover { color: var(--accent-on-dark); }
.footer-fine__sep { color: rgba(255, 255, 255, 0.3); }

/* ======================= 7. Hero ======================================== */

/* A full-bleed photograph, a scrim weighted to the left so the type always
   has a dark ground under it, and the heading set at the left. Every page's
   hero is the same height, and the content hangs from the top rather than
   sitting on the bottom edge, so a page with a shorter lead or no buttons
   leaves the space below instead of shifting everything down. */
.hero {
  position: relative;
  display: flex;
  min-height: var(--hero-h);
  padding-block: var(--hero-pad);
  background: var(--ink-800);
  overflow: hidden;
  isolation: isolate;
}

.hero__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero__img--empty {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: var(--space-4);
  background: var(--surface-dark-soft);
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim-hero);
}
.hero__scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim-hero-v);
  /* The top and bottom shading fades out with the sweep, so nothing dims
     the right of the photograph. */
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 70%);
  mask-image: linear-gradient(90deg, #000 40%, transparent 70%);
}
.hero__slot-path {
  font: 400 var(--text-2xs) / 1.4 var(--font-mono);
  color: var(--text-inverse-faint);
}

.hero__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
}
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  max-width: 48rem;
  color: var(--text-inverse-soft);
}
/* The heading, lead and button row each reserve room for the longest any
   page runs to, so the next element starts at the same height whether the
   one above runs short, long, or is missing. */
.hero__content h1 {
  min-height: calc(var(--hero-title-lines) * 1em * var(--leading-display));
  color: var(--text-inverse);
}
.hero__lead {
  max-width: 44ch;
  min-height: calc(var(--hero-lead-lines) * 1lh);
  color: var(--text-inverse-soft);
  font-size: var(--text-base);
  line-height: 1.65;
}
.hero .btn-row {
  min-height: var(--hero-actions-h);
}
/* Without buttons, the whole block sits a little lower than on the pages
   that have them, so it doesn't hang in the top of an emptier hero. */
.hero__content:not(:has(.btn-row)) {
  padding-top: var(--space-8);
}
/* The gold rule that sits above a hero eyebrow. */
.hero .eyebrow::before {
  content: "";
  width: var(--rule-w);
  height: var(--rule-h);
  background: var(--gold-500);
}

/* The marginal note at the lower right, set small and widely spaced. */
.hero__aside {
  display: none;
  flex: 0 0 auto;
  align-self: flex-end;
  text-align: right;
  font: 500 var(--text-2xs) / 2.1 var(--font-body);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
}
.hero__aside span { display: block; }
@media (min-width: 1024px) {
  .hero__aside { display: block; }
}

@media (max-width: 767px) {
  /* Headings and leads wrap further at this width; reserve for the longest. */
  .hero { --hero-title-lines: 4; --hero-lead-lines: 4; }
  .hero__inner { padding-block: var(--space-2); }
  /* A narrow screen cannot carry a side-weighted wash - the type runs the
     full width - so the scrim becomes an even veil that deepens downwards.
     It has to hold white text over the brightest part of the photograph. */
  .hero__scrim {
    background: linear-gradient(180deg, rgba(9, 9, 9, 0.5) 0%, rgba(9, 9, 9, 0.38) 38%, rgba(9, 9, 9, 0.85) 100%);
  }
  .hero__scrim::after { background: none; }
  .hero__content { gap: var(--space-5); max-width: none; }
}

/* Side-by-side buttons look ragged at phone width; stack them full width. */
@media (max-width: 559px) {
  .hero { --hero-actions-h: calc(2 * var(--control-h-lg) + var(--space-4)); }
  .hero .btn-row { flex-direction: column; align-items: stretch; width: 100%; }
  .hero .btn-row .btn { width: 100%; }
  .cta-band__action,
  .cta-band__action .btn { width: 100%; }

  /* The four steps have to share 390px, so the dots and labels come down. */
  .stepper__dot { width: 34px; height: 34px; font-size: var(--text-base); }
  .stepper__item + .stepper__item::before {
    top: 17px;
    right: calc(50% + 22px);
    width: calc(100% - 44px);
  }
  .stepper__name { font-size: 9px; letter-spacing: 0.1em; }
}

/* Showcase: a photograph filling the band's height and bleeding off the page
   edge beside a text column, as in "An Entrance Worth Remembering" on the
   home page. On a phone the photograph runs full width, in markup order.
   --media-right puts the text first and the photograph on the right, with
   the text kept in line with the page container. */
.showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.showcase.section--dark { border-top: var(--hairline) solid var(--border-dark); }
.showcase__media .photo { height: 100%; }
.showcase__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  padding: var(--section-y-tight) var(--gutter) var(--section-y);
}
.showcase--feature .h-section { font-size: var(--display-hero); line-height: var(--leading-display); }
.showcase--feature .lead { font-size: var(--text-base); max-width: 44ch; }
.showcase--media-right .showcase__text { padding-block: var(--section-y) var(--section-y-tight); }
/* Breathing room above and below the whole band, so the photo does not run
   straight into the dark section that follows. */
.showcase--media-right { padding-block: var(--section-y-tight); }
@media (min-width: 900px) {
  .showcase {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    min-height: clamp(520px, 44vw, 700px);
  }
  .showcase__media .photo { aspect-ratio: auto; }
  .showcase__text {
    justify-content: center;
    padding: var(--section-y) clamp(32px, 5vw, 88px);
    max-width: 44rem;
  }
  /* The photo column runs ~15% narrower than the usual 1.15fr, trimming the
     empty left side of the welcome photo (see its focal point in home.mjs). */
  .showcase--media-right { grid-template-columns: minmax(0, 1fr) minmax(0, 0.98fr); }
  .showcase--media-right .showcase__text {
    max-width: none;
    padding-left: max(var(--gutter), calc((100vw - var(--container-max)) / 2 + var(--gutter)));
  }
}
@media (max-width: 559px) {
  .showcase__text .btn { width: 100%; }
}

/* ======================= 8. Photographs & placeholders ================== */
/* Every image position is a labeled slot until real photography lands.
   To go live, give the entry an `image` in tools/content.mjs; the surrounding
   layout does not depend on the placeholder markup. */

.photo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-subtle);
  overflow: hidden;
}
.photo--3x2 { aspect-ratio: 3 / 2; }
.photo--4x3 { aspect-ratio: 4 / 3; }
.photo--16x9 { aspect-ratio: 16 / 9; }
.photo--1x1 { aspect-ratio: 1 / 1; }
.photo--portrait { aspect-ratio: 4 / 5; }
.photo--dark { background: var(--surface-dark-soft); }

/* A slot still waiting for photography gets a hairline so it reads as a
   frame rather than dissolving into the band behind it. Once the entry has
   an `image` in tools/content.mjs this class is gone and so is the border. */
.photo--slot {
  background: var(--slot);
  border: var(--hairline) solid var(--border-hairline);
}
.photo--slot.photo--dark,
.section--dark .photo--slot {
  background: var(--ink-700);
  border-color: var(--border-dark);
}

.photo__caption { text-align: center; padding: var(--space-4); }
.photo__kind {
  font: 500 var(--text-3xs) / 1.3 var(--font-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-faint);
}
.photo__path {
  margin-top: var(--space-2);
  font: 400 var(--text-xs) / 1.5 var(--font-mono);
  color: var(--text-muted);
}
.photo--dark .photo__kind,
.photo--dark .photo__path { color: var(--text-inverse-faint); }

.photo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A captioned photograph: the caption sits beneath in small caps. */
.shot-figure { display: flex; flex-direction: column; gap: var(--space-4); }
.shot-figure__caption {
  font: 500 var(--text-2xs) / 1.3 var(--font-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-strong);
  text-align: center;
}

/* Virtual tour: a 16:9 stage holding an embed or the placeholder. */
.tour {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--surface-dark-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  overflow: hidden;
}
.tour__play {
  width: 72px;
  height: 72px;
  border: var(--hairline) solid var(--gold-500);
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-300);
  transition: var(--transition-control);
}
.tour__label {
  font: 400 var(--text-2xs) / 1.5 var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--text-inverse-faint);
}
.tour__frame,
.map-frame { width: 100%; height: 100%; border: 0; }

/* ======================= 9. Icon rows =================================== */

/* The row of event types: an icon over a two-line label, divided by
   hairlines. Used under the home hero and on the venue page. */
.icon-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 560px) {
  .icon-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* `--cols` lets a page say how many types it is showing; the hairline rules
   below only care about the 2- and 3-column wrapped rows. */
@media (min-width: 1024px) {
  .icon-row { grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); }
}
.icon-row__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  padding: var(--space-6) var(--space-3);
  border-left: var(--hairline) solid var(--border-hairline);
}
.icon-row__item:first-child { border-left: 0; }
/* Restart the hairline at the start of each wrapped row. */
@media (max-width: 559px) {
  .icon-row__item:nth-child(2n + 1) { border-left: 0; }
  .icon-row__item:nth-child(n + 3) { border-top: var(--hairline) solid var(--border-hairline); }
}
@media (min-width: 560px) and (max-width: 1023px) {
  .icon-row__item:nth-child(3n + 1) { border-left: 0; }
  .icon-row__item:nth-child(n + 4) { border-top: var(--hairline) solid var(--border-hairline); }
}
.icon-row__item .icon { color: var(--gold-600); }
.icon-row__name {
  font: 500 var(--text-2xs) / 1.5 var(--font-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-strong);
  max-width: 14ch;
}

/* Icons (inline SVG sprite, see assets/icons.svg) */
.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
}
.icon--sm { width: 16px; height: 16px; }
.icon--md { width: 24px; height: 24px; }
.icon--lg { width: 28px; height: 28px; }
.icon--xl { width: 32px; height: 32px; }

/* ======================= 10. Cards & grids ============================== */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
}
@media (min-width: 1024px) {
  .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .card-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-5); }
}

/* An event type: photograph, then a small-caps name and one line of copy.
   No border, no card chrome - the photograph is the card. */
.event-card { display: flex; flex-direction: column; gap: var(--space-4); }
.event-card__name {
  font: 500 var(--text-2xs) / 1.4 var(--font-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-strong);
}
.event-card__text {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-body);
}
.section--dark .event-card__name { color: var(--white); }
.section--dark .event-card__text { color: var(--text-inverse-faint); }
.section--dark .photo { background: var(--surface-dark-soft); }

/* A stage of the evening on the venue page: photograph over a dark panel,
   divided by a gold hairline, with a numbered step, serif name and one line. */
.stage-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-dark-soft);
}
.stage-card .photo { border-bottom: var(--hairline) solid var(--gold-500); }
.stage-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-6) var(--space-7);
}
.stage-card__step {
  font: 500 var(--text-3xs) / 1.3 var(--font-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent-on-dark);
}
.stage-card .h-sub { color: var(--text-inverse); }
.stage-card__text {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-inverse-faint);
}
/* Two dark bands in a row need a seam. */
.section--dark + .section--dark { border-top: var(--hairline) solid var(--border-dark); }

/* A venue feature: icon, name, one line. */
.feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-7);
  background: var(--white);
  border: var(--hairline) solid var(--border-hairline);
  height: 100%;
}
.feature .icon { color: var(--gold-600); }
.feature h3 { font-size: var(--text-xl); }
.feature p { font-size: var(--text-ms); line-height: 1.6; color: var(--text-body); }

/* The venue spec grid: an icon over a label and its value, centred. */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8) var(--space-6);
}
@media (min-width: 768px) {
  .spec-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.spec {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}
.spec .icon { color: var(--gold-600); }
.spec__label {
  font: 500 var(--text-2xs) / 1.3 var(--font-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-strong);
}
.spec__value {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 22ch;
}

/* Testimonial */
.quote {
  font: italic 400 clamp(23px, 2.7vw, 34px) / 1.35 var(--font-display);
  color: var(--text-strong);
}
.quote-attrib {
  font: 500 var(--text-2xs) / 1.4 var(--font-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ======================= 11. Packages =================================== */

.pkg-grid {
  display: grid;
  gap: var(--space-6);
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .pkg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7); }
}

/* The three cards share one set of rows (subgrid), so the headings, every
   included item, "Ideal for" and the button sit level across all three. A
   card with less in a row - Essential has no "plus" line - leaves it empty.

   Body rows: heading, description, plus, one row per item
   (--pkg-items, the longest list, set on the grid by the page), ideal,
   button. That is --pkg-items + 5 rows per card. */
@media (min-width: 1024px) {
  @supports (grid-template-rows: subgrid) {
    .pkg-grid--aligned { row-gap: 0; }
    .pkg-grid--aligned > .pkg {
      display: grid;
      grid-row: span calc(var(--pkg-items) + 5);
      grid-template-rows: subgrid;
      row-gap: 0;
      height: auto;
    }
    .pkg-grid--aligned .pkg__body {
      display: grid;
      grid-row: 1 / -1;
      grid-template-rows: subgrid;
      row-gap: var(--space-5);
    }
    .pkg-grid--aligned .pkg__plus { grid-row: 3; }
    .pkg-grid--aligned .pkg__list {
      display: grid;
      grid-row: 4 / -3;
      grid-template-rows: subgrid;
      row-gap: var(--space-3);
    }
    .pkg-grid--aligned .pkg__ideal { grid-row: -3; }
    .pkg-grid--aligned .pkg__actions { grid-row: -2; align-self: end; }
  }
}

.pkg {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface-subtle);
  border: var(--hairline) solid transparent;
  height: 100%;
}
.pkg__body {
  padding: var(--space-9) var(--space-7) var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  flex: 1;
}
.pkg__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.pkg__name {
  font-size: clamp(25px, 2.2vw, 31px);
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}
.pkg__promise {
  font: 500 var(--text-2xs) / 1.4 var(--font-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}
.pkg__price {
  font-size: var(--text-xs);
  color: var(--text-faint);
  text-align: center;
}
.pkg__description {
  font-size: var(--text-ms);
  line-height: 1.6;
  color: var(--text-body);
  text-align: center;
}
.pkg__plus {
  font: 500 var(--text-2xs) / 1.3 var(--font-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-strong);
}
.pkg__list { display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.pkg__row { display: flex; gap: var(--space-3); align-items: flex-start; }
.pkg__row .icon { color: var(--gold-600); margin-top: 3px; }
.pkg__row-text { display: flex; flex-direction: column; gap: 2px; }
.pkg__row-label { font: 400 var(--text-ms) / 1.5 var(--font-body); color: var(--text-strong); }
.pkg__row-detail { font-size: var(--text-sm); line-height: 1.5; color: var(--text-muted); }

.pkg__ideal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-5);
  border-top: var(--hairline) solid var(--border-hairline);
  text-align: center;
}
.pkg__ideal-value { font-size: var(--text-sm); line-height: 1.6; color: var(--text-body); }

.pkg__actions .btn {
  white-space: normal;
  line-height: 1.3;
  text-align: center;
  height: auto;
  min-height: var(--control-h-md);
  padding-block: var(--space-3);
}
.pkg__actions { display: flex; flex-direction: column; gap: var(--space-2); }

/* Quiet secondary button: text only, for "Explore" under "Inquire now". */
.btn--ghost { background: transparent; color: var(--text-strong); }
.btn--ghost:hover { background: transparent; color: var(--gold-700); }
.pkg--featured .btn--ghost { color: var(--white); }
.pkg--featured .btn--ghost:hover { color: var(--accent-on-dark); }

/* Near-black solid button for a light ground. */
.btn--ink { background: var(--ink-800); color: var(--white); }
.btn--ink:hover { background: var(--ink-700); color: var(--white); }
.btn--ink:active { background: var(--ink-800); }

/* The dark band introducing the package sections, with 01 02 03 jump links
   set in gold behind a hairline at the right. */
.pkg-intro { padding-block: var(--section-y-tight); }
.pkg-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-8);
}
.pkg-intro__jumps { display: none; }
@media (min-width: 768px) {
  .pkg-intro__grid { grid-template-columns: minmax(0, 1fr) auto; }
  .pkg-intro__jumps {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) 0 var(--space-3) clamp(24px, 3vw, 44px);
    border-left: var(--hairline) solid var(--border-dark);
  }
}
.pkg-intro__jump {
  font: 400 var(--display-card) / 1.15 var(--font-display);
  color: var(--accent-on-dark);
  text-decoration: none;
}
.pkg-intro__jump:hover { color: var(--white); }

/* One package per band. Text and photograph side by side; the photograph
   spans both text rows, so on a phone it can fall between the heading and
   the list, as in the mockup. */
.pkg-story {
  padding-block: var(--section-y-tight);
  scroll-margin-top: 82px; /* clear the sticky header */
}
.pkg-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "media" "body";
  gap: var(--space-7);
}
.pkg-story__head { grid-area: head; display: flex; flex-direction: column; gap: var(--space-4); }
.pkg-story__media { grid-area: media; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.pkg-story__body { grid-area: body; display: flex; flex-direction: column; gap: var(--space-7); }
.pkg-story__count { display: none; }

@media (min-width: 900px) {
  .pkg-story__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    grid-template-areas: "head media" "body media" "count count";
    column-gap: clamp(40px, 5vw, 80px);
    row-gap: var(--space-6);
    align-items: start;
  }
  .pkg-story__grid--media-left {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    grid-template-areas: "media head" "media body" "count count";
  }
  .pkg-story__head { align-self: end; }
  .pkg-story__media { align-self: center; }
  .pkg-story__count {
    display: block;
    grid-area: count;
    justify-self: end;
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    color: var(--text-muted);
  }
  .pkg-story--dark .pkg-story__count { color: var(--text-inverse-faint); }
}

.pkg-story__step {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font: 500 var(--text-2xs) / 1.3 var(--font-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent-ink);
}
.pkg-story--dark .pkg-story__step { color: var(--accent-on-dark); }
.pkg-story--dark h2 { color: var(--text-inverse); }
.pkg-story__lead {
  max-width: 46ch;
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--text-body);
}
.pkg-story--dark .pkg-story__lead { color: var(--text-inverse-soft); }

/* Three included highlights, each behind a short gold dash, under a hairline. */
.pkg-story__points {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-6);
  border-top: var(--hairline) solid var(--border-hairline);
}
.pkg-story--dark .pkg-story__points { border-top-color: var(--border-dark); }
.pkg-story__points li {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-ms);
  color: var(--text-strong);
}
.pkg-story--dark .pkg-story__points li { color: var(--text-inverse); }
.pkg-story__points li::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 1px;
  background: var(--gold-500);
}

.pkg-story__tags {
  font: 500 var(--text-3xs) / 1.3 var(--font-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent-ink);
}
.pkg-story--dark .pkg-story__tags { color: var(--accent-on-dark); }

/* Premier: one wide photograph over two smaller ones. */
.pkg-story__media--trio {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.pkg-story__media--trio > .photo:first-child { grid-column: 1 / -1; }
.pkg-story__media--trio > .photo:not(:first-child) { aspect-ratio: 16 / 10; }
.pkg-story__media--trio > .pkg-story__tags { grid-column: 1 / -1; }

@media (max-width: 559px) {
  .pkg-story__body .btn { width: 100%; }
}

/* The closing band: heading and a gold line at the left, button at the right. */
.pkg-close { padding-block: var(--space-10); }
.pkg-close__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.pkg-close h2 { color: var(--text-inverse); }
@media (max-width: 559px) {
  .pkg-close__inner .btn { width: 100%; }
}

/* The featured card: a near-black ground inside a gold hairline, with the
   tab straddling its top edge. */
.pkg--featured {
  background: var(--surface-dark);
  border-color: var(--gold-500);
  overflow: visible;
}
.pkg--featured .pkg__name { color: var(--white); }
.pkg--featured .pkg__promise { color: var(--accent-on-dark); }
.pkg--featured .pkg__price { color: var(--text-inverse-faint); }
.pkg--featured .pkg__description { color: var(--text-inverse-soft); }
.pkg--featured .pkg__plus { color: var(--white); }
.pkg--featured .pkg__row .icon { color: var(--gold-300); }
.pkg--featured .pkg__row-label { color: var(--white); }
.pkg--featured .pkg__row-detail { color: var(--text-inverse-faint); }
.pkg--featured .pkg__ideal { border-top-color: var(--border-dark); }
.pkg--featured .pkg__ideal .label { color: var(--text-inverse-faint); }
.pkg--featured .pkg__ideal-value { color: var(--text-inverse-soft); }

.pkg__badge {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
  z-index: 2;
  background: var(--gold-500);
  color: var(--ink-800);
  font: 500 var(--text-3xs) / 1 var(--font-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 8px 18px;
  white-space: nowrap;
}
/* Room for the tab above the featured card. */
@media (min-width: 1024px) {
  .pkg-grid:has(.pkg--featured) { padding-top: var(--space-3); }
}

/* The compact teaser used on the home page. */
.pkg-teaser {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  background: var(--surface-subtle);
  border: var(--hairline) solid transparent;
  padding: var(--space-9) var(--space-7);
  height: 100%;
  text-align: center;
}
.pkg-teaser h3 {
  font-size: var(--display-card);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pkg-teaser p { font-size: var(--text-ms); line-height: 1.6; color: var(--text-body); }
.pkg-teaser--featured {
  background: var(--surface-dark);
  border-color: var(--gold-500);
  overflow: visible;
}
.pkg-teaser--featured h3 { color: var(--white); }
.pkg-teaser--featured p { color: var(--text-inverse-soft); }
.pkg-teaser--featured .label { color: var(--accent-on-dark); }

/* ======================= 12. Gallery & lightbox ========================= */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.chip {
  padding: 13px 22px;
  cursor: pointer;
  border-radius: var(--radius-control);
  background: var(--white);
  color: var(--text-strong);
  border: var(--hairline) solid var(--border-hairline);
  font: 500 var(--text-2xs) / 1 var(--font-body);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  transition: var(--transition-control);
}
/* All eight filters fit on one line at desktop width. */
@media (min-width: 1024px) {
  .filters { gap: var(--space-2); }
  .chip { padding-inline: 17px; }
}
.chip:hover { border-color: var(--gold-500); color: var(--gold-700); }
.chip[aria-pressed="true"] {
  background: var(--gold-500);
  color: var(--ink-800);
  border-color: var(--gold-500);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.shot {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--surface-subtle);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  padding: 0;
  border: 0;
}
/* A tile with no photograph yet still needs an edge, or it dissolves into
   the ivory band behind it. */
.shot:not(.shot--photo) {
  background: var(--slot);
  border: var(--hairline) solid var(--border-hairline);
}
.shot[hidden] { display: none; }
.shot__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.shot:hover .shot__img { transform: scale(1.03); }

/* The label sits in the lower-left corner over a soft darkening of the
   photograph, as in the gallery reference. */
.shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim-tile);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.shot--photo::after { opacity: 1; }
.shot__inner {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-4);
  max-width: 100%;
}
.shot__category {
  display: block;
  font: 500 var(--text-3xs) / 1.3 var(--font-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--white);
  background: rgba(9, 9, 9, 0.66);
  padding: 7px 12px;
}
.shot__path,
.shot__caption { display: block; }
.shot__path {
  font: 400 var(--text-xs) / 1.5 var(--font-mono);
  color: var(--text-muted);
}
.shot__caption {
  font-size: var(--text-sm);
  color: var(--text-body);
}
/* On a tile that still has no photograph the labels sit in the middle of the
   slot, where the placeholder path is readable. */
.shot:not(.shot--photo) .shot__inner {
  position: static;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
}
.shot:not(.shot--photo) .shot__category {
  background: none;
  padding: 0;
  color: var(--text-faint);
}

.empty-state {
  border: var(--hairline) dashed var(--border-strong);
  padding: var(--space-10) var(--space-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
}
.empty-state[hidden] { display: none; }
.empty-state__title { font-family: var(--font-display); font-size: var(--display-card); color: var(--text-strong); }
.empty-state__text { color: var(--text-muted); }

/* `display` is set only on [open] so the browser's own
   `dialog:not([open]) { display: none }` still wins while it is closed. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  background: rgba(5, 5, 5, 0.96);
  border: 0;
  padding: 0;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
}
.lightbox[open] {
  display: flex;
  flex-direction: column;
  animation: vo-fade var(--dur-base) var(--ease-out);
}
.lightbox::backdrop { background: rgba(5, 5, 5, 0.96); }
.lightbox__bar { display: flex; justify-content: flex-end; padding: var(--space-5); }
.lightbox__btn {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: var(--hairline) solid rgba(255, 255, 255, 0.28);
  color: var(--white);
  cursor: pointer;
  transition: var(--transition-control);
}
.lightbox__btn:hover { border-color: var(--gold-500); color: var(--gold-300); }
.lightbox__btn--nav { width: 52px; height: 52px; flex: 0 0 auto; }
.lightbox__body {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4) var(--space-2);
  min-height: 0;
}
.lightbox__stage {
  flex: 1;
  height: 100%;
  min-width: 0;
  background: var(--ink-700);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6);
  text-align: center;
}
.lightbox__category {
  font: 500 var(--text-2xs) / 1.3 var(--font-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent-on-dark);
}
.lightbox__path { font: 400 var(--text-xs) / 1.5 var(--font-mono); color: var(--text-inverse-faint); }
.lightbox__stage:has(> .lightbox__img:not([hidden])) { padding: 0; background: transparent; }
.lightbox__img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.lightbox__img[hidden],
.lightbox__category[hidden],
.lightbox__path[hidden] { display: none; }
.lightbox__foot {
  padding: var(--space-4) var(--space-6) var(--space-7);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.lightbox__caption { font-size: var(--text-base); color: var(--white); }
.lightbox__count {
  font: 500 var(--text-2xs) / 1.4 var(--font-body);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--text-inverse-faint);
}

@keyframes vo-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ======================= 13. FAQ ======================================== */

/* Each question is its own hairline box, as in the booking reference. */
.faq { display: flex; flex-direction: column; gap: var(--space-3); }
.faq__item {
  background: var(--white);
  border: var(--hairline) solid var(--border-hairline);
  transition: var(--transition-control);
}
.faq__item:hover { border-color: var(--border-strong); }
.faq__item[open] { border-color: var(--gold-500); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  list-style: none;
  font: 400 var(--text-ms) / 1.5 var(--font-body);
  color: var(--text-strong);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q .icon {
  color: var(--gold-600);
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.faq__item[open] .faq__q .icon { transform: rotate(45deg); color: var(--gold-600); }
.faq__a {
  padding: 0 var(--space-5) var(--space-5);
  font-size: var(--text-ms);
  line-height: 1.7;
  color: var(--text-body);
}

/* ======================= 14. Booking & inquiry form ===================== */

/* Pieces that only make sense with (or without) JavaScript. The `js` class
   is set by a one-line script in the <head>, before first paint. */
.js .no-js-only,
html:not(.js) .js-only { display: none !important; }

/* Progress: numbered dots joined by a hairline. */
.stepper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 820px;
  width: 100%;
  margin-inline: auto;
}
.stepper__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}
.stepper__item + .stepper__item::before {
  content: "";
  position: absolute;
  top: 21px;
  right: calc(50% + 28px);
  width: calc(100% - 56px);
  height: 1px;
  background: var(--border-hairline);
  transition: background-color var(--dur-base) var(--ease-out);
}
.stepper__item[data-state="done"] + .stepper__item::before { background: var(--gold-500); }
.stepper__dot {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-subtle);
  color: var(--text-muted);
  font: 400 var(--text-lg) / 1 var(--font-display);
  transition: var(--transition-control);
}
.stepper__name {
  font: 500 var(--text-3xs) / 1.4 var(--font-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  max-width: 14ch;
}
.stepper__item[data-state="current"] .stepper__dot { background: var(--gold-500); color: var(--white); }
.stepper__item[data-state="current"] .stepper__name { color: var(--text-strong); }
.stepper__item[data-state="done"] .stepper__dot { background: var(--gold-200); color: var(--gold-800); }
.stepper__item[data-state="done"] .stepper__name { color: var(--text-body); }
/* The tracker only reflects state the script can track. */
html:not(.js) .stepper { display: none; }

.stepper-band {
  background: var(--white);
  border-bottom: var(--hairline) solid var(--border-hairline);
  padding-block: var(--space-7);
}

/* The booking page: the form at the left, help at the right. */
.booking__grid {
  display: grid;
  gap: var(--space-7);
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .booking__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: var(--space-9); }
}
.booking__main { display: flex; flex-direction: column; gap: var(--space-9); }
.booking__foot {
  margin-top: var(--space-7);
  text-align: center;
  font-size: var(--text-ms);
  color: var(--text-muted);
}
.booking__foot a { text-decoration: underline; text-underline-offset: 3px; }

/* A numbered step heading: "1. Select Your Date". */
.step-head { display: flex; flex-direction: column; gap: var(--space-2); }
.step-head__title { font-size: var(--display-sub); line-height: 1.15; }
.step-head__title:focus { outline: none; }
.step-head__num { color: var(--gold-600); }
.step-head__note { font-size: var(--text-ms); color: var(--text-muted); }

/* The panel each half of the form sits in. */
.form-card {
  background: var(--white);
  border: var(--hairline) solid var(--border-hairline);
  padding: clamp(22px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  scroll-margin-top: 96px; /* clear the sticky header */
}
.form-card--plain {
  background: none;
  border: 0;
  padding: 0;
}

/* Fields */
.form-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 560px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); }
  .field--wide { grid-column: 1 / -1; }
}
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label {
  font: 400 var(--text-sm) / 1.4 var(--font-body);
  color: var(--text-body);
}
.field__optional { color: var(--text-faint); margin-left: 4px; }

.input {
  width: 100%;
  height: var(--control-h-md);
  padding: 0 var(--space-4);
  background: var(--white);
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius-control);
  font: 400 var(--text-ms) / 1.4 var(--font-body);
  color: var(--text-strong);
  transition: var(--transition-control);
}
.input::placeholder { color: var(--text-faint); }
.input:hover { border-color: var(--border-strong); }
.input:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 0;
  border-color: var(--gold-500);
}
.input--area { height: auto; min-height: 104px; padding: var(--space-3) var(--space-4); resize: vertical; }
/* Flag a field only once the visitor has tried to move on. */
.input[aria-invalid="true"] { border-color: #9b2c1f; background: #fdf6f5; }

.select { position: relative; }
.select select { appearance: none; padding-right: 42px; cursor: pointer; }
.select select:invalid { color: var(--text-faint); }
.select option { color: var(--text-strong); }
.select .icon {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  translate: 0 -50%;
  color: var(--text-muted);
  pointer-events: none;
}

.form-hint { font-size: var(--text-sm); color: var(--text-muted); }
.field__error { font-size: var(--text-sm); color: #9b2c1f; }
.field__error[hidden] { display: none; }

/* Calendar */
.cal {
  border: var(--hairline) solid var(--border-hairline);
  background: var(--white);
  padding: var(--space-4) clamp(10px, 1.6vw, 18px) var(--space-5);
}
html:not(.js) .cal { display: none; }
.js .cal-fallback { display: none; }
.cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.cal__month {
  font: 400 var(--text-xl) / 1.2 var(--font-display);
  color: var(--text-strong);
}
.cal__nav {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-body);
  cursor: pointer;
  transition: var(--transition-control);
}
.cal__nav:hover { color: var(--gold-700); }
.cal__nav[disabled] { opacity: 0.3; cursor: not-allowed; }
.cal__grid { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.cal__grid th {
  padding-bottom: var(--space-2);
  font: 400 var(--text-xs) / 1 var(--font-body);
  color: var(--text-muted);
}
.cal__grid td { padding: 0; text-align: center; }
.cal__day,
.cal__pad {
  width: 100%;
  aspect-ratio: 1 / 0.9;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-circle);
  font: 400 var(--text-ms) / 1 var(--font-body);
}
.cal__pad { color: var(--stone-600); }
.cal__day {
  color: var(--text-strong);
  cursor: pointer;
  transition: var(--transition-control);
}
.cal__day:hover { background: var(--gold-100); color: var(--gold-800); }
.cal__day[aria-disabled="true"] {
  color: var(--stone-600);
  cursor: not-allowed;
}
.cal__day[aria-disabled="true"]:hover { background: none; color: var(--text-faint); }
.cal__day[aria-pressed="true"] {
  background: var(--gold-500);
  color: var(--white);
}
.cal__day:focus-visible { outline-offset: 1px; }

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.cal-legend li { display: flex; align-items: center; gap: var(--space-2); }
.cal-legend__swatch {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-circle);
  border: var(--hairline) solid var(--border-strong);
  background: var(--white);
}
.cal-legend__swatch--off { background: var(--surface-subtle); border-color: var(--surface-muted); }
.cal-legend__swatch--on { background: var(--gold-500); border-color: var(--gold-500); }

/* "Selected Date": the panel beside the calendar. */
.cal-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--white);
  border: var(--hairline) solid var(--border-hairline);
}
.cal-summary__head {
  font-family: var(--font-display);
  font-size: var(--display-card);
  color: var(--text-strong);
}
.cal-summary__row { display: flex; align-items: center; gap: var(--space-3); }
.cal-summary__row .icon { color: var(--gold-600); flex: 0 0 auto; }
.cal-summary__date { font-size: var(--text-ms); color: var(--text-strong); }

/* The note for the chosen date: a request, pending review. */
.cal-status {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  background: var(--gold-100);
  color: var(--gold-800);
  border-left: 2px solid var(--gold-500);
}
.cal-status .icon { flex: 0 0 auto; }
.cal-status[data-state="none"] {
  background: var(--surface-subtle);
  color: var(--text-muted);
  border-left-color: var(--border-strong);
}
.cal-status[data-state="unavailable"] {
  background: #fdf6f5;
  color: #9b2c1f;
  border-left-color: #9b2c1f;
}
.cal-summary__next {
  padding-top: var(--space-4);
  border-top: var(--hairline) solid var(--border-hairline);
}
.cal-summary__next-label {
  font: 500 var(--text-2xs) / 1.4 var(--font-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-strong);
}
.cal-summary__next-text { font-size: var(--text-sm); color: var(--text-muted); }

.cal-layout {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 768px) {
  .cal-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-6); }
}

/* Steps. Only the active panel shows once the script is running. */
.inquiry { display: flex; flex-direction: column; gap: var(--space-6); }
.inquiry[hidden] { display: none; }
.inquiry__panel {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.js .inquiry--steps .inquiry__panel:not(.is-active) { display: none; }
.inquiry__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.inquiry__grow { flex: 1 1 auto; }

.inquiry__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.review {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
  border-top: var(--hairline) solid var(--border-hairline);
}
.review dt,
.review dd {
  padding: var(--space-3) 0;
  border-bottom: var(--hairline) solid var(--border-hairline);
  font-size: var(--text-ms);
  line-height: 1.5;
}
.review dt { color: var(--text-muted); padding-right: var(--space-5); }
.review dd { color: var(--text-strong); overflow-wrap: anywhere; white-space: pre-line; }

.inquiry__notice { font-size: var(--text-sm); color: var(--text-muted); }
.inquiry__status {
  padding: var(--space-4);
  border-left: 2px solid var(--gold-500);
  background: var(--gold-100);
  font-size: var(--text-ms);
  color: var(--gold-800);
}
.inquiry__status[hidden] { display: none; }
.inquiry__status a { color: var(--gold-800); text-decoration: underline; }

.inquiry__done {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
.inquiry__done[hidden] { display: none; }
.inquiry__done:focus { outline: none; }
.inquiry__done > .icon { color: var(--gold-600); }

/* The help column beside the booking form. */
.aside-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  background: var(--surface-subtle);
  padding: var(--space-6);
}
.aside-card__head { font-family: var(--font-display); font-size: var(--display-card); color: var(--text-strong); }
.aside-card__note { font-size: var(--text-sm); color: var(--text-body); }
.aside-block { display: flex; flex-direction: column; gap: var(--space-4); }

.contact-rows { display: flex; flex-direction: column; gap: var(--space-3); }
.contact-rows__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-ms);
  color: var(--text-strong);
}
.contact-rows__row .icon { color: var(--gold-600); flex: 0 0 auto; }
.contact-rows__row a { color: var(--text-strong); }
.contact-rows__row a:hover { color: var(--gold-700); }

/* A photograph with a small-caps line set over its lower-right corner. */
.aside-photo { position: relative; }
.aside-photo__text {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 1;
  text-align: right;
  font: 500 var(--text-3xs) / 1.9 var(--font-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--white);
}
.aside-photo__text span { display: block; }
.aside-photo .photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim-tile);
}

/* The closing note in the help column. */
.aside-mark {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: var(--hairline) solid var(--border-hairline);
}
.aside-mark .icon { color: var(--gold-500); }
.aside-mark__lines {
  font: 500 var(--text-3xs) / 1.9 var(--font-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-strong);
}
.aside-mark__lines span { display: block; }

.contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  border-top: var(--hairline) solid var(--border-hairline);
  padding-top: var(--space-6);
}
.contact-list__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.contact-list__value { font-size: var(--text-ms); color: var(--text-strong); }
.address {
  font-size: var(--text-ms);
  line-height: 1.7;
  font-style: normal;
  color: var(--text-body);
  display: flex;
  flex-direction: column;
}
.address__name { color: var(--text-strong); }

/* ======================= 15. Booking banner ============================= */

/* The dark band that closes every page, over a full-bleed photograph. */
.cta-band {
  position: relative;
  background: var(--ink-800);
  overflow: hidden;
  isolation: isolate;
}
.cta-band__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta-band__img--empty {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: var(--space-4);
  background: var(--surface-dark-soft);
}
.cta-band__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim-band);
}
.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-7);
  padding-block: clamp(44px, 5vw, 76px);
}
.cta-band__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.cta-band__text h2 { color: var(--white); }
.cta-band__lead { font-size: var(--text-ms); color: var(--text-inverse-soft); max-width: 48ch; }
.cta-band__quote {
  font: italic 400 clamp(22px, 2.5vw, 33px) / 1.35 var(--font-display);
  color: var(--white);
  max-width: 30ch;
}
.cta-band__action { flex: 0 0 auto; }

/* "split": the text at the left, the button at the right. Only from tablet
   up - below that the band stacks like every other one, so this must not
   outrank the stacking rule in the narrow-screen block further down. */
@media (min-width: 768px) {
  .cta-band--split .cta-band__inner { flex-direction: row; }
}
/* "center": a stacked, centred block. */
.cta-band--center .cta-band__inner {
  flex-direction: column;
  gap: var(--space-6);
  /* ~25px more above and below than "split", so the backdrop has room to read. */
  padding-block: clamp(56px, calc(5vw + 25px), 101px);
}
.cta-band--center .cta-band__text { align-items: center; text-align: center; }

@media (max-width: 767px) {
  .cta-band__inner { flex-direction: column; align-items: flex-start; gap: var(--space-6); }
  .cta-band--center .cta-band__inner { align-items: center; }
}

/* ======================= 16. Motion & print ============================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .shot:hover .shot__img { transform: none; }
}

@media print {
  .site-header,
  .site-footer,
  .nav-toggle,
  .mobile-nav,
  .filters,
  .lightbox,
  .cta-band,
  .btn { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  .section { padding-block: 16pt; }
  .hero { min-height: 0; padding-block: 16pt; }
  .hero__img, .hero__scrim { display: none; }
  .hero__content, .hero__content h1 { color: #000; }
  .photo { border: 1px solid #999; }
}