/* ==========================================================================
   David Scheckel — site styles
   Design language carried over from landing-page-options/option-10-editorial-serif.html
   (ochre accent, dark stock), retyped in a single sans-serif family throughout.

   The emphasis colour is a placeholder. Change --accent below and the whole
   site — rules, links, labels, play button — changes with it.

   TYPE. One family, two roles. --display sets titles and reading copy,
   --sans sets the small-caps metadata. Both point at the same grotesque so
   the page reads as one voice; they stay separate so a display face can be
   swapped in later without touching the metadata. Titles carry their weight
   in --display-weight and their tracking in --display-track — a sans at the
   old serif's 400/-0.018em looks thin and loose at poster size.
   ========================================================================== */

:root {
  --accent: #d9a441;                /* ochre — placeholder emphasis colour */
  --ink: #f2efe7;
  --stock: #0b0b0a;
  --display: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
  --sans: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
  --display-weight: 600;
  --display-track: -0.035em;
  --gutter: 44px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--stock);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* small-caps utility used for all metadata */
.sc {
  font-family: var(--sans);
  font-size: 0.71rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.19em;
}

/* ---------- nav ---------- */
.topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 24px var(--gutter);
  mix-blend-mode: difference; color: #fff;
}
.topnav .name { font-family: var(--display); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.012em; }
.topnav nav a { margin-left: 26px; }
.topnav nav a:hover { text-decoration: underline; text-underline-offset: 5px; }

/* ---------- hero (shared by landing + project pages) ---------- */
.hero { position: relative; height: 100vh; min-height: 560px; overflow: hidden; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(5,5,5,0.84) 0%, rgba(5,5,5,0.22) 42%, rgba(5,5,5,0) 64%),
    linear-gradient(180deg, rgba(5,5,5,0.48) 0%, rgba(5,5,5,0) 22%);
}
.hero-caption { position: absolute; left: var(--gutter); bottom: 10vh; z-index: 3; max-width: 900px; }
.hero-caption h1 {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: clamp(2.6rem, 6.4vw, 5.2rem);
  line-height: 0.96;
  letter-spacing: var(--display-track);
  margin: 0;
  text-shadow: 0 2px 34px rgba(0,0,0,0.5);
}
.hero-caption .rule { width: 72px; height: 1px; background: var(--accent); margin: 26px 0 20px; }
.hero-caption .role { color: var(--accent); }
/* ==========================================================================
   SCROLL CUE — lower right of the hero.

   The site uses B (.cue .cue-arc); its markup is in index.html. The rest are
   the options from the two rounds, kept because scroll-cue-options.html and
   scroll-cue-options-2.html still render them — leaving them here means
   changing your mind is a matter of swapping one markup block, with nothing
   else on the page moving. Only one cue should ever be in a page at once.
   Each stops moving under prefers-reduced-motion and steps aside on a phone,
   where the hero has no room to spare.
   ========================================================================== */

.cue {
  position: absolute; right: var(--gutter); bottom: 9vh; z-index: 3;
  pointer-events: auto; color: var(--accent);
}
.cue a { display: block; }

/* --- A. Seal: the line set around a full circle, turning slowly, arrow fixed
       in the middle. The most self-contained of the four. --- */
.cue-seal { width: clamp(116px, 12vw, 152px); height: clamp(116px, 12vw, 152px); }
.cue-seal a { width: 100%; height: 100%; }
.cue-seal svg { display: block; width: 100%; height: 100%; animation: cue-turn 18s linear infinite; }
.cue-seal text { fill: var(--accent); font-family: var(--sans); font-size: 8.6px; font-weight: 700; letter-spacing: 1.05px; text-transform: uppercase; }
.cue-seal .pip {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 1.15rem; color: var(--ink); animation: cue-nudge 2.1s ease-in-out infinite;
}
.cue-seal:hover svg { animation-duration: 5s; }

/* --- B. Arc: the line bent over a shallow arch with the arrow hung beneath,
       the whole sign tilted like a hand-lettered placard. Quieter than the
       seal — it bobs rather than spins. --- */
.cue-arc { width: clamp(150px, 16vw, 208px); transform: rotate(-6deg); transform-origin: 100% 100%; animation: cue-bob 3.4s ease-in-out infinite; }
.cue-arc svg { display: block; width: 100%; height: auto; overflow: visible; }
.cue-arc text { fill: var(--accent); font-family: var(--sans); font-size: 11.6px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; }
.cue-arc .stem { stroke: var(--accent); stroke-width: 1.6; fill: none; }
.cue-arc:hover { animation-duration: 1.2s; }

/* --- C. Ticker: the line runs down a hairline rule and repeats, so the words
       themselves scroll. Closest in spirit to the vertical cue it replaces. --- */
.cue-ticker { height: clamp(190px, 26vh, 260px); display: flex; align-items: stretch; gap: 11px; }
.cue-ticker .rail { flex: 0 0 1px; background: linear-gradient(180deg, rgba(217,164,65,0) 0%, var(--accent) 22%, var(--accent) 78%, rgba(217,164,65,0) 100%); }
/* the words are masked out at both ends rather than covered by a gradient,
   so nothing darkens the photograph behind them */
.cue-ticker .window {
  position: relative; overflow: hidden;
  flex: 0 0 auto; font-size: 0.66rem; width: 1.7em;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
/* absolutely positioned so its height is the length of the run, not the height
   of the window — the loop then lands exactly on the second copy at -50% */
.cue-ticker .run {
  position: absolute; top: 0; right: 0;
  writing-mode: vertical-rl; white-space: nowrap;
  font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase;
  animation: cue-run 11s linear infinite;
}
.cue-ticker:hover .run { animation-play-state: paused; }

/* --- D. Blob: a soft ochre sticker that slowly changes shape, the line set
       solid inside it. The loudest option — it reads as a graphic first. --- */
.cue-blob {
  width: clamp(124px, 13.5vw, 168px); height: clamp(124px, 13.5vw, 168px);
  display: grid; place-items: center; text-align: center;
  background: var(--accent); color: #14110b;
  border-radius: 47% 53% 44% 56% / 52% 45% 55% 48%;
  animation: cue-morph 9s ease-in-out infinite;
  padding: 0 12%;
}
.cue-blob .line { font-size: clamp(0.56rem, 0.72vw, 0.7rem); font-weight: 700; letter-spacing: 0.11em; line-height: 1.5; text-transform: uppercase; }
.cue-blob .arrow { display: block; margin-top: 6px; font-size: 0.95rem; animation: cue-nudge 2.1s ease-in-out infinite; }
.cue-blob:hover { animation-duration: 2.6s; }

/* --------------------------------------------------------------------------
   SECOND ROUND — E to H, all built in B's language: hairline ochre strokes,
   one line of small caps bent along a path, an arrowhead, and one thing moving
   gently. They differ in WHAT moves — the sign, a mark under it, the line
   drawing itself, or the whole thing hanging from a thread.
   -------------------------------------------------------------------------- */

.cue-e, .cue-f, .cue-g, .cue-h { width: clamp(152px, 16.5vw, 214px); }
.cue-e svg, .cue-f svg, .cue-g svg, .cue-h svg { display: block; width: 100%; height: auto; overflow: visible; }
.cue-e text, .cue-f text, .cue-g text, .cue-h text {
  fill: var(--accent); font-family: var(--sans); font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase;
}
.cue-e .stroke, .cue-f .stroke, .cue-g .stroke, .cue-h .stroke {
  stroke: var(--accent); stroke-width: 1.6; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}

/* --- E. Wave: the line rides a shallow double curve and the whole sign
       drifts, so the words themselves look like they are moving water. --- */
.cue-e { animation: cue-drift 5.2s ease-in-out infinite; }
.cue-e text { font-size: 10.2px; }
.cue-e .squiggle { animation: cue-nudge 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 0; }
.cue-e:hover { animation-duration: 2.2s; }

/* --- F. Drop: the line is cradled in a shallow bowl and two chevrons fall
       through it in turn. The only option where nothing but the arrow moves. --- */
.cue-f text { font-size: 11px; }
.cue-f .chev { animation: cue-fall 2s ease-in-out infinite; }
.cue-f .chev-2 { animation-delay: 0.22s; }
.cue-f:hover .chev { animation-duration: 1s; }

/* --- G. Draw: the words hold still and the underline draws itself beneath
       them, hooks down into an arrowhead, then clears and starts again. --- */
.cue-g text { font-size: 11px; }
.cue-g .stroke { stroke-dasharray: 100; animation: cue-draw 4.6s ease-in-out infinite; }
.cue-g .tip { animation: cue-tip 4.6s ease-in-out infinite; }
.cue-g:hover .stroke, .cue-g:hover .tip { animation-duration: 2.2s; }

/* --- H. Swing: the line hangs off a curved rail on a thread and the whole
       sign swings from the hook, like something over a shop door. --- */
.cue-h { transform-origin: 50% 4%; animation: cue-swing 4.4s ease-in-out infinite; }
.cue-h text { font-size: 10px; }
.cue-h .pin { fill: var(--accent); }
.cue-h:hover { animation-duration: 1.6s; }

@keyframes cue-drift {
  0%, 100% { transform: translate(0, 0) rotate(-1.5deg); }
  50% { transform: translate(-5px, -6px) rotate(1.5deg); }
}
@keyframes cue-fall {
  0% { opacity: 0; transform: translateY(-6px); }
  35% { opacity: 1; }
  70%, 100% { opacity: 0; transform: translateY(7px); }
}
@keyframes cue-draw {
  0% { stroke-dashoffset: 100; }
  42%, 76% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -100; }
}
@keyframes cue-tip {
  0%, 38% { opacity: 0; }
  48%, 76% { opacity: 1; }
  86%, 100% { opacity: 0; }
}
@keyframes cue-swing {
  0%, 100% { transform: rotate(-4.5deg); }
  50% { transform: rotate(4.5deg); }
}

@keyframes cue-turn { to { transform: rotate(360deg); } }
@keyframes cue-nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@keyframes cue-bob { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-6deg) translateY(-7px); } }
@keyframes cue-run { to { transform: translateY(-50%); } }
@keyframes cue-morph {
  0%, 100% { border-radius: 47% 53% 44% 56% / 52% 45% 55% 48%; }
  33% { border-radius: 58% 42% 55% 45% / 43% 58% 42% 57%; }
  66% { border-radius: 42% 58% 48% 52% / 57% 41% 59% 43%; }
}

/* ---------- bio ---------- */
.bio { max-width: 780px; margin: 0 auto; padding: 140px 32px 130px; }
.bio .label { color: var(--accent); margin-bottom: 26px; }
.bio p {
  font-family: var(--display);
  font-size: clamp(1.08rem, 1.7vw, 1.4rem);
  line-height: 1.56;
  letter-spacing: -0.006em;
  margin: 0;
  color: #ddd8cc;
}
.bio .accent-line { color: var(--accent); }

/* ==========================================================================
   THE REEL — landing page only. Option 7's sticky mechanic, unchanged.
   ========================================================================== */
.reel { position: relative; }
.pin { position: sticky; top: 0; height: 100vh; min-height: 520px; overflow: hidden; z-index: 0; }
.pin img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pin::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,5,5,0.52) 0%, rgba(5,5,5,0.32) 30%, rgba(5,5,5,0.6) 100%);
}
.over { position: relative; z-index: 2; margin-top: -100vh; padding: 26vh var(--gutter) 34vh; }

.head { max-width: 820px; }
.reel.right .head { margin-left: auto; text-align: right; }
.head h2 {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-size: clamp(2.1rem, 5vw, 4rem);
  line-height: 0.98;
  letter-spacing: var(--display-track);
  margin: 0 0 18px;
  text-shadow: 0 3px 36px rgba(0,0,0,0.6);
}
.head .meta { color: var(--accent); }

/* stills on the landing page: hard-edged, unframed, unfeathered, slightly tilted */
.strip { display: flex; align-items: flex-start; margin: 70px 0 64px; padding-left: 3vw; }
.reel.right .strip { justify-content: flex-end; padding-left: 0; padding-right: 3vw; }
.strip figure { margin: 0; }
.strip figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.strip .f1 { width: 26vw; max-width: 400px; transform: rotate(-2deg); }
.strip .f1 img { height: 280px; }
.strip .f2 { width: 21vw; max-width: 320px; margin: 104px 0 0 -5vw; transform: rotate(2.4deg); }
.strip .f2 img { height: 210px; }
.strip .f3 { width: 17vw; max-width: 260px; margin: 22px 0 0 -4vw; transform: rotate(-1.2deg); }
.strip .f3 img { height: 172px; }

.body { max-width: 640px; }
.reel.right .body { margin-left: auto; }
.body .desc {
  font-family: var(--display);
  font-size: 1.14rem; line-height: 1.55; letter-spacing: -0.006em; margin: 0 0 20px;
  color: rgba(244,241,233,0.96); text-shadow: 0 2px 22px rgba(0,0,0,0.66);
}
.body .credits {
  font-size: 0.84rem; line-height: 1.7; color: rgba(244,241,233,0.62);
  margin: 0 0 26px; text-shadow: 0 2px 16px rgba(0,0,0,0.66);
}
.body .watch { display: inline-block; color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 4px; }
.body .watch:hover { color: var(--ink); border-color: var(--ink); }

/* ==========================================================================
   PROJECT PAGES — one screen per film, no scrolling.

   Everything about a film lives inside a single viewport: the poster leads,
   with the title, synopsis, credits, stills and watch link laid out around it
   over the film's key frame. Type and image sizes are driven by vh as well as
   vw, so the whole composition shrinks to fit rather than overflowing.

   Below 900px wide — or on any window shorter than 560px — the same content
   stacks and the page is allowed to scroll. See the media queries at the end.
   ========================================================================== */

body.project { height: 100vh; height: 100dvh; overflow: hidden; }

.stage { position: relative; height: 100%; display: flex; flex-direction: column; }

/* --- the film's key frame, pushed well back behind the type --- */
.backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.backdrop img { width: 100%; height: 100%; object-fit: cover; }
.backdrop::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(6,6,5,0.94) 0%, rgba(6,6,5,0.86) 44%, rgba(6,6,5,0.62) 100%),
    linear-gradient(0deg, rgba(6,6,5,0.72) 0%, rgba(6,6,5,0.2) 42%, rgba(6,6,5,0.6) 100%);
}

.frame {
  position: relative; z-index: 2; flex: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 72px); align-items: center;
  padding: clamp(76px, 11vh, 106px) var(--gutter) clamp(8px, 1.6vh, 18px);
}

/* --- left: everything written about the film --- */
.dossier { min-width: 0; }
.backlink { display: inline-block; color: rgba(255,255,255,0.6); margin-bottom: clamp(10px, 2vh, 22px); }
.backlink:hover { color: var(--accent); }
.backlink .arrow { display: inline-block; margin-right: 8px; }

.dossier h1 {
  font-family: var(--display); font-weight: var(--display-weight);
  font-size: clamp(1.6rem, min(3.6vw, 5.2vh), 3.4rem);
  line-height: 1.0; letter-spacing: var(--display-track); margin: 0;
  text-shadow: 0 2px 34px rgba(0,0,0,0.55);
}
.dossier .rule {
  width: 64px; height: 1px; background: var(--accent);
  margin: clamp(12px, 2.2vh, 24px) 0 clamp(10px, 1.7vh, 18px);
}
.dossier .meta { color: var(--accent); }
.dossier .synopsis {
  font-family: var(--display);
  font-size: clamp(0.92rem, min(1.1vw, 1.95vh), 1.2rem);
  line-height: 1.52; letter-spacing: -0.006em; max-width: 48ch;
  margin: clamp(14px, 2.6vh, 28px) 0 0;
  color: #e7e2d6; text-shadow: 0 2px 22px rgba(0,0,0,0.6);
}

/* credits, set in two columns so they cost as little height as possible */
.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: clamp(8px, 1.5vh, 16px) clamp(20px, 2.4vw, 34px);
  margin: clamp(15px, 2.8vh, 30px) 0 0;
  padding-top: clamp(13px, 2.4vh, 24px);
  border-top: 1px solid rgba(244,241,233,0.15);
}
.fact dt { color: rgba(244,241,233,0.46); margin-bottom: 4px; }
.fact dd {
  margin: 0; font-family: var(--display);
  font-size: clamp(0.86rem, min(0.95vw, 1.65vh), 1rem);
  line-height: 1.45; color: #e7e2d6;
}

/* scoped to .project so the landing page's own .watch links are untouched */
.project .watch {
  display: inline-flex; align-items: center; gap: 11px;
  margin-top: clamp(15px, 2.8vh, 30px);
  color: var(--accent); border-bottom: 1px solid var(--accent);
  padding: 0 0 5px; background: none; border-left: 0; border-right: 0; border-top: 0;
  font-family: var(--sans); cursor: pointer;
}
.project .watch .tri {
  width: 0; height: 0; border-left: 9px solid var(--accent);
  border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent;
  transition: border-left-color 0.3s ease;
}
.project .watch:hover, .project .watch:focus-visible { color: var(--ink); border-bottom-color: var(--ink); }
.project .watch:hover .tri, .project .watch:focus-visible .tri { border-left-color: var(--ink); }

/* --- right: the poster, and the stills tucked under it --- */
.plate-col {
  min-width: 0; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.poster { margin: 0; max-width: 100%; }
.poster img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: min(47vh, 500px);
}

/* the reserved plate for a film whose poster is still to come.
   Replace the whole .poster.awaiting block with:
     <figure class="poster"><img src="…" alt="Poster for …"></figure>   */
.poster.awaiting {
  height: min(47vh, 500px); aspect-ratio: 17 / 22; max-width: 100%;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 10px; text-align: center;
  background: rgba(10,10,9,0.4);
  border: 1px solid rgba(217,164,65,0.3);
  color: rgba(244,241,233,0.4);
}
.poster.awaiting .sc + .sc { color: rgba(217,164,65,0.6); }

/* one size, one line, evenly spaced. Hovering one lifts it above the rest
   at a larger size, so a still can be read without leaving the page. */
.stills {
  display: flex; align-items: flex-start; justify-content: center;
  gap: clamp(7px, 0.9vw, 13px);
  margin-top: clamp(12px, 1.9vh, 22px);
}
.stills figure {
  position: relative; margin: 0;
  width: clamp(88px, 9.9vw, 150px); flex: 0 0 auto;
  transition: transform 0.35s ease;
}
.stills img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.stills figure:hover { transform: scale(1.55); z-index: 6; }

/* --- the thin line along the bottom of the screen --- */
.stagefoot {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 20px; padding: 0 var(--gutter) clamp(14px, 2.6vh, 26px);
  color: rgba(244,241,233,0.5);
}
.stagefoot a:hover { color: var(--accent); }
.stagefoot .nextlink .arrow { color: var(--accent); margin-left: 10px; }

/* --- the film itself, played over the page --- */
.lightbox {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(4,4,4,0.95);
  display: grid; place-items: center; padding: 9vh 7vw;
  opacity: 0; transition: opacity 0.3s ease;
}
.lightbox.in { opacity: 1; }
/* the nav steps out of the way while the film is playing */
.watching .topnav { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.lightbox .screen { width: min(1240px, 100%); aspect-ratio: 16 / 9; background: #000; }
.lightbox iframe { width: 100%; height: 100%; border: 0; }
.lightbox .close {
  position: absolute; top: clamp(16px, 3vh, 30px); right: clamp(18px, 3vw, 38px);
  background: none; border: 0; color: rgba(244,241,233,0.7); cursor: pointer;
  font-family: var(--sans); padding: 6px;
}
.lightbox .close:hover, .lightbox .close:focus-visible { color: var(--accent); }
.lightbox .external {
  position: absolute; bottom: clamp(16px, 3vh, 30px); left: 50%; transform: translateX(-50%);
  color: rgba(244,241,233,0.5); border-bottom: 1px solid rgba(244,241,233,0.22); padding-bottom: 3px;
}
.lightbox .external:hover { color: var(--accent); border-color: var(--accent); }

/* --- the composition settles in on load --- */
.project .rise { animation: rise 0.9s ease both; }
.project .rise-2 { animation-delay: 0.1s; }
.project .rise-3 { animation-delay: 0.2s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* ==========================================================================
   MORE PROJECTS — the link at the foot of the landing scroll, and the plain
   list page it opens (more-projects.html).

   Deliberately the quiet opposite of the landing page: one column, no
   full-bleed pictures, no sticky mechanic. Each short is a title, its
   description, and the film itself. Like the project pages, nothing loads
   from Vimeo until someone clicks a play plate.
   ========================================================================== */

/* the link, sitting under the last reel. Needs the footer's own background
   and stacking so the last sticky still scrolls away behind it. */
.more {
  position: relative; z-index: 5; background: var(--stock);
  padding: 124px var(--gutter) 0; text-align: center;
}
.morelink {
  display: inline-block; font-family: var(--display); font-weight: var(--display-weight);
  font-size: clamp(1.45rem, 3.2vw, 2.3rem); letter-spacing: var(--display-track);
  border-bottom: 1px solid var(--accent); padding-bottom: 10px;
}
.morelink .arrow { color: var(--accent); margin-left: 14px; display: inline-block; transition: transform 0.3s ease; }
.morelink:hover .arrow { transform: translateX(7px); }

/* --- the list page --- */
.pagehead { max-width: 880px; margin: 0 auto; padding: clamp(120px, 17vh, 168px) var(--gutter) 0; }
.pagehead h1 {
  font-family: var(--display); font-weight: var(--display-weight);
  font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1; letter-spacing: var(--display-track);
  margin: 14px 0 0;
}
.pagehead .rule { width: 72px; height: 1px; background: var(--accent); margin: 26px 0 0; }

.shorts { max-width: 880px; margin: 0 auto; padding: 0 var(--gutter) clamp(90px, 14vh, 140px); }
.short { padding-top: clamp(56px, 8vh, 88px); }
.short + .short { margin-top: clamp(56px, 8vh, 88px); border-top: 1px solid rgba(244,241,233,0.13); }
.short h2 {
  font-family: var(--display); font-weight: var(--display-weight);
  font-size: clamp(1.4rem, 3.2vw, 2.15rem); line-height: 1.05; letter-spacing: var(--display-track);
  margin: 0;
}
.short .tag { display: inline-block; color: var(--accent); margin-bottom: 12px; }
.short .desc {
  font-size: clamp(1rem, 1.5vw, 1.16rem); line-height: 1.56; letter-spacing: -0.006em;
  color: #ddd8cc; margin: 16px 0 0; max-width: 62ch;
}
.short .away { display: inline-block; color: rgba(244,241,233,0.5); margin-top: 16px; }
.short .away:hover { color: var(--accent); }

/* the film. A plate holds the 16:9 box open so nothing jumps when the
   iframe arrives in place of the play button. */
.short .embed { position: relative; aspect-ratio: 16 / 9; margin-top: 26px; background: #000; }
.short .embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* the plate is a still from the film. Clicking it hands the box to Vimeo. */
.facade {
  position: absolute; inset: 0; width: 100%; padding: 0;
  display: grid; place-items: center; overflow: hidden;
  background: #0e0e0d; border: 0; cursor: pointer;
}
.facade img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s ease, filter 0.4s ease;
}
/* a light scrim so the play badge reads over a bright still */
.facade::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(6,6,5,0.14) 0%, rgba(6,6,5,0.38) 100%);
}
.facade .play {
  position: relative; z-index: 2;
  width: clamp(56px, 6vw, 72px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(10,10,9,0.55); border: 1px solid rgba(244,241,233,0.55);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.facade .tri {
  width: 0; height: 0; border-left: 17px solid var(--ink);
  border-top: 10.5px solid transparent; border-bottom: 10.5px solid transparent;
  margin-left: 4px; transition: border-left-color 0.3s ease;
}
.facade:hover img, .facade:focus-visible img { transform: scale(1.035); filter: brightness(0.8); }
.facade:hover .play, .facade:focus-visible .play {
  background: var(--accent); border-color: var(--accent); transform: scale(1.06);
}
.facade:hover .tri, .facade:focus-visible .tri { border-left-color: #14110b; }

/* ---------- footer ---------- */
footer { position: relative; z-index: 5; background: var(--stock); padding: 140px var(--gutter) 150px; text-align: center; }
footer .big {
  display: inline-block; font-family: var(--display); font-weight: var(--display-weight);
  font-size: clamp(1.5rem, 3.4vw, 2.5rem); letter-spacing: var(--display-track);
  border-bottom: 1px solid var(--accent); padding-bottom: 8px;
}
footer .links { margin-top: 30px; color: rgba(244,241,233,0.45); }
footer .links a { margin: 0 12px; }
footer .links a:hover { color: var(--accent); }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 1s ease, transform 1s ease; }
.reveal.in { opacity: 1; transform: none; }
.strip.reveal { transition: opacity 1.3s ease, transform 1.3s ease; }

/* ---------- responsive ---------- */

/* Narrow windows, and short ones — a phone in portrait cannot hold a title,
   a synopsis, a full credit list and a poster on one screen at a size anyone
   can read, so there the content stacks and the page scrolls again. */
@media (max-width: 900px), (max-height: 559px) {
  body.project { height: auto; overflow: visible; }
  .stage { height: auto; }
  .backdrop { position: fixed; }
  .frame {
    grid-template-columns: 1fr; align-items: start;
    gap: clamp(30px, 6vh, 54px);
    padding: 104px var(--gutter) 40px;
  }
  .plate-col { order: -1; height: auto; }
  .poster img, .poster.awaiting { max-height: 62vh; height: auto; }
  .poster.awaiting { width: min(300px, 68vw); aspect-ratio: 17 / 22; }
  .stills { flex-wrap: wrap; }
  .dossier .synopsis { max-width: none; font-size: clamp(1.02rem, 2.4vw, 1.2rem); }
  .fact dd { font-size: 0.95rem; }
  .stagefoot { padding-bottom: 34px; flex-wrap: wrap; row-gap: 14px; }
}

@media (max-width: 900px) {
  .strip .f1 { width: 46vw; } .strip .f1 img { height: 200px; }
  .strip .f2 { width: 34vw; margin: 72px 0 0 -7vw; } .strip .f2 img { height: 145px; }
  .strip .f3 { display: none; }
}

@media (max-width: 900px) {
  /* the wide cues come down to a fixed size rather than tracking the viewport */
  .cue-arc, .cue-e, .cue-f, .cue-g, .cue-h { width: 152px; }
  .cue-ticker { height: 170px; }
}

@media (max-width: 640px) {
  :root { --gutter: 18px; }
  .topnav { padding: 16px 18px; } .topnav nav a { margin-left: 14px; }
  .sc { font-size: 0.66rem; letter-spacing: 0.14em; }
  /* on a phone the hero caption already fills the frame */
  .cue { display: none; }
  .hero-caption { left: 18px; right: 18px; bottom: 7vh; }
  .bio { padding: 96px 18px 86px; }
  .over { padding: 20vh 18px 26vh; }
  .strip, .reel.right .strip { padding: 0; justify-content: flex-start; margin: 46px 0 46px; }
  .strip .f1 { width: 58vw; }
  .strip .f2 { width: 42vw; margin: 58px 0 0 -11vw; }
  .reel.right .head, .reel.right .body { margin-left: 0; text-align: left; }
  .dossier h1 { font-size: clamp(1.75rem, 7.6vw, 2.6rem); }
  .facts { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .lightbox { padding: 0 14px; }
  .more { padding-top: 92px; }
  .pagehead { padding-top: 104px; }
  footer { padding: 96px 18px 106px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .project .rise { animation: none; }
  .stills figure { transition: none; }
  .lightbox { transition: none; }
  .morelink .arrow { transition: none; }
  .facade { transition: none; }
  /* the cues hold still, but stay legible — the ticker parks at the top of
     its run rather than mid-word */
  .cue-seal svg, .cue-arc, .cue-blob, .cue-seal .pip, .cue-blob .arrow { animation: none; }
  .cue-ticker .run { animation: none; }
  /* the second round: E and H hold their resting tilt, F's chevrons and G's
     underline have to be forced visible since their animations are what
     brings them on screen at all */
  .cue-e, .cue-h, .cue-e .squiggle { animation: none; }
  .cue-f .chev { animation: none; opacity: 1; }
  .cue-g .stroke { animation: none; stroke-dashoffset: 0; }
  .cue-g .tip { animation: none; opacity: 1; }
}