@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --black:      #ffffff;
  --surface:    #f7f6f3;
  --surface-2:  #f0eeea;
  --border:     #e0ddd6;
  --gold:       #8a6a1f;
  --gold-dim:   #b89240;
  --red:        #8B1A1A;
  --paper:      #1a1a1a;
  --paper-dim:  #444444;
  --grey:       #999999;
  --grey-light: #666666;
  --serif:  'DM Serif Display', Georgia, serif;
  --sans:   'Inter', system-ui, sans-serif;
  --mono:   'DM Mono', 'Courier New', monospace;
  --max-w:  1160px;
  --sidebar-w: 220px;
}

html { font-size: 16px; scroll-behavior: smooth; }
body { background: var(--black); color: var(--paper); font-family: var(--sans); line-height: 1.7; -webkit-font-smoothing: antialiased; }
a { color: var(--gold); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--paper); }

/* Header */
.site-header { border-bottom: 1px solid var(--border); padding: 0 2rem; }
.site-header__inner { max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 60px; }
.site-logo { font-family: var(--serif); font-size: 1.15rem; color: var(--paper); }
.site-logo span { color: var(--gold); }
.site-logo img { display: block; }
.site-nav { display: flex; gap: 1.75rem; }
.site-nav a { font-size: 0.8125rem; font-weight: 500; color: var(--grey-light); letter-spacing: 0.06em; text-transform: uppercase; }
.site-nav a:hover { color: var(--paper); }

/* Hero */
.hero { border-bottom: 1px solid var(--border); padding: 3.5rem 2rem 3rem; text-align: center; }
.hero__title { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.2; color: var(--paper); margin: 0 0 0.25rem; }

/* Album grid */
.albums-section { max-width: var(--max-w); margin: 0 auto; padding: 3.5rem 2rem; }
.album-grid { display: grid; grid-template-columns: 1fr; gap: 0; background: var(--border); border: 1px solid var(--border); }
.album-card { background: var(--black); padding: 1rem 1.75rem; display: flex; align-items: center; gap: 1.5rem; color: var(--paper); transition: background 0.15s; border-bottom: 1px solid var(--border); }
.album-card:last-child { border-bottom: none; }
.album-card:hover { background: var(--surface); color: var(--paper); }
.album-card__cover { width: 44px; height: 44px; object-fit: cover; flex-shrink: 0; display: block; }
.album-card__title { font-family: var(--serif); font-size: 1.05rem; line-height: 1.2; margin: 0; width: 220px; flex-shrink: 0; }
.album-card__artist { font-size: 0.875rem; color: var(--gold); margin-bottom: 0; flex: 0 0 280px; text-align: left; white-space: nowrap; }
.album-card__meta { font-size: 0.8rem; color: var(--grey-light); white-space: nowrap; width: 120px; flex-shrink: 0; margin-left: 1rem; }
.album-card__arrow { display: inline-block; margin-top: 0; font-family: var(--sans); font-size: 0.75rem; color: var(--gold-dim); white-space: nowrap; margin-left: auto; }
.album-card:hover .album-card__arrow { color: var(--gold); }

/* Album page layout */
.album-page { max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; display: grid; grid-template-columns: var(--sidebar-w) 1fr; column-gap: 3.5rem; row-gap: 0; }
.album-header { grid-column: 1 / -1; padding: 3rem 0 2.5rem; border-bottom: 1px solid var(--border); margin-bottom: 0; display: flex; align-items: flex-start; gap: 2rem; justify-content: space-between; }
.album-header__content { flex: 1; }
.album-header__back { font-family: var(--mono); font-size: 0.7rem; color: var(--grey); letter-spacing: 0.12em; text-transform: uppercase; display: inline-block; padding-top: 2.5rem; margin-bottom: 1rem; }
.album-header__back:hover { color: var(--gold); }
.album-header__label { font-family: var(--mono); font-size: 0.7rem; color: var(--gold); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 0.75rem; }
.album-header__title { font-family: var(--serif); font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.1; margin-bottom: 0.5rem; }
.album-header__artist { font-size: 1.1rem; color: var(--paper-dim); margin-bottom: 1.5rem; }
.album-header__facts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-family: var(--mono); font-size: 0.75rem; color: var(--grey-light); }
.album-header__facts span { color: var(--paper-dim); }

/* Album cover image */
.album-header__cover { flex-shrink: 0; text-align: left; order: -1; padding-top: 0; }
.album-header__cover img { width: 160px; height: 160px; object-fit: cover; display: block; box-shadow: 0 2px 12px rgba(0,0,0,0.12); }
.album-header__cover figcaption { font-family: var(--mono); font-size: 0.6rem; color: var(--grey); margin-top: 0.4rem; text-align: left; }

/* Album summary */
.album-summary { grid-column: 2; padding: 2rem 0; border-bottom: 1px solid var(--border); margin-bottom: 2rem; max-width: 680px; color: var(--paper-dim); font-size: 0.9625rem; line-height: 1.7; }
.album-summary p { margin-bottom: 0.85rem; color: var(--paper-dim); font-size: 0.9625rem; }
.album-summary p:last-child { margin-bottom: 0; }
.album-summary strong { color: var(--paper); font-weight: 600; }
.album-summary a { color: var(--gold); }
.album-summary a:hover { color: var(--paper); }
.album-summary:empty { display: none; }

/* TOC */
.album-toc { position: sticky; top: 1.5rem; align-self: start; padding-bottom: 3rem; max-height: calc(100vh - 3rem); overflow-y: auto; }
.album-toc__heading { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey); margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); display: block; text-decoration: none; }
.album-toc__heading:hover { color: var(--gold); }
.album-toc__list { list-style: none; display: flex; flex-direction: column; gap: 0.1rem; }
.album-toc__list a { display: block; font-size: 0.8rem; color: var(--grey-light); padding: 0.3rem 0 0.3rem 0.75rem; line-height: 1.4; border-left: 2px solid transparent; transition: all 0.15s; }
.album-toc__list a:hover, .album-toc__list a.active { color: var(--paper); border-left-color: var(--gold); }

/* Content */
.album-content { min-width: 0; padding-bottom: 5rem; max-width: 680px; overflow: visible; }
.album-content h2 { font-family: var(--serif); font-size: 1.6rem; color: var(--paper); margin: 2.5rem 0 1rem; padding-top: 2.5rem; border-top: 1px solid var(--border); line-height: 1.2; }
.album-content h2:first-child, .album-content > h2:first-of-type { margin-top: 0 !important; padding-top: 0 !important; border-top: none !important; }
.album-content h3 { font-family: var(--serif); font-size: 1.15rem; font-style: italic; color: var(--gold); margin: 2rem 0 0.75rem; }
.album-content p { margin-bottom: 1.1rem; color: var(--paper-dim); font-size: 0.9625rem; }
.album-content strong { color: var(--paper); font-weight: 600; }
.album-content strong a, .album-content a strong { color: var(--gold); }
.album-content ul, .album-content ol { margin: 0.75rem 0 1.1rem 1.25rem; color: var(--paper-dim); font-size: 0.9625rem; }
.album-content li { margin-bottom: 0.35rem; }
.album-content code { font-family: var(--mono); font-size: 0.85em; color: var(--gold); background: var(--surface-2); padding: 0.1em 0.4em; border-radius: 3px; }
.album-content hr { display: none; }
.album-content blockquote { border-left: 2px solid var(--gold-dim); margin: 1.5rem 0; padding: 0.75rem 1.25rem; background: var(--surface); font-style: italic; font-size: 0.9rem; color: var(--paper-dim); }

/* Tables — scroll wrapper lets table exceed the 680px prose column */
.album-content .table-wrap { overflow-x: auto; margin: 1.25rem 0 1.75rem; -webkit-overflow-scrolling: touch; width: min(100vw - 4rem, calc(var(--max-w) - var(--sidebar-w) - 3.5rem - 4rem)); max-width: none; }
.album-content table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; border-bottom: none; table-layout: fixed; }
.album-content table th { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); padding: 0.55rem 0.75rem; text-align: left; border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; overflow: hidden; }
.album-content .tier-table th { white-space: normal; overflow: visible; line-height: 1.3; }
.album-content .tier-table th:nth-child(1) { white-space: nowrap; }
.album-content table td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border); color: var(--paper-dim); vertical-align: top; overflow-wrap: break-word; word-break: break-word; }
.album-content table tr:last-child td { border-bottom: none; }
.album-content table tr:hover td { background: var(--surface); }

/* Tier table column widths — 8 columns: Tier/Pressing/Cat#/Year/Format/
   Source-Mastering/Notes/Market. Market replaces the old narrow Discogs
   column (was 82px, fine for a single link -- far too small once it held
   the market summary + suggested-price ladder) and gets real room; Notes
   trimmed slightly since price ranges were removed from it (now sourced
   live from Market instead). */
.album-content table th:nth-child(1), .album-content table td:nth-child(1) { width: 60px; }
.album-content table th:nth-child(2), .album-content table td:nth-child(2) { width: 15%; }
.album-content table th:nth-child(3), .album-content table td:nth-child(3) { width: 9%; }
.album-content table th:nth-child(4), .album-content table td:nth-child(4) { width: 70px; white-space: nowrap; padding-right: 1.25rem; }
.album-content table th:nth-child(5), .album-content table td:nth-child(5) { width: 10%; }
.album-content table th:nth-child(6), .album-content table td:nth-child(6) { width: 15%; }
.album-content table th:nth-child(7), .album-content table td:nth-child(7) { width: 17%; }
.album-content table th:nth-child(8), .album-content table td:nth-child(8) { width: 26%; }

/* Contribute banner */
.related-guides { font-size: 0.875rem; color: var(--paper-dim); margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.related-guides strong { color: var(--paper); font-weight: 600; }
.contribute-banner { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--gold); padding: 1.25rem 1.5rem; margin: 3rem 0 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.contribute-banner p { margin: 0; font-size: 0.875rem; color: var(--paper-dim); }
.contribute-banner strong { color: var(--paper); }
.btn { display: inline-block; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.6rem 1.2rem; border: 1px solid var(--gold-dim); color: var(--gold); transition: all 0.15s; white-space: nowrap; }
.btn:hover { background: var(--gold); color: var(--black); border-color: var(--gold); }

/* Last updated */
.last-updated { font-family: var(--mono); font-size: 0.7rem; color: var(--grey); margin-top: 1rem; letter-spacing: 0.05em; }

/* Footer */
.site-footer { border-top: 1px solid var(--border); padding: 2rem; text-align: center; }
.site-footer p { font-size: 0.78rem; color: var(--grey); }
.site-footer a { color: var(--grey-light); }
.site-footer a:hover { color: var(--gold); }

/* Responsive */
@media (max-width: 768px) {
  .album-page { grid-template-columns: 1fr; }
  .album-header { grid-column: 1; flex-direction: column; }
  .album-summary { grid-column: 1; max-width: 100%; }
  .album-toc { display: none; }
  .album-grid { grid-template-columns: 1fr; }
  .site-nav { display: none; }
  .hero { padding: 3rem 1.25rem 2.5rem; }
  .album-header__cover { order: 0; padding-top: 0; }
  .album-header__cover img { width: 140px; height: 140px; }

  /* Album cards used fixed pixel widths + white-space: nowrap on every
     child (title/artist/meta), sized for a desktop single-row layout.
     On a phone viewport that overflows the card and forces horizontal
     scroll on the page that lists every album -- the site's primary
     entry point. Rewrap into cover+title on line 1, artist on line 2,
     label/year on line 3; drop the arrow since the whole card is
     already a tap target and repeating "Read full guide" on 50 cards
     adds clutter without adding information on a narrow screen. */
  .album-card {
    flex-wrap: wrap;
    align-items: center;
    padding: 0.85rem 1.25rem;
    gap: 0.3rem 0.9rem;
  }
  .album-card__cover { width: 40px; height: 40px; }
  .album-card__title {
    width: auto;
    flex: 1 1 calc(100% - 40px - 0.9rem);
    font-size: 0.95rem;
    white-space: normal;
  }
  .album-card__artist {
    width: 100%;
    flex: 1 1 100%;
    white-space: normal;
    font-size: 0.8rem;
  }
  .album-card__meta {
    width: auto;
    flex: 1 1 100%;
    margin-left: 0;
  }
  .album-card__arrow { display: none; }

  /* Search/sort controls: bump touch targets closer to the ~44px
     minimum recommended for phones -- both were sized for a mouse
     cursor (0.35rem vertical padding is roughly 26px tall in practice). */
  .albums-controls { gap: 0.75rem 1rem; }
  .albums-search { min-width: 0; width: 100%; max-width: none; padding: 0.75rem 0.9rem; font-size: 1rem; }
  .albums-sort { width: 100%; flex-wrap: wrap; }
  .albums-sort__btn { padding: 0.55rem 0.9rem; font-size: 0.8rem; }

  /* Back link's 2.5rem top padding was tuned for the desktop header's
     taller vertical rhythm; on mobile it reads as a large empty gap
     before any visible content. */
  .album-header__back { padding-top: 1.25rem; }
}

/* Narrower phones (iPhone SE and similar ~375px) need the hero title
   and tier-table cells to give up a bit more breathing room than the
   768px breakpoint alone provides. */
@media (max-width: 400px) {
  .hero { padding: 2.25rem 1rem 2rem; }
  .albums-section { padding: 2rem 1rem; }
  .album-page { padding: 0 1rem; }
  .album-card { padding: 0.75rem 1rem; }
  .album-content table th, .album-content table td { padding: 0.5rem 0.55rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* Album index controls */
.albums-controls { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.albums-search { flex: 1; min-width: 200px; max-width: 360px; padding: 0.55rem 0.9rem; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--paper); font-family: var(--sans); font-size: 0.875rem; outline: none; transition: border-color 0.15s; }
.albums-search:focus { border-color: var(--gold); }
.albums-search::placeholder { color: var(--grey); }
.albums-sort { display: flex; align-items: center; gap: 0.5rem; }
.albums-sort__label { font-size: 0.75rem; color: var(--grey); text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
.albums-sort__btn { padding: 0.35rem 0.75rem; border: 1px solid var(--border); border-radius: 4px; background: transparent; color: var(--grey-light); font-family: var(--sans); font-size: 0.75rem; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.albums-sort__btn:hover { border-color: var(--gold); color: var(--gold); }
.albums-sort__btn.active { border-color: var(--gold); color: var(--gold); background: var(--surface-2); }
.albums-no-results { color: var(--grey); font-size: 0.875rem; padding: 2rem 0; text-align: center; }

/* Status / tracking page */
.status-page { max-width: var(--max-w); margin: 0 auto; padding: 3rem 2rem; }
.status-title { font-family: var(--serif); font-size: 1.8rem; margin-bottom: 0.5rem; }
.status-subtitle { color: var(--grey); font-size: 0.85rem; margin-bottom: 2rem; }
.status-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; table-layout: fixed; }
.status-table col:nth-child(1) { width: 28%; }
.status-table col:nth-child(2) { width: 22%; }
.status-table col:nth-child(3) { width: 15%; }
.status-table col:nth-child(4) { width: 17%; }
.status-table col:nth-child(5) { width: 18%; }
.status-table th { font-family: var(--mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--grey); padding: 0.6rem 1rem; text-align: left; border-bottom: 2px solid var(--border); background: var(--surface-2); white-space: nowrap; }
.status-table td { padding: 0.65rem 1rem; border-bottom: 1px solid var(--border); vertical-align: top; overflow-wrap: break-word; line-height: 1.5; }
.status-table tr:hover td { background: var(--surface-2); }
.status-yes { color: var(--paper); }
.status-no { color: var(--grey); }
.status-date { font-size: 0.72rem; color: var(--grey); display: block; margin-top: 0.15rem; font-family: var(--mono); }
.status-table td.status-yes, .status-table td.status-no { vertical-align: middle; }

/* Per-album changelog page */
.changelog-link { font-size: 0.7rem; color: var(--grey); text-decoration: underline; }
.changelog-link:hover { color: var(--gold); }
.changelog-table col:nth-child(1) { width: 20%; }
.changelog-table col:nth-child(2) { width: 12%; }
.changelog-table col:nth-child(3) { width: 68%; }
.changelog-date { font-family: var(--mono); font-size: 0.8rem; white-space: nowrap; }
.changelog-time { font-size: 0.7rem; color: var(--grey); }
.changelog-version { font-family: var(--mono); font-size: 0.8rem; white-space: nowrap; }
.changelog-sha { font-size: 0.7rem; color: var(--grey); }
.changelog-notes { line-height: 1.55; }

/* Market column -- a real summary line (for-sale count + lowest price,
   release-wide, since Discogs doesn't expose these per condition) above a
   line-and-dots ladder for suggested_price at VG+/NM/Mint (Good/VG dropped
   from display -- still in market_data.json, just unrendered). Discogs
   column folded into the Cat# link; Market takes its former slot as the
   last column. */

/* Widen the tier table beyond the normal prose-width wrap, WITHOUT any
   left-shifting margin -- left edge stays exactly where every other table
   on the page starts (same as .table-wrap's default), so it can never
   collide with the sidebar. Only the width grows, overflowing rightward
   into the page's own margin via .album-content's overflow:visible --
   the same mechanism the default .table-wrap already relies on, just with
   smaller margins subtracted so more of it is usable. */
.tier-table-wrap {
  width: min(100vw - 2rem, calc(var(--max-w) - var(--sidebar-w) - 2rem)) !important;
  max-width: none !important;
}

.market-catnum-link { color: var(--gold); }
.market-catnum-link:hover { color: var(--paper); }

/* Sort control -- gold and properly sized (was inheriting the same tiny
   0.62rem uppercase header font as every other column heading, which made
   it both hard to see and easy to miss as clickable at all). */
.tier-table thead th:last-child {
  font-size: 0.72rem;
  color: var(--gold);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.tier-table thead th:last-child:hover { color: var(--paper); text-decoration: underline; }

.market-cell-inner { display: flex; flex-direction: column; gap: 4px; }
.market-summary-link { font-family: var(--mono); font-size: 0.66rem; font-style: italic; color: var(--gold-dim); text-decoration: none; }
.market-summary-link:hover { text-decoration: underline; }
.market-summary-none { font-family: var(--mono); font-size: 0.66rem; font-style: italic; color: var(--grey); }
.market-none { color: var(--grey); }
.market-ladder { position: relative; display: flex; justify-content: space-between; padding: 8px 4px 6px; width: 100%; }
.market-ladder::before { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 1px; background: var(--border); }
.market-dot-col { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.market-dot { border-radius: 50%; background: var(--gold-dim); display: block; }
.market-price { font-family: var(--mono); font-size: 0.62rem; line-height: 1; color: var(--gold-dim); }
.market-cond-label { font-family: var(--mono); font-size: 0.62rem; line-height: 1; color: var(--grey); }
.market-pending { font-family: var(--mono); font-size: 0.68rem; color: var(--grey); }