/* Vurctne · Emberlight. Night ground, one warm light, Cinzel title cards.
   Token source: the Vurctne design system (tokens.json). Keep names in sync. */
:root {
  --surface-0: #07131c;
  --surface-1: #0d1b27;
  --surface-2: #142636;
  --hairline: #22323f;
  --text: #ede6d8;
  --text-muted: #9aa3ad;
  --ember: #d08456;
  --on-ember: #07131c;
  --frost: #2a4b69;
  --rust: #8a3a26;
  --glow: rgba(208, 132, 86, 0.22);
  --scrim: rgba(7, 19, 28, 0.82);

  --font-card: Cinzel, "Trajan Pro", Georgia, serif;
  --font-serif: "Cormorant Garamond", Garamond, Georgia, serif;
  --font-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-cn: "Noto Serif SC", "Songti SC", serif;

  --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px;
  --space-5: 40px; --space-6: 64px; --space-7: 104px;
  --max: 1200px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--surface-0); color: var(--text);
  font: 400 16px/1.65 var(--font-sans);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration-color: var(--hairline); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ember); }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; }

/* language toggle: every bilingual string is a pair of [data-l] spans */
html[data-lang="en"] [data-l="zh"], html[data-lang="zh"] [data-l="en"] { display: none; }
html[data-lang="zh"] body { font-family: var(--font-sans), var(--font-cn); }
html[data-lang="zh"] :is(.lede, .row__hook, .heading) { font-family: var(--font-cn); font-style: normal; font-weight: 400; letter-spacing: .02em; }
html[data-lang="zh"] .heading { font-weight: 600; }

.wrap { max-width: var(--max); margin: 0 auto; padding-left: max(var(--space-3), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-3), env(safe-area-inset-right, 0px)); }
@media (min-width: 720px) { .wrap { padding-left: max(var(--space-5), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-5), env(safe-area-inset-right, 0px)); } }

/* type */
.label { font: 600 11px/1.2 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); }
.film-title { font: 400 clamp(34px, 6vw, 72px)/1 var(--font-card); letter-spacing: .28em; text-transform: uppercase; margin-right: -.28em; }
.lede { font: italic 400 clamp(20px, 2.4vw, 26px)/1.4 var(--font-serif); }
.heading { font: 500 clamp(28px, 3.4vw, 40px)/1.15 var(--font-serif); }
.meta { font: 400 13px/1.5 var(--font-sans); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.premiere { display: block; color: var(--text); }
.cn-title { font: 600 0.62em/1 var(--font-cn); letter-spacing: .12em; color: var(--text-muted); }
.body-copy { max-width: 62ch; color: var(--text); }
.body-copy p + p { margin-top: var(--space-3); }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: var(--space-2); font: 600 11px/1 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; padding: 15px 20px; border: 1px solid var(--hairline); color: var(--text); background: transparent; cursor: pointer; border-radius: 0; }
.btn:hover { background: var(--surface-2); }
.btn--primary { background: var(--ember); border-color: var(--ember); color: var(--on-ember); }
.btn--primary:hover { background: var(--ember); filter: brightness(1.08); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* header */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 5; padding-top: calc(var(--space-4) + env(safe-area-inset-top, 0px)); }
.site-header .wrap { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.site-header .brand img { height: 13px; width: auto; }
@media (max-width: 420px) { .site-header .brand img { height: 10px; } }
.nav { display: flex; align-items: center; gap: var(--space-4); }
.nav a { text-decoration: none; }
.nav a.label:hover, .nav a[aria-current="page"] { color: var(--text); }
.nav a[aria-current="page"] { box-shadow: inset 0 -1px 0 var(--ember); padding-bottom: 4px; }
.lang { background: none; border: 1px solid var(--hairline); color: var(--text-muted); font: 600 11px/1 var(--font-sans); letter-spacing: .12em; padding: 7px 9px; cursor: pointer; }
.lang:hover { color: var(--text); }
@media (max-width: 640px) { .nav .hide-sm { display: none; } .nav { gap: var(--space-3); } }

/* hero */
.hero { position: relative; min-height: min(92vh, 860px); display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.02); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(42% 46% at 26% 78%, var(--glow), rgba(208, 132, 86, 0) 70%),
  linear-gradient(180deg, rgba(7, 19, 28, .6) 0%, rgba(7, 19, 28, 0) 26%, rgba(7, 19, 28, 0) 42%, var(--scrim) 88%, var(--surface-0) 100%); }
.hero > .wrap { width: 100%; }
.hero__copy { display: grid; gap: var(--space-3); padding-block: var(--space-7) var(--space-6); max-width: 720px; }
.hero__copy .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.hero--short { min-height: min(70vh, 640px); }
@media (prefers-reduced-motion: no-preference) {
  .hero__img { animation: drift 24s ease-out both; }
  .hero__copy > * { animation: rise .6s cubic-bezier(.16, 1, .3, 1) both; }
  .hero__copy > *:nth-child(2) { animation-delay: .08s; } .hero__copy > *:nth-child(3) { animation-delay: .16s; } .hero__copy > *:nth-child(4) { animation-delay: .24s; }
}
@keyframes drift { from { transform: scale(1.06); } to { transform: scale(1.02); } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* sections */
.section { padding-block: var(--space-6); }
@media (min-width: 720px) { .section { padding-block: var(--space-7); } }
.section__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5); }
.band { background: var(--surface-1); }

/* film index */
.index { display: grid; }
.row { display: grid; grid-template-columns: minmax(120px, 240px) 1fr auto; gap: var(--space-4); align-items: center; padding-block: var(--space-4); border-top: 1px solid var(--hairline); text-decoration: none; }
.row:last-child { border-bottom: 1px solid var(--hairline); }
.row:hover { background: linear-gradient(90deg, var(--surface-1), transparent); }
.row__still { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-top-left-radius: 999px; border-top-right-radius: 999px; }
.row__text { display: grid; gap: var(--space-1); min-width: 0; }
.row__title { font: 500 clamp(15px, 1.6vw, 19px)/1.2 var(--font-card); letter-spacing: .24em; text-transform: uppercase; }
.row__hook { font: italic 400 clamp(17px, 1.8vw, 21px)/1.4 var(--font-serif); }
.row__meta { text-align: right; }
@media (max-width: 640px) {
  .row { grid-template-columns: 1fr; gap: var(--space-3); }
  .row__meta { text-align: left; }
}

/* shorts strip */
.shorts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.shorts a { background: var(--surface-0); padding: var(--space-4); display: grid; gap: var(--space-2); text-decoration: none; }
.shorts a:hover { background: var(--surface-2); }

/* about */
.about { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: start; }
@media (min-width: 900px) { .about { grid-template-columns: 5fr 6fr; } }
.aperture { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-top-left-radius: 999px; border-top-right-radius: 999px; }

/* credits list on film page */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); border-top: 1px solid var(--hairline); padding-top: var(--space-4); }
.facts div { display: grid; gap: var(--space-1); }

/* work page */
.reel { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.reel a { display: grid; gap: var(--space-2); text-decoration: none; }
.reel img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface-1); }
.form { display: grid; gap: var(--space-4); max-width: 720px; }
.field { display: grid; gap: var(--space-2); }
.field input, .field textarea { font: 400 16px/1.5 var(--font-sans); color: var(--text); background: var(--surface-1); border: 1px solid var(--hairline); border-radius: 2px; padding: 12px 14px; width: 100%; }
.field input:focus, .field textarea:focus { border-color: var(--ember); outline: none; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { font: 500 13px/1 var(--font-sans); color: var(--text-muted); background: transparent; border: 1px solid var(--hairline); border-radius: 2px; padding: 10px 12px; cursor: pointer; }
.chip[aria-pressed="true"] { color: var(--text); border-color: var(--text); background: var(--surface-2); }
.notice { padding: var(--space-4); background: var(--surface-1); border: 1px solid var(--hairline); }
.error { color: #f0a58a; }

/* footer */
.site-footer { border-top: 1px solid var(--hairline); padding-block: var(--space-6) calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); }
.site-footer .wrap { display: grid; gap: var(--space-5); }
.site-footer .cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-5); }
.site-footer .links { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.site-footer .links a { text-decoration: none; }
.site-footer .wm img { height: 14px; width: auto; }