@font-face{
  font-family:'ArtMeta Grotesk';
  src:url('assets/font/ArtMeta_Grotesk.otf') format('opentype');
  font-weight:400 900; font-display:swap;
}

:root{
  /* Two rooms: the lit gallery wall, and the blackout video room. */
  --ink:      #0A0A0B;
  --ink-2:    #141416;
  --chalk:    #E3E5E2;
  --chalk-2:  #D6D9D4;
  --graphite: #6E7370;
  --slate:    #2B2E2C;
  --signal:   #22E89C;   /* ArtMeta's own brand token. The only accent on the page. */

  --display:'ArtMeta Grotesk','Helvetica Neue',Arial,sans-serif;
  --serif:'Spectral',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --gut: clamp(1.25rem, 4vw, 4.5rem);
  --rule: 1px solid color-mix(in srgb, currentColor 18%, transparent);

  /* Motion. One curve for things entering, one for things moving on screen.
     Durations follow the UI budget; only editorial reveals run long. */
  --ease-out:    cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --dur-press:  160ms;
  --dur-ui:     250ms;
  --dur-slow:   600ms;
  --dur-reveal: 800ms;

  /* Set by JS from scroll velocity; drives the signal distortion on the stage. */
  --vel: 0;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--chalk);
  font-family:var(--serif); font-weight:300; font-size:clamp(1rem,.55rem + .55vw,1.125rem);
  line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video,svg{display:block; max-width:100%}
a{color:inherit}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--signal);color:var(--ink);padding:.75rem 1.25rem;font-family:var(--mono);font-size:.75rem}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--signal); outline-offset:3px}

/* Film grain — subject-grounded: this history lives on CRTs and film scans. */
.grain{
  position:fixed; inset:-50%; z-index:150; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 25%{transform:translate(-2%,1%)}
  50%{transform:translate(1%,-2%)} 75%{transform:translate(-1%,-1%)} 100%{transform:translate(0,0)}
}

/* ─── shared type ─── */
.eyebrow{
  font-family:var(--mono); font-size:.68rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--signal);
  margin:0 0 1.25rem;
}
.eyebrow.dark{color:var(--slate)}

h2,h3{font-family:var(--display); font-weight:400; letter-spacing:-.02em; line-height:1.02; margin:0}

.btn{
  display:inline-block; font-family:var(--mono); font-size:.75rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  padding:1.05rem 2rem; border:1px solid currentColor; border-radius:0;
  transition:background var(--dur-ui) ease, color var(--dur-ui) ease,
             transform var(--dur-press) var(--ease-out);
}
.btn-solid{background:var(--signal); color:var(--ink); border-color:var(--signal)}
@media (hover:hover) and (pointer:fine){
  .btn-solid:hover{background:transparent; color:var(--signal)}
  .btn-ghost:hover{background:currentColor; color:var(--ink)}
}
/* The press is deliberate, the release snaps back. */
.btn:active{transform:scale(.97); transition-duration:80ms}

/* ─── nav ─── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; gap:2rem;
  padding:1.25rem var(--gut);
  color:var(--chalk);
  transition:padding var(--dur-ui) var(--ease-out), background var(--dur-ui) ease,
             backdrop-filter var(--dur-ui) ease;
}
.nav.is-stuck{
  padding-block:.8rem;
  background:rgba(10,10,11,.78);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 1px 0 rgba(227,229,226,.1);
}
.nav-mark img{height:19px; width:auto}
.nav-links{display:flex; gap:1.75rem; margin-left:auto}
.nav-links a,.nav-cta{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; text-decoration:none; opacity:.72; transition:opacity var(--dur-ui) ease, color var(--dur-ui) ease;
}
.nav-links a:hover,.nav-cta:hover{opacity:1}
.nav-links a{position:relative; padding-bottom:3px}
.nav-links a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--signal); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-ui) var(--ease-out);
}
.nav-links a.is-current{opacity:1; color:var(--signal)}
.nav-links a.is-current::after{transform:scaleX(1)}
.nav-cta{border-bottom:1px solid currentColor; padding-bottom:2px}
@media (max-width:820px){ .nav-links{display:none} }

/* ═══ HERO ═══ */
.blackout{background:var(--ink); color:var(--chalk); position:relative}
.blackout::after{ /* CRT scanline, barely there */
  content:''; position:absolute; inset:0; pointer-events:none; z-index:3; opacity:.35;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
}

.hero{min-height:100svh; display:grid; place-items:center; overflow:hidden}
/* The plate is blurred to atmosphere so the *sharp* video inside the letterforms
   is the only thing in focus. Same artwork, two states. */
.hero-plate{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:blur(34px) saturate(.75) brightness(.8); opacity:.5; z-index:0;
  transform:scale(1.18);
}
.hero::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(115% 85% at 50% 46%, rgba(10,10,11,.35) 0%, rgba(10,10,11,.85) 58%, var(--ink) 100%),
    linear-gradient(to bottom, var(--ink) 0%, transparent 22%, transparent 76%, var(--ink) 100%);
}
.hero-inner{
  position:relative; z-index:4; width:min(1180px,100%);
  padding:7rem var(--gut) 6rem; text-align:center;
}
.hero-type{margin:0 0 2rem}
#heroCanvas{width:100%; height:auto; display:block}
.hero-sub{
  max-width:52ch; margin:0 auto 2.75rem; font-size:1.15rem; color:color-mix(in srgb,var(--chalk) 78%,transparent);
}
.hero-actions{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap}

.plate-credit{
  position:absolute; left:var(--gut); bottom:2.25rem; z-index:4;
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:color-mix(in srgb,var(--chalk) 55%,transparent);
}
.plate-credit em{font-style:italic; text-transform:none; letter-spacing:.04em}
.dot{width:6px;height:6px;border-radius:50%;background:var(--signal);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

.scroll-cue{
  position:absolute; right:var(--gut); bottom:2.25rem; z-index:4;
  display:flex; align-items:center; gap:.75rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:color-mix(in srgb,var(--chalk) 45%,transparent);
}
.scroll-cue i{display:block; width:44px; height:1px; background:currentColor; position:relative; overflow:hidden}
.scroll-cue i::after{content:''; position:absolute; inset:0; background:var(--signal); animation:sweep 2.6s var(--ease-in-out) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}


/* ═══ hero load sequence ═══
   Order carries meaning: the frame, then the artwork resolving inside the type,
   then the reading matter. Nothing moves until the first video frame is decoded. */
.hero[data-seq] .eyebrow,
.hero[data-seq] .hero-sub,
.hero[data-seq] .hero-actions,
.hero[data-seq] .plate-credit,
.hero[data-seq] .scroll-cue{opacity:0; transform:translateY(14px)}
.hero[data-seq] #heroCanvas{clip-path:inset(0 0 100% 0); opacity:0}
.hero[data-seq] .hero-plate{opacity:0; transform:scale(1.34)}

.hero[data-seq="ready"] .eyebrow,
.hero[data-seq="ready"] .hero-sub,
.hero[data-seq="ready"] .hero-actions,
.hero[data-seq="ready"] .plate-credit,
.hero[data-seq="ready"] .scroll-cue{
  opacity:1; transform:none;
  transition:opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
.hero[data-seq="ready"] .hero-plate{
  opacity:.5; transform:scale(1.18);
  transition:opacity 1.6s var(--ease-out), transform 2.4s var(--ease-out);
}
.hero[data-seq="ready"] #heroCanvas{
  clip-path:inset(0 0 0 0); opacity:1;
  transition:clip-path 1.1s var(--ease-in-out) .18s, opacity .5s var(--ease-out) .18s;
}
.hero[data-seq="ready"] .eyebrow{transition-delay:.05s}
.hero[data-seq="ready"] .hero-sub{transition-delay:.92s}
.hero[data-seq="ready"] .hero-actions{transition-delay:1.02s}
.hero[data-seq="ready"] .plate-credit{transition-delay:1.2s}
.hero[data-seq="ready"] .scroll-cue{transition-delay:1.3s}

/* ═══ gallery wall ═══ */
.wall{background:var(--chalk); color:var(--ink); padding:clamp(4.5rem,9vw,9rem) var(--gut)}

/* press */
.band-label{
  font-family:var(--mono); font-size:.68rem; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--slate); margin:0 0 2.5rem;
}
.press-list{list-style:none; margin:0; padding:0; border-top:1px solid rgba(10,10,11,.14)}
.press-list a{
  display:grid; grid-template-columns:minmax(140px,1fr) minmax(0,3.4fr) auto;
  gap:1.5rem; align-items:baseline;
  padding:1.4rem 0; border-bottom:1px solid rgba(10,10,11,.14);
  text-decoration:none;
  transition:background var(--dur-ui) ease, transform var(--dur-ui) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .press-list a:hover{background:rgba(10,10,11,.045); transform:translateX(10px)}
}
.pub{font-family:var(--display); font-size:clamp(1.05rem,1.6vw,1.5rem); letter-spacing:-.01em}
.quote{font-family:var(--serif); font-style:italic; color:var(--slate)}
.meta{font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--graphite); white-space:nowrap}
.band-note{font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; color:var(--graphite); margin:1.5rem 0 0}
@media (max-width:760px){
  .press-list a{grid-template-columns:1fr; gap:.4rem}
  .meta{white-space:normal}
}

/* statement */
.statement-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(2rem,6vw,6rem)}
.lede{font-family:var(--display); font-size:clamp(1.6rem,3.2vw,2.9rem); line-height:1.12; letter-spacing:-.025em; margin:0}
.statement-body p{margin:0 0 1.4rem; color:var(--slate)}
.onview{display:flex; align-items:center; gap:1.25rem; margin-top:2.5rem !important}
.onview-label{font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--graphite)}
.onview img{height:34px; width:auto; filter:invert(1)}
@media (max-width:860px){ .statement-grid{grid-template-columns:1fr} }

/* ═══ CHAPTERS — the signature ═══ */
.chapters{position:relative}
.stage{position:sticky; top:0; height:100svh; overflow:hidden; z-index:0}
.stage-plates video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.04);
  filter:saturate(.9) blur(6px);
  transition:opacity var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out),
             transform 6s linear;
}
/* Blur on the way in and out means the two artworks never sit sharp on top of
   each other — the crossfade reads as one image resolving, not two overlapping. */
.stage-plates video.is-live{opacity:.5; transform:scale(1.11); filter:saturate(.9) blur(0)}
.stage::before{
  content:''; position:absolute; inset:0; z-index:2;
  background:linear-gradient(to right, var(--ink) 0%, rgba(10,10,11,.55) 45%, rgba(10,10,11,.25) 100%);
}
.stage-word{
  position:absolute; z-index:3; left:0; right:0; top:50%; transform:translateY(-50%);
  font-family:var(--display); font-weight:400;
  font-size:clamp(3.5rem,17vw,15rem); line-height:.82; letter-spacing:-.045em;
  text-align:center; color:#fff; mix-blend-mode:difference;
  pointer-events:none;
}
.stage-word.is-swapping{animation:wordIn .55s var(--ease-out)}
/* The floor is deliberate: an interrupted animation still leaves the word legible. */
@keyframes wordIn{
  from{opacity:.22; letter-spacing:.07em}
  to{opacity:1; letter-spacing:-.045em}
}
.stage-credit{
  position:absolute; z-index:4; left:var(--gut); bottom:2rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:color-mix(in srgb,var(--chalk) 52%,transparent); max-width:46ch;
}
.stage-credit em{font-style:italic; text-transform:none; letter-spacing:.04em}


/* The chapters are a numbered sequence, so the rail carries real information:
   where you are in seven, not decoration. */
.rail{
  position:absolute; z-index:6; left:var(--gut); top:50%; transform:translateY(-50%);
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem;
}
.rail li{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.16em;
  color:color-mix(in srgb,var(--chalk) 30%,transparent);
  transition:color var(--dur-ui) ease;
}
.rail li::before{
  content:''; width:16px; height:1px; background:currentColor;
  transition:width var(--dur-ui) var(--ease-out), background var(--dur-ui) ease;
}
.rail li.is-current{color:var(--signal)}
.rail li.is-current::before{width:34px; background:var(--signal)}
.rail li.is-past{color:color-mix(in srgb,var(--chalk) 55%,transparent)}

/* Channel change: a single scanline sweeps the stage when the chapter flips. */
.stage-sweep{
  position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0;
  background:linear-gradient(to bottom,
    transparent 0%, rgba(34,232,156,.05) 44%, rgba(227,229,226,.5) 50%,
    rgba(34,232,156,.05) 56%, transparent 100%);
}
.stage-sweep.is-firing{animation:channelChange .62s var(--ease-in-out)}
@keyframes channelChange{
  0%{opacity:0; transform:translateY(-100%)}
  12%{opacity:1}
  88%{opacity:1}
  100%{opacity:0; transform:translateY(100%)}
}

/* Scroll velocity bleeds the word apart, the way a signal smears under load. */
.stage-word{
  text-shadow:
    calc(var(--vel) * -3px) 0 rgba(255,0,64,.55),
    calc(var(--vel) * 3px) 0 rgba(0,190,255,.55);
}
@media (max-width:900px){ .rail{display:none} }

.chapter-track{position:relative; z-index:5; margin-top:-100svh; padding:0 var(--gut)}
.chapter-intro{min-height:100svh; display:flex; flex-direction:column; justify-content:center; max-width:36rem}
.chapter-intro h2{font-size:clamp(1.9rem,4vw,3.4rem); margin-bottom:1.5rem}
.chapter-intro-body{color:color-mix(in srgb,var(--chalk) 72%,transparent); margin:0}

.chapter{
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  max-width:34rem; margin-left:auto;
  opacity:.25; transform:translateY(24px);
  transition:opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
.chapter.is-live{opacity:1; transform:none}
.ch-index{font-family:var(--mono); font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--signal); margin:0 0 1rem}
.chapter h3{font-size:clamp(2.4rem,6vw,5rem); margin-bottom:.6rem}
.ch-sub{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:color-mix(in srgb,var(--chalk) 60%,transparent); margin:0 0 1.5rem}
.ch-body{margin:0; color:color-mix(in srgb,var(--chalk) 82%,transparent)}

.chapter-outro{min-height:70svh; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:1.25rem}
.chapter-outro-note{font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:color-mix(in srgb,var(--chalk) 50%,transparent); margin:0}

/* ═══ CANON ═══ */
.canon-head{max-width:44rem; margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.canon-head h2{font-size:clamp(2rem,4.5vw,3.6rem); margin-bottom:1.25rem}
.canon-lede{color:var(--slate); margin:0; font-size:1.1rem}

.canon-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1px; background:rgba(10,10,11,.14); border:1px solid rgba(10,10,11,.14)}
.canon-card{margin:0; background:var(--chalk); padding:0; display:flex; flex-direction:column}
.canon-card--wide{grid-column:span 2}
.canon-card--wide img{aspect-ratio:16/11; object-position:top}
/* Two copies of the same file (one fetch): the colour print is wiped in from the
   left on hover, the way a photograph comes up in the developer. */
.cc-media{position:relative; overflow:hidden}
.canon-card img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block}
.cc-base{filter:grayscale(1) contrast(1.06)}
.cc-color{
  position:absolute; inset:0; height:100%;
  clip-path:inset(0 100% 0 0);
  transition:clip-path var(--dur-slow) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .canon-card:hover .cc-color{clip-path:inset(0 0 0 0)}
}
.canon-card figcaption{padding:1.5rem; display:flex; flex-direction:column; gap:.75rem}
.cc-kicker{font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--graphite); margin:0}
.canon-card figcaption p{margin:0; color:var(--slate); font-size:.98rem}
.cc-note{font-family:var(--mono); font-size:.62rem !important; letter-spacing:.08em; color:var(--graphite) !important}

.canon-quote{
  grid-column:span 2; margin:0; background:var(--ink); color:var(--chalk);
  padding:clamp(2rem,4vw,3.5rem); display:flex; flex-direction:column; justify-content:center; gap:1.5rem;
}
.canon-quote p{margin:0; font-family:var(--display); font-size:clamp(1.25rem,2.2vw,2rem); line-height:1.18; letter-spacing:-.02em}
.canon-quote cite{font-family:var(--mono); font-style:normal; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:color-mix(in srgb,var(--chalk) 60%,transparent)}
.canon-quote a{color:var(--signal); text-decoration:none; border-bottom:1px solid currentColor}
@media (max-width:860px){ .canon-card--wide,.canon-quote{grid-column:span 1} }

/* ═══ SUMMIT ═══ */
.summit{padding:clamp(4.5rem,9vw,9rem) var(--gut); overflow:hidden}
.summit-plate{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.16; z-index:0; filter:blur(3px) saturate(.5)}
.summit::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:radial-gradient(80% 60% at 20% 30%, transparent, rgba(10,10,11,.75) 70%);
}
.summit-inner{position:relative; z-index:4; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,6vw,6rem)}
.summit-title{font-size:clamp(2.8rem,7vw,6rem); line-height:.88; letter-spacing:-.04em; margin-bottom:2rem}
.summit-title span{color:var(--signal)}
.summit-where{display:flex; flex-direction:column; gap:.35rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; margin:0 0 1.75rem; color:color-mix(in srgb,var(--chalk) 65%,transparent)}
.summit-body{color:color-mix(in srgb,var(--chalk) 80%,transparent); margin:0 0 2.25rem}

.acts{list-style:none; margin:0; padding:0; border-top:var(--rule)}
.acts li{display:grid; grid-template-columns:auto 1fr; gap:.4rem 1.5rem; padding:1.15rem 0; border-bottom:var(--rule); align-items:baseline}
.act-n{font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--signal)}
.act-t{font-family:var(--display); font-size:clamp(1rem,1.5vw,1.35rem); letter-spacing:-.01em}
.act-s{grid-column:2; font-family:var(--mono); font-size:.66rem; letter-spacing:.05em; line-height:1.7; color:color-mix(in srgb,var(--chalk) 52%,transparent)}
@media (max-width:860px){ .summit-inner{grid-template-columns:1fr} }

.affil{position:relative; z-index:4; margin-top:clamp(3rem,7vw,6rem); padding-top:clamp(2rem,4vw,3rem); border-top:var(--rule)}
.affil-label{font-family:var(--mono); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--graphite); margin:0 0 1.5rem}
.affil-list{list-style:none; display:flex; flex-wrap:wrap; gap:.6rem; margin:0 0 1.5rem; padding:0}
.affil-list li{
  font-family:var(--display); font-size:clamp(.95rem,1.4vw,1.2rem); letter-spacing:-.01em;
  padding:.6rem 1.1rem; border:1px solid color-mix(in srgb,var(--chalk) 22%,transparent);
  transition:border-color var(--dur-ui) ease, color var(--dur-ui) ease, transform var(--dur-ui) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .affil-list li:hover{border-color:var(--signal); color:var(--signal); transform:translateY(-2px)}
}
.affil-note{font-family:var(--mono); font-size:.64rem; letter-spacing:.05em; line-height:1.7; color:var(--graphite); max-width:60ch; margin:0}

/* ═══ ARCHIVE ═══ */
.archive-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,6vw,5rem); align-items:start}
.archive-text h2{font-size:clamp(2rem,4.5vw,3.6rem); margin-bottom:1.5rem}
.archive-text p{color:var(--slate); margin:0 0 1.25rem}
.archive-status{font-family:var(--mono) !important; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--graphite) !important; margin-top:2rem !important}
.archive-plates{display:grid; gap:1rem}
.archive-plates figure{margin:0}
.archive-plates img{width:100%; aspect-ratio:16/10; object-fit:cover; filter:grayscale(1); transition:filter var(--dur-slow) ease}
@media (hover:hover) and (pointer:fine){
  .archive-plates figure:hover img{filter:grayscale(0)}
}
.archive-plates figcaption{font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--graphite); padding-top:.6rem}
@media (max-width:860px){ .archive-grid{grid-template-columns:1fr} }

/* ═══ FOOTER ═══ */
.foot{padding:clamp(3.5rem,7vw,6rem) var(--gut) 2rem}
.foot-top{display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; padding-bottom:2.5rem; border-bottom:var(--rule)}
.foot-mark{height:26px; width:auto; filter:brightness(0) invert(1)}
.foot-line{font-family:var(--display); font-size:clamp(1.1rem,2vw,1.6rem); letter-spacing:-.02em; margin:0}
.foot-cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:2rem; padding:2.5rem 0}
.foot-h{font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--graphite); margin:0 0 1rem}
.foot-cols a{display:block; text-decoration:none; padding:.3rem 0; color:color-mix(in srgb,var(--chalk) 78%,transparent); transition:color var(--dur-ui) ease}
.foot-cols a:hover{color:var(--signal)}
.foot-bar{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:2rem; border-top:var(--rule); font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; color:var(--graphite)}
.foot-bar p{margin:0}
.foot-bar a{text-decoration:none}
.foot-bar a:hover{color:var(--signal)}

/* ═══ reveal ═══ */
.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
.reveal.is-in{opacity:1; transform:none}

/* ═══ narrow screens ═══ */
@media (max-width:700px){
  .scroll-cue{display:none}
  .plate-credit{right:var(--gut); bottom:1.4rem; align-items:flex-start; line-height:1.6}
  .plate-credit .dot{margin-top:.45em; flex:0 0 auto}
  .hero-inner{padding-block:6rem 8.5rem}
  .stage-credit{bottom:1.4rem; right:var(--gut)}
  .press-list a:hover{padding-inline:0}
}

/* Reduced motion means less movement, not no feedback. Opacity and colour
   transitions stay — they are what tells you the interface responded. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .grain,.stage-sweep{display:none}
  .dot,.scroll-cue i::after{animation:none}
  .stage-word{animation:none; text-shadow:none}

  /* kill movement */
  .reveal,.chapter{opacity:1 !important; transform:none !important}
  .hero[data-seq] .eyebrow,.hero[data-seq] .hero-sub,.hero[data-seq] .hero-actions,
  .hero[data-seq] .plate-credit,.hero[data-seq] .scroll-cue{opacity:1; transform:none}
  .hero[data-seq] #heroCanvas{clip-path:none; opacity:1}
  .hero[data-seq] .hero-plate{opacity:.5; transform:scale(1.18)}
  .stage-plates video{transition:opacity var(--dur-ui) ease}
  .stage-plates video.is-live{transform:none; filter:saturate(.9)}
  .press-list a:hover{transform:none}
  .affil-list li:hover{transform:none}
  .btn:active{transform:none}
  .cc-color{transition:opacity var(--dur-ui) ease; clip-path:none; opacity:0}
  .canon-card:hover .cc-color{opacity:1}
}