/* RBS / Clothing & Things. Tokens copied from site/index.html :root (keep in step if they change). */
:root{
  --black:#0B0B0A;--carbon:#151515;--paper:#F1EFE6;--paper-2:#E9E6DA;--cobalt:#3157FF;--red:#FF3B30;--red-ink:#E42B20;
  --chrome:#D7D4C7;--chrome-lt:#E9E6DA;--hi:#FFFEF8;--lo:#8B8980;--dk:#26251F;
  --bar-a:linear-gradient(90deg,#1E3597 0%,#3157FF 45%,#6B84FF 100%);
  --display:'Anton','Arial Narrow',Impact,sans-serif;--ui:'Instrument Sans',Inter,Arial,Helvetica,sans-serif;--mono:'IBM Plex Mono',ui-monospace,'Courier New',monospace;
  --barh:56px;--gut:clamp(20px,4vw,64px);--ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--barh) + 12px)}
body{margin:0;background:var(--paper);color:var(--carbon);font:400 17px/1.55 var(--ui);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px dotted currentColor;outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--carbon);color:var(--paper);padding:10px 14px}
.skip:focus{left:8px}
.nowrap{white-space:nowrap}
.no{font:500 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px}
.kicker{font:500 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.big{font:400 clamp(46px,6.4vw,112px)/.92 var(--display);text-transform:uppercase;letter-spacing:.004em;margin-bottom:28px}
.mid{font:400 clamp(34px,4vw,64px)/.95 var(--display);text-transform:uppercase;margin-bottom:22px}
.huge{font:400 clamp(56px,7.4vw,148px)/.88 var(--display);text-transform:uppercase;margin-bottom:34px}
.huge span{display:block}

/* ---------- the RBS tab, the same construction as BAD in the wordmark */
.tab{position:relative;display:inline-block;background:var(--cobalt);color:var(--paper);padding:.04em .16em 0;line-height:.9}
.tab-x{position:absolute;width:.32em;height:.32em;right:-.14em;top:-.16em;background:var(--paper);box-shadow:inset 0 0 0 .035em var(--cobalt)}
.tab-x::before,.tab-x::after{content:"";position:absolute;left:24%;right:24%;top:50%;height:.045em;margin-top:-.0225em;background:var(--red)}
.tab-x::before{transform:rotate(45deg)}.tab-x::after{transform:rotate(-45deg)}
.tab--sm{padding:.02em .14em 0}

/* ---------- top bar */
.bar{position:fixed;inset:0 0 auto 0;height:var(--barh);z-index:50;display:flex;align-items:center;gap:22px;padding:0 var(--gut);background:var(--paper);border-bottom:1px solid var(--carbon);transition:background .3s,color .3s,border-color .3s}
.bar.on-dark{background:var(--carbon);color:var(--paper);border-color:#333}
.bar-home{display:flex;align-items:center;gap:10px;text-decoration:none;font:600 15px/1 var(--ui);min-height:44px}
.bar-home img{width:40px;height:auto}
.bar-title{font:400 22px/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.bar-nav{margin-left:auto;display:flex;gap:4px}
.bar-nav a{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:16px 10px;opacity:.75}
.bar-nav a:hover,.bar-nav a:focus-visible,.bar-nav a.is-here{opacity:1;text-decoration:underline;text-underline-offset:5px}
.bar-status{display:flex;align-items:center;gap:8px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding-left:14px;border-left:1px solid currentColor}
.bar-status i{width:9px;height:9px;background:var(--cobalt)}

/* ---------- reveal (only once JS is running, so nothing hides without it) */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.pen{fill:none;stroke:var(--red);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.js .pen{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--ease)}
.js .drawn .pen{stroke-dashoffset:0}

/* ---------- hero */
.hero{min-height:100svh;padding:calc(var(--barh) + 3vh) var(--gut) 5vh;display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(24px,4vw,72px);align-items:center;position:relative}
.hero-type{position:relative;align-self:center}
.hero-h1{font:400 clamp(84px,13.4vw,236px)/.94 var(--display);text-transform:uppercase;letter-spacing:.002em;margin:22px 0 clamp(78px,7.6vw,128px)}
.hero-h1 .line{display:block;overflow:hidden;padding-top:.14em;margin-top:-.14em}
.hero-h1 .word{display:inline-block}
.js .hero-h1 .word{transform:translateY(105%);transition:transform 1.1s var(--ease)}
.js .hero-h1 .line:nth-child(2) .word{transition-delay:.12s}
.js .loaded .hero-h1 .word{transform:none}
.hero-h1 .tab-x{transform:scale(0);transition:transform .4s .9s cubic-bezier(.3,1.6,.5,1)}
.no-js .hero-h1 .tab-x,.loaded .hero-h1 .tab-x{transform:none}
.hero-h1wrap{position:relative}
.hero-note{position:absolute;width:clamp(170px,17vw,270px);left:clamp(150px,22%,330px);bottom:calc(-1 * clamp(64px,6.4vw,110px));overflow:visible}
.hero-note text{font:400 34px var(--display);fill:var(--red-ink);text-transform:uppercase;opacity:0;transition:opacity .5s 1.9s}
.loaded .hero-note text,.no-js .hero-note text{opacity:1}
.js .hero-note .pen{transition-delay:1.3s}
.lede{max-width:34em;font-size:clamp(17px,1.35vw,20px)}
.hero-scroll{margin-top:36px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:12px}
.hero-scroll::before{content:"";width:46px;height:1px;background:currentColor;animation:nudge 2.4s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:scaleX(.4);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}}
.hero-photo{margin:0;position:relative;height:calc(100svh - var(--barh) - 8vh);max-height:960px}
.hero-photo .frame{height:100%;overflow:hidden;background:#d9cdb8}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;transform:scale(calc(1.08 - var(--p,0) * .08));transform-origin:50% 30%}
.js .hero-photo .frame{clip-path:inset(100% 0 0 0);transition:clip-path 1.3s .15s var(--ease)}
.js .loaded .hero-photo .frame{clip-path:inset(0 0 0 0)}

/* figure captions and the AI note */
figure{margin:0;position:relative}
figcaption{position:absolute;left:12px;bottom:12px;display:flex;gap:8px;align-items:center;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--paper)}
figcaption span:not(.ai-chip){background:var(--carbon);padding:6px 8px}
.ai-chip{background:rgba(11,11,10,.62);color:var(--paper);padding:6px 8px;font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.ai-chip--ours{background:var(--cobalt)}

/* ---------- marquee */
.marquee{background:var(--carbon);color:var(--paper);overflow:hidden;border-block:1px solid var(--black)}
.marquee-track{display:flex;width:max-content;transform:translateX(var(--mx,0px));will-change:transform}
.marquee span{font:400 clamp(22px,2.6vw,38px)/1 var(--display);text-transform:uppercase;padding:18px 28px;white-space:nowrap;display:flex;align-items:center;gap:28px}
.marquee span::after{content:"";width:12px;height:12px;background:var(--cobalt);display:inline-block}

/* ---------- 01 story: sticky photos, text beats */
.story{display:grid;grid-template-columns:1fr 1fr;position:relative}
.story-media{position:sticky;top:var(--barh);height:calc(100svh - var(--barh));overflow:hidden;background:var(--carbon)}
.beat-img{position:absolute;inset:0;opacity:0;transform:scale(1.04);transition:opacity .8s var(--ease),transform 1.2s var(--ease)}
.beat-img.is-on{opacity:1;transform:none}
.beat-img img{width:100%;height:100%;object-fit:cover}
.beat-art{display:grid;place-items:center;background:var(--carbon)}
.beat-art img{width:78%;height:auto;object-fit:contain}
.story-text{padding:0 var(--gut)}
.m-img{display:none}
.beat{min-height:calc(100svh - var(--barh));display:flex;flex-direction:column;justify-content:center;max-width:620px;padding:12vh 0}
.beat p{max-width:32em;margin-bottom:14px}
.beat .no{margin-bottom:18px}
s,ins{text-decoration:none}
s{background:linear-gradient(var(--red),var(--red)) no-repeat 0 55%/0% .09em;transition:background-size .7s .2s var(--ease)}
.in s,.no-js s{background-size:100% .09em}
ins{color:var(--red-ink);display:inline-block;transform:rotate(-4deg) translateY(-.42em);font-size:.82em;opacity:0;transition:opacity .4s .8s}
.in ins,.no-js ins{opacity:1}

.ticket{margin:26px 0 0;display:grid;grid-template-columns:1fr;border-top:1px solid currentColor;max-width:520px}
.ticket div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:10px 0;border-bottom:1px solid color-mix(in srgb,currentColor 25%,transparent)}
.ticket dt{font:500 11px/1.8 var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.ticket dd{margin:0;font-size:15px}
.ticket--wide{max-width:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 28px;margin:clamp(40px,6vw,80px) var(--gut) 0}
.ticket--wide div{grid-template-columns:1fr;gap:4px}

/* ---------- 02 the desk: RB-OS dot grid, a real window */
.desk{padding:clamp(80px,12vh,140px) 0 clamp(80px,12vh,140px);background:var(--paper) radial-gradient(circle,rgba(21,21,21,.16) 1px,transparent 1.5px) 0 0/22px 22px}
.desk-head{max-width:980px;padding:0 var(--gut)}
.desk-head p:not(.no){max-width:36em;font-size:clamp(17px,1.3vw,19px)}
.dialog-wrap{display:grid;justify-items:center;padding:clamp(56px,8vw,110px) var(--gut) clamp(48px,6vw,80px)}
.win{width:min(680px,100%);background:var(--chrome);box-shadow:inset 2px 2px 0 var(--hi),inset -2px -2px 0 var(--lo),12px 14px 0 rgba(21,21,21,.18);padding:4px;transform-origin:50% 0}
.js .win{transform:scale(.4) translateY(60px);opacity:0;transition:transform .5s cubic-bezier(.25,1.25,.4,1),opacity .2s}
.js .win[data-open="true"]{transform:none;opacity:1}
.win.shake{animation:shake .42s}
@keyframes shake{20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
.win-bar{display:flex;align-items:center;justify-content:space-between;background:var(--bar-a);color:var(--paper);padding:5px 5px 5px 12px;font:500 clamp(13px,1.4vw,16px)/1 var(--mono);letter-spacing:.08em}
.win-x{width:30px;height:28px;border:0;background:var(--chrome);box-shadow:inset 1.5px 1.5px 0 var(--hi),inset -1.5px -1.5px 0 var(--lo);position:relative;cursor:pointer;min-width:44px;min-height:32px}
.win-x i::before,.win-x i::after{content:"";position:absolute;left:30%;right:30%;top:50%;height:3px;margin-top:-1.5px;background:var(--red-ink);transform:rotate(45deg)}
.win-x i::after{transform:rotate(-45deg)}
.win-body{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,32px);align-items:start;padding:clamp(22px,4vw,44px) clamp(18px,4vw,44px) 10px}
.win-icon{width:clamp(56px,7vw,92px);aspect-ratio:1;border-radius:50%;background:var(--cobalt);color:var(--paper);display:grid;place-items:center;font:400 clamp(36px,4.6vw,60px)/1 var(--display)}
.win-text{font:400 clamp(34px,5vw,66px)/.98 var(--display);text-transform:uppercase;min-height:2.94em}
.win-text.is-question{font:600 clamp(22px,2.6vw,32px)/1.25 var(--ui);text-transform:none}
.win-text small{display:block;font:500 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px;opacity:.7}
.win-buttons{display:flex;justify-content:flex-end;gap:14px;padding:12px clamp(18px,4vw,44px) clamp(18px,3vw,30px)}
.win-btn{font:600 clamp(16px,1.6vw,20px)/1 var(--ui);color:var(--carbon);background:var(--chrome);border:0;min-width:clamp(120px,14vw,170px);min-height:52px;padding:0 18px;box-shadow:inset 2px 2px 0 var(--hi),inset -2px -2px 0 var(--lo);cursor:pointer;position:relative}
.win-btn.is-default{outline:2px solid var(--carbon);outline-offset:0}
.win-btn.is-default::after{content:"";position:absolute;inset:7px;border:1.5px dotted var(--carbon)}
.win-btn:active{box-shadow:inset 2px 2px 0 var(--lo),inset -2px -2px 0 var(--hi)}
.win-btn:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}
.dialog-note{margin-top:22px;font:500 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.7;text-align:center}
.strip{display:grid;grid-template-columns:1.25fr 1fr .9fr;gap:clamp(14px,2vw,28px);padding:0 var(--gut);align-items:start}
.strip img{width:100%;aspect-ratio:2/3;object-fit:cover}
.strip-a{transform:translateY(calc((var(--p,.5) - .5) * 40px))}
.strip-b{margin-top:12vh;transform:translateY(calc((var(--p,.5) - .5) * -60px))}
.strip-c{margin-top:4vh;transform:translateY(calc((var(--p,.5) - .5) * 80px))}
.strip-c img{aspect-ratio:1070/1470}

/* ---------- 03 night */
.night{background:var(--carbon);color:var(--paper);padding:clamp(90px,14vh,160px) var(--gut)}
.night-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,90px);align-items:center}
.night-text>p:not(.no){max-width:32em;font-size:clamp(17px,1.3vw,19px)}
.qr-card{margin-top:34px;display:flex;gap:22px;align-items:center;background:var(--paper);color:var(--carbon);padding:16px 26px 16px 16px;width:max-content;max-width:100%}
.qr-card img{width:clamp(130px,12vw,170px)}
.qr-a{font:700 20px/1.2 var(--ui)}.qr-b{font-size:16px;margin-top:4px}.qr-c{font:500 12px/1 var(--mono);letter-spacing:.08em;margin-top:14px}
.night-photos{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:end}
.night-photos img{width:100%;aspect-ratio:2/3;object-fit:cover}
.np-b{margin-bottom:14vh}

/* ---------- rack: pinned, scrolls sideways on desktop */
.rack{position:relative;height:calc(var(--rack-h,300vh));background:var(--paper-2)}
.rack-pin{position:sticky;top:var(--barh);height:calc(100svh - var(--barh));overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3vh,34px)}
.rack-head{padding:0 var(--gut);display:flex;align-items:baseline;gap:28px;flex-wrap:wrap}
.rack-head .big{margin:0}
.rack-head p{font:500 13px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.75;max-width:24em}
.rack-track{list-style:none;margin:0;padding:0 var(--gut);display:flex;gap:clamp(18px,2.4vw,40px);width:max-content;transform:translateX(var(--rx,0px));will-change:transform}
.card{flex:none;width:auto}
.card figure img{height:min(54svh,620px);width:auto;max-width:none;object-fit:cover;aspect-ratio:2/3}
.card figure img[width="1536"]{aspect-ratio:3/2}
.card .no{margin:16px 0 6px}
.card h3{font:400 clamp(26px,2.4vw,38px)/1 var(--display);text-transform:uppercase;margin-bottom:6px}
.card p:not(.no){max-width:24em;font-size:15px}

/* ---------- sketchbook */
.sketch{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,5vw,90px);align-items:center;padding:clamp(80px,12vh,140px) var(--gut);background:var(--paper)}
.sketch-img{border:1.5px dashed var(--lo);padding:14px;background:var(--paper-2);transform:rotate(-1.5deg)}
.sketch-text p:not(.no):not(.stamp){max-width:30em}
.stamp{display:inline-block;margin-top:24px;font:600 13px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cobalt);border:2px solid var(--cobalt);padding:9px 12px;transform:rotate(-4deg)}

/* ---------- proof sheet */
.proof{padding:clamp(80px,12vh,140px) var(--gut);background:var(--hi);border-top:1px solid var(--carbon)}
.proof-head{max-width:1000px}
.proof-head p:not(.no){max-width:40em;font-size:clamp(17px,1.3vw,19px)}
.proof-grid{list-style:none;margin:clamp(40px,6vw,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(18px,2.4vw,34px)}
.proof-card{position:relative;padding:12% 12% 0;aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:space-between}
.proof-card img{width:100%;height:auto;max-height:78%;object-fit:contain;margin:auto}
.proof-card p{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:14px 0;opacity:.75}
.proof-card::before,.proof-card::after{content:"";position:absolute;width:18px;height:18px;border:1px solid currentColor;opacity:.5}
.proof-card::before{top:8px;left:8px;border-width:1px 0 0 1px}
.proof-card::after{bottom:8px;right:8px;border-width:0 1px 1px 0}
.proof-card.dark{background:#161616;color:var(--paper)}
.proof-card.natural{background:#ECE5D4}
.proof-card.bone{background:#EEE8DC}
.proof-card.canvas{background:#E5DAC2}
.proof-card.paper{background:var(--paper)}
.proof-card img[src$='work-cap-front.svg']{width:46%}
.proof-foot{margin-top:clamp(50px,7vw,90px);padding-top:26px;border-top:1px solid var(--carbon);max-width:900px}
.proof-foot p{font-size:clamp(18px,1.5vw,22px)}
.proof-foot a{font-weight:600;text-underline-offset:4px}

/* ---------- footer + studio credit (brand/made-by/made-by.css, tuned) */
.foot{background:var(--carbon);color:var(--paper);padding:48px var(--gut) 56px;display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center}
.foot-back{font:600 15px/1 var(--ui);text-decoration:none;min-height:44px;display:flex;align-items:center}
.foot-back:hover{text-decoration:underline}
.foot-small{flex-basis:100%;font:500 11px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.rbs-made-by{--rbs-mark:36px;--rbs-icon:18px;--rbs-hit:44px;--rbs-gap:16px;--rbs-dim:.72;display:flex;flex-wrap:wrap;align-items:center;gap:8px var(--rbs-gap);margin-left:auto}
.rbs-made-by__credit{display:inline-flex;align-items:center;gap:10px;min-height:var(--rbs-hit);color:inherit;text-decoration:none}
.rbs-made-by__mark{width:var(--rbs-mark);height:var(--rbs-mark);flex:none;display:block}
.rbs-made-by__text{display:flex;flex-direction:column;line-height:1.15}
.rbs-made-by__text small{font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;opacity:var(--rbs-dim)}
.rbs-made-by__text b{font-weight:600}
.rbs-made-by__credit:hover b{text-decoration:underline;text-underline-offset:3px}
.rbs-social{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.rbs-social a{display:grid;place-items:center;width:var(--rbs-hit,44px);height:var(--rbs-hit,44px);color:inherit;opacity:var(--rbs-dim,.72);transition:opacity .15s}
.rbs-social a:hover,.rbs-social a:focus-visible{opacity:1}
.rbs-social svg{width:var(--rbs-icon,18px);height:var(--rbs-icon,18px);display:block}

/* ---------- smaller screens recompose rather than scale */
@media (max-width:1100px){
  .bar-nav{display:none}
}
@media (max-width:900px){
  :root{--barh:52px}
  body{font-size:16px}
  .bar{gap:12px}
  .bar-home span{display:none}
  .bar-title{font-size:19px}
  .bar-status{margin-left:auto}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:calc(var(--barh) + 28px)}
  .hero-h1{font-size:clamp(68px,21vw,140px);margin:16px 0 22px}
  .hero-h1{margin-bottom:0}
  .hero-note{position:relative;left:auto;bottom:auto;display:block;width:190px;margin:-4px 0 18px auto}
  .hero-photo{height:auto;max-height:none}
  .hero-photo .frame{aspect-ratio:2/3;height:auto}
  .story{grid-template-columns:1fr}
  .story-media{position:relative;top:0;height:auto;display:none}
  .beat{min-height:0;padding:56px 0 0}
  .beat::before{content:"";display:block}
  .beat .m-img{display:block;margin:0 calc(var(--gut) * -1) 28px;background:var(--carbon)}
  .beat .m-img img[src$='.svg']{padding:10% 8%}
  .story-text{padding-bottom:64px}
  .ticket div{grid-template-columns:96px 1fr}
  .ticket--wide{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip{grid-template-columns:1fr 1fr}
  .strip-a{grid-column:1/-1}
  .strip-a,.strip-b,.strip-c{transform:none;margin-top:0}
  .night-grid{grid-template-columns:1fr}
  .qr-card{width:auto;padding:12px 16px 12px 12px;gap:14px}
  .np-b{margin-bottom:0}
  .rack{height:auto!important;padding:72px 0}
  .rack-pin{position:relative;top:0;height:auto;overflow:visible}
  .rack-track{transform:none!important;overflow-x:auto;width:auto;scroll-snap-type:x mandatory;padding-bottom:12px;-webkit-overflow-scrolling:touch}
  .card{scroll-snap-align:start;width:76vw}
  .card figure img{height:auto;width:100%}
  .sketch{grid-template-columns:1fr}
}
/* phones: a smaller title and the first shirt right under it, so the clothes are on screen on load
   (galleries show the goods first, 6 Oct 2026). The intro moves below the photo. */
@media (max-width:600px){
  .hero{padding-top:calc(var(--barh) + 14px);gap:0}
  .hero-type{display:contents}
  .hero .kicker{order:1;font-size:11px}
  .hero-h1wrap{order:2}
  .hero-photo{order:3}
  .hero .lede{order:4;margin-top:22px}
  .hero-scroll{order:5;margin-top:22px}
  .hero-h1{font-size:clamp(48px,15vw,72px);margin:8px 0 14px}
  .hero-note{position:absolute;right:0;bottom:6px;left:auto;width:132px;margin:0}
  .hero-photo .frame{aspect-ratio:4/5}
}
@media (max-width:420px){
  :root{--gut:18px}
  .bar{gap:8px}
  .bar-title{font-size:17px}
  .bar-status{padding-left:8px;letter-spacing:.08em}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv,.js .hero-h1 .word,.js .win,.js .hero-photo .frame{transition:none;transform:none;opacity:1;clip-path:none}
  .js .pen{transition:none;stroke-dashoffset:0}
  .hero-note text,ins{opacity:1;transition:none}
  s{transition:none;background-size:100% .09em}
  .hero-scroll::before{animation:none}
  .hero-photo img,.strip-a,.strip-b,.strip-c{transform:none}
  .beat-img{transition:none}
  .win.shake{animation:none}
}
/* no JS or reduced motion: the rack is a plain sideways-scrolling row */
.no-js .rack{height:auto;padding:80px 0}
.no-js .rack-pin{position:relative;top:0;height:auto;overflow:visible}
.no-js .rack-track{overflow-x:auto;width:auto}
@media (prefers-reduced-motion:reduce){
  .rack{height:auto!important;padding:80px 0}
  .rack-pin{position:relative;top:0;height:auto;overflow:visible}
  .rack-track{transform:none!important;overflow-x:auto;width:auto;scroll-snap-type:x mandatory}
  .card{scroll-snap-align:start}
}