/* Six animated sleeves; the existing audio player remains the source of state. */
.record-index{display:flex;gap:8px;isolation:isolate;border:0;padding:6px 0 10px}
.record-index button{flex:1 1 0;min-width:0;min-height:144px;overflow:hidden;isolation:isolate;justify-content:flex-start;gap:17px;padding:16px 15px 20px;border:0!important;border-bottom:1px solid var(--rule)!important;background:transparent;color:var(--paper);transition:flex .85s cubic-bezier(.2,.7,.2,1),background .8s,color .8s,box-shadow .8s}
.record-index button[aria-current=true]{flex:1.4 1 0;background:color-mix(in srgb,var(--panel) 80%,var(--black));box-shadow:inset 0 -3px 0 var(--accent)}
.record-index button:hover,.record-index button:focus-visible{transform:none;color:var(--paper);background:var(--panel)}
.record-index button:focus-visible{outline-offset:-3px}
.record-index button:before{content:'';position:absolute;inset:auto 0 0!important;height:2px!important;background:var(--accent)!important;transform:scaleX(0);transform-origin:left;transition:transform .85s;animation:none!important}
.record-index button[aria-current=true]:before,.record-index button:hover:before,.record-index button:focus-visible:before{transform:scaleX(1)}
.record-index button:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 35%,color-mix(in srgb,var(--paper) 8%,transparent) 50%,transparent 65%);transform:translateX(-130%);opacity:1;transition:none;pointer-events:none}
.record-index button:hover:after,.record-index button:focus-visible:after{transform:translateX(130%);transition:transform 1.5s}
.record-index .record-art{position:absolute;inset:-42% -24% -30% 22%;z-index:-2;mask:var(--record-being) center/contain no-repeat;-webkit-mask:var(--record-being) center/contain no-repeat;background:var(--paper);opacity:.07;transform:translateY(10px) rotate(-9deg) scale(1.06);transition:transform 1.6s cubic-bezier(.2,.7,.2,1),opacity 1.1s;pointer-events:none}
.record-index button[aria-current=true] .record-art{opacity:.17;transform:translateY(-3px) rotate(-4deg) scale(1.08)}
.record-index button:hover .record-art,.record-index button:focus-visible .record-art{opacity:.2;transform:translateY(-10px) rotate(0) scale(1.15)}
.record-index .record-meta{display:flex;justify-content:space-between;align-items:baseline;width:100%;gap:8px}
.record-index .record-number{font:900 28px/1 var(--display);letter-spacing:.01em;color:var(--muted)}
.record-index .record-duration{font:400 12px/1 var(--mono);letter-spacing:.05em;color:var(--muted);opacity:.75}
.record-index button strong{position:relative;max-width:14ch;padding-right:12px;font:900 clamp(22px,1.9vw,36px)/1.02 var(--display);letter-spacing:.005em;text-wrap:balance;transition:transform .8s}
.record-index button:hover strong,.record-index button:focus-visible strong{transform:translateX(3px)}
.record-index .record-cue{position:absolute;right:12px;bottom:14px;font:400 23px/1 var(--mono);color:var(--accent);opacity:0;transform:translate(-5px,5px);transition:opacity .8s,transform .8s}
.record-index button[aria-current=true] .record-cue,.record-index button:hover .record-cue,.record-index button:focus-visible .record-cue{opacity:1;transform:none}
body[data-playing=true] .record-index button[aria-current=true]:before{animation:sleeve-signal 4s ease-in-out infinite!important}
@keyframes sleeve-signal{0%,100%{opacity:1;transform:scaleX(1)}50%{opacity:.5;transform:scaleX(.55)}}
@media(hover:hover) and (min-width:1001px){.record-index button:hover{flex:1.5 1 0}}
@media(min-width:701px){.hero{height:clamp(280px,calc(100svh - 538px),740px)}}
@media(min-width:701px) and (max-width:1100px){.record-index{gap:5px}.record-index button{padding-inline:10px;min-height:144px}.record-index button strong{font-size:24px}.record-index button[aria-current=true]{flex:1.2 1 0}.record-index .record-duration{font-size:11px}}
@media(max-width:700px){.record-index{overflow-x:auto;gap:8px;padding-block:4px 8px;scroll-snap-type:x mandatory}.record-index button,.record-index button[aria-current=true]{flex:0 0 182px;min-height:128px;padding:12px 14px 18px;scroll-snap-align:start}.record-index button strong{font-size:28px}.record-index .record-number{font-size:25px}.hero{height:clamp(250px,calc(100svh - 454px),560px)}}
/* Cyan stays an isolated highlight in the four-ink scheme. */
[data-scheme=cyberpunk] .record-index button{background:transparent;color:var(--paper)}
[data-scheme=cyberpunk] .record-index button[aria-current=true]{background:var(--paper);color:var(--black)}
[data-scheme=cyberpunk] .record-index button[aria-current=true] .record-art{background:var(--black)}
[data-scheme=cyberpunk] .record-index button[aria-current=true] .record-meta span{color:var(--black)}
[data-scheme=cyberpunk] .record-index button:hover{background:var(--accent);color:#000}
[data-scheme=cyberpunk] .record-index button:hover .record-art{background:#000}
[data-scheme=cyberpunk] .record-index button:hover .record-meta span,[data-scheme=cyberpunk] .record-index button:hover .record-cue{color:#000}
[data-scheme=cyberpunk] .record-index button:after{content:none}
html[data-motion=off] .record-index button:before,html[data-hidden=true] .record-index button:before{animation:none!important}
@media(prefers-reduced-motion:reduce){.record-index button:before{animation:none!important}}

/* September 28: a wider view of the room, using real layout dimensions.
   Wide-screen composition is about 85%; readable controls and microtype keep floors.
   No zoom/transform wrapper: About follows the shorter player in normal flow. */
@media(min-width:1200px){
  html{--bar-height:96px}
 .site-shell{width:85%;max-width:1870px}
  .site-shell>.topbar{height:96px;min-height:96px;padding-inline:3.4vw;gap:27px}
  .site-shell .topbar>.brand{width:96px;height:96px}
  .site-shell .topbar>.brand .stareye{width:96px;height:96px}
 .hero{height:clamp(238px,calc(85svh - 457.3px),629px)}
 .hero-name{width:43px}.hero-name span{font-size:27px}
 .hero-copy{left:max(70px,3.4vw);width:calc(65% - 43px)}
 .eyebrow{font-size:14px;margin-bottom:20px}
 .record-title{font-size:clamp(68px,min(9.775vw,29cqh),170px);max-width:833px}
 .listening-desk{padding-inline:2.55vw}
 .transport-row{min-height:148px;grid-template-columns:104px minmax(0,1fr) 77px;gap:27px;padding-block:14px}
 .transport-row .play-button{width:104px;height:104px;gap:8px}
 .transport-row .play-symbol{font-size:27px}.transport-row .play-word{font-size:14px}
 .transport-row .seek-caption{font-size:clamp(16px,1.36vw,24px);min-height:29px}
 .transport-row .seek-caption span:last-child,.transport-row .seek-times{font-size:14px}
 .transport-row #seek{height:44px}
 .signal-glyph .stareye{width:54px;height:54px}
 .record-index{gap:7px;padding-block:5px 9px}
 .record-index button{min-height:123px;gap:12px;padding:13px 12px 16px}
 .record-index .record-number{font-size:24px}
 .record-index .record-duration{font-size:11px}
 .record-index button strong{font-size:clamp(20px,1.615vw,31px);padding-right:10px}
 .record-index .record-cue{right:10px;bottom:12px;font-size:20px}
 .platform-dock{min-height:80px;padding-block:10px;gap:15px}
 .platform-card{min-height:60px;padding:15px 12px;gap:20px}
 .platform-action{font-size:14px}.platform-arrow{font-size:22px}
 .platform-card .suno-logo{height:26px}
 .platform-card .youtube-mark{width:131px;height:28px}
 .platform-card .youtube-mark .youtube-logo{height:55px!important}
 .about-board{min-height:724px;height:85svh;max-height:1105px}
 .about-board .about-copy{top:20%;max-width:561px}
 .about-copy h2.about-wordmark{max-width:561px;margin-bottom:26px}
 .identity-record{max-width:476px;column-gap:20px}
 .identity-record>div{padding-block:11px 13px}
 .identity-record dt{margin-bottom:4px}
 .identity-record dd{font-size:clamp(16px,1.2325vw,23px)}
 .identity-record .identity-person dd,.identity-record .identity-sound dd{font-size:clamp(22px,1.87vw,34px)}
 .contact-link{min-height:55px;padding-block:10px;gap:clamp(28px,4.25vw,77px);font-size:clamp(20px,1.7vw,27px)}
}