/* The Sen: Cairn.

   The page is the brochure's cairn, laid stone by stone. The cover's burgundy
   paper opens and closes it; between, its three chapters run in their own
   colours (The Estate olive, The Landscape clay, The Home terracotta) on the
   brochure's warm paper. Type is the brochure's own Cardo with Hanken
   Grotesk for text; gold is the wordmark's, on burgundy only. The renders are
   never filtered. */

:root {
  font-variant-numeric: lining-nums;
  --paper: #ECE6DE;
  --paper-2: #E3DBD1;
  --card: #FBF8F4;
  --ink: #2A2124;
  --ink-soft: #5F5356;
  --burg: #5E2B38;          /* the cover's paper */
  --burg-2: #4C2230;
  --burg-ink: #F4EEE6;
  --burg-soft: #D7C4C2;
  --wine: #78243B;          /* the wordmark's pebble */
  --gold: #D9BF95;          /* the wordmark's gold, on burgundy */
  --gold-ink: #7A5631;      /* a gold that carries text on the paper */
  --olive: #6E6A4E;
  --clay: #7C625A;
  --terra: #7F5845;
  --field-ink: #F4EEE6;
  --hair: rgb(42 33 36 / 0.14);
  --hair-2: rgb(42 33 36 / 0.28);
  --hair-b: rgb(244 238 230 / 0.16);
  --hair-b2: rgb(244 238 230 / 0.32);
  /* the chart's colours, after the brochure's legend */
  --c-1: #A3A07F;
  --c-2: #DCCB98;
  --c-2s: #C8AE62;
  --c-3: #AEB5C2;
  --c-3s: #DDB7BE;
  --c-4s: #B48A93;

  --sc-canvas: var(--paper);
  --sc-surface: var(--card);
  --sc-ink: var(--ink);
  --sc-ink-soft: var(--ink-soft);
  --sc-accent: var(--wine);
  --sc-accent-ink: #FFFFFF;
  --sc-font-display: "Cardo", Garamond, Georgia, serif;
  --sc-font-text: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-font-mono: var(--sc-font-text);
  --sc-hairline: var(--hair);
  --sc-hairline-strong: var(--hair-2);
  --sc-shadow-color: 345 30% 14%;
  --sc-r-sm: 3px; --sc-r-md: 6px; --sc-r-lg: 14px;

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

html { background: var(--paper); scroll-padding-top: calc(var(--bar-h) + 1rem); }
body { background: var(--paper); color: var(--ink); font-family: var(--sc-font-text); font-weight: 400; font-size: 1.0625rem; line-height: 1.62; }
::selection { background: var(--wine); 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; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: var(--gut); top: -4rem; z-index: 200; background: var(--card); color: var(--ink); 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.45rem + 2.4vw, 3.7rem)/1.06 var(--sc-font-display);
  letter-spacing: -0.01em; text-wrap: balance; max-width: 19ch;
}
.h3 { font: 600 0.74rem/1.3 var(--sc-font-text); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-ink); }
.kicker { font: 600 0.74rem/1.3 var(--sc-font-text); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 0.9rem; }
.kicker--lt { color: var(--gold); }
.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(--ink-soft); }
.credit { font-size: 0.74rem; font-style: normal; letter-spacing: 0.03em; color: var(--ink-soft); }
.link-arrow {
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
  font-weight: 600; text-decoration: underline; text-decoration-color: var(--wine); 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; } }

/* the brochure's handwriting, drawn in the current colour */
.script { display: block; background: currentColor; -webkit-mask: var(--m) left center / contain no-repeat; mask: var(--m) left center / contain no-repeat; }
.script--life { --m: url("assets/life-centred.svg"); width: clamp(11rem, 7rem + 9vw, 16.5rem); aspect-ratio: 283 / 91; }
.script--places { --m: url("assets/places-centred.svg"); width: clamp(10rem, 7rem + 7vw, 15rem); aspect-ratio: 342 / 91; }
.script--experiences { --m: url("assets/experiences-centred.svg"); width: clamp(13rem, 9rem + 9vw, 20rem); aspect-ratio: 516 / 91; }
.script--moments { --m: url("assets/moments-centred.svg"); width: clamp(11rem, 7.5rem + 7.5vw, 16rem); aspect-ratio: 382 / 91; }

/* --------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.8rem 1.6rem;
  background: var(--wine); color: #fff;
  font: 600 0.84rem/1 var(--sc-font-text); letter-spacing: 0.12em; 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: #8E2D47; } }
.btn--block { width: 100%; }
.btn--sm { min-height: 2.5rem; padding: 0.5rem 1.05rem; font-size: 0.72rem; }
.btn--gold { background: var(--gold); color: var(--burg-2); }
@media (hover: hover) and (pointer: fine) { .btn--gold:hover { background: #E8D2AE; } }

/* ---------------------------------------------------------------- frames -- */
.frame { position: relative; overflow: hidden; border-radius: var(--sc-r-md); background: var(--paper-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, .stretch 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(30 14 18 / 0.82) 0, rgb(30 14 18 / 0.46) 50%, rgb(30 14 18 / 0) 100%);
}
figure.frame > figcaption .credit, .stretch figcaption .credit { color: rgb(255 255 255 / 0.82); }
.zoom { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.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(251 248 244 / 0.94); color: var(--ink); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; box-shadow: var(--sc-e1); }

/* -------------------------------------------------------- the thumb index -- */
/* The navigation: the brochure's fore-edge at the left of the screen. One tab
   per chapter in its colour, as tall as its sections; the tab you are in
   pulls out, its notches marking its sections and a fill how far through. */
.thumbs { position: fixed; left: 0; top: 50%; z-index: 60; transform: translateY(-50%); display: flex; align-items: center; gap: 0.6rem; transition: opacity 300ms var(--sc-ease-out); }
.thumbs.is-hidden { opacity: 0; pointer-events: none; }
.thumbs__tabs { display: flex; flex-direction: column; gap: 5px; }
.thumbs__tabs li { display: block; }
.thumb {
  position: relative; display: block; width: 10px; height: calc(var(--n) * 34px); padding: 0; border: 0; cursor: pointer;
  background: var(--c); border-radius: 0 6px 6px 0; overflow: hidden;
  box-shadow: 1px 0 0 rgb(255 255 255 / 0.25) inset, 0 4px 12px -6px rgb(30 14 18 / 0.45);
  transition: width 320ms cubic-bezier(.3,1.3,.5,1), filter 200ms;
}
.thumb::before { content: ""; position: absolute; inset: 0; background: url("assets/wash-estate-889.webp") center / 300px auto; mix-blend-mode: multiply; opacity: 0.35; }
.thumb.is-here { width: 30px; }
@media (hover: hover) and (pointer: fine) { .thumb:hover { width: 22px; } .thumb.is-here:hover { width: 32px; } }
.thumb__fill { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--f, 0) * 100%); background: rgb(255 255 255 / 0.22); transition: height 120ms linear; }
.thumb__notches { position: absolute; inset: 0; display: flex; flex-direction: column; }
.thumb__notches i { flex: 1; position: relative; }
.thumb__notches i + i { border-top: 1px solid rgb(255 255 255 / 0.4); }
.thumb.is-here .thumb__notches i.is-on::after { content: ""; position: absolute; right: 6px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px rgb(40 14 22 / 0.25); }
.thumbs__open { display: grid; padding: 0.4rem 0.8rem 0.45rem; border: 0; border-radius: 12px; background: rgb(251 248 244 / 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; text-align: left; color: var(--ink); box-shadow: 0 6px 18px -10px rgb(30 14 18 / 0.35); opacity: 0; transform: translateX(-6px); transition: opacity 260ms var(--sc-ease-out), transform 260ms var(--sc-ease-out); }
.thumbs:hover .thumbs__open, .thumbs:focus-within .thumbs__open, .thumbs.is-show .thumbs__open { opacity: 1; transform: none; }
.thumbs__strip { display: none; }
.thumbs__read { display: grid; }
.thumbs__ch { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-ink); }
.thumbs__s { font: 400 1.02rem/1.25 var(--sc-font-display); }
.topbook { position: fixed; top: 16px; right: 16px; z-index: 61; transition: opacity 260ms var(--sc-ease-out), transform 260ms var(--sc-ease-out), background-color 160ms; }
.topbook.is-away { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.topbook.is-dark { background: var(--gold); color: var(--burg-2); }

/* ----------------------------------------------------------------- hero -- */
.hero { position: relative; height: 100svh; min-height: 620px; overflow: hidden; background: var(--burg); color: var(--burg-ink); isolation: isolate; }
.hero__paper { position: absolute; inset: 0; background: var(--burg) url("assets/paper-burgundy-1181.webp") center / cover; }
.hero__paper::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 30% 40%, rgb(94 43 56 / 0) 40%, rgb(40 14 22 / 0.42) 100%); }
.hero__cairn { position: absolute; inset: 0; }
/* one stone: a window cut in the paper onto the view behind it */
.hstone { position: absolute; left: 0; top: 0; overflow: hidden; will-change: transform; -webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat; background: #BCD3E6; }
.hstone__in { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.hstone__in img { position: absolute; left: 0; top: 0; max-width: none; will-change: transform; }
.hstone::after { content: ""; position: absolute; inset: 0; background: radial-gradient(closest-side, rgb(40 14 22 / 0) 72%, rgb(40 14 22 / 0.34) 100%); pointer-events: none; }
.hero__copy { position: absolute; z-index: 2; left: max(var(--gut), calc((100vw - 76rem) / 2)); top: 50%; transform: translateY(-50%); width: min(30rem, 40vw); }
.hero__kicker { font: 600 0.74rem/1.3 var(--sc-font-text); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.hero__mark { margin-top: 1.4rem; color: var(--gold); line-height: 0; }
.hero__mark svg { display: block; width: clamp(11rem, 6rem + 13vw, 19rem); height: auto; overflow: visible; }
.hero__verse { margin-top: 1.1rem; color: var(--gold); }
.hero__lede { margin-top: 1.4rem; font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); line-height: 1.6; max-width: 34ch; color: var(--burg-ink); text-wrap: pretty; }
.hero__copy .btn { margin-top: 1.8rem; }
.hero__credit { position: absolute; z-index: 2; right: var(--gut); bottom: 1rem; color: var(--burg-soft); }
.hero__still { display: none; }

/* ------------------------------------------------------- chapter fields -- */
.sec { position: relative; padding-bottom: var(--sect); }
.sec--paper2 { background: var(--paper-2); padding-top: var(--sect); }
.chap { position: relative; overflow: hidden; min-height: 88svh; display: grid; align-items: center; color: var(--field-ink); background: var(--olive); margin-bottom: var(--sect); isolation: isolate; }
.chap--landscape { background: var(--clay); }
.chap--home { background: var(--terra); }
.chap__wash { position: absolute; inset: 0; z-index: -1; background: url("assets/wash-estate-889.webp") center / cover; mix-blend-mode: multiply; opacity: 0.3; }
.chap--landscape .chap__wash { background-image: url("assets/wash-landscape-900.webp"); }
.chap--home .chap__wash { background-image: url("assets/wash-home-889.webp"); }
.chap__in { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; min-height: 88svh; }
.chap__text { padding-block: 5rem; }
.chap__label { margin-top: 1.6rem; font: 600 0.78rem/1.3 var(--sc-font-text); letter-spacing: 0.3em; text-transform: uppercase; }
.chap__big { margin-top: 0.7rem; font: 400 clamp(2.8rem, 1.6rem + 4vw, 5.4rem)/1.02 var(--sc-font-display); letter-spacing: -0.015em; text-wrap: balance; max-width: 12ch; }
.chap__big i { font-style: italic; }
.chap__line { margin-top: 1.5rem; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); line-height: 1.55; max-width: 30ch; text-wrap: pretty; }
.chap__cairn { justify-self: center; height: 116svh; width: auto; max-width: none; margin-block: -14svh; filter: drop-shadow(0 22px 26px rgb(20 10 8 / 0.28)); will-change: transform; }

/* --------------------------------------------------- the estate: developers -- */
.dev { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: 3rem 4rem; align-items: start; }
.dev__head { grid-column: 1; }
.dev__aerial { grid-column: 2; grid-row: 1 / span 2; aspect-ratio: 1775 / 1264; }
.devs { grid-column: 1; display: grid; gap: 1.6rem; }
.devs__one p:last-child { margin-top: 0.45rem; font-size: 0.98rem; color: var(--ink-soft); }
.past { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: flex-end; margin-top: 0.5rem; }
.past li { display: grid; gap: 0.5rem; width: 8.5rem; font-size: 0.86rem; }
.past img { width: 100%; height: 10.5rem; object-fit: cover; border-radius: var(--sc-r-md); box-shadow: var(--sc-e1); }
.past .past__credit { width: auto; align-self: end; }
.particulars { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 2rem; border-top: 1px solid var(--hair-2); margin-top: 1rem; }
.particulars > div { padding: 0.95rem 0; border-bottom: 1px solid var(--hair); }
.particulars dt { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.particulars dd { margin-top: 0.3rem; font-size: 0.98rem; font-weight: 500; }

/* ----------------------------------------------------- the estate: location -- */
.loc__head { margin-bottom: 2.5rem; }
.loc__map { border-radius: var(--sc-r-lg); overflow: hidden; box-shadow: var(--sc-e2); }
.near { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 4rem; margin-top: 3.5rem; }
.near__t { font: 400 1.65rem/1.2 var(--sc-font-display); margin-bottom: 0.7rem; }
.times li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: 0.55rem 0; border-bottom: 1px solid var(--hair); font-size: 0.97rem; }
.times li span small { color: var(--ink-soft); font-size: 0.86em; }
.times li b { font-weight: 600; white-space: nowrap; text-align: right; color: var(--wine); }
.times .times__sub { display: block; padding: 1rem 0 0.25rem; border-bottom: 0; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-ink); }
/* small pictures cut into the brochure's stones */
.pebbles { display: grid; grid-template-columns: 1.5fr 0.8fr 0.9fr 1.3fr; gap: 1.5rem 2rem; align-items: end; margin-top: 4.5rem; }
.pebble { display: grid; gap: 0.7rem; justify-items: center; font-size: 0.88rem; color: var(--ink-soft); text-align: center; }
.pebble__win { width: 100%; overflow: hidden; -webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat; }
.pebble__win img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pebble--a .pebble__win, .pebble__win.pebble--a { --m: url("assets/stone-a.svg"); aspect-ratio: 1000 / 513; }
.pebble--b .pebble__win, .pebble__win.pebble--b { --m: url("assets/stone-b.svg"); aspect-ratio: 1000 / 636; }
.pebble--c .pebble__win, .pebble__win.pebble--c { --m: url("assets/stone-c.svg"); aspect-ratio: 1000 / 452; }
.pebble--d .pebble__win, .pebble__win.pebble--d { --m: url("assets/stone-d.svg"); aspect-ratio: 1000 / 983; }
.pebble--e .pebble__win, .pebble__win.pebble--e { --m: url("assets/stone-e.svg"); aspect-ratio: 1000 / 720; }
.future { margin-top: 4.5rem; padding-top: 2rem; border-top: 1px solid var(--hair-2); }
.future__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 4rem; margin-bottom: 1.4rem; }
.future__list li { display: grid; gap: 0.2rem; font-size: 0.97rem; }
.future__list span { color: var(--ink-soft); }

/* ------------------------------------------------- the peak: stone by stone -- */
.peak { position: relative; height: 380vh; }
.peak__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; background: radial-gradient(90% 80% at 72% 55%, #F3EEE7 0, var(--paper) 55%, #DED3C8 100%); }
.peak__full { position: absolute; inset: 0; opacity: 0; }
.peak__full img { width: 100%; height: 100%; object-fit: cover; display: block; }
.peak__full::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(26 14 14 / 0.7) 0, rgb(26 14 14 / 0.42) 34%, rgb(26 14 14 / 0) 62%); }
.peak__cairn { position: absolute; inset: 0; }
.pstone { position: absolute; left: 0; top: 0; will-change: transform; }
.pstone__win { position: absolute; inset: 0; overflow: hidden; -webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat; background: var(--paper-2); }
.pstone__win img { position: absolute; display: block; max-width: none; }
.pstone__own { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pstone__all { opacity: 0; }
.pstone__win::after { content: ""; position: absolute; inset: 0; background: radial-gradient(closest-side, rgb(30 14 18 / 0) 78%, rgb(30 14 18 / 0.22) 100%); }
.pstone__shadow { position: absolute; left: 8%; right: 8%; bottom: -7%; height: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgb(40 24 20 / 0.32), rgb(40 24 20 / 0)); opacity: 0; }
.peak__copy { position: absolute; z-index: 2; left: max(var(--gut), calc((100vw - 76rem) / 2)); top: 50%; transform: translateY(-50%); width: min(26rem, 36vw); transition: color 500ms var(--sc-ease-out); }
.peak__title { max-width: 10ch; }
.peak__list { margin-top: 1.8rem; display: grid; gap: 0.15rem; counter-reset: s; }
.peak__list li { display: grid; gap: 0.15rem; padding: 0.6rem 0 0.6rem 1rem; border-left: 2px solid var(--hair); opacity: 0.18; transform: translateY(8px); transition: opacity 360ms var(--sc-ease-out), transform 360ms var(--sc-ease-out), border-color 360ms var(--sc-ease-out); }
.peak__list li b { font: 400 1.32rem/1.2 var(--sc-font-display); }
.peak__list li span { font-size: 0.93rem; color: var(--ink-soft); }
.peak__list li.is-in { opacity: 0.6; transform: none; }
.peak__list li.is-on { opacity: 1; border-color: var(--clay); }
.peak__end { margin-top: 1.6rem; font: italic 400 1.6rem/1.2 var(--sc-font-display); opacity: 0; transform: translateY(8px); transition: opacity 500ms var(--sc-ease-out), transform 500ms var(--sc-ease-out); }
.peak.is-whole .peak__end { opacity: 1; transform: none; }
.peak.is-open .peak__copy { color: #fff; text-shadow: 0 1px 18px rgb(20 10 10 / 0.45); }
.peak.is-open .peak__list { display: none; }
.peak.is-open .peak__end { font-size: clamp(1.7rem, 1.3rem + 1vw, 2.3rem); margin-top: 1rem; }
.peak__credit { position: absolute; right: var(--gut); bottom: 1rem; transition: color 500ms; }
.peak.is-open .peak__credit { color: rgb(255 255 255 / 0.8); }
.peak__still { display: none; }

/* ------------------------------------------------ the landscape: site plan -- */
.sp__head { margin-bottom: 2.25rem; }
.sp__tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.sp__tabs button { display: grid; gap: 0.15rem; text-align: left; padding: 0.6rem 1rem; border-radius: var(--sc-r-md); border: 1px solid var(--hair-2); background: var(--card); cursor: pointer; font-size: 0.82rem; color: var(--ink-soft); }
.sp__tabs button b { font: 400 1.1rem/1.15 var(--sc-font-display); color: var(--ink); }
.sp__tabs [aria-selected="true"] { border-color: var(--wine); box-shadow: inset 0 -3px 0 var(--wine); }
.sp__panel { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2rem 3rem; align-items: start; }
.sp__sheet { position: relative; border-radius: var(--sc-r-lg); overflow: hidden; background: #E8E1DA; 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: 2.3rem; height: 2.3rem; margin: -1.15rem 0 0 -1.15rem; border-radius: 50%; border: 2.5px solid var(--wine); box-shadow: 0 0 0 4px rgb(255 255 255 / 0.7); opacity: 0; transform: scale(0.6); transition: opacity 180ms var(--sc-ease-out), transform 180ms var(--sc-ease-out); }
.sp__rings i.is-on { opacity: 1; transform: none; }
.sp__credit { position: absolute; left: 0.75rem; bottom: 0.6rem; }
.sp__legend { display: grid; gap: 1.2rem; }
.sp__grp p { display: flex; align-items: center; gap: 0.5rem; font: 400 1.2rem/1.2 var(--sc-font-display); margin-bottom: 0.35rem; }
.sp__grp p::before { content: ""; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--dot); }
.sp__grp ol { columns: 2; column-gap: 1.5rem; }
.sp__grp li { display: flex; gap: 0.55rem; padding: 0.22rem 0.35rem; border-radius: 4px; font-size: 0.92rem; break-inside: avoid; cursor: default; }
.sp__grp li b { min-width: 1.5rem; font-weight: 600; color: var(--wine); font-variant-numeric: tabular-nums; }
.sp__grp li.is-on { background: rgb(120 36 59 / 0.1); }
.sp__other { margin-top: 1rem; }
.fac { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.25rem; margin-top: 4rem; }
.fac__big { grid-column: 1 / span 8; aspect-ratio: 1775 / 1263; }
.fac__tall { grid-column: 9 / span 4; grid-row: 1 / span 2; aspect-ratio: auto; min-height: 100%; }
.fac__gym { grid-column: 1 / span 5; aspect-ratio: 1282 / 992; }
.fac__fam { grid-column: 6 / span 3; aspect-ratio: auto; }
.fac__fam img { object-position: 40% 50%; }

/* -------------------------------------------------------------- the homes -- */
.stretch { position: relative; margin-bottom: 4rem; }
.stretch img { display: block; width: 100%; height: min(82svh, 56vw); object-fit: cover; }
.stretch figcaption { padding-inline: max(var(--gut), calc((100% - 76rem) / 2)); }
.coll { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2rem 4rem; align-items: center; }
.coll__k { font: 600 0.74rem/1.3 var(--sc-font-text); letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-ink); }
.coll__t { margin-top: 0.6rem; font: 400 clamp(1.9rem, 1.4rem + 1.4vw, 2.7rem)/1.1 var(--sc-font-display); text-wrap: balance; }
.coll__size { margin: 0.5rem 0 1rem; font-weight: 600; color: var(--wine); }
.coll__one p:last-child { color: var(--ink-soft); max-width: 44ch; }
.coll__pic { aspect-ratio: 1775 / 994; }
.coll__one--b { grid-column: 2; grid-row: 3; }
.coll__pic--b { grid-column: 1; grid-row: 3; }
.fin { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; margin-bottom: 2rem; }
.fin img { display: block; width: 100%; aspect-ratio: 446 / 600; object-fit: cover; border-radius: var(--sc-r-md); }
.fin--b { grid-row: 4; margin-bottom: 0; }
.coll__credit { grid-column: 1 / -1; margin-top: -1rem; }
.smart { margin-top: 4.5rem; padding-top: 2rem; border-top: 1px solid var(--hair-2); }
.smart__list { columns: 3; column-gap: 2.5rem; }
.smart__list li { padding: 0.5rem 0 0.5rem 1.2rem; position: relative; break-inside: avoid; font-size: 0.96rem; }
.smart__list li::before { content: ""; position: absolute; left: 0; top: 0.95rem; width: 0.55rem; height: 0.4rem; border-radius: 50% 50% 46% 54%; background: var(--terra); }
.brochure { margin-top: 3.5rem; }
.brochure__card { display: inline-flex; align-items: center; gap: 1.4rem; padding: 0.9rem 1.6rem 0.9rem 0.9rem; border-radius: var(--sc-r-lg); background: var(--card); box-shadow: var(--sc-e2); text-decoration: none; transition: transform 200ms var(--sc-ease-out), box-shadow 200ms var(--sc-ease-out); }
.brochure__card img { width: 5.4rem; height: auto; border-radius: 4px; box-shadow: var(--sc-e1); }
.brochure__text { display: grid; gap: 0.2rem; }
.brochure__text b { font: 400 1.4rem/1.2 var(--sc-font-display); }
.brochure__text span { font-size: 0.88rem; color: var(--ink-soft); }
@media (hover: hover) and (pointer: fine) { .brochure__card:hover { transform: translateY(-2px); box-shadow: var(--sc-e3); } }

/* ----------------------------------------------------------- floor plans -- */
.plans__head { margin-bottom: 2.5rem; }
.types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.type { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; align-items: center; width: 100%; padding: 0.75rem; text-align: left; border-radius: var(--sc-r-lg); border: 1px solid var(--hair); background: var(--card); cursor: pointer; transition: border-color 160ms, box-shadow 160ms, transform 160ms; }
@media (hover: hover) and (pointer: fine) { .type:hover { border-color: var(--wine); box-shadow: var(--sc-e2); transform: translateY(-1px); } }
.type__thumb { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--sc-r-md); background: #E8E1DA; }
.type__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 60%; display: block; }
.type__name { display: block; font: 400 1.35rem/1.15 var(--sc-font-display); }
.type__meta { display: block; margin-top: 0.25rem; font-size: 0.86rem; color: var(--ink-soft); line-height: 1.45; }
.type__left { display: inline-block; margin-top: 0.45rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; color: var(--wine); }
.plans__dl { margin-top: 1.75rem; }

/* ---------------------------------------------------------- availability -- */
.avail__head { margin-bottom: 2rem; }
.avail__num { color: var(--wine); font-variant-numeric: tabular-nums; }
.avail__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; margin-bottom: 1.6rem; }
.avail__asat { max-width: 44ch; }
.filter { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.filter button { padding: 0.5rem 0.95rem; border-radius: 999px; border: 1px solid var(--hair-2); background: var(--card); cursor: pointer; font-size: 0.86rem; font-weight: 500; }
.filter [aria-checked="true"] { background: var(--wine); border-color: var(--wine); color: #fff; }
.blocks { display: flex; gap: 1.4rem; align-items: flex-start; }
.blk { flex: var(--n) 1 0; min-width: 0; }
.blk__name { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-bottom: 0.5rem; font: 400 1.2rem/1.2 var(--sc-font-display); }
.blk__name small { font: 600 0.72rem/1 var(--sc-font-text); letter-spacing: 0.06em; color: var(--wine); }
.blk__grid { display: grid; grid-template-columns: 1.3rem repeat(var(--n), minmax(0, 1fr)); gap: 3px; }
.blk__lvl, .blk__stk { font-size: 0.64rem; color: var(--ink-soft); display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.blk__stk { padding-top: 0.2rem; }
.cell { aspect-ratio: 1 / 0.82; border-radius: 3px; border: 1px solid var(--hair); background: transparent; padding: 0; min-width: 0; }
.cell--none { border-color: transparent; }
.cell--open { cursor: pointer; border-color: rgb(42 33 36 / 0.18); background: var(--cc); color: var(--ink); font: 600 clamp(0.52rem, 0.38rem + 0.25vw, 0.68rem)/1 var(--sc-font-text); letter-spacing: 0.01em; transition: transform 140ms var(--sc-ease-out), opacity 200ms var(--sc-ease-out), box-shadow 140ms; }
@media (hover: hover) and (pointer: fine) { .cell--open:hover { transform: scale(1.12); box-shadow: var(--sc-e2); position: relative; z-index: 1; } }
.cell--open.is-dim { opacity: 0.16; }
.cell--open.is-hl { box-shadow: 0 0 0 2px var(--wine), 0 0 0 5px rgb(120 36 59 / 0.25); position: relative; z-index: 1; }
.blocks__key { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-top: 1.4rem; font-size: 0.86rem; color: var(--ink-soft); }
.blocks__key span { display: inline-flex; align-items: center; gap: 0.45rem; }
.blocks__key i { width: 0.95rem; height: 0.8rem; border-radius: 2px; border: 1px solid rgb(42 33 36 / 0.18); }
.avail__how { margin-top: 1rem; }
.blocks__swipe { display: none; }

/* ------------------------------------------------------------ the close -- */
.close { position: relative; background: var(--burg) url("assets/paper-burgundy-1181.webp") center / cover; color: var(--burg-ink); padding: var(--sect) 0; overflow: hidden; }
.close__in { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 3rem 4rem; align-items: start; }
.close__cairn { position: sticky; top: 6svh; height: 88svh; }
.cstone { position: absolute; left: 0; top: 0; }
.cstone img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 12px 16px rgb(24 6 12 / 0.38)); }
.cstone__mark { position: absolute; left: 50%; top: 50%; width: 48%; transform: translate(-50%, -46%); color: var(--gold); }
.cstone__mark svg { display: block; width: 100%; height: auto; }
.cstone--place { border: 0; }
.cstone--place svg { width: 100%; height: 100%; display: block; overflow: visible; }
.cstone--place use { fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; opacity: 0.7; }
.cstone--last { opacity: 0; }
.close.is-sent .cstone--place { opacity: 0; transition: opacity 300ms; }
.close__side { display: grid; gap: 2rem; }
.book__intro .h2 { color: var(--burg-ink); }
.book__intro .lede { margin-top: 1rem; color: var(--burg-ink); }
.book__facts { margin-top: 1.4rem; border-top: 1px solid var(--hair-b2); }
.book__facts > div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--hair-b); font-size: 0.98rem; }
.book__facts dt { color: var(--burg-soft); }
.book__facts a { color: var(--burg-ink); text-decoration-color: var(--gold); text-underline-offset: 0.25em; }

/* ----------------------------------------------------- the booking card -- */
.card { background: var(--card); color: var(--ink); border-radius: var(--sc-r-lg); }
.tb { position: relative; overflow: hidden; box-shadow: 0 30px 60px -20px rgb(20 6 12 / 0.6); }
.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(--wine); }
.tb__title { font: italic 400 1.8rem/1.1 var(--sc-font-display); color: var(--ink); }
.tb__sub { margin-top: 0.45rem; font-size: 0.93rem; color: var(--ink-soft); }
.tb__interest { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1.5rem; background: #F1E4E3; 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(--ink-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(--gold-ink); }
.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(--ink);
  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(--ink-soft); }
.when__v { font-size: 0.92rem; font-weight: 500; color: var(--ink-soft); }
.when__tabs button.is-set .when__v { color: var(--ink); }
.when__tabs [aria-selected="true"] { border-color: var(--wine); box-shadow: inset 0 -3px 0 var(--wine); }
@media (hover: hover) and (pointer: fine) { .when__tabs button:hover { border-color: var(--wine); } }
.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(--ink-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(--ink);
  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(--ink-soft); }
.when__dates .pad { visibility: hidden; }
@media (hover: hover) and (pointer: fine) { .when__dates button:hover, .when__times button:hover { border-color: var(--wine); } }
.when__dates [aria-checked="true"], .when__times [aria-checked="true"] { background: var(--wine); border-color: var(--wine); 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-ink); }
.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(--ink-soft); margin-bottom: 0.45rem; }
.field input {
  width: 100%; min-height: 2.9rem; padding: 0.65rem 0.8rem;
  background: #FFFDFB; border: 1px solid rgb(42 33 36 / 0.32); border-radius: var(--sc-r-sm);
  font: 400 1rem/1.2 var(--sc-font-text); color: var(--ink);
  transition: border-color 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out);
}
.field input::placeholder { color: color-mix(in oklab, var(--ink-soft) 85%, transparent); }
.field input:focus-visible { border-color: var(--wine); 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__fineprint { margin-top: 1rem; font-size: 0.82rem; line-height: 1.55; color: var(--ink-soft); text-align: center; text-wrap: pretty; }
.tb__status { padding: 1rem 1.5rem; font-size: 0.93rem; }
.tb__status.is-ok { background: #EFE6DC; color: #3A2A22; }
.tb__status.is-wait { background: #F1EAE6; color: var(--ink); }
.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) 2.75rem; font-size: 0.88rem; background: var(--burg-2); color: var(--burg-soft); border-top: 1px solid var(--hair-b); }
.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(--burg-ink); text-decoration-color: var(--gold); text-underline-offset: 0.25em; }

/* ------------------------------------------------------------- dialogs -- */
dialog { border: 0; padding: 0; color: var(--ink); background: var(--card); box-shadow: var(--sc-e3); }
dialog::backdrop { background: rgb(30 12 18 / 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.35rem/1.2 var(--sc-font-display); color: var(--ink); }
.dlg-close { min-height: 2.5rem; padding: 0.4rem 1rem; border-radius: 999px; cursor: pointer; background: var(--wine); color: #fff; border: 0; font-size: 0.8rem; 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(46rem, calc(100svh - 2rem)); }
.index-dlg[open] { display: grid; grid-template-rows: auto 1fr; }
.index-dlg__list { padding: 0.5rem 1.1rem 1.1rem; overflow: auto; display: flex; flex-direction: column; }
.index-dlg__list a { display: grid; grid-template-columns: 2.6rem 6.8rem 1fr; align-items: center; gap: 0.6rem; padding: 0.55rem 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(--paper); }
.index-dlg__list a.is-here .ix__name { color: var(--wine); }
.ix__p { display: block; width: 0.7rem; height: 1.7rem; border-radius: 0 4px 4px 0; background: var(--c); justify-self: center; }
.ix__ch { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.ix__name { font: 400 1.12rem/1.2 var(--sc-font-display); }
.plan-dlg { width: min(72rem, calc(100vw - 2rem)); height: min(56rem, 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.7fr) minmax(0, 1.5fr); 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(--gold-ink); }
.plan-dlg__meta .facts { display: grid; gap: 0; border-top: 1px solid var(--hair-2); margin-top: 0.75rem; }
.plan-dlg__meta .facts div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--hair); font-size: 0.93rem; }
.plan-dlg__meta .facts dt { color: var(--ink-soft); }
.plan-dlg__meta .facts dd { text-align: right; font-weight: 600; }
.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(--ink-soft); line-height: 1.6; }
.plan-dlg__units b { color: var(--ink); }
.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(--wine); color: #fff; border-color: var(--wine); }
.plan-dlg__img { overflow: auto; background: #EAE3DB; display: grid; place-items: start center; }
.plan-dlg__img img { width: 100%; 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: #EAE3DB; 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) {
  .dev { grid-template-columns: 1fr; }
  .dev__aerial { grid-column: 1; grid-row: auto; }
  .devs { grid-column: 1; }
  .particulars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .near { grid-template-columns: 1fr; }
  .sp__panel { grid-template-columns: 1fr; }
  .types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .smart__list { columns: 2; }
  .close__in { grid-template-columns: 1fr; }
  .close__cairn { position: relative; top: 0; height: 64svh; max-width: 26rem; margin-inline: auto; width: 100%; }
  .peak__copy { width: min(22rem, 40vw); }
}

/* =============================================================== PHONE == */
@media (max-width: 860px) {
  :root { --bar-h: calc(3.5rem + env(safe-area-inset-top, 0px)); --sect: clamp(3.5rem, 12vw, 5rem); }
  .wrap { width: calc(100% - 2 * var(--gut)); }
  /* the thumb index becomes a slim bar at the top: the chapters as a strip of tabs */
  .thumbs { left: 0; right: 0; top: 0; transform: none; height: var(--bar-h); padding: env(safe-area-inset-top, 0px) 0.6rem 0 0.75rem; align-items: center; background: rgb(236 230 222 / 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hair); }
  .thumbs.is-dark { background: rgb(76 34 48 / 0.94); border-bottom-color: var(--hair-b); color: var(--burg-ink); }
  .thumbs__tabs { display: none; }
  .thumbs__open { opacity: 1; transform: none; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; display: flex; align-items: center; gap: 0.7rem; padding: 0.2rem 0.2rem; color: inherit; min-width: 0; }
  .thumbs.is-dark .thumbs__ch { color: var(--gold); }
  .thumbs__strip { display: flex; align-items: flex-end; gap: 2px; width: 3.4rem; height: 1.6rem; flex: 0 0 auto; }
  .thumbs__strip i { position: relative; flex: var(--n) 1 0; height: 0.55rem; background: var(--c); border-radius: 2px 2px 0 0; overflow: hidden; transition: height 260ms cubic-bezier(.3,1.3,.5,1); }
  .thumbs__strip i.is-here { height: 1.6rem; }
  .thumbs__strip i b { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--f, 0) * 100%); background: rgb(255 255 255 / 0.3); }
  .thumbs__s { font-size: 1rem; max-width: 52vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbook { top: calc(env(safe-area-inset-top, 0px) + 0.5rem); right: 0.6rem; padding-inline: 0.9rem; }
  .topbook.is-away { opacity: 1; transform: none; pointer-events: auto; }
  /* on phones the words come first and the cairn rises beneath them */
  .hero { height: auto; min-height: 100svh; padding: calc(var(--bar-h) + 1.2rem) 0 min(58svh, 128vw); }
  .hero__copy { position: relative; left: auto; top: auto; width: auto; padding: 0 var(--gut); transform: none; }
  .hero__kicker { font-size: 0.66rem; }
  .hero__mark { margin-top: 0.9rem; }
  .hero__mark svg { width: 9.5rem; }
  .hero__verse { margin-top: 0.6rem; }
  .script--life { width: 10rem; }
  .hero__lede { margin-top: 0.8rem; font-size: 0.98rem; max-width: 30ch; }
  .hero__copy .btn { margin-top: 1rem; min-height: 2.75rem; padding: 0.7rem 1.3rem; }
  .chap, .chap__in { min-height: 76svh; }
  .chap__in { grid-template-columns: 1fr; align-content: center; }
  .chap__text { padding-block: 3.5rem 2rem; position: relative; z-index: 1; }
  .chap__cairn { position: absolute; right: -16%; top: 50%; height: 108%; margin: 0; transform: translateY(-50%); opacity: 0.55; z-index: 0; }
  .chap__big { font-size: 2.7rem; }
  .particulars { grid-template-columns: 1fr; }
  .past li { width: calc(50% - 0.7rem); }
  .past img { height: 9rem; }
  .pebbles { grid-template-columns: 1fr 1fr; }
  .future__list { grid-template-columns: 1fr; }
  .times li { font-size: 0.92rem; }
  .peak { height: 360vh; }
  .peak__copy { left: var(--gut); right: var(--gut); width: auto; top: calc(var(--bar-h) + 1rem); transform: none; }
  .peak__title { font-size: 2.1rem; }
  .peak__list { margin-top: 0.6rem; display: block; min-height: 4.6rem; position: relative; }
  .peak__list li { position: absolute; left: 0; right: 0; top: 0; border-left: 0; padding: 0; opacity: 0; }
  .peak__list li.is-in { opacity: 0; }
  .peak__list li.is-on { opacity: 1; }
  .peak__list li b { font-size: 1.2rem; }
  .peak__list li span { font-size: 0.88rem; }
  .peak__end { position: absolute; left: 0; right: 0; top: 100%; margin-top: 0.4rem; font-size: 1.4rem; }
  .peak.is-whole .peak__list li.is-on { opacity: 0; }
  .peak__full::after { background: linear-gradient(180deg, rgb(26 14 14 / 0.6) 0, rgb(26 14 14 / 0.2) 34%, rgb(26 14 14 / 0) 55%); }
  .sp__tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scrollbar-width: none; }
  .sp__tabs button { flex: 0 0 auto; }
  .sp__grp ol { columns: 1; }
  .fac { grid-template-columns: 1fr; }
  .fac__big, .fac__tall, .fac__gym, .fac__fam { grid-column: auto; grid-row: auto; }
  .fac__tall { aspect-ratio: 889 / 1100; min-height: 0; }
  .fac__fam { aspect-ratio: 889 / 634; }
  .stretch img { height: 62svh; object-position: 58% 50%; }
  .coll { grid-template-columns: 1fr; }
  .coll__one--b, .coll__pic--b, .fin--b { grid-column: auto; grid-row: auto; }
  .coll__one--b { margin-top: 2rem; }
  .fin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .smart__list { columns: 1; }
  .brochure__card { display: flex; }
  .types { grid-template-columns: 1fr; }
  .blocks { overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gut)); padding: 0 var(--gut) 0.6rem; gap: 1rem; scrollbar-width: thin; }
  .blk { flex: 0 0 auto; width: calc(var(--n) * 2.15rem + 1.5rem); scroll-snap-align: start; }
  .blocks__swipe { display: block; margin-top: 0.4rem; }
  .close__cairn { height: 52svh; max-width: 19rem; }
  .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; }
}
@media (max-width: 380px) {
  .thumbs__s { max-width: 40vw; }
}

/* ===================================================== MOTION REDUCED == */
.peak.is-still { display: none; }
.peak.is-still + .peak__still { display: block; padding-top: 1rem; }
.peak__still ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; margin: 2rem 0 1rem; align-items: end; }
.peak__still li { display: grid; gap: 0.4rem; }
.peak__still li b { font: 400 1.2rem/1.2 var(--sc-font-display); margin-top: 0.5rem; }
.peak__still li span { font-size: 0.9rem; color: var(--ink-soft); }
@media (max-width: 860px) { .peak__still ul { grid-template-columns: 1fr 1fr; } }

/* ========================================================= WITHOUT SCRIPT == */
.no-js [data-sc-in], .no-js [data-sc-stagger] > * { opacity: 1; transform: none; }
.no-js .thumbs, .no-js .filter, .no-js .avail__how, .no-js .sp__tabs, .no-js .sp__side { display: none !important; }
.no-js .hero__cairn { display: none; }
.no-js .hero__still { display: block; position: absolute; right: 6%; bottom: 0; width: min(46vw, 40rem); height: auto; -webkit-mask: url("assets/stone-b.svg") center / 100% 100% no-repeat; mask: url("assets/stone-b.svg") center / 100% 100% no-repeat; }
.no-js .peak { display: none; }
.no-js .peak__still { display: block; padding-top: 1rem; }
.no-js .close__cairn { display: none; }
.nojs-note { margin-top: 1rem; }
@media (max-width: 860px) { .no-js .hero__still { width: 86vw; right: 7vw; } }