/*
Theme Name: The Geldenhuyses
Theme URI: https://thegeldenhuyses.com
Author: The Geldenhuyses
Description: Custom theme for The Geldenhuyses — documentary wedding films and photographs. Minimal, fast, film-led.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.4
License: Proprietary
Text Domain: geldenhuyses
*/

/* ---------- Fonts (Fontsource via jsDelivr, latin subset, OFL) ---------- */
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("https://cdn.jsdelivr.net/npm/@fontsource/instrument-serif@5.3.0/files/instrument-serif-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("https://cdn.jsdelivr.net/npm/@fontsource/instrument-serif@5.3.0/files/instrument-serif-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("https://cdn.jsdelivr.net/npm/@fontsource/hanken-grotesk@5.3.0/files/hanken-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("https://cdn.jsdelivr.net/npm/@fontsource/hanken-grotesk@5.3.0/files/hanken-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("https://cdn.jsdelivr.net/npm/@fontsource/hanken-grotesk@5.3.0/files/hanken-grotesk-latin-600-normal.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
	/* Palette: cream, white and beige. */
	--paper: #F8F3E9;
	--paper-2: #E3DCCD;
	--ink: #1D1A15;
	--ink-2: #403D36;
	--ink-3: #403D36;
	--muted: #5F5A51;
	--muted-2: #5F5A51;
	--line: #E3DCCD;
	--line-2: #ACA596;
	--field: #847A68;
	--ph: #E3DCCD;
	--night: #161513;
	--night-2: #121110;
	--night-3: #24221F;
	--night-line: #2E2C29;
	--on-night: #EDEBE6;
	--on-night-muted: #A8A49B;
	--sand: #E3DCCD;
	--sand-muted: #5F5A51;
	--serif: "Instrument Serif", "Times New Roman", serif;
	--sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	--gutter: clamp(20px, 4vw, 48px);
	--max: 1280px;
	--section: clamp(88px, 10vw, 140px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* The old theme's page-builder plugin still prints its own page background and text colour on every page; this keeps ours. */
html body.theme-geldenhuyses { background: var(--paper); color: var(--ink); }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
img, video, iframe { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; }
a:hover { color: var(--muted); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
button { font: inherit; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 12px 18px; background: var(--ink); color: var(--paper); text-decoration: none; }
.skip-link:focus { top: 12px; color: var(--paper); }

/* ---------- Layout ---------- */
.wrap { max-width: var(--max); margin-inline: auto; }
.wrap--narrow { max-width: 980px; }
.wrap--films { max-width: var(--max); }
.section { padding: var(--section) var(--gutter); }
.section--tint { background: var(--paper-2); }
.section--night { background: var(--night); color: var(--on-night); }
/* Sections take turns down each page: cream, white, beige, white, then again. Full-width photo sections (hero, About cover, pricing photo) sit outside the count; on phones the prices below that photo share the white of the section before. */
.section--strip, .section--quotes, .about-band, .page-head + .page-body, .section--rule, .gh-inquire .site-footer--plain, .home .site-footer, .gh-about .site-footer, #pricing:not(.section--pricing-photo) { background: #fff; }
@media (max-width: 999px) { #pricing { background: #fff; } }
.section--sand, .about-approach { background: var(--sand); }
/* Fades: where two colours meet, the lower section starts in the colour above and fades into its own.
   Sections straight after a full-width photo (hero, About cover, pricing photo) keep a crisp edge.
   To go back to hard edges, delete this block. */
.section--strip, .about-band, .page-head + .page-body, .section--rule, .home .site-footer { --from: var(--paper); --to: #fff; }
#films, .about-approach, .gh-photography .site-footer, .gh-films .site-footer, .gh-faq .site-footer { --from: #fff; --to: var(--sand); }
.section--quotes, .gh-about .site-footer { --from: var(--sand); --to: #fff; }
.section--strip, #films, .section--quotes, .home .site-footer, .about-band, .about-approach, .gh-about .site-footer, .page-head + .page-body, .section--rule, .gh-photography .site-footer, .gh-films .site-footer, .gh-faq .site-footer { background: linear-gradient(to bottom, var(--from), var(--to) var(--fade, clamp(96px, 10vw, 180px))); }
.page-head + .page-body { --fade: clamp(160px, 16vw, 280px); }
@media (max-width: 999px) { .section:has(.insta-head) { background: linear-gradient(to bottom, #fff, var(--paper) clamp(96px, 10vw, 180px)); } }
/* Home, About, Photo, Video and Contact all use exactly the same slow fade (beige, cream, white held for the middle 5%, cream, beige) instead of coloured sections.
   It starts just below the opening video/photo so none of it is hidden behind it. The strip behind the menu and the footer are plain beige.
   The fade's beige and cream are darker than the site's other beige and cream (Nov 2026). The original fade used beige #E3DCCD and cream #F8F3E9;
   to go back, change the two colours on the next line to those. */
:root { --fade-beige: #C8BDA7; --fade-cream: #E6DECF; --page-fade: linear-gradient(to bottom, var(--fade-beige) 0%, var(--fade-cream) 23.75%, #fff 47.5%, #fff 52.5%, var(--fade-cream) 76.25%, var(--fade-beige) 100%); }
html body.home, html body.gh-about, html body.gh-photography, html body.gh-films, html body.gh-inquire, html body.gh-faq { background: var(--fade-beige); }
.home-flow, .gh-about .page-flow, .gh-photography .page-body, .gh-films .page-body, .gh-inquire .page-flow, .gh-faq .page-flow { background: var(--page-fade); }
/* The FAQ page has no opening photo, so its fade starts just below the menu. */
body.gh-faq .page-body, body.gh-faq .site-footer { background: none; }
body.home .section--strip, body.home #films, body.home .section--quotes, body.home .section:has(.insta-head) { background: none; }
body.home .site-footer { background: var(--fade-beige); }
@media (max-width: 999px) { body.home #pricing { background: none; } }
body.gh-about .about-band, body.gh-about .about-approach, body.gh-about .site-footer { background: none; }
body.gh-inquire .section, body.gh-inquire .site-footer { background: none; }
.gh-photography .site-footer, .gh-films .site-footer { background: var(--fade-beige); }
.section--sand .label, .section--sand .section-head__aside { color: var(--sand-muted); }
.page-head + .page-body { padding-top: clamp(56px, 6vw, 88px); }
/* Same distance as from one thumbnail to the next: the grid's row gap (56px) + the gap above the names (18px) + one line of names (30px x 1.1) + the gap above the venue (8px) + the venue line (24px). */
.gh-films .page-body { padding-top: calc(56px + 18px + 33px + 8px + 24px); }
.stack { display: flex; flex-direction: column; }

/* ---------- Type ---------- */
.label { font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.section--night .label, .is-dark .label { color: var(--on-night-muted); }
.section--tint .label { color: var(--muted-2); }
.display { font-family: var(--serif); font-size: clamp(52px, 6.6vw, 104px); line-height: 0.98; letter-spacing: -0.015em; text-wrap: balance; }
.h2 { font-family: var(--serif); font-size: clamp(42px, 5vw, 76px); line-height: 1; letter-spacing: -0.01em; text-wrap: balance; }
.display em, .h2 em, .hero__title em, .intro__text em { font-style: italic; letter-spacing: 0; }
.lede { font-size: 17px; line-height: 1.7; color: var(--ink-3); max-width: 400px; }
.is-dark .lede { color: #BDB9B0; }
.textlink { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; text-underline-offset: 6px; }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 42px; padding: 0 24px;
	border: 1px solid currentColor; background: transparent; color: inherit;
	font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
	cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--solid { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--paper); }
.btn--light { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn--light:hover { background: var(--paper-2); border-color: var(--paper-2); color: var(--ink); }
.btn--outline-light { border-color: rgba(255,255,255,.8); color: #fff; }
.btn--outline-light:hover { background: #fff; color: var(--ink); }
.is-dark .btn--solid, .section--night .btn--solid { background: var(--on-night); border-color: var(--on-night); color: var(--night-2); }

/* ---------- Header ---------- */
.site-header {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
	gap: 12px 40px; padding: 28px var(--gutter);
}
.site-header--overlay { position: absolute; top: 0; left: 0; right: 0; z-index: 3; border-bottom: 0; color: #fff; }
.site-header--overlay a:hover { color: #E4E1DA; }
.admin-bar .site-header--overlay { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header--overlay { top: 46px; } }
.is-dark .site-header { border-color: var(--night-line); color: var(--on-night); }
.wordmark { font-family: var(--serif); font-size: 36px; font-style: italic; line-height: 1; letter-spacing: 0.06em; text-decoration: none; color: inherit; }
.nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 32px; margin: 0; padding: 0; list-style: none; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.nav a { display: inline-block; padding: 12px 0; text-decoration: none; color: inherit; }
.nav .current-menu-item > a, .nav .current_page_item > a { text-decoration: underline; text-underline-offset: 6px; }
.nav .menu-cta > a { padding: 13px 22px; border: 1px solid currentColor; text-decoration: none; }
.site-header--overlay .nav .menu-cta > a { border-color: rgba(255,255,255,.7); }
.nav .menu-cta.current-menu-item > a { background: var(--ink); border-color: var(--ink); color: var(--paper); }
/* Phones: the name and the menu stack, both centred, with the menu tucked up under the name. */
@media (max-width: 759px) {
	.site-header { flex-direction: column; justify-content: center; gap: 8px; text-align: center; }
	.nav ul { justify-content: center; }
}
@media (max-width: 600px) {
	.site-header { padding-block: 20px; }
	.wordmark { font-size: 30px; }
	.nav ul { gap: 0 16px; font-size: 12px; }
	.nav .menu-cta > a { padding: 11px 16px; }
}

/* ---------- Hero ---------- */
.hero { position: relative; aspect-ratio: 2.39 / 1; min-height: 300px; max-height: calc(100svh - 96px); overflow: hidden; background: var(--night-3); color: #fff; }
.hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gh-js video.hero__media:not(.is-playing) { opacity: 0; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at center, rgba(10,9,8,.42), rgba(10,9,8,.16) 72%); pointer-events: none; }
.hero__content { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(12px, 1.6vw, 22px); padding: 24px var(--gutter); text-align: center; }
.hero__kicker { font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; color: #E4E1DA; }
.hero__title { max-width: 14em; font-family: var(--serif); font-size: clamp(52px, 6.6vw, 104px); line-height: 0.98; letter-spacing: -0.015em; text-wrap: balance; }
.hero__toggle { position: absolute; right: var(--gutter); bottom: clamp(8px, 1.6vw, 24px); z-index: 3; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: none; color: #E4E1DA; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; }
.hero__toggle svg { width: 14px; height: 14px; }
.hero__toggle .icon-play { display: none; }
.hero__toggle[aria-pressed="true"] .icon-play { display: block; }
.hero__toggle[aria-pressed="true"] .icon-pause { display: none; }
@media (max-width: 759px) {
	.hero { aspect-ratio: 16 / 9; min-height: 0; }
	.hero__kicker { font-size: 12px; }
	.hero__title { font-size: clamp(30px, 8.6vw, 44px); }
	.hero__toggle span { display: none; }
}

/* ---------- Photo strip (home) ---------- */
#intro { padding-bottom: clamp(48px, 5vw, 72px); }
.section--strip { padding-block: clamp(48px, 5vw, 72px); }
.section--strip .section-foot { margin-top: 16px; }
/* Home: films and kind words sit a little closer together. */
#films { padding-block: clamp(56px, 6vw, 88px); }
#films .section-head { margin-bottom: 40px; }
#films .section-foot { margin-top: 40px; }
.section--strip .section-head { margin-bottom: 0; }
.collage { --b-h: clamp(170px, 21vw, 340px); --b-g: calc(var(--b-h) * 0.149); overflow-x: auto; padding-block: clamp(32px, 4vw, 56px); scrollbar-width: none; }
.collage::-webkit-scrollbar { display: none; }
.collage.is-live { overflow: hidden; }
.collage__track { display: flex; width: max-content; }
.collage__set { display: flex; gap: var(--b-g); padding-right: var(--b-g); }
.collage:not(.is-live) .collage__set[aria-hidden] { display: none; }
.board { flex: none; display: flex; flex-direction: column; gap: calc(var(--b-h) * 0.075); }
.board__row { display: flex; align-items: center; gap: var(--b-g); height: var(--b-h); }
.board__pair { display: flex; flex-direction: column; gap: calc(var(--b-h) * 0.077); }
.board__ph { flex: none; overflow: hidden; background: var(--ph); }
.board__ph--l { width: calc(var(--b-h) * 1.376); height: var(--b-h); }
.board__ph--p { width: calc(var(--b-h) * 0.649); height: var(--b-h); }
.board__ph--sp { width: calc(var(--b-h) * 0.497); height: calc(var(--b-h) * 0.768); }
.board__ph--sl { width: calc(var(--b-h) * 0.497); height: calc(var(--b-h) * 0.362); }
.board__ph img { width: 100%; height: 100%; object-fit: cover; }
/* Phones, Photo page only: each panel's seven photos stack down the page, edge to edge (the Home band keeps drifting).
   Big landscape; portrait (left edge) beside the stacked pair; big landscape; small portrait beside a portrait (right edge).
   The seven columns are edge, small, edge, edge, edge, small, edge, so the two middle rows mirror each other. */
@media (max-width: 759px) {
	.pboard { display: grid; grid-template-columns: 1fr 6.5fr 1fr 1fr 1fr 6.5fr 1fr; align-items: center; gap: 5.4vw 0; }
	.pboard .board__row { display: contents; }
	.pboard .board__ph { width: auto; height: auto; }
	.pboard .board__ph--l { grid-column: 1 / -1; aspect-ratio: 1.376; }
	.pboard .board__ph--p { aspect-ratio: 0.649; }
	.pboard .board__ph--sp { aspect-ratio: 0.648; }
	.pboard .board__ph--sl { width: 100%; aspect-ratio: 1.376; }
	.pboard .board__row:first-child > .board__ph--l { grid-row: 1; }
	.pboard .board__row:last-child > .board__ph--p { grid-row: 2; grid-column: 1 / 4; }
	.pboard .board__pair { grid-row: 2; grid-column: 6 / 7; gap: 6vw; }
	.pboard .board__row:last-child > .board__ph--l { grid-row: 3; }
	.pboard .board__row:first-child > .board__ph--sp { grid-row: 4; grid-column: 2 / 3; }
	.pboard .board__row:first-child > .board__ph--p { grid-row: 4; grid-column: 5 / 8; }
}

/* ---------- Intro ---------- */
.intro { display: flex; flex-direction: column; gap: 36px; align-items: center; max-width: 1040px; text-align: center; }
.intro__text { font-family: var(--serif); font-size: clamp(30px, 3.4vw, 50px); line-height: 1.2; text-wrap: balance; }

/* ---------- Section heads ---------- */
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 56px; }
.section-head__title { display: flex; flex-direction: column; gap: 16px; }
.section-head__aside { max-width: 380px; font-size: 16px; line-height: 1.6; color: var(--muted); }
.section--night .section-head__aside { color: var(--on-night-muted); }

/* ---------- Films ---------- */
.film { display: flex; flex-direction: column; gap: 18px; }
.film__frame { position: relative; aspect-ratio: 16 / 9; background: var(--night-3); overflow: hidden; }
.film__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.film__play { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(10,9,8,.08); color: #fff; cursor: pointer; transition: background-color .3s ease; }
.film__play:hover { background: rgba(10,9,8,.22); }
.film__play svg { width: 60px; height: 60px; transition: transform .3s ease; }
.film__play:hover svg { transform: scale(1.06); }
.film--feature .film__play svg, .film--list .film__play svg { width: 88px; height: 88px; }
.film__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Names, then the venue on its own line underneath, the same on every film. */
.film__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.film__names { font-family: var(--serif); font-size: 30px; line-height: 1.1; }
.film--feature .film__names { font-size: 40px; line-height: 1.05; }
.film--list .film__names { font-size: clamp(32px, 3.2vw, 44px); line-height: 1.05; }
.film__title-row { display: flex; align-items: baseline; gap: 20px; }
.film__num { font-size: 12px; letter-spacing: 0.16em; color: var(--sand-muted); }
.film__venue { color: var(--sand-muted); }
.film__lang { font-style: italic; color: var(--sand-muted); }
.film--feature { gap: 20px; }
.film-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 56px 32px; margin-top: 56px; }
.film-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 56px 32px; }
.film-list { display: flex; flex-direction: column; gap: clamp(72px, 9vw, 112px); }
.film--list { gap: 24px; }

/* ---------- Stories (photo galleries) ---------- */
.story { display: flex; flex-direction: column; gap: 16px; text-decoration: none; color: inherit; }
.story:hover { color: inherit; }
.story__img { position: relative; aspect-ratio: 4 / 5; background: var(--ph); overflow: hidden; }
.story__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s ease; }
.story:hover .story__img img, .film__frame:hover img { transform: scale(1.02); }
.story--43 .story__img { aspect-ratio: 4 / 3; }
.story--21 .story__img { aspect-ratio: 2 / 1; }
.story__meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; }
.story__names { font-family: var(--serif); font-size: 28px; line-height: 1.1; }
.story--lead .story__names { font-size: 32px; }
.story--21 .story__names { font-size: clamp(32px, 3.2vw, 44px); line-height: 1.05; }
.story--stacked .story__meta { flex-direction: column; align-items: flex-start; gap: 4px; }
.story--stacked .story__names { font-size: 30px; }
.story__more { color: var(--ink); }
.stories { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.stories__lead { flex: 7 1 480px; }
.stories__side { flex: 5 1 360px; display: flex; flex-direction: column; gap: 40px; }
.stories-foot, .section-foot { margin-top: 48px; }
.photo-grid { columns: 3; column-gap: 16px; }
.photo-grid__item { margin: 0 0 16px; break-inside: avoid; }
.photo-grid__item img { width: 100%; height: auto; background: var(--ph); }
.photo-grid.is-masonry { display: flex; align-items: flex-start; gap: 16px; columns: auto; }
.photo-grid__col { flex: 1 1 0; min-width: 0; }
@media (max-width: 759px) {
	.photo-grid { columns: 2; column-gap: 8px; }
	.photo-grid.is-masonry { gap: 8px; }
	.photo-grid__item { margin-bottom: 8px; }
}
/* About: the everyday photos, a dense camera-roll wall. */
.section--life { padding-top: 0; }
/* Photo page: panels of seven in the Home band's layout, stacked. Each panel is as wide as the page; its row height follows (a panel is 2.82 rows wide). */
.pboards { container-type: inline-size; }
.pboard { --b-h: calc(100cqw / 2.82); --b-g: calc(var(--b-h) * 0.149); }
.pboard + .pboard { margin-top: calc(var(--b-h) * 0.075); }
.pboard .photo-grid__item { margin: 0; }
.pboard .board__ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 759px) {
	.pboards { margin-inline: calc(-1 * var(--gutter)); }
	.pboard + .pboard { margin-top: 5.4vw; }
}
.photo-grid--life { columns: 5; column-gap: 10px; }
.photo-grid--life .photo-grid__item { margin-bottom: 10px; }
.photo-grid--life.is-masonry { gap: 10px; }
@media (max-width: 1199px) { .photo-grid--life { columns: 4; } }
@media (max-width: 759px) {
	.photo-grid--life { columns: 3; column-gap: 4px; }
	.photo-grid--life .photo-grid__item { margin-bottom: 4px; }
	.photo-grid--life.is-masonry { gap: 4px; }
}
/* About 1: the wide opening photo with the words on it. */
/* Same shape as the films on Home and the Video page. */
.about-cover { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; aspect-ratio: 2.39 / 1; max-height: calc(100svh - 96px); min-height: 300px; padding-inline: var(--gutter); background: var(--ph); }
.about-cover--plain { aspect-ratio: auto; max-height: none; padding-block: var(--section); background: none; }
.about-cover__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 48%; }
/* A soft shade on the left so the white words stay readable on the photo. */
.about-cover::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20, 18, 15, 0.5) 0%, rgba(20, 18, 15, 0.28) 30%, rgba(20, 18, 15, 0) 52%); pointer-events: none; }
.about-cover__inner { width: 100%; }
.about-cover__text { display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 24px); max-width: min(40vw, 760px); color: #fff; text-shadow: 0 1px 18px rgba(0, 0, 0, 0.2); }
.about-cover__hello { margin-bottom: clamp(16px, 1.95vw, 36px); font-family: var(--serif); font-size: clamp(28px, 2.8vw, 52px); line-height: 1; letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, 0.92); }
.about-cover__title { font-family: var(--serif); font-size: clamp(52px, 6.6vw, 104px); line-height: 0.98; letter-spacing: -0.015em; }
.about-cover__title em { display: block; font-style: italic; letter-spacing: 0; }
.about-cover__lede { margin-top: clamp(8px, 1vw, 20px); font-size: 17px; line-height: 1.7; color: #fff; }
@media (max-width: 899px) {
	.about-cover { display: block; aspect-ratio: auto; max-height: none; min-height: 0; padding-inline: 0; background: none; }
	.about-cover::before { display: none; }
	.about-cover__photo { position: static; display: block; aspect-ratio: 4 / 5; object-position: 62% 50%; }
	.about-cover__inner { padding: clamp(36px, 8vw, 56px) var(--gutter) 0; }
	.about-cover__text { max-width: 560px; color: var(--ink); text-shadow: none; }
	.about-cover__hello { color: var(--ink-2); }
	.about-cover__lede { color: var(--ink); }
}
/* About 2: the story as one wide paragraph. */
.about-story__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(40px, 5vw, 72px); max-width: 1000px; text-align: center; }
.about-story__text { font-size: 17px; line-height: 1.7; color: var(--ink-3); }
@media (max-width: 759px) { .about-story__text { text-align: left; } }
/* About 3: the everyday photos drifting by, the closing line under them. */
.about-band { padding-block: clamp(56px, 6vw, 88px); }
.collage--life { --l-h: clamp(300px, 34vw, 640px); --l-g: calc(var(--l-h) * 0.06); padding-top: 0; }
.collage--life .collage__set { gap: var(--l-g); padding-right: var(--l-g); }
.life-unit { flex: none; display: flex; gap: var(--l-g); height: var(--l-h); }
.life-unit__pair { display: flex; flex-direction: column; gap: var(--l-g); }
.life-ph { flex: none; overflow: hidden; background: var(--ph); }
.life-ph--p { width: calc(var(--l-h) * 0.667); height: 100%; }
.life-ph--l { width: calc(var(--l-h) * 0.707); height: calc((var(--l-h) - var(--l-g)) / 2); }
.life-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.about-band__quote { max-width: 15em; margin: clamp(24px, 3vw, 48px) auto 0; font-family: var(--serif); font-size: clamp(42px, 5vw, 76px); line-height: 1; letter-spacing: -0.01em; text-align: center; text-wrap: balance; }
.about-band__quote em { font-style: italic; letter-spacing: 0; }
/* About 4: our approach beside a photo with the button on it. */
.about-approach__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 136px); align-items: center; max-width: 1180px; }
.about-approach__text { display: flex; flex-direction: column; gap: clamp(32px, 5vw, 96px); }
.about-approach__text .h2 { text-align: center; }
.about-approach__text p { font-size: 17px; line-height: 1.7; color: var(--ink-3); }
.about-approach__photo { position: relative; aspect-ratio: 2 / 3; overflow: hidden; background: var(--ph); }
.about-approach__photo img { width: 100%; height: 100%; object-fit: cover; }
.about-approach__btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; }
@media (max-width: 899px) {
	.about-approach__grid { grid-template-columns: 1fr; }
	.about-approach__photo { width: 100%; max-width: 480px; justify-self: center; }
}
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 72px 32px; margin-top: 80px; }

/* ---------- Quote ---------- */
.section--quote { padding-top: clamp(64px, 8vw, 120px); }
/* Top space matches the gaps between the other home sections ("View all photos" to "Videos"); the heading has an extra 50px below it before the quotes. */
.section--quotes { padding-block: calc(clamp(56px, 6vw, 88px) + 13px) clamp(56px, 6vw, 88px); }
.quotes__title { margin: 0 0 calc(clamp(32px, 3.6vw, 48px) + 50px); text-align: center; }
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: clamp(36px, 4vw, 56px) clamp(32px, 6vw, 96px); max-width: 1000px; margin-inline: auto; }
.quote-card { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.quote-card blockquote { margin: 0; font-size: 15px; line-height: 1.75; color: var(--ink-3); }
.quote-card figcaption { font-family: var(--serif); font-size: 19px; line-height: 1.1; color: var(--ink); text-align: center; }
.quote { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; align-items: center; text-align: center; }
.quote blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.22; text-wrap: balance; }
.quote figcaption { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

/* ---------- Pricing ---------- */
.pricing { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 56px 80px; }
.pricing__intro { flex: 1 1 360px; max-width: 480px; display: flex; flex-direction: column; gap: 20px; }
/* Pricing on a wide photo: the couple in the middle, the words either side.
   Phones and tablets: the words stack over the photo (see below). */
.section--pricing-photo { padding-top: 0; }
.pricing__photo { display: block; width: calc(100% + 2 * var(--gutter)); max-width: none; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 49.5% 70%; margin: 0 calc(-1 * var(--gutter)) clamp(40px, 8vw, 64px); }
@media (min-width: 1000px) {
	.section--pricing-photo { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; aspect-ratio: 2 / 1; padding-block: clamp(48px, 5vw, 80px); background: #1d1a17; color: #fff; }
	.section--pricing-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, rgba(18, 16, 14, 0.74) 0%, rgba(18, 16, 14, 0.5) 24%, rgba(18, 16, 14, 0.06) 38%, rgba(18, 16, 14, 0.06) 62%, rgba(18, 16, 14, 0.5) 76%, rgba(18, 16, 14, 0.74) 100%); }
	.pricing__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; aspect-ratio: auto; margin: 0; object-position: 49.5% 74%; transform: scale(1.06); transform-origin: 100% 50%; }
	.section--pricing-photo > .wrap { flex: 1; }
	.section--pricing-photo .pricing { display: grid; grid-template-columns: minmax(0, 0.92fr) 28vw minmax(0, 1.08fr); align-items: center; gap: 0; }
	.section--pricing-photo .pricing__intro { grid-column: 1; max-width: 420px; }
	.section--pricing-photo .pricing__list { grid-column: 3; width: 100%; max-width: 440px; justify-self: end; }
	.section--pricing-photo .pricing__intro p:not(.label) { color: rgba(255, 255, 255, 0.9); }
	.section--pricing-photo .price-row, .section--pricing-photo .price-row:first-child { padding: 14px 0; border-color: rgba(255, 255, 255, 0.32); }
	.section--pricing-photo .btn--solid { background: #fff; border-color: #fff; color: var(--ink); }
	.section--pricing-photo .btn--solid:hover { background: var(--paper-2); border-color: var(--paper-2); }
}
/* Narrow laptops: a slightly smaller gap around the couple so each price stays on one line. */
@media (min-width: 1000px) and (max-width: 1199px) { .section--pricing-photo .pricing { grid-template-columns: minmax(0, 0.92fr) 24vw minmax(0, 1.08fr); } }
@media (min-width: 1000px) and (max-width: 1099px) { .section--pricing-photo .price-row__name { font-size: 27px; } }
.pricing__intro p:not(.label) { color: var(--ink-3); }
.pricing__list { flex: 1 1 480px; display: flex; flex-direction: column; }
.price-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; padding: 24px 0; border-bottom: 1px solid var(--line-2); }
.price-row:first-child { border-top: 1px solid var(--line-2); }
.price-row__name { font-family: var(--serif); font-size: 30px; line-height: 1.1; }
.price-row__note { white-space: nowrap; }
.pricing__list > .btn { margin-top: 28px; }
.price-list--compact .price-row { padding: 16px 0; border-color: #CFCBC2; }
.price-list--compact .price-row:first-child { border-top: 0; }
.price-list--compact .price-row__name { font-size: 24px; }
/* Phones and tablets: the prices sit on the photo too, darkened evenly so every line reads. */
@media (max-width: 999px) {
	body.home #pricing.section--pricing-photo { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(72px, 16vw, 112px); background: #1d1a17; color: #fff; }
	.section--pricing-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(18, 16, 14, 0.58); }
	.pricing__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; aspect-ratio: auto; margin: 0; object-position: 45% 70%; }
	.section--pricing-photo .pricing__intro p:not(.label) { color: rgba(255, 255, 255, 0.9); }
	.section--pricing-photo .price-row, .section--pricing-photo .price-row:first-child { border-color: rgba(255, 255, 255, 0.32); }
	.section--pricing-photo .btn--solid { background: #fff; border-color: #fff; color: var(--ink); }
}
/* Phones: smaller price lines, so "Combined (10% Discount)" and its price share one line. */
@media (max-width: 759px) {
	.price-row { padding: 18px 0; }
	.price-row__name { font-size: 22px; }
}

/* ---------- Instagram ---------- */
.insta-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 24px; margin-bottom: 28px; }
.insta-head a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--serif); font-size: 28px; text-decoration: none; }
#sb_instagram .sb_instagram_header, #sb_instagram #sbi_load { display: none !important; }
#sb_instagram { padding: 0 !important; }
/* Instagram tiles: the shape Instagram's own grid uses (4:5), no play or carousel icons.
   The latest 4 posts: 4 across, 2 by 2 on phones. Overrides the plugin's own grid. */
#sb_instagram #sbi_images { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px !important; padding: 0 !important; }
@media (max-width: 759px) { #sb_instagram #sbi_images { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } }
#sb_instagram #sbi_images .sbi_item:nth-child(n+5) { display: none !important; }
/* "Follow on Instagram" top left (in the small label style the other sections open with), the handle top right */
.insta-head a.insta-head__follow { font-family: var(--sans); font-size: 15px; color: var(--ink); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 6px; transition: color .2s ease, text-decoration-color .2s ease; }
.insta-head a.insta-head__follow:hover { color: var(--ink); text-decoration-color: currentColor; }
@media (max-width: 759px) {
	.insta-head { flex-wrap: nowrap; gap: 12px; }
	.insta-head a { font-size: 20px; white-space: nowrap; }
	.insta-head a.insta-head__follow { font-size: 13px; letter-spacing: 0.1em; color: var(--ink); }
}
/* Very narrow phones: the handle drops under the link rather than running off the edge */
@media (max-width: 359px) { .insta-head { flex-wrap: wrap; } }
#sb_instagram #sbi_images .sbi_item { width: auto !important; }
#sb_instagram #sbi_images .sbi_photo { height: auto !important; aspect-ratio: 4 / 5; background-size: cover !important; background-position: center !important; transition: opacity .3s ease; }
#sb_instagram #sbi_images .sbi_photo:hover { opacity: .85; }
#sb_instagram #sbi_images .sbi_photo img { width: 100%; height: 100%; object-fit: cover; }
#sb_instagram #sbi_images .sbi_item .sbi_photo svg { display: none !important; }

/* ---------- CTA band ---------- */
.cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; }
.cta__text { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.cta__text p { font-size: 17px; line-height: 1.7; color: var(--ink-3); }
.is-dark .cta__text p { color: var(--on-night-muted); }
.is-dark .cta-band { border-top: 1px solid var(--night-line); }

/* ---------- Page heads ---------- */
.page-head { padding: clamp(80px, 9vw, 120px) var(--gutter) clamp(64px, 7vw, 96px); }
/* Video page trial: the hero film behind the heading, text in white along the bottom. */
.page-head--video { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; aspect-ratio: 2.39 / 1; min-height: 300px; max-height: calc(100svh - 96px); padding-block: clamp(24px, 3vw, 48px) clamp(32px, 4vw, 56px); background: var(--night-3); color: #fff; }
@media (max-width: 759px) { .page-head--video { aspect-ratio: auto; max-height: none; } }
.page-head--video > .wrap { width: 100%; }
.page-head--video .hero__media { z-index: -2; }
.page-head--video::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(10, 9, 8, 0.62), rgba(10, 9, 8, 0.18) 62%, rgba(10, 9, 8, 0.26)); pointer-events: none; }
.page-head--video .label { color: rgba(255, 255, 255, 0.86); }
.page-head--video .lede { color: rgba(255, 255, 255, 0.92); }
.page-head--video .hero__toggle { top: clamp(12px, 1.6vw, 24px); bottom: auto; }
/* Photo, Video, About and Contact share one opening banner: the same 2.39:1 frame, shade, type, sizes and position.
   Label, headline, then the intro underneath, stacked on the left at the bottom. The frame only grows taller than 2.39:1 if the words need more room. */
.page-head--video { overflow: visible; }
.page-head--video .page-head__inner { flex-direction: column; align-items: flex-start; gap: 24px; }
.page-head.page-head--video .page-head__title { max-width: 700px; }
.page-head--video .lede { max-width: 640px; }
/* Contact's paragraph is longer, so it runs wider (three lines instead of four). */
.page-head--inquire .lede { max-width: 820px; }
/* Photo's and Video's paragraphs are shorter, so they run narrower (three lines instead of two). Together these make every page's paragraph three lines. */
.gh-photography .page-head--video .lede, .gh-films .page-head--video .lede { max-width: 460px; }
/* About, Video and Contact put the italic part of the headline on its own line, so every headline is two lines (Photo's breaks there by itself). */
.page-head--about .display em::before, .page-head--inquire .display em::before, .gh-films .page-head--video .display em::before { content: "\A"; white-space: pre; }
.page-head__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px 64px; }
.page-head__title { display: flex; flex-direction: column; gap: 20px; max-width: 700px; }
.page-body { padding: 0 var(--gutter) var(--section); }
.wrap--films .page-head__title { max-width: 620px; }

/* ---------- Films page (dark) ---------- */
body.is-dark { background: var(--night-2); color: var(--on-night); }
body.is-dark a:hover { color: var(--on-night-muted); }

/* ---------- About ---------- */
.about-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 56px 96px; }
.about-hero__portrait { flex: 1 1 380px; max-width: 580px; aspect-ratio: 4 / 5; background: #CFCAC0; overflow: hidden; }
.about-hero__portrait img { width: 100%; height: 100%; object-fit: cover; }
.about-hero__body { flex: 1 1 420px; max-width: 560px; display: flex; flex-direction: column; gap: 28px; }
.about-hero__body .entry > p:first-child { font-family: var(--serif); font-size: 28px; line-height: 1.3; color: var(--ink); }
.about-hero__body .entry { display: flex; flex-direction: column; gap: 20px; color: var(--ink-2); line-height: 1.7; }
.about-hero__body .entry > * + *, .inquire__aside .entry > * + * { margin-top: 0; }
.principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 48px 40px; margin-top: 56px; }
.principle { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; border-top: 1px solid var(--ink); }
.principle h3 { font-family: var(--serif); font-size: 30px; line-height: 1.1; }
.principle p { font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.approach { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px 96px; }
.approach .h2 { flex: 1 1 280px; max-width: 420px; }
.approach__text { flex: 1 1 520px; max-width: 760px; font-family: var(--serif); font-size: clamp(22px, 2vw, 28px); line-height: 1.45; color: var(--ink-2); }
.places { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 24px 64px; }
.places__list { flex: 1 1 560px; max-width: 900px; font-family: var(--serif); font-size: clamp(28px, 2.8vw, 40px); line-height: 1.3; }

/* ---------- Inquire ---------- */
.inquire { display: flex; flex-direction: column; gap: clamp(56px, 6vw, 88px); }
.inquire__intro { display: flex; flex-direction: column; gap: 24px; max-width: 760px; }
/* "hear from you!" always starts its own line, as in the design. */
.inquire__intro .display em::before { content: "\A"; white-space: pre; }
.inquire__text { max-width: 640px; font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.inquire__intro .entry { display: flex; flex-direction: column; gap: 16px; color: var(--ink-2); line-height: 1.7; }
.inquire__main { max-width: 760px; }
.inquire__main--sn { max-width: 600px; }
.sn-form { display: block; width: 100%; min-width: 100%; border: 0; }
.form { display: flex; flex-direction: column; gap: 36px; }
.form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 36px 32px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-2); }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 17px; color: var(--ink); background: transparent; border-radius: 0; }
.field input, .field select { min-height: 48px; padding: 0; border: 0; border-bottom: 1px solid var(--field); }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23161513' stroke-width='1.2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; padding-right: 24px; }
.field textarea { padding: 14px; border: 1px solid var(--field); line-height: 1.6; resize: vertical; min-height: 160px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 1px 0 0 var(--ink); }
.field textarea:focus { box-shadow: inset 0 0 0 1px var(--ink); }
.choices { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.choices legend { padding: 0 0 8px; font-size: 14px; color: var(--ink-2); }
.choices--box { padding: 24px; border: 1px solid #CFCBC2; }
.choices--box legend { padding: 0 8px; }
.choices__row { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.choice { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.form__fine { font-size: 13px; color: var(--muted); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.notice { padding: 20px 24px; border: 1px solid var(--line-2); background: #fff; font-size: 16px; line-height: 1.6; }
.notice--error { border-color: #9B3B2E; color: #7A2C22; }
.notice--success { display: flex; flex-direction: column; gap: 12px; padding: 40px; }
.notice--success h2 { font-family: var(--serif); font-size: 40px; line-height: 1.05; }

/* ---------- FAQ ---------- */
.faq-layout { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 48px 96px; }
.faq-layout > .h2 { flex: 1 1 300px; max-width: 420px; }
.faq { flex: 1 1 560px; max-width: 760px; margin: 0; display: flex; flex-direction: column; }
.faq__item { display: flex; flex-direction: column; gap: 8px; padding: 28px 0; border-top: 1px solid #CFCBC2; }
.faq__item:last-child { border-bottom: 1px solid #CFCBC2; }
.faq__q { font-family: var(--serif); font-size: 26px; line-height: 1.2; }
.faq__a { margin: 0; font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.faq__a p + p { margin-top: 12px; }
.faq-more { margin-top: 24px; }
.wp-block-details { padding: 24px 0; border-top: 1px solid #CFCBC2; }
.wp-block-details:last-of-type { border-bottom: 1px solid #CFCBC2; }
.wp-block-details summary { font-family: var(--serif); font-size: 26px; line-height: 1.25; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 24px; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; font-family: var(--sans); font-size: 22px; line-height: 1.4; color: var(--muted); }
.wp-block-details[open] summary::after { content: "–"; }
.wp-block-details > *:not(summary) { margin-top: 12px; color: var(--ink-2); line-height: 1.7; }
.entry > .wp-block-details + .wp-block-details { margin-top: 0; }
.entry > h2 + .wp-block-details { margin-top: 24px; }

/* ---------- Single story / generic content ---------- */
.entry-head { padding: clamp(80px, 9vw, 120px) var(--gutter) clamp(48px, 6vw, 72px); text-align: center; }
.entry-head .wrap { display: flex; flex-direction: column; gap: 20px; align-items: center; }
.entry { font-size: 17px; line-height: 1.7; }
.entry > * + * { margin-top: 1.25em; }
.entry h2, .entry h3 { font-family: var(--serif); line-height: 1.15; }
.entry h1, .entry h2 { font-size: 40px; margin-top: 1.6em; }
.entry h1 { font-family: var(--serif); font-weight: 400; line-height: 1.15; }
.entry h3 { font-size: 30px; margin-top: 1.4em; }
.entry a { text-underline-offset: 4px; }
.entry--story { max-width: 1120px; margin-inline: auto; padding: 0 var(--gutter) var(--section); box-sizing: content-box; }
.entry--story > p, .entry--story > h2, .entry--story > h3, .entry--story > ul, .entry--story > ol, .entry--story > blockquote { max-width: 680px; margin-inline: auto; }
.entry--story img { width: 100%; }
.entry--story figure { margin-inline: 0; margin-bottom: 0; }
.entry--story > * + * { margin-top: 24px; }
.entry--story > p + *, .entry--story > * + p, .entry--story > * + h2, .entry--story > * + h3 { margin-top: 48px; }
.entry--story .wp-block-gallery { gap: 24px !important; }
.entry--story .wp-block-gallery.has-nested-images figure.wp-block-image { margin: 0 !important; }
.entry--story .wp-block-embed, .entry--story iframe { width: 100%; }
.entry--page { max-width: 760px; margin-inline: auto; padding: 0 var(--gutter) var(--section); box-sizing: content-box; }
.entry figcaption, .entry .wp-element-caption { font-size: 13px; color: var(--muted); margin-top: 8px; }
.more-stories .gallery-grid { margin-top: 0; }
.story-films { display: flex; flex-direction: column; gap: 48px; padding-bottom: clamp(48px, 6vw, 72px) !important; }
.story-gallery { display: flex; flex-direction: column; gap: 24px; }
.story-gallery__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.story-gallery__row--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.story-gallery__row--single-portrait { max-width: 66%; margin-inline: auto; width: 100%; }
.story-gallery img { width: 100%; height: 100%; object-fit: cover; background: var(--ph); }
@media (max-width: 600px) {
	.story-gallery, .story-gallery__row { gap: 8px; }
	.story-gallery__row--single-portrait { max-width: none; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--sand); color: var(--ink); padding: var(--section) var(--gutter) clamp(32px, 4vw, 56px); }
.site-footer--plain { background: none; color: var(--ink); padding-top: 0; }
.is-dark .site-footer { background: #0B0A09; }
.site-footer .wrap { display: flex; flex-direction: column; gap: clamp(48px, 5vw, 72px); }
/* Every page ends the same way: the call to action sits at the top of the footer. */
.footer-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; }
.footer-cta__text { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.footer-cta__text p { font-size: 17px; line-height: 1.7; color: var(--muted); }
.site-footer .btn--light { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.site-footer .btn--light:hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--paper); }
/* Back to top: a quiet round arrow under everything. */
.to-top { align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--line-2); border-radius: 50%; color: var(--ink); transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.to-top svg { width: 20px; height: 20px; }
.to-top:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.site-footer--plain .to-top { border-color: var(--line-2); color: var(--ink); }
.site-footer--plain .to-top:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 48px; }
.footer-brand { display: flex; flex-direction: column; gap: 16px; max-width: 520px; }
.footer-brand__name { font-family: var(--serif); font-size: 28px; line-height: 1; }
.footer-brand p:not(.footer-brand__name) { font-size: 15px; color: var(--on-night-muted); }
.footer-links { display: flex; flex-wrap: wrap; gap: 32px 72px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.footer-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.footer-links a { display: inline-block; padding: 10px 0; text-decoration: none; color: var(--on-night); }
.footer-links a:hover { color: var(--on-night-muted); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 24px; border-top: 1px solid #3A3834; font-size: 13px; color: var(--on-night-muted); }
.is-dark .footer-base { border-color: var(--night-line); }

/* ---------- 404 ---------- */
.not-found { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; gap: 28px; }

/* ---------- Motion ---------- */
[data-reveal] { transition: opacity 1s cubic-bezier(.2,.65,.25,1), transform 1s cubic-bezier(.2,.65,.25,1); }
[data-reveal]:not(.is-in) { opacity: 0; transform: translate3d(0, 28px, 0); }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Spacing (tidy-up, Nov 2026) ----------
   One rhythm for the whole site, measured from words/photos to words/photos:
   - between two sections: about 160px on a laptop, 100px on a phone;
   - between a full-width photo or video and what follows it: about 120px / 72px;
   - before the footer: about 180px / 112px;
   - from a section heading to what it introduces: about 56px / 32px. */
:root { --gap-photo: clamp(72px, 8.4vw, 120px); --gap-half: clamp(48px, 5.6vw, 80px); --gap-head: clamp(32px, 3.9vw, 56px); }

/* After a full-width photo or video */
#intro, .about-story, .page-head + .page-body, .gh-films .page-head + .page-body { padding-top: var(--gap-photo); }
.gh-inquire .page-flow > .section:first-child { padding-top: var(--gap-photo) !important; }
.section--quotes { padding-bottom: var(--gap-photo); }

/* Between sections */
.section--quotes { padding-top: clamp(48px, 5vw, 72px); }
.about-story { padding-bottom: clamp(40px, 5vw, 72px); }
.about-approach { padding-top: clamp(40px, 5vw, 72px); }
.gh-inquire .page-flow > .section:first-child { padding-bottom: var(--gap-half); }
.gh-inquire .section--rule { padding-top: var(--gap-half); }

/* Before the footer */
.site-footer:not(.site-footer--plain) { padding-top: clamp(24px, 2.8vw, 40px); }

/* Heading to what it introduces */
.quotes__title { margin-bottom: var(--gap-head); }
.about-approach__text { gap: clamp(24px, 3.9vw, 56px); }
.faq-layout { row-gap: clamp(16px, 3vw, 48px); }

/* FAQ page: no photo at the top, so the questions follow the heading closely */
.gh-faq .page-head { padding-bottom: clamp(24px, 3vw, 40px); }
.gh-faq .page-head + .page-body { padding-top: clamp(32px, 4vw, 56px); }

/* Contact: the form sits in the middle rather than leaving the right half empty */
.gh-inquire .inquire__main--sn { width: 100%; margin-inline: auto; }
/* Contact: "Frequently Asked Questions" centred above the questions, in line with the centred form */
.gh-inquire .faq-layout { flex-direction: column; align-items: center; row-gap: clamp(48px, 6.4vw, 96px); }
.gh-inquire .section--rule { padding-top: clamp(16px, 2.8vw, 40px); }
.gh-inquire .faq-layout > .h2 { flex: none; max-width: none; text-align: center; }
.gh-inquire .faq-layout > div { flex: none !important; width: 100%; }