/* 6002 John Moser Way. A normal page to read, plus a tour you step into: a full-screen walk through
   the house that plays like stories, a camera moving over the listing photos (up the walk and through
   the door, along the kitchen, down the slide, out the back doors, down onto the lot). Photos and
   rooms are one tap away from anywhere in the top bar (a Menu button on phones). */

/* 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(.7rem, env(safe-area-inset-top)) clamp(1rem, 3vw, 2rem) .7rem; 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 { font-weight: 500; font-size: 1.05rem !important; }
.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; }
}

/* Buttons */
.play, .ghost { display: inline-flex; align-items: center; gap: .6rem; padding: .9rem 1.5rem; border-radius: 999px; font-weight: 500; font-size: 1.05rem;
  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; object-position: 48% 50%; 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-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(4rem, 9vw, 7rem) 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(4rem, 9vw, 7rem); }
.peek { padding-top: clamp(4rem, 9vw, 7rem); }
.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: 6px; 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; }
}

/* The slide */
.slide { display: grid; grid-template-columns: 1.5fr 1fr; background: var(--navy); color: var(--sand); }
.slide figure { margin: 0; min-height: 26rem; }
.slide figure img { width: 100%; height: 100%; object-fit: cover; object-position: 65% 50%; }
.slide > div { padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 5vw, 4rem); align-self: center; }
.slide .caps { color: var(--sky); }
.slide h2 { font-size: clamp(2.4rem, 5vw, 4rem); margin: .6rem 0 1.2rem; }
.slide p:not(.caps) { font-size: 1.15rem; max-width: 28rem; margin-bottom: 1.8rem; }
.slide .play { background: var(--sand); color: var(--navy); }
@media (max-width: 860px) { .slide { grid-template-columns: 1fr; } .slide figure { min-height: 0; aspect-ratio: 4 / 3; } }

/* Rooms */
.room { padding: clamp(4rem, 9vw, 7rem) clamp(1rem, 6vw, 5rem) 0; }
#outside { padding-bottom: clamp(4rem, 9vw, 7rem); }
.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: 6px; }
.trio img, .mosaic img, .swipe img, .hood img { width: 100%; height: 100%; object-fit: cover; }
.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; }
}
.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: 6px; 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; } }

.reel { display: grid; grid-template-columns: auto 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; padding: clamp(4rem, 9vw, 7rem) clamp(1rem, 6vw, 5rem) 0; }
.reel video { width: min(19rem, 66vw); height: auto; aspect-ratio: 9 / 16; border-radius: 1.4rem; background: var(--navy-deep); box-shadow: 0 30px 60px -30px rgb(3 29 51 / .5); }
.reel p { margin-top: 1.1rem; font-size: 1.15rem; max-width: 26rem; }
@media (max-width: 680px) { .reel { grid-template-columns: 1fr; justify-items: center; text-align: center; } .reel .rule::after { margin-inline: auto; } }

.contact { background: var(--navy); color: var(--sand); text-align: center; padding: clamp(5rem, 11vw, 8rem) 1rem clamp(4rem, 8vw, 6rem); }
.contact h2, .tour-end h2 { font-size: clamp(2.6rem, 7vw, 5.25rem); }
.contact > p, .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: .9rem 1.4rem; 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); }
.who { margin-top: 3.5rem !important; color: var(--sky); }
.logos { display: flex; justify-content: center; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); margin-top: 1.3rem; }
.logos img:first-child { width: min(18rem, 58vw); height: auto; }
.logos img:last-child { width: clamp(4rem, 9vw, 5.5rem); height: auto; }
.where { margin-top: 2.3rem !important; font-size: .95rem !important; color: var(--sky); }
.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: 4px; 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: 5px; }
.menu span { display: block; margin-top: .35rem; font-weight: 500; font-size: .98rem; }
@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; }
}