/* =========================================================
   CORALIAN FILMS — Edition III
   Original IP. White paper, black ink, red mark.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,700;1,900&family=Big+Shoulders+Stencil+Display:wght@700;900&display=swap');

/* ---------- Tokens ---------- */
:root {
  --bg:        #FFFFFF;
  --bg-soft:   #F5F4F1;
  --ink:       #0A0A0A;
  --ink-soft:  #2A2A28;
  --meta:      #6B6B6B;
  --meta-soft: #A8A6A1;
  --accent:    #F62829;
  --rule:        rgba(10,10,10,0.10);
  --rule-strong: rgba(10,10,10,0.22);

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Type scale — A24-leaning heavy italic display + clean grotesk body */
  --fs-meta: 11px;
  --fs-body: 16px;
  --fs-lead: 19px;

  --fs-d-s:  clamp(1.2rem, 1.92vw, 1.8rem);
  --fs-d-m:  clamp(2rem, 3.84vw, 3.6rem);
  --fs-d-l:  clamp(2.8rem, 5.6vw, 5.2rem);
  --fs-d-xl: clamp(3.6rem, 8.8vw, 8.8rem);
  --fs-mega: clamp(4.8rem, 13.6vw, 14.4rem);

  --tracking-tight:  -0.04em;
  --tracking-tighter: -0.055em;
  --tracking-meta:    0.18em;

  --pad-x: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(5rem, 10vh, 9rem);

  --ease-cinema: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-soft:   cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 240ms;
  --dur-mid:  520ms;
  --dur-slow: 1000ms;

  --header-h: 68px;
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  font-weight: 400;
  overflow-x: hidden;
}
img, video, svg, iframe { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; background: none; border: none; outline: none; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: var(--bg); }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Cursor — camera viewfinder ---------- */
/* Default state: small crosshair + center dot
   Hover state:   slightly larger crosshair
   View state:    full viewfinder with corner brackets — like aiming a camera */
.cursor {
  position: fixed; top: 0; left: 0;
  width: 22px; height: 22px;
  pointer-events: none;
  z-index: 11000;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  transition: width 0.45s var(--ease-cinema), height 0.45s var(--ease-cinema);
  will-change: transform;
}
.cursor .vf-cross-h, .cursor .vf-cross-v {
  position: absolute;
  background: #FFFFFF;
  transition: opacity 0.3s var(--ease-cinema);
}
.cursor .vf-cross-h { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
.cursor .vf-cross-v { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
.cursor .vf-dot {
  position: absolute; top: 50%; left: 50%;
  width: 3px; height: 3px;
  background: #FFFFFF;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ease-cinema), background 0.3s var(--ease-cinema);
}
.cursor .vf-corner {
  position: absolute;
  width: 10px; height: 10px;
  opacity: 0;
  transition: opacity 0.45s var(--ease-cinema);
}
.cursor .vf-corner::before, .cursor .vf-corner::after {
  content: ''; position: absolute; background: #FFFFFF;
}
.cursor .vf-corner.tl::before { top: 0; left: 0; width: 10px; height: 1px; }
.cursor .vf-corner.tl::after  { top: 0; left: 0; width: 1px; height: 10px; }
.cursor .vf-corner.tr::before { top: 0; right: 0; width: 10px; height: 1px; }
.cursor .vf-corner.tr::after  { top: 0; right: 0; width: 1px; height: 10px; }
.cursor .vf-corner.bl::before { bottom: 0; left: 0; width: 10px; height: 1px; }
.cursor .vf-corner.bl::after  { bottom: 0; left: 0; width: 1px; height: 10px; }
.cursor .vf-corner.br::before { bottom: 0; right: 0; width: 10px; height: 1px; }
.cursor .vf-corner.br::after  { bottom: 0; right: 0; width: 1px; height: 10px; }

.cursor.is-hover { width: 32px; height: 32px; }
.cursor.is-hover .vf-dot { transform: translate(-50%, -50%) scale(1.4); }
.cursor.is-view { width: 120px; height: 120px; }
.cursor.is-view .vf-corner { opacity: 1; }
.cursor.is-view .vf-cross-h, .cursor.is-view .vf-cross-v { opacity: 0.35; }
.cursor.is-view .vf-dot { background: var(--accent); transform: translate(-50%, -50%) scale(1.6); }

.cursor-label {
  position: fixed; top: 0; left: 0;
  transform: translate(-50%, -50%);
  pointer-events: none; z-index: 11001;
  font-size: 10px;
  letter-spacing: var(--tracking-meta); text-transform: uppercase;
  color: #FFFFFF; font-weight: 600;
  opacity: 0; mix-blend-mode: difference;
  transition: opacity 0.35s var(--ease-cinema);
  white-space: nowrap;
}
.cursor.is-view + .cursor-label { opacity: 1; }
@media (hover: none), (max-width: 900px) {
  .cursor, .cursor-label { display: none; }
  body { cursor: auto; }
}
@media (hover: hover) {
  body { cursor: none; }
  a, button, input, [data-cursor] { cursor: none; }
}

/* ---------- DARK MODE ---------- */
body { transition: background 0.55s var(--ease-cinema), color 0.55s var(--ease-cinema); }
body.dark {
  --bg:        #0B0B0A;
  --bg-soft:   #161614;
  --ink:       #F4F2EC;
  --ink-soft:  #C8C5BD;
  --meta:      #8A867D;
  --meta-soft: #4A4845;
  --rule:        rgba(244,242,236,0.12);
  --rule-strong: rgba(244,242,236,0.26);
}
body.dark .grain { mix-blend-mode: screen; opacity: 0.05; }
body.dark .film .frame { background: #050505; }

.theme-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase;
  color: var(--ink);
  opacity: 0.8;
  transition: opacity var(--dur-fast);
}
.theme-toggle:hover { opacity: 1; }
.theme-toggle .dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  border: 1px solid var(--ink);
  transition: transform 0.5s var(--ease-cinema);
}
body.dark .theme-toggle .dot { transform: rotate(180deg); }

/* ---------- LANGUAGE TOGGLE (EN / ES) ---------- */
.lang-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  padding: 4px 0;
}
.lang-toggle .opt {
  opacity: 0.42;
  transition: opacity var(--dur-fast), color var(--dur-fast);
}
.lang-toggle .opt.active { opacity: 1; color: var(--ink); }
.lang-toggle .opt:hover { opacity: 1; }
.lang-toggle .sep { opacity: 0.28; padding: 0 1px; }

/* ---------- WORLD CLOCKS ---------- */
.clocks {
  display: flex; gap: 18px;
  font-size: 10px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase;
  color: var(--meta);
  font-variant-numeric: tabular-nums;
}
.clock { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.clock em { font-style: italic; color: var(--ink); opacity: 0.85; font-weight: 600; font-family: var(--sans); }
.clock span { font-weight: 500; opacity: 0.7; }
@media (max-width: 1100px) { .clocks .clock:nth-child(3) { display: none; } }
@media (max-width: 900px)  { .clocks .clock:nth-child(2) { display: none; } }
@media (max-width: 720px)  { .clocks { display: none; } }

/* ---------- FLOATING CTA — bottom-right pill ---------- */
.float-cta {
  position: fixed;
  bottom: clamp(20px, 3vh, 32px);
  right: clamp(20px, 3vw, 36px);
  z-index: 7800;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase;
  transition: background 0.4s var(--ease-cinema), color 0.4s var(--ease-cinema), border-color 0.4s var(--ease-cinema), transform 0.4s var(--ease-cinema), opacity 0.4s var(--ease-cinema);
  opacity: 0; transform: translateY(20px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
body.is-loaded .float-cta { opacity: 1; transform: translateY(0); transition-delay: 1.2s; }
/* Hide CTA when the footer bottom row scrolls into view (so it doesn't cover Privacy/Terms/Top↑) */
body.is-loaded .float-cta.is-hidden-by-footer { opacity: 0; transform: translateY(20px); pointer-events: none; transition-delay: 0s; }
.float-cta:hover { background: var(--ink); color: var(--bg); }
.float-cta .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: pip 1.6s var(--ease-cinema) infinite;
}
.float-cta .arrow { transition: transform 0.3s var(--ease-cinema); }
.float-cta:hover .arrow { transform: translate(2px, -2px); }
@media (max-width: 720px) { .float-cta { bottom: 14px; right: 14px; padding: 11px 16px; font-size: 10px; } }

/* Move chapter counter to bottom-LEFT to free up bottom-right for the floating CTA */
.chapter { right: auto; left: clamp(20px, 3vw, 36px); }

/* ---------- Page transition curtain ---------- */
.curtain {
  position: fixed; inset: 0;
  background: var(--ink);
  z-index: 12000;
  pointer-events: none;
  transform: translateY(100%);
  will-change: transform;
}
.curtain.is-active { pointer-events: all; }

/* ---------- Header — 3-column grid: clocks | wordmark | toggles+nav ---------- */
.masthead {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 9000;
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 0 var(--pad-x);
  color: #FFFFFF;
  transition: background var(--dur-mid) var(--ease-cinema), color var(--dur-mid) var(--ease-cinema), border-color var(--dur-mid) var(--ease-cinema);
  border-bottom: 1px solid transparent;
}
.masthead.is-light { color: var(--ink); background: var(--bg); border-bottom-color: var(--rule); }
.masthead .wordmark { justify-self: center; }
.masthead-left  { display: flex; align-items: center; gap: 18px; justify-self: start; }
.masthead-right { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); justify-self: end; }
@media (max-width: 880px) {
  .masthead { grid-template-columns: auto 1fr auto; }
  .masthead-left { display: none; }
  .masthead .wordmark { justify-self: start; }
}

/* Wordmark — real PNG logo, two variants for light/dark contexts */
.wordmark {
  display: inline-flex; align-items: center;
  line-height: 1;
  position: relative;
}
.wordmark .logo {
  height: clamp(22px, 2.6vw, 36px);
  width: auto;
  display: block;
  transition: opacity var(--dur-mid) var(--ease-cinema);
}
/* Default state: over dark hero (no .is-light) → show LIGHT (white-text) variant */
.wordmark .logo-dark  { display: none; }
.wordmark .logo-light { display: block; }
/* When masthead is light (after scroll on home, or non-home pages) → show DARK variant */
.masthead.is-light .wordmark .logo-dark  { display: block; }
.masthead.is-light .wordmark .logo-light { display: none; }
/* Dark mode override: page bg is dark → always show LIGHT variant */
body.dark .masthead .wordmark .logo-dark  { display: none; }
body.dark .masthead .wordmark .logo-light { display: block; }

/* Screen-reader fallback */
.wordmark .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;
}

/* Nav */
.nav {
  display: flex; align-items: center; gap: clamp(1.5rem, 2.5vw, 2.5rem);
  font-size: 12px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase;
}
.nav a {
  color: currentColor; opacity: 0.85;
  transition: opacity var(--dur-fast);
  position: relative; padding: 4px 0;
}
.nav a:hover { opacity: 1; }
.nav a[aria-current="page"] { opacity: 1; }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--accent);
}

/* Inline nav hidden everywhere — replaced by the burger toggle */
.nav { display: none !important; }

/* Burger always visible */
.menu-toggle {
  display: flex; flex-direction: column; gap: 6px; padding: 10px;
  margin-right: -10px;
  background: transparent; border: 0; cursor: pointer;
}
.menu-toggle span {
  width: 26px; height: 1px;
  background: currentColor;
  transition: transform 0.3s var(--ease-cinema), width 0.3s var(--ease-cinema);
}
.menu-toggle span:nth-child(2) { width: 18px; align-self: flex-end; }
.menu-toggle:hover span:nth-child(2) { width: 26px; }
body.menu-open .menu-toggle span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); width: 26px; }
body.menu-open .menu-toggle span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); width: 26px; }

/* ---------- Mobile menu ---------- */
.mobile-menu {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 8000;
  padding: calc(var(--header-h) + 32px) var(--pad-x) 32px;
  display: flex; flex-direction: column; justify-content: space-between;
  transform: translateY(-100%);
  transition: transform 0.7s var(--ease-cinema);
  color: var(--ink);
}
body.menu-open .mobile-menu { transform: translateY(0); }
.mobile-menu nav { display: flex; flex-direction: column; gap: 0; margin-top: auto; }
.mobile-menu nav a {
  font-weight: 900; font-style: italic;
  font-size: clamp(2rem, 8.8vw, 4rem);
  letter-spacing: var(--tracking-tighter); line-height: 1.05;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
}
.mobile-menu nav a:last-child { border-bottom: 1px solid var(--rule); }
.mobile-menu .meta-row {
  display: flex; justify-content: space-between; padding-top: 24px;
  font-size: 10px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--meta);
}
/* Mobile menu overlay now shows at all viewport sizes — burger triggers it */

/* ---------- HERO REEL (immersive showreel) ---------- */
.reel {
  position: relative;
  height: 100vh; height: 100svh;
  width: 100%;
  overflow: hidden;
  background: var(--ink);
  color: #FFFFFF;
}
.reel-media {
  position: absolute; inset: 0;
  z-index: 0;
}
/* Vimeo background embed needs to fill, masking iframe scaling */
.reel-media iframe,
.reel-media video {
  position: absolute;
  top: 50%; left: 50%;
  width: 177.78vh;          /* 16:9 — fills height, overscan width */
  min-width: 100%;
  height: 56.25vw;          /* 16:9 — fills width, overscan height */
  min-height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border: 0;
}
.reel-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 70% at 50% 35%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.85) 100%);
}
.reel-content {
  position: relative; z-index: 2;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: var(--header-h) var(--pad-x) clamp(1.5rem, 4vh, 3rem);
}
.reel-eyebrow {
  align-self: end;
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  padding-bottom: 18px;
  display: flex; gap: 14px; align-items: center;
}
.reel-eyebrow .pip { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; animation: pip 1.6s var(--ease-cinema) infinite; }
@keyframes pip {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.25); }
}
.reel-bottom {
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end;
}
.reel-statement {
  font-weight: 900; font-style: italic;
  font-size: clamp(1.8rem, 4.8vw, 5.2rem);
  line-height: 0.95;
  letter-spacing: var(--tracking-tighter);
  color: #FFFFFF;
  max-width: 18ch;
}
.reel-statement em { font-style: italic; color: var(--accent); }
.reel-statement .roman { font-style: normal; font-weight: 600; color: rgba(255,255,255,0.85); }

.reel-meta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
  text-align: right;
}
.reel-meta .badge {
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.reel-meta .badge em { font-style: normal; color: #FFFFFF; }
.reel-meta .sound {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  font-size: 10px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase;
  color: #FFFFFF;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.reel-meta .sound:hover { border-color: #FFFFFF; background: rgba(255,255,255,0.06); }
.reel-meta .sound .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.reel-meta .sound.muted .pip { background: rgba(255,255,255,0.4); }

.reel-cue {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 10px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  pointer-events: none;
}
.reel-cue .line {
  width: 1px; height: 36px; background: rgba(255,255,255,0.3); position: relative; overflow: hidden;
}
.reel-cue .line::after {
  content: ""; position: absolute; inset: 0; background: #FFFFFF;
  transform: translateY(-100%); animation: cue-pulse 2.4s var(--ease-cinema) infinite;
}
@keyframes cue-pulse {
  0% { transform: translateY(-100%); }
  60% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}
@media (max-width: 720px) {
  .reel-bottom { grid-template-columns: 1fr; }
  .reel-meta { align-items: flex-start; text-align: left; }
}

/* ---------- Section: layered statement intro ---------- */
.intro {
  padding: clamp(5rem, 10vh, 8rem) var(--pad-x) clamp(3rem, 6vh, 5rem);
  display: grid; grid-template-columns: 1fr 2fr; gap: clamp(2rem, 5vw, 5rem); align-items: start;
  border-bottom: 1px solid var(--rule);
}
.intro .label {
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--meta);
  display: flex; align-items: center; gap: 12px;
  padding-top: 14px;
}
.intro .label::before { content: ""; width: 24px; height: 1px; background: var(--accent); }
.intro h2 {
  font-weight: 900; font-style: italic;
  font-size: var(--fs-d-l);
  line-height: 1.08;
  letter-spacing: var(--tracking-tighter);
  max-width: 22ch;
  margin-bottom: clamp(2rem, 4vh, 3rem);
  padding: 0.08em 0.04em 0.16em;
  margin-left: -0.04em;
}
.intro h2 em { font-style: italic; color: var(--accent); }
/* Stacked secondary statement — multi-line, less heavy weight */
.intro .stack {
  display: grid; gap: clamp(0.4rem, 0.8vh, 0.8rem);
}
.intro .stack p {
  font-weight: 400;
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  max-width: 32ch;
}
.intro .stack p em { font-style: italic; color: var(--accent); font-weight: 500; }
.intro .stack p strong { font-weight: 900; font-style: italic; }
.intro .stack p.dim { color: var(--meta); }
@media (max-width: 820px) { .intro { grid-template-columns: 1fr; gap: 2rem; } .intro .label { padding-top: 0; } }

/* ---------- BTS gallery — behind the lens ---------- */
.bts {
  padding: var(--section-y) 0;
  border-top: 1px solid var(--rule);
}
.bts-header {
  display: flex; align-items: end; justify-content: space-between;
  padding: 0 var(--pad-x) clamp(2rem, 5vh, 3.5rem);
  gap: 2rem;
}
.bts-header .heading {
  font-weight: 900; font-style: italic;
  font-size: clamp(1.6rem, 3.6vw, 3.2rem);
  line-height: 0.95; letter-spacing: var(--tracking-tighter);
  max-width: 18ch;
}
.bts-header .heading em { font-style: italic; color: var(--accent); }
.bts-header .meta {
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--meta);
  text-align: right;
}
.bts-header .label {
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--meta);
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.bts-header .label::before { content: ""; width: 24px; height: 1px; background: var(--accent); }
.bts-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.5rem, 1vw, 1rem);
  padding: 0 clamp(0.5rem, 1vw, 1rem);
}
.bts-tile {
  position: relative;
  overflow: hidden;
  background: var(--bg-soft);
  aspect-ratio: 4 / 5;
}
.bts-tile.wide { aspect-ratio: 16 / 9; }
.bts-tile.square { aspect-ratio: 1 / 1; }
.bts-tile img, .bts-tile video, .bts-tile iframe {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.55) contrast(1.05) brightness(0.95);
  transition: filter 1.4s var(--ease-cinema), transform 1.6s var(--ease-cinema);
  border: 0;
}
.bts-tile:hover img, .bts-tile:hover video, .bts-tile:hover iframe { filter: grayscale(0) contrast(1) brightness(1); }
.bts-tile .placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-style: italic;
  font-size: clamp(1.6rem, 3.2vw, 2.8rem);
  letter-spacing: var(--tracking-tighter);
  color: rgba(255,255,255,0.18);
  background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 100%);
}
.bts-tile.s-3 { grid-column: span 3; }
.bts-tile.s-4 { grid-column: span 4; }
.bts-tile.s-5 { grid-column: span 5; }
.bts-tile.s-6 { grid-column: span 6; }
.bts-tile.s-7 { grid-column: span 7; }
.bts-tile.s-8 { grid-column: span 8; }
.bts-tile.s-9 { grid-column: span 9; }
@media (max-width: 820px) {
  .bts-tile { grid-column: span 6 !important; }
  .bts-header { flex-direction: column; align-items: start; }
}

/* ---------- COLOPHON with video background — site map, contact, etc. overlaid on a BTS clip ---------- */
.colophon.has-video {
  position: relative;
  background: var(--ink);
  color: #FFFFFF;
  border-top: 0;
  overflow: hidden;
  min-height: 78vh;
  padding-top: clamp(4rem, 12vh, 9rem);
  padding-bottom: clamp(2rem, 4vh, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.colophon.has-video > video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: contrast(1.04) saturate(0.95);
}
.colophon.has-video::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.85) 100%);
  z-index: 1;
  pointer-events: none;
}
.colophon.has-video > *:not(video) { position: relative; z-index: 2; }

/* Re-tone the colophon contents for a video background */
.colophon.has-video .colophon-mega { color: #FFFFFF; }
.colophon.has-video .colophon-mega em { color: var(--accent); }
.colophon.has-video .colophon-grid {
  border-bottom-color: rgba(255,255,255,0.15);
}
.colophon.has-video .colophon-grid h6 { color: rgba(255,255,255,0.55); }
.colophon.has-video .colophon-grid p { color: rgba(255,255,255,0.85); }
.colophon.has-video .colophon-grid p em { color: #FFFFFF; }
.colophon.has-video .colophon-grid li a { color: #FFFFFF; opacity: 0.85; }
.colophon.has-video .colophon-grid li a:hover { color: var(--accent); opacity: 1; }
.colophon.has-video .colophon-bottom {
  color: rgba(255,255,255,0.55);
  border-top-color: rgba(255,255,255,0.15);
}
.colophon.has-video .colophon-bottom em { color: #FFFFFF; font-style: italic; }
.colophon.has-video .colophon-bottom a { color: rgba(255,255,255,0.55); }
.colophon.has-video .colophon-bottom a:hover { color: #FFFFFF; }

/* ---------- Footer "Join the crew" link — sits below the contact emails ---------- */
.footer-join {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
}
.footer-join a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink); opacity: 0.85;
  transition: opacity var(--dur-fast), color var(--dur-fast), gap var(--dur-fast);
}
.footer-join a:hover { opacity: 1; color: var(--accent); gap: 12px; }
.footer-join .arrow { font-size: 14px; line-height: 1; }
/* On the dark video footer */
.colophon.has-video .footer-join {
  border-top-color: rgba(255,255,255,0.18);
}
.colophon.has-video .footer-join a { color: #FFFFFF; opacity: 0.9; }
.colophon.has-video .footer-join a:hover { color: var(--accent); opacity: 1; }

/* Sound toggle pinned top-right of the video footer */
.colophon.has-video .sound-fft {
  position: absolute;
  top: clamp(24px, 4vh, 40px);
  right: clamp(24px, 4vw, 40px);
  z-index: 4;
  pointer-events: all;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  background: rgba(10,10,10,0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 10px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase;
  color: #FFFFFF;
  transition: border-color 0.3s, background 0.3s;
  white-space: nowrap;
}
.colophon.has-video .sound-fft:hover { border-color: #FFFFFF; background: rgba(10,10,10,0.65); }
.colophon.has-video .sound-fft .pip {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.colophon.has-video .sound-fft.muted .pip { background: rgba(255,255,255,0.45); }

@media (max-width: 720px) {
  .colophon.has-video { min-height: 70vh; }
  .colophon.has-video .sound-fft { top: 14px; right: 14px; padding: 10px 14px; font-size: 9px; }
}

/* ---------- BTS PAGE ---------- */
.bts-top {
  padding: calc(var(--header-h) + clamp(3rem, 8vh, 6rem)) var(--pad-x) clamp(2rem, 5vh, 4rem);
}
.bts-top .label {
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--meta);
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 28px;
}
.bts-top .label::before { content: ""; width: 24px; height: 1px; background: var(--accent); }
.bts-top h1 {
  font-weight: 900; font-style: italic;
  font-size: var(--fs-d-xl);
  line-height: 0.9;
  letter-spacing: var(--tracking-tighter);
  max-width: 14ch;
}
.bts-top h1 em { font-style: italic; color: var(--accent); }

.bts-feature {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  background: var(--ink);
  overflow: hidden;
}
.bts-feature video { width: 100%; height: 100%; object-fit: cover; }
.bts-feature .caption {
  position: absolute;
  bottom: clamp(20px, 4vh, 36px);
  left: clamp(20px, 4vw, 40px);
  z-index: 3;
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.bts-feature .caption em { font-style: italic; color: #FFFFFF; }

.bts-gallery {
  padding: clamp(3rem, 6vh, 5rem) var(--pad-x) var(--section-y);
}
.bts-gallery .label {
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--meta);
  margin-bottom: clamp(2rem, 5vh, 3rem);
  display: inline-flex; align-items: center; gap: 12px;
}
.bts-gallery .label::before { content: ""; width: 24px; height: 1px; background: var(--accent); }
/* Random justified gallery — rows of varying counts, natural aspect ratios */
.bts-gallery .grid {
  display: flex !important;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 18px);
  column-count: auto !important;
  grid-template-columns: none !important;
}
.bts-gallery .row {
  display: flex;
  flex-direction: row;
  gap: clamp(10px, 1.2vw, 18px);
  width: 100%;
}
.bts-gallery .tile {
  flex-grow: var(--ar, 1.5);
  flex-shrink: 1;
  flex-basis: 0;
  min-width: 0;
  position: relative;
  overflow: hidden;
  background: var(--bg-soft);
  cursor: zoom-in;
  aspect-ratio: auto !important;
  width: auto !important;
  display: block;
  margin: 0 !important;
  break-inside: auto;
}
.bts-gallery .tile img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: unset !important;
  aspect-ratio: auto !important;
  filter: grayscale(0.45) contrast(1.04) brightness(0.96);
  transition: filter 1.4s var(--ease-cinema), transform 1.6s var(--ease-cinema);
}
.bts-gallery .tile:hover img { filter: grayscale(0) contrast(1) brightness(1); }
.bts-gallery .tile .placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-style: italic;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  letter-spacing: var(--tracking-tighter);
  color: rgba(255,255,255,0.18);
  background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 100%);
  min-height: 200px;
}
@media (max-width: 720px) {
  .bts-gallery .row { flex-direction: column; }
  .bts-gallery .tile { flex-grow: 1; }
}

/* ---------- BTS LIGHTBOX — click any tile → full-screen slideshow ---------- */
.bts-lightbox {
  position: fixed; inset: 0;
  z-index: 12000;
  background: rgba(0,0,0,0.96);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s var(--ease-cinema);
}
.bts-lightbox.is-open { opacity: 1; pointer-events: auto; }
.bts-lightbox .lb-stage {
  position: relative;
  width: 92vw; height: 88vh;
  display: flex; align-items: center; justify-content: center;
}
.bts-lightbox .lb-img {
  max-width: 92vw; max-height: 88vh;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.4s var(--ease-cinema), transform 0.4s var(--ease-cinema);
  filter: none;
}
.bts-lightbox.is-loaded .lb-img { opacity: 1; transform: scale(1); }
.lb-btn {
  position: absolute;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.85);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 12001;
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
  font-weight: 300;
  letter-spacing: 0;
  user-select: none;
}
.lb-btn:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,0.04); }
.lb-close { top: 24px; right: 24px; width: 44px; height: 44px; font-size: 18px; }
.lb-prev, .lb-next {
  top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; font-size: 30px;
  line-height: 1; padding-bottom: 3px;
}
.lb-prev { left: 24px; }
.lb-next { right: 24px; }
.lb-counter {
  position: absolute;
  bottom: 24px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,0.55);
  font-size: 11px; letter-spacing: var(--tracking-meta); text-transform: uppercase;
  font-weight: 500;
}
.lb-counter em { color: #fff; font-style: italic; font-weight: 500; }
@media (max-width: 640px) {
  .lb-close { top: 14px; right: 14px; }
  .lb-prev { left: 10px; }
  .lb-next { right: 10px; }
  .lb-prev, .lb-next { width: 44px; height: 44px; font-size: 24px; }
  .lb-counter { bottom: 14px; }
}

/* ---------- Films sequence (full-width edge-to-edge column) ---------- */
.films {
  padding: clamp(2rem, 5vh, 4rem) 0 var(--section-y);
}
.film-row {
  display: block;
  margin-bottom: clamp(3rem, 8vh, 6rem);
}
.film-row:last-child { margin-bottom: 0; }
.film {
  display: block;
  position: relative;
  text-decoration: none; color: inherit;
}
.film .frame {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  aspect-ratio: 16 / 9;
  width: 100%;
}
.film.cinema .frame { aspect-ratio: 21 / 9; }
.film.portrait .frame { aspect-ratio: 4 / 5; }
.film.square .frame { aspect-ratio: 1 / 1; }
.film .frame img,
.film .frame video {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.65) contrast(1.04) brightness(0.94);
  transition: filter 1.4s var(--ease-cinema), transform 1.6s var(--ease-cinema);
  will-change: filter;
  border: 0;
}
/* Vimeo iframes need full coverage and centered scaling */
.film .frame iframe {
  position: absolute;
  top: 50%; left: 50%;
  width: 177.78vh;          /* 16:9 — fills height */
  min-width: 100%;
  height: 56.25vw;          /* 16:9 — fills width */
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;     /* clicks fall through to the link */
}
/* Posters with portrait orientation: letterbox inside a 16:9 frame */
.film.letterbox .frame img {
  object-fit: contain;
  background: var(--ink);
}

/* ---------- Feature spread — portrait poster + side text (in-development tiles) ---------- */
.film-feature {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
}
.film-feature .feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  padding: clamp(3rem, 8vh, 6rem) var(--pad-x);
  max-width: 1600px;
  margin: 0 auto;
}
.film-feature .feature-text {
  display: grid; gap: 22px;
  max-width: 44ch;
}
.film-feature .feature-text .status {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 10px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase;
  color: var(--accent);
  width: max-content;
}
.film-feature .feature-text .status::before {
  content: ""; width: 28px; height: 1px; background: var(--accent);
}
.film-feature .feature-text h3 {
  font-weight: 900; font-style: italic;
  font-size: clamp(1.8rem, 3.84vw, 3.6rem);
  line-height: 0.95; letter-spacing: var(--tracking-tighter);
  color: var(--ink);
}
.film-feature .feature-text h3 em { font-style: italic; color: var(--accent); }
.film-feature .feature-text .desc {
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--ink-soft); line-height: 1.6;
  max-width: 52ch;
  font-weight: 400;
}
.film-feature .feature-text .meta {
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase;
  color: var(--meta);
  display: flex; gap: 14px;
}
.film-feature .feature-text .meta em { font-style: italic; color: var(--ink); }
.film-feature .feature-text .more {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 8px;
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase;
  color: var(--ink);
  width: max-content;
}
.film-feature .feature-text .more .arrow { color: var(--accent); transition: transform 0.3s var(--ease-cinema); }
.film-feature:hover .feature-text .more .arrow { transform: translateX(4px); }

.film-feature .feature-poster {
  position: relative;
  overflow: hidden;
  background: var(--bg-soft);
  max-width: 540px;
  width: 100%;
  margin: 0 auto;
  justify-self: center;
}
.film-feature .feature-poster img {
  width: 100%; height: auto;
  display: block;
  transition: transform 1.6s var(--ease-cinema);
  will-change: transform;
}
.film-feature:hover .feature-poster img {
  transform: scale(1.02);
}

/* Alternate: text on right, poster on left */
.film-feature.flip .feature-text { order: 2; justify-self: end; }
.film-feature.flip .feature-poster { order: 1; }

@media (max-width: 820px) {
  .film-feature .feature-grid { grid-template-columns: 1fr; gap: 2rem; padding: clamp(2rem, 6vh, 4rem) var(--pad-x); }
  .film-feature .feature-text, .film-feature.flip .feature-text { order: 2; justify-self: start; }
  .film-feature .feature-poster, .film-feature.flip .feature-poster { order: 1; max-width: 100%; }
}
.film .frame .status {
  position: absolute; top: 24px; left: 24px;
  z-index: 3;
  font-size: 10px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase;
  color: #FFFFFF;
  padding: 7px 12px;
  background: rgba(10,10,10,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.film .frame .status.dev { background: var(--accent); }
.film .caption {
  display: grid; grid-template-columns: 1fr auto;
  gap: 16px; align-items: baseline;
  padding: 22px var(--pad-x) 0;
}
.film .caption h3 {
  font-weight: 900; font-style: italic;
  font-size: clamp(1.4rem, 2.56vw, 2.4rem);
  line-height: 0.95; letter-spacing: var(--tracking-tighter);
  color: var(--ink);
}
.film .caption .meta {
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase;
  color: var(--meta);
  text-align: right; line-height: 1.4;
}
.film .caption .meta em {
  font-style: italic; font-weight: 500; color: var(--ink); display: block;
}
.film .desc {
  font-size: 15px; line-height: 1.55; color: var(--ink-soft);
  max-width: 64ch;
  padding: 0 var(--pad-x);
  margin-top: 12px;
  opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity 0.5s var(--ease-cinema), max-height 0.6s var(--ease-cinema), margin-top 0.5s var(--ease-cinema);
}
.film:hover .desc { opacity: 1; max-height: 200px; }

/* "Earlier work" toggle on home Films section — left-aligned with film content */
.film-show-earlier {
  display: flex;
  justify-content: flex-start;
  padding: clamp(1.5rem, 4vh, 2.5rem) var(--pad-x) clamp(0.5rem, 2vh, 1rem);
}
.film-toggle-earlier {
  background: transparent;
  border: 1px solid rgba(0,0,0,0.22);
  color: rgba(0,0,0,0.6);
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.film-toggle-earlier:hover {
  color: var(--ink);
  border-color: rgba(0,0,0,0.5);
  background: rgba(0,0,0,0.04);
}
body.dark .film-toggle-earlier {
  border-color: rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.6);
}
body.dark .film-toggle-earlier:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.04);
}
.film-toggle-earlier .arrow {
  font-size: 13px;
  transition: transform 0.28s var(--ease-cinema);
}
.film-toggle-earlier[aria-expanded="true"] .arrow { transform: rotate(180deg); }

/* Hidden earlier-work container — when revealed, just flow normally */
.film-earlier[hidden] { display: none; }
.film-earlier {
  animation: filmEarlierFade 0.5s var(--ease-cinema);
}
@keyframes filmEarlierFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Films section divider */
.films-section-label {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: clamp(2rem, 5vh, 3.5rem) var(--pad-x) clamp(1.5rem, 3vh, 2rem);
  border-top: 1px solid var(--rule);
  margin: clamp(2rem, 5vh, 4rem) 0 clamp(2rem, 5vh, 4rem);
}
.films-section-label:first-child { margin-top: 0; }
.films-section-label .label {
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--meta);
}
.films-section-label .label em { font-style: italic; color: var(--accent); }
.films-section-label .count {
  font-style: italic; font-weight: 500;
  font-size: clamp(1rem, 1.4vw, 1.25rem); letter-spacing: -0.01em;
  color: var(--ink);
}

/* ---------- About teaser block (Home → About) ---------- */
.about-teaser {
  padding: var(--section-y) var(--pad-x);
  background: var(--bg-soft);
  border-top: 1px solid var(--rule);
}
.about-teaser .grid {
  display: grid; grid-template-columns: 1fr 2fr; gap: clamp(2rem, 5vw, 5rem); align-items: end;
}
.about-teaser .label {
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--meta);
  display: flex; align-items: center; gap: 12px;
}
.about-teaser .label::before { content: ""; width: 24px; height: 1px; background: var(--accent); }
.about-teaser .text {
  font-weight: 400; font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 2.5rem);
  line-height: 1.2; letter-spacing: -0.018em;
}
.about-teaser .text strong { font-weight: 900; font-style: italic; }
.about-teaser .text em { font-style: italic; color: var(--accent); font-weight: 500; }
.about-teaser .more {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: 32px;
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase;
}
.about-teaser .more .arrow { color: var(--accent); }
.about-teaser .more:hover .arrow { transform: translateX(4px); transition: transform var(--dur-fast); }
@media (max-width: 820px) { .about-teaser .grid { grid-template-columns: 1fr; align-items: start; gap: 2rem; } }

/* ---------- FOOTER (colophon) ---------- */
.colophon {
  padding: clamp(4rem, 8vh, 6rem) var(--pad-x) clamp(2rem, 4vh, 3rem);
  border-top: 1px solid var(--rule);
  background: var(--bg);
}
.colophon-mega {
  font-weight: 900; font-style: italic;
  font-size: var(--fs-mega);
  line-height: 0.85;
  letter-spacing: var(--tracking-tighter);
  margin-bottom: clamp(3rem, 8vh, 6rem);
  white-space: nowrap;
  overflow: hidden;
  color: var(--ink);
}
.colophon-mega em { font-style: italic; color: var(--accent); }
.colophon-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(2rem, 5vh, 3.5rem);
  border-bottom: 1px solid var(--rule);
}
.colophon-grid h6 {
  font-size: 10px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--meta);
  margin-bottom: 14px;
}
.colophon-grid p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; max-width: 36ch; }
.colophon-grid p em { font-style: italic; }
.colophon-grid ul { list-style: none; display: grid; gap: 6px; }
.colophon-grid li a { font-size: 14px; color: var(--ink); opacity: 0.78; transition: opacity var(--dur-fast); }
.colophon-grid li a:hover { opacity: 1; color: var(--accent); }
.colophon-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-top: 22px;
  font-size: 10px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--meta);
}
.colophon-bottom em { font-style: italic; color: var(--ink); }
.colophon-bottom .links { display: flex; gap: 22px; }
.colophon-bottom a:hover { color: var(--ink); }
@media (max-width: 720px) {
  .colophon-grid { grid-template-columns: 1fr 1fr; }
  .colophon-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---------- PROJECT page ---------- */
.project-hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  overflow: hidden;
  position: relative;
}
.project-hero iframe,
.project-hero video,
.project-hero img {
  width: 100%; height: 100%; object-fit: cover; border: 0;
}
.project-hero.cinema { aspect-ratio: 21 / 9; }
.project-hero .vimeo-wrap {
  position: absolute; inset: 0;
}
.project-hero .vimeo-wrap iframe {
  position: absolute; top: 50%; left: 50%;
  width: 177.78vh; min-width: 100%;
  height: 56.25vw; min-height: 56.25vw;
  transform: translate(-50%, -50%);
}
.project-hero.no-video {
  background-image: var(--still);
  background-size: cover;
  background-position: center;
}

.project-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px; align-items: end;
  padding: clamp(2.5rem, 6vh, 4rem) var(--pad-x) clamp(1.5rem, 3vh, 2rem);
  border-bottom: 1px solid var(--rule);
}
.project-meta .label {
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--meta);
  margin-bottom: 18px;
  display: flex; gap: 14px; align-items: center;
}
.project-meta .label em { font-style: italic; color: var(--ink); }
.project-meta .label .dev { color: var(--accent); font-style: italic; }
.project-meta h1 {
  font-weight: 900; font-style: italic;
  font-size: clamp(2rem, 6.4vw, 6.4rem);
  line-height: 0.92;
  letter-spacing: var(--tracking-tighter);
}
.project-meta h1 em { font-style: italic; color: var(--accent); }
.project-meta .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.project-meta .cta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase;
  color: var(--ink);
  transition: background var(--dur-mid), color var(--dur-mid);
}
.project-meta .cta:hover { background: var(--ink); color: var(--bg); }
.project-meta .cta.solid { background: var(--ink); color: var(--bg); }
.project-meta .cta.solid:hover { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.project-meta .cta .pip { width: 7px; height: 7px; background: var(--accent); border-radius: 50%; }
.project-meta .cta.solid .pip { background: #FFFFFF; }

.project-body {
  display: grid;
  grid-template-columns: 1fr minmax(0, 60ch) 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding: clamp(3rem, 7vh, 6rem) var(--pad-x);
  border-bottom: 1px solid var(--rule);
}
.project-body .margin {
  font-size: 12px; line-height: 1.55;
  color: var(--meta);
  display: grid; gap: 18px; align-content: start;
}
.project-body .margin .field {
  border-top: 1px solid var(--rule); padding-top: 10px;
}
.project-body .margin .field h6 {
  font-size: 10px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase;
  color: var(--meta); margin-bottom: 6px;
}
.project-body .margin .field span { color: var(--ink); display: block; line-height: 1.4; font-size: 13px; }
.project-body .margin .field span + span { margin-top: 4px; }
.project-body .margin .field em { font-style: italic; color: var(--ink); }
.project-body .margin .field a { color: var(--ink); border-bottom: 1px solid var(--rule-strong); transition: color var(--dur-fast), border-color var(--dur-fast); }
.project-body .margin .field a:hover { color: var(--accent); border-color: var(--accent); }

.project-body .essay {
  font-size: clamp(1.25rem, 1.9vw, 1.65rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-weight: 400;
}
.project-body .essay p + p { margin-top: 1.1em; }
.project-body .essay p.lede {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 500; font-style: italic;
  line-height: 1.3;
  margin-bottom: 1.3em;
}
.project-body .essay em { font-style: italic; color: var(--accent); }

@media (max-width: 980px) {
  .project-body { grid-template-columns: 1fr; }
}

/* ---------- PROJECT — full Credits, Cast, Awards (Olvidadizo & released films) ---------- */
.project-credits,
.project-cast,
.project-awards {
  padding: clamp(2.5rem, 5vh, 4rem) var(--pad-x);
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.project-credits .label,
.project-cast .label,
.project-awards .label {
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase;
  color: var(--meta);
}
.credits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: clamp(1.25rem, 2.4vw, 2rem) clamp(1.5rem, 3vw, 2.5rem);
}
.cred-group { display: flex; flex-direction: column; gap: 4px; }
.cred-group h6 {
  font-size: 10px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase;
  color: var(--meta);
}
.cred-group span {
  font-size: 14px; font-weight: 400; line-height: 1.45;
  color: var(--ink);
}
.cred-group span em { color: var(--ink); }

.cast-list {
  display: flex; flex-wrap: wrap;
  column-gap: clamp(1.5rem, 3vw, 2.5rem);
  row-gap: 10px;
}
.cast-list span {
  font-weight: 500;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  letter-spacing: -0.005em;
  color: var(--ink);
}

.awards-list { display: grid; gap: clamp(1.5rem, 3vh, 2.25rem); }
.award-fest h3 {
  font-weight: 500;
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  letter-spacing: -0.005em;
  margin-bottom: 8px;
  color: var(--ink);
}
.award-fest h3 em {
  color: var(--meta); font-weight: 400; font-size: 0.85em;
}
.award-fest ul {
  list-style: none; display: grid; gap: 4px;
}
.award-fest li {
  font-size: 13px; line-height: 1.5;
  color: var(--ink-soft);
  padding-left: 14px; position: relative;
}
.award-fest li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 6px; height: 1px; background: var(--accent);
}
@media (max-width: 820px) {
  .project-credits,
  .project-cast,
  .project-awards { grid-template-columns: 1fr; gap: 1.5rem; }
}

.project-related {
  padding: clamp(3rem, 6vh, 5rem) var(--pad-x);
  display: grid; grid-template-columns: 1fr 2fr; gap: clamp(2rem, 5vw, 5rem);
}
.project-related .label {
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--meta);
}
.project-related .list { display: grid; gap: 0; }
.project-related .list a {
  display: grid; grid-template-columns: 60px 1fr auto auto;
  gap: clamp(1rem, 3vw, 3rem); align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--rule);
  transition: padding 0.5s var(--ease-cinema), color 0.4s;
}
.project-related .list a:first-child { border-top: 1px solid var(--rule); }
.project-related .list a:hover { padding-left: 12px; color: var(--accent); }
.project-related .list a .num { font-size: 11px; letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--meta); }
.project-related .list a .title { font-weight: 900; font-style: italic; font-size: clamp(1rem, 1.6vw, 1.48rem); line-height: 1; letter-spacing: var(--tracking-tighter); }
.project-related .list a .meta { font-size: 11px; letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--meta); }
@media (max-width: 720px) {
  .project-related { grid-template-columns: 1fr; }
  .project-related .list a { grid-template-columns: 40px 1fr; gap: 16px; }
  .project-related .list a .meta { grid-column: 2; }
}

/* ---------- ABOUT page ---------- */
.about-top {
  padding: calc(var(--header-h) + clamp(3rem, 8vh, 6rem)) var(--pad-x) clamp(2rem, 5vh, 4rem);
}
.about-top .label {
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--meta);
  margin-bottom: 28px;
  display: inline-flex; align-items: center; gap: 12px;
}
.about-top .label::before { content: ""; width: 24px; height: 1px; background: var(--accent); }
.about-top h1 {
  font-weight: 900; font-style: italic;
  font-size: var(--fs-d-xl);
  line-height: 0.9;
  letter-spacing: var(--tracking-tighter);
  max-width: 16ch;
}
.about-top h1 em { font-style: italic; color: var(--accent); }
.about-top h1 .roman { font-style: normal; font-weight: 700; }

.manifesto {
  display: grid; grid-template-columns: 1fr 2fr;
  gap: clamp(2rem, 6vw, 6rem);
  padding: clamp(3rem, 6vh, 5rem) var(--pad-x);
  border-top: 1px solid var(--rule);
}
.manifesto .col-meta {
  position: sticky; top: calc(var(--header-h) + 24px); align-self: start;
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--meta);
}
.manifesto .col-meta .roman {
  font-style: italic; font-weight: 500;
  text-transform: none; font-size: clamp(1.6rem, 3.2vw, 2.4rem); letter-spacing: -0.02em;
  color: var(--ink); margin-top: 8px; line-height: 1;
}
.manifesto .text {
  font-weight: 400;
  font-size: clamp(1rem, 1.45vw, 1.35rem);
  line-height: 1.55;
  letter-spacing: -0.005em;
  max-width: 60ch;
}
.manifesto .text p { margin-bottom: 1em; }
.manifesto .text p:last-child { margin-bottom: 0; }

/* ---------- GLOBAL JUSTIFICATION — body copy across the site ---------- */
.manifesto .text,
.manifesto .text p,
.member .bio,
.about-teaser .text,
.intro .stack p,
.essay p,
.legal-content p,
.contact-block p,
.colophon-grid p,
.film .desc,
.film-feature .feature-text .desc,
.bts-top p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: pretty;
}

/* Scroll-driven word brightening — words start dim, brighten as the read line passes */
.rt-word {
  display: inline-block;
  opacity: 0.22;
  color: inherit;
  transition: opacity 0.45s var(--ease-cinema);
  will-change: opacity;
}
.rt-word em, .rt-word strong { color: inherit; }
.manifesto .text p + p { margin-top: 1em; }
.manifesto .text em { font-style: italic; color: var(--accent); }
.manifesto .text strong { font-weight: 900; font-style: italic; }
@media (max-width: 820px) {
  .manifesto { grid-template-columns: 1fr; }
  .manifesto .col-meta { position: static; }
}

.team {
  padding: clamp(3rem, 6vh, 5rem) var(--pad-x);
  border-top: 1px solid var(--rule);
}
.team .label {
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--meta);
  margin-bottom: 28px;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto auto auto; /* portrait | name | role | bio | links */
  column-gap: clamp(2rem, 4vw, 3rem);
  row-gap: 18px;
  align-items: start;
}
.member {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
}
.member .portrait {
  aspect-ratio: 1 / 1; background: var(--bg-soft); overflow: hidden;
  position: relative;
}
/* Initials fallback shown until image loads (or if it fails) */
.member .portrait::before {
  content: attr(data-initials);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 100%);
  color: var(--meta-soft);
  font-weight: 900; font-style: italic;
  font-size: clamp(2.4rem, 4.8vw, 4rem);
  letter-spacing: var(--tracking-tighter);
  z-index: 0;
}
.member .portrait img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.95) contrast(1.04) brightness(0.96);
  transition: filter 1.4s var(--ease-cinema);
}
.member:hover .portrait img { filter: grayscale(0) contrast(1) brightness(1); }
.member .name {
  font-weight: 900; font-style: italic;
  font-size: clamp(1.12rem, 1.92vw, 1.6rem);
  letter-spacing: var(--tracking-tighter);
  line-height: 1;
}
.member .role {
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--meta);
}
.member .bio {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  width: 100%;
  max-width: none;
}
.member .links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.member .links a {
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase;
  color: var(--ink); opacity: 0.7;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: opacity var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.member .links a:hover { opacity: 1; color: var(--accent); border-color: var(--accent); }
@media (max-width: 820px) { .team-grid { grid-template-columns: 1fr; } }

/* ---------- CONTACT page ---------- */
.contact-page {
  padding: calc(var(--header-h) + clamp(3rem, 8vh, 6rem)) var(--pad-x) clamp(3rem, 6vh, 5rem);
  min-height: 90vh;
  display: grid; grid-template-rows: auto 1fr auto; gap: clamp(2rem, 5vh, 4rem);
}
.contact-page .label {
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--meta);
  display: inline-flex; align-items: center; gap: 12px;
}
.contact-page .label::before { content: ""; width: 24px; height: 1px; background: var(--accent); }
.contact-page h1 {
  font-weight: 900; font-style: italic;
  font-size: var(--fs-d-xl);
  line-height: 0.88; letter-spacing: var(--tracking-tighter);
  max-width: 14ch;
  margin-top: 24px;
}
.contact-page h1 em { font-style: italic; color: var(--accent); }
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding-top: clamp(2rem, 5vh, 3rem);
  border-top: 1px solid var(--rule);
}
.contact-block h6 {
  font-size: 10px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--meta);
  margin-bottom: 16px;
}
.contact-block .big {
  font-weight: 900; font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  line-height: 1.05; letter-spacing: var(--tracking-tighter);
  display: inline-block;
  transition: color var(--dur-mid);
  word-break: break-word;
}
.contact-block .big em { font-style: italic; color: var(--accent); }
.contact-block .big:hover { color: var(--accent); }
.contact-block p { color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
.contact-block .meta-line { color: var(--meta); font-size: 13px; }
.contact-block ul { list-style: none; display: grid; gap: 8px; }
.contact-block ul a { font-size: 14px; opacity: 0.85; transition: opacity var(--dur-fast); }
.contact-block ul a:hover { opacity: 1; color: var(--accent); }
.contact-bottom {
  display: flex; justify-content: space-between; gap: 24px;
  padding-top: clamp(2rem, 5vh, 3rem);
  border-top: 1px solid var(--rule);
  font-size: 10px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--meta);
}
.contact-bottom em { font-style: italic; color: var(--ink); margin-left: 6px; }
@media (max-width: 820px) {
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---------- LEGAL ---------- */
.legal-page {
  padding: calc(var(--header-h) + clamp(3rem, 8vh, 6rem)) var(--pad-x) clamp(4rem, 10vh, 8rem);
  display: grid; grid-template-columns: 1fr 2fr; gap: clamp(2rem, 6vw, 6rem);
}
.legal-page .col-meta { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
.legal-page .col-meta .label {
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--meta);
}
.legal-page h1 {
  font-weight: 900; font-style: italic;
  font-size: clamp(1.6rem, 3.2vw, 2.8rem);
  line-height: 0.95; letter-spacing: var(--tracking-tighter);
  margin-top: 12px;
}
.legal-page h1 em { font-style: italic; color: var(--accent); }
.legal-page .updated { font-size: 11px; letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--meta); margin-top: 12px; }
.legal-content { display: grid; gap: 40px; max-width: 70ch; }
.legal-content section { border-top: 1px solid var(--rule); padding-top: 18px; }
.legal-content h2 {
  font-weight: 900; font-style: italic;
  font-size: clamp(1rem, 1.44vw, 1.2rem);
  letter-spacing: var(--tracking-tighter); margin-bottom: 12px;
}
.legal-content h2 em { font-style: italic; color: var(--accent); }
.legal-content p { color: var(--ink-soft); margin-bottom: 12px; line-height: 1.65; font-size: 15px; }
.legal-content ul { list-style: none; display: grid; gap: 6px; padding-left: 0; color: var(--ink-soft); font-size: 15px; }
.legal-content ul li::before { content: "—"; margin-right: 10px; color: var(--accent); }
.legal-content a { color: var(--accent); border-bottom: 1px solid var(--accent); }
@media (max-width: 820px) { .legal-page { grid-template-columns: 1fr; } .legal-page .col-meta { position: static; } }

/* ---------- Reveals — opacity + translate ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1.0s var(--ease-cinema), transform 1.0s var(--ease-cinema); }
[data-reveal].is-in { opacity: 1; transform: translateY(0); }

/* ---------- Split-text reveals — word-by-word, mask-up ---------- */
[data-split] { display: inline; }
[data-split] .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.08em 0.02em 0.16em;
  margin: -0.08em -0.02em -0.16em;
  /* trailing space rendered as margin so the inline-block layout flows naturally;
     padding+negative margin gives italic ascenders/descenders breathing room
     inside the overflow mask without affecting layout flow. */
}
[data-split] .word-inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1.1s var(--ease-cinema);
  will-change: transform;
}
[data-split].is-in .word-inner { transform: translateY(0); }

/* ---------- Scale-in reveal for film frames ---------- */
[data-frame-reveal] { transform: scale(0.965); transition: transform 1.6s var(--ease-cinema); will-change: transform; }
[data-frame-reveal].is-in { transform: scale(1); }

/* ---------- Section counter (pinned chapter marker) ---------- */
.chapter {
  position: fixed;
  bottom: clamp(20px, 3vh, 32px);
  right: clamp(20px, 3vw, 36px);
  z-index: 7000;
  display: flex; align-items: baseline; gap: 10px;
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase;
  color: var(--meta);
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s var(--ease-cinema);
}
.chapter.is-on { opacity: 1; }
.chapter .num {
  font-style: italic; font-weight: 900;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1; letter-spacing: var(--tracking-tighter);
  color: #FFFFFF;
  min-width: 2ch;
}
.chapter .label {
  display: flex; flex-direction: column; gap: 4px;
  color: rgba(255,255,255,0.65);
  white-space: nowrap;
}
.chapter .label .of { color: rgba(255,255,255,0.4); }
.chapter .label .name {
  color: #FFFFFF; font-style: italic; font-weight: 500;
  text-transform: none; letter-spacing: -0.01em; font-size: 13px;
}
@media (max-width: 720px) { .chapter { display: none; } }

/* ---------- Film grain overlay ---------- */
.grain {
  position: fixed; inset: -50%;
  pointer-events: none; z-index: 8500;
  opacity: 0.04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  animation: grain-shift 1.3s steps(6) infinite;
}
@keyframes grain-shift {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-3%,2%); }
  40%  { transform: translate(2%,-3%); }
  60%  { transform: translate(-2%,-1%); }
  80%  { transform: translate(3%,2%); }
  100% { transform: translate(0,0); }
}

/* ---------- Marquee divider ---------- */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: clamp(1.5rem, 3.5vh, 2.5rem) 0;
  font-weight: 900; font-style: italic;
  font-size: clamp(2.5rem, 7vw, 7rem);
  letter-spacing: var(--tracking-tighter);
  line-height: 1;
  white-space: nowrap;
  display: flex;
  user-select: none;
}
.marquee-track {
  display: inline-flex; gap: 0.5em; padding-right: 0.5em;
  animation: marquee 38s linear infinite;
  will-change: transform;
}
.marquee-track > span { display: inline-block; }
.marquee-track .sep { color: var(--accent); font-style: normal; font-weight: 900; }
.marquee em { font-weight: 400; font-style: italic; opacity: 0.45; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }   /* track is duplicated by JS */
}

/* ---------- Magnetic targets — JS adds transform on hover proximity ---------- */
[data-magnetic] { transition: transform 0.4s var(--ease-cinema); }

/* ---------- Hero scroll-out (fade + scale, driven by JS) ---------- */
.reel-content { will-change: transform, opacity; }
.reel-media   { will-change: transform; }

/* ---------- Preloader ---------- */
.preloader {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 13000;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--pad-x);
  pointer-events: all;
}
.preloader .pre-mark {
  font-weight: 900; font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing: var(--tracking-tighter); line-height: 1;
  color: var(--ink);
}
.preloader .pre-mark .red { color: var(--accent); }
.preloader .pre-counter {
  font-weight: 900; font-style: italic;
  font-size: clamp(2rem, 6vw, 5rem);
  letter-spacing: var(--tracking-tighter); line-height: 1;
  color: var(--ink);
}
.preloader.is-done { transform: translateY(-100%); transition: transform 1.0s var(--ease-cinema); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ============================================================
   WORK PAGE — brand & commercial portfolio with filter chips
   ============================================================ */
.work-top {
  padding: calc(var(--header-h) + clamp(3rem, 8vh, 6rem)) var(--pad-x) clamp(2rem, 5vh, 4rem);
  display: grid;
  gap: clamp(1rem, 2vh, 1.5rem);
  border-bottom: 1px solid var(--rule);
}
.work-top .label {
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--meta);
  display: inline-flex; align-items: center; gap: 12px;
}
.work-top .label::before { content: ""; width: 24px; height: 1px; background: var(--accent); }
.work-top h1 {
  font-weight: 900; font-style: italic;
  font-size: var(--fs-d-l);
  line-height: 1.08;
  letter-spacing: var(--tracking-tighter);
  max-width: 16ch;
  padding: 0.08em 0.04em 0.16em;
}
.work-top h1 em { font-style: italic; color: var(--accent); }
.work-intro {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 60ch;
  line-height: 1.55;
}

/* Section */
.ws {
  padding: clamp(2.5rem, 6vh, 5rem) var(--pad-x);
  border-bottom: 1px solid var(--rule);
}
.ws:last-of-type { border-bottom: none; }
.ws-label {
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--meta);
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: clamp(1.5rem, 3vh, 2.25rem);
}
.ws-label::before { content: ""; width: 24px; height: 1px; background: var(--accent); }

/* Filter chips */
.wf-stack {
  display: grid;
  gap: 14px;
  margin-bottom: clamp(1.75rem, 3.5vh, 2.5rem);
}
.wf-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.wf-label {
  font-size: 10.5px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase; color: var(--meta);
  min-width: 80px;
  flex-shrink: 0;
}
.wf-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: clamp(1.5rem, 3vh, 2.25rem);
}
.wf-row .wf-chips { margin-bottom: 0; }
@media (max-width: 640px) {
  .wf-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .wf-label { min-width: 0; }
}
.wf-chip {
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  padding: 8px 14px;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.wf-chip:hover { border-color: var(--ink); }
.wf-chip.is-active {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}

/* Bento-style tile grid — mixed sizes, dense packing */
.ws-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(110px, 13vw, 180px);
  grid-auto-flow: row dense;
  gap: clamp(10px, 1vw, 16px);
}

/* Size variants — columns × row span */
.wt--s    { grid-column: span 3; grid-row: span 2; }   /* small portrait-ish */
.wt--m    { grid-column: span 4; grid-row: span 2; }   /* medium 4:3 */
.wt--l    { grid-column: span 5; grid-row: span 3; }   /* large 4:3 */
.wt--xl   { grid-column: span 6; grid-row: span 3; }   /* extra-large 4:3 */
.wt--wide { grid-column: span 6; grid-row: span 2; }   /* wide 16:9 */
.wt--sq   { grid-column: span 4; grid-row: span 3; }   /* square-ish */
.wt--tall { grid-column: span 3; grid-row: span 3; }   /* portrait tall */

@media (max-width: 1100px) {
  .ws-grid { grid-template-columns: repeat(6, 1fr); }
  .wt--s    { grid-column: span 3; grid-row: span 2; }
  .wt--m    { grid-column: span 3; grid-row: span 2; }
  .wt--l    { grid-column: span 6; grid-row: span 3; }
  .wt--xl   { grid-column: span 6; grid-row: span 3; }
  .wt--wide { grid-column: span 6; grid-row: span 2; }
  .wt--sq   { grid-column: span 3; grid-row: span 3; }
  .wt--tall { grid-column: span 3; grid-row: span 3; }
}
@media (max-width: 580px) {
  .ws-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .wt { grid-column: 1 !important; grid-row: auto !important; }
  .wt .wt-img { aspect-ratio: 4/3; height: auto !important; }
}

/* Tile */
.wt {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: none;
  padding: 0;
  text-align: left;
  cursor: zoom-in;
  font: inherit;
  width: 100%;
  height: 100%;
  color: inherit;
  overflow: hidden;
}
.wt[hidden] { display: none; }
.wt-img {
  display: block;
  flex: 1 1 auto;
  background: var(--acc, var(--ink));
  position: relative;
  overflow: hidden;
  transition: transform 1.4s var(--ease-cinema);
  min-height: 0;
}
.wt-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}
.wt-img-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 0 1.5rem;
  color: rgba(255,255,255,0.88);
  font-weight: 500;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  letter-spacing: -0.005em;
  z-index: 1;
}
.wt:hover .wt-img { transform: scale(1.015); }
.wt-info {
  padding: 14px 0 0;
  display: flex; flex-direction: column; gap: 3px;
}
.wt-title {
  font-weight: 500;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.wt-sub {
  font-size: 13px;
  color: var(--meta);
  line-height: 1.4;
}
.wt-meta {
  font-size: 10.5px;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--meta);
  margin-top: 4px;
}
.ws-empty {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--meta);
  font-style: italic;
  padding: 2rem 0;
  text-align: center;
}

/* ===== WORK LIGHTBOX ===== */
.work-lightbox {
  position: fixed; inset: 0;
  z-index: 12000;
  background: #000;
  display: block;
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s var(--ease-cinema);
}
.work-lightbox.is-open { opacity: 1; pointer-events: auto; }
/* Stage is full viewport — media owns the screen, info panel is overlaid */
.wlb-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  max-height: none;
  display: block;
  padding: 0;
}
/* MEDIA viewer (wraps .wlb-img + carousel controls).
   Always full viewport — the video/image owns the screen. */
.wlb-media {
  position: absolute;
  inset: 0;
  display: block;
  background: #000;
  overflow: hidden;
}
.wlb-img {
  position: absolute;
  inset: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.wlb-img.is-video,
.wlb-img.is-image { background: #000; }

.wlb-img-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 0 2rem;
  color: rgba(255,255,255,0.88);
  font-weight: 500;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
}

/* Horizontal video — fill the full viewport, scaling the iframe to cover.
   Per-video aspect comes in via --aspect (set by work.js); default 16:9. */
.wlb-iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  --aspect: 1.7778;
  width:  max(100vw, calc(100vh * var(--aspect)));
  height: max(100vh, calc(100vw / var(--aspect)));
  border: 0;
  display: block;
}
/* Vertical video — preserves 9:16 aspect, centered, fills viewport HEIGHT */
.wlb-media[data-orientation="vertical"] .wlb-iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100vh;
  width: calc(100vh * 9 / 16);
  max-width: 100vw;
}
/* Images — contained, centered, full bleed */
.wlb-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}

/* Inner carousel arrows — fixed near edges so they overlay the full-screen
   video without being clipped. Inset 90px so they don't collide with the
   outer project-nav arrows. */
.wlb-mprev, .wlb-mnext {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 50%;
  color: #fff;
  font-size: 20px; line-height: 1;
  cursor: pointer;
  z-index: 12012;
  opacity: 0.85;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.wlb-mprev { left: 96px; }
.wlb-mnext { right: 96px; }
.wlb-mprev:hover, .wlb-mnext:hover {
  opacity: 1;
  background: rgba(0,0,0,0.85);
}

/* Mute toggle — fixed bottom-right */
.wlb-msound {
  position: fixed;
  bottom: clamp(1.25rem, 3vh, 2rem);
  right: clamp(1.25rem, 3vw, 2rem);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  z-index: 12012;
  transition: background 0.2s ease;
}
.wlb-msound svg { width: 16px; height: 16px; }
.wlb-msound:hover { background: rgba(0,0,0,0.85); }

/* Bottom-center media nav (dots + label) */
.wlb-mnav {
  position: fixed;
  bottom: clamp(1.25rem, 3vh, 2rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 9px 18px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  z-index: 12012;
  font-size: 11px;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  max-width: 70vw;
}
.wlb-mdots {
  display: flex; gap: 8px;
  align-items: center;
}
.wlb-mdot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.wlb-mdot:hover { background: rgba(255,255,255,0.45); }
.wlb-mdot.is-active {
  background: #fff;
  transform: scale(1.15);
}
.wlb-mlabel {
  margin: 0;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}
.wlb-mcur { color: #fff; font-weight: 500; }
.wlb-mname {
  color: rgba(255,255,255,0.85);
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  margin-left: 2px;
}
/* Info — slide-in overlay on the right.
   Default (horizontal video, mobile): hidden until 'CREDITS' toggled.
   Vertical desktop: permanently visible (space beside 9:16 video). */
.wlb-info {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 88vw);
  z-index: 12005;
  color: #fff;
  display: flex; flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  padding: 80px clamp(20px, 3vw, 32px) clamp(28px, 5vh, 48px);
  background: linear-gradient(to left, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.85) 60%, rgba(0,0,0,0) 100%);
  transform: translateX(100%);
  transition: transform 0.4s var(--ease-cinema);
  pointer-events: auto;
}
.work-lightbox.is-info-open .wlb-info {
  transform: translateX(0);
}

/* Vertical projects on DESKTOP — credits panel always visible, no toggle.
   The video frame shrinks left of the credits so it centers in the
   remaining canvas, and floating controls shift left so they don't end up
   stuck under the credits panel. */
@media (min-width: 821px) {
  .work-lightbox:has(.wlb-media[data-orientation="vertical"]) .wlb-info {
    transform: translateX(0);
  }
  .work-lightbox:has(.wlb-media[data-orientation="vertical"]) .wlb-info-toggle {
    display: none;
  }
  /* Media canvas excludes the right-side credits panel */
  .work-lightbox:has(.wlb-media[data-orientation="vertical"]) .wlb-media {
    right: min(420px, 35vw);
  }
  /* Right-side controls shift left by the credits-panel width */
  .work-lightbox:has(.wlb-media[data-orientation="vertical"]) .wlb-next {
    right: calc(min(420px, 35vw) + 24px);
  }
  .work-lightbox:has(.wlb-media[data-orientation="vertical"]) .wlb-mnext {
    right: calc(min(420px, 35vw) + 96px);
  }
  .work-lightbox:has(.wlb-media[data-orientation="vertical"]) .wlb-msound {
    right: calc(min(420px, 35vw) + clamp(1.25rem, 3vw, 2rem));
  }
  /* Bottom-center nav recenters under the visible media area */
  .work-lightbox:has(.wlb-media[data-orientation="vertical"]) .wlb-mnav {
    left: calc(50% - min(210px, 17.5vw));
  }
}

/* Info toggle — bottom-left "credits" pill */
.wlb-info-toggle {
  position: fixed;
  bottom: clamp(1.25rem, 3vh, 2rem);
  left: clamp(1.25rem, 3vw, 2rem);
  z-index: 12010;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  color: rgba(255,255,255,0.92);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.wlb-info-toggle:hover {
  background: rgba(0,0,0,0.8);
  border-color: rgba(255,255,255,0.35);
}
.wlb-eyebrow {
  font-size: 11px; letter-spacing: var(--tracking-meta); text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin: 0;
}
.wlb-eyebrow .cur { color: #fff; font-weight: 500; }
.wlb-title {
  font-weight: 900; font-style: italic;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.05;
  letter-spacing: var(--tracking-tighter);
  color: #fff;
  margin: 0;
}
.wlb-title em {
  font-style: italic;
  color: var(--accent);
  font-size: 0.65em;
  font-weight: 400;
  display: block;
  margin-top: 6px;
  letter-spacing: 0;
}
.wlb-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  margin: 0;
}
.wlb-credits {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 22px;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.wlb-credits dt {
  font-size: 10.5px;
  letter-spacing: var(--tracking-meta); text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
}
.wlb-credits dd {
  font-size: 13.5px;
  color: rgba(255,255,255,0.92);
  line-height: 1.45;
  margin: 0;
}
.wlb-link {
  margin: 16px 0 0;
}
.wlb-link a {
  display: inline-block;
  font-size: 11px; letter-spacing: var(--tracking-meta); text-transform: uppercase;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 3px;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.wlb-link a:hover { border-color: var(--accent); color: var(--accent); }

.wlb-close, .wlb-prev, .wlb-next {
  position: fixed;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.92);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 12011;
  font-weight: 300;
  user-select: none;
  border-radius: 50%;
}
.wlb-close { top: 24px; right: 24px; width: 44px; height: 44px; font-size: 18px; }
.wlb-prev, .wlb-next {
  top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; font-size: 30px; line-height: 1; padding-bottom: 3px;
}
.wlb-prev { left: 24px; }
.wlb-next { right: 24px; }
.wlb-close:hover, .wlb-prev:hover, .wlb-next:hover {
  border-color: #fff; color: #fff; background: rgba(0,0,0,0.85);
}
@media (max-width: 820px) {
  .wlb-close { top: 14px; right: 14px; }
  .wlb-prev, .wlb-next {
    top: auto; bottom: 14px; transform: none;
    width: 44px; height: 44px; font-size: 22px;
  }
  .wlb-prev { left: 14px; }
  .wlb-next { right: 14px; }
}

/* ============================================================
   WORK PAGE — full-bleed stage + magnifying vertical list
   ============================================================ */

/* Full-bleed FIXED background that stays put as the list scrolls over it.
   Layered (back to front):
     .wbg-media    accent-color fill
     .wbg-blur     blurred poster of the active media (when available)
     .wbg-stage    right-aligned frame holding the playing media
     .wbg-shade    gradient overlay for list legibility (sits ABOVE media — never blurs the video, only darkens the left edge for readability) */
.wbg-pane {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--ink);
}
.wbg-media {
  position: absolute; inset: 0;
  background: var(--ink);
  transition: background 0.55s var(--ease-cinema);
}
/* Blurred layer no longer used — keep CSS as no-op so removing the div doesn't
   break older work.html copies. */
.wbg-blur { display: none; }

/* Stage — FULL BLEED. Holds the active media (video or 16:9 cover image)
   stretched edge-to-edge across the viewport behind the project list. */
.wbg-stage {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  opacity: 0;
  transition: opacity 0.5s var(--ease-cinema);
  pointer-events: none;
  overflow: hidden;
}
.wbg-stage.is-active { opacity: 1; }

.wbg-frame {
  position: absolute;
  inset: 0;
  background-color: #000;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 0.4s ease;
}
/* When a poster bg-image is showing, let the accent color show through any
   loading edges — calmer than a flash of black. */
.wbg-frame.has-cover,
.wbg-frame.has-poster { background-color: transparent; }

/* "has-cover" = vertical-desktop poster-only mode → iframe hidden entirely */
.wbg-frame.has-cover .wbg-iframe { display: none; }

/* "has-poster" = transient state for horizontal: poster behind, iframe on top
   while it loads. Iframe stays visible — fades the poster out via removing
   .has-poster once the video paints. */

/* Vimeo iframe sized as a 16:9 element scaled to cover the viewport.
   The trick: at least as wide as 100vw AND at least as tall as 100vh,
   while preserving 16:9, centered — overflow is clipped by .wbg-stage. */
.wbg-iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Each iframe sets --aspect (W/H) to its video's true aspect ratio.
     Falls back to 16:9 (1.7778). The cover-fill trick uses max() so the
     iframe is always at least 100vw AND at least 100vh, with overflow
     clipped by .wbg-stage. */
  --aspect: 1.7778;
  width:  max(100vw, calc(100vh * var(--aspect)));
  height: max(100vh, calc(100vw / var(--aspect)));
  border: 0;
  display: block;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}
.wbg-iframe.is-visible {
  opacity: 1;
  visibility: visible;
}
/* Behance embed iframes are sized at their native 404x316 — let them
   cover-fill like videos, but keep them at a square-ish aspect so the
   project cover image inside fills cleanly. */
.wbg-iframe[data-provider="behance"] {
  --aspect: 1.278;  /* 404/316 = native Behance embed aspect */
}

/* Shade overlay — sits OVER media to keep list legible on the left */
.wbg-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right,
      rgba(0,0,0,0.82) 0%,
      rgba(0,0,0,0.55) 32%,
      rgba(0,0,0,0.2) 60%,
      rgba(0,0,0,0)   85%),
    radial-gradient(140% 90% at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.32) 100%);
  pointer-events: none;
}

/* Sound toggle — only visible when a video is active */
.wbg-sound {
  position: fixed;
  bottom: clamp(1.25rem, 3vh, 2rem);
  right: clamp(1.25rem, 3vw, 2rem);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 11px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  color: rgba(255,255,255,0.92);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, opacity 0.3s ease;
  opacity: 0;
}
.wbg-sound.is-visible { opacity: 1; }
.wbg-sound:hover {
  background: rgba(0,0,0,0.75);
  border-color: rgba(255,255,255,0.32);
}
.wbg-sound svg {
  width: 14px; height: 14px;
}
.wbg-sound-label {
  position: relative;
  top: -0.5px;
}

/* Stage is just the container — no width split. List sits over the bg. */
.work-stage {
  position: relative;
  z-index: 1;
  color: #fff;
  background: transparent;
  min-height: calc(100vh - var(--header-h));
  padding: clamp(2rem, 5vh, 4rem) clamp(1.5rem, 4vw, 4rem);
}

.wl-pane {
  max-width: 720px;
}

/* HEAD — eyebrow + category jump nav */
.wl-head {
  display: flex; align-items: baseline; gap: clamp(1rem, 3vw, 2rem);
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
}
.wl-eyebrow {
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin: 0;
  display: inline-flex; align-items: center; gap: 12px;
}
.wl-eyebrow::before {
  content: ""; width: 24px; height: 1px; background: var(--accent);
}
.wl-jumpnav {
  font-size: 11px; letter-spacing: var(--tracking-meta); text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}
.wnav-jump {
  color: rgba(255,255,255,0.65);
  transition: color var(--dur-fast);
  padding: 0 2px;
}
.wnav-jump:hover { color: var(--accent); }

/* LIST */
.wl-list {
  list-style: none; padding: 0; margin: 0;
}
.wl-section {
  margin-bottom: clamp(2.5rem, 5vh, 4rem);
}
.wl-cat {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: var(--tracking-meta); text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  margin: 0 0 clamp(1rem, 2vh, 1.5rem);
  padding-bottom: 0;
  border-bottom: none;
}
.wl-cat-label {
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.22);
  /* short underline — only as wide as the label text */
}
.wcat-ico {
  width: 14px; height: 14px;
  flex-shrink: 0;
  color: rgba(255,255,255,0.5);
}
.wl-sublist {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
}

/* Item — base + dock magnification on hover */
.wi {
  display: block;
}
.wi-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--sans);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.018em;
  line-height: 1.1;
  font-size: clamp(0.95rem, 1.15vw, 1.15rem);
  color: rgba(255,255,255,0.30);
  background: transparent;
  border: none;
  padding: 6px 0;
  cursor: pointer;
  text-align: left;
  width: auto;
  max-width: 100%;
  transform-origin: left center;
  transition:
    font-size 0.32s var(--ease-cinema),
    color 0.32s var(--ease-cinema),
    letter-spacing 0.32s var(--ease-cinema);
}
.wi-link:hover, .wi-link:focus-visible {
  color: #fff;
  outline: none;
}
.wi-bullet {
  color: var(--accent);
  font-weight: 700;
  font-style: normal;
  line-height: 0.5;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  flex-shrink: 0;
  display: inline-block;
  width: 0;
  margin-right: 0;
  overflow: visible;
  transform: translateX(-8px);
}
.wi.is-active .wi-bullet {
  opacity: 1;
  transform: translateX(0);
  width: 14px;
  margin-right: 4px;
}
.wi-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wi-ico {
  width: 0.9em; height: 0.9em;
  flex-shrink: 0;
  color: rgba(255,255,255,0.42);
  margin-left: 8px;
  transition: color 0.32s var(--ease-cinema);
}
.wi-link:hover .wi-ico, .wi.is-active .wi-ico {
  color: rgba(255,255,255,0.75);
}

/* Magnification — ONLY the active item scales up, others stay base size */
.wi.is-active .wi-link {
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  color: #fff;
  letter-spacing: -0.025em;
}

.wl-foot {
  margin: clamp(3rem, 5vh, 4.5rem) 0 0;
  font-size: 11px; letter-spacing: var(--tracking-meta); text-transform: uppercase;
  color: rgba(255,255,255,0.42);
}
.wl-foot a {
  color: rgba(255,255,255,0.6);
  transition: color var(--dur-fast);
}
.wl-foot a:hover { color: var(--accent); }

/* Toggle button for the hidden "Earlier work" section */
.wl-show-earlier { margin-top: clamp(2rem, 4vh, 3rem); }
.wl-toggle-earlier {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.6);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.wl-toggle-earlier:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.04);
}
.wl-toggle-earlier .arrow {
  font-size: 12px;
  transition: transform var(--dur-fast);
}
.wl-toggle-earlier[aria-expanded="true"] .arrow { transform: rotate(0); }

/* Mobile — no magnification, larger base size for tappability */
@media (max-width: 820px) {
  /* Hide bg pane by default; show it only when the active project has
     vertical media (phones are tall — vertical video fits perfectly). */
  .wbg-pane { display: none; }
  .wbg-pane:has(.wbg-stage[data-orientation="vertical"]) { display: block; }

  .wbg-sound { display: none !important; }
  .work-stage { background: transparent; }
  .wi-link {
    font-size: clamp(1.05rem, 4vw, 1.35rem) !important;
    color: rgba(255,255,255,0.72) !important;
    letter-spacing: -0.012em !important;
  }
  .wi.is-active .wi-link { color: #fff !important; }

  /* Vertical projects on mobile already get --aspect: 0.5625 set per iframe
     by work.js, so the generic cover-fill rule handles them correctly.
     No mobile-specific override needed here. */
  /* Darker scrim across the bottom 60% so the list stays readable
     against bright videos */
  .wbg-pane:has(.wbg-stage[data-orientation="vertical"]) .wbg-shade {
    background:
      linear-gradient(to bottom,
        rgba(0,0,0,0)   0%,
        rgba(0,0,0,0.15) 25%,
        rgba(0,0,0,0.55) 55%,
        rgba(0,0,0,0.85) 100%);
  }
}

/* Respect reduced-motion: kill stage fade (still load video, just no transitions) */
@media (prefers-reduced-motion: reduce) {
  .wbg-stage, .wbg-media { transition: none !important; }
}

/* Heavier left-edge gradient when video is full-bleed so the list never
   competes with bright frames — the .wbg-shade gradient is intentional. */
.wbg-stage.is-active ~ .wbg-shade {
  background:
    linear-gradient(to right,
      rgba(0,0,0,0.88) 0%,
      rgba(0,0,0,0.62) 30%,
      rgba(0,0,0,0.28) 55%,
      rgba(0,0,0,0.05) 80%,
      rgba(0,0,0,0)   100%),
    radial-gradient(140% 90% at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%);
}

/* Override masthead colors so they read against the dark stage backdrop */
body.work-page { background: var(--ink); }
body.work-page .masthead {
  background: transparent;
  color: #fff;
  border-bottom-color: transparent;
}

/* ============================================================
   COMMERCIAL bento on homepage
   ============================================================ */
.commercial-row { margin-bottom: 0; }

.commercial-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Uniform row height — every tile occupies exactly one row, so heights
     never compound or shrink as the grid flows downward. */
  grid-auto-rows: minmax(320px, 1fr);
  gap: clamp(8px, 1vw, 14px);
}
@media (max-width: 980px) {
  .commercial-bento {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(260px, 1fr);
  }
}
@media (max-width: 540px) {
  .commercial-bento {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(240px, 1fr);
  }
}

.ctile {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: var(--gradient, linear-gradient(135deg, #1a1a1f 0%, #050508 100%));
  isolation: isolate;
  min-height: 240px;
  transition: transform 0.5s var(--ease-cinema);
}

/* Column spans + one row-span exception for the tall vertical TOO YUMM tile.
   4-col × 5-row layout:
   Row 1: hero (3 cols) + tall (1 col, 2 rows ↓)            = 4
   Row 2: default + wide (2 cols)  + [tall continues]       = 4
   Row 3: wide (2 cols) + wide (2 cols)  [music + doc]      = 4
   Row 4: four single-col stills                             = 4
   Row 5: full-width CTA (4 cols)                            = 4 */
@media (min-width: 981px) {
  .ctile-hero { grid-column: span 3; }
  .ctile-tall { grid-column: span 1; grid-row: span 2; }
  .ctile-wide { grid-column: span 2; }
  .ctile-cta  { grid-column: span 2; }
  .ctile-cta-full { grid-column: span 4; }
}
@media (max-width: 980px) and (min-width: 541px) {
  .ctile-hero,
  .ctile-wide,
  .ctile-cta,
  .ctile-cta-full { grid-column: span 2; }
  .ctile-tall { grid-row: span 2; }
}

/* Media layer — video iframe fills tile with cover scaling */
.ctile-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
/* Cover-fill an iframe inside .ctile-media WITHOUT distorting the video.
   The video keeps its native aspect — if the tile is a different aspect,
   the video is centered and cropped, never stretched.
   Horizontal (default): video stays at 16:9, tile crops it to 2:1, 3:2,
   5:4, 4:3, 1:1 etc. Vertical: video stays at 9:16, tile crops to 4:5 or 1:1. */
.ctile-media iframe {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  /* Cover-fill = iframe is at least as wide AND as tall as the tile,
     preserving its own aspect ratio. Overflow is clipped by .ctile. */
  width:  max(100%, calc(100cqh * 16 / 9));
  height: max(100%, calc(100cqw * 9 / 16));
  border: 0;
  pointer-events: none;
  filter: brightness(0.78) saturate(1.05);
  transition: filter 0.6s var(--ease-cinema);
}
/* Vertical (9:16) — COVER-fill the tile. The iframe is at least as wide
   AND as tall as the tile while preserving 9:16. Slight side crop is
   accepted in exchange for no black bars. */
.ctile-vertical .ctile-media iframe {
  width:  max(100%, calc(100cqh * 9 / 16));
  height: max(100%, calc(100cqw * 16 / 9));
}
.ctile-vertical .ctile-media { background: #000; }
.ctile-media {
  container-type: size;  /* enable cqh/cqw units inside */
}
.ctile:hover .ctile-media iframe { filter: brightness(0.95) saturate(1.1); }

/* Info layer — sits over the media (or directly on the gradient) */
.ctile-info {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: clamp(18px, 2vw, 28px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.05) 0%,
    rgba(0,0,0,0)    35%,
    rgba(0,0,0,0.65) 100%
  );
  transition: background 0.4s ease;
}
.ctile:hover .ctile-info {
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.15) 0%,
    rgba(0,0,0,0.1)  40%,
    rgba(0,0,0,0.8)  100%
  );
}

.ctile-chip {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  padding: 5px 9px 4px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(0,0,0,0.25);
}

.ctile-title {
  margin: 0;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 2.1rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: #fff;
}
.ctile-title em { color: var(--accent); font-style: italic; }
.ctile-hero .ctile-title { font-size: clamp(2rem, 4vw, 3.4rem); }
.ctile-tall .ctile-title { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }

.ctile-meta {
  margin: 0;
  font-size: 11px;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
}
.ctile-meta span {
  color: rgba(255,255,255,0.35);
  margin: 0 4px;
}

/* CTA tile — same shape but no media, accent-dot reveal. Two variants:
   .ctile-cta = 2 cols, .ctile-cta-full = 4 cols (the wider footer CTA) */
.ctile-cta,
.ctile-cta-full {
  background: linear-gradient(160deg, #14141a 0%, #050508 100%);
}
.ctile-cta::before,
.ctile-cta-full::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 80% 80%, rgba(246,40,41,0.2) 0%, transparent 60%);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s var(--ease-cinema);
}
.ctile-cta:hover::before,
.ctile-cta-full:hover::before { opacity: 1; }
.ctile-cta .ctile-title,
.ctile-cta-full .ctile-title { color: #fff; }
.ctile-cta .ctile-title em,
.ctile-cta-full .ctile-title em { color: var(--accent); }
/* Full-width CTA — center the content so it doesn't sit lonely on the left */
.ctile-cta-full .ctile-info {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.ctile-cta-full .ctile-meta {
  max-width: 600px;
}
.ctile-cta-full .ctile-title { font-size: clamp(1.8rem, 3.5vw, 3rem); }
.ctile-arrow {
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.4s var(--ease-cinema);
}
.ctile-cta:hover .ctile-arrow { transform: translateX(8px); }

/* Hover micro-motion on all tiles */
.ctile:hover { transform: translateY(-3px); }

/* Clients section — eyebrow + scrolling logo strip on a flat white band */
.work-clients {
  position: relative;
  z-index: 2;
  margin-top: clamp(3rem, 8vh, 6rem);
  padding-top: clamp(1.5rem, 3vh, 2.5rem);
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,0.12);
}
.work-clients-eyebrow {
  margin: 0;
  padding: 0 clamp(1.5rem, 4vw, 4rem) clamp(1rem, 2vh, 1.5rem);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  display: inline-flex; align-items: center; gap: 12px;
}
.work-clients-eyebrow::before {
  content: ""; width: 24px; height: 1px; background: var(--accent);
}
.work-clients-eyebrow em { color: #fff; font-style: italic; font-weight: 500; }

/* Text marquee — brand names scrolling on dark band */
.work-clients-marquee {
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 0;
  padding: clamp(1.25rem, 2.5vh, 2rem) 0;
  background: transparent;
  color: rgba(255,255,255,0.9);
}
.work-names-track {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding-right: 0.5em;
  animation: marquee 60s linear infinite;
  will-change: transform;
}
.work-names-track em { font-weight: 400; font-style: italic; opacity: 0.55; }
body.work-page .masthead .nav a,
body.work-page .lang-toggle,
body.work-page .clocks { color: rgba(255,255,255,0.85); }
body.work-page .masthead .logo-dark { display: none !important; }
body.work-page .masthead .logo-light { display: block !important; }
/* Work page stays in one (dark) theme — hide the theme toggle */
body.work-page .theme-toggle { display: none !important; }