/* GLN — 13 Private residences
   Palette: noir, travertine, champagne, smoke, ivory. Type: Noto Serif Display (thin) + Encode Sans (wide, light). */

@font-face {
  font-family: "GLN Display";
  src: url("fonts/noto-serif-display-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "GLN Sans";
  src: url("fonts/encode-sans-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Chinese: Noto Serif SC / Noto Sans SC, subset to this page's Chinese strings, used only for CJK code points
   (Latin keeps Noto Serif Display / Encode Sans). Preloaded by the head script only when the page opens in Chinese. */
@font-face {
  font-family: "GLN Serif SC";
  src: url("fonts/noto-serif-sc-300-gln.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+2E80-2FFF, U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF, U+2014, U+2018-2019, U+201C-201D, U+2026, U+00B7;
}
@font-face {
  font-family: "GLN Sans SC";
  src: url("fonts/noto-sans-sc-400-gln.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+2E80-2FFF, U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF, U+2014, U+2018-2019, U+201C-201D, U+2026, U+00B7;
}
@font-face { font-family: "GLN SC Fallback"; src: local("PingFang SC"), local("Microsoft YaHei"), local("Hiragino Sans GB"), local("Source Han Sans SC"); size-adjust: 100%; }
/* size-adjusted local fallbacks, so a late font does not reflow the page */
@font-face { font-family: "GLN Display Fallback"; src: local("Times New Roman"), local("Times"); size-adjust: 107%; ascent-override: 99%; descent-override: 27%; line-gap-override: 0%; }
@font-face { font-family: "GLN Sans Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 106%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }

:root {
  --noir: #0D0D0C;
  --travertine: #D9D1C3;
  --champagne: #C8B68E;
  --smoke: #6E6A63;
  --ivory: #F4F1EA;
  --ink: #1E1C19;
  --umber: #4A4640;
  --soft: rgba(217, 209, 195, .74);
  --err: #E6AE98;

  --serif: "GLN Display", "GLN Display Fallback", "Times New Roman", serif;
  --sans: "GLN Sans", "GLN Sans Fallback", Arial, sans-serif;

  /* layout unit: 1px up to 1440, growing to 1.5px at 2560 */
  --u: clamp(1px, calc(1px + (100vw - 1440px) / 2240), 1.5px);
  --gut: clamp(22px, 6vw, calc(var(--u) * 150));
  --gap: clamp(16px, 2vw, calc(var(--u) * 32));
  --pad: clamp(88px, 12vw, calc(var(--u) * 220));
  --header: clamp(64px, calc(var(--u) * 88), 132px);

  --fs-hero: clamp(2.6rem, 7.4vw, calc(var(--u) * 108));
  --fs-h2: clamp(2.3rem, 5.4vw, calc(var(--u) * 86));
  --fs-h3: clamp(2rem, 3.6vw, calc(var(--u) * 60));
  --fs-h4: clamp(1.45rem, 2.3vw, calc(var(--u) * 36));
  --fs-giant: clamp(3.4rem, 8vw, calc(var(--u) * 150));

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .25, 1);
}

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

html {
  /* running text: 16px up to 1440, ~20.5px at 2560 */
  font-size: clamp(16px, calc(16px + (100vw - 1440px) * .004018), 20.5px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--noir);
  color: var(--travertine);
  font-family: var(--sans);
  font-weight: 320;
  font-stretch: 104%;
  font-size: 1rem;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
h1, h2, h3 { font-family: var(--serif); font-weight: 200; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
::selection { background: var(--champagne); color: var(--noir); }

:focus-visible { outline: 2px solid var(--champagne); outline-offset: 4px; }
[tabindex="-1"]:focus { outline: none; }
.trade :focus-visible { outline-color: var(--noir); }

.skip {
  position: fixed; left: 16px; top: 12px; z-index: 100;
  padding: 12px 18px; background: var(--travertine); color: var(--noir);
  transform: translateY(-160%); transition: transform .3s;
}
.skip:focus { transform: none; }

.wrap { padding-inline: var(--gut); }

.tag {
  font-size: .75rem;
  font-stretch: 125%;
  font-weight: 360;
  letter-spacing: .05em;
  color: var(--soft);
}
.fineprint {
  font-size: .8125rem;
  font-stretch: 112%;
  line-height: 1.6;
  color: var(--soft);
}
.lead {
  font-size: 1.125rem;
  line-height: 1.75;
  max-width: 36em;
}

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: max(48px, calc(var(--u) * 58));
  padding: 0 calc(var(--u) * 32);
  font-family: var(--sans); font-size: .875rem; font-weight: 400; font-stretch: 125%;
  letter-spacing: .04em; line-height: 1.2; text-align: center; text-decoration: none;
  border: 1px solid transparent; border-radius: 0; cursor: pointer;
  transition: background-color .7s var(--ease), color .7s var(--ease), border-color .7s var(--ease);
}
.btn-line { border-color: var(--champagne); color: var(--travertine); background: rgba(13, 13, 12, .18); }
.btn-line:hover { background: var(--champagne); color: var(--noir); }
.btn-small { min-height: 44px; padding: 0 calc(var(--u) * 22); font-size: .8125rem; }
.btn-dark { background: var(--noir); color: var(--travertine); }
.btn-dark:hover { background: #2B2925; }
.btn-solid { background: var(--champagne); color: var(--noir); border-color: var(--champagne); }
.btn-solid:hover { background: var(--travertine); border-color: var(--travertine); }
.btn .short { display: none; }

.text-link {
  display: inline-block; padding-block: 12px;
  font-size: .875rem; font-stretch: 125%; letter-spacing: .04em; text-decoration: none;
  background: linear-gradient(var(--champagne), var(--champagne)) 0 calc(100% - 10px) / 100% 1px no-repeat;
  transition: color .6s var(--ease), background-size .9s var(--ease);
}
.text-link:hover { color: var(--champagne); background-size: 40% 1px; }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; gap: calc(var(--u) * 44);
  height: var(--header);
  padding-inline: var(--gut);
  border-bottom: 1px solid transparent;
  transition: transform .9s var(--ease), background-color .6s ease, border-color .6s ease;
}
.site-header.is-solid {
  background: rgba(13, 13, 12, .86);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom-color: rgba(200, 182, 142, .2);
}
.site-header.is-hidden { transform: translateY(-101%); }
.wordmark {
  margin-right: auto;
  padding-block: 10px;
  font-family: var(--serif); font-weight: 300;
  font-size: max(22px, calc(var(--u) * 27));
  letter-spacing: .36em; text-decoration: none; line-height: 1;
}
.site-nav { display: flex; gap: calc(var(--u) * 40); }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: .8125rem; font-stretch: 125%; letter-spacing: .04em; text-decoration: none;
  color: var(--soft); transition: color .5s ease;
}
.site-nav a:hover { color: var(--champagne); }

/* ---------- arrival ---------- */
.arrival {
  position: relative;
  height: 100vh; height: 100svh; min-height: 580px;
  display: flex; align-items: flex-end;
  overflow: hidden; background: var(--noir);
}
.arrival-media { position: absolute; inset: 0; overflow: hidden; }
.arrival-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 88%; }
.arrival-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(13, 13, 12, .95) 0%, rgba(13, 13, 12, .78) 26%, rgba(13, 13, 12, .42) 50%, rgba(13, 13, 12, .08) 72%, rgba(13, 13, 12, .45) 100%),
    linear-gradient(to right, rgba(13, 13, 12, .5), rgba(13, 13, 12, 0) 60%);
}
.arrival-content {
  position: relative; width: 100%;
  padding-bottom: max(28px, calc(var(--u) * 60));
}
.arrival-title {
  font-size: var(--fs-hero);
  line-height: 1.02;
  letter-spacing: -.012em;
  color: var(--travertine);
  margin-bottom: calc(var(--u) * 46);
}
.h1-line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.h1-line > span { display: inline-block; }
.arrival-rule {
  display: block; height: 1px; background: var(--champagne);
  transform-origin: 0 50%;
  margin-bottom: calc(var(--u) * 36);
}
.arrival-foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: calc(var(--u) * 60);
}
.arrival-sub { max-width: 35em; font-size: 1.0625rem; }
.arrival-actions { display: flex; align-items: center; gap: calc(var(--u) * 36); flex-shrink: 0; }
.arrival-tag { z-index: 2; position: absolute; right: var(--gut); top: calc(var(--header) + 14px); text-align: right; }
.arrival-tag::before { content: ""; display: inline-block; width: calc(var(--u) * 28); height: 1px; margin-right: 12px; vertical-align: middle; background: var(--champagne); }

/* intro (CSS only, starts at first paint; the headline waits for the display font, capped at 350 ms) */
.js .site-header { animation: fade-in .9s ease .28s both; }
.js .arrival-media { animation: fade-in 1.1s cubic-bezier(.33, 0, .2, 1) .06s both; }
.js .arrival-media img { animation: settle 1.55s var(--ease) .04s both; }
.js .arrival-rule { animation: draw-rule 1.05s var(--ease-io) .3s both; }
.js .h1-line > span { transform: translateY(112%); }
.js.type-ready .h1-line > span { animation: set-line .95s var(--ease) both; animation-delay: calc(var(--td, 0ms) + var(--d, 0ms)); }
.js .arrival-sub { animation: fade-in .8s ease .88s both; }
.js .arrival-actions { animation: fade-in .8s ease 1s both; }
.js .arrival-tag { animation: fade-in .6s ease 1.05s both; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes settle { from { transform: scale(1.06); } to { transform: none; } }
@keyframes draw-rule { from { transform: scaleX(0); } to { transform: none; } }
@keyframes set-line { from { transform: translateY(112%); } to { transform: none; } }

/* SplitText line masks: room for descenders of the thin serif */
[data-split] > div { padding-bottom: .12em; margin-bottom: -.12em; }

/* ---------- comfort you never hear ---------- */
.quiet { padding-block: var(--pad); }
.quiet-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap); row-gap: calc(var(--u) * 84);
}
.quiet-title {
  grid-column: 1 / span 8; grid-row: 1; align-self: end;
  font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -.01em;
}
.quiet-photo { grid-column: 10 / span 3; grid-row: 1 / span 2; margin: 0; }
.quiet-photo img { width: 100%; aspect-ratio: 950 / 1333; object-fit: cover; }
.quiet-photo .tag { display: block; margin-top: 12px; }
.quiet-body { grid-column: 4 / span 5; grid-row: 2; }
.felt {
  margin-top: calc(var(--u) * 60);
  font-family: var(--serif); font-weight: 260;
  font-size: var(--fs-h4); line-height: 1.28;
  color: var(--ivory);
  max-width: 21em;
}
.quiet-body .fineprint { margin-top: 18px; }
.quiet-facts {
  grid-column: 1 / -1; grid-row: 3;
  list-style: none; margin: calc(var(--u) * 40) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap);
}
.quiet-facts li { border-top: 1px solid rgba(200, 182, 142, .5); padding-top: calc(var(--u) * 28); padding-right: calc(var(--u) * 40); }
.quiet-facts strong {
  display: block; margin-bottom: .55em;
  font-family: var(--serif); font-weight: 280;
  font-size: clamp(1.35rem, 1.9vw, calc(var(--u) * 30)); line-height: 1.2;
  color: var(--travertine);
}
.quiet-facts span { display: block; max-width: 26em; color: var(--soft); }

/* ---------- residences ---------- */
.res-intro {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  padding-bottom: calc(var(--pad) * .55);
  border-top: 1px solid rgba(200, 182, 142, .22);
  padding-top: calc(var(--pad) * .7);
  margin-inline: var(--gut); padding-inline: 0;
}
.res-intro h2 { grid-column: 1 / span 6; font-size: var(--fs-h2); line-height: 1.04; }
.res-intro p { grid-column: 8 / span 5; align-self: end; max-width: 30em; }
.res-intro p:first-of-type { font-size: 1.125rem; }
.res-intro .fineprint { grid-row: 2; margin-top: 14px; }

.res-slides { list-style: none; margin: 0; padding: 0; }
.res-slide figure { margin: 0; }
.res-slide + .res-slide { margin-top: calc(var(--u) * 110); }
.res-media { position: relative; height: 82vh; min-height: 420px; overflow: hidden; background: #151513; }
.res-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.res-cap {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  padding: calc(var(--u) * 30) var(--gut) 0;
}
.res-name { grid-column: 1 / span 5; font-size: var(--fs-h3); line-height: 1.06; }
.res-line { grid-column: 6 / span 4; font-size: 1.0625rem; max-width: 30em; }
.res-meta { grid-column: 10 / span 3; font-size: .8125rem; font-stretch: 125%; letter-spacing: .03em; color: var(--champagne); }
.res-meta .tag { display: block; margin-top: 6px; }
.res-ui, .res-index { display: none; }

/* pinned sequence, switched on by main.js */
.res-pinned .res-stage { position: relative; height: 100vh; overflow: hidden; background: var(--noir); }
.res-pinned .res-slide { position: absolute; inset: 0; margin: 0; visibility: hidden; }
.res-pinned .res-slide:first-child { visibility: visible; }
.res-pinned .res-slide figure,
.res-pinned .res-media { position: absolute; inset: 0; height: auto; min-height: 0; }
.res-pinned .res-media img { will-change: transform; transform-origin: 50% 55%; filter: brightness(.9) saturate(.95); }
.res-pinned .res-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(13, 13, 12, .92) 0%, rgba(13, 13, 12, .7) 24%, rgba(13, 13, 12, .28) 46%, rgba(13, 13, 12, 0) 64%),
    linear-gradient(to right, rgba(13, 13, 12, .5) 0%, rgba(13, 13, 12, 0) 48%),
    linear-gradient(to left, rgba(13, 13, 12, .7) 0%, rgba(13, 13, 12, .3) 18%, rgba(13, 13, 12, 0) 34%),
    linear-gradient(to bottom, rgba(13, 13, 12, .4), rgba(13, 13, 12, 0) 18%);
}
.res-pinned .res-cap {
  position: absolute; z-index: 2;
  left: var(--gut); right: var(--gut); bottom: calc(max(96px, var(--u) * 150));
  display: block; padding: 0; max-width: calc(var(--u) * 820);
}
.res-pinned .res-name { font-size: calc(var(--fs-h3) * 1.18); margin-bottom: calc(var(--u) * 20); }
.res-pinned .res-line { max-width: 27em; font-size: 1.125rem; }
.res-pinned .res-meta { margin-top: calc(var(--u) * 22); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; }
.res-pinned .res-meta .tag { display: inline; margin: 0; }
.res-pinned .res-ui {
  display: flex; align-items: center; gap: calc(var(--u) * 28);
  position: absolute; z-index: 3; left: var(--gut); right: var(--gut); bottom: max(40px, calc(var(--u) * 64));
}
.res-count { font-size: .8125rem; font-stretch: 125%; letter-spacing: .04em; font-variant-numeric: tabular-nums; min-width: 4.6em; }
.res-track { position: relative; flex: 1; height: 1px; background: rgba(217, 209, 195, .24); }
.res-fill { position: absolute; inset: 0; background: var(--champagne); transform-origin: 0 50%; transform: scaleX(0); }

@media (min-width: 1100px) {
  .res-pinned .res-index { display: block; position: absolute; z-index: 3; right: var(--gut); top: 50%; transform: translateY(-50%); }
  .res-index ol { list-style: none; margin: 0; padding: 0; }
  .res-index a {
    display: flex; align-items: center; justify-content: flex-end; gap: calc(var(--u) * 16);
    min-height: max(44px, calc(var(--u) * 50));
    font-size: .8125rem; font-stretch: 125%; letter-spacing: .03em; text-decoration: none;
    color: rgba(217, 209, 195, .72);
    transition: color .8s var(--ease);
  }
  .res-index a::after {
    content: ""; width: calc(var(--u) * 22); height: 1px; background: currentColor;
    transform-origin: 100% 50%; transition: transform .9s var(--ease);
  }
  .res-index a:hover { color: var(--travertine); }
  .res-index a.is-active { color: var(--champagne); }
  /* same look as growing the line from 22 to 64 units, without re-layout: the link shifts left by 42 units and the line,
     scaled from its right end, is shifted back so its right end stays where it was */
  .res-index a { transition: color .8s var(--ease), transform .9s var(--ease); }
  .res-index a.is-active { transform: translateX(calc(var(--u) * -42)); }
  .res-index a.is-active::after { transform: translateX(calc(var(--u) * 42)) scaleX(2.9091); }
}

/* ---------- silence and stillness ---------- */
.calm { display: grid; grid-template-columns: 1fr 1fr; }
.calm-half {
  position: relative; overflow: hidden;
  min-height: max(100vh, 640px);
  display: flex; flex-direction: column;
}
.calm-silence { justify-content: flex-start; background: #111110; }
.calm-still { justify-content: flex-end; background: #ECE7DE; color: var(--noir); }
.calm-bg { position: absolute; inset: -14% 0; }
.calm-bg img { width: 100%; height: 100%; object-fit: cover; }
.calm-bg::after { content: ""; position: absolute; inset: 0; }
.calm-silence .calm-bg::after { background: rgba(13, 13, 12, .38); }
.calm-still .calm-bg::after { background: rgba(244, 241, 234, .42); }
.calm-text { position: relative; padding: calc(var(--pad) * .9) var(--gut); }
.calm-word {
  font-size: var(--fs-giant); line-height: .96; letter-spacing: .01em;
  margin-bottom: calc(var(--u) * 42);
}
.calm-silence .calm-word { color: var(--travertine); }
.calm-still .calm-word { color: var(--noir); }
.calm-text p { max-width: 25em; font-size: 1.0625rem; }
.calm-still .calm-text p { font-weight: 400; color: var(--ink); }

/* ---------- materials and finishes ---------- */
.finishes { padding-block: var(--pad); }
.finish-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.finish-text { grid-column: 1 / span 5; }
.finish-text h2 { font-size: var(--fs-h2); line-height: 1.04; margin-bottom: calc(var(--u) * 48); }
.model { font-size: var(--fs-h4); font-weight: 280; margin: calc(var(--u) * 70) 0 calc(var(--u) * 24); color: var(--ivory); }
.spec { margin: 0; }
.spec > div {
  display: grid; grid-template-columns: minmax(7.5em, 32%) 1fr; gap: 16px;
  padding-block: calc(var(--u) * 15);
  border-top: 1px solid rgba(200, 182, 142, .26);
}
.spec > div:last-child { border-bottom: 1px solid rgba(200, 182, 142, .26); }
.spec dt { font-size: .8125rem; font-stretch: 125%; letter-spacing: .03em; color: var(--champagne); padding-top: .2em; }
.spec dd { margin: 0; }
.finish-text > .fineprint { margin-top: 14px; }

.swatches { border: 0; margin: calc(var(--u) * 56) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.swatches legend { padding: 0; margin-bottom: calc(var(--u) * 18); font-size: .8125rem; font-stretch: 125%; letter-spacing: .03em; color: var(--champagne); }
.sw { position: relative; display: grid; gap: 12px; cursor: pointer; }
.sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw-chip {
  display: block; aspect-ratio: 3 / 4; width: min(100%, calc(var(--u) * 132));
  outline: 1px solid rgba(217, 209, 195, .18); outline-offset: 0;
  transition: outline-color .6s var(--ease), outline-offset .6s var(--ease);
}
.sw-name { font-size: .8125rem; font-stretch: 112%; line-height: 1.4; color: var(--soft); transition: color .6s var(--ease); }
.sw:hover .sw-name { color: var(--travertine); }
.sw input:checked ~ .sw-chip { outline-color: var(--champagne); outline-offset: 5px; }
.sw input:checked ~ .sw-name { color: var(--champagne); }
.sw input:focus-visible ~ .sw-chip { outline: 2px solid var(--travertine); outline-offset: 5px; }
.sw-champagne { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, rgba(0, 0, 0, 0) 1px 4px), #BFAE88; }
.sw-noir { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, rgba(0, 0, 0, 0) 1px 4px), #1D1C1A; }
.sw-calacatta { background: url("img/swatch-calacatta-480.webp") 40% 40% / cover; }
.sw-nero { background: url("img/swatch-nero-480.webp") 50% 50% / cover; }

.finish-notes { margin-top: calc(var(--u) * 22); min-height: 3.4em; }
.finish-notes p { display: none; max-width: 30em; color: var(--soft); }
.finish-notes [data-note="champagne"] { display: block; }
.finishes:has(.sw input:not([value="champagne"]):checked) [data-note="champagne"] { display: none; }
.finishes:has(input[value="noir"]:checked) [data-note="noir"],
.finishes:has(input[value="calacatta"]:checked) [data-note="calacatta"],
.finishes:has(input[value="nero"]:checked) [data-note="nero"] { display: block; }

.drawing {
  grid-column: 7 / span 6; margin: 0;
  position: sticky; top: calc(var(--header) + 3vh);
}
.drawing-box {
  position: relative;
  width: min(100%, calc(80vh * .8));
  aspect-ratio: 720 / 900;
  margin-inline: auto;
}
.drawing svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.drawing .fineprint { text-align: center; margin-top: 18px; }
.ln { fill: none; stroke: var(--champagne); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linecap: square; }
.ln.thin { stroke-opacity: .55; }
.pipe { fill: none; stroke: var(--travertine); stroke-width: 1; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.fitting { fill: var(--noir); stroke: var(--travertine); stroke-width: 1; vector-effect: non-scaling-stroke; }
.face { opacity: 0; transition: opacity 1.2s var(--ease); }
.face-champagne { opacity: 1; }
.face-champagne rect { fill: url(#grad-champagne); }
.face-noir rect { fill: #1D1C1A; }
.face-calacatta rect { fill: url(#pat-calacatta); }
.face-nero rect { fill: url(#pat-nero); }
.finishes:has(.sw input:not([value="champagne"]):checked) .face-champagne { opacity: 0; }
.finishes:has(input[value="noir"]:checked) .face-noir,
.finishes:has(input[value="calacatta"]:checked) .face-calacatta,
.finishes:has(input[value="nero"]:checked) .face-nero { opacity: 1; }
.finishes:has(input[value="calacatta"]:checked) .fin { stroke: var(--smoke); stroke-opacity: .9; }
.labels { position: absolute; inset: 0; pointer-events: none; }
.lb {
  position: absolute;
  left: calc(var(--x) / 720 * 100%); top: calc(var(--y) / 900 * 100%);
  transform: translateY(-50%);
  font-size: .75rem; font-stretch: 118%; letter-spacing: .03em; line-height: 1;
  color: var(--travertine); white-space: nowrap;
}
.lb-c { transform: translate(-50%, -50%); }
.lb-r { transform: translate(-100%, -50%); }
.lb-v { transform: translate(-50%, -50%) rotate(-90deg); }

/* ---------- architects and developers ---------- */
.trade { background: var(--travertine); color: var(--ink); padding-block: var(--pad); }
.trade-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.trade-text { grid-column: 1 / span 6; grid-row: 1 / span 2; }
.trade-text h2 { font-size: var(--fs-h2); line-height: 1.04; color: var(--noir); margin-bottom: calc(var(--u) * 48); max-width: 10em; }
.trade .lead { font-weight: 360; }
.trade-list { list-style: none; margin: calc(var(--u) * 48) 0 calc(var(--u) * 56); padding: 0; max-width: 34em; }
.trade-list li { padding-block: calc(var(--u) * 15); border-top: 1px solid rgba(13, 13, 12, .2); font-weight: 380; }
.trade-list li:last-child { border-bottom: 1px solid rgba(13, 13, 12, .2); }
.trade-photo { grid-column: 8 / span 5; grid-row: 1; margin: 0; }
.trade-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.trade-photo .tag { display: block; margin-top: 12px; color: var(--umber); }
.trade-quote { grid-column: 8 / span 5; grid-row: 2; margin: calc(var(--u) * 72) 0 0; padding: calc(var(--u) * 30) 0 0; border-top: 1px solid rgba(13, 13, 12, .2); }
.trade-quote p {
  font-family: var(--serif); font-weight: 280;
  font-size: var(--fs-h4); line-height: 1.3; color: var(--noir); max-width: 20em;
}
.trade-quote footer { margin-top: 18px; font-size: .8125rem; font-stretch: 125%; letter-spacing: .03em; color: var(--umber); }

/* ---------- private viewing ---------- */
.viewing { padding-block: var(--pad); }
.viewing-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: calc(var(--u) * 72); align-items: start; }
.viewing-title { grid-column: 1 / -1; font-size: var(--fs-h2); line-height: 1.04; }
.viewing-photo { grid-column: 1 / span 3; }
.viewing-photo img { width: 100%; aspect-ratio: 900 / 1333; object-fit: cover; }
.viewing-info { grid-column: 4 / span 3; }
.viewing-info .lead { font-size: 1.0625rem; }
.showroom { font-style: normal; margin-top: calc(var(--u) * 44); padding-top: calc(var(--u) * 26); border-top: 1px solid rgba(200, 182, 142, .3); }
.showroom-name { display: block; font-family: var(--serif); font-weight: 300; font-size: 1.375rem; margin-bottom: 8px; color: var(--ivory); }
.showroom-hours { display: block; margin-top: 14px; color: var(--soft); }
.showroom a { display: inline-block; margin-top: 4px; padding-block: 10px; text-decoration: none; background: linear-gradient(var(--champagne), var(--champagne)) 0 calc(100% - 8px) / 100% 1px no-repeat; }

.viewing-form { grid-column: 8 / span 5; display: grid; gap: calc(var(--u) * 34); }
.field label { display: block; font-size: .8125rem; font-stretch: 125%; letter-spacing: .03em; color: var(--champagne); margin-bottom: 4px; }
.field .opt { color: var(--soft); margin-left: 8px; }
.field input, .field select {
  display: block; width: 100%;
  min-height: max(52px, calc(var(--u) * 58));
  padding: 10px 0;
  font: inherit; font-size: 1.0625rem; font-weight: 340; color: var(--travertine);
  background: transparent; border: 0; border-bottom: 1px solid rgba(217, 209, 195, .42); border-radius: 0;
  color-scheme: dark;
  transition: border-color .5s var(--ease);
}
.field input:hover, .field select:hover { border-bottom-color: rgba(217, 209, 195, .7); }
.field input:focus, .field select:focus { border-bottom-color: var(--champagne); }
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--champagne); outline-offset: 6px; }
.select { position: relative; }
.select::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 9px; height: 9px;
  border-right: 1px solid var(--champagne); border-bottom: 1px solid var(--champagne);
  transform: translateY(-75%) rotate(45deg); pointer-events: none;
}
.field select { appearance: none; -webkit-appearance: none; padding-right: 28px; cursor: pointer; }
.field option { background: var(--noir); color: var(--travertine); }
.hint { margin-top: 8px; font-size: .8125rem; color: var(--soft); }
.err { margin-top: 8px; font-size: .8125rem; color: var(--err); min-height: 0; }
.err:empty { display: none; }
.field.invalid input, .field.invalid select { border-bottom-color: var(--err); }
.form-end { display: grid; gap: 14px; justify-items: start; margin-top: calc(var(--u) * 10); }
.form-done:empty { display: none; }
.form-done { padding-top: calc(var(--u) * 10); }
.form-done h3 { font-size: var(--fs-h4); font-weight: 260; color: var(--ivory); margin-bottom: 14px; }
.form-done p { max-width: 30em; }
.form-done .fineprint { margin-top: 12px; }
.as-button { border: 0; background-color: transparent; color: var(--travertine); font-family: var(--sans); cursor: pointer; margin-top: 12px; padding-inline: 0; }
.viewing-form.is-done > :not(.form-done) { display: none; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid rgba(200, 182, 142, .26); padding: calc(var(--u) * 96) 0 calc(var(--u) * 56); }
.footer-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: calc(var(--u) * 56); align-items: start; }
.footer-mark {
  grid-column: 1 / span 5;
  font-family: var(--serif); font-weight: 200;
  font-size: clamp(3.2rem, 7vw, calc(var(--u) * 112)); line-height: .9; letter-spacing: .3em;
  color: var(--travertine);
}
.footer-line { grid-column: 6 / span 3; max-width: 22em; color: var(--soft); }
.footer-nav { grid-column: 10 / span 3; display: flex; flex-direction: column; align-items: flex-start; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; font-stretch: 118%; text-decoration: none; color: var(--soft); transition: color .5s ease; }
.footer-nav a:hover { color: var(--champagne); }
.footer-small {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 40px;
  padding-top: calc(var(--u) * 26); border-top: 1px solid rgba(217, 209, 195, .12);
  font-size: .8125rem; line-height: 1.6; color: var(--soft);
}
.footer-small p { max-width: 52em; }

/* ---------- smaller screens ---------- */
@media (max-width: 1099px) {
  .site-nav { display: none; }
  .arrival-foot { flex-direction: column; align-items: flex-start; gap: 28px; }
  .arrival-sub { max-width: 34em; }
}
@media (max-width: 899px) {
  .quiet-grid, .res-intro, .finish-grid, .trade-grid, .viewing-grid, .footer-grid, .res-cap { display: block; }
  .quiet-photo { width: 64%; margin: 48px 0 0 auto; }
  .quiet-body { margin-top: 48px; }
  .quiet-facts { display: block; margin-top: 56px; }
  .quiet-facts li { padding-right: 0; padding-bottom: 28px; }
  .res-intro p { margin-top: 24px; }
  .res-cap > * + * { margin-top: 12px; }
  .res-media { height: 70vh; }
  .calm { grid-template-columns: 1fr; }
  .calm-half { min-height: 88vh; }
  .drawing { position: relative; top: auto; margin-top: 64px; }
  .drawing-box { width: 100%; }
  .swatches { row-gap: 24px; }
  .trade-photo { margin-top: 56px; }
  .trade-quote { margin-top: 56px; }
  .viewing-photo { display: none; }
  .viewing-title { margin-bottom: 32px; }
  .viewing-form { margin-top: 56px; }
  .footer-grid > * + * { margin-top: 32px; }
  .footer-small { display: block; }
  .footer-small p + p { margin-top: 10px; }
}
@media (max-width: 699px) {
  .btn .long { display: none; }
  .btn .short { display: inline; }
  .arrival-actions { flex-wrap: wrap; gap: 8px 28px; }
  .arrival-media img { object-position: 52% 60%; }
  .arrival-media::after {
    background: linear-gradient(to top, rgba(13, 13, 12, .96) 0%, rgba(13, 13, 12, .84) 42%, rgba(13, 13, 12, .5) 66%, rgba(13, 13, 12, .28) 84%, rgba(13, 13, 12, .55) 100%);
  }
  .res-pinned .res-cap { bottom: 104px; }
  .res-pinned .res-name { font-size: 2.3rem; }
  .res-pinned .res-line { font-size: 1.0625rem; }
  .spec > div { grid-template-columns: 1fr; gap: 2px; }
  .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb { font-size: .6875rem; }
  .lb-pipes { white-space: normal; width: 6.4em; text-align: right; line-height: 1.25; top: calc(114 / 900 * 100%); }
}

/* ---------- reduced motion: everything visible, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js .h1-line > span { transform: none; }
}

/* ---------- language switch ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lang { display: inline-flex; align-items: center; flex: none; margin-right: calc(var(--u) * -18); }
.lang-b {
  position: relative; min-height: 44px; min-width: 44px; padding: 0 6px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: .8125rem; font-weight: 400; font-stretch: 125%; letter-spacing: .04em; line-height: 1;
  color: var(--soft); transition: color .5s ease;
}
.lang-b-zh { font-family: "GLN Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif; font-stretch: 100%; letter-spacing: 0; }
.lang-b::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 9px; height: 1px; background: var(--champagne);
  transform: scaleX(0); transition: transform .9s var(--ease);
}
.lang-b:hover { color: var(--travertine); }
.lang-b[aria-pressed="true"] { color: var(--champagne); }
.lang-b[aria-pressed="true"]::after { transform: scaleX(1); }
.lang-sep { color: rgba(217, 209, 195, .4); font-size: .8125rem; }
@media (max-width: 699px) {
  .site-header { gap: 10px; }
  .lang { margin-right: 0; }
  .lang-b { min-width: 44px; padding: 0; }
}
/* narrow phones: the switch and the short button share the header row with the wordmark */
@media (max-width: 420px) {
  .site-header { gap: 6px; }
  .lang-sep { margin-inline: -5px; pointer-events: none; }
  .site-header .btn-small { padding: 0 12px; font-stretch: 110%; white-space: nowrap; }
}

/* ---------- Chinese typography ---------- */
html:lang(zh) {
  --serif: "GLN Display", "GLN Serif SC", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "GLN SC Fallback", serif;
  --sans: "GLN Sans", "GLN Sans SC", "GLN SC Fallback", "PingFang SC", "Microsoft YaHei", sans-serif;
  --fs-hero: clamp(2.1rem, 5.4vw, calc(var(--u) * 80));
  --fs-h2: clamp(1.9rem, 3.9vw, calc(var(--u) * 60));
  --fs-h3: clamp(1.7rem, 2.8vw, calc(var(--u) * 46));
  --fs-h4: clamp(1.3rem, 1.9vw, calc(var(--u) * 30));
  --fs-giant: clamp(3rem, 7vw, calc(var(--u) * 132));
}
/* no wide stretch, tracking or italics on Chinese; the wordmark keeps its tracking */
html:lang(zh) body, html:lang(zh) body * { font-stretch: 100%; letter-spacing: 0; font-style: normal; }
html:lang(zh) .wordmark { letter-spacing: .36em; }
html:lang(zh) .footer-mark { letter-spacing: .3em; }
html:lang(zh) .lang-b[lang="en"] { font-stretch: 125%; letter-spacing: .04em; }
html:lang(zh) .calm-word { letter-spacing: 0 !important; line-height: 1.2; }
html:lang(zh) body { line-height: 1.85; line-break: strict; }
html:lang(zh) h1, html:lang(zh) h2, html:lang(zh) h3 { font-weight: 300; line-height: 1.32; }
html:lang(zh) .arrival-title { line-height: 1.3; }
html:lang(zh) .lead { line-height: 1.85; max-width: 30em; }
html:lang(zh) .fineprint, html:lang(zh) .hint, html:lang(zh) .err { line-height: 1.75; }
html:lang(zh) .res-line, html:lang(zh) .calm-text p, html:lang(zh) .arrival-sub { line-height: 1.8; }
html:lang(zh) .arrival-sub { max-width: 30em; }
html:lang(zh) .quiet-facts strong, html:lang(zh) .trade-quote p { line-height: 1.5; }
html:lang(zh) .trade-quote p { max-width: 18em; }
html:lang(zh) .felt, html:lang(zh) .model, html:lang(zh) .showroom-name { line-height: 1.5; }
html:lang(zh) p, html:lang(zh) li, html:lang(zh) dd { text-wrap: pretty; }