* {
    letter-spacing: 0;
}

body {
    background: #07090f;
    color: #eef4f8;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow-x: hidden;
}

a {
    color: inherit;
}

.site-shell {
    min-height: 100svh;
    background:
        linear-gradient(180deg, rgba(8, 10, 16, .36), #07090f 72%),
        radial-gradient(circle at 68% 12%, rgba(127, 183, 216, .18), transparent 34%);
}

:root {
    --nav-height: 74px;
}

.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: var(--nav-height);
    display: flex;
    align-items: center;
    background: rgba(4, 5, 10, .2);
    border-bottom: 1px solid transparent;
    transition: background .4s ease, backdrop-filter .4s ease, border-color .4s ease;
}

.site-nav:hover,
.site-nav:focus-within,
.site-nav.nav-open {
    background: rgba(5, 7, 13, .7);
    backdrop-filter: blur(18px) saturate(1.15);
    border-color: rgba(255, 255, 255, .08);
}

.nav-inner {
    width: min(1440px, calc(100% - 48px));
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: max-content;
    text-decoration: none;
}

.brand img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 22px rgba(167, 123, 255, .28);
    transition: transform .3s ease;
}

.site-nav:hover .brand img,
.site-nav:focus-within .brand img {
    transform: scale(1.05);
}

.brand-short {
    display: none;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.38rem;
    font-weight: 700;
    letter-spacing: .22em;
}

.brand-full {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.3rem;
    font-weight: 700;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: clamp(17px, 2vw, 31px);
}

.nav-links a {
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    font-size: .85rem;
    transition: color .2s ease;
}

.nav-links a:hover,
.nav-links a:focus-visible {
    color: #fff;
}

.nav-links .about {
    padding: 8px 13px;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 999px;
}

.menu-toggle {
    display: none;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.5rem;
}

@media (max-width: 767.98px) {
    .brand-full {
        display: none;
    }

    .brand-short {
        display: inline;
    }

    .menu-toggle {
        display: block;
    }

    .nav-links {
        position: absolute;
        inset: var(--nav-height) 12px auto;
        display: none;
        padding: 18px;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        border-radius: 16px;
        background: rgba(5, 7, 13, .96);
        backdrop-filter: blur(18px);
    }

    .nav-links.open {
        display: flex;
    }
}

.hero {
    min-height: 100svh;
    display: grid;
    align-items: end;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--hero-image, url("/images/placeholders/cover.svg")) top/cover;
    z-index: -2;
    transform: scale(1.04);
    animation: slowDrift 18s ease-in-out infinite alternate;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(3, 5, 10, .4), rgba(3, 5, 10, .2) 48%, rgba(3, 5, 10, .08)),
        linear-gradient(180deg, rgba(3, 5, 10, 0) 55%, rgba(3, 5, 10, .3) 100%);
    z-index: -1;
}

.hero-content {
    max-width: 760px;
    padding-top: 8rem;
    padding-bottom: 5rem;
}

/* Soft frosted-glass panel behind the hero title/excerpt/tags so the text stays legible
   over busy photos without darkening the whole backdrop image.
   The rise-in animation lives here (not on .hero-content) because an ancestor mid-animating
   `opacity` forces the browser to flatten this element into an offscreen buffer, which breaks
   backdrop-filter's live sampling of the image behind it. */
.hero-text-panel {
    display: inline-block;
    max-width: 100%;
    padding: 1.6rem 2rem;
    border-radius: 18px;
    background: rgba(7, 9, 15, .24);
    backdrop-filter: blur(5px) saturate(1.1);
    -webkit-backdrop-filter: blur(5px) saturate(1.1);
    box-shadow: 0 8px 40px rgba(0, 0, 0, .12);
    animation: riseIn .8s ease-out both;
}

/* Song hero only (.hero-reveal-on-hover, opted in via <x-hero :reveal-on-hover="true">):
   moving the pointer over the photo (outside the panel) fades the title panel to half
   strength, and pausing there fades it almost all the way out so the covered art shows
   through; moving onto the panel itself, or off the hero entirely, restores it instantly. */
.hero-reveal-on-hover .hero-text-panel {
    transition: opacity .35s ease;
}

.hero-reveal-on-hover .hero-text-panel.is-dim {
    opacity: .5;
}

.hero-reveal-on-hover .hero-text-panel.is-hidden {
    opacity: .1;
}

/* --- Homepage banner: a wide masthead strip, not a full-viewport crop --- */

.site-banner-hero {
    min-height: auto;
    height: clamp(260px, 32vw, 533px);
}

.site-banner-hero::after {
    background: linear-gradient(180deg, rgba(3, 5, 10, 0) 35%, rgba(3, 5, 10, .82) 100%);
}

.site-banner-hero .hero-content {
    max-width: 900px;
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}

.display-title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 4.5rem;
    line-height: .9;
}

.section-title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 3.6rem;
}

.muted-copy {
    color: #b9c5cf;
}

.soft-divider {
    border-color: rgba(255, 255, 255, .11);
}

.page-card {
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    overflow: hidden;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
    height: 100%;
}

.page-card:hover {
    transform: translateY(-4px);
    border-color: rgba(145, 198, 226, .46);
    background: rgba(255, 255, 255, .07);
}

/* On the /songs archive, let the photo backdrop show through the card's translucent
   background, softened with a blur so it reads as atmosphere behind the card, not a sharp
   second image competing with the cover art. */
.ahd-backdrop-page .page-card {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.page-card img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top;
    width: 100%;
}

/* Song-cover backdrop for the /songs archive: a pure decorative background layer sitting
   behind the card grid (position:absolute, never part of the grid flow, so it can't disturb
   the Bootstrap row/columns). A new panel is added roughly every 12 cards as the archive grows
   — a random cover, shifted sideways by a random background-position-x, then shaded so only a
   random side of it glows through the darkness while the rest fades to black. */
.ahd-backdrop-page {
    position: relative;
    overflow: hidden;
}

.ahd-photo-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.ahd-backdrop-page > .container {
    position: relative;
    z-index: 1;
}

.ahd-photo-panel {
    position: absolute;
    left: 0;
    width: 100%;
    background-size: cover;
    background-position-y: center;
    opacity: 0;
    transition: opacity 1.3s ease;
}

.ahd-photo-panel.is-visible {
    opacity: 1;
}

.ahd-photo-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        var(--ahd-side-shade),
        linear-gradient(#07090f, transparent 18%, transparent 82%, #07090f);
}

@media (max-width: 900px) {
    .ahd-photo-backdrop {
        display: none;
    }
}

.persona-strip {
    color: #8fbfe8;
    text-transform: uppercase;
    font-size: .72rem;
    font-weight: 700;
}

.platform-link {
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .07);
    border-radius: 999px;
    color: #eef4f8;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .85rem;
    text-decoration: none;
}

.platform-link-icon {
    width: 1.2rem;
    height: 1.2rem;
    object-fit: contain;
}

.platform-admin-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 6px;
    background: #f4f6f8;
    border: 1px solid #dfe5ec;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
}

.platform-admin-icon-empty {
    color: #516070;
}

.platform-admin-preview {
    max-width: 56px;
    max-height: 56px;
    object-fit: contain;
}

.platform-picker {
    border: 1px solid #dfe5ec;
    border-radius: 8px;
    padding: .75rem;
    height: 100%;
    background: #fff;
}

.platform-base-prefix {
    max-width: 45%;
}

.platform-link:hover {
    background: #8fbfe8;
    color: #061019;
}

.platform-icon-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(.5rem, 2vw, .85rem);
}

.platform-icon-link {
    --icon-size: clamp(38px, 8vw, 50px);
    width: var(--icon-size);
    height: var(--icon-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .14);
    padding: calc(var(--icon-size) * .22);
    transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}

.platform-icon-link-mask {
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: .78;
    -webkit-mask-image: var(--icon-mask);
    mask-image: var(--icon-mask);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: background-color .2s ease, opacity .2s ease;
}

.platform-icon-link:hover,
.platform-icon-link:focus-visible {
    transform: translateY(-3px);
    border-color: var(--brand, #8fbfe8);
    background: rgba(143, 191, 232, .1);
}

.platform-icon-link:hover .platform-icon-link-mask,
.platform-icon-link:focus-visible .platform-icon-link-mask {
    background-color: var(--brand, #8fbfe8);
    opacity: 1;
}

@media (orientation: portrait) {
    .platform-icon-link {
        --icon-size: clamp(34px, 11vw, 44px);
    }
}

.content-body {
    color: #dce6ec;
    font-size: 1.08rem;
    line-height: 1.85;
}

.white-space-pre-wrap {
    white-space: pre-wrap;
}

.content-body h2,
.content-body h3 {
    color: #fff;
    font-family: "Cormorant Garamond", Georgia, serif;
    margin-top: 2rem;
}

/* Lore: narrative, storytelling voice - serif, generous leading, a dropped first letter. */
.lore-body {
    color: #e7ecef;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.28rem;
    font-style: italic;
    line-height: 1.85;
}

.lore-body p:first-of-type::first-letter {
    float: left;
    font-style: normal;
    font-size: 3.4em;
    line-height: .82;
    padding: .05em .12em 0 0;
    color: #8fbfe8;
}

.lore-body h2,
.lore-body h3 {
    color: #fff;
    font-style: normal;
    margin-top: 2rem;
}

/* Lore quote: compact companion card for short lore beside About This Song - same storytelling voice, no title. */
.lore-quote {
    color: #e7ecef;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.15rem;
    font-style: italic;
    line-height: 1.75;
    border-left: 2px solid #8fbfe8;
    padding: .25rem 0 .25rem 1.1rem;
}

.story-collapse {
    max-height: 300px;
    overflow: hidden;
    position: relative;
    transition: max-height .5s ease;
}

.youtube-embed-wrap {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}

.story-collapse.is-expanded {
    max-height: 6000px;
}

.story-collapse-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100px;
    background: linear-gradient(transparent, #07090f);
    pointer-events: none;
    transition: opacity .3s ease;
}

.story-collapse.is-expanded .story-collapse-fade {
    opacity: 0;
}

.story-collapse-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    margin-top: 1rem;
    padding-top: 1rem;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .16);
    background: none;
    color: #8fbfe8;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
}

.story-collapse-arrows {
    font-size: .9rem;
    line-height: 1;
    transition: transform .3s ease;
}

.story-collapse-toggle.is-expanded .story-collapse-arrows {
    transform: rotate(180deg);
}

/* Details: plain, structured record - distinct from the lore's storytelling voice. */
.details-body {
    color: #b7c3cb;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: .98rem;
    line-height: 1.7;
    padding-top: .25rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.details-body h2,
.details-body h3 {
    color: #dce6ec;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-top: 1.6rem;
}

.world-side-block {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    overflow: hidden;
}

.world-side-block-cover img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
}

.admin-body {
    background: #f4f6f8;
    color: #17202a;
}

.admin-sidebar {
    min-height: 100svh;
    background: #101722;
}

.admin-sidebar a {
    color: #dbe4ec;
    text-decoration: none;
    display: block;
    padding: .65rem .85rem;
    border-radius: 8px;
}

.admin-sidebar a:hover,
.admin-sidebar a.active {
    background: rgba(255, 255, 255, .1);
}

.admin-card {
    background: #fff;
    border: 1px solid #dfe5ec;
    border-radius: 8px;
}

.ql-editor {
    min-height: 260px;
    background: #fff;
}

@keyframes riseIn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slowDrift {
    from {
        transform: scale(1.04) translate3d(0, 0, 0);
    }
    to {
        transform: scale(1.08) translate3d(-1.2%, .8%, 0);
    }
}

@media (max-width: 767.98px) {
    .hero {
        min-height: 84svh;
    }

    .site-banner-hero {
        min-height: auto;
        height: clamp(200px, 46vw, 320px);
    }

    .hero-content {
        padding-top: 6rem;
        padding-bottom: 3.5rem;
    }

    .site-banner-hero .hero-content {
        padding-top: 1rem;
        padding-bottom: 1.5rem;
    }

    .display-title {
        font-size: 3.2rem;
        line-height: .96;
    }

    .section-title {
        font-size: 2.4rem;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .display-title {
        font-size: 4.2rem;
    }

    .section-title {
        font-size: 2.8rem;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .display-title {
        font-size: 5.4rem;
    }

    .section-title {
        font-size: 3.2rem;
    }
}

/* --- Hero slideshow --- */

.hero-has-slideshow::before {
    display: none;
}

.hero-slideshow-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.hero-slideshow-bg .carousel,
.hero-slideshow-bg .carousel-inner,
.hero-slideshow-bg .carousel-item {
    height: 100%;
}

.hero-slideshow-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transform: scale(1.04);
    animation: slowDrift 18s ease-in-out infinite alternate;
}

.hero-slideshow-dots {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    z-index: 1;
    display: flex;
    gap: .5rem;
}

.hero-slideshow-dots button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .2);
    padding: 0;
    transition: background .2s ease, transform .2s ease;
}

.hero-slideshow-dots button.active {
    background: #eef4f8;
    transform: scale(1.3);
}

/* --- Hero orientation variants (portrait vs landscape source photo) ---
   Only used where both a portrait and a landscape image exist (currently persona pages).
   .hero::before/::after keep doing the darkening overlay + drift animation; these two layers
   just supply the correctly-oriented backing image and swap by CSS orientation media query. */

.hero-has-orientation-variants::before {
    display: none;
}

.hero-orientation-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.hero-orientation-bg .carousel,
.hero-orientation-bg .carousel-inner,
.hero-orientation-bg .carousel-item {
    height: 100%;
}

.hero-orientation-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transform: scale(1.04);
    animation: slowDrift 18s ease-in-out infinite alternate;
}

.hero-orientation-bg-portrait {
    display: none;
}

@media (orientation: portrait) {
    .hero-orientation-bg-landscape {
        display: none;
    }

    .hero-orientation-bg-portrait {
        display: block;
    }
}

/* --- World sections on the homepage --- */

.world-cover-frame {
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
}

.world-cover-frame img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* --- World section (homepage): one continuous full-bleed world-cover background that runs
   behind both the banner (copy + persona deck) and the album grid beneath it, edge to edge,
   with no gap against the hero above or the next world section below. --- */

.world-section {
    position: relative;
    overflow: hidden;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.world-section-bg {
    position: absolute;
    inset: 0;
    background: var(--world-bg) center / cover no-repeat;
    transform: scale(1.02);
}

.world-section-shade {
    position: absolute;
    inset: 0;
    background: rgba(6, 8, 14, .5);
}

.world-section-alt .world-section-shade {
    background: rgba(10, 6, 16, .5);
}

.world-banner-inner,
.world-albums-inner {
    position: relative;
}

.world-banner-row {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    width: 100%;
    padding: 3.5rem 0 3rem;
}

.world-banner-copy {
    flex: 0 0 min(360px, 38%);
    max-width: 360px;
}

.world-banner-copy .muted-copy {
    font-size: .98rem;
    line-height: 1.55;
}

.persona-deck {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    height: clamp(320px, 34vw, 420px);
    min-width: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}

.persona-deck-card {
    position: relative;
    flex: 0 0 72px;
    min-width: 72px;
    background: var(--persona-bg) center / cover no-repeat;
    text-decoration: none;
    color: inherit;
    border-left: 2px solid rgba(255, 255, 255, .15);
    transition: flex-basis .45s cubic-bezier(.22, .8, .32, 1), min-width .45s cubic-bezier(.22, .8, .32, 1);
    overflow: hidden;
}

.persona-deck-card:first-child {
    border-left: 0;
}

/* Standalone "Artists"/"Voices of this world" decks (album + world pages) shouldn't keep
   stretching wider as the viewport grows past a normal reading width — a very wide deck forces
   each card's fixed-height slice to crop a lot more horizontally, cutting faces out of the
   cover photo. Cap it and center it instead; the homepage's world-banner-row deck (which sits
   beside a copy column, not full width) is a different usage and is left untouched. */
.persona-deck-capped {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.persona-deck-capped-low {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.persona-deck-card.is-active {
    flex: 1 1 auto;
    min-width: 220px;
}

.persona-deck-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(6, 8, 14, .88) 0%, rgba(6, 8, 14, .1) 55%, rgba(6, 8, 14, 0) 75%);
    opacity: 0;
    transition: opacity .35s ease;
}

.persona-deck-card.is-active::after {
    opacity: 1;
}

.persona-deck-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.1rem 1.2rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .3s ease .1s, transform .3s ease .1s;
    white-space: normal;
}

.persona-deck-card.is-active .persona-deck-info {
    opacity: 1;
    transform: translateY(0);
}

.persona-deck-info strong {
    display: block;
    font-size: 1.1rem;
    color: #fff;
}

.persona-deck-info small {
    display: block;
    color: #cfd9e0;
    font-size: .85rem;
    margin-top: .2rem;
}

.world-albums-inner {
    padding: 0 0 4rem;
}

.album-panel-on-image {
    background: rgba(8, 9, 14, .72);
    backdrop-filter: blur(6px);
    border-color: rgba(255, 255, 255, .14);
}

@media (max-width: 991px) {
    .world-banner-row {
        flex-direction: column;
        align-items: stretch;
        padding: 2.25rem 0;
    }

    .world-banner-copy {
        flex: 1 1 auto;
        max-width: none;
    }

    .persona-deck {
        height: 280px;
    }

    .world-albums-inner {
        padding-bottom: 3rem;
    }
}

.persona-chip {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem .9rem .5rem .5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    text-decoration: none;
    color: inherit;
    transition: border-color .2s ease, background .2s ease;
}

.persona-chip:hover {
    border-color: rgba(145, 198, 226, .5);
    background: rgba(255, 255, 255, .08);
}

.persona-chip img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
}

/* --- Album panels (homepage world section) --- */

.album-panel {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    overflow: hidden;
}

.album-panel-cover img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
}

.album-track-mini li {
    padding: .3rem 0;
    border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: .92rem;
    color: #cfd9e0;
}

.album-track-mini li:first-child {
    border-top: 0;
}

.song-preview-toggle {
    flex: 0 0 auto;
    width: 1.3rem;
    height: 1.3rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #eef4f8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    vertical-align: middle;
    margin-inline-end: .4rem;
    transition: background-color .2s ease;
}

.song-preview-toggle:hover {
    background: rgba(143, 191, 232, .35);
}

.song-preview-toggle::before {
    content: '';
    width: 0;
    height: 0;
    border-top: .32rem solid transparent;
    border-bottom: .32rem solid transparent;
    border-left: .42rem solid currentColor;
    margin-left: .12rem;
}

.song-preview-toggle.is-playing {
    background: #8fbfe8;
    color: #061019;
}

.song-preview-toggle.is-playing::before {
    width: .5rem;
    height: .5rem;
    border: 0;
    margin-left: 0;
    background: currentColor;
}

/* --- Infinite scroll (replaces the unstyled Bootstrap pagination on archive listings) --- */

.infinite-scroll-sentinel {
    display: flex;
    justify-content: center;
    padding: 2.5rem 0;
    min-height: 1px;
}

.infinite-scroll-sentinel[data-has-more="0"] {
    display: none;
}

.infinite-scroll-spinner {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .15);
    border-top-color: #8fbfe8;
    opacity: 0;
    transition: opacity .2s ease;
    animation: infiniteScrollSpin .8s linear infinite;
}

.infinite-scroll-sentinel.is-loading .infinite-scroll-spinner {
    opacity: 1;
}

/* --- Ambient firefly particles --- */

.fireflies {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 2;
    mix-blend-mode: screen;
}

.firefly {
    position: absolute;
    border-radius: 50%;
    background: #d9c9ff;
    box-shadow: 0 0 6px 2px rgba(217, 201, 255, .8);
    opacity: 0;
    will-change: left, top, opacity;
}

@media (max-width: 767px) {
    .fireflies { display: none; }
}

@keyframes infiniteScrollSpin {
    to {
        transform: rotate(360deg);
    }
}

/* --- Ambient background echoes toggle --- */

.ambient-echoes {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 60;
}

.ambient-echoes-toggle {
    position: relative;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(8, 9, 14, .72);
    backdrop-filter: blur(6px);
    color: rgba(255, 255, 255, .7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.ambient-echoes-toggle svg {
    width: 1.15rem;
    height: 1.15rem;
}

.ambient-echoes-toggle:hover,
.ambient-echoes-toggle:focus-visible {
    color: #8fbfe8;
    border-color: rgba(143, 191, 232, .5);
}

.ambient-echoes-icon-off {
    display: none;
}

.ambient-echoes.is-muted .ambient-echoes-icon-on {
    display: none;
}

.ambient-echoes.is-muted .ambient-echoes-icon-off {
    display: flex;
}

.ambient-echoes-pulse {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid rgba(143, 191, 232, .55);
    opacity: 0;
    pointer-events: none;
}

.ambient-echoes.is-playing .ambient-echoes-toggle {
    color: #8fbfe8;
    border-color: rgba(143, 191, 232, .6);
}

.ambient-echoes.is-playing .ambient-echoes-pulse {
    animation: ambientEchoesPulse 2.4s ease-out infinite;
}

@keyframes ambientEchoesPulse {
    0% { transform: scale(.85); opacity: .55; }
    100% { transform: scale(1.55); opacity: 0; }
}

/* --- Rarity / source badges --- */

.rarity-badge {
    padding: .3rem .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    backdrop-filter: blur(6px);
    background: rgba(7, 9, 15, .55);
    border: 1px solid rgba(255, 255, 255, .2);
    cursor: default;
}

.rarity-legendary { color: #f5c542; border-color: rgba(245, 197, 66, .5); }
.rarity-epic { color: #e8734f; border-color: rgba(232, 115, 79, .5); }
.rarity-rare { color: #8fbfe8; border-color: rgba(143, 191, 232, .5); }
.rarity-uncommon { color: #7ec98f; border-color: rgba(126, 201, 143, .5); }
.rarity-common { color: #9aa5ad; border-color: rgba(154, 165, 173, .5); }

.source-badge {
    padding: .3rem .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    color: #b9c5cf;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    cursor: default;
}

.genre-badge {
    padding: .3rem .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    color: #d8b9e8;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(216, 185, 232, .3);
    cursor: default;
}

.tag-chip {
    padding: .4rem .9rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    color: #eef4f8;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .18);
}

.entity-section {
    padding-top: 2.5rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.song-embed-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.song-embed-list--grid {
    display: block;
}

.song-embed-list--grid::after {
    content: "";
    display: table;
    clear: both;
}

.song-embed-list--grid .song-embed-row {
    float: left;
    width: calc(50% - .5rem);
    box-sizing: border-box;
    margin-bottom: 1rem;
}

.song-embed-list--grid .song-embed-row:nth-child(odd) {
    margin-right: 1rem;
}

.song-embed-row {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    padding: 1rem 1.1rem .6rem;
}

.song-embed-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .6rem;
}

.song-embed-row-title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #eef4f8;
    text-decoration: none;
}

.song-embed-row-title:hover {
    color: #f5c542;
}

.song-embed-row-sub {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.song-embed-row-artist {
    font-size: .85rem;
    color: #b9c5cf;
    text-decoration: none;
}

.song-embed-row-artist:hover {
    color: #eef4f8;
}

.song-embed-row-player {
    width: 100%;
    height: 166px;
    border: 0;
    border-radius: 8px;
    display: block;
    background: #0c0e14;
}

.song-embed-row-fallback {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, .03);
    text-decoration: none;
    color: #9aa5ad;
    font-size: .85rem;
}

.song-embed-row-fallback img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
}

/* --- Immersive panorama header (homepage only) ---
   Scoped under an "ahd-" prefix so it can't collide with the shared .hero/.btn
   classes used by every other page's <x-hero> component and Bootstrap buttons. */

.ahd-hero {
    position: relative;
    isolation: isolate;
    height: 100svh;
    overflow: hidden;
    background: #130f18;
}

.ahd-panorama-viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.ahd-panorama-track {
    position: absolute;
    inset-block: 0;
    left: 0;
    display: flex;
    width: max-content;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.ahd-panorama-panel {
    position: relative;
    width: var(--panorama-panel-width, 145vw);
    height: 100%;
    flex: 0 0 auto;
    background-image: var(--panorama);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    filter: saturate(.9) contrast(1.02);
}

.ahd-hero-shade {
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(3, 4, 9, .2) 0, transparent 25%, transparent 65%, rgba(5, 7, 13, .62) 100%),
        radial-gradient(circle at 29% 56%, rgba(4, 5, 10, .05), rgba(4, 5, 10, .36) 78%);
}

.ahd-hero-copy {
    position: absolute;
    z-index: 4;
    left: max(5vw, 48px);
    bottom: clamp(72px, 10vh, 118px);
    width: min(620px, calc(100% - 96px));
    text-shadow: 0 3px 24px rgba(0, 0, 0, .75);
    pointer-events: none;
}

.ahd-hero-copy a {
    pointer-events: auto;
}

.ahd-eyebrow {
    color: #91c8ff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.ahd-hero-copy h1 {
    margin: 8px 0 10px;
    font: 700 clamp(2.6rem, 5vw, 5.4rem)/.9 "Cormorant Garamond", Georgia, serif;
    letter-spacing: -.02em;
    color: #fff;
}

.ahd-hero-copy p {
    max-width: 540px;
    margin: 0 0 24px;
    color: rgba(255, 255, 255, .76);
    line-height: 1.65;
}

.ahd-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ahd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 43px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 999px;
    background: rgba(5, 7, 13, .18);
    backdrop-filter: blur(10px);
    color: #eef4f8;
    text-decoration: none;
    transition: transform .2s ease, background .2s ease;
}

.ahd-btn.ahd-btn-primary {
    color: #090a10;
    background: #fff;
    border-color: #fff;
    font-weight: 600;
}

.ahd-btn:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, .15);
    color: #eef4f8;
}

.ahd-btn.ahd-btn-primary:hover {
    background: #eee9e1;
}

.ahd-speed-zone {
    position: absolute;
    z-index: 8;
    top: 0;
    bottom: 0;
    width: clamp(58px, 7vw, 112px);
    border: 0;
    background: transparent;
    opacity: .36;
    cursor: e-resize;
    transition: opacity .25s, background .25s;
}

.ahd-speed-zone::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 18px;
    height: 18px;
    border-top: 1px solid white;
    border-right: 1px solid white;
}

.ahd-speed-zone:hover,
.ahd-speed-zone:focus-visible {
    opacity: 1;
}

.ahd-speed-zone.left {
    left: 0;
    cursor: w-resize;
}

.ahd-speed-zone.left:hover {
    background: linear-gradient(90deg, rgba(4, 5, 10, .5), transparent);
}

.ahd-speed-zone.left::after {
    left: 28px;
    transform: rotate(-135deg);
}

.ahd-speed-zone.right {
    right: 0;
}

.ahd-speed-zone.right:hover {
    background: linear-gradient(-90deg, rgba(4, 5, 10, .5), transparent);
}

.ahd-speed-zone.right::after {
    right: 28px;
    transform: rotate(45deg);
}

.ahd-pin-layer {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
}

.ahd-persona-pin {
    position: absolute;
    z-index: 9;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 50%;
    background: rgba(7, 9, 15, .25);
    box-shadow: 0 0 0 8px rgba(255, 255, 255, .06), 0 0 30px rgba(167, 123, 255, .35);
    backdrop-filter: blur(5px);
    color: #fff;
    cursor: pointer;
    pointer-events: auto;
    transition: transform .22s, background .22s, box-shadow .22s;
}

.ahd-persona-pin::after {
    content: "+";
    font-size: 1.25rem;
    font-weight: 300;
}

.ahd-persona-pin:hover,
.ahd-persona-pin:focus-visible,
.ahd-persona-pin.active {
    transform: scale(1.12);
    background: rgba(167, 123, 255, .65);
    box-shadow: 0 0 0 10px rgba(167, 123, 255, .12), 0 0 40px rgba(167, 123, 255, .7);
}

.ahd-persona-card {
    position: absolute;
    z-index: 20;
    right: clamp(28px, 5vw, 78px);
    bottom: clamp(30px, 7vh, 78px);
    width: min(390px, calc(100% - 40px));
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 24px;
    background: rgba(7, 9, 15, .82);
    box-shadow: 0 25px 80px rgba(0, 0, 0, .45);
    backdrop-filter: blur(24px) saturate(1.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(.98);
    transition: opacity .3s, visibility .3s, transform .3s;
}

.ahd-persona-card.open {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.ahd-card-visual {
    position: relative;
    height: 148px;
    background:
        linear-gradient(180deg, transparent 50%, rgba(7, 9, 15, .92)),
        var(--card-image, var(--panorama)) center 10%/cover;
}

.ahd-card-close,
.ahd-audio-toggle {
    position: absolute;
    top: 14px;
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    background: rgba(5, 7, 13, .6);
    backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
}

.ahd-card-close {
    right: 14px;
    font-size: 1.1rem;
}

.ahd-audio-toggle {
    right: 60px;
}

.ahd-audio-toggle svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.ahd-card-body {
    padding: 3px 22px 23px;
}

.ahd-card-kicker {
    color: #a77bff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ahd-persona-card h2 {
    margin: 4px 0 8px;
    font: 700 2.2rem/1 "Cormorant Garamond", Georgia, serif;
    color: #fff;
}

.ahd-card-description {
    margin: 0;
    color: rgba(255, 255, 255, .68);
    font-size: .86rem;
    line-height: 1.55;
}

.ahd-now-playing {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 17px 0;
}

.ahd-equalizer {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 20px;
}

.ahd-equalizer i {
    width: 2px;
    height: 5px;
    background: #e8c884;
    animation: ahdEqualize .8s ease-in-out infinite alternate;
}

.ahd-equalizer i:nth-child(2) {
    animation-delay: -.3s;
}

.ahd-equalizer i:nth-child(3) {
    animation-delay: -.55s;
}

.ahd-persona-card.muted .ahd-equalizer i {
    animation-play-state: paused;
    height: 2px;
}

@keyframes ahdEqualize {
    to {
        height: 18px;
    }
}

.ahd-track-meta {
    color: rgba(255, 255, 255, .7);
    font-size: .75rem;
}

.ahd-track-meta strong {
    display: block;
    color: #fff;
    font-size: .82rem;
}

.ahd-card-links {
    display: flex;
    gap: 7px;
    margin-bottom: 17px;
}

.ahd-card-links a {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    color: rgba(255, 255, 255, .72);
    font-size: .72rem;
    text-decoration: none;
}

.ahd-card-link-main {
    width: 100%;
}

@media (max-width: 767.98px) {
    .ahd-hero-copy {
        left: 24px;
        bottom: 48px;
        width: calc(100% - 48px);
    }

    .ahd-hero-copy h1 {
        font-size: clamp(2.6rem, 15vw, 3.8rem);
    }

    .ahd-hero-copy p {
        font-size: .88rem;
    }

    .ahd-persona-pin {
        width: 41px;
        height: 41px;
    }

    .ahd-speed-zone {
        width: 52px;
    }

    .ahd-speed-zone.left::after {
        left: 17px;
    }

    .ahd-speed-zone.right::after {
        right: 17px;
    }

    .ahd-persona-card {
        position: fixed;
        right: 20px;
        bottom: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ahd-equalizer i {
        animation: none;
        height: 8px;
    }
}

/* Final-readiness shared accessibility and legibility. */
html { scroll-padding-top: calc(var(--nav-height) + 1rem); }
.skip-link { position: fixed; top: .75rem; left: 1rem; z-index: 1000; padding: .8rem 1.2rem; background: #eef4f8; color: #07090f; border-radius: .4rem; transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid #a9d8f4; outline-offset: 4px; }
#site-content:focus { outline: none; }
.site-nav.is-scrolled { background: rgba(5, 7, 13, .94); border-bottom-color: rgba(255, 255, 255, .1); }
.nav-links a[aria-current="page"] { color: #fff; text-decoration: underline; text-underline-offset: .45em; text-decoration-color: #a9d8f4; }
.menu-toggle { min-width: 44px; min-height: 44px; }
.page-card { position: relative; }
.page-card img { height: auto; }
.page-card-meta { display: flex; align-items: center; gap: .65rem; }
.page-card-heading { display: flex; align-items: start; justify-content: space-between; gap: .7rem; }
.page-card-heading h2 { min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
.page-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.page-card:focus-within { border-color: #a9d8f4; }
.page-card .song-preview-toggle { position: relative; z-index: 2; }
.song-preview-toggle { width: 2rem; height: 2rem; }
.song-preview-toggle[aria-busy="true"] { opacity: .65; }
.preview-feedback { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 150; width: max-content; max-width: calc(100% - 2rem); padding: .75rem 1rem; border: 1px solid #52687b; border-radius: .5rem; background: #111a24; color: #eef4f8; box-shadow: 0 8px 32px #0008; }
.preview-feedback:empty { display: none; }
.persona-deck-info { z-index: 1; }
.persona-deck-card:focus-visible { outline-offset: -4px; }
.content-body, .lore-body { overflow-wrap: anywhere; }
@media (max-width: 767.98px) {
    .nav-links a { padding: .4rem .25rem; }
    .song-preview-toggle { min-width: 44px; min-height: 44px; }
    .hero-text-panel { padding: 1.2rem; background: rgba(7, 9, 15, .62); }
    .hero-content { padding-bottom: 2.5rem; }
    .display-title { font-size: clamp(2.6rem, 11vw, 4.5rem); line-height: 1; overflow-wrap: anywhere; }
    .section-title { font-size: clamp(2.2rem, 9vw, 3.6rem); line-height: 1.08; }
}
@media (prefers-reduced-motion: reduce) {
    .page-card, .site-nav, .brand img, .persona-deck-info, .persona-deck-card, .ahd-photo-panel { transition: none; }
    .hero::before, .hero-text-panel { animation: none; }
}