/* Album + video rails. Self-contained component styles, shared by
   index.html and latest.html. Deliberately separate from home-theme.css,
   which is the homepage-only greyscale overlay and must not leak here. */
/* ── Discography carousel ─────────────────────────────────────────────────
   Replaces the tabbed widget whose panes duplicated latest.html and carried
   two dead CTAs. Scroll-snap, no JS: nothing to initialise, nothing to break,
   and it degrades to a plain scrolling row everywhere. */
.discography { background: #000 !important; }

/* width:100% is load-bearing, not cosmetic.
   These sit inside an Elementor COLUMN flex container. On the cross axis a
   flex item sizes to its own content unless told otherwise, so both blocks
   sat at their full 1180px inside a 460px parent — the page became 1200px
   wide on a 500px screen and mobile browsers zoomed the whole layout out to
   fit. min-width:0 alone did not fix it; only taking the parent's width does.
   Measured: scrollWidth 1200 -> 500. */
.disco { width: 100%; max-width: 1180px; margin-inline: auto; padding: 5rem 1.5rem;
         min-width: 0; }
.disco__head { text-align: center; margin-bottom: 3rem; }

.disco__eyebrow {
    display: block; margin-bottom: .75rem;
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: .75rem; letter-spacing: .2em; text-transform: uppercase;
    color: #6a6a72;
}
.disco__title {
    margin: 0; font-family: "Cormorant Garamond", Times, serif;
    font-weight: 400; font-size: clamp(2.25rem, 5vw, 3.5rem);
    line-height: 1.05; color: #fff;
}
.disco__lede { margin: .75rem 0 0; color: #a8a8b0; font-size: 1.05rem; }

/* The rail. Snap-stop keeps a card edge aligned instead of drifting. */
.disco__rail {
    display: flex; gap: 1.5rem;
    /* min-width:0 is what makes overflow-x actually scroll.
       A flex/grid child defaults to min-width:auto, which refuses to shrink
       below its content — so the rail grew to fit every card instead of
       scrolling, the page became wider than the screen, and mobile browsers
       zoomed the whole layout out to fit. Without this, overflow-x:auto is
       decorative. max-width:100% keeps it inside its parent on desktop too. */
    min-width: 0; max-width: 100%;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-left: 1.5rem;
    padding: .5rem .25rem 1.75rem;
    scrollbar-width: thin; scrollbar-color: #35353b transparent;
}
.disco__rail::-webkit-scrollbar { height: 4px; }
.disco__rail::-webkit-scrollbar-thumb { background: #35353b; border-radius: 2px; }

.album-card {
    flex: 0 0 clamp(11rem, 26vw, 15rem);
    scroll-snap-align: start;
    display: flex; flex-direction: column; gap: .6rem;
    color: inherit; text-decoration: none;
    /* Named properties only -- never `all`. */
    transition: transform 220ms cubic-bezier(.22,1,.36,1);
}
.album-card__art {
    position: relative; display: block; aspect-ratio: 1;
    border: 1px solid #35353b; overflow: hidden; background: #0b0b0d;
}
.album-card__art img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 400ms cubic-bezier(.22,1,.36,1),
                opacity 220ms ease-out;
}
.album-card:hover  { transform: translateY(-4px); }
.album-card:active { transform: translateY(-1px); }          /* real press feedback */
.album-card:hover .album-card__art img,
.album-card:focus-visible .album-card__art img { transform: scale(1.05); opacity: .9; }
.album-card:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.album-card__badge {
    position: absolute; top: .6rem; left: .6rem;
    padding: .2em .6em; background: #fff; color: #000;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
}
.album-card--latest .album-card__art { border-color: #fff; }
.album-card__title { font-size: 1rem; line-height: 1.3; color: #fff; }
/* Subtitle sits between the title and the meta line: quieter than the title,
   but still readable prose — the meta line below is uppercase mono, and the
   album's real name should not be mistaken for a data field. */
.album-card__sub {
    font-size: .85rem; line-height: 1.3; color: #a8a8b0;
    margin-top: -.35rem;                 /* tighten to the title it belongs to */
}
.album-card__meta {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
    color: #6a6a72;
}

.disco__cta { text-align: center; margin: 2.5rem 0 0; }
.disco__button {
    display: inline-block; padding: .9em 2.2em;
    border: 1px solid #fff; color: #fff; text-decoration: none;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: .75rem; letter-spacing: .2em; text-transform: uppercase;
    transition: background-color 220ms ease-out, color 220ms ease-out;
}
.disco__button:hover, .disco__button:focus-visible { background: #fff; color: #000; }
.disco__button:active { transform: scale(.98); }

@media (prefers-reduced-motion: reduce) {
    .album-card, .album-card__art img, .disco__button { transition: none; }
    .disco__rail { scroll-snap-type: none; }
}

/* ── Video rail (click-to-play) ───────────────────────────────────────────
   Same scroll-snap mechanic as the album rail so the page has one idiom
   rather than two. Cards are <button>s: keyboard support comes free. */
.videos { width: 100%; max-width: 1180px; margin-inline: auto; padding: 4rem 1.5rem;
          min-width: 0; }   /* same reason as .disco above */
.videos__head { text-align: center; margin-bottom: 2.5rem; }
.videos__eyebrow {
    display: block; margin-bottom: .75rem;
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: #6a6a72;
}
.videos__title {
    margin: 0; font-family: "Cormorant Garamond", Times, serif; font-weight: 400;
    font-size: clamp(1.9rem, 4vw, 2.75rem); line-height: 1.05; color: #fff;
}
.videos__lede { margin: .6rem 0 0; color: #a8a8b0; }

.videos__rail {
    display: flex; gap: 1.25rem;
    min-width: 0; max-width: 100%;          /* same reason as .disco__rail */
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-left: 1.5rem;
    padding: .5rem .25rem 1.5rem;
    scrollbar-width: thin; scrollbar-color: #35353b transparent;
}
.videos__rail::-webkit-scrollbar { height: 4px; }
.videos__rail::-webkit-scrollbar-thumb { background: #35353b; border-radius: 2px; }

.vcard {
    flex: 0 0 clamp(15rem, 34vw, 20rem);
    scroll-snap-align: start;
    display: flex; flex-direction: column; gap: .55rem;
    padding: 0; border: 0; background: none; text-align: left; cursor: pointer;
    color: inherit; font: inherit;
    transition: transform 220ms cubic-bezier(.22,1,.36,1);
}
.vcard:hover  { transform: translateY(-3px); }
.vcard:active { transform: translateY(-1px); }
.vcard:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.vcard.is-playing { cursor: default; transform: none; }

.vcard__frame {
    position: relative; aspect-ratio: 16/9; overflow: hidden;
    border: 1px solid #35353b; background: #0b0b0d;
}
.vcard__frame img, .vcard__frame iframe {
    width: 100%; height: 100%; display: block; border: 0; object-fit: cover;
    transition: opacity 220ms ease-out, transform 400ms cubic-bezier(.22,1,.36,1);
}
.vcard:hover .vcard__frame img { transform: scale(1.04); opacity: .85; }

/* Play affordance. Scales from the card, not from nothing. */
.vcard__play {
    position: absolute; inset: 0; display: grid; place-items: center;
    pointer-events: none;
}
.vcard__play::before {
    content: ""; width: 3.4rem; height: 3.4rem; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.85); background: rgba(0,0,0,.4);
    transition: transform 220ms cubic-bezier(.22,1,.36,1), background-color 220ms ease-out;
}
.vcard__play::after {
    content: ""; position: absolute; width: 0; height: 0; margin-left: 3px;
    border-left: 11px solid #fff; border-block: 7px solid transparent;
}
.vcard:hover .vcard__play::before { transform: scale(1.09); background: rgba(255,255,255,.16); }
.vcard.is-playing .vcard__play { display: none; }

.vcard__n {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: .7rem; letter-spacing: .1em; color: #6a6a72;
}
.vcard__title { font-size: .95rem; line-height: 1.35; color: #fff; }
.vcard__meta {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: #6a6a72;
}

@media (prefers-reduced-motion: reduce) {
    .vcard, .vcard__frame img, .vcard__play::before { transition: none; }
    .videos__rail { scroll-snap-type: none; }
}