/* MMLP V8: one poster, with a layered portrait and a playable album. */
.hero.hero-v8 {
  --hero-pad: clamp(30px,4.8vw,92px);
  height: max(940px,calc(100svh - 70px));
  max-height: 1120px;
  padding: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #eee6d4;
  background: #171915;
}
.hero.hero-v8::before,.hero.hero-v8::after { display:none; }
.h8-shell {
  position: relative;
  height: 100%;
  padding: 26px var(--hero-pad) 28px;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse at 83% 34%,#6c4b3321,transparent 64%);
}
.h8-shell::before { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(0deg,#171915 0%,#171915e6 6%,transparent 26%); }
.h8-mast {
  display:flex;
  justify-content:space-between;
  gap:24px;
  border-block:1px solid #b6aa8652;
  padding:12px 0;
  font:10px/1.8 'Courier New',monospace;
  letter-spacing:.1em;
  z-index:3;
}
.h8-stage { flex:1; min-height:0; }
.h8-editorial { position:relative; z-index:2; width:51%; padding-top:32px; }
.h8-editorial .eyebrow { font:10px/1.8 'Courier New',monospace; letter-spacing:.1em; color:#bdb19b; margin:0 0 18px; }
.hero.hero-v8 h1 { font-size:clamp(104px,8.9vw,160px); line-height:1.02; letter-spacing:-.02em; margin:0 0 24px; color:#eee7d7; max-width:none; }
.hero-v8 h1>span { display:block; white-space:nowrap; }
.hero.hero-v8 h1 .h8-the { font-size:.31em; line-height:1.2; letter-spacing:.07em; margin-bottom:6px; }
.hero-v8 h1 .h8-lp { color:#b78168; }
.h8-lp em { display:inline-block; margin-left:22px; vertical-align:middle; color:#eee5d1; font:normal .25em/1 Anton; letter-spacing:.025em; }
.h8-deck { font-size:clamp(22px,1.8vw,29px); line-height:1.85; font-weight:700; margin:0 0 17px; }
.h8-copy { font-size:12px; line-height:2; color:#bab5a8; margin:0; }
.h8-visual { position:absolute; z-index:0; width:min(68vw,calc(100svh - 70px),1120px); right:2.4vw; top:0; margin:0; pointer-events:none; }
.h8-photo-window { width:100%; aspect-ratio:1; position:relative; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 17%,#000 91%,transparent),linear-gradient(0deg,transparent,#000 12%,#000 96%,transparent); mask-composite:intersect; -webkit-mask-image:linear-gradient(90deg,transparent,#000 17%,#000 91%,transparent),linear-gradient(0deg,transparent,#000 12%,#000 96%,transparent); -webkit-mask-composite:source-in; }
.h8-photo-window img { position:absolute; max-width:none; width:107.142858%; height:auto; left:-2.142858%; top:-1.964286%; filter:sepia(.15) saturate(.68) contrast(1.04); }
.h8-visual figcaption { position:absolute; right:-6px; top:45%; writing-mode:vertical-rl; font:8px/1.8 'Courier New',monospace; letter-spacing:.1em; color:#9f9785; }
.h8-player { position:absolute; right:var(--hero-pad); bottom:114px; z-index:4; width:clamp(310px,23.5vw,360px); padding:0; border:0; }
.h8-player>.meta { font:9px/1.8 'Courier New',monospace; letter-spacing:.08em; margin:0 0 10px; color:#d8c9b0; text-shadow:0 1px 8px #000; }
.h8-player iframe { display:block; width:100%; height:352px; border:0; border-radius:12px; background:#242923; color-scheme:dark; box-shadow:0 15px 45px #0005; }
.h8-player>a { display:inline-block; font-size:11px; margin-top:12px; text-shadow:0 1px 8px #000; }
.h8-player .player-help { font-size:9px; line-height:1.8; color:#c5bda9; margin:6px 0 0; text-shadow:0 1px 8px #000; }
.h8-footer { position:relative; z-index:3; border-top:1px solid #b9ad8c55; padding-top:20px; display:flex; justify-content:space-between; gap:24px; align-items:center; }
.h8-record { display:flex; gap:14px; align-items:center; }
.h8-record img { width:44px; height:44px; object-fit:cover; }
.h8-record p { font:9px/1.8 'Courier New',monospace; margin:0; letter-spacing:.025em; }
.h8-record span { font-size:8px; color:#ada28b; }
.h8-label { font:9px/1.8 'Courier New',monospace; letter-spacing:.1em; color:#a99e87; }
.h8-footer>a { text-align:right; text-decoration:none; font:15px/1.5 Anton; }
.h8-footer>a span { display:block; font:9px/1.8 'MMLP Japanese',sans-serif; margin-top:4px; color:#b6ad98; }

/* Exactly three album destinations; identical typographic cards. */
.related-albums-v8 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:36px 0 58px; }
.album-v8 { display:flex; flex-direction:column; position:relative; min-width:0; overflow:hidden; padding:27px 25px 24px; border-block:1px solid #978b6e88; text-decoration:none; background:#c1b38d08; transition:background .2s; }
.album-v8:hover,.album-v8:focus-visible { background:#c1b38d18; }
.album-v8:focus-visible { outline:2px solid #ded1b3; outline-offset:5px; }
.album-v8-meta { font:9px/1.8 'Courier New',monospace; letter-spacing:.055em; color:#c3b696; }
.album-v8-year { font:clamp(86px,8vw,125px)/1 Anton; color:#b8aa8270; margin:24px 0 18px; }
.album-v8 h3 { font:clamp(25px,2.3vw,35px)/1.15 Anton; letter-spacing:.005em; margin:0 0 18px; }
.album-v8 p { font-size:12px; line-height:1.9; color:#ccc4b1; margin:0 0 28px; }
.album-v8-action { margin-top:auto; display:flex; justify-content:space-between; border-top:1px solid #8e846a66; padding-top:16px; font-size:11px; }

@media (min-width:761px) and (max-width:1100px) {
  .hero.hero-v8 { height:auto; max-height:none; }
  .h8-shell { min-height:1100px; }
  .h8-shell::before { background:linear-gradient(90deg,#171915f5 0%,#171915d9 34%,#17191580 48%,transparent 68%),linear-gradient(0deg,#171915 0%,#171915e6 6%,transparent 26%); }
  .h8-stage { min-height:900px; }
  .h8-editorial { width:54%; }
  .hero.hero-v8 h1 { font-size:clamp(75px,9.5vw,100px); }
  .h8-deck { font-size:22px; }
  .h8-copy { font-size:11px; }
  .h8-visual { width:min(92vw,800px); top:115px; right:-3vw; }
  .h8-player { width:340px; bottom:112px; }
  .h8-player>.meta { display:table; padding:3px 8px; background:#171915d9; }
  .h8-label { display:none; }
  .h8-visual figcaption { right:4vw; }
  .album-v8 { padding:23px 18px; }
  .related-albums-v8 { gap:18px; }
}
@media (max-width:760px) {
  .hero.hero-v8 { --hero-pad:24px; height:auto; max-height:none; }
  .h8-shell { padding:18px var(--hero-pad) 25px; }
  .h8-shell::before { display:none; }
  .h8-mast { font-size:8px; letter-spacing:.025em; gap:12px; padding:10px 0; }
  .h8-mast span:last-child { text-align:right; }
  .h8-stage { display:flex; flex-direction:column; gap:20px; padding:26px 0; }
  .h8-editorial { display:contents; }
  .h8-editorial .eyebrow { order:0; font-size:8px; letter-spacing:.04em; margin:0; }
  .hero.hero-v8 h1 { order:1; font-size:clamp(53px,14.5vw,65px); line-height:1.1; align-self:stretch; margin:0; }
  .hero-v8 h1>span { display:inline; }
  .hero.hero-v8 h1 .h8-the { font-size:.29em; vertical-align:top; margin-right:8px; }
  .hero-v8 h1>span:nth-child(3)::before { content:''; display:block; }
  .hero-v8 h1 .h8-lp { margin-left:12px; }
  .h8-lp em { display:block; margin:13px 0 0; font-size:21px; line-height:1.3; text-align:right; }
  .h8-visual { order:2; position:relative; top:auto; right:auto; width:calc(100% + 48px); align-self:center; max-width:430px; margin:-8px -24px 0; }
  .h8-photo-window { mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(0deg,transparent,#000 10%,#000 96%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(0deg,transparent,#000 10%,#000 96%,transparent); }
  .h8-visual figcaption { position:static; writing-mode:horizontal-tb; text-align:center; font-size:6px; margin-top:3px; }
  .h8-deck { order:3; font-size:21px; margin:0; }
  .h8-copy { order:4; font-size:11px; margin:0; }
  .h8-player { order:5; position:relative; right:auto; bottom:auto; width:100%; margin-top:5px; }
  .h8-player iframe { height:152px; }
  .h8-player>.meta { font-size:8px; }
  .h8-player .player-help { font-size:9px; }
  .h8-footer { gap:15px; align-items:start; padding-top:20px; }
  .h8-record { gap:10px; }
  .h8-record img { width:40px; height:40px; }
  .h8-record p { font-size:7px; }
  .h8-record span { font-size:6px; }
  .h8-label { display:none; }
  .h8-footer>a { font-size:12px; max-width:92px; }
  .h8-footer>a span { font-size:8px; }
  .related-albums-v8 { grid-template-columns:1fr; gap:0; margin:25px 0 40px; }
  .album-v8 { display:grid; grid-template-columns:70px 1fr; gap:12px 18px; padding:23px 0; background:transparent; border-bottom:0; }
  .album-v8:last-child { border-bottom:1px solid #978b6e88; }
  .album-v8:hover { background:transparent; }
  .album-v8-meta { grid-column:1/-1; font-size:8px; }
  .album-v8-year { grid-column:1; grid-row:2/4; font-size:70px; margin:0; }
  .album-v8 h3 { grid-column:2; font-size:27px; margin:0; }
  .album-v8 p { grid-column:2; margin:0; font-size:11px; }
  .album-v8-action { grid-column:2; font-size:10px; padding-top:11px; margin:0; }
}
@media (prefers-reduced-motion:reduce) { .album-v8 { transition:none; } }
@media print {
  .hero.hero-v8 { height:auto; background:white; color:black; }
  .h8-shell { display:block; }
  .h8-visual { position:relative; width:300px; top:auto; right:auto; }
  .h8-editorial { width:100%; }
  .hero.hero-v8 h1 { color:black; font-size:70px; }
  .h8-player { display:none; }
  .related-albums-v8 { display:block; }
  .album-v8 { break-inside:avoid; }
}