/* =============================================================================
   ARTIFACT PRODUCTIONS
   Cinematic · Editorial · Premium · Minimal
   No build step. No runtime dependencies. Self-hosted type.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts -- */
@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/archivo-normal.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('assets/fonts/instrument-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('assets/fonts/instrument-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Licensed wordmark hook — COMMENTED OUT UNTIL THE FONT FILES ARE LICENSED.
   Liquorstore Jazz Regular is the primary Artifact wordmark and Liquorstore 3D
   Regular is the sparing display cut. Neither ships with this repo.

   TO ENABLE: drop the licensed webfonts into assets/fonts/ using the filenames
   below and delete the two comment markers around this block. The
   --mark / --mark-3d tokens already fall back to Archivo, and the header,
   footer and loading wordmarks use the traced SVG, so nothing breaks either way.

@font-face {
  font-family: 'Liquorstore Jazz';
  src: url('assets/fonts/liquorstore-jazz-regular.woff2') format('woff2'),
       url('assets/fonts/liquorstore-jazz-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Liquorstore 3D';
  src: url('assets/fonts/liquorstore-3d-regular.woff2') format('woff2'),
       url('assets/fonts/liquorstore-3d-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
*/

/* ----------------------------------------------------------------- tokens -- */
:root {
  --ink:        #070707;
  --ink-2:      #0d0d0d;
  --char:       #131313;
  --char-2:     #1b1b1b;
  --char-3:     #242424;
  --warm:       #f2efe8;
  --warm-70:    rgba(242, 239, 232, .70);
  --warm-52:    rgba(242, 239, 232, .52);
  --warm-38:    rgba(242, 239, 232, .38);
  --line:       rgba(242, 239, 232, .13);
  --line-soft:  rgba(242, 239, 232, .07);
  --brass:      #bda87e;

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --serif:   'Instrument Serif', Georgia, 'Times New Roman', serif;
  --mark:    'Liquorstore Jazz', 'Archivo', sans-serif;
  --mark-3d: 'Liquorstore 3D', 'Liquorstore Jazz', 'Archivo', sans-serif;

  --gut:   clamp(20px, 5vw, 84px);
  --stack: clamp(72px, 11vw, 168px);
  --maxw:  1560px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--warm);
  font-family: var(--display);
  font-size: clamp(15px, 1.02vw, 17px);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: .004em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.026em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6.1vw, 5.5rem); }
h2 { font-size: clamp(2rem, 4.1vw, 3.7rem); }
h3 { font-size: clamp(1.24rem, 1.85vw, 1.85rem); letter-spacing: -.018em; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--warm); color: var(--ink); }

/* ----------------------------------------------------------- focus states -- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--warm);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 400;
  padding: 12px 20px; background: var(--warm); color: var(--ink);
  font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  transform: translateY(-180%);
  transition: transform .25s var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

.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;
}

/* ------------------------------------------------------------- primitives -- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }

.section { padding-block: var(--stack); }
.section.tight { padding-block: clamp(48px, 7vw, 104px); }
.section.flush-top { padding-top: 0; }

.eyebrow {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--warm-52);
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px 40px;
  flex-wrap: wrap;
  padding-bottom: clamp(24px, 3vw, 44px);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(34px, 4.4vw, 68px);
}
.section-head h2 { font-size: clamp(1.7rem, 3vw, 2.8rem); }

.lede {
  font-size: clamp(1.05rem, 1.45vw, 1.32rem);
  line-height: 1.55;
  color: var(--warm-70);
  max-width: 62ch;
}

/* ---------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 26px;
  border: 1px solid var(--line);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--warm);
  background: transparent;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.btn:hover { background: var(--warm); color: var(--ink); border-color: var(--warm); }
.btn .ic { font-size: .82em; line-height: 1; }
.btn.solid { background: var(--warm); color: var(--ink); border-color: var(--warm); }
.btn.solid:hover { background: transparent; color: var(--warm); border-color: var(--warm); }

.link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
  transition: border-color .35s var(--ease), color .35s var(--ease);
}
.link:hover { border-color: var(--warm); }
.link span { transition: transform .35s var(--ease); }
.link:hover span { transform: translateX(5px); }

/* --------------------------------------------------------------- loading -- */
.loading-screen {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: var(--ink);
  transition: opacity .7s var(--ease), visibility .7s var(--ease);
}
.loading-screen.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loading-mark { width: min(300px, 54vw); color: var(--warm); opacity: .9; }
.loading-mark img, .loading-mark svg { width: 100%; height: auto; }
.loading-bar { margin-top: 22px; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.loading-bar::after {
  content: ''; position: absolute; inset: 0;
  background: var(--warm); transform-origin: left;
  animation: load 1.4s var(--ease) forwards;
}
@keyframes load { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------------------------------------------------------------- header -- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 22px var(--gut);
  transition: background .45s var(--ease), padding .45s var(--ease), border-color .45s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(7,7,7,.72), rgba(7,7,7,0));
  transition: opacity .45s var(--ease);
}
.site-header.is-stuck {
  background: rgba(7, 7, 7, .9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  padding-block: 15px;
}
.site-header.is-stuck::before { opacity: 0; }

.brand { display: block; color: var(--warm); }
.brand img, .brand svg { width: clamp(112px, 12vw, 156px); height: auto; transition: width .45s var(--ease); }
.site-header.is-stuck .brand img,
.site-header.is-stuck .brand svg { width: clamp(100px, 10vw, 128px); }

.desktop-nav { display: flex; align-items: center; gap: clamp(16px, 2.1vw, 34px); }
.desktop-nav a {
  position: relative;
  font-size: .705rem;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--warm-70);
  padding-block: 6px;
  transition: color .3s var(--ease);
}
.desktop-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--warm); transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.desktop-nav a:hover { color: var(--warm); }
.desktop-nav a:hover::after,
.desktop-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.desktop-nav a[aria-current="page"] { color: var(--warm); }

.menu-button {
  display: none;
  width: 44px; height: 44px;
  flex-direction: column; justify-content: center; align-items: flex-end; gap: 6px;
  margin-right: -10px;
}
.menu-button span { display: block; width: 24px; height: 1px; background: var(--warm); }
.menu-button span:nth-child(2) { width: 16px; }

/* ----------------------------------------------------------- mobile menu -- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 150;
  display: flex; flex-direction: column; justify-content: center;
  gap: 4px;
  padding: 0 var(--gut);
  background: var(--ink);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .62s var(--ease), visibility .62s var(--ease);
}
.mobile-menu.is-open { transform: translateY(0); visibility: visible; }
.mobile-menu a {
  font-size: clamp(1.7rem, 7.4vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.28;
  color: var(--warm-70);
  transition: color .3s var(--ease);
}
.mobile-menu a:hover, .mobile-menu a[aria-current="page"] { color: var(--warm); }
.mobile-close {
  position: absolute; top: 18px; right: calc(var(--gut) - 8px);
  width: 46px; height: 46px; font-size: 1.7rem; line-height: 1; color: var(--warm);
}
.mobile-menu .menu-foot {
  position: absolute; left: var(--gut); bottom: 40px; right: var(--gut);
  font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--warm-38);
}

/* ------------------------------------------------------------------ hero -- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.hero-media > .vframe { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.hero-media::after {
  content: ''; position: absolute; inset: 0; z-index: 3;
  background:
    linear-gradient(to top, rgba(7,7,7,.95) 0%, rgba(7,7,7,.58) 34%, rgba(7,7,7,.24) 62%, rgba(7,7,7,.62) 100%),
    linear-gradient(to right, rgba(7,7,7,.74) 0%, rgba(7,7,7,.2) 54%, rgba(7,7,7,.42) 100%);
  pointer-events: none;
}
.hero-inner {
  position: relative; z-index: 4;
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding: 0 var(--gut) clamp(74px, 9vw, 132px);
}
.hero h1 { max-width: 17ch; margin-top: 20px; white-space: pre-line; }
.hero-sub {
  max-width: 58ch; margin-top: 26px;
  font-size: clamp(.98rem, 1.22vw, 1.15rem); line-height: 1.62; color: var(--warm-70);
}
.hero-support {
  margin-top: 16px;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.12rem, 1.6vw, 1.5rem); letter-spacing: 0; color: var(--warm-70);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(30px, 3.4vw, 46px); }

.hero-credit {
  position: absolute; right: var(--gut); bottom: clamp(74px, 9vw, 132px); z-index: 4;
  max-width: 210px; text-align: right;
  font-size: .62rem; letter-spacing: .17em; text-transform: uppercase; color: var(--warm-38);
  line-height: 1.8;
}
.scroll-cue {
  position: absolute; left: var(--gut); bottom: 26px; z-index: 4;
  font-size: .62rem; letter-spacing: .34em; text-transform: uppercase; color: var(--warm-38);
  display: flex; align-items: center; gap: 12px;
}
.scroll-cue::after {
  content: ''; width: 46px; height: 1px; background: var(--warm-38);
  transform-origin: left; animation: cue 2.8s var(--ease) infinite;
}
@keyframes cue { 0%,100% { transform: scaleX(.32); opacity: .4; } 50% { transform: scaleX(1); opacity: 1; } }

/* ------------------------------------------------------------ video frame -- */
.vframe {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--char);
  overflow: hidden;
}
.vframe .poster {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; object-fit: cover;
}
/* Swapped instantly, and only once the player reports it is actually playing.
   No fade: the still holds the frame until real video is behind it. */
.vframe.is-playing .poster { visibility: hidden; }
/* Pre-paint backing only. Must stay BELOW the iframe (z-index 1) or it covers
   the video the moment the still is swapped out. */
.vframe .shade { position: absolute; inset: 0; z-index: 0; background: var(--char); }
.vframe iframe {
  position: absolute; top: 50%; left: 50%; z-index: 1;
  width: 100%; height: 100%;
  transform: translate(-50%, -50%);
  border: 0; pointer-events: none;
}
/* .cover frames are sized to fill by fitCover() in site.js so a 16:9 embed
   never letterboxes inside a 21:9 or portrait container. */

.sound-cue {
  position: absolute; z-index: 5; right: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  background: rgba(7,7,7,.5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--warm-70);
  pointer-events: none;
}

/* ------------------------------------------------------------------ reel -- */
.reel-item { position: relative; border-top: 1px solid var(--line); }
.reel-item:first-child { border-top: 0; }

.reel-media {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  min-height: 360px;
  overflow: hidden;
  background: var(--char);
}
.reel-media > .vframe { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.reel-media > img.still {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.03);
  transition: transform 1.8s var(--ease);
}
.reel-item:hover .reel-media > img.still { transform: scale(1.07); }
.reel-media::after {
  content: ''; position: absolute; inset: 0; z-index: 4;
  background:
    linear-gradient(to top, rgba(7,7,7,.96) 2%, rgba(7,7,7,.5) 48%, rgba(7,7,7,.18) 80%),
    linear-gradient(to right, rgba(7,7,7,.9) 0%, rgba(7,7,7,.66) 26%, rgba(7,7,7,.2) 52%, rgba(7,7,7,0) 72%);
  pointer-events: none;
}
.reel-media.no-media {
  display: grid; place-items: center;
  background: radial-gradient(120% 100% at 22% 0%, #1d1d1d 0%, #0b0b0b 72%);
}
.reel-media.no-media .mark {
  font-family: var(--mark-3d);
  font-size: clamp(2.2rem, 9vw, 7rem);
  letter-spacing: .04em;
  color: rgba(242,239,232,.06);
  text-transform: uppercase;
  text-align: center;
  padding-inline: 6vw;
}

.reel-copy {
  position: absolute; z-index: 5; left: 0; right: 0; bottom: 0;
  padding: 0 var(--gut) clamp(32px, 4.4vw, 62px);
  max-width: var(--maxw); margin-inline: auto;
}
.reel-index { display: block; font-size: .7rem; letter-spacing: .28em; color: var(--warm-38); margin-bottom: 12px; }
.reel-copy h3 { font-size: clamp(1.85rem, 4.4vw, 4rem); letter-spacing: -.03em; max-width: 16ch; }
.reel-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin-top: 16px;
  font-size: .66rem; letter-spacing: .19em; text-transform: uppercase; color: var(--warm-70);
}
.reel-meta i { font-style: normal; display: inline-flex; align-items: center; gap: 16px; }
.reel-meta i + i::before { content: ''; width: 3px; height: 3px; background: var(--warm-38); border-radius: 50%; }
.reel-desc { margin-top: 18px; max-width: 54ch; color: var(--warm-70); font-size: .96rem; }
.reel-recognition { margin-top: 16px; display: flex; flex-direction: column; gap: 7px; max-width: 54ch; }
.reel-recognition li {
  position: relative; padding-left: 20px;
  font-size: .79rem; color: var(--warm-52); line-height: 1.5;
}
.reel-recognition li::before {
  content: ''; position: absolute; left: 0; top: .66em; width: 9px; height: 1px; background: var(--brass);
}
.reel-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 2.6vw, 34px); }

/* ------------------------------------------------------------- statement -- */
.statement {
  padding-block: clamp(94px, 15vw, 220px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: radial-gradient(140% 100% at 50% 0%, #101010 0%, var(--ink) 68%);
}
.statement-inner { max-width: 1120px; margin-inline: auto; text-align: center; }
.statement p.body {
  font-size: clamp(1.32rem, 2.9vw, 2.5rem);
  line-height: 1.28; letter-spacing: -.024em; font-weight: 400; text-wrap: balance;
}
.statement p.support {
  margin-top: clamp(28px, 3.4vw, 46px);
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.08rem, 1.7vw, 1.6rem); color: var(--brass); letter-spacing: 0;
}

/* ---------------------------------------------------------------- ticker -- */
.ticker { position: relative; padding-block: clamp(38px, 5vw, 62px); overflow: hidden; border-bottom: 1px solid var(--line); }
.ticker-label { text-align: center; margin-bottom: clamp(24px, 3vw, 38px); }
.ticker-track { display: flex; width: max-content; will-change: transform; animation: ticker 93s linear infinite; }
.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track,
.ticker.is-paused .ticker-track { animation-play-state: paused; }
.ticker-group { display: flex; align-items: center; flex: 0 0 auto; }
.ticker-item {
  display: inline-flex; align-items: center; gap: clamp(28px, 4.2vw, 62px);
  padding-inline: clamp(18px, 2.6vw, 38px);
  /* Scaled with the logo height above. Paramount and Viacom have no artwork
     yet, so their type has to hold the same optical weight as the marks
     either side of it or the row looks broken rather than mixed. */
  font-size: clamp(1.7rem, 2.9vw, 2.8rem);
  font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--warm-52); white-space: nowrap;
  transition: color .35s var(--ease);
}
.ticker-item:hover { color: var(--warm); }
.ticker-item::after { content: ''; width: 4px; height: 4px; background: var(--brass); opacity: .55; border-radius: 50%; }
/* Left -> right travel. The track holds the partner set twice, so starting
   half a track to the left and ending at zero arrives at a pixel-identical
   frame and the loop point cannot be seen. */
@keyframes ticker { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } }
.ticker > .fade {
  position: absolute; top: 0; bottom: 0; width: clamp(48px, 11vw, 190px); z-index: 2; pointer-events: none;
}
.ticker > .fade.l { left: 0;  background: linear-gradient(to right, var(--ink), rgba(7,7,7,0)); }
.ticker > .fade.r { right: 0; background: linear-gradient(to left,  var(--ink), rgba(7,7,7,0)); }

/* ----------------------------------------------------------- split blocks -- */
.split {
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  gap: clamp(32px, 5.5vw, 96px);
  align-items: center;
}
.split > figure { margin: 0; position: relative; overflow: hidden; }
.split > figure img { width: 100%; aspect-ratio: var(--fig-ratio, 4 / 5); object-fit: cover; }

.frame-mark {
  display: grid; place-items: center;
  aspect-ratio: 4 / 5;
  background: radial-gradient(120% 100% at 30% 10%, #1c1c1c, #0b0b0b 74%);
  border: 1px solid var(--line);
}
.frame-mark .initials {
  font-family: var(--mark-3d);
  font-size: clamp(3rem, 7vw, 6rem); letter-spacing: .04em; color: rgba(242,239,232,.13);
}

.editorial h2 { margin-bottom: clamp(20px, 2.4vw, 32px); }
.editorial p { color: var(--warm-70); max-width: 66ch; }
.editorial p.first { color: var(--warm); font-size: clamp(1.1rem, 1.5vw, 1.36rem); line-height: 1.5; }
.editorial .actions { margin-top: clamp(26px, 3vw, 40px); display: flex; gap: 14px; flex-wrap: wrap; }

.pullquote {
  margin: clamp(36px, 5vw, 68px) 0;
  padding-left: clamp(20px, 2.6vw, 38px);
  border-left: 1px solid var(--brass);
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.4vw, 2.1rem);
  line-height: 1.3; letter-spacing: -.01em; color: var(--warm); max-width: 30ch;
}

.closing-line {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.2rem, 2.1vw, 1.9rem); color: var(--brass);
}

/* ----------------------------------------------------------------- stats -- */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  margin-top: clamp(46px, 6vw, 88px);
}
.stat { background: var(--ink); padding: clamp(24px, 3vw, 40px); }
.stat strong { display: block; font-size: clamp(2rem, 3.4vw, 3.1rem); font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.stat span { display: block; margin-top: 12px; font-size: .64rem; letter-spacing: .19em; text-transform: uppercase; color: var(--warm-52); }

/* ------------------------------------------------------------ page heroes -- */
.page-hero {
  padding-top: clamp(140px, 17vw, 230px);
  padding-bottom: clamp(44px, 6vw, 88px);
  border-bottom: 1px solid var(--line);
}
.page-hero h1 { margin-top: 18px; max-width: 20ch; }
.page-hero .lede { margin-top: 24px; }

/* ------------------------------------------------------------------ team -- */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(28px, 4vw, 64px); }
.team-card { border-top: 1px solid var(--line); padding-top: clamp(22px, 2.6vw, 34px); }
.team-card .portrait { margin-bottom: clamp(20px, 2.4vw, 30px); }
.team-card .portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.team-card .frame-mark { margin-bottom: clamp(20px, 2.4vw, 30px); aspect-ratio: 16 / 9; }
.team-card .frame-mark .initials { font-size: clamp(2.4rem, 5vw, 4.2rem); color: rgba(242,239,232,.17); }
.team-card h3 { font-size: clamp(1.5rem, 2.4vw, 2.15rem); }
.team-card .role { margin-top: 11px; font-size: .65rem; letter-spacing: .21em; text-transform: uppercase; color: var(--brass); }
.team-card p { margin-top: 18px; color: var(--warm-70); font-size: .94rem; }

.bio-block { border-top: 1px solid var(--line); padding-top: clamp(26px, 3.2vw, 44px); }
.bio-block + .bio-block { margin-top: clamp(46px, 6vw, 90px); }

/* ----------------------------------------------------------------- press -- */
.press-group + .press-group { margin-top: clamp(46px, 6vw, 82px); }
.press-group > h3 {
  font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--brass);
  padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.press-item {
  display: grid; grid-template-columns: 132px minmax(0, 1fr) auto;
  gap: clamp(16px, 3vw, 46px);
  align-items: center;
  padding-block: clamp(20px, 2.6vw, 32px);
  border-bottom: 1px solid var(--line-soft);
  transition: background .4s var(--ease);
}
.press-item:hover { background: rgba(242,239,232,.024); }
.press-item .thumb { width: 132px; aspect-ratio: 16 / 10; object-fit: cover; }
.press-item .pub { font-size: .67rem; letter-spacing: .2em; text-transform: uppercase; color: var(--warm); }
.press-item .date { font-size: .67rem; letter-spacing: .1em; color: var(--warm-38); margin-top: 6px; }
.press-item h4 { margin: 10px 0 0; font-size: clamp(1rem, 1.35vw, 1.2rem); font-weight: 500; letter-spacing: -.012em; line-height: 1.34; }
.press-item p { margin: 9px 0 0; font-size: .87rem; color: var(--warm-52); max-width: 62ch; }
.press-item .go {
  font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--warm-52);
  white-space: nowrap; display: inline-flex; gap: 9px; align-items: center;
  transition: color .3s var(--ease);
}
.press-item:hover .go { color: var(--warm); }

/* ------------------------------------------------------------- turnstile -- */
.turnstile-viewport {
  overflow: hidden;
  cursor: grab;
  -webkit-user-select: none; user-select: none;
  margin-inline: calc(var(--gut) * -1);
  padding-inline: var(--gut);
}
.turnstile-viewport.is-dragging { cursor: grabbing; }
.turnstile-track { display: flex; gap: clamp(14px, 1.8vw, 26px); transition: transform .68s var(--ease); will-change: transform; }
.turn-card {
  flex: 0 0 clamp(240px, 27vw, 400px);
  position: relative; display: block; background: var(--char); overflow: hidden;
}
.turn-card img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; opacity: .82;
  transition: transform 1.1s var(--ease), opacity .5s var(--ease);
}
.turn-card:hover img { transform: scale(1.045); opacity: 1; }
.turn-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7,7,7,.94) 6%, rgba(7,7,7,.1) 58%);
  pointer-events: none;
}
.turn-card .body { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: clamp(18px, 2vw, 26px); }
.turn-card .kind {
  display: inline-block; margin-bottom: 11px; padding: 5px 11px; border: 1px solid var(--line);
  font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: var(--warm-70);
}
.turn-card .cap { font-size: .9rem; line-height: 1.38; letter-spacing: -.008em; }
.turn-card .proj { margin-top: 9px; font-size: .61rem; letter-spacing: .2em; text-transform: uppercase; color: var(--warm-38); }

.turnstile-nav { display: flex; gap: 10px; }
.turnstile-nav button {
  width: 48px; height: 48px; border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 1rem; color: var(--warm-70);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.turnstile-nav button:hover:not(:disabled) { background: var(--warm); color: var(--ink); border-color: var(--warm); }
.turnstile-nav button:disabled { opacity: .28; cursor: default; }

/* --------------------------------------------------------------- library -- */
.filters {
  display: flex; flex-direction: column; gap: clamp(13px, 1.7vw, 20px);
  padding-bottom: clamp(24px, 3.2vw, 38px);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(24px, 3vw, 38px);
}
.filter-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.filter-row > .facet-label {
  flex: 0 0 clamp(74px, 8vw, 108px);
  font-size: .6rem; letter-spacing: .21em; text-transform: uppercase; color: var(--warm-38);
}
.chip {
  padding: 8px 15px; border: 1px solid var(--line);
  font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; color: var(--warm-52);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.chip:hover { color: var(--warm); border-color: var(--warm-38); }
.chip[aria-pressed="true"] { background: var(--warm); color: var(--ink); border-color: var(--warm); }

.result-count { font-size: .66rem; letter-spacing: .19em; text-transform: uppercase; color: var(--warm-38); margin-bottom: clamp(20px, 2.4vw, 30px); }

.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(16px, 2vw, 30px); }
.lib-card { position: relative; display: block; overflow: hidden; }
.lib-card .shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--char-2); }
.lib-card .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.lib-card:hover .shot img { transform: scale(1.05); }
.lib-card .shot.empty { display: grid; place-items: center; background: radial-gradient(120% 120% at 30% 10%, #1c1c1c, #0c0c0c 74%); }
.lib-card .shot.empty span { font-family: var(--mark-3d); font-size: 1.7rem; letter-spacing: .06em; color: rgba(242,239,232,.12); text-transform: uppercase; }
.lib-card .body { padding: 18px 20px 22px; border: 1px solid var(--line); border-top: 0; }
.lib-card h3 { font-size: 1.05rem; font-weight: 500; letter-spacing: -.012em; }
.lib-card .meta { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .61rem; letter-spacing: .17em; text-transform: uppercase; color: var(--warm-38); }
.lib-card .play-tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 5px 10px; background: rgba(7,7,7,.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: .54rem; letter-spacing: .2em; text-transform: uppercase; color: var(--warm);
}
.empty-state { padding: clamp(46px, 7vw, 96px) 0; text-align: center; color: var(--warm-38); font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; }

/* ---------------------------------------------------------- project page -- */
.project-hero { padding-top: clamp(96px, 11vw, 140px); }
.project-hero .stage { position: relative; overflow: hidden; background: var(--char); }
.project-hero .stage > .vframe { aspect-ratio: 21 / 9; }
.project-hero .stage > img.still { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.project-head {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(26px, 4vw, 72px);
  padding-top: clamp(30px, 4vw, 54px);
}
.project-head h1 { font-size: clamp(2.1rem, 5vw, 4.2rem); }
.project-head .kicker { margin-bottom: 16px; }
.project-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line); align-self: start;
}
.project-facts > div { background: var(--ink); padding: 18px 20px; }
.project-facts dt { font-size: .59rem; letter-spacing: .2em; text-transform: uppercase; color: var(--warm-38); }
.project-facts dd { margin-top: 8px; font-size: .93rem; line-height: 1.4; }

.project-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 5vw, 80px); }
.credits-list li {
  display: flex; justify-content: space-between; gap: 20px;
  padding-block: 13px; border-bottom: 1px solid var(--line-soft); font-size: .9rem;
}
.credits-list li span { color: var(--warm-38); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; }
.credits-list li strong { font-weight: 500; text-align: right; }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(10px, 1.4vw, 20px); }
.gallery-grid img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(14px, 2vw, 26px); }
.video-grid .vcard .label { margin-top: 12px; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--warm-52); }

.project-pager { display: flex; justify-content: space-between; gap: 20px; padding-block: clamp(24px, 3.4vw, 44px); border-top: 1px solid var(--line); }
.project-pager a { font-size: .66rem; letter-spacing: .19em; text-transform: uppercase; color: var(--warm-52); }
.project-pager a:hover { color: var(--warm); }

/* --------------------------------------------------------------- contact -- */
.contact-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5.5vw, 96px); }
.contact-lines { margin-top: clamp(28px, 3.6vw, 46px); }
.contact-line { padding-block: 18px; border-top: 1px solid var(--line); }
.contact-line span { display: block; margin-bottom: 8px; font-size: .6rem; letter-spacing: .21em; text-transform: uppercase; color: var(--warm-38); }
.contact-line a, .contact-line p { font-size: clamp(1rem, 1.4vw, 1.2rem); }

.field { margin-bottom: 22px; }
.field label { display: block; margin-bottom: 9px; font-size: .6rem; letter-spacing: .21em; text-transform: uppercase; color: var(--warm-52); }
.field input, .field textarea, .field select {
  width: 100%; padding: 14px 16px;
  background: var(--char); border: 1px solid var(--line);
  color: var(--warm); font: inherit; font-size: .94rem;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.field textarea { min-height: 168px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--warm-38); background: var(--char-2); }
.form-status { margin-top: 18px; font-size: .84rem; color: var(--warm-70); min-height: 1.4em; }
.form-status[data-state="error"] { color: #e2a48f; }

/* ---------------------------------------------------------------- footer -- */
.footer { border-top: 1px solid var(--line); padding-block: clamp(52px, 7vw, 96px); }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(28px, 4vw, 62px); }
.footer-mark img, .footer-mark svg { width: clamp(150px, 17vw, 230px); height: auto; }
.footer-mark p { margin-top: 20px; max-width: 34ch; color: var(--warm-52); font-size: .89rem; }
.footer h3 { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--warm-38); margin-bottom: 16px; font-weight: 600; }
.footer nav a { display: block; padding-block: 5px; font-size: .89rem; color: var(--warm-70); transition: color .3s var(--ease); }
.footer nav a:hover { color: var(--warm); }
.footer .contact-out a { font-size: .95rem; color: var(--warm-70); transition: color .3s var(--ease); }
.footer .contact-out a:hover { color: var(--warm); }
.socials { display: flex; gap: 10px; }
.socials a {
  width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line);
  font-size: .6rem; letter-spacing: .1em; color: var(--warm-52);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.socials a:hover { background: var(--warm); color: var(--ink); border-color: var(--warm); }
.colophon {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 28px;
  margin-top: clamp(42px, 6vw, 78px); padding-top: 26px; border-top: 1px solid var(--line);
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--warm-38);
}

/* ----------------------------------------------------------------- modal -- */
.video-modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(4, 4, 4, .97);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease), visibility .45s var(--ease);
}
.video-modal.is-open { opacity: 1; visibility: visible; }
.modal-stage { width: min(1400px, 100%); }
.modal-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.modal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.modal-caption {
  margin-top: 16px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--warm-52);
}
.modal-close {
  position: absolute; top: clamp(14px, 3vw, 30px); right: clamp(14px, 3vw, 30px);
  width: 50px; height: 50px; border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 1.3rem; color: var(--warm);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.modal-close:hover { background: var(--warm); color: var(--ink); }
.modal-empty { display: grid; place-items: center; height: 100%; padding: 32px; text-align: center; }
.modal-empty strong { display: block; font-size: 1.05rem; margin-bottom: 10px; }
.modal-empty span { font-size: .8rem; color: var(--warm-52); }

/* ----------------------------------------------------------------- notice -- */
.notice {
  border: 1px solid var(--line);
  padding: clamp(24px, 3.4vw, 44px);
  background: linear-gradient(180deg, rgba(242,239,232,.028), transparent);
  max-width: 74ch;
}
.notice h3 { font-size: clamp(1.2rem, 1.9vw, 1.6rem); margin-bottom: 14px; }
.notice p { color: var(--warm-70); }

/* ------------------------------------------------------------- animation -- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .95s var(--ease), transform .95s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 1080px) {
  .split, .project-head, .project-body, .contact-layout { grid-template-columns: 1fr; }
  /* Editorial photography in a split is portrait; keep it portrait when the
     columns stack rather than letterboxing it into 16:10. */
  .split > figure img { aspect-ratio: var(--fig-ratio, 4 / 5); }
  .frame-mark { aspect-ratio: 16 / 10; }
  .team-card .frame-mark { aspect-ratio: 16 / 9; }
  .reel-media { aspect-ratio: 16 / 9; }
}

@media (max-width: 900px) {
  .desktop-nav { display: none; }
  .menu-button { display: flex; }
  .hero-credit { display: none; }
  .press-item { grid-template-columns: 96px minmax(0, 1fr); }
  .press-item .thumb { width: 96px; }
  .press-item .go { grid-column: 2; justify-self: start; margin-top: 6px; }
}

@media (max-width: 640px) {
  .hero { min-height: 94svh; }
  .reel-media { aspect-ratio: 4 / 5; min-height: 0; }
  .reel-copy h3 { max-width: 12ch; }
  .press-item { grid-template-columns: 1fr; }
  .press-item .thumb { width: 100%; aspect-ratio: 16 / 9; }
  .press-item .go { grid-column: 1; }
  .scroll-cue { display: none; }
  .turn-card { flex: 0 0 76vw; }
  .filter-row > .facet-label { flex-basis: 100%; }
  .colophon { flex-direction: column; }
  .project-facts { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .ticker-track { animation: none; transform: none; width: 100%; flex-wrap: wrap; justify-content: center; }
  .ticker-group { flex-wrap: wrap; justify-content: center; }
  .ticker-group.dupe { display: none; }
  .ticker > .fade { display: none; }
  .turnstile-track { transition: none; }
  .loading-screen { display: none; }
  .scroll-cue::after { animation: none; transform: scaleX(1); }
}

/* ------------------------------------------------------- editorial layout -- */
.editorial-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 96px);
  align-items: start;
}
.editorial-grid > .lead-col h2 { font-size: clamp(1.7rem, 3.2vw, 3rem); }
.editorial-grid > .lead-col .eyebrow { margin-bottom: 18px; display: block; }
.editorial-grid .body-col p { color: var(--warm-70); max-width: 60ch; }
.editorial-grid .body-col p.first { color: var(--warm); font-size: clamp(1.1rem, 1.5vw, 1.36rem); line-height: 1.5; }
@media (max-width: 1080px) { .editorial-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------- vertical social cards -- */
.turn-card.is-vertical { flex: 0 0 clamp(200px, 19vw, 286px); }
.turn-card.is-vertical img { aspect-ratio: 9 / 16; }
.turn-card.is-vertical::after {
  background: linear-gradient(to top, rgba(7,7,7,.88) 4%, rgba(7,7,7,.06) 44%);
}
.turn-card.is-vertical .body { padding: clamp(14px, 1.5vw, 20px); }
@media (max-width: 640px) { .turn-card.is-vertical { flex: 0 0 58vw; } }

/* Partner ticker entries that carry a real logo instead of a wordmark. */
.ticker-item.has-logo { padding-block: 4px; }
.ticker-item.has-logo img {
  height: clamp(56px, 6.4vw, 84px); width: auto;
  /* Matched to the wordmark entries rather than guessed. var(--warm-52) over
     var(--ink) lands at luminance 127.7; white needs .487 opacity to sit at the
     same value, so a logo row and a type row read as one line. */
  opacity: .487;
  /* The artwork already ships white on transparent; the filter is belt and
     braces so a colour logo dropped in later still reads as part of the row. */
  filter: brightness(0) invert(1);
  transition: opacity .35s var(--ease);
}
.ticker-item.has-logo:hover img { opacity: 1; }

/* Membership / affiliation line under a team bio. */
.member-note {
  margin-top: 14px !important;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: .78rem !important;
  letter-spacing: .04em;
  color: var(--warm-38) !important;
}

/* Team cards vary in height once a membership note is present; keep the
   "read full bio" links aligned across the row. */
.team-card { display: flex; flex-direction: column; }
.team-card .bio-link { margin-top: auto; padding-top: 22px; }

/* Contact band photography. The default frame is the vertical studio shot at
   2:3, stepping down on narrow screens so it stays portrait rather than
   becoming a letterbox. Any figure can pin its own shape instead with
   style="--fig-ratio: 3/4", which then holds at every width — use that when a
   supplied photograph should be shown exactly as shot. */
.split > figure.contact-figure img { aspect-ratio: var(--fig-ratio, 2 / 3); }
@media (max-width: 1080px) { .split > figure.contact-figure img { aspect-ratio: var(--fig-ratio, 4 / 5); } }
@media (max-width: 640px)  { .split > figure.contact-figure img { aspect-ratio: var(--fig-ratio, 1 / 1); } }


/* Let the browser own vertical scrolling on touch; we only claim the X axis. */
.turnstile-viewport { touch-action: pan-y; }
.turn-card img { -webkit-user-drag: none; user-select: none; }

/* ==========================================================================
   MOBILE
   --------------------------------------------------------------------------
   Everything below is scoped to narrow viewports or to coarse pointers, so
   the desktop layout above is untouched. Each rule fixes something that was
   measured on a real phone viewport, not adjusted by eye.
   ========================================================================== */

/* -- 1. Nothing may make the document wider than the screen ---------------- */
/* A grid column of `1fr` still cannot shrink below its content's min-content
   width. The contact band holds the email address as one unbreakable 29
   character string, which forced the whole page 40px wider than an iPhone SE
   and gave every page a sideways scroll. `minmax(0, 1fr)` lets the column
   shrink; the wrapping rules below let the address itself break. */
@media (max-width: 1080px) {
  .split, .project-head, .project-body, .contact-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .footer-top { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
  .footer-top > * { min-width: 0; }
  .btn, .contact-out a, .contact-line a, .footer nav a { overflow-wrap: anywhere; }
  .actions { flex-wrap: wrap; }
  .actions > .btn { max-width: 100%; }
}

/* -- 2. The featured reel stacks instead of overlaying --------------------- */
/* `.reel-copy` is absolutely positioned over the still, which works while the
   still is taller than the copy. On a phone the copy runs to 600px or more
   against a 220px still, so it escaped its frame and collided with the item
   above it — titles printed straight through each other. Below 900px the copy
   returns to normal flow underneath the media. */
@media (max-width: 900px) {
  .reel-media { aspect-ratio: 16 / 9; min-height: 0; }
  .reel-copy {
    position: static;
    max-width: none; margin-inline: 0;
    padding: clamp(26px, 6vw, 40px) var(--gut) clamp(40px, 9vw, 60px);
  }
  .reel-copy h3 { max-width: none; }
  /* The left-to-right scrim existed to protect overlaid text. With the copy
     out of the frame it only muddies the still, so only a light foot remains. */
  .reel-media::after {
    background: linear-gradient(to top, rgba(7,7,7,.55) 0%, rgba(7,7,7,0) 55%);
  }
  .reel-item { border-top-width: 1px; }
}
@media (max-width: 640px) {
  .reel-media { aspect-ratio: 16 / 9; }
}

/* -- 3. Text floor -------------------------------------------------------- */
/* The editorial small caps read at 9.6px to 11.2px on a phone. The letter
   spacing that makes them work at desktop size makes them harder, not easier,
   to read that small, so the whole scale steps up to a ~12px floor while
   keeping the same proportions between levels. */
@media (max-width: 900px) {
  .eyebrow, .ticker-label.eyebrow { font-size: .78rem; letter-spacing: .26em; }
  .btn { font-size: .82rem; padding: 15px 24px; }
  .link { font-size: .82rem; }
  .reel-index { font-size: .78rem; }
  .reel-meta { font-size: .76rem; letter-spacing: .16em; }
  .reel-desc { font-size: 1rem; }
  .reel-recognition li { font-size: .86rem; }
  .sound-cue { font-size: .7rem; }
  .team-card .role { font-size: .78rem; }
  .press-item .pub, .press-item .date { font-size: .78rem; }
  .press-item .go { font-size: .78rem; }
  .press-group > h3 { font-size: 1.05rem; }
  .turn-card .kind { font-size: .7rem; }
  .turn-card .proj { font-size: .78rem; }
  .chip { font-size: .76rem; letter-spacing: .11em; }
  .filter-row > .facet-label { font-size: .72rem; }
  .result-count { font-size: .76rem; }
  .lib-card .play-tag { font-size: .68rem; }
  .lib-card .meta span { font-size: .74rem; }
  .footer h3 { font-size: .72rem; letter-spacing: .2em; }
  .footer nav a, .footer .contact-out a { font-size: .95rem; }
  .colophon, .colophon span { font-size: .75rem; }
  .mobile-menu .menu-foot { font-size: .75rem; }
  .field label, .contact-line span { font-size: .72rem; letter-spacing: .18em; }
}

/* -- 4. Form controls never trigger the iOS zoom --------------------------- */
/* Safari zooms the whole page when a focused control is under 16px. The fields
   were at 15.04px, so every tap on the contact form yanked the layout. */
@media (max-width: 900px) {
  .field input, .field textarea, .field select { font-size: 16px; padding: 15px 16px; }
}

/* -- 5. Tap targets ------------------------------------------------------- */
/* Measured heights were 16px to 37px against the 44px that a fingertip needs.
   Only padding grows — no type or icon changes size, so the layout holds. */
@media (pointer: coarse), (max-width: 900px) {
  .brand { padding-block: 13px; }
  .link { padding-bottom: 12px; padding-top: 10px; }
  .mobile-menu a { padding-block: 6px; }
  .footer nav a { padding-block: 11px; }
  .footer .contact-out a { display: inline-block; padding-block: 13px; }
  .chip { padding: 12px 16px; }
  .press-item .go { padding-block: 10px; }
}

/* -- 6. Library filters fold away ----------------------------------------- */
/* Five facets and 35 chips stood 876px tall on an 844px screen, so the archive
   itself was below a full screen of controls. On a phone the rows collapse
   behind a toggle that reports how many filters are active; on desktop the
   toggle is not rendered at all and nothing changes. */
.filters-toggle { display: none; }
@media (max-width: 900px) {
  .filters-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    width: 100%; padding: 15px 18px;
    border: 1px solid var(--line); background: transparent; color: var(--warm);
    font: inherit; font-size: .82rem; font-weight: 600;
    letter-spacing: .17em; text-transform: uppercase;
  }
  .filters-toggle .count { color: var(--brass); letter-spacing: .1em; }
  .filters-toggle .ic { transition: transform .35s var(--ease); }
  .filters-toggle[aria-expanded="true"] .ic { transform: rotate(180deg); }
  .filters:not(.is-open) .filter-rows { display: none; }
  .filters.is-open .filter-rows { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
  .filters { gap: 0; }
}
@media (min-width: 901px) {
  .filter-rows { display: flex; flex-direction: column; gap: clamp(13px, 1.7vw, 20px); }
}

/* -- 7. Headlines cannot push the page wider than the screen --------------- */
/* "announcements." at the 2.6rem floor is 286px wide, against 280px of usable
   width on a 320px screen, so the press hero alone gave that page a sideways
   scroll. The floor drops on the narrowest phones; the break-word is a guard
   for future titles rather than something in play today. */
@media (max-width: 400px) {
  h1 { font-size: clamp(2.05rem, 9vw, 2.6rem); }
  h2 { font-size: clamp(1.55rem, 7.4vw, 2.8rem); }
}
h1, h2, h3, h4, .reel-copy h3 { overflow-wrap: break-word; }

/* -- 8. Last pass: micro-labels and the contact-page email ----------------- */
/* Badges and overlay captions settle at an 11.5px floor rather than 12px —
   they are uppercase and letter-spaced, and pushing them to 12px started to
   crowd the cards they sit on. Nothing on the page is smaller than this. */
@media (max-width: 900px) {
  .sound-cue { font-size: .72rem; }
  .turn-card .kind { font-size: .72rem; }
  .lib-card .play-tag { font-size: .72rem; }
}
@media (pointer: coarse), (max-width: 900px) {
  .contact-line a { display: inline-block; padding-block: 13px; }
}

/* -- 9. Project page micro-type ------------------------------------------- */
/* `.micro-head` replaces an inline font-size on the Recognition heading —
   inline styles outrank media queries, so the mobile floor could not reach it
   while the size lived in the markup. */
.micro-head {
  font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--brass);
}
@media (max-width: 900px) {
  .micro-head { font-size: .78rem; letter-spacing: .2em; }
  .project-facts dt { font-size: .72rem; letter-spacing: .17em; }
  .credits-list li span { font-size: .74rem; letter-spacing: .15em; }
  .video-grid .vcard .label { font-size: .76rem; }
  .project-pager a { font-size: .86rem; }
}
@media (pointer: coarse), (max-width: 900px) {
  .project-pager a { display: inline-block; padding-block: 12px; }
}

/* Brief press entries (homepage). Without the summary line the row is much
   shorter, so the thumb and the copy centre against each other instead of
   hanging from the top. */
.press-item.is-brief { align-items: center; }
.press-item.is-brief h4 { margin-bottom: 0; }

/* ----------------------------------------------------- development slate -- */
/* Slate entries are key art plus a title and nothing else, so the card is
   lighter than a library card: 16:9 to match the artwork as supplied, and no
   hover zoom, because there is no project page to click through to. */
.dev-grid { grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); }
.dev-card .shot { aspect-ratio: 16 / 9; background: #000; }
.dev-card:hover .shot img { transform: none; }
.dev-card .body { padding: 16px 18px 20px; }
.dev-card .dev-note { margin-top: 14px; color: var(--warm-52); font-size: .9rem; }

.slate-note { max-width: 70ch; margin-bottom: clamp(32px, 4vw, 56px); }
.slate-note p + p { margin-top: 18px; color: var(--warm-70); }

.rep-line { margin-top: 18px; font-size: .95rem; color: var(--warm-52); }
.rep-line a { color: var(--warm); border-bottom: 1px solid var(--line); transition: border-color .3s var(--ease); }
.rep-line a:hover { border-color: var(--warm); }
@media (max-width: 900px) { .rep-line { font-size: 1rem; } .rep-line a { display: inline-block; padding-block: 11px; } }

/* Designer credit in the colophon. The row is space-between, so the credit
   takes the right edge on wide screens and falls into the stack on narrow
   ones. It keeps the colophon's own colour rather than a dimmer one — anything
   fainter than var(--warm-38) stops clearing contrast at this size. */
.colophon .credit { color: var(--warm-38); white-space: nowrap; }
@media (max-width: 640px) { .colophon { text-align: left; } .colophon .credit { order: 3; } }