/* ============================================================================
   CASE STUDIES — shared layer for the Work grid and the case-study pages.
   Loads after assets/site.css. Tokens and conventions: docs/design-system/SUPERCOLOR.md
   Art slots, specs and what fills them: docs/case-studies-2026-09-03/10-asset-inventory-and-specs.md

   The shell:
     card  = color panel (.wc-panel) + ONE art element (.wc-art: a subject cutout, a logo
             mark, anything transparent) + lower-third chyron. Hover contracts the panel to
             a circle of the photo (SUPERCOLOR §5) and the art lifts / signal-splits.
     click = the panel and the art carry across into the case page's featured slot via
             cross-document View Transitions (browser-native, no router). Fallback: the
             channel wipe (§4b). Calm modes (reduced-motion / .a11y): plain link.
     slot  = .cs-stage[data-art=…] "tunes in" on arrival: static burst, then the media
             behind the art appears. Art types: still · loop · facade · pan · anim · idents
   ============================================================================ */

/* ---------- WORK GRID CARDS ---------- */
.wgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; padding-top:48px}  /* headroom: art stands above the panel */
.wcard{position:relative; display:block; aspect-ratio:3/4; color:inherit; text-decoration:none; border-radius:16px; --cx:50%; --cy:54%; isolation:isolate}   /* its own stacking context, so neighbours never paint over each other's art */
.wcard:focus-visible{outline:3px solid var(--focus); outline-offset:10px}
.wc-panel, .wc-photo{position:absolute; inset:0; border-radius:16px;
  -webkit-clip-path:circle(150% at var(--cx) var(--cy)); clip-path:circle(150% at var(--cx) var(--cy));
  transition:clip-path .55s cubic-bezier(.6,0,.2,1), -webkit-clip-path .55s cubic-bezier(.6,0,.2,1), opacity .3s ease}
.wc-panel{background:var(--pc); z-index:1; overflow:hidden}
.wc-panel .spd{position:absolute; inset:0; background:repeating-linear-gradient(120deg, transparent 0 20px, rgba(18,25,18,.26) 20px 22px);
  -webkit-mask:linear-gradient(120deg,#000,transparent 60%); mask:linear-gradient(120deg,#000,transparent 60%)}
.wc-photo{z-index:2; opacity:0; overflow:hidden}   /* the reveal window; the image inside may be larger than the card */
.wc-photo img{position:absolute; left:var(--photo-left, 0); bottom:var(--photo-bottom, 0); height:var(--photo-h, 100%); width:auto; max-width:none; display:block}
.wc-photo img:not([style]){left:0; width:100%; height:100%; object-fit:cover}
.wcard:hover .wc-panel, .wcard:focus-visible .wc-panel,
.wcard:hover .wc-photo, .wcard:focus-visible .wc-photo{-webkit-clip-path:circle(40% at var(--cx) var(--cy)); clip-path:circle(40% at var(--cx) var(--cy))}
.wcard:hover .wc-photo, .wcard:focus-visible .wc-photo{opacity:1}
/* the art: auto-sized against BOTH max constraints so its aspect is never squished (the
   2026-08-13 bug was height + max-width together). Cutouts: portrait, subject touches the
   bottom edge. Marks/logos: centered instead — add .wc-art--mark */
.wc-art{position:absolute; left:50%; bottom:var(--art-bottom, 0); transform:translateX(-50%); width:auto; height:auto; max-height:104%; max-width:var(--art-maxw, 108%);
  z-index:3; pointer-events:none; filter:drop-shadow(0 12px 20px rgba(0,0,0,.42));
  transition:transform .55s cubic-bezier(.6,0,.2,1), filter .4s ease}
.wc-art--mark{bottom:auto; top:var(--mark-top, 38%); transform:translate(-50%,-50%); max-height:var(--mark-h, 52%); max-width:var(--mark-w, 72%)}
/* hover state-change on the art: lifts, and the signal splits (chromatic fringes) */
.wcard:hover .wc-art, .wcard:focus-visible .wc-art{transform:translateX(-50%) translateY(-10px) scale(1.04);
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.5))
         drop-shadow(4px 0 0 color-mix(in srgb, var(--cyan) 75%, transparent))
         drop-shadow(-4px 0 0 color-mix(in srgb, var(--magenta) 75%, transparent))}
.wcard:hover .wc-art--mark, .wcard:focus-visible .wc-art--mark{transform:translate(-50%,-50%) translateY(-10px) scale(1.06)}
/* DE{CODE} mark = the bracket-to-flower spin (alpha video). Idle: the poster, which is the open orange
   flower four seconds into the loop rather than the brace it starts on. Hover/focus: the loop plays
   (brace → orange → purple → teal → brace). Where hover doesn't exist or motion is calm, the keyed
   flower still stands in (.wc-spin-fallback). */
.wc-spin{display:none; background:transparent; pointer-events:none}   /* size and position come from .wc-art--mark, so the video and the still are identical */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  :root:not(.a11y) .wc-spin{display:block}
  :root:not(.a11y) .wc-spin-fallback{display:none}
}
/* rolling scanlines masked to the art's silhouette (the hero carousel's treatment); needs --cut on the card */
.wc-scan{position:absolute; left:50%; bottom:var(--art-bottom, 0); transform:translateX(-50%); width:var(--art-maxw, 108%); height:104%; z-index:4; pointer-events:none; opacity:0;
  background:repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.55) 2px 3px); mix-blend-mode:multiply;
  -webkit-mask:var(--cut) center bottom / contain no-repeat; mask:var(--cut) center bottom / contain no-repeat;
  transition:opacity .3s ease}
.wcard:hover .wc-scan, .wcard:focus-visible .wc-scan{opacity:.6; animation:scanRoll 2.4s linear infinite}
/* meta as a lower-third chyron band: readable over any art */
.wc-num{font-weight:700; color:var(--dim)}   /* lives in the chyron band, where overhanging art can never cover it */
.wc-body{position:absolute; left:14px; right:14px; bottom:14px; z-index:5; padding:14px 16px 15px; pointer-events:none; color:var(--cream);
  background:rgba(12,17,12,.9); border-left:4px solid var(--pc); border-radius:3px; box-shadow:0 3px 0 rgba(0,0,0,.4);
  transition:transform .45s cubic-bezier(.6,0,.2,1)}
.wcard:hover .wc-body, .wcard:focus-visible .wc-body{transform:translateY(-8px)}
.wc-tag{display:block; font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--pc); margin-bottom:6px}
.wc-title{display:block; font-family:var(--disp); font-weight:900; font-variation-settings:"wght" 900,"wdth" 115; text-transform:uppercase; font-size:1.3rem; line-height:1.0; letter-spacing:-.01em; overflow-wrap:break-word; -webkit-hyphens:auto; hyphens:auto}
.wc-tease{display:block; font-size:.9rem; color:var(--dim); margin-top:8px; text-wrap:pretty; max-height:0; opacity:0; overflow:hidden; transition:max-height .45s cubic-bezier(.6,0,.2,1), opacity .35s ease .1s}
.wcard:hover .wc-tease, .wcard:focus-visible .wc-tease{max-height:6em; opacity:1}
/* LEAVING: set by JS the instant the navigation starts. Snaps the card to its rest pose so
   the snapshot the browser carries into the next page is a clean panel + art. */
.wcard.leaving .wc-panel, .wcard.leaving .wc-photo, .wcard.leaving .wc-art, .wcard.leaving .wc-scan{transition:none; animation:none}
.wcard.leaving .wc-panel, .wcard.leaving .wc-photo{-webkit-clip-path:circle(150% at var(--cx) var(--cy)); clip-path:circle(150% at var(--cx) var(--cy))}
.wcard.leaving .wc-photo, .wcard.leaving .wc-scan, .wcard.leaving .wc-body{opacity:0}
.wcard.leaving .wc-art{transform:translateX(-50%); filter:drop-shadow(0 12px 20px rgba(0,0,0,.42))}
.wcard.leaving .wc-art--mark{transform:translate(-50%,-50%)}
.wcard.leaving .wc-panel{view-transition-name:cs-frame}
.wcard.leaving .wc-art{view-transition-name:cs-art}
@media(max-width:820px){ .wgrid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .wgrid{grid-template-columns:1fr; max-width:22rem; margin-left:auto; margin-right:auto} }
:root.a11y .wc-panel, :root.a11y .wc-photo, :root.a11y .wc-art{transition:none}
:root.a11y .wc-scan{display:none}
:root.a11y .wc-tease{opacity:1; max-height:6em}

/* ---------- CASE-STUDY PAGE ---------- */
.cs{--pc:var(--orange); --chan:var(--pc)}
.cs-hero{padding-top:var(--s4)}
.cs-back{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin-bottom:var(--s3)}
.cs-back:hover, .cs-back:focus-visible{color:var(--cream)}
.cs-kicker{font-family:var(--mono); font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--dim); display:flex; align-items:center; gap:12px; margin-bottom:var(--s2)}
.cs-kicker::before{content:""; width:26px; height:10px; background:var(--chan); flex:none}
h1.big.cs-title{max-width:16ch}

/* THE FEATURED SLOT. clip-path opens the top and sides so the art can stand above the
   frame, and clips the bottom flush so the art can step out under the frame when media plays */
/* the band sits directly under the site header: a skinny window into the work (cf. cydstumpel.nl/work) */
.cs-fig{position:relative; margin-top:var(--s2); padding-top:min(4vw, 40px)}
.cs-fig--flat{padding-top:0}                                        /* pages whose art is a mark inside the frame, not a standing subject */
.cs-stage{position:relative; aspect-ratio:3.5/1; -webkit-clip-path:inset(-60% -12% 0 -12%); clip-path:inset(-60% -12% 0 -12%)}   /* a skinny window, not a full-height video (Phil, 2026-09-09) */
.cs-stage--placed{-webkit-clip-path:inset(-60% 0 0 0); clip-path:inset(-60% 0 0 0)}   /* placed art may break the top edge (Cyd's featured state); sides and bottom clip flush */
.cs-frame{position:absolute; inset:0; border-radius:16px; overflow:hidden; background:var(--pc); view-transition-name:cs-frame; container-type:size}
.cs-frame .spd{position:absolute; inset:0; background:repeating-linear-gradient(120deg, transparent 0 26px, rgba(18,25,18,.26) 26px 28px);
  -webkit-mask:linear-gradient(120deg,#000,transparent 60%); mask:linear-gradient(120deg,#000,transparent 60%)}
/* the media layer: whatever tunes in behind the art (still, video loop, poster, pan, built animation) */
.cs-media{position:absolute; inset:0; opacity:0; transition:opacity .5s ease; background:var(--media-bg, transparent)}   /* --media-bg: a backing for letterboxed media */
.cs-media > img, .cs-media > video{position:absolute; inset:0; width:100%; height:100%; object-fit:var(--media-fit, cover); object-position:var(--media-pos, 50% 50%); display:block}
.cs-stage[data-state="on"] .cs-media, .cs-stage[data-state="live"] .cs-media, .cs-stage[data-state="playing"] .cs-media{opacity:1}
.cs-static{position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; mix-blend-mode:screen; pointer-events:none; z-index:3}
/* the art that arrived from the card */
.cs-art{position:absolute; left:6%; bottom:0; width:auto; height:auto; max-height:118%; max-width:40%; z-index:4; pointer-events:none;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.5)); view-transition-name:cs-art;
  transition:transform .6s cubic-bezier(.6,0,.2,1), opacity .4s ease}
.cs-art--mark{left:50%; bottom:auto; top:50%; transform:translate(-50%,-50%); max-height:60%; max-width:40%}
.cs-stage[data-state="playing"] .cs-art{transform:translateY(112%); opacity:0}          /* steps off under the frame when the picture plays */
.cs-stage[data-state="live"] .cs-art{opacity:0; transition:opacity .8s ease .2s}                 /* once a loop is running, the art it arrived with hands off to the picture */
.cs-stage[data-state="playing"] .cs-art--mark{transform:translate(-50%,-50%) scale(.6); opacity:0}
.cs-stage[data-art="anim"] .cs-art, .cs-stage[data-art="pan"] .cs-art{transition:opacity .6s ease .3s}
.cs-stage[data-art="anim"][data-state="on"] .cs-art--mark{opacity:0}                   /* a built animation takes the whole frame */
/* controls that live on the frame */
.cs-ctl{position:absolute; right:14px; bottom:14px; z-index:7; display:flex; gap:8px}
.cs-btn{font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--black); background:var(--cream);
  border:0; border-radius:4px; padding:9px 13px; cursor:pointer; box-shadow:0 2px 0 rgba(0,0,0,.4); opacity:0; transition:opacity .3s ease .3s, background .2s ease}
.cs-btn:hover, .cs-btn:focus-visible{background:var(--yellow)}
.cs-stage[data-state="on"] .cs-btn, .cs-stage[data-state="live"] .cs-btn, .cs-stage[data-state="playing"] .cs-btn{opacity:1}
/* pan: a tall composite drifts slowly inside the frame (brand-guide pages) */
.cs-media--pan > img{height:auto; object-fit:unset; top:0; bottom:auto; animation:csPan 28s ease-in-out infinite alternate}
@keyframes csPan{from{transform:translateY(0)}to{transform:translateY(calc(-100% + 100cqh))}}   /* 100cqh = the frame height, no JS */
.cs-cap{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-top:14px; display:flex; gap:14px; flex-wrap:wrap}
.cs-cap a{color:var(--cyan)}
@media(max-width:640px){ .cs-stage{aspect-ratio:2/1} .cs-art{max-width:48%; left:4%} .cs-art--mark{max-width:56%} .cs-frame{border-radius:12px} }
:root.a11y .cs-media, :root.a11y .cs-art, :root.a11y .cs-btn{transition:none}
@media (prefers-reduced-motion:reduce){ .cs-media, .cs-art, .cs-btn{transition:none} .cs-media--pan > img{animation:none} }

/* body copy at the reading measure; media rows can run the full column */
.cs-body{margin-top:var(--s5)}
.cs-body p:not(.cs-note), .cs-body h2, .cs-body .cs-ph{max-width:var(--maxread)}
.cs-body h2{font-family:var(--disp); font-weight:900; font-variation-settings:"wght" 900,"wdth" 115; text-transform:uppercase; font-size:1.35rem; line-height:1.05; letter-spacing:-.01em;
  color:var(--cream); margin:var(--s4) 0 var(--s2); padding-left:14px; border-left:5px solid var(--chan)}
.cs-body h2:first-child{margin-top:0}
.cs-ph{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; line-height:1.7; color:var(--dim);
  border:1px dashed var(--line); border-radius:6px; padding:14px 16px; margin-bottom:var(--s2)}   /* copy placeholder; Phase 5 removes */
.cs-row{margin:var(--s4) 0}
.cs-next{margin-top:var(--s5); font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase}

/* inline figure: a still or a silent loop with a caption (logo evolution, sage still, cog explosion) */
.fig{margin:0}
.fig-frame{position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:rgba(0,0,0,.35); border:1px solid var(--line)}
.fig-frame > img, .fig-frame > video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.fig-frame.is-4x3{aspect-ratio:4/3}
.fig figcaption{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin-top:10px}

/* ---------- YOUTUBE FACADE: poster + play, real iframe only on click ---------- */
.yt{position:relative; display:block; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#0a0f0a; color:var(--cream)}
.yt img{width:100%; height:100%; object-fit:cover; display:block; opacity:.86; transition:opacity .3s ease, transform .6s cubic-bezier(.6,0,.2,1)}
.yt:hover img, .yt:focus-visible img{opacity:1; transform:scale(1.03)}
.yt-btn{position:absolute; top:50%; left:50%; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%; background:var(--orange); color:var(--black);
  display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:700; font-size:22px; padding-left:5px;
  box-shadow:0 8px 24px rgba(0,0,0,.5); transition:background .2s ease, transform .3s cubic-bezier(.6,0,.2,1)}
.yt:hover .yt-btn, .yt:focus-visible .yt-btn{background:var(--yellow); transform:scale(1.08)}
.yt:focus-visible{outline:3px solid var(--focus); outline-offset:4px}
.yt iframe{position:absolute; inset:0; width:100%; height:100%; border:0; z-index:6}
.yt.playing img, .yt.playing .yt-btn{display:none}
.yt-ext{display:inline-block; margin-top:8px; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan)}   /* always present: the escape hatch if embeds are blocked */
/* hero facade: the play control covers the frame; the iframe lands inside .cs-frame */
.cs-play{position:absolute; inset:0; z-index:5; border-radius:0; background:transparent; aspect-ratio:auto; opacity:0; transition:opacity .4s ease .2s}
.cs-stage[data-state="on"] .cs-play{opacity:1}
.cs-stage[data-state="playing"] .cs-play{display:none}
.cs-play .yt-btn{left:auto; right:12%; margin-left:0}
.cs-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0; z-index:6}

/* ---------- MEDIA ROWS ---------- */
/* strip: side-scroll, snap per item, caption under each (the campaign spots) */
.strip-wrap{position:relative}
.strip{display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 0 14px; scrollbar-width:thin; scrollbar-color:var(--line) transparent}
.strip > *{flex:0 0 min(72%, 560px); scroll-snap-align:start}
.strip-nav{display:flex; gap:8px; justify-content:flex-end; margin-bottom:12px}
.strip-nav button{font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--cream);
  background:rgba(0,0,0,.35); border:1.5px solid var(--line); border-radius:4px; padding:8px 12px; cursor:pointer}
.strip-nav button:hover, .strip-nav button:focus-visible{border-color:var(--cream)}
.film-cap{margin-top:12px}
.film-cap b{display:block; font-family:var(--disp); font-weight:900; font-variation-settings:"wght" 900,"wdth" 112; text-transform:uppercase; font-size:1.05rem; line-height:1.05; color:var(--cream); margin-bottom:6px}
.film-cap .cs-ph{margin:0}
/* film grid: the five documentaries */
.filmgrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:26px}
/* idents: the five retreat events as channel idents; each expands to its description (native <details>, keyboard-free) */
.idents{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:22px; align-items:start}
.ident{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--panel)}
.ident summary{list-style:none; cursor:pointer; display:block}
.ident summary::-webkit-details-marker{display:none}
.ident summary:focus-visible{outline:3px solid var(--focus); outline-offset:-3px}
.ident-tile{position:relative; aspect-ratio:16/9; background:#0a0f0a}
.ident-tile > img, .ident-tile > video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.6,0,.2,1)}
.ident summary:hover .ident-tile > img{transform:scale(1.03)}
.ident-lbl{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px; font-family:var(--disp); font-weight:900; font-variation-settings:"wght" 900,"wdth" 112; text-transform:uppercase; font-size:1.02rem; line-height:1.05; color:var(--cream)}
.ident-lbl small{font-family:var(--mono); font-weight:700; font-size:10.5px; letter-spacing:.12em; color:var(--dim); text-transform:uppercase; white-space:nowrap}
.ident-lbl::after{content:"+"; font-family:var(--mono); color:var(--chan); flex:none}
.ident[open] .ident-lbl::after{content:"−"}
.ident-body{padding:0 16px 18px; font-size:.95rem; color:var(--cream); text-wrap:pretty}
.ident-body .cs-ph{margin:0}
@media(max-width:640px){ .strip > *{flex-basis:86%} .filmgrid, .idents{grid-template-columns:1fr} }

/* ---------- CROSS-DOCUMENT VIEW TRANSITIONS ---------- */
@view-transition{ navigation:auto }
::view-transition-group(cs-frame), ::view-transition-group(cs-art){animation-duration:.62s; animation-timing-function:cubic-bezier(.6,0,.2,1)}
/* old and new frames have different aspects (3:4 card → 16:9 slot): cover-fit both so nothing stretches */
::view-transition-old(cs-frame), ::view-transition-new(cs-frame){height:100%; object-fit:cover; mix-blend-mode:normal; animation:none}
::view-transition-old(cs-art), ::view-transition-new(cs-art){height:100%; object-fit:contain; mix-blend-mode:normal; animation:none}
::view-transition-old(root){animation-duration:.28s}
::view-transition-new(root){animation-duration:.42s}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){animation:none !important}
}

/* ---------- FALLBACK: CHANNEL WIPE (SUPERCOLOR §4b) for browsers without cross-document transitions ---------- */
.pagefx{position:fixed; inset:0; z-index:80; pointer-events:none; display:none; overflow:hidden}
.pagefx.on{display:block}
.pf-bars{position:absolute; inset:0; display:flex; transform:translateX(-100%)}
.pf-bars span{flex:1}
.pagefx.in .pf-bars{animation:pfIn .5s cubic-bezier(.7,0,.2,1) both}
@keyframes pfIn{0%{transform:translateX(-100%); filter:none}100%{transform:translateX(0); filter:drop-shadow(10px 0 var(--cyan)) drop-shadow(-10px 0 var(--magenta))}}
.pagefx.out .pf-bars{animation:pfOut .55s cubic-bezier(.7,0,.2,1) both}
@keyframes pfOut{0%{transform:translateX(0); filter:drop-shadow(10px 0 var(--cyan)) drop-shadow(-10px 0 var(--magenta))}100%{transform:translateX(100%); filter:none}}
:root.a11y .pagefx{display:none !important}

/* ---------- LABELED ART SLOTS (placeholders until Phil's art lands; see images/work/README.md) ---------- */
.slot{color:var(--cream)}
.cs-stage[data-art="pan"][data-state="on"] .cs-art{opacity:0}                          /* the brand board hands off to the panning pages */

/* ---------- FLARE: award sticker that sits on the card's corner and rides into the hero ---------- */
.flare{display:block; filter:drop-shadow(0 8px 14px rgba(0,0,0,.45)); pointer-events:none}
.wc-flare{position:absolute; top:-7%; right:-7%; width:36%; z-index:6; transform:rotate(-12deg); transition:transform .5s cubic-bezier(.6,0,.2,1)}
.wcard:hover .wc-flare, .wcard:focus-visible .wc-flare{transform:rotate(-4deg) scale(1.08)}
.wcard.leaving .wc-flare{transition:none; transform:rotate(-12deg); view-transition-name:cs-flare}
.cs-flare{position:absolute; bottom:-11%; right:-1.5%; width:15%; max-width:170px; z-index:6; transform:rotate(-12deg); view-transition-name:cs-flare}
.cs-fig:has(.cs-stage[data-state="playing"]) .cs-flare{opacity:0; transition:opacity .3s ease}
::view-transition-group(cs-flare){animation-duration:.62s; animation-timing-function:cubic-bezier(.6,0,.2,1)}
::view-transition-old(cs-flare), ::view-transition-new(cs-flare){height:100%; object-fit:contain; mix-blend-mode:normal; animation:none}
@media(max-width:640px){ .wc-flare{width:40%} .cs-flare{width:24%; bottom:-14%} }
:root.a11y .flare{filter:none}
/* the ring text turns slowly inside its band; calm modes stop it via the global animation kill */
.flare-ring{transform-box:view-box; transform-origin:50% 50%; animation:flareSpin 26s linear infinite}
@keyframes flareSpin{to{transform:rotate(360deg)}}

/* ---------- PLAYLIST: one big player, caption under it, a queue of spots; autoplays muted on scroll, chains spot to spot ---------- */
.pl-player{position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#0a0f0a}
.pl-player > div, .pl-player iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.pl-facade{position:absolute; inset:0; z-index:2; border-radius:0}
.playlist.is-live .pl-facade{display:none}
.pl-bar{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:12px}
.pl-count{font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.14em; color:var(--dim)}
.pl-mute{opacity:1}
.pl-cap{margin-top:14px; max-width:var(--maxread)}
.pl-cap b{display:block; font-family:var(--disp); font-weight:900; font-variation-settings:"wght" 900,"wdth" 112; text-transform:uppercase; font-size:1.25rem; line-height:1.05; color:var(--cream); margin-bottom:8px}
.pl-cap p{color:var(--cream); text-wrap:pretty; margin-bottom:6px}
.pl-queue{list-style:none; display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:22px 0 0; padding:0}
.pl-item{display:block; width:100%; text-align:left; background:none; border:0; padding:0; cursor:pointer; color:var(--dim);
  font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; line-height:1.4}
.pl-item img{display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:8px; border:2px solid transparent; opacity:.7; margin-bottom:8px;
  transition:opacity .25s ease, border-color .25s ease, transform .4s cubic-bezier(.6,0,.2,1)}
.pl-item:hover img, .pl-item:focus-visible img{opacity:1; transform:translateY(-3px)}
.pl-item.is-current{color:var(--cream)}
.pl-item.is-current img{opacity:1; border-color:var(--pc)}
.pl-item:focus-visible{outline:3px solid var(--focus); outline-offset:4px; border-radius:8px}
@media(max-width:640px){
  .pl-queue{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:thin}
  .pl-queue li{flex:0 0 46%; scroll-snap-align:start}
}
:root.a11y .pl-item img{transition:none}

/* PLACED ART: the cutout sits exactly where its subject stands in the source frame, so it lands on itself and the
   frame comes alive underneath. The bar shows the middle 16/21 of a 16:9 source (object-fit: cover), so the source's
   bottom edge sits below the window; the stage clips there, matching the crop. With the crop pinned to the top of
   a 16:9 source (--media-pos 50% 0%): source height = 0.5625 × width; window = width / 3.5 → drop = 96.9% of the
   window height on desktop; on phones (2:1) 12.5%. */
.cs-art--placed{left:var(--art-left, 6%); width:var(--art-w, auto); max-width:none; max-height:none; height:auto;
  bottom:calc(-1 * (1 - var(--crop-y, 0)) * var(--art-overflow, 96.9%))}   /* --crop-y = the media-pos y fraction; overflow = source height beyond the window */
.cs-stage[data-state="live"] .cs-art--placed{opacity:0; transition:opacity .8s ease .2s}   /* the video is running: the real subject takes over */
@media(max-width:640px){ .cs-art--placed{--art-overflow:12.5%} }

/* ---------- SOUND BUTTON: glows while muted so people know there is sound to turn on ---------- */
.pl-mute[aria-pressed="false"]{animation:soundGlow 1.8s ease-in-out infinite}
@keyframes soundGlow{0%,100%{box-shadow:0 2px 0 rgba(0,0,0,.4), 0 0 0 0 color-mix(in srgb, var(--pc) 0%, transparent)}
  50%{box-shadow:0 2px 0 rgba(0,0,0,.4), 0 0 0 7px color-mix(in srgb, var(--pc) 45%, transparent), 0 0 26px color-mix(in srgb, var(--pc) 70%, transparent)}}

/* ---------- SHORTLIST BOARD: who we were up against, as a broadcast nominee list beside the TL;DR ---------- */
.cs-hero-grid{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:var(--s5); align-items:start}
.cs-hero-grid .lead{margin-bottom:0}
.shortlist{border:1px solid var(--line); border-radius:12px; background:var(--panel); padding:16px 18px 14px; box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.sl-title{font-family:var(--disp); font-weight:900; font-variation-settings:"wght" 900,"wdth" 118; text-transform:uppercase; font-size:1.6rem; line-height:1; letter-spacing:-.02em; color:var(--cream); margin:0 0 6px}
.sl-label{display:block; font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); line-height:1.5; margin-bottom:12px}
.sl-label:hover, .sl-label:focus-visible{color:var(--cream)}
.sl-list{list-style:none; margin:0; padding:0}
.sl-list li{display:flex; align-items:center; gap:12px; padding:8px 0; border-top:1px solid var(--line); font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--cream);
  animation:slIn .5s cubic-bezier(.6,0,.2,1) both; animation-delay:calc(.35s + var(--i, 0) * .09s)}
@keyframes slIn{from{opacity:0; transform:translateX(-8px)}to{opacity:1; transform:none}}
.sl-name{flex:1; min-width:0}
.sl-list li.is-us{color:var(--black); background:var(--pc); margin:0 -18px; padding:9px 18px; border-top-color:transparent; border-radius:3px}
.sl-list li.is-us .sl-name{font-weight:700}
.sl-us{display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap}
.sl-us .rec{width:8px; height:8px; border-radius:50%; background:var(--black); animation:dotblink 1.3s steps(1) infinite}
@media(max-width:860px){ .cs-hero-grid{grid-template-columns:1fr; gap:var(--s4)} }
:root.a11y .sl-list li, :root.a11y .pl-mute{animation:none}
/* placed MARK: positioned from its top edge inside the window (crop centred, --crop-y .5); overflow above the window = half of --art-overflow */
.cs-art--placed.cs-art--mark{bottom:auto; transform:none; max-height:none; max-width:none;
  top:calc(var(--art-top, 50%) * (1 + var(--art-overflow, 96.9%) / 100%) - var(--art-overflow, 96.9%) / 2)}
.cs-stage[data-state="live"] .cs-art--placed.cs-art--mark{transform:none}

/* PHOTO CARDS: a supplied graphic fills the panel (no cutout); hover contracts it to the circle and zooms a touch */
.wc-cover{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.6,0,.2,1)}
.wcard:hover .wc-cover, .wcard:focus-visible .wc-cover{transform:scale(1.06)}
.wcard.leaving .wc-cover{transition:none; transform:none}
.wc-panel:has(.wc-cover) .spd{display:none}

/* ---------- GREATEST HITS MARQUEE: a lit sign scrolling above the Work section. Full-bleed, the type glows in the
   section's channel and hums like a neon tube. Reduced motion: still, steady glow. High contrast: plain type. ---------- */
.marquee{position:relative; width:100vw; margin:-.2em 0 var(--s1) calc(50% - 50vw); padding:1.25em 0 .95em;   /* the type is 2.5× tall and the glow bleeds past the line box, so the box is sized from the type */
  font-size:clamp(3.2rem, 9.5vw, 8.4rem); line-height:1; overflow-x:clip; overflow-y:visible}   /* clip only sideways so the track never widens the page; the glow stays free above and below */
.marquee::before, .marquee::after{content:""; position:absolute; top:-1em; bottom:-1em; width:9%; z-index:2; pointer-events:none}   /* soft edges, full height so the glow fades too */
.marquee::before{left:0; background:linear-gradient(90deg, var(--black), transparent)}
.marquee::after{right:0; background:linear-gradient(270deg, var(--black), transparent)}
.mq-track{display:flex; align-items:center; gap:.35em; width:max-content; white-space:nowrap; animation:mqScroll 38s linear infinite;
  font-family:var(--disp); font-weight:900; font-variation-settings:"wght" 900,"wdth" 125; text-transform:uppercase; letter-spacing:-.02em; color:var(--cyan)}
.mq-item{display:inline-block; transform:scaleY(2.5); transform-origin:50% 50%;   /* 2.5× taller, same width */
  text-shadow:0 0 6px color-mix(in srgb, var(--cyan) 70%, transparent), 0 0 22px color-mix(in srgb, var(--cyan) 55%, transparent),
  0 0 64px color-mix(in srgb, var(--cyan) 40%, transparent), 0 0 140px color-mix(in srgb, var(--cyan) 25%, transparent);
  animation:mqHum 3.6s ease-in-out infinite}
.mq-item:nth-child(4n+3){animation-delay:-1.2s} .mq-item:nth-child(4n+5){animation-delay:-2.3s}
.mq-sep{color:var(--yellow); font-size:.55em; margin:0 .4em; text-shadow:0 0 14px color-mix(in srgb, var(--yellow) 70%, transparent); animation:mqBlink 2.4s steps(1) infinite}
@keyframes mqScroll{to{transform:translateX(-50%)}}
@keyframes mqHum{0%,100%{opacity:1}50%{opacity:.88}92%{opacity:.97}94%{opacity:.8}96%{opacity:1}}   /* mains hum with the odd stutter */
@keyframes mqBlink{0%,60%{opacity:1}61%,100%{opacity:.35}}
@media (prefers-reduced-motion:reduce){ .mq-track, .mq-item, .mq-sep{animation:none} }
:root.a11y .mq-item, :root.a11y .mq-sep{text-shadow:none}

/* ---------- STATS RAIL: big bold numbers beside the TL;DR, counting up on arrival ---------- */
.stats{border-left:5px solid var(--chan); padding:4px 0 4px 22px}
.stat-list{list-style:none; margin:0; padding:0; display:grid; gap:18px}
.stat-list li{animation:slIn .5s cubic-bezier(.6,0,.2,1) both; animation-delay:calc(.3s + var(--i, 0) * .12s)}
.stat-n{display:block; font-family:var(--disp); font-weight:900; font-variation-settings:"wght" 900,"wdth" 125; font-size:clamp(3rem, 6vw, 4.6rem); line-height:.9; letter-spacing:-.03em; color:var(--chan);
  text-shadow:0 0 22px color-mix(in srgb, var(--chan) 40%, transparent); font-variant-numeric:tabular-nums}
.stat-l{display:block; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-top:6px}
.stat-src{font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--dim); margin-top:18px; opacity:.7}
@media(max-width:860px){ .stat-list{grid-template-columns:1fr 1fr; gap:22px 16px} }
:root.a11y .stat-n{text-shadow:none}
:root.a11y .stat-list li{animation:none}

/* ---------- PULL QUOTE: a line worth stopping on, in the section's channel colour ---------- */
.pull{margin:var(--s4) 0; max-width:var(--maxread); border-left:5px solid var(--chan); padding:2px 0 2px 22px}
.pull blockquote{margin:0; font-family:var(--disp); font-weight:900; font-variation-settings:"wght" 900,"wdth" 112; text-transform:none;
  font-size:clamp(1.35rem, 2.6vw, 1.95rem); line-height:1.12; letter-spacing:-.02em; color:var(--cream); text-wrap:pretty;
  text-shadow:0 0 26px color-mix(in srgb, var(--chan) 28%, transparent)}
.pull cite{display:block; margin-top:12px; font-family:var(--mono); font-style:normal; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--chan)}
:root.a11y .pull blockquote{text-shadow:none}

/* ---------- SONIC MOOD BOARD: a facade for the project's Spotify playlist. Spotify's iframe is heavy and
   tracks, so it loads only when someone asks for it; the card itself is the site's own type. ---------- */
.sonic{display:flex; align-items:center; gap:20px; width:100%; max-width:var(--maxread); text-align:left; cursor:pointer;
  color:var(--cream); background:var(--panel); border:1px solid var(--line); border-left:5px solid var(--chan); border-radius:12px;
  padding:18px 22px; transition:border-color .25s ease, transform .25s ease}
.sonic:hover, .sonic:focus-visible{border-color:var(--chan); transform:translateY(-3px)}
.sonic:focus-visible{outline:3px solid var(--focus); outline-offset:3px}
.sonic-eq{display:inline-flex; align-items:flex-end; gap:3px; height:32px; flex:none}
.sonic-eq i{width:4px; height:5px; background:var(--chan); border-radius:1px; animation:eqbar 1.1s ease-in-out infinite}
.sonic-eq i:nth-child(2){animation-delay:.18s} .sonic-eq i:nth-child(3){animation-delay:.36s}
.sonic-eq i:nth-child(4){animation-delay:.54s} .sonic-eq i:nth-child(5){animation-delay:.72s}
@keyframes eqbar{0%,100%{height:5px}50%{height:32px}}
.sonic-txt{display:flex; flex-direction:column; gap:3px; min-width:0; flex:1}
.sonic-kicker{font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--dim)}
.sonic-name{font-family:var(--disp); font-weight:900; font-variation-settings:"wght" 900,"wdth" 112; text-transform:uppercase; font-size:1.25rem; line-height:1.05; letter-spacing:-.01em}
.sonic-meta{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--dim)}
.sonic-go{font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--chan); white-space:nowrap}
.sonic-frame{max-width:var(--maxread); border-radius:12px; overflow:hidden; border:1px solid var(--line)}
.sonic-frame iframe{display:block; width:100%; height:352px; border:0}
@media(max-width:560px){ .sonic{gap:14px; padding:16px} .sonic-go{display:none} }
:root.a11y .sonic-eq i{animation:none; height:18px}
@media (prefers-reduced-motion:reduce){ .sonic-eq i{animation:none; height:18px} .sonic{transition:none} }

/* ---------- FOOTNOTE: small print under a figure, for context the picture cannot carry ---------- */
.cs-note{font-size:.88rem; line-height:1.55; color:var(--dim); text-wrap:pretty;
  border-left:2px solid var(--line); padding-left:14px; margin:calc(-1 * var(--s2)) 0 var(--s4)}   /* runs the full width of the figure it belongs to; body copy keeps the reading measure */
.cs-note a{color:var(--cyan)}
video.autoloop{cursor:pointer}   /* click toggles it, since it carries no controls while it plays itself */

/* ---------- FADE CARDS: no photo behind the art, the panel just warms to another colour on hover.
   For art that was drawn on white in the first place, so hovering puts it back where it belongs. ---------- */
.wcard--fade .wc-panel{transition:background-color .5s ease, clip-path .55s cubic-bezier(.6,0,.2,1), -webkit-clip-path .55s cubic-bezier(.6,0,.2,1)}
.wcard--fade .wc-panel .spd{transition:opacity .45s ease}
.wcard--fade:hover .wc-panel, .wcard--fade:focus-visible .wc-panel{background:var(--hover-bg, #fff);
  -webkit-clip-path:circle(150% at var(--cx) var(--cy)); clip-path:circle(150% at var(--cx) var(--cy))}
.wcard--fade:hover .wc-panel .spd, .wcard--fade:focus-visible .wc-panel .spd{opacity:0}
:root.a11y .wcard--fade .wc-panel{transition:none}