/* Shared by every listing on daniellebaisehomes.com (the style stays the same from house to house; each
   house brings only its content, photos and tour.js). A normal page to read plus a tour you step into:
   a full-screen walk through the house played like stories. Photos, videos, the tour and Danielle's card are
   one tap away in the top bar (a Menu button and sheet on phones). */

/* Jump links land below the fixed bar */
section[id] { scroll-margin-top: 4.5rem; }
#top { scroll-margin-top: 0; }

/* Top bar */
.bar { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: max(.9rem, env(safe-area-inset-top)) clamp(1rem, 3vw, 2.25rem) .9rem; color: var(--sand); transition: background .3s, color .3s, box-shadow .3s; }
.bar a, .bar button { text-decoration: none; background: none; border: 0; cursor: pointer; font-size: .98rem; }
.bar-home { display: block; line-height: 0; }
.bar-home img { height: clamp(2.2rem, 3.3vw, 3.1rem); width: auto; }
.logo-dark, .solid .logo-light { display: none; }
.solid .logo-dark { display: block; }
.bar-links { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.6rem); }
.bar-links .n { font-size: .8rem; opacity: .7; }
.bar-tour { padding: .5rem 1rem !important; border-radius: 999px; background: var(--sand) !important; color: var(--navy); font-weight: 500; }
.bar-cta { padding: .5rem 1rem; border-radius: 999px; border: 1px solid currentColor !important; }
.solid .bar { background: color-mix(in srgb, var(--cream) 94%, transparent); color: var(--navy); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgb(21 53 88 / .08); }
.solid .bar-tour { background: var(--navy) !important; color: var(--cream); }
@media (max-width: 860px) { .bar-links { display: none; } }

/* Phone menu button (the desktop links collapse into it) */
.bar-menu { display: none; }
@media (max-width: 860px) {
  .bar-menu { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem !important; border-radius: 999px;
    border: 1px solid currentColor !important; font-weight: 500; }
  .bar-menu svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
}

/* Finer details for this house: regular-weight headlines, hairline rules, square-ish corners */
h1, h2, .lede, .t-title { font-weight: 400; letter-spacing: -.015em; }
.rule::after { width: 2.25rem; height: 2px; margin-top: 1.1rem; }

/* Buttons */
.play, .ghost { display: inline-flex; align-items: center; gap: .55rem; padding: .78rem 1.35rem; border-radius: 999px; font-weight: 500; font-size: .98rem; letter-spacing: .02em;
  cursor: pointer; text-decoration: none; border: 1px solid transparent; }
.play { background: var(--navy); color: var(--cream); }
.tri { width: .7em; height: .7em; fill: currentColor; flex: none; }
.bar-tour { display: inline-flex; align-items: center; gap: .45rem; }
.ghost { background: none; border-color: currentColor; color: inherit; }

/* Hero */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 34rem; overflow: hidden; background: var(--navy-deep); color: var(--sand); }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: settle 14s ease-out both; }
@keyframes settle { from { transform: scale(1.08); } }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgb(3 29 51 / .88), rgb(3 29 51 / .55) 42%, transparent 72%, rgb(3 29 51 / .35)); }
.hero-text { position: absolute; z-index: 1; left: clamp(1rem, 6vw, 5rem); right: clamp(1rem, 6vw, 5rem); bottom: clamp(2.5rem, 9vh, 5.5rem); }
.hero .caps { color: var(--sand); opacity: .85; }
.hero h1 { font-size: clamp(2.6rem, 8vw, 6.75rem); line-height: .98; margin: .6rem 0 1rem; max-width: 11ch; }
.facts { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 500; }
.note { margin-top: .5rem; font-size: .95rem; color: var(--sky); }
.hero .by { margin-top: 1rem; letter-spacing: .18em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }
.hero .play { background: var(--sand); color: var(--navy); }
@media (max-width: 860px) {
  .hero::after { background: linear-gradient(to top, rgb(3 29 51 / .92), rgb(3 29 51 / .6) 50%, rgb(3 29 51 / .05) 75%, rgb(3 29 51 / .3)); }
  .hero-text { bottom: max(2rem, env(safe-area-inset-bottom)); }
  .hero-actions > * { flex: 1 1 auto; justify-content: center; }
}

/* Intro and specs */
.intro { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; padding: clamp(5rem, 11vw, 8.5rem) clamp(1rem, 6vw, 5rem); }
.lede { font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1.2; font-weight: 500; }
.specs { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
.specs div { padding: .8rem 0; border-top: 1px solid rgb(21 53 88 / .15); }
.specs dt { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--red); }
.specs dd { margin: .15rem 0 0; font-size: 1.2rem; font-weight: 500; }
@media (max-width: 760px) { .intro { grid-template-columns: 1fr; } }

/* Start-anywhere tiles and the photo peek share a tile style */
.starts, .peek { padding: 0 clamp(1rem, 6vw, 5rem) clamp(5rem, 11vw, 8.5rem); }
.peek { padding-top: clamp(5rem, 11vw, 8.5rem); }
.starts h2, .peek h2, .words h2, .reel h2 { font-size: clamp(1.9rem, 4.2vw, 3.3rem); }
.starts ul, .peek ul { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.peek ul { grid-template-columns: repeat(5, 1fr); margin-bottom: 1.8rem; }
.starts button, .peek li button { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 2px; overflow: hidden; cursor: pointer;
  aspect-ratio: 4 / 3; background: var(--navy-deep); color: var(--sand); text-align: left; }
.starts img, .peek li img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.starts button::after, .peek li button::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgb(3 29 51 / .75), transparent 55%); }
.starts span, .peek li span { position: absolute; z-index: 1; left: .9rem; bottom: .75rem; font-weight: 500; font-size: clamp(1rem, 1.6vw, 1.25rem); }
.starts span::before { content: ''; display: inline-block; width: .6em; height: .7em; margin-right: .55rem; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.starts button:hover img, .peek li button:hover img { transform: scale(1.05); }
@media (max-width: 760px) {
  .starts ul, .peek ul { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 62vw; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * clamp(1rem, 6vw, 5rem)); padding-inline: clamp(1rem, 6vw, 5rem); scroll-padding: 0 clamp(1rem, 6vw, 5rem); scrollbar-width: none; }
  .peek ul { grid-auto-columns: 44vw; }
  .starts li, .peek li { scroll-snap-align: start; }
}

/* Rooms */
.room { padding: clamp(5rem, 11vw, 8.5rem) clamp(1rem, 6vw, 5rem) 0; }
.room.last { padding-bottom: clamp(5rem, 11vw, 8.5rem); }
.words { max-width: 40rem; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.words .caps { color: var(--red); margin-bottom: .7rem; }
.words p:last-child { margin-top: 1.1rem; font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.trio, .mosaic { display: grid; gap: .75rem; }
.trio { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); aspect-ratio: 2.2; }
.trio figure:first-child { grid-row: 1 / 3; }
.mosaic { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); aspect-ratio: 2.1; }
.mosaic .big { grid-row: 1 / 3; }
.mosaic.flip .big { grid-column: 3; grid-row: 1 / 3; }
.mosaic.flip figure:nth-child(2) { grid-column: 1; grid-row: 1; }
.mosaic.flip figure:nth-child(3) { grid-column: 2; grid-row: 1; }
.mosaic.flip figure:nth-child(4) { grid-column: 1 / 3; grid-row: 2; }
.trio figure, .mosaic figure { position: relative; margin: 0; overflow: hidden; border-radius: 2px; }
.trio img, .mosaic img, .swipe img, .hood img { width: 100%; height: 100%; object-fit: cover; }
.trio figcaption, .mosaic figcaption { position: absolute; left: .75rem; bottom: .65rem; padding: .3rem .6rem; border-radius: 4px; font-size: .85rem; font-weight: 500;
  background: var(--cream); color: var(--navy); }
@media (max-width: 760px) {
  .trio, .mosaic, .mosaic.flip { grid-template-columns: 1fr 1fr; grid-template-rows: none; aspect-ratio: auto; }
  .trio figure, .mosaic figure, .mosaic.flip figure:nth-child(n) { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
  .trio figure:first-child, .mosaic .big, .mosaic.flip .big { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 3 / 2; }
}
.more { margin-top: 1.5rem; }
.more .ghost { color: var(--navy); border-color: rgb(21 53 88 / .35); }
.more .ghost:hover { border-color: var(--navy); }
.swipe { list-style: none; margin: 0 calc(-1 * clamp(1rem, 6vw, 5rem)); padding: 0 clamp(1rem, 6vw, 5rem) .5rem; display: grid; grid-auto-flow: column;
  grid-auto-columns: min(78vw, 30rem); gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 clamp(1rem, 6vw, 5rem); scrollbar-width: thin; }
.swipe li { scroll-snap-align: start; aspect-ratio: 3 / 2; border-radius: 2px; overflow: hidden; }

/* Moser Farms */
.hood { display: grid; grid-template-columns: 1fr 1.1fr; background: var(--navy); color: var(--sand); }
.hood figure { margin: 0; min-height: 24rem; }
.hood > div { padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 5vw, 4rem); align-self: center; }
.hood h2 { font-size: clamp(1.9rem, 4.2vw, 3.3rem); }
.hood ol { list-style: none; padding: 0; margin: 2rem 0 0; }
.hood li { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; align-items: baseline; padding: .9rem 0; border-top: 1px solid rgb(239 237 229 / .2);
  font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 500; }
.hood li .caps { color: var(--sky); }
.schools { margin-top: 1.5rem; color: var(--sky); }
@media (max-width: 860px) { .hood { grid-template-columns: 1fr; } .hood figure { min-height: 0; aspect-ratio: 5 / 4; } }
@media (max-width: 480px) { .hood li { grid-template-columns: 1fr; gap: .15rem; } }

.watch { padding: 0 clamp(1rem, 6vw, 5rem); }
.watch h2 { font-size: clamp(1.9rem, 4.2vw, 3.3rem); }
.films { display: flex; flex-wrap: wrap; gap: clamp(1.25rem, 4vw, 3rem); margin-top: 2rem; }
.films figure { margin: 0; width: min(19rem, 100%); }
.films video { width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 2px; background: var(--navy-deep); }
.films figcaption { margin-top: .8rem; display: grid; gap: .15rem; }
.films strong { font-weight: 500; font-size: 1.15rem; }
.films span { font-size: .9rem; color: rgb(21 53 88 / .7); }
@media (max-width: 680px) {
  .films { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * clamp(1rem, 6vw, 5rem));
    padding-inline: clamp(1rem, 6vw, 5rem); scroll-padding: 0 clamp(1rem, 6vw, 5rem); scrollbar-width: none; }
  .films figure { flex: none; width: 72vw; scroll-snap-align: start; }
}

.tour-end h2 { font-size: clamp(2.6rem, 7vw, 5.25rem); }
.tour-end > p { margin: 1rem auto 0; max-width: 30rem; font-size: 1.15rem; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin: 2.2rem auto 0; max-width: 46rem; }
.actions a { text-decoration: none; font-weight: 500; padding: .78rem 1.35rem; border-radius: 999px; border: 1px solid rgb(239 237 229 / .5); color: var(--sand); }
.actions a:first-child { background: var(--sand); color: var(--navy); border-color: var(--sand); }

/* All facts and features: closed by default, near the end */
.all-facts { padding: 0 clamp(1.5rem, 7vw, 5rem) clamp(5rem, 11vw, 8.5rem); }
.all-facts details { border-top: 1px solid rgb(21 53 88 / .15); border-bottom: 1px solid rgb(21 53 88 / .15); }
.all-facts summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.4rem 0; cursor: pointer; list-style: none; }
.all-facts summary::-webkit-details-marker { display: none; }
.all-facts h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.plus { position: relative; flex: none; width: 1.1rem; height: 1.1rem; }
.plus::before, .plus::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; transition: transform .25s; }
.plus::after { transform: rotate(90deg); }
details[open] .plus::after { transform: rotate(0); }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr)); gap: 2.5rem clamp(2rem, 4vw, 4rem); padding: .75rem 0 2.75rem; }
.fgroup h3 { font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin-bottom: .4rem; }
.fgroup dl { margin: 0; }
.fgroup dl div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: .6rem .25rem .6rem 0; border-top: 1px solid rgb(21 53 88 / .1); font-size: .98rem; line-height: 1.45; }
.fgroup dt { color: rgb(21 53 88 / .7); }
.fgroup dd { margin: 0; }
@media (max-width: 560px) {
  .fgroup dl div { grid-template-columns: 1fr; gap: .1rem; padding: .7rem 0; }
  .fgroup dt { font-size: .85rem; }
}

/* Contact: Danielle's card */
.contact { display: grid; grid-template-columns: minmax(0, .85fr) 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center;
  padding: clamp(5rem, 11vw, 8.5rem) clamp(1rem, 6vw, 5rem); border-top: 1px solid rgb(21 53 88 / .12); }
.agent-photo { margin: 0; }
.agent-photo img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 30%; border-radius: 2px; }
.agent .caps { color: var(--red); }
.agent h2 { font-size: clamp(2.6rem, 6vw, 4.5rem); margin: .5rem 0 .5rem; }
.agent-team { color: rgb(21 53 88 / .75); }
.agent-ask { margin-top: 1.6rem; font-size: 1.2rem; max-width: 28rem; }
.contact .actions { justify-content: flex-start; margin: 1.6rem 0 0; }
.contact .actions a { color: var(--navy); border-color: rgb(21 53 88 / .35); }
.contact .actions a:first-child { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.agent-info { margin: 2rem 0 0; display: grid; gap: 0; max-width: 26rem; }
.agent-info div { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; align-items: baseline; padding: .7rem 0; border-top: 1px solid rgb(21 53 88 / .12); }
.agent-info dt { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: rgb(21 53 88 / .7); }
.agent-info dd { margin: 0; font-size: 1.1rem; }
.agent-info a { text-decoration: none; }
.agent-social { list-style: none; display: flex; gap: .4rem; margin: 1.2rem 0 0 -.45rem; padding: 0; }
.agent-social a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: var(--navy); }
.agent-social a:hover { background: rgb(21 53 88 / .08); }
.agent-social svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.agent-social .dot { fill: currentColor; stroke: none; }
.agent-logos { display: flex; align-items: center; gap: 1.5rem; margin-top: 2.2rem; }
.agent-logos img:first-child { width: min(13rem, 55vw); height: auto; }
.agent-logos img:last-child { width: 3.6rem; height: auto; }
.where { margin-top: 1.8rem; font-size: .95rem; color: rgb(21 53 88 / .7); }
@media (max-width: 760px) {
  .contact { grid-template-columns: 1fr; }
  .agent-photo { max-width: 24rem; }
}
.foot { padding: 2rem 1rem 3rem; text-align: center; font-size: .85rem; color: rgb(21 53 88 / .75); display: grid; gap: .5rem; }

/* Dialogs share a full-screen frame */
dialog { padding: 0; border: 0; max-width: none; max-height: none; }
dialog [tabindex='-1']:focus { outline: none; }
dialog::backdrop { background: rgb(3 29 51 / .55); }
body:has(dialog[open]) { overflow: hidden; }

/* Album */
.album { width: 100vw; height: 100dvh; margin: 0; background: var(--cream); color: var(--navy); overflow-y: auto; overscroll-behavior: contain; }
.album-head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center;
  padding: max(.9rem, env(safe-area-inset-top)) clamp(1rem, 4vw, 3rem) .4rem; background: var(--cream); }
.album-head h2 { font-size: 1.5rem; }
.album-close, .menu-close { background: none; border: 0; font-size: 2rem; line-height: 1; padding: .2rem .5rem; cursor: pointer; color: inherit; }
.album .chips { position: sticky; top: 3.4rem; z-index: 1; display: flex; gap: .5rem; overflow-x: auto; padding: .4rem clamp(1rem, 4vw, 3rem) .9rem; scrollbar-width: none;
  background: var(--cream); }
.chips button { flex: none; border: 1px solid rgb(21 53 88 / .3); background: none; border-radius: 999px; padding: .45rem .95rem; font-size: .95rem; cursor: pointer; }
.chips button[aria-pressed='true'] { background: var(--navy); border-color: var(--navy); color: var(--cream); }
.grid { list-style: none; margin: 0; padding: 0 clamp(1rem, 4vw, 3rem) 3rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 46%), 1fr)); gap: .5rem; }
.grid button { display: block; width: 100%; padding: 0; border: 0; background: var(--navy-deep); cursor: zoom-in; border-radius: 2px; overflow: hidden; aspect-ratio: 3 / 2; }
.grid img { width: 100%; height: 100%; object-fit: cover; }

/* Rooms menu: a side sheet on desktop, a bottom sheet on phones */
.menu { position: fixed; margin: 0 0 0 auto; inset: 0 0 0 auto; width: min(28rem, 100vw); height: 100dvh; background: var(--cream); color: var(--navy);
  overflow-y: auto; padding: 0 1.25rem 2rem; }
.menu-head { display: flex; justify-content: space-between; align-items: center; padding: max(1rem, env(safe-area-inset-top)) 0 .8rem; }
.menu-head .caps { color: var(--red); }
.menu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1.3rem; }
.menu-actions > * { justify-content: center; padding-inline: .5rem; }
.menu ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .9rem .6rem; }
.menu a { display: block; text-decoration: none; }
.menu img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; }
.menu span { display: block; margin-top: .35rem; font-weight: 500; font-size: .98rem; }
.menu .menu-home { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid rgb(21 53 88 / .15); font-weight: 500; }
@media (max-width: 860px) {
  .menu { inset: auto 0 0 0; width: 100vw; height: auto; max-height: 86dvh; margin: auto 0 0; border-radius: 1.2rem 1.2rem 0 0; padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); }
}

/* Photo viewer */
.lightbox { width: 100vw; height: 100dvh; margin: 0; background: var(--navy-deep); color: var(--sand); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox img { max-width: 94vw; max-height: 82dvh; object-fit: contain; }
.lightbox img:focus { outline: none; }
.lightbox button { position: absolute; background: none; border: 0; font-size: 2.6rem; line-height: 1; padding: 1rem; cursor: pointer; color: var(--sand); }
.lightbox .close { top: max(.25rem, env(safe-area-inset-top)); right: .25rem; }
.lightbox .prev { left: .1rem; top: 50%; transform: translateY(-50%); }
.lightbox .next { right: .1rem; top: 50%; transform: translateY(-50%); }
.lightbox .count { position: absolute; bottom: max(1.2rem, env(safe-area-inset-bottom)); left: 1rem; right: 1rem; text-align: center; color: var(--sky); }

/* Tour */
.tour { width: 100vw; height: 100dvh; margin: 0; background: var(--navy-deep); color: var(--sand); overflow: hidden; }
.tour-stage { position: absolute; inset: 0; overflow: hidden; }
.tl { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; opacity: 0; transition: opacity .7s ease; will-change: transform, opacity; }
.tl.overlay { transition: none; }
.tour-veil { position: absolute; inset: 0; background: linear-gradient(to top, rgb(3 29 51 / .82), transparent 48%), linear-gradient(to bottom, rgb(3 29 51 / .55), transparent 20%); }
.tour-top { position: absolute; z-index: 3; top: 0; left: 0; right: 0; padding: max(.7rem, env(safe-area-inset-top)) clamp(.75rem, 3vw, 2rem) 0; }
.segs { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.segs li { flex: 1; height: 3px; border-radius: 2px; background: rgb(239 237 229 / .3); overflow: hidden; }
.segs i { display: block; height: 100%; width: 0; background: var(--sand); }
.tour-tools { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; }
.tour-room { flex: 1; color: var(--sand); }
.tour-tools button { background: none; border: 0; color: var(--sand); font-size: 1.1rem; padding: .4rem .6rem; cursor: pointer; }
.tour-tools .t-close { font-size: 2rem; line-height: 1; }
.t-prev, .t-next { position: absolute; z-index: 2; top: 5rem; bottom: 0; background: none; border: 0; cursor: pointer; }
.t-prev { left: 0; width: 30%; cursor: w-resize; }
.t-next { right: 0; width: 70%; cursor: e-resize; }
.tour-cap { position: absolute; z-index: 2; left: clamp(1rem, 6vw, 5rem); right: clamp(1rem, 6vw, 5rem); bottom: max(2.5rem, calc(env(safe-area-inset-bottom) + 1.5rem));
  pointer-events: none; transition: opacity .35s, transform .35s; }
.tour-cap.swap { opacity: 0; transform: translateY(10px); }
.t-title { font-weight: 500; font-size: clamp(2rem, 5.4vw, 4.25rem); line-height: 1.04; max-width: 15ch; text-wrap: balance; }
.t-text { margin-top: .8rem; font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width: 34rem; }
.t-text:empty { display: none; }
.tour-end { position: absolute; z-index: 4; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.5rem;
  background: rgb(21 53 88 / .9); backdrop-filter: blur(6px); }
.tour.ended .tour-end { display: flex; }
.tour.ended .tour-cap, .tour.ended .t-prev, .tour.ended .t-next { display: none; }
.tour-again { margin-top: 2rem !important; color: var(--sky); }
.tour-again button { background: none; border: 0; color: var(--sand); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .hero > img { animation: none; }
  .tl, .tour-cap { transition: none; }
}