/* The Arcady at Boon Keng: an independent property feature, set as a magazine
   issue. Paper and forest chapters cut hard against each other; one terracotta
   spot colour, in two lightnesses keyed to the ground. */

:root {
  --sc-canvas:     #F2F1EB;
  --sc-surface:    #E8E7DF;
  --sc-ink:        #15231D;
  --sc-ink-soft:   #4A5850;
  --sc-accent:     #A9472A;
  --sc-accent-ink: #FFFFFF;
  --sc-font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --sc-font-text:    "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-font-mono:    "Geist", system-ui, sans-serif;

  --forest:        #18342B;
  --forest-deep:   #122820;
  --forest-ink:    #EEF0E8;
  --forest-soft:   #B3C0B7;
  --forest-accent: #E58A64;

  /* paper wants lighter, greener shadows than the engine's near-black ones */
  --sc-shadow-color: 150 25% 18%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.10), 0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.08);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.08), 0 10px 24px -6px hsl(var(--sc-shadow-color) / 0.16);
  --sc-edge: none;

  /* print corners: barely rounded, held everywhere */
  --sc-r-sm: 2px; --sc-r-md: 3px; --sc-r-lg: 4px;

  --runhead-h: 3.5rem;
  --sc-maxw: 100rem;
  /* the text edge every full-bleed band lines up with: the wrap's inner edge */
  --edge: max(var(--sc-gutter), calc((100vw - var(--sc-maxw)) / 2 + var(--sc-gutter)));
}

html { scroll-padding-top: calc(var(--runhead-h) + 0.5rem); }
body { font-feature-settings: "ss01" 0; }
.sc-display { font-weight: 400; font-optical-sizing: auto; letter-spacing: -0.022em; }
.sc-lede { color: var(--sc-ink); }
.small { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.55; margin: 0; }
.hint { white-space: nowrap; }
h3 { font-family: var(--sc-font-text); font-weight: 600; font-size: var(--sc-t-base); letter-spacing: 0; margin: 0; }

.skip {
  position: absolute; left: var(--sc-gutter); top: -4rem; z-index: 100;
  background: var(--sc-ink); color: var(--sc-canvas); padding: 0.6rem 1rem; border-radius: var(--sc-r-sm);
}
.skip:focus { top: 0.5rem; }

/* ------------------------------------------------------------ buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.75rem 1.4rem;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font: 500 var(--sc-t-base)/1 var(--sc-font-text); letter-spacing: 0.005em;
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--sc-r-sm); cursor: pointer;
  box-shadow: var(--sc-e1);
  transition: background-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn[disabled] { opacity: 0.55; cursor: progress; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: color-mix(in oklab, var(--sc-accent) 86%, black); }
}
.btn--sm { min-height: 2.5rem; padding: 0.5rem 1rem; font-size: var(--sc-t-sm); }
.btn--block { width: 100%; }
.btn--ghost { background: transparent; color: var(--sc-ink); border-color: var(--sc-ink); box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover { background: var(--sc-ink); color: var(--sc-canvas); }
}
.link-arrow { font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.link-arrow::after { content: " \2192"; }

/* ----------------------------------------------------------- dateline -- */
/* The header disclosure, as the strap above a masthead: same paper, a shade
   down, a hairline under it. Readable size and full contrast, never folded. */
.dateline {
  background: var(--sc-surface);
  border-bottom: 1px solid var(--sc-hairline-strong);
  padding: 0.7rem var(--edge);
}
.dateline__text {
  margin: 0; max-width: 150ch;
  font-size: 0.9375rem; line-height: 1.55; color: var(--sc-ink-soft);
  text-wrap: pretty;
}
.dateline__text strong { color: var(--sc-ink); font-weight: 600; }

/* ------------------------------------------------------------ runhead -- */
.runhead {
  position: sticky; top: 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; gap: var(--sc-5);
  height: var(--runhead-h); padding-inline: var(--edge);
  background: color-mix(in oklab, var(--sc-canvas) 94%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(10px); backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--sc-hairline);
}
.runhead__title {
  font-family: var(--sc-font-display); font-size: 1.25rem; letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap;
}
.runhead__title span { font-style: italic; color: var(--sc-ink-soft); }
.runhead__folio {
  margin: 0 0 0 auto; font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
  border-left: 1px solid var(--sc-hairline-strong); padding-left: var(--sc-4);
  white-space: nowrap;
}
.toc { position: relative; }
.toc summary {
  list-style: none; cursor: pointer; font-size: var(--sc-t-sm); font-weight: 500;
  padding: 0.5rem 0.25rem; border-radius: var(--sc-r-sm);
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: ""; display: inline-block; margin-left: 0.4rem; width: 0.4rem; height: 0.4rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.2rem) rotate(45deg); }
.toc[open] summary::after { transform: translateY(0.05rem) rotate(-135deg); }
.toc__list {
  position: absolute; right: 0; top: calc(100% + 0.6rem); margin: 0; padding: 0.5rem;
  min-width: 14rem; list-style: none; counter-reset: toc;
  background: var(--sc-canvas); border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e2);
}
.toc__list li { counter-increment: toc; }
.toc__list a {
  display: flex; gap: 0.75rem; padding: 0.55rem 0.75rem; text-decoration: none; border-radius: var(--sc-r-sm);
  font-size: var(--sc-t-sm);
}
.toc__list a::before { content: counter(toc); color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; min-width: 1ch; }
@media (hover: hover) and (pointer: fine) { .toc__list a:hover { background: var(--sc-surface); } }

/* --------------------------------------------------------------- cover -- */
/* Back to front: sky plate, masthead, tower cutout. The plate and the tower
   share one translation and one pivot at the tower's base, and the tower
   always scales more, so the cutout covers its own copy in the plate at every
   scroll position. The masthead lags behind both, so the building rises
   through its own name. */
.cover {
  position: relative; isolation: isolate;
  min-height: max(36rem, calc(100svh - var(--chrome-h, 8rem)));
  overflow: clip;
}
.cover__frame {
  position: absolute; top: 0; right: 0; bottom: 0; left: 40vw;
  overflow: hidden; background: #8fb6dc;
}
.cover__canvas { position: absolute; left: 0; top: -6.5vw; width: 100%; aspect-ratio: 1052 / 1342; }
.cover__plate, .cover__tower {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  transform-origin: 62.8% 74.8%;
  will-change: transform;
}
.cover__plate { z-index: 1; transform: translate3d(0, calc(var(--q, 0) * 5vh), 0) scale(calc(1 + var(--q, 0) * 0.03)); }
.cover__tower { z-index: 3; transform: translate3d(0, calc(var(--q, 0) * 5vh), 0) scale(calc(1 + var(--q, 0) * 0.10)); }
.cover__credit {
  position: absolute; z-index: 4; right: var(--sc-4); bottom: var(--sc-3); margin: 0;
  font-size: var(--sc-t-xs); color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / 0.55);
}
.cover__mast {
  position: absolute; z-index: 2; left: var(--edge); top: 3.4vw; margin: 0;
  font-family: var(--sc-font-display); font-weight: 400; color: var(--sc-ink);
  transform: translate3d(0, calc(var(--q, 0) * 13vh), 0);
  will-change: transform;
}
.cover__mast-name {
  display: block; font-size: 15.2vw; line-height: 0.8; letter-spacing: -0.045em;
  font-variation-settings: "opsz" 72; white-space: nowrap;
}
.cover__mast-sub {
  display: block; margin-top: 0.2vw; font-size: 3vw; line-height: 1; font-style: italic;
  letter-spacing: -0.015em; font-variation-settings: "opsz" 48; padding-left: 0.6vw;
}
.cover__copy {
  position: relative; z-index: 4;
  width: min(30rem, calc(40vw - var(--edge) - 3rem)); margin-left: var(--edge);
  padding-top: 22vw; padding-bottom: var(--sc-7);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sc-5);
}
.cover__standfirst {
  margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); line-height: 1.22;
  letter-spacing: -0.012em; text-wrap: balance;
}
.cover__byline { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.cover__byline .nb { white-space: nowrap; }

@media (max-width: 899px) {
  .cover { display: flex; flex-direction: column; min-height: 0; }
  .cover__mast { position: relative; left: auto; top: auto; transform: none; padding: var(--sc-6) var(--sc-gutter) 0; }
  .cover__mast-name { font-size: 18.5vw; }
  .cover__mast-sub { font-size: 6.4vw; margin-top: 2.4vw; }
  .cover__copy { width: auto; margin: 0; padding: var(--sc-5) var(--sc-gutter) var(--sc-6); gap: var(--sc-4); }
  .cover__standfirst { font-size: var(--sc-t-lg); }
  .cover__frame { position: relative; left: auto; height: 108vw; }
}

/* ------------------------------------------------------------ chapters -- */
.chapter { padding-block: var(--sc-section); }
.chapter--rule { border-top: 1px solid var(--sc-hairline-strong); }
.chapter--forest, .imprint {
  --sc-canvas: var(--forest); --sc-surface: var(--forest-deep);
  --sc-ink: var(--forest-ink); --sc-ink-soft: var(--forest-soft);
  --sc-accent: var(--forest-accent); --sc-accent-ink: #15231D;
  /* hairlines are mixed from ink where declared, so restate them on the dark ground */
  --sc-hairline: color-mix(in oklab, var(--forest-ink) 14%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--forest-ink) 28%, transparent);
  background: var(--forest); color: var(--sc-ink);
}
.chapter--forest ::selection, .imprint ::selection { background: var(--forest-accent); color: #15231D; }

/* contents */
.contents { padding-top: var(--sc-9); }
.contents__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sc-9); align-items: start; }
.facts { margin: var(--sc-6) 0 0; border-top: 1px solid var(--sc-hairline-strong); }
.facts > div, .particulars dl > div, .book__facts > div {
  display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--sc-4);
  padding: 0.7rem 0; border-bottom: 1px solid var(--sc-hairline);
}
.facts dt, .particulars dt, .book__facts dt { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); padding-top: 0.1em; }
.facts dd, .particulars dd, .book__facts dd { margin: 0; }
.contents__list ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sc-ink); }
.contents__list a {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: var(--sc-4);
  padding: var(--sc-5) 0; border-bottom: 1px solid var(--sc-hairline-strong); text-decoration: none;
}
.contents__list .n { grid-row: span 2; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); line-height: 1; color: var(--sc-accent); font-variant-numeric: lining-nums tabular-nums; }
.contents__list .t { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); line-height: 1.1; letter-spacing: -0.015em; }
.contents__list .d { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); margin-top: 0.35rem; }
@media (hover: hover) and (pointer: fine) {
  .contents__list a .t { transition: transform 180ms var(--sc-ease-out); }
  .contents__list a:hover .t { transform: translateX(0.35rem); }
}

/* developer */
.dev { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sc-8) var(--sc-9); }
.dev__head { grid-column: 1 / -1; max-width: 62rem; }
.dev__partners { grid-column: 1; list-style: none; margin: 0; padding: 0; }
.dev__partners li { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--sc-5); padding: var(--sc-5) 0; border-top: 1px solid var(--sc-hairline-strong); }
.dev__partners h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-lg); line-height: 1.2; letter-spacing: -0.01em; }
.dev__partners p { margin: 0; color: var(--sc-ink-soft); max-width: 56ch; }
.particulars {
  grid-column: 2; align-self: start;
  background: var(--sc-surface); padding: var(--sc-6); border-radius: var(--sc-r-md);
}
.particulars h3 { margin-bottom: var(--sc-3); }
.particulars dl { margin: 0 0 var(--sc-4); }
.particulars dl > div { grid-template-columns: 9.5rem minmax(0, 1fr); font-size: var(--sc-t-sm); }
.particulars dl > div:last-child { border-bottom: 0; }

/* location */
.aerial { margin-top: calc(var(--sc-section) * -1); margin-bottom: var(--sc-8); }
.aerial figure { margin: 0; }
.aerial img { width: 100%; height: clamp(16rem, 42vw, 36rem); object-fit: cover; object-position: 50% 62%; }
.loc { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sc-7) var(--sc-9); }
.loc__head { grid-column: 1 / -1; max-width: 60rem; }
.loc__map { margin: 0; grid-row: span 2; }
.loc__map a { display: block; border-radius: var(--sc-r-md); overflow: hidden; background: #fff; }
.loc__map img { width: 100%; height: auto; transition: transform 300ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .loc__map a:hover img { transform: scale(1.015); } }
figcaption { margin-top: var(--sc-3); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.loc__lists { display: grid; gap: var(--sc-7); align-content: start; }
.loc__lists h3 { margin-bottom: var(--sc-3); font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); letter-spacing: -0.015em; }
.times { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sc-hairline-strong); }
.times li { display: flex; justify-content: space-between; gap: var(--sc-4); padding: 0.6rem 0; border-bottom: 1px solid var(--sc-hairline); }
.times li span:last-child { color: var(--sc-ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* site plan */
.site { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sc-7); }
.site__head { max-width: 60rem; }
.site__plan { margin: 0; }
.site__plan a { display: block; background: #fff; border-radius: var(--sc-r-md); overflow: hidden; box-shadow: var(--sc-e1); }
.site__plan img { width: 100%; height: auto; }
.zones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-8); }
.zone h3 { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); letter-spacing: -0.015em; padding-bottom: var(--sc-3); border-bottom: 1px solid var(--sc-ink); }
.zone__level { margin: var(--sc-5) 0 var(--sc-2); font-size: var(--sc-t-sm); font-weight: 600; }
.zone__list { margin: 0; padding-left: 2.2em; columns: 2; column-gap: var(--sc-6); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.zone__list li { break-inside: avoid; padding: 0.12rem 0; }
.zone__list li::marker { color: var(--sc-accent); font-variant-numeric: tabular-nums; }
.gallery {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sc-6);
  margin-top: var(--sc-9);
}
.gallery figure { margin: 0; }
.gallery img { width: 100%; height: auto; border-radius: var(--sc-r-sm); }
.gallery__lead { grid-column: 1 / -1; }
.gallery__lead img { aspect-ratio: 1736 / 837; }
.gallery__a { grid-column: 1 / span 7; }
.gallery__b { grid-column: 9 / span 4; margin-top: var(--sc-9) !important; }

/* brochure */
.brochure { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr); gap: var(--sc-9); align-items: center; }
.brochure__cover { margin: 0; justify-self: center; width: min(100%, 24rem); }
.brochure__cover img {
  width: 100%; height: auto; border-radius: var(--sc-r-sm);
  box-shadow: 0 2px 4px rgb(5 15 10 / 0.3), 0 24px 48px -12px rgb(5 15 10 / 0.6);
  transform: rotate(-2deg);
}
.brochure__actions { display: flex; align-items: center; gap: var(--sc-4); flex-wrap: wrap; margin-top: var(--sc-6) !important; }

/* floor plans */
.plans__head { max-width: 56rem; }
.plans__tabs {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin: var(--sc-7) 0 var(--sc-6);
}
.plans__tabs button, .avail__filters button, .slot__dates button, .slot__times button, .plans__types button {
  font: 500 var(--sc-t-sm)/1.2 var(--sc-font-text); color: var(--sc-ink);
  background: transparent; border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-sm);
  padding: 0.55rem 0.85rem; cursor: pointer;
  transition: background-color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .plans__tabs button:hover, .avail__filters button:hover, .slot__dates button:hover, .slot__times button:hover, .plans__types button:hover { border-color: var(--sc-ink); }
}
.avail__filters button:disabled, .plans__types button:disabled { opacity: 0.4; cursor: default; }
.avail__filters .n { margin-left: 0.3rem; font-weight: 400; opacity: 0.7; font-variant-numeric: tabular-nums; }
.plans__tabs [aria-selected="true"], .avail__filters [aria-pressed="true"], .plans__types [aria-pressed="true"],
.slot__dates [aria-checked="true"], .slot__times [aria-checked="true"] {
  background: var(--sc-ink); color: var(--sc-canvas); border-color: var(--sc-ink);
}
.plans__panel { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: var(--sc-8); align-items: start; }
.plans__meta { position: sticky; top: calc(var(--runhead-h) + var(--sc-6)); }
.plans__types { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: var(--sc-5); }
.plans__name { font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); line-height: 1; letter-spacing: -0.02em; margin: 0 0 var(--sc-3); }
.plans__dl { margin: 0 0 var(--sc-5); border-top: 1px solid var(--sc-hairline-strong); }
.plans__dl > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--sc-4); padding: 0.6rem 0; border-bottom: 1px solid var(--sc-hairline); font-size: var(--sc-t-sm); }
.plans__dl dt { color: var(--sc-ink-soft); }
.plans__dl dd { margin: 0; }
.plans__figure { margin: 0; }
.plans__figure a { display: block; background: #fff; border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-md); overflow: hidden; }
.plans__figure img { width: 100%; height: auto; max-height: calc(100svh - var(--runhead-h) - 7rem); object-fit: contain; }
.plans__download { display: flex; align-items: center; gap: var(--sc-4); flex-wrap: wrap; margin: var(--sc-7) 0 0; }
.plans__static { margin: 0; padding-left: 1.2em; }

/* --------------------------------------------------------- availability -- */
.avail__title { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: var(--sc-6); margin-bottom: var(--sc-8); }
.avail__figure { margin: 0; font-family: var(--sc-font-display); line-height: 0.82; letter-spacing: -0.05em; white-space: nowrap; }
.avail__figure [data-sc-count] { font-size: clamp(6rem, 3rem + 13vw, 15rem); font-variation-settings: "opsz" 72; color: var(--forest-accent); }
.avail__of { font-size: var(--sc-t-2xl); letter-spacing: -0.02em; color: var(--sc-ink-soft); }
.avail__title h2 { max-width: 16ch; padding-bottom: 0.35em; }
.avail__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: var(--sc-8); align-items: start; }
.avail__filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: var(--sc-5); }
.avail__legend { display: flex; gap: var(--sc-5); list-style: none; padding: 0; margin: var(--sc-4) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.avail__legend li { display: flex; align-items: center; gap: 0.5rem; }
.sw { display: inline-block; width: 1rem; height: 0.8rem; border-radius: 1px; }
.sw--open { background: var(--forest-ink); }
.sw--na { border: 1px solid color-mix(in oklab, var(--forest-ink) 26%, transparent); }
.sw--pick { background: var(--forest-accent); }

.stack-scroll { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 2px; }
.stack { --cols: 2.6rem repeat(9, minmax(2.15rem, 1fr)); min-width: 22rem; display: grid; gap: 3px; }
.stack__row { display: grid; grid-template-columns: var(--cols); gap: 3px; }
.stack__floor {
  display: flex; align-items: center; justify-content: flex-end; padding-right: 0.5rem;
  font-size: var(--sc-t-xs); color: var(--sc-ink-soft); font-variant-numeric: tabular-nums;
}
.stack__band {
  grid-column: 2 / -1; display: flex; align-items: center; justify-content: center;
  min-height: 1.7rem; font-size: var(--sc-t-xs); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--sc-ink-soft); border: 1px dashed color-mix(in oklab, var(--forest-ink) 22%, transparent); border-radius: 1px;
}
.unit {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 1.7rem; padding: 0; border-radius: 1px;
  font: 500 0.72rem/1 var(--sc-font-text); letter-spacing: 0.01em;
  border: 1px solid color-mix(in oklab, var(--forest-ink) 18%, transparent);
  color: color-mix(in oklab, var(--forest-ink) 46%, transparent);
  background: transparent;
}
button.unit {
  cursor: pointer; color: var(--forest);
  background: var(--forest-ink); border-color: var(--forest-ink);
  transition: background-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out), opacity 200ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { button.unit:hover { background: #fff; transform: translateY(-1px); } }
button.unit:active { transform: translateY(1px); }
button.unit[aria-pressed="true"] { background: var(--forest-accent); border-color: var(--forest-accent); color: #15231D; }
button.unit:disabled { opacity: 0.2; cursor: default; transform: none; }
.unit--void { border-color: transparent; }

/* The signature: the tower assembles floor by floor with every home lit,
   then the sold ones go dark and what is left stays on. Driven once, on
   entry, by site.js toggling .is-built then .is-sorted on the stack. */
.stack.is-armed .stack__row { opacity: 0; transform: translate3d(0, 10px, 0); }
.stack.is-armed .unit--na { background: color-mix(in oklab, var(--forest-ink) 82%, transparent); color: var(--forest); border-color: transparent; }
.stack.is-built .stack__row {
  opacity: 1; transform: none;
  transition: opacity 420ms var(--sc-ease-out), transform 520ms var(--sc-ease-out);
  transition-delay: calc(var(--i, 0) * 28ms);
}
.stack.is-sorted .unit--na {
  background: transparent; color: color-mix(in oklab, var(--forest-ink) 46%, transparent);
  border-color: color-mix(in oklab, var(--forest-ink) 18%, transparent);
  transition: background-color 520ms var(--sc-ease-out), color 520ms var(--sc-ease-out), border-color 520ms var(--sc-ease-out);
  transition-delay: calc(var(--d, 0) * 1ms);
}

.pick { position: sticky; top: calc(var(--runhead-h) + var(--sc-6)); }
.pick__empty { margin: 0 0 var(--sc-5); padding: var(--sc-5); border: 1px dashed color-mix(in oklab, var(--forest-ink) 30%, transparent); border-radius: var(--sc-r-md); color: var(--sc-ink-soft); }
.pick__card { background: var(--forest-deep); padding: var(--sc-6); border-radius: var(--sc-r-md); margin-bottom: var(--sc-5); box-shadow: 0 1px 0 rgb(255 255 255 / 0.04) inset; }
.pick__unit { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-3xl); line-height: 0.95; letter-spacing: -0.03em; font-variant-numeric: lining-nums; }
.pick__type { margin: var(--sc-3) 0 0; font-weight: 500; }
.pick__size { margin: 0.2rem 0 0; color: var(--sc-ink-soft); }
.pick__note { margin-top: var(--sc-2); }
.pick__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sc-4); margin-top: var(--sc-5); }
.pick__source a { color: var(--sc-ink); }

/* ---------------------------------------------------------- reply card -- */
.book { background: var(--sc-canvas); }
.book__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--sc-9); align-items: start; }
.book__intro { position: sticky; top: calc(var(--runhead-h) + var(--sc-6)); }
.book__facts { margin: var(--sc-6) 0 0; border-top: 1px solid var(--sc-hairline-strong); }
.book__facts > div { grid-template-columns: 8.5rem minmax(0, 1fr); }
.card {
  position: relative; background: #FBFAF6; color: var(--sc-ink);
  padding: var(--sc-7) var(--sc-7) var(--sc-6); border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e2);
}
/* the perforation of a tear-out reply card */
.card::before {
  content: ""; position: absolute; left: var(--sc-5); right: var(--sc-5); top: 0.9rem; height: 0;
  border-top: 1.5px dashed var(--sc-hairline-strong);
}
.card__unit {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4);
  margin-bottom: var(--sc-6); padding: 0.75rem 1rem; background: var(--sc-surface); border-radius: var(--sc-r-sm); font-size: var(--sc-t-sm);
}
.card__unit[hidden] { display: none; }
.card__unit-x { background: none; border: 0; padding: 0.25rem; font: inherit; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; color: var(--sc-ink-soft); }
.slot { border: 0; margin: 0 0 var(--sc-6); padding: 0; min-width: 0; }
.slot legend { padding: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); letter-spacing: -0.015em; }
.slot__picked { margin: 0.2rem 0 var(--sc-4); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.slot__picked.is-set { color: var(--sc-ink); font-weight: 500; }
.slot__dates {
  display: grid; grid-auto-flow: column; grid-auto-columns: 4.1rem; gap: 0.4rem;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  padding-bottom: 0.4rem; margin-bottom: var(--sc-3);
}
.slot__dates button { display: grid; justify-items: center; gap: 0.15rem; padding: 0.55rem 0.2rem; scroll-snap-align: start; }
.slot__dates .dow { font-size: var(--sc-t-xs); text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.8; }
.slot__dates .dom { font-family: var(--sc-font-display); font-size: 1.45rem; line-height: 1; font-variant-numeric: lining-nums; }
.slot__dates .mon { font-size: var(--sc-t-xs); opacity: 0.8; }
.slot__times { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.4rem; }
.slot__times button { padding-inline: 0.2rem; font-variant-numeric: tabular-nums; }
.slot__times button:disabled, .slot__dates button:disabled { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
.slot noscript label { display: block; margin-top: var(--sc-3); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-5); margin-bottom: var(--sc-6); padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); }
.field--wide { grid-column: 1 / -1; }
.field label { display: block; font-size: var(--sc-t-sm); font-weight: 500; margin-bottom: 0.4rem; }
.field input {
  width: 100%; min-height: 3rem; padding: 0.7rem 0.85rem;
  background: #fff; border: 1px solid color-mix(in oklab, var(--sc-ink) 30%, transparent); border-radius: var(--sc-r-sm);
  transition: border-color 140ms var(--sc-ease-out);
}
.field input::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 80%, transparent); }
.field input:focus-visible { border-color: var(--sc-ink); outline-offset: 1px; }
.field input[aria-invalid="true"] { border-color: var(--sc-accent); }
.field__error { margin: 0.35rem 0 0; font-size: var(--sc-t-sm); color: var(--sc-accent); min-height: 0; }
.field__error:empty { display: none; }
.optin { display: flex; gap: 0.7rem; align-items: flex-start; margin: 0 0 var(--sc-5); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); cursor: pointer; }
.optin input { flex: none; width: 1.15rem; height: 1.15rem; margin: 0.15rem 0 0; accent-color: var(--sc-ink); }
.card__fineprint { margin: var(--sc-4) 0 0; font-size: 0.8125rem; line-height: 1.55; color: var(--sc-ink-soft); text-wrap: pretty; }
.card__status { margin-top: var(--sc-5); padding: var(--sc-4) var(--sc-5); border-radius: var(--sc-r-sm); font-size: var(--sc-t-sm); }
.card__status.is-ok { background: #E3ECE5; color: #173B2C; }
.card__status.is-err { background: #F6E3DC; color: #7A2E17; }
.card__status a { color: inherit; font-weight: 600; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ------------------------------------------------------------- imprint -- */
.imprint { padding-block: var(--sc-9) var(--sc-7); font-size: var(--sc-t-sm); }
.imprint__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sc-9); }
.imprint h2 { font-family: var(--sc-font-text); font-size: var(--sc-t-sm); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 var(--sc-4); }
.imprint__notes h2:not(:first-child) { margin-top: var(--sc-6); }
.imprint__rep dl { margin: 0 0 var(--sc-5); border-top: 1px solid var(--sc-hairline-strong); }
.imprint__rep dl > div { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: var(--sc-4); padding: 0.6rem 0; border-bottom: 1px solid var(--sc-hairline); }
.imprint__rep dt { color: var(--sc-ink-soft); }
.imprint__rep dt .alt { white-space: nowrap; }
/* the representative heading shows exactly as Google worded it */
#rep-h { text-transform: none; letter-spacing: 0; font-size: var(--sc-t-base); }
.imprint__rep dd { margin: 0; color: var(--sc-ink); }
.imprint p { margin: 0; color: var(--sc-ink-soft); max-width: 62ch; }
.imprint a { color: var(--sc-ink); }
.imprint__copy { margin-top: var(--sc-7) !important; }

/* -------------------------------------------------------------- viewer -- */
.viewer {
  width: min(96vw, 76rem); max-height: 94vh; padding: 0; border: 0; border-radius: var(--sc-r-md);
  background: #fff; color: var(--sc-ink); box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.5);
}
.viewer::backdrop { background: rgb(14 26 21 / 0.72); }
.viewer__bar { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4); padding: 0.6rem 0.6rem 0.6rem 1.2rem; background: #fff; border-bottom: 1px solid var(--sc-hairline); }
.viewer__title { margin: 0; font-size: var(--sc-t-sm); font-weight: 500; }
.viewer__bar form { margin: 0; }
.viewer__close { font: 500 var(--sc-t-sm)/1 var(--sc-font-text); padding: 0.6rem 1rem; background: var(--sc-ink); color: #fff; border: 0; border-radius: var(--sc-r-sm); cursor: pointer; }
.viewer__body { overflow: auto; max-height: calc(94vh - 3.5rem); }
.viewer__body img { width: 100%; height: auto; max-width: none; }

/* -------------------------------------------------------------- mobile -- */
@media (max-width: 1023px) {
  .contents__grid, .dev, .loc, .plans__panel, .book__grid, .imprint__grid, .brochure { grid-template-columns: minmax(0, 1fr); gap: var(--sc-7); }
  .dev__head, .dev__partners, .particulars { grid-column: 1; }
  .loc__map { grid-row: auto; }
  .plans__meta, .book__intro { position: static; }
  .avail__body { grid-template-columns: minmax(0, 1fr); }
  .pick { position: static; }
  .brochure__cover { width: min(70%, 18rem); }
}
@media (max-width: 899px) {
  .runhead { gap: var(--sc-3); }
  .runhead__title span, .runhead__folio { display: none; }
  .runhead__title { margin-right: auto; font-size: 1.15rem; }
  .dateline__text { font-size: 0.875rem; }
  .facts > div, .particulars dl > div, .book__facts > div, .imprint__rep dl > div { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
  .dev__partners li { grid-template-columns: minmax(0, 1fr); gap: var(--sc-2); }
  .zones { grid-template-columns: minmax(0, 1fr); gap: var(--sc-7); }
  .gallery { grid-template-columns: minmax(0, 1fr); gap: var(--sc-6); margin-top: var(--sc-8); }
  .gallery__lead, .gallery__a, .gallery__b { grid-column: 1; }
  .gallery__b { margin-top: 0 !important; }
  .avail__title { grid-template-columns: minmax(0, 1fr); row-gap: var(--sc-3); margin-bottom: var(--sc-7); }
  .avail__title h2 { max-width: none; }
  .stack { --cols: 2.1rem repeat(9, minmax(1.95rem, 1fr)); min-width: 0; }
  .unit, .stack__band { min-height: 2rem; }
  .card { padding: var(--sc-6) var(--sc-5) var(--sc-5); }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .slot__times { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .slot__times button { min-height: 2.75rem; }
}
@media (max-width: 420px) {
  .runhead__cta { padding-inline: 0.75rem; }
  .toc summary { font-size: var(--sc-t-xs); }
}

@media (prefers-reduced-motion: reduce) {
  .cover__plate, .cover__tower, .cover__mast { transform: none !important; }
  .stack.is-armed .stack__row { opacity: 1; transform: none; }
  .brochure__cover img { transform: none; }
}