:root{
    --void:#000000; --pitch:#08080B; --ink:#0A0510;
    --gunmetal:#2A2A32; --chrome-lo:#5A5A66; --chrome:#9A9AA2; --bone:#F4F2EF;
    --oxblood:#4A0D2E; --signal:#E01030; --ember:#FF3D52; --filament:#FF8A6B;
    --plasma:#7B2FF7; --indigo:#2E0B52; --magenta:#C026D3; --hotpink:#FF6AF0;
    --instr:#00E5FF;
    --amber-burn:#6B3A05; --amber:#C77A10; --amber-glow:#FFB020;
    --display:"Chakra Petch","Arial Narrow",system-ui,sans-serif;
    --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
    --gut:clamp(16px,5vw,64px);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
  body{
    margin:0;background:var(--void);color:var(--bone);
    font-family:var(--mono);font-size:14px;line-height:1.65;
    -webkit-font-smoothing:antialiased;overflow-x:hidden;
  }
  #gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;}
  #grain{position:fixed;inset:0;z-index:1;pointer-events:none;
    background:
      radial-gradient(ellipse 120% 85% at 50% 30%,rgba(0,0,0,.50) 0,rgba(0,0,0,.88) 62%,rgba(0,0,0,.97) 100%),
      linear-gradient(rgba(0,0,0,.62),rgba(0,0,0,.62));}
  .page{position:relative;z-index:2;padding-block:0;
    padding-left:max(var(--gut),env(safe-area-inset-left));padding-right:max(var(--gut),env(safe-area-inset-right));}
  .wrap{max-width:1080px;margin:0 auto;}

  /* ---------- hero ---------- */
  .hero{display:grid;gap:18px;justify-items:center;text-align:center;
    position:relative;min-height:78vh;min-height:78svh;overflow:hidden;align-content:center;
    padding-block:calc(clamp(28px,5vh,54px) + env(safe-area-inset-top)) clamp(36px,7vh,72px);}
  .hud{position:absolute;top:max(14px,env(safe-area-inset-top));left:0;right:0;
    display:flex;gap:18px;justify-content:space-between;font:500 10px/1 var(--mono);
    letter-spacing:.24em;color:var(--instr);opacity:.85;pointer-events:none;}
  .hud span{background:var(--void);padding:2px 6px;}
  @media (max-width:399px){ .hud span:nth-child(2){display:none;} }
  .hero::after{content:"";position:absolute;inset:0;
    background:linear-gradient(transparent 0 48%,rgba(244,242,239,.10) 50%,transparent 52% 100%);
    background-size:100% 6px;animation:sweep 1.2s steps(24) 1 both;pointer-events:none;}
  @keyframes sweep{from{transform:translateY(-100%)}to{transform:translateY(100%);opacity:0}}
  .mark{width:min(300px,60vw);height:auto;filter:drop-shadow(0 0 38px rgba(224,16,48,.34));}
  /* Phones: the hero is a compact header so the set lands in the first screen. */
  @media (max-width:560px){
    .hero{min-height:0;gap:12px;padding-block:calc(42px + env(safe-area-inset-top)) 26px;}
    .mark{width:40vw;}
    .hero__cta .cta{padding-block:13px;}
  }
  .wordmark{font-family:var(--display);font-weight:700;
    font-size:clamp(38px,10vw,86px);letter-spacing:.30em;margin:0;
    text-indent:.30em;line-height:1;text-wrap:balance;}
  .tagline{display:grid;gap:5px;color:var(--chrome);font-size:clamp(11px,2.5vw,13px);
    letter-spacing:.22em;text-transform:uppercase;}
  .tagline b{color:var(--bone);font-weight:500;}
  .tagline .hot{color:var(--ember);}
  .tagline a{color:inherit;text-decoration:underline;text-underline-offset:3px;}

  /* ---------- proof + primary action ---------- */
  /* One quiet line of proof instead of a scoreboard: the reach number and
     where FLAYSH plays, in the tagline's register. */
  .proof{margin:6px 0 2px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--chrome);}
  .proof b{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.08em;color:var(--bone);}
  .proof span{white-space:nowrap;}
  .proof .sep{margin:0 .4em;color:var(--chrome-lo);}
  /* Phones: break at the // dividers, never inside a phrase. */
  .tagline b{white-space:nowrap;}
  @media (max-width:420px){ .tagline,.proof{letter-spacing:.14em;} }
  /* Read by screen readers and search engines, not drawn. */
  .sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
  .cta{display:inline-block;margin-top:4px;
    font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.22em;
    text-transform:uppercase;text-decoration:none;
    color:var(--void);background:var(--bone);padding:15px 30px;
    transition:background .2s,color .2s;}
  .cta:hover,.cta:focus-visible{background:var(--signal);color:var(--bone);}
  .cta:focus-visible{outline:2px solid var(--bone);outline-offset:3px;}
  .cta--ghost{background:transparent;color:var(--bone);box-shadow:inset 0 0 0 1px var(--bone);}
  /* "Watch" carries the film's play glyph, so it reads as play, not as a link out. */
  .cta--play{display:inline-flex;align-items:center;justify-content:center;gap:12px;}
  .cta--play::before{content:"";flex:none;border-left:9px solid currentColor;
    border-top:6px solid transparent;border-bottom:6px solid transparent;}
  /* Two ways out of the hero: book now, or watch the featured set first. */
  .hero__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:4px;}
  .hero__cta .cta{margin-top:0;}
  @media (max-width:560px){ .hero__cta{flex-direction:column;width:min(100%,340px);} .hero__cta .cta{text-align:center;} }

  /* Follows the reader once the hero button is gone. */
  .dock{position:fixed;z-index:4;left:0;right:0;bottom:0;
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:11px clamp(16px,5vw,40px);
    padding-bottom:max(12px,env(safe-area-inset-bottom));
    background:rgba(0,0,0,.92);border-top:1px solid var(--chrome-lo);
    backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
    transform:translateY(110%);transition:transform .3s ease;}
  .dock[data-show="1"]{transform:none;}
  .dock span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--chrome);}
  .dock a{font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.2em;
    text-transform:uppercase;text-decoration:none;color:var(--void);background:var(--bone);
    padding:10px 20px;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;}
  .dock a:hover{background:var(--signal);color:var(--bone);}
  html.projecting .dock{display:none;}
  @media (max-width:560px){ .dock span{display:none;} .dock{justify-content:center;} }

  .ghost{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--chrome);background:none;border:1px solid var(--chrome-lo);padding:7px 12px;
    cursor:pointer;min-height:44px;}
  .ghost:hover{color:var(--bone);border-color:var(--chrome);background:none;}
  .ghost[data-on="1"]{color:var(--signal);border-color:var(--bone);}
  .ghost[data-on="1"]::before{content:"";display:inline-block;width:5px;height:5px;
    border-radius:0;background:var(--signal);margin-right:7px;vertical-align:middle;
    animation:pulse 1.1s ease-in-out infinite;}

  /* ---------- section furniture ---------- */
  /* Section heads are projection registration marks: corner brackets and a
     ticked measure, the way a mapping rig calibrates onto a surface. Numbered
     eyebrows were wrong here - these sections are not a sequence, and
     numbering them implied an order nobody reads them in. */
  section{padding-block:clamp(52px,9vh,104px);border-top:1px solid var(--chrome-lo);
    --accent:var(--signal);}

  .eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 20px;
    font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--chrome);}
  .eyebrow .n{position:relative;width:11px;height:11px;flex:none;
    border-left:1px solid var(--bone);border-top:1px solid var(--bone);}
  .eyebrow .n::after{content:"";position:absolute;left:3px;top:3px;
    width:3px;height:3px;background:var(--bone);}
  .eyebrow .rule,.feature__rule{flex:1;height:7px;opacity:.55;
    background-image:repeating-linear-gradient(to right,
      var(--chrome-lo) 0 1px, transparent 1px 13px);
    background-position:bottom;background-repeat:repeat-x;
    border-bottom:1px solid var(--chrome-lo);}

  h2{font-family:var(--display);font-weight:700;
    font-size:clamp(34px,7.2vw,72px);letter-spacing:-.01em;line-height:.95;
    margin:0 0 14px;text-transform:uppercase;text-wrap:balance;
    max-width:16ch;}
  .lede{color:var(--chrome);max-width:52ch;margin:0;font-size:13.5px;}

  /* ---------- releases ---------- */
  .grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));}
  .rel{position:relative;display:block;text-decoration:none;color:inherit;
    border:0;background:none;transition:none;}
  .rel:focus-visible{outline:2px solid var(--bone);outline-offset:3px;}
  /* height:auto is required — the width/height attributes on the <img> make
     height definite, and aspect-ratio is ignored unless one side is auto. */
  .rel img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;
    filter:grayscale(.55) contrast(1.12);transition:filter .3s;}
  .rel:hover img,.rel:focus-visible img{filter:grayscale(0) contrast(1);}
  .rel .meta{padding:11px 0 0;display:grid;gap:2px;}
  .rel .t{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.03em;
    transition:color .2s;}
  .rel:hover .t{color:var(--accent);}
  .rel .s{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--chrome);}

  /* ---------- films ---------- */
  /* Facade: a self-hosted still stands in for the player until someone clicks,
     so nothing third-party loads on arrival and the stills render even where
     YouTube is blocked. The 16:9 box is fixed, so swapping in the player
     shifts nothing. */
  .film{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;
    background:var(--pitch);}
  .film__btn{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;margin:0;
    border:0;border-radius:0;background:var(--pitch);cursor:pointer;transition:filter .3s;}
  .film__btn:hover{background:var(--pitch);filter:brightness(1.1);}
  .film__btn:focus-visible{filter:brightness(1.1);outline:2px solid var(--bone);outline-offset:-4px;}
  .film img{width:100%;height:100%;object-fit:cover;display:block;
    filter:grayscale(.3) contrast(1.05);transition:filter .3s,transform .5s;}
  .film__btn:hover img,.film__btn:focus-visible img{filter:none;transform:scale(1.03);}
  .film__play{position:absolute;z-index:1;top:50%;left:50%;translate:-50% -50%;
    width:62px;height:62px;border:1px solid rgba(244,242,239,.75);border-radius:0;
    background:rgba(0,0,0,.45);transition:background .25s,border-color .25s,scale .25s;}
  .film__play::after{content:"";position:absolute;top:50%;left:54%;translate:-50% -50%;
    border-left:17px solid var(--bone);border-top:11px solid transparent;
    border-bottom:11px solid transparent;}
  .film__btn:hover .film__play,.film__btn:focus-visible .film__play{
    background:var(--accent);border-color:var(--bone);scale:1.08;}
  .film iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
  .film iframe:focus-visible{outline:2px solid var(--bone);outline-offset:-2px;}

  /* ---------- the audiovisual set: the main product ---------- */
  /* The featured set is the screen of a rig: a readout bar over it, two
     registration corners pinned on it, the facts and the two actions under
     it, all in one chrome frame. The other sets sit below at a fraction of the
     weight: small stills, a small play box, a caption, no copy. Red is only
     the record mark, the title's pipes, the play box on hover and the
     primary action's hover. Swapping which set leads is one value in
     site/sets.json. */
  /* Past the 1080px column on wide screens, up to the still's own 1280px:
     a bigger player (YouTube picks its quality from the player's size) and a
     still that is never upscaled on a 1x screen. */
  .feature{margin-top:clamp(14px,2vw,22px);border:1px solid var(--chrome);background:var(--void);
    margin-inline:min(0px,calc((100% - min(1280px,100vw - var(--sbw,0px) - 2*var(--gut))) / 2));}
  .feature__bar{display:flex;align-items:center;gap:14px;min-height:46px;padding:0 18px;
    border-bottom:1px solid var(--chrome);background:var(--void);
    font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--chrome);}
  .feature__rec{display:inline-flex;align-items:center;gap:10px;color:var(--bone);white-space:nowrap;}
  .feature__rec::before{content:"";flex:none;width:7px;height:7px;background:var(--signal);
    animation:pulse 1.6s ease-in-out infinite;}
  .feature__time{color:var(--instr);font-variant-numeric:tabular-nums;letter-spacing:.2em;white-space:nowrap;}

  /* No corner marks of our own on the screen: the show's art carries its own frame. */
  .feature__screen{position:relative;}
  /* The still in full colour (it is the show's own art), under faint
     scanlines and a light veil that lifts on hover; a red bloom from the
     edges on hover. */
  .film--feature img{filter:none;}
  .film--feature .film__btn::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:rgba(0,0,0,.16);
    background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px);
    box-shadow:inset 0 0 0 0 var(--signal);transition:box-shadow .3s,background-color .3s;}
  .film--feature .film__btn:hover::after,.film--feature .film__btn:focus-visible::after{
    background-color:rgba(0,0,0,0);box-shadow:inset 0 0 0 1px var(--bone),inset 0 0 90px -22px var(--accent);}
  /* The one thing to do on this screen, so it says so: a red, labelled play
     button in the middle of the still, big enough to hit with a thumb, with a
     slow beacon pulse (off under reduced motion). The whole still is the
     button; this is the sign on it. */
  .film__play--label{width:auto;height:auto;z-index:2;display:inline-flex;align-items:center;gap:.9em;
    padding:0 1.5em;min-height:clamp(52px,6.5vw,72px);white-space:nowrap;
    font-family:var(--display);font-weight:700;font-size:clamp(13px,1.5vw,17px);
    letter-spacing:.22em;text-transform:uppercase;color:var(--bone);
    background:var(--signal);border:1px solid var(--bone);
    animation:beacon 2.6s ease-out infinite;}
  .film__play--label::after{content:none;}
  .film__play--label::before{content:"";flex:none;border-left:.95em solid currentColor;
    border-top:.6em solid transparent;border-bottom:.6em solid transparent;}
  .film__btn:hover .film__play--label,.film__btn:focus-visible .film__play--label{
    background:var(--bone);color:var(--void);border-color:var(--bone);scale:1.05;}
  @keyframes beacon{
    0%{box-shadow:0 0 0 0 rgba(224,16,48,.6)}
    70%{box-shadow:0 0 0 22px rgba(224,16,48,0)}
    100%{box-shadow:0 0 0 0 rgba(224,16,48,0)}}

  .feature__body{display:grid;gap:22px;padding:clamp(18px,2.6vw,28px);border-top:1px solid var(--chrome);}
  .feature__info{display:grid;gap:10px;justify-items:start;}
  .feature__kick{margin:0;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--chrome);}
  .feature__kick a{color:var(--bone);text-decoration:none;border-bottom:1px solid var(--chrome-lo);
    transition:color .2s,border-color .2s;}
  .feature__kick a:hover{color:var(--ember);border-color:var(--ember);}
  .feature a:focus-visible{outline:2px solid var(--bone);outline-offset:3px;}
  .feature__t{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(21px,3.4vw,34px);
    line-height:1.08;letter-spacing:.01em;text-transform:uppercase;text-wrap:balance;max-width:26ch;}
  .feature__sep{color:var(--signal);font-weight:500;}
  .feature__d{margin:0;max-width:56ch;color:var(--chrome);font-size:13.5px;}
  .feature__orig{margin:2px 0 0;display:flex;gap:11px;align-items:baseline;max-width:56ch;
    color:var(--bone);font-size:12.5px;letter-spacing:.04em;}
  .feature__orig::before{content:"";flex:none;width:7px;height:7px;translate:0 -1px;
    background:var(--signal);outline:1px solid var(--bone);outline-offset:2px;}
  .feature__tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:6px 0 0;padding:0;}
  .feature__tags li{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--ember);border:1px solid rgba(154,154,162,.45);padding:3px 7px;}
  .feature__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;}
  .feature__cta .cta{margin-top:0;min-height:52px;display:inline-flex;align-items:center;justify-content:center;}
  .feature__yt{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
    font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--chrome);
    text-decoration:none;transition:color .2s;}
  .feature__yt:hover{color:var(--bone);}
  @media (min-width:900px){
    .feature__body{grid-template-columns:1fr auto;align-items:end;gap:40px;}
    .feature__cta{flex-direction:column;align-items:stretch;min-width:260px;}
  }

  /* The other sets: a third of the hero's width each, no copy. */
  .minor{list-style:none;margin:0;padding:0;display:grid;gap:14px;max-width:720px;
    grid-template-columns:repeat(2,minmax(0,1fr));}
  .minor__item{border:1px solid var(--chrome-lo);background:var(--void);transition:border-color .25s;}
  .minor__item:hover,.minor__item:focus-within{border-color:var(--chrome);}
  .minor .film img{filter:grayscale(.55) contrast(1.08);}
  .minor .film__play{width:46px;height:46px;}
  .minor .film__play::after{border-left-width:13px;border-top-width:8px;border-bottom-width:8px;}
  .minor__cap{margin:0;padding:11px 13px 12px;display:grid;gap:3px;border-top:1px solid var(--chrome-lo);
    font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--chrome);line-height:1.45;}
  .minor__cap b{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.08em;color:var(--bone);}
  @media (max-width:560px){
    .feature{margin-inline:calc(var(--gut)*-1);border-inline:0;}
    .feature__bar{padding:0 var(--gut);gap:10px;letter-spacing:.2em;}
    .feature__body{padding:20px var(--gut) 24px;}
    .feature__cta{flex-direction:column;align-items:stretch;}
    .minor{gap:10px;}
    .minor__cap{padding:9px 10px 10px;font-size:9px;letter-spacing:.14em;}
  }
  #avset{padding-top:clamp(24px,4vh,44px);}
  #avset .eyebrow{margin-bottom:0;}
  .sublede{margin:34px 0 14px;font-size:10.5px;letter-spacing:.24em;
    text-transform:uppercase;color:var(--chrome);}

  /* ---------- sets ---------- */
  .sets{display:grid;gap:0;}
  .set{display:grid;grid-template-columns:64px 1fr auto;gap:18px;align-items:center;
    border:0;border-bottom:1px solid var(--chrome-lo);background:none;padding:14px 2px;
    text-decoration:none;color:inherit;transition:padding-left .25s,background .25s;}
  .set:first-child{border-top:1px solid var(--chrome-lo);}
  .set:hover,.set:focus-visible{padding-left:12px;background:rgba(255,255,255,.018);}
  .set:hover .go{color:var(--accent);}
  .set:focus-visible{outline:2px solid var(--bone);outline-offset:2px;}
  .set img{width:64px;height:64px;object-fit:cover;filter:grayscale(.5);transition:filter .3s;}
  .set:hover img{filter:none;}
  .set .t{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:.02em;}
  .set .s{font-size:11px;color:var(--chrome);letter-spacing:.14em;text-transform:uppercase;}
  .set .go{font-size:11px;letter-spacing:.2em;color:var(--chrome);white-space:nowrap;}

  /* ---------- projection mode ---------- */
  /* Everything but the canvas gets out of the way, so the simulation can be
     sent to a projector or a second screen and driven by hand. */
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
  html.projecting #grain{opacity:0;}
  html.projecting .page{opacity:0;pointer-events:none;}
  html.projecting body{cursor:crosshair;}
  .exit{position:fixed;z-index:5;left:50%;bottom:26px;translate:-50% 0;
    font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--chrome);
    pointer-events:none;opacity:0;transition:opacity .4s;}
  html.projecting .exit{opacity:.65;}

  /* ---------- reels ---------- */
  .reelgrid{display:grid;gap:10px;margin-top:22px;
    grid-template-columns:repeat(auto-fill,minmax(168px,1fr));}
  /* 9 tiles with the leader at 2x2 = 12 cells, which divides evenly by 4 and
     3 — so no orphan row at either grid breakpoint (phones get a snap row).
     12 tiles in a 5-wide grid was leaving a 5/5/2 tail. */
  .reelgrid--file{grid-template-columns:repeat(4,1fr);gap:3px;}
  .reelcard--lead{grid-column:span 2;grid-row:span 2;}
  .reelcard--lead .reelcard__views{font-size:22px;padding:34px 14px 13px;}
  @media (max-width:900px){ .reelgrid--file{grid-template-columns:repeat(3,1fr);} }
  .reelcard{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;
    border:0;background:var(--pitch);text-decoration:none;color:inherit;
    transition:filter .3s;}
  .reelcard:hover,.reelcard:focus-visible{filter:brightness(1.12);}
  .reelcard:focus-visible{outline:2px solid var(--bone);outline-offset:2px;}
  /* Much of this footage is landscape centred in a vertical reel canvas, so
     the frame carries its own black bars. Cropping them would cut the
     composition; instead a blurred, scaled copy of the poster fills the dead
     space and the real frame sits on top uncropped. */
  .reelcard::before{content:"";position:absolute;inset:-12%;z-index:0;
    background-image:var(--poster);background-size:cover;background-position:center;
    filter:blur(26px) saturate(1.25) brightness(.42);transform:scale(1.08);}
  .reelcard video,.reelcard img{position:relative;z-index:1;
    width:100%;height:100%;object-fit:contain;display:block;}
  .reelcard__views{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 10px 9px;
    font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.05em;
    color:var(--bone);background:linear-gradient(transparent,rgba(0,0,0,.94));
    display:flex;align-items:baseline;gap:7px;}
  .reelcard__views small{font-family:var(--mono);font-weight:400;font-size:9.5px;
    letter-spacing:.2em;text-transform:uppercase;color:var(--chrome);}
  .reelcard__tag{position:absolute;right:9px;top:9px;z-index:2;
    font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--bone);background:rgba(0,0,0,.66);padding:3px 7px;
    border-left:2px solid var(--bone);opacity:.82;transition:opacity .25s;}
  .reelcard:hover .reelcard__tag{opacity:1;}
  .reelcard::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    box-shadow:inset 0 0 0 0 var(--signal);transition:box-shadow .25s;}
  .reelcard:hover::after{box-shadow:inset 0 0 0 1px var(--bone), inset 0 0 46px -14px var(--accent);}
  /* Autoplay refused (iOS Low Power Mode, data saver): a tap plays it. */
  .reelcard[data-blocked]::after{content:"\25B6";inset:auto;left:50%;top:50%;z-index:2;
    width:44px;height:44px;translate:-50% -50%;display:grid;place-items:center;
    border:1px solid var(--bone);background:rgba(0,0,0,.62);box-shadow:none;
    color:var(--bone);font-size:15px;line-height:1;}
  /* Phones: one row that snaps card by card. The only horizontal scroller on
     the page, and it scrolls inside its own box, bleeding to the screen edge. */
  @media (max-width:560px){
    .reelgrid--file,#reelgrid,#ctrlfgrid{display:grid;grid-template-columns:none;grid-auto-flow:column;
      grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;
      margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);scroll-padding-inline:var(--gut);}
    #ctrlfgrid{grid-auto-columns:62vw;}
    .reelcard{scroll-snap-align:center;}
    .reelcard--lead{grid-column:auto;grid-row:auto;}
  }

  /* ---------- tools ---------- */
  .tools{display:grid;gap:14px;margin-top:22px;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
  .tool{display:grid;grid-template-rows:auto 1fr;text-decoration:none;color:inherit;
    border:1px solid var(--chrome-lo);background:var(--pitch);overflow:hidden;
    transition:border-color .25s,transform .25s;}
  .tool:hover,.tool:focus-visible{border-color:var(--bone);transform:translateY(-3px);}
  .tool:focus-visible{outline:2px solid var(--bone);outline-offset:2px;}
  .tool img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
    filter:grayscale(.4) contrast(1.06);transition:filter .3s;}
  .tool:hover img{filter:none;}
  .tool .body{padding:15px 16px 18px;display:grid;gap:7px;align-content:start;}
  .tool .t{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:.03em;}
  .tool .d{color:var(--chrome);font-size:12.5px;line-height:1.6;}
  .tool .k{display:flex;flex-wrap:wrap;gap:6px;margin-top:3px;}
  .tool .k span{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--ember);border:1px solid rgba(154,154,162,.45);padding:3px 7px;}
  /* analog-amber lane: amber glow only on void; one crimson element (.sale) */
  .lead-amber .tool{background:var(--void);border-color:var(--chrome);position:relative;}
  .lead-amber .tool:hover,.lead-amber .tool:focus-visible{border-color:var(--bone);}
  .lead-amber .tool::before{content:"";position:absolute;left:0;right:0;top:0;aspect-ratio:16/9;z-index:1;
    pointer-events:none;
    background-image:repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px);}
  .lead-amber .tool .body{background:var(--void);}
  .lead-amber .tool .t{color:var(--amber-glow);}
  .lead-amber .tool .k span{color:var(--amber);border-color:var(--chrome);}
  .lead-amber .tool .k span.sale{background:var(--signal);color:var(--bone);border-color:var(--bone);}

  /* ---------- booking ---------- */
  /* What the booker needs: the offers themselves are the choice (radio tiles),
     so the list is not shown twice and picking is one tap. */
  .pick{border:0;margin:0;padding:0;min-width:0;}
  .pick legend{padding:0;margin-bottom:8px;font-size:10.5px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--chrome);}
  .offer{display:grid;gap:1px;margin:0;padding:0;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    background:var(--chrome-lo);border:1px solid var(--chrome-lo);}
  .offer label{position:relative;background:var(--pitch);padding:14px 15px;display:grid;gap:4px;
    align-content:start;cursor:pointer;text-transform:none;letter-spacing:normal;
    transition:background .25s,box-shadow .25s;}
  .offer label:hover{background:var(--gunmetal);}
  /* Five tiles never fill the grid evenly: the CTRL+F night (a whole night,
     not a set) takes its own full-width row instead of leaving a grey hole. */
  .offer label:last-child{grid-column:1/-1;}
  .offer input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;padding:0;}
  .offer label:has(input:checked){background:var(--gunmetal);box-shadow:inset 0 0 0 1px var(--bone);}
  .offer label:has(input:checked) b::before{content:"\25CF  ";color:var(--signal);}
  .offer label:has(input:focus-visible){outline:2px solid var(--bone);outline-offset:-2px;}
  label .opt{text-transform:none;letter-spacing:.04em;color:var(--chrome);}
  .offer b{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.04em;
    text-transform:uppercase;color:var(--bone);}
  .offer span{font-size:11px;color:var(--chrome);line-height:1.5;}
  /* The press kit is the first thing a booker is sent, so it leads the
     section: the EPK as the button, the rest as plain links after it. */
  .kit{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;margin:24px 0 30px;}
  .kit a{display:inline-flex;align-items:center;min-height:44px;color:var(--chrome);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
    text-decoration:none;border-bottom:1px solid var(--chrome-lo);}
  .kit a:hover{color:var(--bone);border-color:var(--bone);}
  .kit a.cta{margin:0 6px 0 0;min-height:52px;justify-content:center;border:0;
    color:var(--void);background:var(--bone);font-size:15px;letter-spacing:.22em;}
  .kit a.cta:hover,.kit a.cta:focus-visible{color:var(--bone);background:var(--signal);}
  /* The form is where the page is going, so it gets its own ground instead of
     sitting on the same flat black as everything above it. */
  .book{display:grid;gap:14px;grid-template-columns:1fr 1fr;max-width:720px;
    background:linear-gradient(180deg,rgba(224,16,48,.05),transparent 55%),var(--pitch);
    border:1px solid var(--chrome-lo);border-top:2px solid var(--bone);
    padding:clamp(18px,3.5vw,30px);}
  .field{display:grid;gap:6px;}
  .field.full{grid-column:1/-1;}
  label{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--chrome);}
  input,select,textarea{
    font-family:var(--mono);font-size:14px;color:var(--bone);
    background:rgba(0,0,0,.55);border:0;border-bottom:1px solid var(--chrome-lo);
    padding:10px 2px;min-height:44px;width:100%;border-radius:0;appearance:none;
    transition:border-color .2s;}
  input::placeholder,textarea::placeholder{color:var(--chrome-lo);}
  textarea{min-height:104px;resize:vertical;}
  input:focus,select:focus,textarea:focus{outline:none;border-bottom-color:var(--bone);}
  button{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.22em;
    text-transform:uppercase;color:var(--void);background:var(--bone);
    border:none;padding:15px 26px;cursor:pointer;border-radius:0;
    transition:background .2s,color .2s;}
  button:hover{background:var(--signal);color:var(--bone);}
  button:disabled{opacity:.5;cursor:default;}
  button:focus-visible{outline:2px solid var(--bone);outline-offset:3px;}
  .note{grid-column:1/-1;color:var(--chrome);font-size:11.5px;letter-spacing:.05em;}

  /* ---------- footer ---------- */
  footer{border-top:1px solid var(--chrome-lo);padding-block:34px 56px;
    display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;}
  footer a{display:inline-flex;align-items:center;min-height:44px;color:var(--chrome);text-decoration:none;font-size:11px;
    letter-spacing:.22em;text-transform:uppercase;transition:color .2s;}
  footer a:hover,footer a:focus-visible{color:var(--signal);}
  /* The mark, small, closing the page; it goes back to the top. */
  footer a.footmark{margin-right:6px;}
  .footmark img{display:block;width:56px;height:auto;opacity:.82;
    filter:drop-shadow(0 0 12px rgba(224,16,48,.30));transition:opacity .2s;}
  .footmark:hover img,.footmark:focus-visible img{opacity:1;}
  footer a:focus-visible{outline:2px solid var(--bone);outline-offset:3px;}
  footer .sig{margin-left:auto;color:var(--chrome);font-size:10.5px;letter-spacing:.18em;}

  @media (max-width:560px){
    .book{grid-template-columns:1fr;}
    .kit a.cta{flex:1 1 100%;margin:0 0 6px;}
    .set{grid-template-columns:60px 1fr;}
    .set img{width:60px;height:60px;}
    .set .go{display:none;}
  }
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none!important;transition:none!important;}
    .hero::after{opacity:0;}
    .film__btn:hover img,.film__btn:focus-visible img{transform:none;}
  }

.lead-red{--accent:var(--signal);}
.lead-plasma{--accent:var(--plasma);}
.lead-amber{--accent:var(--amber);}

/* ---------- CTRL+F: the page's one plasma zone ---------- */
/* A showcase, not a section: the night's name at hero scale, then the reels
   big enough to watch, then the ways in. Plasma leads on ink; magenta and hot
   pink only ever appear as 2px rims on hover/focus; no red inside. */
.bandbreak{height:24px;background:var(--void);border-top:1px solid var(--bone);border-bottom:1px solid var(--bone);
  margin-inline:calc(50% - 50vw + var(--sbw,0px)/2);}
#ctrlf{--g:12px;border-top:0;
  background:radial-gradient(ellipse 60% 240px at 50% 0,rgba(123,47,247,.22),transparent 100%),var(--ink);
  padding-block:clamp(28px,4.5vh,52px);
  margin-inline:calc(50% - 50vw + var(--sbw,0px)/2);
  padding-inline:max(var(--gut),calc(50vw - var(--sbw,0px)/2 - 540px));}

.ctrlf__head{display:grid;justify-items:center;gap:clamp(10px,1.6vw,16px);text-align:center;}
#ctrlf .ctrlf__mark{max-width:none;text-transform:none;color:var(--bone);font-size:clamp(24px,6vw,52px);
  text-shadow:0 0 42px rgba(123,47,247,.75),0 0 2px rgba(123,47,247,.9);}
.ctrlf__bio{display:grid;gap:4px;margin:0;font-family:var(--mono);
  font-size:clamp(11.5px,2.4vw,13.5px);letter-spacing:.14em;line-height:1.5;color:var(--chrome);}
.ctrlf__bio span:first-child{color:var(--bone);font-weight:500;}

/* Three reels, one compact row from 561px up (a snap row on phones, in the
   reels block above) — a teaser; the full story lives on ctrlf.flaysh.com. */
#ctrlfgrid{gap:var(--g);margin-top:clamp(20px,3vw,32px);}
@media (min-width:561px){
  #ctrlfgrid{grid-template-columns:repeat(3,1fr);max-width:660px;margin-inline:auto;}
}
#ctrlf .reelcard::after{box-shadow:inset 0 0 0 0 var(--plasma);}
#ctrlf .reelcard:not([data-blocked]):hover::after,
#ctrlf .reelcard:not([data-blocked]):focus-visible::after{
  box-shadow:inset 0 0 0 2px var(--hotpink), inset 0 0 70px -18px var(--plasma);}
#ctrlf .reelcard:focus-visible{outline:2px solid var(--magenta);outline-offset:3px;}
#ctrlf .reelcard__tag{right:12px;top:12px;}
#ctrlf .reelcard__views{font-size:clamp(16px,1.5vw,19px);padding:40px 12px 12px;}
#ctrlf .reelcard__views small{font-size:10px;}

.ctrlf__cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:14px;
  margin-top:clamp(24px,3.4vw,36px);}
#ctrlf .cta{background:var(--plasma);color:var(--bone);margin-top:0;min-height:52px;
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;text-align:center;
  border:1px solid var(--plasma);}
#ctrlf .cta:hover,#ctrlf .cta:focus-visible{background:var(--plasma);color:var(--bone);
  outline:2px solid var(--magenta);outline-offset:3px;}
#ctrlf .cta--ghost{background:transparent;border-color:var(--bone);box-shadow:none;}
#ctrlf .cta--ghost:hover,#ctrlf .cta--ghost:focus-visible{background:transparent;outline-color:var(--hotpink);}

.ctrlf__enter{display:grid;justify-items:center;gap:8px;}
.ctrlf__url{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--bone);}
@media (max-width:560px){
  .ctrlf__cta{flex-direction:column;align-items:stretch;}
  .ctrlf__enter{justify-items:stretch;text-align:center;}
}