/* Sound Paintings / v0.6.2 — one coherent archive layer, replacing 0.5.x patches. */
.archive-page{--archive-cream:#f5e6c7;--archive-ink:#0b0a08}
.archive-page .shell{width:min(calc(100% - 64px),1400px)}
.archive-page .site-header{background:#0b0a08;border-bottom:1px solid #504735}
.archive-page .header-grid{grid-template-columns:minmax(245px,1fr) auto auto;gap:22px;height:76px}
.archive-page .brand{gap:11px}
.archive-page .brand-mark{width:48px;height:48px;flex:0 0 48px;object-fit:contain;border-radius:9px;background:transparent;padding:0;box-shadow:none}
.archive-page .brand-copy{font:750 17px/1.1 var(--sans);letter-spacing:-.03em;text-transform:none;white-space:normal;max-width:none}
.archive-page .brand-copy small{font:10px/1.5 var(--mono);color:#d6c7af;letter-spacing:.07em;text-transform:uppercase;margin-top:5px;max-width:none;white-space:normal;overflow:visible}
.archive-page .nav{gap:18px}
.archive-page .nav a{font-size:11px;letter-spacing:.055em;color:#f5e6c7}
.archive-page .nav a.is-active{color:#f6d719}
.archive-page .nav .echo-link{background:#55c83c;color:#0b0a08;border:1px solid #55c83c}
.archive-page .mobile-nav{top:76px;max-height:calc(100dvh - 76px);overflow:auto}
.archive-page .archive-hero{background:#f08b25;overflow:hidden;border-bottom:9px solid #0b0a08;min-height:0}
.archive-page .archive-hero::before{clip-path:polygon(69% 0,100% 0,100% 100%,58% 100%);opacity:.15;transform:none;will-change:auto;background-size:32px 32px}
.archive-page .archive-hero::after{display:none}
.archive-page .hero-inner{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(30px,4vw,64px);min-height:0;padding:64px 0 58px;align-items:center}
.archive-page .hero-copy{container-type:inline-size;min-width:0;padding:0;isolation:isolate}
.archive-page .hero-topline{gap:8px;margin:0 0 34px;max-width:none}
.archive-page .hero-topline span{font:700 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:7px 9px;background:#0b0a08;color:#f5e6c7;border:1px solid #0b0a08;box-shadow:3px 3px 0 #a35c17}
.archive-page .hero-title{font-family:var(--display);font-weight:950;font-size:clamp(3.2rem,8vw,8.2rem);line-height:.87;letter-spacing:-.06em;max-width:none;width:auto;text-wrap:nowrap;margin:28px 0 35px 4px;transform:rotate(-5deg);transform-origin:45% 60%;filter:none;user-select:none;cursor:default}
@supports(font-size:1cqw){.archive-page .hero-title{font-size:17.4cqw}}
.archive-page .hero-title > span{display:block;white-space:nowrap}
.archive-page .hero-title .stroke{color:#f6d719;-webkit-text-stroke:1.6px #0b0a08;text-shadow:5px 6px 0 #0b0a08;margin-left:0}
.archive-page .hero-title .solid{color:#0b0a08;text-shadow:3px 3px 0 #f6d719;margin-left:.1em;margin-top:.065em}
.archive-page .hero-letter{display:inline-block;transform-origin:50% 70%}
.archive-page .hero-title.is-hovering .hero-letter{animation:sp-letter .78s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i)*35ms)}
@keyframes sp-letter{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-.035em) rotate(-3deg);color:#e65ca6}55%{transform:translateY(.016em) rotate(2deg)}75%{transform:rotate(-1deg)}}
.archive-page .hero-lede{position:relative;margin:36px 0 0;padding:21px 23px;font-size:clamp(1rem,1.45vw,1.3rem);line-height:1.62;font-weight:550;background:#0b0a08;color:#f5e6c7;border-left:6px solid #55c83c;border-top:0;border-bottom:0;box-shadow:6px 6px 0 #c67423;max-width:100%;text-shadow:none;backdrop-filter:none}
.archive-page .hero-meta{margin-top:24px;width:100%;background:#f5e6c7;border:1px solid #0b0a08;box-shadow:none;max-width:none}
.archive-page .hero-meta span{font-size:10px;color:#0b0a08;padding:10px 12px;border-right:1px solid #0b0a08;flex:1 1 auto;text-align:center}
.archive-page .hero-meta span:last-child{border-right:0}
.archive-page .hero-actions{margin-top:24px;gap:10px}
.archive-page .hero-actions .btn{font-size:10px;letter-spacing:.05em;padding:12px 14px;box-shadow:3px 3px 0 #bd6e22}
.living-art{position:relative;display:block;min-width:0;align-self:center;margin:0;overflow:visible;border:3px solid #0b0a08;background:#0b0a08;box-shadow:12px 12px 0 rgba(11,10,8,.23)}
.art-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border-bottom:1px solid #504335;background:#0b0a08;color:#f5e6c7;font:10px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase}
.art-caption span:first-child{color:#f6d719}
.living-field{width:100%;height:auto;aspect-ratio:auto;min-width:0;position:relative;overflow:hidden;background:#0b0a08;color:#f5e6c7}
.living-field canvas{display:none}
.living-field.is-live canvas{display:block}
.living-field .art-fallback{display:block;width:100%;height:auto;aspect-ratio:1;max-width:none}
.living-field.is-live .art-fallback{display:none}
/* Archive-only identity. */
.archive-footer{padding:0;background:#0b0a08;color:#f5e6c7;border-top:1px solid #514536}
.archive-footer-grid{display:grid;grid-template-columns:minmax(240px,1.35fr) repeat(3,minmax(125px,.75fr));gap:32px;padding:40px 0 34px}
.archive-lockup{display:flex;gap:14px;align-items:center}
.archive-logo-plate{display:block;flex:0 0 64px;width:64px;height:64px;padding:0;background:#0b0a08;overflow:hidden;border:1px solid #4b402f;border-radius:10px}
.archive-logo-plate img{display:block;width:100%;height:100%;object-fit:contain}
.archive-lockup-copy strong{display:block;font:700 16px/1.2 var(--sans);letter-spacing:-.02em}
.archive-lockup-copy small{display:block;font:10px/1.5 var(--mono);color:#d6c7af;margin-top:7px}
.archive-footer-bottom{display:flex;gap:20px;justify-content:space-between;align-items:center;border-top:1px solid #41382a;padding:18px 0 24px;font:10px/1.55 var(--mono);color:#c9baa1}
.archive-footer-bottom span{max-width:54ch}
/* Little geometric punctuation lives in its own space, not on top of copy. */
.archive-page .section-head .kicker{align-self:start;line-height:1.55}
.archive-page .section-head .kicker::after{content:"";display:block;width:52px;height:9px;margin-top:15px;background:radial-gradient(circle closest-side,#e65ca6 90%,transparent) 0 0/9px 9px,radial-gradient(circle closest-side,#f6d719 90%,transparent) 16px 0/9px 9px,radial-gradient(circle closest-side,#0b0a08 90%,transparent) 32px 0/9px 9px;background-repeat:no-repeat}
.archive-page .section.black .section-head .kicker::after{background-color:transparent;background-image:radial-gradient(circle closest-side,#e65ca6 90%,transparent),radial-gradient(circle closest-side,#f6d719 90%,transparent),radial-gradient(circle closest-side,#55c83c 90%,transparent)}
.archive-page .fact-card,.archive-page .sound-card,.archive-page .story-main{overflow:hidden}
.archive-page .story-main .kicker{margin-bottom:18px}
.archive-page .sound-card .num{opacity:.075;pointer-events:none}
.archive-page .section-head h2{line-height:.93;max-width:13ch}
.archive-page .story-main h3{line-height:.95}
.archive-page .track-note{background:#f5e6c7;color:#0b0a08;font-size:11px;text-transform:none;letter-spacing:.02em}
.archive-page .side-head{align-items:center}
.archive-page .side-head strong{line-height:1}
.archive-page .time-row{min-width:0;grid-template-columns:140px minmax(0,1fr) 180px}
.archive-page .time-row > div{min-width:0}
.archive-page .time-year{font-size:clamp(2.1rem,3.7vw,3.8rem);font-variant-numeric:tabular-nums;letter-spacing:-.045em}
.archive-page .time-row h3{line-height:1.07}
.archive-page .text-hero{padding-top:64px}
.archive-page .text-hero h1{font-size:clamp(3rem,8.5vw,8rem);line-height:.92;overflow-wrap:anywhere}
.archive-page .text-hero p{background:#f08b25}
.archive-page .prose h2{line-height:1.02;overflow-wrap:anywhere}
.archive-page .text-body .source-entry{min-width:0}
.archive-page .source-entry > div{min-width:0;overflow-wrap:anywhere}
.archive-page .text-nav{scroll-margin-top:96px}
.archive-page [id]{scroll-margin-top:96px}
.nojs-tracks{columns:2;line-height:1.8;padding:20px 44px;background:#0b0a08;color:#f5e6c7}
/* Native track modal. Closed dialogs have no invisible tab targets. */
.drawer{left:auto;margin:0;max-width:none;max-height:none;box-sizing:border-box;border-top:0;border-right:0;border-bottom:0;width:min(700px,92vw)}
.drawer:not([open]){display:none}
.drawer::backdrop{background:rgba(11,10,8,.34);backdrop-filter:blur(8px) saturate(.82);-webkit-backdrop-filter:blur(8px) saturate(.82);cursor:pointer}
.drawer h2{overflow-wrap:anywhere;line-height:.96}
.drawer-grid{grid-template-columns:90px minmax(0,1fr)}
.drawer-grid dd{overflow-wrap:anywhere}
@media(hover:hover) and (pointer:fine){.archive-page .brand:hover .brand-mark{transform:rotate(-4deg)}.archive-page .brand-mark{transition:transform .25s}.archive-page .fact-card:hover{transform:translateY(-3px)}.archive-page .time-row:hover{padding-left:0;background:rgba(245,230,199,.16)}}
@media(max-width:1150px){.archive-page .nav{display:none}.archive-page .menu-btn{display:block}.archive-page .header-grid{grid-template-columns:minmax(0,1fr) auto}.archive-page .hero-inner{gap:32px}.archive-footer-grid{grid-template-columns:repeat(3,1fr)}.archive-lockup{grid-column:1/-1}.archive-page .time-row{grid-template-columns:114px minmax(0,1fr)}.archive-page .time-tag{grid-column:2}}
@media(max-width:850px){.archive-page .shell{width:calc(100% - 40px)}.archive-page .hero-inner{grid-template-columns:1fr;padding-top:46px;gap:36px}.archive-page .hero-copy{max-width:670px;margin-inline:auto;width:100%}.living-art{max-width:630px;justify-self:center;width:100%}.archive-page .hero-title{font-size:clamp(3.3rem,12vw,7rem)}.archive-page .hero-lede{font-size:17px}.archive-page .hero-meta span{font-size:10px}}
@media(max-width:600px){.archive-page .shell{width:calc(100% - 28px)}.archive-page .header-grid{height:70px;gap:10px}.archive-page .brand-mark{width:41px;height:41px;flex-basis:41px}.archive-page .brand-copy{font-size:16px}.archive-page .brand-copy small{font-size:8.5px;letter-spacing:.02em}.archive-page .mobile-nav{top:70px;max-height:calc(100dvh - 70px)}.archive-page .hero-inner{padding-top:36px;padding-bottom:34px}.archive-page .hero-title{font-size:15.5vw;letter-spacing:-.055em;margin-top:22px;margin-bottom:32px;transform:rotate(-4deg)}.archive-page .hero-topline{margin-bottom:22px}.archive-page .hero-topline span{font-size:10px;padding:6px 8px}.archive-page .hero-lede{margin-top:25px;font-size:16px;padding:17px;border-left-width:4px;box-shadow:4px 4px 0 #c67423}.archive-page .hero-meta{display:grid;grid-template-columns:1fr 1fr;margin-top:22px}.archive-page .hero-meta span{border-bottom:1px solid #0b0a08;min-width:0}.archive-page .hero-meta span:nth-child(even){border-right:0}.archive-page .hero-meta span:nth-last-child(-n+2){border-bottom:0}.archive-page .hero-actions{display:grid;grid-template-columns:1fr;margin-top:21px}.living-art{box-shadow:6px 6px 0 rgba(11,10,8,.23);border-width:2px}.art-caption{font-size:9px;padding:11px 10px}.archive-page .time-row{grid-template-columns:76px minmax(0,1fr);gap:13px}.archive-page .time-year{font-size:30px}.archive-page .time-row h3{font-size:21px}.archive-page .time-row p{font-size:15px}.archive-page .time-tag{font-size:9px;max-width:100%;white-space:normal}.archive-footer-grid{grid-template-columns:1fr 1fr;gap:26px 18px}.archive-footer-bottom{align-items:start;flex-direction:column;gap:12px}.archive-page .section-head h2{font-size:clamp(2.5rem,12vw,4.5rem)}.nojs-tracks{columns:1}}
@media(max-width:360px){.archive-page .brand-copy{font-size:14px}.archive-page .brand-copy small{font-size:8px}.archive-page .brand{gap:8px}.archive-page .menu-btn{padding:8px}.archive-page .time-row{grid-template-columns:65px minmax(0,1fr);gap:10px}.archive-page .time-year{font-size:27px}.archive-page .time-row h3{font-size:19px}.archive-footer-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.archive-page .hero-title .hero-letter{animation:none!important;transition:none!important}.archive-page .brand-mark{transition:none!important}.motion-on .reveal,.motion-on .motion-item{opacity:1!important;filter:none!important;transform:none!important;transition:none!important}}

/* One page, one continuous scale. Unread section colors stay visible. */
.page-progress{--page-read:0%;position:relative;background:#0b0a08;color:#f5e6c7;border-top:1px solid #41392a}
.page-progress-caption{height:24px;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 16px;font:600 10px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.page-progress-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page-progress-percent{font-variant-numeric:tabular-nums;flex-shrink:0;min-width:4ch;text-align:right}
.page-progress-track{height:9px;position:relative;overflow:hidden;background:#2b251b;border-top:1px solid #796b51}
.page-progress-map,.page-progress-read{position:absolute;inset:0;pointer-events:none}
.page-progress-map{opacity:.4}
.page-progress-read{clip-path:inset(0 calc(100% - var(--page-read)) 0 0)}
.page-progress-segment{position:absolute;top:0;bottom:0;box-shadow:inset 1px 0 0 #796b51,inset 0 -1px 0 #8f7f60}
.page-progress-cursor{position:absolute;left:clamp(0px,var(--page-read),calc(100% - 2px));top:0;bottom:0;width:2px;background:#fffaf0;box-shadow:0 0 0 1px #0b0a08;pointer-events:none}
.archive-page .mobile-nav{top:var(--actual-header-height,76px);max-height:calc(100dvh - var(--actual-header-height,76px))}
.archive-page [id]{scroll-margin-top:calc(var(--actual-header-height,76px) + 16px)}
/* Translation, not rotation: canvas pointer mapping remains exact. No CSS
   transition can damp out the short impact impulse. */
.living-art{transform:translate3d(var(--scf-frame-x,0px),var(--scf-frame-y,0px),0);will-change:transform;transition:none}
@media(prefers-reduced-motion:reduce){.living-art{transform:none!important;will-change:auto}}
/* Controls must be easy to hit even while the artwork is moving. */
.living-art:has(.scf-toolbar:hover,.scf-audio:hover,.scf-toolbar :focus-visible,.scf-audio :focus-visible){transform:none;will-change:auto}

/* 0.7.0: separate tape instrument; archive behavior is unchanged. */
.archive-page .nav .lab-link{background:var(--yellow);color:var(--ink);padding:9px 11px;font-weight:800}
.archive-page .nav .lab-link:hover{background:var(--pink)}
.lab-archive-link{display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:2px solid var(--ink);margin-top:30px;padding-top:22px}
.lab-archive-link>span{font:800 1.2rem/1.3 var(--sans)}
@media(max-width:700px){.lab-archive-link{align-items:flex-start;flex-direction:column}.lab-archive-link .btn{max-width:100%;text-align:center}}
/* First-release album-first cue: listening precedes analysis or the Lab. */
.album-first-note{margin-top:22px;max-width:690px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 13px;align-items:baseline;padding:13px 15px;border:2px solid #0b0a08;background:rgba(246,215,25,.90);box-shadow:5px 5px 0 rgba(11,10,8,.28);color:#0b0a08}
.album-first-note .micro{grid-row:1/3;align-self:center;font-weight:950;white-space:nowrap}
.album-first-note strong{font:950 clamp(14px,1.35vw,18px)/1.15 var(--sans);letter-spacing:-.02em}
.album-first-note span:last-child{font:750 12px/1.35 var(--sans)}
@media(max-width:600px){.album-first-note{grid-template-columns:1fr;margin-top:18px;padding:12px 13px}.album-first-note .micro{grid-row:auto}.album-first-note span:last-child{font-size:11px}}


@media(max-width:600px){.drawer{width:min(94vw,700px);padding:24px 22px}.drawer h2{font-size:clamp(2.7rem,15vw,4.6rem)}}