/* ==========================================================================
   Nuptial Diaries — editorial wedding photography
   Design language: full-bleed monochrome imagery, fine serif display type,
   generous whitespace, gold accent, film-grain texture.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --ink:        #101010;
  --ink-soft:   #2a2a2a;
  --cream:      #f5f2ed;
  --cream-deep: #ebe6dd;
  --ivory:      #f8f3e6;   /* warm editorial ground */
  --gold:       #a98a57;
  --gold-light: #c4a877;
  --muted:      #8b857c;
  --white:      #ffffff;

  --display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  --nav-h: 92px;
  --pad-x: clamp(1.25rem, 5vw, 5.5rem);
  --ease:  cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.75;
  /* `clip`, not `hidden`: hidden turns <body> into a scroll container, which
     silently disables position:sticky anywhere inside the page. */
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
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: 300;
  line-height: 1.08;
  margin: 0;
  letter-spacing: 0.01em;
}

/* ---------- Shared type helpers ---------- */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.5rem;
}
.display   { font-size: clamp(2.4rem, 6vw, 5rem); }
.display-s { font-size: clamp(1.9rem, 4vw, 3.1rem); }
.lede {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.75;
  color: var(--ink-soft);
}
.body-copy { color: var(--muted); max-width: 62ch; }

/* ---------- Film grain ---------- */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 900;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainshift 700ms steps(2, end) infinite;
}
@keyframes grainshift {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-2%, 1.5%); }
  100% { transform: translate(1%, -1%); }
}

/* ---------- Header / nav ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 800;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad-x);
  color: var(--white);
  transition: background 0.5s var(--ease), height 0.5s var(--ease), color 0.5s var(--ease),
              box-shadow 0.5s var(--ease);
}
.site-header.is-solid,
.site-header.is-static {
  background: var(--cream);
  color: var(--ink);
  height: 74px;
  box-shadow: 0 1px 0 rgba(16, 16, 16, 0.08);
}
/* With the full-screen cream menu open, the logo and close button must be dark. */
.menu-open .site-header { color: var(--ink); background: transparent; box-shadow: none; }
.menu-open .wordmark { position: relative; z-index: 810; }

.wordmark { display: block; line-height: 1; }
.wordmark .mark {
  font-family: var(--serif);
  font-size: 2.1rem;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  display: block;
  transition: font-size 0.5s var(--ease);
}
/* Gold hairline between monogram and name — small detail, does a lot of work. */
.wordmark .sub {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.53rem;
  letter-spacing: 0.44em;
  text-indent: 0.44em;
  text-transform: uppercase;
  margin-top: 0.5rem;
  opacity: 0.85;
}
.wordmark .sub::before {
  content: "";
  width: 16px; height: 1px;
  background: var(--gold);
  flex: none;
}
.is-solid .wordmark .mark, .is-static .wordmark .mark { font-size: 1.7rem; }

.header-right { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2.2rem); }
.nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.4rem); }
.nav a {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  position: relative;
  padding: 0.4rem 0;
  white-space: nowrap;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: currentColor;
  transition: width 0.45s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { width: 100%; }
.nav a[aria-current="page"] { color: var(--gold-light); }
.is-solid .nav a[aria-current="page"],
.is-static .nav a[aria-current="page"] { color: var(--gold); }

.socials { position: relative; display: flex; align-items: center; gap: 0.95rem; }
.socials a { opacity: 0.85; transition: opacity 0.3s, transform 0.3s var(--ease); }
.socials a:hover { opacity: 1; transform: translateY(-2px); }
.socials svg { width: 16px; height: 16px; fill: currentColor; display: block; }

/* Gold call-to-action. Ink sweeps up from the base on hover, the gold hairline stays,
   and the arrow steps forward — a considered state rather than a colour swap. */
.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 1.7rem 0.9rem;
  font-size: 0.63rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-indent: 0.28em;          /* balances the trailing letter-space */
  text-transform: uppercase;
  color: var(--white) !important;
  border: 1px solid var(--gold);
  background-color: var(--gold);
  background-image: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 0%;
  transition: background-size 0.55s var(--ease);
}
.btn-gold:hover { background-size: 100% 100%; }
.btn-gold::after { display: none !important; }
.btn-gold .arw {
  display: block;
  width: 15px; height: 1px;
  background: currentColor;
  position: relative;
  flex: none;
  transition: width 0.45s var(--ease);
}
.btn-gold .arw::after {
  content: "";
  position: absolute;
  right: 0; top: -2px;
  width: 5px; height: 5px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.btn-gold:hover .arw { width: 24px; }

/* Hairline that separates the menu from the social icons. */
.socials::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(0.55rem, 1.2vw, 1.1rem));
  top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 18px;
  background: currentColor;
  opacity: 0.28;
}
.site-footer .socials::before { display: none; }

.btn-line {
  display: inline-block;
  border: 1px solid currentColor;
  padding: 1rem 2.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.btn-line:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.on-dark .btn-line:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

/* Mobile menu toggle */
.menu-toggle { display: none; width: 30px; height: 22px; position: relative; z-index: 810; }
.menu-toggle span {
  position: absolute; left: 0; right: 0; height: 1px;
  background: currentColor;
  transition: transform 0.45s var(--ease), opacity 0.3s;
}
.menu-toggle span:nth-child(1) { top: 3px; }
.menu-toggle span:nth-child(2) { top: 11px; }
.menu-toggle span:nth-child(3) { top: 19px; }
.menu-open .menu-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
}
.hero-media { position: absolute; inset: 0; }
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.06);
  transform: scale(1.06);
  animation: kenburns 22s ease-out forwards;
}
@keyframes kenburns { to { transform: scale(1.16); } }
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.18) 22%, rgba(0,0,0,0.12) 46%, rgba(0,0,0,0.78) 100%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  padding: 0 var(--pad-x) clamp(3.5rem, 9vh, 7rem);
  color: var(--white);
  width: 100%;
}
.hero h1 {
  font-size: clamp(2.6rem, 7.5vw, 6.6rem);
  letter-spacing: 0.02em;
  max-width: 16ch;
}
.hero h1 em { font-style: italic; color: var(--gold-light); }
.hero p {
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  margin: 1.6rem 0 0;
  opacity: 0.85;
}
.scroll-cue {
  position: absolute;
  bottom: 2rem; right: var(--pad-x);
  z-index: 3;
  color: var(--white);
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.7;
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
}
.scroll-cue i { display: block; width: 1px; height: 34px; background: currentColor; transform-origin: top; animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0%,100% { transform: scaleY(0.25); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }

/* ---------- Page banner (inner pages) ---------- */
.page-banner {
  position: relative;
  height: 62svh;
  min-height: 380px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
}
.page-banner img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.05);
  opacity: 0.62;
}
/* Keeps the nav and title legible no matter how bright the chosen photograph is. */
.page-banner::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.18) 45%, rgba(0,0,0,0.45) 100%);
}
.page-banner .inner { position: relative; z-index: 2; padding: 0 var(--pad-x); }
.page-banner h1 { font-size: clamp(2.3rem, 5.5vw, 4.4rem); }
.page-banner .eyebrow { color: var(--gold-light); }

/* ---------- Layout ---------- */
.section { padding: clamp(4.5rem, 11vw, 9.5rem) var(--pad-x); }
.section.tight { padding-top: clamp(3rem, 6vw, 5rem); }
.wrap { max-width: 1360px; margin: 0 auto; }
.wrap-narrow { max-width: 780px; margin: 0 auto; }
.center { text-align: center; }
.on-dark { background: var(--ink); color: var(--cream); }
.on-dark .body-copy { color: rgba(245, 242, 237, 0.62); }
.on-dark .lede { color: rgba(245, 242, 237, 0.86); }
.on-deep { background: var(--cream-deep); }

.rule { width: 56px; height: 1px; background: var(--gold); margin: 2.2rem auto; }
.rule.left { margin-left: 0; }

/* ==========================================================================
   Statement — the studio's opening spread.
   Warm blush ground, Didone caps with an italic word tucked into the line,
   serif body copy, and three photographs sitting at three different heights.
   ========================================================================== */
.statement {
  background: var(--ivory);
  color: var(--ink);
  padding: clamp(4rem, 9vw, 8.5rem) var(--pad-x) clamp(3.5rem, 7vw, 6.5rem);
  overflow: hidden;
}

.statement-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1rem, 2.4vw, 2.4rem);
  align-items: start;
  max-width: 1500px;
  margin: 0 auto;
}

/* --- Display lockup ---
   Set as a sentence in sentence case. The genre standard is a two-word
   all-caps slogan with an italic word wedged into it; avoiding that is most
   of what keeps this from reading as somebody else's studio. */
.st-head {
  grid-column: 2 / 10;
  grid-row: 1;
  z-index: 2;
  margin: 0 0 clamp(2rem, 5vw, 4rem);
}
.st-head .l1,
.st-head .l2 {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.55vw, 3.35rem);
  line-height: 1.14;
  letter-spacing: -0.008em;
}
.st-head em { font-style: italic; color: var(--gold); }
/* A hanging gold folio in the left margin, aligned to the first line. */
.st-head .mark-no {
  position: absolute;
  left: -3.4rem;
  top: 0.35em;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--gold);
}

/* --- Photographs, each on its own baseline --- */
.st-right {
  grid-column: 9 / -1;
  grid-row: 1 / span 2;
  margin: 0 calc(-1 * var(--pad-x)) 0 0;   /* runs off the page edge */
  overflow: hidden;
}
.st-right img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.st-left {
  grid-column: 1 / 5;
  grid-row: 2;
  margin: clamp(1rem, 4vw, 4rem) 0 0;
  overflow: hidden;
}
.st-left img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* The two photographs drift slowly inside their frames as the page scrolls,
   each at its own rate, so the pair never moves as one flat block.

   "scale" and "translate" are kept as separate properties on purpose: the drift
   is written to --drift many times a second and must land instantly, while the
   hover is a slow 1.8s ease. Were both packed into one "transform" they would
   fight, and every scroll step would crawl along the hover's timing. */
.st-left img, .st-right img {
  scale: 1.26;                       /* headroom: the drift can only travel as far
                                        as the photo overhangs its frame, so this
                                        number is what makes the movement visible */
  translate: 0 var(--drift, 0px);
  filter: grayscale(100%);
  transition: scale 1.8s var(--ease), filter 1.8s var(--ease);
}
.st-left:hover img, .st-right:hover img { scale: 1.30; filter: grayscale(0%); }

/* Holding still is the honest default: if the drift script never runs, --drift
   stays 0 and the photographs simply sit there, correctly framed. */
@media (prefers-reduced-motion: reduce) {
  .st-left img, .st-right img { translate: none; scale: 1; }
  .st-left:hover img, .st-right:hover img { scale: 1; }
}

/* --- Serif body column, set between the two photographs --- */
.st-text {
  grid-column: 5 / 9;
  grid-row: 2;
  padding-top: clamp(1.5rem, 5vw, 5rem);
}
.st-text p {
  font-family: var(--serif);
  font-size: clamp(1rem, 1.18vw, 1.14rem);
  line-height: 1.85;
  margin: 0 0 1.5rem;
  max-width: 46ch;
}
.st-text p:last-child { margin-bottom: 0; }

/* --- Tracked services line, in place of a press row --- */
.st-services {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(0.8rem, 2.2vw, 2.2rem);
  margin-top: clamp(3rem, 7vw, 6rem);
  font-size: 0.63rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(16, 16, 16, 0.5);
}
.st-services span { display: flex; align-items: center; gap: clamp(0.8rem, 2.2vw, 2.2rem); }
.st-services span::after { content: ""; width: 22px; height: 1px; background: var(--gold); }
.st-services span:last-child::after { display: none; }

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-top: clamp(3rem, 7vw, 5.5rem);
  text-align: left;
}
.pillar h3 { font-size: 1.55rem; margin-bottom: 0.9rem; }
.pillar .num {
  font-family: var(--sans);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  color: var(--gold);
  display: block;
  margin-bottom: 1.1rem;
}
.pillar p { font-size: 0.92rem; color: var(--muted); margin: 0; }

/* ---------- Split feature ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
}
.split.reverse .split-text { order: 2; }
.split figure { margin: 0; overflow: hidden; }
.split figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(100%);
  transition: transform 1.2s var(--ease), filter 1.2s var(--ease);
}
.split figure:hover img { transform: scale(1.05); filter: grayscale(0%); }
.split-text h2 { margin-bottom: 1.4rem; }

/* ---------- Selected work index ---------- */
/* ==========================================================================
   Mosaic — full-bleed wall of work, no gutters, with one white typographic
   tile set into the middle of it. Shown in colour; a few frames stay
   monochrome so the wall has rhythm rather than uniformity.
   ========================================================================== */
.mosaic-section { padding: 0; background: var(--ivory); }
/* minmax(0, 1fr), not 1fr: the auto minimum would otherwise be the image's
   intrinsic width, which makes the columns unequal and opens gaps between rows. */
.mosaic {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
}
.mosaic figure {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: zoom-in;
}
.mosaic img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease), filter 1.6s var(--ease);
}
.mosaic figure:hover img { transform: scale(1.05); }
.mosaic figure.bw img { filter: grayscale(100%); }
.mosaic figure.bw:hover img { filter: grayscale(0%); }

/* The tile lands on row 2, column 3 purely by document order — it is the
   eighth cell in a five-column grid. Keep it eighth if you reorder photos. */
.mosaic-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* A quiet ivory card set into the wall of photographs — no ruling, so it
     reads as a pause rather than as a texture. */
  background: var(--ivory);
  padding: clamp(0.8rem, 1.6vw, 1.6rem);
  aspect-ratio: 1 / 1;
}
.mosaic-tile .no {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(0.9rem, 1.35vw, 1.35rem);
  color: var(--gold);
  margin-bottom: 0.7rem;
}
.mosaic-tile .line {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(0.82rem, 1.32vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--ink);
  max-width: 16ch;
}
.mosaic-tile .rule { width: 30px; height: 1px; background: var(--gold); margin: 0.9rem auto 0; }

.mosaic-after { padding: clamp(2.5rem, 6vw, 4.5rem) var(--pad-x); text-align: center; }

/* ==========================================================================
   Album index — the grid sits on its own panel, lifted off the page ground so
   the work reads as a body of albums rather than photographs loose on a
   background. Every couple is a block of its own inside it.
   ========================================================================== */
.albums-section { background: var(--ivory); }
.album-panel { max-width: 1560px; margin: 0 auto; }

.album-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.6vw, 2.4rem);
}

/* Each couple is a card of its own, lifted off the ivory ground. The shadow
   is two layers — a tight one for the edge, a wide soft one for the depth —
   because a single blur reads flat and muddy. */
.album-card {
  display: block;
  background: var(--white);
  border-radius: clamp(10px, 1.1vw, 15px);
  padding: clamp(0.85rem, 1.3vw, 1.25rem);
  box-shadow:
    0 1px 3px rgba(16, 16, 16, 0.05),
    0 10px 30px rgba(16, 16, 16, 0.06);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.album-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 2px 6px rgba(16, 16, 16, 0.06),
    0 22px 52px rgba(16, 16, 16, 0.13);
}
.album-card .shot {
  display: block;               /* a <span>; without this it collapses */
  position: relative;
  overflow: hidden;
  border-radius: calc(clamp(10px, 1.1vw, 15px) - 6px);
}
.album-card .shot img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 1.5s var(--ease);
}
.album-card:hover .shot img { transform: scale(1.05); }
.album-card .shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(16, 16, 16, 0.16);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.album-card:hover .shot::after { opacity: 1; }

.album-card .cap { display: block; padding: 1.05rem 0.4rem 0.4rem; }
.album-card .nm {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.4vw, 1.32rem);
  line-height: 1.2;
  transition: color 0.4s var(--ease);
}
.album-card:hover .nm { color: var(--gold); }
.album-card .wh {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.55rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}
.album-card .ex {
  display: block;
  margin-top: 0.8rem;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.album-card .more {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.9rem;
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}
.album-card .more i {
  display: block; width: 13px; height: 1px; background: var(--gold);
  position: relative; transition: width 0.45s var(--ease);
}
.album-card .more i::after {
  content: "";
  position: absolute; right: 0; top: -2px;
  width: 5px; height: 5px;
  border-top: 1px solid var(--gold);
  border-right: 1px solid var(--gold);
  transform: rotate(45deg);
}
.album-card:hover .more i { width: 23px; }

/* Shown instead of the grid or the album if the list cannot be read. */
.load-error {
  font-family: var(--serif);
  font-size: 1.1rem;
  padding: clamp(2rem, 5vw, 4rem) 0;
}
.load-error a { color: var(--gold); border-bottom: 1px solid currentColor; }

/* ---------- A single wedding album ---------- */
.album-open { padding: clamp(2.5rem, 6vw, 5rem) var(--pad-x) 0; }
.album-open .wrap-narrow { max-width: 760px; }
.album-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 3.5rem);
  line-height: 1.12;
  letter-spacing: -0.008em;
  margin: 0.4rem 0 0;
}
.album-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.5rem;
  margin: 1.2rem 0 0;
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}
.album-story {
  font-family: var(--serif);
  font-size: clamp(1.02rem, 1.35vw, 1.22rem);
  line-height: 1.85;
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
}
/* The couple's own words, where they wrote to us. */
.album-quote {
  font-style: italic;
  border-left: 1px solid var(--gold);
  padding-left: clamp(1.1rem, 2.4vw, 1.8rem);
}
.album-quote cite {
  display: block;
  margin-top: 1.4rem;
  font-family: var(--sans, system-ui, sans-serif);
  font-style: normal;
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}

.album-cover { margin: clamp(2.5rem, 6vw, 4.5rem) 0 0; }
.album-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* Previous / next, set as a spread of two facing pages. */
.album-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 3vw, 3rem);
  border-top: 1px solid rgba(16, 16, 16, 0.14);
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
}
.album-nav a { display: block; }
.album-nav .dir {
  display: block;
  font-size: 0.57rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.album-nav .ttl {
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.7vw, 1.5rem);
  transition: color 0.4s var(--ease);
}
.album-nav a:hover .ttl { color: var(--gold); }
.album-nav .next { text-align: right; }
.album-nav .none { opacity: 0.35; pointer-events: none; }

/* ==========================================================================
   Contents — a table of contents with leader dots, the way a book opens.
   Used inside a single album to head its chapters.
   ========================================================================== */
.contents { max-width: 720px; }
.toc { list-style: none; margin: 0; padding: 0; }
.toc li { border-top: 1px solid rgba(16, 16, 16, 0.13); }
.toc li:last-child { border-bottom: 1px solid rgba(16, 16, 16, 0.13); }
.toc a {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 1rem 0;
  transition: color 0.4s var(--ease);
}
.toc a:hover { color: var(--gold); }
.toc .no {
  font-family: var(--display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--gold);
  flex: none;
  width: 3.4rem;
}
.toc .ttl { font-family: var(--display); font-size: clamp(1.05rem, 1.6vw, 1.4rem); flex: none; }
/* The leader dots that run to the frame count. */
.toc .dots {
  flex: 1;
  border-bottom: 1px dotted rgba(16, 16, 16, 0.4);
  transform: translateY(-0.3em);
  min-width: 2rem;
}
.toc .ct {
  flex: none;
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Chapter heads ---------- */
.chapter { scroll-margin-top: 100px; }
.chapter-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.2rem;
  padding-bottom: 1.3rem;
  margin-bottom: clamp(1.6rem, 3.5vw, 2.6rem);
  border-bottom: 1px solid rgba(16, 16, 16, 0.14);
}
.chapter-head .line {
  font-family: var(--serif);
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 44ch;
  margin: 0.7rem 0 0;
}
.chapter-head .ct {
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* ---------- Masonry gallery ---------- */
.gallery { columns: 2; column-gap: clamp(1rem, 2vw, 1.8rem); }
.gallery figure {
  margin: 0 0 clamp(1rem, 2vw, 1.8rem);
  break-inside: avoid;
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
}
/* In colour. A couple opening their own album should not have to hover each
   frame to see it — and the cover they clicked on the index was in colour too. */
.gallery img {
  width: 100%;
  transition: transform 1.2s var(--ease);
}
.gallery figure:hover img { transform: scale(1.03); }
/* A fine gold keyline draws itself inside the frame on hover, and the frame
   number appears in the corner. */
.gallery figure::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--gold-light);
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
  pointer-events: none;
}
.gallery figure:hover::after { opacity: 0.85; transform: none; }
.gallery figure .fno {
  position: absolute;
  left: 1.1rem; bottom: 0.9rem;
  z-index: 2;
  font-family: var(--display);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--white);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.75);
  pointer-events: none;
}
.gallery figure:hover .fno { opacity: 1; transform: none; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0;
  z-index: 950;
  background: rgba(10, 10, 10, 0.96);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lb-open .site-header { opacity: 0; pointer-events: none; }
.lightbox img { max-width: 90vw; max-height: 86vh; object-fit: contain; }
.lightbox .lb-btn {
  position: absolute;
  color: var(--cream);
  font-size: 1.6rem;
  line-height: 1;
  padding: 1rem;
  opacity: 0.7;
  transition: opacity 0.3s;
}
.lightbox .lb-btn:hover { opacity: 1; }
.lb-close { top: 1rem; right: 1.4rem; font-size: 1.4rem; letter-spacing: 0.2em; }
.lb-prev  { left: 0.6rem;  top: 50%; transform: translateY(-50%); }
.lb-next  { right: 0.6rem; top: 50%; transform: translateY(-50%); }
.lb-count {
  position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  color: var(--cream); font-size: 0.68rem; letter-spacing: 0.24em; opacity: 0.65;
}

/* ==========================================================================
   The diary marks — the motif that separates this studio from the rest of
   the genre. A folio number in gold italic, a label, and a rule running off
   to the side. It heads every section on the site.
   ========================================================================== */
.folio {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1.4rem;
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
}
.folio .no {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  text-transform: none;
}
.folio::after {
  content: "";
  flex: 1;
  max-width: 110px;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}
.folio.center { justify-content: center; }
.folio.center::after { display: none; }
.on-dark .folio, .sheet .folio { color: var(--gold-light); }

/* Display type is set as sentences in sentence case — the genre's habit of
   two-word all-caps slogans is exactly what makes these sites interchangeable. */
.entry-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.7vw, 3.4rem);
  line-height: 1.16;
  letter-spacing: -0.008em;
  margin: 0;
}
.entry-title em { font-style: italic; color: var(--gold); }
.on-dark .entry-title em, .sheet .entry-title em { color: var(--gold-light); }

/* Serif link under a gold rule, in place of a filled pill. */
.link-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
  padding-bottom: 0.45rem;
  font-family: var(--serif);
  font-size: 1.1rem;
}
.link-gold::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.link-gold:hover::after { transform: scaleX(1.14); }
.link-gold i {
  display: block;
  width: 13px; height: 1px;
  background: var(--gold);
  position: relative;
  transition: width 0.45s var(--ease);
}
.link-gold i::after {
  content: "";
  position: absolute;
  right: 0; top: -2px;
  width: 5px; height: 5px;
  border-top: 1px solid var(--gold);
  border-right: 1px solid var(--gold);
  transform: rotate(45deg);
}
.link-gold:hover i { width: 22px; }

/* ==========================================================================
   Contact sheet — the studio's own working document, made public. Numbered
   frames in monochrome; the selects are ringed in gold as if with a grease
   pencil, and those rings draw themselves on when the section is reached.
   ========================================================================== */
.sheet { background: #14140f; padding: clamp(3.5rem, 8vw, 7rem) var(--pad-x); }
.sheet.reveal { opacity: 1; transform: none; }   /* only the contents animate */
.sheet-inner { max-width: 1500px; margin: 0 auto; }

.sheet-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.sheet-head .entry-title { color: var(--cream); max-width: 20ch; }
.sheet-head .entry-title em { color: var(--gold-light); }
.sheet-head .meta {
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(245, 242, 237, 0.45);
  text-align: right;
  margin: 0;
  line-height: 2.1;
}

.frames {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.6rem, 1.4vw, 1.1rem);
}
/* ---- the contact sheet as film through a gate ------------------------------
   The five-column grid above stays the fallback: if the script never runs, or
   the visitor has asked for less motion, the frames simply sit still.

   When it does run, the frames become one slow strip, packed tight. Nothing is
   drawn on them; the frame in the gate is simply the one brought up to size, in
   colour, while the rest run past it small and in black and white.

   The strip does not carry a permanent gap wide enough for that. Instead the
   frame in the gate grows a margin as it grows, so its neighbours are pushed
   aside exactly when the room is needed and close back up afterwards. The
   margin is the half-width the frame gains, less the gap already there. */
.frames.is-gate { display: block; }

.gate-window {
  position: relative;
  overflow: hidden;
  /* Room above and below for the frame at full size, since the window clips. */
  padding: clamp(84px, 8.4vw, 120px) 0;
}

.gate-track {
  --frame-w: clamp(190px, 20vw, 280px);
  --gap: clamp(8px, 1vw, 14px);
  --big: 2.1;                       /* how far the frame in the gate opens up */
  display: flex;
  gap: var(--gap);
  width: max-content;
  align-items: center;
  will-change: transform;
  transition-property: transform;
  transition-timing-function: var(--ease);
}
.gate-track > .frame { flex: 0 0 var(--frame-w); }

/* Running past: full size, tight against its neighbours, black and white.
   Written long so it outranks the reveal rule, which sets transform: none. */
.sheet.is-in .gate-track > .frame {
  transform: scale(1);
  transform-origin: center center;
  margin: 0;
  /* --swap is set only while a pointer is moving the gate. Both the frame
     letting go and the frame taking over must then run at the same speed, or
     the strip shifts by an amount the script cannot cancel. */
  transition: transform var(--swap, 450ms) var(--ease), margin var(--swap, 450ms) var(--ease);
  transition-delay: 0s;
}

/* In the gate: opened up, in colour, with the strip parting around it. The
   +6px is slack, so the two never quite touch. */
.sheet.is-in .gate-track > .frame.in-gate {
  transform: scale(var(--big));
  margin: 0 calc((var(--big) - 1) * var(--frame-w) / 2 - var(--gap) + 6px);
  z-index: 2;
  transition-duration: var(--swap, 1200ms);   /* opening up, slowly */
}
.gate-track > .frame.in-gate img {
  filter: grayscale(0%) contrast(1) brightness(1);
}
.gate-track > .frame.in-gate .n { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .gate-track { transition: none; }
  .sheet.is-in .gate-track > .frame { transition: none; }
}

.frame {
  position: relative;
  display: block;
  /* Frames develop in one after another rather than all at once. */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.sheet.is-in .frame { opacity: 1; transform: none; }
.frame img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.06) brightness(0.9);
  transition: filter 0.7s var(--ease), transform 0.9s var(--ease);
}
.frame:hover img { filter: grayscale(0%) contrast(1) brightness(1); transform: scale(1.03); }
.frame .n {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.52rem;
  letter-spacing: 0.24em;
  color: rgba(245, 242, 237, 0.42);
  transition: color 0.5s var(--ease);
}
.frame:hover .n { color: rgba(245, 242, 237, 0.85); }
.frame.pick .n { color: var(--gold); }

/* The grease-pencil ring. pathLength="1" lets the dash animate without
   having to know the real length of the hand-drawn path. */
.frame .ring {
  position: absolute;
  left: -7px; right: -7px; top: -7px;
  height: calc(100% - 15px);
  width: auto;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}
.frame .ring path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.05s var(--ease);
  transition-delay: calc(0.45s + var(--i, 0) * 70ms);
}
.sheet.is-in .frame.pick .ring path { stroke-dashoffset: 0; }

/* The tick lands just after its ring closes. */
.frame .tick {
  opacity: 0;
  margin-left: 0.4rem;
  transition: opacity 0.5s var(--ease);
  transition-delay: calc(1.35s + var(--i, 0) * 70ms);
}
.sheet.is-in .frame.pick .tick { opacity: 1; }

.sheet-foot { margin-top: clamp(2rem, 4vw, 3rem); }
.sheet-foot .link-gold { color: var(--cream); }

/* --- Story cards: the name laid across the photograph --- */
.story-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.6vw, 2.4rem);
}
.story-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--ink);
}
.story-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.8s var(--ease);
}
.story-card:hover img { transform: scale(1.06); }
/* A soft vignette centred on the type, over a base-weighted wash. A plain
   linear gradient is not enough where the photograph is bright behind the
   title — the small folio and caption disappear into a daylit sky. */
.story-card::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 64% at 50% 47%, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.24) 68%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.18) 45%, rgba(0,0,0,0.56) 100%);
}
/* The title is set large and centred across the photograph. The folio above it
   is ours — the genre convention is to sit the studio's own name there, which
   is the one detail that made these cards read as somebody else's. */
.sc-text {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
  padding: clamp(1rem, 2.4vw, 2rem);
}
.sc-rule {
  display: block;
  width: 34px; height: 1px;
  background: var(--gold-light);
  margin-bottom: 0.9rem;
  transition: width 0.6s var(--ease);
}
.story-card:hover .sc-rule { width: 68px; }
.sc-no {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-light);
}
.sc-name {
  display: block;
  max-width: 100%;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.55rem, 3.7vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0.3em 0 0.34em;
}
.story-card .play-dot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(1.2rem, 2.6vw, 2.2rem);
  z-index: 3;
  width: 46px; height: 46px;
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.45s var(--ease), border-color 0.45s var(--ease);
}
.story-card:hover .play-dot { background: var(--gold); border-color: var(--gold); }
.story-card .play-dot svg { width: 12px; height: 12px; fill: var(--white); margin-left: 2px; }


/* --- Offering band: full-bleed colour photograph, copy set over it --- */
.offer {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(420px, 64vh, 720px);
  overflow: hidden;
}
.offer > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.offer::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.34) 42%, rgba(0,0,0,0) 72%);
}
.offer-inner {
  position: relative;
  z-index: 2;
  padding: clamp(2.5rem, 6vw, 4rem) var(--pad-x);
  max-width: min(640px, 92%);
  color: var(--white);
}
.offer h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.5vw, 3.2rem);
  letter-spacing: -0.008em;
  line-height: 1.14;
  margin-bottom: 1.3rem;
}
.offer h2 em { font-style: italic; color: var(--gold-light); }
.offer .link-gold { color: var(--white); }
.offer .link-gold::after,
.offer .link-gold i,
.offer .link-gold i::after { background: var(--gold-light); border-color: var(--gold-light); }
.offer p {
  font-family: var(--serif);
  font-size: clamp(0.98rem, 1.2vw, 1.14rem);
  line-height: 1.85;
  margin: 0 0 2rem;
  color: rgba(255, 255, 255, 0.88);
}

/* ==========================================================================
   The screening room — films are not photographs, so they do not get a photo
   grid. The page goes dark, each film is a single cinemascope plate stacked
   down the page like a programme, and pressing play swaps the still for the
   film in place rather than sending you away.
   ========================================================================== */
.screening { background: #0c0c0a; color: var(--cream); }
.screening .folio { color: var(--gold-light); }

.screen-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-bottom: 1.4rem;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
  border-bottom: 1px solid rgba(245, 242, 237, 0.16);
}
.screen-head .entry-title { color: var(--white); max-width: 22ch; }
.screen-head .entry-title em { color: var(--gold-light); }
.screen-head .bill {
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(245, 242, 237, 0.45);
  text-align: right;
  line-height: 2.1;
  margin: 0;
}

/* The strip runs sideways, the way a reel does. Native horizontal scrolling —
   trackpad, swipe, arrow keys and the buttons all drive the same thing, so it
   never fights the page's own scroll. */
.reels {
  display: flex;
  gap: clamp(1rem, 2.4vw, 2.2rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--pad-x);
  padding: 0 var(--pad-x) 0.5rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.reels::-webkit-scrollbar { display: none; }

.reel {
  /* Under a full width, so the next film always peeks in and says "keep going". */
  flex: 0 0 clamp(280px, 62vw, 900px);
  scroll-snap-align: start;
  margin: 0;
}

/* Each programme keeps the same interaction but its own true shape:
   films are cinemascope, teasers are broadcast 16:9, reels are the vertical
   crop they were actually cut in. */
.reels.is-teaser .reel { flex-basis: clamp(260px, 44vw, 620px); }
.reels.is-teaser .plate { aspect-ratio: 16 / 9; }
.reels.is-reel .reel { flex-basis: clamp(180px, 21vw, 300px); }
.reels.is-reel .plate { aspect-ratio: 9 / 16; }
.reels.is-reel .cap { grid-template-columns: auto 1fr; }
.reels.is-reel .cap .meta { grid-column: 2; text-align: left; margin-top: 0.35rem; white-space: normal; }
.reels.is-reel .cap h3 { font-size: clamp(1.05rem, 1.5vw, 1.3rem); }

.strip-block { margin-bottom: clamp(3.5rem, 8vw, 7rem); }
.strip-block:last-child { margin-bottom: 0; }

/* Arrows sit with the header; the rail below reports where you are. */
.reel-nav { display: flex; gap: 0.6rem; }
.reel-nav button {
  width: 46px; height: 46px;
  border: 1px solid rgba(245, 242, 237, 0.35);
  border-radius: 50%;
  color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease),
              color 0.4s var(--ease), opacity 0.4s var(--ease);
}
.reel-nav button:hover:not(:disabled) { background: var(--gold); border-color: var(--gold); color: var(--white); }
.reel-nav button:disabled { opacity: 0.28; cursor: default; }
.reel-nav svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; }

.reel-rail {
  position: relative;
  height: 1px;
  background: rgba(245, 242, 237, 0.18);
  margin: clamp(1.6rem, 3vw, 2.4rem) var(--pad-x) 0;
}
.reel-rail i {
  position: absolute;
  top: -1px; left: 0;
  height: 3px;
  background: var(--gold);
  transition: left 0.35s var(--ease), width 0.35s var(--ease);
}

/* 2.39:1 — the cinemascope crop. Nothing else on the site is this shape, so
   the page reads as film before a word has been taken in. */
.reel .plate {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 2.39 / 1;
  background: #000;
}
.reel .plate img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.82) contrast(1.04);
  transform: scale(1.03);
  transition: transform 2.2s var(--ease), filter 0.9s var(--ease);
}
.reel .plate:hover img { transform: scale(1); filter: brightness(0.95) contrast(1); }
.reel .plate::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 62% 70% at 50% 50%, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0.12) 60%, rgba(0,0,0,0.42) 100%);
}
.reel .play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: clamp(58px, 6vw, 86px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease), transform 0.5s var(--ease);
}
.reel .plate:hover .play {
  background: var(--gold);
  border-color: var(--gold);
  transform: translate(-50%, -50%) scale(1.07);
}
.reel .play svg { width: 16px; height: 16px; fill: var(--white); margin-left: 3px; }

/* The programme line under each plate. */
.reel .cap {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: clamp(0.9rem, 2vw, 2rem);
  padding-top: 1.1rem;
  margin-top: 1.1rem;
  border-top: 1px solid rgba(245, 242, 237, 0.18);
}
.reel .cap .no {
  font-family: var(--display);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-light);
}
.reel .cap h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  line-height: 1.15;
  color: var(--white);
  transition: color 0.45s var(--ease);
}
.reel:hover .cap h3 { color: var(--gold-light); }
.reel .cap .meta {
  font-size: 0.57rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(245, 242, 237, 0.5);
  text-align: right;
  white-space: nowrap;
}

.embed-wrap { position: relative; aspect-ratio: 16 / 9; background: #000; }
.embed-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Testimonials ---------- */
.quote-slider { position: relative; min-height: 400px; }   /* room for the portraits */
.quote {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  opacity: 0; visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), visibility 0.8s;
}
.quote.is-active { opacity: 1; visibility: visible; transform: none; position: relative; }
.quote blockquote {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.6vw, 2.15rem);
  line-height: 1.55;
  font-style: italic;
  margin: 0;
  max-width: 26ch;
}
/* The couple's own face, from their own album, under their words. */
.quote-face {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(100%);
  box-shadow: 0 0 0 1px rgba(169, 138, 87, 0.45);   /* a thin gold ring */
  transition: filter 0.7s var(--ease);
}
.quote.is-active:hover .quote-face { filter: grayscale(0%); }

.quote .who {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}
.quote-dots { display: flex; justify-content: center; gap: 0.6rem; margin-top: 2.8rem; }
.quote-dots button {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(245,242,237,0.28);
  transition: background 0.4s, transform 0.4s;
}
.quote-dots button.is-active { background: var(--gold); transform: scale(1.4); }

.tcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.6rem, 3vw, 2.6rem);
  align-items: start;          /* a short review must not stretch to match a long one */
}
.tcard {
  background: var(--white);
  padding: clamp(2rem, 3.5vw, 3rem);
  border: 1px solid rgba(16,16,16,0.06);
}

/* The opening lines, always visible. */
.tcard-lead {
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.7;
  font-style: italic;
  margin: 0;
}

/* The rest of their words, revealed on ask. This is a <details> element, so it
   opens and closes on its own — it keeps working even if JavaScript does not. */
.tcard details { margin: 0; }
.tcard summary {
  display: block;             /* removes the default triangle in every browser */
  cursor: pointer;
  list-style: none;
}
.tcard summary::-webkit-details-marker { display: none; }
.tcard summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }

.tcard-cue {
  display: inline-block;
  margin-top: 1.4rem;
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.3rem;
  transition: opacity 0.3s ease;
}
.tcard summary:hover .tcard-cue { opacity: 0.6; }
.tcard .c-close,
.tcard details[open] .c-open { display: none; }
.tcard details[open] .c-close { display: inline; }

.tcard-rest {
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.7;
  font-style: italic;
  margin: 1.1rem 0 0;
}

/* The signature: the couple's own faces, from their own album, beside their
   name — so a review is visibly from someone rather than from nobody. */
.tcard-sign {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  margin-top: 1.8rem;
}
.tcard-face {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter 0.7s var(--ease);
}
.tcard:hover .tcard-face { filter: grayscale(0%); }
.tcard-by { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.tcard .who {
  margin-top: 0;
  font-size: 0.64rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
}

/* A quiet way through to the photographs of that same wedding. */
.tcard-album {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.3s ease;
}
.tcard-album i {
  width: 1.6rem;
  height: 1px;
  background: currentColor;
  transition: width 0.3s ease;
}
.tcard-album:hover { color: var(--ink); }
.tcard-album:hover i { width: 2.4rem; }

/* ---------- Stats / marquee ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 2.5rem; text-align: center; }

.stat .n { font-family: var(--serif); font-size: clamp(2.4rem, 4.5vw, 3.6rem); color: var(--gold); line-height: 1; }
.stat .l { font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase; margin-top: 0.9rem; color: var(--muted); }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  text-align: center;
  color: var(--white);
  padding: clamp(6rem, 15vw, 12rem) var(--pad-x);
  overflow: hidden;
  background: var(--ink);
}
.cta-band img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  opacity: 0.42;
}
.cta-band .inner { position: relative; z-index: 2; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2rem; }
.field { display: flex; flex-direction: column; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.7rem;
}
.field input, .field select, .field textarea {
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 300;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(16,16,16,0.22);
  padding: 0.7rem 0;
  border-radius: 0;
  transition: border-color 0.4s var(--ease);
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-bottom-color: var(--gold);
}
.field.has-error input, .field.has-error select, .field.has-error textarea { border-bottom-color: #b4453c; }
.field .err {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: #b4453c;
  margin-top: 0.5rem;
  min-height: 1.1em;
}
.form-note { font-size: 0.82rem; color: var(--muted); margin-top: 1.6rem; }

.form-status {
  margin-top: 1.8rem;
  padding: 1.1rem 1.4rem;
  border-left: 2px solid var(--gold);
  background: rgba(169, 138, 87, 0.09);
  font-size: 0.92rem;
  display: none;
}
.form-status.is-visible { display: block; }
.form-status.is-error { border-left-color: #b4453c; background: rgba(180, 69, 60, 0.08); }

.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { margin-bottom: 2rem; }
.contact-list .k {
  font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold); display: block; margin-bottom: 0.5rem;
}
.contact-list .v { font-family: var(--serif); font-size: 1.35rem; }
.contact-list .v a { border-bottom: 1px solid transparent; transition: border-color 0.35s; }
.contact-list .v a:hover { border-bottom-color: var(--gold); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: rgba(245,242,237,0.7); padding: clamp(3.5rem, 8vw, 6rem) var(--pad-x) 2.5rem; }
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 3.5rem;
  border-bottom: 1px solid rgba(245,242,237,0.12);
}
.site-footer .wordmark { color: var(--cream); margin-bottom: 1.4rem; }
.footer-col h4 {
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.3rem;
  font-weight: 400;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 0.75rem; font-size: 0.88rem; }
.footer-col a { transition: color 0.35s; }
.footer-col a:hover { color: var(--gold-light); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between; align-items: center;
  padding-top: 2rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: rgba(245,242,237,0.45);
}
.site-footer .socials svg { width: 17px; height: 17px; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* Headline lines rise out of their own mask rather than fading as one block. */
.reveal.lines { opacity: 1; transform: none; }
.lines .ln { display: block; overflow: hidden; }
.lines .ln > i {
  display: block;
  font-style: inherit;
  transform: translateY(115%);
  transition: transform 1.15s var(--ease);
}
.lines.is-in .ln > i { transform: none; }
.lines.is-in .ln:nth-child(2) > i { transition-delay: 0.1s; }
.lines.is-in .ln:nth-child(3) > i { transition-delay: 0.2s; }
.lines.is-in .ln:nth-child(4) > i { transition-delay: 0.3s; }
.reveal[data-delay="1"] { transition-delay: 0.12s; }
.reveal[data-delay="2"] { transition-delay: 0.24s; }
.reveal[data-delay="3"] { transition-delay: 0.36s; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  /* Three across keeps the tile centred on the middle row (cell 5 of 9). */
  .mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .frames { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .album-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .menu-toggle { display: block; }
  .nav {
    position: fixed;
    inset: 0;
    background: var(--cream);
    color: var(--ink);
    flex-direction: column;
    justify-content: center;
    gap: 1.8rem;
    transform: translateY(-100%);
    transition: transform 0.6s var(--ease);
    z-index: 805;
  }
  .menu-open .nav { transform: none; }
  .nav a { font-size: 0.92rem; letter-spacing: 0.28em; }
  .header-right { display: flex; align-items: center; gap: 1.4rem; }
  .header-right .socials { display: none; }

  .split, .split.reverse .split-text { grid-template-columns: 1fr; order: 0; }

  /* Statement collapses to a single column, photographs full width. */
  .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .album-nav { grid-template-columns: 1fr; gap: 1.6rem; }
  .album-nav .next, .album-nav .none.next { text-align: left; }
  .statement-layout { grid-template-columns: 1fr; }
  .st-head, .st-right, .st-left, .st-text, .st-services { grid-column: 1 / -1; grid-row: auto; }
  .st-head .l1, .st-head .l2 { white-space: normal; }
  /* No left margin to hang into at this width — the folio would sit off-screen. */
  .st-head .mark-no { position: static; display: block; margin-bottom: 0.5rem; }
  .st-right { margin: 0 calc(-1 * var(--pad-x)); }
  .st-right img { aspect-ratio: 4 / 3; }
  .st-left { margin: clamp(1.5rem, 4vw, 2.5rem) 0 0; }
  .st-left img { aspect-ratio: 4 / 3; }
  .st-text { padding-top: clamp(1.5rem, 4vw, 2.5rem); }
  .st-text p { max-width: none; }

  /* One story card per row, and a deeper notch would eat the content. */
  /* A 2.39:1 plate is a letterbox sliver on a phone — open it up. */
  .reel .plate { aspect-ratio: 16 / 10; }
  .reel { flex: 0 0 86vw; }
  .reels.is-teaser .reel { flex-basis: 86vw; }
  .reels.is-teaser .plate { aspect-ratio: 16 / 10; }
  .reels.is-reel .reel { flex-basis: 58vw; }
  .reel-nav { display: none; }   /* swipe is the obvious gesture here */
  .reel .cap { grid-template-columns: auto 1fr; }
  .reel .cap .meta { grid-column: 2; text-align: left; margin-top: 0.4rem; white-space: normal; }
  .screen-head { display: block; }
  .screen-head .bill { text-align: left; margin-top: 1.2rem; }
  .story-grid { grid-template-columns: 1fr; }
  .offer::after {
    background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.72) 100%);
  }
  .offer { align-items: flex-end; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .gallery { columns: 1; }
  /* The tile stays a single cell — spanning both columns would strand an
     empty half-row beside the photograph before it. */
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaic-tile { padding: 0.6rem; }
  .frames { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sheet-head { display: block; }
  .sheet-head .meta { text-align: left; margin-top: 1.2rem; }
  /* 15 cells over 2 columns would leave a hole in the last row; drop one. */
  .mosaic figure:last-of-type { display: none; }
  .scroll-cue { display: none; }
  .hero { align-items: flex-end; }
  .hero h1 { font-size: clamp(2.2rem, 11vw, 3.2rem); }
  .marquee span { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   THE STUDIO — set as a diary
   Photographs are tipped in slightly off-square, the way one is stuck into a
   book, and the process runs down a single rule like entries down a page.
   ========================================================================== */

/* ---- a photograph tipped into the page ---- */
.tipped {
  margin: 0;
  background: var(--white);
  padding: clamp(8px, 1vw, 14px) clamp(8px, 1vw, 14px) 0;
  box-shadow: 0 18px 44px rgba(16, 16, 16, 0.13);
  /* the angle is kept under two degrees: enough to read as tipped in,
     small enough that it never looks like a mistake */
  transition: transform 0.9s var(--ease), box-shadow 0.9s var(--ease);
}
.tipped img { display: block; width: 100%; }
.tipped figcaption {
  padding: 0.85rem 0.2rem 0.9rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--muted);
  text-align: center;
}
.tip-left  { transform: rotate(-1.5deg); }
.tip-right { transform: rotate(1.5deg); }
.tipped:hover { transform: rotate(0deg); box-shadow: 0 24px 60px rgba(16, 16, 16, 0.18); }

/* ---- the two entries, deliberately different shapes ---- */
.entry { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.entry-a { grid-template-columns: 1.15fr 0.85fr; }
/* The second entry lays its photograph across the page and sets the words
   directly beneath it, in the same measure — so the two read as one block
   rather than a picture with text drifting off to one side. */
.entry-b { grid-template-columns: 1fr; justify-items: center; }
.entry-b .tipped {
  --measure: min(100%, 780px);
  width: var(--measure);
  margin: 0 0 clamp(2.2rem, 4vw, 3.2rem);
}
.entry-b .entry-text { width: min(100%, 780px); }
.entry-b .entry-text h2 { text-align: center; }

/* Under a wide photograph the two paragraphs sit side by side, as a spread
   would set them. Note this places one paragraph per column rather than using
   CSS columns — those would split each paragraph into two stubby halves. */
@media (min-width: 900px) {
  .entry-b .entry-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }
  .entry-b .entry-text h2 { grid-column: 1 / -1; }
  .entry-b .entry-text .body-copy { margin-top: 0; }
}

/* ---- the process, run down one rule ---- */
.spine { list-style: none; margin: 0; padding: 0; position: relative; }
.spine::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: var(--gold);
  opacity: 0.35;
}
.spine-step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  margin-bottom: clamp(3.5rem, 8vw, 7rem);
}
.spine-step:last-child { margin-bottom: 0; }

/* odd steps: picture left, words right. even steps: the other way about. */
.spine-step:nth-child(odd)  .tipped     { grid-column: 1; grid-row: 1; }
.spine-step:nth-child(odd)  .spine-text { grid-column: 2; grid-row: 1; }
.spine-step:nth-child(even) .tipped     { grid-column: 2; grid-row: 1; }
.spine-step:nth-child(even) .spine-text { grid-column: 1; grid-row: 1; text-align: right; }

.spine-no {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 3.1rem;
  height: 3.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ivory);
  box-shadow: 0 0 0 1px rgba(169, 138, 87, 0.45);
  font-family: var(--display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--gold);
}
.spine-text h3 {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 400;
  margin: 0 0 0.9rem;
}
.spine-text p { margin: 0; color: var(--muted); line-height: 1.8; }

@media (max-width: 860px) {
  .entry-a { grid-template-columns: 1fr; }
  .spine::before { left: 1.55rem; }
  .spine-step { grid-template-columns: 1fr; gap: 1.6rem; padding-left: 4.6rem; }
  /* These must match the specificity of the alternating rules above, or the
     even steps keep their grid-column: 2 and the browser invents a second
     column — which squeezes the words into a thread one word wide. */
  .spine-step:nth-child(odd)  .tipped,
  .spine-step:nth-child(even) .tipped { grid-column: 1; grid-row: 1; }
  .spine-step:nth-child(odd)  .spine-text,
  .spine-step:nth-child(even) .spine-text { grid-column: 1; grid-row: 2; text-align: left; }
  .spine-no { left: 1.55rem; top: 0; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .tipped, .tip-left, .tip-right { transform: none; }
}

/* ---------- Hero call to action + WhatsApp button on every page ---------- */
.hero-cta { margin-top: 1.9rem; }
.wa-float {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 890;                 /* above the page, below the menu and the lightbox */
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.2rem 0.85rem 0.95rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--white) !important;
  font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
  transition: transform 0.3s var(--ease), background 0.3s;
}
.wa-float:hover { background: var(--ink); transform: translateY(-2px); }
.wa-float::after { display: none !important; }
.wa-float svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.menu-open .wa-float { display: none; }
@media (max-width: 700px) {
  .wa-float { padding: 0.95rem; }
  .wa-float span { display: none; }
  .wa-float svg { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) { .wa-float { transition: none; } }
/* the WhatsApp button owns the bottom-right corner, so the scroll marker moves to the centre */
.hero .scroll-cue { right: auto; left: 50%; transform: translateX(-50%); }

/* ---------- Enquiry form: event chips ---------- */
.field-label { font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.9rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-block; padding: 0.55rem 1rem; border: 1px solid rgba(16,16,16,0.22); font-size: 0.86rem; font-weight: 300; color: var(--ink); transition: background 0.25s, border-color 0.25s, color 0.25s; }
.chip input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--white); }
.chip input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- FAQ ---------- */
.faq { max-width: 780px; }
.faq-list { margin-top: 2.8rem; border-top: 1px solid rgba(16,16,16,0.14); }
.faq-item { border-bottom: 1px solid rgba(16,16,16,0.14); }
.faq-item summary { list-style: none; cursor: pointer; padding: 1.4rem 2.4rem 1.4rem 0; position: relative; font-family: var(--serif); font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 0.2rem; top: 50%; transform: translateY(-50%); color: var(--gold); font-size: 1.5rem; font-family: var(--sans); font-weight: 300; transition: transform 0.3s; }
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item p { margin: 0 0 1.5rem; color: var(--muted); line-height: 1.75; max-width: 62ch; }

/* ---------- Home: on-time promise ---------- */
.promise { text-align: center; margin-top: 4rem; padding-top: 3rem; border-top: 1px solid rgba(16,16,16,0.12); }
.promise-line { font-family: var(--serif); font-size: clamp(1.25rem, 2.6vw, 1.75rem); line-height: 1.45; max-width: 34ch; margin: 1rem auto 0; color: var(--ink); }
.promise-line em { font-style: normal; color: var(--gold); }

/* ==========================================================================
   Photography page, redesigned: large photographs, no boxes, strongest first.
   ========================================================================== */
.albums-intro { max-width: 720px; margin-bottom: clamp(2.6rem, 5vw, 4.5rem); }
.albums-intro .display-s { margin: 0.6rem 0 1.2rem; }

.wgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(3rem, 6vw, 5.5rem) clamp(1.6rem, 4vw, 4rem);
}
/* Every second wedding sits lower, so the page reads like a magazine spread. */
.wgrid:not(.pre) .wcard:nth-child(even) { margin-top: clamp(4rem, 9vw, 8rem); }
.wcard { display: block; color: var(--ink); }
.wcard.later { display: none; }
.wcard .shot { display: block; overflow: hidden; position: relative; }
.wcard .shot img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
  transition: transform 1.6s var(--ease);
}
.wcard:hover .shot img { transform: scale(1.04); }
.wcard .cap { display: block; padding-top: 1.3rem; }
.wcard .no {
  display: block; font-family: var(--serif); font-style: italic;
  color: var(--gold); font-size: 1.05rem; margin-bottom: 0.35rem;
}
.wcard .nm {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.6rem, 2.8vw, 2.3rem); line-height: 1.15;
  transition: color 0.4s var(--ease);
}
.wcard:hover .nm { color: var(--gold); }
.wcard .wh {
  display: block; margin-top: 0.7rem; font-size: 0.6rem;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted);
}
.wcard .ex {
  display: block; margin-top: 0.8rem; font-family: var(--serif);
  font-size: 1.05rem; line-height: 1.7; color: var(--ink-soft); max-width: 46ch;
}
.wcard .more {
  display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1rem;
  font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold);
}
.wcard .more i { display: block; width: 16px; height: 1px; background: var(--gold); transition: width 0.45s var(--ease); }
.wcard:hover .more i { width: 30px; }

.wmore { margin-top: clamp(3rem, 6vw, 5rem); }

/* Pre-wedding shoots: a smaller set of their own, below the weddings. */
.pre-block {
  margin-top: clamp(5rem, 10vw, 8rem);
  padding-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid rgba(16,16,16,0.12);
}
.pre-block .display-s { margin: 0.6rem 0 0.8rem; }
.pre-intro { margin: 0 0 clamp(2rem, 4vw, 3rem); max-width: 52ch; }
.wgrid.pre { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(2rem, 3vw, 2.8rem) clamp(1rem, 2vw, 1.8rem); }
.wcard.small .nm { font-size: clamp(1.15rem, 1.6vw, 1.4rem); }
.wcard.small .cap { padding-top: 0.9rem; }
.wcard.small .more { display: none; }

/* Album page: the pre-wedding shoot folded in, and the review's "read on". */
.pre-in-album { margin-top: clamp(3.5rem, 7vw, 6rem); }
.pre-in-album .gallery { margin-top: clamp(1.4rem, 3vw, 2.2rem); }
.read-on {
  font: inherit; font-style: normal; color: var(--gold); background: none;
  border: 0; padding: 0; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1080px) {
  .wgrid.pre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .wgrid { grid-template-columns: 1fr; gap: 3.2rem; }
  .wgrid:not(.pre) .wcard:nth-child(even) { margin-top: 0; }
  .wgrid.pre { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
}

/* ---------- Photography page, round two ---------- */
/* A shorter banner, in colour, so the first wedding shows on the first screen. */
.page-banner.short { height: 36svh; min-height: 250px; }
.page-banner.in-colour img { filter: none; opacity: 0.78; }
.albums-section.tight .albums-intro { margin-bottom: clamp(1.8rem, 3.5vw, 3rem); }
.albums-section.tight .albums-intro .display-s { font-size: clamp(1.6rem, 3.4vw, 2.6rem); margin: 0.4rem 0 0.7rem; }

/* The stagger counts couples only, so the invitation doesn't shift it. */
.wgrid:not(.pre) .wcard:nth-child(even) { margin-top: 0; }
.wgrid:not(.pre) .wcard:nth-of-type(even) { margin-top: clamp(4rem, 9vw, 8rem); }

/* Two smaller moments under each cover. */
.wcard .minis { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.4rem, 0.8vw, 0.7rem); margin-top: clamp(0.4rem, 0.8vw, 0.7rem); }
.wcard .minis span { display: block; overflow: hidden; }
.wcard .minis img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; transition: transform 1.6s var(--ease); }
.wcard:hover .minis img { transform: scale(1.04); }

/* The couple's own words, one line. */
.wcard .pull {
  display: block; margin-top: 0.9rem; max-width: 44ch;
  font-family: var(--serif); font-style: italic; font-size: 1.08rem; line-height: 1.6; color: var(--ink-soft);
}

/* The invitation after the fourth wedding. */
.wask {
  grid-column: 1 / -1;
  text-align: center;
  padding: clamp(2.6rem, 6vw, 4.5rem) clamp(1rem, 4vw, 3rem);
  border-top: 1px solid rgba(16,16,16,0.14);
  border-bottom: 1px solid rgba(16,16,16,0.14);
}
.wask-line { font-family: var(--serif); font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1.5; max-width: 36ch; margin: 0.9rem auto 1.8rem; }
.ask-wa {
  display: block; margin-top: 1.2rem; font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted); text-decoration: underline; text-underline-offset: 4px;
}
.ask-wa:hover { color: var(--gold); }

/* A smaller WhatsApp button on phones, so it covers less of the page. */
@media (max-width: 700px) {
  .wgrid:not(.pre) .wcard:nth-of-type(even) { margin-top: 0; }
  .wa-float { padding: 0.75rem; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .wa-float svg { width: 22px; height: 22px; }
  .wgrid.pre { padding-right: 0; }
  .wgrid.pre .wcard:nth-of-type(even) .cap { padding-right: 2.6rem; }
}

/* A soft shadow just below each cover, so the photographs lift off the page. */
.wcard .shot,
.wcard .minis span { box-shadow: 0 16px 26px -12px rgba(16, 16, 16, 0.38); }
.wcard .shot { position: relative; z-index: 1; }

/* ==========================================================================
   Films page, redesigned: one big film, the rest in a grid, nothing sideways.
   ========================================================================== */
.screening .screen-head .bill { color: rgba(245, 242, 237, 0.62); }
.feature-film .reel { margin: 0; }
.film-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.6rem, 5vw, 4.2rem) clamp(1.4rem, 3vw, 2.6rem);
  margin-top: clamp(3.5rem, 7vw, 6rem);
}
.film-grid .reel .plate { aspect-ratio: 16 / 9; }
.film-grid .reel .cap h3 { font-size: clamp(1.15rem, 1.8vw, 1.55rem); }
.feature-film .reel .cap h3 { font-size: clamp(1.5rem, 3vw, 2.4rem); }

/* What a couple gets on film. */
.film-includes { background: var(--ivory); }
.includes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.6rem, 3vw, 3rem);
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
}
.inc { border-top: 1px solid var(--gold); padding-top: 1.4rem; }
.inc .len {
  display: block; font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold);
}
.inc h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.35rem, 2.2vw, 1.8rem); margin: 0.7rem 0 0.6rem; }
.inc p { color: var(--muted); line-height: 1.75; margin: 0; max-width: 34ch; }

@media (max-width: 700px) {
  .feature-film .reel .plate, .film-grid .reel .plate { aspect-ratio: 16 / 9; }
  .film-grid { grid-template-columns: 1fr; }
  .includes { grid-template-columns: 1fr; }
  .screening .reel .cap { grid-template-columns: auto 1fr; }
  .screening .reel .cap .meta { grid-column: 2; text-align: left; margin-top: 0.35rem; }
  .screen-head .bill { text-align: left; }
}

/* ==========================================================================
   Films page — a screening room in the manner of Vimeo: one film filling the
   screen, a clean library of thumbnails with running times, and a dark
   theatre that opens over the page to play them.
   ========================================================================== */
.vm-hero {
  position: relative;
  min-height: 88svh;
  display: flex; align-items: flex-end;
  background: #0b0b0d; color: #fff;
  overflow: hidden;
}
.vm-hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  animation: vm-drift 24s ease-in-out infinite alternate;
}
@keyframes vm-drift { from { transform: scale(1.02); } to { transform: scale(1.1) translate(-1.5%, -1%); } }
.vm-hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(11,11,13,1) 0%, rgba(11,11,13,1) 2%, rgba(11,11,13,0.55) 32%, rgba(11,11,13,0) 62%),
    linear-gradient(90deg, rgba(11,11,13,0.6) 0%, rgba(11,11,13,0) 55%),
    linear-gradient(180deg, rgba(11,11,13,0.55) 0%, rgba(11,11,13,0) 22%);
}
.vm-hero-inner {
  position: relative; z-index: 2; width: 100%; max-width: 1360px; margin: 0 auto;
  padding: 0 var(--pad-x) clamp(3rem, 7vw, 5.5rem);
}
.vm-kicker {
  display: inline-flex; align-items: center; gap: 0.6rem; margin: 0;
  font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.8);
}
.vm-kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(169,138,87,0.25); }
.vm-title {
  font-family: var(--display); font-weight: 400; color: #fff;
  font-size: clamp(2.4rem, 7vw, 5.6rem); line-height: 1.02; letter-spacing: -0.01em;
  margin: 1rem 0 0.9rem; max-width: 14ch;
}
.vm-meta { margin: 0; font-size: 0.95rem; color: rgba(255,255,255,0.72); }
.vm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.6rem; margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.vm-play {
  display: inline-flex; align-items: center; gap: 0.65rem;
  background: #fff; color: #0b0b0d !important; border-radius: 999px;
  padding: 0.95rem 1.7rem 0.95rem 1.35rem; font-size: 0.95rem; font-weight: 400; letter-spacing: 0.02em;
  transition: transform 0.3s var(--ease), background 0.3s;
}
.vm-play svg { width: 18px; height: 18px; fill: currentColor; }
.vm-play:hover { transform: scale(1.04); background: var(--gold-light, #d9c39a); }
.vm-ghost {
  color: #fff; font-size: 0.9rem; border-bottom: 1px solid rgba(255,255,255,0.45); padding-bottom: 2px;
  transition: border-color 0.3s, color 0.3s;
}
.vm-ghost:hover { color: var(--gold-light, #d9c39a); border-color: currentColor; }

/* The library. */
.vm-library { background: #0b0b0d; color: #fff; padding: clamp(3.5rem, 8vw, 6.5rem) var(--pad-x) clamp(4.5rem, 10vw, 8rem); }
.vm-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem 2rem;
  padding-bottom: 1.2rem; margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); border-bottom: 1px solid rgba(255,255,255,0.1); }
.vm-head h2 { font-family: var(--sans); font-weight: 400; font-size: clamp(1.3rem, 2.4vw, 1.75rem); letter-spacing: 0.01em; color: #fff; margin: 0; }
.vm-head p { margin: 0; font-size: 0.85rem; color: rgba(255,255,255,0.5); }

.vm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 3.5vw, 2.8rem) clamp(1rem, 2vw, 1.6rem); }
.vm-tile { display: block; color: #fff; }
.vm-thumb { display: block; position: relative; overflow: hidden; border-radius: 10px; background: #1a1a1d; aspect-ratio: 16 / 9; }
.vm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s var(--ease), filter 0.5s; }
.vm-tile:hover .vm-thumb img { transform: scale(1.05); filter: brightness(0.75); }
.vm-dur {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  background: rgba(0,0,0,0.78); color: #fff; border-radius: 4px;
  padding: 3px 7px; font-size: 0.74rem; letter-spacing: 0.03em; font-variant-numeric: tabular-nums;
}
.vm-hover {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,0.95);
  display: flex; align-items: center; justify-content: center;
  transform: translate(-50%, -50%) scale(0.8); opacity: 0;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.vm-hover svg { width: 20px; height: 20px; fill: #0b0b0d; margin-left: 3px; }
.vm-tile:hover .vm-hover { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.vm-info { display: block; padding-top: 0.95rem; }
.vm-name { display: block; font-size: 1.05rem; color: #fff; transition: color 0.3s; }
.vm-tile:hover .vm-name { color: var(--gold-light, #d9c39a); }
.vm-sub { display: block; margin-top: 0.3rem; font-size: 0.82rem; color: rgba(255,255,255,0.5); }

/* The theatre. */
.vm-locked { overflow: hidden; }
.vm-theatre {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(8,8,10,0.97);
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; justify-content: center;
  padding: clamp(3.5rem, 7vh, 5rem) var(--pad-x) 3rem;
  animation: vm-in 0.35s var(--ease);
}
.vm-theatre[hidden] { display: none; }
@keyframes vm-in { from { opacity: 0; } to { opacity: 1; } }
.vm-stage { width: 100%; max-width: 1180px; color: #fff; }
.vm-player { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.vm-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vm-caption { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem 2rem; margin-top: 1.4rem; }
.vm-ctitle { font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2.3rem); color: #fff; margin: 0; }
.vm-cmeta { margin: 0.35rem 0 0; font-size: 0.88rem; color: rgba(255,255,255,0.55); }
.vm-calbum { color: #fff; font-size: 0.88rem; border-bottom: 1px solid rgba(255,255,255,0.4); padding-bottom: 2px; }
.vm-calbum:hover { color: var(--gold-light, #d9c39a); }
.vm-close {
  position: fixed; top: 16px; right: 16px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.1); color: #fff;
  display: flex; align-items: center; justify-content: center; transition: background 0.3s;
}
.vm-close:hover { background: rgba(255,255,255,0.22); }
.vm-close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; fill: none; }
.vm-next { margin-top: clamp(2.2rem, 4vw, 3rem); padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,0.1); }
.vm-next > p { margin: 0 0 1rem; font-size: 0.85rem; color: rgba(255,255,255,0.55); }
.vm-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.vm-mini { display: block; text-align: left; color: #fff; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.vm-mini-img { display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #1a1a1d; }
.vm-mini-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.vm-mini:hover .vm-mini-img img { transform: scale(1.06); }
.vm-mini-t { display: block; margin-top: 0.6rem; font-size: 0.92rem; }
.vm-mini-m { display: block; margin-top: 0.15rem; font-size: 0.76rem; color: rgba(255,255,255,0.5); }

@media (max-width: 1080px) { .vm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .vm-hero { min-height: 78svh; }
  .vm-grid { grid-template-columns: 1fr; }
  .vm-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vm-theatre { padding-top: 4.2rem; align-items: flex-start; }
  .vm-play { padding: 0.85rem 1.5rem 0.85rem 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .vm-hero-bg { animation: none; } }
/* Overlap the hero's last pixels, which can show a hairline of the photo at odd screen sizes. */
.vm-library { position: relative; z-index: 3; margin-top: -3px; }
/* On the dark films page the header stays dark when it turns solid. */
.films-page .site-header.is-solid { background: rgba(11, 11, 13, 0.94); color: var(--white); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06); }
.films-page.menu-open .site-header { color: var(--ink); background: transparent; }

/* ---------- Films library as a poster wall ---------- */
.vm-head h2 { font-family: var(--display); font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-top: 0.7rem; }
.vm-head { align-items: flex-end; }
.vm-wall { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(0.8rem, 1.4vw, 1.3rem); }
.vm-poster {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 2 / 3; border-radius: 12px; background: #1a1a1d; color: #fff;
  box-shadow: 0 18px 40px -18px rgba(0,0,0,0.8);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.vm-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter 0.5s; }
.vm-poster::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(8,8,10,0.95) 0%, rgba(8,8,10,0.6) 28%, rgba(8,8,10,0) 55%);
}
.vm-poster:hover { transform: translateY(-6px); box-shadow: 0 28px 50px -18px rgba(0,0,0,0.9); }
.vm-poster:hover img { transform: scale(1.06); filter: brightness(0.85); }
.vm-pdur {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-radius: 4px; padding: 3px 7px; font-size: 0.74rem; font-variant-numeric: tabular-nums;
}
.vm-pplay {
  position: absolute; left: 50%; top: 42%; z-index: 2;
  width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.8); background: rgba(255,255,255,0.08);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  transform: translate(-50%, -50%); transition: background 0.4s, border-color 0.4s, transform 0.4s var(--ease);
}
.vm-pplay svg { width: 18px; height: 18px; fill: #fff; margin-left: 3px; transition: fill 0.4s; }
.vm-poster:hover .vm-pplay { background: #fff; border-color: #fff; transform: translate(-50%, -50%) scale(1.08); }
.vm-poster:hover .vm-pplay svg { fill: #0b0b0d; }
.vm-pcap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.1rem 1.1rem 1.2rem; }
.vm-pno { display: block; font-family: var(--display); font-style: italic; font-size: 0.85rem; color: var(--gold-light); }
.vm-pname { display: block; font-family: var(--display); font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.12; margin-top: 0.3rem; }
.vm-pkind { display: block; margin-top: 0.45rem; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.6); }

/* Narrower screens: two across, with the first poster spanning the row. */
@media (max-width: 1080px) {
  .vm-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vm-poster:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .vm-poster:first-child .vm-pname { font-size: clamp(1.5rem, 5vw, 2rem); }
}
@media (max-width: 700px) {
  .vm-pplay { width: 46px; height: 46px; }
  .vm-pcap { padding: 0.9rem 0.85rem 1rem; }
}
/* Keep the play button off the couple's faces: bottom-right, beside the name. */
.vm-pplay { left: auto; top: auto; right: 0.9rem; bottom: 1.1rem; width: 42px; height: 42px; transform: none; }
.vm-poster:hover .vm-pplay { transform: scale(1.08); }
.vm-pplay svg { width: 15px; height: 15px; }
.vm-pcap { padding-right: 4rem; }
@media (max-width: 1080px) {
  .vm-poster:not(:first-child) .vm-pplay { right: auto; bottom: auto; left: 10px; top: 10px; width: 34px; height: 34px; }
  .vm-poster:not(:first-child) .vm-pplay svg { width: 12px; height: 12px; }
  .vm-poster:not(:first-child) .vm-pcap { padding-right: 0.85rem; }
  .vm-poster:not(:first-child) .vm-pkind { letter-spacing: 0.16em; }
}

/* ---------- Films page, one dark cinema from top to bottom ---------- */
.vm-yt { color: var(--gold-light); border-bottom: 1px solid rgba(196,168,119,0.45); }
.vm-yt:hover { color: #fff; }

/* What we film: three picture cards. */
.vm-kinds { background: #0b0b0d; color: #fff; padding: clamp(2rem, 5vw, 4rem) var(--pad-x) clamp(4.5rem, 10vw, 8rem); }
.vm-kgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.vm-kind { position: relative; border-radius: 12px; overflow: hidden; background: #141417; padding-bottom: 1.6rem; }
.vm-kimg { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.vm-kimg img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.vm-kind:hover .vm-kimg img { transform: scale(1.05); }
.vm-klen {
  display: flex; align-items: baseline; gap: 0.5rem; margin: 1.4rem 1.4rem 0;
  font-family: var(--display); font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1; color: var(--gold-light);
}
.vm-klen small { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.vm-kind h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.3rem, 2vw, 1.6rem); color: #fff; margin: 0.9rem 1.4rem 0.5rem; }
.vm-kind p { margin: 0 1.4rem; color: rgba(255,255,255,0.62); line-height: 1.7; font-size: 0.95rem; }

/* The closing invitation, in colour. */
.vm-end {
  position: relative; overflow: hidden; background: #0b0b0d; color: #fff;
  min-height: 78svh; display: flex; align-items: flex-end;
}
.vm-end-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vm-end::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,11,13,1) 0%, rgba(11,11,13,0) 26%),
    linear-gradient(0deg, rgba(11,11,13,0.95) 0%, rgba(11,11,13,0.45) 45%, rgba(11,11,13,0.15) 100%);
}
.vm-end-inner { position: relative; z-index: 2; width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 var(--pad-x) clamp(3.5rem, 8vw, 6rem); }
.vm-end h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2.3rem, 6vw, 4.8rem); line-height: 1.05; color: #fff; margin: 1rem 0 0.9rem; }
.vm-end-line { margin: 0; max-width: 46ch; color: rgba(255,255,255,0.78); line-height: 1.7; }

/* Poster names on one line on wide screens. */
@media (min-width: 1081px) {
  .vm-pcap { padding-right: 3.6rem; }
  .vm-pname { font-size: clamp(1rem, 1.15vw, 1.2rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 900px) { .vm-kgrid { grid-template-columns: 1fr; } .vm-kimg { aspect-ratio: 16 / 9; } }
/* The page itself is dark here, so no hairline of cream shows between sections. */
body.films-page, .films-page main { background: #0b0b0d; }

/* ==========================================================================
   Kind Words page: one real couple's words first, outside ratings, three
   large stories, recent WedMeGood reviews, then compact cards.
   ========================================================================== */
.kw-hero {
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  max-width: 1360px; margin: 0 auto;
  padding: calc(74px + clamp(3rem, 7vw, 6rem)) var(--pad-x) clamp(3rem, 6vw, 5rem);
}
.kw-kicker { color: var(--gold); }
.kw-hero-quote {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.9rem, 3.8vw, 3.4rem); line-height: 1.15; letter-spacing: -0.005em;
  margin: 1.1rem 0 1.6rem; color: var(--ink);
}
.kw-hero-img { margin: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(16,16,16,0.45); }
.kw-hero-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }

.kw-by { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.2rem; margin-top: 1.2rem; }
.kw-by .who { font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); }
.kw-by a, .kw-out {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
}
.kw-by a i, .kw-out i { display: block; width: 16px; height: 1px; background: currentColor; transition: width 0.4s var(--ease); }
.kw-by a:hover, .kw-out:hover { color: var(--ink); }
.kw-by a:hover i, .kw-out:hover i { width: 28px; }

/* Ratings strip. */
.kw-rating { background: var(--ink); color: #fff; padding: clamp(1.6rem, 3vw, 2.2rem) var(--pad-x); }
.kw-rating-in { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(1.4rem, 5vw, 5rem); }
.kw-rate { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 0.7rem; color: #fff; }
.kw-score { font-family: var(--display); font-size: clamp(2rem, 3.4vw, 2.6rem); line-height: 1; grid-row: span 2; }
.kw-stars { color: var(--gold-light); letter-spacing: 0.12em; font-size: 0.9rem; }
.kw-src { font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.65); }
a.kw-rate:hover .kw-src { color: #fff; }

/* Three large stories, photo and words side by side. */
.kw-feature {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}
.kw-feature + .kw-feature { margin-top: clamp(4rem, 9vw, 7rem); }
.kw-feature.flip .kw-fimg { order: 2; }
.kw-fimg { margin: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 50px -28px rgba(16,16,16,0.45); }
.kw-fimg img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; display: block; }
.kw-quote { font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.25; margin: 0; color: var(--ink); }

/* Expanding full text. */
.kw-full { margin-top: 1.1rem; }
.kw-full summary { list-style: none; cursor: pointer; display: inline-block; font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.kw-full summary::-webkit-details-marker { display: none; }
.kw-full .c { display: none; }
.kw-full[open] .o { display: none; }
.kw-full[open] .c { display: inline; }
.kw-full p, .kw-fulltext p { font-family: var(--serif); font-size: 1.05rem; line-height: 1.75; color: var(--ink-soft); margin: 1rem 0 0; }

/* Card grids. */
.kw-recent { background: var(--ivory); }
.kw-more-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.6rem 2rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.kw-more-head .folio { width: 100%; }
.kw-more-head .display-s { margin: 0; }
.kw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); align-items: start; }
.kw-card { background: var(--white); border-radius: 12px; padding: 1.5rem 1.5rem 1.4rem; box-shadow: 0 1px 3px rgba(16,16,16,0.05), 0 12px 30px -16px rgba(16,16,16,0.18); }
.kw-cimg { display: block; margin: -1.5rem -1.5rem 1.3rem; border-radius: 12px 12px 0 0; overflow: hidden; }
.kw-cimg img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
.kw-card:hover .kw-cimg img { transform: scale(1.04); }
.kw-cquote { font-family: var(--display); font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.35; margin: 0; color: var(--ink); }
.kw-wstars { display: block; color: var(--gold); letter-spacing: 0.14em; font-size: 0.85rem; margin-bottom: 0.9rem; }

/* Closing invitation, in colour, with WhatsApp. */
.kw-end { position: relative; overflow: hidden; text-align: center; color: #fff; background: var(--ink); padding: clamp(6rem, 14vw, 11rem) var(--pad-x); }
.kw-end > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.kw-end::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.6)); }
.kw-end-inner { position: relative; z-index: 2; }
.kw-end .eyebrow { color: var(--gold-light); }
.kw-end-line { max-width: 44ch; margin: 1.4rem auto 2.4rem; color: rgba(255,255,255,0.85); line-height: 1.7; }
.kw-wa { display: block; margin-top: 1.3rem; font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.85); text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1080px) { .kw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .kw-hero { grid-template-columns: 1fr; padding-top: calc(74px + 2.4rem); }
  .kw-hero-img { order: -1; }
  .kw-hero-img img { aspect-ratio: 4 / 3; }
  .kw-feature { grid-template-columns: 1fr; }
  .kw-feature.flip .kw-fimg { order: 0; }
  .kw-grid { grid-template-columns: 1fr; }
  .kw-rating-in { justify-content: space-between; gap: 1.2rem; }
  .kw-rate { grid-template-columns: 1fr; text-align: center; justify-items: center; row-gap: 0.35rem; }
  .kw-score { grid-row: auto; }
}
@media (max-width: 760px) {
  .kw-rating-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
  .kw-score { font-size: 1.8rem; }
  .kw-stars { font-size: 0.66rem; letter-spacing: 0.06em; }
  .kw-src { font-size: 0.52rem; letter-spacing: 0.14em; line-height: 1.6; }
}
@media (max-width: 760px) { .kw-rating-in { align-items: start; } }

/* ==========================================================================
   Studio page: facts first, the founder, real differences, range, process.
   ========================================================================== */
.st-intro { font-size: 1.05rem; line-height: 1.8; color: var(--ink-soft); max-width: 46ch; margin: 0; }
.st-facts-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; text-align: center; }
.st-fact { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: #fff; }
.st-fact .kw-score small { font-size: 0.5em; color: var(--gold-light); margin-left: 0.15em; vertical-align: 0.4em; }
a.st-fact:hover .kw-src { color: #fff; }

.st-founder { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.st-founder:has(.st-fphoto:not([hidden])) { grid-template-columns: 1fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); max-width: none; align-items: center; }
.st-fphoto { margin: 0; border-radius: 14px; overflow: hidden; }
.st-fphoto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.st-founder .display-s { margin: 0.6rem 0 0.3rem; }
.st-role { font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); margin: 0 0 1.4rem; }
.st-fquote { margin: 1.8rem 0 0; padding-left: 1.3rem; border-left: 1px solid var(--gold); font-family: var(--display); font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.4; color: var(--ink); }
.st-fquote cite { display: block; margin-top: 0.8rem; font-family: var(--sans); font-style: normal; font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.st-members { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.st-member img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; display: block; }
.st-member .nm { display: block; margin-top: 0.8rem; font-family: var(--display); font-size: 1.2rem; }
.st-member .rl { display: block; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-top: 0.3rem; }

/* The team with the couples they photographed — four across, two on a tablet,
   two on a phone, so the faces stay big enough to be faces. */
.st-crew { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.8rem, 1.6vw, 1.3rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.st-crew figure { margin: 0; border-radius: 12px; overflow: hidden; cursor: zoom-in; box-shadow: 0 16px 26px -16px rgba(16,16,16,0.4); }
.st-crew img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform 1.4s var(--ease); }
.st-crew figure:hover img { transform: scale(1.04); }
.st-crewline { max-width: 760px; margin: clamp(1.2rem, 2.5vw, 1.8rem) 0 0; color: var(--muted); font-size: 0.95rem; line-height: 1.8; }

.st-diff-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.4rem, 3vw, 2.6rem); }
.st-d { border-top: 1px solid rgba(255,255,255,0.18); padding-top: 1.4rem; }
.st-dn { font-family: var(--display); font-style: italic; color: var(--gold-light); font-size: 1.1rem; }
.st-d h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.35rem, 2.2vw, 1.75rem); color: #fff; margin: 0.6rem 0 0.7rem; }
.st-d p { color: rgba(255,255,255,0.7); line-height: 1.75; margin: 0 0 1rem; }

.st-range { background: var(--ivory); }
.st-range-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.st-range-item { display: block; color: var(--ink); }
.st-rimg { display: block; overflow: hidden; border-radius: 12px; box-shadow: 0 16px 26px -14px rgba(16,16,16,0.38); }
.st-rimg img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
.st-range-item:hover .st-rimg img { transform: scale(1.05); }
.st-rname { display: block; margin-top: 1rem; font-family: var(--display); font-size: clamp(1.15rem, 1.6vw, 1.35rem); }
.st-rsub { display: block; margin-top: 0.3rem; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 900px) {
  .st-facts-in { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.6rem; }
  .st-diff-grid { grid-template-columns: 1fr; }
  .st-range-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-founder:has(.st-fphoto:not([hidden])) { grid-template-columns: 1fr; }
  .st-members { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-crew { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.st-members[hidden], .st-fphoto[hidden], .kw-rating[hidden] { display: none !important; }

/* ==========================================================================
   Home page, round two: colour hero, trust strip, one film, visible reviews.
   ========================================================================== */
.hero-media img { filter: none; }
.hero::after { background: linear-gradient(0deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.35) 100%); }
.hero-inner h1 { max-width: 16ch; }

.home-film { margin-top: 0; }
.home-film .vm-head h2 { font-family: var(--display); font-size: clamp(1.8rem, 3.6vw, 2.9rem); line-height: 1.12; max-width: 22ch; }
.home-film .vm-head h2 em { font-style: italic; color: var(--gold-light); }
.home-film-plate { position: relative; display: block; overflow: hidden; border-radius: 14px; aspect-ratio: 2.2 / 1; background: #000; color: #fff; }
.home-film-plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.home-film-plate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,8,10,0.85) 0%, rgba(8,8,10,0.2) 50%, rgba(8,8,10,0) 100%); }
.home-film-plate:hover img { transform: scale(1.04); }
.home-film-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.6rem; padding: clamp(1.2rem, 3vw, 2.2rem); }
.home-film-name { font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1.1; }
.home-film-name small { display: block; margin-top: 0.4rem; font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.7); }

.home-reviews .display-s { color: #fff; margin: 0.6rem 0 0.4rem; }
.hr-star { color: var(--gold-light); font-size: 0.6em; vertical-align: 0.35em; margin-left: 0.15em; }
.hr-src { font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin: 0; }
.hr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.4rem, 3vw, 2.6rem); }
.hr-q { margin: 0; border-top: 1px solid rgba(255,255,255,0.18); padding-top: 1.4rem; }
.hr-q blockquote { margin: 0; font-family: var(--display); font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.4; color: #fff; }
.hr-q figcaption { display: flex; align-items: center; gap: 0.8rem; margin-top: 1.3rem; font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-light); }
.hr-q figcaption img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.hr-wmg { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(196,168,119,0.5); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; letter-spacing: 0; }

@media (max-width: 900px) {
  .hr-grid { grid-template-columns: 1fr; }
  .home-film-plate { aspect-ratio: 4 / 3; }
}

/* Home: the other four films as posters under the featured one. */
.home-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(1rem, 2vw, 1.4rem); }
@media (max-width: 1080px) {
  .home-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-wall .vm-poster:first-child { grid-column: auto; aspect-ratio: 2 / 3; }
  .home-wall .vm-poster:first-child .vm-pname { font-size: inherit; }
  .home-wall .vm-poster:first-child .vm-pplay { right: auto; bottom: auto; left: 10px; top: 10px; width: 34px; height: 34px; }
  .home-wall .vm-poster:first-child .vm-pplay svg { width: 12px; height: 12px; }
  .home-wall .vm-poster:first-child .vm-pcap { padding-right: 0.85rem; }
}

/* ---------- Contact page: act first, form second ---------- */
.ct-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.8rem; }
.ct-btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.95rem 1.4rem; border-radius: 999px; font-size: 0.9rem;
  border: 1px solid rgba(16,16,16,0.25); color: var(--ink);
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.ct-btn svg { width: 18px; height: 18px; fill: currentColor; }
.ct-wa { background: var(--gold); border-color: var(--gold); color: #fff !important; }
.ct-wa:hover { background: var(--ink); border-color: var(--ink); }
.ct-call:hover, .ct-form:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.ct-where { margin: 1.4rem 0 0; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); line-height: 1.9; }
.ct-hero .kw-hero-img img { aspect-ratio: 4 / 5; }
.field .opt { margin-left: 0.4rem; font-size: 0.9em; letter-spacing: 0.12em; color: rgba(16,16,16,0.38); text-transform: lowercase; }
.ct-trust { margin: 2rem 0 0; font-size: 0.85rem; color: var(--ink-soft); }
.ct-stars { color: var(--gold); }
.ct-addr { line-height: 1.7; }
.ct-addr .link-gold { display: inline-flex; margin-top: 0.6rem; }
.ct-addr small { display: block; margin-top: 0.5rem; font-size: 0.8rem; color: var(--muted); }
@media (max-width: 760px) {
  .ct-hero .kw-hero-img { display: none; }
  .ct-btn { flex: 1 1 auto; justify-content: center; }
  .ct-form { flex-basis: 100%; }
}

/* Album pages: the invitation halfway through, and the gallery continuing after it. */
.album-ask { margin: clamp(2.6rem, 6vw, 4.5rem) 0; }
.album-ask + .gallery { margin-top: 0; }