/*
DJ Hammy Archive — consolidated core public CSS
Version 2.2.0

OWNERSHIP
---------
tokens.css
    Design values only.

style.css
    Public foundation/layout plus all non-Stats canonical c-* components and
    their internal anatomy/responsive behaviour.

stats.css
    Stats-only layout, canonical Stats components and Stats anatomy.

There is deliberately no additional public component stylesheet. Components
have one owning CSS file. Historical compatibility/migration selector layers
have been removed.

CONSOLIDATION RULE
------------------
Prefer editing the existing owning component rule. Do not append a corrective
override at the bottom of the file unless there is a genuine cascade reason.
*/

* {
    box-sizing: border-box;
}

:root {
    --bg: var(--color-bg);
    --panel: var(--color-surface);
    --text: var(--color-text);
    --muted: var(--color-text-muted);
    --border: var(--color-border);
    --accent: var(--color-action);
    --accent-hover: var(--color-action-hover);
    --archive-green: var(--color-action);
    --hammy-orange: var(--color-brand);
    --hammy-orange-hover: var(--color-brand-hover);
    --ink: var(--color-dark);
    --ink-soft: var(--color-dark-field);
    --ink-border: var(--color-dark-border);
    --cream: var(--color-bg);
    --success: var(--color-success-soft);
    --warning: var(--color-warning);
    --error-bg: var(--color-error-surface);
    --error-border: var(--color-error-border);

    --radius: var(--radius-default);

    --legacy-shadow-soft: var(--shadow-soft);
}

body {
    margin: 0;
    
    
    
    line-height: 1.5;
}

.container {
    
    margin: 0 auto;
    padding: var(--space-12) var(--space-6) 80px;
}

.container.narrow { max-width: 850px; }

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: 30px;
}

h1, h2, p { margin-top: 0; }

h1 {
    margin-bottom: 0;
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1;
}

h2 { margin-bottom: 0; }

.eyebrow,
.label {
    margin-bottom: var(--space-2);
    color: var(--muted);
    font-size: var(--type-size-eyebrow);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.c-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--control-height);
    padding: 10px var(--space-4);
    border: 0;
    
    background: var(--accent);
    color: var(--palette-white);
    font: inherit;
    
    text-decoration: none;
    cursor: pointer;
}

.c-button:hover { background: var(--accent-hover); }

.c-button:focus-visible {
    outline: 3px solid var(--color-focus-action);
    outline-offset: 2px;
}



/* v2.0.1 — canonical compact-button baseline.
   Contextual compact-action rules later in this file may override dimensions. */
.c-button.c-button--compact {
    min-height: var(--control-height-compact);
    padding: 7px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--color-compact-action-surface);
    color: var(--text);
    font-size: var(--type-size-compact-meta);
    font-weight: 800;
}




.c-button[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

.archive-search{
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}



.archive-search {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(360px, 1.2fr);
    gap: var(--space-7);
    align-items: center;
    padding: var(--space-6) var(--space-7);
    margin-bottom: var(--space-5);
}

.archive-search h2 {
    margin-bottom: 6px;
}

.archive-search .intro {
    margin-bottom: 0;
}

.search-row{
    display: flex;
    gap: 10px;
}

.search-row input{
    min-width: 0;
    flex: 1;
}

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









.field small{ color: var(--muted); }







table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: var(--space-3) 10px;
    border-top: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

th {
    color: var(--muted);
    font-size: var(--type-size-table);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.number { text-align: right; }





.intro {
    color: var(--muted);
    max-width: 65ch;
}



.field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.full { grid-column: 1 / -1; }

label { font-weight: 650; }

input,
textarea {
    width: 100%;
    padding: 11px var(--space-3);
    border: 1px solid var(--color-control-border);
    border-radius: 7px;
    background: var(--palette-white);
    color: var(--text);
    font: inherit;
}

textarea {
    min-height: 330px;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: var(--type-size-body-sm);
}

input:focus,
textarea:focus {
    outline: 2px solid var(--color-focus-action-strong);
    border-color: var(--accent);
}

.actions {
    display: flex;
    justify-content: flex-end;
}

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

















.tag {
    display: inline-block;
    padding: 5px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--color-tag-surface);
    font-size: var(--type-size-control-sm);
}














select {
    width: 100%;
    padding: 11px var(--space-3);
    border: 1px solid var(--color-control-border);
    border-radius: 7px;
    background: var(--palette-white);
    color: var(--text);
    font: inherit;
}











.c-empty-state {
    padding: 26px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.c-empty-state h3 {
    margin: 0 0 var(--space-2);
}

.c-empty-state p {
    margin: 0 0 var(--space-4);
    color: var(--muted);
}













.tabs {
    display:flex;
    gap:var(--space-2);
    margin-bottom:18px;
}

.tabs a{
    text-decoration:none;
    color:var(--text);
    border:1px solid var(--border);
    background:var(--palette-white);
    border-radius:7px;
}

.tabs a { padding:9px 14px; font-weight:650; }

.tabs a.active{
    background:var(--accent);
    color:var(--palette-white);
    border-color:var(--accent);
}

.music-search {
    display:flex;
    gap:var(--space-4);
    align-items:end;
}







@media (max-width: 800px) {
    

    

    .page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    

    .music-search{
        align-items: stretch;
        flex-direction: column;
    }

    

    .archive-search {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}

@media (max-width: 560px) {
    .container {
        padding: 30px var(--space-4) 60px;
    }

    .archive-search{
        padding: var(--space-5);
    }

    .search-row{
        flex-direction: column;
        align-items: stretch;
    }

    .search-row .c-button{
        width: 100%;
    }
}

/* Responsive data tables */




/* Search and show-card results */


.search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
    align-items: stretch;
}

.results-summary {
    margin: 6px 0 0;
    color: var(--muted);
}



.show-results {
    display: grid;
    gap: 14px;
}



.show-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) 14px;
    align-items: center;
    margin-bottom: 10px;
    
    
}







mark {
    padding: 0 0.08em;
    border-radius: 3px;
    background: var(--color-highlight-surface);
    color: inherit;
    font-weight: 750;
}

.c-match-box {
    margin-top: 14px;
    padding: var(--space-3) 14px;
    border-left: 3px solid var(--accent);
    border-radius: 0 8px 8px 0;
    background: var(--color-match-surface);
}

.match-heading {
    margin: 0 0 6px;
    color: var(--muted);
    font-size: var(--type-size-label);
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.match-list {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.match-list li {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: var(--space-2);
}

.match-track-number {
    color: var(--muted);
    font-size: var(--type-size-meta-sm);
}

.more-matches {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: var(--type-size-meta-sm);
}





@media (max-width: 700px) {
    .search-row {
        grid-template-columns: 1fr;
    }

    .search-row .c-button {
        width: 100%;
    }

    .c-show-card--result {
        padding: var(--space-4);
    }

    

    
}



html { scroll-behavior: smooth; }

body {
    background: var(--cream);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { text-underline-offset: 3px; }

.c-site-header {
    position: relative;
    z-index: 20;
    background: var(--ink);
    border-bottom: 1px solid var(--ink-border);
    color: var(--palette-white);
}

.c-site-header__inner {
    max-width: 1120px;
    min-height: 78px;
    margin: 0 auto;
    padding: 0 var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
}

.c-site-header__brand {
    display: inline-flex;
    flex-direction: column;
    color: var(--palette-white);
    text-decoration: none;
    line-height: 1.05;
}

.c-site-header__brand-name {
    font-size: var(--type-size-card-title-lg);
    font-weight: 800;
    letter-spacing: -.02em;
}

.c-site-header__brand-sub {
    margin-top: var(--space-1);
    color: var(--hammy-orange);
    font-size: var(--type-size-brand-sub);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.c-site-nav {
    display: flex;
    align-items: center;
    gap: 5px;
}

.c-site-nav a {
    padding: 9px var(--space-3);
    border-radius: var(--radius-pill);
    color: var(--color-nav-muted-on-dark);
    font-size: var(--type-size-secondary);
    font-weight: 700;
    text-decoration: none;
}

.c-site-nav a:hover,
.c-site-nav a:focus-visible {
    background: var(--color-dark-soft);
    color: var(--palette-white);
}

.c-site-nav a.active {
    background: var(--hammy-orange);
    color: var(--color-text-on-brand);
}

.container {
    max-width: 1120px;
    padding-top: 42px;
}

.page-header h1 {
    letter-spacing: -.045em;
}

.eyebrow {
    font-size: var(--type-size-helper);
    letter-spacing: .12em;
}





.c-button {
    border-radius: 9px;
    font-weight: 750;
}



.c-button--brand:hover { background: var(--hammy-orange-hover); }

input,
select,
textarea {
    border-radius: 9px;
}

input:focus,
select:focus,
textarea:focus {
    outline: 3px solid var(--color-focus-brand-strong);
    outline-offset: 1px;
    border-color: var(--hammy-orange);
}

/* Homepage hero */
.c-hero--archive {
    background:
        radial-gradient(circle at 15% 10%, var(--color-home-hero-glow), transparent 34%),
        linear-gradient(120deg, var(--color-home-hero-warm) 0%, var(--ink) 48%, var(--color-home-hero-deep) 100%);
    color: var(--palette-white);
    border-bottom: 1px solid var(--ink-border);
}

.home-hero-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 72px var(--space-6) 82px;
}

.eyebrow-accent { color: var(--hammy-orange); }

.c-hero--archive h1 {
    
    margin: 0 0 18px;
    color: var(--palette-white);
    
    
}

.home-hero-intro {
    max-width: 680px;
    
    color: var(--color-home-hero-intro);
    font-size: clamp(1rem, 2vw, 1.18rem);
}

.c-archive-search {
    
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.c-archive-search input {
    min-height: var(--ranking-row-min-height);
    padding: 14px 17px;
    border: 1px solid var(--color-home-search-border);
    background: var(--color-dark-soft);
    color: var(--palette-white);
    font-size: var(--type-size-search-input);
}

.c-archive-search input::placeholder { color: var(--color-home-search-placeholder); }
.c-archive-search .c-button { min-height: var(--ranking-row-min-height); padding-inline: 24px; }









.c-home-shortcuts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: var(--space-3);
    margin-top: -28px;
    margin-bottom: 26px;
    position: relative;
    z-index: 3;
}

.c-home-shortcuts > a {
    
    display: flex;
    align-items: center;
    gap: 14px;
    
    border: 1px solid var(--border);
    border-radius: var(--radius);
    
    
    
    text-decoration: none;
}

.c-home-shortcuts > a:hover {
    transform: translateY(-1px);
    border-color: var(--color-home-shortcut-border-hover);
}

.shortcut-icon {
    min-width: 36px;
    color: var(--hammy-orange-hover);
    font-size: var(--type-size-secondary);
    font-weight: 850;
}

.c-home-shortcuts strong,
.c-home-shortcuts small { display: block; }
.c-home-shortcuts strong { font-size: var(--type-size-body); }
.c-home-shortcuts small { margin-top: 3px;  }

.c-show-card--featured {
    
    grid-template-columns: 175px minmax(0,1fr);
    
    
    border: 1px solid var(--border);
    
    background: var(--palette-white);
    box-shadow: var(--shadow-soft);
}










.show-kicker {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    color: var(--muted);
    font-size: var(--type-size-eyebrow);
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.show-kicker span + span::before { content: "·"; margin-right: 7px; color: var(--color-divider-soft); }

.card-actions,
.compact-actions { display: flex; flex-wrap: wrap; gap: 9px; }



.c-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: var(--space-5);
    
}

.c-section-heading h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -.04em; }
.c-text-link { color: var(--accent); font-weight: 750; text-decoration: none; }
.c-text-link:hover { text-decoration: underline; }

.recent-show-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    
}

.c-show-card--compact {
    
    display: flex;
    flex-direction: column;
    
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--palette-white);
}


.c-show-card--compact h3 a { color: inherit; text-decoration: none; }
.c-show-card--compact h3 a:hover { color: var(--accent); }
.show-card-meta {  color: var(--muted); font-size: var(--type-size-meta-sm); }
.compact-actions a { color: var(--accent); font-size: var(--type-size-control-sm); font-weight: 750; text-decoration: none; }
.compact-actions a:hover { text-decoration: underline; }

.archive-at-a-glance {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 22px;
    padding: var(--space-5) 0 0;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: var(--type-size-meta-sm);
}
.archive-at-a-glance strong { color: var(--text); }

/* Existing public pages receive the new identity without changing their workflow yet. */
body:not(.home-page) .page-header {
    margin-top: var(--space-1);
}
body:not(.home-page) .page-header .c-button--secondary {
    background: var(--color-secondary-button-border);
}

.tabs a.active{ background: var(--accent); border-color: var(--accent); }



@media (max-width: 800px) {
    .c-site-header__inner {
        min-height: auto;
        padding-top: 14px;
        padding-bottom: 10px;
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .c-site-nav {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 2px;
        -webkit-overflow-scrolling: touch;
    }

    .c-site-nav a {
        flex: 0 0 auto;
        padding: var(--space-2) 11px;
    }

    .home-hero-inner { padding-top: 52px; padding-bottom: 62px; }
    .c-home-shortcuts { grid-template-columns: 1fr; margin-top: -20px; }
    .c-home-shortcuts > a { min-height: 72px; }
    .c-show-card--featured { grid-template-columns: 1fr; }
    
    
    .recent-show-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .c-site-header__inner { padding-inline: 16px; }
    .home-hero-inner { padding: 42px var(--space-4) 54px; }
    .c-hero--archive h1 { font-size: clamp(2.75rem, 14vw, 4rem); }
    .c-archive-search { grid-template-columns: 1fr; }
    .c-archive-search .c-button { width: 100%; }
    
    .home-content { padding-inline: 16px; }
    
    .card-actions { flex-direction: column; }
    .card-actions .c-button { width: 100%; }
    .c-section-heading { align-items: flex-start; flex-direction: column; gap: var(--space-2); }
    .c-show-card--compact { min-height: 0; }
    .archive-at-a-glance { margin-bottom: var(--space-4); }
}


.nav-label-short { display: none; }

.home-hero-inner {
    padding-top: var(--space-12);
    padding-bottom: var(--space-8);
}

.c-hero--archive h1 {
    
    margin-bottom: var(--space-3);
    
    
}

.home-hero-intro {
    margin-bottom: 22px;
}

.c-archive-search {
    width: min(860px, 100%);
}

.c-archive-search input,
.c-archive-search .c-button {
    min-height: 54px;
}

.c-home-shortcuts {
    margin: 26px 0 0;
}

.c-home-shortcuts > a {
    min-height: 72px;
    padding: 14px var(--space-4);
    border-color: var(--color-home-shortcut-border);
    background: var(--color-home-shortcut-surface);
    color: var(--palette-white);
    box-shadow: none;
}

.c-home-shortcuts > a:hover,
.c-home-shortcuts > a:focus-visible {
    transform: none;
    border-color: var(--color-home-shortcut-hover-border);
    background: var(--color-home-shortcut-hover-surface);
}

.c-home-shortcuts small { color: var(--color-home-shortcut-muted); }
.c-home-shortcuts .shortcut-icon { color: var(--hammy-orange); }

.home-content {
    padding-top: var(--space-7);
}

.c-show-card--featured {
    display: block;
    padding: var(--space-6) 26px;
    margin-bottom: var(--space-8);
    overflow: visible;
    border-radius: var(--radius);
}

.latest-show-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: 14px;
}

.latest-label {
    color: var(--accent);
    font-size: var(--type-size-status);
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .11em;
}

.c-tag--stream,
.c-tag--show-type {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: var(--space-1) 10px;
    border-radius: var(--radius-pill);
    font-size: var(--type-size-label);
    font-weight: 800;
}

.c-tag--stream {
    background: var(--accent);
    color: var(--palette-white);
}

.c-show-card--featured h2 {
    max-width: 850px;
    margin: var(--space-2) 0 var(--space-2);
    font-size: clamp(1.35rem, 2.7vw, 1.85rem);
    line-height: 1.15;
    letter-spacing: -.03em;
}

.latest-show-meta {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: var(--type-size-secondary);
    font-weight: 650;
}

.home-section { margin-bottom: 30px; }
.c-section-heading { margin-bottom: 14px; }

.recent-show-grid { gap: 10px; }

.c-show-card--compact {
    min-height: 190px;
    padding: 17px;
    transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, transform var(--duration-fast) ease;
}

.c-show-card--compact:hover {
    transform: translateY(-1px);
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-card-hover);
}

.recent-show-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--muted);
    font-size: var(--type-size-label);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .045em;
}

.c-tag--show-type {
    min-height: 25px;
    padding: 3px var(--space-2);
    background: var(--color-show-type-surface);
    color: var(--color-show-type-text);
}

.recent-show-date {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: var(--type-size-compact-meta);
    font-weight: 650;
}

.c-show-card--compact h3 {
    margin: 7px 0 var(--space-2);
    font-size: var(--type-size-recent-show-title);
    line-height: 1.22;
}

.show-card-meta {
    margin: auto 0 var(--space-3);
}

.compact-actions {
    gap: 7px;
}

.compact-actions .c-button--compact {
    min-height: var(--control-height-compact);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--color-compact-action-surface);
    color: var(--text);
    font-size: var(--type-size-compact-meta);
    font-weight: 800;
    text-decoration: none;
}

.compact-actions .c-button--compact:hover {
    background: var(--color-compact-action-hover);
    text-decoration: none;
}

.compact-actions .c-button--primary {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--palette-white);
}

.compact-actions .c-button--primary:hover {
    background: var(--accent-hover);
}

.archive-at-a-glance {
    padding-top: var(--space-4);
}

@media (max-width: 800px) {
    .home-hero-inner {
        padding-top: 38px;
        padding-bottom: var(--space-7);
    }

    .c-home-shortcuts {
        grid-template-columns: repeat(3, minmax(0,1fr));
        margin-top: 22px;
    }

    .c-home-shortcuts > a {
        min-height: 66px;
        align-items: flex-start;
    }

    .c-home-shortcuts small { display: none; }
    .c-show-card--featured { padding: 21px; }
}

@media (max-width: 650px) {
    .c-home-shortcuts {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .c-home-shortcuts > a {
        min-height: 54px;
        align-items: center;
    }

    .c-home-shortcuts small { display: block; }
}

@media (max-width: 560px) {
    .c-site-header__inner {
        flex-direction: row;
        align-items: center;
        padding-top: var(--space-3);
        padding-bottom: var(--space-3);
    }

    .c-site-nav {
        width: auto;
        margin-left: auto;
        overflow-x: auto;
    }

    .c-site-nav a { padding: 7px 9px; }
    .nav-label-full { display: inline; }
    .c-site-nav a:nth-child(3) .nav-label-full { display: none; }
    .nav-label-short { display: inline; }
    .c-site-nav a:not(:nth-child(3)) .nav-label-short { display: none; }

    .c-site-header__brand-sub { display: none; }
    .c-site-header__brand-name { font-size: var(--type-size-body); }

    .home-hero-inner {
        padding: var(--space-8) var(--space-4) var(--space-6);
    }

    .c-hero--archive h1 {
        font-size: clamp(2.45rem, 12vw, 3.4rem);
    }

    .home-hero-intro {
        margin-bottom: 18px;
        font-size: var(--type-size-intro-compact);
    }

    .c-archive-search {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .c-archive-search input,
    .c-archive-search .c-button {
        min-height: 50px;
    }

    

    .c-home-shortcuts { margin-top: 18px; }
    .home-content { padding-top: var(--space-5); }

    .c-show-card--featured {
        padding: 18px;
        margin-bottom: 26px;
    }

    .latest-show-topline { margin-bottom: 10px; }
    .c-show-card--featured h2 { font-size: var(--type-size-title-md); }

    .card-actions {
        flex-direction: row;
    }

    .card-actions .c-button {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        padding-inline: 10px;
        font-size: var(--type-size-control-sm);
    }

    .c-section-heading {
        flex-direction: row;
        align-items: end;
        gap: var(--space-3);
    }

    .c-section-heading .c-text-link {
        font-size: var(--type-size-meta-sm);
        white-space: nowrap;
    }

    .c-show-card--compact { min-height: 0; }

    .compact-actions .c-button--compact {
        flex: 1 1 0;
    }
}

.shows-page {
    padding-top: 40px;
}

.c-page-header--browse {
    margin-bottom: 22px;
}

.c-page-header--browse h1 {
    margin-bottom: 10px;
}

.browse-page-intro {
    max-width: 620px;
    margin-bottom: 0;
    color: var(--muted);
    font-size: var(--type-size-intro);
}

.c-show-search {
    margin-bottom: 34px;
    padding: 22px;
    border: 1px solid var(--ink-border);
    border-radius: var(--radius);
    background: var(--ink);
    color: var(--palette-white);
}

.c-show-search .field small{
    color: var(--color-dark-helper-text);
}



.browse-search-row input {
    min-height: 52px;
    border-color: var(--color-dark-input-border);
    background: var(--color-dark-elevated);
    color: var(--palette-white);
}

.browse-search-row input::placeholder {
    color: var(--color-dark-input-placeholder);
}











.c-show-search label {
    color: var(--color-filter-label);
}

.c-show-search select {
    border-color: var(--color-filter-control-border);
    background: var(--color-dark-elevated);
    color: var(--palette-white);
}

.c-results-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: var(--space-4);
}

.c-results-header h2 {
    font-size: var(--type-size-results-title);
}

.results-summary,
.search-interpretation {
    margin: var(--space-1) 0 0;
    color: var(--muted);
}

.show-results-modern {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.c-show-card--result {
    display: flex;
    min-height: 220px;
    flex-direction: column;
    
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    transition: transform var(--duration-fast) ease, border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.c-show-card--result:hover {
    
    border-color: var(--color-show-result-hover-border);
    
}

.show-card-modern-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.show-stream-label {
    color: var(--muted);
    font-size: var(--type-size-micro);
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .055em;
}

.show-card-date {
    margin: var(--space-3) 0 0;
    color: var(--muted);
    font-size: var(--type-size-navigation);
    font-weight: 650;
}

.c-show-card--result h3 {
    margin: 7px 0 var(--space-2);
    font-size: var(--type-size-card-title);
    line-height: 1.22;
}

.c-show-card--result h3 a {
    color: var(--text);
    text-decoration: none;
}

.c-show-card--result h3 a:hover {
    color: var(--accent);
}

.show-card-details {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: var(--type-size-control-sm);
}

.c-show-card--result .c-match-box {
    margin: var(--space-1) 0 var(--space-4);
    padding: var(--space-3);
    border: 1px solid var(--color-playlist-match-border);
    border-radius: 10px;
    background: var(--color-playlist-match-surface);
}

.c-show-card--result .match-heading {
    margin-bottom: 7px;
    color: var(--color-playlist-match-label);
    font-size: var(--type-size-helper);
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.c-show-card--result .match-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.c-show-card--result .match-list li {
    display: grid;
    grid-template-columns: 34px minmax(0,1fr);
    gap: 6px;
    padding: var(--space-1) 0;
    font-size: var(--type-size-control-sm);
}

.c-show-card--result .match-track-number {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.show-card-modern-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: auto;
}

.show-card-modern-actions .c-button--compact {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--color-show-action-surface);
    color: var(--text);
    font-size: var(--type-size-navigation);
    font-weight: 800;
    text-decoration: none;
}

.show-card-modern-actions .c-button--primary {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--palette-white);
}

.show-card-modern-actions .c-button--compact:hover {
    background: var(--color-show-action-hover);
}

.show-card-modern-actions .c-button--primary:hover {
    background: var(--accent-hover);
}

/* Show detail / playlist */
.c-hero--show {
    background:
        radial-gradient(circle at 9% 30%, var(--color-brand-tint), transparent 33%),
        var(--ink);
    color: var(--palette-white);
}

.show-detail-hero-inner {
    padding-top: 34px;
    padding-bottom: 38px;
}

.show-back-link {
    display: inline-block;
    margin-bottom: var(--space-6);
    color: var(--color-text-on-show-hero-muted);
    font-size: var(--type-size-secondary);
    font-weight: 750;
    text-decoration: none;
}

.show-back-link:hover {
    color: var(--palette-white);
}

.show-detail-kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
    color: var(--color-text-on-show-hero-muted);
    font-size: var(--type-size-eyebrow);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .055em;
}

.c-tag--show-type-on-dark {
    background: var(--color-brand-tint);
    color: var(--color-show-type-on-dark);
}

.c-hero--show h1 {
    max-width: 920px;
    font-size: clamp(2rem, 4.4vw, 3.5rem);
    line-height: 1.02;
    letter-spacing: -.045em;
}

.show-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) 18px;
    margin-top: 18px;
    color: var(--color-show-detail-meta);
    font-size: var(--type-size-detail-meta);
}

.show-detail-meta span + span::before {
    content: "·";
    margin-right: 18px;
    color: var(--color-show-detail-divider);
}

.show-detail-actions {
    margin-top: var(--space-6);
}

.show-detail-content {
    padding-top: 34px;
}

.playlist-section {
    max-width: 900px;
    margin: 0 auto;
}

.c-playlist-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: 15px;
}

.c-playlist-header h2 {
    font-size: var(--type-size-playlist-title);
}

.playlist-time-key {
    color: var(--muted);
    font-size: var(--type-size-compact-meta);
}

.track-list {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
}

.c-track-row {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: var(--space-4);
    align-items: center;
    min-height: 74px;
    padding: 11px var(--space-4);
    border-top: 1px solid var(--border);
}

.c-track-row:first-child {
    border-top: 0;
}

.c-track-row:hover {
    background: var(--color-surface-highlight);
}

.track-position {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: var(--space-2);
    align-items: baseline;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.track-number {
    color: var(--color-text-tertiary);
    font-size: var(--type-size-label);
    font-weight: 800;
}

.track-time {
    color: var(--text);
    font-size: var(--type-size-navigation);
    font-weight: 750;
}

.track-copy {
    min-width: 0;
}

.track-artist,
.track-song {
    display: block;
    width: fit-content;
    max-width: 100%;
    text-decoration: none;
}

.track-artist {
    color: var(--accent);
    font-size: var(--type-size-secondary);
    font-weight: 800;
}

.track-song {
    margin-top: 2px;
    color: var(--text);
    font-size: var(--type-size-body);
    font-weight: 650;
}

.track-artist:hover,
.track-song:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.c-playlist-actions {
    display: flex;
    justify-content: center;
    
    margin-top: var(--space-6);
}



@media (max-width: 760px) {
    .shows-page {
        padding-top: var(--space-7);
    }

    .c-show-search {
        padding: var(--space-4);
        margin-bottom: 26px;
    }

    .show-results-modern {
        grid-template-columns: 1fr;
    }

    .c-show-card--result {
        min-height: 0;
    }

    

    .c-results-header {
        align-items: center;
    }

    .show-detail-hero-inner {
        padding-top: var(--space-6);
        padding-bottom: 30px;
    }

    .show-back-link {
        margin-bottom: 18px;
    }

    .c-hero--show h1 {
        font-size: clamp(1.9rem, 8.5vw, 2.8rem);
    }

    .show-detail-meta span + span::before {
        margin-right: 10px;
    }

    .show-detail-content {
        padding-top: var(--space-6);
    }

    .c-track-row {
        grid-template-columns: 72px minmax(0,1fr);
        gap: 10px;
        min-height: 70px;
        padding: 10px var(--space-3);
    }

    .c-playlist-header {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-1);
    }
}

@media (max-width: 560px) {
    .browse-search-row {
        flex-direction: column;
    }

    .browse-search-row .c-button {
        width: 100%;
    }

    .show-card-modern-actions .c-button--compact {
        flex: 1 1 0;
        min-height: var(--control-height);
    }

    .show-detail-kicker {
        gap: 7px 9px;
    }

    .show-detail-meta {
        gap: 5px 10px;
    }

    .show-detail-meta span + span::before {
        margin-right: 10px;
    }

    .c-track-row {
        grid-template-columns: 62px minmax(0,1fr);
        padding: 10px;
    }

    .track-position {
        grid-template-columns: 1fr;
        gap: 1px;
    }

    .track-number {
        font-size: var(--type-size-track-number-mobile);
    }

    .track-time {
        font-size: var(--type-size-table);
    }

    .track-song {
        font-size: var(--type-size-body-compact);
    }

    .c-playlist-actions {
        flex-direction: column;
    }

    .c-playlist-actions .c-button {
        width: 100%;
    }
}


.show-search-form {
    display: grid;
    gap: 10px;
}











.show-filter-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: end;
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border-on-dark);
}

.show-filter-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.filter-field {
    display: grid;
    gap: 5px;
}

.filter-field label {
    color: var(--color-filter-label-light);
    font-size: var(--type-size-compact-meta);
    font-weight: 700;
}

.filter-field select {
    min-height: 42px;
    background: var(--color-search-field);
    border: 1px solid var(--color-search-border);
    color: var(--palette-white);
}

.show-filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
}

.filter-clear-link {
    color: var(--color-filter-clear);
    font-weight: 700;
    font-size: var(--type-size-secondary);
    text-decoration: none;
    white-space: nowrap;
}

.filter-clear-link:hover,
.filter-clear-link:focus-visible {
    color: var(--palette-white);
    text-decoration: underline;
    text-underline-offset: 3px;
}



.c-tag--filter {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    background: var(--color-filter-chip-surface);
    color: var(--color-filter-chip-text);
    font-size: var(--type-size-compact-meta);
    font-weight: 700;
}





.c-show-card--result {
    position: relative;
    padding: var(--space-4);
}



.c-show-card--result .c-button,
.c-show-card--result .playlist-match{
    position: relative;
    z-index: 2;
}

.c-show-card--result:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-show-card-hover);
}

@media (max-width: 760px) {
    

    

    

    .show-filter-bar {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .show-filter-fields {
        grid-template-columns: 1fr;
    }

    .show-filter-actions {
        justify-content: space-between;
    }

    .show-filter-actions .c-button {
        min-height: var(--control-height);
        flex: 1;
    }

    .filter-clear-link {
        min-height: var(--control-height);
        display: inline-flex;
        align-items: center;
        padding: 0 var(--space-1);
    }
}


.music-browser,
.music-detail-page {
    padding-bottom: 56px;
}

.c-page-header--music {
    padding: 34px 0 var(--space-4);
}

.c-page-header--music h1 {
    margin-bottom: 7px;
}

.c-page-header--music .page-intro {
    margin: 0;
    color: var(--muted);
    max-width: 640px;
}

.c-music-tabs {
    display: inline-flex;
    gap: var(--space-1);
    padding: var(--space-1);
    margin-bottom: 14px;
    border-radius: var(--radius-pill);
    
}

.c-music-tabs a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-4);
    border-radius: var(--radius-pill);
    
    font-weight: 800;
    text-decoration: none;
}



.c-music-search {
    margin-bottom: var(--space-7);
    padding: var(--space-4);
    border-radius: var(--radius-default);
    background: var(--ink);
}

.music-search-form {
    display: flex;
    gap: 9px;
    align-items: center;
}

.music-search-form input {
    flex: 1;
    min-width: 0;
    min-height: var(--control-height-large);
    background: var(--color-search-field);
    border: 1px solid var(--color-search-border);
    color: var(--palette-white);
}

.music-search-form input::placeholder {
    color: var(--color-control-border-strong);
}

.music-search-clear {
    
    text-decoration: none;
    font-weight: 700;
    padding: 0 6px;
}

.c-az-index {
    
    
    overflow-x: auto;
    
    
    scrollbar-width: thin;
}

.c-az-index a {
    flex: 0 0 auto;
    min-width: var(--az-index-size);
    height: var(--az-index-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-search-border);
    border-radius: var(--radius-sm);
    color: var(--color-az-text);
    font-size: var(--type-size-compact-meta);
    font-weight: 800;
    text-decoration: none;
}

.c-az-index a:first-child {
    min-width: 44px;
    padding: 0 var(--space-2);
}

.c-az-index a:hover,
.c-az-index a:focus-visible,
.c-az-index a.active {
    border-color: var(--hammy-orange);
    background: var(--hammy-orange);
    color: var(--color-text-on-brand);
}

.c-results-header--music {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.c-results-header--music h2 {
    margin: 2px 0 0;
}

.c-results-header--music p:not(.eyebrow) {
    margin: var(--space-1) 0 0;
    color: var(--muted);
}

.music-result-list {
    display: grid;
    gap: var(--space-2);
}

.c-result-card--music {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 18px;
    align-items: center;
    min-height: 82px;
    padding: 15px 17px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--palette-white);
    transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.c-result-card--music:hover {
    transform: translateY(-1px);
    border-color: var(--color-music-result-hover-border);
    box-shadow: var(--shadow-result-hover);
}

.music-result-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.music-result-main {
    min-width: 0;
}

.music-result-context {
    margin: 0 0 2px;
    color: var(--archive-green);
    font-size: var(--type-size-context);
    font-weight: 800;
}

.c-result-card--music h3 {
    margin: 0;
    font-size: var(--type-size-music-result-title);
}

.music-result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 5px 0 0;
    color: var(--muted);
    font-size: var(--type-size-control-sm);
}

.music-result-meta strong {
    color: var(--color-music-result-strong);
}

.music-result-arrow {
    font-size: var(--type-size-title-sm);
    color: var(--archive-green);
}

.music-empty-state {
    padding: 30px;
    text-align: center;
}

/* Artist/song detail */
.c-back-link {
    display: inline-flex;
    margin: var(--space-6) 0 var(--space-3);
    color: var(--archive-green);
    font-weight: 800;
    text-decoration: none;
}

.c-hero--music-profile {
    padding: var(--space-7);
    border-radius: 16px;
    background:
        radial-gradient(circle at 0 0, var(--color-music-profile-glow), transparent 35%),
        var(--ink);
    color: var(--palette-white);
}

.c-hero--music-profile .eyebrow {
    color: var(--hammy-orange);
}

.music-profile-context {
    margin: 6px 0 2px;
    color: var(--color-text-on-dark-secondary);
    font-weight: 800;
}

.c-hero--music-profile h1 {
    max-width: 850px;
    margin: 3px 0 var(--space-4);
    font-size: clamp(2.2rem, 5vw, 4.6rem);
    line-height: .98;
}

.music-profile-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) 18px;
    color: var(--color-music-profile-stats);
}

.music-profile-stats strong {
    color: var(--palette-white);
}

.music-profile-latest {
    margin: 15px 0 0;
    color: var(--color-muted-on-dark);
    font-size: var(--type-size-secondary);
}

.music-summary-panel {
    margin-top: var(--space-4);
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--palette-white);
}

.c-counterpart-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.c-counterpart-list span {
    display: inline-flex;
    padding: 6px 9px;
    border-radius: var(--radius-pill);
    background: var(--color-counterpart-pill);
    font-size: var(--type-size-navigation);
    font-weight: 700;
}

.music-appearances-section {
    margin-top: 30px;
}

.appearance-list {
    display: grid;
    gap: 9px;
}

.c-result-card--appearance {
    position: relative;
    display: grid;
    grid-template-columns: 78px minmax(0,1fr) auto;
    gap: 17px;
    align-items: center;
    padding: 14px var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--palette-white);
    transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.c-result-card--appearance:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-result-hover);
}

.appearance-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.appearance-date {
    display: grid;
    line-height: 1.05;
    color: var(--muted);
    font-size: var(--type-size-helper);
    font-weight: 800;
    letter-spacing: .06em;
    text-align: center;
}

.appearance-day {
    color: var(--color-appearance-day);
    font-size: var(--type-size-appearance-day);
    letter-spacing: 0;
}

.appearance-main {
    min-width: 0;
}

.appearance-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: var(--type-size-label);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.c-result-card--appearance h3 {
    margin: 0;
    font-size: var(--type-size-body);
}

.c-result-card--appearance p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: var(--type-size-control-sm);
}

.appearance-actions {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 7px;
}

@media (max-width: 760px) {
    .c-page-header--music {
        padding-top: var(--space-6);
    }

    .music-search-form {
        display: grid;
        grid-template-columns: 1fr auto;
    }

    .music-search-clear {
        grid-column: 1 / -1;
        padding: var(--space-1) 0 0;
    }

    .c-result-card--music {
        min-height: 76px;
        padding: 14px;
    }

    .c-hero--music-profile {
        padding: 22px 18px;
        border-radius: var(--radius-md);
    }

    .c-hero--music-profile h1 {
        font-size: clamp(2rem, 11vw, 3.2rem);
    }

    .c-result-card--appearance {
        grid-template-columns: 54px minmax(0,1fr);
        gap: var(--space-3);
        padding: 13px;
    }

    .appearance-actions {
        grid-column: 2;
        justify-self: start;
        flex-wrap: wrap;
    }

    .appearance-actions .c-button {
        min-height: 42px;
    }
}

@media (max-width: 480px) {
    .music-search-form {
        grid-template-columns: 1fr;
    }

    .music-search-form .c-button {
        width: 100%;
    }

    .music-result-context {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .appearance-date {
        align-self: start;
        padding-top: 3px;
    }
}


/* Accessible visually hidden labels */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* The segmented Artists/Songs control must remain legible in both states. */
.c-music-tabs {
    background: var(--color-mode-tabs-mobile-surface);
}

.c-music-tabs a {
    color: var(--color-mode-tabs-mobile-text);
}

.c-music-tabs a:hover,
.c-music-tabs a:focus-visible {
    color: var(--color-text);
}

.c-music-tabs a.active {
    background: var(--palette-white);
    color: var(--color-text);
    box-shadow: var(--shadow-mode-tabs-selected);
}

/* Search labels are intentionally available to assistive technology only. */
.music-search-form .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/*
 * A–Z must never depend on horizontal scrolling.
 * It wraps into as many columns as fit, so Z is always directly accessible.
 */
.c-az-index {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(34px, 1fr));
    gap: 6px;
    overflow: visible;
    width: 100%;
    margin-top: 14px;
    padding: 2px 0 0;
}

.c-az-index a,
.c-az-index a:first-child {
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 0 var(--space-1);
}

/* Explicit high-contrast text throughout the dark music search surface. */
.c-music-search {
    color: var(--color-dark-panel-text);
}

.c-music-search input {
    color: var(--palette-white);
}

.c-music-search input::placeholder {
    color: var(--color-dark-panel-placeholder);
    opacity: 1;
}

.music-search-clear {
    color: var(--color-dark-panel-clear);
}

.music-search-clear:hover,
.music-search-clear:focus-visible {
    color: var(--palette-white);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Ensure all green semantic accents have a concrete high-contrast value. */
.music-result-context,
.music-result-arrow,
.c-back-link {
    color: var(--archive-green);
}

@media (max-width: 760px) {
    .c-music-tabs {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .c-music-tabs a {
        justify-content: center;
        min-height: var(--control-height);
    }

    .c-music-search {
        padding: 14px;
    }

    /*
     * On phones the alphabet becomes a tidy multi-row grid rather than
     * a clipped horizontal strip.
     */
    .c-az-index {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 7px;
    }

    .c-az-index a,
    .c-az-index a:first-child {
        height: 42px;
        min-height: 42px;
        padding: 0;
    }
}

@media (max-width: 380px) {
    .c-az-index {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}


/* Top-level archive pages should begin at the same vertical position. */
.c-page-header--browse,
.c-page-header--music,
.c-page-header--stats {
    padding-top: 0;
    margin-bottom: 22px;
}

.c-page-header--music {
    padding-bottom: 0;
}

.c-page-header--stats {
    padding-bottom: 0;
}

/* One title scale for primary browse/stat pages. */
.c-page-header--browse h1,
.c-page-header--music h1,
.c-page-header--stats h1 {
    margin: 2px 0 var(--space-2);
    font-size: clamp(2.65rem, 4.8vw, 3.45rem);
    line-height: .98;
    letter-spacing: -.045em;
}

.browse-page-intro,
.c-page-header--music .page-intro,
.c-page-header--stats > p:last-child {
    max-width: 680px;
    margin: 0;
    color: var(--muted);
    font-size: var(--type-size-intro);
    line-height: 1.5;
}

/* Homepage remains the hero, but no longer dwarfs the rest of the product. */
.c-hero--archive h1 {
    max-width: 830px;
    font-size: clamp(3rem, 5.5vw, 4.15rem);
    line-height: .97;
}

/* Artist/song and show detail titles now share the same display scale. */
.c-hero--music-profile h1,
.c-hero--show h1 {
    font-size: clamp(2.2rem, 4.4vw, 3.6rem);
    line-height: 1;
    letter-spacing: -.045em;
}

/* Keep standard public content actions visually consistent. */
.card-actions .c-button,
.show-card-modern-actions .c-button--compact,
.appearance-actions .c-button,
.c-playlist-actions .c-button {
    font-weight: 800;
}

.c-stats-feature small {
    display: block;
    font-size: var(--type-size-feature-note);
    line-height: 1.35;
}

/* Keep the bottom playlist actions consistent with the rest of the public site. */
.c-playlist-actions {
    gap: var(--space-2);
}


.counterpart-more-mobile {
    display: none !important;
}

.c-show-search__filters > summary {
    display: none;
}

@media (max-width: 760px) {
    /* Header: retain direct navigation without a hamburger. */
    .c-site-header__inner {
        min-height: var(--ranking-row-min-height);
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
    }

    .c-site-header__brand { flex: 0 0 auto; }

    .c-site-header__brand-name {
        font-size: var(--type-size-ranking-mobile);
        white-space: nowrap;
    }

    .c-site-nav {
        gap: 1px;
        overflow: visible;
    }

    .c-site-nav a {
        min-height: 38px;
        padding: var(--space-2) var(--space-2);
        font-size: var(--type-size-eyebrow);
        white-space: nowrap;
    }

    /* General mobile page rhythm. */
    .container { padding-inline: 14px; }

    .c-page-header--browse,
    .c-page-header--music,
    .c-page-header--stats {
        margin-bottom: 17px;
    }

    .c-page-header--browse h1,
    .c-page-header--music h1,
    .c-page-header--stats h1 {
        font-size: clamp(2.15rem, 10.5vw, 2.75rem);
    }

    .browse-page-intro,
    .c-page-header--music .page-intro,
    .c-page-header--stats > p:last-child {
        font-size: var(--type-size-body-compact);
        line-height: 1.45;
    }

    /* Homepage: get search into view faster. */
    .home-hero-inner {
        padding-top: 25px;
        padding-bottom: 21px;
    }

    .c-hero--archive h1 {
        max-width: 480px;
        font-size: clamp(2.2rem, 10.7vw, 2.85rem);
        line-height: .98;
    }

    .home-hero-intro {
        margin-bottom: 14px;
        font-size: var(--type-size-body-sm);
    }

    .c-home-shortcuts { margin-top: 14px; }
    .c-home-shortcuts > a { min-height: 50px; }
    .home-content { padding-top: var(--space-4); }

    .c-show-card--featured {
        margin-bottom: 22px;
        padding: var(--space-4);
    }

    .c-show-card--featured h2 {
        font-size: var(--type-size-card-title-lg);
        line-height: 1.12;
    }

    .c-show-card--compact { padding: 14px; }
    .c-show-card--compact h3 { font-size: var(--type-size-body); }

    .compact-actions .c-button--compact,
    .card-actions .c-button {
        min-height: var(--control-height);
    }

    /* Shows: search stays visible; structured filters become optional. */
    .c-show-search { padding: 14px; }
    .show-search-form { gap: var(--space-3); }

    .c-show-search__filters {
        margin-top: 2px;
        border-top: 1px solid var(--color-border-on-dark);
    }

    .c-show-search__filters > summary {
        display: flex;
        min-height: var(--control-height-large);
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 2px 0;
        color: var(--palette-white);
        font-weight: 850;
        cursor: pointer;
        list-style: none;
    }

    .c-show-search__filters > summary::-webkit-details-marker { display: none; }

    .c-show-search__filters > summary::after {
        content: "+";
        flex: 0 0 auto;
        color: var(--hammy-orange);
        font-size: var(--type-size-title-sm);
    }

    .c-show-search__filters[open] > summary::after { content: "−"; }

    .filter-summary-state {
        margin-left: auto;
        color: var(--color-filter-summary-state);
        font-size: var(--type-size-table);
        font-weight: 700;
        text-align: right;
    }

    .show-filter-bar {
        margin-top: 7px;
        padding-top: var(--space-2);
        border-top: 0;
    }

    .show-filter-fields { gap: 9px; }
    .filter-field select { min-height: 46px; }
    .show-filter-actions { gap: var(--space-2); }
    .show-filter-actions .c-button { min-height: 46px; }

    /* Playlist: more readable and less mini-table-like. */
    .show-detail-hero-inner {
        padding-top: var(--space-5);
        padding-bottom: var(--space-6);
    }

    .c-hero--show h1 {
        font-size: clamp(1.72rem, 7.9vw, 2.25rem);
        line-height: 1.04;
    }

    .show-detail-content { padding-top: var(--space-5); }
    .track-list { border-radius: 10px; }

    .c-track-row {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 10px;
        min-height: 76px;
        padding: 10px 11px;
    }

    .track-position {
        align-self: start;
        grid-template-columns: 1fr;
        gap: 1px;
        padding-top: 2px;
    }

    .track-number { font-size: var(--type-size-helper); }
    .track-time { font-size: var(--type-size-compact-meta); }

    .track-artist {
        font-size: var(--type-size-control-sm);
        line-height: 1.25;
    }

    .track-song {
        margin-top: 3px;
        font-size: var(--type-size-intro-compact);
        line-height: 1.28;
    }

    .c-playlist-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .c-playlist-actions .c-button {
        width: 100%;
        min-height: 46px;
    }

    /* Music browser: compact the top area and make Clear quieter. */
    .c-page-header--music { padding-top: 18px; }
    .c-music-tabs { margin-bottom: 11px; }
    .c-music-search { margin-bottom: 22px; }
    .music-search-form { gap: var(--space-2); }

    .music-search-clear {
        justify-self: start;
        min-height: var(--control-height-compact);
        display: inline-flex;
        align-items: center;
        padding: 0;
        font-size: var(--type-size-secondary);
    }

    .c-az-index { gap: 6px; }

    .c-result-card--music {
        min-height: 72px;
        padding: 13px;
    }

    /* Artist/song detail: reduce weight while retaining touch targets. */
    .c-hero--music-profile { padding: var(--space-5) 17px; }

    .c-hero--music-profile h1 {
        font-size: clamp(2rem, 10vw, 2.8rem);
    }

    .music-profile-stats { gap: 7px 15px; }
    .music-summary-panel { padding: 15px; }

    .counterpart-desktop-extra,
    .counterpart-more-desktop {
        display: none !important;
    }

    .counterpart-more-mobile {
        display: inline-flex !important;
    }

    .c-result-card--appearance {
        grid-template-columns: 50px minmax(0,1fr);
        gap: 10px;
        padding: var(--space-3);
    }

    .appearance-day { font-size: var(--type-size-appearance-day-mobile); }
    .appearance-actions { gap: 6px; }

    .appearance-actions .c-button {
        min-height: var(--control-height);
        padding: 9px var(--space-3);
        font-size: var(--type-size-secondary);
    }
}

@media (max-width: 430px) {
    .c-site-header__inner { padding-inline: 10px; }
    .c-site-header__brand-name { font-size: var(--type-size-secondary); }

    .c-site-nav a {
        padding-inline: 7px;
        font-size: var(--type-size-micro);
    }

    .c-hero--archive h1 {
        font-size: clamp(2.05rem, 10.5vw, 2.55rem);
    }

    .c-section-heading { align-items: center; }
    .c-section-heading .c-text-link { font-size: var(--type-size-eyebrow); }

    .card-actions .c-button,
    .compact-actions .c-button--compact {
        padding-inline: 8px;
        font-size: var(--type-size-compact-meta);
    }

    .c-show-card--result { padding: 14px; }
    .show-card-modern-actions { gap: 6px; }

    .show-card-modern-actions .c-button--compact {
        padding-inline: 8px;
        font-size: var(--type-size-compact-meta);
    }

    .c-track-row {
        grid-template-columns: 52px minmax(0,1fr);
        padding-inline: 9px;
    }

    .c-counterpart-list span { font-size: var(--type-size-table); }

    .c-result-card--appearance {
        grid-template-columns: 46px minmax(0,1fr);
    }

    .appearance-actions {
        grid-column: 2;
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .appearance-actions .c-button {
        width: 100%;
        padding-inline: 8px;
        font-size: var(--type-size-navigation);
    }
}


.c-archive-search__examples {
    margin: 7px 0 0;
    color: var(--color-archive-example-muted);
    font-size: var(--type-size-navigation);
    line-height: 1.4;
}

.c-archive-search__examples a {
    color: var(--color-archive-example-link);
    text-decoration-color: var(--color-archive-example-link-hover);
    text-underline-offset: 3px;
}

.c-archive-search__examples a:hover,
.c-archive-search__examples a:focus-visible {
    color: var(--hammy-orange);
    text-decoration-color: currentColor;
}

.c-show-search .c-archive-search__examples {
    margin-top: var(--space-2);
}

@media (max-width: 760px) {
    .c-archive-search__examples {
        font-size: var(--type-size-table);
    }
}


/* Canonical semantic button vocabulary. */
.c-button--brand {
    background: var(--hammy-orange);
    color: var(--color-text-brand-ink);
    font-weight: 800;
}

.c-button--brand:hover,
.c-button--brand:focus-visible {
    background: var(--hammy-orange-hover);
    color: var(--color-text-brand-ink);
}

.c-button--primary {
    background: var(--accent);
    color: var(--palette-white);
    font-weight: 800;
}

.c-button--primary:hover,
.c-button--primary:focus-visible {
    background: var(--accent-hover);
    color: var(--palette-white);
}

.c-button--secondary {
    background: var(--color-secondary-action);
    color: var(--text);
    font-weight: 800;
}

.c-button--secondary:hover,
.c-button--secondary:focus-visible {
    background: var(--color-secondary-action-hover);
    color: var(--text);
}

/* Shared anatomy for ordinary show cards. Variant classes own spacing/details. */
.c-show-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    transition: transform var(--duration-fast) ease, border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.c-show-card:hover {
    transform: translateY(-1px);
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-card-hover);
}




.c-page-header {
    margin-bottom: 22px;
}

.c-page-header h1 {
    margin: 2px 0 var(--space-2);
    font-size: clamp(2.65rem, 4.8vw, 3.45rem);
    line-height: .98;
    letter-spacing: -.045em;
}

.c-page-header .page-intro,
.c-page-header > p:last-child {
    max-width: 680px;
    margin: 0;
    color: var(--muted);
    font-size: var(--type-size-intro);
    line-height: 1.5;
}

@media (max-width: 760px) {
    .c-page-header {
        margin-bottom: 17px;
    }

    .c-page-header h1 {
        font-size: clamp(2.15rem, 10.5vw, 2.75rem);
    }

    .c-page-header .page-intro,
    .c-page-header > p:last-child {
        font-size: var(--type-size-body-compact);
        line-height: 1.45;
    }
}


/*
Canonical namespace rule:
    c-component
    c-component__element
    c-component--variant

Do not introduce unprefixed generic component selectors into the public
stylesheet. The c- namespace exists specifically to prevent class collisions.
*/


/* Search result interpretation and artist+song pair-match treatment. */
.search-interpretation {
    margin: 5px 0 0;
    color: var(--accent);
    font-size: var(--type-size-secondary);
    font-weight: 650;
}

.pair-match-box {
    border-left-width: var(--space-1);
}

/* =========================================================
   v2.9.0 — alternative homepage show-browser experiment
   ========================================================= */

.c-hero--browser-experiment {
    padding-bottom: var(--space-8);
}

.c-hero--browser-experiment .home-hero-intro {
    margin-bottom: 0;
}

.c-home-browser-controls {
    padding: var(--space-5) 0;
    background: var(--color-dark);
    border-top: 1px solid var(--color-dark-border);
    border-bottom: 1px solid var(--color-dark-border);
}

.c-home-browser-filter {
    display: grid;
    grid-template-columns: minmax(280px, 2.4fr) repeat(4, minmax(150px, 1fr)) auto;
    gap: var(--space-3);
    align-items: center;
}

.c-home-browser-filter input,
.c-home-browser-filter select {
    width: 100%;
    min-height: 54px;
    padding: 0 var(--space-4);
    border: 1px solid var(--color-dark-border);
    border-radius: var(--radius-md);
    background: var(--color-dark-field);
    color: var(--color-text-on-dark);
    font: inherit;
    font-weight: 700;
}

.c-home-browser-filter input {
    font-weight: 500;
}

.c-home-browser-filter input::placeholder {
    color: var(--color-home-search-placeholder);
}

.c-home-browser-filter input:focus,
.c-home-browser-filter select:focus {
    outline: 3px solid var(--color-focus-brand);
    outline-offset: 1px;
    border-color: var(--color-brand);
}

.c-home-browser-filter__apply {
    min-height: 54px;
}

.js .c-home-browser-filter__apply {
    display: none;
}

.c-home-browser-results {
    padding-top: var(--space-7);
    padding-bottom: var(--space-16);
}

.c-home-browser-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.c-home-browser-summary > span {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    min-height: 42px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--panel);
    color: var(--muted);
    font-weight: 700;
}

.c-home-browser-summary > span strong {
    color: var(--text);
    font-size: var(--type-size-card-title);
}

.c-home-browser-summary__clear {
    margin-left: auto;
    color: var(--accent);
    font-weight: 750;
    text-decoration: none;
}

.c-home-browser-summary__clear:hover {
    text-decoration: underline;
}

.c-home-browser-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
}

.c-home-browser-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 280px;
    padding: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--panel);
    box-shadow: var(--shadow-panel-whisper);
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast);
}

.c-home-browser-card:hover {
    border-color: var(--color-card-hover-border);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
}

.c-home-browser-card__tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.c-home-browser-card__year {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--color-brand-tint);
    color: var(--color-brand-hover);
    font-size: var(--type-size-compact-meta);
    font-weight: 850;
}

.c-home-browser-card h2 {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.25rem, 1.4vw, 1.5rem);
    line-height: 1.35;
}

.c-home-browser-card h2 a {
    color: var(--text);
    text-decoration: none;
}

.c-home-browser-card h2 a:hover {
    color: var(--accent);
}

.c-home-browser-card__meta {
    margin: 0 0 var(--space-5);
    color: var(--muted);
    font-size: var(--type-size-secondary);
}

.c-home-browser-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: auto;
}

@media (max-width: 1180px) {
    .c-home-browser-filter {
        grid-template-columns: minmax(260px, 2fr) repeat(2, minmax(150px, 1fr));
    }

    .c-home-browser-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .c-hero--browser-experiment {
        padding-bottom: var(--space-6);
    }

    .c-home-browser-controls {
        padding: var(--space-4) 0;
    }

    .c-home-browser-filter {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
    }

    .c-home-browser-filter__search {
        grid-column: 1 / -1;
    }

    .c-home-browser-filter__apply {
        grid-column: 1 / -1;
        width: 100%;
    }

    .c-home-browser-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .c-home-browser-card {
        min-height: 0;
    }

    .c-home-browser-summary__clear {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .c-home-browser-filter {
        grid-template-columns: 1fr;
    }

    .c-home-browser-filter__search {
        grid-column: auto;
    }

    .c-home-browser-filter input,
    .c-home-browser-filter select {
        min-height: 50px;
    }

    .c-home-browser-card {
        padding: var(--space-4);
    }

    .c-home-browser-card__actions .c-button {
        flex: 1 1 120px;
    }
}

/* =========================================================
   v2.9.2 — opt-in Google Analytics consent
   ========================================================= */

.c-analytics-consent {
    position: fixed;
    right: var(--space-4);
    bottom: var(--space-4);
    left: var(--space-4);
    z-index: 1000;
    pointer-events: none;
}

.c-analytics-consent__inner {
    width: min(760px, 100%);
    margin: 0 auto;
    padding: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-5);
    border: 1px solid var(--color-dark-border);
    border-radius: var(--radius-lg);
    background: var(--color-dark);
    color: var(--color-text-on-dark);
    box-shadow: var(--shadow-feature-hover);
    pointer-events: auto;
}

.c-analytics-consent__copy {
    flex: 1;
    min-width: 0;
}

.c-analytics-consent__copy strong {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--type-size-card-title);
}

.c-analytics-consent__copy p {
    margin: 0;
    color: var(--color-muted-on-dark);
    font-size: var(--type-size-secondary);
}

.c-analytics-consent__actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: var(--space-2);
}

@media (max-width: 680px) {
    .c-analytics-consent {
        right: var(--space-2);
        bottom: var(--space-2);
        left: var(--space-2);
    }

    .c-analytics-consent__inner {
        align-items: stretch;
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-3);
    }

    .c-analytics-consent__actions {
        width: 100%;
    }

    .c-analytics-consent__actions .c-button {
        flex: 1 1 130px;
    }
}