/* Crate to Wall, takes 3 and 4 (v6 tilt left, v7 tilt back). One stylesheet; the
   scene's data-crate attribute picks the crate. The features are a crate of dividers. */
:root{--whitewash:#e3dacb;--green-wall:#3b4838;--after-wall:#211b17;--raised:#f7f5f0;--sunk:#e9e5dd;--tab-line:#ded8ce;--faint:#8b857c}
.header{position:absolute;left:0;right:0;top:0}

/* ---------- Opening scene ---------- */
.scene{position:relative;background:var(--whitewash)}
.scene-pin{position:relative;height:100svh;overflow:hidden;--fg:var(--ink);--fg-muted:#62574d;color:var(--fg)}
.scene-pin.is-dark{--fg:#f3ebde;--fg-muted:#c3b6a3}
.paint-walls,.paint-wall{position:absolute;inset:0}
.paint-wall{will-change:clip-path}
.is-whitewash{background:
  radial-gradient(ellipse 70% 70% at 30% 20%,rgba(255,255,255,.4),rgba(255,255,255,0) 70%),
  repeating-linear-gradient(90deg,rgba(0,0,0,0) 0 116px,rgba(120,100,72,.14) 116px 118px,rgba(255,255,255,.25) 118px 119px,rgba(0,0,0,0) 119px 236px),
  var(--whitewash)}
.is-green{background:radial-gradient(ellipse 60% 60% at 70% 30%,rgba(255,255,255,.07),rgba(255,255,255,0) 70%),var(--green-wall)}
.is-after{background:radial-gradient(ellipse 50% 50% at 72% 64%,rgba(232,170,90,var(--warm,0)),rgba(232,170,90,0) 70%),var(--after-wall)}
html.motion .paint-wall:not(:first-child){clip-path:inset(0 0 100% 0)}
.scene-inner{position:relative;z-index:2;height:100%;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center;gap:40px;padding-top:44px}
.scene-copy{display:grid;align-items:center}
.scene-copy>*{grid-area:1/1}
.hero-copy h1{font-size:clamp(50px,5.6vw,86px);max-width:7.6em}
.hero-lede{font-size:20px;line-height:1.55;max-width:33ch;margin:28px 0 34px;color:var(--fg-muted)}
.hero-actions{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.beat{max-width:470px}
.beat h2{font-size:clamp(40px,4.4vw,64px);line-height:1.02;letter-spacing:-.045em;margin-bottom:18px;color:var(--fg);transition:color .5s}
.beat p{font-size:19px;line-height:1.55;max-width:30ch;color:var(--fg-muted);transition:color .5s}
html.motion .beat{visibility:hidden}
.scene-stage{--s:clamp(180px,min(18vw,28svh),250px);position:relative;height:min(84svh,780px);perspective:1500px;perspective-origin:50% 28%}
[data-crate=left] .scene-stage{--s:clamp(190px,min(19vw,30svh),270px)}
.room-frame{position:absolute;z-index:1;left:50%;top:0;height:100%;aspect-ratio:840/1481;translate:-50% 0;border-radius:12px;overflow:hidden;box-shadow:0 50px 90px -40px rgba(0,0,0,.6),0 12px 30px -10px rgba(0,0,0,.25)}
html.motion .room-frame{opacity:0;clip-path:inset(0 0 57% 0 round 12px)}
.room-frame>img,.room-layer,.room-layer>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
html.motion .room-frame [data-room]:not(:first-child){clip-path:inset(0 0 100% 0)}
.room-dim{position:absolute;inset:0;background:#120e0b;opacity:0;pointer-events:none}
.now-overlay{position:absolute;left:17.33%;top:50.235%;width:27.363%;height:14.6685%;perspective:400px}
/* The room render has a cover printed in this frame. Paint the wall over it (matched to the
   render either side once the lamp is on), so mid-flip you see the record turn in an empty
   frame rather than a second copy behind it. */
.now-overlay::before{content:'';position:absolute;inset:-1px;background:linear-gradient(90deg,#1b1610,#221c16)}
.flip{position:absolute;inset:0;transform-style:preserve-3d}
.flip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;backface-visibility:hidden}
.flip-b{transform:rotateY(180deg)}
.lamp-glow{position:absolute;left:91%;top:78%;width:160%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(255,210,140,.75),rgba(255,180,90,.25) 22%,rgba(255,170,80,0) 55%);mix-blend-mode:screen;opacity:0;pointer-events:none}
/* The roller carries the colour it's putting on the wall: the new one on the way down,
   the old one on the way back up. Registered so it can re-ink smoothly. */
@property --paint{syntax:'<color>';inherits:true;initial-value:#41503f}
.roller{position:absolute;left:50%;top:0;z-index:40;width:calc(min(84svh,780px)*.567*1.18);height:46px;translate:-50% -50%;pointer-events:none;opacity:0;transition:--paint .35s}
.roller-cyl{position:absolute;left:0;right:0;top:0;height:46px;border-radius:23px;background:
  linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 35%,rgba(0,0,0,0) 60%,rgba(0,0,0,.28)),
  repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 2px,rgba(255,255,255,.04) 2px 5px),
  var(--paint,#41503f);background-position:0 0,var(--nap,0) 0,0 0;box-shadow:0 10px 18px -6px rgba(0,0,0,.45)}
.roller-cyl::before,.roller-cyl::after{content:'';position:absolute;top:8px;bottom:8px;width:7px;border-radius:4px;background:linear-gradient(#e4e0d8,#9a958c)}
.roller-cyl::before{left:-5px}.roller-cyl::after{right:-5px}
.roller-arm{position:absolute;right:-12px;top:20px;width:64px;height:70px;border:5px solid #b9b4ab;border-left:0;border-bottom:0;border-radius:0 18px 0 0}
.roller-handle{position:absolute;right:30px;top:86px;width:22px;height:120px;border-radius:11px;background:linear-gradient(90deg,#7a5232,#a77a4f 45%,#6d482b);box-shadow:0 10px 16px -6px rgba(0,0,0,.45)}

/* Tilt back: a 3D crate. JS places every face and sleeve by its centre in one shared space. */
.world{position:absolute;inset:0;z-index:5;transform-style:preserve-3d;pointer-events:none}
.cr,.fly-sleeve{position:absolute;left:0;top:0;transform-origin:50% 50%;will-change:transform}
.cr-front{width:calc(var(--s)*1.18);height:calc(var(--s)*.56);border-radius:3px;
  background:
    linear-gradient(90deg,rgba(0,0,0,.18) 0 5%,rgba(0,0,0,0) 5% 95%,rgba(0,0,0,.18) 95%),
    linear-gradient(180deg,rgba(255,255,255,.2) 0 2%,rgba(0,0,0,0) 2% 45%,#2a1c13 45% 53%,rgba(255,255,255,.12) 53% 54.5%,rgba(0,0,0,0) 54.5% 97%,rgba(0,0,0,.25) 97%),
    repeating-linear-gradient(90deg,rgba(80,45,20,0) 0 9px,rgba(80,45,20,.08) 10px 11px,rgba(80,45,20,0) 12px 23px,rgba(255,230,190,.06) 24px 25px),
    linear-gradient(100deg,#a8713f,#c08a55 30%,#a26c3c 60%,#b9844f)}
.crate-handle{position:absolute;left:50%;top:13%;width:28%;height:16%;translate:-50% 0;border-radius:40px;background:#24170f;box-shadow:inset 0 3px 5px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.18)}
.cr-back{width:calc(var(--s)*1.18);height:calc(var(--s)*.56);border-radius:3px;background:linear-gradient(#4a3121,#3a2618);box-shadow:inset 0 2px 0 rgba(255,255,255,.08)}
.cr-side{width:calc(var(--s)*.62);height:calc(var(--s)*.56);background:linear-gradient(90deg,#5b3d28,#46301f)}
.cr-bottom{width:calc(var(--s)*1.18);height:calc(var(--s)*.62);background:#2d1f15}
.fly-sleeve{width:var(--s);z-index:5}
.crate-shadow{position:absolute;z-index:2;left:50%;top:calc(93% - var(--s)*.06);width:calc(var(--s)*1.4);height:calc(var(--s)*.2);translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(36,27,23,.34),rgba(36,27,23,0))}
html:not(.motion) .world,html:not(.motion) .crate-shadow,html:not(.motion) .roller{display:none}
/* The intro fades these in. Until its script runs they stay hidden, or a reload flashes the
   sleeves stacked at the top of the stage and the copy before it fades in. */
html.motion .scene-stage,html.motion [data-fade],html.motion .scene-cue>*{visibility:hidden}
.scene-cue{position:absolute;z-index:3;left:max(var(--gutter),calc(50% - var(--max)/2));bottom:24px;display:flex;align-items:center;gap:12px;margin:0;font-size:13px;color:var(--muted)}
.scene-cue em{font-style:normal}
.scene-cue span{position:relative;width:1px;height:34px;background:rgba(36,27,23,.18);overflow:hidden}
.scene-cue span::after{content:'';position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--red);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{to{top:100%}}
html:not(.motion) .scene-cue{display:none}


/* Tilt left: a 2D crate. Back and front are separate layers so the sleeves sit between them. */
.crate2d{position:absolute;left:50%;bottom:3%;width:calc(var(--s)*1.24);height:calc(var(--s)*.86);margin-left:calc(var(--s)*-.62);transform-origin:0% 100%;pointer-events:none;will-change:transform}
.crate2d.is-back{z-index:1}
.crate2d.is-front{z-index:20}
.crate-back{position:absolute;left:2%;right:2%;top:0;bottom:calc(var(--s)*.08);border-radius:6px 6px 0 0;background:linear-gradient(#3b271a,#2a1c13);box-shadow:inset 0 2px 0 rgba(255,255,255,.06)}
.crate-front{position:absolute;left:0;right:0;bottom:0;height:calc(var(--s)*.56);border-radius:4px;
  background:
    linear-gradient(90deg,rgba(0,0,0,.18) 0 5%,rgba(0,0,0,0) 5% 95%,rgba(0,0,0,.18) 95%),
    linear-gradient(180deg,rgba(255,255,255,.18) 0 1.5%,rgba(0,0,0,0) 1.5% 45%,#2a1c13 45% 53%,rgba(255,255,255,.12) 53% 54.5%,rgba(0,0,0,0) 54.5% 97%,rgba(0,0,0,.25) 97%),
    repeating-linear-gradient(90deg,rgba(80,45,20,0) 0 9px,rgba(80,45,20,.08) 10px 11px,rgba(80,45,20,0) 12px 23px,rgba(255,230,190,.06) 24px 25px),
    linear-gradient(100deg,#a8713f,#c08a55 30%,#a26c3c 60%,#b9844f);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 24px 40px -18px rgba(36,27,23,.5)}
.crate-handle{position:absolute;left:50%;top:13%;width:28%;height:16%;translate:-50% 0;border-radius:40px;background:#24170f;box-shadow:inset 0 3px 5px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.18)}
[data-crate=left] .crate-shadow{position:absolute;left:50%;bottom:calc(3% - var(--s)*.05);z-index:0;width:calc(var(--s)*1.3);height:calc(var(--s)*.14);margin-left:calc(var(--s)*-.65);border-radius:50%;background:radial-gradient(closest-side,rgba(36,27,23,.32),rgba(36,27,23,0))}
[data-crate=left] .fly-sleeve{will-change:transform}
html:not(.motion) .crate2d{display:none}
[data-crate=left] .crate-shadow{top:auto;translate:none}

/* ---------- Explore: a crate of dividers ---------- */
@font-face{font-family:Caveat;src:url('../fonts/Caveat-Variable.ttf') format('truetype');font-weight:400 700;font-display:swap}
@font-face{font-family:Marker;src:url('../fonts/PermanentMarker-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:Inter;src:url('../fonts/Inter_600SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
.dig{--tab-h:58px;position:relative;background:var(--paper);overflow-x:clip}
.dig-pin{height:100svh;padding:max(22px,3svh) 0 0;overflow:hidden}
.dig-inner{display:flex;flex-direction:column;height:100%}
/* A real crate, seen from above the way you stand over one. JS sizes the crate, places
   every wall and divider in it, and moves the camera (the .dividers transform) so it
   always looks square at the open divider. y runs up the page; z runs toward you. */
.crate-box{position:relative;flex:1;min-height:0;perspective:1500px;perspective-origin:50% 50%}
.dividers{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.cw,.divider{position:absolute;left:0;top:0}
.cw{transform-origin:50% 50%}
/* Walnut boards. Inside faces get darker toward the floor and toward the back. */
.cw-floor{background:
  repeating-linear-gradient(90deg,rgba(0,0,0,0) 0 calc(16.66% - 3px),rgba(0,0,0,.5) calc(16.66% - 3px) 16.66%),
  linear-gradient(#2b1c13,#1d130c)}
.cw-side,.cw-back{--boards:
  linear-gradient(180deg,rgba(255,236,205,.2) 0 1.5%,rgba(0,0,0,0) 1.5% 33%,rgba(18,10,5,.6) 33% 34%,rgba(255,230,190,.08) 34% 34.6%,rgba(0,0,0,0) 34.6% 66.5%,rgba(18,10,5,.6) 66.5% 67.5%,rgba(255,230,190,.08) 67.5% 68.1%,rgba(0,0,0,0) 68.1%),
  linear-gradient(180deg,rgba(10,5,2,0) 45%,rgba(10,5,2,.5)),
  repeating-linear-gradient(180deg,rgba(255,225,180,0) 0 7px,rgba(255,225,180,.05) 8px 9px,rgba(60,30,10,0) 10px 17px,rgba(60,30,10,.1) 18px 19px)}
/* A side wall's left end is the front of the crate. */
.cw-side{background:linear-gradient(90deg,rgba(255,226,180,.1),rgba(0,0,0,0) 30%,rgba(10,5,2,.5)),var(--boards),linear-gradient(90deg,#8d5d38,#74492b)}
.cw-back{background:linear-gradient(rgba(10,5,2,.32),rgba(10,5,2,.32)),var(--boards),#6e4529}
.cw-front{border-radius:3px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.2) 0 1%,rgba(0,0,0,0) 1% 32%,#2a1c13 32% 33.4%,rgba(255,255,255,.1) 33.4% 34%,rgba(0,0,0,0) 34% 66%,#2a1c13 66% 67.4%,rgba(255,255,255,.1) 67.4% 68%,rgba(0,0,0,0) 68%),
    linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(20,10,4,.35)),
    repeating-linear-gradient(90deg,rgba(80,45,20,0) 0 13px,rgba(80,45,20,.08) 14px 15px,rgba(80,45,20,0) 16px 31px,rgba(255,230,190,.06) 32px 33px),
    linear-gradient(100deg,#a8713f,#c08a55 30%,#a26c3c 60%,#b9844f)}
.cw-handle{position:absolute;left:50%;top:22%;width:min(11%,150px);height:13%;translate:-50% 0;border-radius:999px;background:#1d130c;box-shadow:inset 0 4px 7px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.2)}
/* A strip of masking tape on the front wall, labelled in marker like a crate in a shop. */
.cw-tape{position:absolute;left:50%;top:6px;translate:-50% 0;padding:.3em 1em .24em;font:400 clamp(17px,calc(var(--sh)*.046),26px)/1 Marker,Outfit,sans-serif;color:#2b2420;rotate:-2deg;white-space:nowrap;
  background:linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,255,255,0) 30%,rgba(120,100,60,.08) 70%,rgba(255,255,255,.12)),
    repeating-linear-gradient(90deg,rgba(150,130,90,.06) 0 2px,rgba(0,0,0,0) 2px 5px),rgba(233,222,194,.93);
  box-shadow:0 1px 2px rgba(40,25,10,.25);
  clip-path:polygon(0 6%,3% 0,6% 9%,9% 2%,91% 0,94% 8%,97% 1%,100% 7%,98% 30%,100% 52%,97% 74%,100% 96%,96% 100%,92% 93%,8% 100%,4% 92%,0 100%,2% 70%,0 48%,3% 26%)}
/* As the crate leaves, its bottom fades into the page rather than ending on a hard edge. */
.crate-fade{position:absolute;left:50%;width:100vw;translate:-50% 0;bottom:0;height:min(105px,13svh);background:linear-gradient(rgba(245,242,236,0),var(--paper) 70%);opacity:0;pointer-events:none;z-index:3;will-change:opacity}
html:not(.motion) .crate-fade{display:none}
/* The top edges of the walls catch the light. */
.cw-rim{background:linear-gradient(90deg,#b07b4b,#c99668 50%,#b07b4b);box-shadow:inset 0 0 0 1px rgba(60,32,14,.35)}
.cw-rim.is-front{background:linear-gradient(180deg,#d4a476,#bf8b5c)}
/* A divider's box is the full width at tab height, so only its visible parts take the
   pointer; otherwise each one would block the tabs of the dividers behind it. */
.divider,.divider-front{pointer-events:none}
.divider-tab,.divider-sheet,.divider-back{pointer-events:auto}
.divider{--fg:var(--ink);--fg-muted:var(--muted);width:var(--sw);height:calc(var(--sh) + var(--tab-h) + var(--ext,0px));transform-origin:50% 100%;will-change:transform}
/* Each divider is one flat card: no 3D faces and no compositing layers inside it. Safari
   draws any such layer above every divider's sheet, so the next divider's phone and record
   would show through the open one. Once a divider has turned its back to you (is-away, set
   by JS) the same card repaints as bare kraft board, which is cheap: its print isn't drawn.
   It's the same physical piece, so its tab still lands in the right place. */
.divider-front,.divider-back{position:absolute;inset:0}
html.motion .divider-back{display:none}
.divider .lp-turn,.divider .lp-marble{will-change:auto}
/* Safari paints a filtered record as a lighter box on the card; a round shadow does the same job. */
.divider .lp-disc{filter:none}
.divider .lp::before{content:'';position:absolute;inset:3% 3% 3.3%;border-radius:50%;box-shadow:0 14px 22px -8px rgba(26,20,16,.32)}
.divider-tab{position:absolute;top:0;left:calc(var(--slot)*20%);width:19.4%;height:var(--tab-h);padding:0 12px;border:1px solid var(--tab-line);border-bottom:0;border-radius:10px 10px 0 0;background:var(--sunk);color:#4f4740;font:600 clamp(22px,calc(var(--tab-h)*.44),33px)/1 Caveat,Outfit,sans-serif;z-index:2;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.6);transition:color .3s,background-color .3s,border-color .3s}
.divider-tab:hover{color:var(--ink)}
.divider-sheet{position:absolute;left:0;right:0;bottom:0;top:calc(var(--tab-h) - 1px);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:40px;padding:clamp(26px,3vw,46px) clamp(28px,4vw,60px);border:1px solid var(--tab-line);border-radius:4px;background:var(--raised);color:var(--fg);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);overflow:hidden}
/* Every divider darkens toward the floor. How deep it stands, or how far it has fallen, is a
   filter on the whole divider, set by JS. */
.divider-sheet::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(0deg,rgba(28,17,10,.11),rgba(28,17,10,0) 30%)}
.divider.is-front .divider-tab{background:var(--raised);border-color:var(--red);color:var(--red)}
.divider.is-dark{--fg:#f1e9dc;--fg-muted:#b8ab99;--rule:#4a4139}
.divider.is-dark .divider-sheet{background:#26221d;border-color:#3a332c;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.divider.is-dark .divider-tab{background:#3a332c;border-color:#4a4139;color:#b8ab99;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.divider.is-dark.is-front .divider-tab{background:#26221d;border-color:var(--brass);color:var(--brass-hi)}
/* Printed on the front, bare kraft board on the back. */
.divider.is-away .divider-sheet{background:linear-gradient(#a3937b,#7b6c57);border-color:#7f705b;box-shadow:inset 0 1px 0 rgba(255,240,215,.25);cursor:pointer}
.divider.is-away .divider-sheet>*,.divider.is-away .divider-sheet::after{visibility:hidden}
.divider.is-away .divider-tab{background:#a3937b;border-color:#7f705b;color:transparent;box-shadow:none}
.divider.is-dark.is-away .divider-sheet,.divider.is-dark.is-away .divider-tab{background:#2f2a24;border-color:#3a332c}
.divider-back{top:var(--tab-h);transform:rotateY(180deg);border:1px solid #7f705b;border-radius:4px;background:linear-gradient(#a3937b,#7b6c57);box-shadow:inset 0 1px 0 rgba(255,240,215,.25);cursor:pointer}
.back-tab{position:absolute;bottom:100%;right:calc(var(--slot)*20%);width:19.4%;height:var(--tab-h);border:1px solid #7f705b;border-bottom:0;border-radius:10px 10px 0 0;background:#a3937b}
.divider.is-dark .divider-back,.divider.is-dark .back-tab{background:#2f2a24;border-color:#3a332c}
.card-title{font-size:clamp(34px,3.8vw,56px);line-height:1.04;letter-spacing:-.04em;margin-bottom:20px;max-width:11em}
.card-body{font-size:18px;line-height:1.6;max-width:36ch;margin-bottom:14px;color:var(--fg-muted)}
/* The phone in the middle. Its jacket tucks in behind it on the left, and the record
   peeks out on the right with its label showing, sized like an LP to its sleeve. */
.sheet-art{--pw:clamp(180px,min(15vw,24svh),235px);--jw:calc(var(--pw)*.9);position:relative;align-self:stretch;min-height:0}
.art-phone{--w:var(--pw);position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:3}
.art-lp{--size:calc(var(--jw)*.95);position:absolute;left:calc(50% + var(--pw)*.17);top:calc(50% - var(--pw)*1.02);z-index:1}
.art-sleeve{position:absolute;z-index:2;width:var(--jw);left:calc(50% - var(--pw)*1.06);top:calc(50% - var(--pw)*.12);rotate:-6deg}
.art-lp .lp-vinyl.is-on{opacity:1}
.art-chips{position:absolute;z-index:5;left:calc(50% + var(--pw)*.22);top:54%;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.art-chips .chip:first-child{rotate:-3deg}.art-chips .chip:last-child{rotate:3deg;margin-left:14px}
.art-fan{position:absolute;z-index:2;width:var(--jw);aspect-ratio:1;left:calc(50% - var(--pw)*1.06);top:calc(50% - var(--pw)*.12)}
.art-fan .sleeve{position:absolute;inset:0;width:100%;left:0;top:0;translate:none;transform-origin:50% 100%}
.art-fan .art-sleeve{rotate:6deg}
.art-disco:nth-child(1){rotate:-17deg;translate:calc(var(--pw)*-.24) calc(var(--pw)*-.2)}
.art-disco:nth-child(2){rotate:-9deg;translate:calc(var(--pw)*-.16) calc(var(--pw)*-.135)}
.art-disco:nth-child(3){rotate:-1deg;translate:calc(var(--pw)*-.08) calc(var(--pw)*-.065)}

/* Your room: clickable editor steps beside the two phones from the current site. */
.room-steps{display:grid;max-width:400px;margin-top:4px}
.step{display:grid;width:100%;padding:10px 0 0;border:0;background:none;color:var(--fg-muted);text-align:left}
.step-name{font-size:18px;font-weight:500;transition:color .3s}
.step-cap{font-size:14px;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .4s}
.step-bar{position:relative;height:1px;margin-top:10px;background:var(--rule);overflow:hidden}
.step-bar i{position:absolute;inset:0;background:var(--brass-hi);transform:scaleX(0);transform-origin:left}
.step:hover .step-name,.step[aria-pressed=true] .step-name{color:var(--fg)}
.step[aria-pressed=true] .step-cap{max-height:40px;opacity:1;margin-top:6px}
.step:focus-visible{outline:2px solid var(--brass-hi);outline-offset:4px}
/* The room divider carries the most copy, so it sets tighter. */
@media(min-width:1001px){.is-dark .card-title{font-size:clamp(32px,3.3vw,48px);margin-bottom:14px}.is-dark .card-body{font-size:16px;margin-bottom:6px}.is-dark .step{padding-top:8px}.is-dark .step-name{font-size:17px}.is-dark .step-bar{margin-top:8px}}
.room-art{--pw:clamp(180px,min(14.5vw,23svh),225px)}
.edit-phone{--w:var(--pw);position:absolute;left:12%;top:0;rotate:-6deg;z-index:2}
.share-phone{--w:calc(var(--pw)*1.04);position:absolute;right:8%;bottom:0;rotate:7deg;z-index:3}
/* Out past the share phone far enough that its label shows. */
.room-lp{--size:calc(var(--pw)*.95);position:absolute;right:calc(var(--pw)*-.16);top:-12%;z-index:1;opacity:0}
.room-glow{position:absolute;left:50%;top:50%;width:110%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(236,176,96,.34),rgba(236,176,96,.1) 35%,rgba(236,176,96,0) 64%);opacity:0;pointer-events:none}
.screen-light{position:absolute;inset:0;background:radial-gradient(circle at 92% 18%,rgba(255,196,110,.35),rgba(255,196,110,0) 55%);mix-blend-mode:soft-light;opacity:0}

/* A paper curtain for jumping from the nav without scrolling through everything between. */
.curtain{position:fixed;inset:0;z-index:100;background:var(--paper);opacity:0;visibility:hidden;pointer-events:none}

/* Per-divider and per-record values, kept here rather than inline for the site's CSP. */
#dig{--slot:0}#feed{--slot:1}#albums{--slot:2}#artists{--slot:3}#your-room{--slot:4}
/* Each record's label is a colour from its own cover. */
.lp-label[data-label=croissant]{--label:#F08A4B}.lp-label[data-label=bigfish]{--label:#F9C4D6}
.lp-label[data-label=mopvillainy]{--label:#EE5A5F}.lp-label[data-label=lossless]{--label:#F2D167}
.lp-label[data-label=marquee]{--label:#F7C59F;--ink:rgba(38,63,102,.55)}
.swatch.is-seaglass{--swatch:linear-gradient(90deg,#bfe3cf 50%,#2e8a8a 50%)}

/* ---------- Story + closing ---------- */
.story{padding:150px 0}
.story-inner{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(40px,8vw,120px)}
.story-photo{border-radius:10px;overflow:hidden;aspect-ratio:4/5}
.story-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;will-change:transform}
.story-copy h2{margin-bottom:24px}
.story-copy p{font-size:18px;max-width:34ch;margin-bottom:26px}
.closing{padding:110px 0 140px;text-align:center}
.closing h2{font-size:clamp(48px,6.4vw,92px);margin:0 auto 22px;max-width:10em}
.closing p{max-width:30em;margin:0 auto 26px;font-size:18px}
.closing-actions{display:flex;flex-direction:column;align-items:center;gap:18px}

/* ---------- Without motion ---------- */
html:not(.motion) .scene-pin{height:auto;min-height:100svh;padding:120px 0 80px}
html:not(.motion) .scene-inner{height:auto;align-items:start}
html:not(.motion) .scene-copy{display:flex;flex-direction:column;gap:30px}
html:not(.motion) .paint-wall:not(:first-child),html:not(.motion) .room-frame [data-room]:not(:first-child){display:none}
html:not(.motion) .beat h2{font-size:clamp(28px,2.6vw,38px);margin-bottom:8px}
html:not(.motion) .beat p{font-size:16px}
html:not(.motion) .dig-pin{height:auto}
html:not(.motion) .dig-pin{overflow:visible}
html:not(.motion) .crate-box{perspective:none}
html:not(.motion) .dividers{position:static;width:auto;height:auto;transform:none;display:flex;flex-direction:column;gap:40px;padding-top:24px}
html:not(.motion) .divider{position:relative;width:auto;height:min(700px,90svh)}
html:not(.motion) .divider-tab{color:var(--red);background:var(--raised);border-color:var(--red)}
html:not(.motion) .divider-back,html:not(.motion) .cw,html:not(.motion) .divider-sheet::after{display:none}
html:not(.motion) .room-lp{opacity:1}

/* ---------- Tablet + mobile: the same crate, square on ---------- */
@media(max-width:1000px){
  .scene-inner{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;gap:18px;padding-top:max(92px,11svh)}
  .scene-copy{align-items:start}
  .hero-copy h1{font-size:clamp(40px,11vw,60px)}
  .hero-lede{font-size:16px;margin:14px 0 18px}
  .hero-actions{flex-direction:row;align-items:center;flex-wrap:wrap;gap:12px 18px}
  .hero-actions .status{font-size:12px}
  .beat h2{font-size:clamp(32px,9vw,46px);margin-bottom:8px}
  .beat p{font-size:16px}
  /* The stage stands on the bottom of the screen whatever the copy above it needs. */
  .scene-stage,[data-crate=left] .scene-stage{--s:min(150px,38vw);position:absolute;left:0;right:0;bottom:max(18px,3svh);height:min(50svh,460px);perspective:1000px;pointer-events:none}
  /* The room is sized by width on phones, as big as fits under the beat copy, and stands on
     the stage floor. */
  .scene-pin{--fw:min(84vw,calc((100svh - 260px)*.567),420px)}
  .room-frame{top:auto;bottom:0;height:auto;width:var(--fw)}
  .roller{width:calc(var(--fw)*1.18)}
  .scene-cue{display:none}
  .dig-pin{padding-top:max(20px,3svh)}
  /* A phone's toolbar slides away as you scroll and the screen grows. The pinned scenes are
     as tall as the screen can ever be (--pin-h), and lay themselves out in the height you can
     see right now (--vh), so nothing sits too high or leaves a strip of page under it. */
  html.motion .scene-pin,html.motion .dig-pin{height:var(--pin-h,100lvh)}
  html.motion .scene-inner{height:var(--vh,100svh);padding-top:max(92px,calc(var(--vh,100svh)*.11))}
  html.motion .dig-pin{padding-top:0}
  html.motion .dig-inner{height:var(--vh,100svh);padding-top:max(20px,calc(var(--vh,100svh)*.03))}
  /* The stage covers the screen; JS puts the crate on its floor, the records' hand above it
     and the room under the beat copy (--floor, --po, --room-top, --fw). */
  html.motion .scene-stage{inset:0;height:auto;perspective-origin:50% var(--po,60%)}
  html.motion .room-frame{top:var(--room-top,auto);bottom:auto}
  html.motion .crate-shadow{top:calc(var(--floor,93%) - var(--s)*.06)}
  /* The crate's pin already runs on below the screen, so the story needs little gap of its own. */
  html.motion .story{padding-top:24px}
  /* The same crate, seen nearly square on and filling the screen edge to edge. The tabs
     stay on the dividers and fold over with them, without words: five even tabs across the
     card. The open card's heading says where you are. */
  html.motion .crate-box{margin:0 calc(var(--gutter)*-1);overflow:hidden}
  html.motion .divider{touch-action:pan-y}
  html.motion .divider-tab{font-size:0;padding:0;border-radius:9px 9px 0 0}
  html.motion .cw-handle{display:none}
  /* The front wall is close to the camera on a phone, so the tape reads big; keep it small. */
  .cw-tape{font-size:11px;top:4px}
  /* The front wall is taller on a phone; fade more of it, plank seam included. */
  .crate-fade{height:min(170px,22svh);background:linear-gradient(rgba(245,242,236,0),var(--paper) 62%)}
  .divider-sheet{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;gap:6px;padding:20px 20px calc(16px + var(--ext,0px))}
  .card-title{font-size:clamp(26px,7.2vw,34px);margin-bottom:10px}
  .card-body{font-size:15px;margin-bottom:6px}
  /* Size the art to the space the copy leaves, so it fills a tablet card and never runs
     into the copy on a short phone. */
  .sheet-art{--pw:min(240px,36vw,44cqh);container-type:size}
  /* Pull the jackets in so the Artists fan stays on the card. */
  .art-sleeve,.art-fan{left:calc(50% - var(--pw)*.92)}
  .art-disco:nth-child(1){translate:calc(var(--pw)*-.17) calc(var(--pw)*-.15)}
  .art-disco:nth-child(2){translate:calc(var(--pw)*-.11) calc(var(--pw)*-.1)}
  .art-disco:nth-child(3){translate:calc(var(--pw)*-.055) calc(var(--pw)*-.05)}
  .art-chips{left:auto;right:-4px;top:56%}
  .art-chips .chip{font-size:12px;padding:7px 10px}
  .room-art{--pw:min(200px,35vw,36cqh)}
  .is-dark .card-body{display:none}
  .room-steps{display:flex;flex-wrap:wrap;gap:6px;max-width:none}
  .step{width:auto;padding:7px 11px;border:1px solid rgba(241,233,220,.22);border-radius:20px}
  .step-name{font-size:13px}
  .step-cap,.step-bar{display:none}
  .step[aria-pressed=true]{background:var(--brass-hi);border-color:var(--brass-hi)}
  .step[aria-pressed=true] .step-name{color:#26221d}
  .edit-phone{left:4%}
  .share-phone{right:4%}
  .room-lp{right:-8%;top:-2%}
  .story{padding:90px 0}
  .story-inner{grid-template-columns:1fr;gap:40px}
  .closing{padding:80px 0 100px}
  html:not(.motion) .scene-pin{padding-top:100px}
  html:not(.motion) .scene-stage{height:min(70svh,560px)}
  html:not(.motion) .divider-tab{display:block;left:0;width:auto;height:48px;padding:0 18px}
  html:not(.motion) .divider-sheet{top:47px}
  html:not(.motion) .dividers{gap:32px;padding-top:8px}
  html:not(.motion) .divider{height:min(760px,96svh)}
}