@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

  :root{
    --bg: #0a0a0e;
    --panel: #131318;
    --panel-alt: #1b1b22;
    --line: #26262f;
    --text: #f2f1ed;
    --muted: #8a8a96;
    --violet: #8b5cf6;
    --magenta: #ec4899;
    --amber: #ffb238;
    --grad: linear-gradient(90deg, var(--violet), var(--magenta));
    --radius: 14px;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }

  html{ scroll-behavior:smooth; }

  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter', sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  h1,h2,h3,.display{ font-family:'Space Grotesk', sans-serif; letter-spacing:-0.02em; }

  .mono{ font-family:'IBM Plex Mono', monospace; }

  a{ color:inherit; text-decoration:none; }

  img, video{ max-width:100%; display:block; }

  ::selection{ background:var(--violet); color:#fff; }

  :focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }

  .wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }

  /* ---------- scroll progress (timecode motif) ---------- */
  .scrub-track{
    position:fixed; top:0; left:0; right:0; height:3px;
    background:var(--panel-alt); z-index:200;
  }
  .scrub-fill{
    height:100%; width:0%; background:var(--grad);
  }

  /* ---------- nav ---------- */
  nav{
    position:sticky; top:0; z-index:100;
    background:rgba(10,10,14,0.85); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  nav .wrap{
    display:flex; align-items:center; justify-content:space-between;
    height:76px;
  }
  .logo{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.2rem; }
  .logo span{ color:var(--violet); }
  .back-link{
    display:flex; align-items:center; gap:8px;
    font-size:0.9rem; color:var(--muted);
    transition:color .2s;
  }
  .back-link:hover{ color:var(--text); }
  .nav-cta{
    font-family:'IBM Plex Mono',monospace; font-size:0.8rem;
    padding:10px 18px; border-radius:999px;
    background:var(--grad); color:#0a0a0e; font-weight:500;
  }

  /* ---------- hero ---------- */
  header.hero{
    padding:90px 0 40px;
    border-bottom:1px solid var(--line);
  }
  .eyebrow{
    font-family:'IBM Plex Mono',monospace; font-size:0.8rem; color:var(--amber);
    display:flex; align-items:center; gap:10px; margin-bottom:22px;
  }
  .eyebrow::before{
    content:''; width:8px; height:8px; border-radius:50%;
    background:var(--amber); box-shadow:0 0 0 4px rgba(255,178,56,.15);
  }
  .hero h1{
    font-size:clamp(2.4rem, 6vw, 4.6rem);
    font-weight:700; line-height:1.02;
    max-width:16ch;
  }
  .hero-sub{
    margin-top:22px; max-width:56ch; color:var(--muted); font-size:1.05rem;
  }

  /* timecode ruler — signature element */
  .ruler{
    margin-top:56px; position:relative; height:52px;
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    overflow:hidden;
  }
  .ruler-ticks{
    display:flex; height:100%; align-items:flex-end;
  }
  .tick{
    flex:1 0 auto; min-width:64px; height:100%;
    display:flex; align-items:flex-end; justify-content:flex-start;
    border-left:1px solid var(--line);
    padding-bottom:8px; padding-left:6px;
    font-family:'IBM Plex Mono',monospace; font-size:0.68rem; color:var(--muted);
  }
  .playhead{
    position:absolute; top:0; bottom:0; width:2px; background:var(--magenta);
    box-shadow:0 0 12px var(--magenta);
    animation:scrub 9s ease-in-out infinite;
  }
  .playhead::before{
    content:''; position:absolute; top:-5px; left:50%; transform:translateX(-50%);
    width:9px; height:9px; border-radius:50%; background:var(--magenta);
  }
  @keyframes scrub{
    0%{ left:0%; } 50%{ left:98%; } 100%{ left:0%; }
  }
  @media (prefers-reduced-motion: reduce){
    .playhead{ animation:none; left:0%; }
    html{ scroll-behavior:auto; }
  }

  /* ---------- meta / export panel ---------- */
  section.meta{ padding:56px 0; border-bottom:1px solid var(--line); }
  .meta-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
    gap:28px 40px;
  }
  .meta-field .label{
    font-family:'IBM Plex Mono',monospace; font-size:0.7rem; letter-spacing:.08em;
    color:var(--muted); text-transform:uppercase; margin-bottom:8px;
    display:flex; align-items:baseline; gap:6px;
  }
  .meta-field .label::after{
    content:''; flex:1; border-bottom:1px dotted var(--line); margin-bottom:3px;
  }
  .meta-field .value{ font-size:1.05rem; font-weight:500; }
  .meta-field .value.placeholder{ color:var(--muted); font-weight:400; font-style:italic; }

  /* ---------- featured cut ---------- */
  section.featured{ padding:70px 0; }
  .section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:28px; flex-wrap:wrap; gap:10px; }
  .section-head h2{ font-size:1.7rem; }
  .section-head .hint{ font-family:'IBM Plex Mono',monospace; font-size:0.75rem; color:var(--muted); }

  .player{
    position:relative; aspect-ratio:16/9; border-radius:var(--radius);
    background:
      radial-gradient(circle at 30% 20%, rgba(139,92,246,.18), transparent 55%),
      radial-gradient(circle at 75% 80%, rgba(236,72,153,.16), transparent 55%),
      var(--panel);
    border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .player video{ width:100%; height:100%; object-fit:cover; display:none; }
  .player.has-video video{ display:block; }
  .player.has-video .placeholder-inner{ display:none; }
  .placeholder-inner{ text-align:center; color:var(--muted); }
  .play-btn{
    width:76px; height:76px; border-radius:50%;
    background:var(--grad); display:flex; align-items:center; justify-content:center;
    margin:0 auto 18px; font-size:1.4rem; color:#0a0a0e;
  }
  .placeholder-inner .label{ font-family:'IBM Plex Mono',monospace; font-size:0.8rem; }

  /* ---------- filmstrip gallery ---------- */
  section.gallery{ padding:70px 0 90px; }
  .filmstrip{
    display:flex; gap:18px; overflow-x:auto; padding:14px 4px 26px;
    scrollbar-width:thin; scrollbar-color:var(--panel-alt) transparent;
  }
  .filmstrip::-webkit-scrollbar{ height:6px; }
  .filmstrip::-webkit-scrollbar-thumb{ background:var(--panel-alt); border-radius:4px; }

  .frame{
    flex:0 0 auto; width:200px;
    background:var(--panel); border:1px solid var(--line); border-radius:10px;
    overflow:hidden;
  }
  .sprockets{ display:flex; justify-content:space-between; padding:6px 10px; }
  .sprockets span{ width:6px; height:6px; border-radius:50%; background:var(--line); }
  .frame-thumb{
    aspect-ratio:9/16; margin:0 10px;
    background:linear-gradient(160deg, var(--panel-alt), #101015);
    border-radius:6px; display:flex; align-items:center; justify-content:center;
    color:var(--muted); font-size:1.4rem;
  }
  .frame-label{
    padding:10px 12px 12px; font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--muted);
  }

  /* ---------- about / description ---------- */
  section.story{ padding:70px 0; border-top:1px solid var(--line); }
  .story-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; }
  .story h2{ font-size:1.7rem; margin-bottom:20px; }
  .story p{ color:var(--muted); margin-bottom:16px; }
  .tools{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
  .tools span{
    font-family:'IBM Plex Mono',monospace; font-size:0.78rem;
    padding:8px 14px; border-radius:999px; border:1px solid var(--line); color:var(--text);
  }

  @media (max-width:780px){
    .story-grid{ grid-template-columns:1fr; }
  }

  /* ---------- next project / cta ---------- */
  section.cta{
    padding:90px 0; text-align:center; border-top:1px solid var(--line);
  }
  section.cta h2{ font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:20px; }
  .cta-row{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:28px; }
  .btn{
    padding:14px 28px; border-radius:999px; font-weight:500; font-size:0.95rem;
  }
  .btn-primary{ background:var(--grad); color:#0a0a0e; }
  .btn-ghost{ border:1px solid var(--line); color:var(--text); }

  footer{ padding:34px 0; border-top:1px solid var(--line); text-align:center; color:var(--muted); font-size:0.85rem; }