/* The Oracle website, version 2. Direction: colour chapters (taste-skill v2.1.2, seed 1044673026), in the deck's own
   colours and type (DESIGN.md). Each section is a full-bleed field; photographs and footage carry the colour.
   Rules: no thin decorative lines, no gradients except a flat scrim, square corners, transform and opacity only for
   motion, every hidden state inside prefers-reduced-motion: no-preference and behind html.js. */

/* Self-hosted fonts (SIL Open Font License, see assets/fonts). No calls to Google from visitors' browsers. */
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin.woff") format("woff"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin.woff") format("woff"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* Colour (DESIGN.md). Fields: ink, raised, deep, sage, paper. Text on each field is ink or paper, never grey. */
  --ink: #1B221B;
  --ink-raised: #232B23;
  --ink-deep: #121812;
  --paper: #FFFFFF;
  --sage: #D1D9C7;
  --sage-muted: #A3ACA0;     /* secondary text on ink, 6.9:1 */
  --paper-muted: #4A5448;    /* secondary text on paper and sage, 7.9:1 */
  --field-edge: #7A8478;     /* form field borders, 4.2:1 on ink */
  --scrim: rgba(10, 14, 10, 0.58);
  --focus: var(--sage);

  /* Type: the brand's two faces, five sizes */
  --font-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --fs-mega: clamp(3.4rem, 8.6vw, 8.5rem);
  --fs-1: clamp(2.5rem, 4.6vw, 4.4rem);
  --fs-2: clamp(1.375rem, 2.1vw, 2rem);
  --fs-body: 1.125rem;
  --fs-small: 0.9375rem;

  /* Space: one pair of tight margins, one grid */
  --margin: clamp(16px, 2.2vw, 32px);
  --gutter-l: max(var(--margin), env(safe-area-inset-left, 0px));
  --gutter-r: max(var(--margin), env(safe-area-inset-right, 0px));
  --gap: clamp(1rem, 1.6vw, 1.5rem);
  --section: clamp(4.5rem, 11vw, 12rem);
  --measure: 60ch;
  --wrap: 1760px;
  --header: 64px;

  /* Motion (taste-skill references/motion.md) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --stagger: 80ms;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
/* Anything marked hidden stays hidden, whatever display a component sets (work filters, form messages). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(env(safe-area-inset-top, 0px) + var(--header) + 24px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (pointer: fine) { html { overscroll-behavior: none; } }
a, button, summary, label, select { touch-action: manipulation; -webkit-tap-highlight-color: rgba(209, 217, 199, 0.25); }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--font-text); font-size: var(--fs-body); line-height: 1.6; text-rendering: optimizeLegibility; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 40; background: var(--ink); }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; transition: text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { a:hover { text-decoration-thickness: 0.12em; } }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.ch--sage, .ch--paper, .band--paper, .band--sage, .panel, .draft-note, .invert { --focus: var(--ink); }
::selection { background: var(--sage); color: var(--ink); }
.skip { position: absolute; left: -9999px; top: 0; background: var(--sage); color: var(--ink); padding: 0.6rem 1rem; z-index: 60; font-weight: 600; }
.skip:focus { left: var(--gutter-l); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }

/* Type */
.display, h1, h2, h3 { font-family: var(--font-display); font-stretch: 62%; font-weight: 850; text-transform: uppercase; line-height: 0.92; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
h1 { font-size: var(--fs-mega); line-height: 0.86; }
h2 { font-size: var(--fs-1); }
h3 { font-size: var(--fs-2); line-height: 1; }
p { margin: 0; max-width: var(--measure); }
.lede { font-size: var(--fs-2); font-family: var(--font-text); font-weight: 500; line-height: 1.35; max-width: 34ch; }
.label { font-size: var(--fs-small); font-weight: 600; }
.muted { color: var(--sage-muted); }
.small { font-size: var(--fs-small); }
.stack > * + * { margin-top: 1.1rem; }
.stack-lg > * + * { margin-top: 2.25rem; }

/* Header: wordmark, five links, one action. No bar lines; the ink is the bar. */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--ink); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header); }
.wordmark { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-stretch: 62%; font-weight: 900; font-size: 1.9rem; letter-spacing: 0.01em; text-transform: uppercase; text-decoration: none; line-height: 1; }
.wordmark__mark { flex: none; height: 2.15rem; width: auto; aspect-ratio: 645 / 750; overflow: visible; }

/* The monogram: the letters of ORACLE inside one ring, drawn in the colour of the text around it */
.mark { display: block; overflow: visible; }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(0.9rem, 1.8vw, 1.75rem); }
.nav a:not(.btn) { font-size: var(--fs-small); font-weight: 600; padding-block: 0.5rem; text-decoration-line: underline; text-decoration-color: transparent; }
.nav a:not(.btn)[aria-current="page"], .nav a:not(.btn):hover { text-decoration-color: currentColor; }
.btn--sm { min-height: 44px; padding: 0.55rem 1rem; }
.menu-toggle { display: none; background: var(--ink-raised); border: 0; color: var(--paper); font: 600 var(--fs-small)/1 var(--font-text); padding: 0.7rem 1rem; min-height: 44px; cursor: pointer; }
@media (max-width: 980px) {
  .menu-toggle { display: inline-block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--ink); padding: 0.5rem var(--gutter-r) 1.5rem var(--gutter-l); flex-direction: column; align-items: stretch; max-height: calc(100vh - var(--header)); max-height: calc(100dvh - var(--header) - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain; }
  .nav.is-open { display: flex; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a:not(.btn) { display: block; padding-block: 0.8rem; font-family: var(--font-display); font-stretch: 62%; font-weight: 850; font-size: 2.2rem; text-transform: uppercase; line-height: 1; }
  .nav .btn { margin-top: 1rem; }
}

/* Chapters: full-bleed flat fields, butted together. Text colour per field. */
.ch, .band { position: relative; padding-block: var(--section); }
.ch--ink { background: var(--ink); }
.ch--raised, .band--raised { background: var(--ink-raised); }
.ch--deep, .band--deep { background: var(--ink-deep); }
.ch--sage, .band--sage { background: var(--sage); color: var(--ink); }
.ch--paper, .band--paper, .invert { background: var(--paper); color: var(--ink); }
:is(.ch--sage, .ch--paper, .band--paper, .band--sage, .invert, .panel) .muted { color: var(--paper-muted); }

/* Buttons: square, one fill. */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0.85rem 1.5rem; background: var(--sage); color: var(--ink); text-decoration: none; font: 700 0.9375rem/1 var(--font-text); border: 2px solid var(--sage); cursor: pointer; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease, border-color var(--t-hover) ease; }
.btn:active { transform: scale(0.97); }
.btn--ghost { background: transparent; color: var(--paper); border-color: var(--paper); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
}
:is(.ch--sage, .ch--paper, .band--paper, .band--sage, .invert, .panel) .btn:not(.btn--ghost) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
:is(.ch--sage, .ch--paper, .band--paper, .band--sage, .invert, .panel) .btn--ghost { color: var(--ink); border-color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  :is(.ch--sage, .ch--paper, .band--paper, .band--sage, .invert, .panel) .btn:not(.btn--ghost):hover { background: var(--ink-raised); border-color: var(--ink-raised); color: var(--paper); }
  :is(.ch--sage, .ch--paper, .band--paper, .band--sage, .invert, .panel) .btn--ghost:hover { background: var(--ink); color: var(--paper); }
}
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* TODO notes: a filled tone, never mistaken for content */
.todo { display: inline; background: rgba(209, 217, 199, 0.16); padding: 0.1rem 0.4rem; font-size: 0.875em; color: var(--sage); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
:is(.ch--sage, .ch--paper, .band--paper, .band--sage, .invert, .panel) .todo { background: rgba(27, 34, 27, 0.09); color: var(--paper-muted); }

/* Pictures. Slots show a quiet tone and say what belongs there until a photograph with consent arrives. */
.ph { position: relative; background: var(--ink-raised); aspect-ratio: 3 / 2; width: 100%; display: grid; place-items: end start; overflow: clip; margin: 0; }
.ph--wide { aspect-ratio: 16 / 9; }
.ph--tall { aspect-ratio: 4 / 5; }
.ph--square { aspect-ratio: 1; }
.ph:not(.ph--photo) > span { position: relative; font-size: var(--fs-small); color: var(--sage-muted); padding: 1rem 1.1rem; max-width: 36ch; }
:is(.ch--sage, .ch--paper, .band--paper, .band--sage) .ph { background: rgba(27, 34, 27, 0.08); }
:is(.ch--sage, .ch--paper, .band--paper, .band--sage) .ph:not(.ph--photo) > span { color: var(--paper-muted); }
.ph--photo :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.focus-top :is(img, video) { object-position: 50% 12%; }
.focus-upper :is(img, video) { object-position: 50% 30%; }
.focus-center :is(img, video) { object-position: 50% 50%; }
.focus-lower :is(img, video) { object-position: 50% 70%; }
.focus-bottom :is(img, video) { object-position: 50% 90%; }
.focus-left :is(img, video) { object-position: 28% 40%; }
.focus-right :is(img, video) { object-position: 72% 40%; }
.ph-badge { position: absolute; z-index: 3; left: 0.75rem; top: 0.75rem; background: var(--sage); color: var(--ink); font-size: 0.8125rem; font-weight: 600; padding: 0.3rem 0.55rem; }
.clip-toggle { position: absolute; z-index: 3; right: 0.75rem; bottom: 0.75rem; min-height: 44px; min-width: 44px; padding: 0.5rem 0.9rem; background: var(--scrim); color: var(--paper); border: 0; font: 600 0.875rem/1 var(--font-text); cursor: pointer; }
.clip-toggle:hover { background: rgba(10, 14, 10, 0.82); }
figure { margin: 0; }
figcaption { margin-top: 0.6rem; font-size: var(--fs-small); color: var(--sage-muted); }
:is(.ch--sage, .ch--paper, .band--paper, .band--sage) figcaption { color: var(--paper-muted); }

/* Parallax frames: the picture sits oversized in its frame and drifts a little with the scroll */
.drift { overflow: clip; }
.drift > :is(img, video) { scale: 1.1; }

/* Grids */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 860px) { .split, .split--even { grid-template-columns: minmax(0, 1fr); } }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(2rem, 4vw, 3.5rem) var(--gap); }
.list-plain { list-style: none; padding: 0; margin: 0; }

/* Rows for long copy: heading left third, body right. Space separates rows; no rules. */
.ruled { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2.25rem, 4.5vw, 4rem); }
.ruled > li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0.75rem 2rem; }
.ruled :is(h2, h3) { font-size: var(--fs-2); line-height: 1; }
@media (max-width: 700px) { .ruled > li { grid-template-columns: minmax(0, 1fr); } }
.pipeline { padding-left: 1.4em; display: grid; gap: 1rem; }
.pipeline > li { display: list-item; }
.pipeline > li::marker { font-family: var(--font-display); font-weight: 850; color: var(--sage); }
.pipeline > li > span { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; }
.pipeline > li > span > span:first-child { font-weight: 700; }
.steps { padding-left: 1.4rem; margin: 0; }
.steps li::marker { font-family: var(--font-display); font-weight: 850; color: var(--sage); }

/* Page heads on inner pages */
.page-head { padding-block: clamp(3.5rem, 9vw, 8rem) clamp(2.5rem, 6vw, 5rem); }
.page-head .lede { margin-top: 1.75rem; }
.page-head:has(.crumb) h1 { font-size: var(--fs-1); }
.crumb { margin-bottom: 1.25rem; font-size: var(--fs-small); color: var(--sage-muted); }
.crumb a { color: var(--sage-muted); }
.page-pic { margin-top: clamp(2.5rem, 6vw, 5rem); }

/* Sage label panel, the deck's signature */
.panel { background: var(--sage); color: var(--ink); padding: clamp(1.5rem, 3vw, 2.5rem); }
.over { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
.over > :is(.ph, img, figure) { grid-column: 1 / -1; grid-row: 1; }
.over > .panel { grid-row: 1; grid-column: 8 / -1; margin: 0 var(--gap) var(--gap) 0; position: relative; z-index: 2; }
.over--left > .panel { grid-column: 1 / 6; margin: 0 0 var(--gap) var(--gap); }
@media (max-width: 760px) { .over > .panel, .over--left > .panel { grid-column: 1 / -1; grid-row: 2; margin: -2.5rem 0.75rem 0; } }

/* Work index */
.work-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(3rem, 7vw, 6rem); }
.work-item { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.25rem, 3vw, 3rem); align-items: end; }
.work-list:not(.is-filtered) > .work-item:nth-child(even), .work-item.is-alt { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.work-list:not(.is-filtered) > .work-item:nth-child(even) > :first-child, .work-item.is-alt > :first-child { order: 2; }
.work-item h2 { font-size: var(--fs-1); }
.work-item a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .work-item a:hover h2 { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.1em; } }
@media (max-width: 960px) { .work-list > .work-item.work-item { grid-template-columns: minmax(0, 1fr) !important; } .work-list > .work-item.work-item > :first-child { order: 0 !important; } }
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.tags li { background: var(--ink-raised); padding: 0.3rem 0.65rem; font-size: var(--fs-small); color: var(--sage); }
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2.5rem; }
.filters button { background: var(--ink-raised); color: var(--paper); border: 0; padding: 0.6rem 1rem; font: 600 var(--fs-small)/1 var(--font-text); min-height: 44px; cursor: pointer; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.filters button:hover { background: #2E382E; }
.filters button[aria-pressed="true"] { background: var(--sage); color: var(--ink); }

/* Title cards: a project drawn in type where no cleared photograph exists yet */
.card-title { position: relative; display: grid; align-content: space-between; aspect-ratio: 3 / 2; padding: clamp(1rem, 2.4vw, 2rem); background: var(--sage); color: var(--ink); overflow: clip; }
.card-title--tall { aspect-ratio: 4 / 5; }
.card-title--paper { background: var(--paper); }
.card-title--raised { background: var(--ink-raised); color: var(--paper); }
.card-title--deep { background: var(--ink-deep); color: var(--paper); }
.card-title b { font-family: var(--font-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: clamp(2.6rem, 6.4vw, 6.6rem); line-height: 0.86; }
.card-title--tall b { font-size: clamp(2.1rem, 3.9vw, 4rem); }
.card-title i { font-style: normal; font-size: var(--fs-body); font-weight: 600; line-height: 1.35; max-width: 28ch; }

/* Case studies */
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.6rem 1.5rem; margin: 0; }
.facts dt { color: var(--sage-muted); font-size: var(--fs-small); }
.facts dd { margin: 0; }
:is(.ch--paper, .band--paper) .facts dt { color: var(--paper-muted); }
blockquote { margin: 0; padding-left: 1.25rem; border-left: 4px solid var(--sage); font-size: var(--fs-2); line-height: 1.35; max-width: 32ch; }
:is(.ch--paper, .band--paper) blockquote { border-left-color: var(--ink); }
.case-sec h2 { font-size: var(--fs-2); margin-bottom: 1rem; }
.case-sec + .case-sec { padding-top: 1rem; }
.case-facts { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--header) + 24px); display: grid; gap: 1rem; }
@media (max-width: 860px) { .case-facts { position: static; } }
.partner-list { font-size: var(--fs-2); line-height: 1.5; max-width: 40ch; }
.services .facts { grid-template-columns: 9rem minmax(0, 1fr); }
@media (max-width: 540px) { .services .facts, .facts { grid-template-columns: minmax(0, 1fr); } .facts dt { margin-top: 0.5rem; } }
.cols > .panel { height: 100%; }

/* Forms: real fields keep their lines */
.form { display: grid; gap: 1.25rem; max-width: 720px; }
.field { display: grid; gap: 0.4rem; }
.field label { font-weight: 600; font-size: var(--fs-small); }
.field .hint { font-size: var(--fs-small); color: var(--sage-muted); }
.field select { background-color: var(--ink-raised); color: var(--paper); }
.field input, .field select, .field textarea { width: 100%; font: 400 1rem/1.4 var(--font-text); color: var(--paper); background: var(--ink-raised); border: 1px solid var(--field-edge); padding: 0.8rem 0.9rem; min-height: 48px; border-radius: 0; }
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.field [aria-invalid="true"] { border-color: #E8A39A; }
.error { color: #F0B8B0; font-size: var(--fs-small); }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 640px) { .row2 { grid-template-columns: minmax(0, 1fr); } }
.check { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--fs-small); }
.check input { width: 24px; height: 24px; margin-top: 0.1rem; flex: none; accent-color: var(--sage); }
.result { background: var(--ink-raised); padding: 1.5rem; }
.result pre { white-space: pre-wrap; font: 400 0.95rem/1.5 var(--font-text); margin: 1rem 0; background: var(--ink); padding: 1rem; overflow-x: auto; }
[data-copy-status]:empty { display: none; }
.result [data-copy-status] { margin-top: 0.75rem; }

/* ---------- Homepage ---------- */

/* 1. Hero, built from the brand deck's cover (Oracle image-to-code): the room full-bleed, the title set large over it,
   and the deck's sage strip along the foot. Signature move: the picture opens like a shutter on load. Partial parallax:
   as the hero leaves, the picture travels slower than the page and the title faster. */
.hc { position: relative; min-height: calc(100svh - var(--header)); display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: clip; background: var(--ink-deep); view-timeline-name: --hc; }
.hc__media { position: absolute; inset: 0; }
.hc__media .ph { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; background: var(--ink-deep); }
.hc__media .ph > span { display: none; }
.hc__media .ph--photo img { scale: 1.08; }
.hc__media::after { content: ""; position: absolute; inset: 0; background: rgba(12, 16, 12, 0.46); z-index: 2; }
.hc__copy { position: relative; z-index: 3; align-self: end; width: 100%; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gap) clamp(1.5rem, 4vw, 4rem); align-items: end; padding-block: clamp(5rem, 14vw, 10rem) clamp(1.75rem, 3.5vw, 3rem); }
.hc__title { font-size: clamp(3.2rem, 9.2vw, 10rem); line-height: 0.84; }
.hc__title .line { display: block; white-space: nowrap; overflow: clip; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hc__title .line > span { display: block; }
.hc__side { display: grid; gap: 1.5rem; justify-items: start; padding-bottom: 0.4rem; }
.hc__side p { font-size: clamp(1.2rem, 1.65vw, 1.5rem); font-weight: 500; line-height: 1.35; max-width: 32ch; }
.hc__strip { position: relative; z-index: 3; background: var(--sage); color: var(--ink); }
.hc__strip ul { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hc__strip li { padding-block: 0.7rem; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.hc__strip li:nth-child(2) { text-align: center; }
.hc__strip li:nth-child(3) { text-align: right; }
@media (max-width: 760px) {
  .hc__copy { grid-template-columns: minmax(0, 1fr); padding-top: 18svh; gap: 1.25rem; }
  .hc__side { gap: 1rem; }
  .hc__side p { font-size: 1.125rem; }
  .hc__title { font-size: clamp(2.9rem, 13.2vw, 4.4rem); }
  .hc__strip ul { grid-template-columns: minmax(0, 1fr); }
  .hc__strip li { text-align: left !important; }
  .hc__strip li + li { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  /* Load, settled by 1.2s: the picture opens from the top edge and settles, the title rises line by line, then the sentence and the action */
  .js .hc__media .ph { clip-path: inset(0 0 100% 0); animation: hc-open 1100ms var(--ease-in-out) 60ms forwards; }
  .js .hc__media .ph--photo img { animation: hc-settle 1500ms var(--ease-soft) forwards; }
  .js .hc__title .line > span { transform: translateY(105%); animation: load-line 900ms var(--ease-expo) 240ms forwards; }
  .js .hc__title .line + .line > span { animation-delay: 330ms; }
  .js .hc__side > * { opacity: 0; transform: translateY(12px); animation: load-rise 520ms var(--ease-out) 560ms forwards; }
  .js .hc__side > * + * { animation-delay: 640ms; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .hc__media { animation: hc-drift linear both; animation-timeline: --hc; animation-range: exit 0% exit 100%; }
    .js .hc__copy { animation: hc-lift linear both; animation-timeline: --hc; animation-range: exit 0% exit 100%; }
    @keyframes hc-drift { to { translate: 0 22%; } }
    @keyframes hc-lift { to { translate: 0 -18%; opacity: 0.15; } }
  }
}
@keyframes hc-open { to { clip-path: inset(0); } }
@keyframes hc-settle { from { scale: 1.2; } to { scale: 1.08; } }
@keyframes load-line { to { transform: none; } }
@keyframes load-rise { to { opacity: 1; transform: none; } }

/* 2. Intro: one statement descending like stairs, two pictures in the right quarter */
.stair { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap) clamp(1.5rem, 3vw, 3rem); align-items: start; }
.stair__head { grid-column: 1 / -1; font-size: var(--fs-2); }
.stair__text { font-family: var(--font-display); font-stretch: 62%; font-weight: 850; text-transform: uppercase; font-size: clamp(1.375rem, 2.5vw, 2.25rem); line-height: 1.04; max-width: none; align-self: center; }
.stair__text > span { display: block; }
.stair__text > span:nth-child(2) { padding-left: 4vw; }
.stair__text > span:nth-child(3) { padding-left: 8vw; }
.stair__text > span:nth-child(4) { padding-left: 12vw; }
.stair__text > span:nth-child(5) { padding-left: 16vw; }
.stair__pics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
.stair__pics > :nth-child(2) { margin-top: clamp(3rem, 8vw, 8rem); }
.stair__pics .ph { aspect-ratio: 4 / 5; }
.stair__note { grid-column: 1 / -1; margin-top: clamp(1.5rem, 4vw, 3.5rem); font-size: var(--fs-small); font-weight: 600; }
@media (max-width: 860px) {
  .stair { grid-template-columns: minmax(0, 1fr); }
  .stair__text { font-size: var(--fs-2); }
  .stair__text > span:nth-child(n) { padding-left: 0; }
  .stair__pics { grid-template-columns: 1fr 1fr; }
}

/* 3. Work: a heading row, then two rows on a four-column grid. In each row every tile starts on the same line,
   its picture fills the row's height, and the captions (title, then date) line up underneath. */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(2.5rem, 4vw, 3.5rem) var(--gap); align-items: stretch; }
.tiles__head { grid-column: 1 / 4; align-self: end; }
.tiles__all { grid-column: 4; justify-self: end; align-self: end; margin: 0; }
.tile { display: grid; margin: 0; }
.tile--wide { grid-column: span 2; }
.tile a { display: grid; grid-template-rows: minmax(0, 1fr) auto; text-decoration: none; color: inherit; }
.tile--wide .media { aspect-ratio: auto; height: 100%; min-height: clamp(15rem, 25vw, 23rem); }
.tile figcaption { display: grid; gap: 0.15rem; margin-top: 0.85rem; font-size: var(--fs-small); color: var(--paper); }
.tile figcaption span:last-child { color: var(--sage-muted); }
.tile .media { transition: transform var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .tile a:hover .media { transform: scale(0.985); } .tile a:hover figcaption span:first-child { text-decoration: underline; } }
@media (max-width: 1100px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles__head { grid-column: 1; } .tiles__all { grid-column: 2; }
}
@media (max-width: 640px) {
  .tiles { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .tiles__head, .tiles__all, .tile--wide { grid-column: 1; }
  .tiles__all { justify-self: start; order: 9; }
}

/* 4. Showcase: one portrait per chapter, on a field taken from its own picture */
.show__ch { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: 1fr auto; gap: var(--gap); padding: clamp(5.5rem, 9vw, 7.5rem) var(--gutter-r) clamp(2rem, 4vw, 3rem) var(--gutter-l); background: var(--field, var(--ink-deep)); color: var(--paper); }
.show__ch h2 { grid-column: 1; grid-row: 1; align-self: start; font-size: var(--fs-1); }
.show__pic { grid-column: 2; grid-row: 1 / 3; align-self: center; width: min(36vw, 64svh); }
.show__pic .ph { aspect-ratio: 3 / 4; background: rgba(255, 255, 255, 0.06); }
.show__text { grid-column: 1; grid-row: 2; align-self: end; font-size: var(--fs-body); max-width: 32ch; }
.show__link { grid-column: 3; grid-row: 2; align-self: end; justify-self: end; font-weight: 600; }
.field-1 { --field: #1E241C; } .field-2 { --field: #24201B; } .field-3 { --field: #182024; }
@media (max-width: 760px) {
  .show__ch { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; min-height: 0; padding-block: 4.5rem; }
  .show__ch h2, .show__text, .show__link { grid-column: 1; grid-row: auto; justify-self: start; }
  .show__pic { grid-column: 1; grid-row: auto; width: 80%; justify-self: center; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .show__ch { animation: ch-grow linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    .js .show__pic { animation: pic-settle linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
    @keyframes ch-grow { from { clip-path: inset(20px 20px 0 20px); } to { clip-path: inset(0); } }
    @keyframes pic-settle { from { transform: scale(0.92); } to { transform: none; } }
  }
}

/* Archive: the record, year by year. The year sits on the left; each entry is its date, then what happened, where,
   and who played. */
.tl-head { font-size: var(--fs-1); }
.timeline { display: grid; gap: clamp(3rem, 6vw, 5rem); }
.tl-year { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 1rem var(--gap); align-items: start; }
.tl-year > h2 { position: sticky; top: clamp(1rem, 3vh, 2rem); font-size: clamp(3.5rem, 8vw, 7.5rem); line-height: 0.85; color: var(--sage); }
.tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
/* each entry: its date, what happened and where, then who played, reaching the right margin */
.tl > li { display: grid; grid-template-columns: minmax(8.5rem, 2fr) minmax(0, 5fr) minmax(0, 3fr); gap: 0.25rem 1.5rem; padding: 0.95rem 1rem; background: var(--ink-raised); }
.tl time, .tl__when { font-weight: 600; font-variant-numeric: tabular-nums; }
.tl__title { margin: 0; font-weight: 600; }
.tl__title a { color: inherit; }
.tl__meta { margin: 0.2rem 0 0; color: var(--sage-muted); }
.tl__bill { margin: 0; justify-self: end; text-align: right; color: var(--sage-muted); }
@media (max-width: 960px) {
  .tl > li { grid-template-columns: minmax(7.5rem, 2fr) minmax(0, 6fr); }
  .tl__bill { grid-column: 2; justify-self: start; text-align: left; }
}
@media (max-width: 760px) {
  .tl-year { grid-template-columns: minmax(0, 1fr); }
  .tl-year > h2 { position: static; font-size: clamp(3rem, 16vw, 4.5rem); }
  .tl-year { border-top: 3px solid var(--sage); padding-top: 1.25rem; }
  .tl > li { grid-template-columns: minmax(0, 1fr); }
  .tl__bill { grid-column: 1; }
}

/* 5. Our story: large text in two columns, facts highlighted */
.story2 { columns: 2; column-gap: clamp(1.5rem, 3vw, 2.5rem); font-size: var(--fs-2); line-height: 1.22; max-width: none; hyphens: auto; margin-top: 2.5rem; }
.story2 p { max-width: none; }
.story2 p + p { margin-top: 1em; }
.hl { background: var(--sage); padding: 0 0.12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hl--ink { background: var(--ink); color: var(--paper); }
@media (max-width: 760px) { .story2 { columns: 1; } }

/* 6. Archive prints: photograph and its label strip as one object */
.prints { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 12px; list-style: none; margin: 2.5rem 0 0; padding: 0; }
.print .ph { aspect-ratio: 4 / 5; }
.print__strip { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.75rem; min-height: 64px; font-size: var(--fs-small); font-variant-numeric: tabular-nums; background: var(--sage); color: var(--ink); }
.print:nth-child(4n+2) .print__strip { background: var(--paper); }
.print:nth-child(4n+3) .print__strip { background: var(--ink-deep); color: var(--paper); }
.print:nth-child(4n+4) .print__strip { background: #2E382E; color: var(--paper); }
@media (max-width: 760px) { .prints { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 8px; } .print__strip { flex-direction: column; gap: 0.2rem; } }

/* 7. Partners as poster lines: giant names left, the fact right on the same baseline, arriving row by row */
.poster { list-style: none; margin: 2.5rem 0 0; padding: 0; }
.poster li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem var(--gap); }
.poster b { font-family: var(--font-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: clamp(2.6rem, 8.2vw, 8rem); line-height: 0.95; transition: color var(--t-hover) ease; }
.poster span { font-size: var(--fs-body); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .poster li:hover b { color: var(--paper-muted); } }
@media (max-width: 860px) { .poster li { display: grid; gap: 0.2rem; } .poster li + li { margin-top: 2.75rem; } .poster b { font-size: clamp(2.2rem, 11vw, 4rem); } .poster span { text-align: left; font-size: var(--fs-small); } }


/* 8. Close: the idea again, inverted */
.invert { min-height: 90svh; display: grid; align-content: space-between; }
.invert > .wrap { width: 100%; }
.invert h2 { font-size: var(--fs-mega); max-width: 8ch; }
.invert__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem; margin-top: 3rem; }
.invert__row p { font-size: var(--fs-2); line-height: 1.3; max-width: 26ch; }
/* the mark stamped large on the close, beside the invitation */
.invert { position: relative; overflow: clip; }
.close-mark { position: absolute; right: var(--gutter-r); top: clamp(4rem, 9vw, 7rem); width: clamp(9rem, 24vw, 21rem); color: var(--ink); pointer-events: none; }
.close-mark .mark { width: 100%; height: auto; }
@media (max-width: 760px) { .close-mark { width: 6rem; top: clamp(3.5rem, 12vw, 4.5rem); } }

/* Footer: the name first, then the ways to reach us */
.site-footer { background: var(--ink-deep); padding-block: clamp(5rem, 10vw, 8rem) 2rem; overflow: clip; }
.foot-name { font-family: var(--font-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: 18vw; line-height: 0.8; letter-spacing: -0.01em; white-space: nowrap; max-width: none; }
.foot-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem var(--gap); margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.foot-id { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); align-content: start; }
.foot-mark { width: clamp(4.75rem, 8vw, 6.5rem); height: auto; color: var(--sage); overflow: visible; }
.foot-places { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.foot-places li { font-size: var(--fs-2); font-weight: 600; color: var(--sage); }
.foot-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem var(--gap); }
.foot-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: var(--fs-small); }
.foot-links a { text-decoration: none; color: var(--paper); }
.foot-links a:hover { text-decoration: underline; }
.legal { margin-top: clamp(3rem, 6vw, 6rem); font-size: var(--fs-small); color: var(--sage-muted); display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between; }
@media (max-width: 760px) { .foot-row { grid-template-columns: minmax(0, 1fr); } .foot-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.draft-note { max-width: none; margin: 0; background: var(--sage); color: var(--ink); font-size: var(--fs-small); text-align: center; padding: 0.45rem var(--gutter-r) 0.45rem var(--gutter-l); }

/* ---------- Motion layer ---------- */

/* Section entrances: heading, text, picture in reading order, once. Never hidden without the script. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-expo); }
  .js [data-reveal].d1 { transition-delay: calc(var(--stagger) * 1); }
  .js [data-reveal].d2 { transition-delay: calc(var(--stagger) * 2); }
  .js [data-reveal].d3 { transition-delay: calc(var(--stagger) * 3); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  /* A picture opens from its lower edge as it arrives, settling from a slight scale */
  .js [data-open] { clip-path: inset(0 0 100% 0); transition: clip-path 1100ms var(--ease-in-out); }
  .js [data-open] :is(img, video) { transform: scale(1.1); transition: transform 1400ms var(--ease-soft); }
  .js [data-open].is-in { clip-path: inset(0); }
  .js [data-open].is-in :is(img, video) { transform: none; }
}

/* Partial parallax: pictures drift a few percent inside their frames, locked to the scrollbar */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .drift > :is(img, video) { animation: drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .drift--slow > :is(img, video) { animation-name: drift-slow; }
    @keyframes drift { from { transform: translateY(-5%); } to { transform: translateY(5%); } }
    @keyframes drift-slow { from { transform: translateY(-3%); } to { transform: translateY(3%); } }
  }
}

/* Ink fill: one statement fills from part-ink to full ink as it rises through the screen */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .is-filling .w { opacity: 0.45; animation: ink-fill linear both; animation-timeline: view(); animation-range: cover 18% cover 42%; }
    @keyframes ink-fill { to { opacity: 1; } }
  }
}

/* Page to page: the browser's own view transitions, off under reduced motion */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-leave 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19) both; }
::view-transition-new(root) { animation: vt-arrive 380ms var(--ease-out) 60ms both; }
@keyframes vt-leave { to { opacity: 0; } }
@keyframes vt-arrive { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Hire & Book studios, built from the brand deck's "Our infrastructure" page: a full-bleed picture with a sage label panel over it */
.band--flush { padding-block: 0 var(--section); }
.over--deck { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
.over--deck > .ph { aspect-ratio: auto; min-height: min(92svh, 860px); }
.over--deck > .panel { grid-column: 7 / span 5; margin: var(--section) 0; }
.spaces { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.spaces li { display: grid; gap: 0.15rem; padding-top: 0.9rem; border-top: 2px solid var(--ink); }
.spaces b { font-family: var(--font-display); font-stretch: 62%; font-weight: 850; text-transform: uppercase; font-size: var(--fs-2); line-height: 1; }
.spaces span { font-size: var(--fs-small); font-weight: 500; }
.studio-note { margin-top: 1.5rem; }
@media (max-width: 860px) {
  .over--deck > .ph { min-height: 0; aspect-ratio: 4 / 5; }
  .over--deck > .panel { grid-column: 1 / -1; grid-row: 2; margin: -4rem var(--gutter-r) 0 var(--gutter-l); }
}
.art3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
@media (max-width: 640px) { .art3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .art3 > :last-child { display: none; } }
.split--reverse > :first-child { order: 2; }
@media (max-width: 860px) { .split--reverse > :first-child { order: 0; } }
.media-clip { max-width: 420px; justify-self: start; }

/* Inner page heads with a picture: the title and lede on the left, a tall picture on the right that drifts a little */
.page-head--pic { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2.5rem, 6vw, 5rem); }
.ph-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.ph-head__pic { max-height: 78svh; }
.ph-head__text { padding-bottom: 0.5rem; }
@media (max-width: 860px) { .ph-head { grid-template-columns: minmax(0, 1fr); } .ph-head__pic { aspect-ratio: 4 / 3; } }
@media (prefers-reduced-motion: no-preference) {
  .js .ph-head__pic { clip-path: inset(0 0 100% 0); animation: hc-open 1100ms var(--ease-in-out) 120ms forwards; }
}
/* Inner page version of the deck-cover hero */
.hc--page { min-height: min(86svh, 900px); }
.hc__head { display: grid; gap: 1rem; }
.hc__head .crumb { margin: 0; color: var(--paper); }
.hc__head .crumb a { color: var(--paper); }
.hire-list > li { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); align-items: start; }
.hire-list > li > .hire-pic { max-width: 360px; justify-self: end; width: 100%; }
@media (max-width: 860px) { .hire-list > li { grid-template-columns: minmax(0, 1fr); } .hire-list > li > .hire-pic { justify-self: start; max-width: 420px; } }
.page-head--pic .lede { font-size: clamp(1.2rem, 1.6vw, 1.5rem); max-width: 40ch; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.pair > :nth-child(2) { margin-top: clamp(2.5rem, 7vw, 7rem); }

/* Collective: a wall of portraits from the shoot, staggered so it reads as people rather than a grid of cards */
.faces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem) var(--gap); }
.faces > li:nth-child(even) { margin-top: clamp(2rem, 5vw, 4.5rem); }
.faces__name { margin-top: 0.6rem; font-size: var(--fs-small); }
@media (max-width: 860px) { .faces { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Scroll scenes (version 3) ----------
   Ideas taken, as principles only, from the Kinetic, Modern Dark and Bold Typography styles on designprompts.dev:
   viewport-scaled type as the poster, one slow marquee, held stages that move with the scroll, expo-out curves.
   Built to taste-skill's scene rules: native scroll, a sticky stage that ends, transform, opacity and clip-path only,
   and a finished composition for reduced motion, for no script and for anything the scene cannot run on.
   The script adds .is-live (and .is-pinned for the reel) only when motion is allowed. */
:root { --stage-top: calc(var(--header) + env(safe-area-inset-top, 0px)); --stage-h: calc(100svh - var(--header) - env(safe-area-inset-top, 0px)); }
.scene .clip-toggle { display: none; }
.scene-toggle, .marquee-toggle { min-height: 44px; min-width: 44px; padding: 0.5rem 0.9rem; font: 600 0.875rem/1 var(--font-text); cursor: pointer; border: 0; }
.scene-toggle { background: var(--scrim); color: var(--paper); }
.scene-toggle:hover { background: rgba(10, 14, 10, 0.82); }
.ph--film { aspect-ratio: 9 / 16; background: rgba(255, 255, 255, 0.05); }

/* Scene 1, home: a window of film opens and unfolds into three. Finished: the statement, then three films in a row. */
.tri { background: var(--ink-deep); padding-block: var(--section); }
.tri__stage { position: relative; max-width: var(--wrap); margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.tri__title { font-size: clamp(3rem, 7.4vw, 8.5rem); line-height: 0.86; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 0.5em; }
.tri__line { display: block; white-space: nowrap; }
.tri__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.tri__cap { font-size: var(--fs-small); color: var(--sage-muted); }
.tri .scene-toggle { justify-self: end; }
@media (max-width: 760px) {
  .tri__row { grid-template-columns: minmax(0, 1fr); }
  .tri__panel--l, .tri__panel--r { display: none; }
  .tri__title { font-size: clamp(2.6rem, 13vw, 4.4rem); }
}
.tri.is-live { height: 250svh; padding: 0; }
.tri.is-live .tri__stage { position: sticky; top: var(--stage-top); height: var(--stage-h); max-width: none; padding: 0; display: block; overflow: clip; }
.tri.is-live .tri__row { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; gap: var(--gap); }
.tri.is-live .tri__panel { flex: none; height: min(var(--stage-h), calc((100vw - 2 * var(--gap)) * 0.5926)); aspect-ratio: 9 / 16; will-change: transform; }
.tri.is-live .tri__panel .ph { height: 100%; }
.tri.is-live .tri__panel--c { position: relative; z-index: 2; }
.tri.is-live .tri__title { position: absolute; inset: 0; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr 1fr; padding: 2rem var(--gutter-r) 5rem var(--gutter-l); pointer-events: none; font-size: clamp(3rem, 8.6vw, 10.5rem); }
.tri.is-live .tri__line--a { align-self: start; justify-self: start; }
.tri.is-live .tri__line--b { align-self: end; justify-self: end; }
.tri.is-live .tri__cap { position: absolute; z-index: 4; left: var(--gutter-l); bottom: 0.75rem; background: var(--scrim); color: var(--paper); padding: 0.55rem 0.8rem; max-width: min(60ch, 70vw); }
.tri.is-live .scene-toggle { position: absolute; z-index: 4; right: var(--gutter-r); bottom: 0.75rem; }
@media (max-width: 760px) {
  .tri.is-live { height: 220svh; }
  .tri.is-live .tri__panel--c { height: var(--stage-h); }
  .tri.is-live .tri__title { grid-template-rows: auto 1fr auto; padding: 1.25rem var(--gutter-r) 4.5rem var(--gutter-l); font-size: clamp(2.6rem, 14vw, 4.6rem); }
  .tri.is-live .tri__line--b { grid-row: 3; }
}

/* Scene 2, Media: the session films as a row the vertical scroll moves sideways while the stage holds.
   Finished: a drag row with snapping, which also serves phones, touch and the keyboard. */
.reel { background: var(--ink-deep); padding-block: var(--section); }
.reel__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap) clamp(2rem, 5vw, 6rem); align-items: end; }
@media (max-width: 860px) { .reel__head { grid-template-columns: minmax(0, 1fr); } }
.reel__track { display: flex; gap: var(--gap); list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0 var(--gutter-r) 0.5rem var(--gutter-l); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter-l); scrollbar-color: var(--sage-muted) transparent; }
.reel__item { flex: 0 0 min(64vw, 20rem); scroll-snap-align: start; }
.reel__cap { margin-top: 0.6rem; font-size: var(--fs-small); font-weight: 600; }
.reel__count { display: none; font-size: var(--fs-small); color: var(--sage-muted); }
.reel .scene-toggle { margin: 1.25rem var(--gutter-r) 0 var(--gutter-l); }
.reel.is-pinned { padding: 0; }
.reel.is-pinned .reel__stage { position: sticky; top: var(--stage-top); height: var(--stage-h); display: flex; flex-direction: column; justify-content: center; gap: clamp(1rem, 2.5svh, 2rem); overflow: clip; }
.reel.is-pinned .reel__track { overflow: visible; scroll-snap-type: none; margin-top: 0; will-change: transform; }
.reel.is-pinned .reel__item { flex-basis: calc(var(--stage-h) * 0.62 * 0.5625); }
.reel.is-pinned .reel__count { display: block; }
.reel.is-pinned .scene-toggle { position: absolute; right: var(--gutter-r); bottom: 0.75rem; margin: 0; }

/* One marquee: the parts of the ecosystem in very large type, travelling slowly. Pauses on hover, off screen,
   from its own button, and never moves under reduced motion. */
.marquee { background: var(--sage); color: var(--ink); padding-block: clamp(2.5rem, 6vw, 5rem) 1.5rem; overflow: clip; --focus: var(--ink); }
.marquee__track { display: flex; width: max-content; }
.marquee__run { display: flex; flex: none; max-width: none; font-family: var(--font-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: clamp(3.2rem, 10vw, 10.5rem); line-height: 0.9; white-space: nowrap; }
.marquee__run span { display: inline-flex; align-items: center; }
.marquee__run span::after { content: ""; flex: none; width: 0.2em; height: 0.2em; background: currentColor; margin-inline: 0.42em; }
.marquee__foot { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 1rem 1.5rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); font-weight: 600; font-size: var(--fs-small); }
.marquee-toggle { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.marquee-toggle:hover { background: var(--ink); color: var(--paper); }
@media (prefers-reduced-motion: no-preference) {
  .js .marquee__track { animation: marquee 70s linear infinite; }
  .js .marquee.is-paused .marquee__track, .js .marquee.is-away .marquee__track { animation-play-state: paused; }
  @media (hover: hover) and (pointer: fine) { .js .marquee__track:hover { animation-play-state: paused; } }
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* Scene 3, Media: the opening window. A window of film in the middle of a held stage opens to full-bleed
   while the heading parts to let it through. Finished: the heading, then the film across the width. */
.ph--film.ph--wide { aspect-ratio: 16 / 9; }
.win { background: var(--ink-deep); padding-block: var(--section); }
.win__stage { position: relative; max-width: var(--wrap); margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.win__title { font-size: clamp(3rem, 7.4vw, 8.5rem); line-height: 0.86; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 0.5em; }
.win__line { display: block; white-space: nowrap; }
.win__cap { font-size: var(--fs-small); color: var(--sage-muted); }
.win .scene-toggle { justify-self: end; }
@media (max-width: 760px) { .win__title { font-size: clamp(2.4rem, 12vw, 4.4rem); } }
.win.is-live { height: 230svh; padding: 0; }
.win.is-live .win__stage { position: sticky; top: var(--stage-top); height: var(--stage-h); max-width: none; padding: 0; display: block; overflow: clip; }
.win.is-live .win__frame { position: absolute; inset: 0; will-change: clip-path; }
.win.is-live .win__frame .ph { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.win.is-live .win__title { position: absolute; inset: 0; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr 1fr; padding: 2rem var(--gutter-r) 5rem var(--gutter-l); pointer-events: none; font-size: clamp(2.8rem, 7.2vw, 8.5rem); }
.win.is-live .win__line--a { align-self: start; justify-self: start; }
.win.is-live .win__line--b { align-self: end; justify-self: end; }
.win.is-live .win__cap { position: absolute; z-index: 4; left: var(--gutter-l); bottom: 0.75rem; background: var(--scrim); color: var(--paper); padding: 0.55rem 0.8rem; max-width: min(60ch, 70vw); }
.win.is-live .scene-toggle { position: absolute; z-index: 4; right: var(--gutter-r); bottom: 0.75rem; }
@media (max-width: 760px) { .win.is-live { height: 200svh; } .win.is-live .win__title { padding: 1.25rem var(--gutter-r) 4.5rem var(--gutter-l); font-size: clamp(2.4rem, 12vw, 4.4rem); } }

/* A film across the full width between two sections */
.band--film { padding: 0; }
.band--film > .ph { aspect-ratio: 21 / 9; }
@media (max-width: 760px) { .band--film > .ph { aspect-ratio: 4 / 3; } }

/* ---------- Version 4: the space, a header that steps aside, eased scenes ---------- */

/* Scenes now fill the whole browser: the header slides away while you scroll down and returns when you scroll up. */
:root { --stage-top: 0px; --stage-h: 100svh; }
.site-header { transition: transform 320ms var(--ease-out), background-color 300ms ease; will-change: transform; }
.site-header.is-tucked { transform: translateY(calc(-100% - env(safe-area-inset-top, 0px))); }
.site-header.is-over { background: transparent; }
@media (max-width: 980px) { .site-header.is-over:has(.nav.is-open) { background: var(--ink); } }

/* The space (home, first screen). Finished composition: the deck cover over a still of the film. */
.space { position: relative; background: var(--ink-deep); margin-top: calc(-1 * var(--header)); }
.space__stage { position: relative; min-height: 100svh; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: clip; }
.space__media { position: absolute; inset: 0; }
.space__media .ph { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; background: var(--ink-deep); }
.space__media .ph > span { display: none; }
.space__media::after { content: ""; position: absolute; inset: 0; background: rgba(12, 16, 12, 0.42); z-index: 2; }
.space__media video { object-position: 50% 45%; }
@media (max-width: 760px) { .space__media video { object-position: 64% 45%; } }
.space__field { display: none; }
.space__copy { position: relative; z-index: 3; align-self: end; width: 100%; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gap) clamp(1.5rem, 4vw, 4rem); align-items: end; padding-block: calc(var(--header) + clamp(4rem, 12vw, 9rem)) clamp(1.75rem, 3.5vw, 3rem); }
.space__strip { position: relative; z-index: 3; }
.space .ph-badge { top: auto; bottom: 4.5rem; }
.space__toggle { position: absolute; z-index: 4; right: var(--gutter-r); bottom: calc(2.6rem + 0.75rem); }
@media (max-width: 760px) {
  .space__copy { grid-template-columns: minmax(0, 1fr); padding-top: calc(var(--header) + 16svh); gap: 1.25rem; }
  .space__toggle { bottom: calc(2.6rem + 0.5rem); }
}

/* The monogram in the opening. At rest it sits, whole, in the top corner; live, it forms in the middle as you scroll,
   one letter at a time (O, R, A, C, L, E), each glowing as it goes in and then settling (the script draws it). */
.space__mark { position: absolute; z-index: 2; pointer-events: none; color: var(--paper); top: calc(var(--header) + clamp(1.5rem, 5vh, 3.5rem)); right: var(--gutter-r); width: clamp(5.5rem, 12vw, 10rem); }
.space__mark { --mark-ink: var(--paper); --mark-glow: #000000; }  /* each letter is painted in black, then settles to white */
.space__mark .mark--space { width: 100%; height: auto; }
/* when the scroll will paint it, the corner mark stays out of sight until the scene starts (no flash on load) */
@media (prefers-reduced-motion: no-preference) { .js .space:not(.is-live) .space__mark { visibility: hidden; } }
.mark--space .om-pieces, .mark--space .om-dot, .mark--space .om-glows { display: none; }
@media (max-width: 760px) { .space__mark { width: 4.75rem; top: calc(var(--header) + 1.25rem); } }
.space.is-live .space__mark { inset: 0; width: auto; transform-style: preserve-3d; }
.space.is-live .space__mark > svg { position: absolute; left: 0; top: 0; width: auto; height: auto; visibility: hidden; will-change: transform, opacity; transform-origin: 50% 50%; }
.space.is-live .mark--space .om-pieces, .space.is-live .mark--space .om-dot, .space.is-live .mark--space .om-glows { display: inline; }

/* Live: the stage holds while the camera moves forward through it. Pictures and lines share one depth: each line
   arrives beside its own large picture, close to the path you travel along, and more pictures fly past between them.
   Positions are set here; the script only moves things in depth. */
.space.is-live { height: 629svh; }   /* the opening run (the mark being painted) takes the first 32% */
.space.is-live .space__stage { position: sticky; top: 0; height: 100svh; min-height: 0; perspective: 1100px; perspective-origin: 50% 48%; }
.space.is-live .space__media { will-change: transform; }
.space.is-live .space__field { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; transform-style: preserve-3d; }
.space.is-live .space__copy, .space.is-live .space__strip { will-change: transform, opacity; }
.space__item { position: absolute; top: 50%; margin: 0; opacity: 0; visibility: hidden; will-change: transform, opacity; transform: translate3d(0, -50%, -2000px); }
.space__pic .ph { aspect-ratio: 4 / 5; background: transparent; }
.space__pic:not(:has(.ph--photo)) { display: none; }
.space__word { font-family: var(--font-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: clamp(2.6rem, 5.6vw, 6.4rem); line-height: 0.9; text-wrap: balance; color: var(--paper); max-width: none; pointer-events: auto; }
/* the line on one side of the path, its picture on the other, both near the middle */
.w-1, .w-3 { left: 6vw; width: 40vw; }
.w-2 { left: 54vw; width: 40vw; }
.p-1, .p-3 { left: 53vw; width: 33vw; }
.p-2 { left: 5vw; width: 43vw; }
.p-2 .ph { aspect-ratio: 3 / 2; }
.p-3 .ph { aspect-ratio: 3 / 4; }
/* the pictures that fly past between the lines */
.p-a { left: 56vw; width: 31vw; top: 44%; }
.p-b { left: 12vw; width: 30vw; top: 56%; }
.p-c { left: 56vw; width: 30vw; top: 56%; }
@media (max-width: 760px) {
  .space.is-live { height: 571svh; }
  .space__word { font-size: clamp(2.2rem, 11vw, 3.8rem); }
  .w-1, .w-2, .w-3 { left: 6vw; width: 88vw; top: 25%; }
  .p-1, .p-3 { left: 16vw; width: 68vw; top: 64%; }
  .p-2 { left: 6vw; width: 88vw; top: 62%; }
  .p-a { left: 28vw; width: 64vw; top: 42%; }
  .p-b { left: 6vw; width: 62vw; top: 56%; }
  .p-c { left: 32vw; width: 60vw; top: 48%; }
}

/* Pictures in the archive: the date and the event on a strip under each photograph */
.archive-prints { margin-top: clamp(2rem, 4vw, 3rem); }
.archive-group + .archive-group { margin-top: clamp(3.5rem, 7vw, 6rem); }
.archive-group > h2 { font-size: var(--fs-2); }
.archive-group .prints { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.archive-group .prints .ph--film { aspect-ratio: 4 / 5; }
.archive-group .print--wide { grid-column: span 2; }
.archive-group .print--wide .ph { aspect-ratio: 3 / 2; }
@media (max-width: 760px) { .archive-group .prints { grid-template-columns: repeat(2, minmax(0, 1fr)); } .archive-group .print--wide { grid-column: span 2; } }

/* Case-study gallery: the photographs as a sideways row (the reel scene with stills) */
.reel--stills .reel__item { flex-basis: min(64vw, 22rem); }
.reel--stills .reel__item .ph { aspect-ratio: 2 / 3; }
.reel--stills .reel__item--wide { flex-basis: min(86vw, 34rem); }
.reel--stills .reel__item--wide .ph { aspect-ratio: 3 / 2; }
.reel.reel--stills.is-pinned .reel__item { flex-basis: calc(var(--stage-h) * 0.52 * 0.6667); }
.reel.reel--stills.is-pinned .reel__item--wide { flex-basis: calc(var(--stage-h) * 0.52 * 1.5); }
.credit { font-size: var(--fs-small); color: var(--sage-muted); }
.art4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.art4 > :nth-child(even) { margin-top: clamp(2rem, 5vw, 4.5rem); }
.art4 .ph--tall { aspect-ratio: 9 / 16; }
@media (max-width: 760px) { .art4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.poster-fig { align-items: end; }
.poster-fig > .ph { max-width: 440px; }
.poster-fig figcaption { margin: 0; }

.print__strip .todo { background: transparent; color: inherit; padding: 0; text-decoration: underline dotted; text-underline-offset: 0.2em; }

/* Pictures fade in as they finish loading instead of popping in (never under reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .js .ph--photo img { opacity: 0; transition: opacity 650ms var(--ease-out); }
  .js .ph--photo img.is-loaded { opacity: 1; }
}

/* ---------- Version 5: parallax on every page ----------
   Depth classes move a whole block a little against the scroll, so neighbours at different depths slide past each
   other. They use the separate `translate` property, so they never fight the entrances (opacity and transform).
   Locked to the scrollbar with scroll timelines; the script does the same where those are missing. */
.depth-back { --depth: -36px; }
.depth-1 { --depth: 34px; }
.depth-2 { --depth: 72px; }
.depth-3 { --depth: 120px; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .depth-back, .depth-1, .depth-2, .depth-3 { animation: depth linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes depth { from { translate: 0 var(--depth); } to { translate: 0 calc(var(--depth) * -1); } }
  }
}

/* Page heads in layers: the main picture sinks a little while a second, smaller picture rises past its corner */
.ph-head__media { position: relative; }
.ph-head__media > .ph-head__pic { width: 100%; }
.ph-head__float { position: absolute; z-index: 2; left: -18%; bottom: -10%; width: 44%; }
.ph-head__float .ph { aspect-ratio: 4 / 5; }
.ph-head__float:not(:has(.ph--photo)) { display: none; }
@media (max-width: 860px) { .ph-head__float { left: auto; right: 6%; bottom: -14%; width: 36%; } }

/* A picture band across the full width: the picture travels slower than the page, its line faster */
.pband { position: relative; height: clamp(420px, 82svh, 880px); overflow: clip; background: var(--ink-deep); display: grid; align-items: end; }
.pband__pic { position: absolute; inset: -16% 0; }
.pband__pic .ph { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; background: var(--ink-deep); }
.pband__pic .ph:not(.ph--photo) > span { position: absolute; left: var(--gutter-l); top: 2rem; }
.pband__pic::after { content: ""; position: absolute; inset: 0; background: rgba(12, 16, 12, 0.38); z-index: 2; pointer-events: none; }
.pband__line { position: relative; z-index: 3; margin: 0; padding: 0 var(--gutter-r) clamp(5.5rem, 10vw, 8.5rem) var(--gutter-l); max-width: none; font-family: var(--font-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: clamp(1.9rem, 6.2vw, 7rem); line-height: 0.9; text-wrap: balance; color: var(--paper); }
.pband .ph-badge { top: 22%; left: var(--gutter-l); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pband__pic { animation: pband-pic linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .pband__line { animation: pband-line linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes pband-pic { from { translate: 0 -12%; } to { translate: 0 12%; } }
    @keyframes pband-line { from { translate: 0 56px; } to { translate: 0 -56px; } }
  }
}

/* Three pictures at three depths that drift past each other as the page moves */
.collage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: start; padding-block: clamp(1rem, 3vw, 2rem); }
.collage .ph { aspect-ratio: 4 / 5; }
.collage__a { grid-column: 1 / span 5; }
.collage__b { grid-column: 6 / span 3; margin-top: clamp(6rem, 16vw, 14rem); }
.collage__c { grid-column: 9 / span 4; margin-top: clamp(2rem, 5vw, 4rem); }
.collage__wide .ph { aspect-ratio: 3 / 2; }
.collage > :not(:has(.ph--photo)) .ph { background: var(--ink-raised); }
@media (max-width: 760px) {
  .collage__a { grid-column: 1 / span 7; }
  .collage__b { grid-column: 8 / span 5; margin-top: 5rem; }
  .collage__c { grid-column: 3 / span 8; margin-top: -2rem; }
}

/* Walls of pictures: alternate columns at different depths */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .faces > li:nth-child(odd) > .ph, .prints > li:nth-child(odd) > .ph, .art4 > :nth-child(odd), .pair > :nth-child(odd) { animation: depth linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; --depth: 26px; }
    .faces > li:nth-child(even) > .ph, .prints > li:nth-child(even) > .ph, .art4 > :nth-child(even), .pair > :nth-child(even) { animation: depth linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; --depth: 70px; }
    .work-item .media, .hire-pic, .page-pic > .ph, .tile .media { animation: depth linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; --depth: 48px; }
  }
}

@media (max-width: 760px) { .pband__line { font-size: 7.4vw; } }
.work-item h2 { font-size: clamp(1.9rem, 3vw, 3.2rem); }
.work-item .ph:not(.ph--photo) > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 761px) and (max-width: 1100px) { .over--left > .panel { grid-column: 1 / 9; } .over > .panel:not(.over--left > .panel) { grid-column: 5 / -1; } }

/* A film with sound: the visitor presses play. Native controls, no autoplay, no loop. */
.watch { margin: 0; display: grid; gap: 0.75rem; justify-items: start; }
.watch video { display: block; width: 100%; max-width: 30rem; aspect-ratio: 4 / 5; height: auto; background: var(--ink); }
.watch figcaption { font-size: var(--fs-small); color: var(--sage-muted); }

/* The pause button of a film in a page heading sits top right, clear of the floating picture that overlaps the bottom corner. */
.ph-head__pic > .clip-toggle { top: 0.75rem; bottom: auto; }