:root {
  --bg: #f5f2ed; --panel: #faf8f5; --panel-hover: #f0ece4;
  --ink: #1a1916; --ink-dim: #5c584f; --hairline: #dedad3;
  --accent: #2c4a3e; --accent-hover: #3a5f50; --accent-dim: #e8efe8;
  --highlight: #b8862a;
  --on-accent: #ffffff;

  /* Namespaced aliases the shared player component reads, so it never depends
     on either token system's own variable names — the same three site.css
     declares (site.css:24-26), pointed at this file's equivalents. Added
     2026-08-16 for the mini-player, which unlike every earlier player surface
     also renders on the homepage; player-views.js had long claimed both
     systems defined these, but only site.css ever did.

     Declared ONCE here rather than in each theme block on purpose: a custom
     property whose value is a var() reference resolves against whatever the
     referenced token computes to on the same element, and the three blocks
     below all redefine --accent/--hairline/--panel on :root itself. So these
     follow the theme automatically. site.css does exactly this and has been
     live since Phase 1 — repeating them per block would be redundant, and two
     copies that could drift apart. */
  --player-accent: var(--accent);
  --player-track: var(--hairline);
  --player-surface: var(--panel);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --bg: #17150f; --panel: #201d16; --panel-hover: #2a251a;
  --ink: #ece7dc; --ink-dim: #a49b8b; --hairline: #363126;
  --accent: #7FA37A; --accent-hover: #93BC9E; --accent-dim: rgba(127,163,122,0.14);
  --highlight: #d4a63c;
  --on-accent: #17150f;
  }
}
:root[data-theme="dark"] {
  --bg: #17150f; --panel: #201d16; --panel-hover: #2a251a;
  --ink: #ece7dc; --ink-dim: #a49b8b; --hairline: #363126;
  --accent: #7FA37A; --accent-hover: #93BC9E; --accent-dim: rgba(127,163,122,0.14);
  --highlight: #d4a63c;
  --on-accent: #17150f;
}

/* Homepage-only stylesheet — the layout (hero, show grid, expandable info
   cards) is unique to this page, but the color tokens and fonts below match
   site.css exactly ("Hannan Classic", 2026-07-11), so the homepage no longer
   looks like a different site once you click through. Fonts self-hosted in
   the shared assets/fonts.css. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Karla', sans-serif;
  line-height: 1.55;
  font-size: 16px;
}

a { color: inherit; text-decoration: none; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }

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

.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 100;
  background: var(--accent); color: var(--on-accent); padding: .5rem .9rem;
  border-radius: 6px; text-decoration: none; transition: top .15s ease;
}
.skip-link:focus { top: 8px; }

/* ── header ──────────────────────────────────────────────────────────────── */

header {
  display: flex; align-items: center; gap: 28px;
  padding: 22px 0; border-bottom: 1px solid var(--hairline);
}
/* Mark reads "Shows" rather than the site name — it signals the browsable
   show archive lives here, instead of repeating the wordmark already in the
   hero h1 below. Fill/colors match the sitewide mark in site.css exactly
   (previously an outline treatment here, unified on request). Underlined
   because this is the one page where the mark IS the active nav item —
   site_nav() in fragments.py deliberately skips a "Home" link and defers
   that role to this mark. */
.mark {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 16px; border-radius: 17px; flex-shrink: 0;
  background: var(--accent); border: 1px solid var(--accent);
  color: var(--bg); font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.01em; white-space: nowrap; text-decoration: underline;
  transition: filter 0.18s ease;
}
.mark:hover, .mark:focus-visible { filter: brightness(1.12); outline: none; }
nav { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 0.85rem; color: var(--ink-dim); }
nav a:hover, nav a:focus-visible { color: var(--accent); outline: none; }

/* ── hero ────────────────────────────────────────────────────────────────── */

.hero { padding: 60px 0 44px; border-bottom: 1px solid var(--hairline); background: var(--panel); }
.eyebrow {
  font-family: 'Space Mono', monospace; font-size: 0.7rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}
h1 {
  font-family: 'Cormorant Garamond', serif; font-weight: 600;
  font-size: clamp(2.3rem, 5vw, 3.5rem); line-height: 1.08;
  margin: 0 0 16px; max-width: 680px; color: var(--ink);
}
h1 em { font-style: italic; color: var(--accent); }
.lede { color: var(--ink-dim); max-width: 520px; margin: 0 0 26px; font-size: 1rem; }

.actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Karla', sans-serif; font-weight: 700; font-size: 0.88rem;
  border-radius: 99px; padding: 11px 22px; border: 1px solid transparent;
  cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--accent-hover); outline: none; }
.btn-secondary { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); background: none; }
.btn-secondary:hover, .btn-secondary:focus-visible {
  background: var(--accent-dim); border-color: var(--accent); outline: none;
}

/* ── show listing (absorbs the old /archive/ page, 2026-07-19) ─────────── */

.grid-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 36px 0 6px; flex-wrap: wrap; gap: 8px;
}
.grid-head h2 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 1.5rem; margin: 0; }
.grid-head .stat {
  font-family: 'Space Mono', monospace; font-size: 0.7rem; color: var(--ink-dim); letter-spacing: 0.08em;
}

.sort-bar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 14px; padding: 14px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  margin-bottom: 22px;
}
.sort-group { display: flex; align-items: center; gap: 10px; }
.sort-label {
  font-family: 'Space Mono', monospace; font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-dim);
}
.seg-group { display: inline-flex; border: 1px solid var(--hairline); border-radius: 99px; padding: 3px; gap: 2px; background: var(--panel); }
.seg {
  font-family: 'Karla', sans-serif; font-weight: 700; font-size: 0.82rem;
  border: none; background: none; color: var(--ink-dim);
  border-radius: 99px; padding: 7px 16px; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.seg:hover { color: var(--ink); }
.seg.active { background: var(--accent); color: var(--on-accent); }
.seg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.grid-error { color: var(--ink-dim); font-size: 0.9rem; padding: 8px 0 24px; }

/* ── grouped sections ────────────────────────────────────────────────── */
.section-head {
  display: flex; align-items: baseline; gap: 12px; padding: 26px 0 14px;
}
.section-head:first-child { padding-top: 0; }
.section-head h3 {
  font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 1.25rem;
  color: var(--ink); white-space: nowrap;
}
.section-head .rule { flex: 1; height: 1px; background: var(--hairline); }
.section-head .n {
  font-family: 'Space Mono', monospace; font-size: 0.66rem; color: var(--ink-dim); letter-spacing: 0.04em;
  white-space: nowrap;
}

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding-bottom: 8px; }
.card {
  background: var(--panel); border: 1px solid var(--hairline); border-radius: 12px;
  padding: 16px; display: flex; flex-direction: column; gap: 8px;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.card:hover, .card:focus-visible { background: var(--panel-hover); border-color: color-mix(in srgb, var(--accent) 50%, var(--hairline)); }
.card-top { display: flex; justify-content: space-between; align-items: center; }
.ring-icon { display: inline-flex; color: var(--ink-dim); transition: color 0.18s ease; }
.ring-icon svg { width: 20px; height: 20px; }
.card:hover .ring-icon { color: var(--accent); }
.count { font-family: 'Space Mono', monospace; font-size: 0.63rem; color: var(--ink-dim); letter-spacing: 0.03em; }
.card h3 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 1.08rem; margin: 0; line-height: 1.25; }
.card h3 .star { color: var(--highlight); font-size: 0.78em; margin-right: 2px; }
.venue { font-size: 0.78rem; color: var(--ink-dim); }

.card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 2px; }
.stream { display: flex; align-items: center; gap: 6px; font-size: 0.76rem; color: var(--accent); font-weight: 700; }
.stream::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.foot-meta { display: flex; align-items: center; gap: 7px; }
.src-badge {
  font-family: 'Space Mono', monospace; font-size: 0.58rem; letter-spacing: 0.03em;
  padding: 2px 5px; border-radius: 4px; border: 1px solid var(--hairline); color: var(--ink-dim);
}
.src-badge.sbd { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.pre-edit-badge {
  font-family: 'Space Mono', monospace; font-size: 0.58rem; letter-spacing: 0.03em;
  padding: 2px 5px; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--highlight) 40%, transparent);
  color: var(--highlight);
}
.dur { font-family: 'Space Mono', monospace; font-size: 0.64rem; color: var(--ink-dim); letter-spacing: 0.03em; }

.show-more-row { padding: 20px 0 4px; text-align: center; }
.show-more {
  font-family: 'Space Mono', monospace; font-weight: 700; font-size: 0.74rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); background: none; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 99px;
  padding: 10px 22px;
  transition: background 0.18s ease;
}
.show-more:hover, .show-more:focus-visible { background: var(--accent-dim); outline: none; }

/* "Download the complete archive" snapshot link — reuses the same icon-only
   .download-btn every per-track download already uses (rendered via
   dl_button()), just with its own caption line since it's a single,
   occasional whole-archive action rather than a per-row affordance. */
.archive-zip-line {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  font-size: 0.82rem; color: var(--ink-dim); font-weight: 400;
  padding: 8px 0 40px;
}
.archive-zip-line a { color: var(--accent); text-decoration: underline; }

/* ── about / why cards ───────────────────────────────────────────────────── */

.home-about-grid {
  border-top: 1px solid var(--hairline);
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  padding: 44px 0 56px; align-items: start;
}
.info-card h2 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 1.4rem; margin: 0 0 12px; }
.info-card p { color: var(--ink-dim); margin: 0; font-size: 0.95rem; }
.info-card .about-note { font-style: italic; font-size: 0.85rem; margin-top: 0.8rem; }

.info-expand { margin-top: 10px; }
.info-expand summary {
  cursor: pointer; list-style: none;
  font-family: 'Space Mono', monospace; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); display: inline-flex; align-items: center; gap: 6px;
}
.info-expand summary::-webkit-details-marker { display: none; }
.info-expand summary::after { content: '\2193'; font-size: 0.8em; transition: transform 0.15s ease; }
.info-expand[open] summary::after { transform: rotate(180deg); }
.info-expand summary:hover, .info-expand summary:focus-visible { color: var(--accent-hover); outline: none; }
.info-expand-body { padding-top: 14px; }
.info-expand-body p { margin: 0 0 12px; }
.info-expand-body p:last-child { margin-bottom: 0; }
.info-expand-body .reasons { list-style: none; padding: 0; margin: 0.4rem 0 0; color: var(--ink-dim); }
.info-expand-body .reasons li { margin-bottom: 0.8rem; line-height: 1.6; }
.info-expand-body .reasons li:last-child { margin-bottom: 0; }
.info-expand-body .reasons strong { color: var(--ink); font-weight: 700; }
.info-expand-body a { color: var(--accent); text-decoration: underline; }

/* ── downloads / password modal ─────────────────────────────────────────── */
/* Ported from site.css so the homepage's "download the complete archive"
   link (the old /archive/ page's only download affordance, now homeless
   without that page) still works — player.js's password-gate JS is shared
   across the whole site and expects these exact class names to exist
   wherever a .download-btn is rendered. Token names differ from site.css
   (--panel vs --surface etc.) but the underlying colors are the same by
   design (see the top-of-file note) — keep the two in sync if either changes. */

.download-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-dim); color: var(--accent);
  text-decoration: none; flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}
.download-btn:hover { background: var(--accent); color: var(--on-accent); }
.download-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

.pw-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(26,25,22,0.55); z-index: 100;
  align-items: center; justify-content: center;
}
.pw-overlay.open { display: flex; }

.pw-modal {
  background: var(--panel); border: 1px solid var(--hairline); border-radius: 6px;
  padding: 2.4rem 2.4rem 2rem; width: 340px; max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.pw-modal h3 {
  font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 600;
  margin-bottom: 0.4rem; color: var(--ink);
}
.pw-modal p { font-size: 13px; color: var(--ink-dim); margin-bottom: 1.4rem; }
.pw-modal input {
  font-family: 'Karla', sans-serif; font-size: 14px; width: 100%;
  padding: 0.65rem 0.9rem; border: 1px solid var(--hairline); border-radius: 3px;
  background: var(--panel); color: var(--ink); outline: none;
  margin-bottom: 0.8rem; transition: border-color 0.2s ease;
}
.pw-modal input:focus { border-color: var(--accent); }
/* Archive/Loud chooser inside the password modal. Ported to the homepage's
   own tokens (--hairline/--ink-dim, not site.css's --border/--muted), same
   as the rest of the .pw-* port -- see CLAUDE.md on the two design systems.
   Original note: Hidden unless the target
   has a -14 counterpart (player.js sets [hidden]) — whole-show recordings
   have no variant rendered, so there is nothing to choose. The two options
   differ in FORMAT as well as level, which is why the sub-line spells out
   "lossless" vs "not lossless" rather than leaving "Loud" to imply it. */
.pw-variant {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 0.5rem 0.8rem 0.7rem;
  margin-bottom: 0.9rem;
  text-align: left;
}
.pw-variant legend {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 0 0.4rem;
}
.pw-variant label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0 0.55rem;
  padding: 0.3rem 0;
  cursor: pointer;
}
.pw-variant input { width: auto; margin: 0; }
.pw-variant-name { font-size: 14px; font-weight: 500; }
.pw-variant-sub {
  grid-column: 2;
  font-size: 11.5px;
  color: var(--ink-dim);
  font-weight: 300;
  line-height: 1.45;
}

.pw-modal-error { font-size: 12px; color: #b94a3a; min-height: 1.2em; margin-bottom: 0.6rem; }
.pw-modal-actions { display: flex; gap: 0.8rem; justify-content: flex-end; }
.pw-cancel {
  font-family: 'Karla', sans-serif; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 700; color: var(--ink-dim);
  background: none; border: 1px solid var(--hairline); border-radius: 3px;
  padding: 0.6rem 1.2rem; cursor: pointer; transition: color 0.2s ease;
}
.pw-cancel:hover { color: var(--ink); }
.pw-submit {
  font-family: 'Karla', sans-serif; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 700; color: var(--on-accent);
  background: var(--accent); border: none; border-radius: 3px;
  padding: 0.6rem 1.2rem; cursor: pointer; transition: opacity 0.2s ease;
}
.pw-submit:hover { opacity: 0.85; }

.dl-toast {
  display: none; position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 100;
  align-items: center; gap: 0.8rem;
  background: var(--panel); border: 1px solid var(--hairline); border-radius: 6px;
  padding: 0.85rem 1rem; box-shadow: 0 8px 32px rgba(0,0,0,0.16);
  max-width: min(320px, calc(100vw - 2.4rem));
}
.dl-toast.open { display: flex; }
.dl-toast.error .dl-toast-text { color: #b94a3a; }
.dl-toast-text { font-family: 'Karla', sans-serif; font-size: 12.5px; color: var(--ink); flex: 1; }
.dl-toast-cancel {
  font-size: 18px; line-height: 1; color: var(--ink-dim);
  background: none; border: none; cursor: pointer; padding: 0.1rem 0.3rem; flex-shrink: 0;
}
.dl-toast-cancel:hover { color: var(--ink); }

/* ── footer ──────────────────────────────────────────────────────────────── */

footer {
  border-top: 1px solid var(--hairline); padding: 22px 0 40px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-size: 0.78rem; color: var(--ink-dim);
}
footer a { color: var(--ink-dim); text-decoration: none; }
footer a:hover, footer a:focus-visible { color: var(--accent); outline: none; }
.artist-links { flex-basis: 100%; font-size: 0.75rem; }
.artist-links a { color: var(--accent); text-decoration: underline; }

@media (max-width: 980px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .home-about-grid { gap: 28px; }
}
@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; }
  header { flex-wrap: wrap; }
  nav { gap: 8px 16px; font-size: 0.78rem; }
  .home-about-grid { grid-template-columns: 1fr; gap: 26px; }
  .sort-bar { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.001ms !important; animation-duration: 0.001ms !important;
  }
}