/* ══════════════════════════════════════════════════════════════════════
   The Film Graph

   Visual direction is taken from Kubrick, and specifically from the three
   interiors of 2001: the void outside the ship, the bone-white light of the
   Discovery, and the red command corridor. The page moves through all three
   in that order, so colour carries the argument rather than decorating it.

   The structural rule is one-point perspective. Every section is symmetrical
   about a single vertical axis and a hairline runs down it for the whole
   page, because the product's claim is that everything converges on one
   foundation. The hero draws that literally: a corridor of 2.20:1 apertures
   — the aspect ratio 2001 was shot in — receding to a vanishing point.

   Type is three roles, each borrowed from the subject rather than chosen for
   looks. Jost is the open Futura model, and Futura is Kubrick's typeface on
   every title card he set. Spectral is the programme note. Courier Prime is
   the screenplay standard, so every label and readout on the page is set in
   the typeface the industry writes in.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* Colour — four grounds and the light between them. */
  --void: #08080b;
  --void-raised: #101016;
  --bone: #e6e1d6;
  --bone-warm: #efebe2;
  --hal: #d62f16;
  --amber: #e9a13b;

  --ink-void: #efece4;
  --ink-bone: #14141a;
  --mute-void: #83838f;
  --mute-bone: #55555f;
  --line-void: rgba(239, 236, 228, 0.16);
  --line-bone: rgba(20, 20, 26, 0.2);

  /* Per-band, remapped by the .band modifiers. */
  --ground: var(--void);
  --ink: var(--ink-void);
  --mute: var(--mute-void);
  --line: var(--line-void);

  --display: "Jost", "Futura", "Century Gothic", sans-serif;
  --body: "Spectral", Georgia, serif;
  --mono: "Courier Prime", ui-monospace, "SF Mono", Menlo, monospace;

  /* A fifth-based scale, set tight because Futura caps need the air taken
     out of them to read as a title card rather than as a sign. */
  --t-hero: clamp(2.1rem, 7.4vw, 6.1rem);
  --t-head: clamp(1.75rem, 4.6vw, 3.5rem);
  --t-sub: clamp(1.15rem, 2.1vw, 1.6rem);
  --t-body: clamp(1rem, 1.15vw, 1.135rem);
  --t-label: 0.68rem;

  --axis: 1180px;
  --prose: 60ch;

  --step: clamp(4.5rem, 11vh, 9rem);
  --ease: cubic-bezier(0.22, 0.61, 0.28, 1);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--void);
  color: var(--ink-void);
  font-family: var(--body);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--hal); color: #fff; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ── the spine ──
   The vanishing axis, drawn for the length of the document. It is the
   organising line every section is centred on, so it is worth showing. */
.spine {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: currentColor;
  opacity: 0.11;
  pointer-events: none;
  z-index: 1;
  color: var(--ink-void);
  transition: color 700ms var(--ease), opacity 700ms var(--ease);
}
body.on-bone .spine { color: var(--ink-bone); opacity: 0.13; }
body.on-hal .spine { color: #fff; opacity: 0.2; }

/* ══ chrome ══ */

.chrome {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2.4vw, 1.7rem) clamp(1rem, 3.4vw, 2.6rem);
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-void);
  transition: color 500ms var(--ease);
}
/* The chrome floats over every band, so it is told which ground it is on
   rather than relying on a blend mode — difference over the red goes cyan.
   Each glyph also carries a halo in the current ground colour, because the
   things the chrome passes over are not all the same value as the band behind
   them: the monolith is black on a bone field, and the stills are
   photographs. A halo keeps the type readable without laying a bar of colour
   across whatever is underneath. */
.chrome { --halo: #08080b; }
body.on-bone .chrome { color: var(--ink-bone); --halo: #e6e1d6; }
body.on-hal .chrome { color: #fff; --halo: #d62f16; }

.chrome__mark,
.chrome__nav a {
  text-shadow:
    0 0 3px var(--halo),
    0 0 9px var(--halo),
    0 0 18px var(--halo);
}

.chrome__mark {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.22em;
}
.chrome__mark i { font-style: normal; opacity: 0.45; letter-spacing: 0.13em; }

.chrome__nav { display: flex; gap: clamp(0.9rem, 2.2vw, 2rem); }
.chrome__nav a { opacity: 0.62; transition: opacity 220ms var(--ease); }
.chrome__nav a:hover,
.chrome__nav a:focus-visible { opacity: 1; }

/* ══ bands ══
   Colour and vertical rhythm live here and nowhere else, so no child rule
   can quietly cancel a section's padding. */

.band {
  position: relative;
  z-index: 2;
  padding: var(--step) clamp(1.1rem, 4vw, 3rem);
  background: var(--ground);
  color: var(--ink);
  transition: background 600ms var(--ease);
}

.band--void { --ground: var(--void); --ink: var(--ink-void); --mute: var(--mute-void); --line: var(--line-void); }
.band--bone { --ground: var(--bone); --ink: var(--ink-bone); --mute: var(--mute-bone); --line: var(--line-bone); }
.band--hal  { --ground: var(--hal);  --ink: #fff;             --mute: rgba(255,255,255,.72); --line: rgba(255,255,255,.34); }

.band--tall { padding-block: calc(var(--step) * 1.5); }
.band--flush { padding-inline: 0; }
.band--seam { padding-block-start: 0; }

.wrap {
  width: 100%;
  max-width: var(--axis);
  margin-inline: auto;
}
.wrap--narrow { max-width: 78ch; }

/* ══ type roles ══ */

.marker {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mute);
  text-align: center;
}
.marker::after {
  content: "";
  display: block;
  width: 1px;
  height: clamp(2rem, 5vh, 3.4rem);
  margin: 0.95rem auto 0;
  background: currentColor;
  opacity: 0.42;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 0.98;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

h2 {
  font-size: var(--t-head);
  text-align: center;
  max-width: 19ch;
  margin-inline: auto;
}

.standfirst {
  margin: 1.6rem auto 0;
  max-width: 52ch;
  font-size: var(--t-sub);
  line-height: 1.42;
  color: var(--mute);
  text-align: center;
  text-wrap: pretty;
}

/* Prose is centred as a column but set left, because centred paragraphs
   stop being readable after two lines. */
.prose {
  max-width: var(--prose);
  margin: clamp(2.4rem, 5vh, 3.6rem) auto 0;
}
.prose p + p { margin-top: 1.15em; }
.prose strong { font-weight: 400; color: var(--ink); box-shadow: inset 0 -1px 0 var(--line); }

.pull {
  max-width: 24ch;
  margin: clamp(2.8rem, 6vh, 4.4rem) auto;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.35rem, 3.1vw, 2.35rem);
  line-height: 1.14;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
}
.pull em { font-style: normal; color: var(--amber); }
.band--bone .pull em { color: var(--hal); }

.note {
  max-width: 76ch;
  margin-inline: auto;
  margin-top: 2.6rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: var(--mute);
  text-align: center;
}

/* ══ hero ══ */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(6rem, 14vh, 9rem) clamp(1.1rem, 4vw, 3rem) clamp(7rem, 15vh, 10rem);
  overflow: hidden;
  background: var(--void);
}

/* The corridor. Twelve apertures on a constant ratio, which is what makes a
   receding row read as depth: each one is 0.72 of the last, so they crowd
   toward the vanishing point the way real perspective does. Width and
   brightness are set per aperture in the markup rather than computed here,
   because the falloff is tuned by eye — brightest in the middle distance,
   where the title sits, dimming toward the viewer and toward the point.
   The outermost run past the edge of the frame: those are the walls. */
/* The vanishing point sits above centre so the light at the end of the
   corridor is clear of the title rather than behind it. */
.corridor {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  transform: translateY(-11vh);
}

/* A scrim, weighted to the lower half, so the thin serif underneath is read
   against the ground rather than across a hairline. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 58% 30% at 50% 66%, rgba(8, 8, 11, 0.94) 0%, rgba(8, 8, 11, 0.72) 52%, transparent 100%),
    linear-gradient(to bottom, transparent 52%, rgba(8, 8, 11, 0.72) 100%);
}
.corridor span {
  position: absolute;
  width: var(--w);
  aspect-ratio: 2.2 / 1;   /* Super Panavision 70 — 2001's ratio */
  border: 1px solid rgb(239 236 228);
  opacity: 0;
  transform: scale(0.9);
  animation: aperture 1700ms var(--ease) forwards;
  animation-delay: calc(var(--z) * 90ms);
}
@keyframes aperture {
  to { opacity: var(--o); transform: none; }
}

/* The light at the end of it. */
.corridor::after {
  content: "";
  position: absolute;
  width: min(58rem, 96vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(239, 236, 228, 0.2) 0%,
    rgba(239, 236, 228, 0.1) 26%,
    rgba(239, 236, 228, 0.035) 48%,
    transparent 70%);
  opacity: 0;
  animation: glow 2400ms var(--ease) 400ms forwards;
}
@keyframes glow { to { opacity: 1; } }

.hero__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: clamp(1.1rem, 2.6vh, 1.9rem);
}

.hero__eyebrow {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--mute-void);
}

h1 {
  font-size: var(--t-hero);
  font-weight: 600;
  letter-spacing: -0.012em;
  max-width: 13ch;
  text-shadow: 0 2px 40px rgba(8, 8, 11, 0.85);
}

.hero__standfirst {
  max-width: 44ch;
  font-size: var(--t-sub);
  line-height: 1.44;
  color: #c9c6bd;
  text-wrap: pretty;
}

.hero__readout {
  margin-top: clamp(0.8rem, 2.4vh, 1.6rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem 1.1rem;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute-void);
}
.hero__readout b { font-weight: 400; color: var(--amber); }

.scrollcue {
  position: absolute;
  bottom: clamp(1.4rem, 4vh, 2.6rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mute-void);
  display: grid;
  justify-items: center;
  gap: 0.7rem;
}
.scrollcue::after {
  content: "";
  width: 1px;
  height: 3rem;
  background: linear-gradient(to bottom, currentColor, transparent);
  animation: drop 2.6s var(--ease) infinite;
  transform-origin: top;
}
@keyframes drop {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(3rem); opacity: 0; }
}

/* ══ the monolith ══
   1 : 4 : 9 — the squares of one, two and three, and the exact proportions
   of the slab in 2001. The face is 4 wide by 9 tall, and there are nine
   surfaces in the foundation, so the nine sit inside it one per band. */

/* The slab and its caption read as one object, so the pair is centred on the
   page axis rather than spread to the full measure. */
.slab-layout {
  margin-top: clamp(3rem, 7vh, 5rem);
  display: grid;
  grid-template-columns: 13.5rem minmax(0, 34rem);
  justify-content: center;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.slab {
  aspect-ratio: 4 / 9;
  width: 100%;
  max-width: 13.5rem;
  margin-inline: auto;
  background: var(--void);
  display: grid;
  grid-template-rows: repeat(9, 1fr);
  box-shadow: 0 2rem 5rem rgba(20, 20, 26, 0.32);
}
.slab li {
  display: flex;
  align-items: center;
  padding-inline: clamp(0.7rem, 1.6vw, 1.1rem);
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #8d8d99;
  border-bottom: 1px solid rgba(239, 236, 228, 0.11);
  transition: color 400ms var(--ease), background 400ms var(--ease);
}
.slab li:last-child { border-bottom: 0; }
.slab li::before {
  content: counter(surface, decimal-leading-zero);
  counter-increment: surface;
  margin-right: 0.7rem;
  opacity: 0.4;
}
.slab { counter-reset: surface; }
.slab li:hover { color: var(--ink-void); background: rgba(239, 236, 228, 0.05); }

.slab-caption { font-size: 0.78rem; }
.slab-caption .prose { max-width: none; margin-top: 0; }

/* The stills band runs full-bleed, so its copy carries the inline padding the
   band itself gives up. */
.field-copy { padding-inline: clamp(1.1rem, 4vw, 3rem); }

/* ══ the ways in ══ */

.ways {
  margin-top: clamp(2.6rem, 6vh, 4rem);
  border-top: 1px solid var(--line);
}
.ways__row {
  display: grid;
  grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 5rem);
  gap: clamp(0.8rem, 2.4vw, 2rem);
  align-items: baseline;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--line);
}
.ways__k {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}
.ways__in {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.02rem;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  line-height: 1.2;
}
.ways__out { font-size: 0.95rem; line-height: 1.5; color: var(--mute); }
.ways__st {
  justify-self: end;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hal);
}

/* ══ the arc ══
   The one place numbering is earned: film production genuinely is a
   sequence, and the order is the information. Each stage recedes a little
   further from the reader, because that is the point being made. */

.arc {
  margin-top: clamp(3rem, 7vh, 4.5rem);
  display: grid;
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.stage {
  display: grid;
  grid-template-columns: minmax(0, 3.4rem) minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 8rem);
  gap: clamp(0.7rem, 2.2vw, 1.8rem);
  align-items: baseline;
  padding: clamp(1.15rem, 2.6vh, 1.7rem) clamp(0.4rem, 1.6vw, 1.2rem);
  background: var(--ground);
  transition: background 320ms var(--ease), opacity 320ms var(--ease);
}
.stage:hover { background: var(--bone-warm); }
.stage__n {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  color: var(--mute);
}
.stage__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.05rem, 2.1vw, 1.45rem);
  text-transform: uppercase;
  line-height: 1.08;
}
.stage__what { font-size: 0.95rem; line-height: 1.5; color: var(--mute); }
.stage__flag {
  justify-self: end;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mute);
}
.stage[data-now] .stage__flag { color: var(--hal); }
.stage[data-now] .stage__name { color: var(--hal); }

/* Distance: later stages sit further down the corridor. */
.stage[data-depth="2"] { opacity: 0.82; }
.stage[data-depth="3"] { opacity: 0.62; }
.stage[data-depth="4"] { opacity: 0.46; }
.stage:hover { opacity: 1; }

/* ══ the refusal ══ */

.commitments {
  margin-top: clamp(2.8rem, 6vh, 4rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.commitment { background: var(--hal); padding: clamp(1.4rem, 3vw, 2.1rem); }
.commitment h3 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.16;
  margin-bottom: 0.85rem;
}
.commitment p { font-size: 0.95rem; line-height: 1.55; color: rgba(255, 255, 255, 0.82); }

/* ══ the stills field ══
   Kept from the first version of this page, and moved: it was the whole
   site, and it works far better as the proof that context survives the
   handoff into pre-production. */

.field-frame { margin-top: clamp(2.6rem, 6vh, 4rem); }

/* Grid geometry and the block's aspect ratio are both set from app.js, so
   the tiles land on a constant 1.55 ratio at every width. These are only the
   pre-script fallback. */
#field {
  display: grid;
  gap: 2px;
  background: var(--void-raised);
  aspect-ratio: 9.3 / 4;
}

.tile {
  position: relative;
  overflow: hidden;
  border: 0;
  padding: 0;
  background: var(--void-raised);
  cursor: pointer;
  opacity: 0;
  animation: rise 620ms var(--ease) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes rise { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) brightness(0.84);
  transition: filter 340ms var(--ease), transform 620ms var(--ease);
}
.tile:hover img,
.tile:focus-visible img { filter: saturate(1.04) brightness(1.1); transform: scale(1.04); }
.tile:focus-visible { outline: 1px solid var(--ink-void); outline-offset: -3px; z-index: 3; }

.cred {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.5rem 0.6rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  line-height: 1.3;
  text-align: left;
  color: var(--ink-void);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88), transparent);
  opacity: 0;
  transition: opacity 240ms var(--ease);
  pointer-events: none;
}
.cred b { display: block; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.cred span { color: #9a9aa4; }
.tile:hover .cred,
.tile:focus-visible .cred { opacity: 1; }

.readout {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute-void);
}
.readout b { color: var(--amber); font-weight: 400; }
.readout .sep { opacity: 0.34; }
#reset {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--mute-void);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-void);
  padding: 0 0 2px;
  cursor: pointer;
}
#reset:hover, #reset:focus-visible { color: var(--ink-void); }
#reset[hidden] { display: none; }

.busy #field { opacity: 0.55; transition: opacity 200ms var(--ease); }

/* ══ status ══ */

.status {
  margin-top: clamp(2.6rem, 6vh, 4rem);
  border-top: 1px solid var(--line);
}
.status__row {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: clamp(0.8rem, 2.6vw, 2.4rem);
  align-items: baseline;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--line);
}
.status__k {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
}
.status__v { font-size: 0.98rem; line-height: 1.55; }

/* ══ contact ══ */

.contact { text-align: center; }
.contact__mail {
  display: inline-block;
  margin-top: clamp(1.8rem, 4vh, 2.8rem);
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.35rem, 4.2vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.18em;
  transition: color 260ms var(--ease), border-color 260ms var(--ease);
}
.contact__mail:hover,
.contact__mail:focus-visible { color: var(--amber); border-color: var(--amber); }

.foot {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.6rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem clamp(1.1rem, 4vw, 3rem);
  border-top: 1px solid var(--line-void);
  background: var(--void);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute-void);
}

/* ══ reveal ══
   Slow, linear, no spring. Kubrick's camera does not bounce. */

.rise-in {
  opacity: 0;
  transform: translateY(1.6rem);
  transition: opacity 1100ms var(--ease), transform 1100ms var(--ease);
}
.rise-in.is-in { opacity: 1; transform: none; }
.rise-in[data-delay="1"] { transition-delay: 130ms; }
.rise-in[data-delay="2"] { transition-delay: 260ms; }
.rise-in[data-delay="3"] { transition-delay: 390ms; }

/* ══ narrow ══ */

@media (max-width: 900px) {
  .slab-layout { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
  .slab { max-width: 12rem; }
  .ways__row { grid-template-columns: 1fr auto; row-gap: 0.35rem; }
  .ways__k { grid-column: 1 / -1; }
  .ways__out { grid-column: 1 / -1; }
  .ways__st { grid-column: 2; grid-row: 2; }
  .stage { grid-template-columns: 2.6rem 1fr auto; row-gap: 0.35rem; }
  .stage__what { grid-column: 2 / -1; }
  .status__row { grid-template-columns: 1fr; row-gap: 0.3rem; }

}

@media (max-width: 620px) {
  .chrome__nav { display: none; }
  h2 { max-width: 15ch; }
  .readout { font-size: 0.6rem; letter-spacing: 0.08em; }

  /* On a narrow frame every aperture is wider than the viewport, so their
     horizontal edges sweep straight through the title. The corridor is lifted
     into the empty upper third and faded out below it: the tunnel is read
     above the type rather than behind it. */
  .corridor {
    transform: translateY(-16vh) scale(1.3);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 32%, rgba(0, 0, 0, 0.13) 56%, transparent 90%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 32%, rgba(0, 0, 0, 0.13) 56%, transparent 90%);
  }
  .hero { padding-bottom: clamp(4rem, 10vh, 5.5rem); }
  .hero__standfirst { max-width: 32ch; }
  .hero__readout { gap: 0.3rem; flex-direction: column; }
  .hero__readout span:nth-child(2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .corridor span { animation: none; opacity: var(--o); transform: none; }
  .corridor::after { animation: none; opacity: 1; }
  .scrollcue::after { animation: none; }
  .tile { animation: none; opacity: 1; }
  .tile:hover img, .tile:focus-visible img { transform: none; }
  .rise-in { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto !important; }
}