/* Metric-matched fallbacks. The Google Fonts request uses font-display:
   optional, so a slow first visit paints with these instead of swapping
   mid-view; size-adjust and the overrides keep line lengths and heights
   close to Inter / Inter Tight, so the layout does not jump either way. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Roboto'), local('Helvetica Neue');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Tight Fallback';
  src: local('Arial'), local('Roboto'), local('Helvetica Neue');
  size-adjust: 102%;
  ascent-override: 90%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}
/* =========================================
   MUSIC — selected work, full archive and player
   Dark only. Ice accent on neutral greys, no colour cast.
   Tokens match home.css / case.css.
   ========================================= */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --page: #101012;
  --surface: #151517;
  --surface-raised: #18181b;
  --paper: #eceef0;
  --ink: #0b0b0c;
  --accent: #aac6de;
  --signal: #8fb8d4;
  --sketch: #74c47a;
  --rule: rgba(236, 238, 240, 0.12);
  --rule-strong: rgba(236, 238, 240, 0.22);
  --glass: rgba(16, 16, 18, 0.9);
  --serif: 'Inter Tight', 'Inter Tight Fallback', system-ui, sans-serif;
  --sans: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --content-max: 1120px;
  --archive-max: 960px;
  --player-height: 68px;
  /* Every muted tone below sits at or above 4.5:1 on --page. */
  --text-dim: color-mix(in srgb, var(--paper) 76%, transparent);
  --text-muted: color-mix(in srgb, var(--paper) 62%, transparent);
  --text-faint: color-mix(in srgb, var(--paper) 52%, transparent);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-width: thin;
  scrollbar-color: rgba(236, 238, 240, 0.18) transparent;
}

html.has-sheet-open { overflow: hidden; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(236, 238, 240, 0.18); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

::selection {
  background: var(--accent);
  color: var(--ink);
}

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--paper);
  background: var(--page);
  overflow-x: hidden;
  padding-bottom: calc(var(--player-height) + 28px + env(safe-area-inset-bottom));
}

img { max-width: 100%; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
}

a { color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1200;
  padding: 12px 18px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  background: var(--accent);
}

.skip-link:focus-visible {
  left: 12px;
  top: 12px;
}

/* ============================== shared navigation ============================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 14px clamp(20px, 5vw, 72px);
  border-bottom: 1px solid var(--rule);
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.site-header__name,
.site-header nav a {
  /* Matches case.css and sidar.css: the label is small, the tap target is not. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--text-muted);
}

.site-header nav { display: flex; gap: clamp(8px, 1.6vw, 24px); }

/* CV is only ~14px of text, below the 24px minimum target on its own. */
.site-header nav a { min-width: 24px; }

.site-header__name:hover,
.site-header nav a:hover,
.site-header nav a[aria-current='page'] { color: var(--paper); }

.colophon {
  display: flex;
  /* The right span holds 44px inline-flex links and the left one is plain
     text: with the default stretch the two sat on different baselines. */
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 40px clamp(20px, 5vw, 40px) 72px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.colophon a { color: var(--text-muted); text-decoration: none; }
.colophon a:hover { color: var(--paper); }

/* ============================== headings ============================== */

.music-hero__eyebrow,
.section-heading__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: end;
  gap: 28px;
  max-width: var(--content-max);
  margin: 0 auto 40px;
  padding: 0 clamp(20px, 5vw, 40px);
}

.section-heading h2 {
  max-width: 22ch;
  margin-top: 12px;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.section-heading > p {
  max-width: 54ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-dim);
}

/* ============================== hero ============================== */

.music-hero {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: clamp(48px, 7vw, 76px) clamp(20px, 5vw, 40px) clamp(56px, 7vw, 88px);
}

.music-hero__eyebrow { margin-bottom: 16px; }

.music-hero__title {
  margin: 0;
  font-size: clamp(56px, 9vw, 108px);
  line-height: 0.9;
  letter-spacing: -0.045em;
}

.music-hero__subtitle {
  max-width: 56ch;
  margin-top: 26px;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.5;
  color: var(--text-dim);
}

.music-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}

.music-hero__action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  background: transparent;
  color: var(--paper);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.music-hero__action:hover { border-color: var(--paper); }

.music-hero__action--primary {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--paper);
}

.music-hero__action--primary:hover { background: #fff; border-color: #fff; }

.music-hero__action-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
}

.music-hero__action-icon svg { width: 100%; height: 100%; fill: currentColor; }

/* ============================== selected work ============================== */

.featured {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 0 clamp(64px, 8vw, 104px);
}

.featured__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding: 0 clamp(20px, 5vw, 40px);
}

.track-tile {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  text-align: left;
  color: var(--paper);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.track-tile:hover {
  border-color: var(--rule-strong);
  background: var(--surface-raised);
}

.track-tile.active { border-color: var(--signal); }

.track-tile[disabled] { cursor: default; opacity: 0.7; }

.track-tile__art {
  display: block;
  width: 100%;
  /* The img carries width/height attributes, and that presentational hint wins
     over `aspect-ratio` unless height is set here. Without it the covers took
     their attribute height: three different tile heights in one row, and the
     titles stopped lining up across the grid. */
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--rule);
}

.track-tile__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 20px;
}

.track-tile__meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.track-tile__title {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.track-tile__note {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-dim);
}

.track-tile__state {
  position: absolute;
  right: 16px;
  top: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--ink);
  background: var(--paper);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.track-tile { position: relative; }

.track-tile:hover .track-tile__state,
.track-tile:focus-visible .track-tile__state,
.track-tile.is-playing .track-tile__state { opacity: 1; }

.track-tile__state::before {
  content: '';
  width: 11px;
  height: 13px;
  margin-left: 2px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.track-tile.is-playing .track-tile__state::before {
  margin-left: 0;
  clip-path: none;
  background: linear-gradient(to right, currentColor 0 4px, transparent 4px 7px, currentColor 7px 11px);
}

.featured__case-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px; /* WCAG 2.5.8 minimum for a standalone link */
  margin: 32px clamp(20px, 5vw, 40px) 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.featured__case-link:hover { border-bottom-color: var(--accent); }

/* ============================== library ============================== */

/* The archive box is narrower than the rest of the page so a track row stays
   scannable. It shares the page container rather than centring on its own,
   otherwise its left edge sits 80px inside the selected-work grid above it and
   the two sections read as misaligned. */
.library {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 0 clamp(72px, 9vw, 120px);
  border-top: 1px solid var(--rule);
  padding-top: clamp(56px, 7vw, 88px);
}

.library .section-heading,
.library__filters,
.library__list,
.library__noscript {
  max-width: var(--archive-max);
  margin-inline: 0;
}

.library__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 clamp(20px, 5vw, 40px) 28px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.filter-chip:hover { border-color: var(--rule-strong); color: var(--paper); }

.filter-chip[aria-pressed='true'] {
  color: var(--paper);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.filter-chip__count { color: var(--text-faint); }
.filter-chip[aria-pressed='true'] .filter-chip__count { color: var(--accent); }

.library__list { padding: 0 clamp(20px, 5vw, 40px); }

.library-group + .library-group { margin-top: 44px; }

.library-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}

.library-group__head h3 {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--paper);
}

.library-group__head p {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

.library-group__list { list-style: none; }

.library-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 0 78px 52px 56px;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 58px;
  padding: 8px 10px 8px 8px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 8px;
  background: transparent;
  color: var(--paper);
  text-align: left;
  cursor: pointer;
}

.library-row:hover { background: rgba(236, 238, 240, 0.045); }

.library-row.active {
  background: color-mix(in srgb, var(--signal) 9%, transparent);
}

.library-row__art {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background-color: var(--surface-raised);
  background-size: cover;
  background-position: center;
}

.library-row__main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.library-row__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}

.library-row.active .library-row__name { color: var(--accent); }

.library-row__kind {
  flex: 0 0 auto;
  padding: 2px 8px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.library-row__kind--sketch { color: color-mix(in srgb, var(--sketch) 78%, var(--paper)); }

.library-row__detail {
  display: none;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0.03em;
  color: var(--text-faint);
}

/* Preview only, no interaction: the row is a single button, so seeking stays
   in the bar and the sheet where there are real sliders. */
.library-row__wave {
  display: none;
  width: 100%;
  height: 22px;
}

@media (min-width: 1000px) {
  .library-row { grid-template-columns: 40px minmax(0, 1fr) 116px 78px 52px 56px; }
  .library-row__wave { display: block; }
}

.library-row__date,
.library-row__duration,
.library-row__state {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--text-faint);
}

.library-row__duration { text-align: right; }

.library-row__state {
  text-align: right;
  color: var(--accent);
  opacity: 0;
}

.library-row:hover .library-row__state,
.library-row:focus-visible .library-row__state,
.library-row.active .library-row__state { opacity: 1; }

.library__noscript {
  padding: 0 clamp(20px, 5vw, 40px);
  color: var(--text-dim);
}

.library__spotify {
  display: inline-flex;
  align-items: center;
  min-height: 24px; /* WCAG 2.5.8 minimum for a standalone link */
  margin: 36px clamp(20px, 5vw, 40px) 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.library__spotify:hover { border-bottom-color: var(--accent); }

/* ============================== noscript fallback ============================== */

.music-fallback {
  max-width: 980px;
  margin: 0 auto;
  padding: 64px clamp(20px, 5vw, 24px) 120px;
}

.music-fallback h2 { margin-bottom: 12px; }
.music-fallback > p { max-width: 58ch; color: var(--text-dim); }
.music-fallback ol { margin: 36px 0 0; padding: 0; list-style: none; }

.music-fallback li {
  display: grid;
  grid-template-columns: minmax(180px, 0.65fr) minmax(260px, 1fr);
  align-items: center;
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
}

.music-fallback li:last-child { border-bottom: 1px solid var(--rule); }
.music-fallback li span { font-weight: 600; }
.music-fallback audio { width: 100%; min-width: 0; }

/* ============================== player controls ============================== */

.player-ctrl {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}

.player-ctrl svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.player-ctrl--mode svg { width: 17px; height: 17px; }
.player-ctrl--small svg { width: 18px; height: 18px; }

.player-ctrl:hover { color: var(--paper); }
.player-ctrl.active { color: var(--accent); }

.player-ctrl.active::after {
  content: '';
  position: absolute;
  bottom: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

.player-ctrl__badge {
  position: absolute;
  right: 5px;
  top: 5px;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1;
  color: var(--accent);
  opacity: 0;
}

.player-ctrl.is-one .player-ctrl__badge { opacity: 1; }
.player-ctrl.is-one::after { display: none; }

.player-ctrl--play {
  width: 46px;
  height: 46px;
  color: var(--ink);
  background: var(--paper);
}

.player-ctrl--play:hover { color: var(--ink); background: #fff; }
.player-ctrl--play svg { width: 18px; height: 18px; }
.player-ctrl--play.active::after { display: none; }

.player-ctrl--large {
  width: 64px;
  height: 64px;
}

.player-ctrl--large svg { width: 24px; height: 24px; }

/* ============================== player bar ============================== */

.player-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-height: var(--player-height);
  padding: 8px clamp(12px, 3vw, 24px);
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.player-bar[hidden] { display: none !important; }

/* ---- seek rail on the top edge ---- */

.player-bar__progress {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: rgba(236, 238, 240, 0.1);
  cursor: pointer;
  touch-action: none;
}

/* Enlarged hit area so the 3px rail is still reachable with a finger. */
.player-bar__progress::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -11px;
  height: 25px;
}

.player-bar__progress[aria-disabled='true'] { cursor: default; }

.player-bar__progress-buffer,
.player-bar__progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
}

.player-bar__progress-buffer { background: rgba(236, 238, 240, 0.16); }
.player-bar__progress-fill { background: var(--accent); }

/* The bar carries the envelope too, so the shape of the track is on screen
   without opening anything. Hidden on narrow screens, where the 3px rail and
   the full-height sheet scrubber are the better use of the space. */
.player-bar__envelope { display: none; }

@media (min-width: 900px) {
  .player-bar__progress {
    height: 30px;
    background: transparent;
    border-bottom: 1px solid var(--rule);
  }

  .player-bar__progress::before { top: -6px; height: 42px; }

  .player-bar__progress-buffer,
  .player-bar__progress-fill { display: none; }

  .player-bar__envelope {
    display: block;
    width: 100%;
    height: 100%;
  }

  .player-bar { padding-top: 34px; }
}

/* ---- now playing trigger ---- */

.player-bar__now {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 4px 6px 4px 4px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--paper);
  text-align: left;
  cursor: pointer;
}

.player-bar__now:hover { background: rgba(236, 238, 240, 0.05); }

.player-bar__cover {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 7px;
  object-fit: cover;
  background: var(--surface-raised);
}

.player-bar__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.player-bar__title,
.player-bar__artist {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-bar__title {
  font-size: 14px;
  font-weight: 500;
}

.player-bar__artist {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
}

.player-bar__expand {
  flex: 0 0 auto;
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: var(--text-faint);
}

.player-bar__expand svg { width: 100%; height: 100%; }

/* The 62px matches the cover art plus its gap, so the status reads as a third
   line of the track block. Left on the bar's own inset it started under the
   cover, 62px to the left of the title it belongs to. The narrow layer at the
   end of this file indents it the same way. */
.player-bar__status {
  position: absolute;
  left: calc(clamp(12px, 3vw, 24px) + 62px);
  bottom: 2px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  pointer-events: none;
}

.player-bar.has-error .player-bar__status { color: #e8a5a5; }

.player-bar__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.player-bar__meters {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.player-bar__time-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.player-bar__volume-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.player-bar__volume {
  position: relative;
  width: 84px;
  height: 3px;
  border-radius: 2px;
  background: rgba(236, 238, 240, 0.16);
  cursor: pointer;
  touch-action: none;
}

.player-bar__volume::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 27px;
}

.player-bar__volume-fill {
  position: relative;
  height: 100%;
  width: 70%;
  border-radius: 2px;
  background: var(--paper);
}

.player-bar__volume-fill::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: var(--paper);
}

/* ============================== now playing sheet ============================== */

.now-playing {
  width: min(560px, 100vw);
  max-width: 100vw;
  max-height: 100dvh;
  margin: auto;
  border: 0;
  padding: 0;
  color: var(--paper);
  background: transparent;
  overscroll-behavior: contain;
}

.now-playing::backdrop {
  background: rgba(6, 6, 8, 0.74);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.now-playing__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: 100dvh;
  padding: 20px clamp(20px, 5vw, 28px) calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 18px;
}

.now-playing__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.now-playing__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.now-playing__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}

.now-playing__close:hover { color: var(--paper); }
.now-playing__close svg { width: 20px; height: 20px; }

.now-playing__art {
  display: block;
  width: 100%;
  max-height: 44dvh;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 12px;
  background: var(--surface-raised);
}

.now-playing__meta { display: flex; flex-direction: column; gap: 4px; }

.now-playing__title {
  font-size: clamp(22px, 4vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.now-playing__artist { font-size: 15px; color: var(--text-dim); }

.now-playing__detail {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.now-playing__seek { display: flex; flex-direction: column; gap: 8px; }

/* The loudness envelope doubles as the scrubber: tap the shape to jump to
   that point. Baseline-anchored bars, never mirrored. */
.now-playing__scrub {
  position: relative;
  height: 52px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  touch-action: none;
}

.now-playing__scrub::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  bottom: -8px;
}

.now-playing__scrub[aria-disabled='true'] { cursor: default; }

.now-playing__scrub:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.now-playing__envelope {
  display: block;
  width: 100%;
  height: 100%;
}

.now-playing__times {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.now-playing__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.now-playing__queue {
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

.now-playing__queue-title {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.now-playing__queue-list {
  margin-top: 10px;
  list-style: none;
}

.now-playing__queue-empty {
  padding: 12px 0;
  font-size: 14px;
  color: var(--text-faint);
}

.now-playing__queue-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 4px 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--paper);
  text-align: left;
  cursor: pointer;
}

.now-playing__queue-row:hover { background: rgba(236, 238, 240, 0.05); }

.now-playing__queue-art {
  width: 34px;
  height: 34px;
  border-radius: 5px;
  background-color: var(--surface-raised);
  background-size: cover;
  background-position: center;
}

.now-playing__queue-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.now-playing__queue-time {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
}

/* ============================== responsive ============================== */

@media (max-width: 1000px) {
  .featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .section-heading {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 16px;
  }
}

@media (max-width: 899.98px) {
  .player-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .player-bar__only-wide,
  .player-bar__meters { display: none; }

  .player-bar__artist { display: none; }

  .player-bar__status {
    position: static;
    grid-column: 1;
    grid-row: 2;
    margin-top: -6px;
    padding-left: 62px;
  }
}

@media (max-width: 620px) {
  /* Below this width the six selected pieces read better as rows than as a
     single column of large squares. */
  .featured__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }

  .track-tile {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 12px 8px;
    border: 0;
    border-bottom: 1px solid var(--rule);
    border-radius: 8px;
    background: transparent;
  }

  .track-tile:hover { background: rgba(236, 238, 240, 0.045); }

  .track-tile__art {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    border: 0;
    border-radius: 8px;
  }

  .track-tile__body { gap: 3px; padding: 0; min-width: 0; }
  .track-tile__note {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 12px;
    line-height: 1.4;
  }
  .track-tile__title { font-size: 16px; }

  .track-tile__state {
    position: static;
    width: 34px;
    height: 34px;
    margin-left: auto;
    opacity: 1;
    color: var(--paper);
    background: transparent;
  }

  .library-row {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 12px;
  }

  .library-row__date,
  .library-row__state { display: none; }

  .library-row__kind { display: none; }

  .library-row__main {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  .library-row__detail { display: block; }

  /* Truncating to one line cut real information out of titles such as
     "Walter - IFMC Winter 2025 Rescore". Two lines fit the whole thing. */
  .library-row__name {
    white-space: normal;
    overflow: visible;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
  }

  .library-row { align-items: center; min-height: 62px; }

  .now-playing {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
  }

  .now-playing__inner {
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .music-fallback li { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

@media (max-width: 380px) {
  /* Contact used to be dropped here. There is room for it once the header
     stops wrapping, and it is the one link a visitor is most likely to want. */
  .site-header { gap: 8px; padding-inline: 14px; }
  .site-header nav { gap: 8px; }
  .music-hero__action { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media print {
  body { padding-bottom: 0; }

  .skip-link,
  .player-bar,
  .now-playing,
  .library__filters { display: none !important; }
}


/* ---------- Header: shared geometry + type ----------
   Identical in home.css, music.css, case.css and sidar.css on purpose. The bar
   used to be defined four times with four different paddings, so it jumped
   every time you switched pages. Change one, change all four.

   padding-inline resolves to the same left edge as the 1160px content column
   (1280px on wide screens) and collapses to a plain gutter below that.
   Nav is Inter, not mono: mono stays on real data (years, tool lists). */
.site-header {
  padding-block: 14px;
  padding-inline: max(20px, calc((100% - 1160px) / 2 + 40px));
  min-height: 0;
}
@media (min-width:1360px) {
  .site-header { padding-inline: max(20px, calc((100% - 1280px) / 2 + 40px)); }
}
.site-header__name,
.site-header nav a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; white-space: nowrap; text-decoration: none;
}
.site-header nav { display: flex; align-items: center; gap: clamp(8px,1.6vw,24px); }
.site-header__name {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: .95rem; font-weight: 600; letter-spacing: .01em;
  color: var(--paper);
}
.site-header__name-short { display: none; }
.site-header nav a {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .82rem; font-weight: 500; letter-spacing: .01em;
  min-width: 24px; transition: color .15s;
  color: var(--text-muted);
}
.site-header nav a:hover,
.site-header nav a[aria-current='page'] { color: var(--paper); }
.site-header nav a[aria-current='page'] { box-shadow: inset 0 -1px 0 0 var(--paper); }
@media (max-width:640px) {
  .site-header { padding-inline: 20px; }
  .site-header__name { font-size: .85rem; }
  .site-header nav a { font-size: .78rem; }
}

/* ---------- Header: mobile navigation ----------
   Music keeps the three destination links visible without horizontal scroll.
   The full name remains the link's accessible name; its shorter visual label
   leaves enough room for 44px targets at the narrowest supported width. */
@media (max-width: 820px) {
  .site-header {
    gap: 6px;
    padding-block: 6px;
    padding-inline:
      max(10px, env(safe-area-inset-left))
      max(10px, env(safe-area-inset-right));
  }

  .site-header__name {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    font-size: .82rem;
    letter-spacing: .015em;
  }

  .site-header__name-full { display: none; }
  .site-header__name-short { display: inline; }

  .site-header nav {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    gap: 4px;
    padding: 0;
    overflow: visible;
  }

  .site-header nav a[href$='Igor_Szuniewicz_CV.pdf'] { display: none; }

  .site-header nav a {
    flex: 1 1 0;
    min-width: 44px;
    min-height: 44px;
    padding: 0 clamp(5px, 1.8vw, 12px);
    border: 1px solid rgba(236, 238, 240, 0.16);
    border-radius: 999px;
    background: rgba(236, 238, 240, 0.035);
    font-size: .75rem;
    letter-spacing: 0;
    box-shadow: none;
  }

  /* case.css resets the nav border to 0 on hover for its underlined links;
     without this the pill outline disappears on a narrow desktop window. */
  .site-header nav a:hover { border: 1px solid rgba(236, 238, 240, 0.3); }

  .site-header nav a[aria-current='page'],
  .site-header nav a[aria-current='page']:hover {
    border-color: transparent;
    background: #eceef0;
    color: #101012;
    box-shadow: none;
  }
}

/* =========================================================
   MOBILE LAYER (music)
   The archive and the player already collapse well; what was
   left was the reading rhythm at the top of the page and two
   hero buttons of different widths sitting ragged under it.
   ========================================================= */
@media (max-width: 820px) {
  .music-hero {
    padding-top: 44px;
    padding-bottom: 52px;
  }

  .music-hero__subtitle {
    margin-top: 20px;
    font-size: 16.5px;
    line-height: 1.55;
    text-wrap: pretty;
  }

  .music-hero__actions { margin-top: 26px; gap: 9px; }

  .section-heading { margin-bottom: 28px; }
  .section-heading h2 { text-wrap: balance; }
  .section-heading > p { text-wrap: pretty; }

  /* 24px clears the WCAG minimum but is a thin thing to hit with a thumb;
     these two are the only links between the long lists on this page. */
  .featured__case-link,
  .library__spotify { min-height: 44px; }
}

@media (max-width: 560px) {
  /* Two labels of different lengths made two buttons of different widths.
     Full width reads as one control block and gives each a 48px target. */
  .music-hero__action {
    width: 100%;
    justify-content: center;
  }
}