:root {
  color-scheme: dark;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --text-ui: 0.875rem; --text-statement: clamp(1.75rem, 3.33vw, 3rem); --text-row: clamp(2rem, 5vw, 4.5rem); --text-tester: clamp(3.5rem, 13.3vw, 12rem); --text-menu: min(4.5rem, 5.5vw);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 250ms; --dur-long: 500ms; --dur-fade: 1400ms; --dur-fade-o: 2000ms; --dur-img: 1100ms;
  --color-error: oklch(52% 0.19 27); --color-success: oklch(50% 0.12 150);
  --container: 1920px; --gutter: 4vw; --gap-columns: 1.2vw; --section-gap-s: 72px; --section-gap: 7.5vh; --section-gap-l: 25vh;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; --z-loader: 900;
  --color-paper: oklch(3% 0.002 90); --color-paper-2: oklch(10% 0.002 90); --color-paper-3: oklch(16% 0.002 90);
  --color-ink: oklch(99% 0.002 90); --color-ink-2: oklch(99% 0.002 90); --color-muted: oklch(64% 0.002 90); --color-faint: oklch(72% 0.002 90);
  --color-rule: oklch(30% 0.002 90); --color-rule-strong: oklch(80% 0.002 90);
  --color-scrim: oklch(3% 0.002 90 / 0.55); --color-scrim-0: oklch(3% 0.002 90 / 0);
  --color-accent: oklch(99% 0.002 90); --color-accent-ink: oklch(3% 0.002 90); --color-focus: oklch(99% 0.002 90);
  --font-display: "Bellefair", "Optima", "Candara", serif; --font-body: "Ysabeau Office", "Optima", "Segoe UI", sans-serif; --font-outlier: var(--font-body);
  --radius-card: 0; --radius-sm: 4px; --radius-pill: 999px; --rule-hair: 1px; --shadow-card: none;
  --tracking-display: 0; --display-weight: 400;
}
@media (max-width: 48rem) { :root { --gutter: 20px; --gap-columns: 12px; --section-gap-s: 48px; --section-gap-l: 18vh; } }

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.6; -webkit-font-smoothing: antialiased; }
::selection { background: var(--color-ink); color: var(--color-paper); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.05; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }

/* Hallmark · shape: scroll story matched to a user-supplied reference, section for section · genre: atmospheric · theme: custom · redesign: full · job: hire
 * paper: oklch(3% 0.002 90) · accent: none, white on black · display: Bellefair · body: Ysabeau Office · hero: Poster, full-bleed photograph with a one-line title fitted to the width · nav: year, name, menu; hides on scroll down · footer: the logo between two years, then the menu grid · signature: her works set as giant specimens fitted to the width, each with a small label row
 * idea: "her repertoire set like a specimen book" · vibe: "black stage, white type, her photographs" · axes: dark/roman-serif/neutral · posture: monochrome, every colour comes from her photographs · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V5 · weakest: S, a borrowed structure the user asked for; every section carries her own works, places and years */
/* Hallmark · user override · the user asked to match the reference exactly: its small centred caption above the statement and its mono-weight caps menu stay as the reference has them */

/* ---------- Shared ---------- */
.ui { font-family: var(--font-body); font-size: var(--text-ui); line-height: 1.4; }
.dim { color: var(--color-muted); }
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-4xl)); z-index: var(--z-toast); background: var(--color-ink); color: var(--color-paper); padding: var(--space-xs) var(--space-md); }
.skip:focus-visible { top: var(--space-md); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 37px; padding: 0 var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-sm); background: transparent; color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-ui); text-decoration: none; white-space: nowrap; cursor: pointer; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.btn:hover { border-color: var(--color-ink); }
.btn:active { background: var(--color-paper-3); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* ---------- Reveal motion (only with script, so the page is complete without it) ---------- */
.js [data-fade], .js [data-fade] [data-fade-delay] { opacity: 0; transform: translateY(5vh); transition: opacity var(--dur-fade-o) var(--ease-out), transform var(--dur-fade) var(--ease-out); }
.js [data-fade].is-visible, .js [data-fade] [data-fade-delay].is-visible { opacity: 1; transform: none; }
.js .img-fade { opacity: 0; transition: opacity var(--dur-img) var(--ease-out); }
.js .img-fade.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .js [data-fade], .js [data-fade] [data-fade-delay], .js .img-fade { opacity: 1; transform: none; transition: none; }
}

/* ---------- Nav ---------- */
.nav { position: fixed; top: 0; inset-inline: 0; z-index: var(--z-sticky-nav); height: 56px; padding-top: env(safe-area-inset-top, 0px); transform: translateY(0); transition: transform 400ms var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.nav.is-hidden { transform: translateY(-100%); }
.nav.is-solid { background: var(--color-paper); }
.nav-inner { position: relative; display: flex; align-items: center; justify-content: space-between; height: 100%; padding-inline: var(--gutter); font-family: var(--font-body); font-size: var(--text-ui); letter-spacing: 0.01em; color: var(--color-ink); }
.nav-logo { position: absolute; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; white-space: nowrap; }
.nav-logo:hover { text-decoration: underline; }
.nav-menu { min-height: 44px; padding: 0; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.nav-menu:hover { text-decoration: underline; }
.nav-menu:active { opacity: 0.7; }
.nav-menu:disabled { opacity: 0.4; cursor: not-allowed; }
.inner .nav { background: var(--color-paper); }

/* ---------- Menu (overlay and footer) ---------- */
.menu { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; flex-direction: column; background: var(--color-paper); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 280ms var(--ease-out), visibility 0s 280ms; }
.menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 280ms var(--ease-out), visibility 0s 0s; }
.menu .nav { position: static; transform: none; }
.menu-grid { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(clamp(160px, 28vw, 415px), 1fr); margin: 0 var(--gutter); padding: 0; list-style: none; container-type: inline-size; }
.menu-grid li { display: flex; container-type: inline-size; border-bottom: 1px solid var(--color-rule-strong); }
.menu-grid li:nth-child(-n+3) { border-bottom: 3px double var(--color-rule-strong); }
.menu-grid li:not(:nth-child(3n)) { border-right: 1px solid var(--color-rule-strong); }
.menu-grid li:nth-child(n+4) { border-bottom: 0; }
.menu-cell { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.5em; text-decoration: none; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.menu-item { font-family: var(--font-display); font-size: min(4.5rem, calc(100cqi / 9.6)); line-height: 1.1; text-transform: uppercase; text-align: center; color: var(--color-ink); }
.menu-cell--cta .menu-item { font-family: var(--font-body); font-weight: 500; }
.menu-grid:hover .menu-cell { opacity: 0.25; }
.menu-grid:hover .menu-cell:hover, .menu-cell:focus-visible { opacity: 1; }
.menu-cell:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -6px; }
.menu-cell[aria-current="page"] .menu-item { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.menu .menu-cell { opacity: 0; transform: translateY(0.35em); }
.menu.is-open .menu-cell { opacity: 1; transform: none; transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.menu.is-open li:nth-child(1) .menu-cell { transition-delay: 55ms; }
.menu.is-open li:nth-child(2) .menu-cell { transition-delay: 100ms; }
.menu.is-open li:nth-child(3) .menu-cell { transition-delay: 145ms; }
.menu.is-open li:nth-child(4) .menu-cell { transition-delay: 190ms; }
.menu.is-open li:nth-child(5) .menu-cell { transition-delay: 235ms; }
.menu.is-open li:nth-child(6) .menu-cell { transition-delay: 280ms; }
.menu.is-open .menu-grid:hover .menu-cell { opacity: 0.25; transition-delay: 0s; }
.menu.is-open .menu-grid:hover .menu-cell:hover { opacity: 1; }
.menu-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin: 0 var(--gutter); padding-block: 1.25rem; border-top: 1px solid var(--color-ink); font-family: var(--font-body); font-size: var(--text-ui); color: var(--color-muted); }
.menu-foot a { color: var(--color-muted); }
.menu-foot a:hover { color: var(--color-ink); }
.menu .menu-foot { opacity: 0; transform: translateY(0.4em); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
.menu.is-open .menu-foot { opacity: 1; transform: none; transition-delay: 330ms; }
.site-foot .menu-grid { min-height: auto; }

/* ---------- Hero ---------- */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: var(--color-paper); }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 45%; transform: scale(1.06); transition: transform 2400ms var(--ease-out); }
.hero.is-ready .hero-media img { transform: none; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: var(--color-scrim); }
.hero-content { position: absolute; inset: 0; display: grid; place-items: center; padding-inline: var(--gutter); }
.hero h1 { letter-spacing: -0.015em; max-width: none; font-size: clamp(2.5rem, 8.46vw, 9rem); line-height: 1; text-align: center; color: var(--color-ink); white-space: nowrap; }
.js .hero h1 { opacity: 0; transform: translateY(3vh); transition: opacity 1600ms var(--ease-out), transform 1400ms var(--ease-out); }
.js .hero.is-ready h1 { opacity: 1; transform: none; }
.hero h1 .caps { text-transform: uppercase; }
.hero-body { position: absolute; left: var(--gutter); bottom: calc(var(--gutter) * 0.9); font-family: var(--font-body); font-size: var(--text-ui); line-height: 1.4; }
.hero-body span { display: block; }
@media (prefers-reduced-motion: reduce) { .hero-media img { transform: none; } .js .hero h1 { opacity: 1; transform: none; } }

/* ---------- Statement ---------- */
.statement { padding: var(--section-gap-l) var(--gutter) var(--section-gap); text-align: center; }
.statement-body { max-width: 937px; margin-inline: auto; }
.statement .caption { font-family: var(--font-body); font-size: var(--text-ui); color: var(--color-muted); margin-bottom: var(--space-lg); }
.statement-body > p:not(.caption) { letter-spacing: -0.01em; font-family: var(--font-display); font-size: var(--text-statement); line-height: 1.2; color: var(--color-ink); }
.statement-body > p:not(.caption) + p { margin-top: 0.5em; }
.statement-body a { text-decoration-thickness: 1px; text-underline-offset: 0.12em; }
.statement-body a:hover { color: var(--color-muted); }

/* ---------- Film: full screen ---------- */
.film { position: relative; height: 100svh; min-height: 480px; background: var(--color-paper-2); overflow: hidden; }
.film-link { position: absolute; inset: 0; display: block; color: var(--color-ink); text-decoration: none; cursor: pointer; }
.film-link img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.72) contrast(1.1) saturate(1.05); transform: scale(1.02); transition: transform 1600ms var(--ease-out), opacity var(--dur-img) var(--ease-out); }
.film-link:hover img { transform: scale(1.05); }
.film-link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--color-scrim) 0%, var(--color-scrim-0) 45%); pointer-events: none; }
.film-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -6px; }
.film-play { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: clamp(88px, 9vw, 128px); aspect-ratio: 1; border: 1px solid var(--color-ink); border-radius: 50%; font-family: var(--font-body); font-size: var(--text-ui); transform: translate(-50%, -50%); transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.film-link:hover .film-play { background: var(--color-ink); color: var(--color-paper); }
.film-label { position: absolute; left: var(--gutter); bottom: calc(var(--gutter) * 0.9); z-index: 1; font-family: var(--font-body); font-size: var(--text-ui); line-height: 1.4; }
.film-label .dim { display: block; }
.film .video { position: absolute; inset: 0; width: 100% !important; height: 100%; aspect-ratio: auto; }
@media (prefers-reduced-motion: reduce) { .film-link img, .film-link:hover img { transform: none; } }

/* ---------- Showcase: fitted words ---------- */
.showcase { padding: var(--section-gap) var(--gutter); }
.showcase-block + .showcase-block { margin-top: var(--space-lg); }
.showcase-info { display: flex; gap: var(--space-md); padding-top: var(--space-xs); border-top: 1px solid var(--color-rule); font-family: var(--font-body); font-size: var(--text-ui); line-height: 1.5; color: var(--color-ink); }
.showcase-info .dim { color: var(--color-muted); }
.showcase-display { display: block; color: inherit; text-decoration: none; }
.showcase-display p { letter-spacing: -0.02em; font-family: var(--font-display); font-size: clamp(3rem, 21vw, 21rem); line-height: 1.05; text-align: center; white-space: nowrap; color: var(--color-ink); }
.showcase-display:hover p { opacity: 0.8; }
.showcase-display:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.showcase--background { background: var(--color-paper-2); }

/* ---------- Media blocks ---------- */
.media-block { position: relative; }
.media-block .frame { overflow: hidden; background: var(--color-paper-2); }
.media-block img { width: 100%; height: 100%; object-fit: cover; }
.media-label { font-family: var(--font-body); font-size: var(--text-ui); line-height: 1.4; }
.media-label span { display: block; }
.media-label .caption { color: var(--color-muted); }
.media-block--below .frame { aspect-ratio: 16 / 9; }
.media-block--below .media-label { padding: 12px var(--gutter) var(--gutter); }
.media-block--6col, .media-block--4col { padding-block: var(--section-gap-s); }
.media-block--6col .frame { width: 50%; margin-inline: auto; }
.media-block--4col .frame { width: 33.333%; margin-inline: auto; }
.media-block--tall .frame { aspect-ratio: 3 / 4; }
.media-block--wide .frame { aspect-ratio: 4 / 3; }
.media-block--center-left .media-label { position: absolute; top: 50%; left: var(--gutter); transform: translateY(-50%); max-width: 22%; }
.media-block--bottom-right .media-label { position: absolute; right: var(--gutter); bottom: var(--section-gap-s); text-align: right; max-width: 22%; }

/* ---------- Examples: workshop selector ---------- */
.examples { padding: var(--section-gap-s) var(--gutter) var(--section-gap); text-align: center; }
.examples-controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-xs) var(--space-xl); }
.examples-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); }
.examples-label { font-family: var(--font-body); font-size: var(--text-ui); color: var(--color-muted); margin-right: var(--space-xs); }
.examples-btn { min-height: 37px; padding: 0 var(--space-xs); border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-ui); opacity: 0.5; cursor: pointer; transition: opacity var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.examples-btn:hover:not([aria-pressed="true"]) { opacity: 0.75; }
.examples-btn[aria-pressed="true"] { opacity: 1; border-color: var(--color-rule); }
.examples-btn:active { opacity: 0.9; }
.examples-btn:disabled { opacity: 0.2; cursor: not-allowed; }
.examples-text { letter-spacing: -0.02em; margin-top: var(--space-2xl); font-family: var(--font-display); font-size: var(--text-tester); line-height: 1; color: var(--color-ink); white-space: nowrap; transition: opacity var(--dur-short) var(--ease-out); }
.examples-text.is-swapping { opacity: 0; }
.examples-meta { margin-top: var(--space-md); font-family: var(--font-body); font-size: var(--text-ui); color: var(--color-muted); min-height: 1.4em; }
.examples-actions { margin-top: var(--space-lg); display: flex; justify-content: center; gap: var(--space-xs); }

/* ---------- Font overview: cropped rows ---------- */
.overview { padding: var(--section-gap) var(--gutter); }
.overview-row { display: grid; grid-template-columns: 208px minmax(0, 1fr); align-items: start; border-top: 1px solid var(--color-rule); color: inherit; text-decoration: none; }
.overview-row:last-child { border-bottom: 1px solid var(--color-rule); }
.overview-label { padding-top: var(--space-xs); font-family: var(--font-body); font-size: var(--text-ui); color: var(--color-faint); }
.overview-sample { letter-spacing: -0.01em; font-family: var(--font-display); font-size: var(--text-row); line-height: 1.3; white-space: nowrap; overflow: hidden; color: var(--color-ink); transition: transform 900ms var(--ease-out); }
.overview-row:hover .overview-sample { transform: translateX(-2vw); }
.overview-row:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .overview-row:hover .overview-sample { transform: none; } }

/* ---------- Closing text ---------- */
.text { padding: var(--section-gap-s) var(--gutter); }
.text-inner { width: min(365px, 100%); margin-inline: auto; }
.slider { position: relative; }
.slider-stage { position: relative; aspect-ratio: 4 / 5; background: var(--color-paper-2); overflow: hidden; }
.slider-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 700ms var(--ease-out); }
.slider-stage img.is-active { opacity: 1; }
html:not(.js) .slider-stage img:first-child { opacity: 1; }
.slider-arrow { position: absolute; top: 50%; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; color: var(--color-muted); font-family: var(--font-body); font-size: var(--text-lg); cursor: pointer; transition: color var(--dur-micro) var(--ease-out); }
.slider-arrow:hover { color: var(--color-ink); }
.slider-arrow:active { opacity: 0.7; }
.slider-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.slider-arrow--prev { left: 0; transform: translate(calc(-100% - var(--space-lg)), -50%); }
.slider-arrow--next { right: 0; transform: translate(calc(100% + var(--space-lg)), -50%); }
html:not(.js) .slider-arrow { display: none; }
.text figcaption { margin-top: var(--space-sm); font-family: var(--font-body); font-size: var(--text-ui); color: var(--color-muted); }
.text p.body { margin-top: var(--space-md); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.6; color: var(--color-ink); }

/* ---------- Footer ---------- */
.site-foot { padding-top: var(--space-4xl); }

/* ---------- Inner pages ---------- */
.inner main { padding-top: 56px; }
.page-head { padding: 18vh var(--gutter) var(--space-lg); text-align: center; }
.page-head .caption { font-family: var(--font-body); font-size: var(--text-ui); color: var(--color-muted); }
.page-head h1 { letter-spacing: -0.02em; margin-top: var(--space-md); font-size: clamp(3rem, 13vw, 14rem); line-height: 1; white-space: nowrap; max-width: none; }
.page-head .lead { max-width: 937px; margin: var(--space-xl) auto 0; font-family: var(--font-display); font-size: var(--text-statement); line-height: 1.2; }
.section-tight { padding: var(--section-gap-s) var(--gutter); }
.section { padding: var(--section-gap) var(--gutter); }
.section-alt { background: var(--color-paper-2); }
.section-head { margin-bottom: var(--space-xl); }
.section-head h2 { font-size: var(--text-section); }
.meta { color: var(--color-muted); font-size: var(--text-ui); }
.video { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-paper-3); }
.video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-long) var(--ease-out); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-link { text-decoration: none; color: var(--color-ink); }
.video-link:hover img { transform: scale(1.04); }
.video-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.video-link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--color-scrim) 0%, var(--color-scrim-0) 45%); }
.play { position: absolute; left: var(--space-md); bottom: var(--space-sm); z-index: 1; font-family: var(--font-body); font-size: var(--text-ui); }
.work { padding: var(--section-gap) var(--gutter); border-top: 1px solid var(--color-rule); }
.work-head { display: flex; gap: var(--space-md); padding-top: var(--space-xs); font-size: var(--text-ui); }
.work-head h2 { font-family: var(--font-body); font-size: var(--text-ui); font-weight: 400; line-height: 1.5; }
.work-head p { color: var(--color-muted); line-height: 1.5; }
.work-title { letter-spacing: -0.02em; margin-block: var(--space-md) var(--space-xl); font-family: var(--font-display); font-size: clamp(3rem, 12vw, 13rem); line-height: 1; text-align: center; white-space: nowrap; }
.work-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl) var(--space-2xl); align-items: start; }
.work-body.flip > :first-child { order: 2; }
.work-body figure { margin: 0; }
.work-body figure img { width: 100%; }
.work-text p { font-size: var(--text-lead); line-height: 1.55; }
.work-text p + p { margin-top: var(--space-md); }
.facts { margin: var(--space-xl) 0 0; padding: var(--space-md) 0 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-xs) var(--space-lg); border-top: 1px solid var(--color-rule); font-size: var(--text-ui); }
.facts dt { color: var(--color-muted); }
.facts dd { margin: 0; }
.voice { margin: 0; }
.voice p { font-family: var(--font-display); font-size: var(--text-statement); line-height: 1.2; }
.voice footer { margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-ui); }
.ledger-group + .ledger-group { margin-top: var(--space-3xl); }
.ledger-group > h2 { margin-bottom: var(--space-sm); font-family: var(--font-body); font-size: var(--text-ui); font-weight: 400; color: var(--color-muted); }
.ledger { list-style: none; margin: 0; padding: 0; }
.entry { display: grid; grid-template-columns: 208px minmax(0, 6fr) minmax(0, 4fr); gap: var(--space-lg) var(--space-xl); padding-block: var(--space-lg) var(--space-2xl); border-top: 1px solid var(--color-rule); align-items: start; }
.entry .when { color: var(--color-faint); font-size: var(--text-ui); }
.entry h2, .entry h3 { font-size: clamp(2rem, 4vw, 4rem); line-height: 1.05; }
.entry .where { margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-ui); }
.entry .body { margin-top: var(--space-md); }
.entry .body p + p, .entry .body ul { margin-top: var(--space-sm); }
.entry .body ul { padding-left: var(--space-lg); }
.entry figure { margin: 0; }
.entry figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.entry figure.tall img { aspect-ratio: 4 / 5; }
.entry details { margin-top: var(--space-md); }
.entry summary { cursor: pointer; text-decoration: underline; text-underline-offset: 0.25em; width: fit-content; }
.entry summary:hover { color: var(--color-muted); }
.entry summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.text-link { text-decoration: underline; text-underline-offset: 0.25em; }
.text-link:hover { color: var(--color-muted); }
.about-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
.about-grid figure { margin: 0; position: sticky; top: calc(56px + var(--space-lg)); }
.about-grid figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.about-grid figcaption { margin-top: var(--space-xs); }
.about-text p { font-family: var(--font-display); font-size: clamp(1.375rem, 1.6vw + 0.6rem, 2rem); line-height: 1.3; }
.about-text p + p { margin-top: var(--space-lg); }
.partners { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--space-xl); list-style: none; margin: 0; padding: 0; }
.partners li { border-top: 1px solid var(--color-rule); }
.partners a { display: block; padding-block: var(--space-sm); text-decoration: none; }
.partners a:hover { color: var(--color-muted); }
.gallery { columns: 3 320px; column-gap: var(--space-lg); }
.gallery figure { break-inside: avoid; margin: 0 0 var(--space-lg); }
.gallery a { display: block; overflow: hidden; }
.gallery img { width: 100%; transition: transform var(--dur-long) var(--ease-out); }
.gallery a:hover img { transform: scale(1.04); }
.gallery figcaption { margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-ui); }
.lightbox { max-width: min(92vw, 1400px); max-height: 92dvh; padding: 0; border: 0; background: transparent; color: var(--color-ink); }
.lightbox::backdrop { background: var(--color-scrim); }
.lightbox img { max-width: 100%; max-height: 82dvh; width: auto; margin-inline: auto; }
.lightbox-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); margin-top: var(--space-sm); }
.lightbox .nav-menu { color: var(--color-ink); }
@media (prefers-reduced-motion: reduce) { .gallery a:hover img, .video-link:hover img { transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 48rem) {
  .nav-year { display: none; }
  .nav-logo { position: static; transform: none; }
  .menu-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(84px, 1fr); }
  .menu-grid li, .menu-grid li:nth-child(-n+3), .menu-grid li:nth-child(n+4) { border-bottom: 1px solid var(--color-rule-strong); border-right: 0; }
  .menu-grid li:not(:nth-child(3n)) { border-right: 0; }
  .menu-item { font-size: calc(100cqi / 9.6); }
  .hero h1 { white-space: normal; font-size: clamp(2.5rem, 11vw, 3.75rem); line-height: 1.05; }
  .hero h1 .caps { display: block; }
  .media-block--6col .frame { width: calc(100% - 2 * var(--gutter)); }
  .media-block--4col .frame { width: 70%; }
  .media-block--center-left .media-label, .media-block--bottom-right .media-label { position: static; transform: none; max-width: none; text-align: left; padding: 12px var(--gutter) 0; }
  .overview-row { grid-template-columns: minmax(0, 1fr); }
  .work-body, .about-grid { grid-template-columns: minmax(0, 1fr); }
  .work-body.flip > :first-child { order: 0; }
  .entry { grid-template-columns: minmax(0, 1fr); }
  .about-grid figure { position: static; }
  .partners { grid-template-columns: minmax(0, 1fr); }
  .slider-arrow--prev { transform: translate(0, -50%); }
  .slider-arrow--next { transform: translate(0, -50%); }
  .menu-foot { flex-wrap: wrap; }
}
.work, .section, .section-tight { padding-inline: 0; }
.work-head { padding-inline: 0; border-top: 0; }
.work > .container > .work-head { border-top: 1px solid var(--color-rule); }

/* ---------- Touch targets on phones ---------- */
@media (max-width: 48rem) {
  .btn, .examples-btn { min-height: 44px; }
  .examples-btn { padding-inline: var(--space-sm); }
  .menu-foot a { display: inline-flex; align-items: center; min-height: 44px; }
  .showcase-info { font-size: var(--text-xs); }
  .statement { padding-top: 14vh; }
}

/* ---------- Statements light up word by word on scroll ---------- */
.js [data-light] .w { color: var(--color-rule-strong); opacity: 0.22; transition: opacity 420ms var(--ease-out), color 420ms var(--ease-out); }
.js [data-light] .w.is-lit { color: inherit; opacity: 1; }
.js [data-light] a .w { text-decoration: inherit; }
@media (prefers-reduced-motion: reduce) { .js [data-light] .w { opacity: 1; color: inherit; transition: none; } }