/* Jolene covers -- page styles.
   Art direction follows the 1974 RCA sleeve: a butter-yellow field (#fcf0a8,
   sampled from the cover), near-black sepia ink, and a rose accent. The cover's
   rose measures #e17c77, which is only 2.5:1 on that yellow -- fine for album
   art, not for text -- so the accent here is deepened to #b8453f, which clears
   4.5:1 while keeping the hue.

   Charts sit on a cream card rather than the yellow, the way the sleeve frames
   its photograph. That keeps the categorical palette on a near-neutral surface;
   it was re-validated against #fdfbf2 (light) and #201b11 (dark) and passes the
   all-pairs colorblind checks in both. Aqua is below 3:1 on the light surface,
   so charts using it ship direct labels and a table view. */

@font-face {
  /* Italiana, SIL Open Font License. Self-hosted rather than loaded from Google
     so the fonts need no third-party request. */
  font-family: "Italiana";
  src: url("vendor/italiana-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --page:           #fcf0a8;   /* sampled from the sleeve */
  --surface-1:      #fdfbf2;   /* cream card the content sits on */
  --text-primary:   #1a1305;   /* sepia ink, 15.9:1 on the yellow */
  --text-secondary: #5c4a22;
  --text-muted:     #6f6236;
  --grid:           #e8e2cf;
  --axis:           #cfc7ad;
  --border:         rgba(26, 19, 5, 0.14);
  --accent:         #b8453f;   /* the sleeve rose, deepened to pass contrast */
  --series-1:       #2a78d6;   /* covers / United States */
  --series-2:       #eb6834;   /* Dolly Parton / UK & Ireland */
  --series-3:       #1baf7a;   /* rest of world */
  --series-none:    #a9a79f;   /* country not recorded -- absent data, not a category */
  --focus:          #b8453f;
  --display: "Italiana", "Didot", "Bodoni 72", Georgia, serif;
}

/* Dark mode inverts the sleeve rather than abandoning it: the butter yellow
   becomes the ink, on a deep warm brown ground. */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page:           #17130a;
    --surface-1:      #201b11;
    --text-primary:   #f7efd2;
    --text-secondary: #cdc0a0;
    --text-muted:     #9a8f6a;
    --grid:           #332c1d;
    --axis:           #3f3726;
    --border:         rgba(252, 240, 168, 0.15);
    --accent:         #e8908b;
    --series-1:       #3987e5;
    --series-2:       #d95926;
    --series-3:       #199e70;
    --series-none:    #6d6b65;
    --focus:          #e8908b;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page:           #17130a;
  --surface-1:      #201b11;
  --text-primary:   #f7efd2;
  --text-secondary: #cdc0a0;
  --text-muted:     #9a8f6a;
  --grid:           #332c1d;
  --axis:           #3f3726;
  --border:         rgba(252, 240, 168, 0.15);
  --accent:         #e8908b;
  --series-1:       #3987e5;
  --series-2:       #d95926;
  --series-3:       #199e70;
  --series-none:    #6d6b65;
  --focus:          #e8908b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 60rem; margin: 0 auto; padding: 2.5rem 1.25rem 5rem; }

/* --- masthead ---------------------------------------------------------- */

.kicker {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 0.75rem;
}
h1 {
  font-family: var(--display);
  font-size: clamp(2.1rem, 6.4vw, 3.9rem); line-height: 1.08;
  /* Italiana is a high-contrast display face and wants positive tracking at
     size; the negative tracking a sans headline needs would close it up. */
  letter-spacing: 0.005em; margin: 0 0 0.9rem; font-weight: 400;
  /* Without this the headline strands "Jolene" alone on the last line. */
  text-wrap: balance;
  /* Italiana ships one weight, so there is no bolder cut to switch to.
     Stroking the outline thickens it without distorting the letterforms.
     currentColor means the rose span strokes itself, and dark mode follows
     automatically. Kept under 1px: past that the counters start closing up. */
  -webkit-text-stroke-width: 0.8px;
  -webkit-text-stroke-color: currentColor;
}

/* The song title carries the headline, so it gets the accent and a size bump
   rather than relying on colour alone. The tightened line-height stops the
   larger type from pushing the two lines apart. */
h1 .rose {
  color: var(--accent);
  font-size: 1.26em;
  line-height: 0.85;
}
.standfirst {
  font-size: clamp(1rem, 2.4vw, 1.16rem); color: var(--text-secondary);
  margin: 0 0 2rem; max-width: 44rem; text-wrap: pretty;
}
.standfirst p { margin: 0 0 0.9rem; }
.standfirst p:last-child { margin-bottom: 0; }

/* --- stat tiles: the numbers that are the chart ------------------------- */

.stats {
  display: grid; gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin-bottom: 3rem;
}
.stat { background: var(--surface-1); padding: 1.1rem 1.15rem; }
.stat b {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: 2.4rem; line-height: 1.05; letter-spacing: 0.01em;
}
.stat span { display: block; font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.15rem; }

/* --- figures ------------------------------------------------------------ */

figure {
  margin: 0 0 3rem; background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 10px; padding: 1.35rem 1.35rem 1.1rem;
}
figure h2 {
  font-size: 1.15rem; line-height: 1.3; margin: 0 0 0.3rem;
  letter-spacing: -0.01em; font-weight: 650;
}
.subhead { font-size: 0.875rem; color: var(--text-secondary); margin: 0 0 1.1rem; }
figcaption {
  font-size: 0.75rem; color: var(--text-muted); margin-top: 0.9rem;
  padding-top: 0.75rem; border-top: 1px solid var(--border);
}
figcaption strong { color: var(--text-secondary); font-weight: 600; }

.chart { width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Recessive chrome. Axis text never wears a series color. */
.tick text { fill: var(--text-muted); font-size: 11px; }
.tick line { stroke: var(--grid); }
.domain { stroke: var(--axis); }
.axis-label { fill: var(--text-secondary); font-size: 11px; font-weight: 500; }
.bar-label { fill: var(--text-secondary); font-size: 11px; font-weight: 600; }
.annotation { fill: var(--text-secondary); font-size: 11px; }
.annotation-rule { stroke: var(--axis); stroke-width: 1; }

/* --- legend ------------------------------------------------------------- */

.legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0 0 0.9rem; padding: 0; list-style: none; }
.legend li { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--text-secondary); }
.swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }

/* --- filters ------------------------------------------------------------ */

.filters {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end;
  margin-bottom: 1.5rem; padding: 0.9rem 1rem; background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 10px;
}
.filters label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.75rem; color: var(--text-secondary); font-weight: 600; }
.filters select {
  font: inherit; font-size: 0.875rem; font-weight: 400; padding: 0.4rem 0.55rem;
  border: 1px solid var(--axis); border-radius: 7px;
  background: var(--surface-1); color: var(--text-primary); min-width: 10rem;
}
.filters .count { font-size: 0.8rem; color: var(--text-secondary); margin-left: auto; padding-bottom: 0.45rem; }
button.linkish {
  font: inherit; font-size: 0.78rem; color: var(--text-secondary); background: none;
  border: 1px solid var(--axis); border-radius: 7px; padding: 0.3rem 0.6rem; cursor: pointer;
}
button.linkish:hover { color: var(--text-primary); border-color: var(--text-muted); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* --- tooltip ------------------------------------------------------------ */

.tip {
  position: fixed; pointer-events: none; opacity: 0; transition: opacity 90ms;
  background: var(--surface-1); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.65rem;
  font-size: 0.8rem; line-height: 1.4; box-shadow: 0 6px 20px rgba(0,0,0,0.16);
  max-width: 16rem; z-index: 10;
}
.tip b { display: block; font-size: 0.85rem; }
.tip span { color: var(--text-secondary); }

/* --- tables ------------------------------------------------------------- */

.table-wrap { overflow-x: auto; margin-top: 0.9rem; }
table { border-collapse: collapse; width: 100%; font-size: 0.82rem; }
th, td { text-align: left; padding: 0.4rem 0.7rem 0.4rem 0; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { color: var(--text-secondary); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
td.num { font-variant-numeric: tabular-nums; }
td.artist { white-space: normal; min-width: 12rem; }
.hidden { display: none; }

/* --- notes -------------------------------------------------------------- */

.notes { border-top: 1px solid var(--border); padding-top: 1.5rem; margin-top: 1rem; }
.notes h2 { font-size: 1rem; margin: 0 0 0.6rem; }
.notes p, .notes li { font-size: 0.85rem; color: var(--text-secondary); }
.notes a { color: var(--accent); }

@media (max-width: 34rem) {
  figure { padding: 1rem 0.9rem 0.85rem; border-radius: 8px; }
  .stat b { font-size: 1.6rem; }
  .filters .count { margin-left: 0; width: 100%; }
  .filters select { min-width: 0; width: 100%; }
  .filters label { width: 100%; }
}

/* ======================================================================
   Vertical media timeline (timeline.html)
   ====================================================================== */

.tl-nav { font-size: 0.82rem; margin: 0 0 2rem; }
.tl-nav a { color: var(--accent); }

.decade { margin: 0 0 2.25rem; }

/* Sticky decade heading so the reader always knows where they are in the scroll. */
.decade-head {
  position: sticky; top: 0; z-index: 4;
  display: flex; align-items: baseline; gap: 0.6rem;
  margin: 0 0 0.9rem; padding: 0.5rem 0 0.45rem;
  background: var(--page); border-bottom: 2px solid var(--accent);
  font-family: var(--display); font-weight: 400;
  font-size: 1.9rem; letter-spacing: 0.02em;
}
.decade-head span { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }

/* Year rail on the left, cards on the right. */
.year-row { display: grid; grid-template-columns: 3.4rem 1fr; gap: 0.75rem; margin-bottom: 0.7rem; }
.year-mark {
  font-size: 0.9rem; font-weight: 650; color: var(--text-secondary);
  font-variant-numeric: tabular-nums; padding-top: 0.85rem;
  border-right: 2px solid var(--grid); padding-right: 0.7rem; text-align: right;
}
.year-row.is-provisional .year-mark { color: var(--text-muted); }

.cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }

.card {
  display: grid; grid-template-columns: 4rem 1fr auto; gap: 0.85rem; align-items: center;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 10px; padding: 0.6rem 0.8rem 0.6rem 0.6rem;
}
.card.is-playing { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* Artwork well. Images are hotlinked from Apple, the Cover Art Archive or
   Wikimedia Commons -- never copied into this repo. */
.art {
  position: relative; width: 4rem; height: 4rem; border-radius: 7px; overflow: hidden;
  background: var(--grid); flex: none;
}
.art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art.is-photo img { object-position: center 22%; }
.art .initials {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  font-size: 1.05rem; font-weight: 650; color: var(--text-muted); letter-spacing: -0.02em;
}

/* Play control sits over the artwork. */
/* Always visible, not hover-only: the button is the signal that this version can
   be played at all, and a third of entries cannot. Hiding it until hover would
   make playable and unplayable entries look identical, and would leave touch
   devices with no signal whatsoever. */
.play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border: 0; padding: 0; cursor: pointer; background: rgba(0, 0, 0, 0.30);
  opacity: 0.92; transition: opacity 120ms, background-color 120ms;
}
.card:hover .play, .play:focus-visible, .card.is-playing .play {
  opacity: 1; background: rgba(0, 0, 0, 0.46);
}
.play svg { width: 100%; height: 100%; }
.play .glyph { fill: #fff; }
.play .ring-track { fill: none; stroke: rgba(255, 255, 255, 0.35); stroke-width: 2.5; }
.play .ring { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round;
              transform: rotate(-90deg); transform-origin: 50% 50%; }

.card-main { min-width: 0; }
.card-artist { font-weight: 620; font-size: 0.95rem; line-height: 1.3; }
.card-meta {
  font-size: 0.76rem; color: var(--text-secondary); margin-top: 0.15rem;
  display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; align-items: center;
}
.card-meta .dot { color: var(--text-muted); }
.tag {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em;
  border: 1px solid var(--border); border-radius: 999px; padding: 0.05rem 0.42rem;
  color: var(--text-secondary);
}
.tag.rewrite { border-color: var(--accent); color: var(--accent); }
.card-credit { font-size: 0.68rem; color: var(--text-muted); margin-top: 0.2rem; }
.card-credit a { color: inherit; }

.card-aside { text-align: right; font-size: 0.72rem; white-space: nowrap; }
.card-aside a { color: var(--accent); text-decoration: none; font-weight: 600; }
.card-aside a:hover { text-decoration: underline; }
.card-aside .nopreview { color: var(--text-muted); }

.tl-empty { color: var(--text-secondary); font-size: 0.9rem; padding: 2rem 0; }

/* Sits between the filters and the first decade. Pre-empts the obvious
   complaint -- that the original is not bluegrass -- at the point where a
   reader first meets the tags, rather than in the notes at the foot. */
.tl-note {
  font-size: 0.82rem; line-height: 1.5; color: var(--text-muted);
  margin: 0 0 1.5rem; padding-left: 0.85rem;
  border-left: 2px solid var(--accent); max-width: 46rem;
}
.tl-note a { color: var(--text-secondary); }
.tl-note em { font-style: italic; }

@media (max-width: 34rem) {
  .year-row { grid-template-columns: 2.4rem 1fr; gap: 0.5rem; }
  .year-mark { font-size: 0.78rem; padding-right: 0.45rem; }
  .card { grid-template-columns: 3.25rem 1fr; gap: 0.6rem; padding: 0.55rem; }
  .art { width: 3.25rem; height: 3.25rem; }
  /* The store link drops to its own row rather than squeezing the artist name. */
  .card-aside { grid-column: 2; text-align: left; margin-top: 0.1rem; }
  .play { opacity: 1; }
}

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