/* ==========================================================================
   Escarpment House
   Visual system: Limestone & Live Oak
   Warm gallery white, near black, deep live oak green. Photography leads,
   type stays quiet and very large, whitespace is generous by default.
   Mobile first. Verified at 375, 768, 1440.
   ========================================================================== */

:root{
  /* Locked palette */
  --bg:      #F7F5F1;
  --ink:     #131513;
  --accent:  #2E3B30;
  --muted:   #797C76;

  --line:    rgba(19, 21, 19, .13);
  --line-lt: rgba(247, 245, 241, .26);
  /* The live oak green is too dark to read on the ink bands, so the dark
     sections get a lifted version of the same hue rather than plain white. */
  --accent-on-dark: #9CB09C;

  --font: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Vertical rhythm. When in doubt, more. */
  --sec:    clamp(5.5rem, 13vw, 12rem);
  --sec-sm: clamp(3.5rem, 8vw, 7rem);
  --gut:    clamp(1.5rem, 5vw, 5rem);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, p, dl, dd, dt, ol, ul, figure, blockquote{ margin: 0; padding: 0; }
ol, ul{ list-style: none; }
img, svg, video{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Focus, visible and on brand */
:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.showing :focus-visible,
.hero :focus-visible,
.day :focus-visible{
  outline-color: var(--bg);
}

.visually-hidden{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link{
  position: absolute; top: -100px; left: var(--gut); z-index: 200;
  background: var(--ink); color: var(--bg);
  padding: .9rem 1.4rem;
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  transition: top .25s var(--ease);
}
.skip-link:focus{ top: 1rem; }

/* --------------------------------------------------------------------------
   Containers
   -------------------------------------------------------------------------- */

.wrap{ width: 100%; margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow{ max-width: 1180px; }
.wrap--wide{ max-width: 1560px; }

/* --------------------------------------------------------------------------
   Type primitives
   -------------------------------------------------------------------------- */

.eyebrow{
  font-size: .625rem;
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow--light{ color: rgba(247, 245, 241, .8); }

.h2{
  font-size: clamp(1.85rem, 5vw, 3.5rem);
  font-weight: 200;
  line-height: 1.16;
  letter-spacing: .035em;
  max-width: 20ch;
  margin-top: clamp(1.4rem, 3vw, 2.4rem);
}
.h2--light{ color: var(--bg); }

.lede{
  margin-top: clamp(1.4rem, 2.6vw, 2.1rem);
  max-width: 48ch;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.9;
  color: var(--muted);
}
.lede--light{ color: rgba(247, 245, 241, .78); }

.caption{
  margin-top: 1.4rem;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

.note{
  margin-top: 1.6rem;
  font-size: .74rem;
  line-height: 1.8;
  color: var(--muted);
  max-width: 46ch;
}

/* Buttons, thin rule and wide tracking, never filled with colour fields */
.btn{
  display: inline-block;
  padding: 1.15rem 2.1rem;
  border: 1px solid currentColor;
  font-size: .66rem;
  font-weight: 300;
  letter-spacing: .26em;
  text-transform: uppercase;
  transition: background-color .5s var(--ease), color .5s var(--ease);
}
.btn--light{ color: var(--bg); }
.btn--light:hover{ background: var(--bg); color: var(--ink); }
.btn--ink{ color: var(--accent); }
.btn--ink:hover{ background: var(--accent); color: var(--bg); }
.btn--wide{ width: 100%; text-align: center; margin-top: 2.4rem; }

/* Shared mark */
.mark{ width: 26px; height: 26px; color: var(--accent); flex: none; }
.mark--lg{ width: 40px; height: 40px; }

/* --------------------------------------------------------------------------
   Masthead, hidden until the hero has passed
   -------------------------------------------------------------------------- */

.masthead{
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  padding: .9rem var(--gut);
  background: rgba(247, 245, 241, .93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-102%);
  transition: transform .7s var(--ease);
}
.masthead.is-visible{ transform: translateY(0); }

.masthead__brand{ display: flex; align-items: center; gap: .8rem; margin-right: auto; }
.masthead__name{
  font-size: .74rem; font-weight: 300;
  letter-spacing: .26em; text-transform: uppercase;
  white-space: nowrap;
}

.masthead__nav ul{ display: flex; gap: 2rem; }
.masthead__nav a{
  font-size: .62rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--muted); transition: color .35s var(--ease);
}
.masthead__nav a:hover{ color: var(--ink); }

.masthead__right{ display: flex; align-items: center; gap: 1.4rem; }
.masthead .btn{ padding: .85rem 1.4rem; }

@media (max-width: 1099px){
  .masthead__nav{ display: none; }
}
@media (max-width: 767px){
  .masthead__name{ font-size: .66rem; letter-spacing: .2em; }
  .masthead .btn{ padding: .8rem 1rem; font-size: .56rem; letter-spacing: .14em; white-space: nowrap; }
}
/* Very narrow: the wordmark gives way so the CTA keeps its full label.
   The mark carries the identity on its own. */
@media (max-width: 439px){
  .masthead__name{ display: none; }
}

/* --------------------------------------------------------------------------
   1. HERO, scroll scrubbed arrival
   -------------------------------------------------------------------------- */

.hero{
  position: relative;
  height: 100svh;
  min-height: 540px;
  overflow: hidden;
  background: var(--ink);
}
.hero__video,
.hero__poster{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.hero__poster{ z-index: 1; transition: opacity 1.1s var(--ease); }
.hero__video{ z-index: 0; }
.hero.is-ready .hero__poster{ opacity: 0; }

.hero__scrim{
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(to bottom,
      rgba(19, 21, 19, .40) 0%,
      rgba(19, 21, 19, .10) 38%,
      rgba(19, 21, 19, .16) 62%,
      rgba(19, 21, 19, .58) 100%);
}

.hero__inner{
  position: absolute; z-index: 3;
  left: 0; right: 0; bottom: 0;
  padding: 0 var(--gut) clamp(3.5rem, 9vh, 7rem);
  color: var(--bg);
}
.hero__name{
  font-size: clamp(2.1rem, 8.2vw, 7rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero__loc{
  margin-top: clamp(1.1rem, 2.4vw, 1.9rem);
  font-size: .66rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(247, 245, 241, .86);
}
.hero__inner .btn{ margin-top: clamp(1.8rem, 4vw, 2.8rem); }

.hero__hint{
  position: absolute; z-index: 3;
  right: var(--gut); bottom: clamp(3.5rem, 9vh, 7rem);
  font-size: .58rem; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(247, 245, 241, .6);
  writing-mode: vertical-rl;
}
@media (max-width: 767px){ .hero__hint{ display: none; } }

/* --------------------------------------------------------------------------
   2. OPENING STATEMENT, one idea in the viewport
   -------------------------------------------------------------------------- */

.opening{ padding-block: clamp(5.5rem, 14vh, 10rem) clamp(3rem, 7vh, 5rem); text-align: center; }
.opening__lines{
  margin-inline: auto;
  font-size: clamp(1.6rem, 4.2vw, 3.15rem);
  font-weight: 200;
  line-height: 1.34;
  letter-spacing: .03em;
  /* Wide enough that each sentence holds one line on a desktop. */
  max-width: 36ch;
}
.opening__lines span{ display: block; }
.opening__body{
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  max-width: 46ch;
  text-wrap: balance;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.9;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   3. FACTS STRIP, typographic, not stat cards
   -------------------------------------------------------------------------- */

.opening__rule{
  display: block; width: 1px; height: clamp(3rem, 7vw, 5rem);
  margin: clamp(2.6rem, 5vw, 4rem) auto 0;
  background: linear-gradient(to bottom, var(--line), var(--accent));
}

.facts{ padding-bottom: var(--sec-sm); text-align: center; }
.facts__list{
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
/* --gap is the breathing room between a divider rule and the value next to
   it. The first cell of each row keeps zero left padding so it lines up with
   the section's text column. */
.facts__list{ --gap: clamp(1.1rem, 2.2vw, 1.9rem); }
.facts__item{
  padding: clamp(1.8rem, 3.4vw, 2.6rem) var(--gap);
  border-bottom: 1px solid var(--line);
}
/* Each layout is scoped to its own width. Mixing them means the two column
   nth-child rules outrank the wider ones and some cells end up flush against
   a divider while their neighbours are not. */
@media (max-width: 699px){
  .facts__item:nth-child(odd){ border-right: 1px solid var(--line); }
  .facts__item:last-child{ grid-column: 1 / -1; border-right: 0; }
}

.facts__label{
  font-size: .58rem; font-weight: 400;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--accent);
}
.facts__value{
  margin-top: .9rem;
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: .02em;
}
.facts__value--sm{
  font-size: clamp(.95rem, 1.6vw, 1.25rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.4;
  padding-block: .5rem;
}
.facts__note{
  margin-top: .8rem;
  text-wrap: balance;
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--muted);
}

/* Four across. First cell of each row aligns with the text column. */
@media (min-width: 700px) and (max-width: 1239px){
  .facts__list{ grid-template-columns: repeat(4, 1fr); }
  .facts__item{ border-right: 1px solid var(--line); }
  .facts__item:nth-child(4n){ border-right: 0; }
}
/* All seven on one line. Only the very first cell sits flush left. */
@media (min-width: 1240px){
  .facts__list{ grid-template-columns: repeat(7, 1fr); --gap: .9rem; }
  .facts__note{ white-space: nowrap; letter-spacing: .05em; }
  .facts__value--sm{ white-space: nowrap; font-size: clamp(.95rem, 1.2vw, 1.15rem); letter-spacing: .1em; }
  .facts__item{ border-right: 1px solid var(--line); }
  .facts__item:last-child{ border-right: 0; }
  /* Leave the word values alone, they have their own size. */
  .facts__value:not(.facts__value--sm){ font-size: clamp(1.7rem, 2.5vw, 2.6rem); }
}

/* --------------------------------------------------------------------------
   4. THE TOUR, a normal playable film
   -------------------------------------------------------------------------- */

.tour{ padding-block: var(--sec); }

/* Centred section heads: eyebrow, heading and lede sit on the page axis. */
.tour > .wrap,
.gallery > .wrap,
.interiors > .wrap:first-child,
.grounds > .wrap,
.location > .wrap,
.plan > .wrap:first-of-type{ text-align: center; }
.tour .h2, .interiors .h2, .grounds .h2, .location .h2, .plan .h2,
.tour .lede, .interiors .lede, .grounds .lede, .location .lede, .plan .lede{
  margin-inline: auto;
  text-wrap: balance;
}
.tour .lede, .plan .lede, .interiors .lede, .grounds .lede{ max-width: 58ch; margin-top: clamp(1.8rem, 3.2vw, 2.6rem); }
/* One line heads on a desktop; balanced on anything narrower. */
.h2--line{ max-width: none; white-space: pre-line; }
@media (min-width: 1000px){
  .h2--line{ font-size: clamp(2.2rem, 3.35vw, 3.3rem); white-space: nowrap; }
}

/* Full bleed and edge to edge. No poster to click, no play button in the
   middle of the picture: it starts itself when it scrolls into view. */
.film{ margin-top: clamp(3rem, 7vw, 5.5rem); }
.film__frame{ position: relative; background: var(--ink); overflow: hidden; }
.film__video{ display: block; width: 100%; height: 100%; object-fit: cover; }
.film__frame{ aspect-ratio: 16 / 9; }
@media (max-width: 639px){ .film__frame{ aspect-ratio: 4 / 3; } }

/* Fallback affordance, only shown when autoplay is unavailable or declined */
.film__tap{
  position: absolute; inset: 0; z-index: 3;
  display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.3rem;
  color: var(--bg);
  /* The film poster is a bright interior, so white on it needs real help */
  background: linear-gradient(to bottom, rgba(19,21,19,.20), rgba(19,21,19,.42));
  text-shadow: 0 1px 14px rgba(19, 21, 19, .6);
  transition: background-color .5s var(--ease);
}
.film__frame.needs-tap .film__tap{ display: flex; }
.film__tap:hover{ background: rgba(19, 21, 19, .4); }
.film__tap svg{ width: clamp(46px, 8vw, 62px); height: clamp(46px, 8vw, 62px); }
.film__tapLabel{ font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; }

/* Control cluster and progress rule. Quiet until you reach for them. */
.film__ui{
  position: absolute; z-index: 4;
  left: 0; right: 0; bottom: 0;
  padding: clamp(1.2rem, 3vw, 2.2rem) var(--gut);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem;
  background: linear-gradient(to bottom, rgba(19,21,19,0), rgba(19,21,19,.5));
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.film__frame:hover .film__ui,
.film__frame:focus-within .film__ui,
.film__frame.is-idle .film__ui{ opacity: 1; }
.film__frame.needs-tap .film__ui{ opacity: 0; pointer-events: none; }

.film__bar{
  flex: 1;
  height: 1px;
  background: rgba(247, 245, 241, .3);
  margin-bottom: 1.05rem;
}
.film__bar i{
  display: block; height: 100%; width: 0;
  background: var(--bg);
  transform-origin: left;
}
.film__buttons{ display: flex; gap: .4rem; flex: none; }
.film__btn{
  width: 38px; height: 38px;
  display: grid; place-items: center;
  color: var(--bg);
  border: 1px solid rgba(247, 245, 241, .4);
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
.film__btn:hover{ background: var(--bg); color: var(--ink); }
.film__btn svg{ width: 17px; height: 17px; }
/* One button, two icons, swapped by state */
.film__icoPause{ display: none; }
.film__frame.is-playing .film__icoPlay{ display: none; }
.film__frame.is-playing .film__icoPause{ display: block; }

.caption--bleed{
  margin-top: 1.3rem;
  text-align: center;
  max-width: 1180px; margin-inline: auto; padding-inline: var(--gut);
}

/* --------------------------------------------------------------------------
   Full bleed photography, the spine of the page
   -------------------------------------------------------------------------- */

.bleed{ margin-top: clamp(3rem, 8vw, 7rem); position: relative; }
.bleed:first-child{ margin-top: 0; }

/* Sources are 1672x941, so a 16/9 frame shows essentially the whole image.
   The picture is only 104% tall, which leaves 4% of vertical travel for the
   parallax and nothing more. Previously this cropped about 40% of the height. */
.bleed__frame{
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.bleed__frame img{
  position: absolute; top: -2%; left: 0;
  width: 100%; height: 104%;
  object-fit: cover;
  will-change: transform;
}

/* The near full viewport moments, one image and one line of type.
   At 1440x900 a 16/9 frame is 810px tall, which is nearly the whole viewport. */
.bleed--full .bleed__frame{ aspect-ratio: 16 / 9; }

/* On a phone a 16/9 band is about 211px tall and has no presence at all, so
   flip which axis gives way: a portrait frame crops the WIDTH and keeps the
   full height of the picture. The manifest focal point is the horizontal
   anchor, which is the thing it is actually good at.
   This block stays LAST so it wins over the .bleed--full rule above. */
@media (max-width: 639px){
  .bleed__frame,
  .bleed--full .bleed__frame{ aspect-ratio: 4 / 5; }
  .bleed--full .bleed__frame{ aspect-ratio: 3 / 4; }
}
/* Room gallery only: wider on phones so more of each room shows (the interiors, grounds,
   and the four-times-of-day scrub keep their taller framing). Scoped to #galleryList. */
@media (max-width: 639px){
  #galleryList .bleed__frame,
  #galleryList .bleed--full .bleed__frame{ aspect-ratio: 4 / 3; }
}
/* Every picture carries one line of type over its foot, centred on the page.
   The near full viewport ones (bleed--full) get the larger size. */
.bleed--over .bleed__caption{
  position: absolute; z-index: 3;
  left: 0; right: 0; bottom: clamp(1.6rem, 4.5vh, 3.2rem);
  margin: 0 auto; padding: 0;
  width: min(36ch, calc(100% - 2 * var(--gut)));
  max-width: none;
  text-align: center;
  text-wrap: balance;
  color: var(--bg);
  font-size: clamp(1rem, 1.8vw, 1.45rem);
  font-weight: 200;
  line-height: 1.35;
  letter-spacing: .06em;
  text-transform: none;
  text-shadow: 0 1px 16px rgba(19, 21, 19, .45);
}
.bleed--full .bleed__caption{
  font-size: clamp(1.1rem, 2.4vw, 1.9rem);
  width: min(30ch, calc(100% - 2 * var(--gut)));
}
.bleed--over .bleed__veil{
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to bottom, rgba(19,21,19,0) 55%, rgba(19,21,19,.6) 100%);
}
.bleed--full .bleed__veil{
  background: linear-gradient(to bottom, rgba(19,21,19,0) 48%, rgba(19,21,19,.55) 100%);
}

.bleed__caption{
  margin-top: 1.3rem;
  max-width: 1180px; margin-inline: auto; padding-inline: var(--gut);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

.gallery{ padding-block: var(--sec); }
.gallery .wrap{ margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.gallery__title{
  font-size: clamp(2.2rem, 6.4vw, 5.2rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
  /* Tracking adds space after the last letter; pull it back so the word centres. */
  margin-right: -.22em;
}
.gallery .bleed{ margin-top: clamp(1.5rem, 3.5vw, 3rem); }
.gallery .bleed:first-child{ margin-top: 0; }

/* --------------------------------------------------------------------------
   6. THE VIEW, the signature time of day shift
   -------------------------------------------------------------------------- */

.day{ background: var(--ink); }
.day__pin{
  position: relative;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
}
/* Two transform layers on purpose. The stack carries the shared slow push,
   each picture carries its own registration nudge, and they never fight. */
.day__stack{ position: absolute; inset: 0; will-change: transform; }
.day__stack img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
  will-change: opacity;
}
/* Two scrims: a vertical one for the readouts top and bottom, and a soft
   left wash so the heading and the label stay legible over a bright midday
   sky and a dark night sky alike. */
.day__scrim{
  position: absolute; inset: 0; z-index: 5;
  background:
    linear-gradient(to right,
      rgba(19,21,19,.52) 0%,
      rgba(19,21,19,.18) 42%,
      rgba(19,21,19,0) 72%),
    linear-gradient(to bottom,
      rgba(19,21,19,.58) 0%,
      rgba(19,21,19,.10) 32%,
      rgba(19,21,19,.14) 56%,
      rgba(19,21,19,.62) 100%);
}

.day__copy{
  position: absolute; z-index: 6;
  top: clamp(6.5rem, 15vh, 9.5rem); left: var(--gut); right: var(--gut);
  color: var(--bg);
}
/* A soft shadow rather than a heavier scrim. The view has to stay bright
   through midday, and this holds the type over every one of the four. */
.day__copy, .day__readout{
  text-shadow: 0 1px 18px rgba(19, 21, 19, .5), 0 1px 3px rgba(19, 21, 19, .35);
}
.day__heading{
  margin-top: clamp(1rem, 2.4vw, 1.8rem);
  font-size: clamp(1.7rem, 4.4vw, 3.2rem);
  font-weight: 200;
  line-height: 1.16;
  letter-spacing: .04em;
  max-width: 16ch;
}
.day__hint{
  margin-top: 1.1rem;
  font-size: .62rem; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(247, 245, 241, .85);
}

.day__readout{
  position: absolute; z-index: 6;
  left: var(--gut); right: var(--gut);
  bottom: clamp(2.6rem, 8vh, 5rem);
  color: var(--bg);
}
.day__label{
  font-size: clamp(1.5rem, 3.6vw, 2.5rem);
  font-weight: 200;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.2;
}
.day__note{
  margin-top: .7rem;
  font-size: clamp(.8rem, 1.1vw, .95rem);
  letter-spacing: .08em;
  color: rgba(247, 245, 241, .72);
  max-width: 34ch;
}
.day__ticks{ display: flex; gap: .6rem; margin-top: clamp(1.4rem, 3vh, 2.2rem); }
.day__tick{
  width: clamp(28px, 6vw, 54px); height: 1px;
  background: rgba(247, 245, 241, .3);
  position: relative; overflow: hidden;
}
.day__tick i{
  position: absolute; inset: 0;
  background: var(--bg);
  transform: scaleX(0); transform-origin: left;
}

/* --------------------------------------------------------------------------
   7. INTERIORS, 8. GROUNDS, 9. LOCATION
   -------------------------------------------------------------------------- */

.interiors, .grounds, .location, .plan{ padding-block: var(--sec); }

/* --------------------------------------------------------------------------
   Dark bands. The page alternates white, photo, dark, photo, white so the
   warm white never runs for too long uninterrupted.
   -------------------------------------------------------------------------- */

.band--dark{
  background: var(--ink);
  color: var(--bg);
}
.band--dark .eyebrow{ color: var(--accent-on-dark); }
.band--dark .lede{ color: rgba(247, 245, 241, .72); }
.band--dark .spec{ border-top-color: var(--line-lt); }
.band--dark .spec__row{ border-bottom-color: var(--line-lt); }
.band--dark .spec__label{ color: var(--accent-on-dark); }
.band--dark .bleed__caption{ color: rgba(247, 245, 241, .66); }
.band--dark .note{ color: rgba(247, 245, 241, .55); }
/* A hairline at the seam so the band reads as deliberate, not as a gap */
.band--dark + .band--dark{ border-top: 1px solid var(--line-lt); }

.spec{
  margin-top: clamp(2.6rem, 6vw, 4.5rem);
  border-top: 1px solid var(--line);
}
.spec__row{
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
  padding: clamp(1.2rem, 2.6vw, 1.7rem) 0;
  border-bottom: 1px solid var(--line);
}
.spec__label{
  font-size: .58rem; font-weight: 400;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--accent);
}
.spec__value{
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 300;
  letter-spacing: .04em;
}
/* Interiors and location read as a row of centred cells, not a ledger. */
.spec{ text-align: center; }
.spec__row{ justify-items: center; }
.spec__icon{
  width: 30px; height: 30px; margin-bottom: .9rem;
  fill: none; stroke: var(--accent-on-dark); stroke-width: 1.2;
  stroke-linecap: round; stroke-linejoin: round;
}
@media (min-width: 700px) and (max-width: 999px){
  .spec:not(.spec--wide){ grid-template-columns: 1fr; }
  .spec:not(.spec--wide) .spec__row:nth-child(odd){ border-right: 0; }
}
@media (min-width: 700px){
  .spec{ display: grid; grid-template-columns: repeat(2, 1fr); }
  .spec__row{ padding: clamp(1.6rem, 3vw, 2.4rem) 1.2rem; align-content: start; }
  .spec__row:nth-child(odd){ border-right: 1px solid var(--line-lt); }
  .spec--wide .spec__value{ font-size: clamp(1.1rem, 1.8vw, 1.5rem); font-weight: 200; }
}
@media (min-width: 1000px){
  .spec--wide{ grid-template-columns: repeat(4, 1fr); }
  .spec--wide .spec__row{ border-right: 1px solid var(--line-lt); }
  .spec--wide .spec__row:last-child{ border-right: 0; }
}

.interiors .bleed{ margin-block: clamp(3rem, 8vw, 7rem); }

/* Location: a contour motif off the top right corner, the escarpment itself. */
.location{ position: relative; overflow: hidden; }
.location > .wrap{ position: relative; z-index: 1; }
.location__contours{
  position: absolute; top: -6%; right: -8%;
  width: clamp(320px, 48vw, 720px); height: auto;
  color: var(--accent-on-dark); opacity: .16;
  pointer-events: none;
}
.location__contours + .wrap .lede{ max-width: 52ch; }

/* Grounds: room under the lede, and the pictures sit tighter together. */
.grounds > .wrap{ padding-bottom: clamp(3rem, 6vw, 5rem); }
.grounds .bleed{ margin-top: clamp(1.5rem, 3.5vw, 3rem); }
.grounds .bleed:first-child{ margin-top: 0; }

/* --------------------------------------------------------------------------
   10. FLOORPLAN
   -------------------------------------------------------------------------- */

.plan__grid{
  margin-top: clamp(3rem, 7vw, 5rem); display: grid; gap: clamp(2.5rem, 5vw, 4rem);
  max-width: 1180px; justify-items: center;
}
.plan__figure{ width: 100%; }
.plan__figure figcaption{ text-align: center; }
.plan__key{ width: 100%; text-align: center; }
.plan__figure{ background: #FBFAF7; border: 1px solid var(--line); padding: clamp(1rem, 2.5vw, 2rem); }
.plan__figure img{ width: 100%; height: auto; }
.plan__figure figcaption{ margin-top: 1.4rem; }
.plan__figure a{
  font-size: .62rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--accent); border-bottom: 1px solid var(--line); padding-bottom: .3rem;
}
.plan__legend{
  margin: 1.8rem auto 0;
  columns: 2;
  column-gap: 2rem;
  text-align: left;
  max-width: 34rem;
}
.plan__legend li{
  break-inside: avoid;
  display: flex; gap: .8rem;
  padding: .5rem 0;
  font-size: .78rem;
  letter-spacing: .05em;
  line-height: 1.5;
}
.plan__legend b{
  font-weight: 300;
  color: var(--accent);
  min-width: 1.5rem;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 1000px){
  .plan__legend{ columns: 3; column-gap: 3rem; max-width: 50rem; }
}

/* --------------------------------------------------------------------------
   11. PRIVATE SHOWING
   -------------------------------------------------------------------------- */

.showing{ position: relative; padding-block: var(--sec); overflow: hidden; }
.showing__bg{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.showing__scrim{
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(19,21,19,.70), rgba(19,21,19,.86));
}
.showing__grid{ position: relative; z-index: 2; display: grid; gap: clamp(3rem, 7vw, 5rem); }
@media (min-width: 940px){
  .showing__grid{ grid-template-columns: 1fr 1fr; gap: clamp(4rem, 8vw, 8rem); }
}

.agent{ margin-top: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--line-lt); padding-top: 2rem; }
.agent__kicker{
  font-size: .58rem; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(247, 245, 241, .55);
}
.agent__name{
  margin-top: 1rem;
  font-size: 1.35rem; font-weight: 200; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bg);
}
.agent__title{ margin-top: .5rem; font-size: .8rem; letter-spacing: .1em; color: rgba(247,245,241,.7); }
.agent__line{ margin-top: .7rem; font-size: .92rem; letter-spacing: .08em; }
.agent__line a{ color: rgba(247,245,241,.9); border-bottom: 1px solid var(--line-lt); padding-bottom: .2rem; }
.agent__note{ margin-top: 1.6rem; font-size: .7rem; line-height: 1.7; color: rgba(247,245,241,.5); max-width: 40ch; }

.form{
  align-self: start;
  padding: clamp(1.8rem, 3.6vw, 3rem);
  background: rgba(247, 245, 241, .07);
  border: 1px solid rgba(247, 245, 241, .18);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
          backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
}
.form__row{ margin-bottom: 1.8rem; }
.form label{
  display: block;
  font-size: .58rem; font-weight: 400;
  letter-spacing: .28em; text-transform: uppercase;
  color: rgba(247, 245, 241, .62);
  margin-bottom: .8rem;
}
.form input,
.form textarea{
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line-lt);
  color: var(--bg);
  font-family: var(--font); font-weight: 300; font-size: 1rem;
  letter-spacing: .04em;
  padding: .7rem 0;
  border-radius: 0;
  transition: border-color .4s var(--ease);
}
.form textarea{ resize: vertical; min-height: 5.5rem; }
.form input:focus,
.form textarea:focus{ border-bottom-color: var(--bg); outline: none; }
.form input::placeholder,
.form textarea::placeholder{ color: rgba(247, 245, 241, .35); }

.form__notice{
  margin-top: 1.6rem;
  font-size: .78rem; line-height: 1.75;
  color: rgba(247, 245, 241, .62);
  min-height: 1.2rem;
}
.form__notice.is-on{ color: var(--bg); }

/* --------------------------------------------------------------------------
   12. FOOTER
   -------------------------------------------------------------------------- */

.foot{ padding-top: var(--sec-sm); padding-bottom: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }
.foot__grid{ display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 860px){
  .foot__grid{ grid-template-columns: 1fr 1fr 1.6fr; gap: clamp(3rem, 6vw, 6rem); }
}
.foot__name{ margin-top: 1.2rem; font-size: .8rem; letter-spacing: .26em; text-transform: uppercase; }
.foot__loc{ margin-top: .6rem; font-size: .72rem; letter-spacing: .14em; color: var(--muted); }
.foot__line{ margin-top: .8rem; font-size: .84rem; letter-spacing: .06em; }
.foot__col .eyebrow{ margin-bottom: .4rem; }
.foot__disclaimer{
  margin-top: 1rem;
  font-size: .78rem; line-height: 1.85; color: var(--muted);
}
.foot__base{
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: center; align-items: center;
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}

.foot__credit { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
.foot__credit .soak-mark { display: inline-block; width: 20px; height: 20px; flex: none;
  background-color: var(--accent);
  -webkit-mask: url(../assets/images/summitoak-mark.png) center / contain no-repeat;
          mask: url(../assets/images/summitoak-mark.png) center / contain no-repeat;
  opacity: .9; transition: opacity .2s ease; }
.foot__credit:hover .soak-mark { opacity: 1; }
.foot__credit:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

@media (max-width: 640px) {
  .foot__base { text-align: center; }
  .foot__credit { white-space: nowrap; letter-spacing: .14em; }
}

/* --------------------------------------------------------------------------
   Motion, and the reduced motion contract
   -------------------------------------------------------------------------- */

.reveal{ will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .masthead{ transform: translateY(0); }
  .hero__poster{ opacity: 1; }
  .bleed__frame img{ position: static; height: 100%; top: 0; }
  .reveal{ opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   Line rules (design audit 09-30): no lone words on a wrapped line.
   -------------------------------------------------------------------------- */
.opening__lines span,
.caption--bleed,
.form__notice,
.showing .lede{ text-wrap: balance; }
.facts__note{ white-space: nowrap; letter-spacing: .05em; }
.spec__value{ text-wrap: balance; }
.plan__legend span{ white-space: nowrap; }
.showing .h2{ max-width: none; }
@media (min-width: 1000px){
  .showing .h2{ font-size: clamp(2rem, 2.9vw, 3rem); white-space: nowrap; }
}
@media (max-width: 639px){
  .showing .h2{ font-size: 1.5rem; letter-spacing: .02em; }
  .plan__legend{ column-gap: 1.2rem; }
  .plan__legend li{ font-size: .72rem; letter-spacing: .02em; gap: .5rem; }
}
/* Phones: the frames are short, so the caption sits higher up the picture
   and needs a deeper veil to stay legible over bright interiors. */
@media (max-width: 639px){
  .bleed--over .bleed__veil,
  .bleed--full .bleed__veil{ background: linear-gradient(to bottom, rgba(19,21,19,0) 34%, rgba(19,21,19,.72) 100%); }
  .bleed--over .bleed__caption{ font-size: 1.02rem; bottom: 1.2rem; }
}

/* Caption legibility over bright interiors (review 09-30): deeper foot veil, heavier type. */
.bleed--over .bleed__veil{ background: linear-gradient(to bottom, rgba(19,21,19,0) 50%, rgba(19,21,19,.78) 100%); }
.bleed--full .bleed__veil{ background: linear-gradient(to bottom, rgba(19,21,19,0) 44%, rgba(19,21,19,.74) 100%); }
.bleed--over .bleed__caption{ font-weight: 300; text-shadow: 0 1px 3px rgba(19,21,19,.55), 0 2px 22px rgba(19,21,19,.6); }

/* --------------------------------------------------------------------------
   Round 2 review (10-01): one vertical rhythm.
   --r is the visible gap at every band edge and between content blocks.
   Light sections that sit next to each other each take half, so the seam
   between them is also one --r.
   -------------------------------------------------------------------------- */
:root{
  --r:  clamp(4.25rem, 6vw, 5.5rem);
  --rh: clamp(2.125rem, 3vw, 2.75rem);
}
.opening{ padding-top: var(--r); }
.facts{ padding-bottom: var(--rh); }
.tour{ padding-block: var(--rh); }
.film{ margin-top: var(--r); }
/* The gallery ends on a picture and the view below is a full screen picture,
   so no white band between them. */
.gallery{ padding-block: var(--rh) 0; }
.gallery .wrap{ margin-bottom: var(--r); }

.interiors{ padding-block: var(--r); }
.interiors .bleed{ margin-block: var(--r); }
.interiors .spec{ margin-top: 0; }

/* Grounds ends on the pool picture, which now meets the Location band. */
.grounds{ padding-block: var(--r) 0; }
.grounds > .wrap{ padding-bottom: var(--r); }

.location{ padding-block: var(--r); }

.plan{ padding-block: var(--r); }
.plan__grid{ margin-top: var(--r); }
.plan__legend li:last-child{ padding-bottom: 0; }

.showing{ padding-block: var(--r); }

/* Footer bottom row: fiction line left, credit and mark right. */
.foot{ padding-top: var(--r); padding-bottom: var(--rh); }
.foot__base{ margin-top: var(--r); justify-content: space-between; }
.foot__fiction{ margin: 0; white-space: nowrap; }
.foot__credit{ margin-left: auto; }
@media (max-width: 640px){
  .foot__base{ flex-direction: column; justify-content: center; gap: .9rem; }
  .foot__fiction{ white-space: normal; text-wrap: balance; letter-spacing: .12em; }
  .foot__credit{ margin-left: 0; }
}