:root{
    --bg:#191919;
    --bg-2:#212123;
    --panel:#26262A;
    --panel-2:#2E2E33;
    --line:rgba(255,255,255,.13);
    --line-2:rgba(255,255,255,.24);
    --ink:#FBFAF7;
    --dim:#A8A39A;
    --dim-2:#7C776E;

    --red:#E8352A;
    --yellow:#F5E11A;
    --blue:#1B65C9;
    --cyan:#2BB9E0;
    --green:#2FB84B;
    --wkw-jade:#1DB98A;
    --wkw-amber:#F0982C;
    --wkw-magenta:#D33E7E;

    --display:'Fraunces', Georgia, serif;
    --body:'Jost', 'Helvetica Neue', Arial, sans-serif;
    --mono:'IBM Plex Mono', Menlo, monospace;
    --max:1240px;
    --ease:cubic-bezier(.16,1,.3,1);
    --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{
    background:var(--bg);color:var(--ink);
    font-family:var(--body);font-weight:300;line-height:1.72;letter-spacing:.012em;
    font-size:15px;
    overflow-x:hidden;-webkit-font-smoothing:antialiased;
  }
  /* ---------- projector: moving grain + color flares ---------- */
  .film-fx{position:fixed;inset:0;z-index:399;pointer-events:none;overflow:hidden}
  .grain-layer{
    position:absolute;top:-60%;left:-60%;width:220%;height:220%;
    background-image:var(--grain);background-repeat:repeat;
    opacity:.17;mix-blend-mode:overlay;
    animation:grainMove .48s steps(1) infinite;
    will-change:transform;
  }
  .grain-layer.slow{
    opacity:.08;mix-blend-mode:soft-light;
    animation:grainMove 1.1s steps(1) infinite reverse;
  }
  @keyframes grainMove{
    0%  {transform:translate(0,0)}
    10% {transform:translate(-4%,-6%)}
    20% {transform:translate(-9%,3%)}
    30% {transform:translate(5%,-8%)}
    40% {transform:translate(-3%,9%)}
    50% {transform:translate(-8%,4%)}
    60% {transform:translate(7%,0)}
    70% {transform:translate(0,7%)}
    80% {transform:translate(3%,-4%)}
    90% {transform:translate(-6%,6%)}
    100%{transform:translate(0,0)}
  }

  /* cursor light */
  .cursor-glow{
    position:absolute;top:0;left:0;width:150px;height:150px;border-radius:50%;
    margin:-75px 0 0 -75px;pointer-events:none;
    background:#E8352A;filter:blur(38px);mix-blend-mode:screen;
    opacity:0;transition:opacity .6s ease;will-change:transform;
  }
  .cursor-glow.lit{opacity:.32}
  .flares{position:absolute;inset:0;mix-blend-mode:screen}
  .flares span{position:absolute;display:block;opacity:0;will-change:opacity,transform}
  .flares .f1{
    width:70vw;height:70vw;left:-18vw;top:-14vw;
    background:radial-gradient(circle, rgba(232,53,42,.55), rgba(232,53,42,.16) 42%, transparent 66%);
    animation:flare 19s 3s ease-in-out infinite;
  }
  .flares .f2{
    width:58vw;height:58vw;right:-14vw;top:22vh;
    background:radial-gradient(circle, rgba(43,185,224,.5), rgba(27,101,201,.16) 44%, transparent 68%);
    animation:flare 26s 11s ease-in-out infinite;
  }
  .flares .f3{
    width:64vw;height:64vw;left:8vw;bottom:-22vw;
    background:radial-gradient(circle, rgba(245,225,26,.42), rgba(245,225,26,.12) 40%, transparent 66%);
    animation:flare 23s 17s ease-in-out infinite;
  }
  .flares .f4{
    width:44vw;height:44vw;right:16vw;bottom:6vh;
    background:radial-gradient(circle, rgba(47,184,75,.42), transparent 62%);
    animation:flare 31s 25s ease-in-out infinite;
  }
  @keyframes flare{
    0%,72%,100%{opacity:0;transform:translate(0,0) scale(.94)}
    78%{opacity:.55;transform:translate(1.5vw,-1vh) scale(1)}
    84%{opacity:.34;transform:translate(2.5vw,-1.6vh) scale(1.05)}
    92%{opacity:0;transform:translate(4vw,-2.4vh) scale(1.1)}
  }

  /* rare splice flash — a frame of light through the gate */
  .gate{
    position:absolute;inset:0;opacity:0;mix-blend-mode:screen;
    background:linear-gradient(105deg, rgba(245,225,26,.16), rgba(232,53,42,.12) 45%, rgba(43,185,224,.14));
    animation:gate 37s 14s linear infinite;
  }
  @keyframes gate{
    0%,96.4%,100%{opacity:0}
    96.7%{opacity:.85}
    97%{opacity:.15}
    97.3%{opacity:.6}
    97.8%{opacity:0}
  }
  img{display:block}
  ::selection{background:var(--yellow);color:#111}
  a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:2px}

  .wrap{max-width:var(--max);margin:0 auto;padding:0 2.2rem}
  .mono{font-family:var(--mono);letter-spacing:.26em;text-transform:uppercase;font-size:.58rem;color:var(--dim)}

  /* ---------- the five-band mark ---------- */
  /* a small set with rabbit ears, mostly holding signal */
  .tv{
    position:relative;display:inline-block;flex:0 0 auto;
    width:26px;height:18px;
    background:#17171A;border:1px solid rgba(255,255,255,.3);border-radius:2.5px;
    padding:1.5px;box-sizing:border-box;
    animation:tvDropout 43s steps(1,end) infinite;
  }
  .tv::before,.tv::after{
    content:'';position:absolute;bottom:100%;left:50%;
    width:1px;height:9px;background:var(--dim-2);border-radius:1px;
    transform-origin:bottom center;
  }
  .tv::before{transform:rotate(-33deg)}
  .tv::after{transform:rotate(33deg)}
  .tv .scr{
    position:relative;display:flex;width:100%;height:100%;
    border-radius:1.5px;overflow:hidden;background:#0B0B0C;
  }
  .tv .scr::after{
    content:'';position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.32;
    background:repeating-linear-gradient(to bottom, rgba(0,0,0,.6) 0 1px, transparent 1px 2px);
  }
  .tv i{
    display:block;flex:1;height:100%;
    animation-timing-function:steps(1,end);animation-iteration-count:infinite;animation-duration:19s;
    will-change:background-color;
  }
  .tv i:nth-child(1){background-color:var(--yellow);animation-name:tvCh1}
  .tv i:nth-child(2){background-color:var(--cyan);animation-name:tvCh2}
  .tv i:nth-child(3){background-color:var(--green);animation-name:tvCh3}
  .tv i:nth-child(4){background-color:var(--wkw-magenta);animation-name:tvCh4}
  .tv i:nth-child(5){background-color:var(--red);animation-name:tvCh5}
  .tv .static{
    position:absolute;inset:-40%;z-index:2;pointer-events:none;opacity:0;
    background-image:var(--grain);background-size:90px 90px;mix-blend-mode:screen;
    animation:tvStatic 19s steps(1,end) infinite;
  }

  /* ~19s of steady bars, then a burst of lost signal */
  @keyframes tvCh1{
    0%,55%{background-color:var(--yellow)}
    55.7%{background-color:var(--wkw-magenta)} 56.4%{background-color:var(--blue)}
    57.2%{background-color:var(--yellow)}
    88%{background-color:var(--yellow)} 88.7%{background-color:#F4F2EE}
    89.3%{background-color:var(--wkw-jade)} 90.2%{background-color:var(--red)}
    91.4%,100%{background-color:var(--yellow)}
  }
  @keyframes tvCh2{
    0%,55%{background-color:var(--cyan)}
    55.7%{background-color:var(--wkw-amber)} 56.6%{background-color:var(--red)}
    57.2%{background-color:var(--cyan)}
    88%{background-color:var(--cyan)} 88.9%{background-color:var(--wkw-magenta)}
    89.8%{background-color:#0F0F10} 90.6%{background-color:var(--yellow)}
    91.4%,100%{background-color:var(--cyan)}
  }
  @keyframes tvCh3{
    0%,55%{background-color:var(--green)}
    55.9%{background-color:var(--blue)} 56.8%{background-color:var(--wkw-magenta)}
    57.2%{background-color:var(--green)}
    88%{background-color:var(--green)} 88.7%{background-color:var(--wkw-amber)}
    89.6%{background-color:#F4F2EE} 90.4%{background-color:var(--cyan)}
    91.4%,100%{background-color:var(--green)}
  }
  @keyframes tvCh4{
    0%,55%{background-color:var(--wkw-magenta)}
    55.7%{background-color:var(--wkw-jade)} 56.5%{background-color:var(--yellow)}
    57.2%{background-color:var(--wkw-magenta)}
    88%{background-color:var(--wkw-magenta)} 89%{background-color:var(--blue)}
    89.9%{background-color:var(--wkw-amber)} 90.7%{background-color:#0F0F10}
    91.4%,100%{background-color:var(--wkw-magenta)}
  }
  @keyframes tvCh5{
    0%,55%{background-color:var(--red)}
    56%{background-color:var(--cyan)} 56.7%{background-color:var(--wkw-jade)}
    57.2%{background-color:var(--red)}
    88%{background-color:var(--red)} 88.8%{background-color:var(--yellow)}
    89.7%{background-color:var(--wkw-magenta)} 90.5%{background-color:#F4F2EE}
    91.4%,100%{background-color:var(--red)}
  }
  /* snow, only while the signal is out */
  @keyframes tvStatic{
    0%,55%{opacity:0}
    55.7%{opacity:.8;background-position:0 0}
    56.3%{opacity:.55;background-position:-9px 5px}
    56.9%{opacity:.85;background-position:7px -6px}
    57.2%{opacity:0}
    88%{opacity:0}
    88.6%{opacity:.9;background-position:4px 3px}
    89.2%{opacity:.5;background-position:-8px -5px}
    89.9%{opacity:.95;background-position:11px 7px}
    90.6%{opacity:.45;background-position:-5px 2px}
    91.4%,100%{opacity:0}
  }
  /* rarer still: the whole picture rolls */
  @keyframes tvDropout{
    0%,93%{transform:none;filter:none}
    93.3%{transform:translateX(-1px) scaleY(1.14);filter:brightness(1.5) saturate(.3)}
    93.8%{transform:translateX(2px) scaleY(.88);filter:brightness(.45)}
    94.3%{transform:translateX(-1px);filter:contrast(2.2) hue-rotate(30deg)}
    94.8%{transform:scaleY(1.08);filter:brightness(1.3) saturate(1.5)}
    95.3%,100%{transform:none;filter:none}
  }

  /* ---------- misregistration type ---------- */
  .fringe{
    text-shadow:
      -.022em -.012em 0 var(--red),
       .020em  .014em 0 var(--blue),
       .012em -.018em 0 var(--yellow);
  }
  .fringe-settle{animation:settle 1.6s .5s both var(--ease)}
  @keyframes settle{
    0%{text-shadow:-.10em -.05em 0 var(--red), .09em .06em 0 var(--blue), .05em -.08em 0 var(--yellow)}
    100%{text-shadow:-.022em -.012em 0 var(--red), .020em .014em 0 var(--blue), .012em -.018em 0 var(--yellow)}
  }
  .fringe-hover{transition:text-shadow .35s var(--ease)}
  .fringe-hover:hover{
    text-shadow:-.018em -.01em 0 var(--red), .016em .012em 0 var(--cyan);
  }

  /* ---------- progress + nav ---------- */
  .progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;background:transparent;display:flex}
  .progress .bar{
    height:100%;width:100%;transform:scaleX(0);transform-origin:left;
    background:linear-gradient(to right,
      var(--blue) 0 20%, var(--cyan) 20% 40%, var(--green) 40% 60%, var(--yellow) 60% 80%, var(--red) 80% 100%);
  }

  nav{
    position:fixed;top:0;left:0;right:0;z-index:150;
    display:flex;align-items:center;justify-content:space-between;
    padding:1.1rem 2.2rem;
    background:rgba(25,25,25,0);backdrop-filter:blur(0px);
    border-bottom:1px solid transparent;
    transition:background .45s var(--ease), border-color .45s, backdrop-filter .45s, transform .45s var(--ease);
  }
  nav.solid{background:rgba(25,25,25,.86);backdrop-filter:blur(16px) saturate(1.2);border-color:var(--line)}
  nav.up{transform:translateY(-105%)}
  .nav-name{
    font-family:var(--display);font-weight:500;font-size:1.06rem;letter-spacing:.05em;
    color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:.75rem;
  }
  .nav-right{display:flex;align-items:center;gap:2rem}
  .nav-links{display:flex;gap:1.75rem;list-style:none}
  .nav-links a{
    font-family:var(--body);font-weight:400;font-size:.67rem;letter-spacing:.2em;text-transform:uppercase;
    color:var(--dim);text-decoration:none;position:relative;padding-bottom:5px;transition:color .3s;
  }
  .nav-links a:hover{color:var(--ink)}
  .nav-links a::after{
    content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
    transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
  }
  .nav-links li:nth-child(1) a::after{background:var(--blue)}
  .nav-links li:nth-child(2) a::after{background:var(--cyan)}
  .nav-links li:nth-child(3) a::after{background:var(--green)}
  .nav-links li:nth-child(4) a::after{background:var(--yellow)}
  .nav-links li:nth-child(5) a::after{background:var(--red)}
  .nav-links li:nth-child(6) a::after{background:var(--blue)}
  .nav-links a:hover::after{transform:scaleX(1)}
  .nav-cta{
    font-family:var(--body);font-weight:500;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
    color:#111;background:var(--ink);text-decoration:none;
    padding:.7rem 1.25rem;border-radius:2px;position:relative;
    transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;
  }
  .nav-cta:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--red), 6px 6px 0 var(--yellow)}

  /* ---------- hero ---------- */
  .hero{
    position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;
    padding:8.5rem 0 5rem;overflow:hidden;background:#0F0F10;
  }
  .hero-bg{position:absolute;inset:-10% 0 -10% 0;z-index:0;will-change:transform;overflow:hidden}

  /* drifting light — five colors through the gate */
  .aurora{position:absolute;inset:0}
  .aurora span{
    position:absolute;display:block;border-radius:50%;
    filter:blur(92px);mix-blend-mode:screen;will-change:transform;
  }
  .aurora .a1{
    width:62vw;height:62vw;left:-12%;top:-18%;opacity:.62;
    background:radial-gradient(circle, var(--red), rgba(232,53,42,.35) 45%, transparent 70%);
    animation:drift1 30s ease-in-out infinite alternate;
  }
  .aurora .a2{
    width:56vw;height:56vw;right:-10%;top:-6%;opacity:.6;
    background:radial-gradient(circle, var(--blue), rgba(27,101,201,.3) 48%, transparent 72%);
    animation:drift2 37s ease-in-out infinite alternate;
  }
  .aurora .a3{
    width:50vw;height:50vw;left:18%;bottom:-22%;opacity:.55;
    background:radial-gradient(circle, var(--yellow), rgba(245,225,26,.28) 45%, transparent 70%);
    animation:drift3 33s ease-in-out infinite alternate;
  }
  .aurora .a4{
    width:52vw;height:52vw;right:6%;bottom:-14%;opacity:.55;
    background:radial-gradient(circle, var(--cyan), rgba(43,185,224,.3) 46%, transparent 72%);
    animation:drift2 27s ease-in-out infinite alternate-reverse;
  }
  .aurora .a5{
    width:38vw;height:38vw;left:42%;top:14%;opacity:.45;
    background:radial-gradient(circle, var(--green), transparent 66%);
    animation:drift1 41s ease-in-out infinite alternate-reverse;
  }
  @keyframes drift1{
    from{transform:translate(0,0) scale(1)}
    to{transform:translate(9vw,7vh) scale(1.18)}
  }
  @keyframes drift2{
    from{transform:translate(0,0) scale(1.1)}
    to{transform:translate(-8vw,6vh) scale(.92)}
  }
  @keyframes drift3{
    from{transform:translate(-4vw,2vh) scale(.95)}
    to{transform:translate(7vw,-6vh) scale(1.2)}
  }

  /* uneven shafts of projector light */
  .vbands{position:absolute;inset:0;mix-blend-mode:overlay}
  .vbands i{
    position:absolute;top:-12%;bottom:-12%;display:block;
    filter:blur(30px);opacity:.18;will-change:transform,opacity;
  }
  .vbands i:nth-child(1){
    left:2%;width:24%;
    background:linear-gradient(to right, transparent, var(--red) 55%, transparent);
    animation:sway 24s ease-in-out infinite alternate;
  }
  .vbands i:nth-child(2){
    left:44%;width:9%;
    background:linear-gradient(to right, transparent, var(--yellow) 50%, transparent);
    animation:sway 31s -8s ease-in-out infinite alternate-reverse;
  }
  .vbands i:nth-child(3){
    left:66%;width:32%;
    background:linear-gradient(to right, transparent, var(--cyan) 45%, transparent);
    animation:sway 28s -15s ease-in-out infinite alternate;
  }
  @keyframes sway{
    from{transform:translateX(-2.5vw) scaleX(1);opacity:.10}
    to{transform:translateX(3.5vw) scaleX(1.15);opacity:.26}
  }

  .hero-scrim{
    position:absolute;inset:0;z-index:1;
    background:
      linear-gradient(to top, #0F0F10 0%, rgba(15,15,16,.92) 16%, rgba(15,15,16,.55) 42%, rgba(15,15,16,.34) 70%, rgba(15,15,16,.66) 100%),
      radial-gradient(120% 90% at 50% 50%, transparent 40%, rgba(15,15,16,.55) 100%);
  }
  /* the copy layer sits above the reel, so let the pointer pass through it */
  .hero-inner{position:relative;z-index:3;width:100%;pointer-events:none}
  .hero-copy{
    pointer-events:auto;max-width:720px;margin:0 auto;text-align:center;
  }
  .hero-rule{width:46px;height:1px;background:var(--line-2);margin:0 auto 1.6rem}
  .hero-eyebrow{display:flex;align-items:center;justify-content:center;gap:.9rem;margin-bottom:1.5rem;animation:rise .9s .2s both}
  .hero h1{
    font-family:var(--display);font-weight:300;
    font-optical-sizing:none;font-variation-settings:'opsz' 96,'SOFT' 0,'WONK' 0;
    font-size:clamp(3.4rem,12vw,9.5rem);line-height:.66;letter-spacing:-.018em;
    /* two lines locked together, the surname centred under the given name */
    width:fit-content;margin:0 auto 2rem;text-align:center;
  }
  .hero h1 span{
    display:block;overflow:hidden;
    padding:.05em .18em .28em .24em;
    margin:0 -.18em -.33em -.24em;
  }
  .hero h1 span + span{margin-top:-.13em}
  .hero h1.settled span{overflow:visible}
  .hero h1 span i{
    display:block;font-style:normal;line-height:1.02;
    animation:slideUp 1.1s .3s both var(--ease);
  }
  .hero h1 span:nth-child(2) i{animation-delay:.45s}
  .hero h1 em{font-style:italic;font-weight:300}
  @keyframes slideUp{from{transform:translateY(105%)}to{transform:translateY(0)}}
  @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
  .hero-lede{max-width:56ch;margin:0 auto 2.4rem;font-size:.96rem;color:#E2DED6;animation:rise .9s 1s both}
  .hero-actions{display:flex;justify-content:center;gap:1.1rem;flex-wrap:wrap;animation:rise .9s 1.15s both}
  .btn{
    font-family:var(--body);font-weight:500;font-size:.67rem;letter-spacing:.22em;text-transform:uppercase;
    padding:1rem 1.9rem;border-radius:2px;text-decoration:none;cursor:pointer;border:1px solid transparent;
    transition:transform .32s var(--ease), box-shadow .32s var(--ease), background .3s, color .3s, border-color .3s;
    display:inline-flex;align-items:center;gap:.6rem;
  }
  .btn-solid{background:var(--ink);color:#111}
  .btn-solid:hover{transform:translate(-3px,-3px);box-shadow:4px 4px 0 var(--red), 8px 8px 0 var(--yellow)}
  .btn-ghost{border-color:var(--line-2);color:var(--ink);background:transparent}
  .btn-ghost:hover{transform:translate(-3px,-3px);border-color:var(--cyan);box-shadow:4px 4px 0 var(--blue), 8px 8px 0 var(--cyan)}

  /* ---------- hero: a reel of set photos running down the frame ---------- */
  .filmstrip{
    position:absolute;top:72px;bottom:0;z-index:2;
    width:clamp(132px,11.5vw,180px);overflow:hidden;pointer-events:auto;cursor:ns-resize;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 14%, #000 84%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0, #000 14%, #000 84%, transparent 100%);
  }
  .strip-track{
    position:absolute;left:0;right:0;top:0;
    display:flex;flex-direction:column;gap:4px;
    padding:4px 17px;
    /* film base takes its colour from the light behind it */
    background-color:#2a1a14;
    background-image:
      linear-gradient(180deg, rgba(255,236,208,.05), transparent 26%, rgba(0,0,0,.16) 64%, transparent),
      linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,.18) 17%, rgba(255,240,220,.05) 50%, rgba(0,0,0,.2) 83%, rgba(0,0,0,.62));
    /* the perforations are punched through the stock, not drawn on it */
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='100' height='14' fill='%23fff'/%3E%3Crect x='2.6' y='3.7' width='7.4' height='6.6' rx='2' fill='%23000'/%3E%3Crect x='90' y='3.7' width='7.4' height='6.6' rx='2' fill='%23000'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='100' height='14' fill='%23fff' mask='url(%23m)'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='100' height='14' fill='%23fff'/%3E%3Crect x='2.6' y='3.7' width='7.4' height='6.6' rx='2' fill='%23000'/%3E%3Crect x='90' y='3.7' width='7.4' height='6.6' rx='2' fill='%23000'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='100' height='14' fill='%23fff' mask='url(%23m)'/%3E%3C/svg%3E");
    -webkit-mask-repeat:repeat-y;mask-repeat:repeat-y;
    -webkit-mask-size:100% 14px;mask-size:100% 14px;
    animation:filmTone 46s ease-in-out infinite;
    will-change:transform;
  }
  /* faint rails where the perforation area meets the image area */
  .strip-track::before,.strip-track::after{
    content:'';position:absolute;top:0;bottom:0;width:1px;
    background:linear-gradient(180deg, transparent, rgba(226,196,150,.10) 12%, rgba(226,196,150,.10) 88%, transparent);
  }
  .strip-track::before{left:14px}
  .strip-track::after{right:14px}
  .filmstrip.left{left:4%}
  .filmstrip.right{right:4%}
  .frame{background:#120c09;line-height:0;position:relative}
  /* the frame line between exposures */
  .frame + .frame::before{
    content:'';position:absolute;left:0;right:0;top:-6px;height:6px;
    background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25));
  }
  .frame img{
    display:block;width:100%;height:auto;
    /* held back into the dark until you touch the reel */
    filter:saturate(.5) brightness(.8) contrast(.96);
    transition:filter .8s var(--ease);
  }
  .filmstrip:hover .frame img{filter:none}
  /* a veil over the whole strip, lifted on hover */
  .filmstrip::after{
    content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(180deg, rgba(20,32,58,.58), rgba(24,40,72,.44) 40%, rgba(18,28,52,.58));
    transition:opacity .8s var(--ease);
  }
  .filmstrip:hover::after{opacity:0}
  /* the stock drifts through the same colours as the light behind it */
  @keyframes filmTone{
    0%,100%{background-color:#2e1a14}
    20%{background-color:#2f2712}
    40%{background-color:#17281c}
    60%{background-color:#13242b}
    80%{background-color:#171d2e}
  }
  @media (max-width:1280px){
    .filmstrip.left{display:none}
  }
  @media (max-width:1080px){
    .filmstrip{display:none}
  }
  @media (prefers-reduced-motion:reduce){
    .strip-track{animation:none}
  }

  /* a quiet nudge that there is more below */
  .scroll-cue{
    display:flex;flex-direction:column;align-items:center;gap:.55rem;
    margin:3rem auto 0;
    font-family:var(--body);font-weight:400;font-size:.53rem;letter-spacing:.3em;text-transform:uppercase;
    color:var(--dim-2);
    animation:rise .9s 1.8s both;
    transition:opacity .6s ease, transform .6s var(--ease);
  }
  .scroll-cue i{
    display:block;width:1px;height:30px;
    background:linear-gradient(var(--wkw-amber), rgba(240,152,44,0));
    animation:cueDrift 2.6s ease-in-out infinite;
  }
  .scroll-cue b{
    display:block;width:6px;height:6px;margin-top:-.5rem;
    border-right:1px solid var(--dim-2);border-bottom:1px solid var(--dim-2);
    transform:rotate(45deg);
    animation:cueNudge 2.6s ease-in-out infinite;
  }
  @keyframes cueDrift{0%,100%{opacity:.3;transform:scaleY(.6);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}
  @keyframes cueNudge{0%,100%{opacity:.35;transform:rotate(45deg) translate(0,0)}50%{opacity:.9;transform:rotate(45deg) translate(2px,2px)}}
  /* it retires the moment you start scrolling */
  .hero.scrolled .scroll-cue{opacity:0;transform:translateY(8px)}
  @media (prefers-reduced-motion:reduce){
    .scroll-cue i,.scroll-cue b{animation:none}
  }
  /* ---------- ticker ---------- */
  .ticker{
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    background:var(--bg-2);overflow:hidden;padding:1rem 0;position:relative;
  }
  .ticker::before,.ticker::after{content:'';position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none}
  .ticker::before{left:0;background:linear-gradient(to right,var(--bg-2),transparent)}
  .ticker::after{right:0;background:linear-gradient(to left,var(--bg-2),transparent)}
  .ticker-track{display:flex;width:max-content;animation:slide 46s linear infinite}
  .ticker:hover .ticker-track{animation-play-state:paused}
  @keyframes slide{to{transform:translateX(-50%)}}
  .ticker-track span{
    font-family:var(--display);font-weight:400;font-size:1rem;color:var(--dim);
    padding:0 2rem 0 0;white-space:nowrap;display:flex;align-items:center;gap:2rem;
    transition:color .3s;
  }
  .ticker-track span::after{content:'';width:7px;height:7px;border-radius:50%}
  .ticker-track span:nth-child(5n+1)::after{background:var(--blue)}
  .ticker-track span:nth-child(5n+2)::after{background:var(--cyan)}
  .ticker-track span:nth-child(5n+3)::after{background:var(--green)}
  .ticker-track span:nth-child(5n+4)::after{background:var(--yellow)}
  .ticker-track span:nth-child(5n+5)::after{background:var(--red)}
  .ticker-track span:hover{color:var(--ink)}

  /* ---------- page banner: a title card, not a section head ---------- */
  .page-banner{
    position:relative;overflow:hidden;min-height:66svh;
    display:flex;align-items:center;justify-content:center;text-align:center;
    padding:11rem 0 12rem;border-bottom:1px solid var(--line);background:#121215;
  }
  .page-banner::before{
    content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
    background:
      radial-gradient(58% 120% at 82% 6%, rgba(43,185,224,.15), transparent 62%),
      radial-gradient(52% 110% at 6% 92%, rgba(232,53,42,.13), transparent 60%);
  }
  .page-banner::after{
    content:'';position:absolute;left:0;right:0;bottom:0;height:72%;pointer-events:none;z-index:2;
    background:linear-gradient(to top, var(--bg) 8%, rgba(19,19,22,.85) 42%, transparent);
  }
  .page-banner .wrap{position:relative;z-index:3}
  .page-banner .eyebrow{justify-content:center;margin-bottom:1.6rem}
  .pb-rule{width:46px;height:1px;background:var(--line-2);margin:0 auto 1.7rem}
  .page-banner h1{
    font-family:var(--display);font-weight:300;
    font-optical-sizing:none;font-variation-settings:'opsz' 84,'SOFT' 0,'WONK' 0;
    font-size:clamp(2.7rem,7.6vw,5.6rem);line-height:1.0;letter-spacing:-.02em;
    max-width:16ch;margin:0 auto;
  }
  .page-banner h1 em{font-style:italic;color:var(--wkw-amber)}
  .pb-meta{
    display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem 1.5rem;margin-top:2.1rem;
    font-family:var(--body);font-weight:400;font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;
    color:var(--dim-2);
  }
  .pb-meta b{color:#D6D2CA;font-weight:400}
  .pb-jump{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:2.4rem}
  .pb-jump a{
    font-family:var(--body);font-weight:400;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--dim);text-decoration:none;border:1px solid var(--line);border-radius:999px;
    padding:.58rem 1.15rem;transition:all .3s var(--ease);
  }
  .pb-jump a:nth-child(1):hover{color:var(--ink);border-color:var(--red)}
  .pb-jump a:nth-child(2):hover{color:var(--ink);border-color:var(--yellow)}
  .pb-jump a:nth-child(3):hover{color:var(--ink);border-color:var(--cyan)}
  .pb-jump a:nth-child(4):hover{color:var(--ink);border-color:var(--wkw-jade)}
  .pb-jump a:hover{transform:translateY(-2px)}
  /* a strip of frames running under the title */
  .pb-strip{position:absolute;left:0;right:0;bottom:0;height:132px;overflow:hidden;z-index:0}
  .pb-track{display:flex;gap:.45rem;width:max-content;animation:slide 88s linear infinite}
  .pb-strip img{height:132px;width:auto;display:block;border-radius:2px;filter:grayscale(.55) brightness(.5)}
  @media (max-width:980px){
    .page-banner{min-height:auto;padding:8rem 0 8.5rem}
    .pb-strip,.pb-strip img{height:92px}
  }

  /* ---------- sections ---------- */
  section{padding:7rem 0;position:relative}
  .sec-head{margin-bottom:3.4rem}
  .eyebrow{display:flex;align-items:center;gap:.9rem;margin-bottom:1.1rem}
  h2{font-family:var(--display);font-weight:300;font-size:clamp(2.1rem,5.4vw,3.9rem);line-height:1.06;letter-spacing:-.015em}
  h2 em{font-style:italic}
  h2 .red{color:var(--red)}h2 .yellow{color:var(--yellow)}h2 .blue{color:var(--cyan)}h2 .green{color:var(--green)}
  .sec-sub{color:var(--dim);max-width:56ch;margin-top:1.1rem;font-size:.91rem}
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease), transform .9s var(--ease)}
  .reveal.in{opacity:1;transform:none}
  .stagger > *{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease), transform .8s var(--ease)}
  .stagger.in > *{opacity:1;transform:none}
  .stagger.in > *:nth-child(1){transition-delay:.06s}
  .stagger.in > *:nth-child(2){transition-delay:.16s}
  .stagger.in > *:nth-child(3){transition-delay:.26s}
  .stagger.in > *:nth-child(4){transition-delay:.36s}
  .stagger.in > *:nth-child(5){transition-delay:.46s}
  .stagger.in > *:nth-child(6){transition-delay:.56s}

  /* ---------- now in production ---------- */
  #films{border-top:1px solid var(--line)}

  /* ---------- now rolling ---------- */
  .now-band{
    position:relative;overflow:hidden;
    width:100vw;margin:4.2rem 0 0;margin-left:calc(50% - 50vw);
    background:var(--bg-2);
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:3.4rem 0 3.6rem;
  }
  .now-band::after{
    content:'';position:absolute;right:-8%;top:-40%;width:54%;height:180%;pointer-events:none;
    background:radial-gradient(circle at 55% 50%, rgba(232,53,42,.08), transparent 65%);
  }
  .now-band .wrap{position:relative;z-index:1}
  .now-band .eyebrow{margin-bottom:1.5rem}
  .now-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:1.6rem}
  .now-item{border-top:2px solid var(--line-2);padding-top:.85rem;transition:border-color .4s}
  .now-item:nth-child(1){border-color:var(--red)}
  .now-item:nth-child(2){border-color:var(--yellow)}
  .now-item:nth-child(3){border-color:var(--cyan)}
  .now-item:nth-child(4){border-color:var(--green)}
  .now-status{
    display:flex;align-items:center;gap:.45rem;
    font-family:var(--body);font-weight:400;font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--dim-2);margin-bottom:.6rem;
  }
  .rec-dot{width:6px;height:6px;border-radius:50%;background:var(--red);animation:blink 2s ease-in-out infinite}
  @keyframes blink{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(232,53,42,.5)}50%{opacity:.35;box-shadow:0 0 0 5px rgba(232,53,42,0)}}
  .now-item h3{font-family:var(--display);font-weight:400;font-size:1.12rem;margin-bottom:.35rem;letter-spacing:-.005em}
  .now-desc{font-size:.78rem;color:var(--dim);max-width:34ch;line-height:1.6}
  .now-links{margin-top:.75rem}
  .now-links a{
    font-family:var(--body);font-weight:500;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:3px;
    transition:color .3s, border-color .3s;
  }
  .now-links a:hover{color:var(--wkw-amber);border-color:var(--wkw-amber)}
  .now-role{
    margin-top:.7rem;font-family:var(--body);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--dim-2);
  }

  /* ---------- honours ---------- */
  #honors{padding-top:0}
  .honor-list{
    list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
    column-gap:3rem;border-top:1px solid var(--line);
  }
  .honor{
    position:relative;display:grid;grid-template-columns:auto 1fr;
    column-gap:.95rem;row-gap:.4rem;align-items:start;
    padding:1.25rem .2rem;border-bottom:1px solid var(--line);
    transition:padding-left .4s var(--ease);
  }
  .honor:hover{padding-left:.6rem}
  .honor .laurel{
    width:15px;height:15px;flex:0 0 auto;margin-top:.32em;
    color:var(--wkw-amber);opacity:.6;
    transition:opacity .4s var(--ease), transform .5s var(--ease);
  }
  .honor:hover .laurel{opacity:1;transform:translateY(-1px)}
  .honor-name{
    font-family:var(--display);font-weight:400;font-size:1.06rem;line-height:1.5;letter-spacing:.004em;
    max-width:32ch;
  }
  .honor-from{
    grid-column:2;
    font-family:var(--body);font-weight:400;font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;
    color:var(--dim-2);
  }

  /* ---------- press ---------- */
  .press-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(370px,1fr));gap:1.2rem;align-items:stretch}
  .press-card{
    position:relative;overflow:hidden;display:flex;flex-direction:column;
    background:linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,0) 55%);
    border:1px solid var(--line);border-radius:2px;
    padding:2.1rem 2.1rem 1.7rem;
    transition:transform .45s var(--ease), border-color .45s, background .45s, box-shadow .45s var(--ease);
  }
  .press-card.hidden{display:none}
  .press-card::before{
    content:'';position:absolute;top:0;left:0;height:2px;width:54px;
    transition:width .6s var(--ease), opacity .45s;opacity:.85;
  }
  .press-card:hover::before{width:100%;opacity:1}
  .press-card:hover{
    transform:translateY(-3px);border-color:var(--line-2);
    background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 60%);
    box-shadow:0 20px 44px rgba(0,0,0,.42);
  }
  .press-card:nth-child(4n+1)::before{background:var(--yellow)}
  .press-card:nth-child(4n+2)::before{background:var(--red)}
  .press-card:nth-child(4n+3)::before{background:var(--cyan)}
  .press-card:nth-child(4n+4)::before{background:var(--green)}

  /* the year sits behind the entry as a quiet watermark */
  .pc-year{
    position:absolute;top:.7rem;right:1.3rem;z-index:0;pointer-events:none;
    font-family:var(--display);font-weight:300;font-size:4.4rem;line-height:1;
    color:var(--ink);opacity:.07;letter-spacing:-.03em;
    transition:opacity .55s var(--ease), transform .55s var(--ease);
  }
  .press-card:hover .pc-year{opacity:.16;transform:translateY(-2px)}

  .pc-body{position:relative;z-index:1;display:flex;flex-direction:column;flex:1}
  .pc-head{
    display:flex;align-items:center;gap:.7rem;margin-bottom:1.05rem;
    font-family:var(--body);font-weight:400;font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;
    color:var(--dim-2);
  }
  .pc-head::after{content:'';flex:1;height:1px;background:var(--line);opacity:.8}
  .press-card:nth-child(4n+1) .pc-head b{color:var(--yellow)}
  .press-card:nth-child(4n+2) .pc-head b{color:var(--red)}
  .press-card:nth-child(4n+3) .pc-head b{color:var(--cyan)}
  .press-card:nth-child(4n+4) .pc-head b{color:var(--green)}
  .pc-head b{font-weight:400}
  .pc-head .pc-role{
    display:inline-flex;align-items:center;gap:.45rem;color:var(--dim);
  }
  .pc-head .pc-role::before{content:'';width:3px;height:3px;border-radius:50%;background:var(--line-2)}
  .pc-head .pc-date{font-family:var(--mono);letter-spacing:.14em;color:var(--dim-2)}
  .pc-badge{
    display:inline-flex;align-items:center;gap:.35rem;
    border:1px solid rgba(240,152,44,.45);border-radius:999px;padding:.28rem .6rem;
    color:var(--wkw-amber);font-family:var(--body);font-size:.5rem;letter-spacing:.16em;text-transform:uppercase;
    transition:border-color .4s, background .4s;
  }
  .press-card:hover .pc-badge{border-color:rgba(240,152,44,.8);background:rgba(240,152,44,.08)}
  .pc-badges{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.9rem}
  .laurel{width:12px;height:12px;flex:0 0 auto}
  .press-card h3{
    font-family:var(--display);font-weight:400;font-size:1.75rem;line-height:1.12;letter-spacing:-.016em;
    transition:color .35s;
  }
  .press-card:hover h3{color:var(--wkw-amber)}
  .pc-work{font-family:var(--display);font-style:italic;font-size:1.02rem;color:var(--dim);margin-top:.35rem}
  .pc-notes{list-style:none;display:flex;flex-direction:column;gap:.45rem;margin:1.15rem 0 0}
  .pc-notes li{font-size:.79rem;line-height:1.6;color:#C4BFB6;padding-left:1rem;position:relative}
  .pc-notes li::before{content:'';position:absolute;left:0;top:.66em;width:5px;height:1px;background:var(--line-2)}
  .pc-links{margin-top:auto;padding-top:1.6rem;display:flex;gap:1.4rem;flex-wrap:wrap}
  .pc-links a{
    position:relative;z-index:2;display:inline-flex;align-items:center;gap:.45rem;
    font-family:var(--body);font-weight:500;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--ink);text-decoration:none;
    transition:color .3s;
  }
  .pc-links a i{font-style:normal;transition:transform .35s var(--ease)}
  .pc-links a:hover{color:var(--wkw-amber)}
  .press-card:hover .pc-links a.primary i{transform:translate(3px,-3px)}
  /* the first link makes the whole card clickable */
  .pc-links a.primary::after{content:'';position:absolute;inset:0;z-index:1}
  @media (max-width:640px){
    .press-card{padding:1.7rem 1.5rem 1.4rem}
    .pc-year{font-size:3.2rem;right:1rem}
    .press-card h3{font-size:1.5rem}
  }
  .stagger.in > *:nth-child(5){transition-delay:.46s}
  .stagger.in > *:nth-child(6){transition-delay:.56s}

  /* ---------- now in production ---------- */
  #films{border-top:1px solid var(--line)}

  /* ---------- now rolling ---------- */
  .now-band{
    position:relative;overflow:hidden;
    width:100vw;margin:4.2rem 0 0;margin-left:calc(50% - 50vw);
    background:var(--bg-2);
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:3.4rem 0 3.6rem;
  }
  .now-band::after{
    content:'';position:absolute;right:-8%;top:-40%;width:54%;height:180%;pointer-events:none;
    background:radial-gradient(circle at 55% 50%, rgba(232,53,42,.08), transparent 65%);
  }
  .now-band .wrap{position:relative;z-index:1}
  .now-band .eyebrow{margin-bottom:1.5rem}
  .now-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:1.6rem}
  .now-item{border-top:2px solid var(--line-2);padding-top:.85rem;transition:border-color .4s}
  .now-item:nth-child(1){border-color:var(--red)}
  .now-item:nth-child(2){border-color:var(--yellow)}
  .now-item:nth-child(3){border-color:var(--cyan)}
  .now-item:nth-child(4){border-color:var(--green)}
  .now-status{
    display:flex;align-items:center;gap:.45rem;
    font-family:var(--body);font-weight:400;font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--dim-2);margin-bottom:.6rem;
  }
  .rec-dot{width:6px;height:6px;border-radius:50%;background:var(--red);animation:blink 2s ease-in-out infinite}
  @keyframes blink{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(232,53,42,.5)}50%{opacity:.35;box-shadow:0 0 0 5px rgba(232,53,42,0)}}
  .now-item h3{font-family:var(--display);font-weight:400;font-size:1.12rem;margin-bottom:.35rem;letter-spacing:-.005em}
  .now-desc{font-size:.78rem;color:var(--dim);max-width:34ch;line-height:1.6}
  .now-links{margin-top:.75rem}
  .now-links a{
    font-family:var(--body);font-weight:500;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:3px;
    transition:color .3s, border-color .3s;
  }
  .now-links a:hover{color:var(--wkw-amber);border-color:var(--wkw-amber)}
  .now-role{
    margin-top:.7rem;font-family:var(--body);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--dim-2);
  }

  /* ---------- honours ---------- */
  #honors{padding-top:0}
  .honor-list{
    list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
    column-gap:3rem;border-top:1px solid var(--line);
  }
  .honor{
    position:relative;display:grid;grid-template-columns:auto 1fr;
    column-gap:.95rem;row-gap:.4rem;align-items:start;
    padding:1.25rem .2rem;border-bottom:1px solid var(--line);
    transition:padding-left .4s var(--ease);
  }
  .honor:hover{padding-left:.6rem}
  .honor .laurel{
    width:15px;height:15px;flex:0 0 auto;margin-top:.32em;
    color:var(--wkw-amber);opacity:.6;
    transition:opacity .4s var(--ease), transform .5s var(--ease);
  }
  .honor:hover .laurel{opacity:1;transform:translateY(-1px)}
  .honor-name{
    font-family:var(--display);font-weight:400;font-size:1.06rem;line-height:1.5;letter-spacing:.004em;
    max-width:32ch;
  }
  .honor-from{
    grid-column:2;
    font-family:var(--body);font-weight:400;font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;
    color:var(--dim-2);
  }

  .stagger.in > *:nth-child(5){transition-delay:.46s}

  /* ---------- capability ---------- */
  .cap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2.6rem}
  .cap{position:relative;padding-top:1.7rem}
  .cap::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
  .cap:nth-child(1)::before{background:var(--blue)}
  .cap:nth-child(2)::before{background:var(--green)}
  .cap:nth-child(3)::before{background:var(--yellow)}
  .cap .num{font-family:var(--mono);font-size:.57rem;letter-spacing:.24em;margin-bottom:.9rem;display:block}
  .cap:nth-child(1) .num{color:var(--cyan)}
  .cap:nth-child(2) .num{color:var(--green)}
  .cap:nth-child(3) .num{color:var(--yellow)}
  .cap h3{font-family:var(--display);font-weight:400;font-size:1.34rem;margin-bottom:.7rem}
  .cap p{color:var(--dim);font-size:.85rem;margin-bottom:1.1rem}
  .cap ul{list-style:none;display:flex;flex-direction:column;gap:.5rem}
  .cap li{font-size:.79rem;color:#D2CDC4;padding-left:1.1rem;position:relative}
  .cap li::before{content:'';position:absolute;left:0;top:.58em;width:6px;height:2px}
  .cap:nth-child(1) li::before{background:var(--blue)}
  .cap:nth-child(2) li::before{background:var(--green)}
  .cap:nth-child(3) li::before{background:var(--yellow)}

  /* ---------- filmography ---------- */
  .film-top{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:2.2rem}
  .chips{display:flex;gap:.5rem;flex-wrap:wrap}
  .chip{
    font-family:var(--body);font-weight:400;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--dim);background:transparent;border:1px solid var(--line);border-radius:2px;
    padding:.6rem 1.1rem;cursor:pointer;transition:all .3s var(--ease);
  }
  .chip:hover{color:var(--ink);border-color:var(--line-2)}
  .chip.active{color:#111;border-color:transparent}
  .chip[data-filter="all"].active{background:var(--ink)}
  .chip[data-filter="produce"].active{background:var(--yellow)}
  .chip[data-filter="direct"].active{background:var(--red);color:#fff}
  .chip[data-filter="camera"].active{background:var(--cyan)}
  .chip[data-filter="edit"].active{background:var(--wkw-amber)}
  .chip[data-filter="sound"].active{background:var(--wkw-jade)}
  .chip[data-filter="design"].active{background:var(--green)}
  .chip[data-press="all"].active{background:var(--ink)}
  .chip[data-press="festival"].active{background:var(--yellow)}
  .chip[data-press="press"].active{background:var(--cyan)}
  .film-count{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim-2)}
  .film-list{border-top:1px solid var(--line-2);overflow-anchor:none}
  .film-row,.more-btn{overflow-anchor:none}
  .film-row{
    display:grid;grid-template-columns:70px 152px 1fr 226px;gap:1.5rem;align-items:start;
    padding:1.9rem .2rem;border-bottom:1px solid var(--line);position:relative;
    transition:padding .4s var(--ease), background .4s;
  }
  .film-year{grid-column:1}
  .film-key{grid-column:2}
  .film-main{grid-column:3}
  .film-role{grid-column:4}
  .film-key{
    position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:2px;
    background:var(--panel);cursor:zoom-in;margin-top:.15rem;
  }
  .film-key img{
    width:100%;height:100%;object-fit:cover;
    filter:saturate(.8) brightness(.86);
    transition:transform .8s var(--ease), filter .5s;
  }
  .film-row:hover .film-key img{filter:saturate(1.1) brightness(1);transform:scale(1.05)}
  .film-key::after{
    content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
    transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
  }
  .film-row:nth-child(5n+1) .film-key::after{background:var(--blue)}
  .film-row:nth-child(5n+2) .film-key::after{background:var(--cyan)}
  .film-row:nth-child(5n+3) .film-key::after{background:var(--green)}
  .film-row:nth-child(5n+4) .film-key::after{background:var(--yellow)}
  .film-row:nth-child(5n+5) .film-key::after{background:var(--red)}
  .film-row:hover .film-key::after{transform:scaleX(1)}
  .film-row::before{
    content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
    transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease);
  }
  .film-row:nth-child(5n+1)::before{background:var(--blue)}
  .film-row:nth-child(5n+2)::before{background:var(--cyan)}
  .film-row:nth-child(5n+3)::before{background:var(--green)}
  .film-row:nth-child(5n+4)::before{background:var(--yellow)}
  .film-row:nth-child(5n+5)::before{background:var(--red)}
  .film-row:hover{padding-left:1.4rem;background:rgba(255,255,255,.03)}
  .film-row:hover::before{transform:scaleY(1)}
  .film-row.hidden{display:none}
  .film-year{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--dim-2);padding-top:.45rem}
  .film-title{
    font-family:var(--display);font-weight:400;font-size:clamp(1.35rem,3vw,1.95rem);
    letter-spacing:-.012em;display:block;transition:text-shadow .35s var(--ease);
  }
  .film-row:hover .film-title{text-shadow:-.016em -.01em 0 var(--red), .015em .012em 0 var(--cyan)}
  .film-credit{display:block;font-size:.81rem;color:var(--dim);margin-top:.5rem;max-width:66ch}
  .laurel{color:var(--yellow);font-weight:500}
  .film-role{
    font-family:var(--mono);font-size:.57rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--dim);text-align:right;padding-top:.58rem;line-height:1.9;
  }
  .film-links{display:block;margin-top:.9rem}
  .film-links a{
    font-family:var(--body);font-weight:500;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--cyan);text-decoration:none;margin-right:1.4rem;border-bottom:1px solid transparent;transition:border-color .3s;
  }
  .film-links a:hover{border-color:var(--cyan)}
  .film-actions{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:.9rem}
  .film-actions .film-links{margin-top:0}
  .film-actions .film-links a{margin-right:1.2rem}
  .film-actions .film-links a:last-child{margin-right:0}
  .stills-toggle{
    display:inline-flex;align-items:center;gap:.6rem;
    font-family:var(--body);font-weight:400;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
    color:var(--dim);background:transparent;border:1px solid var(--line);border-radius:2px;
    padding:.45rem .95rem;cursor:pointer;transition:all .3s var(--ease);
  }
  .stills-toggle:hover{color:var(--ink);border-color:var(--cyan)}
  .stills-toggle .chev{
    display:inline-block;font-size:.7rem;line-height:1;transition:transform .35s var(--ease);
  }
  .stills-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
  .film-stills{
    display:flex;gap:.5rem;flex-wrap:wrap;
    max-height:0;margin-top:0;opacity:0;overflow:hidden;
    transition:max-height .55s var(--ease), opacity .4s ease, margin-top .4s var(--ease);
  }
  .film-stills.open{max-height:420px;margin-top:.9rem;opacity:1}
  .film-stills img{
    height:68px;width:auto;border-radius:2px;cursor:zoom-in;
    filter:saturate(.85) brightness(.92);
    transition:filter .5s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
  }
  .film-row:hover .film-stills img{filter:saturate(1.1) brightness(1)}
  .film-stills img:hover{transform:translateY(-5px) scale(1.03);box-shadow:-3px 3px 0 var(--red), 3px -3px 0 var(--cyan)}
  .more-btn{
    display:flex;align-items:center;justify-content:center;gap:.7rem;
    width:100%;padding:1.25rem;background:transparent;border:none;
    border-bottom:1px solid var(--line);cursor:pointer;
    font-family:var(--body);font-weight:400;font-size:.63rem;letter-spacing:.22em;text-transform:uppercase;
    color:var(--dim);transition:color .3s, background .3s;
  }
  .more-btn:hover{color:var(--ink);background:rgba(255,255,255,.03)}
  .more-btn[hidden]{display:none}
  .more-btn .chev{display:inline-block;font-size:.75rem;line-height:1;transition:transform .35s var(--ease)}
  .more-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
  .imdb-link{
    display:inline-flex;align-items:center;gap:.7rem;margin-top:3rem;
    font-family:var(--body);font-weight:500;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
    color:var(--ink);text-decoration:none;padding-bottom:7px;position:relative;
    transition:gap .3s var(--ease);
  }
  .imdb-link::after{
    content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
    background:linear-gradient(to right,
      var(--blue) 0 20%, var(--cyan) 20% 40%, var(--green) 40% 60%, var(--yellow) 60% 80%, var(--red) 80% 100%);
  }
  .imdb-link:hover{gap:1.1rem}

  /* ---------- off the clock ---------- */
  #offclock{
    position:relative;overflow:hidden;
    background:var(--bg-2);
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:4.4rem 0 4.8rem;
  }
  #offclock::after{
    content:'';position:absolute;left:-6%;top:-30%;width:56%;height:170%;pointer-events:none;
    background:radial-gradient(circle at 40% 50%, rgba(240,152,44,.09), transparent 65%);
  }
  #offclock .wrap{position:relative;z-index:1}
  .off-grid{display:grid;grid-template-columns:320px 1fr;gap:2.8rem;align-items:center}
  .off-thumb{position:relative;display:block;border-radius:2px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 14px 40px rgba(0,0,0,.45);transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s}
  .off-thumb:hover{transform:translate(-4px,-4px);border-color:var(--yellow);box-shadow:5px 5px 0 var(--yellow), 10px 10px 0 var(--red)}
  .off-thumb img{width:100%;transition:transform 1s var(--ease);filter:saturate(1.05) brightness(.92)}
  .off-thumb:hover img{transform:scale(1.05);filter:saturate(1.15) brightness(1)}
  .off-play{position:absolute;inset:0;display:grid;place-items:center}
  .off-play span{
    width:58px;height:58px;border-radius:50%;background:rgba(20,20,20,.62);border:1px solid rgba(255,255,255,.4);
    display:grid;place-items:center;transition:background .3s, transform .3s var(--ease), border-color .3s;
  }
  .off-thumb:hover .off-play span{background:var(--red);border-color:var(--red);transform:scale(1.08)}
  .off-play i{display:block;width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #fff;margin-left:3px}
  .off-copy p.body{font-family:var(--display);font-weight:300;font-size:1.14rem;line-height:1.62;max-width:32rem;color:#E2DED6}
  .off-copy a{color:var(--yellow);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s}
  .off-copy a:hover{border-color:var(--yellow)}

  /* ---------- photography ---------- */
  .gal-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;gap:1rem}
  .gal-nav{display:flex;gap:.5rem}
  .gal-nav button{
    width:38px;height:38px;border-radius:2px;border:1px solid var(--line-2);background:transparent;
    color:var(--ink);cursor:pointer;display:grid;place-items:center;font-size:.9rem;transition:all .3s var(--ease);
  }
  .gal-nav button:hover{border-color:var(--cyan);color:var(--cyan);background:rgba(43,185,224,.08)}
  .gallery{
    display:flex;gap:.7rem;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;padding-bottom:1.1rem;scrollbar-width:thin;cursor:grab;
  }
  .gallery.dragging{cursor:grabbing;scroll-snap-type:none}
  .gallery::-webkit-scrollbar{height:5px}
  .gallery::-webkit-scrollbar-track{background:var(--line)}
  .gallery::-webkit-scrollbar-thumb{
    background:linear-gradient(to right,var(--blue),var(--cyan),var(--green),var(--yellow),var(--red));
  }
  .shot{
    position:relative;overflow:hidden;border-radius:2px;cursor:zoom-in;
    flex:0 0 auto;height:300px;scroll-snap-align:start;background:var(--panel);
  }
  .shot img{
    height:100%;width:auto;transform:scale(1.03);
    filter:saturate(.9) brightness(.94);
    transition:transform 1.1s var(--ease), filter .6s;pointer-events:none;
  }
  .shot:hover img,.shot:focus-visible img{transform:scale(1.08);filter:saturate(1.12) brightness(1)}
  .shot::before{
    content:'';position:absolute;inset:0;z-index:2;
    transform:scaleX(1);transform-origin:right;transition:transform 1.05s var(--ease);
  }
  .shot:nth-child(5n+1)::before{background:var(--blue)}
  .shot:nth-child(5n+2)::before{background:var(--cyan)}
  .shot:nth-child(5n+3)::before{background:var(--green)}
  .shot:nth-child(5n+4)::before{background:var(--yellow)}
  .shot:nth-child(5n+5)::before{background:var(--red)}
  .shot.in::before{transform:scaleX(0)}
  .shot figcaption{
    position:absolute;left:0;right:0;bottom:0;z-index:3;padding:1rem;
    background:linear-gradient(to top, rgba(20,20,20,.92), transparent);
    font-family:var(--mono);font-size:.55rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);
    opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease), transform .45s var(--ease);
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
  }
  .shot:hover figcaption,.shot:focus-visible figcaption{opacity:1;transform:none}

  /* lightbox */
  .lightbox{position:fixed;inset:0;z-index:300;background:rgba(16,16,16,.96);display:none;align-items:center;justify-content:center;padding:3.5rem 2rem}
  .lightbox.open{display:flex}
  .lightbox img{max-width:min(92vw,1100px);max-height:78vh;border-radius:2px;box-shadow:-4px 4px 0 var(--red), 4px -4px 0 var(--cyan)}
  .lb-cap{
    position:absolute;bottom:2.2rem;left:0;right:0;text-align:center;
    font-family:var(--mono);font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;color:var(--dim);
  }
  .lb-btn{
    position:absolute;top:50%;transform:translateY(-50%);
    width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);background:rgba(20,20,20,.6);
    color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:all .3s var(--ease);
  }
  .lb-btn:hover{border-color:var(--cyan);color:var(--cyan)}
  .lb-prev{left:1.6rem}.lb-next{right:1.6rem}
  .lb-close{position:absolute;top:1.6rem;right:1.6rem;transform:none}
  .lb-close:hover{border-color:var(--red);color:var(--red)}

  /* ---------- about ---------- */
  #about{background:var(--bg-2);border-top:1px solid var(--line)}
  .about-grid{display:grid;grid-template-columns:280px 1fr;gap:3.4rem;align-items:start}
  .about-photo{display:flex;flex-direction:column;align-items:center;gap:1rem}
  .avatar{position:relative;width:250px;height:250px;border-radius:50%;display:grid;place-items:center}
  .avatar::before{
    content:'';position:absolute;inset:0;border-radius:50%;
    background:conic-gradient(from 210deg, var(--red), var(--yellow), var(--green), var(--cyan), var(--blue), var(--red));
    animation:spinRing 26s linear infinite;
  }
  @keyframes spinRing{to{transform:rotate(360deg)}}
  .avatar img{
    position:relative;z-index:1;width:calc(100% - 9px);height:calc(100% - 9px);
    border-radius:50%;object-fit:cover;object-position:50% 42%;
    filter:saturate(1) brightness(.96);transition:transform .9s var(--ease), filter .6s;
  }
  .avatar:hover img{transform:scale(1.04);filter:saturate(1.08) brightness(1)}
  .about-photo .tag{
    font-family:var(--mono);font-size:.55rem;letter-spacing:.24em;text-transform:uppercase;
    color:var(--dim);text-align:center;line-height:1.9;
  }
  .about-copy p{font-size:.93rem;max-width:60ch;margin-bottom:1.2rem;color:#E2DED6}
  .about-copy p.lead{font-family:var(--display);font-weight:300;font-size:1.26rem;line-height:1.55;color:var(--ink)}
  .about-copy p.dim{color:var(--dim);font-size:.88rem}
  /* education */
  .edu{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:.8rem;margin-top:.4rem}
  .edu-card{
    position:relative;overflow:hidden;padding:1.5rem 1.4rem 1.6rem;
    border:1px solid var(--line);border-radius:3px;
    background:linear-gradient(160deg, var(--panel-2), var(--panel));
    transition:border-color .4s, transform .4s var(--ease);
  }
  .edu-card:nth-child(1){border-left:3px solid var(--cyan)}
  .edu-card:nth-child(2){border-left:3px solid var(--yellow)}
  .edu-card:hover{transform:translateY(-3px)}
  .edu-card:nth-child(1):hover{border-color:var(--cyan)}
  .edu-card:nth-child(2):hover{border-color:var(--yellow)}
  .edu-card .deg{
    display:inline-block;margin-bottom:.9rem;
    font-family:var(--body);font-weight:400;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;
    border:1px solid var(--line-2);border-radius:999px;padding:.32rem .8rem;
  }
  .edu-card:nth-child(1) .deg{color:var(--cyan);border-color:rgba(43,185,224,.45)}
  .edu-card:nth-child(2) .deg{color:var(--yellow);border-color:rgba(245,225,26,.4)}
  .edu-card h3{font-family:var(--display);font-weight:400;font-size:1.28rem;line-height:1.2;letter-spacing:-.01em;margin-bottom:.5rem}
  .edu-card .prog{font-size:.82rem;color:var(--dim);max-width:34ch}
  .edu-card .yr{
    position:absolute;right:-.4rem;bottom:-1.6rem;pointer-events:none;
    font-family:var(--display);font-weight:300;font-size:5.4rem;line-height:1;
    color:var(--ink);opacity:.05;letter-spacing:-.04em;
    transition:opacity .5s var(--ease), transform .6s var(--ease);
  }
  .edu-card:hover .yr{opacity:.09;transform:translateY(-4px)}
  /* experience */
  .xp-label{
    font-family:var(--mono);font-size:.55rem;letter-spacing:.24em;text-transform:uppercase;
    color:var(--dim-2);margin:2.8rem 0 1.2rem;
  }
  .htl{position:relative;padding:.6rem 0 .4rem}
  .htl-items{
    list-style:none;display:grid;grid-template-columns:repeat(5,1fr);
    position:relative;padding-top:1.5rem;
  }
  .htl-items::before{
    content:'';position:absolute;left:0;right:0;top:2.42rem;height:1px;
    background:linear-gradient(to right,
      var(--red), var(--yellow) 25%, var(--green) 50%, var(--cyan) 75%, var(--blue));
    opacity:.5;
  }
  .htl-item{
    position:relative;display:flex;flex-direction:column;align-items:center;
    padding:0 .3rem;cursor:pointer;text-align:center;
  }
  .htl-yr{
    font-family:var(--body);font-weight:400;font-size:.56rem;letter-spacing:.16em;color:var(--dim-2);
    margin-bottom:.5rem;transition:color .3s;
  }
  .htl-dot{
    width:9px;height:9px;border-radius:50%;border:2px solid var(--bg-2);box-sizing:content-box;
    transition:transform .35s var(--ease);
  }
  .htl-item:nth-child(5n+1) .htl-dot{background:var(--red)}
  .htl-item:nth-child(5n+2) .htl-dot{background:var(--yellow)}
  .htl-item:nth-child(5n+3) .htl-dot{background:var(--green)}
  .htl-item:nth-child(5n+4) .htl-dot{background:var(--cyan)}
  .htl-item:nth-child(5n+5) .htl-dot{background:var(--blue)}
  .htl-item.now .htl-dot{animation:blink 2s ease-in-out infinite}
  .htl-item:hover .htl-dot,.htl-item:focus-visible .htl-dot,.htl-item.open .htl-dot{transform:scale(1.5)}
  .htl-co{
    font-family:var(--display);font-weight:400;font-size:.9rem;line-height:1.3;
    margin-top:.75rem;color:var(--dim);transition:color .3s;max-width:11ch;
  }
  .htl-item:hover .htl-co,.htl-item:focus-visible .htl-co,.htl-item.open .htl-co{color:var(--ink)}
  .htl-item:hover .htl-yr,.htl-item.open .htl-yr{color:var(--ink)}
  .htl-pop{
    position:absolute;top:100%;left:50%;transform:translate(-50%,6px);
    width:min(215px,42vw);z-index:6;margin-top:.6rem;
    background:var(--panel-2);border:1px solid var(--line-2);border-radius:3px;
    padding:.75rem .85rem;text-align:left;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  .htl-item:hover .htl-pop,.htl-item:focus-visible .htl-pop,.htl-item.open .htl-pop{
    opacity:1;visibility:visible;transform:translate(-50%,0);
  }
  .htl-item:nth-child(1) .htl-pop{left:0;transform:translate(0,6px)}
  .htl-item:nth-child(1):hover .htl-pop,.htl-item:nth-child(1).open .htl-pop{transform:translate(0,0)}
  .htl-item:nth-child(5) .htl-pop{left:auto;right:0;transform:translate(0,6px)}
  .htl-item:nth-child(5):hover .htl-pop,.htl-item:nth-child(5).open .htl-pop{transform:translate(0,0)}
  .htl-pop b{display:block;font-weight:400;font-size:.79rem;color:var(--ink);margin-bottom:.3rem;line-height:1.35}
  .htl-pop span{
    font-family:var(--body);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim-2);
  }
  .htl-spacer{height:0;transition:height .3s var(--ease)}
  .htl.lifted .htl-spacer{height:112px}


  /* publication */
  .pub{
    display:block;text-decoration:none;color:inherit;position:relative;
    border:1px solid var(--line);border-left:3px solid var(--wkw-amber);border-radius:3px;
    background:var(--panel);padding:1.15rem 1.3rem 1.2rem;margin-top:.2rem;
    transition:background .35s, transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .pub:hover{background:var(--panel-2);transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--wkw-amber)}
  .pub-kind{
    display:block;font-family:var(--body);font-weight:400;font-size:.56rem;letter-spacing:.2em;
    text-transform:uppercase;color:var(--wkw-amber);margin-bottom:.6rem;
  }
  .pub-title{
    display:block;font-family:var(--display);font-weight:400;font-size:1rem;line-height:1.35;
    letter-spacing:-.005em;margin-bottom:.5rem;max-width:52ch;
  }
  .pub-meta{display:block;font-size:.76rem;color:var(--dim);margin-bottom:.85rem}
  .pub-go{
    display:inline-block;font-family:var(--body);font-weight:500;font-size:.6rem;letter-spacing:.18em;
    text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--line-2);padding-bottom:3px;
    transition:color .3s, border-color .3s;
  }
  .pub:hover .pub-go{color:var(--wkw-amber);border-color:var(--wkw-amber)}
  /* skills & tools */
  .skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:.75rem;align-items:start;margin-top:.4rem}
  .skill{
    border:1px solid var(--line);border-radius:3px;background:var(--panel);
    padding:1rem 1.1rem;cursor:pointer;position:relative;overflow:hidden;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s, background .35s;
  }
  .skill::before{
    content:'';position:absolute;top:0;left:0;right:0;height:3px;
    transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
  }
  .skill:nth-child(5n+1)::before{background:var(--red)}
  .skill:nth-child(5n+2)::before{background:var(--yellow)}
  .skill:nth-child(5n+3)::before{background:var(--cyan)}
  .skill:nth-child(5n+4)::before{background:var(--green)}
  .skill:nth-child(5n+5)::before{background:var(--blue)}
  .skill:hover,.skill:focus-visible,.skill.open{background:var(--panel-2);transform:translate(-2px,-2px)}
  .skill:nth-child(5n+1):hover,.skill:nth-child(5n+1).open{box-shadow:3px 3px 0 var(--red)}
  .skill:nth-child(5n+2):hover,.skill:nth-child(5n+2).open{box-shadow:3px 3px 0 var(--yellow)}
  .skill:nth-child(5n+3):hover,.skill:nth-child(5n+3).open{box-shadow:3px 3px 0 var(--cyan)}
  .skill:nth-child(5n+4):hover,.skill:nth-child(5n+4).open{box-shadow:3px 3px 0 var(--green)}
  .skill:nth-child(5n+5):hover,.skill:nth-child(5n+5).open{box-shadow:3px 3px 0 var(--blue)}
  .skill:hover::before,.skill:focus-visible::before,.skill.open::before{transform:scaleX(1)}
  .skill-head{display:flex;align-items:center;justify-content:space-between;gap:.9rem}
  .skill h4{font-family:var(--display);font-weight:400;font-size:1.04rem;letter-spacing:-.005em}
  .skill .n{
    display:inline-flex;align-items:center;gap:.35rem;
    font-family:var(--body);font-size:.58rem;letter-spacing:.14em;color:var(--dim-2);
    transition:color .3s;
  }
  .skill:hover .n,.skill.open .n{color:var(--ink)}
  .skill .chev{font-style:normal;font-size:.72rem;line-height:1;transition:transform .35s var(--ease)}
  .skill:hover .chev,.skill:focus-visible .chev,.skill.open .chev{transform:rotate(180deg)}
  .skill-body{
    max-height:0;opacity:0;overflow:hidden;
    transition:max-height .5s var(--ease), opacity .35s ease, margin-top .4s var(--ease);
  }
  .skill:hover .skill-body,.skill:focus-visible .skill-body,.skill.open .skill-body{max-height:420px;opacity:1;margin-top:.95rem}
  .tags{display:flex;flex-wrap:wrap;gap:.35rem}
  .tag{
    font-size:.7rem;line-height:1.4;color:#C8C3BA;
    border:1px solid var(--line);border-radius:999px;padding:.28rem .7rem;
    transition:color .25s, border-color .25s;
  }
  .tag:hover{color:var(--ink);border-color:var(--line-2)}
  /* ---------- contact ---------- */
  #contact{border-top:1px solid var(--line);position:relative;overflow:hidden}
  #contact::after{
    content:'';position:absolute;left:50%;top:-40%;width:90vw;height:90vw;transform:translateX(-50%);
    background:
      radial-gradient(circle at 35% 40%, rgba(43,185,224,.10), transparent 45%),
      radial-gradient(circle at 68% 55%, rgba(232,53,42,.09), transparent 45%);
    pointer-events:none;
  }
  .contact-grid{max-width:660px;position:relative;z-index:2}
  .contact-form{display:flex;flex-direction:column;gap:1.2rem}
  .field label{
    display:block;font-family:var(--mono);font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;
    color:var(--dim-2);margin-bottom:.55rem;
  }
  .field input,.field textarea{
    width:100%;font-family:var(--body);font-size:.89rem;color:var(--ink);
    background:var(--panel);border:1px solid var(--line);border-radius:2px;
    padding:.9rem 1rem;transition:border-color .3s, background .3s, box-shadow .3s;
  }
  .field input::placeholder,.field textarea::placeholder{color:var(--dim-2)}
  .field textarea{min-height:150px;resize:vertical;line-height:1.55}
  .field input:focus,.field textarea:focus{
    outline:none;border-color:var(--cyan);background:var(--panel-2);box-shadow:0 0 0 3px rgba(43,185,224,.14);
  }
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
  .send-btn[disabled]{opacity:.55;cursor:progress}
  .form-status.err{color:var(--red)}
  .send-btn{
    align-self:center;font-family:var(--body);font-weight:500;font-size:.67rem;letter-spacing:.22em;
    text-transform:uppercase;color:#111;background:var(--ink);border:none;border-radius:2px;
    padding:1rem 2.1rem;cursor:pointer;transition:transform .32s var(--ease), box-shadow .32s var(--ease);
  }
  .send-btn:hover{transform:translate(-3px,-3px);box-shadow:4px 4px 0 var(--yellow), 8px 8px 0 var(--red)}
  .form-status{font-size:.78rem;color:var(--yellow);min-height:1.2em;font-weight:400}
  .socials{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;margin-top:2.6rem}
  .socials a{
    font-family:var(--body);font-weight:500;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--dim);text-decoration:none;border:1px solid var(--line);padding:.72rem 1.3rem;border-radius:2px;
    transition:all .3s var(--ease);
  }
  .socials a:nth-child(1):hover{color:var(--ink);border-color:var(--red);box-shadow:3px 3px 0 var(--red);transform:translate(-2px,-2px)}
  .socials a:nth-child(2):hover{color:var(--ink);border-color:var(--cyan);box-shadow:3px 3px 0 var(--cyan);transform:translate(-2px,-2px)}
  .socials a:nth-child(3):hover{color:var(--ink);border-color:var(--yellow);box-shadow:3px 3px 0 var(--yellow);transform:translate(-2px,-2px)}

  footer{
    border-top:1px solid var(--line);padding:2rem 0;position:relative;
    font-family:var(--mono);font-size:.57rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim-2);
  }
  footer::before{
    content:'';position:absolute;top:0;left:0;right:0;height:4px;
    background:linear-gradient(to right,
      var(--blue) 0 20%, var(--cyan) 20% 40%, var(--green) 40% 60%, var(--yellow) 60% 80%, var(--red) 80% 100%);
  }
  footer .inner{display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;align-items:center}

  /* ---------- responsive ---------- */
  @media (max-width:980px){
    .nav-links{display:none}
    /* the horizontal timeline folds into a list on narrow screens */
    .htl-items{grid-template-columns:1fr;padding-top:0}
    .htl-items::before{
      left:4px;right:auto;top:.6rem;bottom:.6rem;width:1px;height:auto;
      background:linear-gradient(to bottom, var(--red), var(--yellow) 25%, var(--green) 50%, var(--cyan) 75%, var(--blue));
    }
    .htl-item{
      flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;
      gap:.2rem .7rem;text-align:left;padding:.5rem 0 .5rem 1.6rem;
    }
    .htl-dot{position:absolute;left:0;top:.85rem}
    .htl-yr{display:none}
    .htl-co{margin-top:0;max-width:none;color:var(--ink)}
    .htl-pop{
      position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
      background:none;border:none;padding:0;margin:0;width:auto;flex-basis:100%;
    }
    .htl-pop b{font-size:.76rem;color:var(--dim)}
    .htl-pop span{display:block;margin-top:.15rem}
    .htl-spacer,.htl.lifted .htl-spacer{height:0}

    .about-grid{grid-template-columns:1fr;gap:2rem}
    .about-photo{align-items:flex-start}
    .about-photo .tag{text-align:left}
    .off-grid{grid-template-columns:1fr;gap:1.6rem}
    .field-row{grid-template-columns:1fr}
    .film-row{grid-template-columns:50px 104px 1fr;gap:1rem}
    .film-main{grid-column:3}
    .film-role{grid-column:3;text-align:left;padding-top:.9rem;font-size:.57rem;letter-spacing:.18em;}
    .shot{height:210px}
    section{padding:4.6rem 0}
    .wrap{padding:0 1.3rem}
    nav{padding:1rem 1.3rem}
    .hero{padding-top:6rem}
  }
  @media (max-width:560px){
    .film-stills img{height:54px}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    html{scroll-behavior:auto}
    .grain-layer{opacity:.12}
    .tv,.tv i,.tv .static{animation:none}
    .flares,.gate{display:none}
    .vbands i{opacity:.14}
    .reveal,.stagger > *{opacity:1;transform:none}
    .shot::before{display:none}
    .hero h1 span i{transform:none}
  }

  /* ---------- multi-page shell ---------- */
  body{min-height:100svh;display:flex;flex-direction:column}
  footer{margin-top:auto}
  body:not(.home):not(.banner) > section:first-of-type{padding-top:9.5rem}
  body.banner > section:first-of-type{padding-top:4.6rem}
  body:not(.home) nav{background:rgba(25,25,25,.86);backdrop-filter:blur(16px) saturate(1.2);border-color:var(--line)}
  .nav-links li.here a{color:var(--ink)}
  .nav-links li.here a::after{transform:scaleX(1)}
  #films,#about,#photography,#contact,#press,#honors{border-top:none}
  #about{background:transparent}
  @media (max-width:980px){
    body:not(.home):not(.banner) > section:first-of-type{padding-top:7rem}
  }

  /* ---------- the reel, laid on its side, running across the work page ---------- */
  .filmstrip.horizontal{
    display:block;position:relative;inset:auto;z-index:0;isolation:isolate;
    width:100vw;margin-left:calc(50% - 50vw);
    height:clamp(150px,17vw,228px);
    margin-top:4.6rem;margin-bottom:0;overflow:hidden;cursor:ew-resize;pointer-events:auto;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image:linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
  .filmstrip.horizontal .strip-track{
    position:absolute;top:0;bottom:0;left:0;right:auto;
    flex-direction:row;gap:4px;padding:17px 4px;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='14' height='100' fill='%23fff'/%3E%3Crect x='3.7' y='2.6' width='6.6' height='7.4' rx='2' fill='%23000'/%3E%3Crect x='3.7' y='90' width='6.6' height='7.4' rx='2' fill='%23000'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='14' height='100' fill='%23fff' mask='url(%23m)'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='14' height='100' fill='%23fff'/%3E%3Crect x='3.7' y='2.6' width='6.6' height='7.4' rx='2' fill='%23000'/%3E%3Crect x='3.7' y='90' width='6.6' height='7.4' rx='2' fill='%23000'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='14' height='100' fill='%23fff' mask='url(%23m)'/%3E%3C/svg%3E");
    -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
    -webkit-mask-size:14px 100%;mask-size:14px 100%;
  }
  /* this print is struck on a cool, dark blue stock */
  .filmstrip.horizontal .strip-track{
    background-color:#111d31;
    background-image:
      linear-gradient(90deg, rgba(198,220,255,.05), transparent 26%, rgba(0,0,0,.16) 64%, transparent),
      linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.18) 17%, rgba(198,220,255,.05) 50%, rgba(0,0,0,.2) 83%, rgba(0,0,0,.62));
    animation:filmToneBlue 46s ease-in-out infinite;
  }
  @keyframes filmToneBlue{
    0%,100%{background-color:#101a2c}
    25%{background-color:#132239}
    50%{background-color:#0d1b2f}
    75%{background-color:#15203a}
  }
  .filmstrip.horizontal .strip-track::before,
  .filmstrip.horizontal .strip-track::after{
    left:0;right:0;width:auto;height:1px;
    background:linear-gradient(90deg, transparent, rgba(176,206,246,.12) 8%, rgba(176,206,246,.12) 92%, transparent);
  }
  .filmstrip.horizontal .strip-track::before{top:14px;bottom:auto}
  .filmstrip.horizontal .strip-track::after{bottom:14px;top:auto}
  .filmstrip.horizontal .frame{height:100%}
  .filmstrip.horizontal .frame img{height:100%;width:auto;max-width:none}
  .filmstrip.horizontal .frame + .frame::before{
    left:-6px;right:auto;top:0;bottom:0;width:6px;height:auto;
    background:linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.25));
  }
  /* no veil, no grading — the photos run in their own colour */
  .filmstrip.horizontal::after{display:none;content:none}
  .filmstrip.horizontal .frame img{filter:none}
  /* the band keeps its own ground: it stacks above the strip and never touches it */
  .filmstrip.horizontal + .now-band{margin-top:4.2rem;z-index:1}
  @media (max-width:760px){
    .filmstrip.horizontal{height:132px;margin-top:3.4rem}
  }

  /* ---------- the name fades up out of the dark instead of sliding ---------- */
  .hero h1 span{overflow:visible}
  .hero h1 span i{animation:nameFade 1.7s .35s both var(--ease)}
  .hero h1 span:nth-child(2) i{animation-delay:.75s}
  @keyframes nameFade{
    from{opacity:0;filter:blur(7px)}
    to{opacity:1;filter:blur(0)}
  }
  @media (prefers-reduced-motion:reduce){
    .hero h1 span i{animation:none}
  }

  /* the banner title dissolves in the same way the name does at home */
  .page-banner .eyebrow{animation:nameFade 1.2s .1s both var(--ease)}
  .pb-rule{animation:nameFade 1.2s .25s both var(--ease)}
  .page-banner h1{animation:nameFade 1.7s .4s both var(--ease)}
  .pb-meta{animation:nameFade 1.3s 1s both var(--ease)}
  .pb-jump{animation:nameFade 1.3s 1.15s both var(--ease)}
  @media (prefers-reduced-motion:reduce){
    .page-banner .eyebrow,.pb-rule,.page-banner h1,.pb-meta,.pb-jump{animation:none}
  }

  /* small screens: let the card and honour grids collapse instead of overflowing */
  .press-cards{grid-template-columns:repeat(auto-fit,minmax(min(370px,100%),1fr))}
  .honor-list{grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr))}
  .now-grid{grid-template-columns:repeat(auto-fit,minmax(min(212px,100%),1fr))}
  .cap-grid{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}

  /* ---------- the strip loses the film stock: just the photographs, moving ---------- */
  .filmstrip.horizontal .strip-track{
    background:none;background-color:transparent;background-image:none;
    animation:none;padding:0;gap:10px;
    -webkit-mask-image:none;mask-image:none;
  }
  .filmstrip.horizontal .strip-track::before,
  .filmstrip.horizontal .strip-track::after{content:none;display:none}
  .filmstrip.horizontal .frame{background:transparent}
  .filmstrip.horizontal .frame + .frame::before{content:none;display:none}
  .filmstrip.horizontal .frame img{
    height:100%;width:auto;max-width:none;border-radius:2px;
  }

  /* ---------- the IMDb line, given its own stage ---------- */
  .imdb-cta{
    display:grid;justify-items:center;gap:.5rem;text-align:center;text-decoration:none;color:var(--ink);
    position:relative;overflow:hidden;
    max-width:440px;margin:3.6rem auto 0;padding:1.6rem 1.6rem 1.5rem;
    border:1px solid var(--line);border-radius:3px;
    background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 72%);
    transition:transform .45s var(--ease), border-color .45s, background .45s, box-shadow .45s var(--ease);
  }
  .imdb-cta::before{
    content:'';position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(to right,
      var(--blue) 0 20%, var(--cyan) 20% 40%, var(--green) 40% 60%, var(--yellow) 60% 80%, var(--red) 80% 100%);
  }
  .imdb-cta:hover{
    transform:translateY(-3px);border-color:var(--line-2);
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 76%);
    box-shadow:0 22px 48px rgba(0,0,0,.45);
  }
  .imdb-cta-label{
    font-family:var(--mono);font-size:.5rem;letter-spacing:.32em;text-transform:uppercase;color:var(--yellow);
  }
  .imdb-cta-head{
    display:inline-flex;align-items:baseline;gap:.65rem;
    font-family:var(--display);font-weight:400;font-size:clamp(1.15rem,2.4vw,1.42rem);
    line-height:1.15;letter-spacing:-.014em;
    transition:color .35s;
  }
  .imdb-cta-head i{font-style:normal;font-size:.7em;transition:transform .35s var(--ease)}
  .imdb-cta:hover .imdb-cta-head{color:var(--wkw-amber)}
  .imdb-cta:hover .imdb-cta-head i{transform:translate(4px,-4px)}
  .imdb-cta-sub{
    font-family:var(--body);font-weight:400;font-size:.53rem;letter-spacing:.2em;text-transform:uppercase;
    color:var(--dim-2);
  }
  @media (max-width:560px){
    .imdb-cta{padding:1.4rem 1.2rem 1.3rem;margin-top:2.8rem}
  }

  /* close the trough between the IMDb panel and the photographs */
  #films{padding-bottom:2.6rem}
  #photography{padding-top:4rem}
  @media (max-width:980px){
    #films{padding-bottom:1.8rem}
    #photography{padding-top:3rem}
  }

  /* ---------- home: a still burning quietly behind the name ---------- */
  .hero-still{
    position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;
    animation:heroDrift 42s ease-in-out infinite alternate;
  }
  .hero-still img{
    width:100%;height:100%;object-fit:cover;display:block;
    opacity:.36;filter:saturate(.78) contrast(1.05) brightness(.86);
    transform:scale(1.1) translate3d(var(--px,0px),var(--py,0px),0);
    transition:transform 1.4s cubic-bezier(.16,1,.3,1);
  }
  .hero-still::after{
    content:'';position:absolute;inset:0;
    background:
      radial-gradient(ellipse at 50% 45%, transparent 20%, rgba(20,20,20,.72) 78%),
      linear-gradient(180deg, rgba(20,20,20,.55), rgba(20,20,20,.2) 35%, rgba(20,20,20,.85));
  }
  @keyframes heroDrift{
    from{transform:scale(1.06) translate3d(-1%,0,0)}
    to{transform:scale(1.14) translate3d(1.5%,-1.5%,0)}
  }
  @media (prefers-reduced-motion:reduce){
    .hero-still{animation:none}
    .hero-still img{transition:none}
  }

  /* the name carries more of the frame now */
  .hero h1{font-size:clamp(3.6rem,13.5vw,10.5rem);letter-spacing:.045em}
  /* the trailing space each letter adds is pulled back so the words stay centred */
  .hero h1 span i{margin-right:-.045em}
  .hero-lede{font-size:.9rem;color:#CFC9C0;max-width:50ch}

  /* each letter of the name moves on its own */
  .hero h1 .ch{display:inline-block;will-change:transform,filter,opacity}

  /* the letters need the run of the whole frame */
  .hero h1, .hero h1 span{overflow:visible}
  .hero-copy{overflow:visible}

  /* ---------- everything in the hero breathes a little ---------- */
  @keyframes floatA{
    0%,100%{transform:translate3d(0,0,0)}
    33%{transform:translate3d(2px,-5px,0)}
    66%{transform:translate3d(-2px,3px,0)}
  }
  @keyframes floatB{
    0%,100%{transform:translate3d(0,0,0)}
    40%{transform:translate3d(-3px,4px,0)}
    75%{transform:translate3d(2px,-3px,0)}
  }
  @keyframes floatC{
    0%,100%{transform:translate3d(0,0,0)}
    50%{transform:translate3d(1px,-4px,0)}
  }
  .hero-eyebrow{
    animation:rise .9s .2s both, floatA 13s ease-in-out 1.4s infinite;
  }
  .hero-rule{animation:floatC 11s ease-in-out 1.6s infinite}
  .hero-lede{
    animation:rise .9s 1s both, floatB 15s ease-in-out 2.1s infinite;
  }
  .hero-actions{
    animation:rise .9s 1.15s both, floatA 17s ease-in-out 2.4s infinite;
  }
  /* the whole block drifts a hair with the cursor, under the letters' own motion */
  .hero-copy{
    transform:translate3d(var(--hx,0px),var(--hy,0px),0);
    transition:transform 2s cubic-bezier(.16,1,.3,1);
  }
  @media (prefers-reduced-motion:reduce){
    .hero-eyebrow,.hero-rule,.hero-lede,.hero-actions{animation:none}
    .hero-copy{transform:none}
  }

  /* the smear a letter leaves behind it */
  .hero h1 .ch{position:relative}
  .hero h1 .gh{
    position:absolute;left:0;top:0;z-index:-1;pointer-events:none;
    opacity:0;will-change:transform,opacity,filter;
  }

  /* ---------- filmography: the key still as a door to the full film ---------- */
  a.film-key{display:block;cursor:pointer;text-decoration:none}
  .film-key .film-clip{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    opacity:0;transition:opacity .45s var(--ease);pointer-events:none;
  }
  .film-key.playing .film-clip{opacity:1}
  .film-play{position:absolute;inset:0;z-index:2;display:grid;place-items:center;pointer-events:none}
  .film-play i{
    width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
    background:rgba(20,20,20,.55);border:1px solid rgba(255,255,255,.45);
    transition:background .3s, border-color .3s, transform .3s var(--ease), opacity .35s;
  }
  .film-play i::after{
    content:'';border-style:solid;border-width:6px 0 6px 10px;
    border-color:transparent transparent transparent #fff;margin-left:2px;
  }
  a.film-key:hover .film-play i,a.film-key:focus-visible .film-play i{background:var(--red);border-color:var(--red);transform:scale(1.08)}
  .film-key.playing .film-play i{opacity:0;transform:scale(.85)}

  /* ---------- phone menu ---------- */
  .nav-toggle{display:none}
  .mobile-menu{display:none}
  @media (max-width:980px){
    nav{padding:.9rem 1.2rem}
    .nav-right{gap:.9rem}
    .nav-toggle{
      display:flex;flex-direction:column;justify-content:center;gap:5px;
      width:44px;height:44px;padding:0 10px;margin-right:-10px;
      background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;
    }
    .nav-toggle span{display:block;height:2px;width:100%;background:var(--ink);border-radius:1px;transition:transform .35s var(--ease), opacity .25s}
    nav.menu-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    nav.menu-open .nav-toggle span:nth-child(2){opacity:0}
    nav.menu-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
    nav.menu-open{background:rgba(25,25,25,.98);border-color:var(--line);transform:none}

    .mobile-menu{
      display:flex;position:fixed;inset:0;z-index:149;
      background:#151515;
      align-items:center;justify-content:center;
      padding:6rem 2rem 3rem;overflow-y:auto;
      animation:mmIn .35s var(--ease);
    }
    .mobile-menu[hidden]{display:none}
    .mobile-links{list-style:none;display:flex;flex-direction:column;gap:1.6rem;text-align:center}
    .mobile-links a{
      font-family:var(--display);font-weight:400;font-size:2.1rem;letter-spacing:.02em;
      color:var(--dim);text-decoration:none;position:relative;padding-bottom:6px;
    }
    .mobile-links li.here a{color:var(--ink)}
    .mobile-links a::after{
      content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
      transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
    }
    .mobile-links li.here a::after,.mobile-links a:active::after{transform:scaleX(1)}
    .mobile-links li:nth-child(1) a::after{background:var(--blue)}
    .mobile-links li:nth-child(2) a::after{background:var(--cyan)}
    .mobile-links li:nth-child(3) a::after{background:var(--green)}
    .mobile-links li:nth-child(4) a::after{background:var(--yellow)}
    .mobile-links li:nth-child(5) a::after{background:var(--red)}
    body.menu-open{overflow:hidden}
  }
  @media (max-width:420px){
    .nav-cta{padding:.6rem .85rem;font-size:.58rem;letter-spacing:.14em}
    .nav-name{font-size:.98rem;gap:.55rem}
  }
  @keyframes mmIn{from{opacity:0}to{opacity:1}}
  @media (prefers-reduced-motion:reduce){.mobile-menu{animation:none}}