/* =====================================================================
   A.M. OVERTONE — unified switchable experience
   One site, three backdrops (Sphere / Map / TV). Built on tokens.css +
   resonance.css (sections, nav, tiles, player) + constellation-hero.css (map).
   ===================================================================== */

/* ---------- switchable fixed backdrops ---------- */
.backdrops { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
#bgSphere { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.bg-layer { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease; }
body[data-mode="sphere"] #bgSphere { opacity: 1; }
body[data-mode="map"] #bgMap { opacity: 1; visibility: visible; }
body[data-mode="tv"] #bgCRT { opacity: 1; visibility: visible; }

/* ---------- NOIR mode: immersive build in a full-screen iframe; shell nav stays on top ---------- */
#bgNoir { border: 0; width: 100%; height: 100%; }
/* keep the scrollbar TRACK (overflow-y:scroll, inherited from body) so the fixed nav stays
   pixel-aligned with the other modes; nothing scrolls here since main/footer are hidden */
body[data-mode="noir"] { overflow-x: hidden; }
body[data-mode="noir"] .backdrops { z-index: 40; pointer-events: auto; } /* lift the iframe above main (z10), below nav (z50) */
body[data-mode="noir"] #bgNoir { opacity: 1; visibility: visible; pointer-events: auto; }
body[data-mode="noir"] main,
body[data-mode="noir"] footer,
body[data-mode="noir"] .ambient,
body[data-mode="noir"] .fx-scan { display: none; }
/* keep the full shared shell nav on top in Noir too (brand + section links +
   mode switcher + Play) — the immersive build's own nav is hidden via ?embed=1 */

/* map backdrop reuses .crings/.csweep/.cnode from constellation-hero.css; center it */
#bgMap .cfield { position: absolute; left: 50%; top: 50%; }
#bgMap .crings, #bgMap .csweep { left: 50%; top: 50%; }

/* Map mode: float the shared hero title to the top so it clears the central radar. */
body[data-mode="map"] .mhero { justify-content: flex-start; padding-top: clamp(86px, 14vh, 150px); }
body[data-mode="map"] .mhero .cta-row,
body[data-mode="map"] .mhero .scrollhint,
body[data-mode="map"] .mhero .kick,
body[data-mode="map"] .mhero .cscrim { display: none; }
/* Map: "Radar mode" becomes an eyebrow stacked ABOVE the tagline, both flush-left in one
   column (flex order lifts the note above the .sub without touching DOM order). */
body[data-mode="map"] .mhero .inner { display: flex; flex-direction: column; align-items: flex-start; }
body[data-mode="map"] .mhero .sub { order: 0; text-align: left; max-width: 560px; margin: 0; }
body[data-mode="map"] .mhero .mode-note { order: -1; text-align: left; max-width: 560px; margin: 0 0 10px; }

/* Sphere: hide the brand kick + "Resonance" title but KEEP their layout space
   (visibility, not display) so the tagline/CTAs/note don't shift. Note → white. */
body[data-mode="sphere"] .mhero .kick,
body[data-mode="sphere"] .mhero .title { visibility: hidden; }
body[data-mode="sphere"] .mode-note { color: #fff; }

/* TV: hide the brand kick + "Transmission" title but KEEP their layout space
   (visibility, not display) so the tagline/CTAs/note don't shift. */
body[data-mode="tv"] .mhero .kick,
body[data-mode="tv"] .mhero .title { visibility: hidden; }

/* Interactive constellation layer: sits ABOVE the content (z40) so dots are really
   hoverable and the tooltip/legend are visible; pointer-through except the dots; shown
   only in map mode; fades out as you scroll past the hero so dots don't float over sections. */
.cmapui { position: fixed; inset: 0; z-index: 40; pointer-events: none; display: none; transition: opacity .4s ease; }
body[data-mode="map"] .cmapui { display: block; }
.cmapui .cnode { pointer-events: auto; }
.cmapui.faded { opacity: 0; pointer-events: none; }

/* TV backdrop is the CRT glitch kit (crt-glitch.css/js), mounted on #bgCRT by
   merge.js. Tune its look to match the prior design. */
#bgCRT.crtfx {
  --crtfx-scan-opacity: .5;
  --crtfx-scan-gap: 4px;
  --crtfx-noise-opacity: .06;
  --crtfx-vignette: .55;
}
/* TV: the channel imagery is bright, so drop a 50% black scrim between the z0 backdrop
   and the z10 content — darkens the background only, text on top stays fully readable. */
body[data-mode="tv"]::before { content: ''; position: fixed; inset: 0; z-index: 5;
  background: rgba(0,0,0,.5); pointer-events: none; }
/* TV: rolling VHS tracking band — the signature bright bar sweeping down the screen.
   Ported from the original A.M. TV (.fx-scan .roll + vhsRoll); TV-mode only. */
.tvroll { position: fixed; left: 0; right: 0; top: -14%; height: 90px; z-index: 12; display: none;
  pointer-events: none; mix-blend-mode: screen; filter: blur(1px);
  background: linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,0)); }
body[data-mode="tv"] .tvroll { display: block; animation: vhsRoll 7s linear infinite; }
@keyframes vhsRoll { 0% { top: -14%; } 100% { top: 114%; } }
@media (prefers-reduced-motion: reduce){ body[data-mode="tv"] .tvroll { animation: none; } }

/* ---------- mode switcher (segmented) ---------- */
.modesw { display: inline-flex; gap: 3px; padding: 4px; border: 1px solid var(--hairline); border-radius: 999px;
  background: rgba(10,10,20,.45); backdrop-filter: blur(8px); }
.modesw button { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); background: transparent; border: 0; border-radius: 999px; padding: 7px 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; transition: color .2s, background .2s; }
.modesw button .ic { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-soft); flex: none; }
.modesw button:hover { color: var(--ink); }
.modesw button.on { color: var(--void); background: var(--ink); }
/* Sphere dot is bright teal-green (--teal-hi) — great on the dark unselected button, but
   invisible on the light selected background. Swap to a darker AA green (~4.7:1 on --ink)
   only when selected; the unselected state keeps the inline --teal-hi. (!important beats
   the inline style on the dot.) */
.modesw button[data-mode="sphere"].on .ic { background: #067a55 !important; }
@media (max-width: 880px){ .modesw button .lbl { display: none; } .modesw button { padding: 8px; } .modesw button .ic { opacity: 1; } }

/* nav right cluster */
.nav .right { display: flex; align-items: center; gap: clamp(10px,1.6vw,18px); }
@media (max-width: 720px){
  .navtoggle { display: inline-flex; }
  /* section links become a drop-down drawer under the bar (closed by default) */
  .nav .links { display: flex; flex-direction: column; gap: 4px;
    position: absolute; top: 100%; right: clamp(18px,3.4vw,44px);
    min-width: 200px; padding: 12px;
    border: 1px solid var(--hairline-2); border-radius: 14px;
    background: rgba(6,8,14,.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 18px 50px rgba(0,0,0,.55);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .22s var(--ease-out), transform .22s var(--ease-out), visibility .22s; }
  .nav.menu-open .links { opacity: 1; visibility: visible; transform: none; }
  .nav .links a { font-size: 14px; letter-spacing: .14em; padding: 11px 12px; border-radius: 8px; }
  .nav .links a::after { display: none; }
  .nav .links a:hover, .nav .links a.on { background: rgba(255,255,255,.06); }
}

/* hero foreground (shared across modes) */
.mhero { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: clamp(96px,14vh,150px) clamp(20px,6vw,90px); position: relative; z-index: 10; }
.mhero .inner { position: relative; }
.mhero .cscrim { position: absolute; left: 50%; top: 50%; width: min(900px,96vw); height: 500px; transform: translate(-50%,-50%);
  border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(4,4,10,.78), rgba(4,4,10,.42) 52%, transparent 80%); filter: blur(22px); }
.mhero .kick, .mhero .title, .mhero .sub, .mhero .cta-row, .mhero .scrollhint { position: relative; }
.mhero .kick { margin: 0 0 16px; color: #fff; text-shadow: 0 1px 10px rgba(4,4,10,.9); }
.mhero .title { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; line-height: .9; margin: 0;
  font-size: clamp(40px,8vw,118px);
  background: linear-gradient(100deg, var(--teal-hi) 0%, #5fb0ff 36%, #c46bff 66%, var(--coral-hi) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mhero .sub { max-width: 560px; margin: 24px auto 0; color: var(--ink); font-size: clamp(14px,1.6vw,18px); line-height: 1.65;
  text-shadow: 0 1px 12px rgba(4,4,10,.92); }
.mhero .cta-row { margin-top: 32px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.mhero .scrollhint { margin-top: clamp(36px,6vh,64px); font-family: var(--font-mono); font-size: 11px; letter-spacing: .3em;
  text-transform: uppercase; color: #fff; display: inline-flex; align-items: center; gap: 10px; }
.mhero .scrollhint .arrow { width: 1px; height: 28px; background: linear-gradient(var(--teal), transparent); animation: scrolldrop 1.8s var(--ease-out) infinite; }
.mode-note { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); margin-top: 18px; }

/* ---------- featured real-audio track player (Signal) ---------- */
.trackp { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(16px,2.4vw,26px); align-items: center;
  border: 1px solid var(--hairline); border-radius: 18px; padding: clamp(16px,2.2vw,26px); background: rgba(11,11,22,.6);
  backdrop-filter: blur(8px); margin-bottom: clamp(24px,3.4vw,40px); }
@media (max-width: 620px){ .trackp { grid-template-columns: auto 1fr; } .trackp .tp-side { grid-column: 1 / -1; justify-content: space-between; } }
.tp-play { width: 64px; height: 64px; border-radius: 999px; border: 1px solid transparent; color: #fff;
  background: rgba(25,227,194,.06); cursor: pointer; display: grid; place-items: center; flex: none;
  transition: transform .3s var(--ease-spring), box-shadow .3s, background .3s; position: relative; }
.tp-play:hover { transform: scale(1.06); box-shadow: var(--glow-teal); }
.tp-play:focus-visible { outline: 2px solid var(--teal-hi); outline-offset: 3px; }
.tp-play svg { width: 26px; height: 26px; }
.tp-play .ring { position: absolute; inset: -6px; border-radius: 999px; border: 1px solid #79EEDF; opacity: 0; }
.tp-play.playing .ring { animation: rpulse 1.8s var(--ease-out) infinite; }

.tp-main { min-width: 0; }
.tp-top { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.tp-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(20px,2.4vw,28px); letter-spacing: -.01em; }
.tp-meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  background: linear-gradient(100deg, #79EEDF, #76AFF5); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.tp-bars { display: flex; align-items: flex-end; gap: 2px; height: 30px; margin-bottom: 10px; }
.tp-bars i { flex: 1; min-width: 2px; height: 4px; border-radius: 2px; background: linear-gradient(180deg, #76AFF5, #79EEDF); opacity: .85; transition: height .07s linear, background .2s; }
.tp-seek { position: relative; height: 8px; border-radius: 999px; background: rgba(180,200,255,.12); cursor: pointer; overflow: visible; }
.tp-seek:focus-visible { outline: 2px solid var(--teal-hi); outline-offset: 3px; }
.tp-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #79EEDF, #76AFF5); }
.tp-head { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; border-radius: 999px; background: var(--ink);
  transform: translate(-50%,-50%); box-shadow: 0 0 0 3px rgba(25,227,194,.35); transition: left .05s linear; }
.tp-times { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .06em; color: var(--ink-soft); }
.tp-side { display: flex; align-items: center; gap: 10px; flex: none; }
.tp-ic { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  color: var(--ink-faint); background: rgba(10,10,20,.4); border: 1px solid var(--hairline); border-radius: 999px;
  padding: 8px 12px; transition: all .2s; }
.tp-ic:hover { color: var(--ink); border-color: var(--hairline-2); }
.tp-ic[aria-pressed="true"] { color: var(--void); background: linear-gradient(100deg, #79EEDF, #76AFF5); border-color: transparent; }
.tp-ic:focus-visible { outline: 2px solid var(--teal-hi); outline-offset: 2px; }

/* ---------- Music: clickable album cards + uncropped covers ---------- */
/* covers are 1:1 and ArtStation art is square → square thumb = no crop; film posters are 16:9 */
#music .tile .thumb, #art .tile .thumb { aspect-ratio: 1; }
#film .tile .thumb { aspect-ratio: 16 / 9; }

/* ---------- Art: four labeled subsections (3D / AI / Sketches / Animation) ---------- */
.artsub { margin-top: clamp(30px,4.5vw,52px); }
.artsub:first-of-type { margin-top: 0; }
/* teal pill subsection label (reuses the tile .badge look as a standalone heading) */
.artsub .sublabel { display: inline-block; margin: 0 0 16px; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; line-height: 1;
  padding: 7px 14px; border-radius: 999px; color: var(--void);
  background: linear-gradient(100deg, #79EEDF, #76AFF5);
  box-shadow: var(--glow-teal); }
/* cinematic animation reels read better widescreen than square-cropped */
#art .tile[data-mp4] .thumb { aspect-ratio: 16 / 9; }
#art .tile[data-mp4] { cursor: pointer; }
#art .tile[data-img] { cursor: pointer; }
#art .tile:focus-visible { outline: 2px solid var(--teal-hi); outline-offset: 3px; }
#albumGrid .tile { cursor: pointer; }
#albumGrid .tile:focus-visible { outline: 2px solid var(--teal-hi); outline-offset: 3px; }
/* selected album: soft blue glow (the teal→blue gradient ring comes from the shared .tile::before) */
#albumGrid .tile[aria-pressed="true"] { border-color: transparent; box-shadow: 0 0 24px rgba(118,175,245,.30); }
/* explicit "go to Spotify" affordance — appears on hover/focus, top-right of the cover */
.tile .sp { position: absolute; top: 10px; right: 10px; z-index: 3; width: 30px; height: 30px;
  display: grid; place-items: center; border-radius: 999px; color: var(--ink);
  background: rgba(8,8,15,.6); border: 1px solid var(--hairline-2); backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .25s, color .2s, background .2s; }
.tile:hover .sp, .tile:focus-within .sp { opacity: 1; transform: none; }
.tile .sp:hover { color: #1db954; background: rgba(8,8,15,.85); }
.tile .sp:focus-visible { opacity: 1; outline: 2px solid var(--teal-hi); outline-offset: 2px; }

/* ---------- Shared lightbox (Film video embeds + Art images) ---------- */
.lb { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: clamp(16px,4vw,40px);
  background: rgba(5,5,11,.9); backdrop-filter: blur(8px); }
.lb[hidden] { display: none; }
.lb-card { position: relative; width: 100%; max-width: 960px; }
.lb-body { border: 1px solid var(--hairline-2); border-radius: 16px; overflow: hidden; background: rgba(10,10,20,.6); }
.lb.video .lb-body { aspect-ratio: 16 / 9; }
.lb-body iframe { display: block; width: 100%; height: 100%; border: 0; }
.lb-body video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.lb.gallery .lb-body video { height: auto; max-height: 82vh; } /* carousel video slide sizes like an image (no fixed 16:9) */
.lb-body img { display: block; width: 100%; max-height: 82vh; object-fit: contain; }
.lb-close { position: absolute; top: 10px; right: 10px; z-index: 3; width: 40px; height: 40px; border-radius: 999px;
  display: grid; place-items: center; font-size: 15px; cursor: pointer; color: var(--ink);
  background: rgba(8,8,15,.8); border: 1px solid var(--hairline-2); backdrop-filter: blur(6px); transition: background .2s, transform .2s; }
.lb-close:hover { background: rgba(8,8,15,.96); transform: scale(1.06); }
.lb-close:focus-visible { outline: 2px solid var(--teal-hi); outline-offset: 2px; }
.lb-ext { display: inline-flex; margin-top: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none;
  background: linear-gradient(100deg, #79EEDF, #76AFF5); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #76AFF5; }
.lb-ext:hover { filter: brightness(1.15); }
/* carousel: prev/next arrows + caption/counter (shown only for multi-frame galleries) */
.lb-nav { display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px;
  border-radius: 999px; place-items: center; font-size: 26px; line-height: 1; cursor: pointer; color: var(--ink);
  background: rgba(8,8,15,.8); border: 1px solid var(--hairline-2); backdrop-filter: blur(6px); transition: background .2s, transform .2s; }
.lb.multi .lb-nav { display: grid; }
.lb-prev { left: 10px; } .lb-next { right: 10px; }
.lb-nav:hover { background: rgba(8,8,15,.96); transform: translateY(-50%) scale(1.07); }
.lb-nav:focus-visible { outline: 2px solid var(--teal-hi); outline-offset: 2px; }
.lb-cap { margin-top: 12px; text-align: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft); }
.lb-cap:empty { display: none; }

/* ---- Decrypted-transmission reel (video backdrop + decoding terminal panel) ---- */
.subnote { color: var(--ink-soft); font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; margin: -6px 0 16px; }
.subnote b { color: #fff; font-weight: 600; }
.lb.is-reel .lb-body { aspect-ratio: 16 / 9; background: #000; position: relative; } /* contain .reel to the 16/9 box so it can't spill over the caption below */
.reel { position: absolute; inset: 0; }
.reel-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.reel-scan { position: absolute; inset: 0; pointer-events: none; z-index: 1; mix-blend-mode: overlay; opacity: .55;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px); animation: reelGlitch 7s steps(1) infinite; }
.reel-panel { position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; width: min(600px, 68%);
  display: flex; flex-direction: column; gap: 8px; padding: clamp(20px,3vw,34px); cursor: pointer; overflow: hidden;
  padding-left: clamp(70px, 7vw, 92px); /* clear the ‹ prev arrow (left:10px, ~46px wide) so it never overlaps the text */
  background: linear-gradient(90deg, rgba(4,6,12,.94) 0%, rgba(4,6,12,.80) 70%, rgba(4,6,12,0) 100%);
  font-family: var(--font-mono); color: #cdd6ea; }
.reel-status { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: #79EEDF; }
.reel-status .reel-dots { animation: reelDots 1.1s steps(4) infinite; }
.reel-num { font-size: 10px; letter-spacing: .26em; color: var(--ink-faint); }
.reel-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px,3.2vw,36px); line-height: 1.02; margin: 6px 0 8px; min-height: 1.05em;
  background: linear-gradient(100deg, #79EEDF, #76AFF5); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.reel-msg { font-size: 13px; line-height: 1.7; white-space: pre-wrap; color: #d7deef; overflow-y: auto; padding-right: 8px; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.reel-msg.typing::after { content: '▮'; margin-left: 1px; color: #79EEDF; animation: reelCaret 1s steps(1) infinite; }
.reel-spotify { margin-top: 12px; align-self: flex-start; flex: none; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; border-bottom: 1px solid #76AFF5;
  background: linear-gradient(100deg, #79EEDF, #76AFF5); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #76AFF5; }
.reel-spotify:hover { filter: brightness(1.15); }
@keyframes reelCaret { 50% { opacity: 0; } }
@keyframes reelDots { 0%{opacity:.3} 50%{opacity:1} 100%{opacity:.3} }
@keyframes reelGlitch { 0%,96%,100% { transform: translateX(0); opacity:.55; } 97% { transform: translateX(2px); opacity:.8; } 98% { transform: translateX(-2px); } 99% { transform: translateX(1px); } }
@media (max-width: 680px){ .reel-panel { width: 100%; background: linear-gradient(90deg, rgba(4,6,12,.92), rgba(4,6,12,.84)); } }
/* SIGNAL LOST outro: VHS/RGB-split glitch burst, then a held "lost" state (click to re-decode) */
.reel.glitching .reel-panel { animation: reelLost 1.1s steps(2,end) 1; }
.reel.glitching .reel-scan { opacity: .92; }
@keyframes reelLost {
  0%   { transform: translateX(0);                 text-shadow: 2px 0 #ff3b6b, -2px 0 #3bd8ff; }
  15%  { transform: translateX(-5px) skewX(3deg);  text-shadow: -4px 0 #ff3b6b, 4px 0 #3bd8ff; clip-path: inset(6% 0 46% 0); }
  30%  { transform: translateX(6px);               text-shadow: 4px 0 #ff3b6b, -4px 0 #3bd8ff; clip-path: inset(52% 0 8% 0); }
  45%  { transform: translateX(-3px) skewX(-2deg); text-shadow: -3px 0 #3bd8ff, 3px 0 #ff3b6b; clip-path: inset(28% 0 30% 0); }
  60%  { transform: translateX(2px);               clip-path: none; }
  100% { transform: none;                          text-shadow: none; }
}
.reel.lost .reel-status { color: var(--coral-hi); }
.reel.lost .reel-msg, .reel.lost .reel-title { opacity: .82; }
.reel-status .reel-redo { color: var(--ink-soft); letter-spacing: .14em; }
/* 3s after SIGNAL LOST: collapse to a minimal HUD (top 2 lines + Spotify) and reveal the reel video */
.reel.minimized .reel-title, .reel.minimized .reel-msg, .reel.minimized .reel-num { opacity: 0 !important; pointer-events: none; transition: opacity 2s ease; }
.reel.minimized .reel-panel { background: linear-gradient(90deg, rgba(4,6,12,.42), rgba(4,6,12,0) 55%); transition: background 2s ease; }
.reel.minimized .reel-vid { opacity: .92; transition: opacity 2s ease; }
.reel.minimized .reel-status, .reel.minimized .reel-spotify { text-shadow: 0 1px 10px rgba(0,0,0,.95), 0 0 2px rgba(0,0,0,.9); }
@media (prefers-reduced-motion: reduce){ .reel.minimized .reel-title, .reel.minimized .reel-msg, .reel.minimized .reel-num, .reel.minimized .reel-panel, .reel.minimized .reel-vid { transition: none; } }
@media (prefers-reduced-motion: reduce){ .reel-scan { animation: none; } .reel.glitching .reel-panel { animation: none; } }

/* two-up grid (AI Art set tiles) */
.grid.c2 { grid-template-columns: repeat(2,1fr); }
@media (max-width: 560px){ .grid.c2 { grid-template-columns: 1fr; } }

/* ---------- Album rail: half-size thumbnails → 5 across (two even rows of 10); clicking scrolls back to the featured card ---------- */
#albumGrid { grid-template-columns: repeat(5, 1fr); gap: clamp(8px, 1vw, 14px); }
#albumGrid .meta { padding: 9px 10px 11px; padding-right: 44px; } /* room for the corner year pill on the compact tiles */
#albumGrid .meta .t { font-size: 13px; line-height: 1.15; }
#albumGrid .meta .d { font-size: 10px; }
#albumGrid .badge { right: 9px; bottom: 9px; background: transparent; border: 1px solid transparent; color: #fff; padding: 2px 6px; } /* Music only: bright-white stroke (no fill) + white date text */
#music .feature { scroll-margin-top: 96px; } /* clear the fixed nav when jumping back up */
@media (max-width: 760px){ #albumGrid { grid-template-columns: repeat(3, 1fr); } }

/* ALL section cards (Music · Art · Film · Signal) → bright white text everywhere:
   indexes, headings, intro prose, feature labels/titles/blurbs, tile titles/subtitles,
   player + track-player labels. Only real hyperlinks (<a>) keep their accent color. */
.section .shead .idx,
.section .shead h2,
.section .shead p,
.section .feature .label,
.section .feature .name,
.section .feature .blurb,
.section .player .bar .now,
.section .tile .meta .t,
.section .tile .meta .d,
.section .prose p,
.section .prose h2,
.section .tp-title,
.section .tp-meta,
.section .tp-times,
.section .tp-ic,
#albumGrid .meta .t,
#albumGrid .meta .d { color: #fff; }

/* teal→blue gradient stroke ring for rounded pill/button outlines (transparent fill, stays rounded) */
.tp-play, .player .bar .pp2 { position: relative; }
.tp-play::before, .player .bar .pp2::before, #albumGrid .badge::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(100deg, #79EEDF, #76AFF5);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
/* Featured-player play icons use the teal→blue gradient (SVG #tbgrad) */
.tp-play svg, .player .bar .pp2 svg { fill: url(#tbgrad); }