/* Entroversal studio site. The same tokens, type and gradient as entroversal-journey.html, so the studio
   pages, the project doors and the piece itself read as one thing. Colours are tokens on :root; the
   gradient is --grad. Pages: index.html, about.html, work/*.html (built by tools/site-build.py). */
:root{
  --void:#0f0a24; --ink:#c9b8e6; --ink-dim:#a99dc4; --purple:#b48cff; --teal:#5fe3d3; --pink:#ff78cd;
  --veil:rgba(14,8,34,.62); --line:rgba(230,223,242,.22);
  --grad:linear-gradient(90deg,#b48cff,#ff78cd,#5fe3d3,#b48cff,#ff78cd);
  --serif:"Oxanium","Lora",Georgia,serif;  /* page text and subtitles: the overlay face (Jared, 2026-10-19) */
  --mono:"Oxanium",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  box-sizing:border-box;background:var(--void);
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--void:#0f0a24;--ink:#c9b8e6;--ink-dim:#a99dc4;--purple:#b48cff;--teal:#5fe3d3;--veil:rgba(14,8,34,.62);}
}
:root[data-theme="dark"]{--void:#0f0a24;--ink:#c9b8e6;--ink-dim:#a99dc4;--purple:#b48cff;--teal:#5fe3d3;--veil:rgba(14,8,34,.62);}
*,*::before,*::after{box-sizing:inherit}
html{min-height:100%;background:var(--void);scroll-behavior:smooth}
body{min-height:100%;margin:0;background:var(--void);color:var(--ink);font-family:var(--mono);-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;align-items:center;padding:0 16px}
.fx{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    repeating-linear-gradient(to bottom,rgba(0,0,0,.16) 0 var(--sl-dark,1px),transparent var(--sl-dark,1px) var(--sl-period,3px)),
    radial-gradient(ellipse at 50% 40%,transparent 55%,rgba(0,0,0,.8) 100%)}
.top,main,.foot{position:relative;z-index:1;width:100%;max-width:1040px}

/* header: wordmark left, nav right; on the home page the wordmark is in the page itself */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0 0;min-height:56px}
.top nav{display:flex;gap:6px;margin-left:auto}
.top nav a{color:#120722;text-decoration:none;font-size:15px;font-weight:600;letter-spacing:.08em;padding:10px 22px;border-radius:2px;
  background:var(--grad);background-size:300% 100%;animation:shift 6s linear infinite,btnglow 3s ease-in-out infinite alternate}
.top nav a:hover,.top nav a:focus-visible{animation-duration:2.5s,3s;outline:none}
.top nav a[aria-current]{box-shadow:0 0 0 2px var(--void),0 0 0 3px var(--teal)}
/* phones: wordmark plus two buttons ran ~30px past a 360px screen; tighten both, and wrap rather than overflow below that */
@media (max-width:480px){.top{gap:10px;flex-wrap:wrap}.wordmark.small{font-size:15px}.top nav a{font-size:13px;padding:8px 12px}}
@keyframes btnglow{from{box-shadow:0 0 9px rgba(180,140,255,.65),0 0 26px rgba(255,120,205,.35)}to{box-shadow:0 0 14px rgba(95,227,211,.75),0 0 38px rgba(180,140,255,.5)}}

/* the wordmark: Nitro Chargers (chosen 2026-10-19 on fonts.html), the gradient drifting, the CRT inside the letters */
@font-face{font-family:"Nitro Chargers";src:url(../assets/fonts/nitro-chargers.otf) format("opentype");font-display:swap}
.wordmark{font-family:"Nitro Chargers","Monoton",Impact,sans-serif;font-weight:400;letter-spacing:.06em;line-height:1.15;text-decoration:none}
.wordmark.small{font-size:clamp(18px,3vw,24px)}
.wordmark.big{font-size:clamp(26px,5.75vw,64px);margin:0 0 12px}
.wordmark.hide{visibility:hidden}
/* the power-on bloom on hover, on a wrapper so the word's own animations keep their place */
.flash{display:inline-block}
.flash:hover,.flash:focus-visible{animation:crt-on .5s ease-out}
@keyframes shift{to{background-position:300% 0}}
/* CRT inside the letters (Jared, 2026-10-19: not a rectangle over the word). Three background layers, all clipped
   to the glyphs: the rolling band on top, the scanlines, the gradient. One animation moves the band and drifts the
   gradient (Firefox will not clip a pseudo-element's background to its text, so no pseudo-elements here). The
   red/cyan fringes are drop-shadows, which follow the glyph edges. No flicker and no jitter on the word: with the
   crawling scanlines they read as a blank frame (Jared, 2026-10-20, chose the still version from three live probes).
   The scanline layer crawls one device pixel at a time: the script at the end of the page regenerates these keyframes
   with the pitch in whole device pixels, so the lines stay pixel-perfect and alternate instead of sitting still. */
.crt-text{position:relative;display:inline-block;
  background:
    linear-gradient(to bottom,transparent 0,rgba(244,236,250,.35) 48%,rgba(95,227,211,.5) 50%,rgba(244,236,250,.35) 52%,transparent 100%),
    repeating-linear-gradient(to bottom,rgba(0,0,0,.25) 0 var(--sl-dark,1px),transparent var(--sl-dark,1px) var(--sl-period,3px)),
    var(--grad);
  background-size:100% 36%,100% 100%,300% 100%;background-repeat:no-repeat,repeat,repeat;
  background-position:0 -40%,0 0,0 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:crt-text-move 6s linear infinite,crt-glow 3s ease-in-out infinite alternate}
/* the band rolls three times per gradient cycle; it jumps back between passes, the gradient never does */
@keyframes crt-text-move{
  0%{background-position:0 -40%,0 0,0 0}33.33%{background-position:0 140%,0 0,100% 0}
  33.34%{background-position:0 -40%,0 0,100% 0}66.66%{background-position:0 140%,0 0,200% 0}
  66.67%{background-position:0 -40%,0 0,200% 0}100%{background-position:0 140%,0 0,300% 0}}
@keyframes crt-glow{from{filter:drop-shadow(-1px 0 rgba(255,0,80,.55)) drop-shadow(1px 0 rgba(0,255,230,.55)) drop-shadow(0 0 7px rgba(180,140,255,.7)) drop-shadow(0 0 24px rgba(255,120,205,.4))}
  to{filter:drop-shadow(-1px 0 rgba(255,0,80,.55)) drop-shadow(1px 0 rgba(0,255,230,.55)) drop-shadow(0 0 11px rgba(95,227,211,.75)) drop-shadow(0 0 36px rgba(180,140,255,.55))}}
@keyframes crt-flicker-text{0%,100%{opacity:1}8%{opacity:.84}9%{opacity:1}41%{opacity:.9}42%{opacity:1}73%{opacity:.87}74%{opacity:1}}
@keyframes crt-jitter{0%{transform:translate(0,0)}50%{transform:translate(var(--dpx,1px),calc(-1*var(--dpx,1px)))}100%{transform:translate(calc(-1*var(--dpx,1px)),var(--dpx,1px))}}
@media (prefers-reduced-motion: reduce){
  .crt-text{animation:none;background:none;color:var(--purple);-webkit-text-fill-color:var(--purple);filter:none}
}
}

@keyframes glow{from{filter:drop-shadow(0 0 7px rgba(180,140,255,.7)) drop-shadow(0 0 24px rgba(255,120,205,.4))}
  to{filter:drop-shadow(0 0 11px rgba(95,227,211,.75)) drop-shadow(0 0 36px rgba(180,140,255,.55))}}

/* the breathing triangle */
.mark{position:relative;width:min(24vw,120px);aspect-ratio:1/.9;margin:22px 0 16px;animation:glow 3s ease-in-out infinite alternate,breathe 3.14s ease-in-out infinite}
/* the soul: the front page's ASCII flame inside the mark (assets/soul.js); the category tiles mold it on hover. It
   hovers on its own slow timing, apart from the mark's breath (3.14 s) */
.soul{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;animation:hover 6.2s ease-in-out infinite}
@keyframes hover{0%,100%{transform:translateY(-2.5%)}50%{transform:translateY(2.5%)}}
/* The outline: the bar (with the corner wedges) and the apex, each its own clip path on its own pseudo-element.
   No shape shares an edge with another, so nothing anti-aliases into a hairline along the slanted sides (the old
   mask frame, and then a polygon with a hole, both did: Jared, Firefox, 2026-10-20). */
.tri{position:relative;width:100%;height:100%}
.tri::before,.tri::after{content:"";position:absolute;inset:0;background:var(--grad);background-size:300% 100%;animation:shift 6s linear infinite}
.tri::before{clip-path:polygon(10% 80%,10% 90%,90% 90%,90% 80%,100% 100%,0 100%)}
.tri::after{clip-path:polygon(50% 0,55% 10%,45% 10%)}
@keyframes breathe{50%{transform:scale(1.06)}}

/* home */
.home{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 0 40px}
/* Phones and touch screens (no hover; Jared, 2026-10-30): the mark sticks to the top of the screen while the tiles
   scroll under it, and the soul takes the shape of the tile at the reading line (assets/soul.js). A soft disc of the
   page's void sits behind it so the tiles passing underneath don't fight the fire, and it lets every tap through. */
@media (hover: none){
  .home .mark{position:sticky;top:6px;z-index:5;pointer-events:none}
  .home .mark::before{content:"";position:absolute;inset:-26% -46% -22%;z-index:-1;border-radius:50%;
    background:radial-gradient(closest-side,rgba(15,10,36,.94),rgba(15,10,36,.82) 62%,rgba(15,10,36,0))}
}
.line{margin:0 0 44px;font-family:var(--serif);font-size:clamp(16px,2.2vw,21px);line-height:1.5;max-width:50ch;color:var(--ink)}
.tiles.cats{grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr));gap:22px}
.tile span small{display:block;margin-top:4px;font-size:14px;font-style:normal;font-family:var(--mono);letter-spacing:.02em;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
main.prose.cat-page{max-width:1040px;width:100%}
.cat-page .line{text-align:left;margin:0 0 26px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:18px;width:100%}
.tile{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;text-decoration:none;color:var(--ink);background:var(--veil);
  border-left:2px solid var(--purple);border-right:2px solid var(--teal);transition:transform .25s,box-shadow .25s}
.tile img,.tile video{display:block;width:100%;height:100%;background:var(--void);object-fit:cover;transition:transform .6s ease,filter .4s;filter:saturate(.85)}
.tile span{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 12px;text-align:left;font-family:var(--serif);font-size:clamp(17px,2vw,21px);
  background:linear-gradient(transparent,rgba(5,3,11,.9))}
.tile:hover,.tile:focus-visible{transform:translateY(-2px);box-shadow:0 0 14px rgba(180,140,255,.5),0 0 34px rgba(95,227,211,.3);outline:none}
.tile:hover img,.tile:focus-visible img,.tile:hover video,.tile:focus-visible video,.tile.playing video{transform:scale(1.04);filter:saturate(1.1)}
.tile .motion{position:absolute;inset:0;opacity:0;transition:opacity .35s ease}
.tile.playing .motion{opacity:1}
.tile:focus-visible{outline:2px solid var(--purple);outline-offset:3px}

/* about and project pages */
.prose{padding:34px 0 50px;max-width:720px;align-self:center}
@font-face{font-family:"Streamster";src:url(../assets/fonts/streamster.ttf) format("truetype");font-display:swap}
/* page titles: Streamster, the console-mode overlay's game-title face, with its hard violet shadow (text-shadow 4px 6px,
   no blur) and the colour drifting slowly through the site gradient */
.prose h1{font-family:"Streamster",var(--serif);font-weight:400;font-size:clamp(38px,6.5vw,64px);line-height:1.1;margin:0 0 22px;
  letter-spacing:.02em;padding:.1em 0 .15em .08em;color:var(--purple);
  /* the hard violet offset on top, then two soft glows in the title's own colour, which drifts with it */
  text-shadow:4px 6px #4B18E6,0 0 6px rgba(180,140,255,.9),0 0 18px rgba(180,140,255,.8),0 0 48px rgba(180,140,255,.6);
  animation:title-drift 14s ease-in-out infinite alternate}
@keyframes title-drift{
  0%{color:#b48cff;text-shadow:4px 6px #4B18E6,0 0 6px rgba(180,140,255,.9),0 0 18px rgba(180,140,255,.8),0 0 48px rgba(180,140,255,.6)}
  50%{color:#ff78cd;text-shadow:4px 6px #4B18E6,0 0 6px rgba(255,120,205,.9),0 0 18px rgba(255,120,205,.8),0 0 48px rgba(255,120,205,.6)}
  100%{color:#5fe3d3;text-shadow:4px 6px #4B18E6,0 0 6px rgba(95,227,211,.9),0 0 18px rgba(95,227,211,.8),0 0 48px rgba(95,227,211,.6)}}
.prose h2{font-family:var(--serif);font-weight:400;color:var(--teal);font-size:clamp(24px,4vw,34px);margin:40px 0 8px}
/* a section heading that opens its project's page (Music: Being, Entroversal) */
.prose h2 a.to{color:inherit;text-decoration:none}
.prose h2 a.to::after{content:"\203A";display:inline-block;margin-left:.3em;color:var(--purple);transition:transform .2s}
.prose h2 a.to:hover,.prose h2 a.to:focus-visible{text-shadow:0 0 14px rgba(95,227,211,.55);outline:none}
.prose h2 a.to:hover::after,.prose h2 a.to:focus-visible::after{transform:translateX(5px)}
.prose p{font-family:var(--serif);font-size:clamp(16px,2vw,18px);line-height:1.65;margin:0 0 20px;color:var(--ink)}
.prose .banner{display:block;width:100%;height:auto;margin:6px 0 22px}
.prose .banner.small{width:min(100%,420px)}
.prose .emblem{display:block;width:min(40vw,200px);height:auto;margin:6px 0 14px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))}
.prose .crumb{font-family:var(--mono);font-size:15px;letter-spacing:.06em;margin:0 0 18px}
.prose .crumb a{color:var(--ink-dim);text-decoration:none}
.prose .crumb a:hover{color:var(--ink)}
.prose .crumb a+a::before{content:none}
.prose .crumb a::before{content:"\2190  "}
.prose .role{font-style:italic;font-weight:500;font-size:clamp(18px,2.4vw,22px);color:var(--purple);margin:0 0 6px}
.prose .when{font-family:var(--serif);font-style:italic;font-size:clamp(16px,2vw,19px);line-height:1.5;max-width:60ch;color:var(--ink);margin:-14px 0 26px}
.prose .meta{font-family:var(--mono);font-size:15px;letter-spacing:.03em;line-height:1.5;color:var(--ink-dim);margin:0 0 26px}
.prose .contact a{color:var(--teal);text-decoration:none;border-bottom:1px solid rgba(95,227,211,.35);font-family:var(--mono);font-size:16px}
.prose .contact a:hover{color:var(--ink);border-bottom-color:var(--purple)}
.prose figure{margin:26px 0 0;background:var(--veil);border-left:2px solid var(--purple);border-right:2px solid var(--teal)}
.prose figure img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.prose figure.pair div{display:grid;grid-template-columns:repeat(var(--n,2),1fr);gap:2px}
.prose figure.pair.square img{aspect-ratio:1/1}
.prose figure.r54 img{aspect-ratio:5/4}
.prose figure.r32 img{aspect-ratio:3/2}
.prose figure.natural img{aspect-ratio:auto}
.prose figure.native,.prose figure.centred{width:100%}
.prose figure.native img{display:block;width:auto;max-width:100%;height:auto;aspect-ratio:auto;margin:18px auto 4px}
.prose figure.centred img{display:block;width:min(100%,325px);height:auto;aspect-ratio:auto;margin:18px auto 4px}
@media (max-width:600px){.prose figure.pair div{grid-template-columns:1fr}}
.prose figure+p{margin-top:24px}
/* the Music page's player (PLAYER in site-build.py): a now-playing panel over a level strip, the albums' track
   lists, a transport bar that stays at the foot of the screen while the deck is in view. Without JS only the
   lists show, each track with the browser's own player. */
.deck{position:relative;width:100%;margin:6px 0 0;background:var(--veil);border-left:2px solid var(--purple);border-right:2px solid var(--teal)}
.deck [hidden]{display:none!important}
.deck .stage{padding:28px 28px 0}
.deck .now{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:32px;align-items:end}
.deck .cover{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--void);
  box-shadow:0 0 0 1px var(--line),0 18px 50px rgba(0,0,0,.55),0 0 34px rgba(180,140,255,.22);transition:box-shadow .6s}
.deck .cover img{display:block;width:100%;height:100%;object-fit:cover}
/* the site's scanlines over the art */
.deck .cover::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.22) 0 var(--sl-dark,1px),transparent var(--sl-dark,1px) var(--sl-period,3px))}
.deck.on .cover{animation:btnglow 3s ease-in-out infinite alternate}
.deck .info{min-width:0;padding-bottom:4px}
.deck .info p{margin:0}
.deck .state{font-family:var(--mono);font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--teal);display:flex;align-items:center;gap:10px}
.deck .state::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink-dim)}
.deck.on .state::before{background:var(--teal);box-shadow:0 0 10px var(--teal);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
/* the title in the drifting gradient, which moves only while a track plays */
.deck .info .title{margin:12px 0 10px;font-family:var(--serif);font-weight:700;font-size:clamp(34px,6vw,68px);line-height:1.02;letter-spacing:.01em;
  overflow-wrap:anywhere;background:var(--grad);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;filter:drop-shadow(0 0 14px rgba(180,140,255,.35));animation:shift 9s linear infinite paused}
.deck.on .info .title{animation-play-state:running}
.deck .by{font-family:var(--serif);font-size:clamp(16px,2vw,19px);color:var(--ink-dim)}
.deck .by b{font-weight:600;color:var(--ink)}
.deck .chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 20px!important}
.deck .chips span{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--ink-dim);padding:4px 12px;border:1px solid var(--line);border-radius:999px}
.deck .pills{display:flex;flex-wrap:wrap;gap:10px}
.deck .pills a{font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.06em;text-decoration:none;padding:9px 20px;border-radius:999px;
  color:var(--teal);border:1px solid rgba(95,227,211,.55);transition:box-shadow .2s,color .2s}
.deck .pills a:first-child{color:#120722;border-color:transparent;background:var(--grad);background-size:300% 100%;animation:shift 6s linear infinite}
.deck .pills a::after{content:"\203A";margin-left:.45em}
.deck .pills a:hover{box-shadow:0 0 14px rgba(180,140,255,.55),0 0 30px rgba(95,227,211,.25)}
.deck .levels{display:block;width:100%;height:44px;margin:26px 0 0;opacity:.9}

.deck .list{padding:22px 28px 26px}
.deck .label{margin:0 0 6px;font-family:var(--mono);font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-dim);
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.deck .album{margin:0 0 8px}
.deck .album-head{display:flex;align-items:center;gap:14px;margin:18px 0 0}
.deck .album-head img{flex:none;width:56px;height:56px;object-fit:cover;box-shadow:0 0 0 1px var(--line)}
.deck .album-head h2{margin:0;font-size:clamp(22px,3vw,28px);line-height:1.15}
.deck .album-head .sum{margin:2px 0 0;font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--ink-dim)}
.deck .blurb{margin:10px 0 8px;max-width:72ch;font-size:clamp(15px,1.8vw,16px);line-height:1.6;color:var(--ink-dim)}
/* the rows' padding hangs outside, so the thumbnails line up with the album art */
.deck ol.tracks{list-style:none;margin:0 -12px;padding:0}
.deck .row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;padding:8px 12px;margin:0;
  border:0;border-radius:2px;background:none;color:var(--ink);font:inherit;text-align:left;transition:background .2s}
button.row{cursor:pointer}
button.row:hover{background:rgba(180,140,255,.09)}
.deck .row[aria-current]{background:linear-gradient(90deg,rgba(180,140,255,.24),rgba(255,120,205,.1) 55%,rgba(95,227,211,.06));box-shadow:inset 2px 0 0 var(--teal)}
.deck .row[aria-current] .t b{color:var(--teal)}
.deck .thumb{position:relative;width:44px;height:44px}
.deck .thumb img{display:block;width:100%;height:100%;object-fit:cover}
.deck .t{min-width:0}
.deck .t b,.deck .t small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deck .t b{font-weight:600;font-size:16px}
.deck .t small{margin-top:2px;font-size:13px;letter-spacing:.02em;color:var(--ink-dim)}
.deck .dur{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink-dim)}
.deck li audio{display:block;width:100%;height:38px;margin:2px 0 10px;color-scheme:dark}
/* the playing row's thumbnail turns into a little level meter */
.deck .eq{position:absolute;inset:0;display:none;align-items:flex-end;justify-content:center;gap:3px;padding:12px 10px;background:rgba(10,6,26,.62)}
.deck .eq b{width:5px;height:100%;background:var(--teal);transform-origin:bottom;animation:eq .9s ease-in-out infinite alternate}
.deck .eq b:nth-child(2){animation-delay:-.3s;background:var(--pink)}
.deck .eq b:nth-child(3){animation-delay:-.6s;background:var(--purple)}
@keyframes eq{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.deck.on .row[aria-current] .eq{display:flex}

.deck .bar{position:sticky;bottom:0;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.6fr) minmax(0,1fr);align-items:center;gap:22px;
  padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));background:rgba(12,7,30,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.deck .bar::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--grad);background-size:300% 100%;opacity:.8}
.deck .mini{display:flex;align-items:center;gap:12px;min-width:0}
.deck .mini img{flex:none;width:52px;height:52px;object-fit:cover;box-shadow:0 0 0 1px var(--line)}
.deck .mini span{min-width:0}
.deck .mini b,.deck .mini small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deck .mini b{font-weight:600;font-size:15px}
.deck .mini small{font-size:13px;color:var(--ink-dim)}
.deck .ctl{display:flex;flex-direction:column;gap:6px;min-width:0}
.deck .btns{display:flex;align-items:center;justify-content:center;gap:20px}
.deck .bar button{display:grid;place-items:center;padding:0;border:0;background:none;color:var(--ink);cursor:pointer}
.deck .bar button svg{fill:currentColor}
.deck .bar .s{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.deck .prev,.deck .next,.deck .mute{width:38px;height:38px;border-radius:50%}
.deck .prev svg,.deck .next svg{width:16px;height:16px}
.deck .prev:hover,.deck .next:hover,.deck .mute:hover{color:var(--teal)}
.deck .bar .pp{width:52px;height:52px;border-radius:50%;color:#120722;background:var(--grad);background-size:300% 100%;
  animation:shift 6s linear infinite paused;box-shadow:0 0 12px rgba(180,140,255,.4)}
.deck .bar .pp svg{width:19px;height:19px}
.deck.on .bar .pp{animation:shift 6s linear infinite,btnglow 3s ease-in-out infinite alternate}
.deck .seekrow{display:flex;align-items:center;gap:12px}
.deck .el,.deck .tot{flex:none;min-width:4.5ch;font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink-dim)}
.deck .el{text-align:right}
.deck.on .el{color:var(--ink)}
.deck .wave{flex:1;min-width:0;height:40px;cursor:pointer;touch-action:none;border-radius:2px}
.deck .wave canvas{display:block;width:100%;height:100%}
.deck .vol{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.deck .mute svg{width:18px;height:18px}
.deck .vol input{--p:100%;width:min(100%,120px);height:20px;margin:0;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none}
.deck .vol input::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:linear-gradient(90deg,transparent var(--p),#2e2648 var(--p)),linear-gradient(90deg,var(--purple),var(--pink),var(--teal))}
.deck .vol input::-moz-range-track{height:4px;border-radius:2px;
  background:linear-gradient(90deg,transparent var(--p),#2e2648 var(--p)),linear-gradient(90deg,var(--purple),var(--pink),var(--teal))}
.deck .vol input::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-4px;border:0;border-radius:50%;background:var(--ink);box-shadow:0 0 8px rgba(95,227,211,.8)}
.deck .vol input::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--ink);box-shadow:0 0 8px rgba(95,227,211,.8)}
.deck button:focus-visible,.deck .wave:focus-visible,.deck .vol input:focus-visible,.deck .pills a:focus-visible{outline:none;box-shadow:0 0 0 2px var(--void),0 0 0 3px var(--teal)}
.deck .row:focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--teal)}
/* phones: the cover above the title, the bar in two rows (track and buttons, then the waveform); no volume,
   phones have their own */
@media (max-width:700px){
  .deck .stage{padding:18px 16px 0}
  .deck .now{grid-template-columns:1fr;gap:20px}
  .deck .cover{width:min(100%,300px)}
  .deck .list{padding:16px 10px 20px}
  .deck .label{margin:0 6px 6px}
  .deck .album-head,.deck .blurb{margin-left:6px;margin-right:6px}
  .deck .row{padding:8px 6px;gap:12px}
  .deck ol.tracks{margin:0}
  .deck .bar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"mini btns" "seek seek";gap:8px 12px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))}
  .deck .ctl{display:contents}
  .deck .mini{grid-area:mini}.deck .btns{grid-area:btns;gap:6px}.deck .seekrow{grid-area:seek;gap:8px}
  .deck .mini img{width:44px;height:44px}
  .deck .bar .pp{width:46px;height:46px}
  .deck .vol{display:none}
  .deck .wave{height:34px}
}
@media (prefers-reduced-motion: reduce){
  .deck .cover,.deck.on .cover,.deck .info .title,.deck .pills a:first-child,.deck .bar .pp,.deck.on .bar .pp,.deck.on .state::before,.deck .eq b{animation:none}
}
.prose figcaption{font-family:var(--mono);font-size:14px;letter-spacing:.04em;color:var(--ink-dim);padding:8px 12px 10px}
.prose a.person{color:var(--teal);text-decoration:none;border-bottom:1px solid rgba(95,227,211,.35)}
.prose a.person:hover,.prose a.person:focus-visible{color:var(--ink);border-bottom-color:var(--purple);outline:none}
.prose figure.motion img,.prose figure.motion video{display:block;width:auto;max-width:100%;height:auto;aspect-ratio:auto;object-fit:contain;margin:0 auto;background:var(--void)}
/* Being: the flight video with sound, then the dev loops two to a row (one on phones) */
.prose figure.film video{display:block;width:100%;height:auto;background:#000;color-scheme:dark}
.prose .loops{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:18px;width:100%;margin:22px 0}
.prose .loops figure{margin:0}
@media (max-width:600px){.prose .loops{grid-template-columns:1fr}}
.def{font-family:var(--serif);font-size:clamp(16px,2.2vw,21px);max-width:44ch;line-height:1.5}
.def b{color:var(--purple);font-weight:400}

/* the two doors on the Entroversal project page, as on the first landing */
.doors{display:flex;flex-wrap:wrap;gap:18px;width:100%;margin:8px 0 30px}
.door{flex:1 1 240px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  padding:22px 18px 20px;text-decoration:none;color:var(--ink);background:var(--veil);
  border-left:2px solid var(--purple);border-right:2px solid var(--teal);transition:transform .25s,box-shadow .25s}
.door:hover,.door:focus-visible{transform:translateY(-2px);box-shadow:0 0 14px rgba(180,140,255,.5),0 0 34px rgba(95,227,211,.3);outline:none}
.door p{margin:4px 0 0;font-family:var(--serif);font-size:clamp(15px,2vw,18px);line-height:1.45}
.door small{color:var(--ink-dim);font-size:12px;font-family:var(--mono)}
.b{color:#120722;font:inherit;font-family:var(--mono);font-size:14px;letter-spacing:.08em;padding:12px 30px;border-radius:2px;
  background:var(--grad);background-size:300% 100%;animation:shift 6s linear infinite,btnglow 3s ease-in-out infinite alternate}
.door:hover .b{animation-duration:2.5s,3s}
@keyframes btnglow{from{box-shadow:0 0 9px rgba(180,140,255,.65),0 0 26px rgba(255,120,205,.35)}to{box-shadow:0 0 14px rgba(95,227,211,.75),0 0 38px rgba(180,140,255,.5)}}

/* footer */
.foot{margin-top:auto;display:flex;justify-content:space-between;gap:16px;padding:26px 0 30px;font-size:14px;letter-spacing:.04em;color:var(--ink-dim);border-top:1px solid var(--line)}
.foot a{color:var(--ink-dim);text-decoration:none}
.foot a:hover{color:var(--ink)}

@media (prefers-reduced-motion: reduce){
  .mark,.tri,.soul,.b{animation:none}
  .b{background:var(--purple)}
  html{scroll-behavior:auto}
}

/* CRT: whichever item is hovered or focused wakes like a tube. Scanlines and a rolling band fade in over it,
   a brief power-on bloom, the label splits into red and cyan fringes, the picture jitters by a hair and flickers. */
.crt{position:relative;isolation:isolate}
.crt::before,.crt::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;z-index:2}
.crt::before{background:
  repeating-linear-gradient(to bottom,rgba(0,0,0,.55) 0 var(--sl-dark,1px),transparent var(--sl-dark,1px) var(--sl-period,3px)),
  linear-gradient(90deg,rgba(255,0,80,.05),transparent 30%,transparent 70%,rgba(0,255,230,.05));
  mix-blend-mode:multiply}
.crt::after{background:linear-gradient(to bottom,transparent 0,rgba(244,236,250,.07) 48%,rgba(95,227,211,.12) 50%,rgba(244,236,250,.07) 52%,transparent 100%);
  background-size:100% 36%;background-repeat:no-repeat;mix-blend-mode:screen}
.crt:hover::before,.crt:focus-visible::before{opacity:1;animation:crt-flicker 2.4s steps(1) infinite}
.crt:hover::after,.crt:focus-visible::after{opacity:1;animation:crt-roll 2.2s linear infinite}
.crt:hover,.crt:focus-visible{animation:crt-on .5s ease-out}
.crt:hover img,.crt:focus-visible img,.crt:hover video,.crt:focus-visible video{animation:crt-jitter-img .12s steps(2) infinite;filter:saturate(1.3) contrast(1.1) brightness(1.35)}
.crt:hover span,.crt:hover .b,.crt:hover p,.crt:focus-visible span,.crt:focus-visible .b,.crt:focus-visible p{
  text-shadow:-1px 0 rgba(255,0,80,.55),1px 0 rgba(0,255,230,.55),0 0 6px rgba(244,236,250,.25)}
/* the gradient buttons sit above the overlays, with lines of their own kept faint: a dark 1px line on a bright
   ground shows every rounding of the pitch at fractional screen scales (Jared, 2026-10-19), a faint one does not */
.crt .b{position:relative;z-index:3}
.b.crt::before,.b.crt::after{display:none}
.crt:hover .b,.crt:focus-visible .b,.b.crt:hover,.b.crt:focus-visible{
  background-image:repeating-linear-gradient(to bottom,rgba(0,0,0,.1) 0 var(--sl-dark,1px),transparent var(--sl-dark,1px) var(--sl-period,3px)),var(--grad);
  background-size:100% 100%,300% 100%}
@keyframes crt-roll{from{background-position:0 -40%}to{background-position:0 140%}}
@keyframes crt-flicker{0%,100%{opacity:1}8%{opacity:.85}9%{opacity:1}41%{opacity:.92}42%{opacity:1}73%{opacity:.88}74%{opacity:1}}
@keyframes crt-jitter-img{0%{transform:translate(0,0) scale(1.04)}50%{transform:translate(var(--dpx,1px),calc(-1*var(--dpx,1px))) scale(1.04)}100%{transform:translate(calc(-1*var(--dpx,1px)),var(--dpx,1px)) scale(1.04)}}
@keyframes crt-on{0%{filter:brightness(2.2) contrast(.6)}18%{filter:brightness(1.5) contrast(1.2)}100%{filter:none}}
@media (prefers-reduced-motion: reduce){
  .crt:hover::before,.crt:hover::after,.crt:hover,.crt:hover img,.crt:hover video,.crt:focus-visible::before,.crt:focus-visible::after,.crt:focus-visible,.crt:focus-visible img,.crt:focus-visible video{animation:none}
}
@media (prefers-reduced-motion: reduce){.prose h1,.top nav a{animation:none}.top nav a{background:var(--purple)}}

/* the justified gallery (Illustrations): rows of equal height, each image at its own shape; a lone or last image
   does not stretch past a row's natural height (the ::after spacer soaks up the rest) */
.prose .gallery{display:flex;flex-wrap:wrap;gap:12px;width:100%;margin:14px 0 8px}
.prose .gallery::after{content:"";flex-grow:999}
.prose .gallery figure{margin:0;flex-grow:var(--r);flex-basis:calc(var(--r) * 230px);background:none;border:0}
.prose .gallery figure>a{display:block;border-left:2px solid var(--purple);border-right:2px solid var(--teal);background:var(--veil);
  transition:transform .25s,box-shadow .25s}
.prose .gallery figure>a:hover,.prose .gallery figure>a:focus-visible{transform:translateY(-2px);box-shadow:0 0 14px rgba(180,140,255,.5),0 0 34px rgba(95,227,211,.3);outline:none}
.prose .gallery img{display:block;width:100%;height:auto;aspect-ratio:var(--r);object-fit:cover}
.prose .gallery figcaption{padding:6px 2px 0;font-size:13px;line-height:1.4}
@media (max-width:600px){.prose .gallery figure{flex-basis:calc(var(--r) * 150px)}}
.prose .gallery.single figure{flex-basis:100%}
.prose .gallery.process{gap:8px;margin:8px 0 4px}
.prose .gallery.process figure{flex-grow:0;flex-basis:calc(var(--r) * 110px)}
.prose .gallery.single::after{content:none}
/* the viewer GALLERY opens */
dialog.viewer{max-width:none;max-height:none;width:100vw;height:100vh;margin:0;padding:0;border:0;background:rgba(8,5,20,.94);color:var(--ink)}
dialog.viewer::backdrop{background:rgba(8,5,20,.94)}
dialog.viewer figure{margin:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:48px 64px}
dialog.viewer img{max-width:100%;max-height:calc(100% - 40px);object-fit:contain;box-shadow:0 0 40px rgba(180,140,255,.25)}
dialog.viewer figcaption{font-family:var(--mono);font-size:14px;letter-spacing:.04em;color:var(--ink-dim)}
dialog.viewer figcaption a{color:var(--teal)}
dialog.viewer button{position:absolute;background:none;border:0;color:var(--ink);font-size:44px;line-height:1;cursor:pointer;padding:8px 14px}
dialog.viewer button:hover,dialog.viewer button:focus-visible{color:var(--teal);outline:none}
dialog.viewer .x{top:8px;right:12px}
dialog.viewer .prev{left:8px;top:50%;transform:translateY(-50%)}
dialog.viewer .next{right:8px;top:50%;transform:translateY(-50%)}
/* A game's work page opens on a magazine spread (spread_html in site-build.py), after the 2022 portfolio's game
   pages: a banner strip with a slanted tag, a tightly gutted collage beside the text column (TITLE | YEAR is the
   page's h1). A game with one still gets a compact spread. The whole page runs 1040 wide:
   the article below continues in the same language (.mg). */
main.prose.work.has-spread{max-width:1040px;width:100%}
.spread{position:relative;display:flex;flex-direction:column;gap:8px;width:100%;margin:0 0 22px}
.sp-banner{position:relative;display:block;overflow:hidden;width:100%;aspect-ratio:10/3;max-height:300px;background:var(--void);
  border-left:2px solid var(--purple);border-right:2px solid var(--teal)}
.sp-banner::after{opacity:0}
.sp-banner img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.9);transition:filter .4s}
.sp-banner:hover img{filter:saturate(1.15)}
.sp-banner.fit img{position:relative;object-fit:contain}
.sp-banner.fit img.bg{position:absolute;inset:-30px;width:calc(100% + 60px);height:calc(100% + 60px);object-fit:cover;filter:blur(22px) brightness(.55) saturate(1.2)}
/* the gradient rule under the banner, drifting like the nav buttons */
.spread.banner .sp-body{position:relative;padding-top:6px}
.spread.banner .sp-body::before{content:"";position:absolute;left:0;right:0;top:-6px;height:2px;background:var(--grad);background-size:300% 100%;
  animation:shift 6s linear infinite;box-shadow:0 0 12px rgba(180,140,255,.55)}
/* the tag: a parallelogram in the gradient, two slanted stripes after it, on its own line above the banner */
.sp-tag{position:relative;align-self:flex-start;display:flex;height:clamp(28px,3.4vw,38px);margin:0 0 6px;pointer-events:none;
  filter:drop-shadow(0 0 8px rgba(180,140,255,.6)) drop-shadow(0 4px 10px rgba(0,0,0,.55))}
.sp-tag b,.top nav a.tag b{display:flex;align-items:center;padding:0 clamp(26px,3vw,40px) 0 clamp(14px,2vw,24px);font-family:var(--mono);font-weight:700;
  font-size:clamp(13px,1.6vw,17px);letter-spacing:.16em;text-transform:uppercase;color:#120722;text-shadow:none!important;
  background:var(--grad);background-size:300% 100%;animation:shift 6s linear infinite;
  clip-path:polygon(0 0,100% 0,calc(100% - 16px) 100%,0 100%)}
.sp-tag i,.top nav a.tag i{width:24px;margin-left:-10px;clip-path:polygon(16px 0,24px 0,8px 100%,0 100%);background:var(--pink)}
.sp-tag i+i,.top nav a.tag i+i{background:var(--teal)}
/* the header's About button wears the same tag (Jared, 2026-10-30) */
.top nav a.tag{display:flex;height:34px;padding:0;border-radius:0;background:none;animation:none;box-shadow:none;
  filter:drop-shadow(0 0 8px rgba(180,140,255,.6)) drop-shadow(0 4px 10px rgba(0,0,0,.55));transition:filter .2s}
.top nav a.tag b{font-size:14px}
/* mirrored, since it sits at the right: stripes first, the label's slant facing them */
.top nav a.tag{flex-direction:row-reverse}
.top nav a.tag b{padding:0 18px 0 30px;clip-path:polygon(0 0,100% 0,100% 100%,16px 100%)}
.top nav a.tag i{margin-left:0;margin-right:-10px;clip-path:polygon(0 0,8px 0,24px 100%,16px 100%)}
.top nav a.tag:hover,.top nav a.tag:focus-visible{filter:drop-shadow(0 0 14px rgba(180,140,255,.95)) drop-shadow(0 4px 10px rgba(0,0,0,.55))}
.top nav a.tag[aria-current]{filter:drop-shadow(0 0 3px var(--teal)) drop-shadow(0 0 10px rgba(112,210,220,.7))}
@media (max-width:480px){.top nav a.tag{height:30px}.top nav a.tag b{font-size:12px}}
.sp-body{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:8px;align-items:start}
.spread.compact .sp-body{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.sp-shots{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.prose .sp-shots figure,.prose .sp-text figure{margin:0;background:none;border:0}
.sp-shots .sp-fig.big{grid-column:1/-1}
.prose .sp-shots .sp-fig.whole img{display:block;width:auto;max-width:100%;max-height:520px;height:auto;aspect-ratio:auto;margin:0 auto;
  border-left:2px solid var(--purple);border-right:2px solid var(--teal)}
/* a hero: the opening piece whole and full width (Digital Art), the words in two columns under it */
.prose .sp-hero{margin:0;background:none;border:0}
.prose .sp-hero img{display:block;width:100%;height:auto;aspect-ratio:auto;border-left:2px solid var(--purple);border-right:2px solid var(--teal)}
.spread.words .sp-body{grid-template-columns:minmax(0,1fr) minmax(0,2fr);margin-top:14px}
.spread.words .sp-text{padding:6px 22px 0 0}
.prose .sp-words p{font-size:17px;line-height:1.65;margin:6px 0 16px}
.sp-shots .sp-fig>img,.sp-side{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--veil);
  border-left:2px solid var(--purple);border-right:2px solid var(--teal)}
.sp-text{padding:18px 6px 0 22px}
.spread.compact .sp-text{padding-top:4px}
.prose .sp-text h1{margin:0 0 10px;padding:0;font-family:var(--serif);font-weight:700;font-size:clamp(22px,2.6vw,30px);line-height:1.2;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);text-shadow:0 0 18px rgba(180,140,255,.35);animation:none}
.sp-text h1 .bar{margin:0 .45em;color:var(--purple);font-weight:400}
.sp-text h1 .yr{color:var(--teal)}
.prose .sp-text .sp-role{font-style:italic;font-weight:500;font-size:16px;line-height:1.45;color:var(--purple);margin:0 0 6px}
.prose .sp-text .sp-meta{font-family:var(--mono);font-size:14px;letter-spacing:.03em;line-height:1.5;color:var(--ink-dim);margin:0 0 16px}
.prose .sp-text .sp-line{font-style:italic;color:var(--ink-dim)}
.prose .sp-text p{font-size:16px;line-height:1.62;margin:0 0 16px}
.sp-side{margin-top:8px}
@media (max-width:700px){
  .sp-banner{aspect-ratio:12/5}
  .sp-body,.spread.compact .sp-body{grid-template-columns:minmax(0,1fr)}
  .spread.full .sp-text{order:-1}  /* banner, then the words, then the collage */
  .spread.words .sp-body{grid-template-columns:minmax(0,1fr)}
  /* phones: a band's rows may wrap, so no picture shrinks to a sliver */
  .mg-jrow{flex-wrap:wrap}
  .mg-jrow{justify-content:center}
  .mg-jrow figure{flex-basis:calc(var(--g) * 150px)!important;max-width:calc(var(--g) * 240px)}
  .sp-text,.spread.compact .sp-text{padding:14px 2px 0}
  .spread.full .sp-text{padding:14px 2px 10px}
  .sp-side{margin-top:4px}
}
@media (prefers-reduced-motion: reduce){
  .sp-tag b,.top nav a.tag b,.spread.banner .sp-body::before{animation:none}
}
/* The rest of a game's page (mag_html): rows of a collage (2/3) beside a text column (1/3), the side alternating;
   collage bands and full-width features where there are no words; tight 8px gutters as in the spread. */
.mg{display:flex;flex-direction:column;gap:clamp(36px,5vw,64px);width:100%;margin:clamp(30px,4vw,52px) 0 10px}
.prose .mg figure{margin:0;background:none;border:0}
.mg-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:8px;align-items:start}
.mg-row.flip{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.mg-row.flip .mg-text{order:-1}
.mg-collage,.mg-band{display:flex;flex-direction:column;gap:8px;min-width:0}
.mg-imgs{display:grid;grid-template-columns:repeat(var(--n,1),minmax(0,1fr));gap:8px}
.mg-imgs.n2{--n:2}.mg-imgs.n3{--n:3}
.prose .mg-imgs img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--veil);
  border-left:2px solid var(--purple);border-right:2px solid var(--teal)}
.prose .mg-fig.r54 .mg-imgs img{aspect-ratio:5/4}
.prose .mg-fig.r32 .mg-imgs img{aspect-ratio:3/2}
.prose .mg-fig.square .mg-imgs img{aspect-ratio:1/1}
.prose .mg-fig.natural .mg-imgs img{aspect-ratio:auto}
/* a collage band (mag_justified): rows of whole pictures at one height, each at its own shape */
.mg-jrow{display:flex;gap:8px;width:100%;margin:0 auto;align-items:flex-start}
.mg-jrow figure{min-width:0}
.mg-jimgs{display:flex;gap:8px}
.mg-jimgs>span{display:block;min-width:0}
.mg-jimgs a{display:block;transition:box-shadow .25s}
.mg-jimgs a:hover,.mg-jimgs a:focus-visible{box-shadow:0 0 14px rgba(180,140,255,.5),0 0 34px rgba(95,227,211,.3);outline:none}
.prose .mg-jimgs img{display:block;width:100%;height:auto;object-fit:cover;background:var(--veil);
  border-left:2px solid var(--purple);border-right:2px solid var(--teal)}
/* a lone wide picture, full width and whole */
.prose .mg-wide img{display:block;width:100%;height:auto;aspect-ratio:auto;border-left:2px solid var(--purple);border-right:2px solid var(--teal)}
/* sprites and small marks at their own size, never enlarged */
.mg-natives{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:22px 34px}
.prose .mg-natives figure{width:auto;max-width:100%}
.prose .mg-natives figure img{display:block;width:auto;max-width:100%;height:auto;aspect-ratio:auto;margin:0 auto}
.prose .mg-natives figure.centred img{max-width:min(100%,325px)}
/* captions: small caps labels, a gradient tick before them */
.prose .mg-label{display:flex;align-items:baseline;gap:10px;padding:8px 2px 0;font-family:var(--mono);font-size:12px;line-height:1.5;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.prose .mg-label::before{content:"";flex:none;width:18px;height:2px;align-self:center;background:var(--grad);background-size:300% 100%}
.mg-text{padding:6px 6px 0 22px}
.mg-row.flip .mg-text{padding:6px 22px 0 6px}
.prose .mg-text p{font-size:16px;line-height:1.62;margin:0 0 16px}
.prose .mg-text h2{margin:0 0 12px;font-size:clamp(20px,2.3vw,25px);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.prose .mg-text .def{font-size:18px;line-height:1.55;max-width:none}
/* words with no picture near them: a pull-quote across the page */
.mg-quote{position:relative;padding:4px 0 4px 26px;columns:2 300px;column-gap:34px}
.mg-quote::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad);background-size:100% 300%}
.prose .mg-quote p{font-size:clamp(17px,2vw,20px);line-height:1.6;margin:0 0 16px;break-inside:avoid}
/* a feature: the picture whole over a blurred copy of itself, full width */
.mg-stage{position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden;width:100%;height:clamp(220px,46vw,520px);
  background:var(--void);border-left:2px solid var(--purple);border-right:2px solid var(--teal)}
.prose .mg-stage img.bg{position:absolute;inset:-30px;width:calc(100% + 60px);height:calc(100% + 60px);object-fit:cover;aspect-ratio:auto;
  filter:blur(24px) brightness(.5) saturate(1.2)}
.prose .mg-stage .fg{position:relative;display:block;max-width:100%;max-height:100%;width:auto;height:100%;aspect-ratio:auto;object-fit:contain;
  box-shadow:0 0 0 1px var(--line),0 18px 50px rgba(0,0,0,.55),0 0 34px rgba(180,140,255,.22)}
.prose .mg-feature.motion .mg-stage{height:clamp(200px,36vw,400px)}
.prose .mg-stage img.bg{margin:0;max-width:none}
.prose .mg-stage .fg video{display:block;width:auto;height:100%;max-width:100%;object-fit:contain;background:var(--void)}
/* Being's dev loops, tiled four across; the film full width */
.prose .mg-loops{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0}
.prose .mg-loops figure.motion video{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-left:2px solid var(--purple);border-right:2px solid var(--teal)}
.prose .mg-film{border-left:2px solid var(--purple);border-right:2px solid var(--teal)}
/* Entroversal's doors as the row's collage */
.mg-row .doors{margin:0;gap:8px}
@media (max-width:700px){
  .mg-row,.mg-row.flip{grid-template-columns:minmax(0,1fr)}
  .mg-row .mg-text,.mg-row.flip .mg-text{order:-1;padding:0 2px 6px}
  .prose .mg-loops{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mg-stage{height:auto;aspect-ratio:4/3}
  .prose .mg-label{font-size:11px;letter-spacing:.1em}
}