/* Elta: one day at Elta, morning to night.

   The page's ground is the hour. site.js sets --g1, --g2 (the ground's top
   and foot), --sc-ink, --sc-ink-soft and --sc-accent from the time of day as
   you scroll; these values are the morning, which is also what shows without
   JavaScript. Cards (particulars, timetable, plans, the booking) keep their
   own fixed ink, so they read the same at noon and at night. The renders are
   never filtered: each one shows its own hour. */

:root {
  font-variant-numeric: lining-nums;
  --g1: #F2EEE5;
  --g2: #E6EEE8;
  --sc-canvas:     #F2EEE5;
  --sc-surface:    #E9E5DB;
  --sc-ink:        #1D2621;
  --sc-ink-soft:   #4F5B53;
  --sc-accent:     #8C5A33;
  --sc-accent-ink: #FFFFFF;
  --sc-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sc-font-text:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-font-mono:    "Instrument Sans", system-ui, sans-serif;

  --card: #FCFBF7;
  --card-ink: #1D2621;
  --card-soft: #56625A;
  --lamp: #E8B66E;
  --lamp-ink: #1A1610;
  --sky-ink: #142536;

  --sc-shadow-color: 150 20% 10%;
  --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.07), 0 14px 32px -12px hsl(var(--sc-shadow-color) / 0.22);
  --sc-e3: 0 6px 14px hsl(var(--sc-shadow-color) / 0.16), 0 34px 70px -22px hsl(var(--sc-shadow-color) / 0.46);
  --sc-edge: none;

  --sc-r-sm: 4px; --sc-r-md: 8px; --sc-r-lg: 14px;
  --sc-maxw: 86rem;
  --stamp-w: 8.5rem;
  --chrome-h: 4.25rem;
}

html { background: var(--g1); scroll-padding-top: 5rem; }
body { background: transparent; }
.sky {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, var(--g1) 0%, var(--g1) 30%, var(--g2) 100%);
}

.sc-display { font-weight: 360; letter-spacing: -0.018em; line-height: 1.02; font-optical-sizing: auto; }
.sc-display--lg { font-size: clamp(2.3rem, 1.45rem + 3.1vw, 4.3rem); }
.sc-display--md { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem); }
.sc-lede { color: var(--sc-ink); font-weight: 400; max-width: 56ch; }
.small { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.55; margin: 0; }
.hint { white-space: nowrap; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h3, h4 { font-family: var(--sc-font-text); font-weight: 600; font-size: var(--sc-t-base); letter-spacing: 0; margin: 0; }
p { margin: 0; }
figure { margin: 0; }
figcaption { margin-top: var(--sc-3); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
figcaption b { font-weight: 650; color: var(--sc-ink); margin-right: 0.4em; font-variant-numeric: tabular-nums; }
img { height: auto; }

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

/* a card keeps daylight ink whatever the hour */
.card {
  --sc-ink: var(--card-ink); --sc-ink-soft: var(--card-soft);
  --sc-accent: #8C5A33; --sc-accent-ink: #FFFFFF;
  --sc-hairline: rgb(29 38 33 / 0.12); --sc-hairline-strong: rgb(29 38 33 / 0.24);
  background: var(--card); color: var(--card-ink);
  border-radius: var(--sc-r-md); box-shadow: var(--sc-e2);
}

/* ------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.75rem 1.5rem;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font: 600 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: 999px; cursor: pointer;
  box-shadow: var(--sc-e1);
  transition: background-color 200ms var(--sc-ease-out), color 200ms var(--sc-ease-out), transform 120ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out), opacity 200ms var(--sc-ease-out);
}
.btn:active { transform: scale(0.97); 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 1.05rem; font-size: var(--sc-t-sm); }
.btn--block { width: 100%; }
.btn--lamp { background: var(--lamp); color: var(--lamp-ink); }
@media (hover: hover) and (pointer: fine) { .btn--lamp:hover { background: #F0C584; } }
.btn--ghost { background: transparent; color: var(--sc-ink); border-color: color-mix(in oklab, var(--sc-ink) 50%, transparent); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover { background: var(--sc-ink); color: var(--g1); } }
.link-arrow { font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.link-arrow::after { content: " \2192"; }

.credit { font-size: var(--sc-t-xs); letter-spacing: 0.02em; }

/* --------------------------------------------------------------- stamps --
   Every hour carries its time in the margin, like a timetable's left column.
   It sticks beside the section while you read it. */
.stamp {
  font: 500 var(--sc-t-xs)/1 var(--sc-font-text); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.stamp time {
  display: block; margin-bottom: 0.45rem;
  font: 300 clamp(2.5rem, 1.7rem + 2.2vw, 3.7rem)/0.86 var(--sc-font-display); letter-spacing: -0.03em;
  font-variant-numeric: lining-nums tabular-nums; text-transform: none; color: var(--sc-ink);
}
.stamp--light, .stamp--light time { color: #F6F2EA; }

/* ============================================================ 7:30 AM ==
   The look-up. Three planes of one render, scaled together to cover the
   frame: sky, towers, leaves. site.js moves them apart as the section
   scrolls away and, on a desktop, a little with the pointer. */
.morning { position: relative; height: 100svh; min-height: 34rem; overflow: clip; background: #BCD3E6; }
.morning__scene {
  --sw: max(108vw, 108svh * 1.7781);
  --fx: 0.5; --fy: 0.5;
  position: absolute; width: var(--sw); height: calc(var(--sw) / 1.7781);
  left: calc(50% - var(--sw) * var(--fx)); top: calc(50% - var(--sw) / 1.7781 * var(--fy));
}
.pl {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0) scale(var(--s, 1));
  transform-origin: 50% 55%; will-change: transform;
}
.pl--leaves { transform-origin: 50% 42%; }
/* the name, in the open sky right of the towers' crowns: in front of the
   towers, behind the leaves */
.morning__name {
  position: absolute; left: 50.6%; top: 9.5%; margin: 0;
  font: 330 calc(var(--sw) * 0.088)/0.8 var(--sc-font-display); letter-spacing: -0.035em;
  color: var(--sky-ink);
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0); will-change: transform;
}
.morning__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(58% 64% at 0% 100%, rgb(8 16 12 / 0.9) 0%, rgb(8 16 12 / 0.76) 46%, rgb(8 16 12 / 0) 100%),
    linear-gradient(to top, rgb(8 16 12 / 0.35) 0%, rgb(8 16 12 / 0) 40%);
}
.morning__copy {
  position: absolute; left: var(--sc-gutter); bottom: clamp(2.5rem, 9vh, 6rem);
  max-width: 27rem; display: grid; gap: var(--sc-4); color: #F6F2EA;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.45);
  will-change: transform, opacity;
}
.morning__copy .stamp time { font-size: clamp(2.2rem, 1.6rem + 1.8vw, 3.1rem); }
.morning__title { margin: 0; font: inherit; }
.morning__h1name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.morning__where {
  display: block; width: fit-content; font: 500 var(--sc-t-sm)/1.2 var(--sc-font-text); letter-spacing: 0.14em; text-transform: uppercase;
}
.morning__lede { font-size: var(--sc-t-lg); line-height: 1.45; max-width: 26ch; text-wrap: pretty; }
.morning__actions { margin-top: var(--sc-2); }
.morning__credit {
  position: absolute; right: var(--sc-gutter); bottom: 1.1rem; color: #F6F2EA;
  background: rgb(10 14 12 / 0.72); padding: 0.2rem 0.55rem; border-radius: 999px;
}

/* ================================================================ HOURS == */
.hour { position: relative; padding: calc(var(--sc-section) * 0.72) 0; }
.hour--quiet { padding: calc(var(--sc-section) * 0.6) 0; }
.hour__grid { display: grid; grid-template-columns: var(--stamp-w) minmax(0, 1fr); column-gap: var(--sc-7); }
.hour__grid > .stamp { position: sticky; top: 6.25rem; align-self: start; }
.hour__body { grid-column: 2; min-width: 0; }

/* ------------------------------------------------------------ developer -- */
.dev { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sc-7) var(--sc-8); align-items: start; }
.dev__head { grid-column: 1 / -1; max-width: 50rem; }
.dev__head h2 { max-width: 15ch; }
.partners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-6); }
.partner { display: grid; gap: var(--sc-3); align-content: start; padding-top: var(--sc-4); border-top: 1px solid var(--sc-ink); }
.partner h3 { font: 400 var(--sc-t-xl)/1.05 var(--sc-font-display); letter-spacing: -0.015em; }
.partner p { font-size: var(--sc-t-sm); line-height: 1.6; color: var(--sc-ink); }
.partner__figs { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.partner__figs span { color: var(--sc-ink-soft); }
.partner__figs b { display: block; font: 300 var(--sc-t-2xl)/1 var(--sc-font-display); letter-spacing: -0.02em; color: var(--sc-ink); font-variant-numeric: lining-nums tabular-nums; }
.particulars { padding: var(--sc-5) var(--sc-6) var(--sc-6); }
.particulars h3 { font: 400 var(--sc-t-lg)/1.1 var(--sc-font-display); margin-bottom: var(--sc-3); }
.particulars dl, .book__facts { margin: 0; }
.particulars dl > div, .book__facts > div {
  display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--sc-3);
  padding: 0.5rem 0; border-bottom: 1px solid var(--sc-hairline); font-size: var(--sc-t-sm);
}
.particulars dt, .book__facts dt { color: var(--sc-ink-soft); }
.particulars dd, .book__facts dd { margin: 0; }
.works { grid-column: 1 / -1; list-style: none; margin: var(--sc-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sc-5); }
.works li { display: grid; gap: var(--sc-2); font-size: var(--sc-t-sm); }
.works img { width: 100%; aspect-ratio: 300 / 221; object-fit: cover; border-radius: var(--sc-r-sm); }
.works__note { grid-column: 1 / -1; margin-top: calc(var(--sc-5) * -1); }

/* ------------------------------------------------------------- location -- */
.loc__head { max-width: 52rem; }
.drone { margin: var(--sc-8) 0 var(--sc-8); }
.drone__frame { height: clamp(15rem, 31vw, 30rem); overflow: hidden; }
.drone__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 74%; }
.drone figcaption { margin-top: var(--sc-3); }
.loc__body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--sc-7); align-items: start; }
.loc__map a { display: block; }
.loc__map img { width: 100%; border-radius: var(--sc-r-sm); box-shadow: var(--sc-e2); }

.tt { padding: var(--sc-5) var(--sc-5) var(--sc-5); }
.tt__title { font: 400 var(--sc-t-lg)/1.1 var(--sc-font-display); margin-bottom: var(--sc-4); }
.tt__tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: var(--sc-4); }
.tt__tabs[hidden] { display: none; }
.tt__tabs button, .blk-tabs 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: 999px;
  padding: 0.5rem 0.9rem; min-height: 2.5rem; cursor: pointer;
  transition: background-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .tt__tabs button:hover, .blk-tabs button:hover { border-color: var(--sc-ink); } }
.tt__tabs [aria-selected="true"], .blk-tabs [aria-selected="true"] { background: var(--sc-ink); border-color: var(--sc-ink); color: var(--card); }
.tt table { width: 100%; border-collapse: collapse; font-size: var(--sc-t-sm); }
.tt caption { text-align: left; font-weight: 600; padding: var(--sc-4) 0 var(--sc-2); }
.tt.is-tabbed caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tt thead th { font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); text-align: right; padding: 0 0 0.45rem; border-bottom: 1px solid var(--sc-ink); }
.tt thead th:first-child { text-align: left; }
.tt tbody th { font-weight: 400; text-align: left; padding: 0.45rem 0.5rem 0.45rem 0; border-bottom: 1px solid var(--sc-hairline); line-height: 1.35; }
.tt td { text-align: right; padding: 0.45rem 0 0.45rem 0.5rem; border-bottom: 1px solid var(--sc-hairline); font-variant-numeric: tabular-nums; white-space: nowrap; width: 4.6rem; }
.tt td:empty::after { content: "\2013"; color: color-mix(in oklab, var(--sc-ink-soft) 55%, transparent); }
.tt .tt__group th[scope="rowgroup"] { padding-top: var(--sc-4); font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-accent); border-bottom: 0; }
.tt__panel[hidden] { display: none; }
.tt__note { margin-top: var(--sc-4); font-size: var(--sc-t-xs); }

/* ------------------------------------------------------------ site plan -- */
.site { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sc-7) var(--sc-8); align-items: start; }
.site__head { grid-column: 1 / -1; max-width: 54rem; }
.site__head h2 { max-width: 18ch; }
.site__plan a { display: block; }
.site__plan img { width: 100%; border-radius: var(--sc-r-sm); box-shadow: var(--sc-e2); background: #fff; }
.facilities { display: grid; gap: var(--sc-6); }
.facilities h3 { font: 400 var(--sc-t-lg)/1.1 var(--sc-font-display); padding-bottom: var(--sc-2); border-bottom: 1px solid var(--sc-ink); margin-bottom: var(--sc-3); }
.facilities__list { margin: 0; display: grid; gap: var(--sc-3); }
.facilities__list dt { font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); margin-bottom: 0.3rem; }
.facilities__list dd { margin: 0; }
.facilities__list ol { margin: 0; padding: 0 0 0 2rem; list-style: decimal; columns: 2; column-gap: var(--sc-7); font-size: var(--sc-t-sm); }
.facilities__list li { break-inside: avoid; padding: 0.12rem 0 0.12rem 0.25rem; line-height: 1.4; }
.facilities__list li::marker { font-variant-numeric: tabular-nums; color: var(--sc-ink-soft); font-size: var(--sc-t-xs); }

.views { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sc-7) var(--sc-6); margin-top: var(--sc-9); }
.views__a { grid-column: 1 / span 8; }
.views__b { grid-column: 9 / span 4; align-self: end; }
.views__c { grid-column: 1 / span 5; }
.views__d { grid-column: 6 / span 7; margin-top: var(--sc-8); }
.views__frame { height: clamp(16rem, 36vw, 34rem); overflow: hidden; border-radius: var(--sc-r-sm); }
.views__frame img { width: 100%; height: 118%; object-fit: cover; margin-top: -9%; }
.views img { border-radius: var(--sc-r-sm); }
.views__b img, .views__c img, .views__d img { width: 100%; }

/* ------------------------------------------------------------- brochure -- */
.brochure { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: var(--sc-8); align-items: center; }
.brochure__cover img { width: 100%; border-radius: 2px; box-shadow: var(--sc-e3); }
.brochure__copy { max-width: 34rem; }
.brochure__actions { display: flex; align-items: center; gap: var(--sc-4); flex-wrap: wrap; margin-top: var(--sc-2); }

/* ---------------------------------------------------------- floor plans -- */
.plans__head { max-width: 56rem; }
.plans__head h2 { max-width: 16ch; }
.filters { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: var(--sc-7) 0 var(--sc-6); }
.filters button {
  font: 500 var(--sc-t-sm)/1.2 var(--sc-font-text); color: var(--sc-ink);
  background: color-mix(in oklab, var(--card) 70%, transparent); border: 1px solid var(--sc-hairline-strong); border-radius: 999px;
  padding: 0.55rem 1rem; cursor: pointer; min-height: 2.5rem;
  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) { .filters button:not(:disabled):hover { border-color: var(--sc-ink); } }
.filters [aria-pressed="true"] { background: var(--sc-ink); border-color: var(--sc-ink); color: var(--g1); }
.filters button:disabled { opacity: 0.45; cursor: default; }
.filters .n { margin-left: 0.35rem; font-weight: 400; opacity: 0.75; font-variant-numeric: tabular-nums; }

.plans__body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--sc-7); align-items: start; }
.sizes__axis {
  display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) minmax(0, 1fr) 5.4rem 5.6rem;
  font-size: var(--sc-t-xs); color: var(--sc-ink-soft); padding-bottom: var(--sc-2); border-bottom: 1px solid var(--sc-ink);
}
/* bars are drawn at sq ft / 2,000 */
.sizes__axis span { grid-column: 3; grid-row: 1; position: relative; height: 1.2em; }
.sizes__axis i { position: absolute; top: 0; font-style: normal; white-space: nowrap; }
.sizes__axis b { font-weight: 400; text-align: right; white-space: nowrap; }
.sizes__axis b:last-child { padding-right: 0.5rem; }
.sizes__list { list-style: none; margin: 0; padding: 0; }
.sizes__list li[hidden] { display: none; }
.size {
  width: 100%; display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) minmax(0, 1fr) 5.4rem 5.6rem;
  align-items: center; min-height: 3rem; padding: 0.35rem 0;
  background: none; border: 0; border-bottom: 1px solid var(--sc-hairline); text-align: left; cursor: pointer;
  font-size: var(--sc-t-sm); color: var(--sc-ink); border-radius: 0;
  transition: background-color 140ms var(--sc-ease-out);
}
.size__code { font: 400 1.4rem/1 var(--sc-font-display); padding-left: 0.5rem; }
.size__name { color: var(--sc-ink-soft); padding-right: var(--sc-3); line-height: 1.3; }
.size__bar { position: relative; height: 1.5rem; display: flex; align-items: center; }
.size__bar i { display: block; height: 0.42rem; width: calc(var(--w) * 100%); border-radius: 999px; background: color-mix(in oklab, var(--sc-ink) 30%, transparent); }
.size__ft { text-align: right; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: var(--sc-t-xs); }
.size__left { text-align: right; padding-right: 0.5rem; font-variant-numeric: tabular-nums; color: var(--sc-ink-soft); font-size: var(--sc-t-xs); }
.size__left.is-open { color: var(--sc-accent); font-weight: 650; }
@media (hover: hover) and (pointer: fine) { .size:hover { background: color-mix(in oklab, var(--card) 60%, transparent); } }
.size[aria-pressed="true"] { background: var(--card); box-shadow: inset 3px 0 0 var(--sc-accent); }
.size[aria-pressed="true"] .size__bar i { background: var(--sc-accent); }
.size:focus-visible { outline-offset: -2px; }

.plan-panel { position: sticky; top: 6rem; padding: var(--sc-5); display: grid; gap: var(--sc-4); }
.plan-panel[hidden] { display: none; }
.plan-panel__fig a { display: block; }
.plan-panel__fig img { width: 100%; max-height: min(64vh, 40rem); object-fit: contain; object-position: 50% 0; }
.plan-panel figcaption { margin-top: var(--sc-2); font-size: var(--sc-t-xs); }
.pm__type { font: 400 var(--sc-t-2xl)/1 var(--sc-font-display); }
.pm__name { margin-top: 0.3rem; color: var(--sc-ink-soft); }
.plan-panel .pm__type { display: inline; font-size: var(--sc-t-xl); }
.plan-panel .pm__name { display: inline; margin-left: 0.6rem; }
.pm__dl { margin: var(--sc-4) 0 0; border-top: 1px solid var(--sc-ink); }
.pm__dl > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--sc-3); padding: 0.4rem 0; border-bottom: 1px solid var(--sc-hairline); font-size: var(--sc-t-sm); }
.plan-panel .pm__dl { margin-top: var(--sc-3); }
.pm__dl dt { color: var(--sc-ink-soft); }
.pm__dl dd { margin: 0; }
.pm__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-3) var(--sc-5); margin-top: var(--sc-5); }
.plan-panel .pm__actions { margin-top: var(--sc-4); }
.pm__sheet { margin-top: var(--sc-3); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.plan-panel .pm__sheet { display: none; }
.plans__download { display: flex; align-items: center; gap: var(--sc-4); flex-wrap: wrap; margin-top: var(--sc-7); }
.plans__static { margin: var(--sc-4) 0 0; padding-left: 1.2em; }

.balcony { margin-top: var(--sc-9); }
.balcony img { width: 100%; height: clamp(15rem, 33vw, 36rem); object-fit: cover; object-position: 40% 50%; }

/* -------------------------------------------------------- availability -- */
.golden { margin-bottom: var(--sc-9); }
.golden img { width: 100%; height: clamp(16rem, 38vw, 40rem); object-fit: cover; object-position: 50% 62%; }
.avail__title { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: var(--sc-6); }
.avail__figure { font-family: var(--sc-font-display); line-height: 0.8; letter-spacing: -0.03em; white-space: nowrap; }
.avail__figure [data-sc-count] { font-variant-numeric: lining-nums tabular-nums; font-weight: 300; font-size: clamp(6rem, 3rem + 11vw, 13rem); color: var(--sc-accent); }
.avail__of { font-size: var(--sc-t-2xl); color: var(--sc-ink-soft); font-weight: 300; }
.avail__title h2 { max-width: 18ch; padding-bottom: 0.45em; text-wrap: balance; }

.blk-tabs { display: flex; gap: 0.45rem; margin-bottom: var(--sc-5); }
.blk-tabs[hidden] { display: none; }
.chart { --rh: 1.2rem; --gap: 2px; display: grid; grid-template-columns: 6.6fr 8.4fr; gap: clamp(1.25rem, 3vw, 3rem); align-items: end; }
.blk { min-width: 0; }
.blk[hidden] { display: none; }
.blk__name { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); margin-bottom: var(--sc-3); }
.blk__name strong { color: var(--sc-ink); font-weight: 650; margin-right: 0.4rem; }
.blk__grid { display: grid; grid-auto-rows: var(--rh); gap: var(--gap); }
.blk__col { text-align: center; align-self: end; font-size: 0.66rem; line-height: 1.25; color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; padding-bottom: 0.3rem; }
.blk__col b { display: block; color: var(--sc-ink); font-weight: 650; }
.blk__lvl { grid-column: 1; display: flex; align-items: center; justify-content: flex-end; padding-right: 0.45rem; font-size: 0.64rem; color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.u {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-width: 0; padding: 0; border: 1px solid transparent; border-radius: 2px;
  font: 600 0.62rem/1 var(--sc-font-text); color: #1D2621;
}
.u__n { white-space: nowrap; font-variant-numeric: tabular-nums; }
button.u { cursor: pointer; transition: transform 120ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out), opacity 200ms var(--sc-ease-out); }
button.u[data-cat="1br"] { background: #C9D5CC; border-color: #93A598; }
button.u[data-cat="2br"] { background: #A9B8AD; border-color: #6F8275; }
button.u[data-cat="3br"] { background: #D2B4A2; border-color: #9C7560; }
button.u[data-cat="4br"] { background: #E3D0B7; border-color: #AE9272; }
button.u[data-cat="5br"] { background: #D7D8DC; border-color: #9B9CA3; }
@media (hover: hover) and (pointer: fine) { button.u:hover { transform: translateY(-1px); box-shadow: var(--sc-e1); z-index: 1; } }
button.u:active { transform: scale(0.97); }
button.u:disabled { opacity: 0.2; cursor: default; transform: none; box-shadow: none; }
button.u.is-hl { box-shadow: 0 0 0 2px var(--g1), 0 0 0 4px var(--sc-ink); z-index: 1; }
.u--na { border: 1px solid color-mix(in oklab, var(--sc-ink) 14%, transparent); background: color-mix(in oklab, var(--card) 38%, transparent); }

.avail__foot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sc-4) var(--sc-8); margin-top: var(--sc-6); align-items: start; }
.legend { display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5); list-style: none; padding: 0; margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.legend li { display: flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
.sw { display: inline-block; width: 1.05rem; height: 0.8rem; border-radius: 2px; }
.sw--1br { background: #C9D5CC; } .sw--2br { background: #A9B8AD; } .sw--3br { background: #D2B4A2; } .sw--4br { background: #E3D0B7; } .sw--5br { background: #D7D8DC; }
.sw--na { border: 1px solid color-mix(in oklab, var(--sc-ink) 30%, transparent); }
.avail__foot .small { max-width: 62ch; }

/* ================================================== 6:45 PM TO 7:45 PM ==
   The peak. A window on the page's own ground: the renders inside it keep
   their hour, the ground around it goes from amber to night. Night falls
   down the window: --k1 and --k2 (0 to 1) clip the next frame from the top. */
.dusk { position: relative; }
/* the engine makes the stage sticky; giving it a position here would undo that */
.dusk__stage { overflow: clip; }
.dusk__window {
  position: absolute; inset: clamp(5rem, 11vh, 6.5rem) var(--sc-gutter) clamp(1.5rem, 6vh, 3.5rem);
  border-radius: var(--sc-r-md); overflow: hidden; box-shadow: var(--sc-e3); background: #1C2438;
}
.dusk__frame { position: absolute; inset: 0; margin: 0; }
.dusk__frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--z, 1)); }
.dusk__frame[data-dusk-frame="1"] { clip-path: inset(0 0 calc((1 - var(--k1, 0)) * 100%) 0); }
.dusk__frame[data-dusk-frame="2"] { clip-path: inset(0 0 calc((1 - var(--k2, 0)) * 100%) 0); }
.dusk__frame[data-dusk-frame="2"] img { object-position: 50% 52%; }
.dusk__horizon {
  position: absolute; left: 0; right: 0; top: calc(var(--hk, 0) * 100%); height: 3.5rem; margin-top: -1px;
  pointer-events: none; opacity: var(--ho, 0);
  background: linear-gradient(180deg, rgb(255 222 176 / 0.9) 0, rgb(255 222 176 / 0.9) 1px, rgb(255 196 140 / 0.28) 2px, rgb(255 196 140 / 0) 100%);
}
/* a band of dusk at the foot of the window, where the lines and credit sit */
.dusk__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(62% 58% at 0% 100%, rgb(10 12 22 / 0.55) 0%, rgb(10 12 22 / 0) 100%),
    linear-gradient(to top, rgb(10 12 22 / 0.88) 0%, rgb(10 12 22 / 0.7) 20%, rgb(10 12 22 / 0.28) 40%, rgb(10 12 22 / 0) 56%);
}
.dusk__copy { position: absolute; left: clamp(1.25rem, 4vw, 3.5rem); bottom: clamp(1.5rem, 6vh, 3.5rem); right: 30%; display: grid; }
.dusk__line {
  grid-area: 1 / 1; align-self: end; max-width: 20ch;
  font: 330 clamp(1.9rem, 1.2rem + 2.6vw, 3.6rem)/1.05 var(--sc-font-display); letter-spacing: -0.02em; color: #F7F2EA;
  opacity: var(--o, 0); transform: translate3d(0, calc((1 - var(--o, 0)) * 0.6rem), 0); text-wrap: balance;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.4);
}
.dusk__line time { display: block; font: 500 var(--sc-t-sm)/1 var(--sc-font-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--lamp); margin-bottom: 0.7rem; }
.dusk__credit { position: absolute; right: 1rem; bottom: 0.9rem; color: #F7F2EA; text-shadow: 0 1px 2px rgb(0 0 0 / 0.6); text-align: right; max-width: 60%; }
.dusk__credit b { font-weight: 650; margin-right: 0.35em; }

/* ============================================================= 8:00 PM ==
   Night. The booking card keeps daylight ink; its clock holds your two
   hours. */
.book { padding: var(--sc-section) 0 var(--sc-9); }
.book__body { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--sc-8); align-items: start; }
.book__intro { position: sticky; top: 6.25rem; }
.book__facts { margin-top: var(--sc-6); border-top: 1px solid var(--sc-ink); }
.book__facts > div { grid-template-columns: 8.5rem minmax(0, 1fr); font-size: var(--sc-t-base); }
.book__facts a { color: inherit; }

.tb { position: relative; overflow: hidden; }
.tb ::selection { background: var(--card-ink); color: var(--card); }
.tb > * { border-top: 1px solid var(--sc-hairline-strong); }
.tb > :first-child, .tb > input, .tb > .hp { border-top: 0; }
.tb__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sc-5); align-items: center; padding: var(--sc-5) var(--sc-5) var(--sc-4); border-top: 0 !important; }
.tb__title { font: 400 var(--sc-t-xl)/1 var(--sc-font-display); letter-spacing: -0.015em; }
.tb__sub { margin-top: 0.4rem; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.clock { width: 5.25rem; height: 5.25rem; overflow: visible; }
.clock__face { fill: #F3EFE6; stroke: var(--card-ink); stroke-width: 1.5; }
.clock__ticks line { stroke: var(--card-ink); stroke-width: 1.2; stroke-linecap: round; }
.clock__ticks line.is-hr { stroke-width: 2; }
.clock__n { font: 600 9px/1 var(--sc-font-text); fill: var(--card-soft); text-anchor: middle; }
.clock__hand { stroke-linecap: round; opacity: 0; transform-box: view-box; transform-origin: 0 0; transition: transform 520ms var(--sc-ease-out), opacity 200ms var(--sc-ease-out); }
.clock__hand.is-set { opacity: 1; }
.clock__hand--1 { stroke: #8C5A33; stroke-width: 3.4; }
.clock__hand--2 { stroke: var(--card-ink); stroke-width: 2.2; stroke-dasharray: 3.4 2.6; }
.clock__pin { fill: var(--card-ink); }
.when__key { display: inline-block; width: 1.1rem; height: 3px; margin-right: 0.45rem; vertical-align: middle; border-radius: 2px; }
.when__key--1 { background: #8C5A33; height: 3.5px; }
.when__key--2 { background: repeating-linear-gradient(90deg, var(--card-ink) 0 4px, transparent 4px 7px); height: 2px; }

.tb__interest {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4);
  padding: 0.75rem var(--sc-5); background: color-mix(in oklab, #8C5A33 9%, var(--card)); font-size: var(--sc-t-sm);
}
.tb__interest[hidden] { display: none; }
.tb__interest-x { background: none; border: 0; padding: 0.25rem; font: inherit; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; color: var(--sc-ink-soft); }

.when { border: 0; margin: 0; padding: var(--sc-5) var(--sc-5) var(--sc-5); min-width: 0; }
.when__legend { padding: 0; margin-bottom: var(--sc-4); float: left; width: 100%; font: 400 var(--sc-t-lg)/1.1 var(--sc-font-display); }
.when__legend + * { clear: both; }
.when__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: var(--sc-5); }
.when__tabs button {
  display: grid; gap: 0.3rem; text-align: left; padding: 0.65rem 0.85rem; min-height: 3.6rem;
  background: #fff; border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-sm); cursor: pointer; color: var(--sc-ink);
  transition: border-color 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out);
}
.when__n { font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); }
.when__v { font-size: var(--sc-t-sm); font-weight: 500; color: var(--sc-ink-soft); }
.when__tabs button.is-set .when__v { color: var(--sc-ink); }
.when__tabs [aria-selected="true"] { border-color: var(--sc-ink); box-shadow: inset 0 -3px 0 #8C5A33; }
@media (hover: hover) and (pointer: fine) { .when__tabs button:hover { border-color: var(--sc-ink); } }
.when__month { font-size: var(--sc-t-sm); font-weight: 600; margin-bottom: var(--sc-3); }
.when__dow, .when__dates { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.35rem; }
.when__dow { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); text-align: center; margin-bottom: 0.35rem; }
.when__dates { margin-bottom: var(--sc-5); }
.when__dates button, .when__times button {
  position: relative; font: 500 var(--sc-t-sm)/1 var(--sc-font-text); color: var(--sc-ink);
  background: #fff; border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-sm);
  cursor: pointer; min-height: 2.75rem; padding: 0.3rem 0.2rem; font-variant-numeric: tabular-nums;
  transition: background-color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out);
}
.when__dates button { display: grid; place-items: center; align-content: center; gap: 0.1rem; }
.when__dates .m { font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); }
.when__dates .pad { visibility: hidden; }
@media (hover: hover) and (pointer: fine) { .when__dates button:hover, .when__times button:hover { border-color: var(--sc-ink); } }
.when__dates [aria-checked="true"], .when__times [aria-checked="true"] { background: var(--card-ink); border-color: var(--card-ink); color: #fff; }
.when__dates [aria-checked="true"] .m { color: rgb(255 255 255 / 0.78); }
/* the other slot's day keeps a quiet mark, so both choices stay in view */
.when__dates button[data-other]::after {
  content: ""; position: absolute; left: 50%; bottom: 0.26rem; width: 0.3rem; height: 0.3rem; margin-left: -0.15rem;
  border-radius: 50%; background: #8C5A33;
}
.when__dates [aria-checked="true"][data-other]::after { background: #fff; }
.when__times { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.35rem; }
.when__times button:disabled { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
.when__native label { display: block; margin-top: var(--sc-3); font-size: var(--sc-t-sm); }

.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { padding: 0.8rem var(--sc-5) 0.95rem; min-width: 0; }
.field + .field { border-left: 1px solid var(--sc-hairline-strong); }
.field--wide { grid-column: 1 / -1; border-left: 0 !important; border-top: 1px solid var(--sc-hairline-strong); }
.field label { display: block; font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); margin-bottom: 0.45rem; }
.field input {
  width: 100%; min-height: 2.9rem; padding: 0.65rem 0.8rem;
  background: #F6F3EC; border: 1px solid rgb(29 38 33 / 0.26); border-radius: var(--sc-r-sm);
  font: 400 var(--sc-t-base)/1.2 var(--sc-font-text); color: var(--sc-ink);
  transition: border-color 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out);
}
.field input::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 85%, transparent); }
.field input:focus-visible { border-color: var(--sc-ink); background: #fff; outline-offset: 1px; }
.field input[aria-invalid="true"] { border-color: #A3342A; }
.field__error { margin: 0.35rem 0 0; font-size: var(--sc-t-sm); color: #A3342A; }
.field__error:empty { display: none; }
.tb :focus-visible { outline-color: #8C5A33; }
.tb__submit { padding: var(--sc-5) var(--sc-5) var(--sc-4); }
.tb__fineprint { margin-top: var(--sc-4); font-size: 0.8125rem; line-height: 1.55; color: var(--sc-ink-soft); text-align: center; text-wrap: pretty; }
.tb__status { padding: var(--sc-4) var(--sc-5); font-size: var(--sc-t-sm); }
.tb__status.is-ok { background: #E4EFE6; color: #163A24; }
.tb__status.is-wait { background: #EFEBE2; color: var(--sc-ink); }
.tb__status.is-err { background: #F7E3DC; color: #7A2A14; }
.tb__status a { color: inherit; font-weight: 600; }
.tb__status:focus { outline: none; }
/* After submit the card keeps only its head and the message: the holding
   line while the request is out, then the confirmation. */
.tb.is-sending > :not([data-status]):not(.tb__head), .tb.is-done > :not([data-status]):not(.tb__head) { display: none; }
.tb.is-sending .tb__status, .tb.is-done .tb__status { padding: var(--sc-7) var(--sc-6); font-size: var(--sc-t-lg); line-height: 1.5; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* --------------------------------------------------------------- footer -- */
.foot { padding: var(--sc-7) 0 var(--sc-8); font-size: var(--sc-t-sm); border-top: 1px solid var(--sc-hairline); }
.foot__lines { text-align: center; }
.foot__lines p { color: var(--sc-ink-soft); line-height: 1.7; }
.foot__lines p + p { margin-top: var(--sc-1); }
.foot__lines span { white-space: nowrap; }

/* ========================================================= THE SUN DIAL == */
.dial {
  position: fixed; z-index: var(--sc-z-chrome); top: calc(env(safe-area-inset-top, 0px) + 0.9rem); right: max(0.9rem, env(safe-area-inset-right, 0px));
  display: flex; align-items: center; gap: 0.5rem;
}
.dial__cta { transition: opacity 220ms var(--sc-ease-out), visibility 0s linear 0s, background-color 200ms var(--sc-ease-out), color 200ms var(--sc-ease-out); }
.dial.is-quiet .dial__cta { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 220ms var(--sc-ease-out), visibility 0s linear 220ms; }
.dial__read {
  display: grid; justify-items: end; gap: 0.12rem; min-height: 3rem; padding: 0.42rem 0.95rem 0.45rem;
  background: color-mix(in oklab, var(--g1) 80%, transparent); color: var(--sc-ink);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid color-mix(in oklab, var(--sc-ink) 18%, transparent); border-radius: 999px; cursor: pointer;
  box-shadow: var(--sc-e1);
}
.dial__clock { font: 400 1.12rem/1 var(--sc-font-display); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.01em; white-space: nowrap; }
.dial__name { font: 500 0.68rem/1 var(--sc-font-text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .dial__read:hover { border-color: var(--sc-ink); } }
.dial__face {
  width: 4.25rem; height: 4.25rem; border-radius: 50%; cursor: grab; touch-action: none;
  filter: drop-shadow(0 2px 5px hsl(var(--sc-shadow-color) / 0.25));
  -webkit-tap-highlight-color: transparent;
}
.dial__face:active { cursor: grabbing; }
.dial__face:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 3px; border-radius: 50%; }
.dial__face svg { width: 100%; height: 100%; overflow: visible; }
.dial__day { fill: var(--dial-day, #CFE1EE); }
.dial__night { fill: #1A2236; }
.dial__rim { fill: none; stroke: var(--sc-ink); stroke-width: 2; }
.dial__horizon { stroke: var(--sc-ink); stroke-width: 1.4; }
.dial__hand { stroke: var(--sc-ink); stroke-width: 2.2; stroke-linecap: round; opacity: 0.85; }
.dial__sun { fill: var(--dial-sun, #F2B544); stroke: var(--sc-ink); stroke-width: 1.6; }
.dial__list {
  position: absolute; top: calc(100% + 0.55rem); right: 0; width: 18rem; margin: 0; padding: 0.4rem; list-style: none;
  background: var(--card); color: var(--card-ink); border-radius: var(--sc-r-md); box-shadow: var(--sc-e3);
  --sc-ink: var(--card-ink); --sc-ink-soft: var(--card-soft);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 180ms var(--sc-ease-out), transform 180ms var(--sc-ease-out), visibility 0s linear 180ms;
}
.dial__list.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 180ms var(--sc-ease-out), transform 180ms var(--sc-ease-out), visibility 0s; }
.dial__list a {
  display: grid; grid-template-columns: 5rem minmax(0, 1fr); align-items: baseline; gap: 0.75rem;
  padding: 0.6rem 0.75rem; min-height: 2.75rem; border-radius: var(--sc-r-sm); text-decoration: none; color: var(--card-ink);
}
.dial__list time { font: 400 1rem/1 var(--sc-font-display); font-variant-numeric: lining-nums tabular-nums; color: var(--card-soft); }
.dial__list span { font-size: var(--sc-t-sm); font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .dial__list a:hover { background: #F1EDE4; } }
.dial__list a[aria-current] { background: var(--card-ink); color: var(--card); }
.dial__list a[aria-current] time { color: var(--lamp); }

/* ------------------------------------------------------------- dialogs -- */
.viewer, .plan-dlg {
  --sc-ink: var(--card-ink); --sc-ink-soft: var(--card-soft); --sc-accent: #8C5A33; --sc-accent-ink: #fff;
  --sc-hairline: rgb(29 38 33 / 0.12); --sc-hairline-strong: rgb(29 38 33 / 0.24);
  width: min(96vw, 80rem); max-height: 94vh; padding: 0; border: 0; border-radius: var(--sc-r-md);
  background: #fff; color: var(--card-ink); box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.5); overflow: hidden;
}
.viewer::backdrop, .plan-dlg::backdrop { background: rgb(14 20 24 / 0.74); }
.viewer__bar, .plan-dlg__bar {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4);
  padding: 0.6rem 0.6rem 0.6rem 1.25rem; background: #fff; border-bottom: 1px solid var(--sc-hairline-strong);
}
.viewer__title, .plan-dlg__title { font-size: var(--sc-t-sm); font-weight: 600; }
.viewer__bar form, .plan-dlg__bar form { margin: 0; }
.viewer__close, .plan-dlg__close {
  font: 600 var(--sc-t-sm)/1 var(--sc-font-text); padding: 0.7rem 1.1rem; min-height: 2.75rem;
  background: var(--card-ink); color: #fff; border: 0; border-radius: 999px; cursor: pointer;
}
.viewer__body { overflow: auto; max-height: calc(94vh - 3.75rem); }
.viewer__body img { width: 100%; height: auto; max-width: none; display: block; }
.plan-dlg__body {
  display: grid; grid-template-columns: minmax(15rem, 0.7fr) minmax(0, 1.3fr); gap: var(--sc-6);
  padding: var(--sc-6); overflow: auto; max-height: calc(94vh - 3.75rem);
}
.plan-dlg__img img { width: 100%; height: auto; display: block; }

/* =============================================================== MOBILE */
@media (max-width: 1023px) {
  :root { --stamp-w: 0px; }
  .hour__grid { grid-template-columns: minmax(0, 1fr); }
  .hour__grid > .stamp { position: static; margin-bottom: var(--sc-5); display: flex; align-items: baseline; gap: 0.5rem; }
  .hour__grid > .stamp time { display: inline; margin: 0; font-size: clamp(2rem, 1.5rem + 2vw, 2.6rem); }
  .hour__body { grid-column: 1; }
  .dev, .site, .loc__body, .plans__body, .book__body, .brochure { grid-template-columns: minmax(0, 1fr); gap: var(--sc-7); }
  .plan-panel { display: none !important; }
  .book__intro { position: static; }
  .brochure__cover { width: min(52%, 14rem); }
  .plan-dlg__body { grid-template-columns: minmax(0, 1fr); }
  .avail__foot { grid-template-columns: minmax(0, 1fr); }
  .works { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  /* the look-up recomposed for a phone: the towers' crowns converge in the
     frame, the name and the copy sit on the dark foliage at the foot */
  .morning__scene { --sw: max(100vw, 100svh * 1.7781); --fx: 0.465; --fy: 0.5; }
  .morning__name { display: none; }
  .morning__h1name {
    position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
    display: block; margin-bottom: 0.6rem;
    font: 330 clamp(3.8rem, 19vw, 5rem)/0.82 var(--sc-font-display); letter-spacing: -0.035em; text-transform: none;
  }
  .morning__scrim { background: linear-gradient(to top, rgb(8 18 12 / 0.88) 0%, rgb(8 18 12 / 0.66) 36%, rgb(8 18 12 / 0) 62%); }
  .morning__copy { max-width: none; }
  .morning__copy { right: var(--sc-gutter); bottom: calc(env(safe-area-inset-bottom, 0px) + 2.2rem); gap: var(--sc-3); }
  .morning__copy .stamp { display: none; }
  .morning__lede { font-size: 1.08rem; max-width: 30ch; }
  .morning__credit { right: auto; left: auto; top: auto; bottom: auto; right: 0.6rem; top: 42%; writing-mode: vertical-rl; transform: rotate(180deg); }

  .partners { grid-template-columns: minmax(0, 1fr); }
  .particulars { padding: var(--sc-5); }
  .particulars dl > div, .book__facts > div { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .drone { margin: var(--sc-7) 0; }
  .drone__frame { height: 62vw; }
  .tt { padding: var(--sc-4); }
  .tt__tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--sc-4) * -1); padding-inline: var(--sc-4); scrollbar-width: none; }
  .tt__tabs button { flex: none; }
  .facilities__list ol { columns: 1; }
  .views { grid-template-columns: minmax(0, 1fr); gap: var(--sc-6); margin-top: var(--sc-8); }
  .views > * { grid-column: 1 !important; margin-top: 0 !important; }
  .views__frame { height: 62vw; }

  .sizes__axis { display: none; }
  .size { grid-template-columns: 3.6rem minmax(0, 1fr) 5.2rem; grid-template-rows: auto auto; row-gap: 0.25rem; min-height: 3.5rem; padding: 0.55rem 0; }
  .size__code { grid-row: 1 / span 2; }
  .size__name { grid-column: 2; grid-row: 1; }
  .size__bar { grid-column: 2; grid-row: 2; height: 1rem; }
  .size__ft { grid-column: 3; grid-row: 1; }
  .size__left { grid-column: 3; grid-row: 2; }
  .balcony img { height: 56vw; object-position: 30% 50%; }

  .golden img { height: 62vw; }
  .avail__title { grid-template-columns: minmax(0, 1fr); row-gap: var(--sc-3); }
  .avail__title h2 { max-width: none; }
  .chart { grid-template-columns: minmax(0, 1fr); --rh: 1.25rem; }
  .u__n { display: none; }

  .dusk__window { inset: calc(env(safe-area-inset-top, 0px) + 4.4rem) 0.6rem calc(env(safe-area-inset-bottom, 0px) + 0.6rem); }
  .dusk__copy { right: 1.25rem; bottom: 3.2rem; }
  .dusk__line { font-size: clamp(1.75rem, 8vw, 2.4rem); }
  .dusk__scrim { background: linear-gradient(to top, rgb(10 12 22 / 0.88) 0%, rgb(10 12 22 / 0.62) 34%, rgb(10 12 22 / 0) 62%); }
  .dusk__credit { left: 1.25rem; right: 1rem; text-align: left; max-width: none; }
  .dusk__frame[data-dusk-frame="0"] img { object-position: 38% 50%; }
  .dusk__frame[data-dusk-frame="1"] img { object-position: 50% 50%; }

  .tb__head { padding: var(--sc-4); gap: var(--sc-4); }
  .clock { width: 4.4rem; height: 4.4rem; }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .field + .field { border-left: 0; border-top: 1px solid var(--sc-hairline-strong); }
  .field, .when, .tb__submit { padding-inline: var(--sc-4); }
  .when__tabs button { padding: 0.6rem 0.7rem; }
  .when__dow, .when__dates { gap: 0.25rem; }
  .when__times { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.3rem; }

  .dial { top: calc(env(safe-area-inset-top, 0px) + 0.6rem); right: 0.6rem; gap: 0.4rem; }
  .dial__read { min-height: 2.6rem; padding: 0.35rem 0.75rem; }
  .dial__name { display: none; }
  .dial__clock { font-size: 1rem; }
  .dial__face { width: 3.3rem; height: 3.3rem; }
  .dial__cta { padding-inline: 0.85rem; }
  .dial__list { width: min(18rem, calc(100vw - 1.2rem)); }
  .dial { transition: opacity 200ms var(--sc-ease-out); }
  .dial.is-typing { opacity: 0; visibility: hidden; pointer-events: none; }
}

@media (max-width: 380px) {
  .when__times { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dial__cta { padding-inline: 0.7rem; font-size: 0.82rem; }
}

/* Without JavaScript nothing fades in, so everything simply shows; the dusk
   act gives its scroll back as a finished composition (night has fallen),
   the timetable shows every table, and the dial (which needs the script)
   steps aside. */
.no-js [data-sc-in], .no-js [data-sc-stagger] > * { opacity: 1; transform: none; }
.no-js .dusk { height: auto; }
.no-js .dusk__stage { position: relative; height: 100svh; }
.no-js .dusk__window { --k1: 1; --k2: 1; }
.no-js .dusk__line[data-dusk-line="1"] { --o: 1; }
.no-js .dial { display: none; }

/* ======================================================= REDUCED MOTION ==
   Fewer and gentler, not zero. The look-up stands still with its depth; the
   dusk act gives its scroll back and shows night already fallen. The page's
   light still follows the hour, which is colour, not motion. */
@media (prefers-reduced-motion: reduce) {
  .dusk { height: auto !important; }
  .dusk .sc-stage, .dusk__stage { position: relative; height: 100svh; }
  .dusk__window { --k1: 1 !important; --k2: 1 !important; }
  .dusk__horizon { display: none; }
  .dusk__line[data-dusk-line="1"] { --o: 1 !important; }
  .dusk__line[data-dusk-line="0"] { --o: 0 !important; }
  .pl, .morning__name { transform: none !important; }
  [data-sc-parallax] { transform: none !important; }
  .clock__hand { transition: opacity 200ms linear; }
}