@layer layout,components,utilities,print;

@layer layout {
  .data-page-main{padding:clamp(1.25rem,3vw,3rem) 0 clamp(5rem,10vw,9rem)}
  .data-page-hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:1px;border:1px solid var(--border-standard);background:var(--border-standard);box-shadow:var(--shadow-floating);overflow:hidden}
  .data-page-intro,.data-page-visual{background:linear-gradient(145deg,color-mix(in srgb,var(--surface-raised) 82%,transparent),var(--surface-base));min-width:0}
  .data-page-intro{padding:clamp(1.5rem,4vw,4.5rem)}
  .data-page-visual{position:relative;min-height:360px;overflow:hidden}
  .data-page-visual img{width:100%;height:100%;object-fit:cover;filter:saturate(.68) contrast(1.06);transition:transform 900ms var(--ease),filter 500ms var(--ease)}
  .data-page-visual:hover img{transform:scale(1.025);filter:saturate(.82) contrast(1.08)}
  .data-page-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.62));pointer-events:none}
  .data-page-visual figcaption{position:absolute;left:1rem;right:1rem;bottom:1rem;z-index:1;display:flex;justify-content:space-between;gap:1rem;color:#fff;font-family:var(--font-mono);font-size:.55rem;letter-spacing:.11em;text-transform:uppercase}
  .data-page-title{white-space:pre-line;max-width:1000px;margin:.7rem 0 1rem;color:var(--text-strong);font-family:var(--font-serif);font-size:clamp(2.55rem,6.6vw,6.7rem);font-weight:600;line-height:.9;letter-spacing:-.055em}
  .data-page-deck{max-width:800px;color:var(--text-body);font-size:clamp(1rem,1.5vw,1.25rem);line-height:1.65}
  .data-page-meta{display:flex;flex-wrap:wrap;gap:.55rem 1.4rem;margin-top:1.6rem;padding-top:1.15rem;border-top:1px solid var(--border-subtle);color:var(--text-muted);font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase}
  .data-page-tools{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.35rem}

  .data-page-layout{display:grid;grid-template-columns:minmax(190px,240px) minmax(0,1fr) minmax(180px,230px);gap:clamp(1rem,2.2vw,2.2rem);align-items:start;margin-top:clamp(1.4rem,3vw,3rem)}
  .data-page-toc,.data-page-aside{position:sticky;top:calc(var(--private-header-h) + 1rem);max-height:calc(100dvh - var(--private-header-h) - 2rem);overflow:auto;border:1px solid var(--border-standard);background:color-mix(in srgb,var(--surface-base) 86%,transparent);box-shadow:var(--shadow-raised)}
  .data-page-toc{padding:1rem}
  .data-page-aside{padding:1rem}
  .data-page-article{min-width:0}
  .prose-section{position:relative;margin-bottom:1rem;padding:clamp(1.35rem,3vw,2.6rem);border:1px solid var(--border-standard);background:linear-gradient(145deg,color-mix(in srgb,var(--surface-raised) 72%,transparent),var(--surface-base));box-shadow:var(--shadow-raised);overflow:hidden}
  .prose-section>header,.prose-section>.section-content{position:relative}
  .section-content{max-width:900px}
  .release-grid{display:grid;gap:1rem}
  .release-record{display:grid;grid-template-columns:minmax(180px,260px) minmax(0,1fr);gap:0;border:1px solid var(--border-standard);background:var(--surface-base);box-shadow:var(--shadow-raised);overflow:hidden}
  .release-art{position:relative;min-height:260px;background:var(--surface-recessed)}
  .release-art img{width:100%;height:100%;object-fit:cover;filter:grayscale(.18) saturate(.82);transition:transform 700ms var(--ease)}
  .release-record:hover .release-art img{transform:scale(1.025)}
  .release-copy{padding:clamp(1.1rem,2.5vw,2rem);min-width:0}
  .track-table-wrap{overflow:auto;border:1px solid var(--border-subtle);margin-top:1.25rem;scrollbar-color:var(--border-emphasis) var(--surface-recessed)}

  @media(max-width:1180px){.data-page-layout{grid-template-columns:minmax(180px,220px) minmax(0,1fr)}.data-page-aside{position:static;grid-column:1/-1;max-height:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;padding:0;background:var(--border-standard)}.data-page-aside>*{background:var(--surface-base);padding:1rem}}
  @media(max-width:860px){.data-page-hero{grid-template-columns:1fr}.data-page-visual{min-height:300px}.data-page-layout{grid-template-columns:1fr}.data-page-toc{position:relative;top:auto;max-height:none}.data-page-toc nav{display:flex;gap:.5rem;overflow:auto;scrollbar-width:none}.data-page-toc nav::-webkit-scrollbar{display:none}.data-page-toc a{flex:0 0 auto}.release-record{grid-template-columns:1fr}.release-art{min-height:320px;max-height:520px}.data-page-aside{grid-template-columns:1fr}}
  @media(max-width:540px){.data-page-main{padding-top:.75rem}.data-page-intro{padding:1.25rem}.data-page-visual{min-height:240px}.data-page-title{font-size:clamp(2.4rem,15vw,4.4rem)}.prose-section{padding:1.15rem}.release-art{min-height:260px}.data-page-tools .button{flex:1 1 auto}}
}

@layer components {
  .data-page-toc h2,.data-page-aside h2{margin:0 0 .85rem;color:var(--text-strong);font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase}
  .data-page-toc nav{display:grid;gap:.2rem}
  .data-page-toc a{position:relative;display:block;padding:.62rem .7rem;border-left:1px solid var(--border-subtle);color:var(--text-muted);font-size:.75rem;line-height:1.35;text-decoration:none;transition:color var(--fast),border-color var(--fast),background-color var(--fast)}
  body[data-route="discography"] .data-page-toc .data-toc-title-primary{display:block;color:inherit}
  body[data-route="discography"] .data-page-toc .data-toc-title-secondary{display:block;margin-top:.18rem;color:var(--text-muted);font-size:.82em;line-height:1.3}
  body[data-route="discography"] .data-page-toc a:hover .data-toc-title-secondary,body[data-route="discography"] .data-page-toc a.is-active .data-toc-title-secondary{color:color-mix(in srgb,var(--text-strong) 72%,var(--text-muted))}
  .data-page-toc a:hover,.data-page-toc a.is-active{color:var(--text-strong);border-left-color:var(--accent-fill);background:color-mix(in srgb,var(--accent-fill) 5%,transparent)}
  .data-page-toc a.is-active::before{content:"";position:absolute;left:-1px;top:.5rem;bottom:.5rem;width:2px;background:var(--accent-fill)}
  .data-page-aside dl{display:grid;gap:.85rem}.data-page-aside dt{color:var(--text-muted);font-family:var(--font-mono);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase}.data-page-aside dd{margin:.2rem 0 0;color:var(--text-body);font-size:.82rem;line-height:1.45}

  .prose-section h2{max-width:850px;margin:0 0 1.25rem;color:var(--text-strong);font-family:var(--font-serif);font-size:clamp(1.75rem,3.5vw,3rem);font-weight:600;line-height:1.02;letter-spacing:-.03em}
  .prose-section h3{margin:1.7rem 0 .75rem;color:var(--text-strong);font-size:1rem;letter-spacing:.02em}
  .prose-section p,.prose-section li{color:var(--text-body);font-size:clamp(.92rem,1.15vw,1.02rem);line-height:1.78}
  .prose-section p+p{margin-top:1rem}.prose-section ul,.prose-section ol{display:grid;gap:.55rem;margin:1rem 0 0 1.2rem}.prose-section li::marker{color:var(--accent-text)}
  .prose-section a{color:var(--text-strong);text-decoration-color:var(--accent-fill);text-underline-offset:.2em}
  .section-permalink{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;border:0;background:transparent;color:var(--text-muted);font-family:var(--font-mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;padding:0}.section-permalink:hover{color:var(--accent-text)}
  .data-callout{margin:1.25rem 0;padding:1rem 1.1rem;border-left:2px solid var(--accent-fill);background:color-mix(in srgb,var(--accent-fill) 5%,var(--surface-raised));color:var(--text-body);font-size:.9rem;line-height:1.65}
  .data-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:1.25rem 0;background:var(--border-subtle);border:1px solid var(--border-subtle)}
  .data-facts div{padding:1rem;background:var(--surface-base)}.data-facts strong{display:block;color:var(--text-strong);font-size:.9rem}.data-facts span{display:block;margin-top:.25rem;color:var(--text-muted);font-size:.72rem;line-height:1.45}
  .timeline{display:grid;gap:0;margin-top:1.2rem}.timeline-item{position:relative;display:grid;grid-template-columns:110px minmax(0,1fr);gap:1rem;padding:1rem 0;border-top:1px solid var(--border-subtle)}.timeline-item time{color:var(--accent-text);font-family:var(--font-mono);font-size:.65rem;letter-spacing:.08em}.timeline-item strong{display:block;color:var(--text-strong);font-size:.92rem}.timeline-item p{margin-top:.35rem;font-size:.84rem}

  .release-copy .release-type{color:var(--accent-text);font-family:var(--font-mono);font-size:.57rem;letter-spacing:.14em;text-transform:uppercase}.release-copy h2{margin:.45rem 0 .6rem;color:var(--text-strong);font-family:var(--font-serif);font-size:clamp(1.7rem,3vw,2.65rem);line-height:1}.release-meta{display:flex;flex-wrap:wrap;gap:.4rem .9rem;color:var(--text-muted);font-family:var(--font-mono);font-size:.55rem;letter-spacing:.08em;text-transform:uppercase}.release-copy>p{margin-top:1rem;color:var(--text-body);font-size:.9rem;line-height:1.65}
  .track-toggle{margin-top:1rem}
  .track-table{width:100%;min-width:620px;border-collapse:collapse;color:var(--text-body);font-size:.76rem}.track-table th,.track-table td{padding:.72rem .8rem;text-align:left;border-bottom:1px solid var(--border-subtle)}.track-table th{position:sticky;top:0;background:var(--surface-raised);color:var(--text-muted);font-family:var(--font-mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase}.track-table tr:last-child td{border-bottom:0}.track-table td:first-child{color:var(--accent-text);font-family:var(--font-mono)}
  .data-page-status{min-height:1.2rem;margin-top:.75rem;color:var(--text-muted);font-family:var(--font-mono);font-size:.58rem;letter-spacing:.05em}

  [data-locale-content]{display:none}html[lang="en-GB"] [data-locale-content="en"],html[lang="ja"] [data-locale-content="ja"]{display:block}
  html[lang="ja"] .data-page-title,html[lang="ja"] .prose-section h2{letter-spacing:-.025em;line-height:1.08}
  @media(max-width:540px){.data-facts{grid-template-columns:1fr}.timeline-item{grid-template-columns:1fr;gap:.35rem}.prose-section p,.prose-section li{font-size:.92rem}}
}

@layer utilities {
  .sr-only-focusable{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.sr-only-focusable:focus{position:fixed;left:.75rem;top:.75rem;z-index:9999;width:auto;height:auto;clip:auto;padding:.7rem 1rem;background:var(--surface-floating);color:var(--text-strong);border:1px solid var(--border-emphasis)}
}

@layer print {
  @media print{
    .data-page-main{padding:0}.data-page-hero{display:block;border:0;box-shadow:none}.data-page-visual,.data-page-tools,.data-page-toc,.data-page-aside,.section-permalink,.site-footer{display:none!important}.data-page-intro{padding:0;background:#fff}.data-page-title{font-size:30pt;color:#000}.data-page-deck,.data-page-meta{color:#222}.data-page-layout{display:block;margin:0}.prose-section,.release-record{break-inside:avoid;border:0;box-shadow:none;background:#fff;padding:1rem 0}.prose-section h2,.prose-section h3,.prose-section p,.prose-section li,.release-copy h2,.release-copy p{color:#000}.release-art{display:none}.track-table th,.track-table td{color:#000;border-color:#aaa}.track-table th{background:#eee}.track-table-wrap{overflow:visible;border-color:#aaa}.track-table{min-width:0;font-size:8pt}}
}
