/* ==========================================================================
   Syntropise · The Cabinet · Resources: the reading room
   A study after hours (pull the lamp cord), a shelf of essays you can take
   down and open, a glass case of instruments, and a sign that's been corrected.
   Everything here is prefixed rr- so it can't collide with the core.
   ========================================================================== */

/* ==== HERO: the study ==================================================== */
.rr-hero{position:relative;isolation:isolate}
.rr-hero::before{content:"";position:absolute;inset:0 -10vw;z-index:-1;pointer-events:none;background:radial-gradient(52% 58% at 70% 58%,rgba(249,183,178,.42),rgba(249,183,178,0) 72%);opacity:0;transition:opacity 1.4s var(--ease)}
html.rr-lit .rr-hero::before{opacity:1}
body{transition:background-color 1.4s var(--ease)}
html.rr-lit body{background-color:#f7efe6}
.rr-hero .phero-vis{min-height:0}
.rr-scene{position:relative;width:100%;max-width:700px;margin-inline:auto}
.rr-study{width:100%;height:auto;overflow:visible}

/* the cord: the only coral in the room until the light comes on */
.rr-cord{position:absolute;left:38.44%;top:45.8%;width:max(8.5%,46px);height:max(25%,70px);transform:translateX(-50%);border-radius:26px;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent;z-index:2}
.rr-cord:active{cursor:grabbing}
.rr-cord:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.rr-sway{transform-box:view-box;transform-origin:246px 250px;animation:rrSway 4.2s ease-in-out infinite}
@keyframes rrSway{0%,100%{transform:rotate(-2.6deg)}50%{transform:rotate(2.6deg)}}
.rr-scene.touched .rr-sway{animation-duration:7s}
.rr-tug{transform:translateY(var(--pull,0px));transition:transform .55s var(--spring)}
.rr-scene.pulling .rr-tug{transition:none}
.rr-scene.tug .rr-tug{animation:rrTug .6s var(--ease)}
@keyframes rrTug{0%{transform:none}30%{transform:translateY(16px)}62%{transform:translateY(-3px)}100%{transform:none}}
.rr-ping{transform-box:fill-box;transform-origin:50% 50%;opacity:0}
.rr-scene:not(.touched) .rr-ping{animation:rrPing 2.6s var(--ease) 1.2s infinite}
@keyframes rrPing{0%{opacity:.9;transform:scale(1)}70%,100%{opacity:0;transform:scale(2.4)}}

/* the light: a coral plate that only prints where the lamp reaches */
.rr-blob{transform-box:fill-box;transform-origin:50% 50%;transform:scale(.02);opacity:0;transition:transform 1.1s var(--ease),opacity .5s}
.rr-scene.lit .rr-blob{transform:scale(1);opacity:1}
.rr-scene.flick .rr-blob,.rr-scene.flick .rr-beam{animation:rrFlick .9s linear}
@keyframes rrFlick{0%{opacity:0}8%{opacity:.85}14%{opacity:.1}24%{opacity:1}31%{opacity:.35}44%,100%{opacity:1}}
.rr-beam{opacity:0;transition:opacity .6s}
.rr-scene.lit .rr-beam{opacity:1}

.rr-bulb{opacity:0;transition:opacity .4s}
.rr-scene.lit .rr-bulb{opacity:1}
.rr-motes circle{animation:rrMote var(--md,8s) ease-in-out infinite alternate}
@keyframes rrMote{from{transform:translate(0,0)}to{transform:translate(var(--mx,8px),-22px)}}
.rr-steam path{animation:rrSteam 3.4s ease-in-out infinite;animation-delay:calc(var(--sd,0s) * -1)}
@keyframes rrSteam{0%{opacity:0;transform:translateY(8px)}35%{opacity:.6}100%{opacity:0;transform:translateY(-12px)}}
.rr-words{opacity:.35;transition:opacity .8s}
.rr-scene.lit .rr-words{opacity:1}
.rr-quip{position:absolute;right:4%;top:6%;max-width:46%;margin:0;padding:6px 14px 7px;background:#fbf9f4;border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--coral-2);font-family:var(--serif);font-style:italic;font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.2;color:var(--coral-ink);transform:rotate(-2deg) translateY(6px);opacity:0;pointer-events:none;transition:opacity .4s,transform .5s var(--spring)}
.rr-quip.on{opacity:1;transform:rotate(-2deg)}
.rr-quip:empty{display:none}

/* ==== THE READING ROOM: the bookcase ===================================== */
.rr-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;margin-bottom:clamp(30px,3.6vw,52px)}
.rr-head .sec-head{margin-bottom:0}
.rr-luck svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.rr-luck[disabled]{cursor:progress}

.rr-case{--u:72px;--uh:300px;--side:22px;position:relative;padding:0 var(--side);background:var(--grain-c),var(--coral-2);margin-top:14px}
.rr-case::after{content:"";position:absolute;inset:0;border:2.5px solid var(--ink);transform:translate(calc(var(--mx) * -1),calc(var(--my) * -1));pointer-events:none;z-index:7}
.rr-cornice{position:relative;height:44px;margin:0 calc(var(--side) * -1 - 12px);background:var(--grain-c),var(--coral-l);border:2.5px solid var(--ink);box-shadow:inset 0 -9px 0 rgba(20,19,17,.08);z-index:8}
.rr-cornice::before{content:"";position:absolute;left:10px;right:10px;bottom:6px;border-top:1.5px solid var(--ink);opacity:.5}
.rr-cornice{display:grid;place-items:center}
.rr-case-title{display:flex;align-items:baseline;gap:.9em;margin-top:-6px;font-size:.78rem;font-weight:620;letter-spacing:.32em;text-transform:uppercase}
.rr-case-title i{font-family:var(--serif);font-weight:400;letter-spacing:.02em;text-transform:none;font-size:1.04rem;opacity:.85}
.rr-case-title .mark{transform:translateY(3px)}
.rr-rail{position:absolute;left:calc(var(--side) + 12px);right:calc(var(--side) + 12px);bottom:-20px;height:7px;border:1.8px solid var(--ink);border-radius:4px;background:linear-gradient(180deg,#fff2ea 0 30%,var(--coral-l) 31%);z-index:9}
.rr-rail i{position:absolute;top:-12px;width:7px;height:16px;border:1.8px solid var(--ink);border-bottom:0;background:var(--coral-l);border-radius:2px 2px 0 0}
.rr-rail i:nth-child(1){left:4%}.rr-rail i:nth-child(2){left:50%}.rr-rail i:nth-child(3){right:4%}

.rr-bay{position:relative;padding:34px 14px 0;background:repeating-linear-gradient(90deg,rgba(20,19,17,.07) 0 1.4px,transparent 1.4px 92px),linear-gradient(180deg,#cfc5b4,#ddd4c5 30%,#e4dccf);box-shadow:inset 0 16px 20px -12px rgba(20,19,17,.5),inset 12px 0 16px -12px rgba(20,19,17,.35),inset -12px 0 16px -12px rgba(20,19,17,.3);border-left:2.5px solid var(--ink);border-right:2.5px solid var(--ink)}
.rr-rows{position:relative;display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:end;z-index:2}
.rr-row{position:relative;display:flex;align-items:flex-end}
.rr-case[data-mode="one"] .rr-row:first-child{grid-column:1;grid-row:1}
.rr-case[data-mode="one"] .rr-board~.rr-row{grid-column:2;grid-row:1}
.rr-case[data-mode="one"] .rr-row:first-child+.rr-board{display:none}
.rr-case[data-mode="one"] .rr-board:last-child{grid-column:1/-1;grid-row:2}
/* the shelf board: one long board, or one per row when the shelf stacks */
.rr-board{position:relative;height:18px;margin:0 -14px;background:var(--grain-c),var(--coral-2);border-top:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);z-index:3}
.rr-board::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px;background:linear-gradient(rgba(20,19,17,.28),transparent)}
.rr-case[data-mode="two"] .rr-rows{grid-template-columns:minmax(0,1fr)}
.rr-case[data-mode="two"] .rr-row+.rr-board,.rr-case[data-mode="two"] .rr-board+.rr-row{margin-top:30px}
.rr-park{flex:none;width:calc(var(--u) * 1.15)}
.rr-case[data-mode="two"] .rr-park,.rr-case[data-mode="two"] .rr-ladder{display:none}

/* a book */
.rr-bk{position:relative;flex:none;width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--uh));margin-right:3px;transform-origin:50% 100%;transition:transform .5s var(--spring);-webkit-tap-highlight-color:transparent;touch-action:manipulation;outline-offset:4px}
.rr-fill{position:absolute;inset:0;border-radius:4px 4px 2px 2px;background:var(--bg,#fbf9f4)}
.rr-sp{position:absolute;inset:0;border:2.2px solid var(--ink);border-radius:4px 4px 2px 2px;overflow:hidden;color:var(--fg,var(--ink))}
/* tooled bands across the spine, top and bottom */
.rr-sp::before,.rr-sp::after{content:"";position:absolute;left:0;right:0;height:7px;border-top:1.6px solid var(--bd,var(--ink));border-bottom:1.6px solid var(--bd,var(--ink));opacity:.85}
.rr-sp::before{top:calc(var(--uh) * .035)}
.rr-sp::after{bottom:calc(var(--uh) * .155)}
.rr-sp>.rr-sh{position:absolute;top:0;bottom:0;right:0;width:24%;background:repeating-linear-gradient(45deg,rgba(20,19,17,.24) 0 1px,transparent 1px 5px);pointer-events:none}
.rr-bk.is-ink{--bg:var(--ink);--fg:var(--paper);--bd:var(--paper)}
.rr-bk.is-ink .rr-sh{background:repeating-linear-gradient(45deg,rgba(245,242,236,.16) 0 1px,transparent 1px 5px)}
.rr-bk.is-coral .rr-fill{background:var(--grain-c),var(--coral-2);transform:translate(var(--mx),var(--my))}
.rr-bk.is-light .rr-fill{background:var(--grain-c),var(--coral-l);transform:translate(var(--mx),var(--my))}
.rr-bk.is-paper .rr-fill{background:radial-gradient(circle,rgba(245,140,138,.85) 1px,transparent 1.3px) 0 0/4.2px 4.2px,#fbf9f4}
.rr-bk.is-paper .rr-fill::after{content:"";position:absolute;left:0;right:0;top:calc(var(--uh) * .035 + 7px);bottom:calc(var(--uh) * .155 + 7px);background:#fbf9f4}
.rr-bk.is-hatch .rr-fill{background:repeating-linear-gradient(45deg,rgba(20,19,17,.62) 0 1.1px,transparent 1.1px 5px),#fbf9f4}
.rr-tw{position:absolute;left:4px;right:4px;top:calc(var(--uh) * .035 + 13px);bottom:calc(var(--uh) * .155 + 13px);display:flex;align-items:center;justify-content:center;z-index:1}
.rr-t{writing-mode:vertical-rl;text-orientation:sideways;font-family:var(--display);font-weight:700;font-size:var(--fs,15px);line-height:1.04;letter-spacing:.005em;text-align:center;max-height:100%;overflow-wrap:normal}
.rr-bk.is-hatch .rr-t{padding:7px 3px;background:#fbf9f4;border:1.6px solid var(--ink);box-shadow:2px 2px 0 rgba(20,19,17,.35)}
/* the classmark sticker: reading time */
.rr-m{position:absolute;left:50%;bottom:calc(var(--uh) * .035);width:calc(min(var(--w) * var(--u) - 12px, 34px));aspect-ratio:1;transform:translateX(-50%);display:grid;place-content:center;justify-items:center;border-radius:50%;background:#fbf9f4;border:1.6px solid var(--ink);color:var(--ink);line-height:.9;z-index:1}
.rr-m b{font-size:calc(min(var(--w) * var(--u) - 12px, 34px) * .42);font-weight:700}
.rr-m small{font-size:calc(min(var(--w) * var(--u) - 12px, 34px) * .2);font-weight:640;letter-spacing:.08em;text-transform:uppercase}
/* the top edge of the pages, seen when the book tilts toward you */
.rr-pages{position:absolute;left:3px;right:3px;top:-11px;height:12px;border:1.6px solid var(--ink);border-bottom:0;border-radius:3px 3px 0 0;background:repeating-linear-gradient(180deg,#fbf9f4 0 1.4px,#d7cdbd 1.4px 2.4px);transform:scaleY(0);transform-origin:50% 100%;transition:transform .35s var(--ease)}
.rr-bk::after{content:"";position:absolute;left:8%;right:-6%;bottom:0;height:70%;background:linear-gradient(90deg,rgba(20,19,17,.28),transparent);transform:skewX(-8deg);transform-origin:0 100%;opacity:.45;z-index:-1;transition:opacity .4s,transform .4s var(--ease)}
.rr-bk.tilt,.rr-bk:focus-visible{transform:translateY(-8px) rotate(-1.4deg);z-index:4}
.rr-bk.tilt .rr-pages,.rr-bk:focus-visible .rr-pages{transform:scaleY(1)}
.rr-bk.tilt::after,.rr-bk:focus-visible::after{opacity:.75;transform:skewX(-18deg) translateX(6px)}
@media (hover:hover) and (pointer:fine){
  .rr-bk:hover{transform:translateY(-8px) rotate(-1.4deg);z-index:4}
  .rr-bk:hover .rr-pages{transform:scaleY(1)}
  .rr-bk:hover::after{opacity:.75;transform:skewX(-18deg) translateX(6px)}
}
.rr-bk.pull{transform:translateY(-26px) rotate(-1deg);z-index:5;transition-duration:.18s}
.rr-bk.out{visibility:hidden;transition:none}
.rr-bk.lean-r{transform-origin:100% 100%;transform:rotate(4.5deg)}
.rr-bk.lean-l{transform-origin:0 100%;transform:rotate(-4.5deg)}
.rr-bk.home{animation:rrHome .6s var(--spring)}
@keyframes rrHome{0%{transform:translateY(-30px)}55%{transform:translateY(3px)}100%{transform:none}}

/* bookends */
.rr-end{position:relative;flex:none;width:calc(var(--u) * 1.02);height:calc(var(--uh) * .7);margin-right:3px}
.rr-end svg{position:absolute;inset:auto 0 0 0;width:100%;height:100%;overflow:visible}
.rr-case[data-mode="two"] .rr-end.r{margin-left:auto}

/* the library ladder rides the brass rail */
.rr-ladder{position:absolute;left:0;top:-15px;bottom:18px;width:calc(var(--u) * .74);transform:translateX(var(--lx,0px));z-index:6;cursor:grab;touch-action:none}
.rr-ladder:active{cursor:grabbing}
.rr-ladder::before,.rr-ladder::after{content:"";position:absolute;top:6px;bottom:6px;width:9px;background:var(--grain-c),var(--coral-l);border:2px solid var(--ink);border-radius:3px}
.rr-ladder::before{left:4px;transform:rotate(1.1deg);transform-origin:50% 0}
.rr-ladder::after{right:4px;transform:rotate(-1.1deg);transform-origin:50% 0}
.rr-rung{position:absolute;left:10px;right:10px;top:28px;bottom:22px;background:repeating-linear-gradient(180deg,transparent 0 30px,var(--ink) 30px 32.5px,#fbf9f4 32.5px 35.5px,var(--ink) 35.5px 38px,transparent 38px 46px)}
.rr-hook{position:absolute;top:-4px;width:13px;height:14px;border:2.2px solid var(--ink);border-bottom:0;border-radius:8px 8px 0 0}
.rr-hook.l{left:2px}.rr-hook.r{right:2px}
.rr-wheel{position:absolute;bottom:-10px;width:15px;height:15px;border-radius:50%;background:conic-gradient(var(--ink) 0 25%,#fbf9f4 0 50%,var(--ink) 0 75%,#fbf9f4 0);border:2px solid var(--ink);transform:rotate(var(--wr,0deg))}
.rr-wheel.l{left:1px}.rr-wheel.r{right:1px}

/* the plinth: a brass plaque and the drawer with the plain list */
.rr-plinth{position:relative;margin:0 calc(var(--side) * -1);padding:16px var(--side) 18px;background:var(--grain-c),var(--coral-l);border:2.5px solid var(--ink);border-top:0;z-index:3}
.rr-plaque{display:flex;justify-content:center;margin:0 0 14px}
.rr-plaque span{position:relative;padding:5px 22px 6px;background:linear-gradient(180deg,#fff4ee,#f9c9c3);border:2px solid var(--ink);border-radius:2px;box-shadow:2px 2px 0 rgba(20,19,17,.45);font-size:.7rem;font-weight:640;letter-spacing:.2em;text-transform:uppercase}
.rr-plaque span::before,.rr-plaque span::after{content:"";position:absolute;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;border:1.4px solid var(--ink);background:#fbf9f4}
.rr-plaque span::before{left:7px}.rr-plaque span::after{right:7px}
.rr-hint-t{margin-top:16px;font-size:.86rem;color:var(--ink-2)}

/* drawers: a shelf list under the books, an inventory under the case */
.rr-dr-front{position:relative;display:flex;align-items:center;justify-content:center;gap:16px;width:100%;min-height:54px;padding:8px 16px;background:var(--grain-c),var(--coral);border:2.5px solid var(--ink);box-shadow:inset 0 -6px 0 rgba(20,19,17,.12);transition:transform .6s var(--spring)}
.rr-dr-front:hover{transform:translateY(2px)}
.rr-dr-card{padding:3px 14px 4px;background:#fbf9f4;border:2px solid var(--ink);box-shadow:inset 0 0 0 2px #fbf9f4,inset 0 0 0 3.2px rgba(20,19,17,.4);font-size:.7rem;font-weight:640;letter-spacing:.18em;text-transform:uppercase}
.rr-knob{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff2ea 0 20%,var(--coral-l) 21%);border:2.2px solid var(--ink);box-shadow:1.5px 1.5px 0 var(--ink)}
.rr-drawer.open .rr-dr-front{transform:translateY(6px) scale(1.01);box-shadow:inset 0 -6px 0 rgba(20,19,17,.12),0 8px 0 -2px var(--ink)}
.rr-dr-box{display:grid;grid-template-rows:0fr;transition:grid-template-rows .75s var(--spring);margin:0 10px}
.rr-drawer.open .rr-dr-box{grid-template-rows:1fr}
.rr-dr-in{min-height:0;overflow:hidden}
.rr-drawer:not(.open) .rr-dr-in{visibility:hidden;transition:visibility 0s .75s}
html:not(.js) .rr-dr-box{grid-template-rows:1fr}
html:not(.js) .rr-dr-in{visibility:visible}
.rr-list{list-style:none;margin:0;padding:12px clamp(16px,2vw,26px) 16px;background:#fbf9f4;border:2px solid var(--ink);border-top:0;columns:2 300px;column-gap:40px}
.rr-list li{break-inside:avoid;padding:8px 0 9px;border-bottom:1px dashed rgba(20,19,17,.2)}
.rr-list a{display:grid;grid-template-columns:1.9rem 1fr auto;gap:10px;align-items:baseline;text-decoration:none}
.rr-li-n{font-size:.68rem;font-weight:640;letter-spacing:.1em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rr-li-t{font-family:var(--display);font-weight:700;font-size:1.02rem;line-height:1.15}
.rr-li-m{font-size:.68rem;font-weight:620;letter-spacing:.12em;text-transform:uppercase;color:var(--coral-ink);white-space:nowrap}
.rr-list a:hover .rr-li-t{text-decoration:underline;text-decoration-color:var(--coral-2);text-decoration-thickness:2px;text-underline-offset:3px}
.rr-li-d{display:block;margin:3px 0 0 calc(1.9rem + 10px);font-family:var(--serif);font-style:italic;font-size:.98rem;line-height:1.3;color:var(--ink-2)}

/* ==== THE READING DESK: the book you took down, open ===================== */
.rr-read{position:fixed;inset:0;z-index:92;display:grid;place-items:center;padding:24px;--ph:min(620px,calc(var(--vh,100svh) - 110px));--pw:min(calc(var(--ph) * .74),calc((100vw - 96px) / 2))}
.rr-read[hidden]{display:none}
.rr-veil{position:absolute;inset:0;background:radial-gradient(60% 62% at 50% 46%,rgba(249,183,178,.5),rgba(30,25,20,.72) 72%),rgba(20,19,17,.45);background-blend-mode:normal;opacity:0;transition:opacity .45s var(--ease)}
.rr-veil::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.6;mix-blend-mode:multiply}
.rr-read.in .rr-veil{opacity:1}
.rr-desk{position:relative;display:grid;place-items:center}
.rr-x{position:fixed;right:clamp(14px,3vw,34px);top:clamp(14px,3vw,30px);z-index:3;opacity:0;transition:opacity .4s}
.rr-read.open .rr-x{opacity:1}
.rr-ob{--cv-bg:#141311;--cv-fg:#f5f2ec;position:relative;width:calc(var(--pw) * 2);height:var(--ph);transform-style:preserve-3d;perspective:2600px;transform:translateX(-25%);transition:transform .95s var(--ease)}
.rr-read.open .rr-ob{transform:none}
.rr-read.quick .rr-ob,.rr-read.quick .rr-cv{transition-duration:.42s}
.rr-ob.look-ink{--cv-bg:#141311;--cv-fg:#f5f2ec}
.rr-ob.look-coral{--cv-bg:var(--grain-c),#f58c8a;--cv-fg:#141311}
.rr-ob.look-light{--cv-bg:var(--grain-c),#f9b7b2;--cv-fg:#141311}
.rr-ob.look-paper{--cv-bg:radial-gradient(circle,rgba(245,140,138,.85) 1.2px,transparent 1.5px) 0 0/5px 5px,#fbf9f4;--cv-fg:#141311}
.rr-ob.look-hatch{--cv-bg:repeating-linear-gradient(45deg,rgba(20,19,17,.62) 0 1.2px,transparent 1.2px 6px),#fbf9f4;--cv-fg:#141311}
.rr-bc{position:absolute;left:50%;right:-9px;top:-9px;bottom:-9px;background:var(--cv-bg);border:2.5px solid var(--ink);border-radius:2px 7px 7px 2px;box-shadow:9px 11px 0 rgba(20,19,17,.4)}
.rr-pr{position:absolute;left:50%;right:0;top:0;bottom:0;background:#fbf9f4;border:1.6px solid var(--ink);box-shadow:inset 22px 0 26px -20px rgba(20,19,17,.35),3px 3px 0 #e7dfd2,5px 5px 0 -1px #fbf9f4,6px 6px 0 -1px var(--ink)}
.rr-pr-in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:0;padding:clamp(26px,3.4vw,46px) clamp(24px,3vw,44px) clamp(40px,4vw,56px) clamp(30px,3.6vw,52px);overflow:auto;scrollbar-width:thin}
.rr-run{position:absolute;top:18px;left:0;right:0;text-align:center;font-size:.62rem;font-weight:620;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
.rr-pr-plate{display:none;margin:0 0 18px}
.rr-pk{display:flex;justify-content:space-between;gap:12px;font-size:.7rem;font-weight:620;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);padding-bottom:12px;border-bottom:1.5px solid var(--ink);margin-bottom:18px}
.rr-pk span:last-child{color:var(--coral-ink)}
.rr-pt{font-family:var(--display);font-weight:700;font-size:clamp(1.55rem,2.5vw,2.25rem);line-height:1.03;letter-spacing:-.005em}
.rr-pd{margin-top:14px;font-family:var(--serif);font-style:italic;font-size:clamp(1.12rem,1.5vw,1.3rem);line-height:1.3;color:var(--coral-ink)}
.rr-pa{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.rr-arr{display:inline-block;transition:transform .3s var(--ease)}
.pill:hover .rr-arr{transform:translateX(3px)}
.rr-pn{display:flex;align-items:center;gap:12px;margin-top:22px;font-size:.78rem;font-weight:560;letter-spacing:.08em;color:var(--ink-3)}
.rr-pn .round{width:38px;height:38px;font-size:.95rem}
.rr-folio{position:absolute;bottom:16px;right:22px;font-size:.66rem;letter-spacing:.14em;color:var(--ink-3)}
.rr-pr .rr-slip-s{display:none}

.rr-cv{position:absolute;left:50%;right:-9px;top:-9px;bottom:-9px;transform-origin:0 50%;transform-style:preserve-3d;transition:transform .95s var(--ease);z-index:2}
.rr-read.open .rr-cv{transform:rotateY(-180deg)}
.rr-cvf,.rr-cvb{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.rr-cvf{display:grid;place-items:center;background:var(--cv-bg);color:var(--cv-fg);border:2.5px solid var(--ink);border-radius:2px 7px 7px 2px;box-shadow:inset 14px 0 0 -8px rgba(20,19,17,.25)}
.rr-cv-frame{position:absolute;inset:18px 18px 18px 26px;border:2px solid currentColor;box-shadow:inset 0 0 0 5px transparent,inset 0 0 0 6.5px currentColor;opacity:.75}
.rr-cv-t{position:relative;max-width:76%;font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,2.4vw,2.1rem);line-height:1.04;text-align:center}
.rr-ob.look-hatch .rr-cv-t,.rr-ob.look-paper .rr-cv-t{padding:14px 16px;background:#fbf9f4;border:2px solid var(--ink)}
.rr-cv-no{position:absolute;top:34px;left:0;right:0;text-align:center;font-size:.66rem;font-weight:640;letter-spacing:.24em;text-transform:uppercase}
.rr-cv-mark{position:absolute;bottom:34px;left:50%;margin-left:-9px}
.rr-cvb{transform:rotateY(180deg);background:var(--cv-bg);border:2.5px solid var(--ink);border-radius:7px 2px 2px 7px;padding:11px 0 11px 11px}
.rr-cvb::before{content:"";position:absolute;inset:11px 0 11px 11px;background:radial-gradient(circle at 30% 30%,rgba(245,140,138,.55) 1.1px,transparent 1.5px) 0 0/7px 7px,var(--grain-c),#f9d3cd;border:1.5px solid var(--ink);border-right:0;box-shadow:inset -22px 0 26px -20px rgba(20,19,17,.4)}
.rr-cvb>*{position:relative}
.rr-cvb{display:flex;flex-direction:column;align-items:center;justify-content:space-between}
.rr-plate{margin:clamp(22px,3vw,40px) 0 0;width:72%;padding:10px 10px 8px;background:#fbf9f4;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transform:rotate(-1.6deg)}
.rr-plate .duo{display:block;aspect-ratio:4/3.2}
.rr-plate .duo img,.rr-pr-plate .duo img{filter:grayscale(1) contrast(1.4) brightness(.98)}
.rr-plate figcaption{margin-top:7px;font-family:var(--serif);font-style:italic;font-size:.9rem;text-align:center;color:var(--ink-2)}
.rr-pr-plate .duo{display:block;aspect-ratio:16/10;border:2px solid var(--ink)}
.rr-pocket{width:66%;margin-bottom:clamp(20px,2.6vw,34px);padding:0 12px 30px;background:#efe6d6;border:2px solid var(--ink);border-radius:0 0 4px 4px;box-shadow:inset 0 6px 0 rgba(20,19,17,.08)}
.rr-pocket-l{position:absolute;bottom:9px;left:0;right:0;text-align:center;font-size:.58rem;font-weight:640;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.rr-slip{position:relative;display:grid;grid-template-columns:1fr;gap:4px;padding:8px 12px 12px;background:repeating-linear-gradient(180deg,transparent 0 21px,rgba(20,19,17,.12) 21px 22px) 0 18px,#fbf9f4;border:1.5px solid var(--ink);transform:translateY(-44px) rotate(1deg);margin-bottom:-36px;min-height:96px}
.rr-slip b{font-size:.6rem;font-weight:660;letter-spacing:.2em;text-transform:uppercase}
.rr-slip-d{font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--ink-2)}
.rr-stamp{position:absolute;right:10px;bottom:8px;padding:4px 9px 3px;border:3px double var(--coral-2);border-radius:5px;color:var(--coral-2);font-family:var(--sans);font-style:normal;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;transform:rotate(-9deg) scale(.9);opacity:0;-webkit-mask:var(--speck) 0 0/120px 120px;mask:var(--speck) 0 0/120px 120px}
.rr-stamp.on{animation:rrStamp .55s cubic-bezier(.2,.9,.25,1.25) forwards}
@keyframes rrStamp{0%{opacity:0;transform:rotate(-9deg) scale(1.9)}55%{opacity:1;transform:rotate(-9deg) scale(.82)}100%{opacity:.95;transform:rotate(-9deg) scale(.9)}}

/* phones: one page, the cover swings away */
.rr-read.single{--pw:min(calc(100vw - 36px),430px);--ph:min(calc(var(--vh,100svh) - 96px),700px)}
.rr-read.single .rr-ob{width:var(--pw);transform:none}
.rr-read.single .rr-bc,.rr-read.single .rr-pr,.rr-read.single .rr-cv{left:0}
.rr-read.single .rr-bc{left:-9px}
.rr-read.single .rr-cv{left:-9px;transition:transform .9s var(--ease),opacity .5s .35s}
.rr-read.single.open .rr-cv{transform:rotateY(-112deg);opacity:0}
.rr-read.single .rr-pr-plate{display:block}
.rr-read.single .rr-pr .rr-slip-s{display:grid;margin-top:22px;transform:rotate(1deg);min-height:70px}
.rr-read.single .rr-pr-in{justify-content:flex-start;padding:46px 22px 48px 26px}
.rr-read.single .rr-pn span,.rr-read.single .rr-folio{display:none}

/* ==== THE INSTRUMENT STORE =============================================== */
.rr-shop{display:grid;grid-template-columns:minmax(150px,200px) minmax(0,1fr) minmax(260px,320px);gap:clamp(22px,2.8vw,44px);align-items:start}
.rr-fit{position:relative;display:grid;gap:14px;align-self:end}
.rr-fit-note{font-size:.92rem;line-height:1.4;color:var(--ink-2)}
.rr-fit-note span{display:block;font-family:var(--serif);font-style:italic;font-size:1.08rem;color:var(--coral-ink)}

.rr-ins{position:relative;display:grid;justify-items:center;align-content:end;gap:4px;padding:6px 4px 16px;-webkit-tap-highlight-color:transparent;outline-offset:2px;cursor:pointer}
.rr-ins-art{display:block;width:100%;aspect-ratio:1/1.1;max-width:196px;transition:transform .55s var(--spring)}
.rr-ins-art svg{width:100%;height:100%;overflow:visible}
@media (hover:hover) and (pointer:fine){.rr-ins:hover .rr-ins-art{transform:translateY(-5px)}}
.rr-ins:focus-visible .rr-ins-art{transform:translateY(-5px)}
.rr-ins[aria-pressed="true"]::before{content:"";position:absolute;left:4%;right:4%;bottom:10px;height:62%;background:radial-gradient(50% 60% at 50% 100%,rgba(249,183,178,.85),rgba(249,183,178,0) 72%);pointer-events:none;z-index:-1}

/* paper tags, tied on with string */
.rr-tag{position:relative;display:grid;justify-items:center;gap:0;max-width:100%;padding:4px 10px 5px 17px;background:#fbf9f4;border:1.6px solid var(--ink);border-radius:3px 2px 2px 3px;box-shadow:2px 2px 0 rgba(20,19,17,.35);text-align:center;transform:rotate(-2.2deg);transform-origin:12px 50%;transition:transform .7s var(--spring),background .3s,color .3s}
.rr-tag::before{content:"";position:absolute;left:6px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;border:1.4px solid var(--ink);background:var(--paper-2)}
.rr-tag b{font-family:var(--serif);font-style:italic;font-weight:440;font-size:clamp(.84rem,.98vw,.95rem);line-height:1.1}
.rr-tag small{font-size:.54rem;margin-top:2px;font-weight:640;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.rr-ins:nth-child(even) .rr-tag{transform:rotate(1.8deg)}
@media (hover:hover) and (pointer:fine){.rr-ins:hover .rr-tag{transform:rotate(-6deg)}.rr-ins:nth-child(even):hover .rr-tag{transform:rotate(6deg)}}
.rr-ins[aria-pressed="true"] .rr-tag{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.rr-ins[aria-pressed="true"] .rr-tag small{color:var(--coral)}
.rr-ins[aria-pressed="true"] .rr-tag::before{background:var(--ink);border-color:var(--paper)}

/* the dressmaker's dummy, by the door */
.rr-dummy{padding-bottom:0}
.rr-dummy .rr-ins-art{aspect-ratio:220/420;max-width:220px}
.rr-dummy[aria-pressed="true"]::before{bottom:0;height:40%}
.rr-pin-tag{position:absolute;left:50%;top:27%;display:grid;justify-items:center;gap:1px;padding:7px 12px 7px;background:#fbf9f4;border:1.6px solid var(--ink);box-shadow:2px 3px 0 rgba(20,19,17,.4);transform:translateX(-50%) rotate(-5deg);transition:transform .6s var(--spring),background .3s,color .3s;white-space:nowrap}
.rr-pin-tag::before{content:"";position:absolute;top:-6px;left:50%;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:var(--coral-2);box-shadow:inset 0 0 0 2px var(--ink),1px 2px 0 rgba(20,19,17,.4)}
.rr-pin-tag b{font-size:.62rem;font-weight:660;letter-spacing:.16em;text-transform:uppercase}
.rr-pin-tag small{font-family:var(--serif);font-style:italic;font-size:.98rem}
.rr-dummy[aria-pressed="true"] .rr-pin-tag{background:var(--ink);color:var(--paper)}
@media (hover:hover) and (pointer:fine){.rr-dummy:hover .rr-pin-tag{transform:translateX(-50%) rotate(3deg)}}

/* the glass case */
.rr-vit{position:relative;min-width:0}
.rr-vit-top{position:relative;height:50px;margin:0 -10px;display:grid;place-items:center;background:var(--grain-c),var(--coral-l);border:2.5px solid var(--ink);z-index:2}
.rr-vit-top::before{content:"";position:absolute;inset:-12px 22px auto;height:12px;border:2.5px solid var(--ink);border-bottom:0;background:var(--grain-c),var(--coral-2);border-radius:5px 5px 0 0}
.rr-vit-title{display:flex;align-items:baseline;gap:.8em;font-size:.76rem;font-weight:620;letter-spacing:.3em;text-transform:uppercase}
.rr-vit-title i{font-family:var(--serif);font-weight:400;letter-spacing:.02em;text-transform:none;font-size:1.04rem;opacity:.85}
.rr-vit-title .mark{transform:translateY(3px)}
.rr-handle-sign{position:absolute;z-index:3;left:-26px;top:42px;padding:5px 10px 6px;background:var(--ink);color:var(--paper);font-size:.64rem;font-weight:620;letter-spacing:.2em;text-transform:uppercase;border-radius:3px;box-shadow:2px 2px 0 var(--coral-2);transform-origin:50% -14px;animation:sway 5.2s ease-in-out infinite;white-space:nowrap}
.rr-handle-sign::before,.rr-handle-sign::after{content:"";position:absolute;top:-15px;width:1.5px;height:17px;background:var(--ink)}
.rr-handle-sign::before{left:12px;transform:rotate(14deg)}.rr-handle-sign::after{right:12px;transform:rotate(-14deg)}
.rr-vit-body{position:relative;padding:14px;background:var(--grain-c),var(--coral-2)}
.rr-vit-body::after{content:"";position:absolute;inset:0;border:2.5px solid var(--ink);transform:translate(calc(var(--mx) * -1),calc(var(--my) * -1));pointer-events:none}
.rr-vit-in{position:relative;padding:22px clamp(10px,1.4vw,20px) 4px;border:2.5px solid var(--ink);background:repeating-linear-gradient(90deg,rgba(20,19,17,.045) 0 1px,transparent 1px 7px),linear-gradient(180deg,#e9e1d4,#dcd2c2);box-shadow:inset 0 14px 18px -12px rgba(20,19,17,.45)}
.rr-glass-shelf{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px clamp(8px,1.4vw,20px);z-index:1}
/* each instrument stands on a length of glass shelf; together they make the shelf */
.rr-glass-shelf>*{position:relative}
.rr-glass-shelf>*::after{content:"";position:absolute;left:calc(clamp(8px,1.4vw,20px) * -.5 - 1px);right:calc(clamp(8px,1.4vw,20px) * -.5 - 1px);bottom:-4px;height:9px;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(249,183,178,.55));border-top:1.6px solid var(--ink);border-bottom:1px solid rgba(20,19,17,.45);box-shadow:0 7px 9px -5px rgba(20,19,17,.3);pointer-events:none}
.rr-glass-shelf>*:nth-child(3n+1)::after{left:calc(clamp(10px,1.4vw,20px) * -1)}
.rr-glass-shelf>*:nth-child(3n)::after{right:calc(clamp(10px,1.4vw,20px) * -1)}
.rr-glare{position:absolute;inset:0;pointer-events:none;z-index:4;background:linear-gradient(112deg,transparent 14%,rgba(255,255,255,.4) 14.4%,rgba(255,255,255,.1) 22%,transparent 22.4%,transparent 61%,rgba(255,255,255,.26) 61.4%,transparent 65%);transform:translateX(var(--gx,0px));transition:transform 1.2s var(--ease)}
.rr-lock{position:absolute;right:-9px;top:50%;width:10px;height:46px;margin-top:-23px;border:2px solid var(--ink);border-radius:4px;background:linear-gradient(180deg,#fff4ee,var(--coral-l));z-index:5}
.rr-lock::after{content:"";position:absolute;left:50%;top:16px;width:3px;height:9px;margin-left:-1.5px;border-radius:2px 2px 1px 1px;background:var(--ink)}
.rr-price-cell{display:grid;place-items:center}
.rr-price{display:grid;gap:3px;width:min(150px,100%);padding:12px 12px 13px;margin-bottom:22px;background:#fbf9f4;border:1.6px solid var(--ink);box-shadow:3px 3px 0 rgba(20,19,17,.4);transform:rotate(3deg);font-size:.7rem;line-height:1.3}
.rr-price-cell .rr-price::after{display:none}
.rr-price b{font-size:.6rem;font-weight:660;letter-spacing:.2em;text-transform:uppercase;padding-bottom:5px;margin-bottom:3px;border-bottom:1.4px solid var(--ink)}
.rr-price span{display:flex;justify-content:space-between;gap:6px;color:var(--ink-2)}
.rr-price i{font-family:var(--serif);font-size:1.05rem;line-height:1;color:var(--coral-ink)}
.rr-vit-foot{position:relative;margin:0 -6px}
.rr-vit-foot .rr-dr-front{min-height:48px;border-top:0}
.rr-inv{columns:1}

/* the label, hung beside the case */
.rr-label{position:sticky;top:calc(var(--nav-h) + 24px);padding:44px clamp(20px,2vw,28px) 26px;background:#fbf9f4;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--coral-2);transform:rotate(.7deg);transform-origin:50% -34px;margin-top:34px}
.rr-lab-hole{position:absolute;left:50%;top:14px;width:14px;height:14px;margin-left:-7px;border-radius:50%;border:2px solid var(--ink);background:var(--paper-2)}
.rr-lab-hole::before,.rr-lab-hole::after{content:"";position:absolute;bottom:8px;width:2px;height:44px;background:var(--ink);transform-origin:50% 100%}
.rr-lab-hole::before{left:2px;transform:rotate(-28deg)}.rr-lab-hole::after{right:2px;transform:rotate(28deg)}
.rr-label.swing{animation:rrSwing 1.2s var(--ease)}
@keyframes rrSwing{0%{transform:rotate(.7deg)}18%{transform:rotate(-3.4deg)}40%{transform:rotate(2.6deg)}62%{transform:rotate(-1.2deg)}82%{transform:rotate(1deg)}100%{transform:rotate(.7deg)}}
.rr-lab-in{transition:opacity .2s}
.rr-lab-in.fade{opacity:0}
.rr-lab-k{display:flex;justify-content:space-between;gap:10px;padding-bottom:10px;margin-bottom:14px;border-bottom:1.5px solid var(--ink);font-size:.68rem;font-weight:640;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.rr-lab-k span:first-child{color:var(--coral-ink)}
.rr-lab-n{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,2.3vw,2.2rem);line-height:1.02;letter-spacing:-.005em}
.rr-lab-d{margin-top:12px;font-size:1.06rem;line-height:1.45;color:var(--ink)}
.rr-lab-tip{margin-top:14px;padding:10px 12px;background:var(--grain-c),var(--coral-l);font-family:var(--serif);font-style:italic;font-size:1.04rem;line-height:1.3}
.rr-lab-tip[hidden]{display:none}
.rr-label .pill{margin-top:20px}

/* ---- the instruments come alive ---- */
/* the core sample: the strata shift */
.cs-b{transform-box:view-box;transition:transform .9s var(--spring)}
.rr-ins.go .cs-b{animation:csShift 1.6s var(--ease)}
@keyframes csShift{0%,100%{transform:none}35%{transform:translateX(var(--dx,4px))}65%{transform:translateX(calc(var(--dx,4px) * -.4))}}
@media (hover:hover) and (pointer:fine){.rr-ins:hover .cs-b{transform:translateX(var(--dx,4px))}}
.cs-am{transform-box:fill-box;transform-origin:50% 50%;transition:transform .8s var(--spring)}
.rr-ins[aria-pressed="true"] .cs-am,.rr-ins.go .cs-am{transform:scale(1.25) rotate(40deg)}
.cs-glow{opacity:0;transition:opacity .6s}
.rr-ins[aria-pressed="true"] .cs-glow{opacity:.85}
.cs-hm{transform-box:fill-box;transform-origin:80% 100%}
.rr-ins.go .cs-hm{animation:csTap .9s var(--ease)}
@keyframes csTap{30%{transform:rotate(-14deg)}55%{transform:rotate(3deg)}100%{transform:none}}

/* the mirror: the spiral turns, the glass catches the light */
.sm-sp{transform-box:view-box;transform-origin:100px 84px;animation:smSpin 26s linear infinite}
.rr-ins:hover .sm-sp,.rr-ins.go .sm-sp,.rr-ins[aria-pressed="true"] .sm-sp{animation-duration:3.2s}
@keyframes smSpin{to{transform:rotate(360deg)}}
.sm-gl{transform:translateX(-120px);opacity:.9}
.rr-ins.go .sm-gl{animation:smGlint 1.1s var(--ease)}
@media (hover:hover) and (pointer:fine){.rr-ins:hover .sm-gl{animation:smGlint 1.1s var(--ease)}}
@keyframes smGlint{to{transform:translateX(130px)}}
.sm-fr{transform-box:view-box;transform-origin:100px 198px;transition:transform .8s var(--spring)}
.rr-ins[aria-pressed="true"] .sm-fr{transform:rotate(-4deg)}

/* the bust: a lump of clay finds its place, the wheel turns */
.sf-pel{transform-box:view-box}
.rr-ins.go .sf-pel{animation:sfPel 1.1s cubic-bezier(.3,.6,.4,1) forwards}
@keyframes sfPel{0%{transform:none}45%{transform:translate(20px,-118px)}100%{transform:translate(41px,-96px) scale(.8)}}
.sf-patch{opacity:0;transition:opacity .3s .95s}
.rr-ins.go .sf-patch,.rr-ins[aria-pressed="true"] .sf-patch{opacity:1}
.rr-ins[aria-pressed="true"]:not(.go) .sf-pel{opacity:0}
.sf-tk{animation:sfTick 9s linear infinite}
.rr-ins:hover .sf-tk,.rr-ins.go .sf-tk,.rr-ins[aria-pressed="true"] .sf-tk{animation-duration:1.4s}
@keyframes sfTick{to{stroke-dashoffset:-48}}
.sf-bust{transform-box:fill-box;transform-origin:50% 100%}
.rr-ins.go .sf-bust{animation:sfTurn 1.4s var(--ease)}
@keyframes sfTurn{30%{transform:scaleX(.93)}60%{transform:scaleX(1.03)}100%{transform:none}}

/* the meter: the needle swings, the bulb lights */
.en-nd{transform-box:view-box;transform-origin:84px 168px;transform:rotate(-62deg);transition:transform 1.1s var(--spring)}
.rr-ins[aria-pressed="true"] .en-nd{transform:rotate(46deg)}
@media (hover:hover) and (pointer:fine){.rr-ins:hover .en-nd{transform:rotate(30deg)}.rr-ins[aria-pressed="true"]:hover .en-nd{transform:rotate(52deg)}}
.rr-ins.go .en-nd{animation:enSwing 1.3s var(--ease)}
@keyframes enSwing{0%{transform:rotate(-62deg)}40%{transform:rotate(64deg)}62%{transform:rotate(36deg)}80%{transform:rotate(52deg)}100%{transform:rotate(46deg)}}
.en-glow,.en-rays{opacity:0;transition:opacity .5s}
.rr-ins[aria-pressed="true"] .en-glow,.rr-ins[aria-pressed="true"] .en-rays{opacity:1}
@media (hover:hover) and (pointer:fine){.rr-ins:hover .en-glow{opacity:.6}}
.rr-ins.go .en-glow{animation:rrFlick 1s linear .5s backwards}
.en-fil{transition:stroke .4s}
.rr-ins[aria-pressed="true"] .en-fil{stroke:#a13f39}

/* the scan: the building's windows light, a pulse goes out */
.sc-w{transition:fill .35s;transition-delay:calc(var(--i) * 70ms)}
.rr-ins[aria-pressed="true"] .sc-w.on,.rr-ins.go .sc-w.on{fill:#f58c8a}
@media (hover:hover) and (pointer:fine){.rr-ins:hover .sc-w.on{fill:#f9b7b2}}
.sc-pl{transform-box:fill-box;transform-origin:50% 50%;opacity:0}
.rr-ins.go .sc-pl,.rr-ins[aria-pressed="true"] .sc-pl{animation:scPulse 1.8s var(--ease) infinite}
.rr-ins.go .sc-pl.b,.rr-ins[aria-pressed="true"] .sc-pl.b{animation-delay:.28s}
@keyframes scPulse{0%{opacity:.9;transform:scale(1)}60%,100%{opacity:0;transform:scale(2.6)}}
.sc-ch{transform-box:fill-box;transform-origin:50% 50%}
.rr-ins.go .sc-ch{animation:scBeat 1.8s ease-in-out infinite}
@keyframes scBeat{0%,40%,100%{transform:none}10%{transform:scale(1.08)}22%{transform:scale(1.03)}}

/* the dummy: the tape's coil */
.ft-coil{transform-box:fill-box;transform-origin:50% 50%;transition:opacity .3s}

/* ==== CLOSING: the sign, corrected ======================================= */
.rr-hush{padding-top:clamp(40px,6vw,90px)}
.rr-hush-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,440px);align-items:center;gap:clamp(30px,5vw,80px)}
.rr-hush-copy .pill{margin-top:28px}
.rr-sign{display:block;width:100%;transform-origin:50% 0;-webkit-tap-highlight-color:transparent}
.rr-sign svg{width:100%;height:auto;overflow:visible}
.rr-sign-all{transform-box:view-box;transform-origin:180px 4px;animation:rrHang 6s ease-in-out infinite}
@keyframes rrHang{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
.rr-sign.knock .rr-sign-all{animation:rrKnock 1.4s var(--ease)}
@keyframes rrKnock{0%{transform:rotate(0)}15%{transform:rotate(-6deg)}35%{transform:rotate(4.5deg)}55%{transform:rotate(-2.5deg)}75%{transform:rotate(1.2deg)}100%{transform:rotate(-1.2deg)}}
.rr-strike{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s var(--ease) .25s}
.rr-hush.in .rr-strike{stroke-dashoffset:0}
.rr-fix{opacity:0;transform:translateY(8px);transform-box:view-box;transition:opacity .5s .95s,transform .7s var(--spring) .95s}
.rr-hush.in .rr-fix{opacity:1;transform:none}
html:not(.js) .rr-strike{stroke-dashoffset:0}
html:not(.js) .rr-fix{opacity:1;transform:none}

/* off-screen, everything holds still */
.rr-off *,.rr-off::before,.rr-off::after{animation-play-state:paused!important}

/* ==== RESPONSIVE ========================================================= */
@media (max-width:1180px) and (min-width:981px){.rr-hero{grid-template-columns:minmax(280px,420px) minmax(0,1fr)}}
@media (max-width:1180px){
  .rr-shop{grid-template-columns:minmax(150px,210px) minmax(0,1fr)}
  .rr-label{grid-column:1/-1;position:relative;top:auto;max-width:640px;justify-self:center;width:100%;margin-top:8px}
}
@media (max-width:760px){
  .rr-head{align-items:flex-start}
  .rr-case{--side:12px}
  .rr-bay{padding:28px 8px 0}
  .rr-board{margin:0 -8px}
  .rr-cornice{height:36px}
  .rr-case-title{font-size:.64rem;letter-spacing:.22em}
  .rr-case-title i{display:none}
  .rr-shop{grid-template-columns:1fr}
  .rr-fit{grid-template-columns:132px 1fr;align-items:center;align-self:auto}
  .rr-fit-note{order:2}
  .rr-handle-sign{display:none}
  .rr-vit-title i{display:none}
  .rr-vit-title{font-size:.66rem;letter-spacing:.22em}
  .rr-glass-shelf{gap:18px 6px}
  .rr-tag{padding:4px 7px 5px 15px}
  .rr-tag b{font-size:.8rem}
  .rr-tag small{font-size:.52rem;letter-spacing:.08em;white-space:nowrap}
  .rr-for{display:none}
  .rr-pin-tag{padding:5px 8px 5px;top:24%}
  .rr-pin-tag b{font-size:.5rem;letter-spacing:.12em}
  .rr-pin-tag small{font-size:.86rem}
  .rr-price{padding:9px 8px 10px;font-size:.62rem}
  .rr-hush-in{grid-template-columns:1fr}
  .rr-sign{max-width:320px;justify-self:center}
  .rr-list{columns:1}
  .rr-quip{max-width:70%}
}
@media (max-width:420px){
  .rr-pk{flex-direction:column;gap:4px}
}

/* reduced motion: still works, just doesn't move */
@media (prefers-reduced-motion:reduce){
  .rr-sway,.rr-sign-all,.rr-handle-sign{animation:none!important}
  .rr-motes,.rr-steam,.rr-ping{display:none}
}

/* the members' door: a key tag under the hero buttons */

/* ---------- new: an essay with its own practice ---------- */
.rr-new-sec{padding:clamp(20px,3vw,40px) 0 0}
.rr-new{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(16px,3vw,36px);padding:clamp(16px,2.4vw,26px) clamp(18px,3vw,34px);background:#fbf8f2;border:2px solid var(--ink);border-radius:6px;box-shadow:6px 6px 0 var(--coral-2);color:inherit;text-decoration:none;transition:transform .35s var(--spring),box-shadow .35s}
.rr-new:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--coral-2)}
.rr-new-art svg{display:block;width:clamp(64px,8vw,96px);height:auto;overflow:visible}
.rr-new-lines path{stroke:var(--ink);stroke-width:10;stroke-linecap:round;opacity:.28;stroke-dasharray:220;stroke-dashoffset:0;animation:rrNew 3.6s linear infinite}
.rr-new-lines path:nth-child(2){animation-delay:-.7s}.rr-new-lines path:nth-child(3){animation-delay:-1.4s}.rr-new-lines path:nth-child(4){animation-delay:-2.1s}.rr-new-lines path:nth-child(5){animation-delay:-2.8s}
@keyframes rrNew{to{stroke-dashoffset:-440}}
.rr-new-t{display:grid;gap:4px}
.rr-new-k{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--coral-ink)}
.rr-new-t b{font-family:var(--display);font-size:clamp(1.6rem,3vw,2.4rem);line-height:1}
.rr-new-d{color:var(--ink-2);max-width:56ch}
@media (max-width:700px){.rr-new{grid-template-columns:auto minmax(0,1fr)}.rr-new-go{grid-column:1/-1;justify-self:start}}
@media (prefers-reduced-motion:reduce){.rr-new-lines path{animation:none}}