/* phil.isdiy.studio — shared SUPERCOLOR stylesheet. Extracted verbatim from index.html 2026-09-09 so case-study pages share one cached file. Tokens: docs/design-system/SUPERCOLOR.md */
:root{
    --black:#121912;   --cream:#D9D399;
    --cyan:#1391B1;    --lime:#93B52B;   --yellow:#FBE61B;
    --amber:#ECB03E;   --orange:#F96324; --brick:#D14226;  --magenta:#F04383;
    --dim:rgba(217,211,153,.60);
    --line:rgba(217,211,153,.18);
    --panel:rgba(0,0,0,.24);
    --disp:"Archivo", system-ui, sans-serif;
    --mono:"Space Mono", ui-monospace, monospace;
    --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:104px;
    --sec:clamp(76px, 10vw, 128px);
    --gap:clamp(16px, 2vw, 22px);
    --maxread:46rem;
    --focus:var(--yellow);
  }
  *{margin:0; padding:0; box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:var(--black); color:var(--cream);
    font-family:var(--disp); line-height:1.55; font-size:16px;
    -webkit-font-smoothing:antialiased; overflow-x:clip; position:relative; text-rendering:optimizeLegibility;
  }
  #grain,#scan{position:fixed; inset:0; z-index:2; pointer-events:none}
  #grain{opacity:.26; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}
  #scan{opacity:.30; mix-blend-mode:multiply; background:repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.5) 2px 3px)}

  .wrap{max-width:1120px; margin:0 auto; padding:0 28px; position:relative; z-index:3}
  a{color:var(--cyan); text-decoration:none}
  a:focus-visible, button:focus-visible, [tabindex]:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:2px}
  .visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .skip{position:fixed; left:12px; top:-60px; z-index:60; background:var(--cream); color:var(--black);
    font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
    padding:10px 14px; border-radius:3px; transition:top .18s ease}
  .skip:focus{top:12px}
  .a11y-btn{position:absolute; top:22px; right:18px; z-index:6; width:34px; height:34px; display:inline-flex;
    align-items:center; justify-content:center; background:transparent; border:1.5px solid var(--line);
    border-radius:50%; cursor:pointer; opacity:.55; transition:opacity .2s ease, border-color .2s ease}
  .a11y-btn:hover, .a11y-btn:focus-visible{opacity:1; border-color:var(--cream)}
  .a11y-btn .ico{width:15px; height:15px; border-radius:50%; border:1.5px solid var(--cream);
    background:linear-gradient(90deg, var(--cream) 0 50%, transparent 50% 100%)}
  :root.a11y .a11y-btn{opacity:1; border-color:var(--cream)}

  .bars{display:flex; height:14px; width:100%}
  .bars span{flex:1}
  .b1{background:var(--cyan)} .b2{background:var(--lime)} .b3{background:var(--yellow)}
  .b4{background:var(--amber)} .b5{background:var(--orange)} .b6{background:var(--brick)} .b7{background:var(--magenta)}
  .rail-top{position:sticky; top:0; z-index:5}

  /* header */
  .site-head{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
    padding:16px 0; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:11px;
    letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}
  .brand{display:inline-flex; align-items:center; gap:10px}
  .brand .logo{font-family:var(--disp); font-weight:900; font-variation-settings:"wght" 900,"wdth" 120;
    font-size:1.15rem; color:var(--cream); letter-spacing:-.02em}
  .li-ico{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:3px;
    color:var(--cyan); opacity:.62; transition:opacity .18s ease, transform .18s ease}
  .li-ico:hover, .li-ico:focus-visible{opacity:1; transform:translateY(-1px)}
  .li-ico svg{width:15px; height:15px; fill:currentColor}
  .site-head nav{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
  .site-head nav a{color:var(--dim); transition:color .18s ease}
  .site-head nav a:hover, .site-head nav a:focus-visible{color:var(--cream)}

  section{padding:var(--sec) 0; border-bottom:1px solid var(--line)}
  .sec-h{font-family:var(--mono); font-size:12px; letter-spacing:.28em; text-transform:uppercase;
    color:var(--dim); margin-bottom:var(--s2); display:flex; align-items:center; gap:12px}
  .sec-h::before{content:""; width:26px; height:10px; background:var(--chan,var(--orange)); flex:none}

  h1.big, h2.big, .rpanel .stitle, .ch-name, .ftitle, .pc-title{overflow-wrap:break-word; -webkit-hyphens:auto; hyphens:auto}
  h1.big, h2.big{font-family:var(--disp); font-weight:900; font-variation-settings:"wght" 900,"wdth" 120; text-transform:uppercase;
    font-size:clamp(1.85rem,5vw,3.15rem); line-height:1.06; letter-spacing:-.02em;
    margin-bottom:var(--s4); text-wrap:balance; max-width:20ch;
    text-shadow:0 0 24px color-mix(in srgb, var(--chan,var(--orange)) 34%, transparent), 0 0 3px color-mix(in srgb, var(--chan,var(--orange)) 22%, transparent);
    filter:url(#grainy)}
  h1.big .u, h2.big .u{display:block; width:fit-content; max-width:100%; line-height:1.3;
    text-decoration:underline; text-decoration-color:var(--chan,var(--orange));
    text-decoration-thickness:5px; text-underline-offset:8px; text-decoration-skip-ink:none}
  .lead{font-size:clamp(1.2rem,2.5vw,1.62rem); font-weight:600; max-width:44rem; line-height:1.34; text-wrap:pretty; margin-bottom:var(--s3)}
  p.body{max-width:var(--maxread); font-size:1.05rem; margin-bottom:var(--s2); text-wrap:pretty}
  p.body.dim{color:var(--dim)}
  p.body:last-child{margin-bottom:0}
  .lead em, p.body em{font-style:normal; color:var(--yellow)}
  .block{margin-top:var(--s4)}

  /* ============ HERO (contained, no reflow) ============ */
  .hero{padding:var(--s6) 0 var(--s5); border-bottom:1px solid var(--line)}
  .hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:var(--s5); align-items:center}
  .hero-copy{min-width:0}
  .hero-eye{font-family:var(--mono); font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--orange); margin-bottom:16px}
  /* fixed slot so rotation never reflows the page */
  .hero-h1{font-family:var(--disp); font-weight:900; font-variation-settings:"wght" 900,"wdth" 115; text-transform:uppercase;
    font-size:clamp(1.7rem,3.4vw,2.55rem); line-height:1.0; letter-spacing:-.02em; color:var(--cream);
    height:5.15em; display:flex; align-items:flex-start; text-wrap:balance; will-change:text-shadow}
  .hero-blurb{font-size:clamp(1.05rem,2.1vw,1.4rem); font-weight:600; max-width:34rem; line-height:1.34;
    color:var(--cream); margin-top:14px; height:6em; overflow:hidden; transition:opacity .3s ease}
  .hero-hint{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-top:22px}

  @keyframes dotblink{0%,49%{opacity:1}50%,100%{opacity:.25}}

  /* ============ HERO FIGURE ============
     A color box crops the subject; the subject pokes out past it. The box is the only thing
     clipped to the 4:5; the clip-path on .hero-fig opens the TOP and SIDES so the head and
     elbows escape while the bottom stays cut flush to the box (the "frame" read).
     Every slot (still or video) and every fx layer shares --slot-h / --slot-y, set per slot
     by site.js, so the fx masks land exactly on the live subject. */
  .hero-fig{position:relative; width:100%; aspect-ratio:4/5; max-height:60vh; margin:0 auto;
    clip-path:inset(-50% -40% 0 -40%); container-type:size; --slot-h:118%; --slot-y:-5%; --slot-ar:1; --split:0px}
  /* the color box: this is what the subject extends past. (Not .fig-frame: case.css owns that
     name for the 16:9 case-study figures and it is loaded on this page too.) */
  /* the box fill is per slot (Phil, 2026-09-17): orange / teal color blocks with the speed
     lines drifting slowly along their own diagonal, black with cream hairline + faint lines,
     a heavily compressed stop-motion foil loop, or live TV static. */
  .hero-box{position:absolute; inset:0; border-radius:10px; overflow:hidden; background:#0a0e0a; border:1px solid var(--line); --spd-c:rgba(217,211,153,.09)}
  .hero-box.bg-orange{background:linear-gradient(150deg,var(--amber),var(--orange)); border-color:transparent; --spd-c:rgba(18,25,18,.30)}
  .hero-box.bg-teal{background:linear-gradient(150deg,var(--cyan),#0c5a70); border-color:transparent; --spd-c:rgba(18,25,18,.30)}
  .hero-box .spd{position:absolute; inset:0; overflow:hidden; -webkit-mask:linear-gradient(120deg,#000,transparent 60%); mask:linear-gradient(120deg,#000,transparent 60%)}
  /* one gradient period along the 120deg diagonal is 22px, i.e. (19.05px, 11px): translating by
     exactly that loops seamlessly, so the lines crawl forever without a visible reset */
  .hero-box .spd i{position:absolute; inset:-48px; background:repeating-linear-gradient(120deg, transparent 0 20px, var(--spd-c) 20px 22px); animation:spdDrift 3.6s linear infinite; will-change:transform}
  @keyframes spdDrift{to{transform:translate(19.05px,11px)}}
  .hero-box .box-video, .hero-box .box-static{position:absolute; inset:0; width:100%; height:100%; display:none; object-fit:cover}
  .hero-box.bg-foil{border-color:transparent}
  .hero-box.bg-foil .box-video{display:block}
  .hero-box.bg-foil .spd, .hero-box.bg-static .spd{display:none}
  .hero-box.bg-static .box-static{display:block; opacity:.55}
  @media (prefers-reduced-motion:reduce){ .hero-box .spd i{animation:none} }
  .slot-stack{position:absolute; inset:0; z-index:2}
  /* height-driven so the sharp media + both ghosts share one silhouette. Videos carry an
     explicit aspect-ratio (inline, from HERO_SLOTS) so the poster sizes right before metadata. */
  .slot-stack img, .slot-stack video{position:absolute; left:50%; bottom:var(--slot-y); transform:translateX(-50%); height:var(--slot-h); width:auto; max-width:none; opacity:0; object-fit:contain; background:transparent}
  .slot-stack .on{opacity:1; z-index:3}
  /* chromatic ghosts: the same silhouette tinted cyan/magenta, screened behind the sharp one.
     `translate` carries the teleport split (transitions from --split to rest); `transform`
     carries the idle drift; they compose. Video slots fade their ghosts out once landed,
     because a ghost of the poster would not track the motion. */
  .slot-stack .ghost{opacity:.5; z-index:1; mix-blend-mode:screen; transition:translate .72s cubic-bezier(.2,.9,.25,1), opacity .5s ease}
  .slot-stack .gc{filter:url(#chab-cyan);    translate:var(--split) 0; animation:abDriftC 3.4s ease-in-out infinite alternate}
  .slot-stack .gm{filter:url(#chab-magenta); translate:calc(-1 * var(--split)) 0; animation:abDriftM 2.9s ease-in-out infinite alternate}
  .hero-fig.is-video .ghost{opacity:0; transition-delay:0s, .45s}
  /* same for the persistent scanlines on a video slot: they are masked to the poster, which
     cannot follow the motion, so they only serve the landing and then get out of the way */
  .slot-scan{transition:opacity .5s ease}
  .hero-fig.is-video .slot-scan{opacity:0; transition-delay:.45s}
  /* tighter drift so the aberration reads as a halo, not a misaligned duplicate */
  @keyframes abDriftC{0%{transform:translate(calc(-50% + 2px),0)}100%{transform:translate(calc(-50% + 5px),-1px)}}
  @keyframes abDriftM{0%{transform:translate(calc(-50% - 2px),0)}100%{transform:translate(calc(-50% - 5px),1px)}}
  /* fx layers: sized like the media and masked to it (mask-image set by site.js per slot) */
  .slot-fx{position:absolute; left:50%; bottom:var(--slot-y); height:var(--slot-h); aspect-ratio:var(--slot-ar); transform:translateX(-50%); pointer-events:none;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center bottom; mask-position:center bottom; -webkit-mask-size:100% 100%; mask-size:100% 100%}
  .slot-scan{z-index:4; opacity:.5; mix-blend-mode:multiply; background:repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.6) 2px 3px); animation:scanRoll 2.4s linear infinite}
  @keyframes scanRoll{to{background-position:0 3px}}
  /* stills drift (Phil, 2026-09-17): a slow glide up and to the side with a hair of scale.
     The pivot is the subject's bottom edge (below the box by --slot-y), so scaling never lifts
     the cropped edge, and the rise (cqh = % of the box) stays under the smallest --slot-y.
     The stack and the fx layers run the same keyframes from the same moment, so the ghosts
     and scanlines stay registered on the subject. */
  .hero-fig.is-still .slot-stack, .hero-fig.is-still .slot-scan, .hero-fig.is-still .slot-static{animation-name:stillDrift; animation-duration:16s; animation-timing-function:ease-in-out; animation-iteration-count:infinite; animation-direction:alternate}
  .hero-fig.is-still .slot-scan{animation-name:scanRoll, stillDrift; animation-duration:2.4s, 16s; animation-timing-function:linear, ease-in-out; animation-iteration-count:infinite, infinite; animation-direction:normal, alternate}
  .slot-stack{transform-origin:50% calc(100% - var(--slot-y))}
  /* the fx layers centre themselves with transform:translateX(-50%), which runs BEFORE the
     drift scale; pivoting at their untransformed left edge (= the box centre) keeps the scaled
     layer centred on the subject instead of sliding sideways */
  .slot-fx{transform-origin:0 100%}
  @keyframes stillDrift{0%{translate:0 0; scale:1}100%{translate:1.4cqw -2.4cqh; scale:1.035}}
  /* the teleport: snow over the whole silhouette (opacity driven by site.js), and one bright
     tracking band that sweeps down it as the signal locks */
  .slot-static{z-index:6; opacity:0; mix-blend-mode:screen}
  .slot-sweep{z-index:7; opacity:0; background:linear-gradient(to bottom, transparent 0 40%, rgba(0,229,255,.55) 42%, rgba(255,255,255,.95) 46% 50%, rgba(255,0,153,.55) 52%, transparent 56% 100%); background-size:100% 300%; background-position:0 0}
  .hero-fig.landing .slot-sweep{animation:slotSweep .62s cubic-bezier(.3,.7,.3,1) forwards}
  @keyframes slotSweep{0%{opacity:1; background-position:0 0}100%{opacity:1; background-position:0 100%}}
  /* stills only: a CSS filter on an alpha <video> makes WebKit drop the alpha (see case.css .wc-spin) */
  .hero-fig.landing .slot-stack img.on{animation:slotLand .7s steps(1) forwards}
  @keyframes slotLand{0%{filter:brightness(2.4) contrast(.6)}12%{filter:brightness(.4)}22%{filter:brightness(1.8)}38%{filter:brightness(1)}55%{filter:brightness(1.35)}100%{filter:none}}
  /* per-slot decoration: a color disc with a ring, floating IN FRONT of the subject so he pokes
     out from behind it. Position/size/color come from the slot config via --deco-*. It lands
     with the same brightness stutter as the subject. */
  .slot-deco{position:absolute; left:var(--deco-x); bottom:var(--deco-y); width:var(--deco-s); aspect-ratio:1; z-index:5; pointer-events:none; opacity:0; transition:opacity .25s ease}
  .hero-fig.has-deco .slot-deco{opacity:1; animation:decoFloat 7s ease-in-out infinite alternate}
  .slot-deco i{position:absolute; inset:0; border-radius:50%; background:var(--deco-c);
    background-image:repeating-linear-gradient(120deg, transparent 0 14px, rgba(18,25,18,.22) 14px 16px)}
  .slot-deco b{position:absolute; left:58%; top:-14%; width:46%; aspect-ratio:1; border-radius:50%; border:6px solid var(--cream); opacity:.9; animation:decoOrbit 9s ease-in-out infinite alternate}
  .hero-fig.landing.has-deco .slot-deco{animation:decoFloat 7s ease-in-out infinite alternate, slotLand .7s steps(1) forwards}
  @keyframes decoFloat{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(3%,-4%) rotate(6deg)}}
  @keyframes decoOrbit{0%{transform:translate(0,0)}100%{transform:translate(-14%,18%)}}
  @media (prefers-reduced-motion:reduce){ .slot-stack .gc, .slot-stack .gm, .slot-scan, .slot-sweep, .slot-stack .on, .slot-deco, .slot-deco b, .slot-stack, .slot-static{animation:none} }
  :root.a11y .slot-stack .ghost, :root.a11y .slot-fx{display:none}
  :root.a11y .slot-deco, :root.a11y .slot-deco b{animation:none}

  /* ============ REEL — VCR scrubber (16:9 desktop / 9:16 mobile) ============ */
  .reelwrap{position:relative; height:1700px}
  /* stage + eject pin together; eject rides underneath the video, never over it */
  .reel-pin{position:sticky; top:70px; display:flex; flex-direction:column; align-items:center}
  .reelstage{position:relative; width:100%; aspect-ratio:16/9; max-height:82vh; margin:0 auto;
    border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#0a0f0a}
  .reel-panels{position:absolute; inset:0; transition:filter .05s linear}
  .rpanel{position:absolute; inset:0; opacity:0; will-change:opacity}
  .rpanel .bgc{position:absolute; inset:0}
  .rpanel .spd{position:absolute; inset:0; background:repeating-linear-gradient(120deg, transparent 0 24px, rgba(18,25,18,.28) 24px 26px); -webkit-mask:linear-gradient(120deg,#000,transparent 62%); mask:linear-gradient(120deg,#000,transparent 62%)}
  .rpanel .sil{position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:34%; height:66%; background:rgba(18,25,18,.5); border-radius:44% 44% 0 0}
  /* HUD: broadcast overlays */
  .reel-hud{position:absolute; inset:0; z-index:6; pointer-events:none}
  .reel-now{position:absolute; top:18px; left:20px; display:flex; align-items:center; gap:10px;
    font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--cream)}
  .reel-now .st{background:rgba(0,0,0,.55); padding:5px 9px; border-radius:2px; color:var(--orange)}
  .reel-now .tt{background:rgba(0,0,0,.45); padding:5px 10px; border-radius:2px}
  .reel-ch{position:absolute; top:18px; right:20px; font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.14em; color:var(--cream); background:rgba(0,0,0,.55); padding:5px 9px; border-radius:2px}
  .reel-title{position:absolute; left:20px; bottom:80px; font-family:var(--disp); font-weight:900; font-variation-settings:"wght" 900,"wdth" 125; text-transform:uppercase; font-size:clamp(1.8rem,4.4vw,3.4rem); line-height:.92; letter-spacing:-.02em; color:var(--cream); max-width:70%; text-shadow:0 2px 14px rgba(0,0,0,.55)}
  .reel-cap{position:absolute; left:20px; bottom:54px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim)}
  /* scrubber progress bar */
  .reel-bar{position:absolute; left:0; right:0; bottom:0; height:6px; background:rgba(0,0,0,.5); z-index:7}
  .reel-bar i{display:block; height:100%; width:0%; background:var(--orange)}
  /* play prompt overlay */
  .reel-play{position:absolute; inset:0; z-index:8; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px;
    background:rgba(10,15,10,.35); font-family:var(--mono); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--cream); transition:opacity .3s ease}
  .reel-play .big{font-family:var(--disp); font-weight:900; font-variation-settings:"wght" 900,"wdth" 120; font-size:clamp(1.6rem,4vw,2.6rem); letter-spacing:-.01em}
  .reel-play.hide{opacity:0; pointer-events:none}
  /* eject button — sits UNDER the video (in .reel-pin flow), pinned with it */
  .reel-eject{margin-top:14px; display:inline-flex; align-items:center; gap:8px;
    font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--black); background:var(--cream);
    border:0; border-radius:4px; padding:10px 15px; cursor:pointer; box-shadow:0 2px 0 rgba(0,0,0,.4); transition:background .18s ease}
  .reel-eject:hover, .reel-eject:focus-visible{background:var(--yellow)}
  .reel-static{position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; mix-blend-mode:screen; pointer-events:none; z-index:4}
  .reel-scan{position:absolute; inset:0; opacity:.14; pointer-events:none; z-index:4; background:repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.55) 2px 4px); mix-blend-mode:multiply}
  /* VCR tracking line (rolls during scrub) */
  .reel-track{position:absolute; left:0; right:0; height:26px; z-index:5; opacity:0; pointer-events:none; mix-blend-mode:screen;
    background:linear-gradient(to bottom, transparent, rgba(255,255,255,.75), rgba(19,145,177,.5), transparent);
    filter:drop-shadow(2px 0 var(--cyan)) drop-shadow(-2px 0 var(--magenta))}
  .surf-hint{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-top:16px}
  :root.a11y .reelwrap{height:auto}
  :root.a11y .reel-pin{position:static; display:block}
  :root.a11y .reelstage{position:static; aspect-ratio:auto; height:auto; max-height:none}
  :root.a11y .reel-panels{position:static}
  :root.a11y .rpanel{position:relative; opacity:1 !important; aspect-ratio:16/9; margin-bottom:12px}
  :root.a11y .reel-static, :root.a11y .reel-scan, :root.a11y .reel-track, :root.a11y .reel-play, :root.a11y .reel-bar, :root.a11y .reel-eject{display:none}
  @media (prefers-reduced-motion:reduce){
    .reelwrap{height:auto}
    .reel-pin{position:static; display:block}
    .reelstage{position:static; aspect-ratio:auto; height:auto; max-height:none}
    .reel-panels{position:static}
    .rpanel{position:relative; opacity:1 !important; aspect-ratio:16/9; margin-bottom:12px}
    .reel-static, .reel-track, .reel-play, .reel-bar{display:none}
  }
  /* MOBILE: portrait 9:16 stage — a real phone-shaped player that pins big enough to read */
  @media(max-width:640px){
    .reelwrap{height:300vh}
    .reel-pin{top:22px}
    .reelstage{aspect-ratio:9/16; max-height:82vh; max-width:24rem}
    .reel-title{left:16px; bottom:60px; font-size:clamp(1.7rem,7.5vw,2.4rem); max-width:84%}
    .reel-cap{left:16px; bottom:42px}
    .reel-now{top:14px; left:14px} .reel-ch{top:14px; right:14px}
  }

  /* ============ BIO ============ */
  .proofline{display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--s4)}
  .proofline .pf{font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    color:var(--cream); border:1.5px solid var(--line); border-radius:3px; padding:8px 12px; background:rgba(0,0,0,.25)}
  .proofline .pf em{font-style:normal; color:var(--yellow)}

  /* ---- BIO floating TV — pre-rendered spin of Phil's GLB model (alpha video) with a
     DOM logo panel mapped into the punched-out screen via per-frame matrix3d.
     Playbook (re-render, swap logos, tune timing): docs/TV-PLAYBOOK.md ---- */
  .bio-grid{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:var(--s5); align-items:center}
  .bio-copy{min-width:0}
  .tv-wrap{display:flex; flex-direction:column; align-items:center; gap:10px}
  .tv-float{animation:tvbob 5.4s ease-in-out infinite alternate}
  @keyframes tvbob{from{transform:translateY(-6px)}to{transform:translateY(8px)}}
  .tvv{position:relative; width:380px; aspect-ratio:640/780}
  .tvv-video{position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none}
  /* unit logo panel — JS drives transform:matrix3d each frame to sit it in the screen hole */
  .tvv-logo{position:absolute; left:0; top:0; width:100px; height:100px; transform-origin:0 0; z-index:1;
    background:radial-gradient(ellipse at center, #FFFDF4 62%, #E8E2C8 100%);
    display:flex; align-items:center; justify-content:center; overflow:hidden; will-change:transform;
    opacity:0; transition:opacity .2s ease}
  .tvv-logo img{max-width:74%; max-height:56%; object-fit:contain; transition:opacity .18s ease}
  .tvv-logo::after{content:""; position:absolute; inset:0; pointer-events:none;
    background:repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.08) 2px 3px)}
  .tv-static-c{position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .12s ease}
  .tv-shadow{width:210px; height:24px; border-radius:50%; margin-top:-30px;
    background:radial-gradient(ellipse at center, rgba(0,0,0,.5), transparent 68%);
    animation:tvshadow 5.4s ease-in-out infinite alternate}
  @keyframes tvshadow{from{transform:scale(1.05); opacity:.9}to{transform:scale(.9); opacity:.55}}
  .tv-cap{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}
  @media(max-width:860px){
    .bio-grid{grid-template-columns:1fr}
    .tv-wrap{margin-top:var(--s4)}
    .tvv{width:min(340px, 82vw)}
  }
  /* calm modes: bob/shadow die via the global animation kill switches; JS parks the
     video on the front-facing frame and crossfades logos instead of spinning */

  /* ============ BOOK ME ============ */
  .avail-banner{display:inline-flex; align-items:center; gap:10px; margin-bottom:var(--s4); font-family:var(--mono);
    font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--cream);
    border:1.5px solid var(--orange); border-radius:3px; padding:9px 15px}
  .avail-banner .rec{width:9px; height:9px; border-radius:50%; background:var(--orange); flex:none; animation:dotblink 1.3s steps(1) infinite}
  /* Channel cards. No flip: every pitch is on screen at every width.
     A head band in the channel colour, the copy and the CTA under it. */
  .bmgrid{display:grid; grid-template-columns:repeat(2,1fr); grid-auto-rows:auto; gap:20px}
  /* subgrid keeps every head in a row the same height, so the copy starts on one line
     even when a channel name wraps to three. Without subgrid it falls back to stacking. */
  .chcard{position:relative; display:grid; grid-row:span 2; grid-template-rows:subgrid; row-gap:0; overflow:hidden;
    border:1.5px solid var(--bc); border-radius:12px; background:var(--black);
    transition:border-color .2s ease, transform .2s ease}
  .chcard:hover, .chcard:focus-within{transform:translateY(-2px)}
  .ch-head{position:relative; background:var(--bc); color:#0c110c; padding:20px 22px 18px;
    display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:14px; row-gap:12px}
  .ch-head .spd{position:absolute; inset:0; background:repeating-linear-gradient(120deg, transparent 0 18px, rgba(18,25,18,.24) 18px 20px); -webkit-mask:linear-gradient(120deg,#000,transparent 60%); mask:linear-gradient(120deg,#000,transparent 60%)}
  .ch-top{position:relative; grid-column:1/-1; display:flex; align-items:center; gap:6px 10px; flex-wrap:wrap;
    font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
    color:rgba(18,25,18,.72)}
  .ch-num{white-space:nowrap}
  .ch-glyph{margin-left:auto; text-align:right; white-space:nowrap}
  .ch-ico{position:relative; grid-column:1; width:34px; height:34px; color:#0c110c}
  .ch-ico svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8}
  .ch-name{position:relative; grid-column:2; display:flex; align-items:center; min-height:2.1rem;
    font-family:var(--disp); font-weight:900; font-variation-settings:"wght" 900,"wdth" 115;
    text-transform:uppercase; font-size:1.4rem; line-height:1.03; letter-spacing:-.01em; color:#0c110c}
  .ch-body{display:flex; flex-direction:column; align-items:flex-start; flex:1; padding:18px 22px 22px}
  .ch-copy{font-size:.98rem; color:var(--cream); text-wrap:pretty; line-height:1.45; margin-bottom:18px}
  /* margin-top:auto pins the CTA to the bottom so it lines up across a row */
  .ch-cta{display:inline-flex; align-items:center; min-height:44px; margin-top:auto; padding:11px 16px;
    font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--black); background:var(--bc); border-radius:3px; transition:background .18s ease}
  .ch-cta:hover, .ch-cta:focus-visible{background:var(--yellow); color:var(--black)}
  /* two-up squeeze: the availability glyph on CH 01 is long, and wrapping it pushes
     every head in the row taller. Tighten the mono line instead. */
  @media(max-width:980px){ .ch-top{font-size:10px; letter-spacing:.1em} }
  @media(max-width:760px){
    .bmgrid{grid-template-columns:1fr; gap:14px; max-width:34rem; margin:0 auto}
    .ch-head{padding:16px 16px 14px; column-gap:12px; row-gap:9px}
    .ch-top{font-size:10.5px; letter-spacing:.13em}
    .ch-ico{width:28px; height:28px}
    .ch-name{min-height:0; font-size:1.16rem; line-height:1.05}
    .ch-body{padding:14px 16px 16px}
    .ch-copy{font-size:.95rem; line-height:1.4; margin-bottom:12px}
    .ch-copy{margin-bottom:12px}
    .ch-cta{padding:10px 16px; font-size:11.5px}
  }
  @media(max-width:380px){
    .ch-head{padding:15px 13px 13px; column-gap:10px}
    .ch-body{padding:13px 13px 15px}
    .ch-glyph{display:none}
  }

  /* ============ CHANNEL CHIP ============ */
  /* A mono micro-label sitting directly on a patterned field: the .spd diagonals, a
     photo, a video frame. At 11px the letterforms are the same weight as the pattern
     behind them and the two read as one texture, so the label sits on an opaque plate
     of the field's own colour and the pattern simply stops at its edge.
     A blurred text-shadow was tried first and is not enough: it fades out before it
     clears a line. The plate has to be opaque.
     - Set --chip to the plate colour. It falls back to --bc, which every channel card
       already carries, so inside one of those the class is enough on its own.
     - box-shadow does the padding, so adding a chip never reflows the row.
     - Goes on the text RUN, never on its flex container, or the plate spans the gap
       between runs and swallows the pattern across the whole line. */
  .chip{background:var(--chip, var(--bc)); box-shadow:0 0 0 3px var(--chip, var(--bc))}

  /* ============ WORK — cards live in assets/case.css (.wcard) ============ */

  /* ============ CONTACT ============ */
  /* the rings reach past the card now, so keep the eyebrow on top of them */
  .contact-sec .sec-h{position:relative; z-index:3}
  .mc-card{position:relative; max-width:42rem; margin:120px auto 0; border:1px solid rgba(217,211,153,.28); border-radius:16px;
    background:var(--panel); padding:150px 40px 40px; overflow:visible; text-align:center; box-shadow:0 0 0 1px rgba(0,0,0,.3), 0 24px 60px rgba(0,0,0,.35)}
  .dish-wrap{position:absolute; top:0; left:50%; transform:translate(-50%,-40%); width:172px; height:184px; z-index:2}
  .dish{position:relative; z-index:2; width:100%; height:auto; filter:drop-shadow(0 10px 18px rgba(0,0,0,.55))}
  /* The box has to clear the ring at full blast (44px * scale(8) = 352px) or its own edge
     crops the circle into a straight line. It is absolutely positioned and centred on its
     own transform, so growing it moves nothing. Mask stops are in % of the box, so they
     shrink to keep the fade at the same radius in px as the old 360x300 box. */
  .dish-waves{position:absolute; top:36%; left:50%; transform:translate(-50%,-50%); width:420px; height:420px; z-index:1; overflow:hidden;
    /* horizon: the rings rise from behind the dish's base rather than fading all round */
    clip-path:inset(0 0 22% 0);
    -webkit-mask:radial-gradient(circle at 50% 46%, #000 0 40%, transparent 58%); mask:radial-gradient(circle at 50% 46%, #000 0 40%, transparent 58%)}
  .dish-waves span{position:absolute; top:50%; left:50%; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; border:2.5px solid var(--cyan);
    filter:drop-shadow(3px 0 var(--magenta)) drop-shadow(-2px 0 var(--yellow)); opacity:0; animation:waveBlast 3s ease-out infinite}
  .dish-waves span:nth-child(2){animation-delay:1s}
  .dish-waves span:nth-child(3){animation-delay:2s}
  /* the ring itself is a plain circle, so the rotation reads through the chromatic
     fringe: those drop-shadows are directional and swing round as the ring grows */
  @keyframes waveBlast{0%{transform:scale(.3) rotate(0deg); opacity:0}14%{opacity:.9}100%{transform:scale(8) rotate(22deg); opacity:0}}
  .mc-title{font-family:var(--disp); font-weight:900; font-variation-settings:"wght" 900,"wdth" 118; text-transform:uppercase;
    font-size:clamp(1.7rem,4.4vw,2.7rem); line-height:1.04; letter-spacing:-.02em; text-align:center; margin:0 auto var(--s3); text-wrap:balance; color:var(--cream)}
  .mc-title em{font-style:normal; color:var(--magenta)}
  .mc-lead{max-width:32rem; margin:0 auto var(--s4); color:var(--cream); font-size:1.05rem; text-wrap:pretty}
  .tx-form{position:relative; max-width:100%}
  .tx-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
  .tx-in{min-width:0; width:100%; max-width:100%; box-sizing:border-box;
    font-family:"VT323", var(--mono); font-size:1.5rem; line-height:1.1; color:var(--lime);
    background:rgba(0,0,0,.4); border:1px solid rgba(147,181,43,.35); border-radius:5px; padding:10px 14px;
    caret-color:var(--lime); text-shadow:0 0 7px rgba(147,181,43,.55)}
  .tx-in::placeholder{color:rgba(147,181,43,.5)}
  .tx-in:focus{outline:none; border-color:var(--lime); box-shadow:0 0 0 2px rgba(147,181,43,.25), inset 0 0 18px rgba(147,181,43,.08)}
  .tx-span{grid-column:1 / -1; resize:vertical; min-height:112px}
  .tx-send{margin-top:22px; font-family:var(--mono); font-weight:700; font-size:13px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--black); background:var(--orange); border:0; border-radius:5px; padding:14px 30px; cursor:pointer; transition:background .2s ease, transform .1s ease}
  .tx-send:hover, .tx-send:focus-visible{background:var(--yellow)}
  .tx-send:active{transform:scale(.97)}
  .burst{position:absolute; top:50%; left:50%; width:40px; height:40px; pointer-events:none; z-index:5}
  .burst span{position:absolute; inset:0; border-radius:50%; border:3px solid var(--cyan);
    filter:drop-shadow(5px 0 var(--magenta)) drop-shadow(-4px 0 var(--yellow)); opacity:0; transform:translate(-50%,-50%) scale(.2); animation:burstOut .8s ease-out forwards}
  .burst span:nth-child(2){animation-delay:.08s} .burst span:nth-child(3){animation-delay:.16s} .burst span:nth-child(4){animation-delay:.24s}
  @keyframes burstOut{0%{opacity:1; transform:translate(-50%,-50%) scale(.2)}100%{opacity:0; transform:translate(-50%,-50%) scale(16)}}
  .tx-error{font-family:"VT323", var(--mono); font-size:1.3rem; color:var(--orange); margin-top:14px; text-shadow:0 0 7px rgba(249,99,36,.45)}
  .tx-error a{color:var(--yellow)}
  .tx-send[disabled]{opacity:.6; cursor:wait}
  .tx-success{padding:14px 0 6px}
  .txs-big{font-family:var(--disp); font-weight:900; font-variation-settings:"wght" 900,"wdth" 120; text-transform:uppercase; font-size:clamp(2rem,7vw,3.2rem); color:var(--lime); text-shadow:0 0 22px rgba(147,181,43,.55)}
  .txs-sub{font-family:"VT323", var(--mono); font-size:1.5rem; color:var(--lime); margin-top:10px; text-shadow:0 0 7px rgba(147,181,43,.5)}
  .txs-cur{animation:cdot 1s steps(1) infinite}
  :root.a11y .dish-waves, :root.a11y .burst{display:none}
  @media(max-width:640px){
    .mc-card{padding:118px 18px 30px; margin-top:92px; border-radius:14px}
    .tx-grid{grid-template-columns:1fr}
    .tx-in{font-size:1.3rem}
    .tx-send{width:100%}
    .dish-wrap{width:140px; height:150px}
    .dish-waves{width:380px; height:380px}
  }

  /* ============ THE FEED ============ */
  .feed-head{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-bottom:var(--s2)}
  .feed{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
  .fcard{position:relative; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:12px; background:var(--panel); overflow:hidden; text-decoration:none; color:inherit; transition:transform .25s ease, border-color .25s ease}
  .fcard:hover, .fcard:focus-visible{transform:translateY(-5px); border-color:var(--fc); outline:none}
  .fcard.dark{opacity:.62}
  .fcard.dark:hover{opacity:.82}
  .fcard .ftab{height:6px; background:var(--fc)}
  .fbody{padding:22px; display:flex; flex-direction:column; gap:12px; flex:1}
  .fchip{font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--fc); display:inline-flex; align-items:center; gap:8px}
  .ftitle{font-family:var(--disp); font-weight:900; font-variation-settings:"wght" 900,"wdth" 112; text-transform:uppercase; font-size:1.32rem; line-height:1.03; letter-spacing:-.01em; color:var(--cream)}
  .fdek{font-size:.95rem; color:var(--dim); text-wrap:pretty; margin:0}
  .fmeta{margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:12px; font-family:var(--mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--dim); padding-top:14px; border-top:1px solid var(--line)}
  .fmeta .go{color:var(--fc); font-weight:700; transition:transform .2s ease; white-space:nowrap}
  .fcard:hover .fmeta .go{transform:translateX(3px)}
  .eq2{display:inline-flex; align-items:flex-end; gap:2px; height:12px}
  .eq2 i{width:3px; height:3px; background:var(--fc); animation:eqbar .9s ease-in-out infinite}
  .eq2 i:nth-child(2){animation-delay:.15s} .eq2 i:nth-child(3){animation-delay:.3s} .eq2 i:nth-child(4){animation-delay:.45s}
  @keyframes eqbar{0%,100%{height:3px}50%{height:12px}}
  .cur{width:7px; height:13px; background:var(--fc); display:inline-block; animation:cdot 1s steps(1) infinite}
  @keyframes cdot{0%,49%{opacity:1}50%,100%{opacity:.15}}
  .scan{position:relative; display:inline-block; width:18px; height:11px; border:1px solid var(--fc); border-radius:2px; overflow:hidden}
  .scan i{position:absolute; top:1px; bottom:1px; left:-6px; width:5px; background:var(--fc); animation:scanmove 1.5s cubic-bezier(.5,0,.5,1) infinite}
  @keyframes scanmove{0%{left:-6px}100%{left:18px}}
  @media(max-width:820px){ .feed{grid-template-columns:1fr} }
  @media (prefers-reduced-motion:reduce){ .cur, .scan i, .eq2 i{animation:none} }

  /* ============ FOOTER ============ */
  footer{padding-top:var(--s5); font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--dim); line-height:1.9}
  .foot-divider{border-top:1px solid var(--line); padding-top:var(--s5)}
  .foot-chyron{display:flex; justify-content:center; margin-bottom:var(--s4)}
  .chyron{display:inline-flex; height:48px; border:1.5px solid var(--orange); border-radius:3px; overflow:hidden; box-shadow:0 3px 0 rgba(0,0,0,.4); max-width:100%}
  .chyron .live{background:var(--orange); color:var(--black); display:flex; align-items:center; gap:9px;
    padding:0 14px; font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap}
  .chyron .live .dot{width:9px; height:9px; border-radius:50%; background:#fff; flex:none; animation:cdot2 1.3s steps(1) infinite}
  @keyframes cdot2{0%,49%{background:#fff}50%,100%{background:var(--black)}}
  .chyron .feed-tx{display:flex; align-items:center; padding:0 16px; background:var(--black); width:min(340px, 60vw); overflow:hidden}
  .chyron .feed-tx .ftxt{font-family:var(--disp); font-weight:800; font-variation-settings:"wght" 800,"wdth" 110; text-transform:uppercase; letter-spacing:.01em; color:var(--cream); white-space:nowrap; font-size:1.02rem}
  .chyron.glitching .feed-tx .ftxt{text-shadow:2px 0 var(--cyan), -2px 0 var(--magenta)}
  .foot-rainbow{margin-bottom:var(--s4)}
  .foot-body{padding-bottom:var(--s6); display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap}
  .foot-made b{color:var(--cream)}
  .foot-hc{display:inline-flex; align-items:center; gap:8px; margin-top:14px; color:var(--cyan); background:none; border:0; cursor:pointer; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; padding:0}
  .foot-hc:hover{color:var(--cream)}
  .foot-hc .hc-ico{width:15px; height:15px; border-radius:50%; border:1.5px solid currentColor; background:linear-gradient(90deg, currentColor 0 50%, transparent 50% 100%)}
  .foot-social{display:flex; align-items:center; gap:18px}
  .foot-social a{color:var(--cyan); display:inline-flex; align-items:center}
  .foot-social a.ico svg{width:20px; height:20px; fill:currentColor}
  .foot-social a:hover{color:var(--cream)}

  /* ============ A11Y / HIGH-CONTRAST ============ */
  :root.a11y{ --cream:#F7F3E4; --dim:rgba(247,243,228,.85); --line:rgba(247,243,228,.45); --panel:#0b100b; --focus:#FFFFFF; }
  :root.a11y #grain, :root.a11y #scan{opacity:0 !important}
  :root.a11y h1.big, :root.a11y h2.big{filter:none; text-shadow:none}
  :root.a11y .fcard, :root.a11y .chcard{background:#0b100b}
  :root.a11y *{animation:none !important; text-shadow:none !important}
  :root.a11y .chyron .live .dot{background:#fff}
  @media (prefers-contrast:more){ #grain,#scan{opacity:0} :root{--line:rgba(217,211,153,.4)} }
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none !important} }

  /* ============ RESPONSIVE ============ */
  @media(max-width:860px){
    .hero-grid{grid-template-columns:1fr; gap:var(--s4)}
    /* squarer + shorter so the headline clears the fold; cutout still pokes out the top */
    .hero-fig{order:-1; aspect-ratio:1/1; max-height:33vh; max-width:14.5rem}
    /* KEEP fixed-height slots on mobile too — otherwise each descriptor swap reflows the whole page.
       Sized for the LONGEST descriptor/blurb at this width so nothing clips or jumps. */
    .hero-h1{font-size:clamp(1.5rem,6.4vw,2.2rem); height:5em}
    .hero-blurb{font-size:clamp(1rem,3.6vw,1.18rem); height:6.4em; margin-top:12px}
    h1.big, h2.big{max-width:100%}
  }
  @media(max-width:560px){
    .wrap{padding:0 18px}
    :root{--sec:clamp(54px,13vw,84px)}
    .hero{padding:var(--s5) 0}
    .a11y-btn{top:12px; right:12px}
    .chyron{height:44px}
    .chyron .live{font-size:11px; padding:0 12px}
    .chyron .feed-tx{width:min(220px,60vw)}
    .chyron .feed-tx .ftxt{font-size:.88rem}
    .foot-body{flex-direction:column; align-items:flex-start}
  }