/* Vatar · Accra cover art presentation. Every colour, font, space, radius and motion value is a design-system token
   (assets/ds/tokens.css, a byte-for-byte copy of shared/design-system/tokens.css). The only raw values are layout
   ratios and viewport/container-relative sizes. Dark only. The boldness is spent on one object: the lilac sleeve. */

:root {
  --side-w: calc(var(--space-12) * 6);              /* 288px sidebar */
  --edge: var(--space-3);                           /* sidebar inset from the viewport */
  --bar-h: calc(var(--space-12) + var(--space-4));  /* the top bar below 1024px */
  --ground: var(--color-bg-canvas);                 /* black: the logo's own ground */
  --card: var(--color-bg-surface);
  --raised: var(--color-bg-surface-raised);
  --line: var(--color-border-subtle);
  --content-max: 72rem;
  --inner: calc(var(--radius-md) - var(--space-1) * 1.5);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ground); }
body {
  margin: 0; background: var(--ground); color: var(--color-text-primary);
  font-family: var(--type-body-font-family); font-size: var(--type-body-font-size); line-height: var(--type-body-line-height);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
::selection { background: var(--color-brand-lilac); color: var(--color-text-on-accent); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: var(--space-4); top: var(--space-4); z-index: var(--z-skip-link); padding: var(--space-2) var(--space-4); background: var(--color-brand-lilac); color: var(--color-text-on-accent); transform: translateY(-200%); }
.skip:focus { transform: none; }
main:focus, .chapter:focus, .folder:focus { outline: none; }
.ico { width: var(--space-4); height: var(--space-4); flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tnum { font-feature-settings: var(--font-feature-tabular); }
.sub { font-size: var(--font-size-16); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-3); }
.status { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-secondary); }
.status::before { content: ""; width: calc(var(--space-1) * 1.5); height: calc(var(--space-1) * 1.5); border-radius: var(--radius-pill); background: var(--color-brand-amber); }

/* ---------- small buttons ---------- */
.hbtn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: var(--space-8); padding-inline: var(--space-3); border-radius: var(--radius-xs);
  font-size: var(--font-size-14); font-weight: var(--font-weight-semibold); line-height: 1; text-decoration: none; white-space: nowrap;
  transition: background-color var(--motion-duration-fast) var(--motion-easing-standard), transform var(--motion-duration-press) var(--motion-easing-standard);
}
.hbtn:active { transform: scale(var(--motion-scale-press)); }
.hbtn--lilac { background: var(--color-brand-lilac); color: var(--color-text-on-accent); }
.hbtn--lilac:hover { background: var(--color-action-primary-bg-hover); }
.hbtn--paper { background: var(--color-brand-paper); color: var(--color-text-inverse); }
.hbtn--paper:hover { background: var(--color-neutral-100); }
.hbtn .ico { width: var(--space-4); height: var(--space-4); }

/* ---------- sidebar: a top bar with a dropdown below 1024px, a fixed column from 1024px ---------- */
.side { position: fixed; z-index: var(--z-header); top: var(--edge); left: var(--edge); right: var(--edge); display: grid; gap: var(--space-2); align-content: start; }
.side__card { background: var(--card); border: var(--border-width-hairline) solid var(--line); border-radius: var(--radius-md); padding: calc(var(--space-1) * 1.5); }
.side__top { display: flex; align-items: center; gap: calc(var(--space-1) * 1.5); }
.side__brand { display: flex; align-items: center; gap: var(--space-3); flex: none; padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1); border-radius: var(--inner); text-decoration: none; }
.side__mark { display: grid; place-items: center; width: var(--space-10); height: var(--space-10); border-radius: var(--radius-sm); background: var(--color-brand-black); }
.side__mark img { width: var(--space-6); }
.side__names { display: grid; font-size: var(--font-size-14); line-height: var(--font-line-height-label); }
.side__name { font-weight: var(--font-weight-semibold); }
.side__sub { color: var(--color-brand-lilac); white-space: nowrap; }
.side__current {
  display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 0; height: var(--space-12); padding-inline: var(--space-3);
  border: 0; border-radius: var(--inner); background: var(--raised); cursor: pointer; text-align: left; font-size: var(--font-size-14); color: var(--color-text-primary);
}
.side__current:hover { background: var(--color-neutral-700); }
.side__ico { display: inline-flex; color: var(--color-brand-lilac); }
.side__cur { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side__chev { width: var(--space-4); height: var(--space-4); flex: none; color: var(--color-text-tertiary); transition: transform var(--motion-duration-base) var(--motion-easing-standard); }
.side.is-open .side__chev { transform: rotate(180deg); }
.side__list { display: none; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; max-height: calc(100svh - var(--bar-h) - var(--edge) * 3); }
.side__list::-webkit-scrollbar { display: none; }
.side.is-open .side__list { display: block; box-shadow: var(--elevation-overlay); animation: drop var(--motion-duration-base) var(--motion-easing-out); }
@keyframes drop { from { opacity: 0; transform: translateY(calc(var(--motion-distance-nudge) * -2)); } }
.side__ol { display: grid; gap: var(--space-0-5); }
.side__grp { padding: var(--space-3) var(--space-2) var(--space-1); font-size: var(--font-size-12); color: var(--color-text-tertiary); }
.side__ol a, .side__wait {
  display: flex; align-items: center; gap: var(--space-3); min-height: calc(var(--space-8) + var(--space-1)); padding: var(--space-1) var(--space-2);
  border-radius: var(--inner); font-size: var(--font-size-14); line-height: var(--font-line-height-label); color: var(--color-text-secondary); text-decoration: none;
  transition: background-color var(--motion-duration-fast) var(--motion-easing-standard), color var(--motion-duration-fast) var(--motion-easing-standard);
}
.side__ol a:hover { background: var(--raised); color: var(--color-text-primary); }
.side__ol a[aria-current] { background: var(--raised); color: var(--color-text-primary); box-shadow: inset 0 0 0 var(--border-width-hairline) var(--color-border-default); }
.side__ol .ico { margin-inline: var(--space-1); color: var(--color-brand-lilac); }
.side__thumb { width: var(--space-6); height: var(--space-6); flex: none; border-radius: var(--radius-xs); object-fit: cover; }
.side__n { flex: none; min-width: 1.6em; font-size: var(--font-size-12); color: var(--color-text-tertiary); font-feature-settings: var(--font-feature-tabular); }
.side__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side__wait { color: var(--color-text-tertiary); }
.side__wait .side__dot { width: var(--space-6); height: var(--space-6); flex: none; display: grid; place-items: center; border-radius: var(--radius-xs); box-shadow: inset 0 0 0 var(--border-width-hairline) var(--color-border-default); }
.side__wait .side__dot::after { content: ""; width: calc(var(--space-1) * 1.5); height: calc(var(--space-1) * 1.5); border-radius: var(--radius-pill); background: var(--color-brand-amber); }

@media (min-width: 1024px) {
  .side { right: auto; bottom: var(--edge); width: var(--side-w); grid-template-rows: auto minmax(0, 1fr); }
  .side__top { display: grid; }
  .side__brand { padding: var(--space-2); }
  .side__current { height: auto; padding-block: var(--space-3); cursor: default; background: var(--color-bg-canvas); }
  .side__current:hover { background: var(--color-bg-canvas); }
  .side__chev { display: none; }
  .side__list, .side.is-open .side__list { display: block; max-height: none; box-shadow: none; animation: none; }
}
@media (max-width: 400px) { .side__name { display: none; } }

/* ---------- main column ---------- */
main { padding-inline: var(--layout-gutter-fluid); }
@media (min-width: 1024px) { main { margin-left: calc(var(--side-w) + var(--edge)); } }
.chapter, .folder__index { max-width: var(--content-max); margin-inline: auto; }
.chapter { padding-block: var(--space-32) var(--layout-section-fluid); border-top: var(--border-width-hairline) solid var(--line); scroll-margin-top: var(--bar-h); }
.chapter__num { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); font-size: var(--font-size-13); color: var(--color-text-tertiary); font-feature-settings: var(--font-feature-tabular); margin-bottom: var(--space-3); }
.chapter__num a { color: var(--color-text-secondary); text-underline-offset: 0.25em; text-decoration-color: var(--color-border-strong); }
.chapter__num a:hover { color: var(--color-text-accent); }
.chapter__h { font-family: var(--type-h2-font-family); font-weight: var(--type-h2-font-weight); font-size: var(--font-size-fluid-h2); line-height: var(--type-h2-line-height); letter-spacing: var(--type-h2-letter-spacing); text-wrap: balance; }
.chapter__lede { margin-top: var(--space-4); max-width: 40rem; font-size: var(--font-size-fluid-lede); line-height: var(--font-line-height-lede); color: var(--color-text-secondary); text-wrap: pretty; }

/* ---------- hero: the wordmark over one chrome line ---------- */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center; padding-block: var(--space-32) var(--space-24); }
.hero__inner { width: 100%; container-type: inline-size; display: grid; justify-items: center; }
.hero__wordmark { width: clamp(6rem, 17cqi, 9rem); height: auto; margin-bottom: clamp(var(--space-5), 3cqi, var(--space-8)); }
.hero__title { width: 100%; font-family: var(--font-family-display); font-weight: var(--font-weight-extrabold); line-height: 0.92; letter-spacing: -0.05em; }
/* chrome on the type only (never the logo): a steel gradient of DS neutrals, a faint lilac tint in the highlight,
   and a narrow sheen that passes every few seconds */
.chrome {
  display: inline-block; padding: 0.04em 0.08em 0.1em; white-space: nowrap;
  font-size: clamp(3rem, 16.5cqi, 12.5rem);
  color: transparent; -webkit-text-fill-color: transparent;
  background-image:
    linear-gradient(105deg, transparent 0 44%, color-mix(in srgb, var(--color-neutral-0) 90%, transparent) 50%, transparent 56% 100%),
    linear-gradient(180deg, transparent 6%, color-mix(in srgb, var(--color-brand-lilac-soft) 26%, transparent) 20%, transparent 38%),
    linear-gradient(180deg, var(--color-neutral-0) 0%, var(--color-neutral-50) 16%, var(--color-neutral-200) 36%, var(--color-neutral-300) 48%, var(--color-neutral-0) 54%, var(--color-neutral-200) 66%, var(--color-neutral-100) 84%, var(--color-neutral-50) 100%);
  background-size: 320% 100%, 100% 100%, 100% 100%; background-position: 100% 0, 0 0, 0 0;
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0.05em 0.1em var(--color-alpha-black-72));
  animation: sheen 6.4s var(--motion-easing-in-out) 1.4s infinite;
}
@keyframes sheen { 0% { background-position: 100% 0, 0 0, 0 0; } 40%, 100% { background-position: 0% 0, 0 0, 0 0; } }
.hero__sub { margin-top: clamp(var(--space-3), 2cqi, var(--space-5)); font-size: var(--font-size-fluid-lede); line-height: var(--font-line-height-lede); color: var(--color-text-secondary); text-wrap: balance; }
.hero__sub span { display: inline-block; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: clamp(var(--space-6), 4cqi, var(--space-10)); }
.hero__cue { position: absolute; left: 50%; bottom: var(--space-8); transform: translateX(-50%); font-size: var(--font-size-13); color: var(--color-text-tertiary); text-decoration: none; white-space: nowrap; }
.hero__cue:hover { color: var(--color-text-secondary); }

/* ---------- the folder: a lilac sleeve, the covers inside ----------
   Stacking (all in .folder__stage): glow 1 · back 10 · open flap 11 · covers inside 20+ · front 30 · closed flap 40 · covers out 60.
   .sleeve itself never takes a transform, so the covers can sit between its back and front panels. */
.folder { position: relative; }
.folder__stage { --pad-top: 0px; position: relative; isolation: isolate; height: 100svh; min-height: 32rem; overflow: hidden; display: grid; align-content: center; padding-top: var(--pad-top); }
@media (max-width: 1023px) { .folder__stage { --pad-top: calc(var(--bar-h) + var(--edge)); } }
.sleeve { --sw: 20rem; position: absolute; left: var(--sl, 0); top: var(--st, 0); width: var(--sw); height: var(--sw); }
.sleeve > div { position: absolute; inset: 0; }
.sleeve__glow { z-index: 1; inset: 62% -40% -30% -40% !important; background: radial-gradient(closest-side, color-mix(in srgb, var(--color-lilac-700) 42%, transparent), transparent); pointer-events: none; }
.sleeve__back { z-index: 10; border-radius: var(--radius-xs); background: var(--color-lilac-900); }
.sleeve__front {
  --notch: calc(var(--sw) * 0.085);
  z-index: 30; container-type: inline-size; border-radius: var(--radius-xs); cursor: pointer;
  background:
    linear-gradient(180deg, var(--color-alpha-white-35), transparent var(--space-1)),
    linear-gradient(168deg, var(--color-lilac-100) 0%, var(--color-lilac-200) 34%, var(--color-lilac-200) 70%, var(--color-lilac-300) 100%);
  box-shadow: inset 0 0 0 var(--border-width-hairline) color-mix(in srgb, var(--color-lilac-700) 22%, transparent);
  -webkit-mask: radial-gradient(circle at 50% 0, transparent var(--notch), var(--color-neutral-1000) calc(var(--notch) + 0.5px));
          mask: radial-gradient(circle at 50% 0, transparent var(--notch), var(--color-neutral-1000) calc(var(--notch) + 0.5px));
}
.sleeve__print { position: absolute; bottom: 7cqi; color: var(--color-lilac-700); font-size: 3.3cqi; line-height: 1.3; letter-spacing: var(--font-tracking-body-sm); }
.sleeve__print--l { left: 7cqi; display: grid; }
.sleeve__print--l b { font-weight: var(--font-weight-semibold); }
.sleeve__print--r { right: 7cqi; font-feature-settings: var(--font-feature-tabular); text-align: right; }
.sleeve__flapwrap { z-index: 40; perspective: calc(var(--sw) * 3); perspective-origin: 50% 0; pointer-events: none; filter: drop-shadow(0 calc(var(--sw) * 0.012) calc(var(--sw) * 0.02) var(--color-alpha-black-45)); }
.sleeve__flap { position: absolute; left: 0; top: 0; width: 100%; height: 46%; transform-origin: 50% 0; }
.sleeve__face { position: absolute; inset: 0; pointer-events: auto; cursor: pointer; background: var(--flap, var(--color-lilac-700)); clip-path: polygon(0 0, 100% 0, 100% 30%, 50% 100%, 0 30%); }
.sleeve__face::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--color-lilac-600) 70%, transparent), transparent 42%); }
.sleeve__shade { position: absolute; inset: 0; background: var(--color-lilac-950); opacity: 0; }
.seal { position: absolute; left: 50%; top: 100%; width: 22%; aspect-ratio: 1; padding: 0; border: 0; border-radius: var(--radius-pill); background: none; cursor: pointer; pointer-events: auto; transform: translate(-50%, -64%); }
.seal__edge { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--color-brand-paper); filter: drop-shadow(0 1px 1px var(--color-alpha-black-16)); }
.seal__v { position: absolute; left: 50%; top: 52%; width: 52%; transform: translate(-50%, -50%); }
.seal:hover .seal__edge { fill: var(--color-neutral-50); }
.seal:focus-visible { outline-offset: calc(var(--focus-ring-offset) * 2); }
.folder__hint { position: absolute; left: 50%; bottom: var(--space-6); z-index: 2; transform: translateX(-50%); font-size: var(--font-size-13); color: var(--color-text-tertiary); white-space: nowrap; }

/* the index the covers land in: a label column and up to five covers per group */
.folder__index { position: relative; width: min(100%, var(--index-max, 100%)); }
.fgroups { display: grid; gap: var(--space-5); }
.fgroup { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.fgroup__head { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.fgroup__t { font-size: var(--font-size-14); font-weight: var(--font-weight-semibold); white-space: nowrap; }
.fgroup__l { font-size: var(--font-size-12); line-height: var(--font-line-height-label); color: var(--color-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fgroup__tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); }
@media (min-width: 1280px) {
  .fgroup { grid-template-columns: minmax(7.5rem, 0.8fr) minmax(0, 5fr); gap: var(--space-4); }
  .fgroup__head { display: grid; align-content: start; gap: var(--space-1); padding-top: var(--space-1); }
  .fgroup__l { white-space: normal; }
}
.tile { display: grid; gap: var(--space-2); min-width: 0; text-decoration: none; color: var(--color-text-secondary); }
.tile__media { position: relative; display: block; aspect-ratio: 1; border-radius: var(--radius-xs); overflow: hidden; background: var(--card); }
.tile__media img { width: 100%; height: 100%; object-fit: cover; }
a.tile .tile__media { box-shadow: 0 var(--space-2) var(--space-6) var(--color-alpha-black-45); }
.tile__bar { display: flex; align-items: baseline; gap: var(--space-1); min-width: 0; font-size: var(--font-size-12); line-height: var(--font-line-height-label); }
.tile__n { flex: none; color: var(--color-text-tertiary); font-feature-settings: var(--font-feature-tabular); }
.tile__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.tile:hover { color: var(--color-text-primary); }
a.tile:focus-visible { outline: none; }
a.tile:focus-visible .tile__media { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
@media (max-width: 767px) { .tile__name { display: none; } }
/* a cover that hasn't landed: an empty inner sleeve */
.tile--wait .tile__media { background: var(--card); box-shadow: inset 0 0 0 var(--border-width-hairline) var(--line); }
.tile--wait .tile__media::before, .tile--wait .tile__media::after { content: ""; position: absolute; border-radius: var(--radius-pill); }
.tile--wait .tile__media::before { inset: 22%; box-shadow: inset 0 0 0 var(--border-width-hairline) var(--color-border-default); }
.tile--wait .tile__media::after { left: 50%; top: 50%; width: 6%; height: 6%; transform: translate(-50%, -50%); background: var(--color-brand-amber); }
.tile--wait .tile__name { color: var(--color-text-tertiary); }
.folder__sum { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-top: var(--space-6); font-size: var(--font-size-13); color: var(--color-text-tertiary); }
.folder__sum a { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-text-accent); text-decoration: none; }
.folder__sum a:hover { color: var(--color-text-link-hover); text-decoration: underline; text-underline-offset: 0.25em; }
@media (min-width: 1280px) { .folder__sum { padding-left: calc((100% - var(--space-4)) * 0.8 / 5.8 + var(--space-4)); } }

/* reduced motion (or no GSAP): the folder simply shows open, the index below it */
.is-static .folder__stage { height: auto; min-height: 0; overflow: visible; overflow-x: clip; display: block; padding-block: calc(var(--space-32) + var(--pad-top)) var(--layout-section-fluid); }
.is-static .sleeve { --sw: min(15rem, 56vw); position: relative; left: auto; top: auto; margin: calc(var(--sw) * 0.5) auto var(--space-16); }
.is-static .sleeve__flap { transform: rotateX(180deg); }
.is-static .sleeve__face { --flap: var(--color-lilac-900); }
.is-static .seal { visibility: hidden; }
.is-static .sleeve__flapwrap { z-index: 11; }
.is-static .sleeve__shade { opacity: 0.6; }
.is-static .folder__hint { display: none; }
.sleeve__peek { position: absolute; z-index: 20; left: 8%; top: 0; width: 84%; aspect-ratio: 1; border-radius: var(--radius-xs); object-fit: cover; }

/* ---------- specs: hairline label / value rows ---------- */
.specs { display: grid; }
.specs > div { display: grid; grid-template-columns: minmax(6rem, 1fr) 2.6fr; gap: var(--space-4); padding-block: var(--space-3); border-top: var(--border-width-hairline) solid var(--line); font-size: var(--font-size-14); line-height: var(--font-line-height-body-sm); }
.specs > div:last-child { border-bottom: var(--border-width-hairline) solid var(--line); }
.specs dt { color: var(--color-text-tertiary); }
.specs dd { color: var(--color-text-primary); min-width: 0; }
.specs dd a { color: var(--color-text-primary); text-underline-offset: 0.25em; text-decoration-color: var(--color-border-strong); }
.specs dd a:hover { color: var(--color-text-accent); }
.specs--wide { margin-top: var(--space-16); }
.specs--wide > div { grid-template-columns: minmax(9rem, 1fr) 2.6fr; padding-block: var(--space-4); }
.specs--wide dt { color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
.specs--wide dd { color: var(--color-text-secondary); }
.specs--stack > div { grid-template-columns: 1fr; gap: var(--space-1); }
.specs--stack dt { color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
.specs--stack dd { color: var(--color-text-secondary); }
@media (max-width: 479px) { .specs--wide > div { grid-template-columns: 1fr; gap: var(--space-1); } }

/* ---------- 01 the brief ---------- */
.statement {
  margin-top: var(--space-10); max-width: 24ch;
  font-family: var(--type-h2-font-family); font-weight: var(--font-weight-semibold);
  font-size: clamp(var(--font-size-24), 3.2vw, var(--font-size-40)); line-height: var(--font-line-height-h3); letter-spacing: var(--font-tracking-h3);
  text-wrap: pretty;
}
@media (min-width: 1024px) { .statement { max-width: 30ch; } }

/* ---------- 02 the blend ---------- */
.blend__refs { display: grid; gap: var(--space-12) var(--layout-grid-gap-fluid); margin-top: var(--space-10); }
@media (min-width: 768px) { .blend__refs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bref { display: grid; align-content: start; gap: var(--space-1); min-width: 0; }
.bref__img { display: block; width: 100%; aspect-ratio: 1; margin-bottom: var(--space-4); padding: 0; border: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--card); cursor: zoom-in; }
.bref__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-duration-entrance) var(--motion-easing-out); }
@media (hover: hover) { .bref__img:hover img { transform: scale(var(--motion-scale-hover-media)); } }
.bref__id { font-size: var(--font-size-13); color: var(--color-text-tertiary); font-feature-settings: var(--font-feature-tabular); }
.bref__t { font-size: var(--font-size-18); font-weight: var(--font-weight-semibold); line-height: var(--font-line-height-h4); }
.bref__a { font-size: var(--font-size-14); color: var(--color-text-secondary); }
.bref__c { font-size: var(--font-size-12); line-height: var(--font-line-height-body-sm); color: var(--color-text-tertiary); }
.bref__took { margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--border-width-hairline) solid var(--line); font-size: var(--font-size-16); line-height: var(--font-line-height-body-sm); text-wrap: pretty; }
.bref__foot { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-top: var(--space-3); font-size: var(--font-size-13); color: var(--color-text-tertiary); }
.bref__foot a { color: var(--color-text-secondary); text-underline-offset: 0.25em; text-decoration-color: var(--color-border-strong); }
.bref__foot a:hover { color: var(--color-text-accent); }

/* ---------- cover chapters ---------- */
.cover__grid { display: grid; gap: var(--space-8); margin-top: var(--space-10); }
@media (min-width: 1280px) { .cover__grid { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--space-10); align-items: start; } }
.cover__stage { position: relative; width: 100%; max-width: min(100%, 80svh); aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--card); }
.cover__open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: inherit; }
.cover__open img { width: 100%; height: 100%; object-fit: cover; }
.cover__open:focus-visible { outline-offset: calc(var(--focus-ring-width) * -2); }
.cover__zoom { position: absolute; right: var(--space-3); bottom: var(--space-3); display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs); background: var(--color-scrim-strong); color: var(--color-text-primary); font-size: var(--font-size-12); pointer-events: none; opacity: 0; transition: opacity var(--motion-duration-base) var(--motion-easing-standard); }
.cover__stage:hover .cover__zoom, .cover__open:focus-visible + .cover__zoom { opacity: 1; }
.cover__spec .specs dd p + p { margin-top: var(--space-2); }
.pal { display: grid; gap: var(--space-1); }
.pal li { display: grid; grid-template-columns: var(--space-3) minmax(0, 1fr); gap: var(--space-2); align-items: baseline; }
.pal__sw { width: var(--space-3); height: var(--space-3); border-radius: var(--space-0-5); background: var(--sw); box-shadow: inset 0 0 0 var(--border-width-hairline) var(--color-alpha-white-16); transform: translateY(var(--space-0-5)); }
.pal__r { color: var(--color-text-tertiary); }
.pal__x { margin-left: var(--space-1); font-size: var(--font-size-12); color: var(--color-text-tertiary); }
.pal__note { margin-top: var(--space-2); font-size: var(--font-size-13); color: var(--color-text-secondary); }
.pal__note b { font-weight: var(--font-weight-medium); color: var(--color-text-primary); }
.cover__file { color: var(--color-text-tertiary); }
.getit { display: grid; justify-items: start; gap: var(--space-2); margin-top: var(--space-6); }
.getit__alt { font-size: var(--font-size-13); color: var(--color-text-tertiary); }
.getit__alt a { color: var(--color-text-secondary); text-underline-offset: 0.25em; text-decoration-color: var(--color-border-strong); }
.getit__alt a:hover { color: var(--color-text-accent); }
.cover__updating { color: var(--color-text-secondary); }

/* ---------- the research ---------- */
.rgroup { margin-top: var(--space-12); }
.rgroup + .rgroup { margin-top: var(--space-16); }
.rgroup__h { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--font-size-16); font-weight: var(--font-weight-semibold); }
.rgroup__h span { font-size: var(--font-size-13); font-weight: var(--font-weight-regular); color: var(--color-text-tertiary); }
.rgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-3); margin-top: var(--space-4); }
@media (min-width: 768px) { .rgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-10) var(--space-4); } }
@media (min-width: 1280px) { .rgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ref { display: grid; align-content: start; gap: var(--space-0-5); min-width: 0; font-size: var(--font-size-13); line-height: var(--font-line-height-body-sm); scroll-margin-top: calc(var(--bar-h) + var(--space-6)); }
.ref__img { display: block; width: 100%; aspect-ratio: 1; margin-bottom: var(--space-3); padding: 0; border: 0; border-radius: var(--radius-xs); overflow: hidden; background: var(--card); cursor: zoom-in; }
.ref__img img { width: 100%; height: 100%; object-fit: cover; }
.ref__img.is-contain img { object-fit: contain; }
.ref__text { display: grid; align-content: start; gap: var(--space-2); width: 100%; aspect-ratio: 1; margin-bottom: var(--space-3); padding: var(--space-3); border-radius: var(--radius-xs); background: var(--card); box-shadow: inset 0 0 0 var(--border-width-hairline) var(--line); overflow: hidden; }
.ref__text b { font-size: var(--font-size-12); font-weight: var(--font-weight-medium); color: var(--color-text-accent); }
.ref__text p { font-size: var(--font-size-12); line-height: var(--font-line-height-body-sm); color: var(--color-text-secondary); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 9; overflow: hidden; }
.ref__id { color: var(--color-text-tertiary); font-feature-settings: var(--font-feature-tabular); }
.ref__t { font-size: var(--font-size-14); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); line-height: var(--font-line-height-label); }
.ref__m { color: var(--color-text-secondary); }
.ref__c { margin-top: var(--space-1); font-size: var(--font-size-12); color: var(--color-text-tertiary); overflow-wrap: anywhere; }
.ref__note { margin-top: var(--space-1); font-size: var(--font-size-12); color: var(--color-text-accent); }
.ref__l { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-top: var(--space-2); font-size: var(--font-size-12); color: var(--color-text-tertiary); }
.ref__l a { color: var(--color-text-secondary); text-underline-offset: 0.25em; text-decoration-color: var(--color-border-strong); }
.ref__l a:hover { color: var(--color-text-accent); }
.ref:target .ref__t { color: var(--color-text-accent); }

/* ---------- thumbnail test: a plain dark music list, no real brand marks ---------- */
.thumbs__grid { display: grid; gap: var(--space-10); margin-top: var(--space-4); }
@media (min-width: 1280px) { .thumbs__grid { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--space-12); align-items: start; } }
.thumbs__copy .specs { margin-top: var(--space-8); }
.mock { width: 100%; max-width: 34rem; padding: var(--space-4) var(--space-2) var(--space-2); background: var(--card); border: var(--border-width-hairline) solid var(--line); border-radius: var(--radius-md); }
.mock__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: var(--space-4); padding: 0 var(--space-2) var(--space-4); border-bottom: var(--border-width-hairline) solid var(--line); margin-bottom: var(--space-2); }
.mock__art { display: grid; grid-template-columns: 1fr 1fr; width: calc(var(--space-20) + var(--space-2)); aspect-ratio: 1; border-radius: var(--radius-xs); overflow: hidden; background: var(--raised); }
.mock__art img { width: 100%; height: 100%; object-fit: cover; }
.mock__k { font-size: var(--font-size-12); color: var(--color-text-tertiary); }
.mock__t { font-family: var(--font-family-display); font-size: var(--font-size-24); font-weight: var(--font-weight-bold); letter-spacing: var(--font-tracking-h4); line-height: var(--font-line-height-h4); }
.mock__m { margin-top: var(--space-1); font-size: var(--font-size-13); color: var(--color-text-secondary); }
.mock__play { display: grid; place-items: center; width: var(--space-12); height: var(--space-12); border-radius: var(--radius-pill); background: var(--color-brand-lilac); color: var(--color-text-on-accent); }
.mock__play svg { width: var(--space-5); height: var(--space-5); margin-left: var(--space-0-5); }
.row { display: grid; grid-template-columns: var(--space-6) var(--space-16) minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius-sm); text-decoration: none; color: inherit; }
a.row:hover { background: var(--raised); }
.row__i { text-align: center; font-size: var(--font-size-13); color: var(--color-text-tertiary); font-feature-settings: var(--font-feature-tabular); }
.row__art { width: var(--space-16); height: var(--space-16); border-radius: var(--radius-xs); object-fit: cover; background: var(--raised); }
.row__art--wait { position: relative; box-shadow: inset 0 0 0 var(--border-width-hairline) var(--color-border-default); background: var(--card); }
.row__art--wait::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--space-1) * 1.5); height: calc(var(--space-1) * 1.5); transform: translate(-50%, -50%); border-radius: var(--radius-pill); background: var(--color-brand-amber); }
.row__txt { display: grid; min-width: 0; line-height: var(--font-line-height-label); gap: var(--space-1); }
.row__txt b { font-size: var(--font-size-14); font-weight: var(--font-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__txt span { font-size: var(--font-size-13); color: var(--color-text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__more { display: flex; gap: var(--space-0-5); padding-right: var(--space-2); }
.row__more i { width: var(--space-1); height: var(--space-1); border-radius: var(--radius-pill); background: var(--color-text-tertiary); }

/* ---------- what's next + foot ---------- */
.next { padding-bottom: 0; }
.next__grid { display: grid; gap: var(--space-12); margin-top: var(--space-10); }
@media (min-width: 1024px) { .next__grid { grid-template-columns: 1fr 1fr; gap: var(--layout-grid-gap-fluid); } }
.next__honest { margin-top: var(--space-6); padding-left: var(--space-4); border-left: var(--border-width-thick) solid var(--color-brand-lilac); font-size: var(--font-size-14); line-height: var(--font-line-height-body-sm); color: var(--color-text-secondary); max-width: 34rem; }
.nextlist li { display: grid; grid-template-columns: var(--space-8) minmax(0, 1fr) auto; gap: var(--space-3); align-items: baseline; padding-block: var(--space-3); border-top: var(--border-width-hairline) solid var(--line); font-size: var(--font-size-14); }
.nextlist li:last-child { border-bottom: var(--border-width-hairline) solid var(--line); }
.nextlist .n { color: var(--color-text-tertiary); font-feature-settings: var(--font-feature-tabular); }
.nextlist .s { font-size: var(--font-size-13); color: var(--color-text-tertiary); }
.foot { margin-top: var(--layout-section-fluid); padding-bottom: var(--space-6); overflow: hidden; }
.foot__wordmark { width: 100%; height: auto; }
.foot__meta { margin-top: var(--space-6); font-size: var(--font-size-13); color: var(--color-text-tertiary); }

/* ---------- lightbox ---------- */
.lb { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: var(--space-16) var(--space-16) var(--space-6); border: 0; background: var(--color-scrim-solid); color: var(--color-text-primary); }
.lb[open] { display: grid; place-items: center; animation: lbIn var(--motion-duration-sheet) var(--motion-easing-out); }
.lb::backdrop { background: var(--color-overlay-backdrop); }
@keyframes lbIn { from { opacity: 0; } }
.lb__fig { display: grid; gap: var(--space-3); justify-items: center; max-width: 100%; max-height: 100%; min-height: 0; }
.lb__img { max-width: 100%; max-height: calc(100dvh - var(--space-32)); width: auto; height: auto; object-fit: contain; border-radius: var(--radius-sm); }
.lb__cap { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1) var(--space-4); font-size: var(--font-size-13); color: var(--color-text-secondary); }
.lb__full { color: var(--color-text-accent); text-underline-offset: 0.25em; }
.lb__full[hidden] { display: none; }
.lb__count { color: var(--color-text-tertiary); font-feature-settings: var(--font-feature-tabular); }
.lb__btn { position: fixed; display: grid; place-items: center; width: var(--space-12); height: var(--space-12); padding: 0; border: var(--border-width-hairline) solid var(--color-border-default); border-radius: var(--radius-pill); background: var(--card); cursor: pointer; }
.lb__btn svg { width: var(--space-6); height: var(--space-6); }
.lb__btn:hover { background: var(--raised); }
.lb__prev { left: var(--space-4); top: 50%; transform: translateY(-50%); }
.lb__next { right: var(--space-4); top: 50%; transform: translateY(-50%); }
.lb__close { right: var(--space-4); top: var(--space-4); }
.lb__btn[hidden] { display: none; }
@media (max-width: 767px) {
  .lb { padding: var(--space-16) var(--space-4) var(--space-20); }
  .lb__prev, .lb__next { top: auto; bottom: var(--space-4); transform: none; }
  .lb__prev { left: calc(50% - var(--space-12) - var(--space-2)); }
  .lb__next { right: calc(50% - var(--space-12) - var(--space-2)); }
}

@media (prefers-reduced-motion: reduce) {
  .chrome { animation: none; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}