@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('./fonts/space-grotesk-400.ttf') format('truetype')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('./fonts/space-grotesk-500.ttf') format('truetype')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('./fonts/space-grotesk-600.ttf') format('truetype')}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0}
a{color:inherit;text-underline-offset:.22em}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid currentColor;outline-offset:5px}
a:hover{text-decoration-thickness:2px}
button{font:inherit}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
h1,h2,p{margin:0}
h1,h2{text-wrap:balance;font-weight:400}
p{text-wrap:pretty}
::selection{background:var(--accent);color:var(--ground)}
body{scrollbar-color:var(--ink) var(--ground)}
.skip{position:fixed;left:12px;top:-100px;z-index:20;padding:12px;background:var(--ground);color:var(--ink)}
.skip:focus{top:12px}
@media(max-width:600px){}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{animation:none!important;transition:none!important}
}
.study-foot{display:flex;justify-content:space-between;gap:24px;padding:26px 0;font:12px/1.5 'Space Grotesk',sans-serif}
.study-foot nav{display:flex;flex-wrap:wrap;gap:22px}
.study-foot a{display:inline-flex;min-height:44px;align-items:center}
.study-listen{display:inline-flex;align-items:center;gap:45px;min-height:48px;border-bottom:1px solid currentColor;padding:10px 0;text-decoration:none}
.study-listen:hover{text-decoration:underline}
.study-arrow{width:28px;height:20px;flex-shrink:0}
.study-credit{display:flex;gap:28px}
.study-credit a{display:inline-flex;align-items:center;gap:12px;min-height:44px}
.frames figure{margin:0 0 25px}
.frames figure img{display:block;width:100%;height:auto}
.frames figure figcaption{padding:12px;font-size:13px}
.enhanced .frames figure{margin:0}
.enhanced .frames figure[hidden]{display:none}
.frame-controls{display:none}
.enhanced .frame-controls{display:grid}
.frame-viewer:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.edge-control{display:flex;align-items:center;gap:16px;min-height:64px;border:0;border-radius:0;background:transparent;color:inherit;font:500 14px/1.4 'Space Grotesk',sans-serif;cursor:pointer;padding:18px 22px}
.edge-control:hover{text-decoration:underline;text-underline-offset:.3em}
.edge-control:focus-visible{outline:2px solid currentColor;outline-offset:-5px}
.frame-status{font-size:13px;line-height:1.5;font-variant-numeric:tabular-nums}
.frame-record{display:flex;gap:22px;align-items:center;max-width:650px}
.frame-record .record-cover{flex:0 0 104px}
.frame-record img{width:104px;height:104px;object-fit:contain}
.frame-record h2{font:500 24px/1.2 'Space Grotesk',sans-serif;letter-spacing:-.025em;max-width:29ch}
.frame-record p{font-size:13px;margin-top:12px}
.frame-record .study-listen{font-size:15px;margin-top:13px;gap:25px}
.no-enhancement-note{font-size:13px}
.enhanced .no-enhancement-note{display:none}
@media(max-width:700px){.study-foot{flex-direction:column;gap:4px}
.frame-record{gap:18px;align-items:start}
.frame-record .record-cover{flex-basis:82px}
.frame-record img{width:82px;height:82px}
.frame-record h2{font-size:22px}
.frame-record p{font-size:12px}
.frame-record .study-listen{font-size:14px;gap:15px}
.edge-control{font-size:13px;padding:16px 12px;gap:10px}
.study-arrow{width:24px}
.frame-status{font-size:12px}
.study-credit{gap:24px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{animation:none!important;transition:none!important}
}
body{--ground:#af482d;--ink:#f6ead8;--accent:#f6ead8;--rule:#e9b7a2;background:var(--ground);color:var(--ink);font:16px/1.6 'Space Grotesk',sans-serif}
.composition-shell{max-width:1600px;margin:auto;padding:30px 5vw 0}
.composition-intro{display:flex;justify-content:space-between;gap:45px;align-items:start}
.composition-intro p{max-width:37ch;font-size:14px}
.composition-intro .study-listen{font-size:18px;white-space:nowrap}
.free-stage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 18px;position:relative;margin-top:45px;isolation:isolate}
.free-stage:before{content:'';grid-column:3/12;grid-row:2;background:#381c3e;margin:48px 0 -28px;z-index:-1}
.free-stage h1{grid-column:2/13;grid-row:1;font:600 clamp(100px,19.5vw,310px)/.85 'Space Grotesk',sans-serif;letter-spacing:-.04em;position:relative;z-index:1;justify-self:start}
.free-main{grid-column:4/13;grid-row:2;margin-top:-35px;position:relative;z-index:2}
.enhanced .free-main{aspect-ratio:1.55}
.enhanced .free-main .frames,.enhanced .free-main figure{height:100%}
.enhanced .free-main img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.enhanced .free-main figcaption{display:none}
.free-main figure figcaption{font-size:13px;padding-left:0}
.free-peek{display:none;grid-column:1/4;grid-row:2;align-self:end;position:relative;z-index:3;margin:0 0 -55px}
.enhanced .free-peek{display:block}
.free-peek img{width:100%;aspect-ratio:.8;object-fit:cover;border:7px solid #af482d}
.free-peek figcaption{font-size:12px;margin:5px 0 0 7px}
.free-controls{grid-column:4/13;grid-row:3;grid-template-columns:1fr 1fr 1fr;position:relative;z-index:3;margin-top:30px;align-items:center}
.free-controls .edge-control{padding:18px 0;color:#f6ead8;justify-content:start;min-height:64px}
.free-controls .edge-control:last-child{justify-content:end}
.free-controls .frame-status{text-align:center}
.composition-bottom{display:grid;grid-template-columns:1fr 1.6fr;gap:10vw;margin:100px 0 45px;align-items:center}
.composition-bottom .study-credit{align-self:end}
.composition-record{justify-self:end}
.composition-footer{border-top:1px solid var(--rule)}
.composition-bottom .frame-record{max-width:600px}
.free-stage .no-enhancement-note{grid-column:4/13;grid-row:3;padding-top:20px}
@media(max-width:700px){.composition-shell{padding:25px 20px 0}
.composition-intro{flex-direction:column;gap:18px}
.composition-intro p{font-size:14px;max-width:37ch}
.composition-intro .study-listen{font-size:17px;justify-content:space-between;width:100%}
.free-stage{margin-top:40px;gap:0 8px}
.free-stage h1{grid-column:1/13;font-size:29vw;letter-spacing:-.04em}
.free-stage:before{grid-column:1/12;margin:20px 0 -22px}
.free-main{grid-column:2/13;margin-top:-12px}
.enhanced .free-main{aspect-ratio:.92}
.free-peek{grid-column:1/5;grid-row:3;margin:-52px 0 0;align-self:start}
.free-peek img{aspect-ratio:.8;border-width:4px}
.free-peek figcaption{margin-left:4px}
.free-controls{grid-column:1/13;grid-row:4;grid-template-columns:1fr 1fr;margin-top:25px}
.free-controls .frame-status{grid-column:1/3;grid-row:1;margin-left:35%;text-align:right;min-height:40px;padding:5px 0 12px}
.free-controls .edge-control{grid-row:2;font-size:13px;gap:12px;padding:12px 0}
.free-controls .edge-control:last-child{grid-column:2}
.composition-bottom{grid-template-columns:1fr;gap:25px;margin:40px 0 25px}
.composition-record{justify-self:start;grid-row:1}
.composition-bottom .study-credit{grid-row:2}
.free-stage .no-enhancement-note{grid-column:2/13}
}
.composition-bottom{margin-top:140px;margin-bottom:75px}
.frame-record{gap:30px}
.frame-record .record-cover{flex-basis:144px}
.frame-record img{width:144px;height:144px}
.frame-record .record-cover img{max-width:none}
@media(max-width:700px){.composition-bottom{margin-top:65px;margin-bottom:45px;gap:34px}
.frame-record{gap:22px}
.frame-record .record-cover{flex-basis:104px}
.frame-record img{width:104px;height:104px}
}

.skip{
  position:absolute;
  top:0;
  left:0;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.skip:focus{ top:0; }
.skip:focus-visible{
  position:relative;
  top:auto;
  left:auto;
  display:block;
  width:fit-content;
  max-width:calc(100% - 24px);
  height:auto;
  margin:12px;
  padding:12px;
  overflow:visible;
  clip-path:none;
  white-space:normal;
}

/* Preserve the ordinary composition; let enlarged text reflow within its grid. */
.free-stage h1 { min-width:0; max-width:100%; overflow-wrap:anywhere; }
.composition-intro > *, .composition-bottom > *, .frame-record > div { min-width:0; }
.study-listen { max-width:100%; flex-wrap:wrap; overflow-wrap:anywhere; }
.composition-intro .study-listen { white-space:normal; }
.edge-control { min-width:0; flex-wrap:wrap; overflow-wrap:anywhere; }
.frame-record h2, .frame-record p { overflow-wrap:anywhere; }
.study-credit { flex-wrap:wrap; }
@media(max-width:700px) { .frame-record { max-width:100%; } }
/* Stack artwork and text only when enlarged type needs more reading width. */
.frame-record { flex-wrap:wrap; }
.frame-record > div { flex:1 1 18ch; min-inline-size:min(100%,18ch); }

/* Historical context beneath the collaborator links. */
.collaboration-note { margin-top:24px; max-width:38ch; overflow-wrap:anywhere; }
.collaboration-tagline { font-size:14px; font-weight:500; line-height:1.6; }
.collaboration-genres { margin-top:7px; font-size:13px; line-height:1.6; }

/* Secondary listening destination, directly beneath the unchanged album link. */
.intro-listening { min-width:0; max-width:100%; }
.track-listen { display:flex; align-items:center; min-height:44px; width:fit-content; max-width:100%; margin-top:4px; font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
@media(max-width:700px) { .intro-listening { width:100%; } }