/* ==========================================================================
   SAPTA — Seven Private Residences, Gulshan
   Pure HTML + CSS. Every scroll effect is a CSS scroll-driven animation,
   gated behind @supports + prefers-reduced-motion. Base styles are the
   finished, static state — the site reads complete without any motion.

   1. Reset              7. Story / Reveal (film)   13. Materials
   2. Variables          8. Interior                14. Availability
   3. Base / Typography  9. Numbers                 15. Final CTA
   4. Utilities         10. Architecture / Details  16. Responsive
   5. Navigation        11. Floor Plan              17. Accessibility
   6. Hero (film cap.)  12. Location                18. Reduced motion
   ========================================================================== */


/* 1. Reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, p, figure, dl, dd, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }


/* 2. Variables ------------------------------------------------------------ */

:root {
  --color-bg: #0b0b0a;          /* ink */
  --color-char: #151513;        /* charcoal */
  --color-text: #efeae2;        /* warm white */
  --color-paper: #f3efe8;       /* off-white */
  --color-stone: #d7cfc2;       /* travertine */
  --color-muted: #8b857b;
  --color-brass: #b8925a;
  --color-ink-line: rgba(11, 11, 10, .9);
  --color-line: rgba(239, 234, 226, .16);
  --color-line-dark: rgba(11, 11, 10, .14);

  --f-display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --f-serif: "Instrument Serif", "Times New Roman", serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --fs-hero: clamp(4.2rem, 13.2vw, 15rem);
  --fs-xl: clamp(3.4rem, 10.5vw, 12rem);
  --fs-l: clamp(2.6rem, 7vw, 7.5rem);
  --fs-m: clamp(2rem, 4.4vw, 4.4rem);

  --gutter: clamp(16px, 4vw, 64px);
  --spacing-section: clamp(6rem, 16vh, 12rem);
  --max-width: 1680px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}


/* 3. Base / Typography ---------------------------------------------------- */

html {
  background: var(--color-bg);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;             /* clip, not hidden — keeps position: sticky working */
}

.display {
  font-family: var(--f-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -.045em;
  line-height: .86;
  font-size: var(--fs-xl);
}

.display em,
.serif {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -.015em;
}

.mono {
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: .7rem;
  line-height: 1.6;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.label {
  display: flex;
  align-items: center;
  color: var(--color-muted);
}
.label span { color: currentColor; }
.label span::after {
  content: "";
  display: inline-block;
  width: 2.5rem;
  height: 1px;
  margin: 0 .9rem;
  vertical-align: middle;
  background: currentColor;
  opacity: .6;
}


/* 4. Utilities ------------------------------------------------------------ */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  top: 1rem; left: 1rem;
  z-index: 100;
  padding: .7rem 1rem;
  background: var(--color-text);
  color: var(--color-bg);
  font-family: var(--f-mono);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* underline that wipes out to the right and back in from the left */
.link-line {
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: .3em;
}
.link-line span { display: inline-block; transition: transform .5s var(--ease); }
.link-line:hover,
.link-line:focus-visible { animation: line-swap .8s var(--ease); }
.link-line:hover span,
.link-line:focus-visible span { transform: translateX(.35em); }

@keyframes line-swap {
  0%      { background-size: 100% 1px; background-position: 100% 100%; }
  45%     { background-size: 0% 1px;   background-position: 100% 100%; }
  45.01%  { background-size: 0% 1px;   background-position: 0 100%; }
  100%    { background-size: 100% 1px; background-position: 0 100%; }
}

.section-head {
  padding: var(--spacing-section) var(--gutter) 0;
}
.home > .section-head { padding-top: 4vh; }


/* 5. Navigation ----------------------------------------------------------- */

/* difference blending keeps one white nav legible over ink, stone and photography */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.4rem var(--gutter);
  color: #fff;
  mix-blend-mode: difference;
}

.nav__brand {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .32em;
}
.nav__brand span {
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .6;
}

.nav__links {
  display: flex;
  gap: clamp(1.5rem, 3vw, 3rem);
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.nav__links a { position: relative; padding: .3rem 0; transition: opacity .3s; }
.nav__links span { margin-right: .6rem; opacity: .5; }
.nav__links:has(a:hover) a:not(:hover) { opacity: .45; }

.nav__cta {
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}


/* 6. Hero — opening captions over the film ---------------------------------- */

.cap {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.cap--title {
  inset: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr auto;
  padding: 0 var(--gutter) clamp(1.5rem, 5vh, 3.5rem);
}
.cap__title {
  grid-column: 1;
  grid-row: 2;
  font-size: var(--fs-hero);
  line-height: .82;
}
.cap__meta {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .2rem;
  padding-bottom: .8rem;
  text-align: right;
}
.cap__meta span:first-child { color: var(--color-text); }
.cap__meta span:last-child { color: rgba(239, 234, 226, .6); }

.scroll-cue {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  margin-bottom: 2.5rem;
  color: rgba(239, 234, 226, .6);
  writing-mode: vertical-rl;
}
.scroll-cue span {
  position: relative;
  width: 1px;
  height: 3.5rem;
  overflow: hidden;
  background: rgba(239, 234, 226, .2);
}
.scroll-cue span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-text);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

.cap--live {
  top: clamp(6rem, 16vh, 10rem);
  left: var(--gutter);
  font-size: var(--fs-l);
}
.cap--belong {
  right: var(--gutter);
  bottom: clamp(2rem, 9vh, 6rem);
  font-size: var(--fs-xl);
  text-align: right;
}
.cap--enter {
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(3rem, 8vw, 8rem);
  line-height: 1;
  text-shadow: 0 0 60px rgba(0, 0, 0, .35);
}

/* chapter rail */
.film__chapters {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: calc(var(--gutter) * .5 + 1.4rem);
  display: grid;
  gap: .6rem;
  transform: translateY(-50%);
  color: rgba(239, 234, 226, .4);
  text-align: right;
}
.film__chapters li { display: flex; justify-content: flex-end; gap: .7rem; }
.film__chapters li:first-child { color: var(--color-text); }

.film__progress {
  position: absolute;
  z-index: 3;
  top: 22vh;
  right: calc(var(--gutter) * .5);
  width: 1px;
  height: 56vh;
  background: rgba(239, 234, 226, .14);
}
.film__progress span {
  position: absolute;
  inset: 0;
  background: var(--color-text);
  transform-origin: top;
  transform: scaleY(1);
}


/* 7. Story / Reveal — the film ------------------------------------------- */

/* Fallback (no scroll-timelines / reduced motion): a single cinematic still. */
.film {
  position: relative;
  height: 100vh;
  height: 100svh;
  background: var(--color-bg);
}
.film__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.film__frames {
  position: absolute;
  inset: 0;
}
.film__poster,
.film__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.film__frame { display: none; }
.cap--live, .cap--belong, .cap--enter { display: none; }

.film__shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(11, 11, 10, .82) 0%, rgba(11, 11, 10, .25) 34%, transparent 55%),
    linear-gradient(to bottom, rgba(11, 11, 10, .45) 0%, transparent 18%),
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(11, 11, 10, .45) 100%);
}


/* 8. Interior ------------------------------------------------------------- */

.home {
  position: relative;
  z-index: 1;
  margin-top: -40vh;
  padding-top: 40vh;
  background: linear-gradient(to bottom, transparent 0, var(--color-bg) 40vh);
}

.scene { position: relative; }
.scene img { width: 100%; height: 100%; object-fit: cover; }
.scene__note {
  max-width: 22rem;
  margin-top: 2rem;
  color: rgba(239, 234, 226, .7);
  font-size: 1.05rem;
}

/* LIVING — portrait image to the right, headline crossing its edge */
.scene--living {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.25rem;
  padding: clamp(4rem, 10vh, 8rem) var(--gutter) var(--spacing-section);
}
.scene--living .scene__media {
  grid-column: 6 / -1;
  grid-row: 1;
  aspect-ratio: 3 / 4.4;
  overflow: hidden;
}
.scene--living .scene__text {
  grid-column: 1 / 9;
  grid-row: 1;
  align-self: start;
  position: sticky;
  top: 18vh;
  z-index: 2;
  padding-top: 24vh;
  mix-blend-mode: difference;
}
.scene--living h3 {
  margin-top: 1.4rem;
  font-size: var(--fs-xl);
}

/* KITCHEN — the frame opens from a letterbox to full bleed */
.scene--kitchen { background: var(--color-bg); }
.kitchen__stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.kitchen__media { position: absolute; inset: 0; }
.kitchen__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top right, rgba(11, 11, 10, .7) 0%, transparent 50%);
}
.kitchen__text {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(2rem, 8vh, 5rem);
  z-index: 2;
}
.kitchen__text h3 { margin-top: 1.2rem; font-size: var(--fs-xl); }
.kitchen__text .label { color: rgba(239, 234, 226, .75); }

/* BEDROOM — still, quiet, on warm white */
.scene--bedroom {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.25rem;
  align-items: end;
  padding: var(--spacing-section) var(--gutter);
  background: var(--color-paper);
  color: var(--color-bg);
}
.scene--bedroom .scene__media {
  grid-column: 2 / 7;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.scene--bedroom .scene__text {
  grid-column: 8 / -1;
  padding-bottom: 1rem;
}
.scene--bedroom .label { color: #6f6a62; }
.scene--bedroom h3 { margin-top: 1.4rem; font-size: var(--fs-l); }
.scene--bedroom .scene__note { color: #5d5951; }
.scene__vertical {
  grid-column: 1;
  align-self: start;
  justify-self: start;
  color: #6f6a62;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* TERRACE — a panorama that travels sideways */
.scene--terrace { background: var(--color-bg); }
.terrace__stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.terrace__pan { height: 100%; }
.terrace__pan img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.terrace__text {
  position: absolute;
  top: clamp(6rem, 15vh, 9rem);
  left: var(--gutter);
  z-index: 2;
}
.terrace__text .label { color: rgba(239, 234, 226, .75); }
.terrace__text h3 { margin-top: 1.2rem; font-size: var(--fs-xl); }


/* 9. Numbers -------------------------------------------------------------- */

@property --n {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

.numbers {
  background: var(--color-paper);
  color: var(--color-bg);
  padding-bottom: var(--spacing-section);
}
.numbers .label { color: #6f6a62; }

.stats {
  margin-top: clamp(3rem, 8vh, 6rem);
  padding: 0 var(--gutter);
}
.stat {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-line-dark);
  overflow: clip;
}
.stat + .stat { margin-top: clamp(1.5rem, 4vh, 3rem); }
.stat dt { order: 2; padding-top: .6rem; color: #6f6a62; text-align: right; }
.stat dd {
  order: 1;
  font-size: clamp(5.5rem, 19vw, 22rem);
  font-weight: 500;
  line-height: .8;
  letter-spacing: -.065em;
  font-variant-numeric: tabular-nums;
}
.stat--right dt { order: 1; text-align: left; }
.stat--right dd { order: 2; }

.count {
  --n: var(--to);
  counter-reset: n var(--n);
}
.count::before {
  content: counter(n, decimal-leading-zero);
  content: counter(n, decimal-leading-zero) / "";
}


/* 10. Architecture / Details --------------------------------------------- */

.detail {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.25rem;
  row-gap: clamp(3rem, 10vh, 7rem);
  padding: var(--spacing-section) var(--gutter);
  background: var(--color-bg);
}
.detail__head {
  grid-column: 1 / 6;
  grid-row: 1 / 3;
  align-self: start;
  position: sticky;
  top: 14vh;
}
.detail__head h2 { margin-top: 1.6rem; font-size: var(--fs-xl); }
.detail__intro {
  max-width: 20rem;
  margin-top: 2rem;
  color: rgba(239, 234, 226, .7);
  font-size: 1.05rem;
}

.fig { position: relative; }
.fig img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.fig:hover img { transform: scale(1.035); }
.fig figcaption {
  display: flex;
  gap: 1rem;
  margin-top: .9rem;
  color: rgba(239, 234, 226, .6);
}
.fig figcaption span { color: var(--color-text); }

.fig--light {
  grid-column: 6 / -1;
  grid-row: 1;
}
.fig--light > img { aspect-ratio: 16 / 9; height: auto; }

.fig--form {
  grid-column: 9 / -1;
  grid-row: 2;
  margin-top: 8vh;
}
.fig__crop { aspect-ratio: 4 / 5; overflow: clip; }
.fig--form .fig__crop img {
  object-position: 24% 36%;     /* extreme crop: the cantilevered corner only */
  transform-origin: 24% 36%;
  transform: scale(2.6);
}
.fig--form:hover .fig__crop img { transform: scale(2.7); }

.fig--stone {
  grid-column: 5 / 9;
  grid-row: 2 / 4;
  margin-top: 26vh;
}
.fig--stone > img { aspect-ratio: 3 / 4; height: auto; }


/* 11. Floor Plan ---------------------------------------------------------- */

.plan {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.25rem;
  padding: var(--spacing-section) var(--gutter);
  background: var(--color-paper);
  color: var(--color-bg);
}
.plan .label { color: #6f6a62; }
.plan__head {
  grid-column: 1 / 5;
  align-self: start;
  position: sticky;
  top: 14vh;
}
.plan__head h2 { margin-top: 1.6rem; font-size: var(--fs-l); }

.plan__legend {
  margin-top: 3rem;
  border-top: 1px solid var(--color-line-dark);
}
.plan__legend a {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  padding: .7rem 0;
  border-bottom: 1px solid var(--color-line-dark);
  color: #5d5951;
  transition: color .3s, padding .4s var(--ease);
}
.plan__legend .mono { width: 3.4rem; color: #8b857b; }
.plan__legend a:hover,
.plan__legend a:focus-visible { color: var(--color-bg); padding-left: .6rem; }

.plan__sheet {
  grid-column: 6 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid var(--color-line-dark);
  background-color: var(--color-paper);
  background-image:
    linear-gradient(var(--color-line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-line-dark) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
}

.plan__level-name { margin-bottom: 1rem; color: #6f6a62; }

.plan__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  aspect-ratio: 5 / 6;
  border: 2px solid var(--color-ink-line);
  background: var(--color-paper);
}
.plan__grid--ground {
  grid-template-areas:
    "kitchen kitchen dining dining living living"
    "kitchen kitchen dining dining living living"
    "kitchen kitchen dining dining living living"
    "entry   entry   entry  entry  living living"
    "entry   entry   entry  entry  living living"
    "pool    pool    pool   pool   pool   pool";
}
.plan__grid--upper {
  grid-template-areas:
    "bed3    bed3    bed2   bed2   void   void"
    "bed3    bed3    bed2   bed2   void   void"
    "master  master  master master void   void"
    "master  master  master master void   void"
    "master  master  master master void   void"
    "balcony balcony balcony balcony balcony balcony";
}

.room {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .4rem;
  min-width: 0;
  padding: .7rem;
  border: 1px solid var(--color-ink-line);
  margin: -.5px;
  transition: background-color .4s, box-shadow .4s;
  outline: none;
}
.room__name {
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #5d5951;
  transition: color .3s, letter-spacing .4s var(--ease);
}
.room__note {
  font-size: .8rem;
  line-height: 1.35;
  color: var(--color-bg);
  opacity: 0;
  transform: translateY(.4rem);
  transition: opacity .35s, transform .5s var(--ease);
}

.room--living  { grid-area: living; }
.room--dining  { grid-area: dining; }
.room--kitchen { grid-area: kitchen; }
.room--entry   { grid-area: entry; }
.room--pool    { grid-area: pool; background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(11, 11, 10, .12) 7px 8px); }
.room--master  { grid-area: master; }
.room--bed2    { grid-area: bed2; }
.room--bed3    { grid-area: bed3; }
.room--balcony { grid-area: balcony; border-style: dashed; }
.room--void {
  grid-area: void;
  background:
    linear-gradient(to top right, transparent calc(50% - .5px), rgba(11, 11, 10, .35) 50%, transparent calc(50% + .5px)),
    linear-gradient(to top left, transparent calc(50% - .5px), rgba(11, 11, 10, .35) 50%, transparent calc(50% + .5px));
}
.room--entry .room__name,
.room--pool .room__name,
.room--void .room__name { color: #8b857b; }

/* highlighting: hover or focus a room directly … */
.room[tabindex]:is(:hover, :focus-visible),
/* … or its legend entry, linked with :has() */
.plan:has([data-room="living"]:is(:hover, :focus-visible))  .room--living,
.plan:has([data-room="dining"]:is(:hover, :focus-visible))  .room--dining,
.plan:has([data-room="kitchen"]:is(:hover, :focus-visible)) .room--kitchen,
.plan:has([data-room="master"]:is(:hover, :focus-visible))  .room--master,
.plan:has([data-room="bed2"]:is(:hover, :focus-visible))    .room--bed2,
.plan:has([data-room="bed3"]:is(:hover, :focus-visible))    .room--bed3,
.plan:has([data-room="balcony"]:is(:hover, :focus-visible)) .room--balcony {
  z-index: 1;
  background-color: rgba(184, 146, 90, .16);
  box-shadow: inset 0 0 0 2px var(--color-bg);
}
.room[tabindex]:is(:hover, :focus-visible) .room__name { color: var(--color-bg); letter-spacing: .22em; }
.room[tabindex]:is(:hover, :focus-visible) .room__note,
.plan:has([data-room="living"]:is(:hover, :focus-visible))  .room--living .room__note,
.plan:has([data-room="dining"]:is(:hover, :focus-visible))  .room--dining .room__note,
.plan:has([data-room="kitchen"]:is(:hover, :focus-visible)) .room--kitchen .room__note,
.plan:has([data-room="master"]:is(:hover, :focus-visible))  .room--master .room__note,
.plan:has([data-room="bed2"]:is(:hover, :focus-visible))    .room--bed2 .room__note,
.plan:has([data-room="bed3"]:is(:hover, :focus-visible))    .room--bed3 .room__note,
.plan:has([data-room="balcony"]:is(:hover, :focus-visible)) .room--balcony .room__note {
  opacity: 1;
  transform: none;
}
/* and the reverse: a hovered room lights up its legend line */
.plan:has(.room--living:is(:hover, :focus-visible))  [data-room="living"],
.plan:has(.room--dining:is(:hover, :focus-visible))  [data-room="dining"],
.plan:has(.room--kitchen:is(:hover, :focus-visible)) [data-room="kitchen"],
.plan:has(.room--master:is(:hover, :focus-visible))  [data-room="master"],
.plan:has(.room--bed2:is(:hover, :focus-visible))    [data-room="bed2"],
.plan:has(.room--bed3:is(:hover, :focus-visible))    [data-room="bed3"],
.plan:has(.room--balcony:is(:hover, :focus-visible)) [data-room="balcony"] {
  color: var(--color-bg);
  padding-left: .6rem;
}

.plan__foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-line-dark);
  color: #6f6a62;
}
.plan__north {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--color-ink-line);
  border-radius: 50%;
  color: var(--color-bg);
  letter-spacing: 0;
}
.plan__north::before {
  content: "";
  position: absolute;
  top: -.7rem;
  left: 50%;
  width: 1px;
  height: .9rem;
  background: var(--color-bg);
}


/* 12. Location ------------------------------------------------------------ */

.place {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.25rem;
  padding: var(--spacing-section) var(--gutter);
  background: var(--color-char);
}
.place__head { grid-column: 1 / -1; }
.place__head h2 { margin-top: 1.6rem; font-size: var(--fs-xl); }
.place__coords { margin-top: 2rem; color: rgba(239, 234, 226, .6); }

.place__body {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.25rem;
  align-items: end;
  margin-top: clamp(3rem, 8vh, 6rem);
}

.map {
  grid-column: 1 / 8;
  position: relative;
  aspect-ratio: 4 / 3;
  max-height: 82vh;
  overflow: hidden;
  border: 1px solid var(--color-line);
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 calc(9% - 1px), rgba(239, 234, 226, .09) calc(9% - 1px) 9%),
    linear-gradient(rgba(239, 234, 226, .035) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(239, 234, 226, .035) 1px, transparent 1px) 0 0 / 40px 40px;
}
.map__lake {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.map__lake path {
  fill: none;
  stroke: rgba(239, 234, 226, .45);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.map__lakename {
  position: absolute;
  top: 62%;
  left: 73%;
  color: rgba(239, 234, 226, .45);
  writing-mode: vertical-rl;
}
.map__road {
  position: absolute;
  left: -20%;
  width: 140%;
  height: 1px;
  background: rgba(239, 234, 226, .16);
}
.map__road--a { top: 36%; transform: rotate(-8deg); }
.map__road--b { top: 66%; transform: rotate(5deg); }
.map__road--c { top: 50%; transform: rotate(82deg); }

.map__home {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--color-brass);
  box-shadow: 0 0 0 6px rgba(184, 146, 90, .18);
}
.map__home::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid var(--color-brass);
  border-radius: 50%;
  animation: ping 3.2s var(--ease) infinite;
}
.map__home span {
  position: absolute;
  top: -.25rem;
  left: 1.6rem;
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  white-space: nowrap;
}
@keyframes ping {
  from { transform: scale(1); opacity: .9; }
  to   { transform: scale(4); opacity: 0; }
}

.map__pt {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border: 1px solid var(--color-text);
  border-radius: 50%;
  transition: background-color .3s, transform .5s var(--ease), border-color .3s;
}
.map__pt span {
  position: absolute;
  top: -.45rem;
  left: 1rem;
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(239, 234, 226, .6);
  transition: color .3s;
}
.map__pt--edge { border-style: dashed; }

.near {
  grid-column: 9 / -1;
  border-top: 1px solid var(--color-line);
}
.near li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--color-line);
  cursor: default;
  outline: none;
  transition: opacity .3s, padding .4s var(--ease);
}
.near__what { font-size: clamp(1.05rem, 1.5vw, 1.35rem); font-weight: 400; }
.near__time { color: rgba(239, 234, 226, .6); }
.near:has(li:is(:hover, :focus-visible)) li:not(:is(:hover, :focus-visible)) { opacity: .35; }
.near li:is(:hover, :focus-visible) { padding-left: .6rem; }
.near li:focus-visible { box-shadow: inset 2px 0 0 var(--color-brass); }

.place:has(.near [data-k="lake"]:is(:hover, :focus-visible))   .map__pt[data-k="lake"],
.place:has(.near [data-k="food"]:is(:hover, :focus-visible))   .map__pt[data-k="food"],
.place:has(.near [data-k="cbd"]:is(:hover, :focus-visible))    .map__pt[data-k="cbd"],
.place:has(.near [data-k="shop"]:is(:hover, :focus-visible))   .map__pt[data-k="shop"],
.place:has(.near [data-k="school"]:is(:hover, :focus-visible)) .map__pt[data-k="school"],
.place:has(.near [data-k="air"]:is(:hover, :focus-visible))    .map__pt[data-k="air"] {
  background: var(--color-brass);
  border-color: var(--color-brass);
  transform: scale(1.8);
}
.place:has(.near [data-k="lake"]:is(:hover, :focus-visible))   .map__pt[data-k="lake"] span,
.place:has(.near [data-k="food"]:is(:hover, :focus-visible))   .map__pt[data-k="food"] span,
.place:has(.near [data-k="cbd"]:is(:hover, :focus-visible))    .map__pt[data-k="cbd"] span,
.place:has(.near [data-k="shop"]:is(:hover, :focus-visible))   .map__pt[data-k="shop"] span,
.place:has(.near [data-k="school"]:is(:hover, :focus-visible)) .map__pt[data-k="school"] span,
.place:has(.near [data-k="air"]:is(:hover, :focus-visible))    .map__pt[data-k="air"] span {
  color: var(--color-text);
}

.place__note {
  grid-column: 9 / -1;
  margin-top: 1.2rem;
  color: rgba(239, 234, 226, .45);
}


/* 13. Materials ----------------------------------------------------------- */

.materials {
  background: var(--color-stone);
  color: var(--color-bg);
}
.materials__stage {
  padding: var(--spacing-section) 0;
}
.materials__head { padding: 0 var(--gutter); }
.materials__head .label { color: #5d5951; }
.materials__head h2 { margin-top: 1.6rem; font-size: var(--fs-l); }

/* fallback / touch: a native horizontal strip with snap points */
.materials__track {
  display: flex;
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-top: clamp(2.5rem, 7vh, 5rem);
  padding: 0 var(--gutter) 3.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: rgba(11, 11, 10, .3) transparent;
  background: var(--color-stone);
}

.mat {
  position: relative;
  flex: none;
  height: clamp(22rem, 62vh, 44rem);
  aspect-ratio: 3 / 4;
  scroll-snap-align: start;
}
.mat--tall { margin-top: 6vh; }
.mat img { width: 100%; height: 100%; object-fit: cover; }
.mat figcaption .mono {
  display: block;
  margin-top: .9rem;
  color: #4a4741;
}
/* the word crosses the image edge; difference-blending flips it light over dark photography */
.mat__word {
  position: absolute;
  left: -.06em;
  bottom: 1.6rem;
  z-index: 1;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(3.5rem, 9vw, 9.5rem);
  line-height: .8;
  letter-spacing: -.05em;
  text-transform: uppercase;
  color: var(--color-stone);
  mix-blend-mode: difference;
  pointer-events: none;
  transform: translateX(-12%);
}


/* 14. Availability -------------------------------------------------------- */

.avail {
  padding: var(--spacing-section) var(--gutter);
  background: var(--color-bg);
}
.avail__head h2 { margin-top: 1.6rem; font-size: var(--fs-l); }
.avail__head h2 em { color: var(--color-stone); }

.units {
  position: relative;
  margin-top: clamp(3rem, 9vh, 6rem);
  border-bottom: 1px solid var(--color-line);
}
.unit {
  position: relative;
  border-top: 1px solid var(--color-line);
  transition: opacity .4s;
}
.unit__row {
  display: grid;
  grid-template-columns: minmax(4ch, auto) 1fr auto;
  align-items: baseline;
  column-gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(.6rem, 1.4vh, 1rem) 0;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 6.6vw, 7.5rem);
  line-height: .95;
  letter-spacing: -.045em;
  text-transform: uppercase;
}
.unit__no { font-variant-numeric: tabular-nums; }
.unit__meta { align-self: center; color: rgba(239, 234, 226, .6); letter-spacing: .16em; }

.unit--sold .unit__row { color: rgba(239, 234, 226, .22); }
.unit--sold .unit__status {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(239, 234, 226, .35);
}
.unit--reserved .unit__row { color: var(--color-brass); opacity: .75; }

.unit--open .unit__status { transition: letter-spacing .6s var(--ease); }
.unit--open .unit__row { outline: none; }
.unit--open .unit__row:is(:hover, :focus-visible) .unit__status { letter-spacing: -.01em; }
.unit--open .unit__row:is(:hover, :focus-visible) .unit__meta { color: var(--color-text); }
.unit--open .unit__row:focus-visible { box-shadow: inset 3px 0 0 var(--color-brass); padding-left: 1rem; }

.unit__img {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  object-fit: cover;
}

@media (hover: hover) and (pointer: fine) {
  .unit__img {
    top: 50%;
    right: 22%;
    width: clamp(12rem, 20vw, 22rem);
    aspect-ratio: 4 / 5;
    height: auto;
    transform: translateY(-50%) rotate(-1.5deg);
    clip-path: inset(50% 0 50% 0);
    transition: clip-path .7s var(--ease), transform .9s var(--ease);
  }
  .unit:has(.unit__row:is(:hover, :focus-visible)) .unit__img {
    clip-path: inset(0);
    transform: translateY(-50%) rotate(0deg);
  }
  /* :has() can't nest, so dim every row, then restore the one in use */
  .units:has(.unit--open .unit__row:is(:hover, :focus-visible)) .unit { opacity: .3; }
  .units .unit:has(.unit__row:is(:hover, :focus-visible)) { opacity: 1; }
}


/* 15. Final CTA ----------------------------------------------------------- */

.finale { position: relative; background: var(--color-bg); }
.finale__stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.finale__media { position: absolute; inset: 0; }
.finale__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%; }
.finale__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(11, 11, 10, .85) 0%, rgba(11, 11, 10, .2) 45%, transparent 65%),
    linear-gradient(to right, rgba(11, 11, 10, .55) 0%, transparent 55%);
}
.finale__text {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(2.5rem, 9vh, 6rem);
  z-index: 2;
}
.finale__text h2 { font-size: var(--fs-xl); }
.finale__cta {
  display: inline-block;
  margin-top: clamp(2rem, 5vh, 3.5rem);
  font-family: var(--f-mono);
  font-size: clamp(.78rem, 1vw, .95rem);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.finale__meta { margin-top: 1.4rem; color: rgba(239, 234, 226, .6); }

.footer {
  padding: clamp(4rem, 10vh, 7rem) var(--gutter) 0;
  background: var(--color-bg);
  border-top: 1px solid var(--color-line);
  overflow: clip;
}
.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  color: rgba(239, 234, 226, .7);
}
.footer__fine { color: rgba(239, 234, 226, .4); max-width: 28rem; }
.footer__mark {
  margin-top: clamp(3rem, 8vh, 6rem);
  margin-bottom: -.2em;
  font-size: 31vw;
  line-height: .78;
  letter-spacing: -.06em;
  color: #171614;
  white-space: nowrap;
}


/* ==========================================================================
   SCROLL CHOREOGRAPHY — only where the browser supports scroll timelines
   and the visitor hasn't asked for less motion. Hierarchy: the film and the
   kitchen move dramatically; the living room and terrace move steadily;
   the bedroom and the plan barely move at all.
   ========================================================================== */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* — Film: each frame is visible only inside its own slice of the scroll. — */
    .film {
      height: 900vh;
      view-timeline: --film block;
    }
    .film__poster { display: none; }
    .film__frame {
      display: block;
      visibility: hidden;
      animation: frame-on linear;
      animation-timeline: --film;
      animation-range: contain var(--a) contain var(--b);
    }
    .film__frame:first-of-type { animation-fill-mode: backwards; }
    .film__frame:last-of-type { animation-fill-mode: forwards; }

    /* the opening shot settles from a slight push while the lights come on */
    .film__frames {
      animation: settle linear both;
      animation-timeline: --film;
      animation-range: contain 0% contain 20.6%;
    }
    .film__shade {
      animation: shade-lift linear both;
      animation-timeline: --film;
      animation-range: contain 0% contain 24%;
    }

    .cap--live, .cap--belong, .cap--enter { display: block; }
    .cap--enter { display: grid; }
    .cap--title {
      animation: cap-out linear both;
      animation-timeline: --film;
      animation-range: contain 0% contain 17%;
    }
    .cap--live {
      animation: cap-in-out linear both;
      animation-timeline: --film;
      animation-range: contain 22% contain 41%;
    }
    .cap--belong {
      animation: cap-in-out linear both;
      animation-timeline: --film;
      animation-range: contain 42% contain 62%;
    }
    .cap--enter {
      animation: cap-soft linear both;
      animation-timeline: --film;
      animation-range: contain 72% contain 97%;
    }

    .film__chapters li,
    .film__chapters li:first-child {
      color: rgba(239, 234, 226, .4);
      animation: chapter-on linear none;
      animation-timeline: --film;
    }
    .film__chapters li:nth-child(1) { animation-range: contain 0% contain 20.6%; }
    .film__chapters li:nth-child(2) { animation-range: contain 20.6% contain 63.8%; }
    .film__chapters li:nth-child(3) { animation-range: contain 63.8% contain 100%; }

    .film__progress span {
      animation: grow-y linear both;
      animation-timeline: --film;
      animation-range: contain 0% contain 100%;
    }

    /* — Living: the frame rises open, the photograph drifts inside it. — */
    .scene--living .scene__media {
      animation: clip-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }
    .scene--living .scene__media img {
      animation: drift-y linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    .scene--living .scene__text h3 {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 35%;
    }

    /* — Kitchen: letterbox opens to full bleed while the picture settles. — */
    .scene--kitchen {
      height: 260vh;
      view-timeline: --kitchen block;
    }
    .kitchen__stage { position: sticky; top: 0; }
    .kitchen__media {
      animation: open-frame linear both;
      animation-timeline: --kitchen;
      animation-range: contain 0% contain 55%;
    }
    .kitchen__media img {
      animation: settle-l linear both;
      animation-timeline: --kitchen;
      animation-range: contain 0% contain 80%;
    }
    .kitchen__text {
      animation: rise-in linear both;
      animation-timeline: --kitchen;
      animation-range: contain 42% contain 70%;
    }

    /* — Bedroom: almost still. A slow fade, nothing more. — */
    .scene--bedroom .scene__media,
    .scene--bedroom .scene__text {
      animation: fade-in linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 40%;
    }

    /* — Terrace: the panorama travels as you scroll. — */
    .scene--terrace {
      height: 320vh;
      view-timeline: --terrace block;
    }
    .terrace__stage { position: sticky; top: 0; }
    /* explicit travel width: the panorama's 21:9 ratio, but never less than 1.5 screens */
    .scene--terrace { --pan-w: max(100vh * 2.3333, 150vw); --pan-w: max(100svh * 2.3333, 150vw); }
    .terrace__pan { width: var(--pan-w); }
    .terrace__pan {
      animation: pan-x linear both;
      animation-timeline: --terrace;
      animation-range: contain 0% contain 100%;
    }
    .terrace__text {
      animation: rise-in linear both;
      animation-timeline: --terrace;
      animation-range: contain 8% contain 30%;
    }

    /* — Numbers: they arrive from alternating sides and count up. — */
    .stat dd {
      animation: from-left linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
    .stat--right dd { animation-name: from-right; }
    .count {
      animation: count-up linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 45%;
    }

    /* — Architecture: photographs develop from monochrome as they arrive. — */
    .fig {
      animation: develop linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 50%;
    }
    .fig--stone { animation-name: develop, lift; }

    /* — Location: rings and points draw in. — */
    .map__pt, .map__home {
      animation: pop linear both;
      animation-timeline: view();
      animation-range: entry 40% cover 50%;
    }
    .near li {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }

    /* — Availability: rows rise in sequence as the list enters. — */
    .unit {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }

    /* — Final: the closing shot settles; the headline arrives. — */
    .finale {
      height: 200vh;
      view-timeline: --finale block;
    }
    .finale__stage { position: sticky; top: 0; }
    .finale__media img {
      animation: settle-l linear both;
      animation-timeline: --finale;
      animation-range: entry 40% contain 70%;
    }
    .finale__text {
      animation: rise-in linear both;
      animation-timeline: --finale;
      animation-range: contain 0% contain 40%;
    }
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (max-width: 720px) {
    .film { height: 760vh; }
    .scene--terrace { height: 260vh; }
  }
}

/* Materials: on wide, pointer screens the strip is pinned and travels sideways. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
    .materials {
      height: 440vh;
      view-timeline: --mat block;
    }
    .materials__stage {
      position: sticky;
      top: 0;
      height: 100vh;
      height: 100svh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0;
      overflow: hidden;
    }
    .materials__track {
      width: max-content;
      overflow: visible;
      padding-left: 34vw;
      padding-right: 12vw;
      animation: track-x linear both;
      animation-timeline: --mat;
      animation-range: contain 0% contain 100%;
    }
    .materials__head {
      position: absolute;
      top: 50%;
      left: 0;
      z-index: 2;
      transform: translateY(-50%);
      animation: head-away linear both;
      animation-timeline: --mat;
      animation-range: contain 0% contain 22%;
    }
  }
}

/* keyframes */
@keyframes frame-on   { from, to { visibility: visible; } }
@keyframes settle     { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes settle-l   { from { transform: scale(1.22); } to { transform: scale(1); } }
@keyframes shade-lift { from { opacity: 1; } to { opacity: .55; } }
@keyframes cap-out {
  0%, 25% { opacity: 1; transform: none; }
  100%    { opacity: 0; transform: translate3d(0, -12vh, 0); }
}
@keyframes cap-in-out {
  0%      { opacity: 0; transform: translate3d(0, 8vh, 0); }
  28%, 72% { opacity: 1; transform: none; }
  100%    { opacity: 0; transform: translate3d(0, -8vh, 0); }
}
@keyframes cap-soft {
  0%      { opacity: 0; filter: blur(12px); }
  30%, 75% { opacity: 1; filter: blur(0); }
  100%    { opacity: 0; filter: blur(8px); }
}
@keyframes chapter-on {
  0%, 100% { color: var(--color-text); }
}
@keyframes grow-y     { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes clip-rise  { from { clip-path: inset(38% 0 0 0); } to { clip-path: inset(0); } }
@keyframes drift-y    { from { transform: scale(1.18) translateY(-4%); } to { transform: scale(1.18) translateY(4%); } }
@keyframes rise       { from { transform: translateY(14vh); } to { transform: none; } }
@keyframes rise-in    { from { opacity: 0; transform: translateY(6vh); } to { opacity: 1; transform: none; } }
@keyframes fade-in    { from { opacity: 0; } to { opacity: 1; } }
@keyframes open-frame {
  from { clip-path: inset(24% 30% 24% 30%); }
  to   { clip-path: inset(0); }
}
@keyframes pan-x      { from { transform: translateX(0); } to { transform: translateX(calc(100vw - var(--pan-w))); } }
@keyframes from-left  { from { transform: translateX(-12vw); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes from-right { from { transform: translateX(12vw); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes count-up   { from { --n: 0; } to { --n: var(--to); } }
@keyframes develop    { from { filter: grayscale(1) brightness(.6); } to { filter: none; } }
@keyframes lift       { from { translate: 0 10vh; } to { translate: 0 0; } }
@keyframes pop        { from { opacity: 0; scale: .2; } to { opacity: 1; scale: 1; } }
@keyframes track-x    { from { transform: translateX(0); } to { transform: translateX(calc(-100% + 100vw)); } }
@keyframes head-away  { from { opacity: 1; } to { opacity: 0; transform: translate(-6vw, -50%); } }


/* 16. Responsive ---------------------------------------------------------- */

@media (max-width: 1100px) {
  .nav__links { display: none; }

  .detail__head { grid-column: 1 / -1; grid-row: auto; position: static; }
  .fig--light { grid-column: 1 / -1; grid-row: auto; }
  .fig--form { grid-column: 7 / -1; grid-row: auto; margin-top: 0; }
  .fig--stone { grid-column: 1 / 6; grid-row: auto; margin-top: 18vh; }

  .plan__head { grid-column: 1 / -1; position: static; margin-bottom: 3rem; }
  .plan__legend { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; }
  .plan__sheet { grid-column: 1 / -1; }

  .map { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .near, .place__note { grid-column: 1 / -1; }
  .near { margin-top: 3rem; }
}

@media (max-width: 720px) {
  :root {
    --fs-xl: clamp(3rem, 15vw, 6rem);
    --fs-l: clamp(2.4rem, 12vw, 4.5rem);
  }

  .nav { padding-top: 1.1rem; padding-bottom: 1.1rem; }
  .nav__brand span { display: none; }

  /* hero: type stacked large on the left, metadata above it */
  .cap--title {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto auto;
  }
  .cap__title { font-size: clamp(3.6rem, 21vw, 7rem); grid-row: 3; }
  .cap__meta {
    grid-column: 1;
    grid-row: 2;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 1.2rem;
    text-align: left;
  }
  .scroll-cue { display: none; }
  .film__chapters { display: none; }
  .cap--live { font-size: clamp(2.6rem, 13vw, 4rem); }
  .cap--belong { font-size: clamp(3rem, 16vw, 5rem); }

  /* interior scenes become one vertical story */
  .scene--living { display: flex; flex-direction: column-reverse; padding-top: 3rem; }
  .scene--living .scene__text { position: relative; top: auto; padding-top: 0; margin-bottom: -14vw; }
  .scene--living .scene__media { margin-left: 18%; }
  .scene--living h3 { font-size: clamp(3.4rem, 19vw, 6.5rem); }

  .scene--bedroom { display: block; }
  .scene__vertical { display: none; }
  .scene--bedroom .scene__media { width: 78%; }
  .scene--bedroom .scene__text { margin-top: 2.5rem; margin-left: 22%; }

  .stat { flex-direction: column; gap: .4rem; }
  .stat dt, .stat--right dt { order: 1; text-align: left; padding-top: 0; }
  .stat dd, .stat--right dd { order: 2; }
  .stat--right dd { align-self: flex-end; }

  .detail { display: block; }
  .detail__head { margin-bottom: 4rem; }
  .fig + .fig { margin-top: 4rem; }
  .fig--form { width: 72%; margin-left: auto; }
  .fig--stone { width: 72%; margin-top: 4rem; }

  .plan { display: block; }
  .plan__legend { grid-template-columns: 1fr; }
  .plan__sheet { grid-template-columns: 1fr; }
  .room__note { display: none; }
  .room[tabindex]:is(:hover, :focus-visible) .room__note { display: block; }

  .mat { height: 58svh; max-height: 30rem; }
  .mat--tall { margin-top: 0; }

  .unit__row { grid-template-columns: minmax(3ch, auto) 1fr; font-size: clamp(2rem, 10vw, 3.4rem); }
  .unit__meta { grid-column: 2; font-size: .62rem; margin-top: .3rem; }

  .footer__cols { grid-template-columns: 1fr; }
}

/* touch screens: residence photographs are always shown, as thumbnails */
@media (hover: none), (pointer: coarse) {
  .unit--open { padding-right: 30%; }
  .unit__img {
    top: 50%;
    right: 0;
    width: 26%;
    aspect-ratio: 1;
    transform: translateY(-50%);
  }
}


/* 17. Accessibility ------------------------------------------------------- */

:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}
.room:focus-visible { outline: none; }

@media (forced-colors: active) {
  .nav { mix-blend-mode: normal; }
  .mat__word { mix-blend-mode: normal; }
}


/* 18. Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .scroll-cue span::after,
  .map__home::after { animation: none; }
  .fig--form:hover .fig__crop img { transform: scale(2.6); }
}