:root {
    /* Golden Earth — DV's current active theme (globalSettings.activeTheme). Only used
       before that theme's fetch resolves, or if it's ever missing entirely —
       applyTheme()/applyDvTheme() overwrite these at runtime with whatever's actually
       configured. Update these whenever the active theme changes, so there's no flash of
       stale colors before JS loads. */
    --bg: #242331;
    --surface: rgb(62, 61, 74);
    --surface-hover: rgb(73, 72, 84);
    --border: rgb(95, 94, 105);
    --text: #ddca7d;
    --subheading: #ddca7d;
    --body-text: #b88b4a;
    --accent: #a27035;
    --accent-hover: rgb(176, 133, 83);
    --accent-active: rgb(138, 95, 45);
    --accent-text: #ddca7d;
    --danger: #c94b4b;
    /* Not theme-driven — the header bar stays black regardless of active theme, for logo
       contrast. Its own variable (not a bare hardcoded value on .site-header) so it's a
       clear, single, adjustable point of control. */
    --header-bg: #000;
    --display: Arial, -apple-system, BlinkMacSystemFont, sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text);
}

a {
    color: inherit;
    text-decoration: none;
}

/* Header/logo + nav — .site-bar wraps both in the HTML, stacked as two rows: a big centered
   logo row on top, a thin nav row underneath with an accent underline stripe. */
.site-bar {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.site-header {
    display: flex;
    justify-content: center;
    background: var(--header-bg);
    padding: 20px 0;
}

.site-logo {
    height: 250px;
    width: auto;
    display: block;
}

/* Height reserved unconditionally (not toggled via JS or :empty) so the bar never pops in
   after first paint and shifts everything below it down — confirmed as a real mis-click
   cause in testing 2026-08-23: a click aimed at the Log out button's pre-shift position
   landed on the wrong element once the bar populated a moment later. */
.site-auth-status {
    min-height: 39px;
    text-align: center;
    padding: 10px 16px;
    margin: 0 0 16px;
    font-size: 0.85rem;
    color: var(--body-text);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-sizing: border-box;
}

.site-auth-status a {
    color: var(--accent);
}

/* Nav — its own row below the big logo, centered, with an accent underline stripe. Site
   name and nav links stack (name on top, links below), not side by side. */
.site-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 64px;
    border-bottom: 3px solid var(--accent);
}

.site-nav .links {
    display: flex;
    gap: 24px;
}

.site-nav .links a {
    color: var(--subheading);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color 0.15s ease;
}

.site-nav .links a:hover,
.site-nav .links a.active {
    color: var(--text);
}

/* Layout */
main {
    max-width: var(--content-max-width, 880px);
    margin: 0 auto;
    background: var(--surface);
}

.page-content {
    padding: 30px 60px 60px;
}

.page-title {
    font-family: var(--display);
    font-size: 32px;
    text-transform: uppercase;
    margin: 0 0 30px;
    text-align: center;
}

.page-subtitle {
    color: var(--body-text);
    font-size: 15px;
    margin: 0 0 40px;
}

#about-content p {
    color: var(--body-text);
    line-height: 1.6;
}

/* Content box — optional tenant-editable text above the discography listing
   (discographyPageContent.contentBox in the Studio). Hidden entirely when unset. */
.content-box {
    background: var(--surface);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    padding: 30px;
    margin-bottom: 32px;
    color: var(--body-text);
    font-size: 15px;
    line-height: 1.65;
    white-space: pre-line;
}

/* Only the custom page's intro (right after the title) — not discography's content-box,
   which shares the .content-box class but should stay full width. Fixed at 75% always —
   content-rows' :only-child rule below matches this same width when there's a single row,
   rather than this shrinking to match a narrower row. */
#page-intro {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 60px;
    font-size: 1.25em;
    line-height: 1.75em;
    padding: 30px;
}

@media (max-width: 1100px) {
    #page-intro {
        width: 100%;
    }
}

/* Search */
.search-bar {
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    margin-bottom: 28px;
}

.search-bar:focus {
    outline: none;
    border-color: var(--accent);
}

.search-bar::placeholder {
    color: var(--subheading);
}

/* Artwork slider — a horizontal, browsable strip of release covers above the accordion.
   Hidden entirely (empty, no display) when no release has artwork. */
.artwork-slider-wrap {
    display: none;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
}

.artwork-slider {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 4px;
    flex: 1;
    scrollbar-width: none;
}

.artwork-slider::-webkit-scrollbar {
    display: none;
}

.artwork-slide {
    flex: 0 0 auto;
    width: 160px;
    scroll-snap-align: start;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    font: inherit;
    color: inherit;
}

.artwork-slide img {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border);
    display: block;
    transition: border-color 0.15s ease;
}

.artwork-slide:hover img {
    border-color: var(--accent);
}

.artwork-slide .slide-title {
    font-size: 13px;
    color: var(--subheading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Gallery (custom pages) — fully independent from .artwork-slide/.artwork-slider above
   (Discography's cover strip), even though it started as a copy. Never share sizing between
   the two — a Gallery-only change leaking into Discography would be exactly the bug this
   split avoids. */
.gallery-slider {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 4px;
    flex: 1;
    scrollbar-width: none;
}

.gallery-slider::-webkit-scrollbar {
    display: none;
}

.gallery-slide {
    flex: 0 0 auto;
    width: 450px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gallery-slide img {
    width: 450px;
    height: 450px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    transition: border-color 0.15s ease;
}

.gallery-slide:hover img {
    border-color: var(--accent);
}

.gallery-slide .slide-title {
    font-size: 13px;
    color: var(--subheading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slider-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-btn:hover {
    background: var(--surface-hover);
    border-color: var(--accent);
}

@media (max-width: 640px) {
    .artwork-slide, .artwork-slide img {
        width: 120px;
        height: 120px;
    }
}

/* Accordion */
.accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.accordion-item {
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--text);
    font-size: 16px;
}

.accordion-header:hover {
    background: var(--surface-hover);
}

.accordion-header .artwork-thumb {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    background: var(--border);
    flex-shrink: 0;
}

.accordion-header .header-text {
    flex: 1;
    min-width: 0;
}

.accordion-header .release-title {
    font-family: var(--display);
    font-size: 17px;
    letter-spacing: 0.01em;
}

.accordion-header .release-meta {
    color: var(--subheading);
    font-size: 13px;
    margin-top: 2px;
}

.accordion-header .chevron {
    color: var(--subheading);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.accordion-item.open .chevron {
    transform: rotate(180deg);
}

.accordion-body {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 18px 18px;
    color: var(--body-text);
    font-size: 14px;
    line-height: 1.6;
    transition: max-height 0.3s ease, opacity 0.25s ease;
}

.accordion-item.open .accordion-body {
    max-height: 2000px;
    opacity: 1;
}

.accordion-body dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    margin: 0 0 12px;
}

.accordion-body dt {
    color: var(--subheading);
}

.accordion-body dd {
    margin: 0;
    color: var(--text);
}

.empty-state {
    color: var(--body-text);
    text-align: center;
    padding: 48px 0;
}

/* Player section (local audio and/or streaming platforms) */
.player-section {
    margin-top: 8px;
}

.player-select-label {
    display: block;
    font-size: 12px;
    color: var(--subheading);
    margin-bottom: 8px;
}

.player-select {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--text);
    background: var(--background);
    border: 1px solid var(--subheading);
    border-radius: 6px;
    padding: 4px 8px;
}

.stream-embed {
    display: block;
    border-radius: 6px;
}

.streaming-link {
    display: inline-block;
    font-size: 12px;
    color: var(--accent-text);
    background: var(--accent);
    padding: 4px 10px;
    border-radius: 999px;
    text-decoration: none;
}

/* Audio files */
.audio-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.audio-item audio {
    width: 100%;
    height: 32px;
}

.audio-item .audio-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--subheading);
    margin-top: 4px;
}

.audio-item .audio-meta a {
    color: var(--accent);
}

.audio-item .audio-meta .not-downloadable {
    color: var(--subheading);
    font-style: italic;
}

/* Home */
.hero {
    padding: 64px 0;
    text-align: center;
}

.hero h1 {
    font-family: var(--display);
    font-size: 40px;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin: 0 0 12px;
}

.hero p {
    color: var(--body-text);
    font-size: 17px;
    max-width: 520px;
    margin: 0 auto 28px;
}

.button {
    display: inline-block;
    padding: 12px 24px;
    background: var(--accent);
    color: var(--accent-text);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    font-weight: 600;
    font-size: 14px;
}

/* Footer — site-wide (globalSettings.socialLinks), rendered by app.js's renderFooter() into
   every page's #site-footer element. */
.site-footer {
    margin-top: 24px;
    padding: 32px 24px 40px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.site-footer .footer-group {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.site-footer a {
    color: var(--subheading);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
}

.site-footer a.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Placeholder only — no mailing-list provider wired up yet (Mailchimp, decided 2026-08-30). */
.footer-newsletter {
    display: flex;
    gap: 8px;
}

.footer-newsletter input {
    padding: 8px 12px;
    font-size: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
}

.footer-newsletter button {
    padding: 8px 16px;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--accent);
    color: var(--accent-text);
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.footer-newsletter-status {
    color: var(--subheading);
    font-size: 12px;
}

.site-footer a:hover {
    color: var(--text);
}

.site-footer .footer-label {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--border);
}

/* Custom pages (frontend/page.html + custom-page.js) — hero slider, content rows.
   Gallery-placement media reuses .artwork-slider/.artwork-slide above as-is, no new CSS. */

/* Breaks the hero out of main's content column to span the full viewport width, capped
   at 2000px — text/content rows below stay narrow and readable, only the hero goes wide. The
   outer wrapper does the breakout (must not carry its own max-width, or the vw-based margins
   and the cap fight each other and throw off centering); .hero-slider itself just centers
   within that full-bleed space up to the cap. */
.hero-slider-bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.hero-slider {
    position: relative;
    width: 100%;
    max-width: 2000px;
    margin: 0 auto 30px;
    aspect-ratio: 16/6;
    overflow: hidden;
}

.hero-slider.has-video {
    aspect-ratio: 16/9;
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.hero-slide.active {
    opacity: 1;
    pointer-events: auto;
}

.hero-slide img,
.hero-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-slide-embed-wrap {
    width: 100%;
    height: 100%;
    background: var(--bg);
}

.hero-slide-embed-wrap iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
}

.hero-slider .slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.hero-slider .slider-prev {
    left: 12px;
}

.hero-slider .slider-next {
    right: 12px;
}

.hero-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 2;
}

.hero-dots button {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: var(--border);
    cursor: pointer;
}

.hero-dots button.active {
    background: var(--accent);
}

.content-rows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 60px;
}

@media (max-width: 1100px) {
    .content-rows {
        grid-template-columns: 1fr;
    }
}

.content-row {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

/* A single content row has no second box to sit beside — span the full grid width so it can
   center itself, but cap its own size to half and center it, rather than leaving it stuck in
   the left column with empty space on the right. Container width is untouched. */
.content-row:only-child {
    grid-column: 1 / -1;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1100px) {
    .content-row:only-child {
        width: 100%;
    }
}

/* Image floats left inside the content block, text wraps around it. */
.row-image {
    float: left;
    margin: 0 30px 30px 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.row-image img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 450px;
}

.row-content {
    /* overflow:hidden clears the float so the row's height (and the audio bar's bottom
       anchor below) accounts for the image even when the text is shorter than it. position:
       relative is for the audio player's absolute bottom-pin. */
    overflow: hidden;
    position: relative;
    color: var(--body-text);
    font-size: 1.1em;
    line-height: 1.65em;
    white-space: pre-line;
}

/* Only rows that actually have an audio player reserve space for it — otherwise every
   audio-less row would carry unused blank space at the bottom. */
.row-content.has-audio {
    padding-bottom: 64px;
}

.row-audio {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: fit-content;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.row-audio .fname {
    font-size: 12px;
    color: var(--subheading);
}

.audio-buttons {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

.audio-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.audio-btn:hover {
    background: var(--surface-hover);
}

/* Contact layout form. */
.contact-field {
    display: block;
    margin-bottom: 20px;
}

.contact-field label {
    display: block;
    font-size: 13px;
    color: var(--subheading);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.contact-field input,
.contact-field textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 15px;
    font-family: inherit;
    box-sizing: border-box;
}

.contact-field textarea {
    resize: vertical;
    min-height: 100px;
}

.pcf-status {
    margin-top: 16px;
    font-size: 14px;
}

.pcf-status--success,
.pcf-status--error {
    display: inline-block;
    padding: 10px 14px;
    background: var(--surface);
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.pcf-status--success {
    color: var(--text);
}

.pcf-status--error {
    color: var(--danger);
}