/*! ART VIDEO — generated by build/build.mjs. Edit build/css/*.css instead. */
/* ==========================================================================
   ART VIDEO — design tokens
   A monochrome interface: pure black, near-black, paper white, warm bone and a
   narrow band of neutral greys. Colour belongs to the photographs alone.
   ========================================================================== */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-latin.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-latin-italic.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Jost';
  src: url('../fonts/jost-latin.woff2') format('woff2-variations');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- palette ---------------------------------------------------------- */
  --void: #000000;
  --ink: #0b0b0b;
  --ink-soft: #141414;
  --paper: #ffffff;
  --bone: #f3f1ed;
  --bone-deep: #e8e4dd;
  --grey-70: #6f6f6f;
  --grey-45: #a8a8a8;
  --grey-20: #d8d6d2;

  /* ---- theme (overridden per section) ----------------------------------- */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-dim: rgb(11 11 11 / 0.55);
  --fg-faint: rgb(11 11 11 / 0.34);
  --rule: rgb(11 11 11 / 0.13);
  --rule-strong: rgb(11 11 11 / 0.3);
  --plate-bg: var(--bone-deep);

  /* ---- typography ------------------------------------------------------- */
  --display: 'Cormorant Garamond', 'Didot', 'Bodoni 72', 'Times New Roman', serif;
  --sans: 'Jost', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --t-mega: clamp(3rem, 13.2vw, 15rem);
  --t-hero: clamp(2.75rem, 9.6vw, 10.5rem);
  --t-display: clamp(2.35rem, 6.6vw, 7rem);
  --t-h2: clamp(1.9rem, 4.4vw, 4.25rem);
  --t-h3: clamp(1.45rem, 2.5vw, 2.5rem);
  --t-h4: clamp(1.15rem, 1.6vw, 1.5rem);
  --t-lede: clamp(1.05rem, 1.45vw, 1.5rem);
  --t-body: clamp(0.95rem, 0.62vw + 0.78rem, 1.0625rem);
  --t-small: clamp(0.8rem, 0.4vw + 0.7rem, 0.875rem);
  --t-micro: clamp(0.6rem, 0.18vw + 0.56rem, 0.6875rem);

  --lh-display: 0.92;
  --lh-body: 1.62;
  --track-micro: 0.3em;
  --track-display: -0.018em;

  /* ---- rhythm ----------------------------------------------------------- */
  --pad-x: clamp(1.25rem, 4.6vw, 5.5rem);
  --section-y: clamp(3.75rem, 7.5vh, 6.5rem);
  --section-y-lg: clamp(5rem, 11vh, 9rem);
  --gutter: clamp(0.75rem, 1.4vw, 1.75rem);
  --rule-w: 1px;
  --header-h: clamp(4.25rem, 6vw, 6rem);
  --max: 1720px;

  /* ---- motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-mask: cubic-bezier(0.62, 0.05, 0.01, 0.99);
  --dur-fast: 320ms;
  --dur: 620ms;
  --dur-slow: 1100ms;
  --dur-mask: 1300ms;

  color-scheme: dark light;
}

[data-theme='dark'] {
  --bg: var(--ink);
  --fg: var(--bone);
  --fg-dim: rgb(243 241 237 / 0.58);
  --fg-faint: rgb(243 241 237 / 0.32);
  --rule: rgb(243 241 237 / 0.16);
  --rule-strong: rgb(243 241 237 / 0.34);
  --plate-bg: #1a1a1a;
}

[data-theme='void'] {
  --bg: var(--void);
  --fg: var(--bone);
  --fg-dim: rgb(243 241 237 / 0.58);
  --fg-faint: rgb(243 241 237 / 0.3);
  --rule: rgb(243 241 237 / 0.14);
  --rule-strong: rgb(243 241 237 / 0.32);
  --plate-bg: #101010;
}

[data-theme='bone'] {
  --bg: var(--bone);
  --fg: var(--ink);
  --fg-dim: rgb(11 11 11 / 0.58);
  --fg-faint: rgb(11 11 11 / 0.34);
  --rule: rgb(11 11 11 / 0.14);
  --rule-strong: rgb(11 11 11 / 0.3);
  --plate-bg: var(--bone-deep);
}

/* ==========================================================================
   Reset, document, typography primitives
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Scroll behaviour is deliberately left at `auto`: the smoothing layer in
   assets/js/modules/scroll.js drives window.scrollTo every frame, and a CSS
   smooth behaviour would animate each of those writes against it. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ol,
ul {
  margin: 0;
}

ol[class],
ul[class] {
  list-style: none;
  padding: 0;
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: 300;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color 700ms var(--ease-out), color 700ms var(--ease-out);
}

body[data-lock] {
  overflow: hidden;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

/* Every image carries width/height attributes so the browser can reserve its
   box. Those attributes are presentational hints, so any rule that sets only a
   CSS width would leave the attribute height in place and squash the image.
   Defaulting height to auto neutralises that; the few frames that need to fill
   their box set `height: 100%` on a class, which wins. */
img {
  height: auto;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

button {
  cursor: pointer;
  padding: 0;
  text-align: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--fg);
  color: var(--bg);
}

:focus-visible {
  outline: 1px solid var(--fg);
  outline-offset: 0.35em;
}

.u-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 200;
  padding: 0.7em 1.2em;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease-out);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* ---- type primitives ----------------------------------------------------- */

.display {
  font-family: var(--display);
  font-weight: 300;
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}

.micro {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 400;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  /* Wide tracking needs generous leading or wrapped labels read as a block. */
  line-height: 1.75;
}

.micro--tight {
  line-height: 1.35;
}

.note {
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--fg-faint);
  max-width: 40ch;
  text-wrap: pretty;
}

.lede {
  font-size: var(--t-lede);
  line-height: 1.45;
  font-weight: 300;
  text-wrap: pretty;
}

.body-copy {
  max-width: 62ch;
  color: var(--fg-dim);
  text-wrap: pretty;
}

.body-copy + .body-copy {
  margin-top: 1.35em;
}

.rule {
  height: var(--rule-w);
  background: var(--rule);
  border: 0;
  width: 100%;
  transform-origin: left center;
}

/* ==========================================================================
   Layout: sections, editorial grid, photographic plates, reveal choreography
   ========================================================================== */

.section {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding-block: var(--section-y);
  isolation: isolate;
}

.section--flush {
  padding-block: 0;
}
.section--tall {
  padding-block: var(--section-y-lg);
}
.section--top-flush {
  padding-block-start: 0;
}

.shell {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

@media (max-width: 899px) {
  .grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .grid > * {
    grid-column: 1 / -1;
  }
}

@media (min-width: 900px) {
  /* Two halves of a form row. */
  .grid--split > * {
    grid-column-end: span 6;
  }
}

/* ---- section headers ----------------------------------------------------- */

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
  padding-block-end: clamp(1.5rem, 3vw, 2.75rem);
  border-block-end: var(--rule-w) solid var(--rule);
  margin-block-end: clamp(2rem, 5vw, 4.5rem);
}

.section-head__label {
  display: flex;
  align-items: baseline;
  gap: 0.9em;
  color: var(--fg-dim);
}

.section-head__index {
  color: var(--fg-faint);
}

/* ==========================================================================
   Photographic plate
   The original files are never modified; framing happens here, in CSS.
   ========================================================================== */

.plate {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--plate-bg);
  margin: 0;
}

.plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 40%);
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
}

.plate img.is-loaded {
  opacity: 1;
}

.plate--45 { aspect-ratio: 4 / 5; }
.plate--23 { aspect-ratio: 2 / 3; }
.plate--34 { aspect-ratio: 3 / 4; }
.plate--169 { aspect-ratio: 16 / 9; }

.plate figcaption {
  margin-block-start: 0.9rem;
  color: var(--fg-faint);
}

/* ---- reveal choreography ------------------------------------------------- */

[data-anim] {
  --anim-delay: 0ms;
}

/* Photographs do not travel. The frame fades up while the image settles out of
   a slight over-scale — the photograph arrives already in place, which reads
   far calmer than a panel sliding in. */
[data-anim='plate'] {
  opacity: 0;
}

[data-anim='plate'] .plate img {
  transform: scale(1.07);
}

.js-ready [data-anim='plate'] {
  transition: opacity 1000ms var(--ease-out);
  transition-delay: var(--anim-delay);
}

.js-ready [data-anim='plate'] .plate img {
  transition: transform var(--dur-mask) var(--ease-out-soft), opacity 900ms var(--ease-out);
  transition-delay: var(--anim-delay);
}

[data-anim='plate'].is-in {
  opacity: 1;
}

[data-anim='plate'].is-in .plate img {
  transform: scale(1);
}

/* Line-by-line text reveal. */
/* The clipping box is grown slightly so descenders and italic tails are never
   shaved off by the mask, then pulled back so the rhythm is unchanged. */
.line {
  display: block;
  overflow: hidden;
  padding-block-end: 0.14em;
  margin-block-end: -0.14em;
}

.line > span {
  display: block;
  transform: translate3d(0, 110%, 0);
}

.js-ready .line > span {
  transition: transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--anim-delay);
}

.is-in .line > span,
.line.is-in > span {
  transform: translate3d(0, 0, 0);
}

/* Soft fade + rise for supporting elements. */
[data-anim='rise'] {
  opacity: 0;
  transform: translate3d(0, 1.6rem, 0);
}

.js-ready [data-anim='rise'] {
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--anim-delay);
}

[data-anim='rise'].is-in {
  opacity: 1;
  transform: none;
}

[data-anim='fade'] {
  opacity: 0;
}

.js-ready [data-anim='fade'] {
  transition: opacity var(--dur-slow) var(--ease-out);
  transition-delay: var(--anim-delay);
}

[data-anim='fade'].is-in {
  opacity: 1;
}

/* Hairline that draws itself. */
[data-anim='rule'] {
  transform: scaleX(0);
}

.js-ready [data-anim='rule'] {
  transition: transform var(--dur-slow) var(--ease-in-out);
  transition-delay: var(--anim-delay);
}

[data-anim='rule'].is-in {
  transform: scaleX(1);
}

/* Before the motion layer boots, nothing should be hidden. */
html:not(.js) [data-anim],
html:not(.js) .line > span {
  opacity: 1 !important;
  transform: none !important;
}

html:not(.js) [data-anim='plate'] .plate img {
  transform: none !important;
}

html:not(.js) .plate img {
  opacity: 1;
}

/* ==========================================================================
   Site chrome: loader, masthead, fullscreen menu, cursor, footer
   ========================================================================== */

/* ---- loading experience -------------------------------------------------- */

.loader {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  background: var(--void);
  color: var(--bone);
  transition: opacity 700ms var(--ease-out), visibility 700ms;
}

.loader[hidden] {
  display: none;
}

.loader__inner {
  display: grid;
  justify-items: center;
  gap: clamp(1.6rem, 3vw, 2.4rem);
  width: min(23rem, 68vw);
}

.loader__logo {
  width: min(15rem, 46vw);
  height: auto;
  opacity: 0;
  filter: brightness(0) invert(1);
  transform: translate3d(0, 0.6rem, 0);
  animation: loader-mark 1200ms var(--ease-out) 120ms forwards;
}

.loader__track {
  position: relative;
  width: 100%;
  height: 1px;
  background: rgb(243 241 237 / 0.16);
  overflow: hidden;
}

.loader__bar {
  position: absolute;
  inset: 0;
  background: var(--bone);
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
  transition: transform 420ms var(--ease-out);
}

.loader__meta {
  display: flex;
  justify-content: space-between;
  width: 100%;
  color: rgb(243 241 237 / 0.5);
}

.loader.is-out {
  opacity: 0;
  visibility: hidden;
}

@keyframes loader-mark {
  to {
    opacity: 1;
    transform: none;
  }
}

/* The first paint of a page is held behind a thin veil that lifts as the
   transition completes; this keeps navigation continuous rather than abrupt. */
.veil {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: var(--void);
  transform-origin: bottom center;
  transform: scaleY(0);
  pointer-events: none;
}

.veil.is-covering {
  transform-origin: bottom center;
  transform: scaleY(1);
  transition: transform 620ms var(--ease-in-out);
}

.veil.is-lifting {
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform 760ms var(--ease-in-out);
}

html.is-entering .veil {
  transform: scaleY(1);
  transform-origin: top center;
}

.veil__mark {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: min(14rem, 42vw);
  height: auto;
  translate: -50% -50%;
  filter: brightness(0) invert(1);
  opacity: 0;
  transition: opacity 380ms var(--ease-out);
}

.veil.is-covering .veil__mark,
html.is-entering .veil__mark {
  opacity: 0.9;
  transition-delay: 220ms;
}

.veil.is-lifting .veil__mark {
  opacity: 0;
  transition-delay: 0ms;
}

/* ---- masthead ------------------------------------------------------------ */

.masthead {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  /* Above the fullscreen menu, so the mark and the close control stay reachable. */
  z-index: 100;
  --tone-fg: var(--bone);
  --logo-invert: 1;
  color: var(--tone-fg);
  transition: color 520ms var(--ease-out), transform 620ms var(--ease-out), opacity 400ms linear;
  mix-blend-mode: normal;
}

.masthead[data-tone='light'] {
  --tone-fg: var(--ink);
  --logo-invert: 0;
}

/* While the menu or the viewer is open the backdrop is black, whatever section
   happens to be behind it. */
body[data-lock] .masthead {
  --tone-fg: var(--bone);
  --logo-invert: 1;
}

.masthead.is-hidden {
  transform: translate3d(0, -110%, 0);
}

.masthead__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  block-size: var(--header-h);
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.logo img {
  width: clamp(4.75rem, 6vw, 6.5rem);
  height: auto;
  filter: brightness(0) invert(var(--logo-invert));
  transition: filter 520ms var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.logo:hover img {
  opacity: 0.62;
}

.nav {
  display: none;
  align-items: baseline;
  gap: clamp(1.4rem, 2.6vw, 2.8rem);
}

@media (min-width: 1000px) {
  .nav {
    display: flex;
  }
}

.nav__link {
  position: relative;
  padding-block: 0.35em;
  color: currentColor;
  opacity: 0.72;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.nav__link::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 480ms var(--ease-out);
}

.nav__link:hover,
.nav__link:focus-visible,
.nav__link[aria-current='page'] {
  opacity: 1;
}

.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current='page']::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.masthead__end {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}

.masthead__phone {
  display: none;
  color: currentColor;
  opacity: 0.72;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.masthead__phone:hover {
  opacity: 1;
}

@media (min-width: 1240px) {
  .masthead__phone {
    display: inline-block;
  }
}

/* ---- menu button --------------------------------------------------------- */

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  color: currentColor;
  z-index: 101;
}

.menu-toggle__label {
  position: relative;
  display: inline-block;
  min-width: 4.6em;
  height: 1.5em;
  overflow: hidden;
}

.menu-toggle__label span {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  display: block;
  transition: transform 520ms var(--ease-out), opacity 380ms var(--ease-out);
}

.menu-toggle__label span:last-child {
  transform: translate3d(0, 100%, 0);
  opacity: 0;
}

.menu-toggle[aria-expanded='true'] .menu-toggle__label span:first-child {
  transform: translate3d(0, -100%, 0);
  opacity: 0;
}

.menu-toggle[aria-expanded='true'] .menu-toggle__label span:last-child {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.menu-toggle__bars {
  display: grid;
  gap: 5px;
  width: 1.5rem;
}

.menu-toggle__bars i {
  display: block;
  height: 1px;
  background: currentColor;
  transform-origin: right center;
  transition: transform 520ms var(--ease-out);
}

.menu-toggle:hover .menu-toggle__bars i:first-child {
  transform: scaleX(0.6);
}

.menu-toggle:hover .menu-toggle__bars i:last-child {
  transform: scaleX(0.8);
}

.menu-toggle[aria-expanded='true'] .menu-toggle__bars i:first-child {
  transform: translateY(3px) rotate(-8deg);
}

.menu-toggle[aria-expanded='true'] .menu-toggle__bars i:last-child {
  transform: translateY(-3px) rotate(8deg);
}

/* ---- fullscreen menu ----------------------------------------------------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--void);
  color: var(--bone);
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 900ms var(--ease-mask), visibility 900ms;
}

.menu.is-open {
  visibility: visible;
  clip-path: inset(0 0 0 0);
}

.menu__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  height: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding: calc(var(--header-h) + clamp(1.5rem, 4vh, 3rem)) var(--pad-x) clamp(1.75rem, 5vh, 3rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu__list {
  display: grid;
  gap: clamp(0.1rem, 0.8vh, 0.5rem);
}

.menu__item {
  overflow: hidden;
  border-block-end: 1px solid rgb(243 241 237 / 0.12);
}

.menu__item:last-child {
  border-block-end: 0;
}

.menu__link {
  display: flex;
  align-items: baseline;
  gap: clamp(0.8rem, 2vw, 1.6rem);
  padding-block: clamp(0.5rem, 1.6vh, 1rem);
  transform: translate3d(0, 110%, 0);
  transition: transform 900ms var(--ease-out), opacity 500ms var(--ease-out);
  opacity: 0;
}

.menu.is-open .menu__link {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.menu__index {
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  color: rgb(243 241 237 / 0.4);
  min-width: 2.2em;
}

.menu__word {
  position: relative;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.35rem, 8vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  transition: transform 620ms var(--ease-out), opacity 420ms var(--ease-out);
}

.menu__note {
  margin-inline-start: auto;
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: rgb(243 241 237 / 0.35);
  opacity: 0;
  transform: translate3d(-0.6rem, 0, 0);
  transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out);
  display: none;
}

@media (min-width: 720px) {
  .menu__note {
    display: block;
  }
  .menu__link:hover .menu__word {
    transform: translate3d(clamp(0.6rem, 1.4vw, 1.4rem), 0, 0);
  }
  .menu__link:hover .menu__note {
    opacity: 1;
    transform: none;
  }
}

.menu__foot {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: 1fr;
  padding-block-start: clamp(1.25rem, 3vh, 2rem);
  border-block-start: 1px solid rgb(243 241 237 / 0.12);
  color: rgb(243 241 237 / 0.55);
  opacity: 0;
  transform: translate3d(0, 1rem, 0);
  transition: opacity 600ms var(--ease-out) 320ms, transform 700ms var(--ease-out) 320ms;
}

.menu.is-open .menu__foot {
  opacity: 1;
  transform: none;
}

@media (min-width: 720px) {
  .menu__foot {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
  }
}

.menu__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.15rem;
}

/* ---- custom cursor ------------------------------------------------------- */

/* A disc that trails the pointer and zooms open over anything interactive.
   It adopts the tone of the section it is over rather than inverting the page. */
.cursor {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  /* Above every other layer, including the viewer. */
  z-index: 150;
  pointer-events: none;
  opacity: 0;
  /* Position only — no transition here, the trailing is eased in the rAF loop. */
  transform: translate3d(-200px, -200px, 0);
  transition: opacity 320ms var(--ease-out);
  will-change: transform;

  --cursor-ink: var(--bone);
  --cursor-face: var(--ink);
}

.cursor[data-tone='light'] {
  --cursor-ink: var(--ink);
  --cursor-face: var(--bone);
}

.cursor.is-active {
  opacity: 1;
}

.cursor__disc {
  display: grid;
  place-items: center;
  width: 5.25rem;
  height: 5.25rem;
  margin: -2.625rem 0 0 -2.625rem;
  border-radius: 50%;
  background: var(--cursor-ink);
  color: var(--cursor-face);
  transform: scale(0.115);
  transition: transform 620ms var(--ease-out-soft), background-color 420ms var(--ease-out),
    color 420ms var(--ease-out);
}

.cursor__label {
  font-family: var(--sans);
  font-size: 0.5625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.55);
  transition: opacity 260ms var(--ease-out), transform 420ms var(--ease-out-soft);
}

.cursor.is-labelled .cursor__disc {
  transform: scale(1);
}

.cursor.is-labelled .cursor__label {
  opacity: 1;
  transform: none;
  transition-delay: 90ms;
}

.cursor.is-pressed .cursor__disc {
  transform: scale(0.075);
}

.cursor.is-labelled.is-pressed .cursor__disc {
  transform: scale(0.86);
}

@media (hover: none), (pointer: coarse) {
  .cursor {
    display: none;
  }
}

/* ---- footer -------------------------------------------------------------- */

.colophon {
  background: var(--void);
  color: var(--bone);
  padding-block: clamp(3.5rem, 9vh, 8rem) clamp(1.75rem, 4vh, 3rem);
  overflow: hidden;
}

.colophon__mark {
  display: block;
  width: 100%;
  margin-block-end: clamp(2.25rem, 5vw, 4rem);
  padding-block-end: clamp(1.75rem, 4vw, 3rem);
  border-block-end: 1px solid rgb(243 241 237 / 0.12);
}

.colophon__mark img {
  width: clamp(6.5rem, 11vw, 10.5rem);
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.colophon__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  padding-block-end: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 700px) {
  .colophon__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1080px) {
  .colophon__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  }
}

.colophon__title {
  color: rgb(243 241 237 / 0.4);
  margin-block-end: 1.4em;
}

.colophon__list {
  display: grid;
  gap: 0.5em;
}

.colophon__lede {
  font-family: var(--display);
  font-size: var(--t-h4);
  line-height: 1.3;
  color: var(--bone);
  max-width: 22ch;
}

.colophon__base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  align-items: baseline;
  padding-block-start: clamp(1.5rem, 3vw, 2.25rem);
  border-block-start: 1px solid rgb(243 241 237 / 0.14);
  color: rgb(243 241 237 / 0.42);
}

.colophon__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

/* ==========================================================================
   Components: links, buttons, story index, horizontal reel, viewer
   ========================================================================== */

/* ---- link + button treatments -------------------------------------------- */

/* Links carry no permanent rule; the hairline draws itself in from the left on
   hover and retracts to the left on leave. */
.link {
  position: relative;
  display: inline-block;
  padding-block-end: 0.18em;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.link::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 460ms var(--ease-out);
}

.link:hover::after,
.link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* A rule that is always present, for the one or two links that anchor a block. */
.link--ruled::after {
  transform: scaleX(1);
  transform-origin: left center;
  opacity: 0.35;
}

.link--ruled:hover::after,
.link--ruled:focus-visible::after {
  opacity: 1;
}

.action {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  padding: 1.1em 1.9em;
  border: 1px solid var(--rule-strong);
  color: var(--fg);
  overflow: hidden;
  position: relative;
  isolation: isolate;
  transition: color 480ms var(--ease-out), border-color 480ms var(--ease-out);
}

.action::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fg);
  transform: translate3d(0, 101%, 0);
  transition: transform 620ms var(--ease-mask);
}

.action:hover,
.action:focus-visible {
  color: var(--bg);
  border-color: var(--fg);
}

.action:hover::before,
.action:focus-visible::before {
  transform: translate3d(0, 0, 0);
}

.action__arrow {
  display: inline-block;
  transition: transform 520ms var(--ease-out);
}

.action:hover .action__arrow {
  transform: translateX(0.35em);
}

/* ---- story index (editorial list with hover preview) --------------------- */

.index {
  position: relative;
  border-block-start: var(--rule-w) solid var(--rule);
}

.index__row {
  position: relative;
  display: block;
  border-block-end: var(--rule-w) solid var(--rule);
}

.index__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: clamp(0.9rem, 2.4vw, 2.5rem);
  padding-block: clamp(1.1rem, 2.6vw, 2rem);
  transition: opacity 500ms var(--ease-out);
}

.index__num {
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  color: var(--fg-faint);
  transition: color 480ms var(--ease-out);
}

.index__title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.6rem, 4.2vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  transition: transform 620ms var(--ease-out);
  will-change: transform;
}

.index__aside {
  display: none;
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--fg-faint);
  transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out);
}

@media (min-width: 760px) {
  .index__aside {
    display: block;
    opacity: 0.55;
  }
  .index__link:hover .index__title {
    transform: translate3d(clamp(0.6rem, 1.6vw, 1.6rem), 0, 0);
  }
  .index__link:hover .index__aside {
    opacity: 1;
  }
  /* Everything else recedes while one row is hovered. */
  .index:hover .index__link {
    opacity: 0.38;
  }
  .index:hover .index__link:hover {
    opacity: 1;
  }
}

/* Floating preview that follows the pointer across the index. */
.index__preview {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 60;
  width: clamp(13rem, 17vw, 19rem);
  aspect-ratio: 4 / 5;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  transform: translate3d(-50%, -50%, 0) scale(0.94);
  transition: opacity 420ms var(--ease-out), transform 620ms var(--ease-out);
  will-change: transform;
  background: var(--plate-bg);
}

.index__preview.is-visible {
  opacity: 1;
}

.index__preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 460ms var(--ease-out);
}

.index__preview img.is-current {
  opacity: 1;
}

@media (hover: none), (pointer: coarse), (max-width: 759px) {
  .index__preview {
    display: none;
  }
}

/* ---- horizontal reel ----------------------------------------------------- */

.reel {
  position: relative;
  overflow: hidden;
}

.reel__track {
  display: flex;
  gap: clamp(0.75rem, 1.6vw, 1.75rem);
  padding-inline: var(--pad-x);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  cursor: grab;
  padding-block-end: 0.5rem;
}

.reel__track::-webkit-scrollbar {
  display: none;
}

.reel__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.reel__item {
  flex: 0 0 auto;
  width: clamp(15rem, 27vw, 26rem);
  scroll-snap-align: center;
}

.reel__item:first-child {
  scroll-snap-align: start;
}

.reel__item--drop {
  margin-block-start: clamp(1.5rem, 5vw, 5rem);
}

.reel__figure {
  position: relative;
  overflow: hidden;
}

.reel__caption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-block-start: 0.85rem;
  color: var(--fg-faint);
}

.reel__progress {
  position: relative;
  height: 1px;
  margin: clamp(1.75rem, 4vw, 3rem) var(--pad-x) 0;
  background: var(--rule);
}

.reel__progress i {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  display: block;
  width: 22%;
  background: var(--fg);
  transform: translate3d(var(--reel-progress, 0%), 0, 0);
  transition: transform 120ms linear;
}

/* ---- gallery grids ------------------------------------------------------- */

.mosaic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.4vw, 1.5rem);
}

@media (min-width: 760px) {
  .mosaic {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.75rem, 1.6vw, 2rem);
  }
}

@media (min-width: 1180px) {
  .mosaic {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.mosaic__item {
  position: relative;
}

/* Every fifth and eleventh frame is dropped to break the grid's regularity. */
@media (min-width: 760px) {
  .mosaic__item:nth-child(5n + 3) {
    margin-block-start: clamp(0.75rem, 2vw, 2rem);
  }
  .mosaic__item:nth-child(7n + 6) {
    margin-block-start: clamp(0.5rem, 1.2vw, 1.25rem);
  }
}

.frame-button {
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.frame-button .plate img {
  transition: opacity 900ms var(--ease-out), transform 1400ms var(--ease-out-soft);
}

@media (hover: hover) {
  .frame-button:hover .plate img,
  .frame-link:hover .plate img {
    transform: scale(1.045);
  }
}

.frame-button:focus-visible {
  outline-offset: -2px;
}

/* ---- filters ------------------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  align-items: baseline;
}

.filter {
  position: relative;
  padding-block-end: 0.3em;
  color: var(--fg-faint);
  transition: color 420ms var(--ease-out);
}

.filter::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 480ms var(--ease-out);
}

.filter:hover,
.filter[aria-pressed='true'] {
  color: var(--fg);
}

.filter[aria-pressed='true']::after,
.filter:hover::after {
  transform: scaleX(1);
}

/* ---- viewer (lightbox) --------------------------------------------------- */

.viewer {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--void);
  color: var(--bone);
  opacity: 0;
  visibility: hidden;
  transition: opacity 520ms var(--ease-out), visibility 520ms;
}

.viewer.is-open {
  opacity: 1;
  visibility: visible;
}

.viewer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2.5vw, 1.75rem) var(--pad-x);
  color: rgb(243 241 237 / 0.6);
}

.viewer__stage {
  position: relative;
  min-height: 0;
}

/* Anchored to the stage's box so the photograph's max-height has something
   definite to resolve against, whatever the aspect ratio. */
.viewer__figure {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(0.25rem, 1vw, 1rem) clamp(0.75rem, 4vw, 4rem);
}

/* The height limit is expressed against the viewport rather than the parent:
   a percentage max-height on a replaced element inside a centred grid does not
   reliably resolve, and the photograph must never overflow the stage. */
.viewer__figure img {
  max-width: 100%;
  max-height: calc(100svh - var(--viewer-chrome, 9rem));
  width: auto;
  height: auto;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 620ms var(--ease-out), transform 900ms var(--ease-out);
}

@media (min-width: 760px) {
  .viewer {
    --viewer-chrome: 12.5rem;
  }
}

.viewer__figure img.is-current {
  opacity: 1;
  transform: none;
}

.viewer__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.9rem, 2.2vw, 1.6rem) var(--pad-x) clamp(1.25rem, 3vw, 2rem);
}

.viewer__nav {
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

.viewer__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.7em 0;
  color: rgb(243 241 237 / 0.65);
  transition: color 320ms var(--ease-out);
  min-height: 44px;
}

.viewer__btn:hover:not(:disabled),
.viewer__btn:focus-visible {
  color: var(--bone);
}

.viewer__btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.viewer__close {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  color: rgb(243 241 237 / 0.65);
  transition: color 320ms var(--ease-out);
}

.viewer__close:hover {
  color: var(--bone);
}

.viewer__count {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Homepage compositions
   ========================================================================== */

/* ---- hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  /* Phones open on a single full-screen frame; wider screens get the push-in,
     which needs a second screenful of scroll to travel through. */
  height: 100vh;
  height: 100svh;
  background: var(--void);
  color: var(--bone);
}

@media (min-width: 760px) {
  .hero {
    height: 180vh;
    height: 180svh;
  }
}

.hero__sticky {
  position: sticky;
  inset-block-start: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* On phones the photograph fills the screen: a 4:5 frame in a tall viewport
   crops the sides, which never costs a face. From tablet up the plate holds the
   complete 4:5 photograph and scrolling scales it until it covers the viewport,
   so the opening reads as a slow push into the frame. */
.hero__plate {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--plate-bg);
  transform: scale(var(--hero-scale, 1));
  transform-origin: center center;
  will-change: transform;
  margin: 0;
}

@media (min-width: 760px) {
  .hero__plate {
    width: auto;
    height: min(78svh, 92vw);
    aspect-ratio: 4 / 5;
  }
}

.hero__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 40%);
  opacity: 0;
  transition: opacity 1400ms var(--ease-out);
}

.hero__plate img.is-loaded {
  opacity: 1;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgb(0 0 0 / 0.5) 0%,
    rgb(0 0 0 / 0.06) 28%,
    rgb(0 0 0 / 0.28) 56%,
    rgb(0 0 0 / 0.82) 100%
  );
  opacity: var(--hero-scrim, 0.4);
  transition: opacity 400ms linear;
}

.hero__type {
  position: absolute;
  inset-inline: 0;
  inset-block-end: clamp(4.5rem, 12vh, 9rem);
  padding-inline: var(--pad-x);
  max-width: var(--max);
  margin-inline: auto;
  z-index: 2;
  pointer-events: none;
  transform: translate3d(0, var(--hero-type-y, 0), 0);
  opacity: var(--hero-type-o, 1);
}

.hero__kicker {
  color: rgb(243 241 237 / 0.6);
  margin-block-end: clamp(0.9rem, 2vw, 1.6rem);
}

.hero__title {
  font-size: var(--t-hero);
  text-shadow: 0 0.05em 0.5em rgb(0 0 0 / 0.28);
}

.hero__lede {
  margin-block-start: clamp(0.8rem, 1.6vw, 1.4rem);
  color: rgb(243 241 237 / 0.72);
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 2.15rem);
  line-height: 1.2;
}

.hero__corner {
  position: absolute;
  z-index: 2;
  color: rgb(243 241 237 / 0.6);
  pointer-events: none;
  opacity: var(--hero-type-o, 1);
}

.hero__corner--left {
  inset-block-end: clamp(1.25rem, 3vh, 2.5rem);
  inset-inline-start: var(--pad-x);
  display: none;
}

.hero__corner--right {
  inset-block-end: clamp(1.25rem, 3vh, 2.5rem);
  inset-inline-end: var(--pad-x);
  display: flex;
  align-items: center;
  gap: 0.75em;
}

@media (min-width: 760px) {
  .hero__corner--left {
    display: block;
  }
}

.hero__scroll-line {
  display: inline-block;
  width: clamp(2rem, 4vw, 3.5rem);
  height: 1px;
  background: currentColor;
  transform-origin: right center;
  animation: scroll-hint 2600ms var(--ease-in-out) infinite;
}

@keyframes scroll-hint {
  0%,
  100% {
    transform: scaleX(0.35);
    opacity: 0.5;
  }
  50% {
    transform: scaleX(1);
    opacity: 1;
  }
}

/* ---- statement ----------------------------------------------------------- */

.statement {
  position: relative;
}

.statement__head {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: end;
  margin-block-end: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 900px) {
  .statement__head {
    grid-template-columns: 1fr auto;
  }
}

.statement__title {
  font-size: var(--t-display);
  max-width: 16ch;
}

.statement__lede {
  max-width: 34ch;
  color: var(--fg-dim);
  font-family: var(--display);
  font-size: var(--t-h4);
  line-height: 1.35;
}

/* Two columns that finish level with one another: a tall photograph running off
   the left edge, and beside it the copy with a pair of frames beneath that grow
   to take up whatever height is left. Nothing is auto-placed, so nothing can be
   pushed onto a row of its own and open a hole in the middle of the section. */
.statement__body {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}

.statement__mid {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3vw, 2.75rem);
  min-height: 0;
}

.statement__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.2vw, 1.25rem);
  flex: 1 1 auto;
  min-height: clamp(11rem, 26vw, 24rem);
}

@media (min-width: 900px) {
  .statement__body {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: stretch;
  }
  .statement__figure--a {
    grid-column: 1 / span 5;
    grid-row: 1;
    margin-inline-start: calc(var(--pad-x) * -1);
  }
  .statement__mid {
    grid-column: 7 / span 6;
    grid-row: 1;
  }
  /* The pair fills the height the copy leaves over, so the two columns end level. */
  .statement__pair .plate--fill {
    height: 100%;
    aspect-ratio: auto;
  }
}

@media (min-width: 1280px) {
  .statement__figure--a {
    grid-column: 1 / span 6;
  }
  .statement__mid {
    grid-column: 8 / span 5;
  }
}

.statement__note {
  margin-block-start: clamp(1.5rem, 2.5vw, 2.25rem);
  padding-block-start: 1.25rem;
  border-block-start: var(--rule-w) solid var(--rule);
}

.statement__note-body {
  margin-block-start: 0.9em;
}

/* ---- chapters (story index) ---------------------------------------------- */

.chapters__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: center;
  justify-content: space-between;
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
}

.chapters__foot .note {
  max-width: 46ch;
}

/* ---- reel ---------------------------------------------------------------- */

.reel-section__head {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  margin-block-end: clamp(2rem, 5vw, 4rem);
}

/* ---- studio preview ------------------------------------------------------ */

.studio-preview__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}

@media (min-width: 960px) {
  .studio-preview__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
  .studio-preview__media {
    grid-column: 1 / span 5;
    position: relative;
  }
  .studio-preview__copy {
    grid-column: 7 / span 5;
  }
}

.studio-preview__stack {
  position: relative;
}

.studio-preview__stack .plate:last-child {
  position: absolute;
  inset-block-end: clamp(-3rem, -6vw, -5rem);
  inset-inline-end: clamp(-1.5rem, -4vw, -4rem);
  width: 44%;
  /* A thin band of the page colour separates the two frames instead of a shadow. */
  outline: clamp(0.4rem, 0.9vw, 0.85rem) solid var(--bg);
}

@media (max-width: 959px) {
  .studio-preview__stack .plate:last-child {
    position: relative;
    inset: auto;
    width: 62%;
    margin: -18% 0 0 auto;
  }
}

.studio-preview__quote {
  font-family: var(--display);
  font-size: var(--t-h3);
  line-height: 1.24;
  letter-spacing: -0.012em;
  max-width: 20ch;
  margin-block-end: clamp(1.5rem, 3vw, 2.25rem);
}

/* ---- figures / counters -------------------------------------------------- */

.figures__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 3vw, 3rem);
}

@media (min-width: 900px) {
  .figures__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.figure-stat {
  padding-block-start: clamp(1rem, 2vw, 1.5rem);
  border-block-start: var(--rule-w) solid var(--rule);
}

.figure-stat__value {
  display: flex;
  align-items: baseline;
  gap: 0.06em;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.75rem, 7vw, 6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums tabular-nums;
}

.figure-stat__suffix {
  font-size: 0.42em;
  letter-spacing: 0;
  opacity: 0.6;
}

.figure-stat__label {
  margin-block-start: clamp(0.75rem, 1.5vw, 1.1rem);
  color: var(--fg-faint);
  max-width: 22ch;
}

/* ---- interlude ----------------------------------------------------------- */

.interlude {
  position: relative;
  height: clamp(70svh, 92svh, 100svh);
  overflow: hidden;
  background: var(--void);
  display: grid;
  place-items: center;
  isolation: isolate;
}

.interlude__media {
  position: absolute;
  inset-block: -14%;
  inset-inline: 0;
  z-index: -2;
  transform: translate3d(0, var(--parallax, 0px), 0);
  will-change: transform;
}

.interlude__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 40%);
  opacity: 0;
  transition: opacity 1200ms var(--ease-out);
}

.interlude__media img.is-loaded {
  opacity: 1;
}

.interlude::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(0 0 0 / 0.46);
}

.interlude__quote {
  position: relative;
  max-width: min(22ch, 90vw);
  padding-inline: var(--pad-x);
  text-align: center;
  color: var(--bone);
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.9rem, 5.4vw, 5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-shadow: 0 0.05em 0.6em rgb(0 0 0 / 0.35);
}

.interlude__attribution {
  margin-block-start: clamp(1.25rem, 3vw, 2rem);
  color: rgb(243 241 237 / 0.6);
  font-family: var(--sans);
  font-style: normal;
}

/* A vertical caption set into the left margin, magazine-style. */
.interlude__spine {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: clamp(1rem, 2.5vw, 2.5rem);
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  color: rgb(243 241 237 / 0.5);
  display: none;
  pointer-events: none;
}

@media (min-width: 900px) {
  .interlude__spine {
    display: block;
  }
}

/* ---- services preview ---------------------------------------------------- */

.craft-list {
  border-block-start: var(--rule-w) solid var(--rule);
}

.craft-list__row {
  border-block-end: var(--rule-w) solid var(--rule);
}

.craft-list__link {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(0.9rem, 2.4vw, 2.5rem);
  align-items: baseline;
  padding-block: clamp(0.9rem, 2vw, 1.5rem);
  transition: opacity 480ms var(--ease-out);
}

.craft-list__num {
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  color: var(--fg-faint);
}

.craft-list__name {
  font-family: var(--display);
  font-size: clamp(1.35rem, 3.2vw, 2.6rem);
  line-height: 1.1;
  transition: transform 620ms var(--ease-out);
}

@media (min-width: 760px) {
  .craft-list:hover .craft-list__link {
    opacity: 0.34;
  }
  .craft-list:hover .craft-list__link:hover {
    opacity: 1;
  }
  .craft-list__link:hover .craft-list__name {
    transform: translate3d(clamp(0.5rem, 1.4vw, 1.4rem), 0, 0);
  }
}

/* ---- closing call to action ---------------------------------------------- */

.closing {
  position: relative;
  background: var(--void);
  color: var(--bone);
  overflow: hidden;
}

.closing__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: end;
}

@media (min-width: 960px) {
  .closing__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
  .closing__copy {
    grid-column: 1 / span 7;
  }
  .closing__media {
    grid-column: 9 / span 4;
  }
}

.closing__title {
  font-size: var(--t-display);
}

.closing__body {
  margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 40ch;
  color: rgb(243 241 237 / 0.6);
}

.closing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-block-start: clamp(2rem, 4vw, 3rem);
}

/* ==========================================================================
   Inner pages: page openings, stories, gallery, studio, services, contact
   ========================================================================== */

/* ---- page opening -------------------------------------------------------- */

.page-head {
  position: relative;
  background: var(--void);
  color: var(--bone);
  padding-block: calc(var(--header-h) + clamp(2rem, 6vh, 4rem)) clamp(2.5rem, 6vh, 4.5rem);
  overflow: hidden;
}

.page-head__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: end;
}

@media (min-width: 900px) {
  .page-head__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
  .page-head__copy {
    grid-column: 1 / span 7;
  }
  .page-head__media {
    grid-column: 9 / span 4;
  }
  /* Policy pages carry no photograph — the copy takes the full measure. */
  .page-head--text .page-head__copy {
    grid-column: 1 / span 9;
  }
}

.page-head__label {
  display: flex;
  align-items: baseline;
  gap: 1em;
  color: rgb(243 241 237 / 0.5);
  margin-block-end: clamp(1.25rem, 3vw, 2.25rem);
}

.page-head__title {
  font-size: var(--t-hero);
}

.page-head__lede {
  margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 46ch;
  color: rgb(243 241 237 / 0.62);
}

.page-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  margin-block-start: clamp(2rem, 4vw, 3rem);
  padding-block-start: clamp(1rem, 2vw, 1.5rem);
  border-block-start: 1px solid rgb(243 241 237 / 0.16);
  color: rgb(243 241 237 / 0.45);
}

/* ---- weddings index ------------------------------------------------------ */

.stories {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem) var(--gutter);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.story-card {
  grid-column: 1 / -1;
}

@media (min-width: 760px) {
  /* An asymmetric editorial rhythm: wide, narrow-offset, pair, tall. */
  .story-card:nth-child(6n + 1) {
    grid-column: 1 / span 7;
  }
  .story-card:nth-child(6n + 2) {
    grid-column: 8 / span 5;
    margin-block-start: clamp(2rem, 5vw, 5rem);
  }
  .story-card:nth-child(6n + 3) {
    grid-column: 1 / span 5;
  }
  .story-card:nth-child(6n + 4) {
    grid-column: 7 / span 6;
    margin-block-start: clamp(1.5rem, 3vw, 3rem);
  }
  .story-card:nth-child(6n + 5) {
    grid-column: 1 / span 5;
  }
  .story-card:nth-child(6n + 6) {
    grid-column: 7 / span 6;
    margin-block-start: clamp(2rem, 4vw, 4rem);
  }
}

.story-card__link {
  display: block;
}

.story-card__frame {
  position: relative;
  overflow: hidden;
}

.story-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-block-start: clamp(0.9rem, 1.6vw, 1.4rem);
  padding-block-start: clamp(0.75rem, 1.4vw, 1.1rem);
  border-block-start: var(--rule-w) solid var(--rule);
}

.story-card__title {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.8vw, 2.35rem);
  line-height: 1.1;
  transition: transform 560ms var(--ease-out);
}

.story-card__link:hover .story-card__title {
  transform: translate3d(0.35rem, 0, 0);
}

.story-card__index {
  color: var(--fg-faint);
}

.story-card__note {
  margin-block-start: 0.75rem;
  color: var(--fg-faint);
  max-width: 46ch;
}

/* ---- single story -------------------------------------------------------- */

.story-open {
  position: relative;
  height: 100svh;
  min-height: 34rem;
  overflow: hidden;
  background: var(--void);
  color: var(--bone);
}

.story-open__media {
  position: absolute;
  inset-block: -10%;
  inset-inline: 0;
  transform: translate3d(0, var(--parallax, 0px), 0);
  will-change: transform;
}

.story-open__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 38%);
  opacity: 0;
  transition: opacity 1200ms var(--ease-out);
}

.story-open__media img.is-loaded {
  opacity: 1;
}

.story-open::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.5) 0%, rgb(0 0 0 / 0.12) 40%, rgb(0 0 0 / 0.78) 100%);
}

.story-open__type {
  position: absolute;
  inset-block-end: clamp(2.5rem, 8vh, 6rem);
  inset-inline: 0;
  z-index: 2;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.story-open__title {
  font-size: var(--t-hero);
}

.story-open__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2.25rem;
  margin-block-start: clamp(1.25rem, 2.5vw, 2rem);
  color: rgb(243 241 237 / 0.62);
}

.story-intro {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
}

@media (min-width: 900px) {
  .story-intro {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
  .story-note {
    grid-column: 2 / span 6;
  }
  .story-intro__credit {
    grid-column: 10 / span 3;
  }
}

.story-note {
  max-width: 44ch;
  font-family: var(--display);
  font-size: var(--t-h3);
  line-height: 1.28;
  letter-spacing: -0.01em;
}

.story-intro__credit {
  color: var(--fg-faint);
}

.chapter {
  padding-block: clamp(2rem, 4vw, 3.5rem) 0;
}

.chapter__head {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding-block-end: clamp(1rem, 2vw, 1.5rem);
  margin-block-end: clamp(2rem, 4vw, 3.5rem);
  border-block-end: var(--rule-w) solid var(--rule);
}

.chapter__name {
  font-family: var(--display);
  font-size: var(--t-h3);
  line-height: 1;
}

.chapter__count {
  margin-inline-start: auto;
  color: var(--fg-faint);
}

/* Sequence layouts — each block deliberately differs from its neighbour. */
.seq {
  display: grid;
  gap: clamp(0.75rem, 2vw, 2rem) var(--gutter);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin-block-end: clamp(1.5rem, 3vw, 3rem);
}

.seq > * {
  grid-column: 1 / -1;
}

.seq--solo > * {
  grid-column: 1 / -1;
}

@media (min-width: 760px) {
  .seq--solo > * {
    grid-column: 2 / span 10;
  }
  .seq--solo-left > * {
    grid-column: 1 / span 8;
  }
  .seq--solo-right > * {
    grid-column: 5 / span 8;
  }

  .seq--pair > *:nth-child(1) {
    grid-column: 1 / span 6;
  }
  .seq--pair > *:nth-child(2) {
    grid-column: 8 / span 5;
    margin-block-start: clamp(1.5rem, 4vw, 4rem);
  }

  .seq--pair-tight > *:nth-child(1) {
    grid-column: 2 / span 5;
  }
  .seq--pair-tight > *:nth-child(2) {
    grid-column: 7 / span 5;
    margin-block-start: clamp(1.25rem, 3vw, 3rem);
  }

  .seq--triptych > *:nth-child(1) {
    grid-column: 1 / span 4;
  }
  .seq--triptych > *:nth-child(2) {
    grid-column: 5 / span 4;
    margin-block-start: clamp(1.25rem, 3vw, 3rem);
  }
  .seq--triptych > *:nth-child(3) {
    grid-column: 9 / span 4;
  }

  .seq--stagger > *:nth-child(1) {
    grid-column: 1 / span 4;
    margin-block-start: clamp(1.5rem, 4vw, 4rem);
  }
  .seq--stagger > *:nth-child(2) {
    grid-column: 5 / span 4;
  }
  .seq--stagger > *:nth-child(3) {
    grid-column: 9 / span 4;
    margin-block-start: clamp(2.5rem, 6vw, 6rem);
  }
}

/* A monumental frame that touches both edges of the viewport.
   The photographs are all 4:5, so this keeps their native shape and simply lets
   them grow — a tall crop rather than a wide one, which never loses a face. */
.seq--bleed {
  grid-template-columns: 1fr;
  margin-inline: calc(var(--pad-x) * -1);
  width: calc(100% + var(--pad-x) * 2);
  margin-block-end: clamp(2.5rem, 6vw, 6rem);
}

.seq--bleed > * {
  grid-column: 1 / -1;
}

.seq--bleed .plate {
  aspect-ratio: 4 / 5;
  max-height: min(124svh, 68rem);
}

.story-close {
  position: relative;
  background: var(--void);
  color: var(--bone);
}

.story-next {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: end;
  padding-block: clamp(3rem, 8vw, 7rem);
}

@media (min-width: 860px) {
  .story-next {
    grid-template-columns: 1fr auto;
  }
}

.story-next__title {
  font-family: var(--display);
  font-size: var(--t-display);
  line-height: 1;
  transition: transform 620ms var(--ease-out);
}

.story-next__link:hover .story-next__title {
  transform: translate3d(clamp(0.5rem, 1.5vw, 1.5rem), 0, 0);
}

.story-next__thumb {
  width: clamp(7rem, 14vw, 12rem);
}

/* ---- gallery ------------------------------------------------------------- */

.gallery__bar {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: baseline;
  justify-content: space-between;
  padding-block: clamp(1rem, 2vw, 1.5rem);
  margin-block-end: clamp(2rem, 4vw, 3.5rem);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px);
  border-block-end: var(--rule-w) solid var(--rule);
}

.mosaic__item[hidden] {
  display: none;
}

.gallery__more {
  display: flex;
  justify-content: center;
  margin-block-start: clamp(2.5rem, 6vw, 5rem);
}

.gallery__empty {
  padding-block: clamp(3rem, 8vw, 6rem);
  text-align: center;
  color: var(--fg-faint);
}

/* ---- studio -------------------------------------------------------------- */

.studio-body {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem) var(--gutter);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.studio-body__aside {
  grid-column: 1 / -1;
}

.studio-body__copy {
  grid-column: 1 / -1;
}

@media (min-width: 960px) {
  .studio-body__aside {
    grid-column: 1 / span 4;
    position: sticky;
    inset-block-start: calc(var(--header-h) + 2rem);
    align-self: start;
  }
  .studio-body__copy {
    grid-column: 6 / span 6;
  }
}

.studio-body__copy p {
  font-size: clamp(1.02rem, 0.4vw + 0.92rem, 1.2rem);
  color: var(--fg-dim);
  max-width: 60ch;
}

.studio-body__copy p + p {
  margin-block-start: 1.5em;
}

.studio-body__copy p:first-child {
  color: var(--fg);
  font-family: var(--display);
  font-size: var(--t-h4);
  line-height: 1.42;
}

.disciplines {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.discipline {
  display: grid;
  gap: 0.7rem;
}

.discipline__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.discipline__name {
  font-family: var(--display);
  font-size: var(--t-h4);
}

.discipline__value {
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}

.discipline__track {
  height: 1px;
  background: var(--rule);
  overflow: hidden;
}

.discipline__bar {
  display: block;
  height: 100%;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1400ms var(--ease-out);
  transition-delay: var(--anim-delay, 0ms);
}

.is-in .discipline__bar {
  transform: scaleX(var(--level, 1));
}

.rooms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  color: var(--fg-faint);
}

/* ---- services ------------------------------------------------------------ */

.craft {
  border-block-start: var(--rule-w) solid var(--rule);
}

.craft__item {
  border-block-end: var(--rule-w) solid var(--rule);
}

.craft__inner {
  display: grid;
  gap: clamp(1rem, 2.5vw, 2rem) var(--gutter);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  padding-block: clamp(2rem, 4.5vw, 4rem);
  align-items: start;
}

.craft__num {
  grid-column: 1 / -1;
  color: var(--fg-faint);
}

.craft__name {
  grid-column: 1 / -1;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.85rem, 4.6vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.018em;
}

.craft__body {
  grid-column: 1 / -1;
  color: var(--fg-dim);
  max-width: 58ch;
}

.craft__media {
  grid-column: 1 / -1;
}

@media (min-width: 900px) {
  .craft__num {
    grid-column: 1 / span 1;
    padding-block-start: 0.75rem;
  }
  .craft__name {
    grid-column: 2 / span 4;
  }
  .craft__body {
    grid-column: 7 / span 4;
  }
  .craft__media {
    grid-column: 11 / span 2;
  }
}

/* ---- films --------------------------------------------------------------- */

.screening {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem) var(--gutter);
}

@media (min-width: 1000px) {
  .screening {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
  }
  .screening__preview {
    grid-column: 1 / span 7;
    position: sticky;
    inset-block-start: calc(var(--header-h) + 1.5rem);
  }
  .screening__list {
    grid-column: 9 / span 4;
  }
}

.film__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}

.film__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1400ms var(--ease-out-soft), opacity 420ms var(--ease-out);
}

.film__poster.is-swapping {
  opacity: 0;
}

.film__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.28) 0%, rgb(0 0 0 / 0.06) 45%, rgb(0 0 0 / 0.42) 100%);
  transition: opacity 500ms var(--ease-out);
  pointer-events: none;
}

.film__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
}

/* A single hairline circle — the only ornament on the page. */
.film__play-mark {
  width: clamp(3.5rem, 7vw, 5.5rem);
  height: clamp(3.5rem, 7vw, 5.5rem);
  border: 1px solid rgb(243 241 237 / 0.7);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: transform 620ms var(--ease-out), background-color 500ms var(--ease-out),
    border-color 500ms var(--ease-out);
}

.film__play-mark::before {
  content: '';
  width: 0;
  height: 0;
  margin-inline-start: 0.22em;
  border-block: 0.44em solid transparent;
  border-inline-start: 0.72em solid var(--bone);
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  transition: border-inline-start-color 500ms var(--ease-out);
}

@media (hover: hover) {
  .film__frame:hover .film__poster {
    transform: scale(1.035);
  }
  .film__play:hover .film__play-mark {
    transform: scale(1.08);
    background: var(--bone);
    border-color: var(--bone);
  }
  .film__play:hover .film__play-mark::before {
    border-inline-start-color: var(--ink);
  }
}

.film__play:focus-visible {
  outline-offset: -0.75rem;
}

.film__badge {
  position: absolute;
  inset-block-end: clamp(0.9rem, 2vw, 1.5rem);
  inset-inline-start: clamp(0.9rem, 2vw, 1.5rem);
  z-index: 2;
  color: rgb(243 241 237 / 0.75);
  pointer-events: none;
}

.film__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 3;
}

.film__frame.is-playing .film__poster,
.film__frame.is-playing .film__play,
.film__frame.is-playing .film__badge,
.film__frame.is-playing::after {
  opacity: 0;
  pointer-events: none;
}

.screening__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-block-start: clamp(0.9rem, 1.8vw, 1.4rem);
  padding-block-start: clamp(0.75rem, 1.4vw, 1.1rem);
  border-block-start: var(--rule-w) solid var(--rule);
}

.film__index {
  color: var(--fg-faint);
  margin-block-end: 0.35em;
  font-variant-numeric: tabular-nums;
}

.film__title {
  font-size: clamp(1.35rem, 2.6vw, 2.25rem);
  line-height: 1.1;
}

.film__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  color: var(--fg-faint);
}

/* ---- the list ------------------------------------------------------------ */

.screening__hint {
  color: var(--fg-faint);
  padding-block-end: 0.9rem;
  border-block-end: var(--rule-w) solid var(--rule);
}

@media (min-width: 1000px) {
  .screening__scroll {
    max-height: min(64svh, 40rem);
    overflow-y: auto;
    scrollbar-width: thin;
    overscroll-behavior: contain;
    /* The list fades out at its foot rather than stopping dead. */
    mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 3rem), transparent 100%);
  }
}

.film-group + .film-group {
  margin-block-start: clamp(1.5rem, 2.5vw, 2rem);
}

.film-group__name {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  padding-block: 0.9rem 0.5rem;
  background: var(--bg);
  font-size: var(--t-h4);
  line-height: 1.2;
  color: var(--fg);
}

.track {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 0.9rem;
  width: 100%;
  padding-block: 0.7rem;
  border-block-end: var(--rule-w) solid var(--rule);
  color: var(--fg-dim);
  transition: color 380ms var(--ease-out), padding-inline-start 420ms var(--ease-out);
}

.track__num {
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
  transition: color 380ms var(--ease-out);
}

.track__label {
  text-align: start;
}

.track__cue {
  opacity: 0;
  color: var(--fg-faint);
  transform: translate3d(-0.4rem, 0, 0);
  transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-out);
}

.track[aria-current='true'] {
  color: var(--fg);
}

.track[aria-current='true'] .track__num {
  color: var(--fg);
}

.track[aria-current='true'] .track__cue {
  opacity: 1;
  transform: none;
}

@media (hover: hover) {
  .track:hover {
    color: var(--fg);
    padding-inline-start: 0.5rem;
  }
  .track:hover .track__cue {
    opacity: 1;
    transform: none;
  }
}

/* ---- leadership board ---------------------------------------------------- */

.board {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem) var(--gutter);
}

.board__team {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem) var(--gutter);
}

@media (min-width: 700px) {
  .board__team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .board {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  /* The founder leads; the two team leaders sit alongside. */
  .person--lead {
    grid-column: 1 / span 6;
  }
  .board__team {
    grid-column: 8 / span 5;
    grid-template-columns: 1fr;
    align-content: start;
  }
}

/* The portrait is a small plate set beside the name, not a panel above it. */
.person {
  display: grid;
  grid-template-columns: clamp(4.5rem, 12vw, 7rem) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.person--lead {
  grid-template-columns: clamp(6rem, 16vw, 9.5rem) minmax(0, 1fr);
}

/* A frame reserved for a portrait. Until one is added it holds the person's
   initials, so the composition is complete either way. */
.person__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin: 0;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  border: 1px solid var(--rule);
}

.person__body {
  min-width: 0;
}

.person__portrait.has-photo {
  border-color: transparent;
}

.person__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.person__initials {
  font-size: clamp(1.05rem, 2.2vw, 1.6rem);
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--fg-faint);
}

.person--lead .person__initials {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.person__index {
  color: var(--fg-faint);
  margin-block-end: 0.6em;
}

.person__name {
  font-size: clamp(1.6rem, 3.4vw, 2.75rem);
  line-height: 1.05;
}

.person--lead .person__name {
  font-size: clamp(2rem, 4.6vw, 3.75rem);
}

.person__roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em 0.9em;
  margin-block-start: 0.6em;
  font-family: var(--display);
  font-size: var(--t-h4);
  line-height: 1.3;
}

/* A hairline bullet between roles, and again between crafts. */
.person__roles span + span::before,
.person__craft span + span::before {
  content: '·';
  margin-inline-end: 0.9em;
  opacity: 0.45;
}

.person__craft {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em 0.9em;
  margin-block-start: 1em;
  padding-block-start: 0.9em;
  border-block-start: var(--rule-w) solid var(--rule);
  color: var(--fg-faint);
  max-width: 46ch;
}

/* ---- security & data protection ------------------------------------------ */

.vault {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem) var(--gutter);
}

@media (min-width: 900px) {
  .vault {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
  }
  .vault__copy {
    grid-column: 1 / span 5;
    position: sticky;
    inset-block-start: calc(var(--header-h) + 2rem);
  }
  .vault__body {
    grid-column: 7 / span 6;
  }
}

.vault__heading {
  font-size: var(--t-h2);
  max-width: 18ch;
}

.vault__lede {
  margin-block-start: clamp(1rem, 2vw, 1.5rem);
  color: var(--fg-dim);
  max-width: 42ch;
}

.vault__body p {
  color: var(--fg-dim);
  max-width: 62ch;
}

.vault__body p + p {
  margin-block-start: 1.35em;
}

/* A band of archived frames running the full width, under the statement. */
.archive-band {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.2vw, 1.25rem);
  margin-block: clamp(2.5rem, 6vw, 5rem);
  padding-inline: var(--pad-x);
  max-width: var(--max);
  margin-inline: auto;
}

@media (min-width: 760px) {
  .archive-band {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  /* A slight stagger, so the band reads as a shelf rather than a strip. */
  .archive-band__frame:nth-child(even) {
    margin-block-start: clamp(1rem, 3vw, 3rem);
  }
}

.pledge {
  padding-block-start: clamp(1.5rem, 3vw, 2.5rem);
  border-block-start: 1px solid var(--rule);
}

.pledge__line {
  font-family: var(--display);
  font-size: var(--t-h3);
  line-height: 1.24;
  letter-spacing: -0.012em;
  max-width: 26ch;
}

.pledge__sign {
  margin-block-start: clamp(1rem, 2vw, 1.5rem);
  color: var(--fg-faint);
}

/* ---- policies ------------------------------------------------------------ */

.policy-block + .policy-block {
  margin-block-start: clamp(3rem, 6vw, 5rem);
}

.policy-block .chapter__head {
  margin-block-end: clamp(1.25rem, 2.5vw, 2rem);
}


.policy {
  max-width: 68ch;
}

.policy__section + .policy__section {
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
  padding-block-start: clamp(1.75rem, 3.5vw, 2.75rem);
  border-block-start: var(--rule-w) solid var(--rule);
}

.policy__heading {
  display: flex;
  align-items: baseline;
  gap: clamp(0.9rem, 2vw, 1.6rem);
  font-family: var(--display);
  font-weight: 300;
  font-size: var(--t-h3);
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin-block-end: clamp(1rem, 2vw, 1.5rem);
}

.policy p {
  color: var(--fg-dim);
  max-width: 60ch;
}

.policy p + p {
  margin-block-start: 1.2em;
}

.policy__foot {
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
  padding-block-start: clamp(1.5rem, 3vw, 2.25rem);
  border-block-start: var(--rule-w) solid var(--rule);
}

.policy__foot .note {
  max-width: 60ch;
}

/* ---- contact ------------------------------------------------------------- */

.contact-grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem) var(--gutter);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.contact-grid__details,
.contact-grid__form {
  grid-column: 1 / -1;
}

@media (min-width: 960px) {
  .contact-grid__details {
    grid-column: 1 / span 4;
  }
  .contact-grid__form {
    grid-column: 6 / span 7;
  }
}

.detail-block + .detail-block {
  margin-block-start: clamp(1.75rem, 3.5vw, 2.75rem);
  padding-block-start: clamp(1.25rem, 2.5vw, 2rem);
  border-block-start: var(--rule-w) solid var(--rule);
}

.detail-block__label {
  color: var(--fg-faint);
  margin-block-end: 0.85em;
}

.detail-block__list {
  display: grid;
  gap: 0.4em;
  font-family: var(--display);
  font-size: var(--t-h4);
  line-height: 1.35;
}

.field {
  position: relative;
  display: block;
  margin-block-end: clamp(1.5rem, 3vw, 2.25rem);
}

.field__label {
  display: block;
  color: var(--fg-faint);
  margin-block-end: 0.7em;
}

.field__input {
  width: 100%;
  padding-block: 0.85em;
  border-block-end: 1px solid var(--rule-strong);
  font-family: var(--display);
  font-size: var(--t-h4);
  color: var(--fg);
  transition: border-color 420ms var(--ease-out);
  background: transparent;
}

.field__input::placeholder {
  color: var(--fg-faint);
  opacity: 1;
}

.field__input:focus {
  outline: none;
  border-color: var(--fg);
}

.field__input:focus-visible {
  outline: none;
}

textarea.field__input {
  resize: vertical;
  min-height: 7.5rem;
  line-height: 1.45;
}

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  justify-content: space-between;
}

.form__note {
  color: var(--fg-faint);
  max-width: 34ch;
}

.form__status {
  min-height: 1.5em;
  margin-block-start: 1rem;
  color: var(--fg-dim);
}

.contact-channels {
  display: grid;
  gap: 0;
  border-block-start: var(--rule-w) solid var(--rule);
  margin-block-start: clamp(3rem, 7vw, 6rem);
}

.contact-channels__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: clamp(1rem, 2vw, 1.5rem);
  border-block-end: var(--rule-w) solid var(--rule);
  transition: padding-inline-start 520ms var(--ease-out);
}

@media (hover: hover) {
  .contact-channels__row:hover {
    padding-inline-start: 1rem;
  }
}

.contact-channels__name {
  font-family: var(--display);
  font-size: var(--t-h4);
}

.contact-channels__value {
  color: var(--fg-faint);
}

/* ==========================================================================
   Depth, glass and micro-interaction
   ==========================================================================

   An additive layer. It changes no colour, no size and no position in the
   static design — everything here is a translucent surface, a shadow, or a
   transform that only exists while a pointer is over an element or the page is
   moving. Remove this file and the site looks exactly the same at rest.

   Every effect is transform/opacity/filter only, and every one of them is
   switched off in 09-preferences.css when reduced motion is asked for.
   ========================================================================== */

:root {
  /* One shared glass recipe, tinted by whatever section it sits over. */
  --glass-blur: 18px;
  --glass-tint: rgb(11 11 11 / 0.55);
  --glass-edge: rgb(243 241 237 / 0.14);
  --glass-sheen: rgb(243 241 237 / 0.07);
  --lift: 0 1.5rem 3rem -1rem rgb(0 0 0 / 0.28);
}

/* ---- masthead: a pane of glass that appears once the page has moved -------- */

.masthead::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--glass-tint);
  border-block-end: 1px solid var(--glass-edge);
  opacity: 0;
  transition: opacity 620ms var(--ease-out);
  pointer-events: none;
}

/* A single highlight along the top edge, the way light catches real glass. */
.masthead::after {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: -1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-sheen) 22%, var(--glass-sheen) 78%, transparent);
  opacity: 0;
  transition: opacity 620ms var(--ease-out);
  pointer-events: none;
}

.masthead[data-tone='light']::before {
  --glass-tint: rgb(243 241 237 / 0.62);
  --glass-edge: rgb(11 11 11 / 0.1);
}

.masthead.is-glass::before,
.masthead.is-glass::after {
  opacity: 1;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .masthead.is-glass::before {
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
    background: color-mix(in srgb, var(--glass-tint) 72%, transparent);
  }
}

/* The menu sits above the masthead; the bar should not glaze over it. */
body[data-lock] .masthead::before,
body[data-lock] .masthead::after {
  opacity: 0;
}

/* ---- overlays ------------------------------------------------------------- */

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .menu {
    background: rgb(6 6 6 / 0.82);
    -webkit-backdrop-filter: blur(26px) saturate(1.1);
    backdrop-filter: blur(26px) saturate(1.1);
  }

  .viewer {
    background: rgb(4 4 4 / 0.88);
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
  }

  .gallery__bar {
    -webkit-backdrop-filter: blur(20px) saturate(1.1);
  }
}

/* ---- buttons: glass, and a specular sweep on hover ------------------------ */

.action {
  border-color: var(--rule-strong);
  will-change: transform;
  transform: translate3d(var(--magnet-x, 0px), var(--magnet-y, 0px), 0);
  transition: color 480ms var(--ease-out), border-color 480ms var(--ease-out),
    transform 620ms var(--ease-out), box-shadow 620ms var(--ease-out);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .action {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

/* A narrow band of light that crosses the button as the pointer arrives. */
.action::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: -40%;
  width: 32%;
  z-index: -1;
  background: linear-gradient(100deg, transparent, rgb(243 241 237 / 0.5), transparent);
  transform: translate3d(0, 0, 0) skewX(-14deg);
  opacity: 0;
  transition: opacity 200ms linear;
  pointer-events: none;
}

.action:hover::after,
.action:focus-visible::after {
  opacity: 1;
  animation: sheen 900ms var(--ease-out) forwards;
}

@keyframes sheen {
  from {
    transform: translate3d(0, 0, 0) skewX(-14deg);
  }
  to {
    transform: translate3d(460%, 0, 0) skewX(-14deg);
  }
}

.action.is-magnetic {
  box-shadow: var(--lift);
}

.menu-toggle,
.film__play,
.viewer__btn,
.viewer__close {
  transform: translate3d(var(--magnet-x, 0px), var(--magnet-y, 0px), 0);
  transition: transform 620ms var(--ease-out);
}

/* ---- photographs: depth under the pointer --------------------------------- */

/* The frame lifts a little and the photograph inside drifts toward the pointer.
   Both are transforms on elements that are already composited. */
.frame-button,
.frame-link,
.story-card__frame,
.film__frame {
  transform: translate3d(0, var(--card-lift, 0px), 0);
  transition: transform 720ms var(--ease-out), box-shadow 720ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .story-card__link:hover .story-card__frame,
  .frame-button:hover,
  .film__frame:hover {
    --card-lift: -6px;
    box-shadow: var(--lift);
  }

  /* Inside the frame the photograph answers the pointer, a few pixels at most. */
  .frame-button .plate img,
  .frame-link .plate img,
  .story-card__frame .plate img,
  .mosaic__item .plate img {
    transform: scale(1.001) translate3d(var(--tilt-x, 0px), var(--tilt-y, 0px), 0);
    transition: transform 900ms var(--ease-out), opacity 900ms var(--ease-out);
  }

  .frame-button:hover .plate img,
  .frame-link:hover .plate img,
  .story-card__link:hover .plate img {
    transform: scale(1.05) translate3d(var(--tilt-x, 0px), var(--tilt-y, 0px), 0);
  }

  /* A hairline of glass around a frame while it is being looked at. */
  .mosaic__item .frame-button::after,
  .story-card__frame::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border: 1px solid rgb(243 241 237 / 0);
    transition: border-color 620ms var(--ease-out);
    pointer-events: none;
  }

  .mosaic__item .frame-button:hover::after,
  .story-card__link:hover .story-card__frame::after {
    border-color: rgb(243 241 237 / 0.22);
  }
}

/* ---- the film play control ------------------------------------------------ */

.film__play-mark {
  position: relative;
  overflow: hidden;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .film__play-mark {
    -webkit-backdrop-filter: blur(6px) saturate(1.2);
    backdrop-filter: blur(6px) saturate(1.2);
    background: rgb(243 241 237 / 0.08);
  }
}

/* A slow ring that breathes outward, so the control reads as live. */
.film__play::before {
  content: '';
  position: absolute;
  inset: 50%;
  width: clamp(3.5rem, 7vw, 5.5rem);
  height: clamp(3.5rem, 7vw, 5.5rem);
  margin: calc(clamp(3.5rem, 7vw, 5.5rem) / -2);
  border: 1px solid rgb(243 241 237 / 0.4);
  border-radius: 50%;
  animation: pulse-ring 3200ms var(--ease-out) infinite;
  pointer-events: none;
}

@keyframes pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  70%,
  100% {
    transform: scale(1.55);
    opacity: 0;
  }
}

.film__frame.is-playing .film__play::before {
  animation: none;
  opacity: 0;
}

/* ---- scroll-linked motion ------------------------------------------------- */

/* Frames drift a few pixels against the page as it scrolls. The value is set
   once per frame by the shared rAF loop in assets/js/modules/scenes.js. */
[data-drift] .plate img,
[data-drift] > img {
  transform: translate3d(0, var(--drift, 0px), 0) scale(1.06);
}

.js-ready [data-drift] .plate img,
.js-ready [data-drift] > img {
  transition: opacity 900ms var(--ease-out);
}

/* A hairline that draws itself as its section arrives. */
.section-head,
.chapter__head,
.story-card__meta,
.screening__meta {
  position: relative;
}

.section-head::after,
.chapter__head::after {
  content: '';
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: var(--fg);
  opacity: 0.25;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1400ms var(--ease-out);
}

.section-head.is-in::after,
.is-in .chapter__head::after,
.chapter__head.is-in::after {
  transform: scaleX(1);
}

/* ---- text and link micro-interaction -------------------------------------- */

.nav__link,
.filter,
.track,
.index__link,
.craft-list__link,
.menu__link,
.contact-channels__row {
  will-change: auto;
}

.logo img {
  transform: translate3d(0, 0, 0) scale(1);
  transition: filter 520ms var(--ease-out), opacity var(--dur-fast) var(--ease-out),
    transform 620ms var(--ease-out);
}

.logo:hover img {
  transform: scale(1.04);
}

/* The counters' figures settle in with a touch of weight. */
.figure-stat {
  transition: transform 900ms var(--ease-out), opacity 900ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .figure-stat:hover {
    transform: translate3d(0, -4px, 0);
  }
}

/* ---- keep compositing cheap ----------------------------------------------- */

.hero__plate,
.interlude__media,
.story-open__media,
.cursor,
.index__preview {
  backface-visibility: hidden;
}

/* ==========================================================================
   Reduced motion + print
   Visitors who ask for less motion get the same layout, art direction and
   photography — simply without travel, parallax or scroll-linked scaling.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Opacity fades are gentle enough to keep, at a shorter duration. */
  .plate img,
  .hero__plate img,
  .interlude__media img,
  .story-open__media img,
  [data-anim='fade'],
  .viewer,
  .viewer__figure img {
    transition-duration: 220ms !important;
  }

  [data-anim] {
    opacity: 1 !important;
    transform: none !important;
  }

  [data-anim='plate'] .plate img,
  .line > span {
    transform: none !important;
  }

  .hero {
    height: 100svh;
  }

  .hero__plate {
    transform: none !important;
  }

  .hero__type,
  .hero__corner {
    transform: none !important;
    opacity: 1 !important;
  }

  .interlude__media,
  .story-open__media {
    transform: none !important;
  }

  .cursor {
    display: none !important;
  }

  .menu {
    transition: none !important;
  }

  .discipline__bar {
    transform: scaleX(var(--level, 1)) !important;
  }

  .hero__scroll-line,
  .film__play::before {
    animation: none !important;
    transform: scaleX(1) !important;
  }

  /* The added depth layer: no lift, no lean, no drift, no sweep. Glass stays,
     because a translucent surface is not motion. */
  .action,
  .menu-toggle,
  .film__play,
  .viewer__btn,
  .viewer__close,
  .frame-button,
  .frame-link,
  .story-card__frame,
  .film__frame,
  .figure-stat,
  .logo img {
    transform: none !important;
    box-shadow: none !important;
  }

  [data-drift] .plate img,
  [data-drift] > img,
  .frame-button .plate img,
  .frame-link .plate img,
  .story-card__frame .plate img,
  .mosaic__item .plate img {
    transform: none !important;
  }

  .action::after,
  .film__play::before {
    display: none !important;
  }

  .section-head::after,
  .chapter__head::after {
    transform: scaleX(1) !important;
  }
}

/* ==========================================================================
   Touch comfort
   Desktop keeps its tight editorial density; touch devices get tap targets that
   comfortably clear 44px without changing the visual rhythm.
   ========================================================================== */

@media (pointer: coarse) {
  .link,
  .filter,
  .nav__link,
  .viewer__btn {
    padding-block: 0.7em;
  }

  .colophon__list {
    gap: 0.15em;
  }

  .logo,
  .menu-toggle,
  .contact-channels__name {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* The masthead phone number stays hidden until there is room for it. */
  @media (min-width: 1240px) {
    .masthead__phone {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
    }
  }

  .menu-toggle {
    gap: 0.6em;
  }

  .index__link,
  .craft-list__link,
  .contact-channels__row {
    min-height: 48px;
  }
}

@media print {
  .masthead,
  .menu,
  .cursor,
  .loader,
  .veil,
  .viewer,
  .index__preview {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .hero {
    height: auto;
  }
}