/* ============================================================
   TRANS-FICTION — Operatic Brutalism × Cinematic Noir
   Hand-authored, framework-free. Self-hosted fonts.
   ============================================================ */

/* ---------- Fonts (self-hosted, strict-CSP friendly) ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/cormorant-italic-400.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/cormorant-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/inter-700.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/jbmono-400.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/jbmono-700.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  --tf-bg:#070709; --tf-bg-elev-1:#0c0c11; --tf-bg-elev-2:#15151b; --tf-hairline:#24242c;
  --tf-fg:#f1f1f3; --tf-fg-muted:#c3c3c9; --tf-fg-dim:#90909a; --tf-fg-faint:#54545f;

  --tf-rose:#e33292; --tf-rose-hi:#ff5bae; --tf-rose-lo:#8a1f58; --tf-rose-ink:#fff;
  --tf-gold:#c9a84c; /* award tier labels only — echoes the physical certificates */
  --tf-rose-soft:rgba(227,50,146,.12); --tf-rose-glow:rgba(227,50,146,.45);

  --tf-navy:#0c1e32; --tf-navy-hi:#16365c; --tf-navy-lo:#050d17;
  --tf-navy-soft:rgba(12,30,50,.55);
  --tf-cyan:#7be0ff; --tf-cyan-soft:rgba(123,224,255,.18);

  --tf-grad-flesh:radial-gradient(ellipse at 30% 20%,rgba(227,50,146,.22) 0%,transparent 60%);
  --tf-grad-machine:linear-gradient(135deg,var(--tf-navy-lo) 0%,var(--tf-navy) 50%,#000 100%);
  --tf-grad-duel:linear-gradient(105deg,var(--tf-rose-lo) 0%,#000 45%,#000 55%,var(--tf-navy) 100%);

  --tf-font-display:"Cormorant Garamond","Playfair Display",Georgia,"Times New Roman",serif;
  --tf-font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --tf-font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,Consolas,monospace;

  --tf-fs-overline:clamp(.6875rem,.65rem + .15vw,.8125rem);
  --tf-fs-caption:clamp(.75rem,.71rem + .18vw,.875rem);
  --tf-fs-body:clamp(.95rem,.92rem + .18vw,1.0625rem);
  --tf-fs-lead:clamp(1.05rem,1rem + .3vw,1.2rem);
  --tf-fs-h5:clamp(1.25rem,1.15rem + .45vw,1.55rem);
  --tf-fs-h4:clamp(1.5rem,1.3rem + .9vw,2.1rem);
  --tf-fs-h3:clamp(1.85rem,1.55rem + 1.5vw,2.7rem);
  --tf-fs-h2:clamp(2.3rem,1.85rem + 2.6vw,3.6rem);
  --tf-fs-h1:clamp(2.6rem,2rem + 3.6vw,4.6rem);
  --tf-fs-hero:clamp(3rem,2.1rem + 6vw,7rem);

  --tf-lh-tight:1.05; --tf-lh-display:1.12; --tf-lh-body:1.6;
  --tf-tracking-wide:.18em; --tf-tracking-mid:.06em; --tf-tracking-tight:-.02em;

  --tf-sp-2:.5rem; --tf-sp-3:.75rem; --tf-sp-4:1rem; --tf-sp-5:1.5rem; --tf-sp-6:2rem;
  --tf-sp-7:3rem; --tf-sp-8:4rem; --tf-sp-9:6rem;
  --tf-sp-section:clamp(2.75rem,4vw + 1.25rem,5.5rem);
  --tf-sp-gutter:clamp(1rem,4vw,3rem);
  --tf-measure:68ch;

  --tf-r-2:4px; --tf-r-3:8px; --tf-r-4:14px; --tf-r-pill:999px;

  --tf-shadow-2:0 4px 12px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.7);
  --tf-shadow-3:0 12px 32px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.7);
  --tf-shadow-cinema:0 30px 80px -20px rgba(0,0,0,.9),0 8px 24px rgba(0,0,0,.6);
  --tf-glow-rose:0 0 0 1px rgba(227,50,146,.35),0 0 24px var(--tf-rose-glow),0 0 60px rgba(227,50,146,.25);
  --tf-glow-cyan:0 0 0 1px rgba(123,224,255,.35),0 0 18px rgba(123,224,255,.45);

  --tf-ease-cinema:cubic-bezier(.16,1,.3,1);
  --tf-ease-in-out:cubic-bezier(.65,0,.35,1);
  --tf-dur-fast:180ms; --tf-dur-base:280ms; --tf-dur-slow:520ms; --tf-dur-cinema:880ms;

  --tf-z-nav:50; --tf-z-overlay:80; --tf-z-modal:100;
  --tf-container:min(1280px,100% - 2 * var(--tf-sp-gutter));
  --tf-nav-h:72px;
}

@property --tf-angle { syntax:"<angle>"; inherits:false; initial-value:0deg; }

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--tf-nav-h) + 1rem); }
body {
  background:var(--tf-bg);
  background-image:radial-gradient(125% 80% at 50% -10%,rgba(120,38,88,.16) 0%,rgba(18,16,26,0) 46%),linear-gradient(180deg,#0b0b10 0%,#080809 60%,#070708 100%);
  background-attachment:fixed; color:var(--tf-fg);
  font-family:var(--tf-font-body); font-size:var(--tf-fs-body); line-height:var(--tf-lh-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; min-height:100dvh; display:flex; flex-direction:column;
}
main { flex:1 0 auto; }
img,svg,video { display:block; max-width:100%; height:auto; }
a { color:var(--tf-rose-hi); text-decoration:none; transition:color var(--tf-dur-fast); }
a:hover { color:var(--tf-rose); }
ul { list-style:none; }
:focus-visible { outline:2px solid var(--tf-rose-hi); outline-offset:3px; border-radius:2px; }
::selection { background:var(--tf-rose); color:#fff; }

/* ---------- Utilities ---------- */
.tf-container { width:var(--tf-container); margin-inline:auto; }
.tf-section { padding-block:var(--tf-sp-section); position:relative; }
.tf-overline {
  font-family:var(--tf-font-mono); font-size:var(--tf-fs-overline);
  letter-spacing:var(--tf-tracking-wide); text-transform:uppercase;
  color:var(--tf-cyan); display:inline-block; margin-bottom:var(--tf-sp-4);
}
.tf-overline::before { content:"// "; color:var(--tf-fg-faint); }
.tf-display { font-family:var(--tf-font-display); font-weight:600; line-height:var(--tf-lh-display); letter-spacing:var(--tf-tracking-tight); }
.tf-italic { font-style:italic; font-weight:400; }
.tf-lead { font-size:var(--tf-fs-lead); color:var(--tf-fg-muted); max-width:var(--tf-measure); }
.tf-muted { color:var(--tf-fg-muted); }
.tf-measure { max-width:var(--tf-measure); }
.tf-center { text-align:center; }
.tf-center p { margin-inline:auto; }
.tf-mono { font-family:var(--tf-font-mono); }
.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; }

h1,h2,h3,h4,h5 { font-family:var(--tf-font-display); font-weight:600; line-height:var(--tf-lh-display); letter-spacing:var(--tf-tracking-tight); }
h2 { font-size:var(--tf-fs-h2); }
h3 { font-size:var(--tf-fs-h3); }
h4 { font-size:var(--tf-fs-h4); }
p { max-width:var(--tf-measure); }

/* ---------- Skip link ---------- */
.tf-skip { position:absolute; left:-999px; top:0; z-index:var(--tf-z-modal); background:var(--tf-rose); color:#fff; padding:.6rem 1rem; border-radius:0 0 var(--tf-r-2) 0; }
.tf-skip:focus { left:0; color:#fff; }

/* ---------- Scroll progress (endowed progress: starts at 12%) ---------- */
.tf-progress { position:fixed; inset:0 auto auto 0; height:2px; width:100%; transform:scaleX(.12); transform-origin:0 50%; background:linear-gradient(90deg,var(--tf-rose),var(--tf-cyan)); z-index:var(--tf-z-nav); pointer-events:none; }
@supports (animation-timeline:scroll()) {
  .tf-progress { animation:tf-grow linear both; animation-timeline:scroll(root); }
  @keyframes tf-grow { from{transform:scaleX(.12);} to{transform:scaleX(1);} }
}

/* ---------- Nav ---------- */
.tf-nav {
  position:fixed; inset:0 0 auto 0; z-index:var(--tf-z-nav); height:var(--tf-nav-h);
  display:flex; align-items:center;
  background:rgba(8,8,8,.72); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--tf-hairline);
  transition:background var(--tf-dur-base);
}
.tf-nav__inner { width:var(--tf-container); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:var(--tf-sp-5); }
.tf-brand { font-family:var(--tf-font-display); font-weight:600; font-size:1.3rem; letter-spacing:.02em; color:#fff; white-space:nowrap; }
.tf-brand b { color:var(--tf-rose); font-weight:600; }
.tf-brand span { color:var(--tf-cyan); }
.tf-brand .tf-brand__sub { font-family:var(--tf-font-mono); font-size:.58em; font-weight:400; font-style:normal; letter-spacing:.18em; text-transform:uppercase; color:var(--tf-rose-hi); }
@media (max-width:600px){ .tf-brand { font-size:1.05rem; } .tf-brand .tf-brand__sub { font-size:.54em; letter-spacing:.12em; } }
.tf-nav__links { display:flex; align-items:center; gap:clamp(.5rem,1.2vw,1.4rem); }
.tf-nav__links a {
  color:var(--tf-fg-muted); font-size:.875rem; letter-spacing:.02em; font-weight:500;
  position:relative; padding:.4rem 0;
}
.tf-nav__links a:hover,.tf-nav__links a[aria-current="page"] { color:#fff; }
.tf-nav__links a::after {
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:100%;
  background:var(--tf-rose); transform:scaleX(0); transform-origin:0 50%;
  transition:transform var(--tf-dur-base) var(--tf-ease-cinema);
}
.tf-nav__links a:hover::after,.tf-nav__links a[aria-current="page"]::after { transform:scaleX(1); }
.tf-burger { display:none; background:none; border:1px solid var(--tf-hairline); color:#fff; width:44px; height:44px; border-radius:var(--tf-r-2); cursor:pointer; align-items:center; justify-content:center; }
.tf-burger svg { width:22px; height:22px; }

@media (max-width:920px) {
  .tf-burger { display:inline-flex; }
  .tf-nav__links {
    position:fixed; inset:var(--tf-nav-h) 0 auto 0; flex-direction:column; align-items:stretch;
    gap:0; background:var(--tf-bg-elev-2); border-bottom:1px solid var(--tf-hairline);
    padding:var(--tf-sp-3) var(--tf-sp-gutter) var(--tf-sp-5);
    transform:translateY(-120%); transition:transform var(--tf-dur-base) var(--tf-ease-cinema);
    max-height:calc(100dvh - var(--tf-nav-h)); overflow-y:auto;
  }
  .tf-nav__links[data-open="true"] { transform:translateY(0); }
  .tf-nav__links a { padding:.9rem .2rem; border-bottom:1px solid var(--tf-hairline); font-size:1rem; }
  .tf-nav__links a::after { display:none; }
}

/* ---------- Buttons ---------- */
.tf-btn {
  display:inline-flex; align-items:center; gap:.6rem; cursor:pointer;
  font-family:var(--tf-font-body); font-weight:600; font-size:.95rem; letter-spacing:.01em;
  padding:.85rem 1.6rem; border-radius:var(--tf-r-pill); border:1px solid transparent;
  transition:transform var(--tf-dur-base) var(--tf-ease-cinema),box-shadow var(--tf-dur-base),background var(--tf-dur-base),color var(--tf-dur-base);
}
.tf-btn--primary { background:var(--tf-rose); color:var(--tf-rose-ink); box-shadow:var(--tf-glow-rose); }
.tf-btn--primary:hover { background:var(--tf-rose-hi); color:#fff; transform:translateY(-2px); }
.tf-btn--ghost { background:transparent; color:#fff; border-color:var(--tf-fg-faint); }
.tf-btn--ghost:hover { border-color:var(--tf-cyan); color:var(--tf-cyan); box-shadow:var(--tf-glow-cyan); transform:translateY(-2px); }
.tf-btn svg { width:18px; height:18px; }
a:focus-visible,button:focus-visible { outline:2px solid var(--tf-cyan); outline-offset:3px; border-radius:3px; }

/* ---------- Hero ---------- */
.tf-hero { position:relative; min-height:100dvh; display:flex; align-items:center; overflow:hidden; padding-top:var(--tf-nav-h); }
.tf-hero__media { position:absolute; inset:0; z-index:0; }
.tf-hero__media img { width:100%; height:100%; object-fit:cover; opacity:.72; filter:contrast(1.05) saturate(.9); }
/* Dark scrim only (no static magenta tint) so the scene reads and the pink
   comes solely from the pulsing heartbeat — matching the mobile banner.
   Directional: darkest on the left/bottom where the title/tagline/meta sit. */
.tf-hero__media::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.45) 42%,rgba(0,0,0,0) 78%),linear-gradient(0deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,0) 34%),linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 22%); }
.tf-heartbeat { position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(58% 52% at 13% 44%, rgba(227,50,146,.60) 0%, rgba(227,50,146,.22) 32%, transparent 68%); mix-blend-mode:screen; animation:tf-breathe 5s var(--tf-ease-in-out) infinite; }
@keyframes tf-breathe { 0%{opacity:.10;} 16%{opacity:.62;} 100%{opacity:.10;} }
/* Extra bottom padding keeps content clear of the absolutely-positioned scroll cue. */
.tf-hero__inner { position:relative; z-index:1; width:var(--tf-container); margin-inline:auto; padding-block:var(--tf-sp-8) calc(var(--tf-sp-8) + 3.5rem); }
.tf-hero__title { font-family:var(--tf-font-display); font-weight:600; font-size:var(--tf-fs-hero); line-height:.92; letter-spacing:-.03em; margin-bottom:var(--tf-sp-5); }
.tf-hero__title .tf-w1 { color:var(--tf-rose); }
.tf-hero__title .tf-dash { color:var(--tf-cyan); }
.tf-hero__title .tf-w2 { color:#fff; }
.tf-hero__title .tf-w1,.tf-hero__title .tf-w2 { white-space:nowrap; }
.tf-hero__title .tf-letter { display:inline-block; opacity:0; transform:translateY(.4em) scaleY(1.4); }
.tf-anim .tf-hero__title .tf-letter { animation:tf-rise var(--tf-dur-cinema) var(--tf-ease-cinema) forwards; animation-delay:calc(var(--i) * 60ms); }
@keyframes tf-rise { to{opacity:1;transform:none;} }
.tf-hero__subtitle { font-family:var(--tf-font-mono); font-size:clamp(1.3rem,.7rem + 2.5vw,2.2rem); letter-spacing:.34em; text-transform:uppercase; color:var(--tf-rose-hi); margin:calc(-1 * var(--tf-sp-4)) 0 var(--tf-sp-5); }
.tf-footer__sub { font-family:var(--tf-font-mono); font-size:.8rem; letter-spacing:.28em; text-transform:uppercase; color:var(--tf-rose-hi); margin-top:.35rem; }
.tf-hero__tagline { font-family:var(--tf-font-display); font-style:italic; font-weight:400; font-size:var(--tf-fs-h4); color:var(--tf-fg); max-width:24ch; margin-bottom:var(--tf-sp-6); line-height:1.25; }
.tf-hero__cta { display:flex; flex-wrap:wrap; gap:var(--tf-sp-3); }
.tf-hero__meta { margin-top:var(--tf-sp-7); display:flex; flex-wrap:wrap; gap:var(--tf-sp-5); font-family:var(--tf-font-mono); font-size:var(--tf-fs-caption); color:var(--tf-fg-dim); letter-spacing:.04em; }
.tf-hero__meta b { color:var(--tf-cyan); font-weight:400; }
.tf-scroll-cue { position:absolute; left:50%; bottom:1.4rem; transform:translateX(-50%); z-index:1; color:var(--tf-fg-dim); font-family:var(--tf-font-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.tf-scroll-cue span { width:1px; height:38px; background:linear-gradient(var(--tf-rose),transparent); animation:tf-cue 2s var(--tf-ease-in-out) infinite; }
@keyframes tf-cue { 0%,100%{opacity:.3;transform:scaleY(.6);} 50%{opacity:1;transform:scaleY(1);} }

/* Mobile hero: show the FULL 16:9 still (jellyfish included) as a banner with
   the title/CTA stacked below it, instead of cropping the wide image on a tall
   phone screen. Placed after the base .tf-hero rules so it wins the cascade. */
@media (max-width:920px){
  .tf-hero { min-height:auto; display:block; }
  .tf-hero__media { position:relative; inset:auto; aspect-ratio:16/9; }
  .tf-hero__media img { opacity:.92; }
  .tf-hero__media::after { background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.12) 55%,rgba(0,0,0,.9) 100%); }
  /* Jellyfish breathing glow — localized to the brain, scoped to the banner. */
  .tf-hero__media::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(55% 46% at 12% 42%, rgba(227,50,146,.60) 0%, rgba(227,50,146,.22) 32%, transparent 66%); mix-blend-mode:screen; animation:tf-breathe 5s var(--tf-ease-in-out) infinite; }
  .tf-heartbeat { display:none; }
  .tf-hero__inner { padding-block:var(--tf-sp-6); }
  .tf-scroll-cue { display:none; }
  /* Client notes 3/4/5: fit title, vertical CTAs, bigger centered menu */
  .tf-hero__title { font-size:clamp(1.6rem,9.2vw,2.9rem); white-space:nowrap; }
  .tf-hero__subtitle { font-size:clamp(1.05rem,4.8vw,1.5rem); letter-spacing:.22em; }
  .tf-hero__cta { flex-direction:column; align-items:stretch; }
  .tf-hero__cta .tf-btn { width:100%; justify-content:center; }
  .tf-btn-row { flex-direction:column; align-items:stretch; }
  .tf-btn-row .tf-btn { width:100%; justify-content:center; }
  .tf-nav__links { align-items:center; }
  .tf-nav__links a { font-size:1.2rem; text-align:center; padding:1rem .2rem; }
}

/* ---------- Duel divider section ---------- */
.tf-duel { background:var(--tf-grad-duel); position:relative; overflow:hidden; }
.tf-duel::before { content:""; position:absolute; inset:0 0 0 55%; background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(123,224,255,.045) 2px 3px); pointer-events:none; }
.tf-duel::after { content:""; position:absolute; inset:0 55% 0 0; background:var(--tf-grad-flesh); mix-blend-mode:screen; pointer-events:none; }
.tf-duel > * { position:relative; z-index:1; }

/* ---------- Reveal on scroll ---------- */
.tf-reveal { opacity:0; transform:translateY(28px); transition:opacity var(--tf-dur-cinema) var(--tf-ease-cinema),transform var(--tf-dur-cinema) var(--tf-ease-cinema); will-change:opacity,transform; }
.tf-reveal.is-in { opacity:1; transform:none; }
.tf-reveal[data-delay="1"]{transition-delay:.08s;} .tf-reveal[data-delay="2"]{transition-delay:.16s;}
.tf-reveal[data-delay="3"]{transition-delay:.24s;} .tf-reveal[data-delay="4"]{transition-delay:.32s;}

/* ---------- Section heading block ---------- */
.tf-head { margin-bottom:var(--tf-sp-7); max-width:46rem; }
.tf-head h2 { margin-bottom:var(--tf-sp-4); }

/* ---------- Synopsis split (human vs machine) ---------- */
.tf-split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,4rem); align-items:start; }
@media (max-width:780px){ .tf-split{ grid-template-columns:1fr; } }
.tf-side { padding:var(--tf-sp-6); border-radius:var(--tf-r-4); border:1px solid var(--tf-hairline); background:var(--tf-bg-elev-1); }
.tf-side--human { border-top:3px solid var(--tf-rose); }
.tf-side--ai { border-top:3px solid var(--tf-cyan); background:var(--tf-grad-machine); }
.tf-side--ai .tf-side__label,.tf-side--ai p { font-family:var(--tf-font-mono); }
.tf-side__label { font-family:var(--tf-font-mono); font-size:var(--tf-fs-overline); text-transform:uppercase; letter-spacing:var(--tf-tracking-wide); margin-bottom:var(--tf-sp-4); }
.tf-side--human .tf-side__label { color:var(--tf-rose-hi); }
.tf-side--ai .tf-side__label { color:var(--tf-cyan); }

/* ---------- Feature grid ---------- */
.tf-grid { display:grid; gap:var(--tf-sp-5); grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.tf-card { background:var(--tf-bg-elev-1); border:1px solid var(--tf-hairline); border-radius:var(--tf-r-4); padding:var(--tf-sp-6); transition:transform var(--tf-dur-base) var(--tf-ease-cinema),border-color var(--tf-dur-base); }
.tf-card:hover { transform:translateY(-4px); border-color:var(--tf-rose); }
.tf-card h3,.tf-card h4 { font-size:var(--tf-fs-h5); margin-bottom:var(--tf-sp-3); }
.tf-card .num { font-family:var(--tf-font-mono); color:var(--tf-cyan); font-size:var(--tf-fs-caption); }

/* ---------- Cast grid + dossier card ---------- */
.tf-cast-grid { display:grid; gap:var(--tf-sp-5); grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); }
.tf-cast {
  --tf-angle:0deg; position:relative; border-radius:var(--tf-r-4); overflow:hidden; isolation:isolate;
  background:linear-gradient(var(--tf-bg-elev-1),var(--tf-bg-elev-1)) padding-box,
            conic-gradient(from var(--tf-angle),var(--tf-rose),var(--tf-cyan),var(--tf-rose)) border-box;
  border:1px solid transparent; scroll-margin-top:90px;
  transition:--tf-angle var(--tf-dur-cinema) var(--tf-ease-in-out),transform var(--tf-dur-base) var(--tf-ease-cinema),box-shadow var(--tf-dur-base);
}
.tf-cast:hover,.tf-cast:focus-within { --tf-angle:360deg; transform:translateY(-4px); box-shadow:var(--tf-shadow-3); }
.tf-cast:target { box-shadow:var(--tf-glow-rose); }
.tf-cast__media { aspect-ratio:3/4; background:var(--tf-bg-elev-2); position:relative; overflow:hidden; }
.tf-cast__media img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05) brightness(.85); transition:filter var(--tf-dur-slow),transform var(--tf-dur-cinema) var(--tf-ease-cinema); }
.tf-cast:hover .tf-cast__media img,.tf-cast:focus-within .tf-cast__media img { filter:grayscale(.1) contrast(1.05); transform:scale(1.05); }
.tf-cast__placeholder { position:absolute; inset:0; display:grid; place-items:center; background:var(--tf-grad-machine); }
.tf-cast__placeholder span { font-family:var(--tf-font-display); font-size:3rem; color:var(--tf-rose); opacity:.5; }
.tf-cast__body { padding:var(--tf-sp-5); }
.tf-cast__role { font-family:var(--tf-font-mono); font-size:var(--tf-fs-overline); text-transform:uppercase; letter-spacing:var(--tf-tracking-mid); color:var(--tf-cyan); margin-bottom:.4rem; }
.tf-cast__name { font-family:var(--tf-font-display); font-size:var(--tf-fs-h5); color:#fff; line-height:1.1; margin-bottom:.5rem; }
.tf-cast__as { font-style:italic; color:var(--tf-rose-hi); font-family:var(--tf-font-display); font-size:1.05rem; }
.tf-cast__bio { color:var(--tf-fg-muted); font-size:var(--tf-fs-caption); line-height:1.6; margin-top:var(--tf-sp-4); }
.tf-cast__share { margin-top:var(--tf-sp-4); display:inline-flex; align-items:center; gap:.4rem; background:none; border:1px solid var(--tf-hairline); color:var(--tf-fg-dim); font-family:var(--tf-font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; padding:.4rem .7rem; border-radius:var(--tf-r-pill); cursor:pointer; transition:color var(--tf-dur-fast),border-color var(--tf-dur-fast); }
.tf-cast__share:hover { color:var(--tf-cyan); border-color:var(--tf-cyan); }
.tf-cast__share svg { width:13px; height:13px; }
.tf-cast--memoriam .tf-cast__name::after { content:" ✦"; color:var(--tf-cyan); }

/* ---------- Stills / poster gallery (split-curtain) ---------- */
.tf-gallery { display:grid; gap:var(--tf-sp-4); grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr)); }
.tf-still { position:relative; overflow:hidden; border-radius:var(--tf-r-3); aspect-ratio:16/9; background:var(--tf-bg-elev-2); border:1px solid var(--tf-hairline); }
.tf-still--poster { aspect-ratio:2/3; }
.tf-still img { width:100%; height:100%; object-fit:cover; transition:transform var(--tf-dur-cinema) var(--tf-ease-cinema); }
.tf-still:hover img { transform:scale(1.04); }
.tf-gallery--masonry { display:block; columns:18rem; column-gap:var(--tf-sp-4); }
.tf-gallery--masonry .tf-still { break-inside:avoid; margin:0 0 var(--tf-sp-4); aspect-ratio:auto; height:auto; display:block; }
.tf-gallery--masonry .tf-still img { width:100%; height:auto; }
.tf-btn-row { display:flex; flex-wrap:wrap; gap:var(--tf-sp-3); align-items:center; }
.tf-gallery--even { grid-template-columns:1fr; }
@media (min-width:560px){ .tf-gallery--even { grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){ .tf-gallery--even { grid-template-columns:repeat(4,1fr); } }
.tf-gallery--center { grid-template-columns:repeat(auto-fit,minmax(220px,330px)); justify-content:center; }
.tf-gallery--row { display:flex; flex-wrap:wrap; gap:var(--tf-sp-4); }
.tf-gallery--row .tf-still { aspect-ratio:auto; height:auto; margin:0; flex:var(--ar,1.4) 1 calc(var(--ar,1.4) * 220px); }
.tf-gallery--row .tf-still img { width:100%; height:auto; display:block; }
.tf-still__empty { position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:var(--tf-fg-dim); font-family:var(--tf-font-mono); font-size:var(--tf-fs-caption); padding:1rem; z-index:1; }

/* ---------- Specs table ---------- */
.tf-specs { width:100%; border-collapse:collapse; max-width:640px; }
.tf-specs th,.tf-specs td { text-align:left; padding:1rem 0; border-bottom:1px solid var(--tf-hairline); vertical-align:top; }
.tf-specs th { font-family:var(--tf-font-mono); font-weight:400; font-size:var(--tf-fs-caption); text-transform:uppercase; letter-spacing:var(--tf-tracking-mid); color:var(--tf-cyan); width:42%; }
.tf-specs td { color:#fff; }

/* ---------- Contact ---------- */
.tf-contact-grid { display:grid; gap:var(--tf-sp-5); grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.tf-contact-card { background:var(--tf-bg-elev-1); border:1px solid var(--tf-hairline); border-radius:var(--tf-r-4); padding:var(--tf-sp-6); }
.tf-contact-card h3 { font-size:var(--tf-fs-h5); margin-bottom:var(--tf-sp-3); }
.tf-contact-card .tf-cast__role { margin-bottom:var(--tf-sp-4); }
.tf-contact-card a { display:block; padding:.25rem 0; word-break:break-word; }

/* ---------- Trailer / video frame ---------- */
.tf-video { position:relative; aspect-ratio:16/9; border-radius:var(--tf-r-4); overflow:hidden; border:1px solid var(--tf-hairline); background:var(--tf-bg-elev-2); box-shadow:var(--tf-shadow-cinema); }
.tf-video iframe,.tf-video video { position:absolute; inset:0; width:100%; height:100%; border:0; }
.tf-video__placeholder { position:absolute; inset:0; display:grid; place-items:center; text-align:center; gap:1rem; padding:2rem; }
.tf-video__placeholder::before { content:""; position:absolute; inset:0; background:var(--tf-grad-flesh); opacity:.4; }
.tf-play { width:84px; height:84px; border-radius:50%; background:var(--tf-rose); display:grid; place-items:center; box-shadow:var(--tf-glow-rose); position:relative; z-index:1; }
.tf-play svg { width:34px; height:34px; fill:#fff; margin-left:4px; }

/* ---------- ANCELOT feed ribbon ---------- */
.tf-ancelot { position:fixed; right:0; bottom:0; z-index:var(--tf-z-overlay); max-width:min(360px,70vw); padding:.5rem .9rem; background:rgba(5,13,23,.85); border-top:1px solid var(--tf-cyan-soft); border-left:1px solid var(--tf-cyan-soft); border-radius:var(--tf-r-2) 0 0 0; backdrop-filter:blur(8px); font-family:var(--tf-font-mono); font-size:.72rem; color:var(--tf-cyan); letter-spacing:.02em; pointer-events:none; transform:translateY(120%); transition:transform var(--tf-dur-slow) var(--tf-ease-cinema); }
.tf-ancelot.is-on { transform:translateY(0); }
.tf-ancelot::after { content:"▌"; animation:tf-blink 1s steps(2) infinite; }
@keyframes tf-blink { 50%{opacity:0;} }
@media (max-width:560px){ .tf-ancelot{ display:none; } }

/* ---------- Pull quote ---------- */
.tf-quote { font-family:var(--tf-font-display); font-style:italic; font-weight:400; font-size:var(--tf-fs-h3); line-height:1.2; color:#fff; max-width:20ch; margin-inline:auto; text-align:center; position:relative; }
.tf-quote::before { content:"“"; color:var(--tf-rose); font-size:1.4em; line-height:0; vertical-align:-.35em; margin-right:.05em; }
.tf-quote:not(:has(.tf-quote__cite))::after { content:"”"; color:var(--tf-rose); font-size:1.4em; line-height:0; vertical-align:-.35em; margin-left:.05em; }
.tf-quote__cite { display:block; margin-top:var(--tf-sp-5); font-family:var(--tf-font-mono); font-style:normal; font-size:var(--tf-fs-caption); letter-spacing:var(--tf-tracking-mid); text-transform:uppercase; color:var(--tf-cyan); }

/* ---------- Footer ---------- */
.tf-footer { border-top:1px solid var(--tf-hairline); background:var(--tf-bg-elev-1); padding-block:var(--tf-sp-8) var(--tf-sp-6); margin-top:var(--tf-sp-9); }
.tf-footer__grid { display:grid; gap:var(--tf-sp-6); grid-template-columns:1.4fr 1fr 1fr; }
@media (max-width:720px){ .tf-footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .tf-footer__grid{ grid-template-columns:1fr; } }
.tf-footer h4 { font-family:var(--tf-font-mono); font-weight:400; font-size:var(--tf-fs-overline); text-transform:uppercase; letter-spacing:var(--tf-tracking-wide); color:var(--tf-fg-dim); margin-bottom:var(--tf-sp-4); }
.tf-footer ul li { margin-bottom:.55rem; }
.tf-footer a { color:var(--tf-fg-muted); font-size:.9rem; }
.tf-footer a:hover { color:#fff; }
.tf-footer__brand { font-family:var(--tf-font-display); font-size:1.5rem; color:#fff; margin-bottom:var(--tf-sp-3); }
.tf-footer__brand b{color:var(--tf-rose);} .tf-footer__brand span{color:var(--tf-cyan);}
.tf-social { display:flex; gap:var(--tf-sp-3); margin-top:var(--tf-sp-4); }
.tf-social a { width:40px; height:40px; border:1px solid var(--tf-hairline); border-radius:50%; display:grid; place-items:center; color:var(--tf-fg-muted); transition:all var(--tf-dur-fast); }
.tf-social a:hover { color:#fff; border-color:var(--tf-rose); box-shadow:var(--tf-glow-rose); transform:translateY(-2px); }
.tf-social svg { width:18px; height:18px; }
.tf-footer__base { margin-top:var(--tf-sp-7); padding-top:var(--tf-sp-5); border-top:1px solid var(--tf-hairline); display:flex; flex-wrap:wrap; gap:var(--tf-sp-4); justify-content:space-between; color:var(--tf-fg-dim); font-family:var(--tf-font-mono); font-size:var(--tf-fs-overline); letter-spacing:.04em; }

/* ---------- Page hero (interior pages) ---------- */
.tf-page-hero { padding-top:calc(var(--tf-nav-h) + var(--tf-sp-6)); padding-bottom:var(--tf-sp-5); position:relative; isolation:isolate; }
.tf-page-hero::before { content:""; position:absolute; inset:0 0 auto 0; height:min(58vh,400px); background:radial-gradient(72% 100% at 16% 0%,rgba(227,50,146,.15) 0%,rgba(227,50,146,.04) 42%,transparent 72%); pointer-events:none; z-index:-1; }
.tf-page-hero h1 { font-size:var(--tf-fs-h1); line-height:1; margin-bottom:var(--tf-sp-4); }
.tf-page-hero .tf-lead { margin-top:var(--tf-sp-3); }
.tf-breadcrumb { font-family:var(--tf-font-mono); font-size:var(--tf-fs-overline); color:var(--tf-fg-dim); margin-bottom:var(--tf-sp-5); letter-spacing:.06em; }
.tf-breadcrumb a { color:var(--tf-fg-dim); } .tf-breadcrumb a:hover{ color:var(--tf-cyan); }

/* ---------- Toast (copy confirm) ---------- */
.tf-toast { position:fixed; left:50%; bottom:1.5rem; transform:translate(-50%,150%); z-index:var(--tf-z-modal); background:var(--tf-rose); color:#fff; font-family:var(--tf-font-mono); font-size:.8rem; padding:.7rem 1.2rem; border-radius:var(--tf-r-pill); box-shadow:var(--tf-glow-rose); opacity:0; visibility:hidden; transition:transform var(--tf-dur-base) var(--tf-ease-cinema),opacity var(--tf-dur-base),visibility var(--tf-dur-base); }
.tf-toast.is-on { transform:translate(-50%,0); opacity:1; visibility:visible; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .tf-reveal { opacity:1; transform:none; }
  .tf-hero__title .tf-letter { opacity:1; transform:none; }
  .tf-heartbeat,.tf-scroll-cue span { animation:none; }
}

/* ---------- Awards: laurels + certificates ---------- */
.tf-awards { padding-block:var(--tf-sp-7); }
.tf-awards .tf-display { margin-bottom:var(--tf-sp-6); }
.tf-awards__row { display:flex; align-items:center; justify-content:center; gap:clamp(1.4rem,5vw,4.5rem); flex-wrap:wrap; }
.tf-awards__stat { display:flex; flex-direction:column; align-items:center; gap:.3rem; }
.tf-awards__num { font-family:var(--tf-font-display); font-weight:600; font-size:clamp(3.2rem,6vw,5.4rem); line-height:1; color:var(--tf-fg); }
.tf-awards__cap { font-family:var(--tf-font-mono); font-weight:700; font-size:.82rem; letter-spacing:.36em; text-transform:uppercase; color:var(--tf-fg); }
.tf-awards__fest { font-family:var(--tf-font-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tf-fg-dim); text-align:center; line-height:1.7; }
.tf-awards__yr { font-family:var(--tf-font-mono); font-size:.66rem; letter-spacing:.3em; color:var(--tf-fg-dim); }

.tf-laurel { display:inline-flex; align-items:stretch; gap:.45rem; height:140px; color:var(--tf-fg-dim); transition:color var(--tf-dur-base) var(--tf-ease-cinema), transform var(--tf-dur-base) var(--tf-ease-cinema); }
.tf-laurel:hover { color:var(--tf-fg); transform:scale(1.03); }
.tf-laurel__branch { height:100%; width:auto; flex:none; }
.tf-laurel__branch--r { transform:scaleX(-1); }
.tf-laurel__text { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:.34rem; max-width:20ch; padding-inline:.15rem; text-align:center; }
.tf-laurel__tier { font-family:var(--tf-font-mono); font-weight:700; font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--tf-gold); }
.tf-laurel__cat { font-family:var(--tf-font-display); font-weight:600; font-size:1.3rem; line-height:1.12; color:var(--tf-fg); }
.tf-laurel__fest { font-family:var(--tf-font-mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:currentColor; line-height:1.5; }
.tf-laurel__year { font-family:var(--tf-font-mono); font-size:.68rem; letter-spacing:.3em; color:currentColor; }

/* Everything in the awards section shares one centered axis. */
.tf-head.tf-center { margin-inline:auto; }
.tf-award-tierhead { display:flex; align-items:center; gap:var(--tf-sp-5); max-width:52rem; margin:var(--tf-sp-8) auto var(--tf-sp-6); font-family:var(--tf-font-mono); font-size:var(--tf-fs-overline); font-weight:700; letter-spacing:var(--tf-tracking-wide); text-transform:uppercase; color:var(--tf-gold); white-space:nowrap; }
.tf-award-tierhead::before,.tf-award-tierhead::after { content:""; flex:1 1 0; height:1px; min-width:2rem; }
.tf-award-tierhead::before { background:linear-gradient(90deg,transparent,var(--tf-hairline) 40%,var(--tf-hairline)); }
.tf-award-tierhead::after { background:linear-gradient(90deg,var(--tf-hairline),var(--tf-hairline) 60%,transparent); }
.tf-awardgrid { display:flex; flex-wrap:wrap; gap:var(--tf-sp-5) var(--tf-sp-7); justify-content:center; }
.tf-awardgrid .tf-laurel { height:112px; }
.tf-awardgrid .tf-laurel__cat { font-size:1.14rem; }
.tf-awardgrid--winner .tf-laurel { height:132px; }
.tf-awardgrid--winner .tf-laurel__cat { font-size:1.28rem; }

/* Centered flex grid: caps at 4-up on desktop and incomplete rows self-center. */
.tf-certgrid { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--tf-sp-4); margin-top:var(--tf-sp-5); }
.tf-cert { display:block; flex:1 1 280px; max-width:300px; border-radius:var(--tf-r-2); overflow:hidden; border:1px solid var(--tf-hairline); background:var(--tf-bg-elev-1); transition:transform var(--tf-dur-base) var(--tf-ease-cinema), border-color var(--tf-dur-base); }
.tf-cert img { width:100%; height:auto; display:block; }
.tf-cert:hover { transform:translateY(-4px); border-color:var(--tf-gold); }

@media (max-width:920px){
  .tf-laurel { height:96px; }
  .tf-laurel__cat { font-size:1.02rem; }
  .tf-laurel__tier { font-size:.62rem; }
  .tf-awardgrid .tf-laurel { height:86px; }
  .tf-awardgrid .tf-laurel__cat { font-size:.98rem; }
  /* Long festival names must wrap, not overflow the viewport. */
  .tf-award-tierhead { white-space:normal; text-align:center; letter-spacing:.12em; gap:var(--tf-sp-4); }
}
@media (prefers-reduced-motion:reduce){
  .tf-laurel:hover,.tf-cert:hover { transform:none; }
}

/* Hero laurels: poster convention — the two wins above the title, small and quiet.
   Hidden on mobile; the Accolades strip right below the hero carries them there. */
.tf-hero__laurels { display:flex; align-items:center; gap:clamp(1.2rem,2.5vw,2.6rem); margin-bottom:var(--tf-sp-5); }
.tf-hero__laurels .tf-laurel { height:86px; color:#cfcfd6; text-shadow:0 1px 8px rgba(0,0,0,.6); }
.tf-hero__laurels .tf-laurel:hover { color:#fff; }
/* Official FDIFF wreath as third poster mark — festival artwork, tone-matched by opacity only. */
.tf-hero__oslaurel { height:92px; width:auto; opacity:.82; filter:drop-shadow(0 1px 8px rgba(0,0,0,.6)); transition:opacity var(--tf-dur-base) var(--tf-ease-cinema); }
.tf-hero__oslaurel:hover { opacity:1; }
.tf-hero__laurels .tf-laurel__text { gap:.22rem; max-width:15ch; }
.tf-hero__laurels .tf-laurel__tier { font-size:.58rem; letter-spacing:.26em; }
.tf-hero__laurels .tf-laurel__cat { font-size:.95rem; }
.tf-hero__laurels .tf-laurel__fest { font-size:.48rem; }
.tf-hero__laurels .tf-laurel__year { font-size:.54rem; }
@media (max-width:920px){
  .tf-hero__laurels { gap:1.1rem; margin-bottom:var(--tf-sp-4); flex-wrap:wrap; }
  .tf-hero__laurels .tf-laurel { height:60px; }
  .tf-hero__oslaurel { height:60px; }
  .tf-hero__laurels .tf-laurel__text { gap:.12rem; max-width:13ch; }
  .tf-hero__laurels .tf-laurel__tier { font-size:.5rem; letter-spacing:.2em; }
  .tf-hero__laurels .tf-laurel__cat { font-size:.74rem; }
  .tf-hero__laurels .tf-laurel__fest { font-size:.4rem; }
  .tf-hero__laurels .tf-laurel__year { font-size:.44rem; }
}

/* Official Selection (4th Dimension IFF): festival-issued laurel, used as-is.
   Tone-matched to the silver-grey system via opacity only — never restyled. */
.tf-os-band { display:flex; justify-content:center; margin:var(--tf-sp-6) 0 var(--tf-sp-7); }
.tf-os-band img { width:min(180px,60vw); height:auto; opacity:.85; }
.tf-awards__os { display:flex; flex-direction:column; align-items:center; gap:.34rem; margin-top:var(--tf-sp-6); font-family:var(--tf-font-mono); text-transform:uppercase; text-align:center; max-width:none; }
.tf-awards__os-label { font-weight:700; font-size:.72rem; letter-spacing:.3em; color:var(--tf-fg); }
.tf-awards__os-fest { font-size:.64rem; letter-spacing:.14em; color:var(--tf-fg-dim); line-height:1.7; }
@media (max-width:920px){
  .tf-os-band img { width:130px; }
  .tf-awards__os-label { font-size:.62rem; letter-spacing:.22em; }
  .tf-awards__os-fest { font-size:.56rem; letter-spacing:.08em; }
}

/* Single landscape key-art poster */
.tf-poster-wide { max-width:1100px; margin-inline:auto; border-radius:var(--tf-r-3); overflow:hidden; box-shadow:var(--tf-shadow-cinema); border:1px solid var(--tf-hairline); }
.tf-poster-wide img { width:100%; height:auto; display:block; }