/* The Keystone: scroll-through tour (built from The Sherri's; see explore-source/make_keystone_page.py). Fixed 3D stage behind a tall scroll track; one home opens over it;
   the rest of the home page (.ex-after) then slides up over the last shot. */
body.ex { background: #0A140F; color: var(--paper); }
.ex-stage { position: fixed; inset: 0; z-index: 0; background: linear-gradient(#0A140F 0%, #14261D 48%, #2C4A3B 76%, #14261D 100%); }
.ex-stage { overflow: hidden; }
.ex-stage canvas { position: absolute; display: block; z-index: 1; transition: none; }
.ex-stage canvas.ex-seq { z-index: 0; pointer-events: none; }
.ex-stage::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(rgba(6, 10, 16, .62) 0, rgba(6, 10, 16, 0) 26%); }
.ex-track { position: relative; z-index: 2; height: 800vh; pointer-events: none; }
.ex-after { position: relative; z-index: 4; background: var(--paper); color: var(--ink); }
body.ex-gone .ex-stage, body.ex-gone .ex-cap { visibility: hidden !important; }
.ex-cue a { color: inherit; text-underline-offset: 3px; }

/* the shared header stays see-through over the tour, then goes back to its usual solid bar */
body.ex:not(.ex-past) .site-header, body.ex:not(.ex-past) .site-header.is-solid { background: transparent; color: var(--paper); box-shadow: none; backdrop-filter: none; }
body.ex:not(.ex-past) .site-header.is-solid .hbtn { color: var(--paper); border-color: rgba(247, 242, 232, .55); }
body.ex:not(.ex-past) .site-header.is-solid .hbtn:hover { background: var(--paper); color: var(--ink); }
body.ex:not(.ex-past) .site-header.is-solid .hbtn--apply .arr { background: var(--paper); color: var(--ink); }
body.ex .site-footer { position: relative; z-index: 4; }

/* captions */
.ex-cap { position: fixed; z-index: 3; opacity: 0; visibility: hidden; will-change: opacity, transform; }
.ex-cap a { pointer-events: auto; }
.ex-cap--hero { top: clamp(84px, 11vh, 120px); left: 0; right: 0; text-align: center; padding: 0 var(--gutter); }
.ex-cap--left { left: var(--gutter); top: clamp(104px, 15vh, 150px); max-width: min(44vw, 620px); }
.ex-cap--right { right: var(--gutter); top: clamp(104px, 15vh, 150px); max-width: min(44vw, 620px); text-align: right; }
.ex-cap--end { top: clamp(96px, 14vh, 140px); left: 0; right: 0; text-align: center; padding: 0 var(--gutter); }
.ex-word { font: 400 clamp(48px, 7.2vw, 116px)/.95 var(--serif); margin: 0; letter-spacing: .005em; text-shadow: 0 6px 40px rgba(5, 9, 14, .6); }
.ex-accent { font: italic 400 clamp(20px, 2.3vw, 32px)/1.25 var(--period); margin: 10px 0 0; color: #E6D3AE; }
.ex-status { font: 500 13px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; margin: 14px 0 0; opacity: .86; }
.ex-cue { font: 500 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; margin: 22px 0 0; opacity: .66; }
.ex-eyebrow { font: 600 12.5px/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; margin: 0 0 12px; color: #E6D3AE; text-shadow: 0 1px 14px rgba(5, 9, 14, .9); }
.ex-h { font: 400 clamp(30px, 3.3vw, 52px)/1.08 var(--serif); margin: 0; text-shadow: 0 2px 26px rgba(5, 9, 14, .85); }
.ex-h--xl { font-size: clamp(42px, 5.6vw, 88px); }
.ex-sub { font: 500 clamp(15px, 1.15vw, 17px)/1.45 var(--sans); margin: 12px 0 0; color: #DDE1DF; text-shadow: 0 1px 14px rgba(5, 9, 14, .95); }
.ex-cap--floor { max-width: none; }
.ex-cap--floor .ex-h { font-size: clamp(26px, 2.5vw, 38px); white-space: nowrap; }
.ex-cap--left::before, .ex-cap--right::before { content: ""; position: absolute; z-index: -1; inset: -46px -70px; background: radial-gradient(closest-side, rgba(6, 10, 16, .62), rgba(6, 10, 16, 0)); pointer-events: none; }
.ex-cap--end::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -60px; width: min(980px, 100vw); height: calc(100% + 110px); transform: translateX(-50%); background: radial-gradient(closest-side, rgba(6, 10, 16, .78), rgba(6, 10, 16, 0)); pointer-events: none; }
.ex-illus { margin: 8px 0 0; font: 500 11.5px/1.4 var(--sans); color: #C7CDCB; text-shadow: 0 1px 8px rgba(5, 9, 14, .95); }
.ex-cap--bar { bottom: 14px; left: 0; right: 0; text-align: center; padding: 0 var(--gutter); }
.ex-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }

/* cursor card over the building */
.ex-tip { position: fixed; z-index: 6; left: 0; top: 0; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; background: rgba(11, 17, 25, .9); border: 1px solid rgba(203, 164, 103, .5); backdrop-filter: blur(8px); pointer-events: none; font: 500 13px/1.35 var(--sans); white-space: nowrap; }
.ex-tip[hidden] { display: none; }
.ex-tip b { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 6px; background: #CBA467; color: #141C26; font: 400 22px/1 var(--serif); }
.ex-tip strong { display: block; font-weight: 600; }

/* floors / homes list */
.ex-rail { position: fixed; z-index: 5; right: 12px; top: 50%; transform: translateY(-50%); width: 200px; display: grid; gap: 6px; max-height: calc(100vh - 210px); overflow-y: auto; }
.ex-rail[hidden] { display: none; }
.ex-rail button { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; text-align: left; width: 100%; padding: 9px; color: var(--paper); background: rgba(11, 17, 25, .74); border: 1px solid rgba(247, 242, 232, .22); backdrop-filter: blur(8px); cursor: pointer; font: 500 13px/1.3 var(--sans); transition: background var(--t-fast), border-color var(--t-fast); }
.ex-rail button:hover, .ex-rail button:focus-visible, .ex-rail button[aria-current="true"] { background: rgba(38, 50, 63, .95); border-color: #CBA467; }
.ex-rail .n { grid-row: span 2; font: 400 25px/1 var(--serif); min-width: 40px; }
body.ex .site-header .wrap { max-width: none; }
.ex-room-note a { color: inherit; }
.ex-rail .l { font-weight: 600; }
.ex-rail .m { color: #C7CDCB; font-size: 12.5px; }

/* one home, full screen */
.ex-home { position: fixed; inset: 0; z-index: 70; display: grid; grid-template-columns: minmax(0, 1fr) 372px; background: radial-gradient(ellipse at 38% 45%, #1D3A2D 0%, #10201A 62%, #0A140F 100%); opacity: 0; visibility: hidden; transition: opacity .45s var(--ease-out), visibility .45s; }
.ex-home.is-open { opacity: 1; visibility: visible; }
.ex-home-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.ex-doll-wrap { position: absolute; inset: 64px 12px 84px; display: grid; place-items: center; transition: transform .9s cubic-bezier(.6, 0, .25, 1), opacity .5s ease; cursor: ew-resize; touch-action: pan-y; }
.ex-doll-box { position: relative; width: 100%; max-height: 100%; aspect-ratio: 1.6; max-width: calc((100vh - 148px) * 1.6); }
.ex-doll { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ex-plan { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ex-spot { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 7px; background: rgba(11, 17, 25, .82); border: 1px solid rgba(203, 164, 103, .65); color: var(--paper); border-radius: 999px; font: 600 12px/1 var(--sans); cursor: pointer; white-space: nowrap; backdrop-filter: blur(4px); }
.ex-spot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #CBA467; box-shadow: 0 0 0 0 rgba(203, 164, 103, .7); animation: ex-pulse 2.2s infinite; }
.ex-spot:hover, .ex-spot:focus-visible { background: #CBA467; color: #141C26; }
.ex-spot:hover::before, .ex-spot:focus-visible::before { background: #141C26; }
@keyframes ex-pulse { 70% { box-shadow: 0 0 0 9px rgba(203, 164, 103, 0); } 100% { box-shadow: 0 0 0 0 rgba(203, 164, 103, 0); } }
.ex-hint { position: absolute; left: 0; right: 0; bottom: 62px; margin: 0; text-align: center; font: 500 12px var(--sans); letter-spacing: .08em; color: #AEB6B8; pointer-events: none; }

.ex-room { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; pointer-events: none; background: #0A140F; }
.ex-room.is-on { opacity: 1; pointer-events: auto; }
.ex-room img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ex-room.is-on img.is-photo { animation: ex-drift 16s ease-out both; }
.ex-room img.is-plan { object-fit: contain; padding: 56px 16px 72px; }
@keyframes ex-drift { from { transform: scale(1.05); } to { transform: scale(1); } }
.ex-room-note { position: absolute; right: 16px; top: 16px; margin: 0; max-width: 340px; padding: 6px 10px; text-align: right; font: 500 11.5px/1.35 var(--sans); color: #E8E6DF; background: rgba(11, 17, 25, .62); }

.ex-tabs { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; gap: 7px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); overflow-x: auto; scrollbar-width: none; background: linear-gradient(rgba(10, 16, 24, 0), rgba(10, 16, 24, .82)); }
.ex-tabs::-webkit-scrollbar { display: none; }
.ex-tabs button, .ex-tabs a { flex: none; min-height: 40px; padding: 0 15px; display: inline-flex; align-items: center; font: 600 13px var(--sans); color: var(--paper); background: rgba(11, 17, 25, .6); border: 1px solid rgba(247, 242, 232, .34); cursor: pointer; text-decoration: none; backdrop-filter: blur(6px); }
.ex-tabs button:hover, .ex-tabs a:hover { border-color: #CBA467; }
.ex-tabs button[aria-current="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.ex-x { position: absolute; left: 16px; top: 16px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 15px; background: rgba(11, 17, 25, .66); border: 1px solid rgba(247, 242, 232, .4); color: var(--paper); font: 600 13px var(--sans); cursor: pointer; backdrop-filter: blur(6px); }
.ex-x:hover { border-color: #CBA467; }

.ex-panel { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 12px; padding: 30px 28px 24px; background: #10201A; border-left: 1px solid rgba(247, 242, 232, .12); overflow-y: auto; }
.ex-panel .e { margin: 0; font: 600 12px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #CBA467; }
.ex-panel h2 { margin: 0; font: 400 50px/1 var(--serif); }
.ex-price { margin: 2px 0 0; font: 400 32px/1.1 var(--serif); }
.ex-price small { font: 500 13px var(--sans); color: #C7CDCB; }
.ex-fee { margin: 0; font: 500 12.5px/1.4 var(--sans); color: #AEB6B8; }
.ex-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 6px 0 0; border-top: 1px solid rgba(247, 242, 232, .16); border-bottom: 1px solid rgba(247, 242, 232, .16); }
.ex-facts div { padding: 11px 0; text-align: center; }
.ex-facts dd { margin: 0; font: 400 25px/1.1 var(--serif); }
.ex-facts dt { font: 500 11.5px var(--sans); color: #AEB6B8; }
.ex-avail { margin: 0; font: 600 13.5px/1.35 var(--sans); }
.ex-acc { margin: 0; font: 500 13px/1.4 var(--sans); color: #DCE3D8; }
.ex-btns { display: grid; gap: 8px; margin-top: 4px; }
.ex-btn { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; font: 600 14px var(--sans); text-decoration: none; border: 1px solid rgba(247, 242, 232, .4); color: var(--paper); }
.ex-btn:hover { border-color: #CBA467; color: #E6D3AE; }
.ex-btn--go { background: #CBA467; border-color: #CBA467; color: #141C26; }
.ex-btn--go:hover { background: #E6D3AE; border-color: #E6D3AE; color: #141C26; }
.ex-pn { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; }
.ex-pn button { background: none; border: 0; padding: 6px 0; color: #C7CDCB; font: 600 13px var(--sans); cursor: pointer; }
.ex-pn button:hover { color: #E6D3AE; }
.ex-note { margin: 0; font: 400 11.5px/1.4 var(--sans); color: #8F999C; }
body.ex-locked { overflow: hidden; }
body.ex .pills { z-index: 6; }

@media (max-width: 900px) {
  .ex-cap--left, .ex-cap--right, .ex-cap--floor { left: var(--gutter); right: var(--gutter); top: 88px; max-width: none; text-align: left; }
  .ex-rail { top: auto; bottom: calc(70px + env(safe-area-inset-bottom)); left: 0; right: 0; width: auto; transform: none; display: flex; overflow-x: auto; padding: 0 16px; max-height: none; scrollbar-width: none; }
  .ex-rail::-webkit-scrollbar { display: none; }
  .ex-rail button { flex: none; width: 200px; white-space: nowrap; }
  .ex-rail.is-floors { flex-direction: column; }
  .ex-rail.is-floors button { width: 100%; }
  .ex-tip { display: none; }
  .ex-home { grid-template-columns: 1fr; grid-template-rows: 52vh auto; overflow-y: auto; }
  .ex-home-stage { min-height: 300px; }
  .ex-doll-wrap { inset: 60px 4px 56px; }
  .ex-doll-box { max-width: 100%; }
  .ex-hint { display: none; }
  .ex-room img { object-fit: contain; }
  .ex-room img.is-plan { padding: 48px 8px 56px; }
  .ex-room-note { display: none; }
  .ex-tabs { padding-top: 6px; padding-bottom: 8px; }
  .ex-panel { border-left: 0; padding: 20px var(--gutter) 28px; overflow: visible; }
  .ex-panel h2 { font-size: 42px; }
  .ex-spot { width: 30px; height: 30px; padding: 0; gap: 0; font-size: 0; justify-content: center; background: none; border: 0; backdrop-filter: none; }   /* dots on a phone; the room names are in the tabs */
  .ex-spot::before { width: 11px; height: 11px; outline: 2px solid rgba(255, 254, 251, .9); }
  .ex-cap--bar { bottom: calc(72px + env(safe-area-inset-bottom)); }
  .ex-actions { gap: 10px; }
  .ex-actions .cta .t { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ex-spot::before, .ex-room.is-on img.is-photo { animation: none; }
  .ex-doll-wrap, .ex-home, .ex-room { transition: none; }
}

/* Bodoni needs a small optical size or its hairlines vanish */
.ex-word, .ex-h, .ex-accent, .ex-panel h2, .ex-price, .ex-facts dd, .ex-rail .n, .ex-tip b { font-variation-settings: "opsz" 12; }
.ex-accent { font-style: italic; }
/* captions stay on the sky, clear of the stone */
.ex-cap--cue { bottom: 26px; left: 0; right: 0; text-align: center; padding: 0 var(--gutter); }
.ex-cap--cue .ex-cue { margin: 0; opacity: .82; }
.ex-dot { display: none; }
@media (min-width: 901px) {
  .ex-cap--right { max-width: none; white-space: nowrap; top: clamp(84px, 10vh, 110px); }
  .ex-cap--end { top: clamp(76px, 10vh, 110px); }
  .ex-dot { display: inline; }
  .ex-br { display: none; }
}
@media (max-width: 900px) { .ex-cap--cue { bottom: calc(84px + env(safe-area-inset-bottom)); } }