.story-page .page-intro{padding-bottom:35px}
.story-page .page-intro h1{max-width:1040px;font-size:clamp(56px,7vw,100px)}
.story-page h1 em,.story-page h2 em{color:var(--violet);font-style:normal}
.story-page .page-intro>p{max-width:760px;font-size:clamp(19px,2vw,25px);line-height:1.5}
.story-page .story-layout{grid-template-columns:1fr 1fr;gap:6%;padding-top:0;padding-bottom:45px}
.story-page .story-copy h2,.story-page .story-theory h2{font:400 clamp(35px,4vw,56px)/1.08 Georgia,serif;letter-spacing:-.045em;margin-bottom:24px}
.story-page .story-copy p{font-size:19px;line-height:1.6;max-width:530px;color:var(--muted)}
.story-page .story-record{position:relative;isolation:isolate;align-self:start;margin:-28px 0 0;padding:20px 10px 0;min-width:0}
.story-page .story-record:before{position:absolute;z-index:-1;inset:8%;content:"";background:url('/assets/paint-green-flyer.png') center/contain no-repeat;opacity:.35;transform:rotate(-10deg);pointer-events:none}
.story-page .record-orbit{position:absolute;inset:2% 3% 9%;border:1px solid #8748f740;border-radius:50%;transform:rotate(-14deg);pointer-events:none}
.story-page .record-orbit:before{position:absolute;inset:-10px 8px 10px -8px;border:1px dashed #8748f730;border-radius:50%;content:""}
.story-page .story-spin{display:block;position:relative;width:100%;aspect-ratio:1;margin:0;padding:0;border:0;border-radius:50%;background:transparent;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.story-page .story-spin:active{cursor:grabbing}
.story-page .story-spin:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
.story-page .story-spin img{display:block;width:100%;max-width:none;margin:0;clip-path:circle(47%);filter:drop-shadow(4px 12px 12px #0003);user-select:none;-webkit-user-drag:none;will-change:transform}
.story-page .story-record figcaption{text-align:center;padding:12px 0 0;color:var(--muted);font-size:14px;line-height:1.5}
.story-page .story-theory{position:relative;isolation:isolate;padding:55px 0 20px;border-top:1px solid #28252230}
.story-page .story-theory:before{position:absolute;z-index:-1;top:-25px;right:-5px;width:240px;height:200px;content:"";background:url('/assets/paint-purple-flyer.png') center/contain no-repeat;opacity:.2;pointer-events:none}
.story-page .theory-intro{display:grid;grid-template-columns:1fr 1fr;gap:6%;align-items:start}
.story-page .theory-intro p{font-size:18px;line-height:1.6;color:var(--muted);margin:0 0 18px}
.story-page .theory-intro p:first-child{color:var(--ink);font-weight:600}
.story-page .theory-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:25px}
.story-page .theory-cards article{min-width:0;padding:22px 24px 26px;border:1px solid #28252225;border-radius:14px;background:#f7f3ebaa;box-shadow:0 12px 30px #44304408}
.story-page .theory-cards h3{font-size:22px;letter-spacing:-.035em;margin:22px 0 12px}
.story-page .theory-cards p{color:var(--muted);font-size:16px;line-height:1.6}
.story-page .theory-cards article>div{display:flex;height:112px;align-items:center;justify-content:center;gap:9px;border-radius:8px;background:#e5dbed}
.story-page .sound-drawing i{display:block;width:7px;height:30px;border-radius:8px;background:#9871be}
.story-page .sound-drawing i:nth-child(2n){height:58px;background:#765499}.story-page .sound-drawing i:nth-child(3n){height:78px;background:#b599d2}
.story-page .theory-cards .color-drawing{background:#e5e1d6;gap:0}
.story-page .color-drawing i{display:block;width:35px;height:68px;transform:rotate(-12deg);background:#ad8cc7;box-shadow:1px 2px 0 #28252215}
.story-page .color-drawing i:nth-child(2){background:#869dc5;transform:rotate(-6deg)}.story-page .color-drawing i:nth-child(3){background:#8ab4ab;transform:rotate(0deg)}.story-page .color-drawing i:nth-child(4){background:#dcbd77;transform:rotate(6deg)}.story-page .color-drawing i:nth-child(5){background:#d58e9f;transform:rotate(12deg)}
.story-page .theory-cards .pair-drawing{background:#dce5df;gap:14px}
.story-page .pair-drawing i{display:block;width:62px;height:62px;border-radius:50%;background:radial-gradient(circle,#a885c6 0 24%,transparent 25%),repeating-radial-gradient(#2d2832 0 2px,#17131c 3px 5px);box-shadow:2px 5px 8px #28252220}
.story-page .pair-drawing i:last-child{background:radial-gradient(circle,#c291b1 0 24%,transparent 25%),repeating-radial-gradient(#2d2832 0 2px,#17131c 3px 5px)}.story-page .pair-drawing span{color:#657c6b;font-size:24px}
.story-page .theory-note{max-width:760px;margin:24px 0 0;color:var(--muted);font-size:14px;line-height:1.6}
@media(max-width:700px){.story-page .page-intro{padding-bottom:28px}.story-page .page-intro h1{font-size:clamp(48px,11.5vw,76px)}.story-page .story-layout{grid-template-columns:1fr;gap:24px;padding-bottom:28px}.story-page .story-record{grid-row:1;width:min(100%,420px);margin:-16px auto 0;padding-top:0}.story-page .story-copy p{font-size:18px}.story-page .theory-intro{grid-template-columns:1fr;gap:0}.story-page .theory-cards{grid-template-columns:1fr;gap:18px;margin-top:18px}.story-page .story-theory{padding:40px 0 10px}.story-page .theory-cards article{padding:20px 22px 24px}}
/* desktop: the title holds one line, sized to the column so it always fits */
@media(min-width:701px){.story-page .page-intro h1{max-width:none;white-space:nowrap;font-size:min(112px,calc((min(1300px,100vw - 90px)) / 12.4))}}