/*
  Steven Bremel, version 12: Lift.
  Ink on drafting paper for the building, brass for the lift.
  Every length in px below that comes from a custom property is set by lift.js
  from the size of the screen; the values here are only first-paint defaults.
*/

:root {
  --paper: #f0eadf;
  --paper-2: #e7e0d2;
  --paper-3: #ddd5c6;
  --room-paper: #f8f3e8;
  --ink: #1f1c18;
  --line: rgba(31, 28, 24, .72);
  --faint: rgba(31, 28, 24, .3);
  --ghost: rgba(31, 28, 24, .1);
  --hatch: rgba(31, 28, 24, .42);
  --brass-hi: #f7e4b0;
  --brass: #d2ad63;
  --brass-mid: #b48c45;
  --brass-lo: #7c5b26;
  --brass-ink: #3a2a12;
  --lamp: #ffb347;
  --lamp-glow: rgba(255, 166, 52, .6);
  --display: "Poiret One", "Didot", "Bodoni 72", serif;
  --engrave: "Marcellus SC", "Optima", "Trajan Pro", serif;
  --sans: "Overpass", "Helvetica Neue", Arial, sans-serif;
  --mono: "Overpass Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --tabH: 60px;

  --G: 0px; --I: 150px; --F: 600px; --E: 600px; --slab: 22px; --earth: 0px; --wall: 12px;
  --roomA: 0px; --roomB: 0px; --shaftW: 360px; --xWallL: 0px; --xRoomA: 12px; --xShaft: 12px;
  --xRoomB: 372px; --xWallR: 372px; --xEarthR: 384px; --carL: 20px; --carTop: 190px; --carW: 340px;
  --carH: 540px; --headH: 80px; --doorW: 310px; --doorH: 430px; --sillH: 14px; --pad: 12px;
  --panelW: 0px; --gap: 8px; --cwL: 20px; --cwLane: 0px; --cwH: 200px; --hh: 60px;
  --railL: 14px; --railR: 362px; --nameSize: 32px; --lineSize: 16px; --stepX: 50%; --stepY: 50%;

  --pat0: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' fill='none' stroke='%231f1c18' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M4 6h3M20 3l2 2M33 8h4M11 17l3-1M27 15h2M41 20l2 1M6 29h4M18 27l2 2M35 30h3M12 41l3 1M26 39h3M42 43h3'/%3E%3Cg fill='%231f1c18' stroke='none'%3E%3Ccircle cx='15' cy='9' r='.9'/%3E%3Ccircle cx='38' cy='14' r='.9'/%3E%3Ccircle cx='8' cy='22' r='.9'/%3E%3Ccircle cx='30' cy='23' r='.9'/%3E%3Ccircle cx='22' cy='34' r='.9'/%3E%3Ccircle cx='44' cy='36' r='.9'/%3E%3Ccircle cx='4' cy='44' r='.9'/%3E%3Ccircle cx='33' cy='45' r='.9'/%3E%3C/g%3E%3C/svg%3E");
  --pat1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' fill='none' stroke='%231f1c18' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M2 6h12M20 6h8M34 6h10M8 18h10M24 18h14M2 30h6M14 30h12M32 30h10M6 42h14M26 42h8M38 42h8'/%3E%3C/svg%3E");
  --pat2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' fill='none' stroke='%231f1c18' stroke-width='1'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Ccircle cx='26' cy='6' r='2'/%3E%3Ccircle cx='40' cy='12' r='3.5'/%3E%3Ccircle cx='16' cy='22' r='2.5'/%3E%3Ccircle cx='34' cy='26' r='2'/%3E%3Ccircle cx='6' cy='36' r='2'/%3E%3Ccircle cx='22' cy='40' r='3.5'/%3E%3Ccircle cx='42' cy='38' r='2.5'/%3E%3C/svg%3E");
  --pat3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' fill='none' stroke='%231f1c18' stroke-width='1' stroke-linejoin='round'%3E%3Cpath d='M0 12l14-6 16 4 18-8M0 30l10 4 20-6 18 6M0 46l16-4 14 4 18-2M14 6l-2 26M30 10l2 18M10 34l4 12M30 28l-2 16'/%3E%3Cpath stroke-width='.6' d='M2 22l6-6M36 20l6-6M18 44l6-6M40 40l5-5'/%3E%3C/svg%3E");
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .1 0 0 0 0 .08 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  background: var(--paper);
  scroll-snap-type: y mandatory;
  -webkit-text-size-adjust: 100%;
}
html.travelling { scroll-snap-type: none; }
/* Snapping starts once the script has laid out the floors and placed the car. */
html:not(.snap-on) { scroll-snap-type: none; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  background-color: var(--paper);
  background-image: var(--noise);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; }

/* ---------- Roof ---------- */

.roof { position: relative; height: var(--I); }
.crown {
  position: absolute;
  left: var(--xShaft);
  width: var(--shaftW);
  bottom: var(--hh);
  padding: 0 8px 14px;
  text-align: center;
  z-index: 2;
}
.crown-name {
  margin: 0;
  font: 400 var(--nameSize)/1 var(--display);
  letter-spacing: .05em;
  white-space: nowrap;
}
.crown-line {
  margin: 7px 0 0;
  font: 300 var(--lineSize)/1.2 var(--sans);
  letter-spacing: .02em;
}
.crown-rail {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 0;
  height: 10px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    repeating-linear-gradient(45deg, transparent 0 6px, var(--faint) 6px 7px),
    repeating-linear-gradient(-45deg, transparent 0 6px, var(--faint) 6px 7px);
}
.crown-rail::before, .crown-rail::after {
  content: "";
  position: absolute;
  top: -1px;
  width: 1px;
  height: 11px;
  background: var(--line);
}
.crown-rail::before { left: 0; }
.crown-rail::after { right: 0; }

.headhouse {
  position: absolute;
  left: var(--xShaft);
  width: var(--shaftW);
  bottom: 0;
  height: var(--hh);
}
.headhouse svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--ink); stroke-width: 1.2; }
.headhouse .t { stroke: var(--line); stroke-width: .8; }
.headhouse .hh-box { stroke-width: 1.5; fill: var(--paper); }
.headhouse .hh-roof { stroke-width: 2.4; }
.headhouse .hh-rope { stroke-width: 1.6; }

/* ---------- Building ---------- */

.building { position: relative; overflow-x: clip; }
.building::before, .building::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: calc(var(--E) - 132px);
  width: 4px;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  z-index: 1;
  pointer-events: none;
}
.building::before { left: var(--railL); }
.building::after { left: var(--railR); }

.floors { list-style: none; margin: 0; padding: 0; }
.floor {
  position: relative;
  height: var(--F);
  scroll-snap-align: start;
  scroll-margin-top: var(--I);
}
.floor > div, .dig > div { position: absolute; top: 0; bottom: 0; }

.earth { overflow: hidden; }
.earth.l { left: var(--G); width: var(--earth); }
.earth.r { left: var(--xEarthR); width: var(--earth); }
.earth::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--pat);
  background-size: 48px 48px;
  opacity: calc(.24 + var(--deep, 0) * .5);
}
.floor, .dig-earth { --pat: var(--pat0); }
[data-strata="1"] { --pat: var(--pat1); }
[data-strata="2"] { --pat: var(--pat2); }
[data-strata="3"] { --pat: var(--pat3); }
.floor:not([data-strata="air"]) > .earth, .dig-earth { background: rgba(31, 28, 24, calc(var(--deep, 0) * .07)); }
[data-strata="air"] > .earth::before { display: none; }
[data-strata="air"] > .earth { border-bottom: 2px solid var(--ink); overflow: visible; }

.street { position: absolute; bottom: 0; fill: none; stroke: var(--ink); stroke-width: 1.1; stroke-linecap: round; }
.lamp { left: 30%; width: 22px; height: 118px; }
.tree { left: 22%; width: 44px; height: 118px; }
[data-earth="thin"] .street, [data-earth="none"] .street { display: none; }

.datum {
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(100% - 4px);
  padding: 0 0 4px 4px;
  border-bottom: 1px solid var(--line);
  font: 600 10.5px/1 var(--mono);
  letter-spacing: .08em;
  white-space: nowrap;
  background: linear-gradient(transparent 0, var(--paper) 0) left bottom / 44px 18px no-repeat;
}
.datum::before {
  content: "";
  display: inline-block;
  margin-right: 5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--ink);
  vertical-align: -1px;
}
[data-strata="air"] .datum { bottom: 2px; }
[data-earth="thin"] .datum, [data-earth="none"] .datum { display: none; }

.wall {
  background: repeating-linear-gradient(45deg, transparent 0 4px, var(--hatch) 4px 5px), var(--paper);
  border-left: 1.4px solid var(--ink);
  border-right: 1.4px solid var(--ink);
}
.wall.l { left: var(--xWallL); width: var(--wall); }
.wall.r { left: var(--xWallR); width: var(--wall); }
.floor:first-child > .wall::after {
  content: "";
  position: absolute;
  left: -1.4px;
  right: -1.4px;
  top: -16px;
  height: 16px;
  border: 1.4px solid var(--ink);
  border-bottom: 0;
  background: repeating-linear-gradient(45deg, transparent 0 4px, var(--hatch) 4px 5px), var(--paper);
}
[data-strata="air"] > .wall::before {
  content: "";
  position: absolute;
  left: -1.4px;
  right: -1.4px;
  top: 26%;
  height: 40%;
  border-top: 1.4px solid var(--ink);
  border-bottom: 1.4px solid var(--ink);
  background: linear-gradient(90deg, transparent 38%, var(--line) 38% calc(38% + 1px), transparent calc(38% + 1px) 62%, var(--line) 62% calc(62% + 1px), transparent calc(62% + 1px)), var(--room-paper);
}

.floor > .slab, .dig > .slab {
  bottom: auto;
  height: var(--slab);
  background: repeating-linear-gradient(-45deg, transparent 0 6px, var(--hatch) 6px 7px), var(--paper);
  border-top: 1.4px solid var(--ink);
  border-bottom: 1.4px solid var(--ink);
}
.slab.a { left: var(--xRoomA); width: var(--roomA); }
.slab.b { left: var(--xRoomB); width: var(--roomB); }
[data-ra="none"] .slab.a, [data-rb="none"] .slab.b { display: none; }

.floor > .room { top: var(--slab); }
.room.a { left: var(--xRoomA); width: var(--roomA); }
.room.b { left: var(--xRoomB); width: var(--roomB); overflow: hidden; }

/* Room labels: the drawing's callout for each floor. */
.label {
  position: absolute;
  left: 18px;
  right: 14px;
  top: 20px;
  display: block;
  color: var(--ink);
  text-decoration: none;
}
.bubble {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1.3px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  font: 400 21px/1 var(--display);
  transition: background .2s, color .2s;
}
.bubble::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: calc(var(--roomA) - 78px);
  border-top: 1px solid var(--faint);
}
.l-title {
  display: block;
  margin-top: 14px;
  max-width: 14em;
  font: 400 clamp(21px, calc(var(--roomA) * .075), 30px)/1.12 var(--display);
}
.l-kind {
  display: inline-block;
  margin-top: 10px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
  font: 600 11px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.label:hover .l-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.label:hover .bubble, .label:focus-visible .bubble { background: var(--ink); color: var(--paper); }

.prop {
  position: absolute;
  right: 10px;
  bottom: 0;
  width: min(200px, calc(var(--roomA) * .58));
  height: auto;
  overflow: visible;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.prop .t { stroke: var(--line); stroke-width: .7; }
.prop circle { fill: var(--paper); }
.pendant {
  position: absolute;
  top: 0;
  left: 80%;
  width: 1px;
  height: 18px;
  background: var(--line);
}
.pendant::after {
  content: "";
  position: absolute;
  top: 18px;
  left: -9px;
  width: 18px;
  height: 8px;
  border: 1px solid var(--ink);
  border-radius: 9px 9px 0 0;
}

[data-ra="compact"] .prop, [data-ra="compact"] .pendant { display: none; }
[data-ra="compact"] .label { left: 12px; right: 10px; }
[data-ra="compact"] .l-title { font-size: 19px; }
[data-ra="bubble"] .l-title, [data-ra="bubble"] .l-kind, [data-ra="bubble"] .prop,
[data-ra="bubble"] .pendant, [data-ra="bubble"] .bubble::after { display: none; }
[data-ra="bubble"] .label { left: 50%; right: auto; margin-left: -23px; }
[data-ra="none"] .room.a .prop, [data-ra="none"] .room.a .pendant { display: none; }
[data-ra="none"] .room.a .label {
  width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.stair { position: absolute; left: 10px; top: 6px; width: calc(100% - 20px); height: calc(100% - 6px); overflow: visible; fill: none; stroke: var(--line); stroke-width: 1; }
.stair path { vector-effect: non-scaling-stroke; }
.stair .t { stroke: var(--faint); }
[data-rb="none"] .room.b { display: none; }

/* The shaft: back wall, a ring beam at every floor, and painted floor numbers. */
.floor > .shaft { left: var(--xShaft); width: var(--shaftW); background: var(--paper-2); }
.m-desk .floor > .shaft {
  border-left: 1.4px solid var(--ink);
  border-right: 1.4px solid var(--ink);
  background:
    repeating-linear-gradient(45deg, transparent 0 4px, var(--hatch) 4px 5px) left top / 7px 100% no-repeat,
    repeating-linear-gradient(45deg, transparent 0 4px, var(--hatch) 4px 5px) right top / 7px 100% no-repeat,
    var(--paper-2);
}
.floor > .shaft::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--slab);
  background: var(--paper-3);
  border-top: 1px solid var(--faint);
  border-bottom: 1px solid var(--faint);
}
.m-desk .floor > .shaft::before { left: 7px; right: 7px; }
.floor:first-child > .shaft::before {
  background: repeating-linear-gradient(-45deg, transparent 0 6px, var(--hatch) 6px 7px), var(--paper);
  border-top: 1.4px solid var(--ink);
  border-bottom: 1.4px solid var(--ink);
}
.stencil {
  position: absolute;
  left: calc(var(--gap) + var(--cwLane) + 18px);
  bottom: 16px;
  font: 400 clamp(64px, calc(var(--F) * .2), 150px)/.8 var(--display);
  color: rgba(31, 28, 24, .13);
  letter-spacing: .02em;
}
.m-phone .stencil { left: 14px; }

/* The floor being dug. */
.dig { position: relative; height: var(--E); scroll-snap-align: end; overflow: hidden; }
.dig > .dig-earth { left: var(--G); right: var(--G); }
.dig > .wall { bottom: 36%; background: none; border-left-style: dashed; border-right-style: dashed; border-color: var(--line); }
.void { left: var(--xRoomA); width: var(--roomA); top: var(--slab) !important; bottom: auto !important; height: 64%; }
.void-cut { position: absolute; inset: 0; width: 100%; height: 100%; }
.void-cut path { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 5 4; }
.void .prop { right: auto; left: 8%; bottom: 36%; width: min(190px, 70%); }
[data-ra="none"] .void, [data-ra="bubble"] .void .prop { display: none; }
.pit {
  left: var(--xShaft);
  width: var(--shaftW);
  bottom: auto !important;
  height: 132px;
  background: var(--paper-2);
  border-left: 1.4px solid var(--ink);
  border-right: 1.4px solid var(--ink);
}
.pit::after {
  content: "";
  position: absolute;
  left: -1.4px;
  right: -1.4px;
  bottom: -18px;
  height: 18px;
  border: 1.4px solid var(--ink);
  background: repeating-linear-gradient(-45deg, transparent 0 6px, var(--hatch) 6px 7px), var(--paper);
}
.buffers {
  position: absolute;
  left: calc(var(--carL) - var(--xShaft));
  width: var(--carW);
  bottom: 0;
  display: flex;
  justify-content: space-around;
}
.buffers svg { width: 26px; height: 64px; fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.future {
  left: var(--xShaft);
  width: var(--shaftW);
  top: 150px !important;
  border-left: 1.4px dashed var(--line);
  border-right: 1.4px dashed var(--line);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 7%;
}
.stencil.next {
  position: static;
  color: transparent;
  -webkit-text-stroke: 1px var(--line);
  font-size: clamp(72px, calc(var(--F) * .24), 170px);
}
.dig-name {
  margin-top: 16px;
  font: 600 12px/1 var(--mono);
  letter-spacing: .24em;
  text-transform: uppercase;
}

/* ---------- Ropes and counterweight ---------- */

.cable {
  position: fixed;
  left: 0;
  top: 0;
  width: 5px;
  height: 1px;
  z-index: 3;
  border-left: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
  transform-origin: 0 0;
  pointer-events: none;
  will-change: transform;
}
.cw {
  position: fixed;
  left: var(--cwL);
  top: 0;
  width: var(--cwLane);
  height: var(--cwH);
  z-index: 3;
  border: 1.2px solid var(--ink);
  background: repeating-linear-gradient(180deg, var(--paper) 0 11px, var(--line) 11px 12px), var(--paper);
  will-change: transform;
  visibility: hidden;
}
.cw::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -7px;
  width: 10px;
  height: 7px;
  margin-left: -5px;
  border: 1.2px solid var(--ink);
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
}
.m-phone .cw, .m-phone #cable-cw { display: none; }

/* ---------- The car ---------- */

.car {
  position: fixed;
  left: var(--carL);
  top: var(--carTop);
  width: var(--carW);
  height: var(--carH);
  z-index: 4;
  will-change: transform;
}
.car-body {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: var(--headH) var(--doorH) 1fr;
  padding: 0 var(--pad);
  background: var(--paper);
  border: 1.5px solid var(--ink);
  transform-origin: var(--stepX) var(--stepY);
}
.car-body::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-left: 1px solid var(--faint);
  border-right: 1px solid var(--faint);
  pointer-events: none;
}
.crosshead {
  position: absolute;
  left: 50%;
  top: -11px;
  width: 36%;
  height: 11px;
  transform: translateX(-50%);
  border: 1.3px solid var(--ink);
  border-bottom: 0;
  background: repeating-linear-gradient(-45deg, transparent 0 4px, var(--hatch) 4px 5px), var(--paper);
}
.car-head {
  display: grid;
  grid-template-columns: var(--doorW) var(--panelW);
  column-gap: var(--pad);
  align-items: end;
  padding-bottom: 8px;
}
.m-phone .car-head { grid-template-columns: var(--doorW); }
.indicator {
  justify-self: center;
  position: relative;
  width: min(calc(var(--doorW) * .62), 250px);
  height: calc(var(--headH) - 16px);
  padding: 6px 10px 3px;
  border-radius: 50% 50% 6px 6px / 92% 92% 6px 6px;
  background: linear-gradient(172deg, var(--brass-hi), var(--brass) 36%, var(--brass-mid) 68%, var(--brass-lo));
  border: 1.2px solid var(--brass-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -3px 5px rgba(60, 40, 10, .32), 0 1px 0 rgba(31, 28, 24, .25);
  transition: box-shadow .35s;
}
.indicator.ding { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -3px 5px rgba(60, 40, 10, .32), 0 0 22px 2px var(--lamp-glow); }
.dial { display: block; width: 100%; height: 100%; overflow: visible; }
.d-arc { fill: none; stroke: var(--brass-ink); stroke-width: 1.2; }
.d-tick { fill: none; stroke: var(--brass-ink); stroke-width: 1; }
.d-lab { font: 400 11px var(--engrave); fill: var(--brass-ink); text-anchor: middle; }
.d-num { font: 400 28px var(--engrave); fill: var(--brass-ink); text-anchor: middle; letter-spacing: .04em; }
.d-needle { stroke: #22170a; stroke-width: 2.2; stroke-linecap: round; }
.d-hub { fill: #22170a; }
.d-arr { fill: rgba(58, 42, 18, .28); stroke: var(--brass-ink); stroke-width: .8; transition: fill .2s; }
.d-arr.on { fill: var(--lamp); }
.panel-doors {
  justify-self: center;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 9px 16px;
  border-radius: 6px;
  border: 1.2px solid var(--brass-ink);
  background: linear-gradient(170deg, var(--brass-hi), var(--brass) 40%, var(--brass-mid));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 4px rgba(60, 40, 10, .3);
}
.m-phone .panel-doors { display: none; }

.car-front { display: flex; gap: var(--pad); align-items: stretch; height: var(--doorH); }
.doorway {
  position: relative;
  flex: 0 0 var(--doorW);
  width: var(--doorW);
  height: var(--doorH);
  overflow: hidden;
  border: 1.5px solid var(--ink);
  background: var(--room-paper);
  container-type: size;
}
.bay { position: relative; flex: 0 0 var(--panelW); width: var(--panelW); }
.m-phone .bay { display: none; }
.sill {
  align-self: start;
  margin: 0 calc(var(--pad) * -1);
  height: var(--sillH);
  border-top: 1.5px solid var(--ink);
  border-bottom: 1px solid var(--faint);
  background: repeating-linear-gradient(90deg, transparent 0 5px, var(--faint) 5px 6px);
}

/* The room past the doors. */
.room { position: absolute; inset: 0; z-index: 1; display: block; color: var(--ink); text-decoration: none; }
.room::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 62% 52% at 50% 18%, rgba(255, 210, 130, .5), transparent 70%);
  opacity: 0;
  transition: opacity .7s .15s;
}
.car.open .room::before { opacity: 1; }
.room:focus-visible { outline: 2px solid var(--lamp); outline-offset: -5px; }
.persp { position: absolute; inset: 0; width: 100%; height: 100%; }
.persp path { fill: none; vector-effect: non-scaling-stroke; }
.p-edge { stroke: var(--ink); stroke-width: 1.1; }
.p-fine { stroke: var(--faint); stroke-width: .8; }

.r-wall {
  position: absolute;
  left: 15%;
  right: 15%;
  top: 12%;
  bottom: 18%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 2%;
  text-align: center;
}
.r-num {
  font: 400 52px/1 var(--display);
  font-size: clamp(34px, 14cqh, 96px);
  letter-spacing: .02em;
}
.r-title {
  margin-top: 6px;
  font: 400 26px/1.08 var(--display);
  font-size: clamp(21px, min(8.4cqw, 7.2cqh), 46px);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.r-tag {
  margin-top: 12px;
  max-width: 30em;
  font: 300 15px/1.38 var(--sans);
  font-size: clamp(14px, 4cqw, 18px);
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.m-phone .r-tag { font-size: 16px; }
.r-sign {
  position: absolute;
  right: 18%;
  top: 0;
  padding-top: 16px;
  padding-top: 4.4cqh;
}
.r-sign::before, .r-sign::after {
  content: "";
  position: absolute;
  top: 0;
  height: 16px;
  height: 4.4cqh;
  border-left: 1px solid var(--line);
}
.r-sign::before { left: 9px; }
.r-sign::after { right: 9px; }
.r-sign > span {
  display: block;
  padding: 4px 9px 3px;
  border: 1px solid var(--ink);
  background: var(--paper);
  font: 600 10.5px/1.1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.r-mat {
  position: absolute;
  left: 50%;
  bottom: 3.5%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px 8px;
  border: 1px solid var(--ink);
  background: var(--paper);
  font: 600 12px/1 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%) perspective(220px) rotateX(24deg);
  transform-origin: 50% 100%;
  transition: background .2s, color .2s;
}
.r-mat svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.room:hover .r-mat, .room:focus-visible .r-mat { background: var(--ink); color: var(--paper); }

/* Doors. */
.door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 3;
  cursor: pointer;
  background:
    repeating-linear-gradient(90deg, rgba(31, 28, 24, .05) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, #d9d2c5, #ece7dd 46%, #d2cbbd);
  transition: transform .42s cubic-bezier(.6, .04, .3, 1);
}
.door::after {
  content: "";
  position: absolute;
  inset: 12px 12px;
  border: 1px solid rgba(31, 28, 24, .16);
}
.door.l { left: 0; border-right: 1px solid var(--ink); }
.door.r { right: 0; border-left: 1px solid var(--ink); }
.car.open .door { transition-duration: .56s; cursor: default; }
.car.open .door.l { transform: translateX(-101%); }
.car.open .door.r { transform: translateX(101%); }

/* Stepping out through the doors. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--room-paper);
  opacity: 0;
  pointer-events: none;
  transition: opacity .42s .14s;
}
body.stepping::after { opacity: 1; }
body.stepping .car-body { transform: scale(2.5) !important; transition: transform .56s cubic-bezier(.5, 0, .8, .4); }

/* ---------- Panel ---------- */

.panel { font-family: var(--engrave); color: var(--brass-ink); }
.panel-tab { display: none; }
.panel-list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 2px 4px;
  overflow-y: auto;
  scrollbar-width: none;
}
.panel-list::-webkit-scrollbar { display: none; }
.row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 3px 2px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.face, .dbtn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fff4d2 0, #e3c17b 30%, #a98039 72%, #6d4e1e 100%);
  box-shadow: 0 0 0 2px #6d4e1e, 0 0 0 3.5px #ebd196, 0 2px 3px rgba(40, 25, 5, .45);
  color: var(--brass-ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
  transition: box-shadow .25s, transform .1s;
}
.face { width: 32px; height: 32px; font: 400 13px/1 var(--engrave); }
.row:active .face, .dbtn:active { transform: translateY(1px) scale(.97); }
.row.lit .face {
  box-shadow: 0 0 0 2px var(--lamp), 0 0 0 3.5px #fff0c8, 0 0 14px 4px var(--lamp-glow);
  color: #5a2f00;
}
.plate {
  min-width: 0;
  font: 400 12.5px/1.15 var(--engrave);
  letter-spacing: .02em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.row[aria-current] .plate { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.row:hover .plate { color: #000; }
.blank { display: flex; padding: 3px 2px; }
.blank .face { width: 32px; height: 32px; background: none; border: 1px dashed rgba(58, 42, 18, .55); box-shadow: none; }
.dbtn { width: 34px; height: 34px; padding: 0; border: 0; cursor: pointer; }
.dbtn svg { width: 20px; height: 20px; fill: var(--brass-ink); stroke: var(--brass-ink); stroke-width: 1.1; stroke-linejoin: round; }
.sound-btn { cursor: pointer; }
.sound-btn[aria-pressed="true"] .sound-state { color: #a65400; }

.m-desk .panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 16px 10px 10px;
  border-radius: 6px;
  border: 1.2px solid var(--brass-ink);
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, var(--brass-hi), var(--brass) 30%, var(--brass-mid) 70%, var(--brass-lo));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 6px rgba(60, 40, 10, .3), 0 1px 0 rgba(31, 28, 24, .25);
}
.m-desk .panel::before, .m-desk .panel::after {
  content: "";
  position: absolute;
  top: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff1c8, #9a7432 70%);
  box-shadow: inset 0 0 0 .5px #4a3414;
}
.m-desk .panel::before { left: 6px; }
.m-desk .panel::after { right: 6px; }
.m-desk .panel-list { flex: 1 1 auto; min-height: 0; }

/* Phones: the panel is a brass sheet that slides up from the bottom edge. */
.m-phone .panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  border-radius: 14px 14px 0 0;
  border-top: 1.2px solid var(--brass-ink);
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px),
    linear-gradient(170deg, var(--brass-hi), var(--brass) 26%, var(--brass-mid) 72%, var(--brass-lo));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 -6px 22px rgba(31, 28, 24, .2);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(calc(100% - var(--tabH) - env(safe-area-inset-bottom, 0px)));
  transition: transform .42s cubic-bezier(.3, .7, .2, 1);
}
.m-phone .panel.up { transform: translateY(0); }
.m-phone .panel.dragging { transition: none; }
.m-phone .panel-tab {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 var(--tabH);
  height: var(--tabH);
  padding-right: 12px;
}
.m-phone .panel-tab::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 7px;
  width: 42px;
  height: 4px;
  margin-left: -21px;
  border-radius: 2px;
  background: rgba(58, 42, 18, .45);
  pointer-events: none;
}
.tab-toggle {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 0 18px;
  border: 0;
  background: none;
  text-align: left;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  font: 400 18px/1 var(--engrave);
}
.tab-now { font: 600 13px/1 var(--mono); letter-spacing: .06em; }
.tab-sound, .tab-basket {
  flex: 0 0 auto;
  margin-left: 8px;
  padding: 8px 10px 6px;
  font: 600 11px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.tab-sound { border: 1px solid rgba(58, 42, 18, .5); border-radius: 999px; background: rgba(255, 255, 255, .14); }
.m-phone .panel-list {
  flex: 1 1 auto;
  min-height: 0;
  padding: 4px 18px 18px;
  overscroll-behavior: contain;
  border-top: 1px solid rgba(58, 42, 18, .3);
}
.m-phone .row { gap: 14px; padding: 6px 0; }
.m-phone .face, .m-phone .blank .face { width: 44px; height: 44px; font-size: 15px; }
.m-phone .plate { font-size: 17px; }
.m-phone .blank { padding: 6px 0; }

.shade {
  position: fixed;
  inset: 0;
  z-index: 7;
  background: rgba(31, 28, 24, .3);
  opacity: 0;
  transition: opacity .3s;
}
.shade.on { opacity: 1; }
.m-desk .shade { display: none; }

/* ---------- Title block and sheet border (wide screens) ---------- */

.tblock {
  position: fixed;
  top: var(--G);
  left: var(--G);
  z-index: 9;
  display: flex;
  background: var(--paper);
  border-right: 1.2px solid var(--ink);
  border-bottom: 1.2px solid var(--ink);
  font: 400 11px/1.2 var(--mono);
}
.m-phone .tblock { display: none; }
.tb-cell { display: block; padding: 8px 13px 7px; border: 0; background: none; text-align: left; font: inherit; white-space: nowrap; }
.tb-cell + .tb-cell { border-left: 1px solid var(--line); }
.tb-k { color: rgba(31, 28, 24, .62); text-transform: uppercase; letter-spacing: .14em; font-size: 10px; }
.tb-cell b { font-weight: 600; }
button.tb-cell:hover { background: var(--paper-2); }

.sheetframe { display: none; }
.m-desk .sheetframe { display: block; position: fixed; inset: 0; z-index: 8; pointer-events: none; }
.m-desk .sheetframe::before { content: ""; position: absolute; inset: 0; border: var(--G) solid var(--paper); }
.m-desk .sheetframe::after { content: ""; position: absolute; inset: calc(var(--G) - 1px); border: 1.2px solid var(--ink); }
.zone { position: absolute; display: flex; justify-content: space-around; font: 400 9.5px/1 var(--mono); color: rgba(31, 28, 24, .55); }
.zone.top, .zone.bot { left: var(--G); right: var(--G); height: var(--G); align-items: center; }
.zone.top { top: 0; }
.zone.bot { bottom: 0; }
.zone.lft, .zone.rgt { top: var(--G); bottom: var(--G); width: var(--G); flex-direction: column; align-items: center; }
.zone.lft { left: 0; }
.zone.rgt { right: 0; }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .door, .room::before, .m-phone .panel, .shade, .indicator, .face, .bubble, .r-mat { transition: none !important; }
  body.stepping .car-body { transform: none !important; }
  body::after { transition: none; }
}