/* 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, .fc-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 — positioning context. clip-path opens the TOP and SIDES (cutout pokes out
     past the color box) while still clipping the bottom flush to it. */
  .hero-fig{position:relative; width:100%; aspect-ratio:4/5; max-height:60vh; margin:0 auto;
    clip-path:inset(-42% -18% 0 -18%)}
  /* the color box (the "background container") — this is what the cutout extends past */
  .fig-frame{position:absolute; inset:0; border-radius:10px; overflow:hidden; background:linear-gradient(150deg,var(--amber),var(--orange))}
  .fig-frame .spd{position:absolute; inset:0; background:repeating-linear-gradient(120deg, transparent 0 20px, rgba(18,25,18,.30) 20px 22px); -webkit-mask:linear-gradient(120deg,#000,transparent 55%); mask:linear-gradient(120deg,#000,transparent 55%)}
  .fig-lockstatic{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:6; opacity:0; mix-blend-mode:screen; pointer-events:none}
  .cutout-stack{position:absolute; inset:0; z-index:2}
  /* height-driven so the sharp image + both ghosts share one silhouette; clip-path on the
     parent lets the head rise above the box, so they line up AND poke out together. */
  .cutout-stack img{position:absolute; left:50%; bottom:0; transform:translateX(-50%); height:116%; width:auto; max-width:none; opacity:0}
  .cutout-stack img.on{opacity:1; z-index:3}
  .cutout-stack img.ghost{opacity:.5; z-index:1; mix-blend-mode:screen}
  .cutout-stack img.gc{filter:url(#chab-cyan);    animation:abDriftC 3.4s ease-in-out infinite alternate}
  .cutout-stack img.gm{filter:url(#chab-magenta); animation:abDriftM 2.9s ease-in-out infinite alternate}
  /* 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)}}
  .cutout-fx{position:absolute; left:0; right:0; bottom:0; height:116%; pointer-events:none;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center bottom; mask-position:center bottom; -webkit-mask-size:auto 100%; mask-size:auto 100%}
  .cutout-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}}
  .cutout-black{z-index:2; opacity:0; background:#0c110c}
  @media (prefers-reduced-motion:reduce){ .cutout-stack img.gc, .cutout-stack img.gm, .cutout-scan{animation:none} }
  :root.a11y .cutout-stack img.ghost, :root.a11y .cutout-fx{display: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}
  .bmgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
  .flipcard{position:relative; aspect-ratio:3/4; perspective:1200px; cursor:pointer}
  .flip-inner{position:absolute; inset:0; transition:transform .6s cubic-bezier(.6,0,.2,1); transform-style:preserve-3d}
  .flipcard:hover .flip-inner, .flipcard:focus-within .flip-inner, .flipcard.flipped .flip-inner{transform:rotateY(180deg)}
  .flip-face{position:absolute; inset:0; -webkit-backface-visibility:hidden; backface-visibility:hidden; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; padding:22px}
  .flip-front{background:var(--bc); color:#0c110c}
  .flip-front .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%)}
  .fc-ico{position:relative; width:36px; height:36px; color:#0c110c}
  .fc-ico svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8}
  .fc-num{position:relative; font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.16em; color:rgba(18,25,18,.7); margin-top:14px}
  .fc-name{position:relative; margin-top:auto; font-family:var(--disp); font-weight:900; font-variation-settings:"wght" 900,"wdth" 115; text-transform:uppercase; font-size:1.35rem; line-height:1.0; letter-spacing:-.01em; color:#0c110c}
  .fc-glyph{position:relative; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(18,25,18,.72); margin-top:12px}
  .flip-back{background:var(--black); border:1.5px solid var(--bc); transform:rotateY(180deg); justify-content:space-between}
  .fb-copy{font-size:.98rem; color:var(--cream); text-wrap:pretty; line-height:1.42}
  .fb-cta{align-self:flex-start; 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; padding:10px 14px; margin-top:16px}
  .fb-cta:hover{background:var(--yellow); color:var(--black)}
  @media(max-width:820px){ .bmgrid{grid-template-columns:repeat(2,1fr)} }
  @media(max-width:460px){ .bmgrid{grid-template-columns:1fr; max-width:22rem; margin:0 auto} }
  :root.a11y .flip-inner{transition:none}

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

  /* ============ CONTACT ============ */
  .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))}
  .dish-waves{position:absolute; top:36%; left:50%; transform:translate(-50%,-50%); width:360px; height:300px; z-index:1; overflow:hidden;
    -webkit-mask:radial-gradient(circle at 50% 42%, #000 0 52%, transparent 74%); mask:radial-gradient(circle at 50% 42%, #000 0 52%, transparent 74%)}
  .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}
  @keyframes waveBlast{0%{transform:scale(.3); opacity:0}14%{opacity:.9}100%{transform:scale(8); 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:280px; height:230px}
  }

  /* ============ 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 .flip-back{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}
  }