@font-face{font-family:Archivo;src:url(fonts/archivo-500.woff) format("woff");font-weight:500;font-display:swap}
@font-face{font-family:Archivo;src:url(fonts/archivo-800.woff) format("woff");font-weight:800;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(fonts/courierprime-700.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"GEJ Clock";src:url(fonts/gej-clock.woff) format("woff");font-display:swap}

:root{
  color-scheme:only light;
  --paper:#efe8d6;--toner:#141414;--ink:#141414;--green:#00a95c;--pink:#ff48b0;--red:#d3232e;
  --rubber:#17181a;--rubber2:#1d1e20;--mouth:#040404;--dot:#efe8d6;--glass:#2a2c2f;--gdot:#9a9da0;--streak:#f32d62;
  --vinyl:#111;--groove:#efe8d6;--sheen:#efe8d6;--label:#00a95c;--labelink:#0b0b0b;--hole:#0a0a0a;--spider:#ff48b0;
  --h1:#ff48b0;--h2:#ff74c4;--h3:#e62d95;--h4:#ffa08c;--hl1:#141414;--hl2:#c21a7b;--hl3:#ffc2e2;
  --chipline:#141414;--tape:#e6d7a6;--tapeshadow:rgba(20,20,20,.28);--sticker:#ff8a3c;
  --chip-paper:#efe8d6;--chip-toner:#141414;--letter:#141414;
  --jam:#ff48b0;--jamshadow:#141414;--jamkey:#efe8d6;--arm:#efe8d6;--armline:#141414;--armpin:#141414;
  --h5:#ffd9ee;--hl4:#ffc2e2;--dstreak:#ff6d8e;
  --btn:#00a95c;--btn-ink:#0b0b0b;--btn2:#efe8d6;
}
:root[data-look="blacklight"]{
  color-scheme:only dark;
  --paper:#0a0912;--toner:#050509;--ink:#f4f0e4;--green:#2dff8c;--pink:#ff2fb0;--red:#ff3b52;
  --rubber:#08080f;--rubber2:#0b0a14;--mouth:#000;--dot:#5a78ff;--glass:#0e0d1c;--gdot:#3a3fa8;--streak:#ff2fb0;
  --vinyl:#050509;--groove:#8affc4;--sheen:#b49bff;--label:#2dff8c;--labelink:#05140c;--hole:#000;--spider:#ff2fb0;
  --h1:#ff2fb0;--h2:#ff6ac8;--h3:#c4148a;--h4:#ff8a5c;--hl1:#2a0a24;--hl2:#8a0d66;--hl3:#ffb8ea;
  --chipline:#2dff8c;--tape:#f4f0e4;--tapeshadow:rgba(244,240,228,.14);--sticker:#ff7a1f;
  --chip-paper:#fffdf0;--chip-toner:#05050a;--letter:#2dff8c;
  --jam:#ff2fb0;--jamshadow:#3099db;--jamkey:#0a0912;--arm:#f4f0e4;--armline:#050509;--armpin:#050509;
  --h5:#ffc0ea;--hl4:#ffb8ea;--dstreak:#ff5fc0;
  --btn:#2dff8c;--btn-ink:#05140c;--btn2:#14122a;
}
:root[data-look="hotpink"]{
  --paper:#ff74c2;--dot:#ff8fce;--gdot:#c2a0b4;--groove:#ffc0e4;--sheen:#ffc0e4;--tape:#ffe4f3;--sticker:#ffe4f3;--btn2:#ffa6da;
  --h1:#fff0f8;--h2:#ffffff;--h3:#ffd0ea;--h4:#ffe0d4;--h5:#ffffff;--hl1:#141414;--hl2:#e0429f;--hl3:#ffffff;--hl4:#ffffff;--dstreak:#ff9ad4;
  --chip-paper:#fff0f8;--jam:#141414;--jamshadow:#00a95c;--jamkey:#fff0f8;--spider:#ff74c2;--arm:#fff0f8;
}
/* Goldenrod: black toner on cheap bright copy paper, the kind punk flyers ran on, with the hot pink kept. */
:root[data-look="goldenrod"]{
  --paper:#f0b92b;--dot:#f7cf5e;--gdot:#b89c55;--groove:#f7cf5e;--sheen:#f7cf5e;--tape:#fbecb4;--btn2:#f0b92b;
  --chip-paper:#fbecb4;--jamkey:#fbecb4;--arm:#fbecb4;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font:500 1rem/1.4 Archivo,"Arial Narrow",Arial,sans-serif;overflow-x:hidden}
.skip{position:absolute;left:.5rem;top:-4rem;z-index:60;background:var(--toner);color:var(--paper);padding:.5rem .75rem;font-weight:800}
.skip:focus{top:.5rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.nb{white-space:nowrap}
a{color:inherit}

.draft-line{margin:0;padding:.16rem 1rem;background:var(--toner);color:var(--paper);font:700 .74rem/1.25 "Courier Prime","Courier New",monospace;text-align:center}
:root[data-look="blacklight"] .draft-line{background:#1a1830;color:var(--ink)}
.topbar{position:relative;z-index:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 .5rem;padding:0 .6rem}
.js .topbar{flex-wrap:nowrap}
.top{display:flex;flex-wrap:nowrap;gap:0 clamp(.55rem,3vw,1.1rem);font-weight:800;font-size:.9rem}
.top a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}

/* The stage: one box, one coordinate system. Text never sizes it. */
.hero{position:relative;overflow:hidden;overflow:clip;padding-bottom:.45rem}
.stage-box{position:relative}
.stage{position:relative;width:100%;aspect-ratio:1000/1090;touch-action:pan-y}
.group{position:absolute;inset:0;transform-origin:50% 73%;will-change:transform}
.lay{position:absolute;display:block;overflow:visible;pointer-events:none;will-change:transform}
.chip{will-change:transform}
#jamSticker,#z0,#z1,#z2{visibility:hidden}
.deck{position:absolute;border:0;padding:0;margin:0;background:transparent;border-radius:50%;cursor:grab;touch-action:pan-y;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.deck:active{cursor:grabbing}
.deck:focus-visible{outline:3px dashed var(--pink);outline-offset:3px}

.rubber{fill:var(--rubber)}.rubber2{fill:var(--rubber2)}.hole{fill:var(--mouth)}
.dface{fill:none;stroke:var(--dot);stroke-linecap:round}
.glass{fill:var(--glass)}.dglass{fill:none;stroke:var(--gdot);stroke-linecap:round}
.dstreak{fill:none;stroke:var(--dstreak);stroke-linecap:round}
.vinyl{fill:var(--vinyl)}.groove{stroke:var(--groove)}.dsheen{fill:none;stroke:var(--sheen);stroke-linecap:round;opacity:.82}
.labelfill{fill:var(--label)}.labelink{fill:var(--labelink)}.labelline{stroke:var(--labelink);opacity:.45}.holefill{fill:var(--hole)}.spider{fill:var(--spider)}
.h1{fill:var(--h1)}.h2{fill:var(--h2)}.h3{fill:var(--h3)}.h4{fill:var(--h4)}.h5{fill:var(--h5)}.dhairtip{fill:none;stroke:var(--h5);stroke-linecap:round}.hl4{fill:none;stroke:var(--hl4);stroke-width:2.6;stroke-linecap:round}
.hl1{fill:none;stroke:var(--hl1);stroke-width:1.4}.hl2{fill:none;stroke:var(--hl2);stroke-width:2.2}.hl3{fill:none;stroke:var(--hl3);stroke-width:1.8}
.toner{fill:var(--chip-toner)}.paper{fill:var(--chip-paper)}.letterink{fill:var(--letter)}.green{fill:var(--green)}.pink{fill:var(--pink)}.edge{stroke:var(--chipline)}
.tape{fill:var(--tape)}.tapeshadow{fill:var(--tapeshadow)}.stickerfill{fill:var(--sticker)}
.jamfill{fill:var(--jam)}.jamshadow{fill:var(--jamshadow);stroke:var(--jamshadow);stroke-linejoin:miter;stroke-miterlimit:2.6}.jamkey{fill:var(--jamkey);stroke:var(--jamkey);stroke-linejoin:miter;stroke-miterlimit:2.6}
.tail{stroke:var(--armline);stroke-width:0;stroke-linejoin:round;fill:var(--letter)}
.armbody{fill:var(--arm);stroke:var(--armline);stroke-width:3}.armpin{fill:var(--armpin)}
:root[data-look="blacklight"] .vinyl{stroke:#2dff8c;stroke-width:2.4}


/* From the first paint until the script starts, the page shows the bare word. It's the same picture the script draws at the start of
   the morph, so nothing moves when it takes over. Scripts off and motion off never get this class, and they show the mask. */
.stage-box{--su:calc(var(--stage-w)/1000)}
:root{--stage-w:100vw}
:root.word #hairBL,:root.word #hairBR,:root.word #hairFL,:root.word #hairFR,:root.word #face,:root.word #nose,:root.word #mouth,:root.word #glass,:root.word #frame,:root.word #streaks,:root.word #gs0,:root.word #gs1,:root.word #lab0,:root.word #lab1{opacity:0;visibility:hidden}
:root.word .pivot{opacity:0}
:root.word:not(.staged) .stage{visibility:hidden}
:root.word #head{transform:translate3d(0,calc(var(--su)*89),0)}
:root.word #g0,:root.word #g1,:root.word #g2,:root.word #g3,:root.word #g4{transform:translate3d(0,calc(var(--su)*127),0)}
:root.word #chipE,:root.word #chipS{transform:translate3d(0,calc(var(--su)*89),0)}
:root.word #jamJ,:root.word #jamA,:root.word #jamM,:root.word #andTape{transform:translate3d(0,calc(var(--su)*-130),0)}
:root:not(.word):not(.live) .tail{display:none}
/* If the script is very late, the mask fades in on its own, with no morph. */
:root.fading .lay{transition:opacity .7s,transform .7s}
:root.fading .group{transition:transform .7s}
:root.fading .pivot{transition:opacity .7s}
:root.fading .tail{display:none}
:root.fading #chipE{transform-origin:49.5% 94.2%;transform:translate3d(calc(var(--su)*-22),0,0) rotate(-1.5deg) scale(.7)}
:root.fading #chipS{transform-origin:50% 93.5%;transform:translate3d(calc(var(--su)*22),0,0) rotate(2deg) scale(.7)}

.hold{display:inline-flex;align-items:center;flex:0 0 auto;min-height:44px;margin:0;border:0;background:none;color:var(--ink);font:800 .9rem/1 Archivo,Arial,sans-serif;padding:0 .3rem;cursor:pointer;white-space:nowrap}
.hold-mark{display:block;flex:0 0 auto;width:.92em;height:.92em;margin-right:.32em;fill:currentColor}
.hold[aria-pressed="true"] .m-pause,.hold:not([aria-pressed="true"]) .m-play{display:none}
.topbar.tight .hold-word{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.topbar.tight .hold-mark{margin-right:0;width:1.2em;height:1.2em}

/* The words beside the stage */
.side{position:relative;z-index:3;padding:0 .75rem}
.hero-sheet{display:none}
.tip{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:.5rem;margin:-.2rem 0 .3rem;min-height:2.75rem}
.tip-paper{order:1;margin-left:auto}
.needle-up:not([hidden]) ~ .tip-paper{margin-left:0}
.tip-paper{display:inline-block;background:var(--sticker);color:#141414;font:700 .8rem/1.2 "Courier Prime","Courier New",monospace;padding:.2rem .42rem;transform:rotate(-1.2deg)}
.tip-paper.slap{animation:slap .28s cubic-bezier(.2,1.4,.4,1)}
@keyframes slap{from{transform:rotate(5deg) scale(1.5);opacity:.2}to{transform:rotate(-1.2deg) scale(1);opacity:1}}
.tip-arrow{display:none}
/* One paper: their words, a thin rule, then who and where. */
.note{margin:0 -.1rem .5rem;padding:.42rem .6rem .45rem;background:var(--tape);color:#141414;transform:rotate(-.5deg);box-shadow:2px 3px 0 var(--tapeshadow)}
.tape-words{margin:0;font:700 .92rem/1.22 "Courier Prime","Courier New",monospace}
.bst{white-space:nowrap}
.where{margin:.34rem 0 0;padding-top:.32rem;border-top:1.5px solid rgba(20,20,20,.6);font-weight:500;font-size:.88rem;line-height:1.22}
.where strong{display:block;font-weight:800;font-size:1.1rem}
/* Label-maker tape: plastic strips punched one letter at a time, with raised whitened letters, a little gloss, and rough cut ends. */
.actions{display:grid;gap:0;filter:drop-shadow(0 2px 1px rgba(0,0,0,.32))}
.strip{--tape-c:#008a3e;--tilt:-.7deg;position:relative;display:flex;align-items:center;justify-content:center;min-height:56px;padding:.5em 1em;color:#f8fbf3;font:800 1rem/1.14 Archivo,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;text-align:center;text-decoration:none;text-shadow:0 1px 0 rgba(0,0,0,.62),0 -1px 0 rgba(255,255,255,.5),1px 0 0 rgba(0,0,0,.22);background:linear-gradient(180deg,rgba(255,255,255,.3) 0,rgba(255,255,255,.08) 13%,rgba(255,255,255,0) 38%,rgba(0,0,0,.14) 100%),var(--tape-c);clip-path:polygon(.7% 7%,99.5% 0,100% 24%,99.2% 47%,100% 76%,99.4% 100%,.3% 95%,0 68%,.9% 42%,0 19%);transform:rotate(var(--tilt));transition:transform .07s,filter .07s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.strip-dirs{--tape-c:#17171a;--tilt:.8deg;position:relative;z-index:1;margin-top:-5px;clip-path:polygon(0 6%,99.1% 0,100% 30%,99.3% 58%,99.9% 96%,1% 100%,.2% 74%,.9% 50%,.1% 24%)}
.strip-call{z-index:2}
/* The wheel in a label maker has a fixed pitch, so narrow letters get the same room as wide ones. Each letter is punched on its own, so each sits a little differently, and the plastic whitens around it. */
.stamped{display:block;letter-spacing:.04em}
.stamped .lw{display:inline-block;white-space:nowrap}
.stamped i{display:inline-block;min-width:.66em;font-style:normal;text-align:center;transform:translateY(var(--y,0)) rotate(var(--r,0deg))}
.stamped i:nth-child(3n){--y:-.022em;--r:-1.3deg}
.stamped i:nth-child(3n+1){--y:.02em;--r:.9deg}
.stamped i:nth-child(5n){--y:.035em;--r:1.7deg;opacity:.94}
.stamped i:nth-child(7n){--y:-.035em;--r:-.7deg}
.stamped .sp{min-width:.42em}
.strip:active{transform:rotate(var(--tilt)) translateY(2px) scale(.985);filter:brightness(.88);text-shadow:0 -1px 0 rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.34)}
.strip:focus-visible{outline:none;box-shadow:inset 0 0 0 3px #f8fbf3}
:root[data-look="blacklight"] .strip-call{--tape-c:#00a24a}
:root[data-look="blacklight"] .strip-dirs{--tape-c:#2c2848}
:root[data-look="blacklight"] .actions{filter:drop-shadow(0 0 6px rgba(45,255,140,.4))}

.needle-up{order:2;flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;border:0;background:var(--sticker);color:#141414;font:800 .95rem/1 Archivo,Arial,sans-serif;padding:0 .7rem;cursor:pointer}
.has-callbar .needle-up{position:fixed;right:.5rem;bottom:calc(var(--bar-h,3.4rem) + .4rem);z-index:32}
.needle-up[hidden]{display:none}
.stop{display:inline-block;width:.72em;height:.72em;background:currentColor;margin-right:.45em}

/* Side by side once there's room. Nothing here depends on text size. */
@media (max-width:340px){.tip{margin-top:.25rem}}
@media (max-width:879px){
  .actions{margin:0 -.2rem}
  /* On a short phone the mask gives up a little size, so the name and address clear the call bar. */
  :root{--stage-over:17.5rem;--stage-w:min(100vw,max(72vw,calc((100vh - var(--stage-over))*.917)))}
  @supports (height:100svh){:root{--stage-w:min(100vw,max(72vw,calc((100svh - var(--stage-over))*.917)))}}
  .stage-box{width:var(--stage-w);margin:0 auto}
}
@media (max-width:340px){:root{--stage-over:19rem}}
/* A tablet held upright keeps one column, and its words grow to stand up to the bigger mask. */
@media (min-width:600px) and (max-width:879px) and (min-height:501px){
  :root{--stage-over:20rem}
  .top,.hold{font-size:1rem}
  .tip-paper{font-size:1rem;padding:.28rem .55rem}
  .note{padding:.7rem .9rem .75rem}
  .tape-words{font-size:clamp(1.1rem,2.7vw,1.4rem);line-height:1.26}
  .where{font-size:clamp(1rem,2.2vw,1.15rem)}
  .where strong{font-size:clamp(1.25rem,2.8vw,1.45rem)}
  .strip{min-height:60px;font-size:clamp(1rem,2.3vw,1.2rem)}
}
/* A phone held sideways gets the same two columns, so the whole mask, the address, and the call tape share one screen. */
@media (min-width:880px),(min-width:600px) and (max-height:500px){
  .draft-line{font-size:.8rem;padding:.25rem 1rem}
  .topbar{padding:.3rem clamp(1rem,3vw,4rem) .1rem;justify-content:space-between}
  .top{font-size:1rem;gap:1.75rem}
  .hold{font-size:1rem}
  /* The hero is as tall as the mask, no more. The side column starts level with the top of the mask, and the storefront comes up to meet it. */
  :root{--hero-pad:clamp(1rem,3vw,4rem);--hero-gap:clamp(1.5rem,4vw,5.5rem);
    --stage-w:min(calc(100vw - 19rem - var(--hero-gap) - var(--hero-pad)*2),calc((100vh - 4.7rem - var(--preview-h))*.875),1180px);
    --side-w:min(clamp(24rem,31vw,50rem),calc(100vw - var(--stage-w) - var(--hero-gap) - var(--hero-pad)*2))}
  .hero{display:grid;grid-template-columns:var(--stage-w) var(--side-w);column-gap:var(--hero-gap);align-items:start;justify-content:center;padding:0 var(--hero-pad) .5rem}
  .stage-box{position:relative;z-index:1;width:var(--stage-w)}
  /* A torn sheet of the flyer wall, bleeding off the right edge behind everything in the column. */
  .hero-sheet{display:block;position:absolute;z-index:0;top:0;bottom:0;right:0;left:calc(50vw - (var(--stage-w) + var(--hero-gap) + var(--side-w))/2 + var(--stage-w) + var(--hero-gap)*.4);opacity:0;transition:opacity .35s;pointer-events:none}
  .hero-sheet.in{opacity:1;background:var(--room-ink);-webkit-mask:url(rooms/hero-sheet.webp) 0 50%/cover no-repeat;mask:url(rooms/hero-sheet.webp) 0 50%/cover no-repeat}
  .tip-arrow{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
  .tip-arrow path{fill:none;stroke-linecap:round;stroke-linejoin:round}
  .ta-under{stroke:var(--toner);stroke-width:7}
  .ta-over{stroke:var(--sticker);stroke-width:3.4}
  .side{padding:0}
  .tip{margin:clamp(.4rem,1vw,1rem) 0 clamp(.7rem,1.2vw,1.4rem);justify-content:flex-start;align-items:center}
  .tip-paper{order:0;margin-left:0}
  .tip-paper{font-size:clamp(1rem,1.25vw,1.7rem);padding:.3rem .6rem}
  .note{margin:0 0 clamp(.7rem,1.1vw,1.3rem);padding:.9em 1em}
  .tape-words{font-size:clamp(1.15rem,1.85vw,2.75rem);line-height:1.26}
  .where{margin-top:.6em;padding-top:.55em;font-size:clamp(1rem,1.25vw,1.8rem)}
  .strip{min-height:clamp(3.5rem,4.4vw,6rem);font-size:clamp(1rem,1.3vw,1.9rem)}
  .strip-dirs{width:86%;margin-left:7%;margin-top:-6px}
}
@media (min-width:600px) and (max-width:879px) and (max-height:500px){
  :root{--stage-w:calc((100vh - 4.7rem - 3.4rem)*.875)}
  .tip{margin:.2rem 0 .3rem;min-height:0}
  .note{margin:0 0 .5rem;padding:.55em .8em}
  .tape-words{font-size:1rem;line-height:1.22}
  .where{margin-top:.35em;padding-top:.3em;font-size:.9rem}
  .where strong{font-size:1.05rem}
}
@media (prefers-reduced-motion:reduce){
  .lay,.group,.chip{will-change:auto}
  .tip-paper.slap{animation:none}
}

/* ---- Shared bits ---- */
.taped-photo{margin:1rem 0;max-width:36rem;transform:rotate(-.7deg)}
.taped-photo img{display:block;width:100%;height:auto;border:2px solid var(--toner)}
.taped-photo figcaption{font:700 .95rem "Courier Prime","Courier New",monospace;margin-top:.3rem}

/* ---- The fixed bar ---- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:.25rem;padding:.25rem 3.55rem calc(.25rem + env(safe-area-inset-bottom)) .3rem;background:var(--toner)}
:root[data-look="blacklight"] .callbar{background:#1a1830}
.callbar[hidden]{display:none}
.bar-call,.bar-dirs,.bar-looks{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;column-gap:.28em;min-height:44px;text-align:center;text-decoration:none;font:800 1rem/1.08 Archivo,Arial,sans-serif;padding:.2rem .3rem;border:0}
.bar-call{background:var(--btn);color:var(--btn-ink);font-size:clamp(.72rem,4.4vw,1rem)}
.bar-dirs{background:var(--chip-paper);color:#141414;font-size:clamp(.7rem,4.1vw,.94rem)}
/* Looks is a small square that's on the first screen from the start, and the bar slides in beside it. */
.bar-looks{position:fixed;right:.3rem;bottom:calc(.25rem + env(safe-area-inset-bottom));z-index:31;width:3.1rem;background:#3a3832;color:#efe8d6;font-size:clamp(.62rem,3.4vw,.78rem);cursor:pointer}
@media (min-width:1201px){
  /* On a big screen the Call and Find us links sit at the right end of the design preview's band. Nothing floats over the page. */
  .callbar{left:auto;right:.5rem;top:auto;bottom:0;height:var(--preview-h);z-index:41;display:flex;align-items:center;gap:.25rem;padding:0;background:none}
  :root[data-look="blacklight"] .callbar{background:none}
  .bar-call,.bar-dirs{min-height:36px;font-size:.9rem;padding:.2rem .7rem}
  .bar-looks{display:none}
  .has-callbar .needle-up{bottom:calc(var(--preview-h) + .4rem)}
}

/* ---- The design preview buttons. These go away on the finished site. ---- */
.preview{position:fixed;z-index:40;background:#141414;color:#efe8d6;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.preview-label{margin:0;font-size:10.5px;font-weight:700;line-height:1.15;letter-spacing:.06em;text-transform:uppercase}
.seg{display:inline-flex;border:1px solid #efe8d6;border-radius:6px;overflow:hidden}
.seg button{min-height:36px;padding:0 9px;border:0;border-left:1px solid #5c5a52;background:transparent;color:#efe8d6;font:600 13px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;cursor:pointer;white-space:nowrap}
.seg button:first-child{border-left:0}
.seg button[aria-pressed="true"]{background:#efe8d6;color:#141414}
.preview-close{min-height:36px;padding:0 10px;border:1px solid #efe8d6;border-radius:6px;background:transparent;color:#efe8d6;font:600 13px system-ui,sans-serif;cursor:pointer}
.hold-looks{min-height:36px;padding:0 10px;border:1px solid #efe8d6;border-radius:6px;color:#efe8d6;font:600 13px system-ui,sans-serif}
@media (max-width:1200px){
  :root{--preview-h:0px}
  .preview{left:0;right:0;bottom:0;display:none;flex-wrap:wrap;gap:.45rem .5rem;align-items:center;justify-content:center;padding:.55rem .5rem calc(.55rem + env(safe-area-inset-bottom));box-shadow:0 -2px 12px rgba(0,0,0,.4)}
  .preview.is-open{display:flex}
  .preview-label br{display:none}
  .preview-label{width:100%;text-align:center}
  .seg button,.preview-close,.hold-looks{min-height:44px}
}
@media (min-width:1201px){
  :root{--preview-h:52px}
  .preview{left:0;right:0;bottom:0;height:var(--preview-h);display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:0 8px;box-shadow:0 -2px 12px rgba(0,0,0,.4)}
  .preview-close{display:none}
}
@media (min-width:1201px) and (max-width:1400px){
  .seg button{padding:0 6px;font-size:12px}
  .preview{gap:6px}
}


/* ---- The Window ---- */
/* The street is black toner on the page's paper. Color happens only inside the windows and in the paint on the glass. */
.defs{position:absolute}
.front{position:relative;--u:.42px;--glow:0;--refl:1;--street-paper:var(--paper);--street-ink:var(--toner);--band:#d3232e;--trimc:#f0507e;background:var(--paper)}
:root[data-sky="night"] .front{--glow:1;--refl:.2;--street-paper:#0a0912;--street-ink:#5a78ff;--band:#a81f2e;--trimc:#c83a68}
.front-words{position:relative;z-index:6;margin:0;padding:.55rem .75rem .3rem}
.front-words h2{margin:0;color:var(--ink);font:800 clamp(1.9rem,7vw,3.6rem)/1 Archivo,Arial,sans-serif}
/* Stop and stare: brushed on a plain painted panel of the building. The real words stay as the heading underneath. */
.stare{display:none;position:relative;aspect-ratio:1500/560;width:min(100%,24rem);margin:0 auto}
.stare i{position:absolute;inset:0;display:block}
.stare-panel{background:#f1ead8}
:root[data-sky="night"] .stare-panel{background:#ddd6c3}
.stare-words{background:#141414}
.front.drawn .stare{display:block}
.front.drawn .stare-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.front.drawn .stare-panel{-webkit-mask:url(rooms/stare-panel-tall.webp) 0 0/100% 100% no-repeat;mask:url(rooms/stare-panel-tall.webp) 0 0/100% 100% no-repeat}
.front.drawn .stare-words{-webkit-mask:url(rooms/stare-words-tall.webp) 0 0/100% 100% no-repeat;mask:url(rooms/stare-words-tall.webp) 0 0/100% 100% no-repeat}
@media (min-width:640px){
  .stare{aspect-ratio:1500/250;width:min(100%,46rem)}
  .front.drawn .stare-panel{-webkit-mask-image:url(rooms/stare-panel.webp);mask-image:url(rooms/stare-panel.webp)}
  .front.drawn .stare-words{-webkit-mask-image:url(rooms/stare-words.webp);mask-image:url(rooms/stare-words.webp)}
}
@media (prefers-reduced-motion:no-preference){:root.js .front:not(.walk) .front-words{visibility:hidden}}
.front-words p{margin:.3rem 0 0;color:#fff;background:#0c0c0c;font:800 clamp(.8rem,2vw,1.1rem)/1.12 Archivo,Arial,sans-serif;padding:.4em .6em}
.front-stick{background:var(--street-paper)}
.front-view{position:relative;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.front-scene{position:relative}
.street-plate,.front-spots,.front-near{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none}
.street-plate{background:var(--street-ink);-webkit-mask:url(rooms/street-day.webp) 0 0/100% 100% no-repeat;mask:url(rooms/street-day.webp) 0 0/100% 100% no-repeat}
:root[data-sky="night"] .street-plate{-webkit-mask-image:url(rooms/street-night.webp);mask-image:url(rooms/street-night.webp)}
.front-near{will-change:transform}
.band{fill:var(--band)}.trim{fill:var(--trimc)}
.pane{position:absolute;overflow:hidden;background:#5b1a2d;box-shadow:0 0 0 2.5px #0b0b0b}
:root[data-sky="night"] .pane{box-shadow:0 0 0 2.5px #0b0b0b,0 0 calc(var(--u)*90) calc(var(--u)*16) rgba(255,214,150,.42)}
.pl{position:absolute;top:0;height:100%;display:block;overflow:visible;pointer-events:none}
.pane-mid{position:absolute;inset:0;will-change:transform}
.far,.paint{will-change:transform}
.refl{will-change:transform;opacity:var(--refl)}
.hd{position:absolute;display:block;overflow:visible;pointer-events:none}
.hung-sign{position:absolute;display:block;height:auto;box-shadow:0 calc(var(--u)*6) 0 rgba(0,0,0,.34)}
.wheel-glow{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,250,225,.5) 50%,rgba(255,250,225,0) 100%);opacity:var(--glow);pointer-events:none}
.wheel-btn{position:absolute;border:0;padding:0;margin:0;background:transparent;border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:pan-y pan-x}
.wheel-btn:focus-visible{outline:3px dashed var(--pink);outline-offset:3px}
.wheel-art{display:block;width:100%;height:100%;will-change:transform;transform-origin:50% 50%}
/* The wheel's sticker belongs to the screen, not the scene, so whenever the wheel shows, every word of it shows. */
.wheel-talk{position:absolute;z-index:7;left:var(--talk-x,50%);top:var(--talk-y,62%);margin:0;width:max-content;max-width:min(86vw,24rem);background:var(--sticker);color:#141414;font:700 clamp(1rem,2.4vw,1.25rem)/1.16 "Courier Prime","Courier New",monospace;padding:.5em .7em;text-align:center;transform:translate(-50%,-50%) rotate(-2deg);opacity:0;visibility:hidden;transition:opacity .16s}
.wheel-talk.on{opacity:1;visibility:visible}
.wheel-talk a{color:inherit;display:inline-flex;align-items:center;min-height:44px}
.front:not(.walk) .wheel-talk{position:relative;left:auto;top:auto;display:block;width:auto;margin:.4rem auto;opacity:1;visibility:visible;transform:rotate(-1deg)}
.monkey-tag{position:absolute;z-index:2;display:block;background:#e5cf9f;color:#141414;font:700 calc(var(--u)*19.5)/1.16 "Courier Prime","Courier New",monospace;padding:calc(var(--u)*8) calc(var(--u)*10);text-decoration:none;transform:rotate(3deg);box-shadow:calc(var(--u)*3) calc(var(--u)*4) 0 #141414;clip-path:polygon(calc(var(--u)*13) 0,100% 0,100% 100%,calc(var(--u)*13) 100%,0 calc(100% - var(--u)*13),0 calc(var(--u)*13))}
.monkey-tag span{display:block}
.monkey-tag .nb{text-decoration:underline;margin-top:.1em;font-size:.92em}
.door-wrap{position:absolute;perspective:calc(var(--u)*1400)}
.door-behind{position:absolute;inset:calc(var(--u)*10) calc(var(--u)*14) 0;background:radial-gradient(ellipse at 50% 60%,#ffd98a 0,#c9792a 40%,#20100a 100%)}
.door-swing{position:absolute;inset:0;transform-origin:calc(var(--u)*14) 50%;transition:transform .5s cubic-bezier(.3,.9,.4,1)}
.door-swing.open{transform:rotateY(-34deg)}
.door-leaf{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.come-in{position:absolute;left:50%;top:67%;transform:translate(-50%,-50%) rotate(-3deg);z-index:3;display:flex;align-items:center;min-height:44px;background:var(--sticker);color:#141414;font:700 calc(var(--u)*46)/1 "Courier Prime","Courier New",monospace;padding:calc(var(--u)*14) calc(var(--u)*22);text-decoration:none;white-space:nowrap}
.front-plain{position:relative;z-index:2;display:grid;justify-items:center;gap:.6rem;background:var(--street-paper);color:var(--street-ink);padding:clamp(1.8rem,5vw,3.6rem) 1rem clamp(1.8rem,5vw,3.6rem)}
.front.drawn .front-plain::before{content:"";position:absolute;inset:0;background:var(--street-ink);-webkit-mask:url(rooms/corner-dots.webp) 0 0/100% auto no-repeat;mask:url(rooms/corner-dots.webp) 0 0/100% auto no-repeat}
.front-plain .taped-photo{position:relative;margin:0;width:min(78vw,23rem);max-width:none;background:#f6f2e6;color:#141414;padding:.5rem .5rem .5rem;box-shadow:1px 3px 0 rgba(0,0,0,.4);transform:rotate(-1.6deg)}
.front-plain .taped-photo::before{content:"";position:absolute;left:50%;top:-.6rem;width:6rem;height:1.25rem;margin-left:-3rem;background:var(--tape);opacity:.92;transform:rotate(2deg)}
.front-plain .taped-photo img{border:0}
.plain-note{position:relative;margin:0;background:var(--street-paper)}
.front.drawn .plain-note{display:none}
.plain-note{margin:.4rem 0;font:700 1rem/1.3 "Courier Prime","Courier New",monospace}

/* Colors inside the windows */
.flange{fill:#1b1b1e}.flangeline{stroke:#3a3a40}.fitting{fill:#d9502a}.fitting2{fill:#a93a1c}.chipwhite{fill:#efe8d6}
.door{fill:#121212}.doorline{stroke:#2c2c30}.doorwhite{fill:#f6f2e6}.doorline2{stroke:#141414}.doorink{fill:#141414}
.flyerpaper{fill:#ece6d4}.flyerink{fill:#141414}.kraft{fill:#c7a26c}.markerink{stroke:#141414}.stickerw{fill:#f6f2e6}
:root[data-sky="night"] .flyerpaper,:root[data-sky="night"] .doorwhite,:root[data-sky="night"] .stickerw{fill:#c9c1a9}
:root[data-sky="night"] .kraft{fill:#7c6a52}
.shadowscr{fill:url(#scrShade)}.shadedot{fill:var(--street-ink)}
:root[data-sky="night"] .shadowscr{opacity:.4}
.pdot{fill:none;stroke:#141414;stroke-linecap:round}.pdotfill{fill:#141414}
.metal{fill:#b9bcc0}.metalline{stroke:#5d6065}.metalline2{fill:#efefef}
.fabric{fill:url(#planets)}.fabbase{fill:#5b1a2d}.fabink{fill:#f0e6d8}.fabring{stroke:#f0e6d8}
.ceil{fill:#ded7c4}.awnshadow{fill:url(#scrTop)}
.banner{fill:#0c0c0e}.grommet{fill:#b9bcc0}.teal{fill:#35e0ee}
.signblack{fill:#141414}.signwhite{fill:#f4f0e4}.signblackfill{fill:#141414}
.mylar{fill:#8e9398}.glint{fill:none;stroke:#fff;stroke-linecap:round}
.pinfill{fill:#f2b21b}.pinred{fill:#c9282e}
.globeblue{fill:#3f8fc4}.globeland{fill:#e8e0c8}
.foil1{fill:#fff}.foil2{fill:#d5d8dc}.foil3{fill:#a3a7ad}.foil4{fill:#6d7076}.foilline{stroke:#26282c}
.wigg1{fill:#a9d43d}.wigg2{stroke:#5d7f15}.wigp1{fill:#ff5ab6}.wigp2{stroke:#c21a7b}.wigk1{fill:#1b1b1e}.wigk2{stroke:#4a4a50}
.silver{fill:#ccd0d5}.stripe{fill:#2b3a66}.alienskin{fill:#d8c8b0}
.tinsel{stroke:#d9dde2}.crate{fill:#c9282e}.cratebar{stroke:#7c141a}
.wheelwhite{fill:#fff}.wheelblack{fill:#000}.wheelrim{stroke:#000}.wheelhub{fill:#d3232e}
.boxwood{fill:#54331d}.boxgrain{stroke:#1f120a;opacity:.55}.boxline{stroke:#1a0f08}.cloth{fill:#e8dfc8}.clothfold{stroke:#b5ab92}.burlap{fill:#9c7a4f}.weave{stroke:#5c4326;opacity:.5}.alienhead{fill:#b89a70}.hinkline{stroke:#141414}.hangwire{stroke:#141414}
.wire{stroke:#1f5a2c}.bulbR{fill:#ff3d3d}.bulbG{fill:#3dff7a}.bulbY{fill:#ffd93d}.bulbB{fill:#4db8ff}
.front:not(.still) .blinkA{animation:blink 1.5s steps(2,jump-none) infinite}
.front:not(.still) .blinkB{animation:blink 1.5s steps(2,jump-none) infinite reverse}
@keyframes blink{from{opacity:1}to{opacity:.22}}
.monkeyfur{fill:#8d6b47}.monkeytan{fill:#d9c29a}.monkeybare{fill:#e8dcc2}.monkeybutton{fill:#efe7d6;stroke:#141414;stroke-width:1.6}.manila{fill:#e5cf9f}
.vinylred{fill:#d92b32}.chrome{stroke:#f4f4f4}.chromeline{stroke:#101010}.cartwire{stroke:#d3232e}.cartrim{stroke:#c0232b}.cartred{fill:#c9262e}.carttoner{stroke:#141414}.cartrust{fill:#3a1a10}.wheeldark{fill:#111}.wheeldark2{fill:#3a3a3e}
/* The heads: all the same pale plastic, printed in toner. Color only in lips, wigs, and sunglasses. */
.hd{--head:#efe7d6}
.hsil{fill:var(--head)}.hlips{fill:#d3232e}.hink{fill:#141414}.hglint{fill:#fff}
.hdot{fill:none;stroke:#141414;stroke-linecap:round}
.hframe{fill:#f4f1e7}.hframeline{fill:none;stroke:#141414;stroke-width:1.6}.hlens{fill:#123a44}.hglare{fill:#7be6d4}
/* Paint on the glass */
.pgray{fill:#c7c9cc}.pgray2{stroke:#dfe0e2}.pline{stroke:#141414;stroke-linejoin:round}.pwhite{fill:#f4f2ea}.pblue{fill:#1f6fd0}.ppink{fill:#ff5ab6}.plime{fill:#7eea46}.porange{fill:#fc8a2a}
.pbeam{stroke:#fc701f}.pbeamline{stroke:#c94a06}
.pridge{fill:#394e38}.pridge2{stroke:#4a6448;opacity:.7}.pblueline{stroke:#3099db}.pwhiteline{stroke:#f4f2ea}
/* What the glass adds: light on top, never a dimmer */
.rfpole{fill:#fff;opacity:.3}.rfred{fill:#e0333a;opacity:.34}.rfblue{fill:#2c5fd0;opacity:.34}
/* The walk-past, once the script takes over */
.front.walk{overflow:clip}
.front.walk .front-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.front.walk .front-view{position:absolute;inset:0;overflow:hidden}
.front.walk .front-scene{position:absolute;left:0;will-change:transform}
/* Stop and stare. is painted up on the building, and the small line runs along the awning. Both stay put while the scene pans. */
.front.walk .front-words{position:absolute;inset:0;padding:0;pointer-events:none}
.front.walk .front-words h2{position:absolute;left:50%;top:var(--wall-y,3rem);width:min(90vw,calc(var(--wall-h,7rem)*.72*2.68));transform:translate(-50%,-50%) rotate(-.6deg)}
.front.walk .stare{width:100%}
@media (min-width:640px){.front.walk .front-words h2{width:min(86vw,calc(var(--wall-h,7rem)*.66*6))}}
.front.walk .front-words p{position:absolute;left:0;right:0;top:var(--awn-y,6rem);min-height:var(--awn-h,3rem);display:flex;align-items:center;justify-content:center;margin:0;padding:.1em .6em;text-align:center;background:#0c0c0c}
/* A still picture you can swipe sideways, when motion is off */
.front:not(.walk) .front-view{height:calc(1290*var(--u));overflow-x:auto}
.front:not(.walk) .front-scene{position:absolute;bottom:0;left:calc(-186*var(--u));width:calc(2300*var(--u));height:calc(1450*var(--u))}
@media (prefers-reduced-motion:reduce){.door-swing{transition:none}}

/* ---- The rooms ---- */
/* One rule: black toner on paper. Color only where something is alive. Dots are shadows, not wallpaper. */
:root{--room-ink:#141414;--kraft:#caa97a;--stock:#efe6cf;--stock-ink:#1b1712;--wear:#fbf6e8;--wall-black:#0b0b0b;--brush:#f4f0e4;--hall-bg:#f7f3e8;--hall-ink:#141414;--zig:#12b5a6;--gold:#c9a02f;--stage-h:100vh}
@supports (height:100lvh){:root{--stage-h:100lvh}}
:root.door-still{--stage-h:70vh}
:root[data-look="blacklight"]{--room-ink:#8a93ff;--kraft:#161226;--stock:#14122a;--stock-ink:#f4f0e4;--wear:#2a2650;--hall-bg:#07060d;--hall-ink:#ff2fb0;--zig:#2dffd2;--gold:#2a2150}
:root[data-look="hotpink"]{--kraft:#ff8ed0;--stock:#ffd9ee;--wear:#fff0f8;--hall-bg:#ffe3f3;--gold:#f2c23a}
:root[data-look="goldenrod"]{--kraft:#e3a81f;--stock:#f6d675;--wear:#fbecb4;--hall-bg:#f8d565}
.shop,.trade,.hall,.back,.since,.visit{position:relative;overflow:hidden;overflow:clip}
.cv{content-visibility:auto}

/* Front room */
.shop{background:var(--paper)}
/* The flyer wall: tall, dense, and ugly. Zigzags behind, sheets on top. */
.shop-band{position:relative;height:max(300px,40vh);overflow:hidden}
.shop-band i{position:absolute;inset:0;display:block}
.band-zig{background:var(--zig)}
.band-ink{background:var(--room-ink)}
.shop.in .band-zig{-webkit-mask:url(rooms/shop-zig.webp) 0 0/auto 100% repeat-x;mask:url(rooms/shop-zig.webp) 0 0/auto 100% repeat-x}
.shop.in .band-ink{-webkit-mask:url(rooms/shop-band.webp) 0 0/auto 100% repeat-x;mask:url(rooms/shop-band.webp) 0 0/auto 100% repeat-x}
.shop:not(.in) .shop-band i{background:transparent}
/* The ledge, with the joke LPs face out. It slides past as you walk along the wall. */
.ledge{--lp-h:clamp(9.5rem,15vw,26rem);--strip-w:calc(var(--lp-h)*9.8298);position:relative;overflow:hidden;overflow:clip;padding-top:.5rem}
.ledge-row{width:var(--strip-w);height:var(--lp-h)}
.ledge-art{display:block;width:100%;height:100%}
.ledge-wood{display:block;height:clamp(16px,1.7vw,30px);margin-top:-2px;background:var(--room-ink)}
.shop.in .ledge-wood{-webkit-mask:url(rooms/ledge-wood.webp) 0 0/auto 100% repeat-x;mask:url(rooms/ledge-wood.webp) 0 0/auto 100% repeat-x}
.shop:not(.in) .ledge-wood{background:transparent}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
  .ledge-row{animation:ledgeslide linear both;animation-timeline:view()}
  @keyframes ledgeslide{to{transform:translate3d(min(0px,calc(100vw - var(--strip-w))),0,0)}}
}}
@media (prefers-reduced-motion:reduce){.ledge{overflow-x:auto}}
.shop-inner{position:relative;z-index:2;padding:0 clamp(.75rem,4vw,3rem);max-width:92rem;margin:0 auto}
.sign-line{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem clamp(.5rem,1.6vw,2rem);margin:0;padding:clamp(1rem,3vw,2.6rem) .5rem .3rem}
.sign-line svg{display:block;height:clamp(4.4rem,8.6vw,15rem);width:auto;max-width:96vw;fill:var(--ink)}
.sign-line .sd{fill:var(--red);height:clamp(1rem,2.2vw,3.6rem);width:clamp(1rem,2.2vw,3.6rem)}
.shop-sub{margin:.2rem 0 .9rem;text-align:center;font:700 clamp(1.1rem,2.2vw,1.5rem)/1.2 "Courier Prime","Courier New",monospace}
.crate-room{position:relative;display:grid;gap:1.1rem;align-items:start;justify-content:center;grid-template-columns:minmax(0,min(100%,29rem))}
.crate-notes{display:grid;gap:1.3rem;justify-items:start;min-width:0}
@media (min-width:880px){.crate-room{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}}
/* From 1100 up, the crate and the words fill the room as a pair, centered on the page. The crate takes 45% of the width. On a short screen the sleeves sink deeper behind its front, the way records really sit in a crate, so the arrows stay above the bar. */
@media (min-width:1100px){
  .shop-inner{max-width:none}
  .crate-room{--crate-tops:clamp(1.4rem,3.11vh,clamp(1.75rem,1.25vw,2.02rem));--crate-fit:calc(100vh - 7.6rem - var(--crate-tops)*6);--crate-w:min(45vw,max(22rem,calc(var(--crate-fit)/.7125)));grid-template-columns:var(--crate-w) minmax(20rem,min(40vw,58rem));gap:clamp(2rem,4.5vw,6rem)}
}
.tag-line{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:31}
.tag-line path{fill:none;stroke:#141414;stroke-width:2;stroke-linecap:round}
:root[data-look="blacklight"] .tag-line path{stroke:#e5cf9f}
/* The eggs quote, on a manila tag tied to the corner of the crate. */
.eggs-tag{position:relative;margin:0;justify-self:end;width:min(100%,32rem);padding:.75rem 1.9rem .75rem 1rem;background:#e5cf9f;color:#141414;font:700 clamp(1.02rem,1.45vw,1.75rem)/1.28 "Courier Prime","Courier New",monospace;transform:rotate(1.2deg);clip-path:polygon(0 0,calc(100% - 1.1rem) 0,100% 1.1rem,100% calc(100% - 1.1rem),calc(100% - 1.1rem) 100%,0 100%)}
.eggs-tag::before{content:"";position:absolute;right:.62rem;top:50%;width:.52rem;height:.52rem;margin-top:-.26rem;border-radius:50%;background:#141414}
.eggs-tag blockquote{margin:0}
.eggs-tag figcaption{font-size:.72em;margin-top:.2rem}
@media (min-width:880px){
  .eggs-tag{justify-self:start;padding:.75rem 1rem .75rem 1.9rem;transform:rotate(-1.4deg);clip-path:polygon(1.1rem 0,100% 0,100% 100%,1.1rem 100%,0 calc(100% - 1.1rem),0 1.1rem)}
  .eggs-tag::before{right:auto;left:.62rem}
}
.crate{position:relative;outline-offset:6px;touch-action:pan-y;--tops:2.02rem}
.crate:focus-visible{outline:3px dashed var(--pink)}
/* Without the script the sleeves simply lie in a row, and all the words below stay readable. */
.crate:not(.live) .crate-stack{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.5rem}
.crate:not(.live) .crate-front{display:none}
.crate-stack{position:relative}
.crate.live .crate-stack{height:0;padding-bottom:calc(100% + var(--tops)*6 + 1.2rem)}
.sleeve{position:relative;display:block;padding:0;margin:0;border:0;background:#141414;color:inherit;font:inherit;text-align:left;cursor:pointer;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.sleeve img{display:block;width:100%;height:auto;aspect-ratio:1;background:#2a2a2c;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
.sleeve-tab{position:absolute;left:.5rem;top:.24rem;z-index:1;background:#f6f2e6;color:#141414;font:700 .9rem/1 "Courier Prime","Courier New",monospace;padding:.2rem .4rem;white-space:nowrap}
.crate.live .sleeve{position:absolute;left:0;right:0;top:calc(var(--tops)*6);transform-origin:50% 100%;
  transform:translateY(calc(var(--d)*(var(--tops)*-1 - var(--rise,0%)))) rotate(var(--lean,0deg)) scale(calc(1 - var(--d)*.012));
  transition:transform .42s cubic-bezier(.2,1.25,.4,1),opacity .28s;box-shadow:0 0 0 2px #141414,0 -6px 10px rgba(0,0,0,.28)}
.crate.live .sleeve.no-anim{transition:none}
.crate.live .sleeve.front{transform:rotate(var(--lean,0deg));box-shadow:0 0 0 2px #141414,0 12px 22px rgba(0,0,0,.34)}
/* Hover only where there's a real pointer. On a phone a tapped thing would stay stuck in its hover pose. */
@media (hover:hover){.crate.live .sleeve:not(.front):hover{transform:translateY(calc(var(--d)*(var(--tops)*-1 - var(--rise,0%)) - .4rem)) scale(calc(1 - var(--d)*.012))}}
.crate.live .sleeve.leaving{transform:perspective(1500px) translate3d(0,26%,120px) rotateX(58deg);opacity:0;z-index:40!important;transition:transform .3s ease-in,opacity .3s ease-in}
.crate.live .sleeve:focus-visible{outline:3px dashed var(--pink);outline-offset:-3px}
.crate-front{position:relative;z-index:30;margin:-13% -2.5% 0;aspect-ratio:1400/300;background:var(--chip-paper);box-shadow:0 12px 0 -4px rgba(0,0,0,.25)}
.crate-front>i{position:absolute;inset:0;display:block;background:var(--room-ink);pointer-events:none}
.shop.in .crate-front>i{-webkit-mask:url(rooms/crate-front.webp) 0 0/100% 100% no-repeat;mask:url(rooms/crate-front.webp) 0 0/100% 100% no-repeat}
:root[data-look="blacklight"] .crate-front{background:#0a0912}
/* Back and Next are stencilled right on the crate. */
.stencil{position:absolute;top:0;bottom:0;width:19%;min-height:44px;padding:0;border:0;background:none;color:var(--room-ink);cursor:pointer;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
.stencil[hidden]{display:none}
.stencil-back{left:5.5%}.stencil-next{right:5.5%}
.stencil svg{display:block;width:min(100%,4.6rem);height:auto}
.stencil path{fill:currentColor}
.stencil .bridge{fill:none;stroke:var(--chip-paper);stroke-width:7}
:root[data-look="blacklight"] .stencil .bridge{stroke:#0a0912}
.stencil:focus-visible{outline:3px dashed var(--pink);outline-offset:-3px}
.swipe-sticker{position:absolute;z-index:31;right:-.3rem;top:calc(var(--tops)*6 + 1.6rem);margin:0;background:var(--sticker);color:#141414;font:700 .95rem/1 "Courier Prime","Courier New",monospace;padding:.34rem .5rem;transform:rotate(4deg);pointer-events:none}
.swipe-sticker[hidden]{display:none}
/* On the shortest phones the stack sits a little tighter, so the arrows stay above the call bar. */
@media (max-width:879px) and (max-height:620px){.crate{--tops:1.6rem}}
/* A big crate: the sleeves sit deeper behind the front so its stencils stay on the screen, and the small pieces grow with it. */
@media (min-width:1100px){
  .crate{--tops:var(--crate-tops);--rise:1.2%}
  .crate-front{margin-top:calc(-1*clamp(var(--crate-w)*.2,var(--crate-w)*1.1125 - var(--crate-fit),var(--crate-w)*.4))}
  .sleeve-tab{font-size:clamp(.9rem,.85vw,1.35rem)}
  .swipe-sticker{font-size:clamp(.95rem,1vw,1.6rem)}
  .stencil svg{width:min(100%,clamp(4.6rem,6vw,8rem))}
}
.slips{display:grid;gap:.7rem}
.slip{position:relative;color:var(--ink)}
.slip[hidden]{display:none}
/* The tab carries the word, so it isn't said twice. With no script there are no tabs to speak of, so it comes back. */
.slip-word{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:root:not(.js) .slip-word{position:static;width:auto;height:auto;clip-path:none;font:700 1.1rem "Courier Prime","Courier New",monospace;margin:0 0 .2rem}
.slip p{margin:0;font:700 clamp(1.2rem,1.75vw,2.4rem)/1.32 "Courier Prime","Courier New",monospace}
/* Pull a tag: a manila tag on a string. */
.pull-tag{position:relative;display:inline-block;margin:.7rem 0 .6rem 2.1rem;min-height:2.9rem;border:0;background:none;color:#141414;font:700 1.05rem/1 "Courier Prime","Courier New",monospace;cursor:pointer;padding:0}
.pull-tag[hidden]{display:none}
.pull-tag span{position:relative;display:block;background:#e5cf9f;padding:.85rem .85rem .85rem 1.55rem;clip-path:polygon(.85rem 0,100% 0,100% 100%,.85rem 100%,0 calc(100% - .85rem),0 .85rem);transition:transform .16s}
.pull-tag span::before{content:"";position:absolute;left:.6rem;top:50%;width:.5rem;height:.5rem;margin-top:-.25rem;border-radius:50%;background:#141414}
@media (hover:hover){.pull-tag:hover span{transform:translateY(.15rem) rotate(1.4deg)}}
.pull-tag:active span{transform:translateY(.4rem) rotate(2deg)}
.tag-string{position:absolute;left:-2.1rem;top:-.55rem;width:2.8rem;height:2.2rem;overflow:visible;pointer-events:none}
.tag-string path{fill:none;stroke:#141414;stroke-width:2.4;stroke-linecap:round}
.pull-tag:focus-visible{outline:3px dashed var(--pink);outline-offset:2px}
.tags{margin:0;padding:0;list-style:none;display:grid;gap:.2rem;font:700 .98rem/1.26 "Courier Prime","Courier New",monospace}
/* The newest tag shows whole. Older ones are edges behind it. */
.tags.pile{display:block;position:relative;width:fit-content;max-width:100%;margin-top:.5rem}
.tags.pile li{position:relative;padding:.55rem .7rem .55rem 1.5rem;background:#e5cf9f;color:#141414;transform:rotate(var(--r));clip-path:polygon(.8rem 0,100% 0,100% 100%,.8rem 100%,0 calc(100% - .8rem),0 .8rem)}
.tags.pile li::before{content:"";position:absolute;left:.55rem;top:50%;width:.46rem;height:.46rem;margin-top:-.23rem;border-radius:50%;background:#141414}
.tags.pile li.behind{position:absolute;inset:0;overflow:hidden;white-space:nowrap;color:transparent;background:#d6bf8c;transform:translate(calc(var(--b)*.32rem),calc(var(--b)*-.28rem)) rotate(calc(var(--r)*1.4));z-index:calc(5 - var(--b))}
.tags.pile li.behind::before{background:transparent}
.tags.pile li:not(.behind){z-index:6}
.tags.pile li.drop{animation:tagdrop .34s cubic-bezier(.2,1.4,.4,1)}
@keyframes tagdrop{from{transform:translateY(-1.6rem) rotate(calc(var(--r)*3));opacity:0}to{transform:rotate(var(--r));opacity:1}}
/* Cream tile: scuffed, low, and quiet. */
.shop-floor{position:relative;height:clamp(64px,7.5vw,130px);margin-top:.6rem;background:var(--room-ink)}
.shop.in .shop-floor{-webkit-mask:url(rooms/floor.webp) 50% 0/max(100%,900px) 100% no-repeat;mask:url(rooms/floor.webp) 50% 0/max(100%,900px) 100% no-repeat}
.shop:not(.in) .shop-floor{background:transparent}

/* The black record wall */
.trade{background:var(--wall-black);color:#f4f0e4}
/* The records run over onto the door's wall, so nothing is sliced by a straight edge where the two meet. */
.trade-top{position:relative;z-index:2;overflow-x:clip;overflow-y:visible}
.wall-records{position:absolute;inset:0;pointer-events:none}
.wall-layer{position:absolute;inset:0}
.near .wall-layer{will-change:transform}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
  .wall-layer{animation:walldrift linear both;animation-timeline:view()}
  @keyframes walldrift{from{transform:translate3d(0,calc(var(--dr)*-130vh),0)}to{transform:translate3d(0,calc(var(--dr)*130vh),0)}}
}}
.wallrec{--w:calc(var(--s)*1px + var(--s)*.75vw);position:absolute;display:block;padding:0;border:0;background:none;width:var(--w);height:var(--w);margin:calc(var(--w)/-2) 0 0 calc(var(--w)/-2);border-radius:50%;cursor:pointer;pointer-events:auto;touch-action:pan-y pan-x;-webkit-tap-highlight-color:transparent}
.wallrec svg{display:block;width:100%;height:100%}
.wallrec::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%);border-radius:50%}
.trade-inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:.9rem;padding:clamp(2rem,6vw,5rem) clamp(.75rem,4vw,3rem) clamp(1rem,3vw,2.4rem);pointer-events:none}
.trade-inner a,.trade-inner p{pointer-events:auto}
.brush-title{margin:0;width:min(94vw,calc(1700/1352*80vh),100rem)}
.brush-img{display:block;aspect-ratio:1700/1352;background:var(--brush)}
.trade.in .brush-img{-webkit-mask:url(rooms/brush-weird.webp) 0 0/100% 100% no-repeat;mask:url(rooms/brush-weird.webp) 0 0/100% 100% no-repeat}
.trade:not(.in) .brush-img{background:transparent}
.gun-strip{display:flex;flex-wrap:wrap;justify-content:center;margin:.2rem 0;font:700 clamp(1.15rem,3.4vw,1.9rem)/1 "Courier Prime","Courier New",monospace;color:#141414;transform:rotate(-1.4deg)}
.gun-strip span{position:relative;display:block;background:var(--sticker);padding:.62em .85em;border-left:2px dashed rgba(20,20,20,.55)}
.gun-strip span:first-child{border-left:0}
.gun-strip span::before,.gun-strip span::after{content:"";position:absolute;left:0;right:0;height:.13em;background:var(--red)}
.gun-strip span::before{top:.22em}
.gun-strip span::after{bottom:.22em}
/* One price-gun sticker per item, scattered across the black. */
.gun-scatter{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(.5rem,1.6vw,1.1rem) clamp(.5rem,2vw,1.4rem);margin:.5rem 0;max-width:46rem;font:700 clamp(1.02rem,2vw,1.3rem)/1 "Courier Prime","Courier New",monospace;color:#141414}
.gs{position:relative;display:block;background:var(--sticker);padding:.56em .72em;white-space:nowrap}
.gs::before,.gs::after{content:"";position:absolute;left:0;right:0;height:.12em;background:var(--red)}
.gs::before{top:.17em}.gs::after{bottom:.17em}
.gs1{transform:rotate(-4deg) translateY(.2rem)}.gs2{transform:rotate(3deg) translateY(-.3rem)}.gs3{transform:rotate(-2deg) translateY(.5rem)}.gs4{transform:rotate(5deg)}.gs5{transform:rotate(-6deg) translateY(-.2rem)}.gs6{transform:rotate(2deg) translateY(.4rem)}.gs7{transform:rotate(-3deg) translateY(-.1rem)}
.big-link{display:inline-block;margin:.2rem 0;background:var(--btn);color:var(--btn-ink);font-weight:800;font-size:clamp(1.15rem,2.4vw,1.5rem);padding:.85rem 1.05rem;text-decoration:none;text-align:center}
/* Back this way: painted on the wall, with an arrow down to the door. */
.keep-going{margin:.2rem 0 0}
.keep-going a{display:block;width:clamp(15rem,34vw,26rem);min-height:44px}
.keep-going a{filter:drop-shadow(0 0 2px #0b0b0b) drop-shadow(0 0 7px #0b0b0b)}
.bw-paint{display:block;aspect-ratio:1320/520;background:var(--brush)}
.trade.in .bw-paint{-webkit-mask:url(rooms/back-this-way.webp) 0 0/100% 100% no-repeat;mask:url(rooms/back-this-way.webp) 0 0/100% 100% no-repeat}
.trade:not(.in) .bw-paint{background:transparent}
.door-track{position:relative;z-index:1;background:var(--wall-black);display:none}
/* One screen, no stopping: the doorway opens up around you as it rises, and the hall has filled the screen by the time it reaches the top. */
.door-track.walk{display:block;height:var(--stage-h)}
.door-stage{position:relative;height:var(--stage-h);overflow:hidden;background:var(--hall-bg)}
.door-hall{position:absolute;inset:0;transform-origin:50% 42%}
.near .door-hall,.near .door-rec{will-change:transform}
.door-hall .hall-brush{position:absolute;inset:-50% 0}
.dp{position:absolute;left:0;top:0;display:block;transform-origin:0 0}
.near .dp{will-change:transform}
.dp-top,.dp-left,.dp-right{width:100%;height:100%;background:var(--wall-black)}
.dp-floor{width:100%;height:100%;background:radial-gradient(circle,#0b0b0b 2.6px,transparent 3px) 0 0/10px 10px,radial-gradient(circle,#0b0b0b 2.6px,transparent 3px) 5px 5px/10px 10px,#26262a}
.dp-trim-t,.dp-trim-l,.dp-trim-r{width:100px;height:100px;background:#f4f0e4}
.dp-sill{width:100px;height:100px;background:#141414}
.dp-jamb-l,.dp-jamb-r,.dp-jamb-t{background:radial-gradient(circle,#141414 4.6px,transparent 5.2px) 0 0/16px 16px,radial-gradient(circle,#141414 4.6px,transparent 5.2px) 8px 8px/16px 16px,#d9d4c6}
.dp-jamb-l,.dp-jamb-r{width:48px;height:1872px}
.dp-jamb-t{width:1600px;height:48px}
/* The records on the door's wall ride along with the stage but aren't clipped by it, so its top edge never slices one. */
.door-recs{position:absolute;left:0;right:0;top:0;height:var(--stage-h);pointer-events:none}
.door-rec{position:absolute;left:0;top:0;width:200px;height:200px;margin:-100px 0 0 -100px}
.door-rec svg{display:block;width:100%;height:100%}
.door-still .door-track{display:block}

/* The hall: one long painted wall that never repeats */
.hall{background:var(--hall-bg);padding:clamp(1.4rem,4vh,3rem) clamp(.75rem,4vw,3rem) clamp(1.4rem,4vh,3rem);display:grid;justify-items:center;align-content:center}
/* LOOK BEHIND YOU: a patch of wall painted over, and the words brushed on it. The real words sit in the hall, as text. */
.hall-look{position:absolute;left:50%;top:42%;width:min(86%,44rem);aspect-ratio:1500/760;transform:translate(-50%,-50%) rotate(-1.6deg)}
.hall-look i{position:absolute;inset:0;display:block}
.look-panel{background:var(--hall-bg)}
.look-words{background:var(--hall-ink)}
.trade.in .look-panel,.hall.in .look-panel{-webkit-mask:url(rooms/look-panel.webp) 0 0/100% 100% no-repeat;mask:url(rooms/look-panel.webp) 0 0/100% 100% no-repeat}
.trade.in .look-words,.hall.in .look-words{-webkit-mask:url(rooms/look-words.webp) 0 0/100% 100% no-repeat;mask:url(rooms/look-words.webp) 0 0/100% 100% no-repeat}
.trade:not(.in) .look-panel,.trade:not(.in) .look-words,.hall:not(.in) .look-panel,.hall:not(.in) .look-words{background:transparent}
.look-text{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hall-look-flat{display:none}
.door-still .door-hall .hall-look{display:none}
.door-still .hall-look-flat{display:block;position:relative;left:auto;top:auto;z-index:2;width:min(92%,34rem);margin:0 0 1rem;transform:rotate(-1.6deg)}
:root:not(.js) .look-text{position:relative;z-index:2;width:auto;height:auto;clip-path:none;white-space:normal;margin:0 0 .8rem;color:var(--hall-ink);background:var(--hall-bg);padding:.1em .4em;font:800 clamp(1.8rem,7vw,3.4rem)/1.05 Archivo,Arial,sans-serif;text-align:center}
.cork-wrap{position:relative;z-index:2;width:min(100%,62rem)}
.hall-brush{display:block;position:absolute;inset:0;background:var(--hall-ink)}
.trade.in .door-hall .hall-brush,.hall.in .hall-brush{-webkit-mask:url(rooms/hall-tall.webp) 0 0/100% auto no-repeat;mask:url(rooms/hall-tall.webp) 0 0/100% auto no-repeat}
@media (min-aspect-ratio:1/1){.trade.in .door-hall .hall-brush,.hall.in .hall-brush{-webkit-mask-image:url(rooms/hall-wide.webp);mask-image:url(rooms/hall-wide.webp)}}
.trade.in .door-hall .hall-brush{-webkit-mask-position:0 calc(var(--stage-h)*.5);mask-position:0 calc(var(--stage-h)*.5)}
.hall.in .hall-brush{-webkit-mask-position:0 calc(var(--stage-h)*-1);mask-position:0 calc(var(--stage-h)*-1)}
.trade:not(.in) .door-hall .hall-brush,.hall:not(.in) .hall-brush{background:transparent}
.cork{position:relative;z-index:2;padding:clamp(.8rem,2.4vw,2rem);background-color:var(--gold);box-shadow:0 0 0 clamp(6px,1vw,12px) #141414;display:grid;gap:clamp(.7rem,1.8vw,1.4rem)}
.hall.in .cork{background-image:url(rooms/cork.webp);background-size:22rem 22rem}
.stars-card{justify-self:center;background:#f6f2e6;color:#141414;font:700 clamp(1.08rem,3vw,2rem)/1.14 "Courier Prime","Courier New",monospace;padding:.45em .8em .5em;transform:rotate(-1.2deg);text-align:center}
.stars-card h2{margin:0;font:inherit}
.stars-card p{margin:.22em 0 0;font-size:.92em}
/* Pins, the way pins end up on a corkboard: in clumps, crooked, on top of each other. */
.pins{--pz:clamp(6.6rem,35.5vw,10.6rem);position:relative;margin:0;padding:0;list-style:none;height:calc(var(--pz)*2.72)}
.pins li{position:absolute;left:clamp(0px,calc(var(--x)*1% - var(--pz)*var(--sz,1)/2),calc(100% - var(--pz)*var(--sz,1)));top:calc(var(--y)*1% - var(--pz)*var(--sz,1)/2);transform:rotate(var(--rot,0deg));transition:transform .16s}
.pins li.open{z-index:6;transform:rotate(0deg) scale(1.16)}
.pins li:nth-child(1){--x:21;--y:18;--rot:-9deg}
.pins li:nth-child(2){--x:72;--y:16;--rot:6deg;--sz:1.05}
.pins li:nth-child(3){--x:44;--y:45;--rot:-4deg;--sz:1.04;z-index:2}
.pins li:nth-child(4){--x:82;--y:50;--rot:11deg}
.pins li:nth-child(5){--x:15;--y:62;--rot:-7deg;z-index:1}
.pins li:nth-child(6){--x:62;--y:83;--rot:4deg;z-index:3}
.pins li:nth-child(7){--x:25;--y:83;--rot:-12deg;z-index:2}
@media (min-width:700px){
  .pins{--pz:clamp(8.4rem,15.5vw,10.6rem);height:calc(var(--pz)*1.72)}
  .pins li:nth-child(1){--x:9;--y:34}
  .pins li:nth-child(2){--x:24;--y:62}
  .pins li:nth-child(3){--x:41;--y:32;z-index:2}
  .pins li:nth-child(4){--x:56;--y:66;z-index:3}
  .pins li:nth-child(5){--x:70;--y:31}
  .pins li:nth-child(6){--x:80;--y:74;z-index:3}
  .pins li:nth-child(7){--x:94;--y:31;z-index:1}
}
.pin{display:block;width:calc(var(--pz)*var(--sz,1));height:calc(var(--pz)*var(--sz,1));padding:0;border:0;border-radius:50%;background:none;color:#141414;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.pin:focus-visible{outline:3px dashed #141414;outline-offset:3px}
.pin-in{position:relative;display:block;width:100%;height:100%}
.pin-face,.pin-back{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:50%;transition:transform .16s ease-in}
.pin-face{padding:0 16%;font:800 calc(var(--pz)*.128)/1.02 Archivo,Arial,sans-serif;background:#f6f2e6 center/100% 100% no-repeat;transition:transform .2s cubic-bezier(.2,1.5,.4,1) .16s;box-shadow:2px 4px 0 rgba(0,0,0,.45)}
.pin[aria-pressed="true"] .pin-face{transform:scaleX(0);transition:transform .16s ease-in}
.pin[aria-pressed="true"] .pin-back{transform:scaleX(1);transition:transform .2s cubic-bezier(.2,1.5,.4,1) .16s}
.hall.in .pin-a .pin-face{background-image:url(rooms/pin-a.svg)}
.hall.in .pin-b .pin-face{background-image:url(rooms/pin-b.svg)}
.hall.in .pin-c .pin-face{background-image:url(rooms/pin-c.svg)}
.hall.in .pin-d .pin-face{background-image:url(rooms/pin-d.svg)}
.hall.in .pin-e .pin-face{background-image:url(rooms/pin-e.svg)}
.hall.in .pin-f .pin-face{background-image:url(rooms/pin-f.svg)}
.hall.in .pin-g .pin-face{background-image:url(rooms/pin-g.svg)}
.pin-a .pin-face{padding:0 23%;font-size:calc(var(--pz)*.112)}
.pin-b .pin-face{padding:40% 15% 0}
.pin-c .pin-face{padding:0 13%;font-size:calc(var(--pz)*.098)}
.pin-d .pin-face{padding:44% 13% 0;font-size:calc(var(--pz)*.106)}
.pin-e .pin-face{padding:0 22%;font-size:calc(var(--pz)*.108)}
.pin-f .pin-face{padding:0 15% 36%;font-size:calc(var(--pz)*.106)}
.pin-g .pin-face{padding:0 15%;font-size:calc(var(--pz)*.116)}
/* The back of a pin: bare tin, a rolled rim, and the pin itself. The sentence is printed on the tin. */
.pin-back{transform:scaleX(0);background:#dcdcd6 center/100% 100% no-repeat;padding:27% 13% 9%;box-shadow:2px 4px 0 rgba(0,0,0,.45);font:700 calc(var(--pz)*.094)/1.1 "Courier Prime","Courier New",monospace}
.hall.in .pin-back{background-image:url(rooms/pin-back.svg)}
/* The Ask lines, on one card with one pin. */
.ask-card{position:relative;justify-self:center;margin:.25rem 0 0;padding:.8rem 1rem .7rem;list-style:none;background:#e5cf9f;color:#141414;font:700 clamp(.95rem,1.8vw,1.14rem)/1.24 "Courier Prime","Courier New",monospace;max-width:38rem;transform:rotate(-.8deg)}
.ask-card li+li{margin-top:.24em}
.ask-card::before{content:"";position:absolute;left:50%;top:-.42rem;width:.8rem;height:.8rem;margin-left:-.4rem;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffb0b0 0,#d3232e 55%,#7c141a 100%);box-shadow:1px 2px 0 rgba(0,0,0,.5)}
/* The shy figurine. It only ever moves by transforms, and only while the hall is on screen. */
.shyfig{display:block;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.shyfig[hidden]{display:none}
.shy-art{position:relative;display:block}
.shy-art img{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
.shy-eye{position:absolute;display:block;width:4.2%;height:3.3%;margin:-1.65% 0 0 -2.1%;border-radius:50%;background:#141414}
.se-l{left:41.2%;top:54.2%}.se-r{left:58.8%;top:54.2%}
.shy-edge{--pw:clamp(6.6rem,30vw,11rem);position:fixed;z-index:9;width:var(--pw);transition:transform .55s cubic-bezier(.2,1.2,.4,1)}
.shy-edge.right{right:0;bottom:calc(var(--bar-h,var(--preview-h)) + 9vh);transform:translateX(105%) rotate(-24deg)}
.shy-edge.right.in{transform:translateX(38%) rotate(-24deg)}
.shy-edge.left{left:0;top:18vh;transform:translateX(-105%) rotate(24deg)}
.shy-edge.left.in{transform:translateX(-38%) rotate(24deg)}
.shy-top{--pw:clamp(6rem,24vw,10.5rem);position:absolute;z-index:1;left:64%;top:0;width:var(--pw);transform:translateY(-66%) rotate(6deg);transition:transform .55s cubic-bezier(.2,1.2,.4,1)}
.shy-top:not(.in){transform:translateY(4%) rotate(6deg)}
.shyfig.duck{transition-duration:.14s;transition-timing-function:ease-in}
.shyfig.duck .shy-art{animation:shywobble .34s ease-out}
@keyframes shywobble{0%{transform:rotate(0)}25%{transform:rotate(-13deg)}55%{transform:rotate(10deg)}80%{transform:rotate(-5deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.shyfig{transition:none}.shyfig.duck .shy-art{animation:none}}

/* The back room: flat kraft with a few fibers. The game grows with the room, and the shelf stays out of the big clown's way. */
.back{--floor-h:calc(100vw*.3636);background:var(--kraft);color:#141414}
.back-fiber{position:absolute;inset:0;display:block;background:var(--room-ink);opacity:.42}
.back.in .back-fiber{-webkit-mask:url(rooms/fiber.webp) 0 0/max(300px,28vw) repeat;mask:url(rooms/fiber.webp) 0 0/max(300px,28vw) repeat}
.back:not(.in) .back-fiber{background:transparent}
.back-layout{position:relative;z-index:2;display:grid;gap:clamp(1rem,3vw,3rem);align-items:start;padding:clamp(1.4rem,4vw,3.6rem) clamp(.75rem,3.5vw,5rem) 0;font-size:clamp(1rem,.6vw + .55rem,2.1rem)}
.clown-game{display:grid;justify-items:center;gap:.55em;min-width:0;width:100%;max-width:30em;margin:0 auto}
.card-title{margin:0;width:100%;max-width:30em}
.ct-paint{display:block;aspect-ratio:1800/620;background:center/100% 100% no-repeat}
.back.in .ct-paint{background-image:url(rooms/card-title.webp)}
.back-sub{margin:.2em 0;background:var(--sticker);color:#141414;font:700 1.05em/1.2 "Courier Prime","Courier New",monospace;padding:.4em .7em;transform:rotate(1.4deg);text-align:center}
.shelf-wrap{position:relative;width:100%;max-width:27em;margin-top:.3em}
.saved-row{display:flex;justify-content:center;gap:.1em;min-height:3.6em;align-items:flex-end;border-bottom:7px solid #4a3620}
.saved-row img{display:block;width:2.5em;height:auto}
.clown-stage{position:relative;height:19em}
.clown-img{position:absolute;left:50%;bottom:0;height:96%;width:auto;transform:translateX(-50%)}
.clown-img.gone{visibility:hidden}
.clown-img.arrive{animation:clownin .26s cubic-bezier(.2,1.5,.4,1)}
@keyframes clownin{from{transform:translateX(-50%) translateY(-40%) scale(.7);opacity:0}to{transform:translateX(-50%);opacity:1}}
.clown-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.clown-hammer{position:absolute;right:6%;top:-6%;width:5.5em;height:auto;z-index:3;transform-origin:50% 96%;transform:rotate(44deg);opacity:0;pointer-events:none}
.clown-hammer.swing{animation:hammer .5s ease-in}
@keyframes hammer{0%{opacity:1;transform:rotate(58deg)}34%{opacity:1;transform:rotate(-52deg)}60%{opacity:1;transform:rotate(-34deg)}100%{opacity:0;transform:rotate(30deg)}}
.clown-medal{position:absolute;left:50%;top:48%;width:3.4em;height:3.4em;margin-left:-1.7em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3b0 0,#f2b21b 50%,#a8780c 100%);box-shadow:0 0 0 3px #141414;z-index:3;opacity:0;transform:scale(.3)}
.clown-medal::before{content:"";position:absolute;left:50%;top:-1.6em;width:1.1em;height:1.7em;margin-left:-.55em;background:var(--red);border:3px solid #141414;border-bottom:0}
.clown-medal.on{animation:medal .42s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes medal{to{opacity:1;transform:scale(1)}}
.shelf-board{height:1.1em;background:#7a5a34;box-shadow:inset 0 3px 0 rgba(255,255,255,.3),0 3px 0 rgba(0,0,0,.45)}
/* Smash and Save: brush lettering on cardboard. A hammer on one, a bandage on the other. */
.clown-btns{display:flex;justify-content:center;gap:.5em;width:100%;margin-top:.4em}
.card-btn{flex:1 1 0;max-width:15em;min-height:44px;padding:0;border:0;background:none;cursor:pointer;transition:transform .12s;-webkit-tap-highlight-color:transparent}
@media (hover:hover){.card-btn:hover{transform:rotate(-1.4deg) translateY(-.1em)}}
.card-btn:active,.card-btn.down{transform:translateY(.2em) rotate(1deg);filter:brightness(.9)}
.card-btn:focus-visible{outline:3px dashed #141414;outline-offset:2px}
.cb-paint{display:block;aspect-ratio:760/400;background:center/100% 100% no-repeat}
.back.in .smash .cb-paint{background-image:url(rooms/card-smash.webp)}
.back.in .save .cb-paint{background-image:url(rooms/card-save.webp)}
.clown-count,.back-line{margin:.1em 0 0;color:#141414;font:700 1em/1.25 "Courier Prime","Courier New",monospace;text-align:center}
:root[data-look="blacklight"] .clown-count,:root[data-look="blacklight"] .back-line{color:#f4f0e4}
/* The big clown: old, sculpted, chipped, and watching you. */
.wall-clown{position:relative;width:min(100%,46em);aspect-ratio:1;margin:0 auto}
.wc{position:absolute;inset:0;display:block}
.wc-base{background:#c9a877}
:root[data-look="blacklight"] .wc-base{background:#5d519e}
.back.in .wc-base{-webkit-mask:url(rooms/wc-base.webp) 0 0/100% 100% no-repeat;mask:url(rooms/wc-base.webp) 0 0/100% 100% no-repeat}
.wc-white{background:#f4efe2}.wc-red{background:var(--red)}.wc-ink{background:var(--room-ink)}.wc-hollow{background:#0d0d10}
.back.in .wc-white{-webkit-mask:url(rooms/wc-white.webp) 0 0/100% 100% no-repeat;mask:url(rooms/wc-white.webp) 0 0/100% 100% no-repeat}
.back.in .wc-red{-webkit-mask:url(rooms/wc-red.webp) 0 0/100% 100% no-repeat;mask:url(rooms/wc-red.webp) 0 0/100% 100% no-repeat}
.back.in .wc-ink{-webkit-mask:url(rooms/wc-ink.webp) 0 0/100% 100% no-repeat;mask:url(rooms/wc-ink.webp) 0 0/100% 100% no-repeat}
.back.in .wc-hollow{-webkit-mask:url(rooms/wc-hollow.webp) 0 0/100% 100% no-repeat;mask:url(rooms/wc-hollow.webp) 0 0/100% 100% no-repeat}
.back:not(.in) .wc{background:transparent}
.wc-pupil{position:absolute;display:block;width:6.4%;height:6.4%;margin:-3.2% 0 0 -3.2%;border-radius:50%;background:radial-gradient(circle at 36% 32%,#fff 0 11%,#141414 13%);will-change:transform}
:root[data-look="blacklight"] .wc-pupil{background:radial-gradient(circle at 36% 32%,#fff 0 11%,#050509 13%)}
.wc-p1{left:39.44%;top:51.06%}.wc-p2{left:60.56%;top:51.06%}
.back-floor{position:relative;z-index:3;height:var(--floor-h);margin-top:calc(var(--floor-h)*-.42);pointer-events:none}
.back-floor i{position:absolute;inset:0;display:block}
.back-white{background:#f8f4ea}.back-red{background:var(--red)}.back-ink{background:var(--room-ink)}
.back.in .back-white{-webkit-mask:url(rooms/back-white.webp) 0 100%/100% 100% no-repeat;mask:url(rooms/back-white.webp) 0 100%/100% 100% no-repeat}
.back.in .back-red{-webkit-mask:url(rooms/back-red.webp) 0 100%/100% 100% no-repeat;mask:url(rooms/back-red.webp) 0 100%/100% 100% no-repeat}
.back.in .back-ink{-webkit-mask:url(rooms/back-toner.webp) 0 100%/100% 100% no-repeat;mask:url(rooms/back-toner.webp) 0 100%/100% 100% no-repeat}
.back:not(.in) .back-floor i{background:transparent}
@media (max-width:639px){
  .back{--floor-h:calc(100vw*.68)}
  .back.in .back-white{-webkit-mask-image:url(rooms/back-tall-white.webp);mask-image:url(rooms/back-tall-white.webp)}
  .back.in .back-red{-webkit-mask-image:url(rooms/back-tall-red.webp);mask-image:url(rooms/back-tall-red.webp)}
  .back.in .back-ink{-webkit-mask-image:url(rooms/back-tall-toner.webp);mask-image:url(rooms/back-tall-toner.webp)}
  .wall-clown{width:100%;margin-top:.4rem}
}
@media (min-width:1000px){
  .back-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center}
  .clown-game{max-width:none}
  .card-title,.shelf-wrap{max-width:32em}
  .back-layout{padding-bottom:calc(var(--floor-h)*.12)}
  .back-floor{margin-top:calc(var(--floor-h)*-.5)}
}

/* Since 1994: the back of a sleeve */
.since{background:var(--stock);color:var(--stock-ink);padding:clamp(1.8rem,6vw,5rem) clamp(.75rem,4vw,3rem)}
.ring-wear{position:absolute;left:50%;top:50%;width:min(112vw,74rem);aspect-ratio:1;transform:translate(-50%,-50%);background:var(--wear);pointer-events:none}
.since.in .ring-wear{-webkit-mask:url(rooms/ring-wear.webp) 0 0/100% 100% no-repeat;mask:url(rooms/ring-wear.webp) 0 0/100% 100% no-repeat}
.since:not(.in) .ring-wear{background:transparent}
.sleeve-back{position:relative;z-index:1;max-width:58rem;margin:0 auto;font:700 1.02rem/1.36 "Courier Prime","Courier New",monospace}
.sb-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.3rem 1rem;border-bottom:4px solid currentColor;padding-bottom:.3rem;margin-bottom:.9rem}
.sb-head h2{margin:0;font:800 clamp(2rem,6.6vw,4.2rem)/1.02 Archivo,Arial,sans-serif;letter-spacing:-.01em}
.sb-cat{margin:0;font-size:1.05rem}
.sb-sides{display:grid;gap:1.2rem 2.4rem}
@media (min-width:760px){.sb-sides{grid-template-columns:1fr 1fr}}
.sb-side h3{margin:0 0 .45rem;font:800 1.15rem Archivo,Arial,sans-serif;letter-spacing:.14em;border-bottom:2px solid currentColor;padding-bottom:.14rem}
.tracks{margin:0;padding:0;list-style:none;display:grid;gap:.52rem}
.tracks li{position:relative;display:grid;grid-template-columns:1.9rem 3rem minmax(0,1fr);gap:.1rem .3rem}
@media (max-width:420px){.tracks .nb{white-space:normal}}
.tracks .b1>span:last-of-type{padding-right:2.2rem}
.tracks a{display:block;min-height:44px;line-height:44px;color:inherit}
.sb-saucer{position:absolute;right:0;top:-.1rem;width:2.1rem;height:auto}
.tracks b{font-weight:700}
.tracks .yr{font-weight:700}
.sb-note{margin:.45rem 0 0}
.sb-note a{display:inline-block;min-height:44px;padding:.6rem 0;color:inherit}
.sb-tiny{margin:1.1rem 0 0;font-size:.74rem;text-align:center;letter-spacing:.02em}
/* On a big monitor the sleeve back grows with the screen, so it doesn't sit small in a wide empty room. */
@media (min-width:1700px){
  .ring-wear{width:min(112vw,clamp(74rem,60vw,120rem))}
  .sleeve-back{max-width:72vw;font-size:clamp(1.02rem,.92vw,1.6rem)}
  .sb-head h2{font-size:clamp(4.2rem,4.6vw,7.4rem)}
  .sb-cat{font-size:1em}
  .sb-sides{gap:1.4em 3.4em}
  .sb-side h3{font-size:1.14em;margin-bottom:.5em}
  .tracks{gap:.6em}
  .tracks li{grid-template-columns:2em 3.1em minmax(0,1fr)}
  .tracks .b1>span:last-of-type{padding-right:3em}
  .sb-saucer{width:2.8em}
  .sb-tiny{font-size:.74em}
}

/* Visit: a bare wall, a bare sidewalk, and shadows only where something stands */
/* On a very wide screen the sidewalk stops growing, and the room always leaves space above the wall for the title. */
.visit{--vp-h:min(32.91vw,46rem);--pole-x:12%;min-height:calc(var(--vp-h) + 9rem);background:var(--paper);color:#141414}
:root[data-sky="night"] .visit{background:#0a0912}
.visit>i{position:absolute;left:0;right:0;display:block}
.visit>.visit-corners{top:0;bottom:var(--vp-h);background:var(--room-ink)}
.visit>.visit-plate{bottom:0;height:var(--vp-h);background:var(--room-ink)}
:root[data-sky="night"] .visit>.visit-corners,:root[data-sky="night"] .visit-plate{background:#5a78ff}
.visit.in .visit-corners{-webkit-mask:url(rooms/corner-dots.webp) 0 0/100% auto no-repeat;mask:url(rooms/corner-dots.webp) 0 0/100% auto no-repeat}
.visit.in .visit-plate{-webkit-mask:url(rooms/visit-day.webp) 0 0/100% 100% no-repeat;mask:url(rooms/visit-day.webp) 0 0/100% 100% no-repeat}
:root[data-sky="night"] .visit.in .visit-plate{-webkit-mask-image:url(rooms/visit-night.webp);mask-image:url(rooms/visit-night.webp)}
@media (max-width:639px){
  .visit{--vp-h:94.55vw;--pole-x:3%}
  .visit.in .visit-plate{-webkit-mask-image:url(rooms/visit-tall-day.webp);mask-image:url(rooms/visit-tall-day.webp)}
  :root[data-sky="night"] .visit.in .visit-plate{-webkit-mask-image:url(rooms/visit-tall-night.webp);mask-image:url(rooms/visit-tall-night.webp)}
}
.visit:not(.in)>i{background:transparent!important}
/* The telephone pole rises through the whole scene. */
.visit-pole{position:absolute;top:0;bottom:clamp(1.4rem,5vw,4rem);right:var(--pole-x);width:clamp(2.6rem,6.4vw,7rem);background:#b58f5e}
:root[data-look="blacklight"] .visit-pole,:root[data-sky="night"] .visit-pole{background:#3a2c1c}
.visit-pole::before{content:"";position:absolute;inset:0;background:var(--room-ink)}
.visit-pole::after{content:"";position:absolute;left:-34%;right:-40%;bottom:-.45rem;height:1rem;border-radius:50%;background:rgba(0,0,0,.26)}
.visit.in .visit-pole::before{-webkit-mask:url(rooms/pole.webp) 0 0/100% auto repeat-y;mask:url(rooms/pole.webp) 0 0/100% auto repeat-y}
.visit:not(.in) .visit-pole::before{background:transparent}
.visit-inner{position:relative;z-index:2;display:grid;gap:clamp(.8rem,2vw,1.4rem);padding:clamp(1.6rem,5vw,3.6rem) clamp(.75rem,4vw,3rem) clamp(1rem,2.4vw,2.4rem);max-width:96rem;margin:0 auto;align-items:start;grid-template-columns:minmax(0,1fr)}
.visit-title{margin:0;justify-self:start;color:var(--ink);font:800 clamp(2.4rem,7.4vw,5.4rem)/1 Archivo,Arial,sans-serif;letter-spacing:-.01em;transform:rotate(-1deg)}
:root[data-sky="night"] .visit-title{color:#f4f0e4}
@media (max-height:620px){.neon.neon{width:min(78%,30rem);justify-self:center}}
.neon{scroll-margin-top:.6rem;justify-self:start;width:min(100%,30rem);padding:.7rem .9rem;background:#0c0c0e;border-radius:.9rem;box-shadow:0 0 0 4px #2a2a2c}
.neon svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 0 5px #ff2d55) drop-shadow(0 0 18px #ff2d55)}
.neon-tube{fill:none;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke:#ff4d6d}
.neon-core{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke:#ffe9ee}
:root[data-hours="closed"] .neon svg{filter:none}
:root[data-hours="closed"] .neon-tube{stroke:#3a3a3e}
:root[data-hours="closed"] .neon-core{stroke:#55555a}
.visit-card{position:relative;background:#f6f2e6;color:#141414;padding:.9rem 1rem;font:700 1.02rem/1.34 "Courier Prime","Courier New",monospace;text-align:center;transform:rotate(-.5deg);box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 1px rgba(20,20,20,.14)}
.visit-where{margin:0 0 .4rem;font:800 clamp(1.2rem,2.6vw,1.6rem)/1.16 Archivo,Arial,sans-serif}
.visit-hours{margin:.3rem 0}
.visit-hours strong{font-size:1.14em}
.visit-hours .set{display:inline-block;font-size:.8em;margin:0 .2rem}
.visit-facts{margin:.4rem 0;padding:0;list-style:none}
.visit-chair-line{margin:.45rem 0}
.visit-actions{margin:.5rem -.3rem .1rem}
.visit-actions .strip{min-height:56px;font-size:clamp(.95rem,1.1vw,1.15rem)}
.visit-actions .strip-dirs{width:auto;margin-left:0}
/* The tear-off flyer is stapled to the pole. */
.flyer{position:relative;z-index:1;background:linear-gradient(#f4f0e4,#f4f0e4) 0 0/100% calc(100% - 8.6rem) no-repeat;color:#141414;padding:.9rem .7rem 0;filter:drop-shadow(1px 3px 0 rgba(0,0,0,.45));transform:rotate(-1.4deg);width:100%;max-width:21rem;justify-self:end;margin-right:calc(var(--pole-x)*.2)}
.flyer-head{margin:0;font:800 clamp(2rem,6vw,3rem)/.94 Archivo,Arial,sans-serif;text-align:center}
.flyer-sub{margin:.3rem 0 .55rem;font:700 1.02rem "Courier Prime","Courier New",monospace;text-align:center}
.flyer-tabs{display:grid;grid-template-columns:repeat(8,1fr);border-top:2px dashed #141414;margin:0 -.7rem}
.tab{position:relative;display:grid;place-items:center;height:8.6rem;border-left:1px dashed #141414;color:#141414;text-decoration:none;font:700 .86rem/1 "Courier Prime","Courier New",monospace;writing-mode:vertical-rl;text-align:center;padding:0;background:#f4f0e4;transition:transform .42s cubic-bezier(.3,.8,.5,1),opacity .42s;transform-origin:50% 0;white-space:nowrap;overflow:hidden}
.tab:first-child{border-left:0}
.tab.gone{visibility:hidden}
.tab.torn{transform:translateY(120%) rotate(9deg);opacity:0;pointer-events:none}
.staple{position:absolute;top:.35rem;width:1.1rem;height:.2rem;background:linear-gradient(#ddd,#777);box-shadow:0 1px 0 #141414}
.staple.s1{left:.6rem;transform:rotate(-8deg)}.staple.s2{right:.6rem;transform:rotate(6deg)}.staple.s3{left:50%;margin-left:-.55rem;transform:rotate(3deg)}
/* The sidewalk: their sign leaning, and the red chair. */
.visit-street{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:clamp(.4rem,2vw,2rem);min-height:0}
.lean-sign{position:relative;flex:1 1 56%;min-width:0;max-width:52rem;margin:0 0 .3rem;transform:perspective(1100px) rotateX(5deg) rotate(-1.6deg);transform-origin:50% 100%}
.lean-sign img{display:block;width:100%;height:auto;filter:drop-shadow(0 7px 5px rgba(0,0,0,.34))}
.lean-sign figcaption{position:absolute;left:4%;top:-3.1rem;display:flex;align-items:flex-end;gap:.25rem;padding:.12em .4em;background:var(--paper);color:var(--ink);font:700 clamp(.98rem,1.8vw,1.2rem)/1.1 "Courier Prime","Courier New",monospace}
:root[data-sky="night"] .lean-sign figcaption{color:#f4f0e4;background:#0b0a14}
.lean-arrow{order:-1;width:2.6rem;height:auto;overflow:visible;transform:scaleX(-1) rotate(8deg);margin-bottom:-1.4rem}
.lean-arrow path{fill:none;stroke:currentColor;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.visit-chair{display:block;flex:0 1 38%;min-width:0;width:38%;max-width:18rem;height:auto}
@media (min-width:640px){
  .visit{--pole-x:5%}
  .visit-inner{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:"title title" "neon flyer" "card flyer" "street street"}
  .visit-title{grid-area:title}.neon{grid-area:neon}.visit-card{grid-area:card}.flyer{grid-area:flyer}.visit-street{grid-area:street}
}
@media (min-width:1100px){
  /* The flyer stays stapled to the pole, however wide the street gets. */
  .visit{--vis-max:96rem;--pole-x:calc(max(0px,(100vw - var(--vis-max))/2) + min(100vw,var(--vis-max))*.09)}
  .visit-inner{grid-template-columns:minmax(0,.86fr) minmax(0,1.4fr) minmax(0,.66fr);grid-template-areas:"title title flyer" "neon street flyer" "card street flyer"}
  .visit-street{align-self:end;height:100%}
  .visit-chair{width:clamp(8.5rem,calc(min(100vw,var(--vis-max))*.125),20rem);max-width:none;flex:0 0 auto}
}
/* On a big monitor the whole sidewalk scene grows with the screen, so the card doesn't sit small on a wide street. */
@media (min-width:1700px){
  .visit{--vis-max:min(86vw,150rem);--vp-h:min(32.91vw,64rem)}
  .visit-inner{max-width:var(--vis-max)}
  .visit-title{font-size:clamp(5.4rem,3.6vw,8.4rem)}
  .neon{width:min(100%,clamp(30rem,26vw,46rem));padding:1rem 1.3rem}
  .visit-card{font-size:clamp(1.02rem,.86vw,1.5rem);padding:1.1em 1.2em}
  .visit-where{font-size:clamp(1.6rem,1.4vw,2.5rem)}
  .visit-actions .strip{min-height:clamp(56px,3.4vw,5.6rem);font-size:clamp(1.15rem,1vw,1.75rem)}
  .visit-chair{width:clamp(8.5rem,calc(var(--vis-max)*.125),30rem)}
  .flyer{max-width:clamp(21rem,19vw,34rem);background-size:100% calc(100% - 10rem)}
  .flyer-head{font-size:clamp(3rem,2.9vw,5rem)}
  .flyer-sub{font-size:clamp(1.02rem,1vw,1.6rem)}
  .tab{height:10rem;font-size:clamp(.86rem,.72vw,1.15rem)}
  .lean-sign figcaption{font-size:clamp(1.2rem,1vw,1.7rem)}
}

/* The record at the end. It comes up behind their painted ridge, and turning it over opens Side B. */
.foot{--foot-sky:clamp(22rem,31vw,40rem);--foot-rec:clamp(680px,80vw,1500px);--ridge-h:max(10.5rem,17.5vw);--rs:calc(var(--ridge-h)/420);--strip:clamp(68px,9vh,88px);position:relative;overflow:hidden;overflow:clip;background:#08080b;color:#d9d6ce}
.foot-stars{position:absolute;inset:0;display:block;opacity:0;transition:opacity .5s}
:root[data-side="b"] .foot-stars,:root:not(.js) .foot-stars{opacity:1;background:url(rooms/stars.svg) 0 0/1400px 1400px}
.disc{position:absolute;left:50%;top:calc(var(--foot-sky)*.5);width:var(--foot-rec);height:var(--foot-rec);margin:calc(var(--foot-rec)/-2) 0 0 calc(var(--foot-rec)/-2);perspective:calc(var(--foot-rec)*1.7)}
.disc-turn{position:absolute;inset:0;transform-style:preserve-3d}
.disc-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* Only the side you're on is ever shown, swapped at the moment the record is edge-on, so no browser can let the back show through. */
.disc-b{transform:rotateY(180deg);visibility:hidden}
:root[data-side="b"] .disc-a{visibility:hidden}
:root[data-side="b"] .disc-b{visibility:visible}
.disc-spin{display:block;width:100%;height:100%;transform-origin:50% 50%}
.foot.moving .disc-spin{animation:footspin 54s linear infinite}
.held .disc-spin{animation-play-state:paused!important}
@keyframes footspin{to{transform:rotate(360deg)}}
.foot-sky{height:calc(var(--foot-sky) - var(--ridge-h)*.56)}
.ridge-stick{position:sticky;z-index:3;bottom:var(--bar-h,var(--preview-h));height:var(--ridge-h);transition:transform .45s cubic-bezier(.3,.8,.3,1)}
/* Once you're reading, the ridge sinks out of the way until only its glowing line and the saucers' domes show over the bottom edge. At the end of the room it all comes back up. */
.foot.sunk .ridge-stick{transform:translate3d(0,calc(var(--ridge-h) - var(--strip)),0)}
.saucer{transition:transform .45s cubic-bezier(.3,.8,.3,1)}
.foot.sunk .s-a{transform:translate3d(0,calc(var(--strip) - var(--rs)*54),0)}
.foot.sunk .s-b{transform:translate3d(0,calc(var(--strip) - var(--rs)*60),0)}
.foot.sunk .s-c{transform:translate3d(0,calc(var(--strip) - var(--rs)*22 + 8px),0)}
@media (max-height:500px){.foot{--ridge-h:17.5vw}}
@media (prefers-reduced-motion:reduce){.ridge-stick,.saucer{transition:none}}
.ridge-art,.ridge-line{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.ridge-mass{fill:#394e38}.ridge-brush{stroke:#4a6448;opacity:.7}.ridge-white{stroke:#f4f2ea}
.ridge-line path{stroke:#3099db}
:root[data-side="b"] .ridge-line{filter:drop-shadow(0 0 calc(var(--rs)*9) #3099db) drop-shadow(0 0 calc(var(--rs)*30) #4fb4f0)}
:root[data-side="b"] .ridge-line path{stroke:#57c1ff}
.saucers{position:absolute;left:50%;bottom:0;width:0;height:0;z-index:1}
.saucer{position:absolute;display:none}
:root[data-side="b"] .saucer,.saucer.leaving{display:block}
.saucer img{display:block;width:100%;height:auto}
.s-a{left:-34vw;bottom:calc(var(--rs)*118);width:calc(var(--rs)*400)}
.s-b{left:22vw;bottom:calc(var(--rs)*136);width:calc(var(--rs)*296)}
.s-c{left:calc(var(--rs)*-250);bottom:calc(var(--rs)*220);width:calc(var(--rs)*270)}
@media (max-width:639px){.s-a{left:-50vw}.s-b{left:8vw}.s-c{left:calc(var(--rs)*-170)}}
@media (prefers-reduced-motion:no-preference){
  :root:not(.held) .foot.moving .s-a img{animation:hover1 3.4s ease-in-out infinite alternate}
  :root:not(.held) .foot.moving .s-b img{animation:hover2 2.8s ease-in-out infinite alternate}
}
@keyframes hover1{from{transform:translateY(-5%) rotate(-1.4deg)}to{transform:translateY(5%) rotate(1.4deg)}}
@keyframes hover2{from{transform:translateY(5%) rotate(1.2deg)}to{transform:translateY(-5%) rotate(-1.2deg)}}
/* Flip: lettered in white paint on the mountain, with an arrow curling over. */
.flip-side{position:absolute;z-index:2;left:50%;bottom:calc(var(--rs)*18);width:max(14.4rem,calc(var(--rs)*620));min-height:44px;margin:0;padding:0;border:0;background:none;transform:translateX(-50%);cursor:pointer;-webkit-tap-highlight-color:transparent}
:root:not(.js) .flip-side{display:none}
.flip-paint{display:block;aspect-ratio:1601/330;background:#f8f5ea}
.foot.in .flip-paint{-webkit-mask:url(rooms/flip-b.webp) 0 0/100% 100% no-repeat;mask:url(rooms/flip-b.webp) 0 0/100% 100% no-repeat}
:root[data-side="b"] .foot.in .flip-paint{-webkit-mask-image:url(rooms/flip-a.webp);mask-image:url(rooms/flip-a.webp)}
.foot:not(.in) .flip-paint{background:transparent}
.foot.sunk .flip-side{bottom:auto;top:calc(var(--strip) - 45px);width:9.6rem;display:flex;align-items:center;background:#08080b;box-shadow:0 0 10px 8px #08080b;border-radius:.5rem}
.foot.sunk .flip-paint{width:100%}
@media (hover:hover){.flip-side:hover .flip-paint{background:#fff}}
.flip-side:focus-visible{outline:3px dashed #f8f5ea;outline-offset:3px}
.lights-out{position:fixed;inset:0;z-index:28;display:block;background:#000;opacity:0;pointer-events:none}
/* The room: a gig poster crossed with the back of a tour shirt, lettered like the window banner. */
.sideb{position:relative;z-index:2;padding-top:calc(var(--ridge-h)*.56);color:#35e0ee}
:root.js .sideb:not(.open){display:none}
.fest{--line:clamp(1.3rem,2.7vw,2.1rem);width:min(100%,64rem);margin:0 auto;padding:clamp(.6rem,2vw,1.6rem) clamp(.9rem,3vw,2rem) calc(var(--ridge-h)*.06 + clamp(2rem,6vw,5rem));text-align:center;font:400 var(--line)/1.22 "GEJ Clock","Courier Prime","Courier New",monospace;letter-spacing:.01em;text-shadow:0 0 .6em rgba(53,224,238,.5)}
.fest p,.fest ul,.fest h2,.fest h3{margin:0;padding:0;font-weight:400}
.fest ul{list-style:none}
.fest-title{font-size:clamp(2.2rem,16.6vmin,6.6rem);line-height:1.02}
.fest-title span{display:block}
.fest-peace{margin-top:.5em!important;font-size:clamp(1.9rem,7.6vmin,4rem);line-height:1.08;color:#ff5ac2;text-shadow:0 0 .55em rgba(255,47,176,.6)}
.fest-when{margin-top:1em!important}
.fest-lights{margin-top:.9em!important;font-size:1.5em;line-height:1.1;color:#7eea46;text-shadow:0 0 .55em rgba(126,234,70,.5)}
.fest-free{margin-top:.9em!important}
.fest-kind{margin-top:.5em!important;font-size:1.28em;line-height:1.1;color:#fc8a2a;text-shadow:0 0 .55em rgba(252,112,31,.55)}
.fest-shirt{display:grid;gap:1.4em;margin:1.6em auto 0;max-width:52rem;padding:1.1em 0;border-top:.14em solid currentColor;border-bottom:.14em solid currentColor}
.fest-dates li,.fest-bands li{line-height:1.34}
.fest-next{margin:0;color:#ff5ac2;text-shadow:0 0 .55em rgba(255,47,176,.6)}
.fest-bands h3{font-size:1.26em;margin-bottom:.34em!important;color:#fc8a2a;text-shadow:0 0 .55em rgba(252,112,31,.55)}
@media (min-width:700px){.fest-shirt{grid-template-columns:auto auto;justify-content:center;gap:1.1em 3em;text-align:left;font-size:.9em}.fest-bands li,.fest-dates li{white-space:nowrap}.fest-bands ul{columns:2;column-gap:1.6em}.fest-next{grid-column:1/-1;text-align:center;white-space:nowrap}}
.fest-belt{margin-top:1.7em}
.fest-belt img{display:block;width:min(100%,42rem);height:auto;margin:0 auto .7em;filter:none}
.fest-care{margin-top:1.6em!important;font-size:1.34em;line-height:1.1;color:#f4f2ea;text-shadow:none}
.fest-drive{margin-top:.6em!important}
.fest-top{margin-top:1.3em!important}
.fest-top a{display:inline-block;min-height:44px;padding:.4em 0;color:#f4f2ea;text-shadow:none}
/* The end of the page sits on the mountain. */
.colophon{position:relative;display:grid;justify-items:center;gap:.2rem;background:#394e38;color:#f4f2ea;padding:.6rem 1rem calc(.9rem + var(--bar-h,var(--preview-h)));text-align:center}
.credit{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;color:inherit;padding:0 .6rem}
.hold-foot{color:inherit}
@media (prefers-reduced-motion:reduce){.foot.moving .disc-spin{animation:none}.sleeve,.pin-face,.pin-back,.tab{transition:none!important}.tags.pile li.drop,.clown-img.arrive{animation:none}.wc-pupil{will-change:auto}}