/* ════════════════════════════════════════════════════════════
   BRAD HASSE — SHARED SITE SYSTEM
   Consolidated tokens, chrome, and the premium HUD primitives.
   Linked by every page. index.html and brad-lab.html load it first and then
   layer their own on top — inline for the home page, ASSETS/css/lab.css for
   the lab.
═══════════════════════════════════════════════════════════════ */

/* TrupTomp lives in fonts.css now, embedded as a data: URI. Re-declaring it
   here would win the cascade (this sheet loads second) and hand the family back
   to a relative .otf that file:// refuses to fetch. */

:root {
  --cream: #EDEAE0;
  --black: #0A0A0A;
  --ink:   #0A0A0A;
  --yellow:#FFE000;
  --white: #FAFAF8;
  --olive: #728040;
  --dim:   rgba(10,10,10,0.45);
  --hair:  rgba(10,10,10,0.2);
  --pad:   44px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Every <img> carries width/height attributes so the browser can reserve its space
   before the file lands (no layout shift). Those attributes are presentational
   hints: CSS width:100% overrides the width one, but nothing overrode the HEIGHT,
   so the browser used it literally and squashed the picture. height:auto sends the
   height back to the intrinsic ratio — the attributes still reserve the space.
   Deliberate crops (.cs-hero-bg, .card-media img, .vfacade .poster …) set height
   in their own class rules, which outrank this and keep their object-fit. */
img { height: auto; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--cream);
  color: var(--black);
  font-family: 'Space Mono', monospace;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

::selection { background: var(--yellow); color: var(--black); }

/* ── shared display type helper ── */
.cond { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.86; }

/* ══════════════ BACKDROP ══════════════ */
.dots {
  position: fixed; inset: -10vh -10vw; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(10,10,10,0.14) 1.4px, transparent 1.6px);
  background-size: 30px 30px; will-change: transform;
}
.deco { position: fixed; z-index: 0; pointer-events: none; opacity: 0.5; will-change: transform; }
.deco-globe { top: 12vh; right: -6vw; width: 34vw; }
.deco-radar { bottom: -8vh; left: -8vw; width: 38vw; opacity: 0.32; }
@media (max-width: 680px) { .deco-globe { width: 60vw; } .deco-radar { width: 70vw; } }

/* ══════════════ NAV ══════════════ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 22px 36px; pointer-events: none; mix-blend-mode: difference;
  transition: background 0.35s ease, padding 0.35s ease;
}
/* scrolled: solid black bar so the menu stays readable over any content
   (site.js toggles .nav-solid past ~40px) */
nav.nav-solid {
  mix-blend-mode: normal;
  background: rgba(10, 10, 10, 0.93);
  padding-top: 14px; padding-bottom: 14px;
}
.nav-logo { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 13px; letter-spacing: 0.18em; color: var(--white); line-height: 1.1; text-transform: uppercase; pointer-events: all; text-decoration: none; }
.nav-logo small { display: block; font-family: 'Space Mono', monospace; font-weight: 400; font-size: 9px; letter-spacing: 0.28em; text-transform: lowercase; margin-top: 2px; }
.nav-links { display: flex; gap: 28px; list-style: none; pointer-events: all; }
.nav-links a { position: relative; font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.12em; color: var(--white); text-decoration: none; }
.nav-links a sup { font-size: 7px; color: var(--yellow); }
.nav-links a.active { color: var(--yellow); }
/* subtle underline grow on hover */
.nav-links a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -5px; height: 1px; background: var(--yellow); transition: right 0.4s var(--ease-out); }
.nav-links a:hover::after { right: 0; }

/* ── Mobile nav: hamburger + full-screen overlay (built by site.js) ── */
.menu-btn {
  display: none; pointer-events: all; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; margin: -10px -8px 0 0; padding: 10px;
  flex-direction: column; justify-content: center; gap: 7px;
}
.menu-btn span { display: block; height: 2px; width: 100%; background: var(--white); transition: transform 0.35s var(--ease-out), opacity 0.3s ease; }
body.mnav-open .menu-btn span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
body.mnav-open .menu-btn span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

.mnav {
  position: fixed; inset: 0; z-index: 8000; background: var(--black);
  display: flex; flex-direction: column; justify-content: center; padding: 0 34px;
  opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s ease;
  background-image: radial-gradient(rgba(255,224,0,0.07) 1.4px, transparent 1.6px);
  background-size: 30px 30px;
}
body.mnav-open .mnav { opacity: 1; visibility: visible; }
body.mnav-open nav { z-index: 9000; }
.mnav-list { list-style: none; }
.mnav-list a {
  display: flex; align-items: baseline; gap: 16px; text-decoration: none; color: var(--white);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 900; text-transform: uppercase;
  font-size: clamp(48px, 13vw, 72px); line-height: 1.14; letter-spacing: -0.01em;
  transform: translateY(18px); opacity: 0; transition: transform 0.5s var(--ease-out), opacity 0.4s ease;
}
body.mnav-open .mnav-list a { transform: none; opacity: 1; }
body.mnav-open .mnav-list li:nth-child(2) a { transition-delay: 0.06s; }
body.mnav-open .mnav-list li:nth-child(3) a { transition-delay: 0.12s; }
.mnav-list a.active { color: var(--yellow); }
.mnav-num { font-family: 'Space Mono', monospace; font-weight: 400; font-size: 12px; letter-spacing: 0.2em; color: rgba(255,224,0,0.55); }
.mnav-tail {
  position: absolute; bottom: 34px; left: 34px; right: 34px;
  display: flex; gap: 10px; flex-wrap: wrap;
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,224,0,0.4);
}

@media (max-width: 680px) {
  .nav-links { display: none; }
  .menu-btn { display: flex; }
  /* iOS Safari can't keep a position:fixed element pinned when it also carries a
     blend mode: during momentum scroll the bar detaches and slides down the page.
     On touch we drop the blend and promote the bar to its own compositor layer.
     Without the blend, white type no longer inverts over the cream pages, so the
     bar is solid from the start rather than only once scrolled. */
  nav {
    mix-blend-mode: normal;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: rgba(10, 10, 10, 0.93);
    padding-top: 14px; padding-bottom: 14px;
  }
}
@media (max-width: 520px) {
  nav { padding: 14px 22px; }
}

/* ══════════════ FOOTER ══════════════ */
footer { position: relative; z-index: 2; display: flex; justify-content: space-between; padding: 28px var(--pad); font-size: 9px; letter-spacing: 0.2em; color: rgba(10,10,10,0.3); }
@media (max-width: 520px) { footer { padding: 24px 22px; } }

/* ══════════════ SECTION RULE (numbered) ══════════════ */
.rule {
  display: flex; align-items: center; gap: 20px;
  font-size: 10px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--dim);
}
.rule::after { content: ''; flex: 1; height: 1px; background: var(--hair); }
.rule .rule-r { flex: 0 0 auto; color: rgba(10,10,10,0.3); }
/* On a phone the longer subtitles ("The script is the guide, not the Bible")
   are wider than the screen, and flex-basis auto with no shrink pushed the whole
   page sideways. Let them give way and trim instead. */
@media (max-width: 700px) {
  .rule .rule-r {
    flex: 0 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}
.rule.on-dark { color: rgba(255,224,0,0.5); }
.rule.on-dark::after { background: rgba(255,224,0,0.16); }
.rule.on-dark .rule-r { color: rgba(255,224,0,0.35); }

/* ══════════════ YELLOW-RISE  ══════════════
   Single-layer fill via background-clip:text — NO duplicate glyph,
   so NO black border/halo. --p goes 0 (ink) → 1 (full yellow).
   The JS engine drives --p from scroll position (rises AND falls).      */
.yr {
  font-style: normal;
  --p: 0;
  --yr-ink: var(--black);
  background-image: linear-gradient(
    to top,
    var(--yellow) calc(var(--p) * 100% - 0.6%),
    var(--yr-ink) calc(var(--p) * 100% + 0.6%)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* keep the painted gradient locked to the glyphs, not the scroll box */
  background-attachment: scroll;
}
.yr.on-dark, .on-dark .yr { --yr-ink: var(--white); }
/* graceful fallback where background-clip:text is unsupported */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .yr { color: var(--yellow); -webkit-text-fill-color: var(--yellow); background-image: none; }
}
@media (prefers-reduced-motion: reduce) { .yr { --p: 1; } }

/* ══════════════ REVEAL ══════════════ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s ease, transform 0.9s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(26px); transition: opacity 0.9s ease, transform 0.9s var(--ease-out); }
.reveal-stagger.in > * { opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 0.06s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 0.12s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
}

/* ══════════════ HUD HERO PRIMITIVES ══════════════ */
.hud { position: relative; background: var(--black); overflow: hidden; color: var(--white); }
/* scanline texture */
.hud::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.10) 3px, rgba(0,0,0,0.10) 4px);
}
.hud-corners { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hud-corners span { position: absolute; width: 34px; height: 34px; border-color: rgba(255,224,0,0.35); border-style: solid; display: block; }
.hud-corners span:nth-child(1) { top: 84px; left: 36px; border-width: 1px 0 0 1px; }
.hud-corners span:nth-child(2) { top: 84px; right: 36px; border-width: 1px 1px 0 0; }
.hud-corners span:nth-child(3) { bottom: 52px; left: 36px; border-width: 0 0 1px 1px; }
.hud-corners span:nth-child(4) { bottom: 52px; right: 36px; border-width: 0 1px 1px 0; }

.hud-scan {
  position: absolute; left: 0; right: 0; height: 1px; z-index: 3;
  background: linear-gradient(90deg, transparent 0%, rgba(255,224,0,0.5) 50%, transparent 100%);
  pointer-events: none; animation: scandown 5s linear infinite;
}
@keyframes scandown { 0% { top: 0%; opacity: 0; } 5% { opacity: 1; } 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

.hud-top, .hud-bottom {
  position: absolute; z-index: 4; pointer-events: none;
  display: flex; justify-content: space-between;
}
.hud-top { top: 84px; left: 0; right: 0; padding: 14px 52px; border-bottom: 1px solid rgba(255,224,0,0.1); }
/* bottom tags tuck INTO the frame corners: flush with the corner brackets,
   text sitting just above the frame line */
.hud-bottom {
  bottom: 52px; left: 36px; right: 36px;
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(255,224,0,0.1);
}
.hud-tag { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,224,0,0.5); }
.hud-tag.blink { animation: hblink 1.6s step-end infinite; }
@keyframes hblink { 0%,100% { opacity: 1; } 50% { opacity: 0.08; } }
@media (max-width: 640px) {
  .hud-top { padding-left: 24px; padding-right: 24px; }
  .hud-bottom { left: 24px; right: 24px; }
  /* "All Work" is the back button on every project page — as inline text it's a
     17px-tall target. Pad it out to a thumb without moving the type: the row's
     own padding shrinks by the same amount it gains. */
  .hud-top { padding-top: 0; padding-bottom: 0; }
  .hud-top .back-link { padding: 14px 12px 14px 0; margin-left: 0; }
  .hud-top .hud-tag { padding: 14px 0; }
  .hud-tag { font-size: 8.5px; letter-spacing: 0.16em; }
  /* The frame is drawn at a fixed 36px inset, but below 640px the HUD rows pull
     in to 24px — so the brackets stop framing the type and start running through
     it ("ALL WORK", the studio line). The vertical scroll rail lands on the
     bottom row for the same reason. Both are framing devices that need margin
     they don't have on a phone, so drop them rather than crowd the hero. */
  .hud-corners, .hud-scrollhint { display: none; }
}

.hud-kicker { font-size: 10px; letter-spacing: 0.45em; text-transform: uppercase; color: rgba(255,224,0,0.5); }
.hud-sub { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,224,0,0.32); }

/* scroll hint */
.hud-scrollhint {
  position: absolute; bottom: 56px; left: 50%; transform: translateX(-50%); z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,224,0,0.3);
  transition: opacity 0.4s ease;
}
.hud-scrollhint .line { width: 1px; height: 36px; background: linear-gradient(to bottom, rgba(255,224,0,0.3), transparent); animation: scrollpulse 2.2s ease-in-out infinite; }
@keyframes scrollpulse { 0%,100% { opacity: 0.4; transform: scaleY(1); } 50% { opacity: 0.9; transform: scaleY(0.6); } }

/* ══════════════ BUTTONS / CHIPS / LINKS ══════════════ */
.chip { display: inline-block; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; border: 1.5px solid var(--black); padding: 6px 12px; }
.chip.fill { background: var(--yellow); }
.chip.on-dark { border-color: rgba(255,224,0,0.55); color: rgba(255,250,248,0.85); }
.chip.on-dark.fill { background: var(--yellow); color: var(--black); border-color: var(--yellow); }

.back-link { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(10,10,10,0.55); text-decoration: none; }
.back-link:hover { color: var(--black); }
.back-link .arrow { display: inline-block; width: 26px; height: 1px; background: currentColor; position: relative; transition: width 0.35s var(--ease-out); }
.back-link .arrow::before { content: ''; position: absolute; left: 0; top: -3px; width: 7px; height: 7px; border-left: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
.back-link:hover .arrow { width: 36px; }
.back-link.on-dark { color: rgba(255,224,0,0.55); }
.back-link.on-dark:hover { color: var(--yellow); }

/* ══════════════ NEXT PROJECT MODULE ══════════════ */
.nextproj {
  position: relative; z-index: 2; display: block; text-decoration: none; color: var(--white);
  background: var(--black); overflow: hidden; border-top: 2.5px solid var(--black);
}
.nextproj-inner { position: relative; z-index: 2; padding: 12vh var(--pad) 13vh; }
.nextproj-kick { font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(255,224,0,0.55); margin-bottom: 18px; display: flex; align-items: center; gap: 14px; }
.nextproj-kick::after { content: ''; width: 60px; height: 1px; background: rgba(255,224,0,0.3); }
.nextproj-name {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 900; text-transform: uppercase;
  font-size: clamp(52px, 11vw, 168px); line-height: 0.84; letter-spacing: -0.02em; color: var(--white);
  transition: transform 0.6s var(--ease-out);
}
.nextproj:hover .nextproj-name { transform: translateX(22px); }
.nextproj-name .arrow-big { color: var(--yellow); display: inline-block; transition: transform 0.6s var(--ease-out); }
.nextproj:hover .nextproj-name .arrow-big { transform: translateX(18px); }
.nextproj-meta { margin-top: 22px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,250,248,0.4); }
.nextproj-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.16; filter: grayscale(0.3) contrast(1.05); transition: opacity 0.6s ease, transform 1.2s var(--ease-out); }
.nextproj:hover .nextproj-bg { opacity: 0.28; transform: scale(1.04); }
@media (max-width: 520px) { .nextproj-inner { padding: 9vh 22px 10vh; } }

/* ══════════════ VIDEO FACADE (click-to-load Vimeo) ══════════════ */
.vfacade { position: relative; width: 100%; padding-top: 56.25%; background: var(--black); border: 2px solid var(--black); overflow: hidden; cursor: pointer; }
.vfacade img.poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out), opacity 0.4s ease; }
.vfacade:hover img.poster { transform: scale(1.04); }
.vfacade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.vfacade .vplay {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.vfacade .vplay-btn {
  width: 64px; height: 64px; border: 1.5px solid rgba(255,250,248,0.7); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,10,10,0.32); backdrop-filter: blur(4px);
  transition: transform 0.35s var(--ease-out), background 0.35s ease, border-color 0.35s ease;
}
.vfacade:hover .vplay-btn { transform: scale(1.12); background: var(--yellow); border-color: var(--yellow); }
.vfacade .vplay-btn svg { width: 17px; height: 17px; fill: var(--white); margin-left: 3px; transition: fill 0.35s ease; }
.vfacade:hover .vplay-btn svg { fill: var(--black); }
.vfacade .vlabel {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--white);
  background: rgba(10,10,10,0.5); padding: 5px 9px; backdrop-filter: blur(3px);
}
.vfacade.loaded .vplay, .vfacade.loaded img.poster, .vfacade.loaded .vlabel { opacity: 0; pointer-events: none; }

/* ══════════════ LIGHTBOX ══════════════ */
.lightbox { position: fixed; inset: 0; z-index: 9000; background: rgba(10,10,10,0.95); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.lightbox.open { opacity: 1; pointer-events: all; }
.lightbox-inner { position: relative; width: min(90vw, 1100px); }
.lightbox-vid { position: relative; padding: 56.25% 0 0 0; background: var(--black); }
.lightbox-vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lightbox-close { position: absolute; top: -40px; right: 0; background: none; border: none; padding: 0; cursor: pointer; font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,250,248,0.5); }
.lightbox-close:hover { color: var(--white); }

/* ══════════════ SCROLL PROGRESS ══════════════ */
.pbar { position: fixed; top: 0; left: 0; height: 2px; background: var(--yellow); z-index: 201; width: 0%; }

/* ══════════════ CASE STUDY ══════════════ */
/* svh = viewport WITH the mobile URL bar showing; plain vh measures the bar-hidden
   height, which would push this bottom-aligned title block below the fold on iOS */
.cs-hero { position: relative; z-index: 1; height: 100vh; height: 100svh; min-height: 600px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.cs-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0.45; filter: grayscale(0.18) contrast(1.05); transform: scale(1.05); }
.cs-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(10,10,10,0.94) 2%, rgba(10,10,10,0.4) 46%, rgba(10,10,10,0.66) 100%); }
.cs-hero-inner { position: relative; z-index: 4; padding: 0 var(--pad) 12vh; max-width: 1500px; margin: 0 auto; width: 100%; }
.cs-hero-kick { font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(255,224,0,0.72); margin-bottom: 18px; }
.cs-hero-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.82; font-size: clamp(60px, 12.5vw, 200px); color: var(--white); }
.cs-hero-title .l { display: block; overflow: hidden; }
.cs-hero-title .l > span { display: block; transform: translateY(112%); transition: transform 1.05s var(--ease-out); }
.cs-hero.in .cs-hero-title .l > span { transform: translateY(0); }
.cs-hero.in .cs-hero-title .l:nth-child(2) > span { transition-delay: 0.07s; }
.cs-hero.in .cs-hero-title .l:nth-child(3) > span { transition-delay: 0.14s; }
.cs-hero-meta { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 28px; }
@media (prefers-reduced-motion: reduce) { .cs-hero-title .l > span { transform: none; } }
@media (max-width: 640px) {
  .cs-hero-inner { padding: 0 22px 15vh; }
  /* small screens: the scroll hint collides with the meta chips + hud tags */
  .cs-hero .hud-scrollhint, .work-hero .hud-scrollhint { display: none; }
}

.cs-main { position: relative; z-index: 2; padding: 0 var(--pad); max-width: 1500px; margin: 0 auto; }
@media (max-width: 640px) { .cs-main { padding: 0 22px; } }
.cs-section { padding: 10vh 0 3vh; }
.cs-section .rule { margin-bottom: 5vh; }
.rule .yr { --yr-ink: rgba(10,10,10,0.42); font-weight: 700; }

.film-stack { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: start; }
.film-stack.multi { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 820px) { .film-stack.multi { grid-template-columns: 1fr; } }
/* A lone 16:9 film run at the full 1500px content width overshoots a laptop
   viewport, so cap the single-video stack by height: the section header plus
   its vertical padding eat ~220px, and the rest converts back to a width at
   16/9. The 640px floor keeps short landscape screens from squeezing it to a
   postage stamp; .multi is already halved by its two columns. */
.film-stack:not(.multi) { max-width: min(1180px, max(640px, calc((100vh - 220px) * 16 / 9))); margin-inline: auto; }

.stills-grid { columns: 3 300px; column-gap: 22px; }
.stills-grid img {
  width: 100%; display: block; margin: 0 0 22px; border: 2px solid var(--black); background: var(--black); break-inside: avoid;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease;
}
.stills-grid img:hover { transform: rotate(-1.1deg) scale(1.015); box-shadow: 8px 8px 0 var(--yellow); }
@media (max-width: 640px) { .stills-grid { columns: 1; } }

.credits { border-top: 2.5px solid var(--black); margin-top: 6vh; }
.cred-cols { columns: 3 240px; column-gap: 48px; }
@media (max-width: 760px) { .cred-cols { columns: 1; } }
.cred-group { break-inside: avoid; margin-bottom: 30px; }
.cred-group h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--black); border-bottom: 1.5px solid rgba(10,10,10,0.25); padding-bottom: 7px; margin-bottom: 12px; }
.cred-group dl { display: grid; grid-template-columns: 1fr; gap: 7px; }
.cred-row { font-size: 11.5px; line-height: 1.5; }
.cred-row b { font-weight: 400; color: rgba(10,10,10,0.5); }
.cred-row span { color: var(--black); }

/* ══════════════ CUSTOM CURSOR (3D arrow) ══════════════ */
.cursor-arrow { position: fixed; top: 0; left: 0; z-index: 10000; pointer-events: none; width: 26px; height: 32px; margin: -3px 0 0 -4px; opacity: 0; transition: opacity 0.25s ease; will-change: transform; }
.cursor-arrow svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 4px 3px; }
.cursor-arrow .c-back { fill: var(--yellow); }
.cursor-arrow .c-front { fill: var(--white); stroke: var(--black); stroke-width: 1.6; stroke-linejoin: round; }
.cursor-on .cursor-arrow { opacity: 1; }
body.cursor-hover .cursor-arrow .c-front { fill: var(--yellow); }
body.cursor-hover .cursor-arrow .c-back { fill: var(--black); }
.cursor-on, .cursor-on * { cursor: none !important; }
/* little squash on click — the arrow "presses" */
body.cursor-down .cursor-arrow svg { transform: scale(0.78) !important; }
@media (hover: none), (pointer: coarse) { .cursor-arrow { display: none; } }

/* ══════════════ CASE-STUDY PROSE ══════════════
   Music-video and narrative pages carry real writing — a synopsis, the story
   behind a short — where the ad pages only ever needed a film and a credit
   list. Same measure and rhythm as .phase-blurb on the home page, minus the
   sticker card, because these run to several paragraphs. */
.cs-copy { max-width: 720px; }
.cs-copy p { font-size: 13px; line-height: 1.9; color: rgba(10,10,10,0.78); }
.cs-copy p + p { margin-top: 18px; }
.cs-copy p.lead {
  font-size: 15.5px; line-height: 1.75; color: var(--black);
  border-left: 3px solid var(--yellow); padding-left: 18px;
}
.cs-copy em { font-style: italic; }

/* the pull-quote gag on Texting Hat — Brad talking himself into a hat business */
.cs-quote {
  margin: 26px 0; max-width: 620px;
  background: var(--yellow); border: 2.5px solid var(--black);
  box-shadow: 8px 8px 0 rgba(10,10,10,0.25);
  padding: 20px 24px; transform: rotate(-0.6deg);
  font-size: 14px; line-height: 1.7; color: var(--black);
}
@media (max-width: 640px) { .cs-quote { box-shadow: 5px 5px 0 rgba(10,10,10,0.25); padding: 16px 18px; } }