/*
 * Krumbz — soft surface.
 * Warm off-white ground, squircle geometry, frosted chrome, one 45° mark.
 * Colour lives in the artwork; the interface stays quiet around it.
 */

:root {
  --paper: #EAF0E4;              /* the field's base, never seen flat */
  --paper-2: rgba(255, 255, 255, 0.5);
  --veil: rgba(255, 255, 255, 0.52);
  --veil-2: rgba(255, 255, 255, 0.38);
  --veil-3: rgba(255, 255, 255, 0.66);

  /* Solid, not alpha. A translucent grey over a coloured field lightens with
     the field and never reaches 4.5:1 — measured 3.13:1 at the worst overlap.
     These are solved against the darkest point the washes can reach. */
  --ink: #17181A;
  --ink-2: #4E525A;
  --ink-3: #6E727B;
  --hair: rgba(23, 24, 26, 0.08);
  --hair-2: rgba(23, 24, 26, 0.14);

  --accent: #7A5AA8;          /* lilac, darkened until it reads on paper */
  --cyan: #93DCDF;
  --peach: #EFAF86;
  --lilac: #BB96DA;
  --sage: #A9C6A0;
  --rose: #E7A8B8;
  --warn: #B06A4F;

  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-pill: 999px;
  --r-tile: 22%;

  --lift: 0 1px 2px rgba(40, 50, 45, 0.05), 0 6px 22px rgba(40, 50, 45, 0.08);
  --lift-2: 0 2px 6px rgba(40, 50, 45, 0.06), 0 18px 48px rgba(40, 50, 45, 0.12);

  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gap: 22px;
  --snap: 140ms;
  --arrive: 260ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

/*
 * The ground is a defocused colour field, not a flat sheet — every reference
 * puts atmosphere behind the interface and floats frosted surfaces on it. Four
 * enormous soft washes, fixed so they behave like a backdrop rather than
 * scrolling wallpaper, kept pale enough that near-black text still clears 4.5:1
 * anywhere on it.
 */
body {
  margin: 0;
  background-color: var(--paper);
  background-image:
    radial-gradient(115% 85% at 6% -12%, rgba(126, 214, 218, 0.92) 0%, rgba(126, 214, 218, 0) 56%),
    radial-gradient(95% 78% at 97% 0%, rgba(184, 142, 220, 0.82) 0%, rgba(184, 142, 220, 0) 54%),
    radial-gradient(115% 95% at 90% 98%, rgba(242, 168, 118, 0.72) 0%, rgba(242, 168, 118, 0) 58%),
    radial-gradient(125% 105% at 2% 106%, rgba(158, 197, 145, 0.85) 0%, rgba(158, 197, 145, 0) 60%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.5;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

a { color: inherit; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  border-radius: var(--r-sm);
}

:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: var(--r-xs); }
::selection { background: rgba(187, 150, 218, 0.34); }

/* -------------------------------------------------------------------- mark */

.mark { display: block; flex: 0 0 auto; }
.mark path { fill: var(--ink); }

.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-word {
  font-size: 1.05em;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.brandmark { display: block; flex: 0 0 auto; text-decoration: none; color: var(--ink); }
.hero-mark { margin: 0 0 40px; }
.hero-mark .logo-word { font-size: 46px; }

/* ------------------------------------------------------------------ tiles */

.tile {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--r-tile);
  background: var(--veil-2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--lift);
}
.tile-art { display: block; width: 100%; height: 100%; }
.tile-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * The photography is open-source and mostly low-resolution, so it arrives with
 * a hard compression edge against the tile. Blur and frost the outer ring only
 * — the centre stays sharp — and the picture reads as atmosphere rather than a
 * bad crop. Same treatment on sleeves and portraits so it's one system.
 */
.tile.has-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  backdrop-filter: blur(10px) saturate(1.12);
  -webkit-backdrop-filter: blur(10px) saturate(1.12);
  -webkit-mask-image: radial-gradient(ellipse 76% 76% at 50% 48%, transparent 46%, #000 88%);
  mask-image: radial-gradient(ellipse 76% 76% at 50% 48%, transparent 46%, #000 88%);
  background: radial-gradient(ellipse 78% 78% at 50% 48%,
    rgba(255, 255, 255, 0) 44%,
    rgba(255, 255, 255, 0.34) 76%,
    rgba(255, 255, 255, 0.62) 100%);
}
.tile.has-photo .tile-img { filter: saturate(1.06) contrast(1.03); }

.tile .tc {
  position: absolute;
  z-index: 2;
  font-size: 12.5px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--tile-ink, #17181A);
  background: var(--tile-ground, #FBFAF8);
  padding: 4px 9px;
  border-radius: var(--r-pill);
  max-width: 76%;
  pointer-events: none;
}
.tile .tl { top: 10px; left: 11px; }
.tile .tr { top: 10px; right: 11px; text-align: right; }
.tile .bl { bottom: 10px; left: 11px; }
.tile .br { bottom: 10px; right: 11px; text-align: right; }

/* ----------------------------------------------------------------- chrome */

.trail[hidden] { display: none; }

.trail {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--veil);
  backdrop-filter: saturate(200%) blur(26px);
  -webkit-backdrop-filter: saturate(200%) blur(26px);
  border-bottom: 1px solid var(--hair);
  padding: 13px 26px;
  display: flex;
  gap: 24px;
  align-items: center;
}

.trail-path {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
}
.trail-path::-webkit-scrollbar { display: none; }
/* Only once it actually overflows — otherwise this fades "start again" on a
   one-room trail, which reads as a rendering fault rather than a hint. */
.trail-path.clipped {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30px);
  mask-image: linear-gradient(to right, transparent 0, #000 30px);
}
.trail-path button {
  white-space: nowrap;
  max-width: 24ch;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 0 auto;
  color: var(--ink-2);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  transition: background var(--snap) var(--ease), color var(--snap) var(--ease);
}
.trail-path button:hover { color: var(--ink); background: rgba(23, 24, 26, 0.05); }
.trail-path .now { color: var(--ink); font-weight: 500; }
.trail-path .sep { flex: 0 0 auto; color: var(--ink-3); }
.trail-path .more {
  font-family: var(--mono);
  font-size: 12px;
  background: rgba(187, 150, 218, 0.3);
  color: var(--ink);
}

.drift { display: flex; gap: 24px; margin: 0; flex: 0 0 auto; }
.drift div { text-align: right; }
.drift dt {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.drift dd {
  margin: 1px 0 0;
  font-size: 19px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/*
 * Reading content rides a sheet of frosted glass over the field, the way the
 * note card does in the references. That is what lets the colour stay at full
 * strength: small text never touches it. Measured 5.2:1 for secondary text on
 * a 0.5 panel at the field's darkest point.
 */
main {
  flex: 1;
  padding: 8px 40px 88px;
  max-width: 1300px;
  width: 100%;
  margin: 26px auto 40px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: saturate(150%) blur(34px);
  -webkit-backdrop-filter: saturate(150%) blur(34px);
  border-radius: 34px;
  box-shadow: 0 2px 8px rgba(40, 50, 45, 0.05), 0 24px 70px rgba(40, 50, 45, 0.10);
}

/* The opening screen is the exception: the mark and the headline sit straight
   on the atmosphere, at display size, where 3:1 is the bar and they clear 7:1. */
main:has(.threshold) {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  margin-top: 0;
}

.eyebrow {
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  margin: 0 0 14px;
}

/* -------------------------------------------------------------- threshold */

.threshold { padding: 12vh 0 0; }
.threshold h1 {
  font-size: clamp(34px, 5.6vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.042em;
  font-weight: 500;
  margin: 0 0 20px;
  max-width: 17ch;
  text-wrap: balance;
}
.threshold .lede {
  color: var(--ink-2);
  font-size: 18.5px;
  line-height: 1.55;
  margin: 0 0 40px;
  max-width: 50ch;
}

.finder {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--veil-3);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-radius: var(--r-pill);
  padding: 7px 7px 7px 24px;
  max-width: 680px;
  box-shadow: var(--lift);
  transition: box-shadow var(--snap) var(--ease);
}
.finder:focus-within { box-shadow: var(--lift-2); }
.finder input {
  flex: 1;
  font-family: var(--sans);
  font-size: 18px;
  background: none;
  border: none;
  color: var(--ink);
  padding: 12px 0;
  min-width: 0;
  letter-spacing: -0.01em;
}
.finder input::placeholder { color: var(--ink-3); }
.finder input:focus { outline: none; }
.finder button {
  font-size: 15px;
  font-weight: 500;
  background: var(--ink);
  color: #fff;
  padding: 13px 26px;
  border-radius: var(--r-pill);
  transition: transform var(--snap) var(--ease), opacity var(--snap) var(--ease);
}
.finder button:hover { opacity: 0.86; }
.finder button:active { transform: scale(0.97); }

.suggest { margin-top: 26px; font-size: 15.5px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.suggest button {
  color: var(--ink);
  background: var(--veil-3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 7px 15px;
  border-radius: var(--r-pill);
  font-size: 15px;
  box-shadow: var(--lift);
  transition: transform var(--snap) var(--ease);
}
.suggest button:hover { transform: translateY(-1px); }

.results { margin-top: 34px; }
.results button {
  display: block;
  width: 100%;
  padding: 15px 20px;
  border-radius: var(--r-md);
  margin-bottom: 6px;
  transition: background var(--snap) var(--ease);
}
.results button:hover { background: var(--veil-3); backdrop-filter: blur(14px); box-shadow: var(--lift); }
.results .rname { font-size: 17.5px; font-weight: 500; letter-spacing: -0.015em; }
.results .rmeta { font-size: 14px; color: var(--ink-2); margin-top: 1px; }

/* --------------------------------------------------------------- the grid */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: var(--gap);
  margin-top: 6px;
  align-items: start;
}

.card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  transition: transform var(--snap) var(--ease);
}
.card:hover { transform: translateY(-3px); }
.card .ct {
  display: block;
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: -0.018em;
  margin: 14px 0 0;
  line-height: 1.28;
}
.card .cs {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  color: var(--ink-2);
  margin-top: 3px;
  line-height: 1.38;
}
.card .cm { display: block; font-size: 13px; color: var(--ink-3); margin-top: 7px; }
/* Named on the sleeve but with no page behind them. Nothing says so in words
   — the card just stops behaving like a door, and the name sits quieter than
   the ones you can open. */
.card.dead { cursor: default; }
.card.dead:hover { transform: none; }
.card.dead .ct { color: var(--ink-2); }
.card.dead .tile { opacity: 0.72; }

/* -------------------------------------------------------------- headings */

/* The one recurring flourish, lifted straight off the assistant card in the
   references: a cyan-to-peach-to-lilac wash that fades out to the right. It
   replaces the hairline on every section, so it reads as a system. */
.section-rule {
  position: relative;
  padding-bottom: 16px;
  margin: 68px 0 24px;
}
.section-rule::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(147, 220, 223, 0.95) 0%,
    rgba(239, 175, 134, 0.85) 34%,
    rgba(187, 150, 218, 0.8) 62%,
    rgba(187, 150, 218, 0) 100%);
}
.section-rule h2 { font-size: 20px; font-weight: 500; margin: 4px 0 0; letter-spacing: -0.028em; }
.sect-n {
  display: block;
  font-size: clamp(36px, 4.6vw, 50px);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.sect-n i {
  font-style: normal;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: var(--ink-3);
  margin-left: 11px;
  vertical-align: 0.48em;
}
.credits-rule { margin-top: 76px; }
.credits-rule h2 { margin: 0; }

.person-head, .room-head { padding: 44px 0 0; display: grid; grid-template-columns: 230px 1fr; gap: 34px; align-items: start; }
.person-head h1, .room-head h1 {
  font-size: clamp(32px, 4.8vw, 54px);
  font-weight: 500;
  letter-spacing: -0.042em;
  /* 1.03 left a 54px name in a 55px box — no room for a descender to sit in
     before the line under it. */
  line-height: 1.08;
  margin: 0 0 12px;
  text-wrap: balance;
}
.ph-meta, .rh-meta { min-width: 0; }
.ph-art .tile, .rh-art .tile { border-radius: var(--r-lg); box-shadow: var(--lift-2); }
.person-head .sub { color: var(--ink-2); margin: 0 0 20px; max-width: 54ch; font-size: 17px; }

.room-head .yr { font-size: 14px; color: var(--ink-3); margin: 0 0 12px; letter-spacing: 0.005em; }
.room-head .where { font-size: 16.5px; color: var(--ink); margin: 0; }
.room-head .where .src { font-size: 13px; color: var(--ink-3); }
.room-head .where .unknown { color: var(--warn); }
.srcline { font-size: 13px; color: var(--ink-3); margin: 12px 0 0; }

.backlink { margin: 26px 0 0; font-size: 15px; }
.backlink a {
  text-decoration: none;
  color: var(--ink-2);
  background: var(--veil-3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  box-shadow: var(--lift);
  display: inline-block;
  transition: transform var(--snap) var(--ease), color var(--snap) var(--ease);
}
.backlink a:hover { color: var(--ink); transform: translateX(-2px); }

/* clear of the biography above it, which it was sitting right on top of */
.rolebar { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 22px; }
/* These are buttons now: pressing one filters the rooms underneath to that
   role. Same pill as before at rest, so the bar reads as it always did until
   you touch it. */
.rolebar button {
  font-size: 13.5px;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: var(--veil-2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ink-2);
  transition: background var(--snap) var(--ease), color var(--snap) var(--ease),
    transform var(--snap) var(--ease);
}
.rolebar button:hover { background: var(--veil-3); transform: translateY(-1px); }
.rolebar button.on { background: var(--ink); color: #fff; }
.rolebar button.on b { color: #fff; }
.rolebar b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .rolebar button { transition: none; }
  .rolebar button:hover { transform: none; }
}

.crosslink { margin: 0 0 22px; font-size: 15px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.crosslink a {
  text-decoration: none;
  background: var(--ink);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  font-weight: 500;
  transition: opacity var(--snap) var(--ease), transform var(--snap) var(--ease);
}
.crosslink a:hover { opacity: 0.86; transform: translateY(-1px); }
.crosslink span { color: var(--ink-3); }
/* Below the rooms rather than inside the header, so it needs the space above
   it instead of below. */
.crosslink.under-work { margin: 10px 0 30px; }

/* ---------------------------------------------------------------- reading */

.bio { max-width: none; }
.bio-wait { color: var(--ink-3); }
.spread-lead {
  font-size: clamp(19px, 2.05vw, 23px);
  line-height: 1.5;
  letter-spacing: -0.021em;
  margin: 0 0 26px;
  max-width: 42ch;
}
.pull {
  margin: 0 0 28px;
  padding: 0;
  font-size: clamp(21px, 2.5vw, 29px);
  line-height: 1.32;
  letter-spacing: -0.03em;
  font-weight: 500;
  /* A ch is a character of the *current* size, so pinning a quote to a small
     character count makes big type wrap sooner than the small type above it —
     21px in a 497px column under a 17px paragraph in a 630px one. The measure
     is set in the same units as the body text it sits with. */
  max-width: 30ch;
  color: var(--ink);
}
.spread-rest { columns: 2; column-gap: 38px; max-width: 76ch; }
.spread-rest p {
  margin: 0 0 15px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-2);
  break-inside: avoid;
}
.bio-owns { margin: 20px 0 0; font-size: 15px; }
.bio-owns span { font-size: 13px; color: var(--ink-3); margin-right: 9px; }
.bio-owns a, .chairs a, .cur-names a, .elsewhere a, .srcalso a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1.5px solid rgba(122, 90, 168, 0.35);
  transition: border-color var(--snap) var(--ease);
}
.bio-owns a:hover, .chairs a:hover, .cur-names a:hover, .elsewhere a:hover, .srcalso a:hover { border-bottom-color: var(--accent); }

.passages blockquote {
  margin: 0 0 18px;
  padding: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* ------------------------------------------------------------ list blocks */

.chairs { }
.chair {
  display: flex;
  gap: 20px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 16px;
  color: var(--ink);
}
.chair b {
  font-size: 13px;
  letter-spacing: 0.005em;
  color: var(--warn);
  font-weight: 500;
  min-width: 140px;
  flex: 0 0 auto;
}
.chairs .scene-row b { color: var(--ink-2); }
.chairs code { font-family: var(--mono); font-size: 13.5px; color: var(--accent); }
.chair .src { display: block; margin-top: 3px; }

.currents { }
.current {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 6px 22px;
  padding: 15px 0;
  border-bottom: 1px solid var(--hair);
  align-items: baseline;
}
.cur-tag {
  font-size: 13px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 5px 13px;
  border-radius: var(--r-pill);
  justify-self: start;
}
.cur-names { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.cur-names a { font-size: 16px; }

.tracks { }
.track {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 0 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hair);
  align-items: baseline;
}
.track .tn { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.track .tt { font-size: 16.5px; }
.track .tc2 { font-size: 13px; color: var(--ink-3); }
.track.silent .tt { color: var(--ink-3); }
.track.silent .tc2 { color: var(--warn); }

.gn-h { font-size: 13.5px; font-weight: 500; color: var(--ink-3); margin: 28px 0 8px; letter-spacing: 0.005em; }

.note { font-size: 15.5px; color: var(--ink-3); margin: 18px 0 0; max-width: 64ch; line-height: 1.55; }
.note em { font-style: italic; color: var(--ink-2); }
.tally { font-size: 13.5px; color: var(--ink-3); margin: 34px 0 0; }



.srclinks { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 18px; }
.srclinks a {
  font-size: 14.5px;
  text-decoration: none;
  color: var(--ink);
  background: var(--veil-3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 9px 18px;
  border-radius: var(--r-pill);
  box-shadow: var(--lift);
  transition: transform var(--snap) var(--ease);
}
.srclinks a:hover { transform: translateY(-1px); }
.srcalso { font-size: 15px; color: var(--ink-3); margin: 0; max-width: 64ch; line-height: 1.55; }

.src { font-size: 13px; color: var(--ink-3); }
.src.sleeve-only { color: var(--warn); }
.met { font-size: 13px; color: #5C8A6B; }
.as { font-size: 13px; color: var(--accent); }

.resolving { font-size: 14px; color: var(--ink-3); padding: 18px 0; }
.loading, .failed { font-size: 15px; color: var(--ink-3); padding: 64px 0; }
.failed { color: var(--warn); }

.colophon {
  border-top: none;
  background: none;
  padding: 26px 26px 40px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-3);
}
.colophon p { margin: 0; max-width: 94ch; }
.colophon a, .colophon b { color: var(--ink-2); }

/* ------------------------------------------------------------ breakpoints */

@media (max-width: 1024px) { .grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); } }

@media (max-width: 860px) {
  .person-head, .room-head { grid-template-columns: 1fr; gap: 22px; }
  .ph-art, .rh-art { max-width: 210px; }
  .spread-rest { columns: 1; }
  .current { grid-template-columns: 1fr; }
  .chair { flex-direction: column; gap: 4px; }
  .chair b { min-width: 0; }
}

@media (max-width: 760px) {
  main { margin: 14px auto 24px; padding: 6px 22px 64px; border-radius: 26px; }
}

@media (max-width: 620px) {
  .trail {
    padding: 11px 18px;
    gap: 10px 16px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
  }
  .brandmark { grid-row: 1; grid-column: 1; }
  .drift { grid-row: 1; grid-column: 2; justify-content: flex-end; gap: 16px; }
  .trail-path { grid-row: 2; grid-column: 1 / -1; font-size: 13.5px; }
  .drift dt { font-size: 10px; }
  .drift dd { font-size: 17px; }
  main { padding: 6px 18px 56px; }
  .colophon { padding: 22px 18px 34px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); gap: 16px; }
  .hero-mark .logo-word { font-size: 34px; }
}

/* ---------------------------------------------------------------- motion */

@media (prefers-reduced-motion: no-preference) {
  .stagger > * { animation: arrive var(--arrive) var(--ease) both; }
  .stagger > *:nth-child(1) { animation-delay: 0ms; }
  .stagger > *:nth-child(2) { animation-delay: 45ms; }
  .stagger > *:nth-child(3) { animation-delay: 90ms; }
  .stagger > *:nth-child(4) { animation-delay: 135ms; }
  .stagger > *:nth-child(5) { animation-delay: 180ms; }
  .stagger > *:nth-child(6) { animation-delay: 225ms; }
  .stagger > *:nth-child(n + 7) { animation-delay: 260ms; }
  .pull, .current, .passages blockquote { animation: arrive var(--arrive) var(--ease) both; }
}

@keyframes arrive {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ------------------------------------------------------------- listen links */

.listen { display: inline-flex; gap: 5px; align-items: center; vertical-align: middle; }
.chip-listen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  /* One consistent chip, colour carried by the glyph. Tinting each background
     to its own brand hue turned a row of five into a row of pale blobs. */
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 1px 2px rgba(40, 50, 45, 0.06);
  transition: transform var(--snap) var(--ease), background var(--snap) var(--ease);
}
.chip-listen svg { width: 13px; height: 13px; color: var(--svc); }
.chip-listen svg * { vector-effect: non-scaling-stroke; }
.chip-listen:hover { background: #fff; transform: scale(1.1); }

/* A stored link and a guess at one must not look identical. The dashed ring
   marks the YouTube chip that runs a search rather than opening the record —
   same glyph, so the free option is still findable at a glance, but visibly
   not a promise. */
.chip-search {
  background: rgba(255, 255, 255, 0.42);
  box-shadow: none;
  border: 1.5px dashed rgba(226, 59, 46, 0.55);
}
.chip-search:hover { background: rgba(255, 255, 255, 0.9); }
/* Structurally different from a chip, because it is a structurally different
   claim: go and look, rather than here it is. */
.searchrow { font-size: 14px; color: var(--ink-3); }
.searchrow a {
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--hair-2);
}
.searchrow a:hover { color: var(--ink); border-bottom-color: var(--accent); }

.listen-lg { gap: 8px; }
.listen-lg .chip-listen { width: 34px; height: 34px; }
.listen-lg .chip-listen svg { width: 18px; height: 18px; }
.listen-row { margin: 16px 0 0; }

/* -------------------------------------------------------- track disclosure */

.trk { border-bottom: 1px solid var(--hair); }
.trk > summary {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 0 18px;
  padding: 14px 0;
  align-items: center;
  cursor: pointer;
  list-style: none;
  border: none;
  transition: padding-left var(--snap) var(--ease);
}
.trk > summary::-webkit-details-marker { display: none; }
.trk > summary:hover { padding-left: 6px; }
.trk .tmeta { display: inline-flex; align-items: center; gap: 12px; }
.trk .tc2 {
  font-size: 12.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  min-width: 2.5ch;
  text-align: right;
}
.trk[open] > summary { padding-bottom: 8px; }
.trk[open] .tt { font-weight: 500; }

.trk-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 2px 20px;
  padding: 2px 0 16px 58px;
}
.trk-p {
  display: flex;
  flex-direction: column;
  padding: 7px 10px;
  border-radius: var(--r-xs);
  text-decoration: none;
  transition: background var(--snap) var(--ease);
}
.trk-p:hover { background: rgba(255, 255, 255, 0.6); }
.trk-n { font-size: 15px; font-weight: 500; }
.trk-r { font-size: 13.5px; color: var(--ink-2); }
.trk-body .note { padding-left: 10px; margin: 6px 0 0; }

@media (prefers-reduced-motion: no-preference) {
  .trk[open] .trk-body > * { animation: arrive 200ms var(--ease) both; }
}
@media (max-width: 620px) {
  .trk-body { padding-left: 0; grid-template-columns: 1fr; }
}

.trk .tdur {
  font-size: 13px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  min-width: 4ch;
  text-align: right;
}
.press b { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.press-here { background: rgba(147, 220, 223, 0.4); padding: 2px 9px; border-radius: var(--r-pill); font-size: 13.5px; }
.press-here b { color: var(--ink); }
.press a { margin-right: 4px; }

.album-bio {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 14px 0 0;
  max-width: 54ch;
}

.via { margin: 0 0 10px; font-size: 15.5px; color: var(--ink-2); }
.via span {
  background: rgba(255, 255, 255, 0.7);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  color: var(--ink);
  margin-right: 4px;
}
.via a { color: var(--ink); text-decoration: none; border-bottom: 1.5px solid rgba(122, 90, 168, 0.35); }
.via a:hover { border-bottom-color: var(--accent); }
.pull-sm { font-size: clamp(18px, 1.9vw, 21px); max-width: 44ch; margin-top: 18px; }

/* ------------------------------------------------------- what to do next

   The threshold's lower half. Same vocabulary as the rest of the site —
   frosted pill, generative tile, the one ease curve — so it reads as more of
   the page rather than a widget bolted to the bottom of it. */

.onward { margin-top: 42px; }
.onward-h {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 30px 0 14px;
}
.onward .onward-h:first-child { margin-top: 0; }
.onward .suggest { margin-top: 0; }
.onward .note { margin-top: 10px; }

/* Two across on any comfortable width, stacking on a phone. auto-fit rather
   than a fixed pair so a single card does not sit in a half-empty row. */
.daily {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.day-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 14px;
  align-items: center;
  text-align: left;
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--veil-3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--lift);
  transition: transform var(--snap) var(--ease), box-shadow var(--snap) var(--ease);
}
.day-card:hover { transform: translateY(-2px); box-shadow: var(--lift-2); }
.day-card .tile { grid-row: 1 / 4; width: 56px; height: 56px; }
.dc-label {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dc-name { font-size: 19px; font-weight: 500; color: var(--ink); line-height: 1.2; }
.dc-sub {
  font-size: 13px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The role and room a passed-over name came from, stacked under it so the
   pill still reads as one tap target. */
.suggest button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.suggest .ps { font-size: 11.5px; color: var(--ink-3); line-height: 1.3; min-height: 1.3em; }

@media (prefers-reduced-motion: reduce) {
  .day-card, .day-card:hover { transition: none; transform: none; }
}

/* The track that got licensed, trailing its soundtrack. Pushed to the right so
   the film titles stay in one readable column down the left. */
.chair .cs {
  margin-left: auto;
  text-align: right;
  font-size: 13.5px;
  color: var(--ink-3);
}

/* ------------------------------------------------------------------ the web

   An expanding map. Same materials as the rest of the site — the colour field
   behind it, the frosted panel around it, the squircle tile as the node — but
   it moves, so everything that moves uses the one easing curve. */

.web-head { margin-bottom: 16px; }
.web-head h1 { margin: 6px 0 8px; }
.web-head .sub { max-width: 60ch; }
.web-head .eyebrow a { color: var(--ink-2); text-decoration: none; }
.web-head .eyebrow a:hover { color: var(--ink); }

.webbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--ink-3);
}
.webfilter { display: inline-flex; align-items: center; gap: 8px; }
.webfilter select {
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--veil-3);
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  padding: 7px 14px;
  cursor: pointer;
}
.webcount { font-family: var(--mono); font-size: 12.5px; }
.webreset {
  margin-left: auto;
  font-size: 13.5px;
  padding: 7px 15px;
  border-radius: var(--r-pill);
  background: var(--veil-3);
  color: var(--ink);
  box-shadow: var(--lift);
  transition: transform var(--snap) var(--ease);
}
.webreset:hover { transform: translateY(-1px); }

.webwrap {
  margin: 12px 0 14px;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--lift);
}

/*
 * The canvas carries the site's own colour field rather than sitting on a
 * white sheet — the same four washes as the page, kept pale so the tiles and
 * the lines stay legible over them.
 */
.webstage {
  position: relative;
  height: min(78vh, 780px);
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  background-color: #F6F7F3;
  background-image:
    radial-gradient(70% 60% at 12% 8%, rgba(126, 214, 218, 0.5) 0%, rgba(126, 214, 218, 0) 60%),
    radial-gradient(60% 55% at 92% 6%, rgba(184, 142, 220, 0.42) 0%, rgba(184, 142, 220, 0) 58%),
    radial-gradient(75% 65% at 88% 96%, rgba(242, 168, 118, 0.38) 0%, rgba(242, 168, 118, 0) 62%),
    radial-gradient(80% 70% at 6% 98%, rgba(158, 197, 145, 0.45) 0%, rgba(158, 197, 145, 0) 64%);
}
.webstage.grabbing { cursor: grabbing; }

.webzoom {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.webzoom button {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  border-radius: var(--r-pill);
  background: var(--veil-3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--ink);
  box-shadow: var(--lift);
  transition: transform var(--snap) var(--ease), background var(--snap) var(--ease);
}
.webzoom button:hover { background: #fff; transform: translateY(-1px); }

/* one transform for the whole map, so panning and zooming cost nothing */
.weblayer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-origin: 0 0;
  will-change: transform;
}
.web {
  position: absolute;
  left: -4000px;
  top: -4000px;
  width: 8000px;
  height: 8000px;
  overflow: visible;
  pointer-events: none;
}
.web > g { transform: translate(4000px, 4000px); }

.chord {
  fill: none;
  stroke: url(#webwash);
  stroke-opacity: 0.55;
  stroke-linecap: round;
}

.webtile {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0;
  border-radius: var(--r-tile);
  transition: opacity var(--arrive) var(--ease), filter var(--snap) var(--ease);
  will-change: transform;
}
.webtile .tile { width: 100%; box-shadow: var(--lift); }
.webtile .wt-name {
  position: absolute;
  top: 104%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 12.5px;
  color: var(--ink-2);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85), 0 0 4px rgba(255, 255, 255, 0.9);
  pointer-events: none;
}
/* Swelling in rather than appearing: the same easing as everything else, and
   it is what makes a click read as that person's people arriving. */
.webtile .tile { transition: transform var(--arrive) var(--ease), opacity var(--arrive) var(--ease); }
.webtile.arriving .tile { transform: scale(0.3); opacity: 0; }
.webtile.arriving .wt-name { opacity: 0; }
.webtile .wt-name { transition: opacity var(--arrive) var(--ease); }

.webtile:hover { filter: brightness(1.04); z-index: 3; }
.webtile:hover .tile { box-shadow: var(--lift-2); }
.webtile:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; }

/* somebody whose own rooms are already on the map */
.webtile.opened .tile { outline: 2.5px solid rgba(122, 90, 168, 0.55); outline-offset: 2px; }
.webtile.self .tile { outline: 3px solid var(--ink); outline-offset: 2px; }
.webtile.picked { z-index: 4; }
.webtile.picked .tile { outline: 3px solid var(--accent); outline-offset: 3px; }
.webtile.muted { opacity: 0.16; pointer-events: none; }
.webtile.muted .wt-name { opacity: 0; }

/* The switch: with somebody selected, everyone they shared a room with stays
   forward and the rest of the map falls back. Click them again to let it all
   come back. */
.webtile.dim { opacity: 0.17; }
.webtile.dim .wt-name { opacity: 0.35; }
.webstage.focused .chord { stroke-opacity: 0.07; }
.webstage.focused .chord.on { stroke-opacity: 0.95; }

/* the selected person, parked under the canvas */
/* Why this name is here. Reading it should not require opening anything, so
   it fills on hover and stays on click. */
.webinfo {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--veil-3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--lift);
}
.webinfo[hidden] { display: none; }
.wi-art { width: 58px; flex: 0 0 auto; }
.wi-body { min-width: 0; flex: 1; }
.wi-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.wi-head b { font-weight: 500; font-size: 17px; }
.wi-head span { font-size: 13.5px; color: var(--ink-3); }

.wi-rooms { list-style: none; margin: 6px 0 0; padding: 0; }
.wi-rooms li {
  font-size: 14px;
  color: var(--ink-2);
  padding: 2px 0;
}
.wi-rooms b { font-weight: 500; color: var(--ink); }
.wi-rooms em { font-style: normal; color: var(--ink); }
.wi-rooms i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-3);
}
.wi-none { color: var(--ink-3); }

.wi-rooms li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wi-room { min-width: 0; }

/* Hearing it. A stored link is solid; a search says so with the dashed ring,
   the same distinction the track lists make. */
.wi-hear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 11px 3px 5px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 1px 2px rgba(40, 50, 45, 0.07);
  text-decoration: none;
  color: var(--ink);
  font-size: 12.5px;
  transition: transform var(--snap) var(--ease), background var(--snap) var(--ease);
}
.wi-hear svg { width: 15px; height: 15px; flex: 0 0 auto; color: #E23B2E; }
.wi-hear span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wi-hear:hover { background: #fff; transform: translateY(-1px); }
.wi-hear.search {
  background: rgba(255, 255, 255, 0.45);
  box-shadow: none;
  border: 1.5px dashed rgba(226, 59, 46, 0.5);
}
.wi-hear.search:hover { background: rgba(255, 255, 255, 0.9); }

.wi-actions {
  margin-left: auto;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.wi-state { font-size: 12px; color: var(--ink-3); }
.wi-open {
  text-decoration: none;
  background: var(--ink);
  color: #fff;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .webinfo { flex-wrap: wrap; }
  .wi-actions { margin-left: 0; width: 100%; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .webtile, .webtile .tile, .webtile .wt-name, .webreset, .webzoom button, .wi-hear { transition: none; }
  .webtile.arriving .tile { transform: none; opacity: 1; }
  .webreset:hover, .webzoom button:hover { transform: none; }
}

}

}


/* ------------------------------------------------------------- folded sections

   Every section heading is a summary. The existing section-rule is reused
   whole, so an open section looks exactly as it did before this existed — the
   only new mark is the chevron. */

details.sect { margin: 0; }
details.sect > summary {
  list-style: none;
  cursor: pointer;
  position: relative;
}
details.sect > summary::-webkit-details-marker { display: none; }

/* The chevron sits against the heading's own baseline rather than the rule,
   which is a hairline the full width of the column. */
details.sect > summary::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -7px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform var(--snap) var(--ease), border-color var(--snap) var(--ease);
}
details.sect[open] > summary::after { transform: rotate(-135deg); margin-top: -3px; }
details.sect > summary:hover::after { border-color: var(--ink); }
details.sect > summary:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  details.sect > summary::after { transition: none; }
}

/* --------------------------------------------------------------- consent

   Same frosted panel and pill buttons as the rest of the site. It sits above
   the content rather than over it — the site is readable while you decide. */

.cookiebar {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  margin: 0 auto;
  max-width: 620px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--veil-3);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid var(--hair);
  box-shadow: var(--lift-2);
  transform: translateY(14px);
  opacity: 0;
  transition: transform var(--arrive) var(--ease), opacity var(--arrive) var(--ease);
}
.cookiebar.up { transform: translateY(0); opacity: 1; }
.cookiebar p {
  margin: 0;
  flex: 1 1 300px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink-2);
}

/* Both answers the same size and weight — a decline that is harder to find
   than an accept is not a choice. */
.cookiebar-acts { display: flex; gap: 8px; flex: 0 0 auto; }
.cookiebar-acts button {
  font-size: 14.5px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--ink);
  box-shadow: var(--lift);
  transition: transform var(--snap) var(--ease), background var(--snap) var(--ease);
}
.cookiebar-acts button[data-consent="granted"] { background: var(--ink); color: #fff; }
.cookiebar-acts button:hover { transform: translateY(-1px); }

.cookie-link {
  font: inherit;
  font-size: inherit;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
  margin-left: 4px;
}
.cookie-link:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .cookiebar { transition: none; transform: none; opacity: 1; }
  .cookiebar-acts button:hover { transform: none; }
}

/* Reaching further back. Offered only when something actually stopped the
   walk, so it never promises ground that is not there. */
.morerow { margin: 4px 0 22px; }
.showmore {
  font-size: 14.5px;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  background: var(--veil-3);
  color: var(--ink);
  box-shadow: var(--lift);
  transition: transform var(--snap) var(--ease), background var(--snap) var(--ease);
}
.showmore:hover { background: #fff; transform: translateY(-1px); }
.showmore[disabled] { opacity: 0.6; cursor: default; transform: none; }
.showmore[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .showmore { transition: none; }
  .showmore:hover { transform: none; }
}

/* Credits Wikipedia has and the archive does not. They are not doors yet —
   opening one goes looking for the record. */
.wikirow .wikifind {
  font: inherit;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--hair-2);
  text-underline-offset: 3px;
  padding: 0;
  text-align: left;
}
.wikirow .wikifind:hover { text-decoration-color: var(--accent); }
.wikirow .wikifind[disabled] { color: var(--ink-3); cursor: default; }
.wikirow.missing .wikifind {
  text-decoration: line-through;
  color: var(--ink-3);
  cursor: default;
}
.wikirow.missing::after {
  content: "not in the archive";
  font-size: 12px;
  color: var(--warn);
  margin-left: 10px;
}

/* ------------------------------------------------------------- the player

   A button until it is pressed. Nothing is fetched and no cookie is set
   until somebody actually asks to hear something, which is the only way an
   embed can sit on a page that has just asked for consent. */

.ytslot { display: block; margin: 0 0 18px; }
.trk-body .ytslot { margin: 0 0 14px; }

.ytplay {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 12px;
  border-radius: var(--r-pill);
  background: var(--veil-3);
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  box-shadow: var(--lift);
  transition: transform var(--snap) var(--ease), background var(--snap) var(--ease);
}
.ytplay svg { width: 18px; height: 18px; color: #E23B2E; flex: 0 0 auto; }
.ytplay:hover { background: #fff; transform: translateY(-1px); }
.ytplay[disabled] { opacity: 0.65; cursor: default; transform: none; }
.ytplay.search { border: 1.5px dashed rgba(226, 59, 46, 0.5); box-shadow: none; background: var(--veil-2); }

.ytslot.playing { max-width: 680px; }
.ytframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--r-md);
  box-shadow: var(--lift-2);
  background: #000;
}

@media (prefers-reduced-motion: reduce) {
  .ytplay { transition: none; }
  .ytplay:hover { transform: none; }
}