/* The page parts follow the site theme (mock 008, site/templates/base.css): ink, cream, sand, tan;
   Inter, Instrument Serif, Cormorant Garamond. The drawing under them keeps its own paper (D16). */
:root {
  --paper: #efebe2; /* the drawing's paper, under the canvas */
  --ink: #321C04;
  --ink-deep: #1F1003;
  --cream: #FFF9F2;
  --sand: #F6E4CF;
  --tan: #D9C4AA;
  --dim: rgba(50, 28, 4, 0.62);
  --rule: rgba(50, 28, 4, 0.16);
  --accent: var(--ink-deep);
  --display: "Instrument Serif", Georgia, serif;
  --hero: "Cormorant Garamond", Georgia, serif;
  --label: "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --halo: 0 0 10px rgba(255, 249, 242, 0.95), 0 0 2px rgba(255, 249, 242, 0.9);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: 32px;
  --file-slide: 0.7s; /* how long the file takes to slide in and out; file.js reads it for the picture's slide */
  --file-off: 104%; /* a closed file stands this far to the right of its own width: clear of the screen (file.js reads it in capture mode) */
  --rail-col: 184px; /* the rail's column at the right edge: the file panel stops short of it, so neither covers the other (KIYT-018) */
  --bar-h: 0px; /* the height of the top bar: layout.js measures it; the file and the folded rail stand below it (KIYT-047) */
  --rail-back: color-mix(in srgb, var(--paper) 92%, transparent); /* the backing of the rail labels: paper, so ink reads on any picture (KIYT-047) */
  --rail-ink: color-mix(in srgb, var(--ink) 80%, var(--paper)); /* a label that is not the current one: ink over that backing */
  --load-h: 3px; /* the loading bar's height along the top edge (load-bar.js) */
  --track: 8064lvh; /* U scroll units x 60lvh, rig.js (U 134.4); lvh, the large viewport, does not change when a phone's address bar shows or hides */
}
* { box-sizing: border-box; margin: 0; }
html, body { background: var(--paper); color: var(--ink); }
body { font: 15px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button { font: inherit; color: inherit; }
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
/* the frame page's picture (frame-main.js): the captured walk fills the view; the page slides it left beside an open file */
.walk { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
#track { height: var(--track); }
html.stepped, html.stepped body { overflow: hidden; } /* reduced motion: the scroll steps from hold to hold (walk.js), the page itself does not scroll */

#bar { position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; padding: 22px var(--gutter); pointer-events: none; }
#bar .brand { font: 600 18px/1 var(--body); letter-spacing: -0.02em; color: var(--ink); text-decoration: none; pointer-events: auto; text-shadow: var(--halo); }
#bar .brand span { font: 600 10px/1 var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-left: 6px; }
#bar .flag { font: 600 10px/1 var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }

#hero { position: fixed; z-index: 3; left: var(--gutter); top: 96px; width: min(32vw, 470px); pointer-events: none; }
#hero .kicker { font: 600 11px/1.4 var(--label); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 18px; }
#hero .kicker span { color: var(--accent); margin: 0 6px; }
#hero h1 { font: 700 clamp(52px, 6.2vw, 104px)/0.98 var(--hero); letter-spacing: -0.01em; margin-bottom: 26px; }
#hero h1 em { font: italic 400 1em/1 var(--display); color: var(--accent); }
#hero .lede { font: 400 15px/1.55 var(--body); color: var(--dim); max-width: 32ch; }
#hero .cue { margin-top: 30px; font: 600 10px/1 var(--label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
#hero .cue::after { content: ""; display: block; width: 1px; height: 40px; background: var(--dim); margin: 12px 0 0 3px; }

/* the end (D14): one line and the contact link, over the as-built view, where the hero sat */
#end { position: fixed; z-index: 6; left: var(--gutter); top: 96px; width: min(32vw, 470px); visibility: hidden; opacity: 0; pointer-events: none; }
#end .kicker { font: 600 11px/1.4 var(--label); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 18px; text-shadow: var(--halo); }
#end .kicker span { color: var(--accent); margin: 0 6px; }
#end .end__line { font: 400 clamp(30px, 3.2vw, 52px)/1.05 var(--display); margin-bottom: 26px; text-shadow: var(--halo); }
#end .end__link { pointer-events: auto; display: inline-block; font: 600 11px/1 var(--label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream);
  background: var(--ink-deep); padding: 14px 20px; text-decoration: none; }
#end .end__link:hover { background: var(--ink); }
.cap { position: fixed; z-index: 3; left: var(--gutter); bottom: 44px; max-width: 40ch; font: 400 15px/1.5 var(--body); color: var(--ink);
  background: rgba(255, 249, 242, 0.9); padding: 12px 16px; visibility: hidden; opacity: 0; }

/* room markers: a reticle on the room, a tag with leader lines beside it */
.spots { position: fixed; inset: 0; z-index: 15; pointer-events: none; overflow: hidden; }
.spot { position: absolute; left: 0; top: 0; width: 0; height: 0; visibility: hidden; color: var(--ink); }
.reticle { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; background: none; border: 0; padding: 0; cursor: pointer; pointer-events: auto; }
.reticle i { position: absolute; inset: 15px; border: 2px solid currentColor; border-radius: 50%; }
.reticle b { position: absolute; inset: 21px; background: currentColor; border-radius: 50%; }
.reticle::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid currentColor; opacity: 0.7; animation: ping 2.4s var(--ease) infinite; }
@keyframes ping { 0% { transform: scale(0.5); opacity: 0.9; } 100% { transform: scale(1.4); opacity: 0; } }
.tag { position: absolute; left: 0; top: 0; width: max-content; max-width: var(--room, none); padding: 18px 0 0 22px; pointer-events: auto; cursor: pointer; text-shadow: 0 0 14px rgba(255, 249, 242, 0.95), 0 0 3px rgba(255, 249, 242, 0.9); }
.tag__v { position: absolute; left: 0; top: 0; width: 1.5px; height: 30px; background: currentColor; transform: translate(-0.75px, 22px); }
.tag__h { position: absolute; left: 0; top: 52px; width: min(230px, var(--room, 230px)); height: 1.5px; background: currentColor; }
.tag__no { position: absolute; left: 22px; top: 60px; font: 600 10px/1 var(--label); letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); }
.tag__title { display: block; padding-top: 58px; font: 400 clamp(34px, 3.4vw, 56px)/0.95 var(--display); }
.tag__title > span { display: block; }
.tag__meta { display: block; margin-top: 12px; font: 600 10.5px/1.4 var(--label); letter-spacing: 0.2em; text-transform: uppercase; }
.tag__meta b { color: var(--accent); font-weight: 700; white-space: nowrap; }
.tag:hover .tag__meta b { text-decoration: underline; }
.reticle { filter: drop-shadow(0 0 3px rgba(255, 249, 242, 0.95)); }

.hint { position: fixed; z-index: 4; left: 50%; width: max-content; max-width: calc(100vw - 2 * var(--gutter)); text-align: center; bottom: 34px; transform: translateX(-50%); font: 600 10px/1 var(--label); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); text-shadow: var(--halo); opacity: 0; transition: opacity 0.4s; pointer-events: none; }

/* the file */
.file { position: fixed; z-index: 50; top: var(--bar-h); right: var(--rail-col); bottom: 0; width: min(480px, calc(100vw - var(--rail-col))); padding: 64px 44px 44px; overflow-y: auto; overscroll-behavior: contain;
  background: rgba(255, 249, 242, 0.985); color: var(--ink); box-shadow: -30px 0 80px rgba(0, 0, 0, 0.25);
  transform: translateX(calc(var(--file-off) + var(--rail-col))); transition: transform var(--file-slide) var(--ease); } /* closed: clear of the screen, past the rail column too */
.file.open { transform: none; }
.file__close { position: absolute; top: 24px; right: 32px; background: none; border: 0; cursor: pointer; font: 600 10px/1 var(--label); letter-spacing: 0.28em; text-transform: uppercase; }
.file__no { margin: 0 0 14px; font: 600 11px/1 var(--label); letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent); }
.file__title { font: 400 52px/0.95 var(--display); }
.file__time { margin: 16px 0 26px; padding-bottom: 22px; border-bottom: 1px solid var(--rule); font: 600 10.5px/1.4 var(--label); letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); }
.file__text { font: 400 21px/1.42 var(--display); margin: 0 0 30px; }
.file__h { margin: 26px 0 6px; font: 600 10.5px/1 var(--label); letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.file__list { list-style: none; padding: 0; margin: 0; }
.file__dims li { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid var(--rule); font: 400 13px/1.4 var(--body); }
.file__dims li span { color: var(--dim); }
.file__dims li b { font-weight: 500; text-align: right; }
.file__mats li { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.mat__part { font: 500 10px/1.4 var(--label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.mat__name { font: 400 26px/1.1 var(--display); margin-top: 4px; }
.mat__spec { font: 500 12px/1.4 var(--body); margin-top: 2px; }
.mat__why { font: 400 14px/1.55 var(--body); color: rgba(50, 28, 4, 0.85); margin-top: 8px; }
.mat__render { font: 400 11px/1.4 var(--label); letter-spacing: 0.04em; color: var(--dim); margin-top: 8px; }
.file__note { margin-top: 26px; font: 400 12px/1.5 var(--body); color: var(--dim); }

#rail { position: fixed; z-index: 55; right: var(--gutter); top: 50%; transform: translateY(-50%); list-style: none; padding: 6px 10px 6px 0; background: var(--rail-back); font: 600 10px/1 var(--label); text-transform: uppercase; letter-spacing: 0.14em; }
#rail { pointer-events: none; }
#rail li { color: var(--rail-ink); padding: 0; position: relative; text-align: right; }
#rail button { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 6px 0 6px 16px; }
#rail button:hover { color: var(--ink); }
#rail button:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
#rail li::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 1px; background: currentColor; }
#rail li.on { color: var(--ink); }
#cover { position: fixed; inset: 0; z-index: 60; background: var(--paper); opacity: 0; pointer-events: none; }
#rail li.on::before { background: var(--ink); width: 12px; left: -4px; }

/* the choice of home (choice.js): until a home is picked only the bar and the choice show, so no sheet part flashes.
   body[data-view] is set by choice.js: unset while the script loads, then "choice" or "home". */
body:not([data-view="home"]) > :not(#choice, #bar, script) { display: none; }
body:not([data-view="choice"]) #choice { display: none; }
#choice { min-height: 100vh; padding: 132px var(--gutter) 64px; max-width: 1080px; margin: 0 auto; }
.choice__title { font: 700 clamp(44px, 5.4vw, 88px)/0.98 var(--hero); letter-spacing: -0.01em; margin-bottom: 22px; }
.choice__lede { font: 400 15px/1.55 var(--body); color: var(--dim); max-width: 44ch; margin-bottom: 44px; }
.homes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.home__body { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 240px; padding: 28px; border: 1px solid var(--rule); background: var(--cream); color: var(--ink); text-decoration: none; }
.home__type, .home__status, .home__cue { font: 600 10.5px/1.4 var(--label); letter-spacing: 0.2em; text-transform: uppercase; }
.home__type { color: var(--accent); }
.home__name { font: 400 clamp(34px, 3.4vw, 52px)/0.98 var(--display); }
.home__place { font: 400 14px/1.5 var(--body); color: var(--dim); }
.home__status { margin-top: auto; color: var(--dim); }
.home__cue { color: var(--ink); }
a.home__body { cursor: pointer; transition: background 0.3s var(--ease), color 0.3s var(--ease); }
a.home__body:hover, a.home__body:focus-visible { background: var(--ink-deep); color: var(--cream); }
a.home__body:hover .home__type, a.home__body:focus-visible .home__type, a.home__body:hover .home__place, a.home__body:focus-visible .home__place,
a.home__body:hover .home__status, a.home__body:focus-visible .home__status, a.home__body:hover .home__cue, a.home__body:focus-visible .home__cue { color: var(--sand); }
a.home__body:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.home--soon .home__body { background: transparent; border-style: dashed; color: var(--dim); cursor: default; }
.home--soon .home__type, .home--soon .home__name { color: var(--dim); }
.choice__note { margin-top: 28px; min-height: 1.6em; font: 500 13px/1.5 var(--body); color: var(--ink); }

#loading { position: fixed; inset: 0; z-index: 90; background: var(--paper); display: grid; place-items: center; transition: opacity 0.6s ease, visibility 0.6s; }
#loading p { font: 600 11px/1 var(--label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
#loading.done { opacity: 0; visibility: hidden; }

@media (prefers-reduced-motion: reduce) { .reticle::after { animation: none; } .file { transition: none; } }

/* the mini map (KIYT-019): ink on paper, bottom left, clear of the rail, the file and the hint. The width
   below which it hides (600 px) is MAP.minViewport in js/minimap.js; it also hides while the page is compact (html.rail-folded, layout.js isCompact) */
:root { --map-w: 200px; }
#minimap { position: fixed; z-index: 4; left: var(--gutter); bottom: var(--gutter); width: var(--map-w); padding: 8px; pointer-events: none;
  background: var(--paper); border: 1px solid var(--rule); }
#minimap[hidden] { display: none; }
#minimap svg { display: block; width: 100%; height: auto; }
.minimap__walls { fill: var(--ink); }
.minimap__ahead, .minimap__walked { fill: none; stroke: var(--ink); stroke-width: 0.45; stroke-linejoin: round; stroke-linecap: round; }
.minimap__ahead { opacity: 0.22; }
.minimap__walked { stroke: var(--ink-deep); }
.minimap__view { fill: var(--ink); fill-opacity: 0.2; stroke: none; }
.minimap__eye { fill: var(--ink-deep); stroke: var(--paper); stroke-width: 0.4; }

/* the phone fit (KIYT-047). html.narrow is set by layout.js below the mini map's width (MAP.minViewport, js/minimap.js); html.rail-folded when that holds or the unfolded rail does not fit the free height (isCompact in js/layout.js). */
.card__open { display: none; }
.spot.docked { left: var(--gutter); right: var(--gutter); top: auto; bottom: var(--gutter); width: auto; height: auto; padding: 18px 20px 20px; background: var(--cream); box-shadow: 0 0 0 1px var(--rule); }
.spot.docked .reticle, .spot.docked .tag__v, .spot.docked .tag__h, .spot.docked .tag__meta b { display: none; }
.spot.docked .tag { position: static; width: auto; max-width: none; padding: 0; cursor: default; text-shadow: none; }
.spot.docked .tag__no { position: static; display: block; margin-bottom: 8px; }
.spot.docked .tag__title { padding-top: 0; }
.spot.docked .tag__title > span { display: inline; margin-right: 0.25em; }
.spot.docked .tag__meta { white-space: normal; }
.spot.docked .card__open { display: inline-block; pointer-events: auto; margin-top: 14px; min-height: 44px; padding: 14px 20px; border: 0; cursor: pointer; background: var(--ink-deep); color: var(--cream); font: 600 11px/1 var(--label); letter-spacing: 0.16em; text-transform: uppercase; }
.spot.docked .card__open:hover { background: var(--ink); }
/* a wide screen shows the mini map bottom left: the docked card stands to the right of it, short of the rail's column */
html:not(.narrow) .spot.docked { left: calc(var(--gutter) * 2 + var(--map-w) + 16px); right: auto; width: min(460px, calc(100vw - var(--gutter) * 3 - var(--map-w) - 16px - var(--rail-col))); }

#railToggle { display: none; }
html.rail-folded { --rail-col: 0px; }
html.rail-folded #railToggle { display: block; position: fixed; z-index: 55; right: var(--gutter); top: calc(var(--bar-h) + 8px); min-height: 44px; padding: 14px 16px; border: 1px solid var(--rule); background: var(--rail-back); color: var(--ink);
  font: 600 10px/1 var(--label); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
html.rail-folded #railToggle:focus-visible, html.rail-folded #rail button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
html.rail-folded #rail { top: calc(var(--bar-h) + 8px + 44px + 8px); bottom: var(--gutter); transform: none; overflow-y: auto; padding: 6px 10px 6px 0; }
html.rail-folded #rail:not(.open) { display: none; }
html.rail-folded #rail button { padding-block: 9px; }
html.rail-folded.file-open #railToggle, html.rail-folded.file-open #rail { display: none; } /* the file takes the whole view, its Close button included */
html.narrow .file { right: 0; width: 100vw; padding: 64px var(--gutter) 44px; }
html.narrow .file__close { right: var(--gutter); }

/* the loading bar (load-bar.js): the share of the walk held, along the top edge; it pulses while a frame is awaited */
#loadbar { position: fixed; left: 0; right: 0; top: 0; height: var(--load-h); z-index: 90; background: var(--rule); pointer-events: none; transition: opacity 0.4s var(--ease); }
#loadbar span { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); transition: transform 0.25s linear; }
#loadbar.waiting span { animation: loadpulse 0.9s ease-in-out infinite alternate; }
#loadbar.done { opacity: 0; }
@keyframes loadpulse { from { opacity: 1; } to { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { #loadbar.waiting span { animation: none; } }