/* Hallmark · shape: Letter (draw f0ff31), pushed cinematic on request · genre: editorial · theme: Loom (deal 1/3, seed norfolk-wedding-family-newborn-98de·ee687333·2026-11-12·r0), custom finish · job: hire · draw: f0ff31
 * hero: full-bleed cover, the four stories as its index · nav: split, logo centred, over the photograph · footer: Instagram strip, logo mast · imagery: photographs, the photographer's own · signature: the four stories as an index over a full-screen photograph that turns as you point at each · loom: ivory, accent Hollie's brand olive
 * axes: light/roman-serif/warm · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V5 · weakest: E, few words by design; the wedding day told hour by hour, full screen, carries the argument */
/* Hallmark · waive 83 · photographs lead most sections · a photographer's portfolio is the product; her own pictures carry most sections, type carries the prices and the words */
@import url("./tokens.css");
@import url("./base.css");

/* Her colour grade is the work: no treatment on her photographs. */
[data-slot] > img { filter: none; }

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

:root { --nav-h: 96px; --text-hero: clamp(3rem, 5.6vw + 0.5rem, 6.75rem); --text-big: clamp(2.5rem, 3.6vw + 0.75rem, 4.75rem); --text-statement: clamp(1.75rem, 1.6vw + 1rem, 2.75rem); }
@media (max-width: 60rem) { :root { --nav-h: 72px; } }

/* A little film grain over everything, never over the controls' hit areas */
body::after { content: ""; position: fixed; inset: 0; z-index: var(--z-toast); pointer-events: none; opacity: 0.07; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- Type ---------- */
body { font-size: 1.0625rem; line-height: 1.7; }
h1, h2 { line-height: 1.02; letter-spacing: -0.015em; }
h2 { font-size: var(--text-big); }
.lead { color: var(--color-muted); font-size: var(--text-lead); line-height: 1.55; }
.small, .label { font-size: var(--text-sm); color: var(--color-muted); }
.label { display: block; margin-bottom: var(--space-lg); }
.statement { font-family: var(--font-display); font-size: var(--text-statement); line-height: 1.25; letter-spacing: -0.01em; max-width: 26ch; text-wrap: pretty; }
.prose p + p { margin-top: var(--space-md); }
.prose p { max-width: 58ch; }
.sign { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1; }

/* ---------- Controls: one quiet button, one link ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 var(--space-xl); border: 1px solid currentColor; border-radius: 0; background: transparent; color: inherit; font: 500 var(--text-sm)/1 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-long) var(--ease-out), color var(--dur-long) var(--ease-out), border-color var(--dur-long) var(--ease-out); }
.btn:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.btn:active { opacity: 0.85; }
.btn:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; }
.on-dark .btn:hover, .cover .btn:hover, .finale .btn:hover, .ledge .btn:hover, .night .btn:hover { background: var(--color-night-ink); border-color: var(--color-night-ink); color: var(--color-night); }
.link { font-size: var(--text-sm); font-weight: 500; padding-bottom: var(--space-xs); border-bottom: 1px solid currentColor; text-decoration: none; transition: opacity var(--dur-short) var(--ease-out); }
.link:hover { opacity: 0.6; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xl); }

/* ---------- Nav: split, logo centred ---------- */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); height: var(--nav-h); color: var(--color-ink); background: var(--color-paper); transition: background-color var(--dur-long) var(--ease-out), color var(--dur-long) var(--ease-out), box-shadow var(--dur-long) var(--ease-out); }
.nav[data-over] { margin-bottom: calc(-1 * var(--nav-h)); background: transparent; color: var(--color-night-ink); }
.nav[data-over][data-solid], .nav[data-open] { background: var(--color-paper); color: var(--color-ink); }
.nav[data-solid] { box-shadow: 0 1px 0 var(--color-rule); }
.nav-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; height: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.brand { grid-column: 2; grid-row: 1; display: block; }
.brand img { height: 58px; width: auto; transition: filter var(--dur-long) var(--ease-out); }
.nav[data-over]:not([data-solid]):not([data-open]) .brand img { filter: invert(1) brightness(1.6); }
.nav-links { display: contents; }
.nav-links ul { display: flex; align-items: center; gap: var(--space-xl); margin: 0; padding: 0; list-style: none; grid-row: 1; }
.nav-links ul:first-child { grid-column: 1; }
.nav-links ul:last-child { grid-column: 3; justify-content: flex-end; }
.nav-links a { font-size: var(--text-sm); font-weight: 500; text-decoration: none; padding-block: var(--space-xs); border-bottom: 1px solid transparent; transition: border-color var(--dur-short) var(--ease-out); }
.nav-links a:hover, .nav-links a[aria-current="page"] { border-color: currentColor; }
.nav-links a:focus-visible, .brand:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.nav-toggle { display: none; grid-column: 3; justify-self: end; min-height: 44px; padding: 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: inherit; font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; }
.nav-toggle:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
@media (max-width: 60rem) {
  .brand { grid-column: 1; justify-self: start; }
  .brand img { height: 44px; }
  .nav-toggle { display: inline-flex; align-items: center; }
  .js .nav-links { display: none; }
  .js .nav[data-open] .nav-links { display: flex; }
  .nav-links { position: fixed; inset: var(--nav-h) 0 0 0; flex-direction: column; justify-content: center; gap: var(--space-lg); padding: var(--space-xl) var(--gutter); background: var(--color-paper); color: var(--color-ink); }
  .no-js .nav { height: auto; }
  .no-js .nav-links { position: static; display: flex; padding: var(--space-md) 0; }
  .nav-links ul { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
  .nav-links a { font-family: var(--font-display); font-weight: 400; font-size: var(--text-3xl); line-height: 1.2; }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--section-gap); }
.section--s { padding-block: var(--section-gap-s); }
.band { background: var(--color-paper-2); padding-block: var(--section-gap); }
.night { background: var(--color-night); color: var(--color-night-ink); }
.night .lead, .night .small, .night .label { color: var(--color-night-muted); }
.night :focus-visible { outline-color: var(--color-night-ink); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-3xl); }
.head > h1, .head > h2 { grid-column: 1 / 8; }
.head > .lead, .head > .aside { grid-column: 9 / 13; }
@media (max-width: 60rem) { .head { display: block; margin-bottom: var(--space-2xl); } .head > .lead, .head > .aside { margin-top: var(--space-md); } }

.photo { margin: 0; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
a.lb { display: block; overflow: hidden; }
a.lb img { transition: transform 1.2s var(--ease-out); }
a.lb:hover img { transform: scale(1.03); }
a.lb:focus-visible { outline: 1px solid var(--color-ink); outline-offset: 4px; }

/* ---------- Full-bleed covers (home, inner pages, close) ---------- */
.cover, .ledge, .finale { position: relative; display: flex; align-items: flex-end; overflow: hidden; color: var(--color-night-ink); background: var(--color-night); }
.cover { min-height: 100svh; }
.ledge { min-height: 88svh; }
.finale { min-height: 92svh; align-items: center; }
.cover-slides, .ledge > .photo, .finale > .photo { position: absolute; inset: 0; margin: 0; }
.cover-slides figure { position: absolute; inset: 0; margin: 0; }
.js .cover-slides figure { opacity: 0; transition: opacity 1.6s var(--ease-in-out); }
.js .cover-slides figure[data-active] { opacity: 1; }
.cover-slides img, .ledge > .photo img, .finale > .photo img { width: 100%; height: 100%; object-fit: cover; }
.cover::after, .ledge::after, .finale::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top, color-mix(in oklab, var(--color-scrim) 72%, transparent) 0%, color-mix(in oklab, var(--color-scrim) 30%, transparent) 38%, transparent 62%), linear-gradient(to bottom, color-mix(in oklab, var(--color-scrim) 68%, transparent) 0%, color-mix(in oklab, var(--color-scrim) 25%, transparent) 14%, transparent 28%); }
.finale::after { background: color-mix(in oklab, var(--color-scrim) 58%, transparent); }
.cover-body, .ledge-body, .finale-body { position: relative; z-index: 3; width: 100%; max-width: var(--container); margin-inline: auto; padding: var(--space-4xl) var(--gutter) var(--space-3xl); }
.cover-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; }
.cover h1 { grid-column: 1 / 10; font-size: var(--text-hero); max-width: 12ch; }
.cover .lead, .ledge .lead, .finale .lead { color: var(--color-night-ink); opacity: 0.86; margin-top: var(--space-lg); max-width: 36ch; }
.cover .actions, .ledge .actions, .finale .actions { margin-top: var(--space-xl); }
.cover-text { grid-column: 1 / 9; }
.cover .stories { grid-column: 10 / 13; justify-self: end; list-style: none; margin: 0; padding: 0; text-align: right; }
.cover .stories a { display: block; padding-block: var(--space-2xs); font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.3; text-decoration: none; opacity: 0.55; transition: opacity var(--dur-long) var(--ease-out); }
.cover .stories a[data-active], .cover .stories a:hover, .cover .stories a:focus-visible { opacity: 1; }
.cover .stories a:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.ledge h1 { font-size: var(--text-hero); max-width: 13ch; }
.finale-body { text-align: center; display: flex; flex-direction: column; align-items: center; }
.finale h2 { font-size: var(--text-hero); max-width: 12ch; }
.finale .lead { margin-inline: auto; }
.finale .actions { justify-content: center; }
@media (prefers-reduced-motion: no-preference) {
  .cover-slides figure[data-active] img { animation: drift 9s var(--ease-out) both; }
}
@keyframes drift { from { transform: scale(1.07); } to { transform: scale(1); } }
@media (max-width: 60rem) {
  .cover-body { display: block; padding-bottom: var(--space-2xl); }
  .cover .stories { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-xl); text-align: left; }
  .cover .stories a { font-size: var(--text-lg); }
}

/* ---------- Letter ---------- */
.letter { align-items: center; row-gap: var(--space-2xl); }
.letter .portrait { grid-column: 1 / 6; aspect-ratio: 4 / 5; }
.letter .body { grid-column: 7 / 12; }
.letter .body h2 { margin-bottom: var(--space-xl); }
.letter .sign { margin-top: var(--space-xl); }
.letter .actions { margin-top: var(--space-xl); }
@media (max-width: 60rem) { .letter .portrait, .letter .body { grid-column: 1 / -1; } }

/* ---------- The day, full screen ---------- */
.day-head { padding-block: var(--section-gap) var(--space-2xl); }
.day { display: grid; }
.day-frame { grid-area: 1 / 1; position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); align-self: start; overflow: hidden; }
.day-frame figure { position: absolute; inset: 0; margin: 0; }
.js .day-frame figure { opacity: 0; transition: opacity 1.2s var(--ease-in-out); }
.js .day-frame figure[data-active] { opacity: 1; }
.day-frame img { width: 100%; height: 100%; object-fit: cover; }
.day-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, color-mix(in oklab, var(--color-scrim) 78%, transparent) 0%, color-mix(in oklab, var(--color-scrim) 40%, transparent) 42%, transparent 70%); }
.day-steps { grid-area: 1 / 1; position: relative; z-index: 2; list-style: none; margin: 0; padding: 0; }
.day-steps li { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); opacity: 0.25; transition: opacity 800ms var(--ease-out); }
.day-steps li[data-active], .no-js .day-steps li { opacity: 1; }
.day-steps li > * { max-width: 30rem; }
.day-steps time { font-size: var(--text-sm); color: var(--color-night-muted); }
.day-steps h3 { margin-top: var(--space-md); font-size: var(--text-big); line-height: 1.02; max-width: 11ch; }
.day-steps p { margin-top: var(--space-lg); color: var(--color-night-ink); opacity: 0.86; }
.day-steps .inline-photo { display: none; }
@media (max-width: 60rem) {
  .day { display: block; }
  .day-frame { display: none; }
  .day-steps li { min-height: 0; opacity: 1; padding-block: var(--space-2xl); }
  .day-steps h3 { font-size: var(--text-3xl); }
  .day-steps .inline-photo { display: block; order: -1; max-width: none; margin: 0 0 var(--space-lg); aspect-ratio: 3 / 2; }
  .day-steps .inline-photo img { width: 100%; height: 100%; object-fit: cover; }
}

/* ---------- Kind words ---------- */
.words .who { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); margin-top: var(--space-2xl); }
.words .who button { min-height: 44px; padding: 0; border: 0; border-bottom: 1px solid transparent; background: transparent; color: inherit; font: 500 var(--text-sm)/1 var(--font-body); opacity: 0.55; cursor: pointer; transition: opacity var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.words .who button:hover { opacity: 1; }
.words .who button[aria-selected="true"] { opacity: 1; border-color: currentColor; }
.words .who button:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.words blockquote { margin: 0; }
.words blockquote p { font-family: var(--font-display); font-size: var(--text-statement); line-height: 1.25; max-width: 30ch; text-indent: -0.45em; }
.words blockquote footer { margin-top: var(--space-xl); font-size: var(--text-sm); opacity: 0.75; }
.words .quotes { grid-column: 1 / 10; }
.words .label { grid-column: 1 / -1; }
.words--cover { position: relative; min-height: 92svh; display: flex; align-items: center; color: var(--color-night-ink); background: var(--color-night); overflow: hidden; }
.words--cover > .photo { position: absolute; inset: 0; }
.words--cover > .photo::after { content: ""; position: absolute; inset: 0; z-index: 2; background: color-mix(in oklab, var(--color-scrim) 55%, transparent); }
.words--cover .container { position: relative; z-index: 3; padding-block: var(--section-gap); }
.words--cover .label { color: var(--color-night-ink); opacity: 0.75; }
.no-js .words .who { display: none; }
.no-js .words blockquote + blockquote { margin-top: var(--space-2xl); }
.no-js .words blockquote[hidden] { display: block !important; }
@media (prefers-reduced-motion: no-preference) { .js .words blockquote:not([hidden]) { animation: fade 900ms var(--ease-out); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 60rem) { .words .quotes { grid-column: 1 / -1; } }

/* ---------- Price list ---------- */
.invest { align-items: start; }
.invest > .intro { grid-column: 1 / 5; position: sticky; top: calc(var(--nav-h) + var(--space-xl)); }
.invest > .intro .lead { margin-top: var(--space-lg); }
.invest > .intro .actions { margin-top: var(--space-xl); }
.prices { grid-column: 6 / 13; list-style: none; margin: 0; padding: 0; }
.prices li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-xl); align-items: center; padding-block: var(--space-xl); border-top: 1px solid var(--color-rule); }
.prices li:last-child { border-bottom: 1px solid var(--color-rule); }
.prices h3 { font-size: var(--text-3xl); line-height: 1.05; }
.prices .price { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prices .price small { display: block; margin-top: var(--space-xs); font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-muted); }
.prices p { grid-column: 1 / -1; margin-top: var(--space-sm); color: var(--color-muted); max-width: 48ch; }
@media (max-width: 60rem) { .invest > .intro { position: static; grid-column: 1 / -1; margin-bottom: var(--space-2xl); } .prices { grid-column: 1 / -1; } }

/* ---------- Footer ---------- */
.foot { padding-block: var(--section-gap-s) var(--space-xl); text-align: center; }
.foot .mast img { height: 96px; width: auto; margin-inline: auto; }
.foot .mast p { margin: var(--space-md) auto 0; color: var(--color-muted); font-size: var(--text-sm); }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm) var(--space-xl); margin-top: var(--space-2xl); }
.foot nav a { font-size: var(--text-sm); font-weight: 500; text-decoration: none; padding-block: var(--space-2xs); border-bottom: 1px solid transparent; }
.foot nav a:hover { border-color: currentColor; }
.foot nav a:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.foot .legal { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); font-size: var(--text-xs); color: var(--color-muted); }
.foot .legal a { color: inherit; }

/* ---------- Weddings: collections as features ---------- */
.feature { align-items: center; row-gap: var(--space-2xl); padding-block: var(--space-3xl); }
.feature + .feature { border-top: 1px solid var(--color-rule); }
.feature > .photo { grid-column: 1 / 7; aspect-ratio: 4 / 5; }
.feature > .text { grid-column: 8 / 13; }
.feature:nth-child(even) > .photo { grid-column: 7 / 13; grid-row: 1; }
.feature:nth-child(even) > .text { grid-column: 1 / 6; grid-row: 1; }
.collection h3 { font-size: var(--text-hero); line-height: 1; }
.collection .price { margin-top: var(--space-lg); font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1; font-variant-numeric: tabular-nums; }
.collection .price small { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-muted); }
.collection .for { margin-top: var(--space-md); color: var(--color-muted); }
.collection ul { list-style: none; margin: var(--space-xl) 0 0; padding: 0; columns: 2; column-gap: var(--space-xl); }
.collection li { break-inside: avoid; padding-block: var(--space-sm); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); line-height: 1.5; }
.collection .actions { margin-top: var(--space-xl); }
.collection .fit { display: none; margin-bottom: var(--space-md); font-size: var(--text-sm); font-weight: 500; color: var(--color-accent); }
.collection[data-pick] .fit { display: block; }
.night .collection .fit, .ledge .collection .fit { color: var(--color-night-ink); }
.night .collection li { border-color: color-mix(in oklab, var(--color-night-ink) 22%, transparent); }
.night .collection .price small, .night .collection .for { color: var(--color-night-muted); }
@media (max-width: 60rem) { .feature > .photo, .feature > .text, .feature:nth-child(even) > .photo, .feature:nth-child(even) > .text { grid-column: 1 / -1; grid-row: auto; } }
@media (max-width: 40rem) { .collection ul { columns: 1; } }

/* Destination over its photograph */
.dest { position: relative; color: var(--color-night-ink); background: var(--color-night); overflow: hidden; }
.dest > .photo { position: absolute; inset: 0; }
.dest > .photo::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to right, color-mix(in oklab, var(--color-scrim) 80%, transparent) 0%, color-mix(in oklab, var(--color-scrim) 40%, transparent) 55%, transparent 85%); }
.dest .container { position: relative; z-index: 3; padding-block: var(--section-gap); }
.dest .collection { max-width: 34rem; }
.dest .collection h3 { font-size: var(--text-big); }
.dest .collection li { border-color: color-mix(in oklab, var(--color-night-ink) 25%, transparent); }
.dest .collection .price small, .dest .collection .for { color: var(--color-night-ink); opacity: 0.8; }
.dest .collection .fit { color: var(--color-night-ink); }

/* ---------- Finder ---------- */
.finder { align-items: start; row-gap: var(--space-2xl); }
.finder > .intro { grid-column: 1 / 5; }
.finder > .intro .lead { margin-top: var(--space-lg); }
.finder form { grid-column: 6 / 13; display: grid; gap: var(--space-2xl); }
.finder fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.finder legend, .enquire legend { padding: 0; margin-bottom: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.seg { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-muted); border-bottom: 1px solid transparent; cursor: pointer; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.seg label:hover { color: var(--color-ink); }
.seg input:checked + label { color: var(--color-ink); border-color: var(--color-ink); }
.seg input:focus-visible + label { outline: 1px solid var(--color-ink); outline-offset: 4px; }
.answer { padding-top: var(--space-xl); border-top: 1px solid var(--color-rule-ink); }
.answer .pick { font-family: var(--font-display); font-size: var(--text-big); line-height: 1; }
.answer .why { margin-top: var(--space-md); color: var(--color-ink-2); }
.answer .actions { margin-top: var(--space-xl); }
@media (max-width: 60rem) { .finder > .intro, .finder form { grid-column: 1 / -1; } }

/* ---------- Gallery wall ---------- */
.wall { columns: 3; column-gap: var(--space-xl); }
.wall a { display: block; margin-bottom: var(--space-xl); break-inside: avoid; overflow: hidden; }
.wall img { width: 100%; height: auto; transition: transform 1.2s var(--ease-out); }
.wall a:hover img { transform: scale(1.03); }
.wall a:focus-visible { outline: 1px solid var(--color-ink); outline-offset: 4px; }
.wall a[hidden] { display: none; }
@media (max-width: 60rem) { .wall { columns: 2; column-gap: var(--space-md); } .wall a { margin-bottom: var(--space-md); } }

.filters { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); margin-bottom: var(--space-3xl); }
.filters button { min-height: 44px; padding: 0; border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--color-muted); font: 400 var(--text-xl)/1.2 var(--font-display); cursor: pointer; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.filters button:hover { color: var(--color-ink); }
.filters button[aria-pressed="true"] { color: var(--color-ink); border-color: var(--color-ink); }
.filters button:focus-visible { outline: 1px solid var(--color-ink); outline-offset: 4px; }
.filters .count { margin-left: var(--space-2xs); font: 400 var(--text-xs)/1 var(--font-body); vertical-align: super; }

/* ---------- Pair ---------- */
.pair { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-2xl); align-items: end; }
.pair a:first-child { aspect-ratio: 3 / 2; }
.pair a:last-child { aspect-ratio: 4 / 5; margin-bottom: var(--space-4xl); }
.pair img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 40rem) { .pair { grid-template-columns: minmax(0, 1fr); } .pair a:last-child { margin: 0 0 0 30%; } }

/* ---------- FAQ ---------- */
.faq { row-gap: var(--space-2xl); }
.faq > h2 { grid-column: 1 / 5; }
.faq dl { grid-column: 6 / 13; margin: 0; }
.faq .q { padding-block: var(--space-xl); border-top: 1px solid var(--color-rule); }
.faq .q:last-child { border-bottom: 1px solid var(--color-rule); }
.faq dt { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.25; }
.faq dd { margin: var(--space-sm) 0 0; color: var(--color-ink-2); max-width: 56ch; }
@media (max-width: 60rem) { .faq > h2, .faq dl { grid-column: 1 / -1; } }

/* ---------- Sessions ---------- */
.tabs { display: flex; gap: var(--space-2xl); margin-bottom: var(--space-3xl); overflow-x: auto; scrollbar-width: none; }
.tabs button { min-height: 56px; padding: 0; border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--color-muted); font: 400 var(--text-3xl)/1.1 var(--font-display); cursor: pointer; white-space: nowrap; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.tabs button:hover { color: var(--color-ink); }
.tabs button[aria-selected="true"] { color: var(--color-ink); border-color: var(--color-ink); }
.tabs button:focus-visible { outline: 1px solid var(--color-ink); outline-offset: 4px; }
.no-js .tabs { display: none; }
.no-js [role="tabpanel"][hidden] { display: grid !important; margin-top: var(--section-gap-s); }
@media (max-width: 40rem) { .tabs { gap: var(--space-lg); } .tabs button { font-size: var(--text-xl); } }
.session { row-gap: var(--space-2xl); align-items: start; }
.session .text { grid-column: 1 / 6; position: sticky; top: calc(var(--nav-h) + var(--space-xl)); }
.session .text h2 { font-size: var(--text-big); }
.session .text > p { margin-top: var(--space-lg); color: var(--color-ink-2); }
.session .spec { margin: var(--space-2xl) 0; }
.session .spec div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-md); padding-block: var(--space-md); border-top: 1px solid var(--color-rule); }
.session .spec div:last-child { border-bottom: 1px solid var(--color-rule); }
.session .spec dt { font-size: var(--text-sm); color: var(--color-muted); }
.session .spec dd { margin: 0; }
.session .spec .price dd { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1; font-variant-numeric: tabular-nums; }
.session .frames { grid-column: 7 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); }
.session .frames a:first-child { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.session .frames a { aspect-ratio: 4 / 5; }
.session .frames a:last-child { margin-top: var(--space-3xl); }
.session .frames img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 60rem) { .session .text { position: static; } .session .text, .session .frames { grid-column: 1 / -1; } .session .frames { gap: var(--space-md); } }

/* ---------- About ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100svh - var(--nav-h)); }
.split > .photo { position: relative; min-height: 70svh; }
.split > .photo img { position: absolute; inset: 0; }
.split > .body { align-self: center; padding: var(--space-3xl) var(--gutter); max-width: 44rem; }
.split h1 { font-size: var(--text-hero); margin-bottom: var(--space-2xl); }
.split .sign { margin-top: var(--space-2xl); }
@media (max-width: 60rem) { .split { grid-template-columns: minmax(0, 1fr); } .split > .body { padding-inline: var(--gutter); } }
.ways { list-style: none; margin: 0; padding: 0; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.ways h3 { font-size: var(--text-2xl); line-height: 1.1; }
.ways p { margin-top: var(--space-md); color: var(--color-ink-2); }
@media (max-width: 60rem) { .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .ways { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Contact ---------- */
.enquire-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.enquire-wrap > .photo { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); }
.enquire { padding: var(--space-3xl) var(--gutter) var(--section-gap); max-width: 52rem; }
.enquire h1 { font-size: var(--text-big); }
.enquire .intro .lead { margin-top: var(--space-lg); }
.enquire .facts { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-2xl); margin: var(--space-2xl) 0 0; }
.enquire .facts dt { font-size: var(--text-sm); color: var(--color-muted); }
.enquire .facts dd { margin: var(--space-2xs) 0 0; }
.enquire form { margin-top: var(--space-3xl); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-xl); }
.field { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.field--full, .enquire fieldset, .enquire .submit { grid-column: 1 / -1; }
.field label { font-size: var(--text-sm); color: var(--color-muted); }
.field .hint { min-height: 1lh; font-size: var(--text-xs); color: var(--color-muted); }
.field input, .field select, .field textarea { min-height: 52px; padding: var(--space-sm) 0; border: 0; border-bottom: 1px solid var(--color-rule-ink); border-radius: 0; background: transparent; color: var(--color-ink); font-size: var(--text-lg); transition: border-color var(--dur-short) var(--ease-out); }
.field textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-accent); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-bottom: 2px solid var(--color-focus); }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--color-error); }
.enquire fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.enquire .submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); padding-top: var(--space-md); }
.status { font-size: var(--text-sm); color: var(--color-ink-2); }
.status[data-tone="error"] { color: var(--color-error); }
.fill { padding: 0 var(--space-2xs); outline: 1px dashed var(--color-muted); outline-offset: 2px; color: var(--color-muted); }
@media (max-width: 60rem) { .enquire-wrap { grid-template-columns: minmax(0, 1fr); } .enquire-wrap > .photo { position: relative; top: 0; height: 46svh; } }
@media (max-width: 40rem) { .enquire form { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Lightbox ---------- */
.lightbox { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--color-night); color: var(--color-night-ink); }
.lightbox::backdrop { background: var(--color-night); }
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.lb-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--gutter); font-size: var(--text-sm); color: var(--color-night-muted); }
.lb-stage { display: grid; place-items: center; padding: 0 var(--gutter); min-height: 0; touch-action: pan-y; }
.lb-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; animation: fade var(--dur-long) var(--ease-out); }
.lb-caption { padding: var(--space-md) var(--gutter) var(--space-lg); color: var(--color-night-muted); font-size: var(--text-sm); text-align: center; }
.lb-btn { min-width: 44px; min-height: 44px; padding: 0 var(--space-xs); border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--color-night-ink); font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: border-color var(--dur-short) var(--ease-out); }
.lb-btn:hover { border-color: currentColor; }
.lb-btn:focus-visible { outline: 1px solid var(--color-night-ink); outline-offset: 2px; }
.lb-nav { display: flex; gap: var(--space-lg); }

/* ---------- One reveal: photographs settle in ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: calc(var(--i, 0) * 120ms); }
  .js .reveal[data-in] { opacity: 1; transform: none; }
}

/* ---------- Cover: the headline rises, a hairline counts the photograph ---------- */
.cover h1 .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.cover h1 .line > span { display: block; }
.cover-progress { grid-column: 1 / -1; height: 1px; margin-top: var(--space-2xl); overflow: hidden; background: color-mix(in oklab, var(--color-night-ink) 22%, transparent); }
.cover-progress span { display: block; height: 100%; background: var(--color-night-ink); transform-origin: left; transform: scaleX(0); }
@media (prefers-reduced-motion: no-preference) {
  .js .cover h1 .line > span { animation: rise 1.5s var(--ease-out) both; animation-delay: calc(0.25s + var(--n) * 0.16s); }
  .js .cover .lead, .js .cover .actions, .js .cover .stories, .js .cover-progress { animation: fade 1.4s var(--ease-out) 1s both; }
  .js .cover-progress span[data-run] { animation: progress 6.5s linear both; }
}
@media (prefers-reduced-motion: reduce) { .cover-progress { display: none; } }
@keyframes rise { from { transform: translateY(108%); } to { transform: none; } }
@keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 60rem) { .cover-progress { margin-top: var(--space-xl); } }

/* ---------- Statement: lights up word by word as you scroll ---------- */
.statement-sec { padding-block: var(--section-gap-l); }
.reveal-words { font-family: var(--font-display); font-size: clamp(2rem, 3.4vw + 0.75rem, 4.5rem); line-height: 1.12; letter-spacing: -0.015em; max-width: 22ch; margin-inline: auto; text-align: center; text-wrap: balance; }
@media (prefers-reduced-motion: no-preference) { .js .reveal-words .w { opacity: 0.14; transition: opacity 300ms var(--ease-out); } }

/* ---------- Sideways gallery, pinned while you scroll ---------- */
.hscroll { padding-block: var(--section-gap-s); }
.hscroll-track { --edge: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); display: flex; align-items: flex-start; gap: var(--space-2xl); padding-inline: var(--edge); scroll-padding-inline: var(--edge); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hscroll-track > * { flex: 0 0 auto; scroll-snap-align: start; }
.hscroll-intro { width: min(24rem, 78vw); align-self: center; }
.hscroll-intro .lead { margin-top: var(--space-lg); }
.hscroll-intro .actions { margin-top: var(--space-xl); }
.hscroll figure { margin: 0; }
.hscroll figure:nth-of-type(even) { margin-top: var(--space-3xl); }
.hscroll figure img { height: min(60svh, 620px); width: auto; max-width: none; }
.hscroll-end { width: 1px; }
.js .hscroll[data-pinned] { padding: 0; }
.js .hscroll[data-pinned] .hscroll-pin { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); overflow: hidden; display: flex; align-items: center; }
.js .hscroll[data-pinned] .hscroll-track { overflow: visible; scroll-snap-type: none; will-change: transform; }
@media (max-width: 60rem) { .hscroll-track { gap: var(--space-lg); } .hscroll figure:nth-of-type(even) { margin-top: 0; } .hscroll figure img { height: 52svh; } }

/* ---------- Photographs unveil as they arrive ---------- */
.curtain { position: relative; overflow: hidden; }
.night, .dest, .words--cover { --curtain: var(--color-night); }
@media (prefers-reduced-motion: no-preference) {
  .js .curtain::after { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--curtain, var(--color-paper)); transform-origin: top; transition: transform 1.4s var(--ease-in-out); pointer-events: none; }
  .js .curtain[data-in]::after { transform: scaleY(0); }
  .js .curtain img { transform: scale(1.14); transition: transform 2s var(--ease-out); }
  .js .curtain[data-in] img { transform: none; }
}

/* ---------- Depth on full-screen photographs ---------- */
[data-parallax] > .photo { overflow: hidden; }
[data-parallax] > .photo > img { inset: -9% 0 auto 0; height: 118%; will-change: transform; }