/* ============================================================
   The premiere: the one-sheet for The Appraisal Job.
   Built on noir.css. Same tokens, same faces, same one red ink.
   A title card, a reel the scroll wheel runs through the gate,
   three personnel files, a procedure, and the paperwork.
   ============================================================ */

html, body { height: auto; }
html { scroll-padding-top: 72px; }
body.premiere {
  --marquee-height: 77px;
  /* one rhythm for every section: the gap between sections, between a head and
     its content, and one hairline colour for every rule */
  --section-y: clamp(80px, 9vw, 128px);
  --head-gap: clamp(40px, 5vw, 64px);
  --hair: #3a363c;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-type);
  font-size: 16px;
  overflow-x: hidden;
}
.premiere img { display: block; max-width: 100%; }
.premiere a { color: inherit; }
.wrap { width: min(1240px, 100% - 32px); margin-inline: auto; }

.skip {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; background: var(--paper); color: var(--ink);
  font-family: var(--f-type); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
}
.skip:focus { top: 16px; }

/* ---------- the title sequence: a gun-barrel spyglass (intro.js) ---------- */
/* .btn sets display later in this file, so the skip button needs the extra class to stay hidden */
.intro, .btn.intro-skip { display: none; }
html.intro-on .intro {
  display: block; position: fixed; inset: 0; z-index: var(--z-curtain);
  background: #050507;
  transition: opacity 700ms var(--ez-film);
  animation: intro-failsafe 1ms 6s both;          /* the script never ran: get out of the way */
}
html.intro-on .intro.running { animation: none; }
html.intro-on .intro.out { opacity: 0; pointer-events: none; }
html.intro-on .intro.out.quick { transition-duration: 360ms; }
.intro canvas { display: block; width: 100%; height: 100%; }
html.intro-on .intro-skip {
  display: inline-flex; position: fixed; z-index: var(--z-curtain);
  right: clamp(16px, 3vw, 40px); bottom: clamp(16px, 4vh, 36px);
  min-height: 36px; font-size: 10px;
  animation: intro-skip-in 400ms var(--ez-film) 900ms both;
}
@keyframes intro-failsafe { to { opacity: 0; visibility: hidden; } }
@keyframes intro-skip-in { from { opacity: 0; } }

/* the kit's button, at a size a thumb can hit */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 18px;
  border: var(--rule) solid var(--bone);
  background: transparent; color: var(--paper);
  font-family: var(--f-typed); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--dur-hover) var(--ez-film), color var(--dur-hover) var(--ez-film), translate var(--dur-hover) var(--ez-settle), border-color var(--dur-hover) var(--ez-film);
}
.btn:hover { background: var(--paper); color: var(--ink); translate: 0 -2px; }
.btn:active { translate: 0 1px; }
.btn.quiet { border-color: var(--smoke); color: var(--bone); }
.btn.quiet:hover { border-color: var(--paper); }
.btn[aria-pressed="true"] { border-color: var(--bone); color: var(--paper); }

/* ---------- the marquee ---------- */
.marquee {
  position: fixed; inset: 0 0 auto; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 12px clamp(16px, 3vw, 40px);
  background: linear-gradient(rgba(10,9,8,.82), rgba(10,9,8,0));
  transition: opacity var(--dur-fade) var(--ez-film), background var(--dur-fade) var(--ez-film), border-color var(--dur-fade) var(--ez-film);
  border-bottom: var(--rule) solid transparent;
}
.marquee, .marquee.solid { min-height: var(--marquee-height); background: rgba(13,14,18,.96); border-bottom-color: #353238; }
body.in-reel .marquee { opacity: 0; pointer-events: none; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-height: 44px; }
.brand-mark { height: 40px; width: 40px; object-fit: contain; }
.brand-word { font-family: var(--f-display); font-size: 26px; line-height: 1; letter-spacing: .05em; text-transform: uppercase; color: var(--paper); }
.marquee-nav { display: flex; gap: clamp(14px, 2.2vw, 34px); }
.marquee-nav a {
  font-weight: 700; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ash); text-decoration: none;
  padding: 14px 0 10px; border-bottom: var(--rule) solid transparent;
  transition: color var(--dur-hover) var(--ez-film), border-color var(--dur-hover) var(--ez-film);
}
.marquee-nav a.here { color: var(--paper); border-bottom-color: var(--bone); }
.marquee-nav a:hover { color: var(--paper); border-bottom-color: var(--stamp-lit); }
.marquee-tools { display: flex; gap: 10px; }
@media (max-width: 1180px) { .marquee-nav { display: none; } }
@media (max-width: 560px) {
  .sound-toggle { display: none; }
  .brand-word { font-size: 22px; }
  .marquee .btn { padding: 0 14px; font-size: 11px; letter-spacing: .16em; }
  .marquee { padding: 9px 16px; gap: 7px; flex-wrap: wrap; }
  .marquee-nav { display: flex; order: 3; width: 100%; justify-content: space-between; gap: 12px; }
  .marquee-nav a { padding-block: 9px 5px; font-size: 9px; letter-spacing: .08em; }
  .brand { gap: 8px; }
  .brand-word { font-size: 21px; }
  .brand-mark { width: 30px; height: 30px; }
  .marquee-tools .primary { display: none; }
  .marquee-tools .motion-control { font-size: 9px; min-height: 36px; padding-inline: 9px; }
}

/* ---------- the vault: the complete artwork is the title card ---------- */
.hero { position: relative; padding-top: var(--marquee-height); }
.hero .vault-stage {
  width: 100%;
  height: calc(100svh - var(--marquee-height));
  background: var(--ink); /* the band's colour, so the faded-out art lands on it seamlessly */
}
/* The panoramic environment fills the hero; its safe framing retains the
   title and crew as laptop and ultrawide screens crop the outer architecture. */
.hero .vault-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  transition: none;
}
.hero .vault-picture { display: block; width: 100%; height: 100%; }
.hero .vault-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: none;
  transform: none;
}
@media (max-aspect-ratio: 4 / 3) {
  .hero .vault-stage { height: auto; aspect-ratio: 3 / 2; }
}
/* The artwork dissolves into the mission band instead of ending on a hard edge:
   a long eased fade to the band's colour, plus a faint crimson haze at the seam. */
.hero .vault-stage::after {
  content: ""; position: absolute; inset: auto 0 0; height: clamp(140px, 38%, 420px);
  z-index: 2; pointer-events: none;
  background:
    radial-gradient(60% 70% at 58% 100%, rgba(150,28,28,.16), transparent 70%),
    linear-gradient(to bottom,
      rgba(13,14,18,0) 0%, rgba(13,14,18,.18) 22%, rgba(13,14,18,.45) 45%,
      rgba(13,14,18,.74) 68%, rgba(13,14,18,.92) 86%, rgb(13,14,18) 100%);
}
/* On scroll the art fades out, nearly gone by the time the band reaches the
   marquee; with motion allowed it also drifts slower than the page, so the band
   reads as sliding over it. Scroll-driven only; older browsers keep the fade above. */
@supports (animation-timeline: view()) {
  /* The stage clips (overflow: hidden), so it owns the timeline against the page. */
  .hero .vault-stage { view-timeline: --vault-exit block; }
  .hero .vault-scene, .hero .vault-stage::after {
    animation: vault-fade linear both;
    animation-timeline: --vault-exit;
    animation-range: exit 0% exit 100%;
  }
  @media (prefers-reduced-motion: no-preference) {
    body:not(.motion-paused) .hero .vault-art {
      animation: vault-exit linear both;
      animation-timeline: --vault-exit;
      animation-range: exit 0% exit 100%;
    }
  }
}
@keyframes vault-fade {
  0% { opacity: 1; }
  25% { opacity: .8; }
  45% { opacity: .45; }
  62% { opacity: .12; }
  75% { opacity: .03; }
  88%, 100% { opacity: 0; }
}
@keyframes vault-exit {
  to { translate: 0 18%; scale: 1.06; filter: saturate(.8); }
}
.hero-brief {
  display: grid; grid-template-columns: 1.1fr 1fr auto; align-items: center;
  gap: 32px; padding-block: 36px 38px;
  /* near-opaque so the hero art doesn't bleed through while scrolling */
  background: rgba(13,14,18,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 0 0 100vmax rgba(13,14,18,.94); clip-path: inset(0 -100vmax);
}
.hero-brief .label { color: var(--stamp-lit); font-size: 10px; }
.hero-brief > div > p { margin-top: 9px; font: 40px/.95 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.hero-brief em { color: var(--stamp-lit); font-style: normal; }
.brief-copy { font: 15px/1.65 var(--f-type); color: var(--ash); }
.brief-actions { display: grid; justify-items: center; gap: 13px; }
.brief-film { color: var(--ash); font: 11px var(--f-type); text-transform: uppercase; letter-spacing: .12em; text-decoration: none; padding: 6px; }
.brief-film { text-underline-offset: 6px; transition: color var(--dur-hover) var(--ez-film); }
.brief-film:hover { color: var(--paper); text-decoration: underline; text-decoration-color: var(--stamp-lit); }
.brief-film span { margin-left: 12px; }
.btn.primary { background: var(--paper); border-color: var(--paper); color: var(--ink); font-family: var(--f-type); font-weight: 700; letter-spacing: .1em; gap: 22px; }
.btn.primary:hover { background: #dcd9d1; border-color: #dcd9d1; }
.mission-strip { display: flex; justify-content: space-between; gap: 18px; padding: 18px max(24px, calc((100vw - 1240px) / 2)); background: rgba(13,14,18,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--ash); font: 10px var(--f-type); letter-spacing: .17em; text-transform: uppercase; }
.mission-strip > span:first-child { color: var(--paper); }
.mission-strip b { font-weight: inherit; }      /* the step's number: set apart only where the band is large (premiere-portal.css) */
.mission-strip i { font-style: normal; }
.mission-strip .tc-credit { color: var(--ash); font-size: 10px; }
@media (max-width: 780px) {
  .hero-brief { grid-template-columns: 1fr 1fr; gap: 24px; padding-block: 28px; }
  .brief-actions { grid-column: 1 / -1; display: flex; justify-content: space-between; }
  .hero-brief > div > p { font-size: 36px; }
  .brief-copy { font-size: 13px; }
  .mission-strip { flex-wrap: wrap; row-gap: 12px; padding: 16px; font-size: 9px; letter-spacing: .07em; }
  .mission-strip .tc-credit { display: none; }
}
@media (max-width: 560px) {
  body.premiere { --marquee-height: 100px; }
  .hero-brief { gap: 20px 16px; }
  .brief-actions .btn { padding: 0 12px; font-size: 10px; gap: 10px; }
  .brief-film { font-size: 10px; letter-spacing: .02em; }
}

/* ---------- the reel: the scroll runs the film through the gate ---------- */
.reel { position: relative; height: 460vh; background: #090a0d; }
.reel-stage {
  --pad: clamp(16px, 4vw, 64px);
  --gw: min(100vw - 2 * var(--pad), (100svh - 236px) * 16 / 9);
  position: sticky; top: 0;
  height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 18px var(--pad);
  background: radial-gradient(ellipse 70% 60% at 50% 46%, #1a1d24 0%, #090a0d 70%);
}
.reel-top, .reel-sub, .reel-strip { width: var(--gw); }
.reel-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.reel-top .sound-toggle { display: inline-flex; min-height: 36px; padding: 0 10px; margin-left: auto; font: 10px var(--f-type); }
.reel-chapter { color: var(--bone); }
.reel-counter { font-variant-numeric: tabular-nums; }
.gate {
  position: relative;
  width: var(--gw); aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--r-frame);
  outline: var(--rule) solid rgba(216,212,199,.14);
  outline-offset: 6px;
}
.reel-video { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: var(--r-frame); background: #000; }
.gate-loading {
  position: absolute; left: 50%; bottom: 10%; translate: -50% 0;
  display: grid; justify-items: center; gap: 10px;
  padding: 12px 18px; background: rgba(15,14,12,.82);
  transition: opacity var(--dur-fade) var(--ez-film);
}
.gate-loading.done { opacity: 0; pointer-events: none; }
.gate-meter { width: 180px; height: 2px; background: var(--smoke); }
.gate-meter i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--paper); }
.reel-sub {
  min-height: 3.1em;
  font-family: var(--f-typed);
  font-size: clamp(17px, 1.45vw, 22px); line-height: 1.4;
  color: var(--paper);
  text-align: center; text-wrap: balance;
}
.reel-sub .caret { display: inline-block; width: .55em; margin-left: 2px; animation: caret 1.1s ease-in-out infinite; }

/* chapters, laid out along the strip like key numbers on the film edge */
.reel-strip {
  position: relative; list-style: none;
  height: 34px; margin: 0;
  border-top: var(--rule) solid var(--smoke);
}
.reel-fill { position: absolute; left: 0; top: -1px; height: 1px; width: calc(var(--p, 0) * 100%); background: var(--paper); }
.reel-strip li { position: absolute; top: 0; left: calc(var(--at) * 100%); }
.reel-strip li::before { content: ""; position: absolute; left: 0; top: -5px; width: 1px; height: 9px; background: var(--bone); }
.reel-strip a {
  display: inline-block; padding: 9px 0 0 6px;
  font-size: var(--fs-tag); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ash); text-decoration: none; white-space: nowrap;
  transition: color var(--dur-hover) var(--ez-film);
}
.reel-strip a:hover, .reel-strip li.here a { color: var(--paper); }
.perfs {
  position: absolute; top: 0; bottom: 0; width: 24px;
  background:
    radial-gradient(circle at 50% 12px, #050504 0 4.5px, transparent 6px) 0 var(--roll, 0px) / 100% 24px repeat-y,
    var(--carbon);
  opacity: .9;
}
.perfs.l { left: 0; } .perfs.r { right: 0; }
@media (max-width: 720px) {
  .perfs { display: none; }
  .reel-stage { --pad: 16px; --gw: calc(100vw - 32px); justify-content: center; gap: 18px; }
  .reel-sub { min-height: 6em; text-align: left; }
  .reel-strip a { font-size: 0; padding: 0; width: 14px; height: 30px; }
  .reel-counter { display: none; }   /* ticks only on a phone */
}

/* ---------- section heads ---------- */
.crew, .method, .paperwork { padding: var(--section-y) 0; border-bottom: 1px solid var(--hair); }
.section-head { max-width: 780px; margin-bottom: var(--head-gap); }
.section-head .label { color: var(--stamp-lit); }
.section-title {
  font-family: var(--f-display);
  font-size: clamp(64px, 9vw, 132px);
  line-height: .86; letter-spacing: .03em;
  margin: 12px 0 20px;
}
.section-lede { font-family: var(--f-type); font-size: clamp(15px, 1.4vw, 18px); line-height: 1.7; color: var(--ash); max-width: 56ch; }

/* ---------- photographs: prints with a white border and tape ---------- */
.print {
  position: relative;
  background: #f1ece0;
  padding: 10px 10px 40px;
  box-shadow: 0 16px 36px rgba(0,0,0,.55);
  rotate: var(--tilt, 0deg);
  transition: translate var(--dur-hover) var(--ez-settle), rotate var(--dur-hover) var(--ez-settle);
}
.print::before {      /* a strip of masking tape */
  content: ""; position: absolute; top: -9px; left: 50%;
  width: 58px; height: 17px; translate: -50% 0; rotate: -3deg;
  background: rgba(216,212,199,.55);
}
.print img, .print canvas { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; filter: grayscale(1) contrast(1.06); background: #000; }
.print figcaption {
  position: absolute; left: 12px; right: 12px; bottom: 10px;
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--f-typed); font-size: 13px; letter-spacing: .03em; color: var(--paper-ink-2);
}
.print figcaption a { color: var(--stamp); text-decoration: none; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; }
.print figcaption a:hover { text-decoration: underline; text-underline-offset: 3px; }
.print:hover { translate: 0 -6px; }
.oled-print canvas { image-rendering: pixelated; aspect-ratio: 2 / 1; object-fit: contain; filter: none; }

/* ---------- the crew: three personnel files on paper, pinned on one red string ---------- */
.dossiers {
  --dgap: clamp(24px, 3vw, 44px);
  position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dgap); align-items: start;
  padding-top: 16px;
}
/* the string sags between three pins, one at the top of each file */
.dossiers::before {
  content: ""; position: absolute; z-index: 3; pointer-events: none;
  top: 1px; height: 34px;
  left: calc((100% - 2 * var(--dgap)) / 6 - 8px);
  right: calc((100% - 2 * var(--dgap)) / 6 - 8px);
  background:
    radial-gradient(circle at 38% 36%, #f3928d, #b3262c 52%, #6e1215 72%, transparent 74%) 0 0 / 16px 16px no-repeat,
    radial-gradient(circle at 38% 36%, #f3928d, #b3262c 52%, #6e1215 72%, transparent 74%) 50% 0 / 16px 16px no-repeat,
    radial-gradient(circle at 38% 36%, #f3928d, #b3262c 52%, #6e1215 72%, transparent 74%) 100% 0 / 16px 16px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 34' preserveAspectRatio='none'%3E%3Cpath d='M0 8 Q25 30 50 8 Q75 30 100 8' fill='none' stroke='%23c4363a' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 8px 0 / calc(100% - 16px) 100% no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.55));
}
.dossier {
  position: relative;
  background: linear-gradient(180deg, rgba(0,0,0,.04), transparent 14%), #ece4d2 url("assets/textures/paper.jpg") center / cover;
  background-blend-mode: normal, multiply;
  color: var(--ink);
  padding: 28px 24px;
  rotate: var(--tilt, 0deg);
  box-shadow: 0 18px 44px rgba(0,0,0,.6), 0 2px 3px rgba(0,0,0,.4);
  font-family: var(--f-typed);
}
.dossier::before {      /* a strip of tape at the corner */
  content: ""; position: absolute; top: -9px; left: 18px; width: 54px; height: 17px; rotate: -6deg;
  background: rgba(216,212,199,.62); box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.dossier-head { display: flex; justify-content: space-between; font-family: var(--f-type); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-ink-3); border-bottom: 1px solid var(--paper-rule); padding-bottom: 12px; margin-bottom: 20px; }
.dossier .print { margin: 6px 4px 20px; padding: 8px 8px 32px; box-shadow: 0 8px 18px rgba(0,0,0,.28); rotate: -1.2deg; }
.dossier .print figcaption { font-size: 12px; bottom: 8px; }
/* The crew's own photographs are taller than the print's window: each is framed on the thing itself. */
.dossier .print img { object-position: 50% var(--frame, 50%); }
.dossier-name { font-family: var(--f-display); font-weight: 400; font-size: 48px; line-height: .9; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 14px; color: var(--ink); }
.dossier-file { display: grid; grid-template-columns: 76px 1fr; gap: 8px 12px; font-size: 14.5px; line-height: 1.45; }
.dossier-file dt { font-family: var(--f-type); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-ink-3); padding-top: 3px; }
.dossier-file dd { color: var(--paper-ink-2); font-family: var(--f-type); font-size: 14px; line-height: 1.6; }
.dossier .stamp.ink { color: var(--stamp); border-color: var(--stamp); mix-blend-mode: multiply; font-size: 19px; opacity: .85; }
.stamp.ink {
  position: relative; display: table; margin: 22px 0 0 auto;
  border-color: var(--stamp); color: var(--stamp);
  mix-blend-mode: multiply; opacity: .8;
  font-size: 22px;
  transform: rotate(var(--rot, -6deg));
}
@media (max-width: 980px) {
  .dossiers { grid-template-columns: minmax(0, 560px); justify-content: center; gap: 56px; }
  .dossiers::before { display: none; }
}

/* ---------- the method: a procedure, with the evidence pinned beside it ---------- */
.method { background: rgba(13,14,18,.72); }
.method-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.board { position: sticky; top: 112px; aspect-ratio: 16 / 11.5; }
.board-print {
  position: absolute; inset: 0;
  opacity: 0; rotate: -1.2deg; scale: .985;
  transition: opacity 700ms var(--ez-film), rotate 700ms var(--ez-settle), scale 700ms var(--ez-settle);
}
.board-print.on { opacity: 1; rotate: .6deg; scale: 1; }
.board-print img, .board-print canvas { height: calc(100% - 30px); aspect-ratio: auto; }
.board-print.mug-board img { object-fit: contain; background: #0a0a09; }
.board-print .board-tag {
  position: absolute; left: 24px; top: 24px;
  padding: 3px 9px; background: var(--ink); border: var(--rule) solid var(--bone);
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--paper);
}
.procedure { list-style: none; counter-reset: none; display: grid; gap: 0; }
.step {
  position: relative;
  padding: 34px 0 40px 92px;
  border-top: var(--rule) solid var(--hair);
  opacity: .74;
  transition: opacity 600ms var(--ez-film);
}
.step:last-child { border-bottom: var(--rule) solid var(--hair); }
.step.here { opacity: 1; }
.step-n { position: absolute; left: 0; top: 26px; font-family: var(--f-display); font-size: 64px; line-height: .9; color: var(--paper); }
.step-name { font-family: var(--f-type); font-weight: 700; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--bone); margin-bottom: 12px; }
.step p { font-family: var(--f-type); font-size: 15px; line-height: 1.7; color: var(--paper); max-width: 46ch; }
.step .step-file { margin-top: 14px; font-family: var(--f-type); font-size: 11.5px; letter-spacing: .1em; color: var(--ash); }
@media (max-width: 980px) {
  .method-grid { grid-template-columns: minmax(0, 1fr); }
  .board { position: sticky; top: 64px; z-index: 2; width: min(100%, 520px); margin-inline: auto; aspect-ratio: 16 / 11; }
  .step { padding-left: 74px; opacity: .5; }
  .step-n { font-size: 52px; }
}

/* ---------- the paperwork ---------- */
.paperwork .prints { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 5vw, 72px) clamp(28px, 4vw, 56px); }
.paperwork .print img { aspect-ratio: 16 / 9; object-position: top; }
@media (max-width: 760px) { .paperwork .prints { grid-template-columns: minmax(0, 1fr); } }

.priors {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--section-y);   /* no rules above or below: nothing on this page is ruled off */
}
.prior { display: grid; gap: 6px; padding: 28px 24px; border-left: var(--rule) solid var(--hair); }
.prior:first-child { border-left: 0; padding-left: 0; }
.prior b { font-family: var(--f-display); font-weight: 400; font-size: clamp(64px, 7vw, 104px); line-height: .82; color: var(--paper); }
.prior .label { color: var(--bone); }
.prior-note { font-family: var(--f-typed); font-size: 14px; color: var(--ash); }
@media (max-width: 760px) {
  .priors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prior:nth-child(3) { border-left: 0; padding-left: 0; }
  .prior:nth-child(n+3) { border-top: var(--rule) solid var(--hair); }
}

/* ---------- closing credits ---------- */
.credits { padding: var(--section-y) 0 56px; text-align: center; background: linear-gradient(180deg, rgba(13,14,18,.8), #08090b); }
.credits-roll { display: grid; justify-items: center; gap: 22px; }
.credit-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin: 34px 0 40px; max-width: 760px; }
.credit-list dt { text-align: right; font-weight: 700; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ash); padding-top: 4px; }
.credit-list dd { text-align: left; font-family: var(--f-typed); font-size: 18px; color: var(--paper); }
.credits-end { font-family: var(--f-display); font-size: clamp(110px, 20vw, 280px); line-height: .82; letter-spacing: .03em; color: var(--paper); }
.credits-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.credits .fine { margin-top: 36px; font-family: var(--f-type); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ash); }
@media (max-width: 560px) {
  .credit-list { grid-template-columns: 1fr; gap: 4px; }
  .credit-list dt, .credit-list dd { text-align: center; }
  .credit-list dd { margin-bottom: 12px; }
}

/* ---------- chapters: a short chapter's label drops a row so neighbours never overlap ---------- */
.reel-strip { height: 52px; }
.reel-strip li.low::before { height: 27px; }
.reel-strip li.low a { padding-top: 27px; }

/* ---------- seams between sections ----------
   No hairlines between sections: each seam is a gradient into the next section's ground,
   and each gets its own scroll-driven move. Static gradients always; motion only when allowed. */
.crew, .method, .paperwork { border-bottom: 0; }
.crew { background: linear-gradient(180deg, #090a0d 0, rgba(9,10,13,0) 260px); }   /* rises out of the reel's black */
.method {
  background: linear-gradient(180deg, rgba(13,14,18,0) 0, rgba(13,14,18,.72) 240px,
              rgba(13,14,18,.72) calc(100% - 240px), rgba(13,14,18,0) 100%);
}
.credits { background: linear-gradient(180deg, rgba(8,9,11,0) 0, #08090b 300px); overflow: clip; }   /* the roll-up's offset must not add page length below the credits */

@supports (animation-timeline: view()) {
  .reel { view-timeline: --reel block; }
  .crew { view-timeline: --crew block; }
  .paperwork { view-timeline: --paper block; }
  @media (prefers-reduced-motion: no-preference) {
    /* mission strip -> film: the gate irises open as the reel arrives; film -> crew: it irises shut as the reel leaves */
    body:not(.motion-paused) .reel-stage {
      animation: reel-iris-in linear both, reel-iris-out linear forwards;
      animation-timeline: --reel, --reel;
      animation-range: entry 0% entry 100%, exit 0% exit 70%;
    }
    /* crew -> method: the three files are swept off the desk, and the string goes slack */
    body:not(.motion-paused) .dossier {
      animation: file-sweep linear forwards;
      animation-timeline: --crew;
      animation-range: exit 0% exit 55%;
    }
    body:not(.motion-paused) .dossier:nth-child(1) { --sweep-x: -9%; --sweep-r: -5deg; }
    body:not(.motion-paused) .dossier:nth-child(2) { --sweep-x: 0%;  --sweep-r: 2deg; }
    body:not(.motion-paused) .dossier:nth-child(3) { --sweep-x: 9%;  --sweep-r: 5deg; }
    body:not(.motion-paused) .dossiers::before {
      animation: string-slack linear forwards;
      animation-timeline: --crew;
      animation-range: exit 0% exit 35%;
    }
    /* method -> paperwork: the prints are dealt onto the table and settle at their tilt */
    body:not(.motion-paused) .paperwork .print {
      animation: print-deal linear backwards;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }
    body:not(.motion-paused) .paperwork .print:nth-child(odd) { --deal-r: -7deg; }
    body:not(.motion-paused) .paperwork .print:nth-child(even) { --deal-r: 7deg; }
    /* paperwork -> credits: the fade to black and the credits coming up out of it are
       drawn from the scroll clock now (premiere.js, and the credits' own data-motion) */
  }
}
@keyframes reel-iris-in  { from { clip-path: circle(12% at 50% 50%); } to { clip-path: circle(75% at 50% 50%); } }
@keyframes reel-iris-out { from { clip-path: circle(75% at 50% 50%); } to { clip-path: circle(0% at 50% 42%); } }
@keyframes file-sweep {
  to { translate: var(--sweep-x) -70px; rotate: calc(var(--tilt, 0deg) + var(--sweep-r)); opacity: .1; }
}
@keyframes string-slack { to { opacity: 0; translate: 0 18px; } }
@keyframes print-deal {
  from { translate: 0 120px; rotate: calc(var(--tilt, 0deg) + var(--deal-r)); opacity: 0; }
  60%  { opacity: 1; }
}

/* ---------- THE END, shot up (premiere.js) ---------- */
.credits-end .ch {           /* each letter carries its own holes; the knock stacks on the cut-paper tilt (transform) */
  position: relative;
  rotate: var(--hit, 0deg); translate: 0 var(--drop, 0);
  transition: rotate 180ms cubic-bezier(.2, 1.6, .4, 1), translate 180ms cubic-bezier(.2, 1.6, .4, 1);
}
/* A shot letter: the hole art (bullet-hole-paper-*.png, the supplied hole tinted to
   the paper) and a powder burn are layers of the letter's own fill, clipped to the
   glyph, so the torn rim only exists where there is letter. The core is then cut
   right through (a mask), so the page behind shows through the hole. */
.credits-end .ch.shot {      /* layers built by premiere.js: one hole + burn per round, then the paper */
  background: var(--hole-bg);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-mask: var(--hole-mask); -webkit-mask-composite: source-in;
          mask: var(--hole-mask);         mask-composite: intersect;   /* every core cut, not their union */
}
.credits-end .ch.fresh { animation: letter-punch 360ms cubic-bezier(.2, .9, .3, 1); }
.shot-fx {                   /* one shot's effects, centred on its hole */
  position: absolute; z-index: 3; width: var(--s); height: var(--s); translate: -50% -50%;
  pointer-events: none;
}
.shot-spark {                /* the muzzle burst: a jagged star (premiere.js sets its clip-path) */
  position: absolute; inset: -120%;
  background: radial-gradient(closest-side, #fff 0 18%, rgba(255,226,170,.95) 40%, rgba(255,150,70,.7) 75%, rgba(255,120,50,0));
  mix-blend-mode: screen;
  animation: impact-spark 220ms ease-out both;
}
.shot-smoke {                /* a stretched wisp of gun smoke drifting off at an angle */
  position: absolute; left: -80%; right: -80%; top: 10%; bottom: 10%;
  rotate: var(--tilt, 0deg);
  background: linear-gradient(90deg, transparent, rgba(200,196,188,.4) 30%, rgba(200,196,188,.22) 70%, transparent);
  filter: blur(8px);
  animation: smoke 850ms ease-out both;
}
.shot-chip {
  position: absolute; left: 50%; top: 50%; width: 4px; height: 4px;
  background: var(--paper); border-radius: 1px;
  animation: chip-fly 650ms cubic-bezier(.15, .7, .3, 1) both;
}
.shot-glow {                 /* the muzzle flash: a soft bloom local to the hit that
                                clears on its own, so rapid fire never washes the screen */
  position: absolute; inset: -260%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,238,205,.9), rgba(255,188,120,.42) 46%, rgba(255,150,70,0) 78%);
  mix-blend-mode: screen;
  animation: impact-glow 170ms ease-out both;
}
@keyframes letter-punch { 0% { filter: brightness(2.4); } 100% { filter: none; } }   /* the letter lights up with the hit */
@keyframes impact-spark { 0% { opacity: 1; scale: .3; } 35% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1.25; } }
@keyframes impact-glow { 0% { opacity: 0; scale: .4; } 22% { opacity: .95; } 100% { opacity: 0; scale: 1.25; } }
@keyframes smoke { 0% { scale: .3 .6; opacity: 0; } 25% { opacity: 1; } 100% { scale: 1.4 1.1; opacity: 0; translate: 0 -60%; } }
@keyframes chip-fly { from { translate: 0 0; opacity: 1; } to { translate: var(--dx) var(--dy); opacity: 0; rotate: 240deg; } }

/* ---------- motion off ---------- */
@media (prefers-reduced-motion: reduce) {
  .reel { height: auto; }
  .reel-stage { position: relative; height: auto; min-height: 0; padding-block: 96px; }
  .perfs { display: none; }
  .board-print { transition: none; }
}