/* Narra Residences: Shaped, held, stilled.

   The brochure's verse organises the page: every section belongs to Earth
   (limestone paper, umber ink), Forest (deep forest green) or Water (pale
   still water, teal ink), in that order, with a held crossing at each change.
   The cairn at the lower right gains a pebble per section. Renders and
   photographs are never filtered or regraded. */

:root {
  font-variant-numeric: lining-nums;
  --mist: #DCE4DE;
  --stone: #ECE6DA;
  --stone-2: #E2D9C9;
  --stone-3: #D6CBB7;
  --umber: #2A261F;
  --umber-soft: #655C50;
  --ochre: #8E5F2C;              /* quarry ochre that can carry text on stone */
  --forest: #1C3326;
  --forest-2: #22402F;
  --forest-3: #2B4D39;
  --leaf: #E6ECE1;
  --leaf-soft: #A9BAA5;
  --gold: #D2AE5A;
  --gold-lt: #E2C684;
  --gold-ink: #7B5A1E;
  --water: #E5EEEC;
  --water-2: #D4E3E0;
  --water-3: #C3D7D3;
  --teal-ink: #11302C;
  --teal-soft: #4C6965;
  --teal: #245F5A;
  --card: #FBFAF6;
  --night: #0D1912;
  --hair: rgb(42 38 31 / 0.14);
  --hair-2: rgb(42 38 31 / 0.28);
  --hair-f: rgb(230 236 225 / 0.16);
  --hair-f2: rgb(230 236 225 / 0.32);
  --hair-w: rgb(17 48 44 / 0.14);
  --hair-w2: rgb(17 48 44 / 0.28);
  /* pebbles and the chart: bedrooms */
  --b1: #E9D27A;
  --b2: #8FBFA5;
  --b3: #E7AE86;
  --b4: #B9A895;
  --b5: #B9A6D3;

  --sc-canvas: var(--stone);
  --sc-surface: var(--card);
  --sc-ink: var(--umber);
  --sc-ink-soft: var(--umber-soft);
  --sc-accent: var(--forest);
  --sc-accent-ink: #FFFFFF;
  --sc-font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sc-font-text: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-font-mono: "Hanken Grotesk", system-ui, sans-serif;
  --sc-hairline: var(--hair);
  --sc-hairline-strong: var(--hair-2);
  --sc-shadow-color: 150 30% 10%;
  --sc-r-sm: 3px; --sc-r-md: 6px; --sc-r-lg: 12px;

  --gut: clamp(1rem, 4.4vw, 4rem);
  --dock-h: 0px;
  --wrap-w: min(76rem, calc(100% - 2 * var(--gut)));
  --sect: clamp(4.5rem, 8.5vw, 8.5rem);
}

html { background: var(--forest); scroll-padding-top: 1rem; scroll-padding-bottom: var(--dock-h); }
body { background: var(--stone); color: var(--umber); font-family: var(--sc-font-text); font-weight: 400; font-size: 1.0625rem; line-height: 1.62; }
::selection { background: var(--forest); color: #fff; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--gut); top: -4rem; z-index: 200; background: var(--card); color: var(--umber); padding: 0.6rem 1rem; border-radius: var(--sc-r-sm); }
.skip:focus { top: 0.5rem; }
p, figure, h1, h2, h3, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.wrap { width: var(--wrap-w); margin-inline: auto; }

/* ------------------------------------------------------------------ type -- */
.h2 {
  font: 400 clamp(2.2rem, 1.35rem + 2.6vw, 3.9rem)/1.04 var(--sc-font-display);
  font-optical-sizing: auto; letter-spacing: -0.012em; text-wrap: balance; max-width: 19ch;
}
.h3 { font: 600 0.74rem/1.25 var(--sc-font-text); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ochre); }
.kicker { font: 600 0.74rem/1.3 var(--sc-font-text); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-lt); margin-bottom: 0.9rem; }
.lede { font-size: clamp(1.07rem, 1rem + 0.3vw, 1.22rem); line-height: 1.62; max-width: 56ch; text-wrap: pretty; }
.small { font-size: 0.9rem; line-height: 1.6; color: var(--umber-soft); }
.credit { font-size: 0.74rem; font-style: normal; letter-spacing: 0.03em; color: var(--umber-soft); }
.plain li { padding: 0.3rem 0; border-bottom: 1px solid var(--hair); }
.plain li b { font-weight: 600; white-space: nowrap; margin-left: 0.35rem; }
/* the element's verse line, which opens each element */
.verse { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.1rem; font: italic 400 clamp(1.15rem, 1rem + 0.5vw, 1.45rem)/1.2 var(--sc-font-display); color: var(--ochre); }
.verse--lt { color: var(--gold-lt); }
.verse__mark { flex: none; width: 1.7rem; height: 0.62rem; border-radius: 50%; }
.verse__mark--earth { background: #A89377; box-shadow: 0 -0.5rem 0 -0.12rem #C2B096; }
.verse__mark--forest { background: #5D7A57; box-shadow: 0 -0.5rem 0 -0.12rem #7E9A72; }
.verse__mark--water { background: #8FB2AE; box-shadow: 0 -0.5rem 0 -0.12rem #B5D0CC; }
.link-arrow {
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
  font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1.5px; text-underline-offset: 0.3em;
}
.link-arrow::after { content: " \2192"; }
@media (hover: hover) and (pointer: fine) { .link-arrow:hover { text-decoration-thickness: 2.5px; } }

/* --------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.8rem 1.6rem;
  background: var(--forest); color: #fff;
  font: 600 0.84rem/1 var(--sc-font-text); letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; border-radius: 999px; cursor: pointer;
  box-shadow: var(--sc-e1);
  transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out), opacity 200ms var(--sc-ease-out);
}
.btn:active { transform: scale(0.97); }
.btn[disabled] { opacity: 0.55; cursor: progress; }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--forest-3); } }
.btn--block { width: 100%; }
.btn--sm { min-height: 2.5rem; padding: 0.5rem 1.05rem; font-size: 0.74rem; }

/* ---------------------------------------------------------------- frames -- */
.frame { position: relative; overflow: hidden; border-radius: var(--sc-r-md); background: var(--stone-2); box-shadow: var(--sc-e2); }
.frame > img, .frame__move > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.frame__move { height: calc(100% + 44px); margin-top: -22px; will-change: transform; }
figure.frame { display: grid; }
figure.frame > figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 3rem 1rem 0.8rem;
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; flex-wrap: wrap;
  font-size: 0.86rem; color: #fff; background: linear-gradient(to top, rgb(10 22 15 / 0.86) 0, rgb(10 22 15 / 0.5) 48%, rgb(10 22 15 / 0) 100%);
}
figure.frame > figcaption .credit { color: rgb(255 255 255 / 0.85); }
.zoom { position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; text-align: left; }
.zoom > img { display: block; width: 100%; height: auto; }
.zoom__hint {
  position: absolute; right: 0.75rem; bottom: 0.75rem; padding: 0.45rem 0.85rem; border-radius: 999px;
  background: rgb(28 51 38 / 0.92); color: #fff; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04em;
}
@media (hover: hover) and (pointer: fine) {
  .zoom > img { transition: transform 420ms var(--sc-ease-out); }
  .zoom:hover > img { transform: scale(1.012); }
}
[data-wipe] { will-change: clip-path; }

/* =============================================================== TOP BAR == */
.topbar {
  position: fixed; z-index: 60; top: 0; left: 0; right: 0; pointer-events: none;
  display: flex; justify-content: flex-end; align-items: center; padding: 1rem var(--gut);
}
.topbar > * { pointer-events: auto; }
.topbar__mark { display: block; width: 7.5rem; color: var(--forest); opacity: 0; transform: translateY(-6px); transition: opacity 240ms var(--sc-ease-out), transform 240ms var(--sc-ease-out), color 240ms var(--sc-ease-out); }
.topbar__mark svg { display: block; width: 100%; height: auto; }
.topbar.is-mark .topbar__mark { opacity: 1; transform: none; }
.topbar.is-dark .topbar__mark { color: var(--leaf); }
.topbar__mark:not(:focus-visible) { outline: none; }
.topbar.is-dark .topbar__book { background: var(--gold-lt); color: var(--forest); }
.topbar__book { box-shadow: 0 6px 18px -8px rgb(10 22 15 / 0.5); }

/* ============================================================ THE CAIRN == */
/* Fixed at the lower right on a small frosted plinth: the element's line and
   the section beside a cairn of pebbles, one per section. */
.cairn { position: fixed; z-index: 60; right: var(--gut); bottom: 1.1rem; display: flex; align-items: flex-end; gap: 0.6rem; }
.cairn__book { display: none; }
.cairn__open {
  display: flex; align-items: flex-end; gap: 0.75rem; padding: 0.6rem 0.7rem 0.55rem 1rem; cursor: pointer; text-align: right;
  background: rgb(250 249 245 / 0.84); border: 1px solid rgb(42 38 31 / 0.12); border-radius: 14px;
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 12px 30px -16px rgb(10 22 15 / 0.55);
  transition: background-color 200ms var(--sc-ease-out), border-color 200ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .cairn__open:hover { background: rgb(250 249 245 / 0.96); border-color: var(--gold); } }
.cairn__read { display: grid; justify-items: end; gap: 0.15rem; padding-bottom: 0.15rem; min-width: 9rem; }
.cairn__el { font: italic 400 0.92rem/1.15 var(--sc-font-display); color: var(--ochre); }
.cairn__sec { font: 500 1.08rem/1.2 var(--sc-font-display); color: var(--umber); max-width: 13rem; }
.cairn__stones { display: block; width: 46px; height: 80px; overflow: visible; }
.cairn__stones .pb { transition: transform 520ms cubic-bezier(.2, 1.3, .4, 1), opacity 300ms var(--sc-ease-out), fill 300ms var(--sc-ease-out), stroke 200ms var(--sc-ease-out); }
.cairn__stones .pb.is-out { fill: transparent !important; stroke: rgb(42 38 31 / 0.3); stroke-dasharray: 2 2.4; stroke-width: 0.8; }
.cairn__stones .pb.is-here { stroke: var(--gold); stroke-width: 1.8; stroke-dasharray: none; }

/* ================================================================= HERO == */
/* The aerial (2333 x 1173) in a box of its own proportions at the foot of
   the stage; the haze fills the stage above it and sits over its top. */
.hero { position: relative; height: 100svh; min-height: 36rem; overflow: hidden; background: var(--mist); color: var(--forest); }
.hero__stage { position: absolute; inset: 0; }
/* --pw: the picture's width. Its top is set so the middle group's roof
   (23.1% down the picture) stands a third of the way down the stage. */
.hero__plane { --pw: max(120vw, 180svh); position: absolute; left: 50%; top: calc(33svh - 0.1162 * var(--pw)); width: var(--pw); aspect-ratio: 2333 / 1173; translate: -50% 0; will-change: transform; }
.hero__plane img { display: block; width: 100%; height: 100%; }
.hero__haze {
  position: absolute; left: 0; right: 0; top: 0; height: 64%; pointer-events: none; will-change: transform, opacity;
  background: linear-gradient(to bottom, var(--mist) 0, var(--mist) 46%, rgb(220 228 222 / 0.82) 62%, rgb(220 228 222 / 0.42) 80%, rgb(220 228 222 / 0) 100%);
}
.hero__name {
  position: absolute; left: 50%; top: 9svh; width: min(34rem, 40vw); translate: -50% 0;
  color: var(--forest); will-change: transform;
}
.hero__name svg { display: block; width: 100%; height: auto; overflow: visible; }
.hero__scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(to top, rgb(10 22 15 / 0.78) 0, rgb(10 22 15 / 0.42) 45%, rgb(10 22 15 / 0) 100%); pointer-events: none; }
.hero__copy { position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(1.5rem, 5svh, 3rem); z-index: 3; display: grid; gap: 0.6rem; max-width: 34rem; color: #fff; }
.hero__tag { font: italic 400 clamp(1.5rem, 1.1rem + 1.3vw, 2.3rem)/1.15 var(--sc-font-display); }
.hero__lede { font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem); line-height: 1.55; max-width: 44ch; color: rgb(255 255 255 / 0.92); text-shadow: 0 1px 12px rgb(0 0 0 / 0.35); }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 0.6rem; }
.hero__cta .btn { background: var(--gold-lt); color: var(--forest); }
@media (hover: hover) and (pointer: fine) { .hero__cta .btn:hover { background: #ECD49D; } }
.hero__link { color: #fff; text-decoration-color: var(--gold-lt); }
.hero__credit { position: absolute; right: var(--gut); bottom: 0.6rem; z-index: 3; color: rgb(255 255 255 / 0.82); }
.hero__copy > * { animation: rise 900ms var(--sc-ease-out) both; }
.hero__copy > :nth-child(3) { animation-delay: 120ms; }
.hero__copy > :nth-child(4) { animation-delay: 240ms; }
.hero__name svg { animation: settle 1400ms var(--sc-ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ============================================================= SECTIONS == */
.ground { position: relative; z-index: 1; }
.ground--earth { background: var(--stone); color: var(--umber); }
.ground--forest { background: var(--forest); color: var(--leaf); }
.ground--water { background: var(--water); color: var(--teal-ink); }
.sec { padding: var(--sect) 0; }
.sec--tight { padding-top: 0; }
.ground--forest .h3 { color: var(--gold-lt); }
.ground--forest .small, .ground--forest .credit { color: var(--leaf-soft); }
.ground--water .h3 { color: var(--teal); }
.ground--water .small, .ground--water .credit { color: var(--teal-soft); }

/* --- Earth: the land --- */
.land { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.land__head .lede { margin-top: 1.1rem; }
.tally { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--hair-2); }
.tally li { display: grid; gap: 0.35rem; align-content: start; padding: 1.1rem 1.25rem 0.4rem 0; }
.tally li + li { padding-left: 1.25rem; border-left: 1px solid var(--hair); }
.tally b { font: 300 clamp(2.6rem, 1.8rem + 2.6vw, 4.4rem)/1 var(--sc-font-display); letter-spacing: -0.02em; color: var(--umber); }
.tally b small { font-size: 0.42em; margin-left: 0.08em; letter-spacing: 0; }
.tally span { font-size: 0.92rem; line-height: 1.45; color: var(--umber-soft); max-width: 22ch; }
.land__body { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(17rem, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.land__fig { aspect-ratio: 16 / 9.4; }
.land__dev { align-self: center; }
.land__devname { margin-top: 0.6rem; font: 400 clamp(1.45rem, 1.2rem + 0.7vw, 1.9rem)/1.18 var(--sc-font-display); }
.facts { display: grid; border-top: 1px solid var(--hair-2); margin-top: 1rem; }
.facts div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--hair); font-size: 0.94rem; }
.facts dt { color: var(--umber-soft); }
.facts dd { text-align: right; font-weight: 600; }

/* --- Earth: location --- */
.loc { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); }
.loc__head .lede { margin-top: 1.1rem; }
.loc__body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.loc__map .zoom { border-radius: var(--sc-r-md); overflow: hidden; background: #fff; }
.loc__times { display: grid; gap: 1.4rem; }
.times { display: grid; grid-template-columns: 4.6rem 1fr; gap: 0.25rem 1rem; align-items: start; }
.times__mode i { display: inline-block; font: italic 400 1.15rem/1.4 var(--sc-font-display); color: var(--ochre); }
.times ul { border-top: 1px solid var(--hair-2); }
.times li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.42rem 0; border-bottom: 1px solid var(--hair); font-size: 0.95rem; }
.times li b { font-weight: 600; white-space: nowrap; }
.loc__more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.loc__col .h3 { margin-bottom: 0.7rem; }
.loc__col .plain { font-size: 0.95rem; }
.loc__col .small { margin-top: 0.7rem; }
.loc__col > p:not(.h3):not(.small) { font-size: 0.97rem; }
.pano { margin-top: clamp(3rem, 6vw, 5rem); }
.pano__scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.pano img { display: block; width: 100%; height: auto; }
.pano figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; flex-wrap: wrap; margin-top: 0.7rem; font: italic 400 1.15rem/1.3 var(--sc-font-display); }

/* =========================================================== CROSSING 1 == */
/* Held for 1.6 screens: the earth's ground, hemmed with a ridge line, lowers
   away and the lawn under the forested cliff opens behind it. */
.cross { position: relative; z-index: 2; height: 160svh; background: var(--forest); }
.cross__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.cross__photo, .cross__photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.cross__photo img { will-change: transform; }
/* the ground's top edge is a ridge line (a clip), so the ink words inside it
   are cut by the same line as it passes */
.cross__earth {
  position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 14vh); background: var(--stone); will-change: transform;
  clip-path: polygon(0 4.59vmin, 5% 5.15vmin, 9% 4.09vmin, 14% 3.22vmin, 19% 3.72vmin, 24% 5.46vmin, 28% 5.95vmin, 33% 4.71vmin, 38% 3.47vmin, 42% 3.84vmin, 47% 5.58vmin, 52% 6.20vmin, 57% 5.21vmin, 62% 3.84vmin, 66% 3.35vmin, 71% 4.84vmin, 76% 5.83vmin, 81% 4.96vmin, 86% 3.60vmin, 91% 2.98vmin, 96% 4.09vmin, 100% 4.71vmin, 100% 100%, 0 100%);
}
.cross__words { position: absolute; left: var(--gut); top: clamp(5rem, 14svh, 9rem); max-width: 34rem; color: #fff; }
.cross__words--ink { color: var(--umber); will-change: transform; }
.cross__words--ink::before { display: none; }
.cross__words.cross__words--ink .verse { text-shadow: none; color: var(--ochre); }
.cross__words.cross__words--ink .cross__h { text-shadow: none; }
.cross__words.cross__words--ink .lede { color: var(--umber); }
.cross__words .lede { margin-top: 1rem; color: rgb(255 255 255 / 0.94); }
.cross__words .verse { text-shadow: 0 1px 14px rgb(0 0 0 / 0.4); }
.cross__h { text-shadow: 0 2px 26px rgb(0 0 0 / 0.38); }
.cross__words::before { content: ""; position: absolute; inset: -3rem -4rem -3rem -10rem; z-index: -1; background: radial-gradient(ellipse at 35% 45%, rgb(10 22 15 / 0.62), rgb(10 22 15 / 0) 70%); }
.cross__credit { position: absolute; right: var(--gut); bottom: 0.7rem; color: rgb(255 255 255 / 0.85); }

/* --- Forest: nature --- */
.nat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.9fr); gap: clamp(1.5rem, 3.5vw, 3rem) clamp(2rem, 5vw, 4.5rem); align-items: start; }
.nat__head { grid-column: 1; }
.nat__head .lede { margin-top: 1.1rem; }
.nat__list { grid-column: 2; grid-row: 1 / span 2; border-top: 1px solid var(--hair-f2); }
.nat__list li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--hair-f); }
.nat__list span { font: 400 1.18rem/1.25 var(--sc-font-display); }
.nat__list b { font-size: 0.9rem; font-weight: 600; color: var(--gold-lt); white-space: nowrap; }
.nat__soon { grid-column: 1; align-self: end; max-width: 46ch; }
.nat__pics { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(0.7rem, 1.6vw, 1.1rem); margin-top: clamp(1rem, 3vw, 2rem); align-items: start; }
.np { position: relative; overflow: hidden; border-radius: var(--sc-r-md); background: var(--forest-2); }
.np img { display: block; width: 100%; height: 100%; object-fit: cover; }
.np span { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.2rem 0.85rem 0.65rem; font-size: 0.84rem; line-height: 1.35; color: #fff; background: linear-gradient(to top, rgb(10 22 15 / 0.85), rgb(10 22 15 / 0)); }
.np--a { grid-column: 1 / span 3; grid-row: span 2; aspect-ratio: 765 / 940; }
.np--b { grid-column: 4 / span 4; aspect-ratio: 602 / 389; }
.np--c { grid-column: 8 / span 5; aspect-ratio: 728 / 400; }
.np--d { grid-column: 4 / span 2; aspect-ratio: 418 / 546; }
.np--e { grid-column: 6 / span 4; aspect-ratio: 628 / 383; }
.np--f { grid-column: 10 / span 3; aspect-ratio: 725 / 406; }
.np--g { grid-column: 10 / span 3; aspect-ratio: 474 / 654; margin-top: calc(-1 * clamp(2rem, 6vw, 5rem)); }
.np--h { grid-column: 6 / span 4; aspect-ratio: 418 / 565; display: none; }
.nat__credit { grid-column: 1 / -1; }

/* --- Forest: facilities --- */
.fac__head .lede { margin-top: 1.1rem; }
.fac { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(0.8rem, 1.8vw, 1.25rem); margin-top: clamp(2rem, 4vw, 3rem); align-items: start; }
.fac .frame { background: var(--forest-2); }
.fac__a { grid-column: 1 / span 8; grid-row: span 2; aspect-ratio: 2048 / 1250; }
.fac__b { grid-column: 9 / span 4; aspect-ratio: 540 / 355; }
.fac__c { grid-column: 9 / span 4; aspect-ratio: 853 / 458; }
.fac__d { grid-column: 1 / span 5; aspect-ratio: 1392 / 859; }
.fac__e { grid-column: 6 / span 7; aspect-ratio: 950 / 457; }
.fac__f { grid-column: 1 / span 6; aspect-ratio: 1171 / 623; }
.fac__g { grid-column: 7 / span 3; aspect-ratio: 640 / 322; align-self: end; }
.fac__h { grid-column: 10 / span 3; aspect-ratio: 635 / 351; align-self: end; }
.fac__g figcaption, .fac__h figcaption, .fac__b figcaption { font-size: 0.8rem; }
.shops { position: relative; margin-top: clamp(3rem, 6vw, 5rem); overflow: hidden; }
.shops img { display: block; width: 100%; height: auto; }
.shops figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; flex-wrap: wrap; margin-top: 0.8rem; font-size: 0.95rem; }
.shops figcaption b { font: italic 400 1.25rem/1.3 var(--sc-font-display); margin-right: 0.4rem; }

/* --- Forest: site plan --- */
.sp { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.sp__head .lede { margin-top: 1.1rem; }
.sp__panel { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(17rem, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.sp__sheet { position: relative; border-radius: var(--sc-r-md); overflow: hidden; background: #E9EEE6; box-shadow: var(--sc-e2); }
.sp__img img { display: block; width: 100%; height: auto; }
.sp__rings { position: absolute; inset: 0; pointer-events: none; }
.sp__rings i { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 3.4%; aspect-ratio: 1; min-width: 16px; border-radius: 50%; translate: -50% -50%; box-shadow: 0 0 0 2px var(--gold), 0 0 0 7px rgb(210 174 90 / 0.4); opacity: 0; scale: 1.8; transition: opacity 180ms var(--sc-ease-out), scale 260ms var(--sc-ease-out); }
.sp__rings i.is-on { opacity: 1; scale: 1.15; }
.sp__credit { position: absolute; right: 0.5rem; bottom: 0.4rem; padding: 0.1rem 0.4rem; border-radius: 3px; background: rgb(10 22 15 / 0.62); color: #fff !important; }
.sp__legend { columns: 2; column-gap: 1.5rem; border-top: 1px solid var(--hair-f2); }
.sp__legend li { break-inside: avoid; display: grid; grid-template-columns: 1.9rem 1fr; align-items: baseline; padding: 0.36rem 0.35rem; border-bottom: 1px solid var(--hair-f); font-size: 0.92rem; line-height: 1.32; cursor: default; border-radius: 2px; transition: background-color 140ms var(--sc-ease-out); }
.sp__legend li::before { content: attr(data-n); font-weight: 600; color: var(--gold-lt); font-variant-numeric: tabular-nums; }
.sp__legend li.is-on { background: rgb(210 174 90 / 0.22); }
.sp__legend li:focus-visible { outline-offset: 0; }
.sp__other { margin-top: 1rem; }
.quiet { margin-top: clamp(5rem, 11vw, 9rem); text-align: center; font: italic 300 clamp(1.45rem, 1.1rem + 1.2vw, 2.2rem)/1.3 var(--sc-font-display); color: var(--leaf-soft); }

/* ======================================================== THE PEAK: STILL == */
/* Held for 3.6 screens. Behind everything, the two pictures (the fallback
   and the reduced-motion composition); over them the WebGL water when it
   runs. */
.still { position: relative; z-index: 2; height: 360svh; background: var(--forest); }
.still__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--night); }
.still__pics, .still__a, .still__b, .still__pics img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.still__pics img { object-fit: cover; object-position: 55% 50%; }
.still__b { clip-path: circle(0% at 50% 74%); }
.still__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 400ms var(--sc-ease-out); }
.still.is-gl .still__gl { opacity: 1; }
.still.is-gl .still__pics { visibility: hidden; }
.still__words { position: absolute; left: var(--gut); top: clamp(5rem, 13svh, 8.5rem); max-width: 33rem; color: #fff; will-change: transform, opacity; }
.still__words .lede { margin-top: 1rem; color: rgb(255 255 255 / 0.94); }
.still__words .h2 { text-shadow: 0 2px 26px rgb(0 0 0 / 0.4); }
.still__words::before { content: ""; position: absolute; inset: -3rem -5rem -3rem -10rem; z-index: -1; background: radial-gradient(ellipse at 35% 45%, rgb(8 18 14 / 0.6), rgb(8 18 14 / 0) 70%); }
.still__words--b { opacity: 0; }
.still__credit { position: absolute; right: var(--gut); bottom: 0.7rem; color: rgb(255 255 255 / 0.85); }

/* --- Water: the homes --- */
.ground--water .sec:first-child { padding-top: 0; }
.beckon { position: relative; overflow: hidden; }
.beckon img { display: block; width: 100%; height: auto; }
.beckon figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; flex-wrap: wrap; margin-top: 0.8rem; font: italic 400 1.15rem/1.3 var(--sc-font-display); }
.homes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); margin-top: clamp(3rem, 6vw, 5rem); align-items: start; }
.homes__head { grid-column: 1 / -1; }
.homes__head .lede { margin-top: 1.1rem; }
.homes__kitchen { aspect-ratio: 1760 / 1422; background: var(--water-2); }
.homes__brands { display: grid; gap: 1.6rem; align-content: start; }
.brand { padding-top: 1rem; border-top: 1px solid var(--hair-w2); }
.brand .h3 { margin-bottom: 0.5rem; }
.brand b { font-weight: 600; }
.brand--smart { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; align-items: start; }
.brand--smart img { display: block; width: 100%; height: auto; border-radius: var(--sc-r-sm); }
.brand--smart .credit { margin-top: 0.4rem; }
.brochure { grid-column: 1 / -1; }
.brochure__card {
  display: inline-grid; grid-template-columns: 5.4rem auto; gap: 1.1rem; align-items: center; padding: 0.7rem 1.4rem 0.7rem 0.7rem;
  background: var(--card); border: 1px solid var(--hair-w2); border-radius: var(--sc-r-md); text-decoration: none; box-shadow: var(--sc-e1);
  transition: border-color 160ms var(--sc-ease-out), transform 160ms var(--sc-ease-out);
}
.brochure__card img { display: block; width: 100%; height: auto; border-radius: 2px; }
.brochure__text { display: grid; gap: 0.2rem; }
.brochure__text b { font: 400 1.35rem/1.15 var(--sc-font-display); }
.brochure__text b::after { content: " \2193"; font-family: var(--sc-font-text); font-size: 0.9em; }
.brochure__text span { font-size: 0.86rem; color: var(--teal-soft); }
@media (hover: hover) and (pointer: fine) { .brochure__card:hover { border-color: var(--teal); transform: translateY(-2px); } }

/* --- Water: floor plans --- */
.plans__head { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.plans__head .lede { margin-top: 1rem; }
.plans .filter { margin-bottom: 1.1rem; }
.types { display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); gap: 0.75rem; }
.types li[hidden] { display: none; }
.type {
  width: 100%; height: 100%; display: grid; grid-template-columns: 5.6rem 1fr; gap: 0.95rem; align-items: center; text-align: left;
  padding: 0.7rem 0.85rem 0.7rem 0.7rem; border-radius: var(--sc-r-md); cursor: pointer;
  background: var(--card); border: 1px solid var(--hair-w); color: var(--teal-ink);
  transition: border-color 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.type:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) { .type:hover { border-color: var(--teal); background: #fff; } }
.type__thumb { position: relative; width: 5.6rem; height: 5.6rem; border-radius: 3px; background: #fff; overflow: hidden; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--hair-w); }
.type__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 54%; transform: scale(1.45); }
.type__name { display: flex; align-items: center; gap: 0.5rem; font: 400 1.32rem/1.15 var(--sc-font-display); }
.type__name i { width: 0.7rem; height: 0.7rem; border-radius: 50%; flex: none; }
.type__meta { display: block; margin-top: 0.2rem; font-size: 0.85rem; color: var(--teal-soft); line-height: 1.4; }
.type__left { display: inline-block; margin-top: 0.4rem; font-size: 0.82rem; font-weight: 600; color: var(--teal); }
.plans__dl { margin-top: 1.5rem; }

/* --- Water: availability --- */
.avail__head { margin-bottom: 1.6rem; }
.avail__head .lede { margin-top: 1rem; }
.avail__num { color: var(--teal); }
.avail__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.avail__asat { max-width: 46ch; }
.filter { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter button {
  min-height: 2.6rem; padding: 0.5rem 1rem; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--hair-w2); color: var(--teal-ink); font-size: 0.92rem;
  transition: background-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out);
}
.filter button span { color: var(--teal-soft); margin-left: 0.15rem; }
.filter [aria-checked="true"] { background: var(--teal-ink); border-color: var(--teal-ink); color: #fff; }
.filter [aria-checked="true"] span { color: rgb(255 255 255 / 0.75); }
@media (hover: hover) and (pointer: fine) { .filter button:hover { border-color: var(--teal); } }
/* the estate as the site plan lays it out: 50, 52, 54 to the north; 58 and
   56 in the middle; 60 and 62 along Dairy Farm Walk */
.estate { margin-top: 1.6rem; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem) clamp(0.8rem, 1.8vw, 1.5rem); align-items: end; }
.blk { min-width: 0; }
.blk--50, .blk--52 { grid-column: span 8; }
.blk--54 { grid-column: span 8; }
.blk--58 { grid-column: 1 / span 10; }
.blk--56 { grid-column: 11 / span 6; }
.blk--key { grid-column: 17 / span 8; align-self: center; }
.blk--60 { grid-column: 1 / span 12; }
.blk--62 { grid-column: 13 / span 12; }
.blk__name { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-bottom: 0.45rem; font: 400 1.05rem/1.2 var(--sc-font-display); }
.blk__name small { font: 600 0.72rem/1 var(--sc-font-text); color: var(--teal-soft); letter-spacing: 0.04em; }
.blk__grid { display: grid; grid-template-columns: 1.5rem repeat(var(--n), minmax(0, 1fr)); gap: 2px; }
.blk__lvl { display: grid; place-items: center end; padding-right: 0.3rem; font-size: 0.6rem; color: var(--teal-soft); font-variant-numeric: tabular-nums; }
.blk__stack { text-align: center; font-size: 0.6rem; color: var(--teal-soft); padding-top: 0.2rem; font-variant-numeric: tabular-nums; }
.uc { min-height: 1rem; border-radius: 2px; background: rgb(17 48 44 / 0.06); }
.uc--none { background: transparent; }
.uc--open {
  display: grid; place-items: center; padding: 0; border: 0; cursor: pointer; font: 600 0.58rem/1 var(--sc-font-text); color: var(--teal-ink);
  transition: transform 120ms var(--sc-ease-out), opacity 200ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out);
}
.uc--open[data-bed="1"] { background: var(--b1); }
.uc--open[data-bed="2"] { background: var(--b2); }
.uc--open[data-bed="3"] { background: var(--b3); }
.uc--open[data-bed="4"] { background: var(--b4); }
.uc--open[data-bed="5"] { background: var(--b5); }
.uc--open.is-dim { opacity: 0.12; }
.uc--open.is-hl { box-shadow: 0 0 0 2px var(--teal-ink); position: relative; z-index: 2; }
@media (hover: hover) and (pointer: fine) { .uc--open:hover { transform: scale(1.16); box-shadow: 0 0 0 2px var(--teal-ink); position: relative; z-index: 2; } }
.estate__key { display: grid; gap: 0.5rem; font-size: 0.88rem; color: var(--teal-soft); padding: 1rem 1.1rem; border: 1px solid var(--hair-w2); border-radius: var(--sc-r-md); background: rgb(255 255 255 / 0.4); }
.estate__key span { display: inline-flex; align-items: center; gap: 0.55rem; }
.estate__key i { width: 0.95rem; height: 0.95rem; border-radius: 2px; flex: none; }
.estate__key p { margin-top: 0.3rem; font-size: 0.82rem; line-height: 1.45; }
.avail__how { margin-top: 1.25rem; }

/* ============================================================ THE CLOSE == */
/* The door in the night forest, full bleed; the booking card stands on the
   dark side of the picture with the door's warm light on its edge. */
.close { position: relative; z-index: 1; overflow: hidden; background: var(--night); color: var(--leaf); padding: clamp(4rem, 10vw, 8rem) 0 clamp(3rem, 6vw, 5rem); }
.close__bg { position: absolute; inset: 0; }
.close__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 22% 40%; }
.close__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgb(8 16 11 / 0) 0, rgb(8 16 11 / 0) 34%, rgb(8 16 11 / 0.55) 56%, rgb(8 16 11 / 0.72) 100%), linear-gradient(to top, rgb(8 16 11 / 0.55), rgb(8 16 11 / 0) 30%); }
.book { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 3.5rem); }
.book__side { display: grid; gap: 1.6rem; }
.book__intro .lede { margin-top: 1rem; color: rgb(230 236 225 / 0.9); }
.book__title { color: #fff; }
.book__facts { margin-top: 1.4rem; border-top: 1px solid var(--hair-f2); }
.book__facts > div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--hair-f); font-size: 0.95rem; }
.book__facts dt { color: var(--leaf-soft); }
.book__facts a { text-decoration-color: var(--gold-lt); text-underline-offset: 0.25em; }
.close__credit { position: absolute; left: var(--gut); bottom: 0.7rem; color: rgb(255 255 255 / 0.75); }

/* ----------------------------------------------------- the booking card -- */
.card { background: var(--card); color: var(--umber); border-radius: var(--sc-r-lg); }
.tb { position: relative; overflow: hidden; box-shadow: 0 0 0 1px rgb(255 214 150 / 0.25), -18px 0 60px -24px rgb(255 205 130 / 0.55), 0 30px 60px -20px rgb(0 0 0 / 0.7); }
.tb > * { border-top: 1px solid var(--hair-2); }
.tb > :first-child, .tb > input, .tb > .hp { border-top: 0; }
.tb__head { padding: 1.4rem 1.5rem 1.1rem; border-top: 0 !important; box-shadow: inset 0 3px 0 var(--gold); }
.tb__title { font: italic 400 1.85rem/1.1 var(--sc-font-display); color: var(--umber); }
.tb__sub { margin-top: 0.45rem; font-size: 0.93rem; color: var(--umber-soft); }
.tb__interest { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1.5rem; background: #E6EEEA; font-size: 0.92rem; }
.tb__interest[hidden] { display: none; }
.tb__interest-x { background: none; border: 0; padding: 0.25rem; font: inherit; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; color: var(--umber-soft); }
.when { border: 0; margin: 0; padding: 1.25rem 1.5rem; min-width: 0; }
.when__legend { padding: 0; margin-bottom: 1rem; float: left; width: 100%; font: 600 0.72rem/1.2 var(--sc-font-text); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ochre); }
.when__legend + * { clear: both; }
.when__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1.1rem; }
.when__tabs button {
  display: grid; gap: 0.3rem; text-align: left; padding: 0.65rem 0.85rem; min-height: 3.6rem;
  background: #fff; border: 1px solid var(--hair-2); border-radius: var(--sc-r-sm); cursor: pointer; color: var(--umber);
  transition: border-color 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out);
}
.when__n { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--umber-soft); }
.when__v { font-size: 0.92rem; font-weight: 500; color: var(--umber-soft); }
.when__tabs button.is-set .when__v { color: var(--umber); }
.when__tabs [aria-selected="true"] { border-color: var(--forest); box-shadow: inset 0 -3px 0 var(--gold); }
@media (hover: hover) and (pointer: fine) { .when__tabs button:hover { border-color: var(--forest); } }
.when__month { font-size: 0.92rem; font-weight: 600; margin-bottom: 0.75rem; }
.when__dow, .when__dates { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.35rem; }
.when__dow { font-size: 0.72rem; color: var(--umber-soft); text-align: center; margin-bottom: 0.35rem; }
.when__dates { margin-bottom: 1.1rem; }
.when__dates button, .when__times button {
  position: relative; font: 500 0.92rem/1 var(--sc-font-text); color: var(--umber);
  background: #fff; border: 1px solid var(--hair-2); border-radius: var(--sc-r-sm);
  cursor: pointer; min-height: 2.75rem; padding: 0.3rem 0.2rem; font-variant-numeric: tabular-nums;
  transition: background-color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out);
}
.when__dates button { display: grid; place-items: center; align-content: center; gap: 0.1rem; }
.when__dates .m { font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--umber-soft); }
.when__dates .pad { visibility: hidden; }
@media (hover: hover) and (pointer: fine) { .when__dates button:hover, .when__times button:hover { border-color: var(--forest); } }
.when__dates [aria-checked="true"], .when__times [aria-checked="true"] { background: var(--forest); border-color: var(--forest); color: #fff; }
.when__dates [aria-checked="true"] .m { color: rgb(255 255 255 / 0.8); }
.when__dates button[data-other]::after { content: ""; position: absolute; left: 50%; bottom: 0.26rem; width: 0.3rem; height: 0.3rem; margin-left: -0.15rem; border-radius: 50%; background: var(--gold); }
.when__times { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.35rem; }
.when__times button:disabled { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
.when__native label { display: block; margin-top: 0.75rem; font-size: 0.92rem; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { padding: 0.8rem 1.5rem 0.95rem; min-width: 0; }
.field + .field { border-left: 1px solid var(--hair-2); }
.field--wide { grid-column: 1 / -1; border-left: 0 !important; border-top: 1px solid var(--hair-2); }
.field label { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--umber-soft); margin-bottom: 0.45rem; }
.field input {
  width: 100%; min-height: 2.9rem; padding: 0.65rem 0.8rem;
  background: #FCFBF8; border: 1px solid rgb(42 38 31 / 0.32); border-radius: var(--sc-r-sm);
  font: 400 1rem/1.2 var(--sc-font-text); color: var(--umber);
  transition: border-color 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out);
}
.field input::placeholder { color: color-mix(in oklab, var(--umber-soft) 85%, transparent); }
.field input:focus-visible { border-color: var(--forest); background: #fff; outline-offset: 1px; }
.field input[aria-invalid="true"] { border-color: #A3342A; }
.field__error { margin: 0.35rem 0 0; font-size: 0.88rem; color: #A3342A; }
.field__error:empty { display: none; }
.tb__submit { padding: 1.25rem 1.5rem 1rem; }
.tb .btn { background: var(--forest); color: #fff; }
@media (hover: hover) and (pointer: fine) { .tb .btn:hover { background: var(--forest-3); } }
.tb__fineprint { margin-top: 1rem; font-size: 0.82rem; line-height: 1.55; color: var(--umber-soft); text-align: center; text-wrap: pretty; }
.tb__status { padding: 1rem 1.5rem; font-size: 0.93rem; }
.tb__status.is-ok { background: #E4EEE7; color: #163222; }
.tb__status.is-wait { background: #EEEDE6; color: var(--umber); }
.tb__status.is-err { background: #F6E3DC; color: #7A2A14; }
.tb__status a { color: inherit; font-weight: 600; }
.tb__status:focus { outline: none; }
.tb.is-sending > :not([data-status]):not(.tb__head), .tb.is-done > :not([data-status]):not(.tb__head) { display: none; }
.tb.is-sending .tb__status, .tb.is-done .tb__status { padding: 2rem 1.75rem; font-size: 1.1rem; line-height: 1.55; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* --------------------------------------------------------------- footer -- */
.foot { position: relative; z-index: 1; padding: 2.25rem var(--gut) calc(2.75rem + var(--dock-h)); font-size: 0.88rem; background: var(--night); color: var(--leaf-soft); border-top: 1px solid var(--hair-f); }
.foot__lines { text-align: center; }
.foot__lines p { line-height: 1.7; }
.foot__lines p + p { margin-top: 0.25rem; }
.foot__lines span { white-space: nowrap; }
.foot a { color: var(--leaf); text-decoration-color: var(--gold-lt); text-underline-offset: 0.25em; }

/* ------------------------------------------------------------- dialogs -- */
dialog { border: 0; padding: 0; color: var(--umber); background: var(--card); box-shadow: var(--sc-e3); }
dialog::backdrop { background: rgb(8 16 11 / 0.62); }
.dlg-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.9rem 1rem 0.9rem 1.4rem; border-bottom: 1px solid var(--hair); }
.dlg-title { font: italic 400 1.4rem/1.2 var(--sc-font-display); color: var(--umber); }
.dlg-close { min-height: 2.5rem; padding: 0.4rem 1rem; border-radius: 999px; cursor: pointer; background: var(--forest); color: #fff; border: 0; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.index-dlg { width: min(30rem, calc(100vw - 2rem)); border-radius: var(--sc-r-lg); max-height: min(48rem, calc(100svh - 2rem)); }
.index-dlg[open] { display: grid; grid-template-rows: auto 1fr; }
.index-dlg__list { padding: 0.4rem 1.1rem 1.1rem; overflow: auto; }
.ix__group { margin-top: 0.9rem; }
.ix__verse { display: flex; align-items: center; gap: 0.6rem; padding: 0 0.4rem 0.35rem; font: italic 400 1rem/1.2 var(--sc-font-display); color: var(--ochre); }
.ix__verse i { width: 1.3rem; height: 0.5rem; border-radius: 50%; }
.index-dlg__list a { display: grid; grid-template-columns: 1.6rem 1fr; align-items: center; gap: 0.6rem; padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--hair); text-decoration: none; border-radius: 3px; }
.index-dlg__list a:hover, .index-dlg__list a.is-here { background: var(--stone); }
.index-dlg__list a.is-here .ix__name { color: var(--ochre); }
.ix__pb { width: 1.3rem; height: 0.55rem; border-radius: 50%; justify-self: center; }
.ix__name { font: 400 1.15rem/1.2 var(--sc-font-display); }
.plan-dlg { width: min(68rem, calc(100vw - 2rem)); height: min(54rem, calc(100svh - 2rem)); border-radius: var(--sc-r-lg); }
.plan-dlg[open] { display: grid; grid-template-rows: auto 1fr; }
.plan-dlg__body { display: grid; grid-template-columns: minmax(16rem, 0.75fr) minmax(0, 1.45fr); min-height: 0; }
.plan-dlg__meta { padding: 1.25rem 1.4rem; overflow: auto; border-right: 1px solid var(--hair); }
.plan-dlg__meta .h3 { color: var(--teal); }
.plan-dlg__meta .facts { margin-top: 0.75rem; }
.plan-dlg__meta .btn { margin-top: 1.25rem; width: 100%; }
.plan-dlg__meta .link-arrow { display: inline-block; margin-top: 0.9rem; }
.plan-dlg__units { margin-top: 1rem; font-size: 0.88rem; color: var(--umber-soft); line-height: 1.6; max-height: 13rem; overflow: auto; }
.plan-dlg__units b { color: var(--umber); }
.plan-dlg__units button { margin: 0.2rem 0.3rem 0 0; padding: 0.3rem 0.6rem; border-radius: 999px; border: 1px solid var(--hair-2); background: #fff; cursor: pointer; font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.plan-dlg__units button[aria-pressed="true"] { background: var(--forest); color: #fff; border-color: var(--forest); }
.plan-dlg__img { overflow: auto; background: #fff; display: grid; place-items: start center; }
.plan-dlg__img img { width: 100%; max-width: 60rem; height: auto; display: block; }
.viewer { width: calc(100vw - 2rem); height: calc(100svh - 2rem); max-width: none; max-height: none; border-radius: var(--sc-r-lg); }
.viewer[open] { display: grid; grid-template-rows: auto 1fr; }
.viewer__body { overflow: auto; background: #fff; display: grid; place-items: start center; }
.viewer__body img { display: block; width: auto; max-width: none; height: auto; }
.viewer.is-fit .viewer__body img { width: 100%; max-width: 100%; cursor: zoom-in; }
.viewer:not(.is-fit) .viewer__body img { cursor: zoom-out; }

/* ============================================================== TABLET == */
@media (max-width: 1100px) {
  .tally { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tally li:nth-child(3) { padding-left: 0; border-left: 0; }
  .tally li:nth-child(n+3) { border-top: 1px solid var(--hair); }
  .land__body, .loc__body { grid-template-columns: 1fr; }
  .loc__map { max-width: 40rem; }
  .loc__more { grid-template-columns: 1fr 1fr; }
  .nat { grid-template-columns: 1fr; }
  .nat__list { grid-column: 1; grid-row: auto; }
  .sp__panel { grid-template-columns: 1fr; }
  .sp__sheet { max-width: 42rem; }
  .homes { grid-template-columns: 1fr; }
  .estate { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .blk--50, .blk--52, .blk--54 { grid-column: span 6; }
  .blk--54 { grid-column: span 6; }
  .blk--58 { grid-column: 1 / span 7; }
  .blk--56 { grid-column: 8 / span 5; }
  .blk--key { grid-column: 1 / -1; }
  .blk--60, .blk--62 { grid-column: span 6; }
  .book { grid-template-columns: 1fr; }
  .book__spacer { height: 36svh; }
}

/* =============================================================== PHONE == */
@media (max-width: 860px) {
  :root { --dock-h: calc(4.1rem + env(safe-area-inset-bottom, 0px)); --sect: clamp(3.5rem, 12vw, 5rem); }
  .wrap { width: calc(100% - 2 * var(--gut)); }
  .topbar { display: none; }
  /* the cairn becomes a dock at the foot */
  .cairn {
    left: 0; right: 0; bottom: 0; height: var(--dock-h); padding: 0 0.6rem env(safe-area-inset-bottom, 0px) 0.5rem; gap: 0.5rem;
    align-items: center; justify-content: space-between;
    background: rgb(250 249 245 / 0.92); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
    border-top: 1px solid var(--hair);
  }
  .cairn__open { flex-direction: row-reverse; align-items: center; gap: 0.55rem; padding: 0.3rem 0.4rem; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; text-align: left; min-width: 0; }
  .cairn__read { justify-items: start; min-width: 0; padding: 0; }
  .cairn__sec { font-size: 1rem; max-width: 46vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cairn__el { font-size: 0.82rem; }
  .cairn__stones { width: 30px; height: 52px; }
  .cairn__book { display: inline-flex; padding-inline: 0.95rem; }
  .hero { height: 100svh; min-height: 33rem; }
  .hero { background: linear-gradient(to bottom, var(--mist) 0, var(--mist) 50%, var(--forest) 50%); }
  .hero__plane { --pw: 250vw; left: 44%; top: 21svh; }
  .hero__name { width: 80vw; top: 11svh; }
  .hero__scrim { height: 52%; background: linear-gradient(to top, var(--forest) 0, var(--forest) 22%, rgb(28 51 38 / 0.6) 55%, rgb(28 51 38 / 0) 100%); }
  .hero__haze { height: 62%; }
  .hero__copy { bottom: calc(var(--dock-h) + 1rem); gap: 0.4rem; }
  .hero__tag { font-size: 1.55rem; }
  .hero__lede { font-size: 0.97rem; }
  .hero__cta .btn { display: none; }
  .hero__credit { bottom: calc(var(--dock-h) + 0.3rem); }
  .tally { grid-template-columns: 1fr 1fr; }
  .tally li { padding-right: 0.75rem; }
  .tally li + li { padding-left: 0.75rem; }
  .facts div { flex-direction: column; gap: 0.1rem; }
  .facts dd { text-align: left; }
  .times { grid-template-columns: 1fr; }
  .loc__more { grid-template-columns: 1fr; }
  .pano__scroll img { width: 300%; max-width: none; }
  .cross { height: 150svh; }
  .cross__words { top: clamp(3rem, 10svh, 6rem); right: var(--gut); }
  .cross__credit, .still__credit { bottom: calc(var(--dock-h) + 0.4rem); }
  .nat__pics { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .np--a { grid-column: 1 / span 3; grid-row: span 2; }
  .np--b { grid-column: 4 / span 3; }
  .np--c { grid-column: 4 / span 3; }
  .np--d { grid-column: 1 / span 2; }
  .np--e { grid-column: 3 / span 4; }
  .np--f { grid-column: 1 / span 4; }
  .np--g { grid-column: 5 / span 2; margin-top: 0; }
  .np span { font-size: 0.76rem; padding: 1.6rem 0.55rem 0.45rem; }
  .fac { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fac__a, .fac__d, .fac__e, .fac__f { grid-column: 1 / -1; grid-row: auto; }
  .fac__b, .fac__c, .fac__g, .fac__h { grid-column: span 1; }
  .fac__b figcaption, .fac__c figcaption, .fac__g figcaption, .fac__h figcaption { padding: 2rem 0.6rem 0.5rem; font-size: 0.74rem; }
  .fac__b figcaption .credit, .fac__c figcaption .credit, .fac__g figcaption .credit, .fac__h figcaption .credit { display: none; }
  .fac__credit-note { display: block; }
  .shops { overflow: hidden; }
  .shops img { width: 180%; max-width: none; margin-left: -34%; }
  .sp__legend { columns: 1; }
  .still { height: 320svh; }
  .still__words { top: clamp(3rem, 9svh, 5rem); right: var(--gut); }
  .beckon img { width: 170%; max-width: none; margin-left: -35%; }
  .brand--smart { grid-template-columns: 6.5rem 1fr; }
  .types { grid-template-columns: 1fr; }
  .estate { grid-template-columns: 1fr; gap: 1.4rem; }
  .blk--50, .blk--52, .blk--54, .blk--58, .blk--56, .blk--60, .blk--62, .blk--key { grid-column: 1; }
  .blk--key { order: -1; }
  .uc { min-height: 1.15rem; }
  /* the door stands above the words; the words and the card on the night */
  .book__spacer { height: 52svh; }
  .close { padding-top: 0; }
  .close__bg { bottom: auto; height: 66svh; }
  .close__bg img { object-position: 30% 26%; }
  .close__bg::after { background: linear-gradient(to bottom, rgb(13 25 18 / 0) 0, rgb(13 25 18 / 0) 58%, rgb(13 25 18 / 0.85) 86%, var(--night) 100%); }
  .book__intro .h2 { font-size: 2.15rem; }
  .book__facts > div { grid-template-columns: 7.5rem 1fr; }
  .fields { grid-template-columns: 1fr; }
  .field + .field { border-left: 0; border-top: 1px solid var(--hair-2); }
  .when, .field, .tb__head, .tb__submit { padding-left: 1.1rem; padding-right: 1.1rem; }
  .when__dates button, .when__times button { min-height: 2.6rem; font-size: 0.86rem; }
  .plan-dlg__body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow: auto; }
  .plan-dlg__meta { border-right: 0; border-bottom: 1px solid var(--hair); }
  .plan-dlg__img { overflow: visible; }
  .plan-dlg__units { max-height: none; }
}
@media (max-width: 380px) {
  .cairn__el { display: none; }
  .cairn__sec { max-width: 40vw; }
}

/* ========================================================= WITHOUT SCRIPT == */
.no-js [data-sc-in], .no-js [data-sc-stagger] > * { opacity: 1; transform: none; }
.no-js .cairn__open, .no-js .filter, .no-js .avail__how { display: none !important; }
.no-js .cross, .no-js .still { height: auto; }
.no-js .cross__stage, .no-js .still__stage { position: relative; }
.no-js .cross__earth { display: none; }
.no-js .still__b { position: absolute; clip-path: none; opacity: 0; }
.nojs-note { margin-top: 1rem; }

/* ====================================================== REDUCED MOTION == */
/* No holds: each crossing is one still composition, the pictures stand one
   after the other, and nothing moves with the scroll. */
@media (prefers-reduced-motion: reduce) {
  .hero__plane, .hero__name, .hero__haze, .frame__move { transform: none !important; }
  .hero__copy > *, .hero__name svg { animation: none; }
  [data-wipe] { clip-path: none !important; }
  .cross { height: auto; }
  .cross__stage { position: relative; height: 92svh; }
  .cross__earth { display: none; }
  .still { height: auto; }
  .still__stage { position: relative; height: auto; display: grid; }
  .still__pics { position: relative; display: grid; }
  .still__a, .still__b { position: relative; height: 86svh; clip-path: none; }
  .still__pics img { position: absolute; }
  .still__gl { display: none; }
  .still__words { opacity: 1 !important; transform: none !important; }
  .still__words--b { top: calc(86svh + clamp(5rem, 13svh, 8.5rem)); }
  .cairn__stones .pb { transition: none; }
}