/* her.st - text-centric, zero-JS, static.
   Catppuccin Mocha (full canonical palette) - soft surface layering,
   neon tamed to a subtle glow. Identity kept: monospace, ./filepath
   titles, $tags, glitch tear. */

:root {
  /* catppuccin mocha - full canonical palette */
  --crust:    #11111b;
  --mantle:   #181825;
  --base:     #1e1e2e;

  --surface0: #313244;
  --surface1: #45475a;
  --surface2: #585b70;
  --overlay0: #6c7086;
  --overlay1: #7f849c;
  --overlay2: #9399b2;
  --subtext0: #a6adc8;
  --subtext1: #bac2de;
  --text:     #cdd6f4;

  --rosewater:#f5e0dc;
  --flamingo: #f2cdcd;
  --pink:     #f5c2e7;
  --mauve:    #cba6f7;
  --red:      #f38ba8;
  --maroon:   #eba0ac;
  --peach:    #fab387;
  --yellow:   #f9e2af;
  --green:    #a6e3a1;
  --teal:     #94e2d5;
  --sky:      #89dceb;
  --sapphire: #74c7ec;
  --blue:     #89b4fa;
  --lavender: #b4befe;

  /* site vocabulary aliases */
  --deep: var(--mantle);   /* recessed media well / player bg */
  --dim:  var(--subtext0); /* secondary text */
  --line: var(--surface0); /* hairline border */
  --purple: var(--mauve);  /* legacy name */

  --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --prose: 42rem;
  --entry: 54rem;   /* library entry pages: wider than prose for player + files */
  --wide: 76rem;
  --gutter: clamp(1rem, 5vw, 3rem);
}

@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .16s; }

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background:
    radial-gradient(110% 70% at 50% -10%, color-mix(in srgb, var(--mauve) 7%, transparent), transparent 55%),
    radial-gradient(90% 60% at 92% 0%, color-mix(in srgb, var(--blue) 4%, transparent), transparent 50%),
    var(--base);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* soft depth vignette - tinted to crust, gentler than a flat black overlay */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none;
  background: radial-gradient(130% 120% at 50% 30%, transparent 62%, color-mix(in srgb, var(--crust) 55%, transparent) 100%);
}

/* scroll-driven reading progress */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60;
  transform: scaleX(0); transform-origin: left; background: var(--teal);
  box-shadow: 0 0 6px color-mix(in srgb, var(--teal) 55%, transparent);
  animation: prog linear both; animation-timeline: scroll(root);
}
@keyframes prog { to { transform: scaleX(1); } }
@supports not (animation-timeline: scroll()) { .progress { display: none; } }

a { color: var(--yellow); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3, h4 {
  color: var(--teal); font-weight: 700;
}
em { color: var(--mauve); font-style: italic; }
strong { color: var(--blue); }
code { font-family: var(--mono); background: var(--surface0); padding: 1px 5px; font-size: .9em; }

/* header */
body > header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--base) 80%, transparent);
  backdrop-filter: blur(9px) saturate(1.3);
  border-bottom: 1px solid var(--line);
}
body > header .row {
  max-width: var(--wide); margin: 0 auto; padding: .85rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: .92rem;
}
.brand { color: var(--yellow); font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; }
.brandlogo { display: block; height: 2.1rem; width: auto; }
.brand .cur::after { content: "_"; color: var(--teal); margin-left: 1px; animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
nav { display: flex; gap: 1.2rem; }
nav a { color: var(--dim); }
nav a:hover { color: var(--text); text-decoration: none; }

main { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }

/* persistent left rail. The container widens by exactly the rail + gap so
   the content column keeps the full --wide width (blank side margins pay
   for the rail, not the content). */
main:has(.rail) {
  max-width: calc(var(--wide) + 16rem + 2.4rem);
  display: grid; grid-template-columns: 16rem minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.4rem); align-items: start;
}
main .content { min-width: 0; }
.rail {
  position: sticky; top: 4rem; align-self: start;
  display: flex; flex-direction: column; gap: 1.3rem; padding-top: 1.4rem;
}
.rlinks { display: flex; flex-direction: column; gap: 0; }
.rlinks::before {
  content: "// nav"; color: var(--dim); font-size: .62rem;
  letter-spacing: .18em; text-transform: uppercase; padding-bottom: .5rem;
}
.rlinks .rnav {
  color: var(--dim); padding: .45rem .15rem; font-size: .84rem;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  transition: color .15s ease, padding-left .15s ease, background .15s ease;
}
.rlinks .rnav:first-of-type { border-top: 1px solid var(--line); }
.rlinks .rnav::after { content: " ->"; color: transparent; transition: color .15s ease; }
.rlinks .rnav:hover {
  color: var(--teal); padding-left: .6rem;
  background: color-mix(in srgb, var(--surface1) 50%, transparent); text-decoration: none;
}
.rlinks .rnav:hover::after { color: color-mix(in srgb, var(--teal) 60%, transparent); }
.rlinks .rnav.active { color: var(--yellow); }
.rlinks .rnav.active::before { content: "> "; color: var(--pink); }
@media (max-width: 60rem) {
  main:has(.rail) { grid-template-columns: 1fr; }
  .rail { position: static; order: -1; padding-top: 1rem; }
}

/* hero */
.hero { padding: 0; text-align: center; }
.hero .tagline { margin-left: auto; margin-right: auto; }
.herorow { justify-content: center; }
.hero .tags { display: flex; flex-wrap: wrap; justify-content: center; }
.herogrid { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: start; gap: 1.4rem; margin: 0; }
.herocol { min-width: 0; padding-top: 2rem; }
.herocol.left { text-align: left; }
.herocol.right { text-align: right; }
.herocol .tagline { margin-left: 0; margin-right: 0; }
.herocol.left .tags { justify-content: flex-start; }
.herocol.right .tags { justify-content: flex-end; }
.herologo { display: block; line-height: 0; align-self: center; padding: 1.4rem 0 .4rem; }
.herologo img { width: 100%; height: auto; display: block; }
/* logo atop interior-page heroes (library/services/pages), sized to match the
   index hero: the center 2fr column of a 1fr 2fr 1fr grid with 1.4rem gaps. */
.herobrand { display: block; line-height: 0; width: calc((100% - 2.8rem) / 2); margin: 0 auto; padding: 1.4rem 0 .4rem; }
.herobrand img { width: 100%; height: auto; display: block; }
/* article cover: locked to the exact box the index logo occupies (same width
   formula, same 1254:908 aspect) so the hero height never shifts between pages;
   the image crops to fill */
.herobrand.cover { aspect-ratio: 1254 / 908; padding: 0; margin: 1.4rem auto .4rem; }
.herobrand.cover img { height: 100%; object-fit: cover; }
/* a VIDEO hero is not squeezed into the fixed cover box: it takes the full width
   available in the content column and scales uniformly to its own aspect ratio,
   so nothing is cropped and nothing is stretched. */
.herobrand.cover.hero-video { width: 100%; aspect-ratio: auto; }
.herobrand.cover.hero-video video.player {
  width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; display: block;
}
.hero .prompt { color: var(--teal); font-size: .9rem; margin: 0 0 .4rem; }
.hero h1 {
  font-size: clamp(1.6rem, .8rem + 3.4vw, 2.6rem);
  margin: 0 0 .8rem; line-height: 1.15; letter-spacing: -.02em;
  text-shadow: 0 0 18px color-mix(in srgb, var(--teal) 15%, transparent);
}
.hero .tagline { color: var(--dim); font-size: .9rem; margin: 0; max-width: 40rem; }
.hero .tags { margin-top: 1.1rem; }

/* native <audio> players, nudged toward catppuccin without JS.
   color-scheme flips the whole widget to a dark theme in BOTH Chromium and
   Firefox (Firefox stops here); the ::-webkit-media-controls-* pseudo-elements
   refine the panel further in Chromium/WebKit only. accent-color tints the
   volume slider. There is no cross-browser way to recolor the individual
   control glyphs without a custom JS player. */
.rb-player, audio.player {
  color-scheme: dark;
  accent-color: var(--pink);
  border-radius: 5px;
  background: var(--mantle);
}
.rb-player::-webkit-media-controls-enclosure,
audio.player::-webkit-media-controls-enclosure { border-radius: 5px; }
.rb-player::-webkit-media-controls-panel,
audio.player::-webkit-media-controls-panel {
  background: var(--mantle);
  border: 1px solid var(--line);
  border-radius: 5px;
}
.rb-player::-webkit-media-controls-current-time-display,
.rb-player::-webkit-media-controls-time-remaining-display,
audio.player::-webkit-media-controls-current-time-display,
audio.player::-webkit-media-controls-time-remaining-display {
  color: var(--dim); text-shadow: none; font-family: var(--mono);
}
.rb-player::-webkit-media-controls-timeline,
audio.player::-webkit-media-controls-timeline {
  background: var(--line); border-radius: 2px; height: 3px; margin: 0 .4rem;
}
video.player { color-scheme: dark; }
video.player::cue { background: color-mix(in srgb, var(--crust) 85%, transparent); color: var(--text); font-family: inherit; }

/* index pagination */
.pagination {
  display: flex; align-items: center; justify-content: center; gap: 1.4rem;
  padding: 2rem 0 1rem; font-size: .82rem;
}
.pagination .pgnav {
  color: var(--teal); border: 1px solid color-mix(in srgb, var(--teal) 35%, var(--line));
  padding: .3rem .8rem; transition: border-color .2s ease, background .2s ease;
}
.pagination .pgnav:hover {
  color: var(--base); background: var(--teal); border-color: var(--teal); text-decoration: none;
}
.pagination .pgnum { color: var(--dim); }
.hero .tagline b { color: var(--mauve); font-weight: 400; }

/* post grid - larger polished cards, sharp edges */
.listhead {
  color: var(--dim); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 1px solid var(--line); border-left: 3px solid var(--teal);
  padding: .1rem 0 .5rem .65rem; margin: 1.4rem 0 1.2rem;
}
/* post grid - non-uniform newspaper mosaic over a 6-col grid */
.grid {
  display: grid; gap: clamp(.7rem, 1.4vw, 1.1rem); padding-bottom: 2.5rem;
  grid-template-columns: repeat(6, 1fr); grid-auto-flow: dense;
}
.card {
  position: relative; display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--surface0) 72%, transparent); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
  overflow: hidden; transition: background .2s ease, border-color .2s ease;
}
.card:hover {
  background: color-mix(in srgb, var(--surface1) 82%, transparent);
  border-color: color-mix(in srgb, var(--teal) 45%, var(--line));
}
.card:hover .path { color: var(--teal); }
.card .thumb img { transition: transform .3s ease; }
.card:hover .thumb img { transform: scale(1.025); }
.card.v-lead     { grid-column: span 6; }
.card.v-feature  { grid-column: span 4; }
.card.v-standard { grid-column: span 3; }
.card.v-text     { grid-column: span 3; }
.card.v-compact  { grid-column: span 2; }
.thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--mantle); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.02); }
.thumb::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--mantle) 60%, transparent));
}
.body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; container-type: inline-size; }
.card .tagrow { margin: .15rem 0 0; }
.kicker { color: var(--pink); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; }
.path {
  color: var(--yellow); font-weight: 700; line-height: 1.25;
  transition: color .18s ease;
  /* mono font: 1 char ~= 0.6em wide. Scale down to keep the title on one line,
     but never exceed the design size. --chars set inline per card. */
  white-space: nowrap;
  font-size: min(calc(1.12rem * var(--ts, 1)), calc(100cqi / (var(--chars, 24) * 0.6)));
}
.path::before { content: "./"; color: var(--dim); font-weight: 400; }
.excerpt { color: var(--mauve); font-size: calc(.84rem * var(--ts, 1)); line-height: 1.5; margin: 0; flex: 1; }
.meta { display: flex; align-items: baseline; justify-content: flex-end; gap: .6rem; color: var(--dim); font-size: .73rem; margin-top: .45rem; }
.meta time { color: var(--teal); }

/* lead: full-width hero, image beside text */
.card.v-lead { display: grid; grid-template-columns: 1.4fr 1fr; }
.card.v-lead .thumb { aspect-ratio: auto; min-height: 300px; }
.card.v-lead .body { justify-content: center; padding: 2rem 2.2rem; gap: .6rem; }
.card.v-lead .path { font-size: min(clamp(1.5rem, 1rem + 2.2vw, 2.2rem), calc(100cqi / (var(--chars, 24) * 0.6))); }
.card.v-lead .excerpt { font-size: 1rem; max-width: 42ch; }
/* compact: tighter, smaller type */
.card.v-compact .body { padding: .8rem .9rem .9rem; gap: .3rem; }
.card.v-compact .path { font-size: min(calc(.98rem * var(--ts, 1)), calc(100cqi / (var(--chars, 24) * 0.6))); }
.card.v-compact .excerpt { font-size: calc(.78rem * var(--ts, 1)); }
/* text-forward (no image): accent rail, larger lead-in */
.card.v-text { border-left: 3px solid var(--mauve); background: color-mix(in srgb, var(--mauve) 5%, transparent); }
.card.v-text .body { justify-content: center; padding: 1.3rem 1.4rem; }
.card.v-text .path { font-size: min(calc(1.25rem * var(--ts, 1)), calc(100cqi / (var(--chars, 24) * 0.6))); }
.card.v-text .excerpt { color: var(--dim); font-size: calc(.88rem * var(--ts, 1)); }

@media (max-width: 60rem) {
  .grid { grid-template-columns: repeat(4, 1fr); }
  .card.v-lead, .card.v-feature { grid-column: span 4; }
  .card.v-standard, .card.v-text { grid-column: span 2; }
  .card.v-compact { grid-column: span 2; }
}
@media (max-width: 40rem) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .card.v-lead, .card.v-feature, .card.v-standard, .card.v-text, .card.v-compact { grid-column: span 2; }
  .card.v-lead { grid-template-columns: 1fr; }
  .card.v-lead .thumb { min-height: 180px; }
  .card.v-lead .body { padding: 1.3rem; }
}

/* article */
/* post pages share the index frame: same 60rem column, left-aligned; only the
   prose itself is capped at a readable measure */
article { max-width: 60rem; margin: 0 auto; padding: .8rem 0 4rem; text-align: left; }
.prose { max-width: var(--prose); text-align: justify; }
article.wide { max-width: var(--wide); text-align: left; }
article h1.art {
  font-size: clamp(1.7rem, .9rem + 3.4vw, 2.5rem); text-align: left; margin: 0 0 .6rem; letter-spacing: -.01em;
}
.artmeta { color: var(--dim); font-size: .8rem; margin-bottom: 2rem; border-bottom: 1px solid var(--line); padding-bottom: 1rem; }
.artmeta .sep { color: var(--line); }

.prose p { margin: 0 0 1.2rem; }
.prose h2 { font-size: 1.05rem; margin: 2.2rem 0 .8rem; }
.prose h2::before { content: "## "; color: var(--mauve); -webkit-text-fill-color: var(--mauve); }
.prose h3 { font-size: .95rem; margin: 1.6rem 0 .6rem; }
.prose blockquote {
  margin: 1.6rem 0; padding: .4rem 0 .4rem 1.1rem; border-left: 3px solid var(--teal);
  color: var(--teal); font-style: italic;
}
.prose pre {
  background: var(--surface0); border: 1px solid var(--line);
  padding: 1rem 1.2rem; overflow-x: auto; font-size: .82rem; line-height: 1.55; margin: 1.4rem 0;
}
.prose pre code { background: none; padding: 0; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li { margin-bottom: .4rem; }
.prose li::marker { color: var(--teal); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

/* pricing/spec tables - sharp, compact, fits the prose column */
.prose table { display: block; overflow-x: auto; border-collapse: collapse; width: 100%; margin: 1.6rem 0; font-size: .84rem; }
.prose table code { font-size: .9em; }
.prose th, .prose td { border: 1px solid var(--line); padding: .38rem .6rem; text-align: left; vertical-align: top; }
.prose th { color: var(--teal); background: var(--surface0); font-weight: 700; white-space: nowrap; }
.prose td { color: var(--text); }
.prose tr:nth-child(even) td { background: color-mix(in srgb, var(--surface0) 35%, transparent); }
.prose td:first-child { color: var(--dim); }

/* maintenance / status callout - yellow accent, distinct from teal blockquotes */
.notice {
  border: 1px solid var(--yellow);
  background: color-mix(in srgb, var(--yellow) 8%, var(--surface0));
  padding: .8rem 1rem; margin: 1.8rem 0; color: var(--text);
}
.notice strong { color: var(--yellow); }

/* standalone section pages (hosting, personas): same 60rem column + left align
   as services/library. The body is pages/*.md rendered through page.html, which
   wraps it in .prose - so lift .prose's 42rem essay cap here too, otherwise the
   masthead / directory / tables / timeline get cramped while services/library
   (no .prose wrapper) fill the column. This is the analog of .libitem .prose. */
article.page { max-width: 60rem; text-align: left; }
article.page .prose { max-width: none; text-align: left; }

/* newspaper masthead */
.masthead { padding: .2rem 0 0; border-bottom: 1px solid var(--line); box-shadow: inset 0 -3px 0 var(--line); margin-bottom: 1.5rem; }
.nameplate { font-size: clamp(2rem, 1.2rem + 4vw, 3.1rem); font-weight: 700; color: var(--yellow); letter-spacing: -.02em; line-height: 1; margin: 0; }
.nameplate::before { content:"./"; color: var(--dim); font-weight: 400; }
.dateline { display:flex; flex-wrap:wrap; gap: .25rem .9rem; color: var(--dim); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; padding: .7rem 0 .85rem; }
.dateline .sep { color: var(--line); }

/* lead paragraph with drop cap */
.lead { font-size: 1.02rem; line-height: 1.6; color: var(--text); }
.lead::first-letter { font-size: 2.7rem; line-height:.82; float:left; color: var(--teal); font-weight:700; padding: .15rem .4rem 0 0; }

/* big pull-stat */
.pullstat { display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap; margin: 1.4rem 0 1.5rem; padding-bottom:1.4rem; border-bottom:1px solid var(--line); }
.pullstat .num { font-size: clamp(1.7rem,1.1rem+2.4vw,2.5rem); font-weight:700; color: var(--teal); letter-spacing:-.02em; line-height:1; }
.pullstat .cap { color: var(--dim); font-size:.8rem; line-height:1.45; flex:1; min-width:200px; }

/* services directory - asymmetric: featured lead + row of compact items */
.directory { display:grid; gap:1rem; margin: 1.1rem 0; }
.dir-lead { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.4rem; padding:1.15rem 1.3rem; background: color-mix(in srgb, var(--teal) 7%, var(--surface0)); border:1px solid color-mix(in srgb, var(--teal) 42%, var(--line)); }
.dir-lead .kicker { color: var(--teal); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; }
.dir-lead .name { color: var(--yellow); font-weight:700; font-size:1.45rem; line-height:1; }
.dir-lead .name::before { content:"./"; color:var(--dim); font-weight:400; }
.dir-lead .desc { color: var(--mauve); font-size:.88rem; line-height:1.5; flex:1; min-width:200px; }
.dir-lead .price { color: var(--dim); font-size:.8rem; white-space:nowrap; }
.dir-lead .price b { color: var(--teal); font-size:1rem; }
.dir-row { display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; }
@media (max-width: 40rem) { .dir-row { grid-template-columns: 1fr; } }
.dir-item { padding:1rem 1.1rem 1.1rem; background: color-mix(in srgb, var(--surface0) 60%, transparent); border:1px solid var(--line); transition: border-color .2s ease; }
.dir-item:hover { border-color: var(--teal); }
.dir-item .kicker { color: var(--pink); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; }
.dir-item .name { color: var(--yellow); font-weight:700; font-size:1.05rem; margin:.2rem 0 .35rem; }
.dir-item .name::before { content:"./"; color:var(--dim); font-weight:400; }
.dir-item .desc { color: var(--dim); font-size:.79rem; line-height:1.45; margin:0 0 .6rem; }
.dir-item .price { color: var(--teal); font-size:.76rem; }

/* downtime chronology - minimal vertical rail with glowing nodes (teal = minor, yellow = major) */
.timeline { position:relative; margin:1.3rem 0 1rem; padding:.2rem 0 .3rem 1.5rem; border-left:1px solid var(--line); }
.tl-year { color: var(--dim); font-size:.66rem; letter-spacing:.18em; margin: 1rem 0 .35rem; }
.tl-year:first-child { margin-top:0; }
.tl-event { position:relative; padding-bottom:.9rem; }
.tl-event:last-child { padding-bottom:.15rem; }
.tl-event::before { content:""; position:absolute; left:-1.5rem; top:.42rem; width:.5rem; height:.5rem; margin-left:-.24rem; background:var(--teal); box-shadow:0 0 5px color-mix(in srgb,var(--teal) 45%,transparent); }
.tl-event.major::before { background:var(--yellow); box-shadow:0 0 6px color-mix(in srgb,var(--yellow) 50%,transparent); width:.58rem; height:.58rem; top:.38rem; margin-left:-.28rem; }
.tl-event .when { color: var(--dim); font-size:.75rem; }
.tl-event .what { color: var(--text); font-size:.85rem; line-height:1.45; }
.tl-event .dur { color: var(--teal); font-weight:700; }
.tl-event.major .dur { color: var(--yellow); }

/* fine print (TOS) in narrow columns, small */
.fineprint { font-size:.77rem; color: var(--dim); line-height:1.55; column-count: 2; column-gap: 1.6rem; margin: 1.1rem 0; }
@media (max-width: 40rem) { .fineprint { column-count: 1; } }
.fineprint p { margin: 0 0 .6rem; break-inside: avoid; }
.fineprint b { color: var(--text); }

/* ---- library / archive ---- */
nav a.active { color: var(--teal); }

.crumbs { font-size:.78rem; color:var(--dim); margin:0 0 1rem; }
.crumbs a { color:var(--teal); }
.crumbs a:hover { text-decoration:underline; }
.crumbs span { color:var(--text); }

/* collection header */
.collhead { padding:clamp(2rem,7vh,3.5rem) 0 1.5rem; border-bottom:1px solid var(--line); margin-bottom:1.5rem; }
.collhead h1 { font-size:clamp(1.7rem,1rem+3vw,2.4rem); margin:.4rem 0 .6rem; }
.collbanner { width:100%; aspect-ratio:21/9; object-fit:cover; margin-bottom:1rem; filter:saturate(1.02) brightness(.85); display:block; }
.collmeta { color:var(--dim); font-size:.8rem; display:flex; gap:.5rem; align-items:baseline; flex-wrap:wrap; }
.collmeta .kicker { color:var(--teal); }

/* shelves + media grid */
.shelf { margin:1.4rem 0; }
.shelf .listhead { display:flex; align-items:baseline; justify-content:space-between; }
.shelf .listhead a { color:var(--dim); text-decoration:none; }
.shelf .listhead a:hover { color:var(--teal); }
.shelf .listhead .count { color:var(--dim); font-size:.7rem; letter-spacing:.1em; }
.mgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.5rem); padding-bottom:2rem; }
@media (max-width: 56rem) { .mgrid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 36rem) { .mgrid { grid-template-columns: 1fr; } }
.mgrid.coll-grid { grid-template-columns:repeat(auto-fill, minmax(min(100%,320px),1fr)); }

/* collection context block - lives in the site rail below the nav */
.rcoll { display:flex; flex-direction:column; }
.rcoll-head { color:var(--dim); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; padding-bottom:.5rem; }
.rcoll-head a { color:var(--yellow); }
.rcoll-head a:hover { color:var(--teal); text-decoration:none; }
.collnav { display:flex; flex-direction:column; }
.cnav { display:flex; justify-content:space-between; align-items:baseline; padding:.42rem .15rem; color:var(--dim); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--line) 55%, transparent); font-size:.82rem; transition:color .15s ease, padding-left .15s ease; }
.cnav:first-child { border-top:1px solid var(--line); }
.cnav:hover { color:var(--teal); padding-left:.5rem; }
.cnav.active { color:var(--yellow); }
.cnav.active .cn-name::before { content:"> "; color:var(--pink); }
.cnav .cn-name { text-transform:capitalize; }
.cnav .cn-cnt { color:var(--overlay0); font-size:.72rem; }
.emptysec { color:var(--dim); font-size:.84rem; font-style:italic; padding:.4rem 0; }
.streambox { max-width:var(--prose); padding:1rem 0; }
.streamtitle { color:var(--yellow); font-weight:700; margin:.6rem 0 .2rem; }
.streamblurb { color:var(--mauve); font-size:.86rem; margin:0; }

/* media card (self-contained; mirrors .card shape + duration badge) */
.mcard { position:relative; display:flex; flex-direction:column; background:color-mix(in srgb, var(--surface0) 72%, transparent); text-decoration:none; border:1px solid color-mix(in srgb, var(--line) 65%, transparent); overflow:hidden; transition:background .2s ease, border-color .2s ease; }
.mcard:hover { background:color-mix(in srgb, var(--surface1) 80%, transparent); border-color:color-mix(in srgb, var(--teal) 45%, var(--line)); }
.mcard .thumb { position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--mantle); }
.mcard .thumb img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.02); }
.mcard .thumb.empty { background:repeating-linear-gradient(45deg, var(--crust), var(--crust) 9px, var(--mantle) 9px, var(--mantle) 18px); }
.mcard .body { padding:1rem 1.1rem 1.15rem; display:flex; flex-direction:column; gap:.32rem; flex:1; container-type: inline-size; }
.mcard .kicker { color:var(--pink); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; }
/* title shrinks to fit one line (mirrors the index .path formula): mono font
   is ~0.6em/char, so 100cqi/(chars*0.6) is the size that fits the body column.
   --chars is set inline per card by _lib_card. */
.mcard .path {
  color:var(--yellow); font-weight:700; line-height:1.25; white-space: nowrap;
  font-size: min(calc(1.02rem * var(--ts, 1)), calc(100cqi / (var(--chars, 24) * 0.6)));
}
.mcard .path::before { content:"./"; color:var(--dim); font-weight:400; }
.mcard .excerpt { color:var(--mauve); font-size:.82rem; line-height:1.45; margin:0; }
.mcard .speaker { color:var(--dim); font-size:.74rem; margin-top:auto; padding-top:.2rem; }
.mcard .mmeta { display:flex; justify-content:space-between; gap:.6rem; align-items:baseline; color:var(--dim); font-size:.72rem; margin-top:auto; padding-top:.35rem; }
.mcard .mmeta time { color:var(--teal); }
.mcard .mmeta .fcnt { color:var(--blue); }
/* text entries: text-forward card, no big blank thumb */
.mcard.mcard-text { border-left:3px solid var(--mauve); background:color-mix(in srgb, var(--mauve) 5%, transparent); }
.mcard.mcard-text .excerpt { color:var(--dim); }
.mcard .dur { position:absolute; top:.5rem; right:.5rem; background:color-mix(in srgb, var(--crust) 92%, transparent); color:var(--teal); font-size:.66rem; padding:.1rem .4rem; border:1px solid var(--line); }
.mcard .thumb.mono { display:grid; place-items:center; background:var(--mantle); }
.mcard .thumb.mono .monogram { font-size:2.6rem; font-weight:700; color:var(--teal); text-shadow:0 0 10px color-mix(in srgb,var(--teal) 28%,transparent); }
/* carousel thumb on collection cards: stack the entry's preview frames and
   cross-fade them on a staggered 12s loop (3s per frame). Zero-JS; pauses on
   hover; nth-child delays cover the standard 4 frames. The base .mcard .thumb
   is already position:relative + 16/9, so the absolute <img>s fill it. */
.mcard .thumb.carou img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: thfade 12s infinite linear; }
.mcard .thumb.carou img:nth-child(1) { animation-delay: 0s; }
.mcard .thumb.carou img:nth-child(2) { animation-delay: 3s; }
.mcard .thumb.carou img:nth-child(3) { animation-delay: 6s; }
.mcard .thumb.carou img:nth-child(4) { animation-delay: 9s; }
.mcard:hover .thumb.carou img { animation-play-state: paused; }
@keyframes thfade {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  25%  { opacity: 1; }
  29%  { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mcard .thumb.carou img { animation: none; opacity: 0; }
  .mcard .thumb.carou img:first-child { opacity: 1; }
}
.imgframe { margin:.4rem 0 1.2rem; max-width:var(--entry); }
.imgframe img { width:100%; display:block; border:1px solid var(--line); }
.mcard.mcard-stream .kicker, .mcard.mcard-link .kicker, .mcard.coll .kicker { color:var(--blue); }

/* item detail page - the work up top, prose, then companion files */
.libitem { max-width:var(--entry); margin:0; text-align:left; padding:clamp(1.5rem,5vh,2.5rem) 0 4rem; }
/* library body fills the entry column so it aligns with the player + files
   above/below it, not the narrower 42rem prose measure used by essay pages */
.libitem .prose { max-width:none; }

/* companion files: preview-image gallery + download rows */
.attach { margin:2.2rem 0 0; }
.attgal { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,150px),1fr)); gap:.6rem; margin:.2rem 0 .8rem; }
.attgal a { display:block; }
.attgal img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; border:1px solid var(--line); transition:border-color .15s ease; }
.attgal a:hover img { border-color:var(--teal); }
.frow {
  display:flex; gap:.8rem; align-items:baseline; margin-top:.45rem; padding:.5rem .7rem;
  border:1px solid var(--line); border-left:2px solid color-mix(in srgb, var(--blue) 55%, var(--line));
  background:color-mix(in srgb, var(--surface0) 50%, transparent); color:var(--text); text-decoration:none; font-size:.82rem;
  transition:border-color .15s ease, background .15s ease;
}
.frow:hover { border-color:var(--teal); background:color-mix(in srgb, var(--surface1) 70%, transparent); text-decoration:none; }
.fkind { color:var(--pink); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; flex:none; min-width:6rem; }
.fname { color:var(--yellow); flex:1; min-width:0; overflow-wrap:anywhere; }
.fsize { color:var(--dim); font-size:.72rem; flex:none; }
.fget { color:var(--teal); font-size:.74rem; flex:none; }
.fspec { display:block; color:var(--dim); font-size:.68rem; letter-spacing:.02em; margin-top:.1rem; }
/* original source uploads lead the list and read green, to stand apart from the
   pink/blue generated companions (transcodes, transcripts, subtitles). */
.frow.kind-original { border-left:3px solid var(--green); background:color-mix(in srgb, var(--green) 9%, transparent); }
.frow.kind-original .fkind { color:var(--green); }

/* embedded chapter markers - zero-JS collapsible, same look as the transcript */
.chapters { margin:0 0 1.2rem; border:1px solid var(--line); background:color-mix(in srgb, var(--mantle) 50%, transparent); }
.chapters summary {
  cursor:pointer; list-style:none; padding:.5rem .8rem; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--teal);
  border-left:3px solid var(--teal); transition:background .15s ease;
}
.chapters summary::-webkit-details-marker { display:none; }
.chapters summary::before { content:"+ "; color:var(--pink); }
.chapters[open] summary::before { content:"- "; }
.chapters summary:hover { background:color-mix(in srgb, var(--surface1) 70%, transparent); }
.chapters summary .tshint { float:right; color:var(--dim); text-transform:none; letter-spacing:.02em; }
.chapters ol { margin:0; padding:.7rem 1rem .8rem 1rem; list-style:none; max-height:22rem; overflow-y:auto; }
.chapters li { margin:.2rem 0; color:var(--dim); font-size:.8rem; line-height:1.5; }
.chtime { color:var(--teal); font-variant-numeric:tabular-nums; margin-right:.7rem; font-size:.74rem; }

/* inline transcript - zero-JS collapsible, full text stays on the page */
.tscript { margin:2.2rem 0 0; border:1px solid var(--line); background:color-mix(in srgb, var(--mantle) 50%, transparent); }
.tscript summary {
  cursor:pointer; list-style:none; padding:.6rem .8rem; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--teal);
  border-left:3px solid var(--teal); transition:background .15s ease;
}
.tscript summary::-webkit-details-marker { display:none; }
.tscript summary::before { content:"+ "; color:var(--pink); }
.tscript[open] summary::before { content:"- "; }
.tscript summary:hover { background:color-mix(in srgb, var(--surface1) 70%, transparent); }
.tscript .tshint { float:right; color:var(--dim); text-transform:none; letter-spacing:.02em; }
.tscript .tbody { padding:1rem 1.1rem .4rem; max-height:34rem; overflow-y:auto; }
.tscript .tbody p { margin:0 0 .85rem; color:var(--dim); font-size:.84rem; line-height:1.65; }

/* services catalog - two-column directory (public | members) */
.svdir { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin:1.2rem 0 2rem; }
@media (max-width:44rem) { .svdir { grid-template-columns:1fr; } }
.svcol { display:flex; flex-direction:column; gap:.5rem; }
.svcol .listhead { margin-bottom:.15rem; }
.svrow { padding:.8rem .95rem .85rem; background:color-mix(in srgb, var(--surface0) 60%, transparent); border:1px solid var(--line); border-left:2px solid color-mix(in srgb,var(--teal) 55%,var(--line)); transition:border-color .2s ease, background .2s ease; }
.svrow.private { border-left-color:color-mix(in srgb,var(--pink) 55%,var(--line)); }
.svrow:hover { border-color:var(--teal); background:color-mix(in srgb, var(--surface1) 72%, transparent); }
.svname { color:var(--yellow); font-weight:700; font-size:.98rem; line-height:1.2; }
.svname::before { content:"./"; color:var(--dim); font-weight:400; }
.svblurb { color:var(--dim); font-size:.78rem; line-height:1.45; margin:.25rem 0 .45rem; }
.svlink { color:var(--teal); font-size:.74rem; text-decoration:none; letter-spacing:.02em; }
.svlink::before { content:"-> "; color:var(--dim); }
.svlink:hover { color:var(--pink); }
.libitem h1.art { margin:0 0 .6rem; }
.libitem .tags { margin:.2rem 0 1.1rem; }
.libmeta { color:var(--dim); font-size:.82rem; margin:0 0 1.2rem; }
.libmeta .kicker { color:var(--teal); }
.durstat { color:var(--dim); font-size:.76rem; }
.libchips { margin:.4rem 0 0; }

/* native players - recolored via accent-color, zero-JS */
.player { width:100%; display:block; margin:.4rem 0 1.2rem; background:var(--mantle); border:1px solid var(--line); }
audio.player { accent-color:var(--teal); height:44px; }
video.player { width:100%; height:auto; aspect-ratio:16/9; accent-color:var(--teal); }
audio.player.live { border-color:color-mix(in srgb,var(--pink) 45%,var(--line)); }

/* waveform hero frame (cover + optional baked bars) */
.waveframe { position:relative; max-width:var(--entry); border:1px solid var(--line); margin:.4rem 0 1.2rem; background:var(--mantle); }
.waveframe img { width:100%; display:block; filter:saturate(1.05); }
.waveframe .bars { position:absolute; left:0; right:0; bottom:0; height:42%; display:flex; align-items:flex-end; gap:2px; padding:0 .4rem .3rem; pointer-events:none; }
.waveframe .bars i { flex:1; min-width:2px; background:color-mix(in srgb,var(--teal) 70%,transparent); box-shadow:0 0 4px color-mix(in srgb,var(--teal) 28%,transparent); }

/* external/friend callout card */
.extcard { display:block; max-width:var(--entry); border:1px solid var(--line); background:color-mix(in srgb, var(--surface0) 50%, transparent); margin:.4rem 0 1.2rem; text-decoration:none; position:relative; transition:border-color .2s; }
.extcard:hover { border-color:var(--teal); }
.extcard .extbanner { width:100%; aspect-ratio:2/1; object-fit:cover; display:block; }
.extcard .extbody { padding:1rem 1.1rem; }
.extcard .exttitle { color:var(--yellow); font-weight:700; font-size:1.05rem; }
.extcard .extbody p { color:var(--mauve); font-size:.86rem; margin:.3rem 0; }
.extcard .exturl { color:var(--dim); font-size:.74rem; word-break:break-all; }
.extcard .extopen { position:absolute; top:.6rem; right:.8rem; color:var(--teal); font-size:.74rem; }

/* live stream pulse - CSS only */
.livebadge { display:inline-flex; align-items:center; gap:.4rem; color:var(--pink); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; margin:.2rem 0 .4rem; }
.livebadge .dot { width:.6rem; height:.6rem; background:var(--pink); display:inline-block; box-shadow:0 0 6px color-mix(in srgb, var(--pink) 60%, transparent); animation:libpulse 1.4s ease-in-out infinite; }
@keyframes libpulse { 0%,100%{opacity:1;} 50%{opacity:.25;} }

/* prev/next + related rails on item pages */
.prevnext, .related { display:grid; gap:1rem; margin:2rem 0; }
.prevnext { grid-template-columns:1fr 1fr; }
.related { grid-template-columns:repeat(3,1fr); }
@media (max-width:40rem){ .prevnext,.related{ grid-template-columns:1fr; } }

.chip { display:inline-block; padding:.2rem .6rem; border:1px solid var(--line); color:var(--teal); font-size:.76rem; text-decoration:none; margin:.2rem .5rem 0 0; }
.chip:hover { border-color:var(--teal); text-decoration:none; }

/* zero-JS disclosure blocks (downtime log, terms) - + / - marker, no script */
.prose details { margin: 1.3rem 0; border:1px solid var(--line); background:color-mix(in srgb, var(--surface0) 35%, transparent); }
.prose summary { cursor:pointer; padding:.7rem 1rem; color:var(--yellow); font-weight:700; font-size:.88rem; list-style:none; }
.prose summary::-webkit-details-marker { display:none; }
.prose summary::before { content:"+ "; color:var(--teal); }
.prose details[open] > summary::before { content:"- "; }
.prose details > div { padding:.2rem 1rem 1rem; }
.prose details > div > ul { margin:.2rem 0 0; }
.prose details .muted { color:var(--dim); font-size:.8rem; margin:.8rem 0 0; }

.tags, .tagrow { display: flex; flex-wrap: wrap; gap: .4rem; }
.tags { margin: 2rem 0 0; }
.tagrow { margin-top: .65rem; }
.tag, .tags a {
  display: inline-block; font-size: .7rem; line-height: 1.5; padding: .16rem .5rem;
  color: var(--pink); text-decoration: none;
  background: color-mix(in srgb, var(--pink) 12%, var(--surface0));
  border: 1px solid color-mix(in srgb, var(--pink) 32%, transparent);
}
.tag::before, .tags a::before { content: "$"; color: color-mix(in srgb, var(--pink) 55%, var(--dim)); margin-right: .16rem; }
.tag:hover, .tags a:hover {
  color: var(--base); background: var(--pink); border-color: var(--pink); text-decoration: none;
}

.back { display: inline-block; margin-top: 2.5rem; color: var(--dim); font-size: .85rem; }
.back:hover { color: var(--teal); text-decoration: none; }

/* article head - title block under the hero. the cover image now uses the same
   .hero / .herobrand treatment as every other interior page, so it is exactly
   the size of the hero section (it cannot drift in width, height, or padding). */
.arthead .kicker { margin-bottom: .5rem; }

/* author area: same flat panel language as the index cards */
.author {
  display: flex; gap: 1.1rem; align-items: center;
  margin: 3rem 0 0; padding: 1.1rem 1.2rem;
  background: color-mix(in srgb, var(--surface0) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
}
.author img { width: 52px; height: 52px; object-fit: cover; flex: none; border: 1px solid var(--line); }
.author .who { flex: 1; min-width: 200px; }
.author .name { color: var(--yellow); font-weight: 700; font-size: .95rem; }
.author .name::before { content: "./"; color: var(--dim); font-weight: 400; }
.author .bio { color: var(--dim); font-size: .85rem; line-height: 1.55; margin: .25rem 0 0; }

/* personas page: grid of author-style panels */
.personas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1rem 0 2.5rem; }
.persona {
  display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.1rem 1.2rem;
  background: color-mix(in srgb, var(--surface0) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
  transition: background .2s ease, border-color .2s ease;
}
.persona:hover {
  background: color-mix(in srgb, var(--surface1) 82%, transparent);
  border-color: color-mix(in srgb, var(--teal) 45%, var(--line));
}
.persona img { width: 52px; height: 52px; object-fit: cover; flex: none; border: 1px solid var(--line); }
.persona .who { flex: 1; min-width: 0; }
.persona .name { color: var(--yellow); font-weight: 700; font-size: .95rem; }
.persona .name::before { content: "./"; color: var(--dim); font-weight: 400; }
.persona .bio { color: var(--dim); font-size: .85rem; line-height: 1.55; margin: .25rem 0 0; }
.persona .plink { display: inline-block; margin-top: .5rem; font-size: .8rem; color: var(--teal); }
.persona .plink::before { content: "-> "; color: var(--dim); }
.persona .plink:hover { color: var(--pink); text-decoration: none; }
@media (max-width: 40rem) { .personas { grid-template-columns: 1fr; } }

footer {
  max-width: var(--wide); margin: 0 auto; padding: 1.1rem var(--gutter) 1.4rem;
  border-top: 1px solid var(--line);
  color: var(--dim); font-size: .76rem;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem;
}
footer .foot {
  margin: 0; color: var(--yellow); font-weight: 700;
  font-size: clamp(1rem, .8rem + .9vw, 1.45rem); letter-spacing: .01em;
  text-align: center;
}
footer .foot a { color: inherit; }
footer .foot a:hover { text-decoration: none; color: var(--teal); }

::selection { background: var(--teal); color: var(--base); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* catppuccin scrollbars, applied to every scrolling element (page + inner
   scroll regions like the transcript/chapter boxes). Firefox: scrollbar-width
   + scrollbar-color. Chromium/WebKit: ::-webkit-scrollbar. Thumb uses a
   transparent border + background-clip so it floats with a gap around it. */
* { scrollbar-width: thin; scrollbar-color: var(--surface1) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--surface1); border-radius: 6px;
  border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--surface2); }
::-webkit-scrollbar-corner { background: transparent; }

@media (max-width: 50rem) {
  .card.featured { grid-template-columns: 1fr; }
  .card.featured .thumb { min-height: 200px; }
  .card.featured .body { padding: 1.4rem 1.4rem 1.6rem; }
}
@media (max-width: 36rem) {
  body > header .row { flex-wrap: wrap; column-gap: 1rem; row-gap: .2rem; }
  nav { gap: .9rem; }
  article { text-align: left; }
  .hero h1 { font-size: clamp(1.5rem, 1rem + 5vw, 2rem); }
}
@media (max-width: 22rem) {
  body { font-size: 14px; }
  .body { padding: .85rem .9rem 1rem; }
  .grid { gap: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .progress { display: none; }
  .glitch::before, .glitch::after { animation: none !important; visibility: hidden !important; }
}

/* glitch: brief, desynced tear bursts (red ::after + blue ::before), pure CSS.
   Each span sleeps, tears for ~0.4s, then sleeps again - never perpetual.
   Per-element timing (--gd delay, --gp period) is baked at build time. */
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; overflow: hidden; pointer-events: none;
  color: inherit; opacity: 0;
}
.glitch::after  { text-shadow: -1px 0 #ff2d55; left: 2px;  animation: gburst var(--gp, 10s) infinite linear; animation-delay: var(--gd, 0s); }
.glitch::before { text-shadow: 1px 0 #00e0ff;  left: -2px; animation: gburst var(--gp, 10s) infinite linear; animation-delay: calc(var(--gd, 0s) - .12s); }
@keyframes gburst {
  0%   { opacity: 0; }
  0.4% { opacity: .9; clip: rect(0,9999px,7px,0); }
  1.0% { opacity: .9; clip: rect(12px,9999px,26px,0); }
  1.7% { opacity: .9; clip: rect(4px,9999px,16px,0); }
  2.4% { opacity: .9; clip: rect(20px,9999px,38px,0); }
  3.1% { opacity: .9; clip: rect(2px,9999px,14px,0); }
  3.8% { opacity: .9; clip: rect(16px,9999px,30px,0); }
  4.5% { opacity: 0; }
  100% { opacity: 0; }
}

/* site-wide library call-to-action chip in the header .row (every page, injected) */
.hdr-lib {
  display: inline-flex; align-items: center; gap: .42rem;
  padding: .22rem .55rem; white-space: nowrap; text-decoration: none;
  background: color-mix(in srgb, var(--mauve) 10%, var(--base));
  border: 1px solid color-mix(in srgb, var(--mauve) 42%, var(--line));
  color: var(--text); font-size: .76rem;
  transition: border-color .15s ease, background .15s ease;
}
.hdr-lib-tag {
  color: var(--base); background: var(--mauve); font-weight: 700;
  font-size: .54rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .08rem .28rem;
}
.hdr-lib-arrow { color: var(--mauve); transition: color .15s ease; }
.hdr-lib:hover {
  border-color: var(--mauve); text-decoration: none;
  background: color-mix(in srgb, var(--mauve) 18%, var(--base));
}
.hdr-lib:hover .hdr-lib-arrow { color: var(--pink); }
@media (max-width: 24rem) { .hdr-lib-tag { display: none; } }

/* radio player box - lives in the persistent left rail on every interior page */
.radiobox { background: color-mix(in srgb, var(--surface0) 60%, transparent); border: 1px solid var(--line); border-left: 2px solid var(--pink); padding: 1rem 1.05rem 1.15rem; }
.rb-head { color: var(--yellow); font-weight: 700; font-size: .95rem; display: flex; align-items: center; gap: .5rem; }
.rb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 6px color-mix(in srgb, var(--pink) 60%, transparent); animation: libpulse 1.6s ease-in-out infinite; flex: none; }
.rb-live { color: var(--pink); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; border: 1px solid color-mix(in srgb, var(--pink) 45%, var(--line)); padding: .08rem .34rem; }
.rb-blurb { color: var(--dim); font-size: .78rem; line-height: 1.45; margin: .5rem 0 .7rem; }
.rb-player { width: 100%; height: 34px; accent-color: var(--pink); }
.rb-stream { display: flex; flex-direction: column; gap: .15rem; margin-top: .55rem; }
.rb-label { color: var(--dim); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; }
.rb-stream code { display: block; color: var(--teal); font-size: .72rem; word-break: break-all; background: var(--surface0); padding: .3rem .4rem; }