/* Ancile v2. Tokens first; every value below points at one. See DESIGN.md. */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  /* colour: one ink on cold black, silver paper, one warm light */
  --bg: #0A0C0D;
  --surface: #111517;
  --ink: #E8ECEB;
  --dim: #8D999C;
  --rule: rgba(232, 236, 235, 0.12);
  --rule-strong: rgba(232, 236, 235, 0.32);
  --paper: #C8CDCB;
  --paper-ink: #000000;
  --paper-dim: #3A4549;
  --tungsten: #E0A743;

  /* type */
  --f: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --t-label: 11px;
  --t-nav: 12px;
  --t-small: 14px;
  --t-body: 18px;
  --t-lead: 22px;
  --t-h2: 30px;
  --t-title: clamp(44px, 7.6vw, 116px);
  --t-hero: clamp(52px, 10.4vw, 156px);
  --tr-label: 0.3em;
  --tr-nav: 0.22em;
  --tr-title: 0.035em;
  --tr-hero: 0.07em;
  --wdth-title: 108%;
  --wdth-mark: 125%;

  /* space */
  --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-24: 24px; --s-32: 32px;
  --s-48: 48px; --s-64: 64px; --s-96: 96px; --s-128: 128px;
  --gutter: 48px;
  --section: clamp(80px, 10vw, 136px);
  --measure: 760px;

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --d-fast: 240ms;
  --d-mid: 520ms;
  --d-slow: 900ms;
  /* the art: long, gentle, symmetric. Plates dip out on --ease-dip and develop in on --ease-calm */
  --ease-calm: cubic-bezier(0.33, 0, 0.15, 1);
  --ease-dip: cubic-bezier(0.45, 0, 0.55, 1);
  --mat: #0F1315;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--f);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.9;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100svh;
  overflow-x: clip;
}
img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--ink); color: var(--bg); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--tungsten); outline-offset: 4px; }
.on-paper :focus-visible { outline-color: var(--paper-ink); }

.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; }
.skip { position: fixed; left: var(--s-16); top: var(--s-16); z-index: 200; padding: var(--s-8) var(--s-16); background: var(--ink); color: var(--bg); font-size: var(--t-nav); letter-spacing: var(--tr-nav); text-transform: uppercase; font-weight: 500; transform: translateY(-200%); }
.skip:focus-visible { transform: none; }

/* grain: film stock over everything, steps so it reads as grain, not shimmer */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 150; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.6 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: 0.05;
  animation: grain 3.6s steps(1) infinite;
}
@keyframes grain {
  0% { background-position: 0 0; } 17% { background-position: -61px 37px; } 33% { background-position: 43px -89px; }
  50% { background-position: -97px -19px; } 67% { background-position: 71px 63px; } 83% { background-position: -23px 101px; }
}

/* labels: the only all-caps voice besides titles and the nav */
.label { font-size: var(--t-label); font-weight: 500; letter-spacing: var(--tr-label); text-transform: uppercase; line-height: 1.6; }
.dim { color: var(--dim); }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-24);
  padding: var(--s-32) var(--gutter);
  background: linear-gradient(to bottom, rgba(10, 12, 13, 0.86), rgba(10, 12, 13, 0));
}
.nav { transition: background-color var(--d-mid) var(--ease), padding var(--d-mid) var(--ease), color var(--d-fast) var(--ease); }
.nav.is-scrolled { background-color: rgba(10, 12, 13, 0.94); padding-block: var(--s-24); }
.on-paper-top .nav { background-image: none; }
.on-paper-top .nav:not(.is-scrolled) { color: var(--paper-ink); }
/* lockup: shield + wordmark. The shield is ~1.35x the cap height (caps are 0.71em) in whole pixels,
   centred on the caps; logo.js animates it (assembly once per session, shard explode on hover). DESIGN.md, Logo. */
.lockup {
  display: inline-flex; align-items: center; gap: 0.56em;
  font-size: 19px; font-weight: 500; font-stretch: var(--wdth-mark);
  letter-spacing: 0.34em; text-transform: uppercase; line-height: 1;
  view-transition-name: mark; -webkit-tap-highlight-color: transparent;
}
.lockup__mark { flex: none; height: 18px; width: 12.1px; overflow: visible; }
.lockup__lamp { fill: var(--tungsten); }
.lockup__word { display: inline-flex; margin-right: -0.34em; }
.lockup__word > span { display: inline-block; }
/* hidden until logo.js takes over; shown anyway after 2.5s if the script never runs */
.logo-intro .lockup__mark, .logo-intro .lockup__word > span { opacity: 0; animation: logo-failsafe 1ms 2.5s forwards; }
@keyframes logo-failsafe { to { opacity: 1; } }
.nav__links { display: flex; gap: 36px; }
.nav__links a {
  position: relative; display: inline-block; padding-block: var(--s-4);
  font-size: var(--t-nav); font-weight: 450; letter-spacing: var(--tr-nav); text-transform: uppercase; line-height: 1;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0.22em; bottom: -4px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform var(--d-mid) var(--ease);
}
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

/* ---------- index: titles over a projected plate ---------- */
.index { position: relative; min-height: 100svh; display: grid; place-items: center; padding: 136px var(--gutter) 160px; }
.plates { position: fixed; inset: 0; z-index: 0; display: grid; place-items: center; pointer-events: none; }
.plates { --out: 1400ms; --in: 2400ms; }
/* a plate is a mat with the piece inset, like a work on a gallery wall */
.plate {
  grid-area: 1 / 1; width: min(60vw, 1000px); aspect-ratio: 16 / 9; container-type: size;
  position: relative; padding: 1.4%; background: var(--mat); box-shadow: inset 0 0 0 1px var(--rule);
  opacity: 0; transform: scale(1.012);
  transition: opacity var(--in) var(--ease-calm), transform calc(var(--in) * 1.4) var(--ease-calm);
}
.plate.is-on { opacity: 1; transform: none; }
.plate.is-out { transition: opacity var(--out) var(--ease-dip), transform var(--out) var(--ease-dip); }
.plate__art { position: relative; width: 100%; height: 100%; overflow: hidden; background: #0B0E10; }
.plate canvas, .reel__frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
canvas[data-chunky] { image-rendering: pixelated; }
.plate[data-plate="shot"] .plate__art::after { content: ""; position: absolute; inset: 0; background: rgba(10, 12, 13, 0.16); }
.plate__tc { position: absolute; left: 3.4cqw; bottom: 3cqw; z-index: 1; font-size: max(10px, 1cqw); font-weight: 450; letter-spacing: 0.16em; font-variant-numeric: tabular-nums; color: rgba(232, 236, 235, 0.5); line-height: 1; }
.plate:not(.has-gl) canvas, .reel__frame:not(.has-gl) canvas { display: none; }

/* teaser stills: graded photographs on the same mat, for now (DESIGN.md, Teaser stills).
   A very slow Ken Burns: 1 -> 1.06 over 26s and back, each plate drifting its own way. Translate is
   applied after the scale and stays under the 3% overscan, so no edge ever shows. */
.plate--still picture, .plate--still img { position: absolute; inset: 0; width: 100%; height: 100%; }
.plate--still img { object-fit: cover; transform-origin: var(--kb-o, 50% 50%); animation: kenburns 26s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; backface-visibility: hidden; }
.plate--still[data-plate="shot"] { --kb-x: -1.4%; --kb-y: -0.5%; --kb-o: 62% 48%; }
.plate--still[data-plate="paper"] { --kb-x: 1.4%; --kb-y: 0.4%; --kb-o: 38% 40%; }
.plate--still[data-plate="paper"] img { animation-duration: 28s; animation-direction: alternate-reverse; }
.plate--still[data-plate="leader"] { --kb-x: -0.8%; --kb-y: 0.7%; --kb-o: 50% 58%; }
.plate--still[data-plate="leader"] img { animation-duration: 24s; }
.plate--still:not(.is-on):not(.is-out) img { animation-play-state: paused; }
@keyframes kenburns { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.06) translate3d(var(--kb-x, 0), var(--kb-y, 0), 0); } }
/* vignette plus a light veil so the titles and timecode stay readable over the bright fog */
.plates .plate--still .plate__art::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 72% 68% at 50% 50%, rgba(10, 12, 13, 0) 42%, rgba(10, 12, 13, 0.58) 100%), rgba(10, 12, 13, 0.2);
}
.plate--still .plate__tc { z-index: 2; }

.paper { background: var(--paper); color: var(--paper-ink); padding: 3.4cqw 3.8cqw; display: flex; flex-direction: column; justify-content: space-between; }
.plate--paper { background: #B9BFBD; box-shadow: none; }
.plate .paper__file { position: relative; z-index: 1; }
.plate.has-gl .paper__list { visibility: hidden; }
.plate.has-gl .leader, .has-gl.leader-plate .leader { display: none; }
.has-gl .leader-plate::before, .has-gl .leader-plate::after, .has-gl.leader-plate::before, .has-gl.leader-plate::after { display: none; }
.paper__file { font-size: max(10px, 1.15cqw); font-weight: 500; letter-spacing: var(--tr-label); text-transform: uppercase; display: flex; justify-content: space-between; }
.paper__list { display: flex; flex-wrap: wrap; gap: 0.3em 1.6em; font-size: 1.55cqw; line-height: 1.3; font-weight: 400; }
.paper__list s { text-decoration-thickness: 0.07em; color: var(--paper-dim); }
.paper__keep { color: var(--paper-ink); font-weight: 600; margin-top: 0.3em; }
.paper__keep::before { content: ""; display: inline-block; width: 0.42em; height: 0.42em; border-radius: 50%; background: var(--paper-ink); margin-right: 0.45em; vertical-align: 0.12em; }

.leader-plate { background: #0E1315; display: grid; place-items: center; }
.leader-plate::before, .leader-plate::after { content: ""; position: absolute; background: rgba(232, 236, 235, 0.16); }
.leader-plate::before { left: 0; right: 0; top: 50%; height: 1px; }
.leader-plate::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.leader { position: relative; height: 66%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(232, 236, 235, 0.4); display: grid; place-items: center; overflow: hidden; }
.leader::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; border: 1px solid rgba(232, 236, 235, 0.22); }
.leader__sweep { position: absolute; inset: 0; background: conic-gradient(from 0deg, rgba(232, 236, 235, 0.16) var(--a, 0deg), transparent 0); animation: sweep 12s linear infinite; }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes sweep { to { --a: 360deg; } }
.leader__num { position: relative; font-size: min(15cqw, 24cqh); font-weight: 300; font-stretch: 100%; line-height: 1; font-variant-numeric: tabular-nums; }
.leader-plate__cap { position: absolute; z-index: 1; left: 2.2cqw; bottom: 1.8cqw; font-size: max(10px, 1.1cqw); letter-spacing: var(--tr-label); text-transform: uppercase; font-weight: 500; color: rgba(232, 236, 235, 0.72); line-height: 1; }

.works { position: relative; z-index: 2; text-align: center; }
.works[data-blend="diff"] { mix-blend-mode: difference; }
.works__row { display: block; }
.works__row > a, .works__row > span { display: inline-block; padding: 0.15em 0.14em; }
.works__title {
  display: inline-block; font-size: var(--t-title); font-weight: 700; font-stretch: var(--wdth-title);
  letter-spacing: var(--tr-title); margin-right: calc(-1 * var(--tr-title)); text-transform: uppercase; line-height: 1; white-space: nowrap;
  transition: opacity var(--d-mid) var(--ease);
}
.works__row--empty .works__title { color: transparent; -webkit-text-stroke: 1px var(--ink); }
.works__note { display: block; margin-top: -0.2em; }
.works.is-focusing .works__row:not(.is-active) .works__title { opacity: 0.22; }
.works__row > a:focus-visible { outline-offset: 0; }

.wall { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: var(--s-32); display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-32); font-size: var(--t-small); line-height: 1.6; }
.wall__left { max-width: 34ch; }
.wall__right { text-align: right; min-width: 16ch; }
.wall .label { display: block; margin-bottom: var(--s-4); }
/* the wall label for the piece on show: title in regular weight, medium in grey */
.wall__piece { display: block; font-size: var(--t-small); font-weight: 450; letter-spacing: 0.01em; }
.wall__right span { transition: opacity var(--d-mid) var(--ease); }

/* load: one orchestrated moment, first visit per session only */
.intro .works__row > * { animation: rise var(--d-slow) var(--ease) both; }
.intro .works__row:nth-child(2) > * { animation-delay: 90ms; }
.intro .works__row:nth-child(3) > * { animation-delay: 180ms; }
.intro .works__row { overflow: hidden; }
.intro .nav__links, .intro .wall { animation: fade 700ms 420ms var(--ease) both; }
@keyframes rise { from { transform: translateY(102%); } }
@keyframes fade { from { opacity: 0; } }

/* ---------- project + page heroes ---------- */
.hero {
  position: relative; min-height: 66svh; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  text-align: center; padding: 160px var(--gutter) var(--s-96); border-bottom: 1px solid var(--rule);
}
.hero--short { min-height: 46svh; justify-content: center; padding-bottom: var(--s-64); }
.hero__title {
  font-size: var(--t-hero); font-weight: 700; font-stretch: var(--wdth-title); letter-spacing: var(--tr-hero);
  margin-right: calc(-1 * var(--tr-hero)); text-transform: uppercase; line-height: 0.92;
}
.hero__title--light { font-weight: 300; }
.hero__tag { margin-top: var(--s-24); }

.hero--paper { background: var(--paper); color: var(--paper-ink); border-bottom: 0; min-height: 78svh; justify-content: space-between; padding-top: 168px; }
.hero--paper .hero__tag { color: var(--paper-dim); }
.hero__list { width: 100%; max-width: 1180px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-8) var(--s-32); font-size: clamp(15px, 1.5vw, 21px); line-height: 1.4; font-weight: 400; color: var(--paper-dim); margin-top: var(--s-64); }
.hero__list s { text-decoration-thickness: 1.5px; }
.hero__list .paper__keep { color: var(--paper-ink); }

.hero--shot { min-height: 92svh; padding-bottom: 0; border-bottom: 0; justify-content: flex-end; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; background: #1a2226; }
.hero__media canvas { width: 100%; height: 100%; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10, 12, 13, 0.55) 0%, rgba(10, 12, 13, 0) 22%, rgba(10, 12, 13, 0) 55%, rgba(10, 12, 13, 0.9) 88%, var(--bg) 100%); pointer-events: none; }
.hero--shot .hero__content { position: relative; z-index: 1; margin-bottom: var(--s-48); }
.plate.no-gl[data-plate="shot"] .plate__art, .no-gl .hero__media { background: linear-gradient(to bottom, #3f494e 0%, #a3abab 42%, #0d1215 42.4%, #0a0c0d 100%); }

/* grade control: the one control that changes state */
.grade { position: relative; z-index: 1; width: 100%; max-width: 1180px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-16) var(--s-32); padding: var(--s-24) 0 var(--s-32); border-top: 1px solid var(--rule-strong); text-align: left; }
.grade__slider { display: flex; align-items: center; gap: var(--s-16); }
.grade__end { font-size: var(--t-label); letter-spacing: var(--tr-label); text-transform: uppercase; font-weight: 500; color: var(--dim); }
.grade__caption { grid-column: 1 / -1; font-size: var(--t-small); color: var(--dim); min-height: 1.6em; line-height: 1.6; }
.grade__tc { font-size: var(--t-label); letter-spacing: 0.14em; font-variant-numeric: tabular-nums; color: var(--dim); font-weight: 500; }
.grade input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; height: 28px; background: transparent; cursor: ew-resize; }
.grade input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--rule-strong); }
.grade input[type="range"]::-moz-range-track { height: 1px; background: var(--rule-strong); }
.grade input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -7.5px; border-radius: 50%; background: var(--tungsten); border: 0; box-shadow: 0 0 0 5px rgba(224, 167, 67, 0.16); }
.grade input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--tungsten); border: 0; box-shadow: 0 0 0 5px rgba(224, 167, 67, 0.16); }
.grade input[type="range"]:focus-visible { outline-offset: 2px; }
.is-developing .hero__media canvas { animation: develop 3.2s var(--ease-calm) both; }
@keyframes develop { from { filter: brightness(3.2) contrast(0.4); } }

/* ---------- body column ---------- */
.body { max-width: calc(var(--measure) + 2 * var(--gutter)); margin: 0 auto; padding: var(--section) var(--gutter); }
.body + .body { padding-top: 0; }
.body > * + * { margin-top: var(--s-24); }
.body h2 { font-size: var(--t-h2); font-weight: 600; font-stretch: var(--wdth-title); letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.2; }
.body h2 + * { margin-top: var(--s-24); }
.body p { max-width: 62ch; }
.lead { font-size: var(--t-lead); line-height: 1.7; font-weight: 300; }
.body blockquote { border-left: 2px solid var(--ink); padding: var(--s-8) 0 var(--s-8) var(--s-32); margin-block: var(--s-48); font-size: var(--t-lead); line-height: 1.6; }
.body blockquote cite { display: block; margin-top: var(--s-12); font-style: normal; }

.btn {
  display: inline-block; margin-top: var(--s-32); padding: 15px 34px 14px;
  border: 1px solid var(--rule-strong); font-size: var(--t-nav); font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; line-height: 1.2;
  transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* numbered rules: a real sequence (the pack's own numbering) */
.rules { counter-reset: r; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-48); border-top: 1px solid var(--rule); }
.rules li { counter-increment: r; display: grid; grid-template-columns: 3.2em 1fr; padding: var(--s-16) 0; border-bottom: 1px solid var(--rule); font-size: 17px; line-height: 1.5; font-weight: 400; }
.rules li::before { content: counter(r, decimal-leading-zero); font-size: var(--t-label); letter-spacing: 0.14em; font-weight: 500; color: var(--dim); padding-top: 0.38em; font-variant-numeric: tabular-nums; }
.wide { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter) var(--section); }
.wide > .label { display: block; margin-bottom: var(--s-24); }

.inside { columns: 2; column-gap: var(--s-48); }
.inside li { break-inside: avoid; padding: var(--s-12) 0; border-bottom: 1px solid var(--rule); font-size: 17px; line-height: 1.5; font-weight: 400; }

/* film slot: intentional placeholder */
.reel { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter) var(--section); }
.reel__frame { position: relative; aspect-ratio: 2.39 / 1; container-type: size; }
.reel + .body { padding-top: 0; }
.reel__cap { display: flex; justify-content: space-between; gap: var(--s-24); margin-top: var(--s-16); font-size: var(--t-small); line-height: 1.6; }

/* link rows (info) */
.rows { border-top: 1px solid var(--rule); }
.rows a { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--s-24); padding: var(--s-24) 0; border-bottom: 1px solid var(--rule); transition: padding var(--d-mid) var(--ease); }
.rows__name { font-size: var(--t-h2); font-weight: 600; font-stretch: var(--wdth-title); letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.1; }
.rows__meta { display: flex; gap: var(--s-24); align-items: baseline; }
.rows a:hover { padding-left: var(--s-16); }
.rows a:hover .rows__act { color: var(--ink); }

/* prev / next */
.pn { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); }
.pn a { display: flex; flex-direction: column; gap: var(--s-12); padding: var(--s-48) var(--gutter); transition: background-color var(--d-mid) var(--ease); }
.pn a + a { border-left: 1px solid var(--rule); align-items: flex-end; text-align: right; }
.pn a:hover { background: var(--surface); }
.pn__title { font-size: var(--t-h2); font-weight: 600; font-stretch: var(--wdth-title); letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.1; }

/* ---------- footer ---------- */
.foot { position: relative; z-index: 2; background: var(--bg); border-top: 1px solid var(--rule); padding: var(--s-64) var(--gutter) var(--s-48); text-align: center; }
.foot__links { display: flex; justify-content: center; gap: 40px; margin-bottom: var(--s-48); }
.foot__links a { position: relative; font-size: var(--t-nav); font-weight: 450; letter-spacing: var(--tr-nav); text-transform: uppercase; line-height: 1; padding-block: var(--s-4); }
.foot__links a::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 100%; height: 1px; background: currentColor; transform: translateX(-50%) scaleX(0); transition: transform var(--d-mid) var(--ease); }
.foot__links a:hover::after { transform: translateX(-50%) scaleX(1); }
.foot__mark { display: block; width: 18px; margin: 0 auto var(--s-16); color: var(--ink); }
.foot__lamp { fill: var(--tungsten); }
.foot__word { font-size: 15px; font-weight: 500; font-stretch: var(--wdth-mark); letter-spacing: 0.34em; margin-right: -0.34em; text-transform: uppercase; line-height: 1; }
.foot__copy { margin-top: var(--s-16); font-size: 12px; letter-spacing: 0.06em; color: var(--dim); line-height: 1.6; }

/* ---------- page transitions (cross-document, progressive) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 260ms var(--ease) both vt-out; }
::view-transition-new(root) { animation: 420ms 80ms var(--ease) both vt-in; }
::view-transition-group(*) { animation-duration: 620ms; animation-timing-function: var(--ease); }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  :root { --gutter: 32px; }
  .rules, .inside { grid-template-columns: 1fr; columns: 1; }
  .pn { grid-template-columns: 1fr; }
  .pn a + a { border-left: 0; border-top: 1px solid var(--rule); }
  .plate { width: 78vw; }
}
@media (max-width: 600px) {
  :root { --gutter: 20px; --t-body: 16px; --t-lead: 19px; --t-h2: 22px; --t-title: min(11.6vw, 58px); --t-hero: min(15vw, 72px); --tr-hero: 0.05em; }
  body { line-height: 1.85; }
  .nav { padding: var(--s-24) var(--gutter); }
  .lockup { font-size: 15px; letter-spacing: 0.3em; }
  .lockup__mark { height: 14px; width: 9.4px; transform: translateY(-1px); } /* text baseline snaps up at 15px; keep the shield on the caps */
  .lockup__word { margin-right: -0.3em; }
  .nav__links { gap: 18px; }
  .nav__links a { font-size: 11px; letter-spacing: 0.16em; }
  .index { padding: 112px var(--gutter) 176px; }
  .plate { width: calc(100vw - 2 * var(--gutter)); aspect-ratio: 4 / 5; }
  .paper { padding: 7cqw; }
  .paper__file { font-size: 10px; }
  .paper__list { font-size: 4cqw; gap: 0.3em 1.2em; }
  .leader { height: 50%; }
  .leader__num { font-size: 22cqw; }
  .reel .leader-plate__cap { display: none; }
  .reel .leader__num { font-size: 18cqw; }
  .plate__tc, .leader-plate__cap { left: 5cqw; bottom: 4.5cqw; font-size: 10px; }
  .wall { flex-direction: column; align-items: stretch; gap: var(--s-12); bottom: var(--s-24); font-size: 13px; }
  .wall__right { text-align: left; display: flex; gap: var(--s-12); align-items: baseline; }
  .wall__right .label { margin: 0; }
  .hero { padding: 132px var(--gutter) var(--s-64); min-height: 56svh; }
  .hero--paper { min-height: 74svh; padding-top: 132px; }
  .hero__list { gap: var(--s-4) var(--s-16); margin-top: var(--s-48); }
  .hero--shot { min-height: 88svh; padding-bottom: 0; }
  .grade { grid-template-columns: 1fr; gap: var(--s-8); padding-bottom: var(--s-24); }
  .grade__tc { display: none; }
  .rows__name { font-size: 20px; }
  .rows__meta { flex-direction: column; align-items: flex-end; gap: 0; }
  .reel__cap { flex-direction: column; gap: var(--s-4); }
  .foot__links { gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  body::after { animation: none; }
  .leader__sweep { animation: none; --a: 120deg; }
  .plate--still img { animation: none; transform: none; }
  @view-transition { navigation: none; }
  .lockup { transition: opacity 1ms; }
  .lockup:hover { opacity: 0.62; }
}