/* ═══════════════════════════════════════════════════════════════════════════
   NIKI SHELDRAKE — Screenwriter & Producer
   Hand-written CSS. No framework, no build step.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer reset, tokens, base, layout, components, responsive, motion, utilities;

/* ─────────────────────────── RESET ─────────────────────────── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
  ul[class], ol[class] { list-style: none; padding: 0; }
  img, picture, svg { display: block; max-width: 100%; }
  img { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  a { color: inherit; }
  :where(h1, h2, h3, h4) { text-wrap: balance; }
  :where(p, li) { text-wrap: pretty; }
}

/* ─────────────────────────── TOKENS ────────────────────────── */
@layer tokens {
  :root {
    /* ink & surface — a deep, filmic black that is never pure #000 */
    --ink-900: #08080A;
    --ink-850: #0B0B0D;
    --ink-800: #101013;
    --ink-750: #16161A;
    --ink-700: #1C1C21;
    --ink-600: #26262C;
    --ink-500: #34343C;

    /* gold — the single precious accent */
    --gold-400: #E8C271;
    --gold-500: #D4A017;
    --gold-600: #B4870F;
    --gold-glow: rgba(212, 160, 23, 0.14);

    /* text */
    --cream:  #F5F0E8;
    --stone:  #A8A29E;
    --stone-dim: #7A7570;

    /* hairlines */
    --rule:        rgba(245, 240, 232, 0.10);
    --rule-strong: rgba(245, 240, 232, 0.18);
    --rule-gold:   rgba(212, 160, 23, 0.34);

    /* type */
    --font-display: 'Fraunces', 'Georgia', 'Times New Roman', serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace;

    /* fluid scale — 360px → 1440px */
    --fs-hero:   clamp(3.25rem, 1.30rem + 8.70vw, 9.50rem);
    --fs-h2:     clamp(2.05rem, 1.34rem + 3.15vw, 4.25rem);
    --fs-h3:     clamp(1.55rem, 1.20rem + 1.56vw, 2.60rem);
    --fs-h4:     clamp(1.20rem, 1.05rem + 0.67vw, 1.65rem);
    --fs-lede:   clamp(1.10rem, 0.99rem + 0.49vw, 1.4375rem);
    --fs-body:   clamp(1.00rem, 0.96rem + 0.18vw, 1.125rem);
    --fs-sm:     clamp(0.875rem, 0.85rem + 0.11vw, 0.9375rem);
    --fs-kicker: clamp(0.6875rem, 0.66rem + 0.13vw, 0.78125rem);

    /* spacing */
    --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
    --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
    --sp-9: 6rem;     --sp-10: 8rem;
    --section-y: clamp(4.5rem, 2.6rem + 8.4vw, 10rem);

    /* layout */
    --shell: 78rem;
    --shell-pad: clamp(1.25rem, 0.6rem + 2.9vw, 3rem);
    --measure: 34rem;

    /* form */
    --radius: 2px;
    --radius-lg: 4px;

    /* motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 180ms;
    --dur: 420ms;
    --dur-slow: 900ms;

    /* layers */
    --z-header: 100;
    --z-nav: 90;

    color-scheme: dark;
  }
}

/* ──────────────────────────── BASE ─────────────────────────── */
@layer base {
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    background: var(--ink-850);
    color: var(--cream);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.65;
    font-weight: 400;
    letter-spacing: -0.003em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
  }

  /* Fine film grain over the whole page — the single texture in the system. */
  body::after {
    content: '';
    position: fixed;
    inset: -50%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.16;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
  }
  @media (prefers-reduced-motion: no-preference) {
    body::after { animation: grain 6s steps(6) infinite; }
  }
  @keyframes grain {
    0%,100% { transform: translate(0,0); }
    20% { transform: translate(-1.5%, 1%); }
    40% { transform: translate(1%, -1.5%); }
    60% { transform: translate(-1%, -1%); }
    80% { transform: translate(1.5%, 1.5%); }
  }

  ::selection { background: var(--gold-500); color: var(--ink-900); }

  :focus-visible {
    outline: 2px solid var(--gold-400);
    outline-offset: 3px;
    border-radius: 1px;
  }

  .skip-link {
    position: absolute;
    left: var(--sp-4);
    top: -100%;
    z-index: 999;
    padding: var(--sp-3) var(--sp-5);
    background: var(--gold-500);
    color: var(--ink-900);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    text-decoration: none;
    transition: top var(--dur-fast) var(--ease-out);
  }
  .skip-link:focus { top: var(--sp-4); }
}

/* ─────────────────────────── LAYOUT ────────────────────────── */
@layer layout {
  .shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--shell-pad);
  }

  .section {
    position: relative;
    z-index: 2;
    padding-block: var(--section-y);
    border-top: 1px solid var(--rule);
  }
  .section--about { background: var(--ink-800); }
  .section--featured { background: var(--ink-850); }
  .section--dev { background: var(--ink-800); }
  .section--scripts { background: var(--ink-850); }
  .section--credits { background: var(--ink-800); }
  .section--contact { background: var(--ink-900); }
}

/* ────────────────────────── COMPONENTS ─────────────────────── */
@layer components {

  /* ── kicker ────────────────────────────────────────────── */
  .kicker {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-kicker);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-500);
  }
  .kicker::before {
    content: '';
    display: inline-block;
    width: clamp(1.5rem, 3vw, 2.75rem);
    height: 1px;
    background: currentColor;
    vertical-align: 0.32em;
    margin-right: var(--sp-3);
    opacity: 0.75;
  }
  .kicker span { color: var(--stone-dim); }
  .kicker--sm { font-size: 0.6875rem; letter-spacing: 0.18em; color: var(--stone); }
  .kicker--sm::before { width: 1.25rem; background: var(--rule-gold); }

  /* ── section head ──────────────────────────────────────── */
  .section-head { margin-bottom: clamp(2.5rem, 1.6rem + 3.8vw, 4.5rem); }
  .section-head--sub { margin-bottom: var(--sp-7); }

  .section-title {
    margin-top: var(--sp-4);
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.028em;
    color: var(--cream);
  }
  .section-title--film { font-style: normal; }
  .section-title--sm { font-size: var(--fs-h3); margin-top: var(--sp-3); }
  .section-sub {
    margin-top: var(--sp-3);
    font-size: var(--fs-lede);
    color: var(--stone);
    font-style: italic;
    font-family: var(--font-display);
  }

  /* ── buttons ───────────────────────────────────────────── */
  .btn {
    --btn-bg: transparent;
    --btn-fg: var(--cream);
    --btn-bd: var(--rule-strong);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 0.9rem 1.75rem;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-bd);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
  }
  .btn--primary { --btn-bg: var(--gold-500); --btn-fg: var(--ink-900); --btn-bd: var(--gold-500); font-weight: 700; }
  .btn--primary:hover { --btn-bg: var(--gold-400); --btn-bd: var(--gold-400); }
  .btn--ghost:hover { --btn-bd: var(--gold-500); --btn-fg: var(--gold-400); }
  .btn:active { transform: translateY(1px); }

  /* ── header ────────────────────────────────────────────── */
  .site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: color-mix(in srgb, var(--ink-850) 82%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
  }
  .site-header.is-stuck {
    border-bottom-color: var(--rule);
    background: color-mix(in srgb, var(--ink-900) 92%, transparent);
  }
  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    min-height: 4.5rem;
  }

  .wordmark {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    text-decoration: none;
  }
  .wordmark__mark {
    display: grid;
    place-items: center;
    width: 2.125rem;
    height: 2.125rem;
    border: 1px solid var(--rule-gold);
    color: var(--gold-500);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    flex: none;
    transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  .wordmark:hover .wordmark__mark { border-color: var(--gold-500); color: var(--gold-400); }
  .wordmark__text { display: flex; flex-direction: column; line-height: 1.15; }
  .wordmark__name {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  .wordmark__role {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.19em;
    text-transform: uppercase;
    color: var(--stone-dim);
  }

  .nav-list {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 1.6vw, 1.75rem);
  }
  .nav-list a {
    position: relative;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--stone);
    text-decoration: none;
    padding-block: 0.35rem;
    transition: color var(--dur-fast) var(--ease-out);
  }
  .nav-list a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--gold-500);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur) var(--ease-out);
  }
  .nav-list a:hover, .nav-list a.is-active { color: var(--cream); }
  .nav-list a:hover::after, .nav-list a.is-active::after { transform: scaleX(1); }
  .nav-list .nav-cta {
    color: var(--gold-500);
    border: 1px solid var(--rule-gold);
    padding: 0.5rem 1rem;
  }
  .nav-list .nav-cta::after { display: none; }
  .nav-list .nav-cta:hover { color: var(--ink-900); background: var(--gold-500); border-color: var(--gold-500); }

  .nav-toggle { display: none; }

  /* ── hero ──────────────────────────────────────────────── */
  .hero {
    position: relative;
    z-index: 2;
    min-height: clamp(34rem, 92svh, 58rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    padding-block: clamp(4rem, 12vh, 8rem) clamp(5rem, 14vh, 9rem);
    overflow: hidden;
    isolation: isolate;
  }
  .hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(120% 90% at 78% 8%, var(--gold-glow) 0%, transparent 58%),
      radial-gradient(90% 70% at 12% 96%, rgba(212,160,23,0.07) 0%, transparent 62%),
      linear-gradient(180deg, var(--ink-900) 0%, var(--ink-850) 46%, var(--ink-800) 100%);
  }
  .hero__bg::after {
    /* faint horizontal scan rules — a title-card texture */
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(180deg, rgba(245,240,232,0.028) 0 1px, transparent 1px 5px);
    opacity: 0.55;
    mask-image: radial-gradient(120% 80% at 50% 40%, #000 20%, transparent 78%);
  }

  .hero__inner { min-width: 0; }
  .hero__kicker { color: var(--gold-500); }
  .hero__kicker span { color: var(--gold-600); margin-inline: 0.15em; }

  .hero__name {
    margin-top: clamp(1.25rem, 2.5vw, 2rem);
    font-family: var(--font-display);
    font-size: var(--fs-hero);
    font-weight: 300;
    line-height: 0.86;
    letter-spacing: -0.045em;
    color: var(--cream);
    text-wrap: nowrap;
  }
  .hero__name-break { display: inline; }

  .hero__tagline {
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
    max-width: 30ch;
    font-size: var(--fs-lede);
    line-height: 1.45;
    color: var(--stone);
  }

  .genre-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0;
    margin-top: clamp(1.75rem, 3.4vw, 2.75rem);
  }
  .genre-strip li {
    font-family: var(--font-mono);
    font-size: var(--fs-kicker);
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--cream);
    padding-inline: clamp(0.75rem, 2vw, 1.5rem);
    border-left: 1px solid var(--rule-gold);
  }
  .genre-strip li:first-child { padding-inline-start: 0; border-left: 0; }

  .hero__meta {
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
    font-family: var(--font-mono);
    font-size: var(--fs-kicker);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--stone-dim);
  }
  .hero__meta span { color: var(--gold-600); margin-inline: 0.4em; }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    margin-top: clamp(2rem, 4vw, 3rem);
  }

  .hero__scroll {
    position: absolute;
    left: 50%;
    bottom: clamp(1.5rem, 4vh, 2.75rem);
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--stone-dim);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
  }
  .hero__scroll::after {
    content: '';
    width: 1px;
    height: 2.5rem;
    background: linear-gradient(180deg, var(--gold-600), transparent);
  }

  /* ── about ─────────────────────────────────────────────── */
  .about__grid {
    display: grid;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
  }
  .portrait {
    position: relative;
    border: 1px solid var(--rule);
    padding: var(--sp-3);
    background: var(--ink-750);
  }
  .portrait img {
    width: 100%;
    filter: grayscale(1) contrast(1.06) brightness(0.94);
    transition: filter var(--dur-slow) var(--ease-out);
  }
  .portrait::after {
    content: '';
    position: absolute;
    inset: -1px;
    border: 1px solid transparent;
    border-top-color: var(--rule-gold);
    pointer-events: none;
  }
  .portrait:hover img { filter: grayscale(0.55) contrast(1.02) brightness(1); }

  .lede {
    font-size: var(--fs-lede);
    line-height: 1.5;
    color: var(--cream);
    max-width: var(--measure);
  }
  .about__body > p + p { margin-top: var(--sp-5); color: var(--stone); max-width: var(--measure); }

  .stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin-top: clamp(3rem, 6vw, 5rem);
    background: var(--rule);
    border: 1px solid var(--rule);
  }
  .stat {
    background: var(--ink-800);
    padding: clamp(1.25rem, 2.6vw, 2rem);
  }
  .stat__figure {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--gold-500);
  }
  .stat__figure span { font-size: 0.55em; vertical-align: 0.28em; color: var(--gold-600); }
  .stat__figure--word { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.35rem); letter-spacing: -0.02em; }
  .stat__label {
    margin-top: var(--sp-3);
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--stone);
    max-width: 24ch;
  }
  .stat__label em { color: var(--cream); font-style: italic; }

  /* ── featured ──────────────────────────────────────────── */
  .featured__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }
  .featured__media { position: relative; }
  .featured__media img {
    width: 100%;
    border: 1px solid var(--rule);
  }
  .featured__media figcaption,
  .history__media figcaption,
  .project__alt figcaption {
    margin-top: var(--sp-4);
    font-family: var(--font-mono);
    font-size: var(--fs-kicker);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--stone-dim);
  }
  .featured__media figcaption em, .project__alt figcaption em { font-style: italic; color: var(--stone); }

  .factlist { border-top: 1px solid var(--rule-strong); }
  .fact {
    display: grid;
    grid-template-columns: minmax(7.5rem, 10rem) minmax(0, 1fr);
    gap: var(--sp-4);
    padding-block: clamp(0.9rem, 1.7vw, 1.25rem);
    border-bottom: 1px solid var(--rule);
  }
  .fact dt {
    font-family: var(--font-mono);
    font-size: var(--fs-kicker);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-600);
    padding-top: 0.28em;
  }
  .fact dd {
    margin: 0;
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--cream);
  }
  .fact dd span[aria-hidden] { color: var(--gold-600); margin-inline: 0.3em; }
  .fact dd strong { color: var(--gold-400); font-weight: 600; }
  .fact__note { color: var(--stone-dim); font-size: 0.9em; }
  .factlist--tight .fact { grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 1fr); }

  /* ── history ───────────────────────────────────────────── */
  .history { margin-top: clamp(4rem, 8vw, 7rem); }
  .history__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }
  .history__media img {
    width: 100%;
    border: 1px solid var(--rule);
  }
  .history__body { display: grid; gap: clamp(2rem, 4vw, 3rem); }

  .package__lines { margin-top: var(--sp-4); display: grid; gap: var(--sp-3); }
  .package__lines li { color: var(--cream); }
  .package__role {
    display: inline-block;
    min-width: 7.5rem;
    font-family: var(--font-mono);
    font-size: var(--fs-kicker);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--stone-dim);
  }

  .talent {
    margin-top: var(--sp-4);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: var(--sp-2) var(--sp-4);
  }
  .talent li {
    position: relative;
    padding-left: 1.1rem;
    font-size: var(--fs-sm);
    color: var(--cream);
  }
  .talent li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--gold-600);
    font-size: 0.75em;
    top: 0.25em;
  }

  /* ── projects ──────────────────────────────────────────── */
  .project {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }
  .project + .project {
    margin-top: clamp(4rem, 8vw, 7rem);
    padding-top: clamp(4rem, 8vw, 7rem);
    border-top: 1px solid var(--rule);
  }
  .project--reverse .project__poster { order: 2; }
  .project__poster img {
    width: 100%;
    border: 1px solid var(--rule);
  }
  .project__poster--wide img { border-color: var(--rule-strong); }

  .project__title {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--cream);
  }
  .project__strap {
    margin-top: var(--sp-3);
    font-family: var(--font-mono);
    font-size: var(--fs-kicker);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--gold-500);
    line-height: 1.7;
  }
  .project__strap span[aria-hidden] { color: var(--gold-600); margin-inline: 0.35em; }
  .project__note { color: var(--stone-dim); text-transform: none; letter-spacing: 0.04em; }
  .project__body .factlist { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

  .logline {
    margin-top: clamp(1.5rem, 3vw, 2rem);
    padding-left: clamp(1rem, 2.4vw, 1.75rem);
    border-left: 2px solid var(--gold-600);
    font-family: var(--font-display);
    font-size: var(--fs-lede);
    font-style: italic;
    line-height: 1.45;
    color: var(--cream);
    max-width: 42ch;
  }

  .project__alt {
    margin-top: clamp(2rem, 4vw, 3rem);
    max-width: 15rem;
  }
  .project__alt img { width: 100%; border: 1px solid var(--rule); }

  /* ── script cards ──────────────────────────────────────── */
  .script-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: clamp(1.75rem, 3.4vw, 3rem) clamp(1.5rem, 2.6vw, 2.5rem);
  }
  .script-card {
    display: flex;
    flex-direction: column;
  }
  /* Align every row of cards on the same baselines. */
  @supports (grid-template-rows: subgrid) {
    .script-card {
      display: grid;
      grid-row: span 5;
      grid-template-rows: subgrid;
      align-content: start;
      /* a subgrid inherits the parent's row-gap on every internal row — kill it
         and let the elements' own margins set the rhythm */
      row-gap: 0;
    }
    .script-card__body { display: contents; }
    .script-card__title { margin-top: var(--sp-4); }
  }
  .script-card__art {
    position: relative;
    overflow: hidden;
    background: var(--ink-750);
    border: 1px solid var(--rule);
    aspect-ratio: 275 / 393;
  }
  .script-card__art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform var(--dur-slow) var(--ease-out), filter var(--dur) var(--ease-out);
  }
  .script-card__art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(8,8,10,0.55) 100%);
    opacity: 0;
    transition: opacity var(--dur) var(--ease-out);
    pointer-events: none;
  }
  /* light-background posters need an inner edge so they don't float on the dark UI */
  .script-card__art--light { border-color: var(--rule-strong); }
  .script-card__art--light img { filter: saturate(0.96) brightness(0.97); }

  .script-card:hover .script-card__art img { transform: scale(1.035); }
  .script-card:hover .script-card__art { border-color: var(--rule-gold); }
  .script-card:hover .script-card__art::after { opacity: 1; }

  .script-card__body { padding-top: var(--sp-4); }
  .script-card__title {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--cream);
  }
  .script-card__genre {
    margin-top: var(--sp-2);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.19em;
    text-transform: uppercase;
    color: var(--gold-500);
  }
  .script-card__pitch {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--rule);
    font-size: var(--fs-sm);
    color: var(--stone-dim);
  }
  .script-card__pitch span {
    color: var(--cream);
    font-variant-caps: all-small-caps;
    letter-spacing: 0.06em;
    font-weight: 500;
  }
  .script-card__logline {
    margin-top: var(--sp-3);
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--stone);
  }

  /* ── credits ───────────────────────────────────────────── */
  .credits { counter-reset: credit; border-top: 1px solid var(--rule-strong); }
  .credit {
    counter-increment: credit;
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--sp-4) clamp(1rem, 2.6vw, 2.5rem);
    align-items: baseline;
    padding-block: clamp(1.5rem, 3vw, 2.25rem);
    border-bottom: 1px solid var(--rule);
    transition: background var(--dur) var(--ease-out);
  }
  .credit::before {
    content: counter(credit, decimal-leading-zero);
    font-family: var(--font-mono);
    font-size: var(--fs-kicker);
    letter-spacing: 0.1em;
    color: var(--gold-600);
    align-self: start;
    padding-top: 0.5em;
  }
  .credit:hover { background: color-mix(in srgb, var(--gold-500) 4%, transparent); }
  .credit__title {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--cream);
    grid-column: 2;
  }
  .credit__role {
    grid-column: 2;
    margin-top: var(--sp-2);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-500);
  }
  .credit__detail { grid-column: 3; grid-row: 1; color: var(--cream); font-size: var(--fs-sm); }
  .credit__detail span { color: var(--gold-600); margin-inline: 0.3em; }
  .credit__note { grid-column: 3; margin-top: var(--sp-2); color: var(--stone); font-size: var(--fs-sm); }
  .credit__note em { font-style: italic; color: var(--stone); }

  .repped {
    margin-top: clamp(2rem, 4vw, 3rem);
    font-family: var(--font-mono);
    font-size: var(--fs-kicker);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--stone-dim);
  }
  .repped strong { color: var(--cream); font-weight: 500; }

  /* ── contact ───────────────────────────────────────────── */
  .section--contact { border-top: 1px solid var(--rule-gold); }
  .contact { max-width: 52rem; }
  .contact__title {
    margin-top: var(--sp-5);
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 300;
    line-height: 0.98;
    letter-spacing: -0.035em;
    color: var(--cream);
  }
  .contact__lede {
    margin-top: var(--sp-5);
    font-size: var(--fs-lede);
    line-height: 1.5;
    color: var(--stone);
    max-width: 38ch;
  }
  .contact__links {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    display: grid;
    gap: 0;
    border-top: 1px solid var(--rule-strong);
  }
  .contact__links li {
    display: grid;
    grid-template-columns: minmax(6rem, 8rem) minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: baseline;
    padding-block: clamp(1rem, 2vw, 1.5rem);
    border-bottom: 1px solid var(--rule);
  }
  .contact__label {
    font-family: var(--font-mono);
    font-size: var(--fs-kicker);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-600);
  }
  .contact__value {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.75rem);
    font-weight: 400;
    letter-spacing: -0.015em;
    color: var(--cream);
    text-decoration: none;
    overflow-wrap: anywhere;
  }
  a.contact__value {
    background-image: linear-gradient(var(--gold-500), var(--gold-500));
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--dur) var(--ease-out), color var(--dur-fast) var(--ease-out);
    padding-bottom: 2px;
  }
  a.contact__value:hover { color: var(--gold-400); background-size: 100% 1px; }

  .contact__coda {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--fs-lede);
    color: var(--stone-dim);
    max-width: 34ch;
  }

  /* ── footer ────────────────────────────────────────────── */
  .site-footer {
    position: relative;
    z-index: 2;
    background: var(--ink-900);
    border-top: 1px solid var(--rule);
    padding-block: var(--sp-6);
  }
  .site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--sp-3) var(--sp-5);
  }
  .site-footer p {
    font-family: var(--font-mono);
    font-size: var(--fs-kicker);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--stone-dim);
  }
  .site-footer__name span { color: var(--gold-600); margin-inline: 0.3em; }
}

/* ─────────────────────────── MOTION ────────────────────────── */
@layer motion {
  .reveal {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }
  .reveal.is-visible { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
    body::after { animation: none; }
  }
}

/* ─────────────────────── RESPONSIVE ────────────────────────── */
@layer responsive {
  @media (max-width: 1080px) {
    .credit { grid-template-columns: 2.75rem minmax(0, 1fr); }
    .credit__detail { grid-column: 2; grid-row: auto; margin-top: var(--sp-3); }
    .credit__note { grid-column: 2; }
  }

  @media (max-width: 1080px) {
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 900px) {
    .about__grid,
    .featured__grid,
    .history__grid,
    .project { grid-template-columns: minmax(0, 1fr); }
    .about__grid { gap: clamp(2rem, 5vw, 3rem); }
    .portrait { max-width: 20rem; }
    .project--reverse .project__poster { order: 0; }
    .project__poster { max-width: 22rem; }
    .project__poster--wide { max-width: 100%; }
  }

  @media (max-width: 820px) {
    .nav-toggle {
      display: inline-flex;
      align-items: center;
      gap: var(--sp-3);
      font-family: var(--font-mono);
      font-size: 0.625rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--cream);
      padding: 0.6rem 0.9rem;
      border: 1px solid var(--rule-strong);
      border-radius: var(--radius);
    }
    .nav-toggle__bars { display: grid; gap: 4px; width: 14px; }
    .nav-toggle__bars i {
      display: block; height: 1px; background: var(--gold-500);
      transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
    }
    .nav-toggle[aria-expanded="true"] .nav-toggle__bars i:first-child { transform: translateY(2.5px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] .nav-toggle__bars i:last-child { transform: translateY(-2.5px) rotate(-45deg); }

    .nav-list {
      position: fixed;
      inset: 4.5rem 0 auto 0;
      z-index: var(--z-nav);
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      background: var(--ink-900);
      border-block: 1px solid var(--rule);
      padding: var(--sp-3) var(--shell-pad) var(--sp-6);
      transform-origin: top;
      display: none;
    }
    .nav-list.is-open { display: flex; }
    .nav-list li { border-bottom: 1px solid var(--rule); }
    .nav-list li:last-child { border-bottom: 0; padding-top: var(--sp-4); }
    .nav-list a { display: block; padding-block: var(--sp-4); font-size: 0.75rem; }
    .nav-list a::after { display: none; }
    .nav-list .nav-cta { text-align: center; }
  }

  @media (max-width: 560px) {
    .stats { grid-template-columns: minmax(0, 1fr); }
    .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
    .fact, .factlist--tight .fact { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
    .fact dt { padding-top: 0; }
    .contact__links li { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
    .genre-strip li { padding-inline: 0.7rem; }
    .script-grid { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
    .hero__name { text-wrap: balance; }
    .hero__name-break { display: block; height: 0; }
  }

  @media (max-width: 380px) {
    .script-grid { grid-template-columns: minmax(0, 1fr); }
    .wordmark__text { display: none; }
  }
}

/* ────────────────────────── UTILITIES ──────────────────────── */
@layer utilities {
  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}