:root {
    --ink: #f7f2e8;
    --muted: #b8b4aa;
    --night: #0b1118;
    --panel: #131d27;
    --panel-2: #1a2733;
    --line: #334454;
    --gold: #e0b667;
    --gold-light: #f0d49c;
    --green: #70b898;
    font-family: Inter, "Segoe UI", system-ui, sans-serif;
    color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--night); scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color: var(--ink); line-height: 1.6; }
button, audio { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--gold-light); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.hero {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    min-height: clamp(260px, 34vh, 360px);
    overflow: hidden;
    padding: clamp(1.5rem, 4vw, 3.5rem) max(1.25rem, calc((100vw - 1180px) / 2));
    position: relative;
}

.hero::after {
    background: linear-gradient(90deg, #07101912 0%, #07101928 38%, #071019d9 72%, #071019f2 100%);
    content: "";
    inset: 0;
    position: absolute;
}
.hero > img { height: 100%; inset: 0; object-fit: cover; object-position: center; position: absolute; width: 100%; }
.hero-copy { max-width: 38rem; position: relative; width: 48%; z-index: 1; }
.hero-copy h1, h2 { font-family: "Playfair Display", Georgia, serif; }
.hero-copy h1 { font-size: clamp(2.15rem, 4.2vw, 3.8rem); letter-spacing: -.045em; line-height: .96; margin: .2rem 0 .7rem; }
.hero-copy > p:last-child { color: var(--muted); font-size: 1rem; margin-bottom: 0; max-width: 34rem; }
.eyebrow { color: var(--gold); font-size: .76rem; font-weight: 700; letter-spacing: .17em; margin: 0 0 .5rem; text-transform: uppercase; }

.section-nav { background: #101c27f5; border-bottom: 2px solid #a67e38; box-shadow: 0 8px 25px #0008; position: sticky; top: 0; z-index: 40; backdrop-filter: blur(14px); }
.section-nav-inner { align-items: center; display: flex; gap: clamp(.35rem, 2vw, 1rem); margin: auto; max-width: 1180px; min-height: 4.25rem; overflow-x: auto; padding: .55rem 1.25rem; scrollbar-width: none; }
.section-nav-inner::-webkit-scrollbar { display: none; }
.section-nav a:not(.site-mark) { background: #ffffff08; border: 1px solid #ffffff14; border-radius: 99px; color: var(--ink); flex: 0 0 auto; font-size: .82rem; font-weight: 800; letter-spacing: .07em; padding: .55rem .85rem; text-decoration: none; text-transform: uppercase; }
.section-nav a:not(.site-mark):hover { background: var(--gold); border-color: var(--gold); color: #171006; }
.section-nav .site-mark { align-items: center; background: var(--gold); border-radius: 50%; color: #171006; display: inline-flex; height: 2.2rem; justify-content: center; margin-right: auto; padding: 0; width: 2.2rem; }

main { margin: auto; max-width: 1180px; padding: 0 1.25rem 5rem; }
.page-section { border-top: 1px solid var(--line); padding-top: 5rem; scroll-margin-top: 7.5rem; }
#album { border-top: 0; padding-top: 1rem; }
.audio-player {
    align-items: center;
    background: linear-gradient(120deg, var(--panel-2), #1f302f);
    border: 1px solid #47605b;
    border-radius: 1rem;
    box-shadow: 0 16px 45px #0008;
    display: grid;
    gap: 1rem 2rem;
    grid-template-columns: minmax(10rem, 1fr) minmax(16rem, 2fr);
    margin: 1.5rem auto 2.5rem;
    max-width: 860px;
    padding: 1.15rem 1.4rem;
    position: sticky;
    top: 4.6rem;
    z-index: 30;
}
.audio-player audio { width: 100%; }
.now-playing { display: flex; flex-direction: column; }
.now-playing span { color: var(--green); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.now-playing strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-message { background: #451b1b; border: 1px solid #a54a4a; border-radius: .4rem; color: #ffd7d7; font-size: .82rem; grid-column: 1 / -1; margin: -.35rem 0 0; padding: .5rem .65rem; }

.section-heading { margin: 0 0 1.5rem; }
.section-title-row h2 { margin-bottom: .8rem; }
.album-links-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .9rem; }
.album-links-row .streaming-links { gap: .6rem; }
.album-links-row .streaming-link { font-size: .76rem; padding: .45rem .7rem; }
.album-links-row .streaming-link svg { height: 1.25rem; width: 1.25rem; }
.album-link {
    align-items: center; background: #182b21; border: 1px solid #289d51; border-radius: 99px;
    color: #8ceaaa; display: inline-flex; font-size: .76rem; gap: .5rem; line-height: 1.15;
    padding: .45rem .75rem .45rem .45rem; text-decoration: none;
}
.album-link:hover { background: #203b2c; border-color: #1ed760; }
.album-link svg { height: 1.45rem; width: 1.45rem; }
.album-link svg circle { fill: #1ed760; }
.album-link svg path { fill: none; stroke: #07150c; stroke-linecap: round; stroke-width: 1.7; }
.album-link span { display: flex; flex-direction: column; }
.album-link strong { color: white; }
.album-link.amazon { background: #142738; border-color: #2874a6; color: #62c5ff; }
.album-link.amazon:hover { background: #19354c; border-color: #55b9ff; }
.album-link.amazon svg .amazon-a { fill: currentColor; stroke: none; }
.album-link.amazon svg .amazon-smile { fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.5; }
.section-heading h2, .equipment h2, .jamulus-section h2 { font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.1; margin: .15rem 0 .7rem; }
.section-heading > p:last-child { color: var(--muted); margin: 0; }
.song-list { border-top: 1px solid var(--line); }
.song-panel { border-bottom: 1px solid var(--line); }
.song-panel.selected { border-left: 3px solid var(--green); }
.song-heading { padding: .9rem .7rem 1rem; }
.song-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding: .3rem 0 .7rem;
    text-align: left;
    width: 100%;
}
.song-heading:hover { background: #ffffff09; }
.song-toggle > span:first-child { display: flex; flex-direction: column; }
.song-toggle strong { font-size: 1.12rem; }
.song-toggle small { color: var(--muted); }
.expand-icon { color: var(--gold); font-size: 1.7rem; font-weight: 300; }
.streaming-links { display: flex; flex-wrap: wrap; gap: .45rem; }
.streaming-link {
    align-items: center; border: 1px solid var(--line); border-radius: 99px; color: var(--ink);
    display: inline-flex; font-size: .7rem; font-weight: 600; gap: .35rem; line-height: 1;
    padding: .35rem .55rem; text-decoration: none;
}
.streaming-link:hover { border-color: currentColor; transform: translateY(-1px); }
.streaming-link svg { fill: none; height: 1rem; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 1rem; }
.streaming-link.spotify { color: #55d987; }
.streaming-link.spotify svg circle { fill: #1ed760; stroke: #1ed760; }
.streaming-link.spotify svg path { stroke: #07150c; }
.streaming-link.apple-music { color: #fb5b74; }
.streaming-link.apple-music svg rect { fill: #fa4868; stroke: #fa4868; }
.streaming-link.apple-music svg path { fill: white; stroke: white; }
.streaming-link.youtube-music { color: #ff5252; }
.streaming-link.youtube-music svg circle:first-child { fill: #ff0033; stroke: #ff0033; }
.streaming-link.youtube-music svg path { fill: white; stroke: white; }
.streaming-link.amazon-music { color: #55b9ff; }
.streaming-link.amazon-music svg path:first-child { fill: currentColor; stroke: none; }
.song-content { background: var(--panel); padding: 1rem 1.25rem 1.5rem; }
.lyrics { color: #dbd8d0; margin: 1.25rem 0 0; white-space: pre-line; }
.play-button {
    background: var(--gold); border: 0; border-radius: 99px; color: #20180a; cursor: pointer;
    font-weight: 700; padding: .6rem 1rem;
}
.play-button:hover { background: var(--gold-light); }
.play-button:disabled { cursor: not-allowed; opacity: .45; }

.live-section { margin-top: 6rem; }
.live-grid { display: grid; gap: 2rem; grid-template-columns: 1fr 1.2fr; }
.live-tracks { display: flex; flex-direction: column; }
.live-track {
    align-items: center; background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--ink);
    cursor: pointer; display: grid; gap: .75rem; grid-template-columns: 2.2rem 1fr auto; padding: .9rem .4rem; text-align: left;
}
.live-track:not(:disabled):hover, .live-track.selected { background: var(--panel-2); }
.live-track:disabled { color: #747b80; cursor: not-allowed; }
.track-number { color: var(--gold); font-weight: 700; }
.track-action { font-size: .78rem; text-transform: uppercase; }
.photo-carousel { align-self: start; }
.photo-frame {
    align-items: center; aspect-ratio: 4 / 3; background: #06090c; border: 1px solid var(--line); border-radius: .75rem;
    box-shadow: inset 0 0 40px #000, 0 18px 45px #0006; display: flex; justify-content: center; overflow: hidden;
    padding: 1rem 3.5rem; position: relative;
}
.photo-frame img { height: 100%; object-fit: contain; width: 100%; }
.carousel-arrow {
    align-items: center; background: #101c27db; border: 1px solid #ffffff35; border-radius: 50%; color: white;
    cursor: pointer; display: flex; font-family: Georgia, serif; font-size: 2.2rem; height: 2.8rem; justify-content: center;
    line-height: 1; padding: 0 0 .2rem; position: absolute; top: 50%; transform: translateY(-50%); width: 2.8rem;
}
.carousel-arrow:hover { background: var(--gold); border-color: var(--gold); color: #171006; }
.carousel-arrow.previous { left: .65rem; }
.carousel-arrow.next { right: .65rem; }
.photo-count { background: #071019d9; border-radius: 99px; bottom: .65rem; color: var(--muted); font-size: .72rem; padding: .2rem .55rem; position: absolute; right: .65rem; }

.reverb-section { margin-top: 6rem; }
.reverb-frame { background: #080a0c; border: 1px solid var(--line); border-radius: .8rem; max-width: 760px; overflow: hidden; padding: .75rem; }
.reverb-frame iframe { background: #090909; border: 0; display: block; width: 100%; }

.jamulus-section { margin-top: 6rem; }
.jamulus-intro { align-items: start; display: grid; gap: 2rem 5rem; grid-template-columns: minmax(15rem, .8fr) minmax(20rem, 1.2fr); }
.jamulus-intro p { color: #d4d0c8; font-size: 1.05rem; margin-top: 0; }
.text-link { font-weight: 700; text-underline-offset: .25rem; }
.session-note { border-left: 3px solid #3e999e; color: var(--muted); margin: 2.5rem 0 1.25rem; max-width: 52rem; padding: .55rem 0 .55rem 1rem; }
.jamulus-recordings { border-top: 1px solid var(--line); }
.jamulus-track {
    align-items: center; background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--ink);
    cursor: pointer; display: grid; gap: 1rem; grid-template-columns: 3rem 1fr auto; padding: 1rem .5rem; text-align: left; width: 100%;
}
.jamulus-track:hover, .jamulus-track.selected { background: var(--panel-2); }
.jamulus-track > span:nth-child(2) { display: flex; flex-direction: column; }
.jamulus-track small { color: var(--muted); }
.jamulus-play { align-items: center; background: #246c70; border-radius: 50%; display: inline-flex; height: 2.5rem; justify-content: center; padding-left: .15rem; width: 2.5rem; }
.jamulus-expand {
    background: transparent; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); cursor: pointer;
    display: flex; font: inherit; font-size: .85rem; font-weight: 700; gap: .65rem; margin: 1.5rem auto 0; padding: .65rem 1.15rem;
}
.jamulus-expand:hover { background: var(--panel-2); border-color: #3e999e; }

.equipment { background: var(--panel); border-left: 3px solid var(--gold); margin: 6rem 0 1rem; padding: clamp(1.5rem, 5vw, 3.5rem); }
.equipment ul { columns: 2; gap: 3rem; padding-left: 1.2rem; }
.equipment li { break-inside: avoid; color: #d4d0c8; margin-bottom: .65rem; }
.site-footer { align-items: center; border-top: 1px solid var(--line); color: var(--muted); display: flex; justify-content: space-between; margin: auto; max-width: 1180px; padding: 2rem 1.25rem; }
.powered-by { color: var(--muted); font-size: .72rem; letter-spacing: .14em; text-decoration: none; text-transform: uppercase; }
.powered-by strong { color: var(--gold); font-size: .9rem; }
.powered-by:hover strong { color: var(--gold-light); text-decoration: underline; text-underline-offset: .25rem; }
.back-to-top {
    align-items: center; background: var(--gold); border: 2px solid #f4d99f; border-radius: 50%; bottom: 1.4rem;
    box-shadow: 0 8px 25px #000a; color: #181107; display: flex; font-size: 1.65rem; font-weight: 800;
    height: 3.25rem; justify-content: center; line-height: 1; position: fixed; right: 1.4rem; text-decoration: none;
    transition: transform .18s ease, background-color .18s ease; width: 3.25rem; z-index: 60;
}
.back-to-top:hover { background: var(--gold-light); transform: translateY(-3px); }

.blazor-error-boundary { background: #8f2525; color: white; padding: 1rem; }

.manage-shell {
    background: #f5f7fa; color: #212529; color-scheme: light; font-family: "Segoe UI", Arial, sans-serif;
    margin: 0; max-width: none; min-height: 100vh; padding: .75rem clamp(.75rem, 3vw, 2.5rem) 3rem;
}
.manage-shell a { color: #0d6efd; }
.manage-auth { align-items: center; display: flex; justify-content: center; }
.manage-card { background: #fff; border: 1px solid #dee2e6; border-radius: .55rem; box-shadow: 0 .15rem .6rem #00000012; padding: 1.5rem; width: min(100%, 560px); }
.manage-brand { color: #6c757d; display: block; font-size: .8rem; font-weight: 600; margin-bottom: .2rem; }
.manage-card h1, .manage-header h1 { color: #212529; font-family: inherit; font-size: 1.35rem; line-height: 1.2; margin: 0; }
.manage-card h2 { font-family: inherit; font-size: 1.15rem; margin: 0 0 .5rem; }
.manage-form, .manage-editor { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
.manage-form label, .manage-editor label, .manage-toolbar label { color: #495057; display: grid; font-size: .82rem; font-weight: 600; gap: .3rem; }
.manage-form input, .manage-editor input, .manage-editor textarea, .manage-toolbar input { background: #fff; border: 1px solid #ced4da; border-radius: .35rem; color: #212529; font: inherit; padding: .55rem .7rem; width: 100%; }
.manage-form input:focus, .manage-editor input:focus, .manage-editor textarea:focus, .manage-toolbar input:focus { border-color: #86b7fe; box-shadow: 0 0 0 .2rem #0d6efd25; outline: 0; }
.manage-form .manage-check { align-items: center; display: flex; flex-direction: row; }
.manage-form .manage-check input { width: auto; }
.manage-shell button { background: #0d6efd; border: 1px solid #0d6efd; border-radius: .35rem; color: #fff; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 600; padding: .45rem .75rem; }
.manage-shell button:hover { background: #0b5ed7; }
.manage-shell button.secondary { background: #fff; border-color: #6c757d; color: #495057; }
.manage-shell button.secondary:hover { background: #f1f3f5; }
.manage-shell button.danger { background: #fff; border-color: #dc3545; color: #dc3545; }
.manage-shell button.danger:hover { background: #dc3545; color: #fff; }
.manage-error, .manage-success { border: 1px solid; border-radius: .35rem; padding: .65rem .85rem; }
.manage-error { background: #f8d7da; border-color: #f1aeb5; color: #842029; }
.manage-success { background: #d1e7dd; border-color: #a3cfbb; color: #0a3622; }
.manage-header, .manage-toolbar, .manage-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; }
.manage-header { background: #fff; border-radius: .5rem; box-shadow: 0 .1rem .35rem #0000000f; margin-bottom: .75rem; min-height: 3.25rem; padding: .55rem .8rem; }
.manage-nav { background: #fff; border: 1px solid #dee2e6; border-radius: .5rem; display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .75rem; padding: .5rem; position: sticky; top: 0; z-index: 10; }
.manage-nav a { border-radius: .35rem; color: #334155; font-size: .8rem; font-weight: 650; padding: .45rem .65rem; text-decoration: none; }
.manage-nav a:hover { background: #e9f2ff; color: #0d6efd; }
.manage-anchor { scroll-margin-top: 4.5rem; }
.manage-toolbar { background: #fff; border: 1px solid #dee2e6; border-radius: .5rem; margin: .75rem 0; padding: .7rem; }
.manage-toolbar label { flex: 1 1 300px; }
.manage-editor { margin: .75rem 0; width: 100%; }
.manage-table-wrap { background: #fff; border: 1px solid #dee2e6; border-radius: .5rem; overflow-x: auto; }
.manage-table { border-collapse: collapse; font-size: .82rem; width: 100%; }
.manage-table th { background: #f1f3f5; border-bottom: 2px solid #dee2e6; color: #495057; font-weight: 700; padding: .65rem; text-align: left; white-space: nowrap; }
.manage-table td { border-bottom: 1px solid #e9ecef; padding: .65rem; vertical-align: top; }
.manage-table tbody tr:nth-child(even) { background: #f8f9fa; }
.manage-table tbody tr:hover { background: #eef5ff; }
.manage-table code { color: #7a3e00; font-size: .74rem; white-space: nowrap; }
.manage-preview { max-width: 34rem; white-space: pre-line; }
.manage-music { background: #fff; border: 1px solid #dee2e6; border-radius: .5rem; margin: .75rem 0 1.5rem; padding: .85rem; }
.manage-panel { background: #fff; border: 1px solid #dee2e6; border-radius: .5rem; margin: .75rem 0 1.5rem; padding: .85rem; }
.manage-notice { background: #fff8db; border: 1px solid #ead58b; border-radius: .4rem; color: #594900; font-size: .82rem; margin-bottom: .75rem; padding: .7rem; }
.manage-notice p { margin: .2rem 0 0; }
.manage-inline-form { align-items: end; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: .4rem; display: flex; flex-wrap: wrap; gap: .65rem; margin: .7rem 0; padding: .7rem; }
.manage-inline-form label { color: #495057; display: grid; flex: 1 1 15rem; font-size: .78rem; font-weight: 600; gap: .25rem; }
.manage-inline-form input, .manage-inline-form select, .manage-table input { background: #fff; border: 1px solid #ced4da; border-radius: .35rem; color: #212529; font: inherit; padding: .48rem .6rem; width: 100%; }
.manage-inline-form small { color: #6c757d; flex-basis: 100%; }
.manage-inline-form .token-saved-state { color: #146c43; font-weight: 650; }
.manage-inline-form .manage-check { align-items: center; display: flex; flex: 0 1 auto; flex-direction: row; padding-bottom: .5rem; }
.manage-inline-form .manage-check input { width: auto; }
.manage-subtle { color: #6c757d; display: block; font-size: .72rem; }
.manage-subheading { color: #343a40; font-family: inherit; font-size: .88rem; margin: 1rem 0 .25rem; }
.manage-collection-editor-row > td { background: #eef4fa; padding: .7rem !important; }
.manage-collection-editor { align-items: end; display: grid; gap: .5rem; grid-template-columns: minmax(10rem, 1fr) minmax(15rem, 2fr) 9rem 5rem 7rem auto auto auto; }
.manage-collection-editor label { color: #495057; display: grid; font-size: .72rem; font-weight: 600; gap: .2rem; }
.manage-collection-editor label small { color: #6c757d; font-size: .64rem; font-weight: 400; }
.manage-collection-editor input, .manage-collection-editor select { background: white; border: 1px solid #ced4da; border-radius: .3rem; color: #212529; font: inherit; padding: .4rem .5rem; width: 100%; }
.manage-collection-editor .manage-check { align-items: center; display: flex; flex-direction: row; padding-bottom: .45rem; white-space: nowrap; }
.manage-collection-editor .manage-check input { width: auto; }
.manage-track-editor-row > td { background: #f8fafc; padding: .7rem !important; }
.manage-track-editors { display: grid; gap: .45rem; }
.manage-track-editor { align-items: end; background: white; border: 1px solid #dee2e6; border-radius: .4rem; display: grid; gap: .5rem; grid-template-columns: minmax(11rem, 1fr) minmax(15rem, 2fr) 5rem auto auto; padding: .55rem; }
.manage-track-editor label { color: #495057; display: grid; font-size: .72rem; font-weight: 600; gap: .2rem; }
.manage-track-editor input { background: white; border: 1px solid #ced4da; border-radius: .3rem; color: #212529; font: inherit; padding: .4rem .5rem; width: 100%; }
.manage-track-editor .manage-check { align-items: center; display: flex; flex-direction: row; padding-bottom: .45rem; white-space: nowrap; }
.manage-track-editor .manage-check input { width: auto; }
.manage-track-editor > small { color: #6c757d; font-size: .68rem; grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropbox-collection { margin-top: 2.25rem; }
.separate-collection-heading + .dropbox-collection { margin-top: 0; }
.dropbox-collection-heading { border-left: 3px solid var(--gold); margin-bottom: .75rem; padding-left: 1rem; }
.dropbox-collection-heading h3 { font-family: "Playfair Display", Georgia, serif; font-size: 1.5rem; margin: 0; }
.dropbox-collection-heading p { color: var(--muted); margin: .15rem 0 0; }
.manage-analytics { background: #fff; border: 1px solid #dee2e6; border-radius: .5rem; margin: .75rem 0; padding: .85rem; }
.manage-analytics-log { max-height: 18rem; overflow: auto; }
.manage-analytics-log .manage-table { font-family: Consolas, "Courier New", monospace; font-size: .72rem; }
.manage-analytics-log .manage-table th, .manage-analytics-log .manage-table td { padding: .4rem .5rem; }
.manage-count { background: #e9ecef; border-radius: 99px; color: #495057; font-size: .72rem; padding: .3rem .6rem; white-space: nowrap; }
.manage-empty { color: #6c757d; font-size: .8rem; margin: .5rem 0; }
.play-percent { color: #9a6700; font-weight: 700; }
.play-percent.complete { color: #198754; }
.manage-section-heading { align-items: center; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: .75rem; }
.manage-section-heading h2 { color: #212529; font-family: inherit; font-size: 1.05rem; margin: 0; }
.manage-section-heading p { color: #6c757d; font-size: .82rem; margin: .15rem 0 0; }
.manage-section-heading > span { background: #e9ecef; border-radius: 99px; color: #495057; font-size: .75rem; padding: .3rem .6rem; white-space: nowrap; }
.content-heading { margin: 1.5rem 0 .5rem; }
.manage-upload-form { align-items: end; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: .4rem; display: grid; gap: .65rem; grid-template-columns: minmax(12rem, 1fr) minmax(15rem, 2fr) auto; margin-bottom: .85rem; padding: .7rem; }
.manage-upload-form label { color: #495057; display: grid; font-size: .78rem; font-weight: 600; gap: .25rem; }
.manage-upload-form input { background: #fff; border: 1px solid #ced4da; border-radius: .35rem; color: #212529; font: inherit; padding: .48rem .6rem; width: 100%; }
.manage-music-table { max-height: 19rem; overflow: auto; }

@media (max-width: 700px) {
    .manage-shell { padding: .35rem; }
    .manage-table thead { display: none; }
    .manage-table, .manage-table tbody, .manage-table tr, .manage-table td { display: block; width: 100%; }
    .manage-table tr { border-bottom: 2px solid #ced4da; padding: .4rem 0; }
    .manage-table td { border: 0; display: grid; gap: .5rem; grid-template-columns: 5rem 1fr; padding: .35rem .65rem; }
    .manage-table td::before { color: #6c757d; content: attr(data-label); font-weight: 700; }
    .manage-upload-form { grid-template-columns: 1fr; }
    .manage-track-editor { grid-template-columns: 1fr; }
    .manage-collection-editor { grid-template-columns: 1fr; }
    .manage-track-editor > small { grid-column: auto; }
}

@media (max-width: 800px) {
    .hero { align-items: flex-end; justify-content: flex-start; min-height: clamp(300px, 40vh, 380px); padding-bottom: 2rem; }
    .hero::after { background: linear-gradient(0deg, #071019f5 5%, #071019a8 52%, #07101918 100%); }
    .hero > img { object-position: 38% center; }
    .hero-copy { max-width: 34rem; width: 100%; }
    .audio-player { grid-template-columns: 1fr; margin-bottom: 3.5rem; position: relative; top: 0; }
    .live-grid, .jamulus-intro { grid-template-columns: 1fr; }
    .equipment ul { columns: 1; }
}

@media (max-width: 520px) {
    .section-nav .site-mark { margin-right: .2rem; }
    .section-nav a:not(.site-mark) { font-size: .74rem; padding: .48rem .7rem; }
    .photo-frame { padding: .6rem 2.8rem; }
    .carousel-arrow { height: 2.35rem; width: 2.35rem; }
    .site-footer { align-items: flex-start; flex-direction: column; gap: 1rem; }
    .back-to-top { bottom: 1rem; height: 2.9rem; right: 1rem; width: 2.9rem; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }