/* The 360 tour page's own passages, in page order. Served on virtual-tour only, after styles.css. */

/* ---------- the tour itself (data-section="the-tour") ----------
   The platform's own video piece, edge to edge with no frame and no words on it: the whole screen under the header from
   900px (the header is --hh tall), and on a phone the screen less the header and the ask bar but never under 70% of it,
   because the tour's own controls need the room. An unlayered rule outranks the platform's 16:9 frame. */
.vt-open{background:var(--pine)}
.vt-frame{--vt-strip:76px;padding-bottom:var(--vt-strip)}
.vt-frame .lv-video{aspect-ratio:auto;width:100%;height:calc(max(70svh, calc(100svh - var(--hh) - var(--bar))) - var(--vt-strip))}
@media (min-width:900px){
  .vt-frame .lv-video{height:calc(max(560px, calc(100svh - var(--hh))) - var(--vt-strip))}
}

/* The way past the tour (Michael, 31 Oct 2026: "on a phone you're not able to scroll down the page because it takes up the full
   viewport"). A tour frame swallows every touch, so a finger on it can never scroll the page. Two ways past, both without a
   script: a real down-arrow link to the words below (every screen, 56px, in a strip under the tour so no control of the tour is covered), and on a touch screen a cover
   over the tour ("Tap to explore the tour") that lets a swipe scroll the page; a tap on it ticks the hidden box that
   removes it, and from then on the tour takes the touch. The box sits first so the cover can follow it with ~. */
.vt-frame{position:relative}
/* The arrow's jump lands the heading below the sticky header, never under it. */
#look-around{scroll-margin-top:calc(var(--hh) + 24px)}
.vt-on{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.vt-cover{display:none}
.vt-down{position:absolute;z-index:3;left:50%;bottom:10px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--birch);color:var(--pine);box-shadow:0 2px 14px rgba(30,58,44,.4);text-decoration:none;animation:vt-nudge 2.4s ease-in-out infinite}
.vt-down:hover{background:var(--white)}
.vt-down:focus-visible{outline:3px solid var(--ember);outline-offset:3px}
@keyframes vt-nudge{0%,70%,100%{transform:translateX(-50%)}85%{transform:translateX(-50%) translateY(5px)}}
@media (prefers-reduced-motion:reduce){.vt-down{animation:none}}
@media (hover:none) and (pointer:coarse){
  .vt-cover{display:flex;position:absolute;inset:0 0 var(--vt-strip) 0;z-index:2;align-items:flex-start;justify-content:center;padding-top:24px;cursor:pointer;background:linear-gradient(to bottom, rgba(30,58,44,.55), rgba(30,58,44,.05) 40%, rgba(30,58,44,0) 70%);-webkit-tap-highlight-color:transparent}
  .vt-cover span{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;background:var(--birch);color:var(--pine);font:600 16px/1 var(--body)}
  .vt-on:checked ~ .vt-cover{display:none}
}

/* ---------- look around (data-section="look-around") ----------
   The words, then the 3 stops the tour walks through, each a photograph that goes to its place on the lodge page: the
   great room large, the deck and the primary suite smaller and set lower, so they are never 3 matching cards. */
.vt-around{padding-block:clamp(48px, 7vw, 120px) clamp(64px, 9vw, 150px)}
.vt-head h1{font-size:clamp(38px, 10vw, 46px);line-height:1.04;letter-spacing:-.015em;max-width:12em}
.vt-head .lede{margin-top:14px;max-width:28em}
.vt-stops{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.vt-stop{display:block;text-decoration:none}
.vt-stop figcaption{margin-top:8px}
.vt-room{grid-column:1 / -1}
.vt-room .photo{aspect-ratio:4/3}
.vt-deck .photo,.vt-suite .photo{aspect-ratio:1/1}
.vt-stop:hover figcaption{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
@media (min-width:900px){
  .vt-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:end}
  .vt-head h1{grid-column:1 / 7;font-size:clamp(52px, 22px + 3.2vw, 96px);line-height:1;max-width:none}
  .vt-head .lede{grid-column:8 / 13;margin-top:0;justify-self:end}
  .vt-stops{grid-template-columns:repeat(12,1fr);column-gap:var(--gap);margin-top:clamp(32px, 3.4vw, 56px);align-items:start}
  .vt-stops{row-gap:clamp(20px, 2vw, 32px)}
  .vt-room{grid-column:1 / 9;grid-row:1 / 3}
  .vt-room .photo{aspect-ratio:4/3}
  .vt-deck{grid-column:9 / 13;grid-row:1}
  .vt-deck .photo{aspect-ratio:4/3}
  .vt-suite{grid-column:9 / 13;grid-row:2}
  .vt-suite .photo{aspect-ratio:4/3}
}