/* A studio poster with a working deck and a readable playlist. */
.music-section{position:relative;isolation:isolate;grid-template-columns:minmax(0,1.05fr) minmax(0,1.4fr) minmax(230px,.7fr);gap:30px;background:linear-gradient(to bottom,var(--orange) 0 67%,var(--cream) 67% 100%);padding:65px 4% 55px;align-items:center;overflow:hidden}
.music-section:before{content:'';position:absolute;inset:0;z-index:-1;opacity:.15;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23grain)' opacity='.35' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.listen-intro{align-self:center}.listen-intro>.label{display:block;letter-spacing:.18em;font-size:11px;padding-bottom:20px;border-top:1px solid #fbf2cb77;padding-top:15px}
.listen-intro h2{font-size:clamp(45px,5.1vw,100px);line-height:.93;letter-spacing:-.035em;margin:0 0 25px}.listen-intro h2 span{color:var(--green);white-space:nowrap;font-size:.9em}
.listen-intro .poster-tagline{color:var(--green);font:800 11px 'Courier New',monospace;letter-spacing:.12em;max-width:none;margin:0 0 25px}
.poster-book{display:inline-flex;background:var(--green);color:var(--cream);padding:17px 23px;border-radius:7px;font-weight:800;font-size:12px}
.music-section .deck{filter:drop-shadow(0 18px 12px #34210d66)}
.music-section .music-panel{background:var(--green);color:var(--cream);border:1px solid #fbf2cb60;padding:24px;box-shadow:0 10px 25px #32240e20;align-self:center}
.music-panel h3{font-size:30px;margin:18px 0}.music-meta{font-size:12px;flex-wrap:wrap}.music-panel input[type=range]{accent-color:var(--orange)}.music-track{font-size:14px;padding:15px 13px;border-radius:6px}.music-track[aria-current=true]{background:#f36f2540;border-color:var(--orange)}.music-panel #music-status{font-size:11px;opacity:.8}
@media(min-width:1700px){.music-section{gap:45px;padding-top:85px;padding-bottom:75px}.listen-intro h2{font-size:clamp(90px,5.2vw,180px)}.music-panel h3{font-size:40px}.music-track{font-size:18px}.poster-book{font-size:16px;padding:22px 30px}}
@media(max-width:1100px){.music-section{grid-template-columns:1fr 1.35fr;gap:30px}.listen-intro{grid-column:1;grid-row:1}.music-section .deck{grid-column:2;grid-row:1}.music-section .music-panel{grid-column:1/-1;width:min(700px,100%);justify-self:center}.listen-intro h2{font-size:clamp(45px,6.3vw,70px)}}
@media(max-width:700px){.music-section{grid-template-columns:1fr;padding:40px 6%;gap:25px;background:linear-gradient(to bottom,var(--orange) 0 57%,var(--cream) 57% 100%)}.listen-intro{grid-column:1;grid-row:1}.listen-intro h2{font-size:clamp(49px,11vw,74px)}.music-section .deck{grid-column:1;grid-row:2}.music-section .music-panel{grid-column:1;grid-row:3}.listen-intro .poster-tagline{font-size:10px}.music-section .music-panel{padding:20px}}
/* One orange paper surface with a handwritten sign-off beneath the playlist. */
.music-section{background:var(--orange);grid-template-columns:minmax(0,.65fr) minmax(0,1.5fr) minmax(240px,.8fr);column-gap:35px;row-gap:0}
.listen-intro{grid-column:1;grid-row:1/3}
.listen-intro>.label{border-top:0;padding-top:0}
.listen-intro h2{font-size:clamp(48px,5.5vw,110px);line-height:.95;margin:10px 0 35px}
.listen-intro p{font:400 15px/1.7 'Courier New',monospace;max-width:280px}
.music-section .deck{grid-column:2;grid-row:1/3}
.music-section .music-panel{grid-column:3;grid-row:1;background:#a643192b;border-color:#fbf2cb44;box-shadow:none}
.more-music{grid-column:3;grid-row:2;justify-self:end;color:var(--green);font:400 clamp(36px,3.5vw,66px)/.95 'Yellowtail',cursive;transform:rotate(-9deg);margin:20px 15px 0 0;text-align:center}
@media(max-width:1100px){.music-section{grid-template-columns:.8fr 1.3fr;gap:25px}.listen-intro{grid-column:1;grid-row:1}.music-section .deck{grid-column:2;grid-row:1}.music-section .music-panel{grid-column:1/3;grid-row:2}.more-music{grid-column:1/3;grid-row:3;font-size:48px;margin:0 20px 10px 0}.listen-intro h2{font-size:clamp(45px,6vw,70px)}}
@media(max-width:700px){.music-section{grid-template-columns:1fr;background:var(--orange)}.listen-intro{grid-column:1;grid-row:1}.music-section .deck{grid-column:1;grid-row:2}.music-section .music-panel{grid-column:1;grid-row:3}.more-music{grid-column:1;grid-row:4}.listen-intro h2{font-size:62px}}
/* Balance the listening layout and keep the deck at a controlled size. */
.music-section{grid-template-columns:minmax(220px,.8fr) minmax(0,1.35fr) minmax(260px,.9fr);gap:28px 40px;padding:55px 6%}
.music-section .deck{width:100%;max-width:800px;justify-self:center;align-self:center}
.listen-intro h2{font-size:clamp(48px,4.2vw,82px);line-height:1.04;letter-spacing:-.015em;margin:15px 0 25px}
.listen-intro p{font-size:15px;line-height:1.7;max-width:300px}
.more-music{color:var(--cream);font-size:clamp(34px,3vw,56px);margin:12px 15px 0 0;align-self:start}
.music-section .music-panel{align-self:end}
@media(min-width:1700px){.music-section{padding:65px 7%;column-gap:55px}.listen-intro h2{font-size:90px}.music-section .deck{max-width:950px}}
@media(max-width:1100px){.music-section{grid-template-columns:.8fr 1.3fr;gap:25px}.listen-intro h2{font-size:58px}.music-section .music-panel{align-self:center}}
@media(max-width:700px){.music-section{grid-template-columns:1fr;padding:40px 6%}.listen-intro h2{font-size:54px}.music-section .deck{max-width:520px}.more-music{font-size:42px}}
/* Stronger headline and a handwritten signature overlapping the deck. */
.listen-intro h2{font-size:clamp(72px,7.4vw,150px);line-height:.96;letter-spacing:-.025em}
.music-section .deck{grid-column:2;grid-row:1;align-self:end}
.music-section .music-panel{grid-row:1;align-self:center}
.more-music{grid-column:2;grid-row:2;justify-self:end;align-self:start;position:relative;z-index:3;color:var(--cream);font-size:clamp(58px,5vw,100px);line-height:.9;transform:rotate(-9deg);margin:-55px -25px 0 0;pointer-events:none;text-shadow:0 2px 3px #34210d25}
@media(min-width:1700px){.listen-intro h2{font-size:clamp(150px,6vw,210px)}.more-music{font-size:clamp(95px,4vw,145px);margin-top:-75px}}
@media(max-width:1100px){.listen-intro h2{font-size:clamp(68px,8.5vw,95px)}.music-section .deck{grid-column:2;grid-row:1}.more-music{grid-column:2;grid-row:2;font-size:66px;margin:-40px 0 10px}.music-section .music-panel{grid-column:1/-1;grid-row:3}}
@media(max-width:700px){.listen-intro h2{font-size:clamp(72px,16vw,105px)}.music-section .deck{grid-column:1;grid-row:2}.more-music{grid-column:1;grid-row:3;font-size:clamp(56px,12vw,76px);margin:-42px 4px 15px}.music-section .music-panel{grid-column:1;grid-row:4}}
/* Cream playback track matching the page palette. */
.music-panel #music-seek{appearance:none;-webkit-appearance:none;background:transparent;height:20px;cursor:pointer;accent-color:var(--cream)}
.music-panel #music-seek::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:var(--cream);border:0}
.music-panel #music-seek::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--cream);border:0;margin-top:-5px}
.music-panel #music-seek::-moz-range-track{height:6px;border-radius:999px;background:var(--cream);border:0}
.music-panel #music-seek::-moz-range-progress{height:6px;border-radius:999px;background:var(--cream)}
.music-panel #music-seek::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--cream);border:0}
/* Give the cassette deck a stronger contact shadow and soft depth. */
.music-section .deck{filter:drop-shadow(0 9px 5px #29160980) drop-shadow(0 24px 18px #29160966)}
@media(max-width:700px){.music-section .deck{filter:drop-shadow(0 6px 4px #29160980) drop-shadow(0 16px 12px #29160966)}}
/* Match the volume slider to the cream playback slider. */
.music-panel #music-volume{appearance:none;-webkit-appearance:none;background:transparent;height:20px;cursor:pointer;accent-color:var(--cream)}
.music-panel #music-volume::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:var(--cream);border:0}
.music-panel #music-volume::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--cream);border:0;margin-top:-5px}
.music-panel #music-volume::-moz-range-track{height:6px;border-radius:999px;background:var(--cream);border:0}
.music-panel #music-volume::-moz-range-progress{height:6px;border-radius:999px;background:var(--cream)}
.music-panel #music-volume::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--cream);border:0}