html:has(.hopper-index){scrollbar-gutter:stable}body:has(.hopper-index){--gallery-paper:#12353c;--gallery-ink:#e8d7b7;background:var(--gallery-paper);color:var(--gallery-ink)}.hopper-index{--frame-top:84px;--dusk:#12353c;--lamp:#e8b76c;--line:#ceb28666}.street-stage{isolation:isolate;height:calc(100svh - var(--frame-top));background:#0f2b31;min-height:540px;position:relative;overflow:clip;container-type:inline-size}.street-painting{--w:max(100cqw, calc(1.5 * (100svh - var(--frame-top))));--pan:0%;z-index:-1;left:50%;top:calc(50% - .297 * var(--w));width:var(--w);aspect-ratio:3/2;translate:calc(-50% + var(--page-pan,0%) + var(--pan) + var(--drag-x,0px)) 0;transition:translate .9s cubic-bezier(.2,.8,.2,1);position:absolute}.street-painting[data-dragging]{transition:none}.street-building{clip-path:inset(0 16.45%);width:100%;height:100%;position:absolute;top:0}.street-building:first-child{clip-path:inset(0 16.45% 0 0)}.street-building:last-child{clip-path:inset(0 0 0 16.45%)}.street-building:only-child{clip-path:none}.street-building>img{width:100%;height:100%;display:block}.street-building:nth-child(2n)>img{transform:scaleX(-1)}.street-dusk{z-index:0;pointer-events:none;background:linear-gradient(#0f2b31f2,#0f2b31b3 14%,#0f2b3100 34%),linear-gradient(#0f2b3100 58%,#0f2b31b8 80%,#0f2b31f5);position:absolute;inset:0}.street-frame{z-index:1;pointer-events:none;grid-template-rows:auto 1fr auto;height:100%;padding:26px 5% 24px;display:grid;position:relative}.street-window,.street-unlit{height:28.8%;top:30.2%;left:var(--window-left);width:var(--window-width);position:absolute}.street-window{color:#fff0ca;outline-offset:3px;background:linear-gradient(#0000 30%,#102d32d9 100%);align-items:end;transition:box-shadow .25s;display:flex;box-shadow:inset 0 0 0 1px #ffe0a577}.street-window:hover,.street-window:focus-visible{box-shadow:inset 0 0 0 2px #ffe0a5,0 0 40px #f4bc5955}.window-lettering{text-align:center;flex-direction:column;gap:clamp(6px,.8cqw,12px);width:100%;padding:clamp(10px,1.2cqw,18px) clamp(8px,1.2cqw,20px);display:flex}.window-lettering small{font:clamp(8px, .7cqw, 10px) var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.75}.window-lettering strong{text-wrap:balance;font:clamp(11px,1.4cqw,22px)/1.15 Georgia,serif}.window-invitation{border-top:1px solid #ffe0a577;padding-top:8px;font:italic clamp(11px,1cqw,15px) Georgia,serif}.street-unlit{background:#0a222bea}.hopper-heading{pointer-events:auto;justify-content:space-between;align-items:start;gap:35px;display:flex}.hopper-eyebrow{font:12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#d5ae73;margin-bottom:14px}.hopper-heading h1{letter-spacing:-.055em;text-shadow:0 2px 30px #0f2b31;font:clamp(48px,5.5vw,82px)/.95 Georgia,serif}.hopper-heading :where(h1) em{color:var(--lamp);font-weight:400}.hopper-aside{text-shadow:0 1px 18px #0f2b31;max-width:34em;margin-top:30px}.hopper-intro{font:16px/1.6 Georgia,serif}.hopper-credit{color:#b9c2b4;margin-top:12px;font:italic 14px Georgia,serif}.street-curb{pointer-events:auto;grid-row:3;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end;gap:6%;display:grid}.night-question label{text-shadow:0 1px 18px #0f2b31;font:italic clamp(22px,2.2vw,30px) Georgia,serif}.night-input{border-bottom:1px solid #ceb286aa;align-items:center;gap:15px;margin-top:10px;display:flex}.night-input input{color:#ffebc6;background:0 0;border:0;width:100%;min-width:0;padding:10px 0;font:17px Georgia,serif}.night-input input::placeholder{color:#adbbb1;opacity:1}.night-input button{color:inherit;background:0 0;border:0;flex-shrink:0;padding:10px 0;font:14px Georgia,serif;text-decoration:underline}.night-prompts{flex-wrap:wrap;align-items:baseline;gap:14px;margin-top:16px;display:flex}.night-prompts p{font:italic 15px Georgia,serif}.night-prompts>div{flex-wrap:wrap;gap:8px;display:flex}.night-prompts button{border:1px solid var(--line);color:inherit;background:#0f2b3199;padding:7px 13px;font:14px Georgia,serif;transition:background .2s,color .2s}.night-prompts button[aria-pressed=true]{background:var(--lamp);color:var(--dusk);border-color:var(--lamp)}.street-address{text-align:right;justify-items:end;gap:10px;display:grid}.street-address>p{font:13px / 1.5 var(--mono);text-shadow:0 1px 12px #0f2b31}.street-address nav{align-items:center;gap:18px;display:flex}.street-address :where(nav)>span{font:12px var(--mono)}.street-address button{color:inherit;text-underline-offset:4px;background:0 0;border:0;padding:8px 0;font:italic 16px Georgia,serif;text-decoration:underline}.hopper-afterword{color:#c2bca6;margin:22px 5% 0;font:italic 16px Georgia,serif}.hopper-index :where(a,button,input):focus-visible{outline:2px solid var(--lamp);outline-offset:4px}@media (max-height:760px) and (min-width:751px){.street-frame{padding-top:18px}.hopper-eyebrow{margin-bottom:8px}.hopper-heading h1{font-size:clamp(40px,5vw,56px)}.hopper-aside{margin-top:14px}.hopper-intro{font-size:15px}.night-prompts{margin-top:10px}}@media (max-width:750px){.street-stage{touch-action:pan-y pinch-zoom}.street-painting{-webkit-user-select:none;user-select:none}.street-stage{height:auto;min-height:calc(100svh - var(--frame-top))}.street-frame{min-height:calc(100svh - var(--frame-top));padding:16px 5% 14px}.street-painting[data-pane="0"]{--pan:16.35%}.street-painting[data-pane="1"]{--pan:-17.2%}.hopper-heading{display:block}.hopper-eyebrow{margin-bottom:8px;font-size:10px}.hopper-heading h1{font-size:clamp(38px,10.5vw,48px)}.hopper-aside{margin-top:8px}.hopper-intro{display:none}.hopper-credit{margin-top:0;font-size:12px}.window-lettering{gap:5px;padding:8px 6px}.window-lettering small{display:none}.window-lettering strong{font-size:12px}.window-invitation{padding-top:5px;font-size:11px}.street-curb{grid-template-columns:minmax(0,1fr);gap:12px}.night-question label{font-size:20px}.night-input{margin-top:6px}.night-input input{padding:8px 0;font-size:16px}.night-prompts{gap:10px;margin-top:10px}.night-prompts p{font-size:14px}.night-prompts>div{scrollbar-width:none;flex-wrap:nowrap;max-width:100%;padding-bottom:2px;overflow-x:auto}.night-prompts button{white-space:nowrap;padding:6px 10px;font-size:13px}.street-address{text-align:left;justify-items:stretch;gap:6px}.street-address>p{display:none}.street-address nav{justify-content:space-between;gap:10px}.street-address button{padding:6px 0;font-size:14px}.hopper-afterword{margin-top:18px;font-size:14px}}@media (prefers-reduced-motion:reduce){.street-window,.night-prompts button,.street-painting{transition:none}}
