/* The Walkthrough — drafting paper, ink, and daylight. */
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fonts/IBMPlexMono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("../assets/fonts/IBMPlexMono-500.woff2") format("woff2"); }
:root {
  color-scheme: light;
  --paper: #efe9dd; --sheet: #f6f0e6; --ink: #2a2725; --ink-soft: #6b655e; --rule: #cfc6b6; --red: #c8442e; --sun: #f2c260; --seen: #e6d9bd;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; --sans: Onest, system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--paper); scroll-behavior: smooth; }
html, body { overflow-x: clip; }   /* clip, not hidden: hidden would make body the scroll container and unpin the plan */
body { min-height: 100svh; color: var(--ink); font: 300 17px/1.6 var(--sans); background: var(--paper) radial-gradient(circle at 20% 0%, rgba(255,255,255,.5), transparent 50%); }
button, input { font: inherit; color: inherit; }
.k { font: 500 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.eyebrow { margin: 0 0 12px; font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.corner { position: fixed; z-index: 6; top: 12px; left: 12px; padding: 4px 8px; background: var(--paper); font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; }
.corner:hover, .corner:focus-visible { color: var(--ink); outline: none; }

/* ---------- the listing ---------- */
.listing { min-height: 92svh; display: grid; align-content: end; gap: 14px; width: min(100%, 1180px); margin: 0 auto; padding: 120px clamp(18px, 4vw, 48px) 60px; }
.listing h1 { font: 300 clamp(48px, 8vw, 118px)/.95 var(--sans); letter-spacing: -.035em; text-wrap: balance; }
.price { font: 400 clamp(20px, 2.2vw, 28px)/1.2 var(--sans); }
.facts { display: flex; flex-wrap: wrap; gap: 6px 0; list-style: none; padding: 0; margin: 4px 0 0; font: 500 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.facts li + li::before { content: "·"; margin: 0 10px; color: var(--rule); }
.lede { max-width: 620px; margin-top: 10px; font-size: clamp(16px, 1.3vw, 19px); color: #3b3632; text-wrap: pretty; }
.start { display: inline-flex; align-items: center; gap: 14px; width: max-content; margin-top: 24px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); color: var(--ink); text-decoration: none; font-weight: 400; }
.start span:last-child { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.start:hover span:last-child, .start:focus-visible span:last-child { transform: translateY(4px); }

/* ---------- the tour: rooms on the left, the plan pinned on the right ---------- */
.tour { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: clamp(20px, 3vw, 48px); width: min(100%, 1280px); margin: 0 auto; padding: 0 clamp(18px, 4vw, 48px); align-items: start; }
.plan { position: sticky; top: 18px; order: 2; padding: 18px 18px 16px; background: var(--sheet); border: 1px solid var(--rule); box-shadow: 0 20px 50px rgba(60,48,30,.12); }
#plan-svg { display: block; width: 100%; height: auto; font-family: var(--mono); }
#plan-svg .room { fill: transparent; stroke: var(--ink); stroke-width: .55; transition: fill .6s ease; }
#plan-svg .room.seen { fill: var(--seen); }
#plan-svg .room.lit { fill: #f7dfa0; }
#plan-svg .room.seen.lit { fill: #ecd28e; }
#plan-svg .room.current { fill: #dcc48f; }
#plan-svg .room.outside { stroke-dasharray: 1.2 .8; stroke-width: .4; }
#plan-svg .label { font-size: 1.55px; fill: var(--ink-soft); letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
#plan-svg .label.seen { fill: var(--ink); }
#plan-svg .win { stroke: var(--ink); stroke-width: 1.1; }
#plan-svg .win.lit { stroke: #d9a83c; }
#plan-svg .path { fill: none; stroke: var(--red); stroke-width: .5; stroke-dasharray: 1 .9; transition: stroke-dashoffset .8s ease; }
#plan-svg .here { fill: var(--red); stroke: var(--sheet); stroke-width: .5; transition: cx .8s cubic-bezier(.2,.8,.2,1), cy .8s cubic-bezier(.2,.8,.2,1); }
#plan-svg .halo { fill: none; stroke: var(--red); stroke-width: .35; opacity: .5; transition: cx .8s cubic-bezier(.2,.8,.2,1), cy .8s cubic-bezier(.2,.8,.2,1); animation: halo 2.4s ease-out infinite; }
@keyframes halo { from { r: 1; opacity: .6; } to { r: 3.2; opacity: 0; } }
#plan-svg .arc { fill: none; stroke: var(--rule); stroke-width: .35; stroke-dasharray: .6 .8; }
#plan-svg .sunmark { fill: var(--sun); stroke: #b98a25; stroke-width: .3; transition: cx .4s ease, cy .4s ease; }
#plan-svg .compass { font-size: 1.5px; fill: var(--ink-soft); }
.readout { display: grid; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
.where, .tally { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.where strong { font: 400 19px/1.2 var(--sans); }
.tally strong { font: 400 15px/1.3 var(--sans); }
.sun { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; margin-top: 4px; }
.sun output { font: 400 15px/1.2 var(--sans); text-align: right; }
.sun input { grid-column: 1 / -1; width: 100%; accent-color: var(--red); }
.lit { margin: 0; }

.walk { order: 1; display: grid; gap: clamp(28px, 4vw, 56px); padding-bottom: 60px; }
.room { display: grid; gap: 18px; min-height: 100svh; align-content: center; scroll-margin-top: 20px; }
.view { position: relative; aspect-ratio: 16 / 10; background: var(--sheet); border: 1px solid var(--rule); box-shadow: 0 16px 40px rgba(60,48,30,.10); }
.view canvas { display: block; width: 100%; height: 100%; }
.notes { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; align-items: baseline; }
.notes h2 { grid-column: 1; font: 400 clamp(28px, 3vw, 38px)/1.05 var(--sans); letter-spacing: -.02em; }
.notes .dims { grid-column: 2; grid-row: 1 / 3; align-self: start; text-align: right; }
.notes .dims b { display: block; font: 400 22px/1.1 var(--sans); color: var(--ink); }
.notes p.copy { grid-column: 1; max-width: 560px; margin-top: 4px; color: #3b3632; text-wrap: pretty; }
.notes ul { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 8px 0 0; }
.notes li { padding: 5px 10px; border: 1px solid var(--rule); border-radius: 999px; font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.notes li.sunlit { border-color: #d9a83c; color: #8a6414; background: #fbf0d2; }
.room .eyebrow { grid-column: 1 / -1; margin: 0; }
.cta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 18px; padding: 18px 20px; background: var(--sheet); border: 1px solid var(--rule); }
.cta p { margin: 0; color: #3b3632; }
.go { padding: 12px 20px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--sheet); font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.go:hover, .go:focus-visible { background: var(--red); border-color: var(--red); outline: none; }
.quiet { padding: 12px 6px; border: 0; background: none; color: var(--ink-soft); font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.colophon { width: min(100%, 1280px); margin: 0 auto; padding: 30px clamp(18px, 4vw, 48px) 60px; }
.colophon p { max-width: 720px; font: 400 12px/1.6 var(--mono); color: var(--ink-soft); }

/* ---------- the showing request ---------- */
.book { width: min(92vw, 520px); padding: 28px 28px 22px; border: 1px solid var(--rule); background: var(--sheet); color: var(--ink); box-shadow: 0 30px 80px rgba(40,30,20,.3); }
.book::backdrop { background: rgba(40,34,28,.5); }
.book h2 { margin: 0 0 18px; font: 300 30px/1.1 var(--sans); letter-spacing: -.02em; }
.chips { border: 0; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { padding: 0; margin-bottom: 8px; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; }
.chips span { display: inline-block; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 999px; font: 400 14px/1 var(--sans); cursor: pointer; }
.chips input:checked + span { background: var(--ink); color: var(--sheet); border-color: var(--ink); }
.chips input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.field { display: grid; gap: 6px; margin-bottom: 12px; }
.field input { padding: 10px 12px; border: 1px solid var(--rule); background: #fff; }
.field input:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.acts { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.note { margin-top: 14px; }
.done { font: 400 18px/1.4 var(--sans); }

@media (max-width: 860px) {
  .tour { grid-template-columns: 1fr; gap: 20px; }
  .plan { position: sticky; top: 0; z-index: 5; order: 1; display: grid; grid-template-columns: 140px 1fr; gap: 0 14px; padding: 10px 12px 10px; margin: 0 -18px; border-left: 0; border-right: 0; }
  #plan-svg { width: 140px; }
  #plan-svg .label { display: none; }
  .readout { margin-top: 0; padding-top: 0; border-top: 0; gap: 6px; align-content: center; }
  .where strong { font-size: 16px; }
  .tally strong { font-size: 13px; }
  .sun { margin-top: 0; }
  .lit { display: none; }
  .walk { order: 2; }
  .room { min-height: auto; padding-top: 10px; }
  .notes { grid-template-columns: 1fr; }
  .notes .dims { grid-column: 1; grid-row: auto; text-align: left; }
  .listing { min-height: 70svh; padding-top: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #plan-svg .room, #plan-svg .path, #plan-svg .here, #plan-svg .sunmark, .start span:last-child { transition: none; }
  #plan-svg .halo { animation: none; opacity: 0; }
}