:root {
  /* drawing sheet: bond paper, drafting ink, non-photo-blue pencil */
  --paper: #eceeea;
  --ink: #17191b;
  --ink-2: #565b5f;
  --rule: rgba(23, 25, 27, .55);
  --accent: #2f6390;
  --scrim: rgba(14, 16, 20, .42);
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --gutter: clamp(16px, 2.4vw, 32px);
  --m: 18px; /* screen pixels per metre in the plan; set from JS */
}
* { box-sizing: border-box; }
html, body { background: var(--paper); color: var(--ink); }
body { margin: 0; font-family: var(--sans); -webkit-font-smoothing: antialiased; }
#track { height: 2400vh; }

#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; display: block; z-index: 0; }
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .32; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .42  0 0 0 0 .38  0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  transition: opacity 1.2s;
}
body.walking .grain { opacity: .14; }

/* header */
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: calc(var(--gutter) + 6px) calc(var(--gutter) + 10px);
  font-size: 13px; letter-spacing: .02em; pointer-events: none;
}
.top a, .top span { pointer-events: auto; color: inherit; text-decoration: none; }
.top .mark { font-weight: 700; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; }
.top .disc { font-family: var(--mono); font-size: 11px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .1em; }
.top .mail { font-family: var(--mono); font-size: 12px; border-bottom: 1px solid currentColor; }
body.walking .top { color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
body.walking .top .disc { color: rgba(255,255,255,.8); }

/* drawing sheet */
#sheet { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
#sheet .border { position: absolute; inset: var(--gutter); border: 1.5px solid var(--ink); }
#sheet .border::after { content: ""; position: absolute; inset: 5px; border: .5px solid var(--rule); }
.north { position: absolute; right: calc(var(--gutter) + 26px); top: calc(var(--gutter) + 58px); width: 54px; color: var(--ink); }
.north text { font: 600 10px var(--mono); fill: currentColor; }
.titleblock {
  position: absolute; right: var(--gutter); bottom: var(--gutter);
  width: min(380px, 46vw); border-top: 1.5px solid var(--ink); border-left: 1.5px solid var(--ink);
  background: var(--paper); font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
}
.tb-name { padding: 12px 14px; font: 700 15px var(--sans); letter-spacing: .16em; border-bottom: 1px solid var(--ink); }
.tb-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.tb-grid > div { padding: 7px 10px 9px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 3px; }
.tb-grid > div:nth-child(3n) { border-right: 0; }
.tb-grid label { color: var(--ink-2); font-size: 8.5px; }
.tb-grid span { font-weight: 500; }
.tb-grid .big span { font: 700 20px var(--sans); letter-spacing: .04em; }
.scalebar { position: relative; display: flex; height: 34px; padding: 8px 10px 0; }
.scalebar i { display: block; width: var(--m); height: 6px; border: 1px solid var(--ink); }
.scalebar i:nth-child(odd) { background: var(--ink); }
.scalebar i + i { border-left: 0; }
.scalebar span { position: absolute; top: 17px; font-size: 9px; }
.scalebar span:nth-of-type(1) { left: 10px; }
.scalebar span:nth-of-type(2) { left: calc(10px + var(--m) * 2.5 - 3px); }
.scalebar span:nth-of-type(3) { left: calc(10px + var(--m) * 5 - 6px); }

/* hero */
#hero {
  position: fixed; z-index: 5; left: calc(var(--gutter) + 18px); bottom: calc(var(--gutter) + 18px);
  max-width: 440px; padding: 18px 20px 20px; background: color-mix(in srgb, var(--paper) 88%, transparent);
  border: 1px solid var(--rule);
}
#hero h1 { margin: 0 0 12px; font: 600 clamp(28px, 3.4vw, 46px)/1.02 var(--sans); letter-spacing: -.015em; }
#hero h1 em { font-style: normal; color: var(--ink-2); font-weight: 400; }
#hero p { margin: 0 0 14px; font: 400 13px/1.55 var(--mono); color: var(--ink-2); max-width: 40ch; }
#enter { all: unset; cursor: pointer; font: 500 12px var(--mono); letter-spacing: .04em; border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
#enter:focus-visible, #index li:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

#hint { position: fixed; z-index: 5; left: 50%; top: calc(var(--gutter) + 56px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font: 500 10px var(--mono); letter-spacing: .3em; text-transform: uppercase; }
#hint i { width: 1px; height: 38px; background: linear-gradient(var(--ink), transparent); animation: drop 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes drop { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* room captions */
#caption {
  position: fixed; z-index: 6; left: calc(var(--gutter) + 10px); bottom: calc(var(--gutter) + 26px);
  max-width: 420px; color: #fff; visibility: hidden; opacity: 0;
  text-shadow: 0 1px 18px rgba(0,0,0,.45), 0 0 2px rgba(0,0,0,.25);
}
#caption::before { content: ""; position: absolute; z-index: -1; left: -30vw; bottom: -30vh; width: 80vw; height: 80vh; background: radial-gradient(closest-side, var(--scrim), transparent); pointer-events: none; }
#caption .no { font: 500 12px var(--mono); letter-spacing: .2em; display: block; margin-bottom: 6px; opacity: .85; }
#caption .name { margin: 0 0 8px; font: 600 clamp(34px, 5vw, 68px)/0.95 var(--sans); letter-spacing: -.02em; }
#caption .line { margin: 0; font: 400 14px/1.5 var(--mono); max-width: 38ch; }

/* room index */
nav { position: fixed; z-index: 6; right: calc(var(--gutter) + 10px); top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity .6s; pointer-events: none; }
body.walking nav { opacity: 1; pointer-events: auto; }
#index { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; text-align: right; }
#index li { cursor: pointer; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.62); text-shadow: 0 1px 10px rgba(0,0,0,.5); display: flex; justify-content: flex-end; gap: 10px; transition: color .3s; }
#index li .nm { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .5s ease; }
#index li:hover .nm, #index li.on .nm { max-width: 200px; }
#index li.on { color: #fff; }
#index li .no::after { content: ""; display: inline-block; width: 14px; height: 1px; background: currentColor; vertical-align: middle; margin-left: 8px; transition: width .4s; }
#index li.on .no::after { width: 30px; }

/* contact */
#contact {
  position: fixed; z-index: 7; left: calc(var(--gutter) + 10px); top: 50%; transform: translateY(-50%);
  max-width: 440px; padding: 28px 30px; background: var(--paper); color: var(--ink);
  visibility: hidden; opacity: 0; box-shadow: 0 30px 80px var(--scrim);
}
#contact h2 { margin: 0 0 10px; font: 600 clamp(32px, 4vw, 52px)/1 var(--sans); letter-spacing: -.02em; }
#contact p { margin: 0 0 22px; font: 400 13px/1.6 var(--mono); color: var(--ink-2); }
#contact .cta { display: inline-block; font: 600 18px var(--sans); color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 3px; margin-bottom: 22px; }
#contact address { font: normal 400 12px/1.6 var(--mono); color: var(--ink-2); }

#progress { position: fixed; z-index: 8; left: 0; right: 0; bottom: 0; height: 2px; }
#progress i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }

#loading { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: var(--paper); font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; transition: opacity .9s .1s, visibility 0s 1s; }
body.ready #loading { opacity: 0; visibility: hidden; }
body.failed #loading span::after { content: " — WebGL is unavailable in this browser."; }

@media (max-aspect-ratio: 17/20) { .north svg { transform: rotate(90deg); } }

@media (max-width: 760px) {
  .top .disc { display: none; }
  #hero { right: calc(var(--gutter) + 12px); max-width: none; top: calc(var(--gutter) + 52px); bottom: auto; }
  #hint { top: auto; bottom: calc(var(--gutter) + 150px); }
  #hero p { font-size: 12px; }
  .titleblock { width: auto; left: var(--gutter); }
  .tb-grid { display: none; }
  .tb-name { font-size: 12px; padding: 9px 12px; border-bottom: 0; }
  .scalebar { position: absolute; right: 8px; top: 2px; }
  #hero { padding: 14px 16px; }
  #hero h1 { font-size: 26px; margin-bottom: 8px; }
  #hero p { display: none; }
  .north { top: auto; bottom: calc(var(--gutter) + 120px); }
  nav { display: none; }
  #caption { right: var(--gutter); }
}