/* ═══════════ THE CANOPY ═══════════
   Palette note: the Meridian this was cloned from is a Manhattan tower —
   blue-black ink, champagne gold. A rainforest house is neither. The inks
   here lean green (forest floor at dusk), the accent is aged brass rather
   than champagne, and a second accent — leaf — exists only for small marks:
   dots, indices, selection. Two accents at full strength would be noise. */
:root {
  /* Champagne gold, as asked — the Meridian accent. The inks are warm
     near-black rather than that site's blue-black: the photography here is
     green, and a blue ground under green foliage turns the shadows teal. */
  --ink: #0b0b0c;
  --ink-soft: #101011;
  --ink-panel: #16161a;
  --gold: #cfae7a;
  --gold-soft: rgba(207, 174, 122, 0.35);
  --gold-faint: rgba(207, 174, 122, 0.12);
  /* second accent kept as a STRUCTURE (small marks only — dots, indices,
     selection) but re-pointed from green to light champagne, so the whole
     site reads gold without collapsing to one flat tone */
  --leaf: #e6cfa3;
  --leaf-soft: rgba(230, 207, 163, 0.35);
  --cream: #ece5d8;
  --grey: #8f8a80;
  /* Back to the Meridian pairing. Bodoni Moda was tried here and pulled:
     a didone's hairlines are its whole character, and at the hero's
     clamp(3.2rem, 8.5vw, 7.5rem) those strokes thin out to almost nothing
     over a photograph — the headline read as spindly rather than as
     luxurious. Cormorant Garamond keeps weight in the thin strokes at
     display size, which is why the first build used it. */
  --serif: 'Cormorant Garamond', 'Didot', Georgia, serif;
  --sans: 'Inter', 'Helvetica Neue', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* The custom scroller in main.js drives this; leaving the native keyword on
   would double-smooth every programmatic scrollTo it makes. It is restored
   from JS if the scroller declines to run (touch, reduced motion). */
html { scroll-behavior: auto; }
body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--leaf); color: var(--ink); }

/* ═══ ATMOSPHERE ═══
   Two fixed, non-interactive layers under everything else's z-index:

   · .grain — one SVG turbulence tile at 3% opacity. Every film-led site we
     ship carries this; without it flat #090d0b panels read as dead vector
     fill next to the tour footage.

   · body::after — the dappled light. Three huge soft radial spots drifting
     on a 46s loop, the light-through-leaves the whole property is named
     for. Deliberately at the threshold of perception: it must never read
     as an "effect", only as air. Static under reduced-motion — the spots
     stay, the drift stops. */
.grain {
  position: fixed; inset: -50%; z-index: 96; pointer-events: none;
  width: 200%; height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity: .03;
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(38% 30% at 18% 22%, rgba(207,174,122,0.055), transparent 70%),
    radial-gradient(30% 26% at 78% 12%, rgba(236,229,216,0.035), transparent 70%),
    radial-gradient(34% 30% at 62% 78%, rgba(207,174,122,0.045), transparent 70%);
  animation: dapple 46s ease-in-out infinite alternate;
}
@keyframes dapple {
  to { transform: translate3d(4%, -3%, 0) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
}

/* ═══ NAV ═══ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 97;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.6rem 3rem;
  transition: background .5s, backdrop-filter .5s, padding .5s;
}
.nav.scrolled {
  background: rgba(11, 11, 12, 0.76);
  backdrop-filter: blur(14px);
  padding: 1rem 3rem;
  border-bottom: 1px solid rgba(194,160,106,0.08);
}
.nav-logo {
  font-family: var(--serif); font-weight: 400; letter-spacing: .45em;
  font-size: .95rem; color: var(--cream);
}
.nav-right { display: flex; align-items: center; gap: 2rem; }
.nav-price { font-size: .78rem; letter-spacing: .2em; color: var(--gold); }
.nav-cta {
  font-size: .7rem; letter-spacing: .25em; text-transform: uppercase;
  color: var(--cream); text-decoration: none;
  border: 1px solid var(--gold-soft); padding: .7rem 1.5rem;
  transition: background .4s, color .4s;
}
.nav-cta:hover { background: var(--gold); color: var(--ink); }

/* ═══ TOUR RAIL ═══ */
.tour-rail {
  position: fixed; right: 2.6rem; top: 50%; transform: translateY(-50%);
  z-index: 80; display: flex; gap: 1.1rem; align-items: stretch;
  opacity: 0; pointer-events: none; transition: opacity .6s;
}
.tour-rail.active { opacity: 1; }
.rail-line {
  width: 1px; background: rgba(234,230,217,0.14); position: relative;
}
.rail-fill {
  position: absolute; top: 0; left: 0; width: 100%; height: 0%;
  background: var(--gold); transition: height .15s linear;
}
.rail-stops { list-style: none; display: flex; flex-direction: column; justify-content: space-between; padding: .2rem 0; }
.rail-stop { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; }
.stop-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(234,230,217,0.25); transition: background .4s, box-shadow .4s;
}
.stop-label {
  font-family: var(--serif); font-style: italic; font-size: .92rem;
  color: rgba(234,230,217,0.35); letter-spacing: .06em;
  transition: color .4s, letter-spacing .4s;
}
.rail-stop.current .stop-dot { background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.rail-stop.current .stop-label { color: var(--gold); letter-spacing: .1em; }
.rail-stop.passed .stop-dot { background: var(--gold-soft); }
.rail-stop.passed .stop-label { color: rgba(234,230,217,0.55); }

/* ═══ HERO ═══ */
.hero { position: relative; height: 100vh; overflow: hidden; display: flex; align-items: flex-end; }
.hero-media { position: absolute; inset: 0; }
.hero-img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.08);
  animation: heroDrift 18s ease-out forwards;
}
@keyframes heroDrift { to { transform: scale(1.0); } }
.hero-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,14,0.35) 0%, rgba(10,10,14,0.05) 35%, rgba(10,10,14,0.55) 78%, var(--ink) 100%);
}
.hero-frame {
  position: absolute; inset: 1.4rem; z-index: 2; pointer-events: none;
  border: 1px solid rgba(234,230,217,0.14);
}
/* the frame's bottom edge would rule across the title — fade it out */
.hero-frame::after {
  content: ''; position: absolute; inset: -1px;
  background: linear-gradient(180deg, transparent 55%, var(--ink) 100%);
}
.hero-content { position: relative; z-index: 3; padding: 0 3rem 9vh; max-width: 1100px; }
.hero-coords {
  margin-top: 1.6rem; font-size: .62rem; letter-spacing: .34em;
  text-transform: uppercase; color: var(--grey);
}
.hero-coords b { color: var(--leaf); font-weight: 400; }
.hero-kicker {
  font-size: .72rem; letter-spacing: .5em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 2rem;
}
.hero-title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(3.2rem, 8.5vw, 7.5rem);
  line-height: 1.02; letter-spacing: .01em;
}
.hero-title em { font-style: italic; color: var(--gold); }
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line span {
  display: block; transform: translateY(110%);
  animation: lineUp 1.4s cubic-bezier(.22,1,.36,1) forwards;
}
.hero-title .line:nth-child(2) span { animation-delay: .18s; }
@keyframes lineUp { to { transform: translateY(0); } }
.hero-sub {
  margin-top: 2.2rem; font-size: 1rem; color: var(--grey);
  letter-spacing: .04em; max-width: 34rem; font-weight: 200;
}
.hero-scroll {
  position: absolute; right: 3rem; bottom: 9vh; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.hero-scroll span {
  font-size: .65rem; letter-spacing: .35em; text-transform: uppercase;
  color: var(--grey); writing-mode: vertical-rl;
}
.scroll-line { width: 1px; height: 70px; background: var(--gold-soft); position: relative; overflow: hidden; }
.scroll-line::after {
  content: ''; position: absolute; top: -40%; left: 0; width: 100%; height: 40%;
  background: var(--gold); animation: scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse { to { top: 110%; } }

/* ═══ FACTS ═══ */
.facts { padding: 7rem 3rem; border-bottom: 1px solid rgba(234,230,217,0.06); }
.facts-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}
.fact { display: flex; flex-direction: column; align-items: center; gap: .8rem; text-align: center; }
.fact-num {
  font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 300; color: var(--cream);
}
.fact-label {
  font-size: .68rem; letter-spacing: .4em; text-transform: uppercase; color: var(--gold);
}
.fact-div { width: 1px; height: 56px; background: rgba(234,230,217,0.1); }

/* ═══ TOUR ═══ */
/* 41.3s of film. The Meridian's ratio is ~16vh of scroll per second of
   footage; at 400vh (its old 24s length) the tour would race. */
.tour { position: relative; height: 660vh; background: #000; }
.tour-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.tour-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.tour-grain {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.5) 100%);
}
.tour-loader {
  position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, var(--ink-soft), var(--ink) 75%);
  transition: opacity .9s ease;
}
.tour-loader.hidden { opacity: 0; pointer-events: none; }
.tour-loader-inner { display: flex; flex-direction: column; align-items: center; gap: 1.3rem; padding: 0 6vw; }
.tour-loader-kicker { font-size: .62rem; letter-spacing: .4em; text-transform: uppercase; color: var(--gold); }
.tour-loader-bar { width: min(60vw, 280px); height: 2px; background: rgba(234,230,217,.14); border-radius: 2px; overflow: hidden; }
.tour-loader-fill { height: 100%; width: 0%; background: var(--gold); box-shadow: 0 0 10px var(--gold-soft); border-radius: 2px; transition: width .25s ease; }
.tour-loader-label { font-family: var(--serif); font-style: italic; font-size: clamp(1rem, 1.6vw, 1.25rem); color: var(--grey); }

.tour-caption {
  position: absolute; left: 3.5rem; bottom: 3.2rem; z-index: 5;
  display: flex; flex-direction: column; gap: .4rem; max-width: 30rem;
}
.caption-roman {
  font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--gold);
  letter-spacing: .3em;
}
.caption-name {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2rem, 4vw, 3.2rem); color: var(--cream); line-height: 1;
}
.caption-desc { font-size: .85rem; color: var(--grey); letter-spacing: .05em; margin-top: .4rem; }
.tour-caption > * { transition: opacity .5s, transform .5s; }
.tour-caption.switching > * { opacity: 0; transform: translateY(12px); }

/* ═══ HALLMARK STEM ═══ */
/* a 1px stem with a leaf-diamond — the only ornament on the page, reused at
   the price break and the footer so it reads as the house's hallmark */
.stem {
  width: 1px; height: 64px; background: linear-gradient(180deg, transparent, var(--gold-soft));
  position: relative;
}
.stem::after {
  content: ''; position: absolute; left: 50%; bottom: -3px;
  width: 7px; height: 7px; transform: translateX(-50%) rotate(45deg);
  background: var(--leaf);
}

/* ═══ SECTIONS ═══ */
.section-head { max-width: 1200px; margin: 0 auto 4.5rem; }
.section-kicker {
  display: block; font-size: .68rem; letter-spacing: .5em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.2rem;
}
.section-title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem); line-height: 1.1;
}

/* ═══ AMENITIES ═══ */
.amenities { padding: 8rem 3rem; background: var(--ink-soft); }
.amenity-list { list-style: none; max-width: 1200px; margin: 0 auto; }
.amenity {
  display: flex; align-items: baseline; gap: 2.5rem;
  padding: 1.9rem 0; border-bottom: 1px solid rgba(234,230,217,0.07);
}
.amenity:first-child { border-top: 1px solid rgba(234,230,217,0.07); }
.a-index {
  font-size: .72rem; letter-spacing: .2em; color: var(--gold); min-width: 2rem;
  transition: color .5s;
}
.a-name {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.2rem, 2.4vw, 1.8rem); color: var(--cream);
  transition: transform .7s cubic-bezier(.22,1,.36,1);
}
.amenity:hover .a-index { color: var(--leaf); }
.amenity:hover .a-name { transform: translateX(.6rem); }

/* ═══ PRICE ═══ */
.price {
  padding: 12rem 3rem; text-align: center; position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 3rem;
}
.price::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, var(--gold-faint), transparent 70%);
}
.price-inner { position: relative; }
.price-kicker {
  display: block; font-size: .7rem; letter-spacing: .55em; text-transform: uppercase;
  color: var(--grey); margin-bottom: 2rem;
}
.price-figure {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(3.4rem, 10vw, 8rem); color: var(--cream);
  letter-spacing: .02em; line-height: 1;
}
.price-figure.lit { color: var(--gold); text-shadow: 0 0 80px rgba(194,160,106,0.25); transition: color 1.4s, text-shadow 1.4s; }
.price-note { margin-top: 2rem; font-size: .8rem; letter-spacing: .15em; color: var(--grey); }

/* ═══ SHOWING ═══ */
.showing { padding: 8rem 3rem 10rem; background: var(--ink-soft); }
.showing-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 5rem; align-items: start;
}
.agent-card {
  background: var(--ink-panel); border: 1px solid rgba(207,174,122,0.14);
  padding: 3rem 2.5rem; display: flex; flex-direction: column; gap: 1.6rem;
  position: sticky; top: 8rem;
}
.agent-photo {
  width: 84px; height: 84px; border-radius: 50%;
  border: 1px solid var(--gold-soft);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1.6rem; color: var(--gold); letter-spacing: .1em;
  background: radial-gradient(circle at 30% 30%, #24242a, #101011);
}
.agent-info { display: flex; flex-direction: column; gap: .45rem; }
.agent-name { font-family: var(--serif); font-size: 1.7rem; font-weight: 400; }
.agent-title { font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.agent-firm { font-size: .82rem; color: var(--grey); margin-bottom: .8rem; }
.agent-line { font-size: .88rem; color: var(--cream); text-decoration: none; opacity: .8; transition: opacity .3s, color .3s; }
.agent-line:hover { color: var(--gold); opacity: 1; }

.showing-form { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1.6rem; }
.field { position: relative; }
.field input, .field textarea {
  width: 100%; background: transparent; border: none;
  border-bottom: 1px solid rgba(234,230,217,0.18);
  color: var(--cream); font-family: var(--sans); font-weight: 300;
  font-size: 1rem; padding: 1.1rem 0 .7rem; outline: none; resize: none;
  transition: border-color .4s;
}
.field input:focus, .field textarea:focus { border-color: var(--gold); }
.field label {
  position: absolute; left: 0; top: 1.05rem;
  font-size: .95rem; color: var(--grey); pointer-events: none;
  transition: all .35s cubic-bezier(.22,1,.36,1);
}
.field input:focus + label, .field textarea:focus + label,
.field input:not(:placeholder-shown) + label, .field textarea:not(:placeholder-shown) + label {
  top: -.5rem; font-size: .65rem; letter-spacing: .25em; text-transform: uppercase; color: var(--gold);
}
.form-submit {
  align-self: flex-start; margin-top: 1rem;
  background: transparent; border: 1px solid var(--gold);
  color: var(--gold); font-family: var(--sans);
  font-size: .72rem; letter-spacing: .3em; text-transform: uppercase;
  padding: 1.1rem 3rem; cursor: pointer; position: relative; overflow: hidden;
  transition: color .45s;
}
.form-submit::before {
  content: ''; position: absolute; inset: 0; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.22,1,.36,1);
  z-index: 0;
}
.form-submit:hover::before { transform: scaleX(1); }
.form-submit:hover { color: var(--ink); }
.form-submit span { position: relative; z-index: 1; }
.form-done {
  display: none; font-family: var(--serif); font-style: italic;
  font-size: 1.15rem; color: var(--gold);
}
.showing-form.sent .form-done { display: block; }
.showing-form.sent .field, .showing-form.sent .form-submit { display: none; }

/* ═══ FOOTER ═══ */
.footer {
  padding: 4rem 3rem; text-align: center;
  display: flex; flex-direction: column; gap: 1.4rem;
  border-top: 1px solid rgba(234,230,217,0.06);
}
.footer-logo { font-family: var(--serif); letter-spacing: .5em; font-size: .9rem; }
.footer-coords { font-size: .62rem; letter-spacing: .34em; text-transform: uppercase; color: var(--leaf); opacity: .8; }
.footer .stem { height: 44px; margin: 0 auto .4rem; }
.footer-fine { font-size: .68rem; color: var(--grey); letter-spacing: .08em; }

/* ═══ REVEALS ═══ */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity 1.1s cubic-bezier(.22,1,.36,1), transform 1.1s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity: 1; transform: none; }
.amenity.reveal { transition-delay: calc(var(--d, 0) * 90ms); }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 900px) {
  .nav { padding: 1.2rem 1.5rem; }
  .nav-price { display: none; }
  .hero-content { padding: 0 1.5rem 12vh; }
  .hero-scroll { right: 1.5rem; }
  .facts-inner { flex-wrap: wrap; gap: 2.5rem; justify-content: center; }
  .fact-div { display: none; }
  .tour-rail { right: 1.1rem; }
  .stop-label { display: none; }
  .tour-caption { left: 1.5rem; }
  .amenities, .showing, .facts { padding-left: 1.5rem; padding-right: 1.5rem; }
  .showing-grid { grid-template-columns: 1fr; gap: 3rem; }
  .agent-card { position: static; }
}

/* ═══ GOOEY TEXT REVEAL ═══
   Each line carries the alpha-threshold filter; the inner span animates its blur
   out. Heavily blurred glyphs fall under the threshold and are invisible, so the
   type appears to congeal out of nothing rather than simply fade. */
.gooey-line {
  display: block;
  filter: url(#blur-matrix) blur(0.4px);
  -webkit-filter: url(#blur-matrix) blur(0.4px);
  will-change: filter;
}
.gooey-inner {
  display: inline-block;
  filter: blur(0.35em);
  transition: filter 1.5s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--gi, 0) * 110ms);
  will-change: filter;
}
.gooey.in .gooey-inner { filter: blur(0em); }

/* the gooey pass replaces the plain fade on these blocks */
.gooey.reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .gooey-line { filter: none; -webkit-filter: none; }
  .gooey-inner { filter: none; transition: none; }
}




/* ═══════════════════════════ REDEV — post-tour ═══════════════════════════
   Everything below the tour was rebuilt 2026-08-26. The hero and the scrub
   are untouched by design: they are the two beats the site was built around.
   Every new section gets one mechanic and only one — the restraint is what
   keeps five scroll devices on a single page from reading as a demo reel. */

/* ═══ FACTS — count-up + live clock ═══ */
.facts-meta {
  text-align: center; margin: 0 auto 3.4rem;
  font-size: .62rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--grey);
}
.facts-meta #crClock { color: var(--leaf); font-variant-numeric: tabular-nums; }
.fact-num { font-variant-numeric: tabular-nums; }

/* ═══ STRATA — the vertical address ═══ */
.strata { position: relative; height: 340vh; background: var(--ink); }
.strata-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.strata-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.06);
  transition: opacity 1.1s cubic-bezier(.22,1,.36,1), transform 6s ease-out;
}
.strata-bg.on { opacity: .85; transform: scale(1); }
.strata-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(11,11,12,.82) 0%, rgba(11,11,12,.38) 46%, rgba(11,11,12,.05) 100%),
    linear-gradient(180deg, rgba(11,11,12,.55) 0%, transparent 28%, transparent 72%, rgba(11,11,12,.6) 100%);
}
.strata-head { position: absolute; top: 9vh; left: clamp(1.5rem, 6vw, 6rem); z-index: 3; }
.strata-list {
  position: absolute; left: clamp(1.5rem, 6vw, 6rem); top: 50%; transform: translateY(-46%);
  z-index: 3; list-style: none; display: flex; flex-direction: column;
  gap: clamp(1.1rem, 2.6vh, 2rem); max-width: 34rem;
}
.stratum {
  display: flex; gap: 1.6rem; align-items: baseline;
  opacity: .5; transition: opacity .7s;
  border-left: 1px solid rgba(234,230,217,.12); padding-left: 1.6rem;
}
.stratum.on { opacity: 1; border-left-color: var(--gold); }
.s-alt {
  min-width: 3.2rem; font-size: .68rem; letter-spacing: .22em; color: var(--grey);
  font-variant-numeric: tabular-nums;
}
.stratum.on .s-alt { color: var(--gold); }
.s-name {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.1; color: var(--cream);
}
.s-desc { margin-top: .45rem; font-size: .82rem; color: var(--grey); letter-spacing: .03em; max-width: 26rem; }
.stratum.on .s-desc { color: var(--cream); opacity: .8; }
.s-mark {
  display: inline-block; margin-top: .7rem;
  font-size: .6rem; letter-spacing: .32em; text-transform: uppercase; color: var(--leaf);
}
.s-house.on .s-name { color: var(--leaf); }
.strata-meter {
  position: absolute; right: clamp(1.5rem, 6vw, 6rem); bottom: 9vh; z-index: 3;
  display: flex; align-items: baseline; gap: .5rem; text-align: right;
}
.meter-num {
  font-family: var(--sans); font-weight: 200; line-height: 1;
  font-size: clamp(3.6rem, 9vw, 7.5rem); color: var(--cream);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.meter-unit { font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: var(--gold); }
.meter-tag {
  align-self: flex-end; margin-left: 1rem; padding-bottom: 1rem;
  font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--grey);
  writing-mode: vertical-rl;
}

/* ═══ ROOMS — stacking panels ═══ */
.rooms { position: relative; background: var(--ink); }
.rooms-head {
  padding: 9rem clamp(1.5rem, 6vw, 6rem) 5rem;
  max-width: 1200px; margin: 0 auto;
}
.room-panel {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  will-change: transform, filter;
}
.room-panel img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.room-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,11,12,.3) 0%, transparent 40%, rgba(11,11,12,.8) 100%);
}
.room-meta {
  position: absolute; left: clamp(1.5rem, 6vw, 6rem); bottom: 8vh; z-index: 2;
  display: flex; flex-direction: column; gap: .5rem; max-width: 36rem;
}
.room-idx { font-size: .66rem; letter-spacing: .34em; color: var(--gold); }
.room-name {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1; color: var(--cream);
}
.room-line { font-size: .9rem; color: var(--grey); letter-spacing: .04em; }
/* hairline between stacked panels, so the incoming edge reads as a cut, not a glitch */
.room-panel::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; z-index: 3;
  background: rgba(234,230,217,.14);
}

/* ═══ STRIP — horizontal contact sheet ═══ */
.strip { position: relative; background: var(--ink-soft); }
.strip-pin {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; align-items: center;
}
.strip-track {
  display: flex; align-items: center; gap: clamp(2rem, 4vw, 4rem);
  padding: 0 clamp(2rem, 6vw, 6rem);
  will-change: transform;
}
.strip-item { position: relative; flex: 0 0 auto; margin: 0; }
.strip-item img {
  display: block; height: 52vh; width: auto; object-fit: cover;
  filter: saturate(.94);
}
.strip-item.strip-tall img { height: 64vh; }
.strip-item.strip-wide img { height: 58vh; }
.strip-item figcaption {
  margin-top: 1rem; display: flex; align-items: baseline; gap: 1rem;
  font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--grey);
}
.strip-idx { font-family: var(--sans); font-style: normal; font-size: .62rem; letter-spacing: .3em; color: var(--gold); }
.strip-quote {
  flex: 0 0 auto; width: clamp(20rem, 30vw, 30rem); text-align: center;
}
.strip-quote p {
  font-family: var(--serif); font-weight: 300; font-size: clamp(1.3rem, 1.9vw, 1.8rem);
  line-height: 1.5; color: var(--cream);
}
.strip-quote em { color: var(--gold); }

/* ═══ ACRES — the grounds inside the type ═══ */
.acres {
  padding: 12rem 3rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 2.6rem;
}
.acres-word {
  font-family: var(--serif); font-weight: 400; line-height: .92; letter-spacing: .02em;
  font-size: clamp(5rem, 17vw, 15rem);
  /* This read as a black block. The fill photo is a dark dusk aerial AND it
     carried a 25% BLACK overlay on top of it — dark fill clipped to type,
     sitting on a near-black page, is invisible by construction. The overlay
     now LIFTS the photo, the crop moved to the brighter band of sky, and
     every glyph takes a gold stroke so the letterforms still read across the
     dark half of the image. */
  background-image:
    linear-gradient(rgba(255,255,255,.34), rgba(255,255,255,.18)),
    url('assets/new-aerial-mist.jpg');
  background-size: cover; background-position: center 18%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgba(207,174,122,.55);
  filter: drop-shadow(0 6px 34px rgba(0,0,0,.6));
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .acres-word { color: var(--cream); -webkit-text-fill-color: var(--cream); background: none; -webkit-text-stroke: 0; }
}
.acres-line {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.05rem, 1.7vw, 1.4rem); line-height: 1.7; color: var(--grey);
}

/* ═══ AMENITY PREVIEW — cursor-following still ═══ */
.amenities { position: relative; }
.amen-preview {
  position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none;
  width: clamp(220px, 22vw, 320px); aspect-ratio: 4/3; object-fit: cover;
  opacity: 0; transform: translate(-50%, -50%) scale(.92);
  transition: opacity .35s, transform .35s;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.8);
  border: 1px solid rgba(234,230,217,.16);
}
.amen-preview.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ═══ FINALE ═══ */
.finale { position: relative; height: 92vh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.finale-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.finale-veil {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(11,11,12,.55), rgba(11,11,12,.88) 100%);
}
.finale-content {
  position: relative; z-index: 2; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 2.6rem;
}
.finale-line {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(2rem, 5vw, 4rem); color: var(--cream);
}
.finale-cta {
  font-size: .7rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--cream); text-decoration: none;
  border: 1px solid var(--gold-soft); padding: 1.1rem 2.6rem;
  transition: background .45s, color .45s, border-color .45s;
}
.finale-cta:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/* ═══ REDEV — responsive ═══ */
@media (max-width: 900px) {
  .facts-meta { margin-bottom: 2.4rem; }
  /* strata: no pin — a plain readable ledger. The pinned meter needs the
     side-by-side geometry a phone doesn't have. */
  .strata { height: auto; }
  .strata-pin { position: static; height: auto; padding: 6rem 1.5rem; }
  .strata-bgs, .strata-meter { display: none; }
  .strata-head { position: static; margin-bottom: 3rem; }
  .strata-list { position: static; transform: none; }
  .stratum { opacity: 1; }
  .room-meta { left: 1.5rem; bottom: 6vh; }
  .rooms-head { padding: 6rem 1.5rem 3rem; }
  /* strip: vertical column, no pin */
  .strip-pin { position: static; height: auto; padding: 4rem 0; }
  .strip-track { flex-direction: column; align-items: stretch; padding: 0 1.5rem; transform: none !important; }
  .strip-item img, .strip-item.strip-tall img, .strip-item.strip-wide img { height: auto; width: 100%; aspect-ratio: 16/10; }
  .strip-quote { width: 100%; padding: 2rem 0; }
  .acres { padding: 7rem 1.5rem; }
  .amen-preview { display: none; }
  .finale { height: 70vh; }
}
@media (prefers-reduced-motion: reduce) {
  .strata-bg { transition: opacity .3s; transform: none; }
  .amen-preview { display: none; }
}