/* Global Styles & Variables */
:root {
    --bg-base: #FFFFFF;           /* Pure White (60% Primary Background) */
    --bg-panel: #F8F9FA;          /* Soft Off-White/Light Grey */
    --bg-dark: #121212;           /* Deep Black/Ink (30% Secondary Structure) */
    --border-light: #E5E5E7;      /* Clean Light Border */
    --border-hover: #D32F2F;      /* Vibrant Red Accent */
    --text-primary: #1C1C1E;      /* Dark Ink (30% Secondary Text) */
    --text-muted: #6E6E73;        /* Charcoal Muted Text */
    --text-light: #F5F5F7;        /* Off-white text for dark panels */
    --accent-primary: #D32F2F;    /* Vibrant Red (10% Accent CTA) */
    --accent-glow: rgba(211, 47, 47, 0.12);
    --accent-secondary: #B71C1C;  /* Dark Red */
    
    --font-heading: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --font-body: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    
    --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Aggressive image and selection protection */
img, .art-image, .album-cover-image {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none; /* Make images unclickable directly */
}

body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html {
    scroll-behavior: smooth;
    background-color: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 16px;
    overflow-x: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* legacy Edge/IE */
}

/* Hide the scrollbar while keeping scroll functional */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}

body {
    position: relative;
    min-height: 100vh;
    line-height: 1.6;
}

/* Accessibility: skip link + visible keyboard focus */
.skip-link {
    position: absolute;
    left: 12px;
    top: -48px;
    z-index: 2000;
    padding: 10px 16px;
    background: var(--bg-dark);
    color: var(--text-light);
    border-radius: 6px;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 12px;
}

:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

main:focus {
    outline: none;
}

/* Legal / content pages */
.legal-section {
    padding: 140px 0 80px;
    background: var(--bg-base);
}

.legal {
    max-width: 720px;
}

.legal .section-header {
    text-align: left;
    margin-bottom: 32px;
}

.legal h2 {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.15rem;
    margin: 32px 0 8px;
    color: var(--text-primary);
}

.legal p {
    color: var(--text-muted);
    margin-bottom: 12px;
    user-select: text;
}

.legal a {
    color: var(--accent-primary);
    text-decoration: underline;
}

/* Common Layout Components */
.section-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 24px;
}

/* Anchor targets clear the fixed header on in-page navigation */
section[id] {
    scroll-margin-top: 96px;
}

@media (max-width: 640px) {
    section[id] {
        scroll-margin-top: 124px;
    }
}

.glass-panel {
    background: rgba(248, 249, 250, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05);
    transition: var(--transition-smooth);
}

.glass-panel:hover {
    border-color: var(--border-hover);
    box-shadow: 0 12px 40px 0 rgba(211, 47, 47, 0.08);
    transform: translateY(-4px) scale(1.01);
}

/* Header & Nav */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-light);
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: var(--transition-smooth);
}

.header-logo-img {
    height: 42px;
    width: 42px;
    object-fit: cover;
    border-radius: 50%;
    background: #000;
    flex-shrink: 0;
}

.logo-text {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 1px;
}

.nav {
    display: flex;
    gap: 32px;
}

.nav-link {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: var(--transition-smooth);
}

.nav-link span {
    display: block;
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 1.1;
    opacity: 0.62;
}

.nav-link:hover {
    color: var(--text-primary);
}

/* Hero Section — album cover with a record-crate flip of the drawings */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 120px 24px 80px;
    overflow: hidden;
}

/* 12x12 album face */
.hero-album {
    position: relative;
    width: min(86vw, 540px);
    aspect-ratio: 1 / 1;
    background: var(--bg-base);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14);
    overflow: hidden;
}

/* The crate — perspective stage where cards flip forward */
.crate {
    position: absolute;
    inset: 7% 7% 22% 7%;
    perspective: 1200px;
    perspective-origin: 50% 42%;
}

.crate-card {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: 50% 100%;
    backface-visibility: hidden;
    will-change: transform, opacity;
    transition: transform 0.7s cubic-bezier(0.45, 0.05, 0.2, 1), opacity 0.5s ease;
}

.crate-card img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.hero-album-caption {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 10;
    padding: 0 0 18px 22px;
    text-align: left;
}

.hero-name {
    font-family: var(--font-body);
    font-size: clamp(1.15rem, 3.2vw, 1.85rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.5px;
    color: var(--text-primary);
    margin: 0;
}

.hero-sub {
    display: block;
    margin-top: 5px;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--text-muted);
    font-weight: 600;
}

/* Home section teasers — heading + a scroll-driven peek carousel of cover art */
.teaser-section {
    padding: 72px 0;
    border-top: 1px solid var(--border-light);
}

.teaser-head {
    max-width: 1200px;
    margin: 0 auto 28px;
    padding: 0 24px;
}

.teaser-title {
    font-family: var(--font-body);
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.05;
    margin: 8px 0 0;
    color: var(--text-primary);
}

.teaser-desc {
    margin: 12px 0 20px;
    color: var(--text-muted);
    max-width: 52ch;
}

/* The peeking row of covers; edges fade so it reads as a strip */
.carousel {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 0;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Keep a horizontal swipe inside the strip so it cannot chain into the
       browser's back/forward navigation gesture at either end. */
    overscroll-behavior-x: contain;
    cursor: grab;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.carousel.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

/* Drag never disables hit-testing on the cards. A stuck `is-dragging` class
   would otherwise make every cover permanently unclickable; the click handler
   in app.js already suppresses navigation after a real drag. */

.carousel::-webkit-scrollbar {
    display: none;
}

.carousel-track {
    display: flex;
    gap: 18px;
    width: max-content;
    padding: 0 24px;
}

.carousel-card {
    flex: 0 0 auto;
    height: clamp(180px, 26vw, 300px);
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg-base);
    border: 1px solid var(--border-light);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
    scroll-snap-align: center;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: var(--transition-smooth);
}

a.carousel-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
}

.carousel-card img {
    height: 100%;
    width: auto;
    display: block;
    object-fit: cover;
}

/* Buttons */
.hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 36px;
}

.btn {
    display: inline-block;
    padding: 14px 28px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 12px;
    text-decoration: none;
    transition: var(--transition-smooth);
    cursor: pointer;
}

.btn-primary {
    background-color: var(--accent-primary);
    color: #FFFFFF;
    box-shadow: 0 4px 20px var(--accent-glow);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(211, 47, 47, 0.35);
}

.btn-secondary {
    background: var(--bg-base);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}

.btn-secondary:hover {
    border-color: var(--border-hover);
    background: rgba(211, 47, 47, 0.05);
    transform: translateY(-2px);
}

/* Section Header styling */
.section-header {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 64px;
}

.section-kicker {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--accent-primary);
    font-weight: 600;
    display: inline-block;
    margin-bottom: 12px;
}

.section-title {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    font-weight: 700;
    margin-bottom: 16px;
}

.section-desc {
    color: var(--text-muted);
    font-size: 1.1rem;
    font-weight: 300;
}

/* Content sections */
.editions-section {
    background: var(--bg-base);
    border-top: 1px solid var(--border-light);
}

.path-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.dispatch-wrap {
    max-width: 520px;
    margin: 48px auto 0;
    padding: 28px;
    border-color: rgba(211, 47, 47, 0.2);
}

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

.stub-form label {
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.stub-form input {
    width: 100%;
    min-height: 46px;
    padding: 12px 14px;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    background: #fff;
    color: var(--text-primary);
    font: inherit;
    user-select: text;
}

.stub-form input:focus {
    outline: 2px solid rgba(211, 47, 47, 0.18);
    border-color: var(--accent-primary);
}

.form-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.form-status {
    font-size: 0.82rem;
    line-height: 1.5;
    min-height: 1.2em;
    color: var(--accent-primary);
    font-weight: 600;
}

.path-card {
    display: grid;
    gap: 10px;
    min-height: 160px;
    padding: 24px;
    color: var(--text-primary);
    text-decoration: none;
}

.path-card span {
    color: var(--accent-primary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.path-card strong {
    font-size: 1.12rem;
    line-height: 1.35;
}

/* Music Grid & Cards */
.music-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 40px;
    /* Cards carry different amounts of lyrics; let each size to its own content
       instead of stretching short ones to match the tallest in the row. */
    align-items: start;
}

.catalog-group {
    margin-bottom: 56px;
}

.catalog-group:last-child {
    margin-bottom: 0;
}

.catalog-subtitle {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 3vw, 2rem);
    font-weight: 700;
    margin-bottom: 28px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
}

.catalog-group-current .catalog-subtitle {
    border-bottom-color: var(--accent-primary);
}

.catalog-group-archive .catalog-subtitle {
    color: var(--text-muted);
}

.platform-note {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0 0 10px;
    line-height: 1.4;
}

.music-card {
    display: flex;
    flex-direction: column;
    padding: 24px;
}

.album-cover-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
}

.album-cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: var(--transition-smooth);
}

.album-cover-wrapper:hover .album-cover-image {
    transform: scale(1.05);
}

.album-cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    position: relative;
}

.album-1-bg {
    background: #1A5799; /* Cobalt Blue */
}

.album-2-bg {
    background: #468BE6; /* Tufts Blue */
}

.album-cover-text {
    z-index: 2;
    padding: 24px;
    text-align: center;
    line-height: 1.2;
}

.album-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(18, 18, 18, 0.8);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 3;
}

.album-details h3 {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    margin-bottom: 6px;
    line-height: 1.3;
}

.album-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 24px;
}

/* Custom Interactive Audio Player */
.player-container {
    background: var(--bg-base);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.track-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    margin-bottom: 12px;
}

.track-title {
    font-weight: 600;
    color: var(--text-primary);
}

.track-status {
    color: var(--accent-primary);
    opacity: 0;
    font-weight: 600;
    transition: var(--transition-smooth);
}

.track-status.active {
    opacity: 1;
}

.player-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.play-btn {
    background: var(--accent-primary);
    color: #FFFFFF;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-smooth);
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(211, 47, 47, 0.25);
}

.play-btn:hover {
    transform: scale(1.1);
    background: var(--accent-secondary);
    box-shadow: 0 4px 12px rgba(211, 47, 47, 0.4);
}

.play-btn.disabled,
.play-btn:disabled {
    background: rgba(0, 0, 0, 0.18);
    cursor: not-allowed;
    pointer-events: none;
}

.progress-bar-container {
    flex-grow: 1;
    height: 4px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: var(--accent-primary);
    border-radius: 2px;
    transition: width 0.1s linear;
}

.track-duration {
    font-size: 0.8rem;
    color: var(--text-muted);
    min-width: 32px;
    text-align: right;
}

.platform-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: var(--transition-smooth);
}

.platform-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.apple-music {
    background: rgba(211, 47, 47, 0.06);
    color: var(--accent-primary);
    border: 1px solid rgba(211, 47, 47, 0.18);
}

.apple-music:hover {
    background: rgba(211, 47, 47, 0.12);
    border-color: var(--accent-primary);
    transform: translateY(-1px);
}

.spotify {
    background: rgba(29, 185, 84, 0.08);
    color: #1AA34A;
    border: 1px solid rgba(29, 185, 84, 0.22);
}

.spotify:hover {
    background: rgba(29, 185, 84, 0.16);
    border-color: #1DB954;
    transform: translateY(-1px);
}

/* Art Section — masonry columns keep tall portrait
   canvases without cropping or ragged rows. */
.gallery-grid {
    column-count: 3;
    column-gap: 28px;
}

@media (max-width: 900px) {
    .gallery-grid { column-count: 2; column-gap: 20px; }
}

@media (max-width: 560px) {
    .gallery-grid { column-count: 1; }
}

.gallery-item {
    display: block;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    padding: 14px;
    margin: 0 0 28px;
    overflow: visible;
    cursor: zoom-in;
}

.gallery-image-wrapper {
    position: relative;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-panel);
    border: 1px solid var(--border-light);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04),
                0 10px 28px rgba(0, 0, 0, 0.06);
}

.art-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-item:hover .art-image {
    transform: scale(1.04);
}

/* Transparent shield over every artwork: intercepts pointer events so the
   underlying <img> can't be dragged, long-pressed, or right-click-saved. */
.image-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.18) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    cursor: zoom-in;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.gallery-item:hover .image-overlay {
    opacity: 1;
}

.art-info {
    padding: 16px 4px 4px;
}

.art-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 4px 0 0;
    letter-spacing: -0.01em;
}

/* Art Canvas / Graphic Placeholders with Curated Aesthetics */
.art-placeholder {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.art-1-bg {
    background: #1A5799; /* Cobalt Blue */
}

.art-2-bg {
    background: #1F1F1F; /* Eerie Black */
}

.art-placeholder-pattern {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.45;
}

.art-1-bg .art-placeholder-pattern::before {
    content: '';
    position: absolute;
    top: 15%;
    left: 20%;
    width: 120px;
    height: 120px;
    background: #93BFEF; /* Jordy Blue */
    border-radius: 50%;
}

.art-1-bg .art-placeholder-pattern::after {
    content: '';
    position: absolute;
    bottom: 10%;
    right: 15%;
    width: 100px;
    height: 100px;
    background: #E9F5FF; /* Alice Blue */
    transform: rotate(45deg);
}

.art-2-bg .art-placeholder-pattern::before {
    content: '';
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    background: #1A5799; /* Cobalt Blue */
}

.art-2-bg .art-placeholder-pattern::after {
    content: '';
    position: absolute;
    top: 35%;
    left: 35%;
    width: 30%;
    height: 30%;
    background: #E9F5FF; /* Alice Blue */
}

.art-status-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.art-status-badge.available {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.art-medium {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-primary);
    font-weight: 600;
    margin-bottom: 8px;
    display: inline-block;
}

.gallery-details h3 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    margin-bottom: 6px;
}

.art-dims {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.art-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}

.art-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.buy-btn {
    background: transparent;
    color: var(--accent-primary);
    border: 1px solid rgba(211, 47, 47, 0.25);
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: var(--transition-smooth);
}

.buy-btn:hover {
    background: var(--accent-primary);
    color: #FFFFFF;
    border-color: var(--accent-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(211, 47, 47, 0.2);
}

/* Footer styling */
.footer {
    background: var(--bg-dark); /* Deep Black/Ink grounding structure */
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 40px 24px;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.copyright {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

.footer-links {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.footer-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-right: 4px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.85rem;
    transition: var(--transition-smooth);
}

.footer-links a:hover {
    color: var(--accent-primary);
}

/* Interactive Watercolor Canvas */
.art-section {
    position: relative;
    overflow: hidden;
}

.art-section .section-container {
    position: relative;
    z-index: 2;
}

.fluid-background {
    display: none;
}

.color-blob {
    position: absolute;
    border-radius: 50%;
    animation: floatBlob 24s infinite alternate ease-in-out;
}

.blob-1 { 
    width: 60vw; height: 60vw; 
    background: rgba(211, 47, 47, 0.45); 
    top: -10%; left: -10%; 
}
.blob-2 { 
    width: 80vw; height: 80vw; 
    background: rgba(26, 87, 153, 0.35); 
    bottom: -20%; right: -10%; 
    animation-delay: -5s; 
}
.blob-3 { 
    width: 50vw; height: 50vw; 
    background: rgba(242, 108, 79, 0.4); 
    top: 30%; left: 30%; 
    animation-delay: -12s; 
}

@keyframes floatBlob {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30%, 15%) scale(1.1); }
    66% { transform: translate(-15%, 30%) scale(0.9); }
    100% { transform: translate(15%, -15%) scale(1.2); }
}

/* Private Collection Badge */
.art-status-badge.private-collection {
    background: rgba(110, 110, 115, 0.15);
    color: var(--text-muted);
    border: 1px solid rgba(110, 110, 115, 0.3);
}

/* Exclusive Download Button */
.download-btn {
    background: var(--accent-primary);
    color: #FFFFFF;
    border: 1px solid var(--accent-primary);
    box-shadow: 0 4px 12px var(--accent-glow);
}

.download-btn:hover {
    background: var(--accent-secondary);
    border-color: var(--accent-secondary);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(211, 47, 47, 0.25);
}

/* Scroll-reveal animation */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

@media (max-width: 900px) {
    .header-container {
        align-items: flex-start;
        gap: 18px;
    }

    .nav {
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 12px 18px;
    }

    .nav-link {
        font-size: 0.86rem;
    }
}

@media (max-width: 640px) {
    .section-container {
        padding: 76px 18px;
    }

    .header-container {
        flex-direction: column;
        padding: 16px 18px;
    }

    .nav {
        justify-content: flex-start;
    }

    .hero-section {
        min-height: 86vh;
        padding-top: 180px;
    }

    .hero-actions,
    .form-row {
        grid-template-columns: 1fr;
    }

    .hero-actions {
        display: grid;
    }

    .form-row .btn,
    .stub-form .btn {
        width: 100%;
        text-align: center;
    }
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px;
    background: rgba(12, 12, 12, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.lightbox.open {
    opacity: 1;
    visibility: visible;
}

.lightbox-figure {
    margin: 0;
    max-width: min(92vw, 1100px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    transform: scale(0.96);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.lightbox.open .lightbox-figure {
    transform: scale(1);
}

.lightbox-stage {
    position: relative;
    line-height: 0;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

.lightbox-img {
    display: block;
    max-width: min(92vw, 1100px);
    max-height: 74vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

.lightbox-caption {
    text-align: center;
    color: var(--text-light);
}

.lightbox-medium {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 6px;
}

.lightbox-title {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: #fff;
}

.lightbox-close,
.lightbox-nav {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
    flex-shrink: 0;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.lightbox-close:hover,
.lightbox-nav:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    transform: scale(1.08);
}

.lightbox-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    font-size: 1.8rem;
    line-height: 1;
}

.lightbox-nav {
    width: 52px;
    height: 52px;
    font-size: 2rem;
    line-height: 1;
}

@media (max-width: 640px) {
    .lightbox { padding: 16px; gap: 4px; }
    .lightbox-nav { width: 42px; height: 42px; font-size: 1.5rem; }
    .lightbox-img { max-height: 68vh; }
}

/* Audio Visualizer Equalizer */
.track-status-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.audio-visualizer {
    display: none;
    align-items: flex-end;
    gap: 2px;
    width: 16px;
    height: 12px;
}

.audio-visualizer.active {
    display: flex;
}

.visualizer-bar {
    width: 2px;
    height: 100%;
    background-color: var(--accent-primary);
    border-radius: 1px;
    transform-origin: bottom;
    animation: bounce 0.8s ease-in-out infinite alternate;
}

.visualizer-bar:nth-child(1) { animation-delay: 0.1s; }
.visualizer-bar:nth-child(2) { animation-delay: 0.4s; }
.visualizer-bar:nth-child(3) { animation-delay: 0.2s; }
.visualizer-bar:nth-child(4) { animation-delay: 0.6s; }

@keyframes bounce {
    0% {
        transform: scaleY(0.2);
    }
    100% {
        transform: scaleY(1);
    }
}

/* ============================================================
   ASCII / terminal identity
   Type is now mono-forward (see --font-heading / --font-body).
   This block adds the ASCII signals on top: bracketed labels,
   an [AEG] wordmark, [ command ] buttons, markdown "#" titles,
   squared "terminal-panel" surfaces, dashed section rules, and a
   blinking hero caret. Grouped here so the whole look is tunable.
   ============================================================ */
:root {
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, "SF Mono",
        Menlo, Consolas, "Liberation Mono", monospace;
}

/* --- Metadata / "chrome" labels ----------------------------- */
.section-kicker {
    letter-spacing: 1.5px;
}
.section-kicker::before { content: "[ "; }
.section-kicker::after  { content: " ]"; }

.hero-sub { letter-spacing: 2px; }

.footer-label { letter-spacing: 0.06em; }
.footer-label::before { content: "> "; opacity: 0.7; }

.path-card span { letter-spacing: 0.1em; }

/* --- ASCII wordmark: [AEG] ---------------------------------- */
.logo-text { letter-spacing: 0.5px; }
.logo-text::before { content: "["; opacity: 0.5; }
.logo-text::after  { content: "]"; opacity: 0.5; }

/* --- Markdown-style heading markers ------------------------- */
.teaser-title::before,
.section-title::before {
    content: "# ";
    color: var(--accent-primary);
    opacity: 0.5;
}

/* --- [ command ] buttons ------------------------------------ */
.btn {
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.82rem;
    box-shadow: none;
}
.btn::before { content: "[ "; opacity: 0.6; }
.btn::after  { content: " ]"; opacity: 0.6; }
.btn-primary { box-shadow: none; }
.btn-primary:hover { box-shadow: none; }

/* --- Squared "terminal panel" surfaces ---------------------- */
/* Everything squares to a 2–3px terminal radius. The only round
   things left are true circles (brand avatar, play button). */
.glass-panel { border-radius: 3px; }
.hero-album,
.album-cover-wrapper,
.album-badge,
.player-container,
.platform-btn,
.gallery-image-wrapper,
.buy-btn,
.art-status-badge,
.stub-form input,
.dispatch-form input {
    border-radius: 2px;
}

/* --- Dashed ASCII rules between stacked sections ------------ */
.teaser-section,
.editions-section {
    border-top: 1px dashed var(--border-light);
}

/* --- Blinking terminal caret on the hero name --------------- */
.hero-name::after {
    content: "_";
    margin-left: 4px;
    color: var(--accent-primary);
    animation: ascii-caret-blink 1.1s steps(1, end) infinite;
}
@keyframes ascii-caret-blink {
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}

/* While the name is typing on load, hold the caret solid (no blink). */
.hero-name.is-typing::after {
    animation: none;
    opacity: 1;
}

/* Reduced motion: hold the caret steady */
@media (prefers-reduced-motion: reduce) {
    .hero-name::after { animation: none; }
}

/* --- Index-style catalog numbering -------------------------- */
/* Gallery works get a plate number inline before the medium:
   001 · ACRYLIC ON CANVAS. Injected by initCatalogIndex(). */
.art-index {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.art-index::after {
    content: " · ";
    opacity: 0.55;
}

/* Music releases get a catalog code above the title. */
.album-index {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    margin-bottom: 4px;
}

/* --- Archive stamp (the one place the second accent appears) - */
:root {
    --accent-ink: #2A6F77; /* muted teal — reserved for the archive stamp */
}
.catalog-group-archive .album-cover-wrapper {
    position: relative;
}
.catalog-group-archive .album-cover-wrapper::after {
    content: "登録済 / ARCHIVE";
    position: absolute;
    z-index: 4;
    right: 10px;
    bottom: 10px;
    padding: 3px 7px;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--accent-ink);
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--accent-ink);
    border-radius: 2px;
    transform: rotate(-6deg);
    pointer-events: none;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* --- Terminal email submission (Inquiries) ------------------ */
/* Replaces the old Editions & Inquiries card grid + dispatch form
   with a single dark terminal window. Still posts through
   initDispatchForm() via #dispatch. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.terminal {
    max-width: 640px;
    margin: 0 auto;
    border: 1px solid var(--bg-dark);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14);
    font-family: var(--font-body);
    text-align: left;
}

.terminal-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-dark);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.terminal-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    flex-shrink: 0;
}
.terminal-dot:first-child { background: var(--accent-primary); }
.terminal-title {
    margin-left: 8px;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: rgba(245, 245, 247, 0.7);
}

.terminal-body {
    background: var(--bg-dark);
    color: var(--text-light);
    padding: 22px 18px 24px;
    font-size: 0.9rem;
    line-height: 1.7;
    min-height: 260px;
    cursor: text;
}

/* Log of entered/echoed lines */
.term-log { margin: 0; }
.term-line {
    margin: 0 0 4px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: rgba(245, 245, 247, 0.9);
}
.terminal-prompt,
.term-prompt {
    color: var(--accent-ink);
    font-weight: 600;
    margin-right: 8px;
}
.term-line--system { color: rgba(245, 245, 247, 0.55); }
.term-line--error { color: var(--accent-primary); }
.term-line--ok { color: rgba(245, 245, 247, 0.9); }

/* The live prompt line the visitor is typing on */
.term-current {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 2px;
}
.term-typed {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--text-light);
}
.term-caret {
    display: inline-block;
    color: var(--text-light);
    animation: term-blink 1.05s step-end infinite;
}
@keyframes term-blink {
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}
.term-current.is-done { display: none; }

/* Off-screen real input + honeypot */
.term-offscreen {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    opacity: 0;
    padding: 0;
    border: 0;
}

.term-hint {
    margin: 16px 0 0;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    color: rgba(245, 245, 247, 0.4);
}
.term-hint kbd {
    font-family: inherit;
    font-size: 0.68rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    padding: 0 5px;
}
.term-fallback {
    margin: 10px 0 0;
    font-size: 0.8rem;
    color: rgba(245, 245, 247, 0.4);
}
.term-fallback a {
    color: var(--accent-ink);
    text-decoration: none;
}
.term-fallback a:hover { text-decoration: underline; }

/* Hold the caret steady for reduced-motion visitors */
@media (prefers-reduced-motion: reduce) {
    .term-caret { animation: none; }
}

The above content does NOT show the entire file contents. If you need to view any lines of the file which were not shown to complete your task, call this tool again to view those lines.
/* Lyrics disclosure — music.html
   Flat by design: no shadow, no blur, no gradient. One radius (2px). */
.lyrics-block {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}

.lyrics-heading {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 8px;
}

.lyric {
    border-bottom: 1px solid var(--border-light);
}

.lyric:first-of-type {
    border-top: 1px solid var(--border-light);
}

.lyric-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 2px;
    cursor: pointer;
    list-style: none;
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--text-primary);
    transition: color 160ms ease-out;
}

.lyric-summary::-webkit-details-marker {
    display: none;
}

.lyric-summary::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--text-muted);
    border-bottom: 1.5px solid var(--text-muted);
    transform: rotate(-45deg);
    transition: transform 160ms ease-out, border-color 160ms ease-out;
}

.lyric-summary:hover,
.lyric[open] > .lyric-summary {
    color: var(--accent-primary);
}

.lyric-summary:hover::before,
.lyric[open] > .lyric-summary::before {
    border-color: var(--accent-primary);
}

.lyric[open] > .lyric-summary::before {
    transform: rotate(45deg);
}

.lyric-summary:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.lyric-body {
    padding: 2px 0 20px 16px;
    max-width: 60ch;
}

.lyric-body p {
    font-family: var(--font-body);
    font-size: 0.88rem;
    line-height: 1.75;
    color: var(--text-primary);
    margin: 0 0 1.15em;
}

.lyric-body p:last-child {
    margin-bottom: 0;
}

.lyric-chord {
    display: block;
    font-size: 0.76rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

.lyrics-credit {
    margin: 12px 0 0;
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--text-muted);
}

/* Per-line credits (Sato card) — one role per line, no bullets */
.album-credits {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}

.album-credits li {
    font-size: 0.85rem;
    line-height: 1.65;
    color: var(--text-muted);
}