/* Varrow House: layout. Every value comes from assets/tokens.css (--s-*).
 * Mobile first; the desktop composition starts at --s-bp-desk (64em).
 * @media cannot read custom properties, so the breakpoints below are written
 * as their token values: 48em = --s-bp-tablet, 64em = --s-bp-desk. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--s-bg);
    color: var(--s-text);
    font: var(--s-weight-body) var(--s-step-body)/var(--s-lh-body) var(--s-font-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
picture { display: block; }
a { color: inherit; }
p, h1, h2, h3, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: var(--s-focus-w) solid var(--s-focus); outline-offset: var(--s-focus-offset); }
[id] { scroll-margin-top: var(--s-anchor); }

.vh-figs { font-feature-settings: var(--s-figures); font-variant-numeric: tabular-nums lining-nums; }
.vh-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.vh-skip {
    position: absolute; left: var(--s-gutter); top: 0; z-index: calc(var(--s-z-nav) + 1);
    padding: var(--s-gap-sm) var(--s-gap); background: var(--s-btn-bg); color: var(--s-btn-text);
    transform: translateY(-120%);
}
.vh-skip:focus { transform: none; }

/* ---------- type ---------- */
.vh-kicker {
    display: flex; align-items: center; gap: var(--s-gap-sm);
    margin-bottom: var(--s-gap);
    color: var(--s-muted);
    font: var(--s-weight-label) var(--s-step-label)/var(--s-lh-tight) var(--s-font-body);
    letter-spacing: var(--s-track-label);
}
.vh-kicker::before { content: ""; width: var(--s-chip-fade); height: var(--s-rule-w); background: var(--s-rule-bronze); }
.vh-h2, .vh-hero-title, .vh-h3, .vh-year {
    font-family: var(--s-font-display);
    font-weight: var(--s-weight-display);
    font-optical-sizing: auto;   /* opsz follows the rendered size: hairlines (the 4, the hyphen) survive at 30px */
    letter-spacing: var(--s-track-display);
    line-height: var(--s-lh-display);
    text-wrap: balance;
}
.vh-h2 { font-size: var(--s-step-h2); max-width: var(--s-measure-h2); }
.vh-h2-sm { font-size: calc(var(--s-step-h2) * 0.78); }
.vh-h3 { font-size: var(--s-step-h3); line-height: var(--s-lh-tight); }
.vh-h4 {
    margin-bottom: var(--s-gap-sm);
    font: var(--s-weight-strong) var(--s-step-label)/var(--s-lh-tight) var(--s-font-body);
    letter-spacing: var(--s-track-label);
}
.vh-intro { margin-top: var(--s-gap); max-width: var(--s-measure); font-size: var(--s-step-lede); line-height: var(--s-lh-body); text-wrap: pretty; }
.vh-cap {
    margin-top: var(--s-gap-sm);
    color: var(--s-muted);
    font-size: var(--s-step-plate); line-height: var(--s-lh-tight);
    font-feature-settings: var(--s-figures);
}
.vh-label { color: var(--s-muted); font: var(--s-weight-label) var(--s-step-label)/var(--s-lh-tight) var(--s-font-body); letter-spacing: var(--s-track-label); }

/* Bodoni figures: the high-contrast 4 and 1 read alike at text sizes, so every
 * Bodoni numeral is drawn at a low optical size (sturdier hairlines) */
.vh-year, .vh-time, .vh-essay-time, .vh-counts, .vh-card-home, .vh-table tbody th, .vh-facts dd, .vh-res-label {
    font-variation-settings: "opsz" var(--s-opsz-figures);
}

/* ---------- buttons + links ---------- */
.vh-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--s-touch);
    padding: var(--s-btn-pad-y) var(--s-btn-pad-x);
    border: 0; border-radius: var(--s-radius);
    background: var(--s-btn-bg); color: var(--s-btn-text);
    box-shadow: inset 0 0 0 var(--s-inset) var(--s-btn-inset);
    font: var(--s-weight-label) var(--s-step-small)/var(--s-lh-tight) var(--s-font-body);
    letter-spacing: var(--s-track-label);
    text-decoration: none; text-align: center;
    transition: background-color var(--s-dur-fast) var(--s-ease);
}
.vh-btn:hover { background: var(--s-btn-bg-hover); }
.vh-btn-light { background: var(--s-btn-dark-bg); color: var(--s-btn-dark-text); }
.vh-btn-light:hover { background: var(--s-limestone); }
.vh-textlink {
    display: inline-flex; align-items: center; min-height: var(--s-touch);
    font-weight: var(--s-weight-label);
    text-decoration: underline; text-decoration-color: var(--s-rule-bronze);
    text-decoration-thickness: var(--s-underline-w); text-underline-offset: var(--s-underline-offset);
    transition: text-decoration-color var(--s-dur-fast) var(--s-ease);
}
.vh-textlink:hover { text-decoration-color: currentColor; }

/* ---------- nav ---------- */
.vh-nav {
    position: sticky; top: 0; z-index: var(--s-z-nav);
    display: flex; align-items: center; gap: var(--s-gap-sm);
    height: var(--s-nav-h-sm);
    padding-inline: var(--s-gutter);
    background: var(--s-chalk);
    border-bottom: var(--s-rule-w) solid var(--s-rule);
}
.vh-wordmark {
    display: inline-flex; align-items: center; min-height: var(--s-touch);
    margin-right: auto;
    font: var(--s-weight-strong) var(--s-step-label)/var(--s-lh-none) var(--s-font-body);
    letter-spacing: var(--s-track-wordmark); text-transform: uppercase; text-decoration: none;
    white-space: nowrap;
}
.vh-links { display: none; }
.vh-nav-cta { padding: 0 var(--s-gap); }
.vh-cta-long { display: none; }
.vh-menu-btn {
    display: inline-flex; align-items: center; gap: var(--s-gap-sm);
    min-height: var(--s-touch); min-width: var(--s-touch); padding-inline: var(--s-gap-sm);
    list-style: none; cursor: pointer;
    font: var(--s-weight-label) var(--s-step-small)/var(--s-lh-none) var(--s-font-body);
}
.vh-menu-btn::-webkit-details-marker { display: none; }
.vh-menu-close, .vh-menu[open] .vh-menu-open { display: none; }
.vh-menu[open] .vh-menu-close { display: inline; }
.vh-burger { position: relative; display: block; width: var(--s-gap); height: var(--s-gap-sm); border-block: var(--s-rule-w) solid currentColor; }
.vh-sheet {
    position: absolute; left: 0; right: 0; top: 100%;
    padding: var(--s-gap-sm) var(--s-gutter) var(--s-gap);
    background: var(--s-chalk);
    border-bottom: var(--s-rule-w) solid var(--s-rule-strong);
    box-shadow: var(--s-menu-shadow);
}
.vh-sheet a {
    display: flex; align-items: center; min-height: calc(var(--s-touch) + var(--s-gap-sm));
    border-bottom: var(--s-rule-w) solid var(--s-rule);
    font-family: var(--s-font-display); font-size: var(--s-step-h3);
    text-decoration: none;
}

/* ---------- 1. arrival ---------- */
.vh-arrival { background: var(--s-chalk); }
.vh-arrival-photo { height: var(--s-hero-photo-h-sm); background: var(--s-photo-well); overflow: hidden; }
.vh-arrival-photo picture, .vh-arrival-photo img { width: 100%; height: 100%; }
.vh-arrival-photo img { object-fit: cover; object-position: 50% 60%; }
.vh-arrival-copy { display: flex; flex-direction: column; padding: 0 var(--s-gutter) var(--s-gap); }
.vh-plate {
    order: 1;                    /* phones: after the CTA pair, so the address and headline lead */
    display: flex; flex-wrap: wrap;
    padding-block: var(--s-gap-sm) 0;
    color: var(--s-muted); font-size: var(--s-step-plate); line-height: var(--s-lh-tight);
}
/* middot separators: every item carries its dot on the left and the list is
 * pulled left by one dot-width and clipped, so a dot never leads a wrapped line */
.vh-plate, .vh-status, .vh-viewcap {
    margin-left: calc(var(--s-gap-sm) * -2 - var(--s-dot) / 2);
    clip-path: inset(0 0 0 calc(var(--s-gap-sm) * 2 + var(--s-dot) / 2));
}
.vh-plate > *::before, .vh-status > *::before, .vh-viewcap > *::before {
    content: ""; display: inline-block; vertical-align: middle;
    width: calc(var(--s-dot) / 2); height: calc(var(--s-dot) / 2); margin-inline: var(--s-gap-sm);
    border-radius: 50%; background: var(--s-bronze);
}
.vh-address {
    margin: var(--s-gap) 0 var(--s-gap-sm);
    color: var(--s-bronze-ink);
    font: var(--s-weight-label) var(--s-step-label)/var(--s-lh-tight) var(--s-font-body);
    letter-spacing: var(--s-track-label);
}
.vh-hero-title {
    max-width: var(--s-measure-hero);
    font-variation-settings: "opsz" var(--s-opsz-sub);   /* keeps the hyphen in Forty-six visible */
    font-size: var(--s-step-hero);
    text-wrap: pretty;
}
.vh-status {
    display: flex; flex-wrap: wrap;
    margin-block: var(--s-gap-sm) var(--s-gap);
    color: var(--s-muted); font-size: var(--s-step-small); line-height: var(--s-lh-body);
}
.vh-status li { display: inline-flex; align-items: center; }
.vh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-gap-sm) var(--s-gap); }
.vh-actions .vh-btn { flex: 1 1 100%; }

@media (prefers-reduced-motion: no-preference) {
    .vh-rise { animation: vh-rise var(--s-dur-hero-line) var(--s-ease) both; }
    .vh-hero-title.vh-rise { animation-delay: var(--s-delay-hero-step); }
    .vh-status.vh-rise { animation-delay: calc(var(--s-delay-hero-step) * 2); }
    .vh-actions.vh-rise { animation-delay: calc(var(--s-delay-hero-step) * 3); }
}
@keyframes vh-rise {
    from { opacity: var(--s-opacity-off); transform: translateY(var(--s-hero-rise)); }
    to { opacity: 1; transform: none; }
}

/* ---------- shared section scaffolding ---------- */
.vh-section { padding-block: var(--s-section-sm); }
.vh-grid { padding-inline: var(--s-gutter); }
.vh-head { margin-bottom: var(--s-gap); }
.vh-frame { position: relative; overflow: hidden; background: var(--s-photo-well); }
.vh-frame img { width: 100%; height: auto; }
.vh-pair .vh-frame, .vh-facade .vh-frame, .vh-sq-photo .vh-frame, .vh-door .vh-frame, .vh-step-photo .vh-frame {
    margin-inline: calc(var(--s-gutter) * -1);
}
.vh-pair figcaption, .vh-facade .vh-cap, .vh-sq-photo .vh-cap, .vh-door .vh-cap { margin-top: var(--s-gap-sm); }

/* scroll reveal: site.js adds .is-pending only to photos BELOW the fold, so a
 * failed script never hides anything. */
.vh-reveal img { transition-property: clip-path, transform, opacity; transition-duration: var(--s-dur-reveal), var(--s-dur-settle), var(--s-dur-reveal); transition-timing-function: var(--s-ease-reveal), var(--s-ease), var(--s-ease); }
.vh-reveal.is-pending img { transform: scale(var(--s-scale-settle)); opacity: var(--s-opacity-dim); }
.vh-reveal.is-pending[data-from="left"] img { clip-path: inset(0 var(--s-reveal-inset) 0 0); }
.vh-reveal.is-pending[data-from="right"] img { clip-path: inset(0 0 0 var(--s-reveal-inset)); }
.vh-reveal.is-pending[data-from="bottom"] img { clip-path: inset(var(--s-reveal-inset) 0 0 0); }

/* ---------- 2. the building ---------- */
.vh-building { background: var(--s-limestone); }
.vh-pair { margin-top: var(--s-gap); }
.vh-pair figcaption { display: flex; align-items: baseline; gap: var(--s-gap-sm); }
.vh-year {
    color: var(--s-bronze);
    font-size: var(--s-step-year);
    font-feature-settings: var(--s-figures-display);
    line-height: var(--s-lh-none);
}
.vh-year-sm { font-size: var(--s-step-h2); }
.vh-year-label { max-width: var(--s-measure-narrow); color: var(--s-muted); font-size: var(--s-step-small); line-height: var(--s-lh-tight); }
.vh-story { margin-top: var(--s-section-sm); }
.vh-built { display: flex; align-items: baseline; gap: var(--s-gap-sm); margin-bottom: var(--s-gap); }
.vh-story-cols p + p { margin-top: var(--s-gap-sm); }
.vh-story-cols p { max-width: var(--s-measure); text-wrap: pretty; }
.vh-ledger { display: grid; gap: var(--s-gap); margin-top: var(--s-gap); }
.vh-ledger li, .vh-dist > div {
    padding-block: var(--s-gap-sm);
    border-top: var(--s-rule-w) solid var(--s-rule);
}
.vh-ledger li { font-size: var(--s-step-small); }
.vh-facade { margin-top: var(--s-section-sm); }

/* ---------- 3. residences ---------- */
.vh-res { background: var(--s-chalk); }
.vh-res-band { margin-bottom: var(--s-gap); }
.vh-res-head .vh-h2 { max-width: none; }
/* phones: the four residences as a 2 x 2 block inside the gutter (one row clipped "Penthouse" at 360-390) */
.vh-tabs { display: grid; grid-template-columns: repeat(var(--s-tab-cols-sm), minmax(0, 1fr)); gap: var(--s-card-gap); margin-top: var(--s-gap); }
.vh-tab, .vh-chip {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: var(--s-touch); padding: 0 var(--s-gap);
    border: var(--s-rule-w) solid var(--s-rule-strong); border-radius: var(--s-radius);
    background: transparent;
    font: var(--s-weight-label) var(--s-step-small)/var(--s-lh-none) var(--s-font-body);
    letter-spacing: var(--s-track-label);
    transition: background-color var(--s-dur-fast) var(--s-ease), color var(--s-dur-fast) var(--s-ease);
}
.vh-tab[aria-selected="true"], .vh-chip[aria-pressed="true"] {
    background: var(--s-btn-bg); color: var(--s-btn-text); border-color: var(--s-btn-bg);
    box-shadow: inset 0 0 0 var(--s-inset) var(--s-btn-inset);
}
.vh-tab:hover:not([aria-selected="true"]), .vh-chip:hover:not([aria-pressed="true"]) { background: var(--s-limestone); }

/* panel: on phones the plan box dissolves so the photograph sits right under the plan */
.vh-panel { display: flex; flex-direction: column; }
.vh-panel:not([hidden]) ~ .vh-panel:not([hidden]) { margin-top: var(--s-section-sm); }   /* no-JS: all four stack; with JS the current one sits right under the band */
.vh-panel.is-swapping { animation: vh-fade var(--s-dur-plan-swap) var(--s-ease) both; }
@keyframes vh-fade { from { opacity: var(--s-opacity-off); } to { opacity: 1; } }
.vh-planbox { display: contents; }
.vh-res-label { order: 1; margin-bottom: var(--s-gap-sm); font-family: var(--s-font-display); font-style: italic; font-size: var(--s-step-lede); }
.vh-sheet-plan { order: 2; background: var(--s-plan-paper); }
.vh-stagebox { order: 3; }
.vh-roomsui { order: 4; margin-top: var(--s-gap); }
.vh-facts { order: 5; }

.vh-plan { width: 100%; height: auto; --vh-lf: var(--s-plan-label-frac); --vh-df: var(--s-plan-dims-frac); }
.vh-room { fill: var(--s-plan-room); stroke: var(--s-plan-wall); stroke-width: calc(var(--s-plan-wall-w) * 0.7px); transition: fill var(--s-dur-fast) var(--s-ease); }
.vh-room.has-view { cursor: pointer; }
.vh-room.has-view:hover, .vh-room.is-active { fill: var(--s-plan-room-active); }
.vh-outline { fill: none; stroke: var(--s-plan-wall); stroke-width: calc(var(--s-plan-wall-w) * 1.5px); }
.vh-win-gap { stroke: var(--s-plan-window); stroke-width: calc(var(--s-plan-wall-w) * 2px); }
.vh-win { stroke: var(--s-plan-thin); stroke-width: calc(var(--s-plan-thin-w) * 1px); }
.vh-opening { stroke: var(--s-plan-room); stroke-width: calc(var(--s-plan-wall-w) * 1.1px); }
.vh-door-gap { stroke: var(--s-plan-room); stroke-width: calc(var(--s-plan-wall-w) * 2px); }
.vh-leaf { stroke: var(--s-plan-wall); stroke-width: calc(var(--s-plan-thin-w) * 1.4px); }
.vh-swing { fill: none; stroke: var(--s-plan-thin); stroke-width: calc(var(--s-plan-thin-w) * 0.6px); stroke-dasharray: calc(var(--s-plan-dash) * 0.5px) calc(var(--s-plan-dash) * 0.35px); }
.vh-outdoor { fill: none; stroke: var(--s-plan-outdoor); stroke-width: calc(var(--s-plan-thin-w) * 1.2px); stroke-dasharray: calc(var(--s-plan-dash) * 1px) calc(var(--s-plan-dash) * 0.7px); }
text.vh-label { fill: var(--s-plan-label); font-family: var(--s-font-display); font-style: italic; pointer-events: none; letter-spacing: 0; }
.vh-label-name { font-size: calc(var(--vbw) * var(--vh-lf) * 1px); }
.vh-label-dims { font-family: var(--s-font-body); font-style: normal; fill: var(--s-plan-dims); font-size: calc(var(--vbw) * var(--vh-df) * 1px); font-feature-settings: var(--s-figures); }
.vh-tag { fill: var(--s-plan-dims); font-family: var(--s-font-body); font-size: calc(var(--vbw) * var(--s-plan-tag-frac) * 1px); font-feature-settings: var(--s-figures); }
.vh-tag-out { fill: var(--s-bronze-ink); }
.vh-north path, .vh-scale line { fill: none; stroke: var(--s-plan-thin); stroke-width: calc(var(--s-plan-thin-w) * 1px); }
.vh-vp { fill: var(--s-camera-ring); stroke: var(--s-camera-dot); stroke-width: calc(var(--s-plan-thin-w) * 1.4px); cursor: pointer; }
.vh-cam { transition: transform var(--s-dur-wedge) var(--s-ease-wedge); pointer-events: none; }
.vh-wedge { fill: var(--s-wedge-fill); stroke: var(--s-wedge-edge); stroke-width: calc(var(--s-plan-thin-w) * 1px); }
.vh-cam-dot { fill: var(--s-camera-dot); stroke: var(--s-camera-ring); stroke-width: calc(var(--s-plan-thin-w) * 1.6px); }

.vh-stage {
    position: relative; overflow: hidden;
    aspect-ratio: 4 / 5;
    margin-inline: calc(var(--s-gutter) * -1);
    background: var(--s-photo-well);
    touch-action: pan-y;
}
.vh-view { position: absolute; inset: 0; visibility: hidden; }
.vh-view.is-active, .vh-view.is-leaving { visibility: visible; }
.vh-view.is-active { z-index: var(--s-z-stage); }
.vh-view img { width: 100%; height: 100%; object-fit: cover; }
.vh-view.is-active img { clip-path: inset(0 0 0 0); transition: clip-path var(--s-dur-wedge) var(--s-ease-reveal); }
.vh-view.is-active.is-entering img { clip-path: var(--vh-clip-from); transition: none; }

.vh-viewbar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-gap-sm); padding-top: var(--s-gap-sm); }
.vh-viewcap { flex: 1 1 var(--s-viewcap-min); display: flex; flex-wrap: wrap; color: var(--s-muted); font-size: var(--s-step-small); line-height: var(--s-lh-body); }
.vh-viewcap .vh-viewcap-name { flex-basis: 100%; color: var(--s-text); font-family: var(--s-font-display); font-style: italic; font-size: var(--s-step-h3); line-height: var(--s-lh-tight); }
.vh-stepper { display: flex; align-items: center; gap: var(--s-card-gap); }
.vh-count { margin-right: var(--s-gap-sm); color: var(--s-muted); font-size: var(--s-step-label); }
.vh-arrow {
    display: inline-grid; place-items: center;
    width: var(--s-touch); height: var(--s-touch);
    border: var(--s-rule-w) solid var(--s-rule-strong); border-radius: var(--s-radius); background: transparent;
}
.vh-arrow svg { width: var(--s-gap); height: var(--s-gap); fill: none; stroke: currentColor; stroke-width: var(--s-rule-w); }
.vh-arrow:hover { background: var(--s-limestone); }

.vh-roomlist { display: grid; gap: var(--s-card-gap); margin-top: var(--s-gap-sm); }
.vh-room-btn {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-gap-sm);
    width: 100%; min-height: var(--s-touch); padding: var(--s-card-gap) var(--s-gap-sm);
    border: var(--s-rule-w) solid var(--s-rule); border-radius: var(--s-radius);
    background: transparent; text-align: left;
    transition: border-color var(--s-dur-fast) var(--s-ease), background-color var(--s-dur-fast) var(--s-ease);
}
.vh-room-btn:hover { border-color: var(--s-rule-strong); }
.vh-room-btn[aria-pressed="true"] { border-color: var(--s-charcoal); background: var(--s-available-row); box-shadow: inset var(--s-focus-offset) 0 0 var(--s-bronze); }
.vh-room-name { font-family: var(--s-font-display); font-style: italic; font-size: var(--s-step-lede); }
.vh-room-time { color: var(--s-muted); font-size: var(--s-step-label); }
.vh-hint { margin-top: var(--s-gap-sm); color: var(--s-muted); font-size: var(--s-step-label); }
.vh-hint-keys { display: none; }

.vh-facts {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-gap);
    margin-top: var(--s-gap);
    border-top: var(--s-rule-w) solid var(--s-rule-strong);
}
.vh-facts > div { padding-block: var(--s-gap-sm); border-bottom: var(--s-rule-w) solid var(--s-rule); }
.vh-facts dt { color: var(--s-muted); font-size: var(--s-step-label); }
.vh-facts dd { font-family: var(--s-font-display); font-size: var(--s-step-lede); font-feature-settings: var(--s-figures); }

/* ---------- 4. materials & light ---------- */
.vh-light { background: var(--s-limestone); }
.vh-essay-stage { display: none; }
.vh-essay > .vh-essay-head { max-width: var(--s-head-w); }
.vh-step + .vh-step { margin-top: var(--s-section-sm); }
.vh-step-text { padding-top: var(--s-gap); }
.vh-time {
    margin-bottom: var(--s-gap-sm);
    color: var(--s-bronze);
    font-family: var(--s-font-display); font-size: var(--s-step-time);
    line-height: var(--s-lh-none);
}
.vh-time-light { display: none; margin-bottom: var(--s-gap-sm); color: var(--s-muted); font-size: var(--s-step-small); }
.vh-step-text .vh-h3 { margin-bottom: var(--s-gap-sm); }
.vh-step-text p { max-width: var(--s-measure); }
.vh-board { margin-top: var(--s-section-sm); padding-top: var(--s-gap); border-top: var(--s-rule-w) solid var(--s-rule-strong); }
.vh-board ul { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-gap-sm); margin-top: var(--s-gap-sm); }
.vh-board li:last-child { grid-column: 1 / -1; }
.vh-board li:last-child .vh-frame { aspect-ratio: var(--s-sample-wide); }
.vh-board li:last-child img { height: 100%; object-fit: cover; object-position: var(--s-sample-wide-focus); }
.vh-board figcaption { margin-top: var(--s-card-gap); color: var(--s-muted); font-size: var(--s-step-small); line-height: var(--s-lh-tight); }
.vh-sample-name { display: block; margin-bottom: var(--s-focus-offset); color: var(--s-text); font-family: var(--s-font-display); font-style: italic; font-size: var(--s-step-lede); }

/* ---------- 5. the square ---------- */
.vh-square { background: var(--s-chalk); }
.vh-sq-text { margin-top: var(--s-section-sm); }
.vh-sq-text .vh-h4 { margin-top: var(--s-gap); }
.vh-dist > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-gap); }
.vh-dist > div:last-child { border-bottom: var(--s-rule-w) solid var(--s-rule); }
.vh-dist dd { color: var(--s-muted); font-size: var(--s-step-small); text-align: right; }

/* ---------- 6. availability ---------- */
.vh-avail { background: var(--s-limestone); }
.vh-avail-panel { margin-inline: calc(var(--s-gutter) * -1); padding: var(--s-panel-pad) var(--s-gutter); background: var(--s-chalk); }
.vh-counts { margin-bottom: var(--s-gap-sm); font-family: var(--s-font-display); font-size: var(--s-step-h3); line-height: var(--s-lh-tight); }
.vh-filters { display: flex; flex-wrap: wrap; gap: var(--s-card-gap); padding-block: var(--s-focus-offset); }   /* wraps inside the gutter: no clipped chip at 360-390 */
.vh-table-wrap { display: none; }
.vh-cards-wrap { margin-top: var(--s-gap); padding-top: var(--s-card-gap); border-top: var(--s-rule-w) solid var(--s-rule-strong); }
.vh-card.is-capped, .vh-table tr.is-capped { display: none; }
.vh-more { width: 100%; margin-top: var(--s-gap-sm); }
.vh-more.is-fits-narrow { display: none; }   /* this filter fits within the phone card cap */
.vh-cards { display: grid; gap: var(--s-card-gap); }
.vh-card { padding: var(--s-gap-sm) var(--s-gap-sm) var(--s-card-gap); border: var(--s-rule-w) solid var(--s-rule); background: var(--s-available-row); }
.vh-card.is-reserved { background: var(--s-reserved-row); color: var(--s-status-reserved); }
.vh-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-card-gap); }
.vh-card-home { font-family: var(--s-font-display); font-size: var(--s-step-h3); line-height: var(--s-lh-none); }
.vh-card dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-card-gap) var(--s-gap-sm); }
.vh-card dl div:last-child { grid-column: span 2; }
.vh-card dt { color: var(--s-muted); font-size: var(--s-step-label); }
.vh-card.is-reserved dt { color: var(--s-status-reserved); }
.vh-card dd { font-size: var(--s-step-small); }
.vh-state { display: inline-flex; align-items: center; gap: var(--s-card-gap); font-size: var(--s-step-small); font-weight: var(--s-weight-label); }
.is-available .vh-state::before { content: ""; width: var(--s-dot); height: var(--s-dot); border-radius: 50%; background: var(--s-status-available); }
.is-reserved .vh-state { padding: 0 var(--s-card-gap); border: var(--s-rule-w) solid var(--s-status-reserved); color: var(--s-status-reserved); line-height: var(--s-lh-body); }
.vh-empty { margin-top: var(--s-gap); color: var(--s-muted); }
.is-shown { animation: vh-fade var(--s-dur-row) var(--s-ease) both; }

/* ---------- 7. viewing ---------- */
.vh-viewing { background: var(--s-dark); color: var(--s-dark-text); }
.vh-viewing :focus-visible { outline-color: var(--s-focus-dark); }
.vh-viewing .vh-kicker, .vh-viewing .vh-cap { color: var(--s-dark-muted); }
.vh-viewing .vh-frame { background: var(--s-charcoal-2); }
.vh-viewing-text { margin-top: var(--s-gap); }
.vh-suite { margin-top: var(--s-gap); padding-top: var(--s-gap-sm); border-top: var(--s-rule-w) solid var(--s-dark-rule); color: var(--s-dark-muted); font-size: var(--s-step-small); }
.vh-suite .vh-h4 { color: var(--s-dark-text); }
.vh-suite span { display: block; }
.vh-suite-links { display: flex; flex-wrap: wrap; gap: 0 var(--s-gap); margin-top: var(--s-card-gap); }
.vh-suite-links a {
    display: inline-flex; align-items: center; min-height: var(--s-touch);
    color: var(--s-dark-text);
    text-decoration-color: var(--s-bronze-light); text-underline-offset: var(--s-underline-offset);
}
.vh-form { display: grid; gap: var(--s-gap); margin-top: var(--s-gap); padding-top: var(--s-gap); border-top: var(--s-rule-w) solid var(--s-dark-rule); }
.vh-field-row { display: grid; gap: var(--s-gap); }
.vh-field { display: grid; gap: var(--s-card-gap); }
.vh-field label { color: var(--s-dark-muted); font: var(--s-weight-label) var(--s-step-label)/var(--s-lh-tight) var(--s-font-body); letter-spacing: var(--s-track-label); }
.vh-field input, .vh-field select, .vh-field textarea {
    width: 100%; min-height: calc(var(--s-touch) + var(--s-focus-offset));
    padding: var(--s-gap-sm);
    border: var(--s-rule-w) solid var(--s-field-border); border-radius: var(--s-radius);
    background: var(--s-field-bg); color: var(--s-dark-text);
    font-size: var(--s-step-body);
    color-scheme: dark;
    transition: border-color var(--s-dur-fast) var(--s-ease);
}
.vh-field textarea { resize: vertical; }
.vh-field input:focus-visible, .vh-field select:focus-visible, .vh-field textarea:focus-visible { outline: var(--s-focus-w) solid var(--s-field-focus); outline-offset: 0; border-color: var(--s-field-focus); }
.vh-field [aria-invalid="true"] { border-color: var(--s-error-dark); }
.vh-err { color: var(--s-error-dark); font-size: var(--s-step-small); }
.vh-form-end { display: grid; gap: var(--s-gap-sm); }
.vh-form-note { color: var(--s-dark-muted); font-size: var(--s-step-small); }
.vh-form-status:not(:empty) { padding: var(--s-gap-sm) var(--s-gap); border-left: var(--s-focus-offset) solid var(--s-bronze-light); background: var(--s-charcoal-2); }

/* ---------- footer ---------- */
.vh-foot { padding-block: var(--s-section-sm) var(--s-gap); background: var(--s-chalk); color: var(--s-muted); font-size: var(--s-step-small); }
.vh-foot p + p { margin-top: var(--s-card-gap); }
.vh-wordmark-foot { margin-bottom: var(--s-gap-sm); color: var(--s-text); }
.vh-credits { margin-top: var(--s-gap); padding-top: var(--s-gap); border-top: var(--s-rule-w) solid var(--s-rule); }
.vh-credits .vh-h4 { color: var(--s-text); }
.vh-credits ul { display: grid; gap: 0 var(--s-gap); margin-top: var(--s-gap-sm); }
.vh-credits li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 var(--s-gap-sm); border-bottom: var(--s-rule-w) solid var(--s-rule); }
.vh-credit-used { padding-block: var(--s-card-gap); line-height: var(--s-lh-tight); }
.vh-credits a { display: inline-flex; align-items: center; justify-content: flex-end; white-space: nowrap; min-height: var(--s-touch); min-width: var(--s-touch); color: var(--s-text); text-decoration-color: var(--s-rule-bronze); text-underline-offset: var(--s-focus-offset); }
.vh-copy { margin-top: var(--s-gap); }

/* =================================================================== tablet */
@media (min-width: 48em) {
    .vh-tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); max-width: var(--s-plan-max-tab); }
    .vh-plan { --vh-lf: var(--s-plan-label-frac-tab); --vh-df: var(--s-plan-dims-frac-tab); }
    .vh-sheet-plan { max-width: var(--s-plan-max-tab); }
    .vh-roomlist { grid-template-columns: repeat(auto-fit, minmax(var(--s-room-min), 1fr)); }
    .vh-facts { grid-template-columns: repeat(3, 1fr); }
    .vh-ledger { grid-template-columns: 1fr 1fr; }
    .vh-story-cols { columns: 2; column-gap: var(--s-gap); }
    .vh-story-cols p { break-inside: avoid; }
    .vh-stage { max-height: var(--s-stage-max-tab); }
    .vh-step { display: grid; grid-template-columns: 5fr 1fr 6fr; align-items: center; }
    .vh-step-photo { grid-column: 1; grid-row: 1; }
    .vh-step-photo .vh-frame { margin-inline: 0; }
    .vh-step-text { grid-column: 3; grid-row: 1; padding: 0; }
    .vh-step:nth-child(even) { grid-template-columns: 6fr 1fr 5fr; }
    .vh-step:nth-child(even) .vh-step-photo { grid-column: 3; }
    .vh-step:nth-child(even) .vh-step-text { grid-column: 1; }
    .vh-board ul { grid-template-columns: repeat(3, 1fr); }
    .vh-board li:last-child { grid-column: auto; }
    .vh-board li:last-child .vh-frame { aspect-ratio: auto; }
    .vh-board li:last-child img { height: auto; }
    .vh-cards-wrap { display: none; }
    /* in page flow: no nested scroll to trap a trackpad; overflow-x only guards a narrow tablet */
    .vh-table-wrap { display: block; margin-top: var(--s-gap); overflow-x: auto; border-bottom: var(--s-rule-w) solid var(--s-rule-strong); }
    .vh-more { display: block; width: auto; min-width: var(--s-more-min); margin-inline: auto; margin-top: var(--s-gap); }
    .vh-more.is-fits-narrow { display: block; }
    .vh-more.is-fits-wide { display: none; }
    .vh-table { width: 100%; border-collapse: collapse; font-size: var(--s-step-body); }
    .vh-table caption { padding: var(--s-gap-sm) 0; color: var(--s-muted); font-size: var(--s-step-label); text-align: left; }
    .vh-table th, .vh-table td { padding: var(--s-gap-sm); border-bottom: var(--s-rule-w) solid var(--s-rule); text-align: left; white-space: nowrap; }
    .vh-table thead th { color: var(--s-muted); font-size: var(--s-step-label); font-weight: var(--s-weight-label); border-bottom-color: var(--s-rule-strong); }
    .vh-table tbody th { font-family: var(--s-font-display); font-size: var(--s-step-lede); font-weight: var(--s-weight-display); }
    .vh-table .vh-num, .vh-table .vh-col-area, .vh-table .vh-col-area_ft, .vh-table .vh-col-price { text-align: right; }
    .vh-table tr.is-available { background: var(--s-available-row); }
    .vh-table tr.is-reserved { background: var(--s-reserved-row); color: var(--s-status-reserved); }
    .vh-avail-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-gap); }
    .vh-counts { margin: 0; }
    .vh-filters { margin: 0; padding: var(--s-focus-offset); }
    .vh-field-row { grid-template-columns: 1fr 1fr; }
    .vh-credits ul { grid-template-columns: 1fr 1fr; }
}

/* ================================================================== desktop */
@media (min-width: 64em) {
    [id] { scroll-margin-top: var(--s-anchor-desk); }
    .vh-nav { height: var(--s-nav-h); gap: var(--s-nav-link-gap); }
    .vh-wordmark { margin-right: 0; }
    .vh-links { display: block; flex: 1; }
    .vh-links ul { display: flex; justify-content: center; gap: var(--s-nav-link-gap); }
    .vh-links a {
        display: inline-flex; align-items: center; min-height: var(--s-touch);
        font-size: var(--s-step-small); font-weight: var(--s-weight-label); text-decoration: none;
        background: linear-gradient(var(--s-rule-bronze), var(--s-rule-bronze)) no-repeat;
        background-position: 0 calc(100% - var(--s-gap-sm));
        background-size: 0 var(--s-rule-w);
        transition: background-size var(--s-dur) var(--s-ease);
    }
    .vh-links a:hover, .vh-links a[aria-current="true"] { background-size: 100% var(--s-rule-w); }
    .vh-cta-long { display: inline; }
    .vh-cta-short, .vh-menu { display: none; }
    .vh-hint-keys { display: inline; }
    .vh-hint-touch { display: none; }

    .vh-grid {
        display: grid;
        grid-template-columns:
            [full-start] minmax(calc(var(--s-gutter) - var(--s-gap)), 1fr)
            [content-start] repeat(12, [col] minmax(0, var(--s-col-max)))
            [content-end] minmax(calc(var(--s-gutter) - var(--s-gap)), 1fr) [full-end];
        column-gap: var(--s-gap);
        padding-inline: 0;
    }
    .vh-grid > * { grid-column: content-start / content-end; }
    .vh-section { padding-block: var(--s-section); }
    /* where one section's last picture meets the next section's head, one short step each side */
    .vh-building, .vh-light { padding-bottom: var(--s-section-sm); }
    .vh-res, .vh-square, .vh-avail { padding-top: var(--s-section-sm); }
    .vh-head { grid-column: content-start / col 9; margin-bottom: var(--s-section-sm); }
    .vh-pair .vh-frame, .vh-facade .vh-frame, .vh-sq-photo .vh-frame, .vh-door .vh-frame, .vh-step-photo .vh-frame { margin-inline: 0; }

    /* 1: arrival: text 40% on chalk, the room 60%, bleeding off top, right and bottom */
    .vh-arrival {
        display: grid; grid-template-columns: 1fr var(--s-hero-photo);
        height: calc(100svh - var(--s-ribbon-h) - var(--s-nav-h));
        min-height: var(--s-hero-min-h);
    }
    .vh-arrival-photo { grid-column: 2; grid-row: 1; height: 100%; }
    .vh-arrival-copy { grid-column: 1; grid-row: 1; padding: var(--s-gap) var(--s-gap) var(--s-gap) var(--s-gutter); }
    .vh-arrival-block { margin-block: auto; }
    .vh-plate { order: 0; }
    .vh-address { margin-top: 0; }
    .vh-status { margin-block: var(--s-gap); }
    .vh-plate { padding: 0; }
    .vh-actions .vh-btn { flex: 0 0 auto; }

    /* 2: building */
    .vh-pair { margin-top: 0; }
    .vh-pair-then { grid-column: content-start / col 7; }
    .vh-pair-now { grid-column: col 7 / content-end; }
    .vh-story { grid-column: content-start / col 8; grid-row: 3; margin-top: var(--s-section); align-self: start; }
    .vh-facade { grid-column: col 9 / full-end; grid-row: 3; margin-top: var(--s-section); }
    .vh-facade .vh-cap { padding-right: var(--s-gutter); }

    /* 3: residences: plan 5 columns, photograph 7, bleeding right */
    /* landing on #residences scrolls the section's top padding away, so the
     * band, the tabs, the plan, the room row and the photograph share one screen */
    .vh-res { scroll-margin-top: calc(var(--s-anchor-desk) - var(--s-section)); }
    .vh-res-band { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-gap); align-items: end; }
    .vh-res-head .vh-kicker { margin-bottom: var(--s-gap-sm); }
    .vh-res-side .vh-intro { margin-top: 0; font-size: var(--s-step-body); }
    .vh-tabs { display: flex; flex-wrap: wrap; margin-top: var(--s-gap-sm); padding: 0; }
    .vh-grid > .vh-panel { grid-column: full-start / full-end; display: grid; grid-template-columns: subgrid; align-items: start; }
    .vh-planbox { display: block; grid-column: content-start / col 6; grid-row: 1; }
    .vh-stagebox { grid-column: col 6 / full-end; grid-row: 1; }
    .vh-facts { grid-column: content-start / content-end; grid-row: 2; grid-template-columns: repeat(5, auto); justify-content: space-between; }
    .vh-facts dd { white-space: nowrap; }
    .vh-sheet-plan { max-width: none; }
    .vh-plan { max-height: var(--s-res-plan-h); --vh-lf: var(--s-plan-label-frac-desk); --vh-df: var(--s-plan-dims-frac-desk); }
    .vh-stage { aspect-ratio: auto; height: var(--s-res-stage-h); max-height: none; margin: 0; }
    .vh-viewbar { flex-wrap: nowrap; align-items: center; padding-right: var(--s-gutter); }
    .vh-viewcap { align-items: baseline; }
    .vh-viewcap .vh-viewcap-name { flex-basis: auto; margin-right: var(--s-gap-sm); font-size: var(--s-step-lede); }
    .vh-roomsui { margin-top: var(--s-gap-sm); }
    .vh-roomlist { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
    .vh-roomlist li { display: flex; }
    .vh-room-btn { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; }
    .vh-room-btn .vh-room-name { font-size: var(--s-step-body); line-height: var(--s-lh-tight); }

    /* 4: light: stacked editorial by default (also the reduced-motion layout) */
    .vh-steps { display: grid; gap: var(--s-section-sm); }
    .vh-step + .vh-step { margin-top: 0; }
    .vh-board ul { gap: var(--s-gap); }

    /* 5: square (r5): mirrored, so the essay, the square and the viewing no longer all hang a photograph
       on the left. The text leads at left; the garden bleeds off the RIGHT edge. */
    .vh-sq-photo { grid-column: col 6 / full-end; grid-row: 1; align-self: start; position: sticky; top: var(--s-anchor-desk); }
    .vh-sq-photo .vh-cap { padding-right: var(--s-gutter); text-align: right; }
    /* the 6:5 garden never runs past the fold while it is sticky (short laptop screens) */
    .vh-sq-photo img { max-height: calc(100svh - var(--s-anchor-desk) - var(--s-sq-cap-h)); object-fit: cover; object-position: var(--s-sq-focus); }
    .vh-sq-text { grid-column: content-start / col 5; grid-row: 1; margin-top: 0; }

    /* 6: availability */
    /* r5: the intro answers the headline from the right, so the head is not a band with an empty half */
    .vh-avail-head { grid-column: content-start / content-end; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--s-section-sm); align-items: end; }
    .vh-avail-head .vh-kicker { grid-column: 1 / -1; }
    .vh-avail-head .vh-h2 { grid-column: 1; }
    .vh-avail-head .vh-intro { grid-column: 2; margin-top: 0; }
    .vh-avail-panel { margin: 0; padding: var(--s-panel-pad); }

    /* 7: viewing: the doorway bleeding left, the form on the right */
    .vh-door { grid-column: full-start / col 6; align-self: start; position: sticky; top: var(--s-anchor-desk); }
    .vh-door .vh-cap { padding-left: var(--s-gutter); }
    .vh-viewing-text { grid-column: col 7 / content-end; margin-top: 0; }

    .vh-foot-main { grid-column: content-start / col 5; }
    .vh-credits { grid-column: col 5 / content-end; margin-top: 0; padding-top: 0; border-top: 0; }
    .vh-copy { grid-column: content-start / content-end; padding-top: var(--s-gap-sm); border-top: var(--s-rule-w) solid var(--s-rule); }
}

/* desktop + motion: the light essay pins its photograph for four steps (site.js adds .is-live) */
@media (min-width: 64em) and (prefers-reduced-motion: no-preference) {
    .vh-grid > .vh-essay.is-live { display: grid; grid-template-columns: subgrid; grid-column: full-start / full-end; }
    /* The opener frame: the heading at the top of the right column, the 8 a.m. photograph already
       full height beside it, so the section opens on a picture rather than an empty half. */
    .vh-essay.is-live > .vh-essay-head { grid-column: col 8 / content-end; grid-row: 1; align-self: start; max-width: none; margin-bottom: 0; padding-top: var(--s-gap); }
    .vh-essay.is-live .vh-essay-stage {
        display: flex; flex-direction: column; gap: var(--s-gap-sm);
        grid-column: full-start / col 7; grid-row: 1 / span 2; align-self: start;
        position: sticky; top: var(--s-anchor-desk);
        height: var(--s-stage-h);
    }
    .vh-essay.is-live .vh-steps { grid-column: col 8 / content-end; grid-row: 2; gap: 0; }
    .vh-essay.is-live .vh-step { display: flex; align-items: center; min-height: var(--s-essay-step-h); opacity: var(--s-opacity-dim); transition: opacity var(--s-dur-essay-fade) var(--s-ease); }
    .vh-essay.is-live .vh-step.is-active { opacity: 1; }
    .vh-essay.is-live .vh-step-photo { display: none; }
    /* the big bronze stamp under the photograph already says the time: the step says what the light does */
    .vh-essay.is-live .vh-step-text .vh-time { display: none; }
    .vh-essay.is-live .vh-time-light { display: block; color: var(--s-bronze-ink); font-size: var(--s-step-lede); }
    .vh-essay-frame { position: relative; flex: 1; overflow: hidden; background: var(--s-photo-well); }
    .vh-essay-img { position: absolute; inset: 0; opacity: var(--s-opacity-off); transition: opacity var(--s-dur-essay-fade) var(--s-ease); }
    .vh-essay-img.is-active { opacity: 1; }
    .vh-essay-img img { width: 100%; height: 100%; object-fit: cover; }
    /* The hour is the figure: set large at the photograph's upper edge, over a soft shade, and it
       changes with the light. (It used to sit on the lower edge, which is below the fold as the
       section arrives: the first hour was cut off while the heading column sat half empty. Final review.) The rail beneath keeps the whole day in view. */
    .vh-essay-frame::after { content: ""; position: absolute; inset: 0 0 auto; height: var(--s-essay-shade-h); background: linear-gradient(to bottom, var(--s-essay-shade), transparent); pointer-events: none; }
    .vh-essay-time { position: absolute; z-index: 1; left: var(--s-gutter); top: var(--s-essay-time-top); display: grid; color: var(--s-chalk); font-family: var(--s-font-display); font-size: var(--s-step-time-big); line-height: var(--s-lh-tight); }
    .vh-essay-time span { grid-area: 1 / 1; opacity: 0; transform: translateY(var(--s-essay-time-rise)); transition: opacity var(--s-dur-essay-fade) var(--s-ease), transform var(--s-dur-essay-fade) var(--s-ease); }
    .vh-essay-time span.is-active { opacity: 1; transform: none; }
    .vh-essay-rail { display: grid; grid-template-columns: repeat(var(--s-essay-steps), minmax(0, 1fr)); padding-left: var(--s-gutter); border-top: var(--s-rule-w) solid var(--s-rule-strong); }
    .vh-essay-rail li { position: relative; padding-top: var(--s-gap-sm); color: var(--s-muted); font-size: var(--s-step-small); transition: color var(--s-dur-essay-fade) var(--s-ease); }
    .vh-essay-rail li::before { content: ""; position: absolute; left: 0; right: var(--s-gap-sm); top: calc(-1 * var(--s-rule-w)); height: var(--s-essay-rail-w); background: var(--s-bronze); transform: scaleX(0); transform-origin: left; transition: transform var(--s-dur-essay-fade) var(--s-ease); }
    .vh-essay-rail li.is-active { color: var(--s-text); }
    .vh-essay-rail li.is-active::before { transform: scaleX(1); }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .vh-board .vh-frame:hover img { transform: scale(var(--s-scale-hover)); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; }
}