/* Shared styles for the plain-HTML year and artist pages (built by dont-deploy/build_static_pages.py). */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: #020617;
    color: #e2e8f0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}
a { color: #fb7185; text-decoration: none; }
a:hover { color: #fda4af; text-decoration: underline; }
a:focus-visible { outline: 2px solid #f43f5e; outline-offset: 2px; }

/* Same width and side padding as the main chart page, so the logo and content line up across pages. */
.wrap { max-width: 80rem; margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .wrap { padding: 0 24px; } }
@media (min-width: 1024px) { .wrap { padding: 0 32px; } }

.site-header { border-bottom: 1px solid #1e293b; background: rgba(15, 23, 42, 0.8); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; min-height: 64px; padding-top: 8px; padding-bottom: 8px; }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; }
.brand:hover { color: #fff; text-decoration: none; }
.brand svg { width: 36px; height: 36px; color: #34d399; flex-shrink: 0; }
.brand strong { display: block; font-size: 18px; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.2; }
.brand small { display: block; font-size: 12px; color: #94a3b8; }
.site-nav { display: flex; gap: 20px; font-size: 14px; font-weight: 700; }
.site-nav a { color: #cbd5e1; }
.site-nav a:hover { color: #fff; }
.site-nav a[aria-current="page"] { color: #fff; text-decoration: underline; text-decoration-color: #f43f5e; text-decoration-thickness: 2px; text-underline-offset: 6px; }

main { padding-top: 24px; padding-bottom: 48px; }
.crumbs { font-size: 13px; color: #64748b; margin-bottom: 12px; }
.crumbs a { color: #94a3b8; }
h1 { margin: 0 0 8px; font-size: 34px; font-weight: 900; line-height: 1.1; color: #fff; }
@media (min-width: 640px) { h1 { font-size: 42px; } }
.lede { margin: 0 0 24px; max-width: 48rem; font-size: 17px; color: #cbd5e1; }

.title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 8px; }
.title-row h1 { margin: 0; }
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 0;
    background: #1e293b;
    color: #cbd5e1;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}
.share-btn:hover { background: #334155; color: #fff; }
.share-btn:focus-visible { outline: 2px solid #f43f5e; outline-offset: 1px; }
.share-btn.share-done { background: rgba(52, 211, 153, 0.15); color: #6ee7b7; }
.share-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.panel { margin-top: 24px; padding: 20px; background: #0f172a; border: 1px solid #1e293b; }
@media (min-width: 640px) { .panel { padding: 24px; } }
h2 { margin: 0 0 12px; font-size: 14px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; }
h3 { margin: 24px 0 8px; font-size: 13px; font-weight: 700; color: #fb7185; }
h2 + h3 { margin-top: 8px; }
.note { margin: 0 0 12px; font-size: 13px; color: #94a3b8; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
    padding: 8px;
    text-align: left;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
    border-bottom: 1px solid #1e293b;
    white-space: nowrap;
}
th.group { text-align: center; border-bottom: 1px solid #334155; }
td { padding: 8px; border-bottom: 1px solid rgba(30, 41, 59, 0.6); vertical-align: top; }
tbody tr:hover { background: rgba(30, 41, 59, 0.4); }
.num { text-align: center; font-family: 'JetBrains Mono', monospace; }
.rank { font-weight: 700; color: #fff; }
.dim { color: #334155; }
.nowrap { white-space: nowrap; }
.sub { display: block; font-size: 12px; color: #94a3b8; }
td.num .sub { display: inline; }
.badge {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border: 1px solid rgba(52, 211, 153, 0.4);
    border-radius: 9999px;
    background: rgba(52, 211, 153, 0.1);
    color: #6ee7b7;
    font-size: 10px;
    font-weight: 900;
    vertical-align: 2px;
}

.year-nav { display: flex; justify-content: space-between; gap: 16px; margin: 16px 0; font-weight: 700; }
.year-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; font-family: 'JetBrains Mono', monospace; }
.letter-jump { display: flex; flex-wrap: wrap; gap: 4px 12px; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.artist-list { columns: 14rem auto; column-gap: 24px; margin: 0; padding: 0; list-style: none; }
.artist-list li { padding: 3px 0; break-inside: avoid; }

/* Blog */
.post-list { margin: 0; padding: 0; list-style: none; max-width: 48rem; }
.post-list li { padding: 20px 0; border-top: 1px solid #1e293b; }
.post-list p { margin: 6px 0 0; color: #cbd5e1; }
.post-list .note { margin-top: 6px; }
.post-title { font-size: 22px; font-weight: 900; color: #fff; }
.post-title:hover { color: #fb7185; }

.article { max-width: 44rem; }
.article .kicker { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #34d399; }
.article .lede { margin-bottom: 8px; font-size: 19px; }
.article .byline { margin: 0 0 32px; font-size: 13px; color: #94a3b8; }
.article p { margin: 0 0 16px; font-size: 17px; line-height: 1.7; color: #cbd5e1; }
.article strong { color: #fff; }
.article ul { margin: 0 0 16px; padding-left: 1.4em; list-style: disc; }
.article li { margin: 0 0 6px; font-size: 17px; line-height: 1.7; color: #cbd5e1; }
.article li a { text-decoration: underline; text-underline-offset: 3px; }
.article p a { text-decoration: underline; text-underline-offset: 3px; }
.article h2 { margin: 48px 0 16px; padding-top: 24px; border-top: 1px solid #1e293b; font-size: 24px; letter-spacing: 0; text-transform: none; }
.article h3 { margin: 36px 0 12px; font-size: 20px; font-weight: 900; color: #fff; }
.article h2 + h3 { margin-top: 16px; }
.article figure { margin: 8px 0 28px; }
.article figure img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid #1e293b; }
.article figcaption { margin-top: 8px; font-size: 13px; line-height: 1.5; color: #94a3b8; }
.article .table-wrap { margin: 0 0 24px; overflow-x: auto; }
.article table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; color: #cbd5e1; }
.article th { padding: 8px 10px; text-align: left; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; border-bottom: 1px solid #334155; }
.article td { padding: 8px 10px; vertical-align: top; border-bottom: 1px solid #1e293b; }
.article td:first-child, .article th:first-child { width: 2.5em; padding-right: 10px; color: #94a3b8; font-variant-numeric: tabular-nums; }
.article .more { font-size: 15px; font-weight: 700; }
.article .more a { text-decoration: none; }
.article .author-note { display: flex; align-items: center; gap: 14px; margin: 32px 0 0; padding-top: 16px; border-top: 1px solid #1e293b; }
.article .author-note img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; pointer-events: none; }
.article .author-note p { margin: 0; font-size: 14px; color: #94a3b8; }
.article .discuss { margin-top: 28px; padding-top: 16px; border-top: 1px solid #1e293b; }
.article .discuss a { display: inline-flex; align-items: center; gap: 8px; }
.article .discuss svg { width: 16px; height: 16px; flex-shrink: 0; }

.site-footer { border-top: 1px solid #1e293b; background: rgba(15, 23, 42, 0.5); padding: 24px 0; font-size: 13px; color: #94a3b8; }
.site-footer p { margin: 0 0 8px; max-width: 48rem; }
.site-footer a { color: #cbd5e1; text-decoration: underline; }
/* Follow links (RSS, later Bluesky): small icon before the label. */
.follow a { display: inline-flex; align-items: center; gap: 5px; }
.follow svg { width: 13px; height: 13px; flex-shrink: 0; }
.lede + .follow { margin: -12px 0 24px; }

/* ---------------------------------------------------------------------------
   Reading mode (added 2026-11-09): blog posts and the blog index.
   --------------------------------------------------------------------------- */
body.reading { background: #f4efe4; color: #1c1917; }
body.reading .site-header { background: #020617; border-bottom: 3px solid #020617; }
body.reading .site-footer { background: #020617; border-top: 0; }

body.reading main { padding-top: 32px; padding-bottom: 64px; }
body.reading .crumbs { max-width: 40rem; margin: 0 auto 16px; }
body.reading .crumbs, body.reading .crumbs a { color: #78716c; }

body.reading .article { max-width: 40rem; margin: 0 auto; }
body.reading .article .kicker { color: #047857; font-family: 'Inter', sans-serif; padding-bottom: 10px; border-bottom: 1px solid #1c1917; margin-bottom: 18px; }
body.reading h1 { font-family: 'Newsreader', Georgia, serif; font-weight: 700; color: #0c0a09; font-size: 36px; line-height: 1.08; letter-spacing: -0.01em; }
@media (min-width: 640px) { body.reading h1 { font-size: 48px; } }
body.reading .article .lede { font-family: 'Newsreader', Georgia, serif; font-style: normal; font-size: 21px; line-height: 1.45; color: #44403c; margin-top: 12px; }
body.reading .article .byline { color: #57534e; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 10px 0; border-top: 1px solid #d6d3d1; border-bottom: 1px solid #d6d3d1; }

body.reading .article p,
body.reading .article li { font-family: 'Newsreader', Georgia, serif; font-size: 20px; line-height: 1.6; color: #292524; }
body.reading .article p { margin-bottom: 1.1em; }
body.reading .article strong { color: #0c0a09; }
body.reading .article a { color: #be123c; text-decoration-color: rgba(190, 18, 60, 0.35); text-decoration-thickness: 1px; }
body.reading .article a:hover { color: #9f1239; text-decoration-color: currentColor; }

body.reading .article h2 { font-family: 'Newsreader', Georgia, serif; font-size: 28px; font-weight: 700; color: #0c0a09; border-top: 1px solid #1c1917; padding-top: 28px; }
body.reading .article h3 { font-family: 'Newsreader', Georgia, serif; font-size: 23px; font-weight: 700; line-height: 1.25; color: #0c0a09; }
body.reading .article em { color: inherit; }

body.reading .article figure img { border: 1px solid #d6d3d1; border-radius: 2px; box-shadow: 0 1px 3px rgba(28, 25, 23, 0.12); }
body.reading .article figcaption { color: #57534e; font-family: 'Inter', sans-serif; }

body.reading .article table { color: #292524; font-size: 15px; }
body.reading .article th { color: #57534e; border-bottom: 2px solid #1c1917; }
body.reading .article td { border-bottom: 1px solid #e7e5e4; }
body.reading .article td:first-child, body.reading .article th:first-child { color: #78716c; }
body.reading tbody tr:hover { background: transparent; }

body.reading .share-btn { background: transparent; color: #44403c; border: 1px solid #d6d3d1; }
body.reading .share-btn:hover { background: #e7e5e4; color: #0c0a09; }

body.reading .article .author-note { border-top: 1px solid #1c1917; }
body.reading .article .author-note p { font-family: 'Inter', sans-serif; font-size: 14px; color: #57534e; }
body.reading .article .discuss { border-top: 1px solid #d6d3d1; }
body.reading .article .discuss a { font-family: 'Inter', sans-serif; font-size: 15px; text-decoration: none; }

/* Blog index in reading mode: a newspaper-style list of stories in the same column. */
body.reading .blog-index { max-width: 40rem; margin: 0 auto; }
body.reading .blog-index .lede { font-family: 'Newsreader', Georgia, serif; font-size: 21px; line-height: 1.45; color: #44403c; margin: 12px 0 8px; }
body.reading .blog-index .follow { color: #57534e; padding-bottom: 14px; margin: 0 0 4px; border-bottom: 3px double #1c1917; }
body.reading .blog-index .follow a { color: #be123c; }
body.reading .post-list { max-width: none; }
body.reading .post-list li { padding: 24px 0; border-top: 1px solid #d6d3d1; }
body.reading .post-list li:first-child { border-top: 0; }
body.reading .post-title { font-family: 'Newsreader', Georgia, serif; font-size: 28px; font-weight: 700; line-height: 1.15; color: #0c0a09; }
body.reading .post-title:hover { color: #be123c; text-decoration: none; }
body.reading .post-list p { font-family: 'Newsreader', Georgia, serif; font-size: 19px; line-height: 1.5; color: #44403c; margin-top: 8px; }
body.reading .post-list .note { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #78716c; }

/* Page-to-page fade (added 2026-11-09). Browsers that support cross-document view transitions
   (Chrome, Edge, Safari 18.2+) cross-fade between pages instead of snapping, which softens the
   switch between the dark chart pages and the light blog pages. Other browsers just load normally.
   The home page (index.html) carries the same rule in its own <style> block. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.45s; animation-timing-function: ease-in-out; }
/* The masthead is the same on every page, so it holds still while the page under it fades. */
.site-header { view-transition-name: masthead; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Chart box (added 2026-11-09): a newspaper-style daily/weekly chart inside a post.
   Written in a post as a [chart] block; built by render_chartbox() in build_static_pages.py. */
body.reading .article .chartbox { margin: 8px 0 32px; padding: 14px 0 12px; border-top: 4px double #1c1917; border-bottom: 1px solid #1c1917; }
body.reading .article .chartbox + h2 { border-top: 0; padding-top: 4px; margin-top: 36px; }
body.reading .article .chartbox .cb-flag { margin: 0; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.3; color: #0c0a09; }
body.reading .article .chartbox .cb-dek { margin: 2px 0 12px; font-family: 'Newsreader', Georgia, serif; font-size: 16px; line-height: 1.4; color: #57534e; }
.chartbox .cb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.chartbox .cb-cols section + section { border-left: 1px solid #d6d3d1; padding-left: 28px; }
@media (max-width: 600px) {
    .chartbox .cb-cols { grid-template-columns: 1fr; }
    .chartbox .cb-cols section + section { border-left: 0; padding-left: 0; margin-top: 16px; }
}
.chartbox h4 { margin: 0 0 4px; padding-bottom: 5px; border-bottom: 1px solid #1c1917; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #44403c; }
.chartbox ol { margin: 0; padding: 0; list-style: none; }
body.reading .article .chartbox li { display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 5px 0; border-bottom: 1px dotted #c8c3bc; line-height: 1.25; }
body.reading .article .chartbox li:last-child { border-bottom: 0; }
.chartbox .cb-rank { flex: 0 0 1.4em; text-align: right; font-family: 'Newsreader', Georgia, serif; font-size: 19px; font-weight: 700; color: #0c0a09; font-variant-numeric: tabular-nums; }
.chartbox .cb-song { flex: 1; min-width: 0; }
.chartbox .cb-title { display: block; font-family: 'Newsreader', Georgia, serif; font-size: 17px; color: #0c0a09; }
.chartbox .cb-artist { display: block; margin-top: 1px; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #78716c; }
.chartbox .cb-mv { flex: 0 0 auto; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; color: #57534e; font-variant-numeric: tabular-nums; }
.chartbox .cb-new { padding: 1px 4px; background: #0c0a09; color: #f4efe4; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; }
body.reading .article .chartbox .cb-note { margin: 10px 0 0; font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.45; color: #78716c; }