/* Page styles for the tour, extracted from the original index.html <style> block. */
:root {
  --sc-canvas:     #0e1411;
  --sc-surface:    #16201b;
  --sc-ink:        #f4efe4;
  --sc-ink-soft:   #ddd6c6;
  --sc-accent:     #f0b25a;
  --sc-accent-ink: #1a1206;
  --sc-font-display: "Outfit", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --rail-w: 176px;
}
body { background: var(--sc-canvas); color: var(--sc-ink); }

/* ------------------------------------------------------------ chrome -- */
.top-scrim {
  position: fixed; inset: 0 0 auto 0; height: 150px; z-index: 50; pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--sc-canvas) 62%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 28%, transparent) 55%,
    transparent 100%);
}
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(14px, 2.4vh, 24px) var(--sc-gutter);
}
.mark { display: flex; align-items: baseline; gap: 10px; color: var(--sc-ink); text-decoration: none; }
.mark b { font-family: var(--sc-font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; }
.mark span { font-size: 0.8rem; color: var(--sc-ink-soft); letter-spacing: 0.02em; }

.btn {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  min-height: 44px; padding: 0 20px; border-radius: 999px;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font: 600 0.95rem/1 var(--sc-font-text); text-decoration: none; border: 0; cursor: pointer;
  box-shadow: 0 6px 18px -6px color-mix(in oklab, #000 60%, transparent), inset 0 1px 0 color-mix(in oklab, #fff 45%, transparent);
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .btn:hover { background: #f6c47a; } }
.btn:active { transform: scale(0.97); }
.btn:focus-visible, .rail button:focus-visible, .ghost:focus-visible, .links a:focus-visible, .mark:focus-visible {
  outline: 2px solid var(--sc-accent); outline-offset: 3px;
}
.btn svg { width: 16px; height: 16px; }

/* --------------------------------------------- the map: a house that builds itself */
.rail {
  position: fixed; z-index: var(--sc-z-chrome);
  right: var(--sc-gutter); top: 50%; translate: 0 -50%;
  width: var(--rail-w);
  display: grid; gap: 14px; justify-items: end;
  padding: 16px 12px 12px 18px; border-radius: 16px;
  background: color-mix(in oklab, var(--sc-canvas) 42%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.rail svg { width: 132px; height: auto; overflow: visible; filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.55)); }
.rail .ln { fill: none; stroke: var(--sc-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
            stroke-dasharray: 1; stroke-dashoffset: 1; }
.rail .ln--thin { stroke-width: 1; opacity: 0.8; }
.rail .ln--roof { stroke-width: 2.4; }
.rail .glow { fill: var(--sc-accent); opacity: 0; }
.rail .door { transform-box: fill-box; transform-origin: 0% 50%; }
.rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; justify-items: end; }
.rail button {
  display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 4px 0 10px;
  background: none; border: 0; cursor: pointer; border-radius: 6px;
  font: 500 0.88rem/1 var(--sc-font-text); color: var(--sc-ink-soft); letter-spacing: 0.01em;
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.7);
  transition: color 160ms var(--sc-ease-out);
}
.rail button::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  border: 1.5px solid currentColor; transition: background-color 160ms var(--sc-ease-out), transform 160ms var(--sc-ease-out);
}
.rail button[aria-current="true"] { color: var(--sc-ink); }
.rail button[aria-current="true"]::after { background: var(--sc-accent); border-color: var(--sc-accent); transform: scale(1.35); }
.rail button.passed::after { background: currentColor; }
@media (hover: hover) and (pointer: fine) { .rail button:hover { color: var(--sc-ink); } }

/* -------------------------------------------------------- hero planes -- */
.plane { position: fixed; inset: 0; pointer-events: none; will-change: transform, opacity; }
.plane img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plane--dust { z-index: 12; mix-blend-mode: screen; opacity: 0.55; }
.plane--fg   { z-index: 25; mix-blend-mode: multiply; transform-origin: 100% 0%; }
.plane--fg img { position: absolute; top: -3vw; right: -3vw; width: 57vw; height: auto; object-fit: initial; }

/* --------------------------------------------------------------- copy -- */
.scrim { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 0; }
.scrim--bl { background: radial-gradient(135% 105% at 0% 100%, color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 80%, transparent) 48%, color-mix(in oklab, var(--sc-canvas) 40%, transparent) 66%, transparent 84%); }
.scrim--tl { background: radial-gradient(130% 105% at 0% 0%, color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 82%, transparent) 46%, color-mix(in oklab, var(--sc-canvas) 40%, transparent) 64%, transparent 82%); }
.scrim--br { background: radial-gradient(110% 90% at 100% 100%, color-mix(in oklab, var(--sc-canvas) 84%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 50%, transparent) 40%, transparent 68%); }
.scrim--top { background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 90%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 48%, transparent 62%); }
.scrim--left { background: linear-gradient(to right, color-mix(in oklab, var(--sc-canvas) 86%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 60%, transparent) 36%, transparent 62%); }

.blk { position: absolute; z-index: 1; max-width: min(40rem, 46vw); display: grid; gap: var(--sc-4, 16px); }
.blk h1, .blk h2 { margin: 0; font-family: var(--sc-font-display); font-weight: 600; letter-spacing: -0.025em; line-height: 1.0; text-wrap: balance; }
.blk h1 { font-size: clamp(2.6rem, 1.6rem + 3.2vw, 4.6rem); }
#c-hero { max-width: min(36rem, 38vw); }
.blk h2 { font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.8rem); }
.blk p { margin: 0; font-size: clamp(1.02rem, 0.96rem + 0.28vw, 1.2rem); line-height: 1.6; color: var(--sc-ink-soft); max-width: 36ch; text-wrap: pretty; letter-spacing: 0.005em; }
.blk h1, .blk h2, .blk p, .towns { text-shadow: 0 1px 14px rgb(0 0 0 / 0.45); }

.at-bl { left: var(--sc-gutter); bottom: clamp(2.5rem, 11vh, 8rem); }
.at-tl { left: var(--sc-gutter); top: clamp(6rem, 17vh, 11rem); }
.at-br { right: calc(var(--sc-gutter) + var(--rail-w) + 2rem); bottom: clamp(2.5rem, 11vh, 8rem); text-align: right; justify-items: end; }
.at-top { left: 50%; translate: -50% 0; top: clamp(6rem, 15vh, 10rem); text-align: center; justify-items: center; max-width: min(46rem, 60vw); }
.at-top p { max-width: 40ch; }

.towns { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px;
         font: 500 1.02rem/1.3 var(--sc-font-display); color: var(--sc-ink); letter-spacing: 0.005em; max-width: 30rem; }
.towns li { display: flex; align-items: center; gap: 18px; }
.towns li + li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--sc-accent); margin-left: -11px; }

/* the close: a place card on the family table */
.finale { left: var(--sc-gutter); top: 50%; translate: 0 -50%; max-width: min(34rem, 44vw); gap: 22px; }
.card {
  display: grid; grid-template-columns: auto 1fr; gap: 16px 18px; align-items: center;
  padding: 20px 22px; border-radius: 14px;
  background: color-mix(in oklab, #f4efe4 94%, transparent); color: #1d1a14;
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.8), 0 2px 6px rgb(0 0 0 / 0.35), inset 0 1px 0 #fff;
  rotate: -1.2deg;
}
.card > img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; }
.card .who b { display: block; font: 600 1.3rem/1.1 var(--sc-font-display); letter-spacing: -0.01em; }
.card .who span { display: block; margin-top: 4px; font-size: 0.9rem; color: #4d4639; }
.card .row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.card .row a:not(.btn) { color: #2c261c; font-size: 0.95rem; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.card .brokerage {
  grid-column: 1 / -1; justify-self: start; display: block;
  margin-top: 2px; padding-top: 14px; width: 100%;
  border-top: 1px solid color-mix(in oklab, #1d1a14 14%, transparent);
  border-radius: 0;
}
.card .brokerage img { display: block; width: auto; height: 34px; border-radius: 0; object-fit: contain; }
.card .brokerage:focus-visible { outline: 2px solid #1d1a14; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .card .brokerage img { transition: opacity 160ms var(--sc-ease-out); } .card .brokerage:hover img { opacity: 0.8; } }
.links { display: flex; gap: 18px; font-size: 0.88rem; }
.links a { color: var(--sc-ink-soft); text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (hover: hover) and (pointer: fine) { .links a:hover, .card .row a:not(.btn):hover { color: var(--sc-ink); } .card .row a:not(.btn):hover { color: #000; } }
.fine { font-size: 0.78rem; color: color-mix(in oklab, var(--sc-ink-soft) 80%, transparent); margin: 0; }

/* ---------------------------------------------------------- booking -- */
dialog.book {
  border: 0; padding: 0; border-radius: 16px; width: min(420px, calc(100vw - 32px));
  background: var(--sc-surface); color: var(--sc-ink);
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.8), inset 0 1px 0 color-mix(in oklab, #fff 10%, transparent);
}
dialog.book::backdrop { background: color-mix(in oklab, var(--sc-canvas) 72%, transparent); backdrop-filter: blur(4px); }
dialog.book[open] { animation: pop 220ms var(--sc-ease-out); }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.97); } }
.book__in { padding: 26px; display: grid; gap: 18px; }
.book h2 { margin: 0; font: 600 1.6rem/1.1 var(--sc-font-display); letter-spacing: -0.02em; }
.book p { margin: 0; color: var(--sc-ink-soft); }
.book ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.opt {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 0 18px;
  border-radius: 12px; text-decoration: none; color: var(--sc-ink);
  background: color-mix(in oklab, var(--sc-ink) 6%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc-ink) 12%, transparent);
  transition: background-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.opt span { color: var(--sc-ink-soft); font-size: 0.9rem; }
.opt--main { background: var(--sc-accent); color: var(--sc-accent-ink); box-shadow: none; font-weight: 600; }
.opt--main span { color: color-mix(in oklab, var(--sc-accent-ink) 80%, transparent); }
@media (hover: hover) and (pointer: fine) { .opt:not(.opt--main):hover { background: color-mix(in oklab, var(--sc-ink) 11%, transparent); } }
.opt:active { transform: scale(0.985); }
.opt:focus-visible, .ghost:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.ghost { justify-self: start; background: none; border: 0; color: var(--sc-ink-soft); font: 500 0.92rem var(--sc-font-text); min-height: 44px; padding: 0 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.sc-world__seg picture { position: absolute; inset: 0; }
.sc-world__seg picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ----------------------------------------------------------- loader --
   Holds the page until every clip and image this device will use is in
   memory, so the first scroll scrubs instantly. The house draws with real
   download progress and its window lights when the tour is ready. */
.loader { display: none; }
.js .loader {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: var(--sc-canvas); color: var(--sc-ink);
  transition: opacity 700ms var(--sc-ease-out), visibility 0s linear 700ms;
}
.loader.is-out { opacity: 0; visibility: hidden; pointer-events: none; }
.is-loading, .is-loading body { overflow: hidden; }
.loader__in { display: grid; justify-items: center; gap: 20px; transition: transform 700ms var(--sc-ease-out); }
.loader.is-out .loader__in { transform: translateY(-10px) scale(0.98); }
.loader svg { width: 128px; height: auto; overflow: visible; }
.loader .ln { fill: none; stroke: var(--sc-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.loader .ln--roof { stroke-width: 2.4; }
.loader .ln--thin { stroke-width: 1; opacity: 0.8; }
.loader__glow { fill: var(--sc-accent); opacity: 0; transition: opacity 320ms var(--sc-ease-out); }
.loader.is-done .loader__glow { opacity: 0.95; }
.loader__name { margin: 4px 0 0; font: 600 1.35rem/1 var(--sc-font-display); letter-spacing: -0.01em; }
.loader__sub { margin: -10px 0 0; font-size: 0.82rem; color: var(--sc-ink-soft); letter-spacing: 0.02em; }
.loader__meta { display: flex; align-items: center; gap: 12px; }
.loader__track { width: 160px; height: 2px; border-radius: 2px; overflow: hidden; background: color-mix(in oklab, var(--sc-ink) 14%, transparent); }
.loader__track i { display: block; height: 100%; background: var(--sc-accent); transform-origin: 0 50%; transform: scaleX(0); transition: transform 240ms var(--sc-ease-out); }
.loader__pct { min-width: 3.2ch; font: 500 0.82rem/1 var(--sc-font-text); font-variant-numeric: tabular-nums; color: var(--sc-ink-soft); text-align: right; }
.loader__skip { visibility: hidden; opacity: 0; transition: opacity 240ms var(--sc-ease-out); }
.loader.can-skip .loader__skip { visibility: visible; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .js .loader, .loader__in, .loader__track i { transition-duration: 1ms; }
}

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------ phone -- */
@media (max-width: 860px) {
  :root { --rail-w: auto; }
  .mark span { display: none; }
  .btn { padding: 0 16px; }
  .rail {
    top: auto; bottom: max(12px, env(safe-area-inset-bottom)); translate: none;
    left: 12px; right: 12px; width: auto;
    grid-template-columns: auto 1fr; align-items: center; gap: 8px;
    padding: 4px 8px; border-radius: 14px;
    background: color-mix(in oklab, var(--sc-canvas) 70%, transparent);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  .rail svg { width: 44px; filter: none; }
  .rail ol { display: flex; justify-content: space-between; gap: 0; }
  .rail button { min-height: 44px; padding: 0 6px; font-size: 0.8rem; flex-direction: column-reverse; gap: 4px; justify-content: center; }
  .blk, .at-top, .finale, #c-hero { left: var(--sc-gutter); right: var(--sc-gutter); max-width: none; translate: none; text-align: left; justify-items: start; }
  .at-bl, .at-br, .at-tl, .at-top { top: auto; bottom: calc(92px + env(safe-area-inset-bottom)); }
  .finale { top: auto; bottom: calc(88px + env(safe-area-inset-bottom)); gap: 16px; }
  .blk h1 { font-size: clamp(2.2rem, 1.4rem + 4vw, 2.9rem); }
  .blk h2 { font-size: clamp(1.85rem, 1.2rem + 3.6vw, 2.5rem); }
  .blk p { font-size: 1rem; }
  .scrim--bl, .scrim--tl, .scrim--br, .scrim--top, .scrim--left {
    background: linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 95%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 88%, transparent) 34%,
      color-mix(in oklab, var(--sc-canvas) 50%, transparent) 54%,
      transparent 72%);
  }
  .plane--fg img { width: 118vw; right: -30vw; }
  .card { padding: 16px; rotate: -0.8deg; }
  .card > img { width: 60px; height: 60px; }
  .card .brokerage img { height: 28px; }
  .towns { font-size: 0.95rem; }
}
@media (max-width: 380px) {
  .rail button { font-size: 0.74rem; padding: 0 3px; }
  .blk h1 { font-size: 2.05rem; }
}

/* ===================================================== WordPress additions == */

/* Logged-in admin bar sits on top of the fixed chrome; push the chrome below it. */
.admin-bar .bar, .admin-bar .top-scrim, .admin-bar [data-sc-progress] { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .bar, .admin-bar .top-scrim, .admin-bar [data-sc-progress] { top: 46px; }
}

/* ------------------------------------------------------- performance --
   Everything here sits on top of a video that changes every frame, so any
   effect that samples what is underneath is recomputed every frame too. */

/* A backdrop blur over moving video re-blurs the frame on every seek. A
   slightly denser tint reads the same at this size and costs nothing. */
.rail { backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in oklab, var(--sc-canvas) 62%, transparent); }
@media (max-width: 860px) {
  .rail { background: color-mix(in oklab, var(--sc-canvas) 84%, transparent); }
}

/* Grain: one static screen-sized layer instead of a 4x-area one. */
.sc-grain { transform: translateZ(0); contain: strict; }
.sc-grain::before { inset: 0; }

/* Scrims fade with their copy; give them their own layer so an opacity
   change is a composite, not a full-screen gradient repaint. */
.scrim { will-change: opacity; contain: strict; }
.blk { contain: layout style; }

/* ------------------------------------------- header link to the blog -- */
.bar__end { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); }
.bar__link {
  color: var(--sc-ink); text-decoration: none; font: 500 0.95rem/1 var(--sc-font-text);
  text-shadow: 0 1px 10px rgb(0 0 0 / 0.6); padding: 12px 2px;
  text-underline-offset: 5px; text-decoration-thickness: 1px;
}
@media (hover: hover) and (pointer: fine) { .bar__link:hover { text-decoration: underline; text-decoration-color: var(--sc-accent); } }
.bar__link:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

/* small legal / guide links under the closing card */
.fine--links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: -10px; }
.fine--links a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (hover: hover) and (pointer: fine) { .fine--links a:hover { color: var(--sc-ink); } }