:root{
  --bg:#fff;
  --text:#111;
  --muted:#666;
  --rule:#d9d9d9;
  --accent:#8b4335;
  --page:820px;
  --content:540px;
}

*{box-sizing:border-box}

html{
  background:var(--bg);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Helvetica,Arial,sans-serif;
  font-size:11px;
  line-height:1.38;
}

button,
a,
input{font:inherit}

.site{
  width:min(var(--page),calc(100% - 48px));
  margin:0 auto;
  padding:52px 0 96px;
}

.site-header{margin-bottom:72px}

.site-header h1{
  margin:0;
  color:var(--accent);
  font-size:24px;
  line-height:1.15;
  font-weight:700;
}

.site-intro{
  max-width:var(--content);
  margin:12px 0 0;
  color:var(--muted);
  font-size:15px;
  line-height:1.45;
}

.album{padding-bottom:68px}

.album + .album{
  padding-top:50px;
  border-top:1px solid var(--rule);
}

.album-summary{
  display:grid;
  grid-template-columns:100px minmax(0,var(--content));
  gap:18px;
  align-items:start;
}

.album-cover-toggle{
  display:block;
  width:100px;
  height:100px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}

.album-cover{
  display:block;
  width:100px;
  height:100px;
  object-fit:cover;
}

.album-cover-toggle:focus-visible{
  outline:1px solid var(--text);
  outline-offset:3px;
}

.album-header{
  max-width:var(--content);
  margin:0;
}

.album-header h2{
  margin:0;
  color:var(--accent);
  font-size:16px;
  line-height:1.25;
  font-weight:600;
}

.album-date{
  margin:4px 0 0;
  color:var(--muted);
  font-size:12px;
}

.album-intro{
  margin:13px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.42;
}

/* ---------- album player ---------- */

.album-tracks{
  width:min(var(--content),calc(100% - 118px));
  margin:20px 0 0 118px;
}

.album-player{
  display:grid;
  grid-template-columns:24px 42px 45px minmax(70px,1fr) 38px 26px 26px;
  gap:5px;
  align-items:baseline;
  min-height:29px;
  padding:0 0 7px;
  font-size:11px;
}

.play-all-icon{
  color:var(--text);
  font-size:10px;
  line-height:1;
}

.play-all,
.restart-all,
.album-download{
  border:0;
  margin:0;
  padding:0;
  background:transparent;
  color:var(--text);
  text-align:left;
  cursor:pointer;
}

.play-all.is-active{
  color:var(--accent);
  font-weight:700;
}

.album-duration{
  color:var(--muted);
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.album-download{
  text-align:right;
}

.pending-download{
  cursor:default;
}

/* ---------- tracks ---------- */

.tracklist{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--rule);
}

.track{
  display:grid;
  grid-template-columns:
    24px
    36px
    45px
    minmax(58px,.9fr)
    minmax(68px,1.35fr)
    34px
    26px
    26px;
  gap:5px;
  align-items:center;
  min-height:29px;
  padding:6px 0 5px;
  border-bottom:1px solid var(--rule);
  font-size:11px;
}

.track-number{
  color:var(--text);
  font-weight:700;
  font-variant-numeric:tabular-nums;
}

.track-title{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text);
  font-weight:700;
  letter-spacing:.025em;
}

.track-duration{
  color:var(--muted);
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.play,
.restart{
  border:0;
  margin:0;
  padding:0;
  background:transparent;
  color:var(--text);
  text-align:left;
  cursor:pointer;
}

.play.is-active{
  color:var(--accent);
  font-weight:700;
}

.play:hover,
.play:focus-visible,
.restart:hover,
.restart:focus-visible,
.download:hover,
.download:focus-visible,
.play-all:hover,
.play-all:focus-visible,
.restart-all:hover,
.restart-all:focus-visible{
  color:var(--accent);
}

.download{
  color:var(--text);
  text-decoration:none;
  text-align:right;
}

/* ---------- interactive timeline ---------- */

.timeline{
  width:100%;
  min-width:0;
  height:14px;
  margin:0;
  padding:0;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  cursor:pointer;
}

.timeline::-webkit-slider-runnable-track{
  height:1px;
  background:var(--rule);
}

.timeline::-webkit-slider-thumb{
  width:7px;
  height:7px;
  margin-top:-3px;
  border:0;
  border-radius:50%;
  background:var(--text);
  -webkit-appearance:none;
  appearance:none;
}

.timeline::-moz-range-track{
  height:1px;
  background:var(--rule);
  border:0;
}

.timeline::-moz-range-progress{
  height:1px;
  background:var(--muted);
}

.timeline::-moz-range-thumb{
  width:7px;
  height:7px;
  border:0;
  border-radius:50%;
  background:var(--text);
}

.timeline:focus-visible{
  outline:1px solid var(--muted);
  outline-offset:2px;
}

/* ---------- footer ---------- */

.site-footer{
  width:var(--content);
  max-width:100%;
  margin-top:12px;
  padding-top:42px;
  border-top:1px solid var(--rule);
}

.subscribe h2{
  margin:0 0 3px;
  color:var(--text);
  font-size:13px;
  font-weight:700;
}

.subscribe-note{
  margin:0 0 10px;
  color:var(--muted);
  font-size:10px;
}

.subscribe-form{
  display:flex;
  gap:7px;
  max-width:330px;
}

.subscribe input{
  flex:1;
  min-width:0;
  border:1px solid var(--rule);
  border-radius:0;
  background:#fff;
  padding:5px 6px;
  color:var(--text);
}

.subscribe-form button{
  border:0;
  background:transparent;
  padding:5px 0;
  color:var(--text);
  cursor:pointer;
}

.subscribe-status{
  margin:7px 0 0;
  color:var(--muted);
  font-size:10px;
}

.contact{
  margin:26px 0 0;
  font-size:13px;
  font-weight:700;
}

.contact a{
  color:var(--text);
  text-decoration:none;
}

.contact a:hover,
.contact a:focus-visible{
  text-decoration:underline;
  text-underline-offset:.16em;
}

.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ---------- narrow windows / mobile ---------- */

@media(max-width:640px){
  body{font-size:13px}

  .site{
    width:calc(100% - 32px);
    padding:30px 0 68px;
  }

  .site-header{margin-bottom:52px}

  .site-intro{font-size:15px}

  .album-summary{
    grid-template-columns:82px minmax(0,1fr);
    gap:14px;
  }

  .album-cover-toggle,
  .album-cover{
    width:82px;
    height:82px;
  }

  .album-tracks{
    width:100%;
    margin:18px 0 0;
  }

  .album-player{
    grid-template-columns:20px 44px 48px minmax(20px,1fr) 38px 28px 28px;
    gap:4px;
    font-size:11px;
  }

  .track{
    grid-template-columns:
      22px
      38px
      44px
      minmax(70px,1fr)
      32px
      28px
      28px;
    grid-template-areas:
      "number play restart title duration mp3 wav"
      ". . . timeline timeline timeline timeline";
    gap:4px;
    min-height:43px;
    padding:7px 0 6px;
    font-size:12px;
  }

  .track-number{grid-area:number}
  .play{grid-area:play}
  .restart{grid-area:restart}
  .track-title{grid-area:title}
  .timeline{
    grid-area:timeline;
    margin-top:2px;
  }
  .track-duration{grid-area:duration}
  .mp3-download{grid-area:mp3}
  .wav-download{grid-area:wav}

  .site-footer{width:100%}
}


/* v2.4 — timeline cursor */
.timeline::-webkit-slider-thumb{
  background:var(--accent);
}

.timeline::-moz-range-thumb{
  background:var(--accent);
}


/* v2.5 — more stable timeline dragging in Safari */
.timeline {
  touch-action: none;
}


/* v2.6 — custom timeline for stable Safari dragging */
.timeline{
  position:relative;
  width:100%;
  min-width:0;
  height:14px;
  margin:0;
  padding:0;
  cursor:pointer;
  touch-action:none;
  background:transparent;
}

.timeline::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  background:var(--rule);
  transform:translateY(-50%);
}

.timeline-progress{
  position:absolute;
  left:0;
  top:50%;
  height:1px;
  width:0%;
  background:var(--muted);
  transform:translateY(-50%);
  pointer-events:none;
}

.timeline-thumb{
  position:absolute;
  left:0%;
  top:50%;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  transform:translate(-50%,-50%);
  pointer-events:none;
}

.timeline:focus-visible{
  outline:1px solid var(--muted);
  outline-offset:2px;
}


/* v2.9 — intro text + reversed timeline colour */
.site-intro p {
  margin: 0 0 10px;
}

.site-intro p:last-child {
  margin-bottom: 0;
}

.timeline::before {
  background: var(--accent);
}

.timeline-progress {
  background: var(--text);
}

.timeline-thumb {
  background: var(--accent);
}


/* v2.10 — timeline colour/weight test */
.timeline::before {
  background: #b96a5b;
  height: 1px;
}

.timeline-progress {
  background: var(--text);
  height: 2px;
}


/* v3.0 — static historical albums (no audio) */
.album-cover-static {
  display: block;
  width: 100px;
  height: 100px;
}

.album-static .album-cover {
  cursor: default;
}

@media (max-width: 640px) {
  .album-cover-static {
    width: 82px;
    height: 82px;
  }
}


/* v3.1 — album numbering, compact metadata, symbolic transport */

/* Date and following album text form one compact metadata block. */
.album-date {
  margin-bottom: 0;
}

.album-intro {
  margin-top: 0;
}

/* Track order:
   number / title / play-pause / restart / timeline / duration / mp3 / wav */
.track {
  grid-template-columns:
    24px
    minmax(72px, .95fr)
    20px
    20px
    minmax(88px, 1.4fr)
    34px
    26px
    26px;
  gap: 5px;
}

.track-number { grid-column: 1; }
.track-title { grid-column: 2; }
.play { grid-column: 3; }
.restart { grid-column: 4; }
.timeline { grid-column: 5; }
.track-duration { grid-column: 6; }
.mp3-download { grid-column: 7; }
.wav-download { grid-column: 8; }

.transport {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  line-height: 1;
  text-align: center;
}

.play.transport {
  color: var(--text);
}

.play.transport.is-active {
  color: var(--accent);
  font-weight: 700;
}

/* Timeline:
   unread = dark grey / thin
   read = brick red / thicker
   cursor = brick red */
.timeline::before {
  height: 1px;
  background: #666;
}

.timeline-progress {
  height: 2px;
  background: var(--accent);
}

.timeline-thumb {
  background: var(--accent);
}

/* Album player: written "play all", symbolic restart. */
.album-player {
  grid-template-columns: 24px 42px 20px minmax(70px,1fr) 38px 26px 26px;
}

.restart-all.transport {
  text-align: center;
}

@media (max-width: 640px) {
  .track {
    grid-template-columns:
      22px
      minmax(72px,1fr)
      22px
      22px
      32px
      28px
      28px;
    grid-template-areas:
      "number title play restart duration mp3 wav"
      ". timeline timeline timeline timeline timeline timeline";
  }

  .track-number { grid-area: number; }
  .track-title { grid-area: title; }
  .play { grid-area: play; }
  .restart { grid-area: restart; }
  .timeline { grid-area: timeline; }
  .track-duration { grid-area: duration; }
  .mp3-download { grid-area: mp3; }
  .wav-download { grid-area: wav; }

  .album-player {
    grid-template-columns: 20px 44px 24px minmax(20px,1fr) 38px 28px 28px;
  }
}


/* v3.2 — title / duration / controls */

.track {
  grid-template-columns:
    24px
    minmax(62px, .72fr)
    34px
    20px
    24px
    minmax(100px, 1.55fr)
    26px
    26px;
  gap: 4px;
}

.track-number   { grid-column: 1; }
.track-title    { grid-column: 2; }
.track-duration { grid-column: 3; }
.play           { grid-column: 4; }
.restart        { grid-column: 5; }
.timeline       { grid-column: 6; }
.mp3-download   { grid-column: 7; }
.wav-download   { grid-column: 8; }

/* Restart is deliberately quieter than play/pause. */
.restart.transport,
.restart-all.transport {
  color: #666;
  font-weight: 400;
  letter-spacing: -0.04em;
}

/* Slightly tighter title column because track titles are short. */
.track-title {
  padding-right: 1px;
}

@media (max-width: 640px) {
  .track {
    grid-template-columns:
      22px
      minmax(64px, 1fr)
      32px
      22px
      24px
      28px
      28px;
    grid-template-areas:
      "number title duration play restart mp3 wav"
      ". timeline timeline timeline timeline timeline timeline";
    gap: 4px;
  }

  .track-number { grid-area: number; }
  .track-title { grid-area: title; }
  .track-duration { grid-area: duration; }
  .play { grid-area: play; }
  .restart { grid-area: restart; }
  .timeline { grid-area: timeline; }
  .mp3-download { grid-area: mp3; }
  .wav-download { grid-area: wav; }
}


/* v3.3 — tighter titles, clearer duration gap, regular transport spacing */

/* Short titles: use less of the row.
   Then leave a deliberate breathing space before duration. */
.track {
  grid-template-columns:
    24px
    minmax(54px, .58fr)
    38px
    20px
    20px
    minmax(96px, 1.65fr)
    26px
    26px;
  column-gap: 7px;
  row-gap: 4px;
}

.track-title {
  padding-right: 0;
}

.track-duration {
  padding-left: 5px;
}

/* Equal visual spacing through play / restart / timeline / mp3 / wav. */
.play,
.restart,
.mp3-download,
.wav-download {
  width: 100%;
}

.play.transport,
.restart.transport {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Conventional "previous / restart" symbol, filled triangle, quieter grey. */
.restart.transport,
.restart-all.transport {
  color: #666;
  font-weight: 400;
  letter-spacing: -0.12em;
}

/* Keep timeline aligned with the same regular column rhythm. */
.timeline {
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: 640px) {
  .track {
    grid-template-columns:
      22px
      minmax(58px, 1fr)
      34px
      22px
      22px
      28px
      28px;
    grid-template-areas:
      "number title duration play restart mp3 wav"
      ". timeline timeline timeline timeline timeline timeline";
    column-gap: 6px;
    row-gap: 4px;
  }

  .track-duration {
    padding-left: 4px;
  }
}


/* v3.4 — transport spacing refinement */

/* Narrow the play/restart pair, then use one regular 6px rhythm
   from restart through timeline, mp3 and wav. */
.track {
  grid-template-columns:
    24px
    minmax(54px, .58fr)
    38px
    18px
    18px
    minmax(96px, 1.65fr)
    26px
    26px;
  column-gap: 6px;
}

/* Pull restart closer to play only. */
.restart.transport {
  transform: translateX(-3px);
}

/* Lighter grey for restart. */
.restart.transport,
.restart-all.transport {
  color: #999;
}

/* Compensate so the visual gap after restart returns to the regular rhythm. */
.timeline {
  margin-left: -3px;
}

@media (max-width: 640px) {
  .track {
    grid-template-columns:
      22px
      minmax(58px, 1fr)
      34px
      20px
      20px
      28px
      28px;
    column-gap: 6px;
  }

  .restart.transport {
    transform: translateX(-3px);
  }

  .timeline {
    margin-left: 0;
  }
}


/* v3.5 — more air around timeline */

/* Keep the general grid rhythm, but give the timeline
   three times the normal visual space on both sides. */
.timeline {
  margin-left: 9px;
  margin-right: 9px;
  width: calc(100% - 18px);
}

@media (max-width: 640px) {
  .timeline {
    margin-left: 9px;
    margin-right: 9px;
    width: calc(100% - 18px);
  }
}


/* v3.6 — play-all row mirrors track controls */

/* Align album row to the same columns as a track:
   blank number / play all label / total duration / play / restart / air / mp3 / wav */
.album-player {
  grid-template-columns:
    24px
    minmax(54px, .58fr)
    38px
    18px
    18px
    minmax(96px, 1.65fr)
    26px
    26px;
  column-gap: 6px;
}

.album-player-spacer { grid-column: 1; }
.play-all-label {
  grid-column: 2;
  color: var(--text);
  font-weight: 700;
  letter-spacing: .025em;
}

.album-duration {
  grid-column: 3;
  padding-left: 5px;
}

.album-player .play-all {
  grid-column: 4;
}

.album-player .restart-all {
  grid-column: 5;
}

.album-player-space {
  grid-column: 6;
}

.album-player .album-download[data-format="mp3"] {
  grid-column: 7;
}

.album-player .album-download[data-format="wav"] {
  grid-column: 8;
}

/* Same visual language as individual transport controls. */
.album-player .play-all.transport {
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text);
  font-size:11px;
  line-height:1;
}

.album-player .play-all.transport.is-active {
  color:var(--accent);
  font-weight:700;
}

.album-player .restart-all.transport {
  display:flex;
  align-items:center;
  justify-content:center;
  color:#999;
  font-size:11px;
  line-height:1;
  transform:translateX(-3px);
}

/* The words "play all" are only a label; only the symbol is interactive. */
.play-all-label {
  cursor:default;
}

@media(max-width:640px) {
  .album-player {
    grid-template-columns:
      22px
      minmax(58px,1fr)
      34px
      20px
      20px
      minmax(20px,1fr)
      28px
      28px;
    column-gap:6px;
  }
}


/* v3.6b — fix play-all row: everything stays on one line */

.album-player {
  display: grid;
  grid-template-columns:
    24px
    minmax(54px, .58fr)
    38px
    18px
    18px
    minmax(96px, 1.65fr)
    26px
    26px;
  column-gap: 6px;
  align-items: center;
  width: 100%;
  white-space: nowrap;
}

/* Explicit column placement to prevent wrapping / implicit new rows */
.album-player-spacer { grid-column: 1; grid-row: 1; }
.play-all-label      { grid-column: 2; grid-row: 1; }
.album-duration      { grid-column: 3; grid-row: 1; }
.album-player .play-all    { grid-column: 4; grid-row: 1; }
.album-player .restart-all { grid-column: 5; grid-row: 1; }
.album-player-space  { grid-column: 6; grid-row: 1; }
.album-player .album-download[data-format="mp3"] { grid-column: 7; grid-row: 1; }
.album-player .album-download[data-format="wav"] { grid-column: 8; grid-row: 1; }

.album-player .album-download {
  display: block;
  width: 100%;
  text-align: right;
}

/* Match track spacing around the transport area */
.album-player .play-all,
.album-player .restart-all {
  width: 100%;
}

@media (max-width: 640px) {
  .album-player {
    grid-template-columns:
      22px
      minmax(58px, 1fr)
      34px
      20px
      20px
      minmax(20px, 1fr)
      28px
      28px;
    column-gap: 6px;
  }
}


/* v3.6c — distinguish album-wide command */
.play-all-label { color: var(--accent); }


/* v3.9 — interaction + lighter all-red player */

/* Playable album title is an interaction; static album titles remain black. */
.album-title-toggle {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

.album-static .album-header h2 {
  color: var(--text);
}

.no-audio-note {
  color: inherit;
  font-weight: 400;
}

/* Selected track title stays red during play and pause. */
.track.is-selected .track-title {
  color: var(--accent);
}

/* Keep the same visual gap from duration to transport as number to title. */
.track-duration {
  padding-left: 5px;
  margin-right: 0;
}

/* All-red timeline, visually lighter:
   unread = full brick red, thin
   read = lighter brick red, thicker
   thumb = full brick red */
.timeline::before {
  height: 1px;
  background: var(--accent);
}

.timeline-progress {
  height: 2px;
  background: color-mix(in srgb, var(--accent) 48%, white);
}

.timeline-thumb {
  background: var(--accent);
}

/* Play-all:
   arrow occupies the track-number position;
   arrow + words are one clickable block;
   restart follows the words;
   total duration remains in its existing duration column. */
.album-player {
  position: relative;
}

.play-all-cluster {
  grid-column: 1 / 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}

.album-player .play-all {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 24px auto;
  column-gap: 6px;
  align-items: center;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-weight: 400;
  letter-spacing: .025em;
  white-space: nowrap;
}

.play-all-icon {
  color: var(--text);
  font-size: 11px;
  line-height: 1;
  text-align: center;
}

.play-all-label {
  color: var(--accent);
  font-weight: 400;
  cursor: pointer;
}

.album-player .play-all.is-active .play-all-icon,
.album-player .play-all.is-active .play-all-label {
  color: var(--accent);
}

.album-player .play-all.is-active .play-all-label {
  font-weight: 700;
}

.album-player .restart-all {
  flex: 0 0 18px;
  width: 18px;
  margin-left: 6px;
  transform: none;
  color: #999;
}

.album-duration {
  grid-column: 3;
  grid-row: 1;
}

.album-player-space {
  grid-column: 6;
  grid-row: 1;
}

.album-player .album-download[data-format="mp3"] {
  grid-column: 7;
  grid-row: 1;
}

.album-player .album-download[data-format="wav"] {
  grid-column: 8;
  grid-row: 1;
}

@media (max-width: 640px) {
  .album-player .play-all {
    grid-template-columns: 22px auto;
    column-gap: 6px;
  }
}


/* v4.0 — density / alignment refinements */

/* 1. Timeline: read section denser + thicker */
.timeline-progress {
  height: 3px;
  background: color-mix(in srgb, var(--accent) 72%, white);
}

/* 2. Play all inactive: black + light.
   Active remains red + bold. */
.album-player .play-all {
  color: var(--text);
  font-weight: 400;
}

.album-player .play-all .play-all-icon,
.album-player .play-all .play-all-label {
  color: var(--text);
  font-weight: 400;
}

.album-player .play-all.is-active .play-all-icon,
.album-player .play-all.is-active .play-all-label {
  color: var(--accent);
}

.album-player .play-all.is-active .play-all-label {
  font-weight: 700;
}

/* Align play-all restart with the same restart column as track rows:
   arrow / play all / total time / restart */
.play-all-cluster {
  grid-column: 1 / 3;
  grid-row: 1;
}

.album-duration {
  grid-column: 3;
  grid-row: 1;
}

.album-player .restart-all {
  grid-column: 5;
  grid-row: 1;
  justify-self: center;
  margin-left: 0;
  transform: none;
}

/* 3. Match number->title gap with duration->play gap.
   Current column gap is 6px; add the same breathing room after duration. */
.track-duration {
  padding-left: 5px;
  padding-right: 6px;
}

/* 4. Durations lighter grey */
.track-duration,
.album-duration {
  color: #999;
}

@media (max-width: 640px) {
  .track-duration {
    padding-right: 6px;
  }
}


/* v4.1 — play-all alignment + lighter downloads */

/* 1. Align the play-all arrow exactly with the track-number left edge. */
.play-all-cluster {
  grid-column: 1 / 3;
  grid-row: 1;
  display: grid;
  grid-template-columns: 24px auto;
  column-gap: 6px;
  align-items: center;
  min-width: 0;
}

.album-player .play-all {
  grid-column: 1 / 3;
  display: grid;
  grid-template-columns: 24px auto;
  column-gap: 6px;
  align-items: center;
  justify-self: stretch;
}

.play-all-icon {
  justify-self: start;
  text-align: left;
}

/* 2. Restart-all aligned with individual restart column. */
.album-player .restart-all {
  grid-column: 5;
  grid-row: 1;
  justify-self: stretch;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  transform: none;
}

/* 3. mp3 / wav use the same light grey as durations. */
.download,
.album-download {
  color: #999;
}

.download:hover,
.download:focus-visible,
.album-download:hover,
.album-download:focus-visible {
  color: var(--accent);
}

@media (max-width: 640px) {
  .play-all-cluster,
  .album-player .play-all {
    grid-template-columns: 22px auto;
    column-gap: 6px;
  }
}


/* v4.2 — restart-all true column alignment */

/* The restart button now sits directly in the album-player grid,
   therefore this is the same physical column as every track restart. */
.album-player .restart-all {
  grid-column: 5;
  grid-row: 1;
  width: 100%;
  justify-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  transform: none;
}


/* v4.3 — intro, active track, play all, compact player spacing */

.site-intro {
  color: var(--text);
  font-size: 14px;
  line-height: 1.28;
}
.site-intro p { margin-bottom: 7px; }

.track-number,
.track-title {
  color: var(--text);
  font-weight: 400;
}
.track.is-selected .track-number,
.track.is-selected .track-title {
  color: var(--accent);
  font-weight: 700;
}

.album-player .play-all .play-all-icon,
.album-player .play-all .play-all-label {
  color: var(--text);
  font-weight: 700;
}
.album-player .play-all.is-active .play-all-icon,
.album-player .play-all.is-active .play-all-label {
  color: var(--accent);
  font-weight: 700;
}

.track {
  grid-template-columns:
    24px
    minmax(60px, .72fr)
    18px
    18px
    minmax(72px, 1.15fr)
    34px
    26px
    26px;
  column-gap: 6px;
}
.track-number { grid-column: 1; }
.track-title { grid-column: 2; }
.play { grid-column: 3; }
.restart { grid-column: 4; }
.timeline { grid-column: 5; }
.track-duration { grid-column: 6; }
.mp3-download { grid-column: 7; }
.wav-download { grid-column: 8; }

.timeline {
  margin-left: 6px;
  margin-right: 6px;
  width: calc(100% - 12px);
}

.track-duration {
  color: var(--text);
  font-weight: 400;
  padding-left: 6px;
  padding-right: 6px;
}

.download,
.album-download {
  color: #999;
}

@media (max-width: 640px) {
  .site-intro {
    font-size: 14px;
    line-height: 1.3;
  }
  .track {
    grid-template-columns:
      22px
      minmax(64px, 1fr)
      20px
      20px
      34px
      28px
      28px;
    grid-template-areas:
      "number title play restart duration mp3 wav"
      ". timeline timeline timeline timeline timeline timeline";
    column-gap: 6px;
  }
  .track-number { grid-area: number; }
  .track-title { grid-area: title; }
  .play { grid-area: play; }
  .restart { grid-area: restart; }
  .track-duration { grid-area: duration; }
  .mp3-download { grid-area: mp3; }
  .wav-download { grid-area: wav; }
  .timeline {
    grid-area: timeline;
    margin-left: 6px;
    margin-right: 6px;
    width: calc(100% - 12px);
  }
  .track-duration {
    padding-left: 4px;
    padding-right: 4px;
  }
}


/* v4.3b — restore single-line track rows */

/* One-row layout at all normal browser widths. */
.track {
  grid-template-columns:
    24px
    minmax(56px, .68fr)
    18px
    18px
    minmax(64px, 1.08fr)
    34px
    26px
    26px;
  grid-template-areas: none;
  column-gap: 6px;
  row-gap: 0;
  align-items: center;
  white-space: nowrap;
}

.track-number { grid-column: 1; grid-row: 1; }
.track-title { grid-column: 2; grid-row: 1; }
.play { grid-column: 3; grid-row: 1; }
.restart { grid-column: 4; grid-row: 1; }
.timeline { grid-column: 5; grid-row: 1; }
.track-duration { grid-column: 6; grid-row: 1; }
.mp3-download { grid-column: 7; grid-row: 1; }
.wav-download { grid-column: 8; grid-row: 1; }

/* Keep the extra air around the timeline without creating a second row. */
.timeline {
  margin-left: 6px;
  margin-right: 6px;
  width: calc(100% - 12px);
}

/* Phone stays single-line too; only dimensions compress. */
@media (max-width: 640px) {
  .track {
    grid-template-columns:
      20px
      minmax(48px, 1fr)
      18px
      18px
      minmax(46px, .9fr)
      32px
      26px
      26px;
    grid-template-areas: none;
    column-gap: 4px;
    row-gap: 0;
    font-size: 11px;
  }

  .track-number { grid-column: 1; grid-row: 1; }
  .track-title { grid-column: 2; grid-row: 1; }
  .play { grid-column: 3; grid-row: 1; }
  .restart { grid-column: 4; grid-row: 1; }
  .timeline { grid-column: 5; grid-row: 1; }
  .track-duration { grid-column: 6; grid-row: 1; }
  .mp3-download { grid-column: 7; grid-row: 1; }
  .wav-download { grid-column: 8; grid-row: 1; }

  .timeline {
    margin-left: 4px;
    margin-right: 4px;
    width: calc(100% - 8px);
  }

  .track-duration {
    padding-left: 2px;
    padding-right: 2px;
  }
}


/* v4.3c — album total duration matches track durations */

/* Put total duration in the same duration column as every track,
   and use the same black/light typography. */
.album-duration {
  grid-column: 6;
  grid-row: 1;
  color: var(--text);
  font-weight: 400;
  padding-left: 6px;
  padding-right: 6px;
}


/* v4.3d — final spacing refinement
   base rhythm = 6px
   title->play = 4px
   restart->timeline = 12px
   timeline->duration = 12px
   duration->mp3 = 12px
   all other gaps unchanged */

.track {
  column-gap: 6px;
}

/* Reduce only title -> play by one third: 6px -> 4px */
.play {
  transform: translateX(-2px);
}

/* Compensate the play shift so play -> restart remains the original 6px */
.restart {
  transform: translateX(-2px);
}

/* Double restart -> timeline while preserving the shorter timeline itself */
.timeline {
  margin-left: 10px;   /* 6px grid gap + 10px internal = 16px from shifted restart edge;
                          visually equivalent to doubling the former rhythm */
  margin-right: 6px;
  width: calc(100% - 16px);
}

/* Double timeline -> duration and duration -> mp3 */
.track-duration {
  padding-left: 6px;
  padding-right: 6px;
}

/* Album total duration keeps the same duration/download rhythm */
.album-duration {
  padding-left: 6px;
  padding-right: 6px;
}

/* Add the extra 6px only before mp3 */
.mp3-download,
.album-player .album-download[data-format="mp3"] {
  transform: translateX(6px);
}

/* Keep wav at the original mp3->wav spacing by shifting it equally */
.wav-download,
.album-player .album-download[data-format="wav"] {
  transform: translateX(6px);
}

@media (max-width: 640px) {
  .play { transform: translateX(-1px); }
  .restart { transform: translateX(-1px); }

  .timeline {
    margin-left: 8px;
    margin-right: 4px;
    width: calc(100% - 12px);
  }

  .mp3-download,
  .wav-download,
  .album-player .album-download[data-format="mp3"],
  .album-player .album-download[data-format="wav"] {
    transform: translateX(4px);
  }
}


/* v4.3f — move play/restart/timeline block toward titles */

/* Shift play + restart + timeline left together by 4px:
   less air after title, internal transport relationships preserved. */
.play,
.restart {
  transform: translateX(-4px);
}

.timeline {
  transform: translateX(-4px);
  /* More air after the timeline before duration. */
  margin-right: 12px;
  width: calc(100% - 22px);
}

/* Keep duration and downloads where they were. */
.track-duration {
  transform: none;
}

@media (max-width: 640px) {
  .play,
  .restart,
  .timeline {
    transform: translateX(-2px);
  }

  .timeline {
    margin-right: 8px;
    width: calc(100% - 16px);
  }
}


/* v4.4 */
.site-header h1 { color: var(--text); }

/* Unified row: start+label / timeline / restart / duration / mp3 / wav */
.track,
.album-player {
  display: grid;
  grid-template-columns:
    minmax(132px, .95fr)
    minmax(82px, 1.05fr)
    20px
    34px
    26px
    26px;
  column-gap: 8px;
  align-items: center;
  white-space: nowrap;
}

.track-main,
.album-main {
  grid-column: 1;
  display: grid;
  grid-template-columns: 20px auto;
  column-gap: 6px;
  align-items: center;
  width: 100%;
  min-width: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.track-start-icon,
.play-all-icon {
  justify-self: start;
  color: var(--text);
  font-size: 11px;
  line-height: 1;
}

.track-label,
.play-all-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-weight: 400;
  letter-spacing: .025em;
}

.track-main.is-active .track-start-icon,
.track.is-selected .track-label {
  color: var(--accent);
  font-weight: 700;
}

.album-main .play-all-label { font-weight: 700; }
.album-main.is-active .play-all-icon,
.album-main.is-active .play-all-label { color: var(--accent); }

.timeline,
.album-timeline {
  grid-column: 2;
  position: relative;
  width: 100%;
  height: 14px;
  margin: 0;
  transform: none;
  cursor: pointer;
}

.restart,
.album-player .restart-all {
  grid-column: 3;
  transform: none;
  margin: 0;
  justify-self: center;
}

.track-duration,
.album-duration {
  grid-column: 4;
  color: var(--text);
  font-weight: 400;
  padding: 0;
}

.mp3-download,
.album-player .album-download[data-format="mp3"] { grid-column: 5; }

.wav-download,
.album-player .album-download[data-format="wav"] { grid-column: 6; }

.album-timeline::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--accent);
  transform: translateY(-50%);
}
.album-timeline-progress {
  position: absolute;
  left: 0; top: 50%;
  width: 0%;
  height: 3px;
  background: color-mix(in srgb, var(--accent) 72%, white);
  transform: translateY(-50%);
  pointer-events: none;
}
.album-timeline-thumb {
  position: absolute;
  left: 0%; top: 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%,-50%);
  pointer-events: none;
}

@media (max-width:640px) {
  .track,
  .album-player {
    grid-template-columns:
      minmax(112px, 1fr)
      minmax(52px, .75fr)
      20px
      32px
      26px
      26px;
    column-gap: 5px;
  }
  .track-main,
  .album-main {
    grid-template-columns: 18px auto;
    column-gap: 5px;
  }
}


/* v4.4b — precise alignment + tighter title/timeline relationship */

/* Shared geometry:
   start icon = exact old number left edge
   labels = exact track-title left edge */
.track-main,
.album-main {
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 6px;
}

.track-start-icon,
.album-main .play-all-icon {
  width: 20px;
  justify-self: start;
  text-align: left;
}

.track-label,
.album-main .play-all-label {
  justify-self: start;
  text-align: left;
}

/* Reduce title -> timeline by narrowing the first column's flexible share.
   Give that recovered space to the timeline. */
.track,
.album-player {
  grid-template-columns:
    minmax(118px, .78fr)
    minmax(92px, 1.22fr)
    20px
    34px
    26px
    26px;
  column-gap: 8px;
}

/* More air only between timeline and restart.
   Shorten the timeline at its right edge, leaving the other columns fixed. */
.timeline,
.album-timeline {
  margin-right: 8px;
  width: calc(100% - 8px);
}

@media (max-width:640px) {
  .track,
  .album-player {
    grid-template-columns:
      minmax(104px, .9fr)
      minmax(58px, 1.1fr)
      20px
      32px
      26px
      26px;
    column-gap: 5px;
  }

  .track-main,
  .album-main {
    grid-template-columns: 18px minmax(0, 1fr);
    column-gap: 5px;
  }

  .track-start-icon,
  .album-main .play-all-icon {
    width: 18px;
  }

  .timeline,
  .album-timeline {
    margin-right: 6px;
    width: calc(100% - 6px);
  }
}


/* v4.4c — force play-all to the exact same origin as track rows
   (override older, more specific play-all rules) */

.album-player .album-main {
  grid-column: 1 !important;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 6px;
  align-items: center;
  justify-items: start;
  justify-self: stretch;
  text-align: left;
}

.album-player .album-main .play-all-icon {
  width: 20px;
  margin: 0;
  padding: 0;
  justify-self: start;
  text-align: left;
}

.album-player .album-main .play-all-label {
  margin: 0;
  padding: 0;
  justify-self: start;
  text-align: left;
}

@media (max-width:640px) {
  .album-player .album-main {
    grid-template-columns: 18px minmax(0, 1fr);
    column-gap: 5px;
  }

  .album-player .album-main .play-all-icon {
    width: 18px;
  }
}


/* v4.4d — exact play-all / track left alignment */

/* Same left edge and same box model for album row and track rows */
.album-player,
.track {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Force the first clickable block in both row types to start at x=0 */
.album-player .album-main,
.track .track-main {
  margin-left: 0 !important;
  padding-left: 0 !important;
  justify-self: stretch;
  transform: none !important;
}

/* Exact same icon and label columns */
.album-player .album-main,
.track .track-main {
  grid-template-columns: 20px minmax(0, 1fr) !important;
  column-gap: 6px !important;
}

.album-player .play-all-icon,
.track .track-start-icon {
  width: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-self: start !important;
  text-align: left !important;
}

.album-player .play-all-label,
.track .track-label {
  margin: 0 !important;
  padding: 0 !important;
  justify-self: start !important;
  text-align: left !important;
}

@media (max-width:640px) {
  .album-player .album-main,
  .track .track-main {
    grid-template-columns: 18px minmax(0, 1fr) !important;
    column-gap: 5px !important;
  }

  .album-player .play-all-icon,
  .track .track-start-icon {
    width: 18px !important;
  }
}


/* v4.6 — intro hierarchy + no play-all timeline */

/* Intro:
   line 1 remains at the current size;
   lines 2–3 form a smaller information block. */
.site-intro {
  color: var(--text);
  font-size: 14px;
  line-height: 1.28;
}

.site-intro p:first-child {
  font-size: 14px;
  line-height: 1.28;
  margin-bottom: 7px; /* unchanged gap before "listen…" */
}

.site-intro p:nth-child(2),
.site-intro p:nth-child(3) {
  font-size: 12px;
  line-height: 1.22;
}

.site-intro p:nth-child(2) {
  margin-bottom: 2px; /* tighter gap inside the information block */
}

.site-intro p:nth-child(3) {
  margin-bottom: 0;
}

/* The album/play-all timeline is removed from HTML.
   Keep all other play-all controls in their existing grid columns,
   so nothing else shifts. */

/* v4.8 — intro lines 2–3 use the same tone, weight and leading as album accompaniment text */
.site-intro p:nth-child(2),
.site-intro p:nth-child(3) {
  color: var(--muted);
  font-weight: 400;
  line-height: 1.42;
}

/* v4.9 — intro lines 2–3 fully match album accompaniment text */
.site-intro p:nth-child(2),
.site-intro p:nth-child(3) {
  font-size: 13px;
  color: var(--muted);
  font-weight: 400;
  line-height: 1.42;
}

/* v4.9a — definitive play-all control order after album replacement
   play all / restart / duration / mp3 / wav */
.album-player .restart-all.transport {
  grid-column: 3 !important;
  grid-row: 1 !important;
}
.album-player .album-duration {
  grid-column: 4 !important;
  grid-row: 1 !important;
}
.album-player .album-download[data-format="mp3"] {
  grid-column: 5 !important;
  grid-row: 1 !important;
}
.album-player .album-download[data-format="wav"] {
  grid-column: 6 !important;
  grid-row: 1 !important;
}


/* v5.0 — hardened play-all ZIP placement
   Current Add Album writes data-format explicitly; these two fallbacks also
   keep albums generated by older tool versions in the correct columns. */
.album-player > a.album-download:first-of-type {
  grid-column: 5 !important;
  grid-row: 1 !important;
}
.album-player > a.album-download:last-of-type {
  grid-column: 6 !important;
  grid-row: 1 !important;
}


/* FINAL polish — 2026-08-24
   Fully saturated read portion of track timelines. */
.track-timeline {
  --timeline-read: #9a3f32;
}

/* PLAY ALL downloads: same typography/alignment as track downloads,
   but intentionally not underlined. */
.album-player .album-download {
  text-decoration: none !important;
  align-self: center;
  line-height: 1;
}
.album-player .album-download[data-format="mp3"] {
  grid-column: 5 !important;
}
.album-player .album-download[data-format="wav"] {
  grid-column: 6 !important;
}


/* FINAL v51a — read portion of each track timeline: 100% accent red */
.timeline-progress {
  background: var(--accent) !important;
}


/* FINAL v5.1c — iPhone Safari polish
   Force transport glyphs to text presentation (not emoji) and reserve enough
   room for the longest track title before the timeline. */
.track-start-icon,
.play-all-icon,
.restart.transport,
.restart-all.transport {
  font-family: Helvetica, Arial, sans-serif !important;
  font-variant-emoji: text;
}

.track-main {
  overflow: hidden;
}

@media (max-width: 640px) {
  .track {
    grid-template-columns:
      minmax(128px, 1fr)
      minmax(34px, .55fr)
      20px
      32px
      26px
      26px;
    column-gap: 5px;
  }

  .track-main {
    min-width: 0;
    overflow: hidden;
  }
}

/* FINAL v5.1e — iPhone title/timeline clearance
   Keep the row on one line, preserve restart/duration/mp3/wav positions,
   and shorten the timeline from its left edge so long titles never overlap it. */
@media (max-width: 640px) {
  .track {
    grid-template-columns:
      minmax(128px, 1fr)
      minmax(34px, .55fr)
      20px
      32px
      26px
      26px;
    column-gap: 5px;
  }

  .track-main {
    min-width: 0;
    overflow: hidden;
  }

  .track .timeline {
    margin-left: 8px !important;
    margin-right: 0 !important;
    width: calc(100% - 8px) !important;
  }
}


/* FINAL v5.1g — mobile player spacing balance
   Uses the actual site selectors. Slightly tighter spacing across the whole row
   while keeping the longest title clear of the timeline. */
@media (max-width: 640px) {
  .track,
  .album-player {
    grid-template-columns:
      minmax(122px, .96fr)
      minmax(40px, .64fr)
      18px
      30px
      25px
      25px;
    column-gap: 4px;
  }

  .track-main,
  .album-main {
    grid-template-columns: 18px minmax(0, 1fr) !important;
    column-gap: 4px !important;
  }

  .track .timeline {
    margin-left: 3px !important;
    margin-right: 0 !important;
    width: calc(100% - 3px) !important;
  }

  .restart,
  .album-player .restart-all {
    width: 18px;
  }

  .track-duration,
  .album-duration {
    padding: 0 !important;
  }

  .mp3-download,
  .wav-download,
  .album-player .album-download[data-format="mp3"],
  .album-player .album-download[data-format="wav"] {
    transform: none !important;
  }
}


/* FINAL v5.1h — precise mobile player spacing */
@media (max-width: 640px) {
  /* 1. play/start → number + title: about one character space */
  .track-main,
  .album-main {
    column-gap: 2px !important;
  }

  /* Keep title → timeline as in v5.1g */
  .track .timeline {
    margin-left: 3px !important;
  }

  /* 3–5. Rebalance right-hand controls:
     a little more air before restart, then equal spacing duration/mp3/wav */
  .track,
  .album-player {
    grid-template-columns:
      minmax(122px, .96fr)
      minmax(40px, .64fr)
      18px
      31px
      27px
      27px !important;
    column-gap: 5px !important;
  }

  .restart,
  .album-player .restart-all {
    margin-left: 3px !important;
    margin-right: 0 !important;
  }

  .track-duration,
  .album-duration,
  .mp3-download,
  .wav-download,
  .album-player .album-download[data-format="mp3"],
  .album-player .album-download[data-format="wav"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
    justify-self: center !important;
  }
}



/* FINAL v5.1i — contact + subscribe micro-polish */
.contact a:hover,
.contact a:focus-visible {
  color: var(--text);
  text-decoration: none !important;
}