/* SVLTMK hub stylesheet (Muse, 2026-10-16): the skin for the five studio pages
   (home, apps, crew, film, story). The app pages keep assets/family.css.
   Direction: "the lot at night". Deep indigo ground, one purple light, a cyan
   wordmark, rounded display type that could sit on a lunchbox and in a deck.
   Every colour is a token here; every monster brings its own --c plate colour. */

@font-face { font-family:'Baloo 2'; font-weight:600; font-display:swap; src:url('/fonts/baloo2-600.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:400; font-display:swap; src:url('/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:500; font-display:swap; src:url('/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:600; font-display:swap; src:url('/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:700; font-display:swap; src:url('/fonts/inter-700.woff2') format('woff2'); }

:root {
  --bg:#0B0A1F; --bg-2:#100F2B; --surface:#161538; --surface-2:#1D1C45; --surface-3:#262563;
  --ink:#F3F1FF; --soft:#C3C0E3; --muted:#8E8BB8; --hair:rgba(255,255,255,.08); --hair-2:rgba(255,255,255,.16);
  --cyan:#3EE7E0; --cyan-2:#8FF5F0; --gold:#F3D58A; --amber:#E0A94A; --purple:#7C3AED; --purple-2:#9D5CFF; --purple-soft:rgba(124,58,237,.28);
  --fd:'Baloo 2','Inter',system-ui,sans-serif; --f:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --pad:16px; --wide:min(1160px, calc(100vw - 2 * var(--pad))); --r-plate:28px; --r-card:20px; --r-pill:999px;
  --ease:cubic-bezier(.16,1,.3,1);
}
@media (min-width:760px) { :root { --pad:24px; } }
* { margin:0; padding:0; box-sizing:border-box; }
html { overflow-x:clip; scroll-behavior:smooth; scroll-padding-top:84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
body.hub { background:var(--bg); color:var(--ink); font-family:var(--f); line-height:1.6; overflow-x:clip;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; min-height:100vh; }
/* the lot at night: one purple light at the top, a faint grid, nothing that moves by itself */
body.hub::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(70% 45% at 50% -8%, rgba(124,58,237,.34), transparent 70%),
    radial-gradient(40% 30% at 90% 20%, rgba(62,231,224,.08), transparent 70%),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 100% 72px,
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 72px 100%; }
img, svg, picture { display:block; max-width:100%; }
img { height:auto; }
a { color:var(--cyan); text-decoration:none; }
a:hover { color:var(--cyan-2); }
:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px; }
::selection { background:rgba(124,58,237,.5); }
.wrap { max-width:var(--wide); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.skip { position:absolute; left:-999px; top:8px; background:var(--purple); color:#fff; padding:10px 14px; border-radius:10px; z-index:100; }
.skip:focus { left:12px; }

/* ── type ── */
h1, h2, h3, .wordmark { font-family:var(--fd); font-weight:600; letter-spacing:-.01em; line-height:1.05; text-wrap:balance; }
h1 { font-size:clamp(2.6rem, 8.5vw, 5.4rem); line-height:.98; }
h2 { font-size:clamp(1.7rem, 4vw, 2.5rem); }
h3 { font-size:1.2rem; }
.hue { color:var(--cyan); }
.eyebrow { font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--purple-2); margin-bottom:12px; }
.lede { font-size:clamp(1.05rem, 1.6vw, 1.25rem); color:var(--soft); max-width:58ch; margin-top:14px; }
.lede a { text-decoration:underline; text-underline-offset:3px; }
.text-link { font-weight:600; color:var(--cyan); white-space:nowrap; }
.quote { font-size:clamp(1.9rem, 5.2vw, 3.4rem); line-height:1.1; }
.wordmark { font-size:26px; letter-spacing:.02em; background:linear-gradient(90deg, #8FF5F0, #3EE7E0 45%, #9D5CFF); -webkit-background-clip:text; background-clip:text; color:transparent; }
.wordmark.sm { font-size:20px; }

/* ── buttons, pills, chips ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px; border-radius:var(--r-pill);
  font-family:var(--fd); font-size:1.08rem; font-weight:600; border:2px solid transparent; transition:transform .18s var(--ease), background-color .18s, border-color .18s, color .18s; }
.btn:active { transform:scale(.97); }
.btn-primary { background:var(--purple); color:#fff; box-shadow:0 10px 30px -10px rgba(124,58,237,.8); }
.btn-primary:hover { background:var(--purple-2); color:#fff; }
.btn-ghost { background:transparent; color:var(--cyan); border-color:var(--cyan); }
.btn-ghost:hover { background:rgba(62,231,224,.1); color:var(--cyan-2); }
.btn-sm { min-height:40px; padding:0 16px; font-size:.98rem; }
.btn-mini { display:inline-flex; align-items:center; min-height:38px; padding:0 14px; border-radius:var(--r-pill); font-size:14px; font-weight:600;
  background:rgba(62,231,224,.12); color:var(--cyan); border:1px solid rgba(62,231,224,.35); }
.btn-mini:hover { background:rgba(62,231,224,.22); color:var(--cyan-2); }
.pill { display:inline-flex; align-items:center; gap:7px; min-height:26px; padding:2px 10px; border-radius:var(--r-pill); font-size:12.5px; font-weight:600; letter-spacing:.01em;
  background:rgba(255,255,255,.06); color:var(--soft); border:1px solid var(--hair-2); }
.pill::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--muted); }
.pill[data-status="live"] { background:rgba(62,231,224,.12); color:var(--cyan-2); border-color:rgba(62,231,224,.3); }
.pill[data-status="live"]::before { background:var(--cyan); }
.pill[data-status="webLive"]::before, .pill[data-status="web"]::before { background:var(--cyan); }
.pill[data-status="review"]::before { background:#F3D58A; }
.chip { display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:2px 10px 2px 8px; border-radius:var(--r-pill); font-size:13px; font-weight:600;
  background:var(--surface-2); color:var(--ink); border:1px solid var(--hair-2); }
.chip img { width:18px; height:18px; border-radius:5px; }
.crew-chip { padding-left:3px; background:color-mix(in srgb, var(--c) 22%, var(--surface)); border-color:color-mix(in srgb, var(--c) 55%, transparent); }
/* the little monster: a face in a ring of its own colour, bobbing on its own beat (co-prime delays, so no two
   faces move in step). Still under reduced motion, and paused until its card has scrolled into view (.in). */
.crew-chip .crew-face { width:32px; height:32px; border-radius:50%; object-fit:cover; background:var(--bg-2);
  box-shadow:0 0 0 2px var(--c); transform-origin:50% 90%; }
.crew-chip.sm .crew-face { width:28px; height:28px; }
.crew-chip.sm { min-height:32px; font-size:12.5px; }
@media (prefers-reduced-motion: no-preference) {
  .crew-chip .crew-face { animation:bob 2.6s ease-in-out 2; animation-delay:calc(var(--i, 0) * -.37s); animation-play-state:paused; }
  .crew-chip:hover .crew-face, .crew-chip:focus-visible .crew-face { animation-iteration-count:infinite; }
  .in .crew-chip .crew-face, .crew-runs .crew-chip .crew-face, .film-kana .crew-face { animation-play-state:running; }
  .crew-chip:hover .crew-face { animation:wave .6s ease-in-out; }
  @keyframes bob { 0%, 100% { transform:translateY(0) rotate(-3deg); } 50% { transform:translateY(-2px) rotate(3deg); } }
  @keyframes wave { 0%, 100% { transform:rotate(0); } 25% { transform:rotate(-14deg) scale(1.12); } 75% { transform:rotate(14deg) scale(1.12); } }
}
a.crew-chip:hover, a.app-chip:hover { border-color:var(--cyan); color:var(--ink); }
.store-badge { display:inline-flex; line-height:0; border-radius:8px; }
.store-badge img { height:40px; width:auto; }
/* Apple's rules: the badge is never tinted, lifted or animated */
.store-badge:hover, .store-badge:active { filter:none; transform:none; }

/* ── nav ── */
.hub-nav { position:sticky; top:0; z-index:40; background:rgba(11,10,31,.78); -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid var(--hair); }
@media (prefers-contrast: more) { .hub-nav { background:var(--bg); -webkit-backdrop-filter:none; backdrop-filter:none; } }
.nav-inner { max-width:var(--wide); margin:0 auto; padding:10px var(--pad); display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:64px; }
.brand { display:inline-flex; align-items:center; min-height:44px; }
.nav-links { display:none; gap:4px; }
.nav-links a { display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border-radius:var(--r-pill); color:var(--soft); font-weight:600; font-size:1.02rem; font-family:var(--fd); }
.nav-links a:hover { color:var(--ink); background:rgba(255,255,255,.05); }
.nav-links a[aria-current="page"] { color:var(--ink); box-shadow:inset 0 -3px 0 var(--purple-2); border-radius:6px; }
.nav-actions { display:flex; align-items:center; gap:10px; }
.nav-cta { display:none; }
.nav-burger { width:44px; height:44px; border:0; background:transparent; border-radius:12px; display:grid; place-items:center; cursor:pointer; position:relative; }
.nav-burger span { position:absolute; left:12px; width:20px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s var(--ease), opacity .2s; }
.nav-burger span:nth-child(1) { top:17px; } .nav-burger span:nth-child(2) { top:25px; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(4px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { transform:translateY(-4px) rotate(-45deg); }
.mobile-sheet { display:none; flex-direction:column; padding:6px var(--pad) 16px; border-top:1px solid var(--hair); background:var(--bg-2); }
.mobile-sheet.open { display:flex; }
.mobile-sheet a { display:flex; align-items:center; min-height:48px; font-family:var(--fd); font-size:1.25rem; color:var(--ink); border-bottom:1px solid var(--hair); }
.mobile-sheet a[aria-current="page"] { color:var(--cyan); }
@media (min-width:760px) {
  .nav-links { display:flex; } .nav-cta { display:inline-flex; } .nav-burger, .mobile-sheet { display:none !important; }
}

/* ── hero ── */
.hero { padding:40px 0 0; text-align:center; position:relative; }
.hero-copy { max-width:720px; margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.hero h1 { text-transform:uppercase; letter-spacing:.01em; text-shadow:0 0 40px rgba(124,58,237,.55), 0 4px 0 rgba(0,0,0,.35); }
.hero .lede { margin-left:auto; margin-right:auto; }
.hero-ctas { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:26px; }
.hero-art { position:relative; margin-top:28px; }
.hero-strip { display:none; position:relative; }
.hero-strip img { width:100%; height:auto; }
.hero-strip::after { content:""; position:absolute; inset:auto 0 0 0; height:32%; background:linear-gradient(transparent, var(--bg)); pointer-events:none; }
.hero-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; padding:0 var(--pad); }
.hero-tile { position:relative; display:block; border-radius:16px; overflow:hidden; background:color-mix(in srgb, var(--c) 18%, var(--surface)); border:1px solid color-mix(in srgb, var(--c) 45%, transparent); aspect-ratio:150/230; }
.hero-tile img { width:100%; height:100%; object-fit:cover; object-position:top; }
.hero-tile span { position:absolute; left:0; right:0; bottom:0; padding:6px 8px; font-family:var(--fd); font-size:15px; text-align:center; color:#fff; background:linear-gradient(transparent, rgba(0,0,0,.65)); }
@media (min-width:760px) {
  .hero { padding-top:56px; }
  .hero-strip { display:block; margin:0 auto; max-width:1400px; }
  .hero-grid { display:none; }
}

/* the huddle: six portraits shoulder to shoulder in the side of a page head, hidden on phones (the
   home hero already shows the six there). The one under the mouse steps forward and leads; Tae leads
   by default; the whole row leans toward the cursor (hub.js sets --lx and --lr per monster). */
.huddle { display:none; }
@media (min-width:900px) {
  .with-huddle { display:grid; grid-template-columns:minmax(0, 1fr) 440px; gap:32px; align-items:end; }
  .huddle { display:block; position:relative; height:320px; justify-self:end; width:440px; }
  .hud { position:absolute; bottom:0; width:150px; left:calc(var(--i) * 58px); z-index:calc(3 - (var(--i) - 2) * (var(--i) - 2) / 3);
    transform:translate(var(--lx, 0px), var(--ly, 0px)) rotate(var(--lr, 0deg)) scale(var(--ls, 1)); transform-origin:50% 100%;
    transition:transform .35s var(--ease), filter .25s; filter:drop-shadow(0 18px 24px rgba(0,0,0,.55)); }
  .hud img { width:100%; height:auto; border-radius:14px; display:block; }
  .hud:nth-child(1), .hud:nth-child(6) { --ly:6px; } .hud:nth-child(3), .hud:nth-child(4) { --ly:-4px; }
  .hud.lead { --ls:1.14; --ly:-16px; z-index:10; filter:drop-shadow(0 26px 30px rgba(0,0,0,.65)) brightness(1.06); }
  .hud-name { position:absolute; left:50%; bottom:-6px; transform:translate(-50%, 100%); padding:3px 10px; border-radius:999px;
    background:var(--purple); color:#fff; font:600 12.5px var(--fd); white-space:nowrap; opacity:0; transition:opacity .2s; pointer-events:none; }
  .hud.lead .hud-name { opacity:1; }
  .huddle::after { content:""; position:absolute; left:10%; right:10%; bottom:-6px; height:40px; border-radius:50%;
    background:radial-gradient(closest-side, rgba(124,58,237,.45), transparent); z-index:0; }
}
@media (min-width:1200px) { .with-huddle { grid-template-columns:minmax(0, 1fr) 520px; } .huddle { width:520px; height:350px; } .hud { width:170px; left:calc(var(--i) * 70px); } }
@media (prefers-reduced-motion: no-preference) {
  .hud img { animation:idle 3.2s ease-in-out 1; animation-delay:calc(var(--i) * -.53s); transform-origin:50% 100%; }
  .huddle:hover .hud img { animation-iteration-count:infinite; }
  @keyframes idle { 0%, 100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-6px) rotate(1deg); } }
}
@media (prefers-reduced-motion: reduce) { .hud { transition:none; } }

/* the crew cards, alive: the portrait tilts and leans toward the mouse (hub.js), the letter drifts the other way */
.crew-portrait { perspective:900px; }
.crew-portrait img { transform:translate(var(--px, 0px), 0) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)) scale(var(--ps, 1)); transform-origin:50% 90%;
  transition:transform .3s var(--ease); will-change:transform; }
.crew-card:hover .crew-portrait img { --ps:1.04; }
.crew-letter { transition:transform .4s var(--ease); transform:translate(calc(var(--px, 0px) * -.6), 0); }
@media (prefers-reduced-motion: reduce) { .crew-portrait img, .crew-letter { transition:none; transform:none !important; } }

/* ── sections ── */
section.wrap { padding-top:56px; padding-bottom:8px; }
.sec-head { margin-bottom:22px; }
.sec-head.row { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.sec-head h2 { max-width:24ch; }
.sec-more { margin-top:18px; }
.page-head { padding-top:44px; }
.page-head .filters { margin-top:22px; }
@media (min-width:760px) { section.wrap { padding-top:72px; } .page-head { padding-top:64px; } }

/* crew strip on the home */
.crew-row { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.crew-mini { position:relative; display:block; border-radius:18px; overflow:hidden; background:color-mix(in srgb, var(--c) 16%, var(--surface)); border:1px solid color-mix(in srgb, var(--c) 45%, transparent);
  transition:transform .25s var(--ease), border-color .2s; }
.crew-mini img { width:100%; height:auto; aspect-ratio:150/299; object-fit:cover; }
.crew-mini-name, .crew-mini-job { display:block; text-align:center; }
.crew-mini-name { font-family:var(--fd); font-size:1.15rem; color:var(--ink); padding-top:8px; }
.crew-mini-job { font-size:12.5px; font-weight:600; color:color-mix(in srgb, var(--c) 40%, #fff); padding-bottom:12px; }
.crew-mini:hover { transform:translateY(-4px); border-color:var(--c); }
@media (min-width:760px) { .crew-row { grid-template-columns:repeat(6, 1fr); gap:14px; } }

/* flagship */
.flag-card { display:grid; grid-template-columns:1fr; gap:0; border-radius:var(--r-plate); overflow:hidden; background:linear-gradient(135deg, color-mix(in srgb, var(--c) 28%, var(--surface)), var(--surface)); border:1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.flag-monster { display:flex; justify-content:center; align-items:flex-end; padding:24px 24px 0; background:radial-gradient(60% 60% at 50% 70%, color-mix(in srgb, var(--c) 35%, transparent), transparent 75%); }
.flag-monster img { width:min(220px, 60%); height:auto; }
.flag-copy { padding:24px 24px 28px; }
.rating { display:flex; align-items:center; gap:10px; margin-top:16px; font-size:15px; color:var(--soft); }
.rating .stars { color:#F3D58A; letter-spacing:2px; font-size:18px; }
.rating strong { color:var(--ink); font-size:18px; font-family:var(--fd); }
.flag-acts { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:22px; }
.flag-acts .store-badge img { height:48px; }
@media (min-width:760px) {
  .flag-card { grid-template-columns:300px 1fr; }
  .flag-monster { padding:28px 0 0 28px; justify-content:flex-start; }
  .flag-monster img { width:240px; }
  .flag-copy { padding:36px 36px 40px; }
}

/* app grid */
.app-grid { display:grid; grid-template-columns:1fr; gap:14px; }
.app-card { position:relative; display:grid; grid-template-columns:72px 1fr; grid-template-rows:auto auto; gap:4px 16px; padding:18px; border-radius:var(--r-card);
  background:var(--surface); border:1px solid var(--hair); transition:border-color .2s, transform .25s var(--ease), background-color .2s; }
.app-card:hover { border-color:var(--hair-2); background:var(--surface-2); }
.app-card:has(.card-link:hover) { transform:translateY(-3px); }
.app-face { grid-row:1 / span 2; }
.app-face img { width:72px; height:72px; border-radius:18px; box-shadow:0 10px 24px -10px rgba(0,0,0,.6); }
.app-body h2, .app-body h3 { color:var(--ink); font-size:1.2rem; }
.app-body p { color:var(--soft); font-size:14.5px; margin-top:4px; }
.app-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.app-acts { grid-column:2; display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:8px; position:relative; z-index:2; }
.android { font-size:12.5px; font-weight:600; color:var(--muted); }
.card-link { color:inherit; }
.card-link::after { content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; }
.app-card .chip, .app-card .act { position:relative; z-index:2; }
.app-card[hidden] { display:none; }
.app-card[data-status="building"] .app-face img { background:var(--surface-2); padding:6px; }
.grid-empty { color:var(--muted); margin-top:16px; }
@media (min-width:640px) { .app-grid { grid-template-columns:repeat(2, 1fr); } }
@media (min-width:1000px) { .app-grid { grid-template-columns:repeat(3, 1fr); gap:16px; } }

/* one set of monsters on phones: the hero tiles already flip there, so the crew row waits for tablet width */
@media (max-width:759px) { .crew-row { display:none; } .crew-strip .lede { display:none; } }
/* the vote panel on the film page */
.vote-panel { margin-top:28px; padding:22px 20px; border-radius:var(--r-plate); background:linear-gradient(135deg, rgba(243,213,138,.12), var(--surface)); border:1px solid rgba(243,213,138,.4); }
.vote-h { font-family:'Fraunces', Georgia, serif; font-style:italic; font-weight:500; font-size:clamp(1.4rem, 3vw, 1.9rem); color:var(--gold, #F3D58A); }
.vote-panel p { color:var(--soft); margin-top:8px; max-width:60ch; }
.vote-acts { display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }
.btn.is-disabled { opacity:.55; cursor:default; }
@media (min-width:760px) { .vote-panel { padding:28px 32px; } }
/* the crew faces as a filter */
.face-filters { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.face-filter { display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:3px 14px 3px 4px; border-radius:var(--r-pill); border:1px solid var(--hair-2); background:transparent; color:var(--soft); font:600 13.5px var(--f); cursor:pointer; transition:border-color .15s, background-color .15s, color .15s; }
.face-filter img { width:30px; height:30px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px var(--c); background:var(--bg-2); }
.face-filter:hover { color:var(--ink); border-color:var(--c); }
.face-filter.on { background:color-mix(in srgb, var(--c) 30%, var(--surface)); border-color:var(--c); color:var(--ink); }
/* the crew letters line */
.lede.letters b { color:var(--cyan); font-weight:700; }

/* latest from the studio */
.latest { padding-top:40px; }
.news-list { list-style:none; display:grid; grid-template-columns:1fr; gap:10px; }
.news-item { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:12px 16px; border-radius:16px; background:var(--surface); border:1px solid var(--hair); border-left:3px solid var(--c); }
.news-item time { font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.news-item a { color:var(--ink); font-weight:500; }
.news-item a:hover { color:var(--cyan); }
.news-by { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--soft); white-space:nowrap; }
.news-by img { width:24px; height:24px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px var(--c); }
@media (max-width:600px) { .news-item { grid-template-columns:1fr; gap:4px; } .news-by { justify-self:end; } }
@media (min-width:1000px) { .news-list { grid-template-columns:1fr 1fr; } }
/* press */
.press-sec h2 { margin-bottom:12px; }
.facts { display:grid; grid-template-columns:1fr; gap:10px; }
.facts > div { display:grid; grid-template-columns:110px 1fr; gap:12px; padding:14px 16px; border-radius:16px; background:var(--surface); border:1px solid var(--hair); }
.facts dt { font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--purple-2); padding-top:3px; }
.facts dd { color:var(--soft); }
.press-assets { list-style:none; display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:14px; }
.press-asset a { display:block; border-radius:16px; overflow:hidden; background:color-mix(in srgb, var(--c) 16%, var(--surface)); border:1px solid color-mix(in srgb, var(--c) 45%, transparent); color:var(--ink); text-align:center; }
.press-asset img { width:100%; height:auto; aspect-ratio:150/299; object-fit:cover; }
.press-asset span { display:block; padding:8px 6px 10px; font-size:13px; font-weight:600; }
.press-more { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.press-film { display:grid; grid-template-columns:1fr; gap:20px; margin-top:14px; }
.press-film img { width:min(240px, 100%); border-radius:14px; }
.press-film .prose p { margin-top:10px; }
@media (min-width:760px) { .press-assets { grid-template-columns:repeat(6, 1fr); } .press-film { grid-template-columns:240px 1fr; align-items:start; } .facts > div { grid-template-columns:140px 1fr; } }

/* filters */
.filters { display:flex; flex-wrap:wrap; gap:8px; }
.filter { min-height:40px; padding:0 16px; border-radius:var(--r-pill); border:1px solid var(--hair-2); background:transparent; color:var(--soft); font:600 14px var(--f); cursor:pointer; transition:background-color .15s, color .15s, border-color .15s; }
.filter:hover { color:var(--ink); border-color:var(--cyan); }
.filter.on { background:var(--purple); border-color:var(--purple); color:#fff; }

/* crew page */
.crew-grid { display:grid; grid-template-columns:1fr; gap:16px; }
.crew-card { border-radius:var(--r-plate); overflow:hidden; background:var(--surface); border:1px solid color-mix(in srgb, var(--c) 40%, transparent); scroll-margin-top:90px; }
.crew-portrait { position:relative; background:radial-gradient(70% 60% at 50% 75%, color-mix(in srgb, var(--c) 40%, transparent), transparent 75%), var(--bg-2); display:flex; justify-content:center; }
.crew-portrait img { width:min(250px, 70%); height:auto; -webkit-mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.crew-letter { position:absolute; top:12px; left:16px; font-family:var(--fd); font-size:4rem; line-height:1; color:color-mix(in srgb, var(--c) 55%, transparent); }
.crew-plate { display:flex; align-items:baseline; justify-content:center; gap:12px; padding:12px 16px; background:color-mix(in srgb, var(--c) 78%, #000); color:var(--ink); }
.crew-plate h2 { font-size:2rem; color:var(--ink); text-transform:uppercase; letter-spacing:.02em; }
.crew-plate .crew-job { font-weight:700; font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); opacity:.92; }
.crew-body { padding:18px 20px 22px; }
.crew-title { font-family:var(--fd); font-size:1.25rem; color:var(--ink); }
.crew-body > p { color:var(--soft); }
.crew-runs-label { margin-top:14px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted) !important; }
.crew-runs { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
@media (min-width:640px) { .crew-grid { grid-template-columns:repeat(2, 1fr); } }
@media (min-width:1000px) { .crew-grid { grid-template-columns:repeat(3, 1fr); } }
.ink-card { display:grid; grid-template-columns:96px 1fr; gap:18px; align-items:center; padding:22px; border-radius:var(--r-plate); background:var(--surface); border:1px solid var(--hair-2); }
.ink-card img { width:96px; height:96px; }
@media (max-width:480px) { .ink-card { grid-template-columns:1fr; } }

/* film */
.film-card { display:grid; grid-template-columns:120px 1fr; gap:20px; align-items:center; padding:20px; border-radius:var(--r-plate); background:linear-gradient(135deg, #1B1547, var(--surface)); border:1px solid var(--hair-2); color:inherit; transition:border-color .2s, transform .25s var(--ease); }
.film-card:hover { border-color:#F3D58A; transform:translateY(-3px); color:inherit; }
.film-card .film-poster { width:120px; }
.film-card .film-poster img { width:100%; height:auto; aspect-ratio:2/3; object-fit:cover; border-radius:12px; box-shadow:0 20px 50px -20px rgba(0,0,0,.8); }
.poster { width:100%; height:auto; border-radius:12px; box-shadow:0 20px 50px -20px rgba(0,0,0,.8); }
.poster-title { font-family:var(--fd); font-size:92px; fill:#F3D58A; letter-spacing:4px; }
.poster-sub { font-family:var(--f); font-size:22px; fill:#C3C0E3; letter-spacing:3px; }
.film-head { display:grid; grid-template-columns:1fr; gap:28px; }
.film-poster-lg { width:min(300px, 80%); margin:0 auto; }
.pill-row { margin-top:16px; }
.festival { margin-top:12px; color:var(--soft); }
.film-kana { margin-top:28px !important; }
@media (min-width:760px) {
  .film-card { grid-template-columns:160px 1fr; padding:28px; } .film-card .film-poster { width:160px; }
  .film-head { grid-template-columns:320px 1fr; align-items:center; } .film-poster-lg { width:320px; }
}

/* story */
.story-card { padding:28px 22px; border-radius:var(--r-plate); background:var(--surface); border:1px solid var(--hair-2); text-align:center; }
.story-card .lede { margin-left:auto; margin-right:auto; }
.story-card .btn { margin-top:22px; }
.prose { max-width:64ch; }
.prose h2 { margin-top:34px; font-size:clamp(1.45rem, 3vw, 1.9rem); }
.prose p, .prose li { color:var(--soft); margin-top:12px; font-size:1.05rem; }
.prose ul { padding-left:20px; }
.prose a { text-decoration:underline; text-underline-offset:3px; }
.story-sign { margin-top:28px !important; }
.story-ctas { display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }
@media (min-width:760px) { .story-card { padding:48px 40px; } }

/* footer */
.hub-foot { margin-top:72px; border-top:1px solid var(--hair); background:var(--bg-2); }
.foot-inner { max-width:var(--wide); margin:0 auto; padding:32px var(--pad) 40px; display:flex; flex-direction:column; gap:18px; }
.foot-brand { display:flex; align-items:baseline; gap:12px; }
.foot-legal-name { color:var(--muted); font-size:14px; font-weight:600; }
.foot-links { display:flex; flex-wrap:wrap; gap:4px 18px; }
.foot-links a { color:var(--soft); font-weight:600; font-size:14.5px; min-height:32px; display:inline-flex; align-items:center; }
.foot-links a:hover { color:var(--ink); }
.foot-tag { font-family:var(--fd); font-size:1.15rem; color:var(--soft); }
.foot-line { color:var(--muted); font-size:13.5px; }
.foot-line a { color:var(--soft); }

/* ── motion: reveals only when the visitor allows motion; hub.js adds .rv, the page never hides itself ── */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .7s var(--ease); }
  .rv.in { opacity:1; transform:none; }
  .hero h1 { animation:rise .7s var(--ease) both; }
  .hero .lede, .hero-ctas { animation:rise .7s .08s var(--ease) both; }
  .hero-art { animation:rise .9s .16s var(--ease) both; }
  @keyframes rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
}

/* ── the flip cards (home hero on phones, the crew row everywhere). Kent, 2026-10-16: tap a monster and the
   card turns to that monster. Front: a button with the portrait. Back: name line, apps, a way to the crew
   page. 3D turn where motion is allowed; a plain swap under reduced motion. ── */
.mcard { position:relative; perspective:900px; }
.mcard-front, .mcard-back { border-radius:16px; border:1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background:color-mix(in srgb, var(--c) 16%, var(--surface)); -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.mcard-front { position:relative; display:block; width:100%; padding:0; overflow:hidden; cursor:pointer; color:var(--ink); font:inherit; text-align:center; }
.mcard-front img { width:100%; height:auto; aspect-ratio:150/299; object-fit:cover; }
.mcard-name, .mcard-job { display:block; }
.mcard-name { font-family:var(--fd); font-size:1.15rem; padding-top:8px; }
.mcard-job { font-size:12.5px; font-weight:600; color:color-mix(in srgb, var(--c) 40%, #fff); padding-bottom:12px; }
.hero-tile .mcard-front img { aspect-ratio:150/230; object-position:top; }
.hero-tile .mcard-name { position:absolute; left:0; right:0; bottom:0; padding:22px 6px 8px; font-size:15px; color:#fff; background:linear-gradient(transparent, rgba(0,0,0,.7)); }
.hero-tile .mcard-job { position:absolute; left:0; right:0; bottom:2px; font-size:0; padding:0; }
.mcard-front:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }
.mcard-back { position:absolute; inset:0; display:flex; flex-direction:column; gap:6px; padding:12px 12px 36px; overflow:auto;
  transform:rotateY(180deg); background:color-mix(in srgb, var(--c) 30%, var(--surface)); }
.mcard-title { font-family:var(--fd); font-size:1.05rem; color:var(--ink); line-height:1.2; }
.mcard-line { font-size:12.5px; line-height:1.45; color:var(--ink); }
.mcard-runs { display:flex; flex-wrap:wrap; gap:4px; margin-top:2px; }
.mcard-runs .chip { min-height:24px; font-size:11.5px; padding:1px 8px 1px 5px; }
.mcard-runs .chip img { width:14px; height:14px; }
.mcard-back .text-link { display:inline-flex; align-items:center; min-height:32px; font-size:13px; margin-top:auto; }
.mcard-close { position:absolute; right:6px; bottom:6px; width:32px; height:32px; border-radius:50%; border:0; background:rgba(0,0,0,.35); color:#fff; font-size:20px; line-height:1; cursor:pointer; }
.mcard-close:focus-visible { outline:2px solid var(--cyan); }
.mcard.flipped .mcard-front { pointer-events:none; }
.mcard-front, .mcard-back { transition:transform .6s var(--ease); transform-style:preserve-3d; }
.mcard.flipped .mcard-front { transform:rotateY(180deg); }
.mcard.flipped .mcard-back { transform:rotateY(0); }
@media (prefers-reduced-motion: reduce) {
  .mcard-front, .mcard-back { transition:opacity .2s; transform:none !important; }
  .mcard-back { opacity:0; pointer-events:none; } .mcard.flipped .mcard-back { opacity:1; pointer-events:auto; } .mcard.flipped .mcard-front { opacity:0; }
}
.crew-row .mcard:hover .mcard-front { border-color:var(--c); }
/* the phone tiles are small: the back keeps the title, the app icons and the way in */
.hero-tile .mcard-back { padding:10px 10px 8px; gap:8px; }
.hero-tile .mcard-line { display:none; }
.hero-tile .mcard-title { font-size:1rem; padding-right:26px; }
.hero-tile .mcard-runs .chip { font-size:0; padding:0; min-height:0; width:30px; height:30px; justify-content:center; border-radius:9px; }
.hero-tile .mcard-runs .chip img { width:20px; height:20px; }
.hero-tile .mcard-close { top:6px; right:6px; bottom:auto; width:28px; height:28px; font-size:18px; }
.hero-tile .mcard-back .text-link { margin-top:auto; }

/* ── the film page: its own light. Deep indigo, gold, warm amber; the title in the end card's italic. ── */
@font-face { font-family:'Fraunces'; font-style:italic; font-weight:100 900; font-display:swap; src:url('/fonts/fraunces-var-italic.woff2') format('woff2'); }
.film-page { --gold:#F3D58A; --amber:#E0A94A; }
.film-page::before { background:radial-gradient(70% 45% at 50% -8%, rgba(224,169,74,.22), transparent 70%), radial-gradient(40% 30% at 90% 20%, rgba(124,58,237,.12), transparent 70%); }
.film-stage { padding-top:20px; }
.film-player { position:relative; border-radius:var(--r-plate); overflow:hidden; background:#07061A; box-shadow:0 40px 80px -30px rgba(0,0,0,.9); aspect-ratio:16/9; }
.film-player iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.film-play, .film-facade { position:relative; display:block; width:100%; height:100%; padding:0; border:0; background:none; cursor:pointer; color:#fff; font:inherit; }
.film-facade { cursor:default; }
.film-play img, .film-facade img { width:100%; height:100%; object-fit:cover; }
.play-ring { position:absolute; left:50%; top:50%; width:88px; height:88px; margin:-44px 0 0 -44px; border-radius:50%; display:grid; place-items:center;
  background:rgba(7,6,26,.6); border:2px solid var(--gold); box-shadow:0 0 0 10px rgba(243,213,138,.12); transition:transform .25s var(--ease), background-color .2s; }
.play-tri { width:0; height:0; border-left:28px solid var(--gold); border-top:17px solid transparent; border-bottom:17px solid transparent; margin-left:6px; }
.film-play:hover .play-ring { transform:scale(1.08); background:rgba(7,6,26,.8); }
.film-play:focus-visible { outline:3px solid var(--gold); outline-offset:-3px; }
.player-note { margin-top:10px; text-align:center; font-size:13px; font-weight:600; color:var(--muted); }
.film-title-row { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:18px 24px; margin-top:26px; }
.film-title { font-family:'Fraunces', Georgia, 'Times New Roman', serif; font-style:italic; font-weight:500; font-size:clamp(2.4rem, 7vw, 4.6rem); line-height:1; letter-spacing:-.01em; color:var(--gold); font-variation-settings:"opsz" 144, "SOFT" 40; }
.film-credit { margin-top:10px; color:var(--soft); font-size:1.05rem; }
.film-stage-acts { display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; }
.film-channel { min-height:44px; display:inline-flex; align-items:center; }
.btn-gold { background:var(--gold); color:#1B1547; }
.btn-gold:hover { background:#FFE7A8; color:#1B1547; }
.laurels { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.laurels li { padding:6px 12px; border:1px solid var(--gold); border-radius:var(--r-pill); color:var(--gold); font-size:13px; font-weight:600; }
.film-cols { display:grid; grid-template-columns:1fr; gap:32px; }
.film-logline { font-family:'Fraunces', Georgia, serif; font-style:italic; font-weight:400; font-size:clamp(1.5rem, 3.2vw, 2.1rem); line-height:1.25; color:var(--ink); margin-top:0 !important; }
.festival-line { color:var(--gold) !important; font-weight:600; }
.film-poster-side img { width:min(360px, 100%); height:auto; aspect-ratio:2/3; object-fit:cover; border-radius:16px; box-shadow:0 30px 60px -24px rgba(0,0,0,.8); }
@media (min-width:900px) { .film-cols { grid-template-columns:1fr 360px; align-items:start; } .film-poster-side { position:sticky; top:90px; } }