/* ============================================================
   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:#000; --tf-bg-elev-1:#080808; --tf-bg-elev-2:#111114; --tf-hairline:#1a1a1f;
  --tf-fg:#fff; --tf-fg-muted:#bfbfbf; --tf-fg-dim:#8a8a8a; --tf-fg-faint:#4a4a4a;

  --tf-rose:#e33292; --tf-rose-hi:#ff5bae; --tf-rose-lo:#8a1f58; --tf-rose-ink:#fff;
  --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(1rem,.95rem + .25vw,1.125rem);
  --tf-fs-lead:clamp(1.125rem,1.05rem + .4vw,1.375rem);
  --tf-fs-h5:clamp(1.375rem,1.25rem + .6vw,1.75rem);
  --tf-fs-h4:clamp(1.75rem,1.5rem + 1.2vw,2.5rem);
  --tf-fs-h3:clamp(2.25rem,1.8rem + 2.2vw,3.5rem);
  --tf-fs-h2:clamp(3rem,2.2rem + 4vw,5rem);
  --tf-fs-h1:clamp(3.5rem,2.4rem + 6vw,7.5rem);
  --tf-fs-hero:clamp(3.25rem,2rem + 9vw,11rem);

  --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(4rem,6vw + 2rem,9rem);
  --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); 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;
}
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-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-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; }

/* ---------- 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; background:var(--tf-grad-flesh); mix-blend-mode:screen; animation:tf-pulse 833ms var(--tf-ease-in-out) infinite; pointer-events:none; }
@keyframes tf-pulse { 0%,100%{opacity:.45;transform:scale(1);} 20%{opacity:.85;transform:scale(1.04);} }
.tf-hero__inner { position:relative; z-index:1; width:var(--tf-container); margin-inline:auto; padding-block:var(--tf-sp-8); }
.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-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:var(--tf-fs-caption); letter-spacing:.42em; 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:var(--tf-fs-overline); letter-spacing:.34em; text-transform:uppercase; color:var(--tf-fg-dim); margin-top:.3rem; }
.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%); }
  /* Pulsing pink heartbeat — scoped to the banner image (as on desktop). */
  .tf-hero__media::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:var(--tf-grad-flesh); mix-blend-mode:screen; animation:tf-pulse 833ms var(--tf-ease-in-out) infinite; }
  .tf-heartbeat { display:none; }
  .tf-hero__inner { padding-block:var(--tf-sp-6); }
  .tf-scroll-cue { display:none; }
}

/* ---------- 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:42ch; }
.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-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__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-8)); padding-bottom:var(--tf-sp-7); position:relative; }
.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); transition:transform var(--tf-dur-base) var(--tf-ease-cinema); }
.tf-toast.is-on { transform:translate(-50%,0); }

/* ---------- 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; }
}