:root:has(.garage-page){--ink:#0b0a09;--bone:#efe9dd;--dim:rgba(239,233,221,.74);--faint:rgba(239,233,221,.42);--line:rgba(239,233,221,.14);--rust:#b8461f;--rust-text:#dd6e42;--sans:'Geist',system-ui,sans-serif;--mono:'Geist Mono',ui-monospace,monospace}
.garage-page *{box-sizing:border-box}
html:has(.garage-page){background:var(--ink);color-scheme:dark}
html:has(.garage-page) body{margin:0;background:var(--ink);color:var(--bone);font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
html.locked:has(.garage-page),html.locked:has(.garage-page) body{overflow:hidden;height:100%}
.garage-page a{color:inherit}
.garage-page [hidden]{display:none!important}

/* the bar: logo, a few words, Contact (after basement.studio) */
.garage-page .hd{position:fixed;inset:0 0 auto 0;z-index:20;height:44px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 max(18px,calc(12px + env(safe-area-inset-right))) 0 max(18px,calc(12px + env(safe-area-inset-left)));background:#0b0a09;border-bottom:1px solid var(--line);font-size:13px}
.garage-page .logo{display:flex;align-items:center;justify-self:start}.garage-page .logo img{display:block;height:32px;width:32px}
.garage-page .nav{display:flex;gap:24px}.garage-page .nav a,.garage-page .contact{text-decoration:none;color:var(--dim);transition:color .2s}
.garage-page .nav sup{position:static;font:400 9.5px/1 var(--mono);color:var(--faint);margin-left:2px;vertical-align:6px}
.garage-page .nav a:hover,.garage-page .contact:hover,.garage-page .nav a[aria-current]{color:var(--bone)}
.garage-page .nav a[aria-current]::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--rust);margin-right:7px;vertical-align:2px}
.garage-page .contact{color:var(--bone);justify-self:end}
.garage-page .menu{display:none;align-items:center;gap:10px;background:none;border:0;color:var(--bone);font:500 14px/1 var(--sans);min-height:44px;padding:0;cursor:pointer}
.garage-page .menu i{width:16px;height:7px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor}
/* narrow and short screens: the top bar keeps the logo, Contact (one tap from anywhere) and Menu; getting round the room is the
   bar at the thumb (touch screens) or the edge pills (a mouse) */
@media(max-width:760px),(hover:none),(orientation:landscape) and (max-height:499px){.garage-page .hd{grid-template-columns:1fr auto auto;gap:8px;padding-left:max(20px,calc(12px + env(safe-area-inset-left)));padding-right:max(20px,calc(12px + env(safe-area-inset-right)))}.garage-page .nav{display:none}
  .garage-page .logo{min-width:44px;min-height:44px}.garage-page .contact{position:relative;display:flex;align-items:center;min-height:44px;padding:0 10px;font:500 14px/1 var(--sans)}.garage-page .menu{display:flex;padding-left:8px}
  .garage-page .contact[aria-current]::before{position:absolute;left:0;top:50%;margin:-2.5px 0 0}} /* (the dot sits in the padding: the row's width never changes) */
@media(hover:hover) and (min-width:761px) and (min-height:500px),(hover:hover) and (min-width:761px) and (orientation:portrait){.garage-page .sheet{display:none!important}}
.garage-page .sheet{position:fixed;inset:44px 0 0;z-index:19;background:var(--ink);padding:28px max(20px,calc(12px + env(safe-area-inset-right))) 30px max(20px,calc(12px + env(safe-area-inset-left)));overflow:auto;overscroll-behavior:contain}
html.sheet-open:has(.garage-page),html.sheet-open:has(.garage-page) body{overflow:hidden}
.garage-page .sheet nav{display:grid;gap:2px}.garage-page .sheet a{text-decoration:none;font:500 44px/1.08 var(--sans);letter-spacing:-.03em;color:var(--dim)}
.garage-page .sheet a[aria-current]{color:var(--rust)}
.garage-page .motion-look{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;min-height:44px;margin-top:24px;padding:12px 0;border:0;border-top:1px solid var(--line);background:none;color:var(--bone);font:400 14px/1.4 var(--sans);text-align:left;cursor:pointer}
.garage-page .motion-look:focus-visible{outline:2px solid var(--rust-text);outline-offset:4px}.garage-page .motion-look[hidden]{display:none}.garage-page .motion-look span{color:var(--dim);font:400 12px/1 var(--mono)}
@media(orientation:landscape) and (max-height:499px){.garage-page .sheet{padding-top:14px;padding-bottom:18px}.garage-page .sheet a{font-size:30px}}

/* the garage */
.garage-page .room{position:relative;height:100vh;height:100svh;overflow:hidden;background:#000;margin-top:0;touch-action:pan-y}
@media(max-width:760px) and (orientation:portrait){
  .garage-page .room{--entrance-height:min(100svh,clamp(530px,72svh,640px))}
  html.open:not(.ready):has(.garage-page) .room{transition:height 2.9s cubic-bezier(.22,.61,.36,1)}
  html:not(.open):not(.in):not(.no-webgl):has(.garage-page) .room{height:var(--entrance-height)}
  html.ready:has(.garage-page) .room{transition:none}
  .garage-page .room #scene,.garage-page .room .poster{height:100vh;height:100svh}
}
/* The phone still includes extra wall at the sides: fit its door by width or available height, as the live camera does. */
@media(max-aspect-ratio:85/100),(max-width:760px) and (orientation:portrait){
  .garage-page .room{--poster-w:min(256.410256vw,calc((var(--entrance-height,100svh) - 154px)*2.639850));--doorline-y:calc(84px + var(--poster-w)*.1088);--doorcue-y:calc(118px + var(--poster-w)*.3806);--doorcue-bottom:auto}
  .garage-page .room .door-poster{width:var(--poster-w);max-width:none;height:calc(var(--poster-w)*.844);left:50%;right:auto;top:calc(84px - var(--poster-w)*.084);bottom:auto;transform:translateX(-50%);object-fit:fill}
}
@media(orientation:landscape) and (max-height:499px){.garage-page .room{--doorline-y:calc(60px + (100svh - 130px)*.29344);--doorcue-y:calc(100svh - 36px);--doorcue-bottom:auto}}
@media(prefers-reduced-motion:reduce){html:has(.garage-page) .room{transition:none!important}}
.garage-page #scene{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .35s linear}
html.loaded:has(.garage-page) #scene{opacity:1}
.garage-page .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.garage-page .lit-poster{display:none}html.no-webgl:has(.garage-page) .lit-poster{display:block}html.no-webgl:has(.garage-page) .door-poster,html.no-webgl:has(.garage-page) #scene{display:none}
html.gl-lost:has(.garage-page) #scene,html.gl-lost:has(.garage-page) .hotspots,html.gl-lost:has(.garage-page) .hot{visibility:hidden}html.gl-lost:has(.garage-page) .lit-poster{display:block}html.gl-lost:has(.garage-page) .door-poster{display:none}
html.no-webgl:has(.garage-page) .hotspots,html.no-webgl:has(.garage-page) .hot{display:none}
.garage-page .room::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(120% 90% at 50% 45%,rgba(0,0,0,0) 55%,rgba(0,0,0,.55))}
.garage-page .cue{position:absolute;left:50%;top:var(--doorcue-y,auto);bottom:var(--doorcue-bottom,34px);transform:translateX(-50%);display:flex;align-items:center;gap:12px;font:400 13px/1 var(--mono);color:var(--dim);letter-spacing:.02em;transition:opacity .4s;pointer-events:none}
.garage-page .cue i{width:26px;height:1px;background:var(--dim)}
html:not(.loaded):not(.no-webgl):has(.garage-page) .cue i{animation:garage-loading 1.8s ease-in-out infinite}
@keyframes garage-loading{0%,100%{opacity:.25;transform:scaleX(.65)}50%{opacity:1;transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){html:not(.loaded):has(.garage-page) .cue i{animation:none}}
.garage-page .say-tap{display:none}@media(hover:none){.garage-page .say-tap{display:inline}.garage-page .say-click{display:none}}
html.open:has(.garage-page) .cue{opacity:0;pointer-events:none}
/* hover: a hatched outline round the thing, and where it goes */
.garage-page .hot{position:absolute;z-index:3;pointer-events:none;border:1px solid rgba(239,233,221,.55);background:repeating-linear-gradient(135deg,rgba(239,233,221,.07) 0 1px,transparent 1px 7px);opacity:0;transition:opacity .15s linear}
.garage-page .hot.on{opacity:1}
.garage-page .hot b{position:absolute;left:-1px;top:-28px;font:500 13px/1 var(--sans);background:var(--bone);color:var(--ink);padding:6px 8px;white-space:nowrap}
/* phones: the things you can tap carry a small tag */
.garage-page .hotspots{position:absolute;inset:0;pointer-events:none;z-index:2}
/* (the button is 44px tall to tap; the chip inside is what you see) */
.garage-page .hotspots button{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;min-height:44px;padding:0;background:none;border:0;font:500 12.5px/1 var(--sans);color:var(--bone);white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s,visibility 0s .5s;cursor:pointer}
.garage-page .hotspots button span{display:block;background:rgba(11,10,9,.78);border:1px solid rgba(239,233,221,.22);padding:7px 8px}
html.ready:has(.garage-page) .hotspots button{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .5s,visibility 0s}html.focus:has(.garage-page) .hotspots button{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s,visibility 0s .5s} /* (hidden tags are no keyboard stops) */
@media(hover:hover){.garage-page .hotspots button{color:rgba(239,233,221,.86)}.garage-page .hotspots button span{padding:6px 8px;background:rgba(11,10,9,.62)}.garage-page .hotspots button:hover,.garage-page .hotspots button:focus-visible{color:var(--bone);outline:none}.garage-page .hotspots button:hover span,.garage-page .hotspots button:focus-visible span{border-color:rgba(239,233,221,.6)}}
.garage-page .panel{position:absolute;z-index:4;right:20px;bottom:24px;width:min(360px,calc(100% - 40px));background:rgba(11,10,9,.9);border:1px solid var(--line);padding:18px 20px;opacity:0;transition:opacity .15s ease-out}
.garage-page .panel.on{opacity:1;transition:opacity .2s ease-out}
.garage-page .panel .go{display:inline-block;font:500 14px/1 var(--sans);text-decoration:none;border-bottom:1px solid var(--rust);padding:8px 0 4px;color:var(--bone)}
.garage-page .panel button.go{background:none;border:0;border-bottom:1px solid var(--rust);cursor:pointer}.garage-page .panel button.go:focus-visible{outline:2px solid var(--rust-text);outline-offset:3px}
.garage-page .panel .steps{display:flex;align-items:center;gap:12px;font:400 12px/1 var(--mono);color:var(--dim)}
.garage-page .panel .steps button{width:38px;height:38px;background:none;border:1px solid var(--line);color:var(--bone);cursor:pointer;font:400 15px/1 var(--sans)}
.garage-page .panel-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 8px}
.garage-page .panel h2{margin:0;font:500 20px/1.2 var(--sans);letter-spacing:-.01em}
.garage-page .panel-more{display:none}
.garage-page .panel p{margin:0 0 8px;color:var(--dim);font-size:14px}
.garage-page .panel ul{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--line)}
.garage-page .panel li{border-bottom:1px solid var(--line)}
.garage-page .panel li a{display:flex;justify-content:space-between;padding:10px 0;text-decoration:none;font-size:14.5px}
.garage-page .panel li a span{color:var(--faint);font:400 12px/1.6 var(--mono)}
@media(max-width:760px){.garage-page .panel{left:20px;right:20px;bottom:20px;width:auto}}
.garage-page .panel .steps .go{margin-left:auto}
.garage-page .spike{position:absolute;z-index:4;left:18px;bottom:16px;font:400 10.5px/1 var(--mono);color:var(--faint);border:1px dashed var(--line);padding:5px 7px}
html.focus:has(.garage-page) .spike{display:none}


/* the footer: a giant wordmark and the menu again */
.garage-page .ft{padding:40px 20px 28px;border-top:1px solid var(--line);max-width:1320px;margin:0 auto}
.garage-page .word{font:600 clamp(22px,calc(12.35vw - 5px),158px)/.86 var(--sans);letter-spacing:-.055em;color:#cfc8ba;white-space:nowrap}
.garage-page .ft-row{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-top:36px}
.garage-page .ft nav{display:flex;flex-wrap:wrap;gap:6px 22px}.garage-page .ft nav a{text-decoration:none;font:500 15px/1.4 var(--sans);color:var(--dim)}.garage-page .ft nav a:hover{color:var(--bone)}
.garage-page .ft p{color:rgba(239,233,221,.62);margin:0;font-size:13px}.garage-page .ft p a{color:inherit;text-decoration:none;margin-right:18px}.garage-page .ft p a:hover{color:var(--bone)}
.garage-page .panel .thumb{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;margin:2px 0 12px;background:#151413}
@media(max-width:760px){.garage-page .panel .thumb{height:110px;aspect-ratio:auto}}
@media(max-width:760px),(orientation:landscape) and (max-height:499px){.garage-page .spike{top:56px;bottom:auto;left:max(20px,calc(12px + env(safe-area-inset-left)))}}
.garage-page .panel .doors{display:flex;gap:8px;flex-wrap:wrap}.garage-page .panel .doors button{flex:1;min-width:84px;height:40px;background:none;border:1px solid var(--line);color:var(--bone);font:500 13px/1 var(--sans);cursor:pointer}
.garage-page .panel .doors button:hover,.garage-page .panel .doors button:focus-visible{border-color:var(--rust)}
.garage-page .panel .exps{display:grid;grid-template-columns:1fr 1fr;gap:6px}.garage-page .panel .exps button{height:34px;background:none;border:1px solid var(--line);color:var(--bone);font:500 12.5px/1 var(--sans);cursor:pointer;text-align:left;padding:0 10px}
.garage-page .panel .exps button:hover,.garage-page .panel .exps button:focus-visible{border-color:var(--rust)}
.garage-page .panel .figs-p{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.garage-page .panel .figs-p li{border-bottom:1px solid var(--line);padding:9px 0;color:var(--dim);font-size:13.5px;line-height:1.4}
.garage-page .panel .figs-p b{display:block;color:var(--bone);font:500 24px/1.1 var(--sans);letter-spacing:-.03em}.garage-page .panel .figs-p em{color:var(--rust-text)!important;font:400 11px/1 var(--mono);font-style:normal;color:var(--rust);letter-spacing:.06em;text-transform:uppercase;margin-left:6px}
/* where you are: Garage › Hall › Results; every step but the last goes back to it */
.garage-page .crumbs{position:absolute;z-index:5;left:16px;top:56px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;max-width:calc(100% - 32px);padding:6px 10px;background:rgba(11,10,9,.78);border:1px solid var(--line);font:500 13px/1 var(--sans);color:var(--dim)}
.garage-page .crumbs button{background:none;border:0;padding:15.5px 3px;margin:-9.5px 0;color:var(--bone);font:inherit;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(239,233,221,.3);text-underline-offset:3px}
.garage-page .crumbs button:hover,.garage-page .crumbs button:focus-visible{text-decoration-color:var(--rust);outline:none}.garage-page .crumbs i{font-style:normal;color:var(--faint)}.garage-page .crumbs span{padding:6px 2px;color:var(--dim)}
/* short screens (a phone on its side): a small panel in the lower left, clear of the middle of the view; its words fold behind More */
@media(orientation:landscape) and (max-height:499px){
  .garage-page .panel{left:max(12px,calc(8px + env(safe-area-inset-left)));right:auto;bottom:16px;width:min(300px,calc(100% - 24px));max-height:calc(100% - 120px);overflow:auto;padding:10px 12px 12px}
  .garage-page .panel h2{font-size:16px}.garage-page .panel-top{margin-bottom:6px}.garage-page .panel-more{display:inline-flex;align-items:center;min-height:44px;margin:-12px -6px -12px 0;padding:0 6px;background:none;border:0;color:var(--dim);font:500 12px/1 var(--mono);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
  .garage-page .panel .d,.garage-page .panel .thumb{display:none}.garage-page .panel.more .d{display:block}.garage-page .panel.more .exps.d{display:grid}
  .garage-page .panel .steps button{width:34px;height:34px}.garage-page .panel .doors button{min-width:0;height:36px}.garage-page .panel .exps button{height:32px}.garage-page .panel p{margin-bottom:6px}.garage-page .panel p:last-child{margin-bottom:0}}
.garage-page .panel .svc-list{list-style:none;margin:0 0 12px;padding:0;border-top:1px solid var(--line)}
.garage-page .panel .svc-list a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;border-bottom:1px solid var(--line);color:var(--bone);text-decoration:none;font:500 15px/1.25 var(--sans)}
.garage-page .panel .svc-list i{font-style:normal;color:var(--rust-text);transition:transform .15s ease-out}.garage-page .panel .svc-list a:hover i,.garage-page .panel .svc-list a:focus-visible i{transform:translateX(3px)}
.garage-page .panel .svc-list a:focus-visible{outline:2px solid var(--rust-text);outline-offset:2px}
html.ready:has(.garage-page) .hotspots button.hov{opacity:0;transition:opacity .15s}
/* phones upright: a slimmer panel, its words behind More (the room stays in view); the toolbox's drawer list stays out */
@media(max-width:600px) and (min-height:500px){.garage-page .panel{padding:12px 14px}.garage-page .panel h2{font-size:16px}.garage-page .panel-top{margin-bottom:6px}
  .garage-page .panel-more{display:inline-flex;align-items:center;min-height:44px;margin:-12px -6px -12px 0;padding:0 6px;background:none;border:0;color:var(--dim);font:500 12px/1 var(--mono);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
  .garage-page .panel .d:not(.exps),.garage-page .panel .thumb{display:none}.garage-page .panel.more .d{display:block}.garage-page .panel p{margin-bottom:8px}.garage-page .panel p:last-child{margin-bottom:0}}
.garage-page .hot.beside b{left:calc(100% + 10px);top:50%;transform:translateY(-50%)}
.garage-page .panel .m-only{display:none}@media(max-width:600px){.garage-page .panel .m-only{display:block}}
/* a results stop: each figure with its period and platform under it; CSAC's separate initiative set apart below */
.garage-page .panel .figs-p small{display:block;margin-top:4px;font:400 11px/1.45 var(--mono);letter-spacing:.02em;color:rgba(239,233,221,.62)}
.garage-page .panel .res-who{margin:0 0 8px;color:var(--dim);font-size:13.5px}.garage-page .panel .res-init{margin:12px 0 0;color:var(--dim);font-size:13.5px}.garage-page .panel .res-init b{color:var(--bone);font-weight:500}
.garage-page .panel .res-figs + .steps,.garage-page .panel .res-figs + .res-init + .res-figs + .steps{margin-top:12px}
.garage-page .panel[data-place^="res"]{background:rgba(11,10,9,.97)} /* (the other screens' big figures would read through it) */
/* phones upright, a results stop: the panel is a sheet from just under the screen down to the bar (room.js resPhonePose
   sets --res-top), solid, so a screen below it stays out of sight; where it is taller than its rows they spread down it */
@media(hover:none) and (orientation:portrait){.garage-page .panel[data-place^="res"]{top:var(--res-top,auto);display:flex;flex-direction:column;overflow:auto;background:#0b0a09}
  .garage-page .panel[data-place^="res"] .panel-in,.garage-page .panel[data-place^="res"] #panel-b{flex:1 0 auto;display:flex;flex-direction:column}}
.garage-page .panel .sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(max-width:600px){.garage-page .panel .figs-p li{padding:6px 0;font-size:12.5px}.garage-page .panel .figs-p b{display:inline;font-size:17px;margin-right:6px}}
.garage-page .contact[aria-current]::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--rust);margin-right:7px;vertical-align:2px}
/* straight in (a place's address, a second visit, ?open, less motion): the lit room's picture, not the closed door, while it loads */
html.in:has(.garage-page) .door-poster{display:none}html.in:has(.garage-page) .lit-poster{display:block}html.in:has(.garage-page) .cue{opacity:0;pointer-events:none}
/* clear focus rings on the room's own controls and the page's links */
.garage-page .hotspots button:focus-visible span{outline:2px solid var(--rust-text);outline-offset:2px}
.garage-page #top .record-hotspot .record-control{width:44px;height:44px;padding:0;border-radius:50%;opacity:1;visibility:visible;pointer-events:auto;transition:none}
.garage-page #top .record-hotspot .record-control:focus-visible{outline:2px solid var(--rust-text);outline-offset:3px;background:rgba(239,233,221,.08)}
html.gl-lost:has(.garage-page) .record-hotspot{display:none}
.garage-page .crumbs button:focus-visible{outline:2px solid var(--rust-text);outline-offset:2px}
.garage-page #panel-h:focus,.garage-page #panel-h:focus-visible{outline:none} /* (focus goes to the heading for screen readers on arrival; it isn't a control, so no ring) */
/* a record off the shelf: its album, Spotify's player for it, back to the wall */
.garage-page .panel .rec-pick{font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(221,110,66,.45)}
.garage-page .panel .rec-pick:hover,.garage-page .panel .rec-pick:focus-visible{text-decoration-color:currentColor;outline:none}
.garage-page .panel .rec-hint{margin:10px 0 0;color:var(--faint);font-size:12.5px}
.garage-page .panel .rec-by{margin:0 0 12px;color:var(--dim)}
.garage-page .panel .rec-act{display:flex;gap:20px;align-items:center;margin:0}
.garage-page .panel .rec-act a,.garage-page .panel .rec-act button{font:500 13px/1 var(--sans);color:var(--bone);background:none;border:0;padding:10px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.garage-page .panel .rec-act a:hover,.garage-page .panel .rec-act button:hover,.garage-page .panel .rec-act a:focus-visible,.garage-page .panel .rec-act button:focus-visible{text-decoration-color:var(--rust-text);outline:none}
/* A drawer's live page continues the physical dive, with its name and navigation. */
.garage-page .xfade{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.garage-page .xp{position:absolute;inset:0;z-index:3;overflow:hidden;background:#000;opacity:0;transition:opacity .26s ease-out}
.garage-page .xp.on{opacity:1;transition:opacity .3s ease-out}
.garage-page .xp-p{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.garage-page .xp.live-page{background:transparent}
.garage-page .xp.live-page .xp-p{opacity:1;transition:opacity .3s ease-out}
.garage-page .xp.live-ready .xp-p{opacity:0}
.garage-page .xp-t{position:absolute;left:max(40px,calc(24px + env(safe-area-inset-left)));bottom:72px;width:min(540px,calc(100% - 200px))}
.garage-page .xp-t h2{margin:0 0 8px;font:500 clamp(30px,3.4vw,46px)/1.05 var(--sans);letter-spacing:-.03em;color:var(--bone)}
.garage-page .xp-act{display:flex;align-items:center;gap:14px;margin:0}
.garage-page .xp-prev,.garage-page .xp-back{display:none}
.garage-page .xp :focus-visible{outline:2px solid var(--rust-text);outline-offset:3px}
.garage-page #xp-h:focus{outline:none}
/* (desktop: in a drawer's view the edge pills name the neighbouring drawers all the time) */
html.ready.xp-on:not(.gliding):has(.garage-page) .edge:not([hidden]){opacity:1;visibility:visible;transform:translate(0,-50%)}
/* down the little town's street: a quieter outline round a client's building, with its name */
.garage-page .hot.soft{border-color:rgba(239,233,221,.45);background:none}.garage-page .hot.soft b{background:rgba(11,10,9,.84);color:var(--bone);border:1px solid rgba(239,233,221,.28)}
/* touch screens: the words above the bar at the thumb; back to the chest at the top left under the top bar, as a phone's own
   back sits; the previous drawer named beside the way in (the bar's right names the next) */
@media(hover:none){
  .garage-page .xp-t{left:calc(20px + env(safe-area-inset-left));right:calc(20px + env(safe-area-inset-right));width:auto;bottom:calc(84px + env(safe-area-inset-bottom))}
  .garage-page .xp-t h2{font-size:30px}
  .garage-page .xp-act{gap:8px;flex-wrap:wrap}
  .garage-page .xp-back{display:inline-flex;align-items:center;gap:6px;position:absolute;top:54px;left:calc(12px + env(safe-area-inset-left));min-height:44px;padding:0 14px 0 10px;background:rgba(11,10,9,.72);border:1px solid var(--line);color:var(--bone);font:500 15px/1 var(--sans)}
  .garage-page .xp-back i{font-style:normal;font-size:22px;line-height:0;color:var(--rust-text)}
  html.has-music:has(.garage-page) .xp-back{top:99px}
  .garage-page .xp-prev{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 6px;background:none;border:0;color:var(--dim);font:500 15px/1 var(--sans);white-space:nowrap}
  .garage-page .xp-prev i{font-style:normal;font-size:22px;line-height:0;color:var(--rust-text)}
}
@media(hover:none) and (orientation:landscape) and (max-height:499px){.garage-page .xp-t{bottom:calc(72px + env(safe-area-inset-bottom));right:auto;width:min(440px,62%)}.garage-page .xp-t h2{font-size:24px}}
@media(prefers-reduced-motion:reduce){.garage-page .xp,.garage-page .xp.on{transition:none}}
/* next and back (a mouse): a tall frosted pill slides in as the pointer nears an edge (the right one, and the button down
   at the foot, also after a quiet moment), the destination running down it. Touch screens have the bar instead */
.garage-page .edge{position:absolute;z-index:6;top:50%;width:66px;height:min(46%,300px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:18px 0;border:1px solid rgba(239,233,221,.16);border-radius:33px;background:rgba(11,10,9,.58);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--bone);font:500 13px/1 var(--sans);letter-spacing:.02em;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s .45s,background .2s,border-color .2s}
.garage-page .edge-r{right:14px;transform:translate(26px,-50%)}.garage-page .edge-l{left:14px;transform:translate(-26px,-50%)}
.garage-page .edge i{font-style:normal;font-size:30px;line-height:.8;color:var(--rust-text);transition:transform .25s}
.garage-page .edge span{writing-mode:vertical-rl;white-space:nowrap;max-height:70%;overflow:hidden;text-overflow:ellipsis}.garage-page .edge-l span{transform:rotate(180deg)}
.garage-page .edge-r i{order:2}.garage-page .edge-l i{order:0}
html.ready:not(.gliding):has(.garage-page) .edge.show{opacity:1;visibility:visible;transform:translate(0,-50%);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s,background .2s,border-color .2s}
.garage-page .edge:hover{background:rgba(11,10,9,.78);border-color:rgba(221,110,66,.55)}.garage-page .edge-r:hover i{transform:translateX(3px)}.garage-page .edge-l:hover i{transform:translateX(-3px)}
.garage-page .edge:focus-visible{opacity:1;visibility:visible;transform:translate(0,-50%);outline:2px solid var(--rust-text);outline-offset:3px}
@media(hover:none){.garage-page .edge,.garage-page .crumbs,.garage-page .below-go{display:none!important}}
/* the way down to the section that goes with this place: the same pill, across the foot, as the pointer nears it */
.garage-page .below-go{position:absolute;z-index:5;left:50%;bottom:20px;transform:translate(-50%,16px);display:flex;align-items:center;gap:10px;padding:12px 20px;border:1px solid rgba(239,233,221,.16);border-radius:999px;background:rgba(11,10,9,.58);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--bone);font:500 13px/1 var(--sans);cursor:pointer;opacity:0;visibility:hidden;transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s .45s,background .2s,border-color .2s}
.garage-page .below-go i{font-style:normal;color:var(--rust-text);transition:transform .25s}
html.ready:not(.gliding):has(.garage-page) .below-go.show{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s,background .2s,border-color .2s}
.garage-page .below-go:hover,.garage-page .below-go:focus-visible{background:rgba(11,10,9,.78);border-color:rgba(221,110,66,.55);outline:none}.garage-page .below-go:hover i{transform:translateY(3px)}
.garage-page .below-go:focus-visible{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media(max-width:760px),(orientation:landscape) and (max-height:499px){.garage-page .below-go{display:none}}
/* THE MUSIC. A record playing, out of its sleeve: the listening panel (album, next album, stop, Spotify's own player, Put it
   back, Open in Spotify), at the lower left on desktops (right while a record is out), and on touch screens over the bar at the
   thumb as one sheet with it. Put back, or with the room left behind: the slim player that stays with you (the album, play or
   pause, next, stop), at the lower left on desktops and under the top bar on touch screens. Spotify's player stays in the
   page while slim, out of sight, so the music isn't cut */
.garage-page .panel .rec-now{margin:-4px 0 10px;color:var(--dim);font:400 12px/1.4 var(--sans)}
.garage-page .nowbar{position:fixed;z-index:18;left:20px;bottom:22px;width:min(360px,calc(100vw - 40px));display:grid;gap:8px;padding:12px;background:rgba(20,19,17,.96);border:1px solid rgba(239,233,221,.2);border-radius:6px;box-shadow:0 12px 32px rgba(0,0,0,.25)}
.garage-page .nowbar-head{display:flex;align-items:center;gap:4px;min-width:0}
.garage-page .nowbar button{flex:none;border:0;background:none;color:var(--bone);font:500 17px/1 var(--sans);cursor:pointer;-webkit-tap-highlight-color:transparent}
.garage-page .nowbar button:hover{background:rgba(239,233,221,.08)}
.garage-page .nowbar .nowbar-record{flex:1;min-width:0;width:auto;height:auto;min-height:44px;text-align:left;padding:0 8px 0 0;border-radius:2px}
.garage-page .nowbar-label{display:block;color:var(--faint);font:400 10px/1.4 var(--sans);letter-spacing:.04em}
.garage-page .nowbar-album{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 14px/1.5 var(--sans)}
.garage-page .nowbar-artist{display:block;color:var(--dim);font:400 12px/1.5 var(--sans)}
.garage-page .nowbar .nowbar-play,.garage-page .nowbar .nowbar-next,.garage-page .nowbar .nowbar-close{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center}
.garage-page .nowbar .nowbar-play{display:none}
.garage-page .nowbar button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.garage-page .nowbar button svg .f{fill:currentColor;stroke:none}
.garage-page .nowbar button:focus-visible{outline:2px solid var(--rust-text);outline-offset:3px}
.garage-page .nowbar-embed{height:80px;min-width:0;background:rgba(239,233,221,.035);border-radius:4px}
.garage-page .nowbar iframe{display:block;width:100%;height:80px;border:0;border-radius:4px}
.garage-page .nowbar-status{margin:0;color:var(--dim);font:400 11px/1.4 var(--sans)}
.garage-page .nowbar[data-status="playing"] .nowbar-status{display:none}
.garage-page .nowbar-foot{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:4px}
.garage-page .nowbar-foot a,.garage-page .nowbar-foot button{display:flex;align-items:center;min-height:44px;font:400 12px/1.4 var(--sans);color:var(--dim);text-decoration:none;padding:0}
.garage-page .nowbar .nowbar-back{display:none}
.garage-page .nowbar-foot a:hover,.garage-page .nowbar-foot button:hover{color:var(--bone);text-decoration:underline;text-underline-offset:4px;background:none}
html.record-listening:has(.garage-page) .nowbar-back{display:flex}
.garage-page .nowbar[data-status="playing"] .nowbar-label::before,.garage-page .nowbar.slim[data-status="playing"] .nowbar-album::before{content:'';display:inline-block;width:5px;height:5px;margin-right:6px;border-radius:50%;background:#b9c89d;vertical-align:2px}
html.record-open:has(.garage-page) .nowbar{left:auto;right:20px}
html.record-open.has-music:has(.garage-page) .panel{bottom:96px}
/* the slim player: one row; Spotify's player is still there underneath, out of sight */
.garage-page .nowbar.slim{gap:0;padding:6px 6px 6px 14px;overflow:hidden}
.garage-page .nowbar.slim .nowbar-label,.garage-page .nowbar.slim .nowbar-artist,.garage-page .nowbar.slim .nowbar-status,.garage-page .nowbar.slim .nowbar-foot{display:none}
.garage-page .nowbar.slim .nowbar-play{display:grid}
.garage-page .nowbar.slim .nowbar-embed{position:absolute;z-index:-1;left:0;right:0;top:0;opacity:0;pointer-events:none}
@media(max-width:760px) and (hover:hover){.garage-page .nowbar,html.record-open:has(.garage-page) .nowbar{left:12px;right:12px;width:auto}html.has-music:has(.garage-page) .panel{bottom:92px}} /* (a narrow window with a mouse: the panel over the slim player) */
@media(hover:none){
  /* the listening panel: over the bar at the thumb, the two one sheet (the bar's top line between them) */
  .garage-page .nowbar{left:calc(12px + env(safe-area-inset-left));right:calc(12px + env(safe-area-inset-right));bottom:calc(64px + env(safe-area-inset-bottom));width:auto;gap:6px;padding:8px 12px 2px;background:rgba(11,10,9,.9);border:1px solid var(--line);border-bottom:0;border-radius:0;box-shadow:none}
  html.record-open:has(.garage-page) .nowbar{left:calc(12px + env(safe-area-inset-left));right:calc(12px + env(safe-area-inset-right))}
  .garage-page .nowbar-label{display:none}
  .garage-page .nowbar-foot{border-top:0;padding-top:0}
  .garage-page .nowbar-foot a,.garage-page .nowbar-foot button{font-size:14px;color:var(--bone)}
  /* the slim player: a line under the top bar, in its colours, as if part of it */
  .garage-page .nowbar.slim,html.record-open:has(.garage-page) .nowbar.slim{top:44px;bottom:auto;left:0;right:0;height:45px;display:flex;align-items:center;padding:0 max(20px,calc(12px + env(safe-area-inset-right))) 0 max(20px,calc(12px + env(safe-area-inset-left)));background:#0b0a09;border:0;border-bottom:1px solid var(--line)}
  .garage-page .nowbar.slim .nowbar-head{flex:1;gap:0}
  .garage-page .nowbar.slim .nowbar-album{font-size:14px;color:var(--dim)}
  .garage-page .nowbar.slim .nowbar-play,.garage-page .nowbar.slim .nowbar-next,.garage-page .nowbar.slim .nowbar-close{border:0;border-radius:0;color:var(--bone)}
  .garage-page .nowbar.slim .nowbar-close{color:var(--dim)}
  html.has-music:has(.garage-page) .spike{top:100px}
}
@media(hover:none) and (orientation:landscape) and (max-height:499px){
  .garage-page .nowbar:not(.slim),html.record-open:has(.garage-page) .nowbar:not(.slim){left:auto;right:calc(12px + env(safe-area-inset-right));bottom:calc(72px + env(safe-area-inset-bottom));width:300px;padding:6px 10px 0;gap:2px;border-bottom:1px solid var(--line)}
  .garage-page .nowbar-artist,.garage-page .nowbar-status{display:none}
}
/* the garage's names: desktops show none at rest (hover outlines and names a thing; a name shows when the keyboard reaches it);
   touch screens show them after a quiet moment in the garage, or on a tap on the room, and keep them until you leave */
@media(hover:hover) and (pointer:fine){html.ready:has(.garage-page) .hotspots button{opacity:0;pointer-events:none}html.ready:has(.garage-page) .hotspots button:focus-visible{opacity:1}}
@media(hover:none){.garage-page .hotspots button{min-width:44px;justify-content:center;font:500 14px/1 var(--sans);transition:opacity .3s,visibility 0s .3s}
  .garage-page .hotspots button span{background:rgba(11,10,9,.84);border:1px solid rgba(239,233,221,.24);border-radius:16px;padding:8px 12px}
  html.ready:not(.names):has(.garage-page) .hotspots button{opacity:0;visibility:hidden;pointer-events:none}
  html.ready.names:has(.garage-page) .hotspots button{transition:opacity .3s,visibility 0s}}
.garage-page .hot.hint b{font-size:14px;padding:7px 10px}
.garage-page .hot.hint-r b{left:auto;right:-1px} /* (the toolbox: its words over the drawer's right end, clear of the drawers' labels) */
/* THE BAR (touch screens): one bar at the thumb, in place of the places bar, the edge arrows and the breadcrumb. Left: home,
   "Garage"; middle: the section under the room, by name; right, the largest: the next stop, by name. It shows while most of the
   room is on screen, and fades (never slides) */
.garage-page .tourbar{display:none}
.garage-page .hd-here{display:none}
@media(hover:none){
  /* (hidden, the bar fades and goes inert: it never turns invisible, which in Chrome could leave its words undrawn) */
  .garage-page .tourbar{position:fixed;z-index:8;left:calc(12px + env(safe-area-inset-left));right:calc(12px + env(safe-area-inset-right));bottom:calc(8px + env(safe-area-inset-bottom));height:56px;display:flex;align-items:center;gap:8px;padding:0 7px;background:rgba(11,10,9,.88);border:1px solid var(--line);opacity:0;pointer-events:none;transition:opacity .15s linear}
  html.ready.bar-on:not(.sheet-open):has(.garage-page) .tourbar{opacity:1;pointer-events:auto;transition:opacity .2s linear}
  .garage-page .tb{flex:none;display:flex;align-items:center;justify-content:center;gap:6px;min-width:48px;height:48px;padding:0 10px;background:none;border:0;color:var(--dim);font:500 15px/1 var(--sans);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .garage-page .tb span,.garage-page .tb i{visibility:inherit}
  .garage-page .tb i{font-style:normal}
  .garage-page .tb:focus-visible{outline:2px solid var(--rust-text);outline-offset:-2px}
  .garage-page .tb:active{background:rgba(239,233,221,.06)}
  .garage-page .tb-home{color:var(--bone)}
  .garage-page .tb-home svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
  .garage-page .tb-home.off{display:none}
  .garage-page .tb-below{flex:1 1 0;min-width:0;overflow:hidden;padding:0 4px}
  .garage-page .tb-below i{color:var(--faint)}
  /* the next stop: the bar's one strong word, its rust chevron, behind a hairline; one width all visit */
  .garage-page .tb-next{position:relative;margin-left:auto;justify-content:flex-end;color:var(--bone);font-weight:600}
  .garage-page .tb-next::after{content:'';position:absolute;left:0;top:10px;bottom:10px;border-left:1px solid var(--line)}
  .garage-page .tb-next span{overflow:hidden;text-overflow:ellipsis}
  .garage-page .tb-next i{color:var(--rust-text);font-size:24px;font-weight:500;line-height:0;margin-top:-3px}
  .garage-page .tb-next::before{content:'';position:absolute;inset:0;background:rgba(221,110,66,.3);opacity:var(--wash,0);pointer-events:none}
  .garage-page .tb-next.glow{animation:tb-glow 1.2s ease-in-out}
  html.no-webgl:has(.garage-page) .tb-home,html.no-webgl:has(.garage-page) .tb-next,html.gl-lost:has(.garage-page) .tb-home,html.gl-lost:has(.garage-page) .tb-next{display:none}
}
/* phones: the top bar names the place you're at, beside the logo (it gives way first when the top bar is short of room) */
@media(hover:none) and (max-width:760px),(hover:none) and (orientation:landscape) and (max-height:499px){
  .garage-page .hd{grid-template-columns:auto minmax(0,1fr) auto auto;column-gap:0}.garage-page .hd .contact,.garage-page .hd .menu{margin-left:8px}
  .garage-page .hd-here{display:block;min-width:0;padding:0 4px 0 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 15px/1 var(--sans);color:var(--bone);transition:opacity .15s linear}
  html:not(.bar-on):has(.garage-page) .hd-here,html.sheet-open:has(.garage-page) .hd-here,.garage-page .hd-here.tight{opacity:0}
}
@keyframes tb-glow{50%{background:rgba(221,110,66,.2)}}
@media(hover:none) and (orientation:landscape) and (max-height:499px){.garage-page .tourbar{left:50%;right:auto;width:min(520px,calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.garage-page .tb-next.glow{animation:none}}
/* touch screens: the panel says only what the room can't, in single rows on the bar at the thumb: the row and the bar one
   sheet (the bar's top line between them), no heading, no More; it goes with the bar */
html.record-listening:has(.garage-page) .panel{display:none}
@media(hover:none){
  .garage-page .panel{position:fixed;left:calc(12px + env(safe-area-inset-left));right:calc(12px + env(safe-area-inset-right));bottom:calc(64px + env(safe-area-inset-bottom));width:auto;max-height:none;padding:2px 16px;background:rgba(11,10,9,.88);border:1px solid var(--line);border-bottom:0}
  html:not(.bar-on):has(.garage-page) .panel,html.sheet-open:has(.garage-page) .panel{opacity:0!important;pointer-events:none}
  .garage-page .panel-top{display:none}
  .garage-page .panel .row-t{margin:0;padding:10px 0;color:var(--bone);font:400 15px/1.4 var(--sans)}
  .garage-page .panel .row-t b{font-weight:600}
  .garage-page .panel .row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;margin:0;color:var(--bone);text-decoration:none;font:500 15px/1.25 var(--sans)}
  .garage-page .panel .row i{font-style:normal;color:var(--rust-text);font-size:22px;line-height:0}
  .garage-page .panel button.row{width:100%;padding:0;background:none;border:0;text-align:left;cursor:pointer} /* (the town's "Drop into the street": a button, set like the rows' links) */
  .garage-page .panel .row2{flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;min-height:56px;padding:6px 0}
  .garage-page .panel .row2 b{font-weight:600}
  .garage-page .panel .row2 span{color:var(--dim);font-size:14px}.garage-page .panel .row2 span i{font-size:inherit;line-height:1}
  .garage-page .panel .row + .row,.garage-page .panel .row-t + .row{border-top:1px solid var(--line)}
  @media(max-height:480px){.garage-page .panel .row-all{display:none}}
  .garage-page .panel .row-fig{padding:9px 0;font-size:14px;line-height:1.35}.garage-page .panel .row-fig b{font-size:16px;margin-right:2px}.garage-page .panel .row-fig small{display:block;margin-top:3px;font:400 11px/1.4 var(--mono);letter-spacing:.02em;color:rgba(239,233,221,.62)}
  .garage-page .panel .row-fig + .row-fig{border-top:1px solid var(--line)}
  .garage-page .panel .rec-by{margin:8px 0 2px;color:var(--dim);font-size:15px}.garage-page .panel .rec-by b{color:var(--bone);font-weight:600}
  .garage-page .panel .rec-now{margin:0}
  .garage-page .panel .rec-act{gap:24px}.garage-page .panel .rec-act a,.garage-page .panel .rec-act button{min-height:44px;padding:0;font-size:15px}
}
@media(hover:none) and (orientation:landscape) and (max-height:499px){.garage-page .panel{left:50%;right:auto;width:min(520px,calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));transform:translateX(-50%);bottom:calc(64px + env(safe-area-inset-bottom));padding:2px 14px}
  html.record-open:has(.garage-page) .panel{left:auto;right:calc(12px + env(safe-area-inset-right));transform:none;width:300px;bottom:calc(72px + env(safe-area-inset-bottom));border-bottom:1px solid var(--line)}}
/* the foot of the page under each place: a plain way back up to the room */
.garage-page .b-up{margin:30px 0 0}.garage-page .b-up a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:500 15px/1.4 var(--sans);color:var(--dim);text-decoration:none}.garage-page .b-up a i{font-style:normal;color:var(--rust-text)}.garage-page .b-up a:hover{color:var(--bone)}.garage-page .b-up a:focus-visible{outline:2px solid var(--rust-text);outline-offset:4px}

/* A touch hint, once per visit; the first touch puts it away. */
.garage-page .look-hint{position:absolute;bottom:calc(82px + env(safe-area-inset-bottom));left:28px;right:28px;text-align:center;font:400 14px/1.4 var(--sans);color:var(--bone);text-shadow:0 1px 4px #000;pointer-events:none}
/* The camera waits on the bench while street textures upload, before the glide starts. */
.garage-page .street-status{display:none;position:absolute;left:50%;bottom:96px;transform:translateX(-50%);z-index:7;width:max-content;max-width:90%;margin:0;background:rgba(11,10,9,.9);color:var(--bone);padding:12px 18px;font:400 14px/1.4 var(--sans);pointer-events:none}
html.street-loading:has(.garage-page) .street-status{display:block}

.garage-page .hotspots button.quiet-globe span{opacity:0}
.garage-page #scene:focus-visible{outline:2px solid var(--orange);outline-offset:-3px}

/* The printer is the control: a native keyboard target follows its baked body. */
.garage-page .business-card-hotspot{position:absolute;z-index:3;min-width:44px;min-height:44px;padding:0;border:0;background:transparent;cursor:pointer;touch-action:manipulation}
.garage-page .business-card-hotspot[hidden]{display:none}
.garage-page .business-card-hotspot:focus-visible{outline:2px solid var(--rust-text);outline-offset:5px;border-radius:3px}
.garage-page .business-card-panel{right:auto;bottom:auto;width:min(510px,calc(100% - 48px));padding:0;background:none;border:0;text-align:center;transform:translateX(-50%)}
.garage-page .business-card-panel .panel-top{display:flex;justify-content:center;margin:0 0 4px}
.garage-page .business-card-panel h2{font:400 12px/1.4 var(--sans);color:var(--dim)}
.garage-page .business-card-panel .panel-more{display:none}
.garage-page .business-card-face,.garage-page .business-card-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.garage-page .business-card-actions{display:flex;justify-content:center;gap:24px;flex-wrap:wrap}
.garage-page .business-card-actions a,.garage-page .business-card-close{display:inline-flex;align-items:center;justify-content:center;min-height:44px;color:var(--bone);font:500 14px/1.2 var(--sans);text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--rust-text)}
.garage-page .business-card-close{background:none;border:0;padding:0 12px;color:var(--dim);cursor:pointer}
.garage-page .business-card-panel :focus-visible,.garage-page .business-card-skip:focus-visible{outline:2px solid var(--rust-text);outline-offset:4px}
.garage-page .business-card-skip{position:absolute;z-index:5;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));transform:translateX(-50%);min-height:44px;padding:0 16px;border:1px solid var(--line);background:rgba(11,10,9,.8);color:var(--dim);font:400 12px/1 var(--sans);cursor:pointer}
.garage-page .room[data-printing] #hot,.garage-page .room[data-printing] #look-hint{display:none}
.garage-page .room[data-printing] #scene{touch-action:none}
@media(max-height:499px){.garage-page .business-card-panel{width:40%;transform:none}.garage-page .business-card-actions{gap:4px 18px}.garage-page .business-card-panel .panel-top{display:none}}

@media(hover:hover) and (pointer:fine) and (min-width:761px){.garage-page .panel[data-place="sites"]{right:auto;left:50%;transform:translateX(-50%)}}
@media(hover:none) and (max-height:499px){.garage-page .panel[data-place="room-contact"]:not(.business-card-panel){display:none}}

/* The phone listening strip: Spotify owns title/playback/link; our end button returns the record. */
@media(hover:none){
  .garage-page .nowbar:not(.slim),html.record-open:has(.garage-page) .nowbar:not(.slim){display:grid;grid-template-columns:minmax(0,1fr) 52px;align-items:center;gap:4px;padding:4px;min-height:90px;width:auto;left:calc(12px + env(safe-area-inset-left));right:calc(12px + env(safe-area-inset-right));bottom:calc(64px + env(safe-area-inset-bottom));border:1px solid var(--line);border-radius:6px}
  .garage-page .nowbar:not(.slim) .nowbar-head{display:contents}
  .garage-page .nowbar:not(.slim) .nowbar-record,.garage-page .nowbar:not(.slim) .nowbar-play,.garage-page .nowbar:not(.slim) .nowbar-next,.garage-page .nowbar:not(.slim) .nowbar-foot{display:none}
  .garage-page .nowbar:not(.slim) .nowbar-close{grid-column:2;grid-row:1;justify-self:center;border:0}
  .garage-page .nowbar:not(.slim) .nowbar-embed{grid-column:1;grid-row:1;height:80px}
  .garage-page .nowbar:not(.slim) .nowbar-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}
/* A live drawer page borrows #scene; this transparent control owns its input. */
.garage-page .globe-control{position:absolute;inset:0;touch-action:none;cursor:grab;outline:none}
@media(hover:none){.garage-page .globe-control{inset:0 24px}}
.garage-page .globe-control:active{cursor:grabbing}
.garage-page .xp .globe-control:focus-visible{outline:2px solid var(--rust-text);outline-offset:-7px}
.garage-page .xp.live-page .xp-p{pointer-events:none}
.garage-page .xp.live-page .xp-t{pointer-events:none}
.garage-page .xp.live-page .xp-act{pointer-events:auto}
.garage-page .xp.live-page .xp-back{display:inline-flex;align-items:center;gap:6px;position:absolute;top:90px;left:24px;min-height:44px;padding:0 14px;border:1px solid var(--line);background:rgba(11,10,9,.72);color:var(--bone);font:500 15px/1 var(--sans);cursor:pointer}
.garage-page .xp.live-page .xp-back i{font-style:normal;font-size:22px;color:var(--rust-text)}
@media(hover:none){.garage-page .xp.live-page .xp-back{top:54px;left:calc(12px + env(safe-area-inset-left))}html.has-music:has(.garage-page) .xp.live-page .xp-back{top:99px}}
@media(prefers-reduced-motion:reduce){.garage-page .xp.live-page .xp-p{transition-duration:.15s}}

/* Each live page has one back control; the garage breadcrumb is redundant here. */
html.xp-on:has(.xp.live-page.on):has(.garage-page) .crumbs{display:none!important}
.garage-page .experiment-scroll,.garage-page .town-surface{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;outline-offset:-6px}
.garage-page .town-experiment{position:absolute;inset:0;color:#efe9dd}
.garage-page .town-stops{position:absolute;left:50%;top:64px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;white-space:nowrap;background:#0b0a09dc;padding:4px 10px;font:500 14px var(--sans)}
.garage-page .town-stops button{height:44px;width:44px;border:1px solid #756c60;background:#161411;color:#efe9dd;cursor:pointer}
.garage-page .town-stops button:disabled{opacity:.4}
.garage-page .town-experiment #clients{position:absolute;left:20px;bottom:140px;display:flex;flex-wrap:wrap;gap:6px;max-width:320px}
.garage-page .town-experiment .client-link{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.garage-page .town-experiment .client-link:focus-visible{position:static;width:auto;height:auto;clip-path:none;background:#14120f;padding:12px;color:#efe9dd}
.garage-page .town-experiment #client-name{position:absolute;pointer-events:none;background:#14120f;padding:10px}
@media(hover:none){.garage-page .town-stops{top:110px;max-width:calc(100% - 32px);gap:6px}.garage-page .town-stops span{max-width:210px;overflow:hidden;text-overflow:ellipsis}}

/* A quiet street ruler: seven landmarks, full-size touch targets and a slim bone track. */
html.in-street:has(.garage-page) .room{touch-action:none}
.garage-page .street-rail{position:absolute;z-index:6;right:max(4px,env(safe-area-inset-right));top:max(64px,calc(env(safe-area-inset-top) + 56px));bottom:max(152px,calc(env(safe-area-inset-bottom) + 140px));width:44px;max-height:352px;margin-block:auto;display:flex;flex-direction:column;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility .3s;isolation:isolate}
.garage-page .street-rail.on{opacity:1;visibility:visible;pointer-events:auto}
.garage-page .street-rail button{position:relative;flex:1;min-height:24px;width:44px;border:0;padding:0;background:transparent;color:var(--bone);cursor:pointer;touch-action:manipulation}
.garage-page .street-rail button span{display:block;position:absolute;left:17px;top:50%;width:10px;height:2px;background:currentColor;opacity:.65;box-shadow:0 1px 3px #000}
.garage-page .street-rail button[aria-current] span,.garage-page .street-rail button:hover span{opacity:1;width:16px;left:14px}
.garage-page .street-rail button:focus-visible{outline:1px solid var(--bone);outline-offset:-4px;border-radius:3px}
.garage-page .street-track{position:absolute;left:21px;top:calc(100% / 14);bottom:calc(100% / 14);width:2px;background:rgba(239,233,219,.3);box-shadow:0 0 5px #171410;pointer-events:none}
.garage-page .street-track i{position:absolute;width:6px;height:6px;left:-2px;top:calc(var(--street-progress,0) * 100%);transform:translateY(-50%);border-radius:50%;background:var(--bone);box-shadow:0 0 0 3px rgba(40,31,25,.65)}
@media(prefers-reduced-motion:reduce){.garage-page .street-rail{transition:none}}

html.in-street:has(.garage-page) .look-hint{bottom:calc(172px + env(safe-area-inset-bottom))}
html.in-street:has(.garage-page) .edge-r{right:64px}

.garage-page .xp.pointer-input :is(.experiment-scroll,.town-surface,.globe-control):focus{outline:none}

/* Drafted owns the first-load surface; the underlying entrance never moves. */
.garage-page #drafted{display:block;visibility:hidden;position:absolute;inset:0;width:100%;height:100vh;height:100svh;z-index:5;pointer-events:none}
html.draft-active:has(.garage-page) #drafted{visibility:visible}
html.draft-pending:has(.garage-page) .room>.doorline{opacity:0;visibility:hidden}
html.draft-pending:has(.garage-page) .room>.cue{opacity:0}
html.draft-active:has(.garage-page) .room>.cue{opacity:0}
html.draft-pending:has(.garage-page) .room{cursor:progress}
html.draft-pending:has(.garage-page) .room>.cue[role=status]{clip-path:inset(50%)}
html.no-webgl:has(.garage-page) #drafted,html.gl-lost:has(.garage-page) #drafted{display:none}

html.draft-pending:has(.garage-page) .door-poster{visibility:hidden}

/* Direct room and opened-door arrivals keep their interior still until that view is drawn. */
html.in:not(.ready):has(.garage-page) #scene{opacity:0;transition:none}

/* The room yields the device to the computer page. The header stays small. */
html.ny-on:has(.garage-page){overflow:hidden}
html.ny-on:has(.garage-page) .hd .nav,html.ny-on:has(.garage-page) .hd .contact,html.ny-on:has(.garage-page) .hd .menu,html.ny-on:has(.garage-page) .hd-here{visibility:hidden}
html.ny-on:has(.garage-page) .panel,html.ny-on:has(.garage-page) .tourbar,html.ny-on:has(.garage-page) .crumbs,html.ny-on:has(.garage-page) .edge,html.ny-on:has(.garage-page) .street-rail{visibility:hidden!important}
.garage-page .ny-shell{position:fixed;inset:44px 0 0;z-index:18;background:#0b0f19;display:flex;flex-direction:column;color:#efe9dd}
.garage-page .ny-top{height:44px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid #ffffff20;background:#0b0a09;font:12px var(--mono)}
.garage-page .ny-back{min-height:44px;color:inherit;background:none;border:0;font:inherit;cursor:pointer;padding:0 8px 0 0}
.garage-page .ny-back:focus-visible{outline:2px solid #ee9c73;outline-offset:-4px}
.garage-page .ny-mount{position:relative;flex:1;min-height:0;background:#0b0f19 url('../new-york/monitor.webp') center/cover}
.garage-page .ny-mount iframe{width:100%;height:100%;border:0;display:block;opacity:0;transition:opacity .35s ease}
.garage-page .ny-shell.live iframe{opacity:1}
.garage-page .ny-status{position:absolute;inset:auto 18px 24px;padding:14px 18px;background:#0b0a09e8;font:13px var(--sans);border-radius:4px}
.garage-page .ny-return{position:absolute;inset:0;z-index:19;width:100%;height:100%;pointer-events:none}
.garage-page .ny-return[hidden]{display:none}
.garage-page .ny-retry{position:fixed;bottom:32px;left:24px;z-index:21;padding:14px 20px}
@media(prefers-reduced-motion:reduce){.garage-page .ny-mount iframe{transition:none}}

.garage-page .ny-launch{position:absolute;inset:0;width:100%;height:100%;z-index:1;background:#0b0a09;pointer-events:none}
.garage-page .ny-shell:not(.live) .ny-status{z-index:2;background:none;color:#c9c3b7;left:0;right:0;text-align:center}
.garage-page .ny-mount{overflow:hidden;background:#0b0a09}
/* Painted is a device preference: in the phone Menu, beside the logo on desktop. */
.garage-page .painted-button{border:0;background:none;color:var(--dim);font:400 13px/1 var(--sans);cursor:pointer;min-height:44px;min-width:44px}
.garage-page .painted-button[aria-pressed="true"]{color:var(--rust-text)}
.garage-page .painted-button:focus-visible{outline:2px solid var(--rust-text);outline-offset:2px}
.garage-page .painted-desktop{position:absolute;top:0;left:66px;padding:0 10px}
.garage-page .painted-menu{display:none}
.garage-page .painted-status{position:absolute;z-index:18;bottom:86px;left:50%;transform:translateX(-50%);margin:0;padding:9px 14px;background:#171612ed;border:1px solid var(--line);border-radius:4px;color:var(--bone);font:400 12px/1.4 var(--sans);text-align:center;max-width:calc(100% - 48px);pointer-events:none}
.garage-page .room{--painted-fade-duration:0.2s}
.garage-page .painted-transition{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;transition:opacity var(--painted-fade-duration) ease}
@media(max-width:760px),(hover:none),(orientation:landscape) and (max-height:499px){.garage-page .painted-desktop{display:none}.garage-page .painted-menu{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:24px;padding:12px 0;border-top:1px solid var(--line);font:400 14px/1.4 var(--sans);text-align:left}.garage-page .painted-menu span{font:400 12px/1 var(--mono);color:var(--dim)}.garage-page .painted-menu+.motion-look{margin-top:0}}
@media(prefers-reduced-motion:reduce){.garage-page .room{--painted-fade-duration:0s}}

/* The separate city owns the screen while the garage graphics are released. */
html.ny-on:has(.garage-page) [data-painted]{visibility:hidden;pointer-events:none}

.garage-page .service-drives{display:flex;gap:10px;flex-wrap:wrap}.garage-page .service-drives button{min-height:44px}.garage-page .service-drives .row{flex:1;min-width:140px;text-align:left}
/* Until the room behind it is ready the door is just a closed door: "Tap to open" fades in only once it can open. */
html:not([data-garage-phase=ready]):has(.garage-page) .room>.cue{opacity:0}
.garage-page .area-progress{position:absolute;left:50%;bottom:calc(80px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:12px;max-width:calc(100% - 32px);padding:9px 14px;border:1px solid #756653;background:#171511ed;color:#efe9dd;font:400 13px/1.4 var(--mono);border-radius:5px;box-shadow:0 5px 24px #0005}.garage-page .area-progress[hidden]{display:none}.garage-page .area-progress button{min-height:44px;padding:4px 12px;border:1px solid #9f8569;background:transparent;color:inherit;font:inherit;cursor:pointer}