/*
 * Vesperwood — a property listing that slowly stops being one.
 * Every value comes from assets/tokens.css. Namespace: .vw-*
 * Layers of enhancement:
 *   no JS          each section carries its own static background (day -> night)
 *   .vw-dusk       site.js drives one document background through the dusk stops
 *   .vw-lantern-on the house rooms go dark and the lantern mask takes over
 *   reduced motion a still, dark document: the listing is a printed sheet on a
 *                  dark table, every room is evenly lit, nothing moves
 */

/* Latin subsets, WOFF2 (fontTools on the Pi). One Courier weight covers 400-700 so nothing is faux-bolded. */
@font-face { font-family: "IM Fell English"; src: url("fonts/IMFellEnglish-Regular.woff2") format("woff2"); font-weight: var(--s-weight-400); font-style: normal; font-display: swap; }
@font-face { font-family: "IM Fell English"; src: url("fonts/IMFellEnglish-Italic.woff2") format("woff2"); font-weight: var(--s-weight-400); font-style: italic; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("fonts/CourierPrime-Regular.woff2") format("woff2"); font-weight: var(--s-weight-400) var(--s-weight-700); font-display: swap; }
@font-face { font-family: "Inter"; src: url("../../../shared/fonts/inter/Inter-latin.var.woff2") format("woff2"); font-weight: var(--s-weight-100) var(--s-weight-900); font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--s-dusk-0); }
body { margin: 0; overflow-x: hidden; font: var(--s-weight-400) var(--s-step-body)/var(--s-leading-165) var(--s-font-display); color: var(--s-ink); background: transparent; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 var(--s-space-1); }
h1, h2, h3 { margin: 0; font-weight: var(--s-weight-400); }

.vw-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.vw-skip { position: absolute; left: var(--s-gutter); top: 0; z-index: 2000; padding: 10px 16px; background: var(--s-ink); color: var(--s-bone); font: var(--s-weight-600) var(--s-step-small)/var(--s-leading-100) var(--s-font-ui); transform: translateY(-120%); }
.vw-skip:focus { transform: none; }

/* Day / night text sets — switched per section, never faded into the ground */
.vw-day { color: var(--s-ink); --vw-muted: var(--s-ink-soft); --vw-rule: var(--s-rule-day); --vw-focus: var(--s-focus-day); }
.vw-night { color: var(--s-night-text); --vw-muted: var(--s-night-muted); --vw-rule: var(--s-rule-night); --vw-focus: var(--s-focus-night); }
:focus-visible { outline: 2px solid var(--vw-focus); outline-offset: 4px; }
.vw-day a:focus-visible, .vw-day button:focus-visible { box-shadow: 0 0 0 6px var(--s-bone); }

/* The dusk. Each section's ground picks up where the last one left off, so
   scrolling down drains the light continuously — with or without JS, in print
   and in screenshots. Ink text only ever sits on stops 0-2, night text on 3-4;
   the crossing happens on the threshold, where nothing is written. */
.vw-agency, .vw-listing { background: var(--s-dusk-0); }
.vw-gallery { background: linear-gradient(var(--s-dusk-0), var(--s-dusk-1) 35%); }
.vw-plan { background: linear-gradient(var(--s-dusk-1), var(--s-dusk-2) 60%); }
.vw-advisory { background: var(--s-dusk-2); }
.vw-threshold { background: linear-gradient(var(--s-dusk-2), var(--s-dusk-3) 48%); }
.vw-house { background: linear-gradient(var(--s-dusk-3), var(--s-dusk-3) 70%, var(--s-dusk-4)); }
.vw-pages, .vw-release, .vw-foot { background: var(--s-dusk-4); }

/* The lamp: an edge vignette site.js scrubs in as the listing goes on — the room getting darker around you. */
.vw-lamp { position: fixed; inset: 0; z-index: 900; pointer-events: none; opacity: 0;
    background: radial-gradient(ellipse 95% 85% at 50% 45%, var(--s-lamp-clear) 50%, var(--s-lamp-edge)); }
.vw-nojs .vw-lamp { display: none; }
/* On phones the text column runs edge to edge, so the vignette would sit under body copy: off. */
@media (max-width: 899px) { .vw-lamp { display: none; } }

/* Shared type */
.vw-kicker { margin: 0 0 14px; font: var(--s-weight-600) var(--s-step-micro)/var(--s-leading-130) var(--s-font-ui); letter-spacing: var(--s-track-ui); text-transform: uppercase; color: var(--vw-muted); }
.vw-h2 { font-size: var(--s-step-h2); line-height: var(--s-leading-105); letter-spacing: var(--s-track-n0p01); }
.vw-h3 { font-size: var(--s-step-h3); line-height: var(--s-leading-115); }
.vw-intro { margin-top: 18px; color: var(--vw-muted); max-width: var(--s-measure); }
.vw-live { min-height: var(--s-measure-1p5); margin: 14px 0 0; font: var(--s-weight-400) var(--s-step-small)/var(--s-leading-150) var(--s-font-ui); color: var(--vw-muted); }
.vw-live:empty { margin: 0; min-height: 0; }

.vw-btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
    padding: 12px 22px; border: 1px solid currentColor; border-radius: var(--s-radius);
    background: transparent; color: inherit; cursor: pointer; text-decoration: none;
    font: var(--s-weight-600) var(--s-step-small)/var(--s-leading-120) var(--s-font-ui); letter-spacing: var(--s-track-ui); text-transform: uppercase;
    transition: background-color var(--s-dur) var(--s-ease), color var(--s-dur) var(--s-ease);
}
.vw-day .vw-btn:hover { background: var(--s-ink); color: var(--s-bone); }
.vw-btn--night:hover { background: var(--s-night-text); color: var(--s-ash); }
.vw-link { font: var(--s-weight-500) var(--s-step-small)/var(--s-leading-140) var(--s-font-ui); text-underline-offset: 4px; color: var(--vw-muted); }
.vw-link:hover { color: inherit; }

/* ---------------------------------------------------------------- agency bar */
.vw-agency { border-bottom: 1px solid var(--vw-rule); }
.vw-agency-in {
    max-width: calc(var(--s-measure-wide) + 2 * var(--s-gutter)); margin-inline: auto; padding: 14px var(--s-gutter);
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px;
    font: var(--s-weight-500) var(--s-step-micro)/var(--s-leading-140) var(--s-font-ui); letter-spacing: var(--s-track-micro); text-transform: uppercase;
}
@media (min-width: 1024px) { .vw-agency-in { flex-wrap: nowrap; } .vw-agency-nav { margin-left: auto; } }
/* Phones: name and reference share a line; the section links run in one swipeable row. */
@media (max-width: 1023px) {
    .vw-agency-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; }
    .vw-agency-ref { grid-column: 2; grid-row: 1; }
    .vw-agency .vw-agency-nav { grid-column: 1 / -1; margin-inline: calc(-1 * var(--s-gutter)); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .vw-agency .vw-agency-nav::-webkit-scrollbar { display: none; }
    .vw-agency .vw-agency-nav ul { flex-wrap: nowrap; padding-inline: var(--s-gutter); white-space: nowrap; }
}
.vw-agency-in p { margin: 0; }
.vw-agency-name { font-weight: var(--s-weight-700); }
.vw-agency-trade { display: block; font-weight: var(--s-weight-500); color: var(--vw-muted); }
.vw-agency-nav ul { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none; }
.vw-agency-nav a { text-decoration: none; color: var(--vw-muted); display: inline-block; padding: 6px 0; }
.vw-agency-nav a:hover { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.vw-agency-ref { color: var(--vw-muted); }

/* ---------------------------------------------------------------- listing */
.vw-listing, .vw-gallery, .vw-plan, .vw-advisory { padding: clamp(40px, 8vw, 96px) var(--s-gutter) 0; }
.vw-paper { max-width: var(--s-measure); margin-inline: auto; }
.vw-paper--wide, .vw-paper--listing { max-width: var(--s-measure-wide); }
.vw-listing { padding-top: clamp(28px, 5vw, 64px); }
.vw-hero-head { display: grid; gap: 18px 48px; }
@media (min-width: 1024px) {
    .vw-hero-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
    .vw-hero-price { text-align: right; padding-bottom: 6px; }
    .vw-hero-price .vw-price { justify-content: flex-end; }
}
.vw-status {
    display: inline-block; margin: 0 0 22px; padding: 6px 10px 5px; border: 1px solid currentColor;
    font: var(--s-weight-700) var(--s-step-micro)/var(--s-leading-100) var(--s-font-ui); letter-spacing: var(--s-track-ui); text-transform: uppercase;
}
.vw-title { font-size: var(--s-step-hero); line-height: var(--s-leading-98); letter-spacing: var(--s-track-n0p015); }
.vw-locality { margin: 14px 0 0; font-style: italic; color: var(--vw-muted); }
.vw-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; padding-top: 18px; border-top: 1px solid var(--vw-rule); }
@media (min-width: 1024px) { .vw-price { border-top: 0; padding-top: 0; } }

/* The wrong note: a pencilled query in the margin, writing itself in a beat after load. */
.vw-margin {
    display: inline-block; margin: 14px 0 0; padding: 0 2px 4px; color: var(--s-pencil);
    font: italic var(--s-weight-400) var(--s-step-note)/var(--s-leading-120) var(--s-font-display); transform: rotate(-2.5deg); white-space: nowrap; max-width: 100%; transform-origin: left center;
    background: linear-gradient(var(--s-pencil), var(--s-pencil)) left bottom / 100% 1px no-repeat;
    animation: vw-write var(--s-dur-write) var(--s-ease-ink) var(--s-delay-write) both;
}
@media (min-width: 1024px) { .vw-margin { transform-origin: right center; } }
@keyframes vw-write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.vw-price-label { font: var(--s-weight-600) var(--s-step-micro)/var(--s-leading-100) var(--s-font-ui); letter-spacing: var(--s-track-ui); text-transform: uppercase; color: var(--vw-muted); }
.vw-price-value { font-size: var(--s-step-price); line-height: var(--s-leading-100); }

.vw-facade { margin: clamp(24px, 4vw, 40px) 0 0; }
.vw-facade-frame { position: relative; overflow: hidden; border: 1px solid var(--vw-rule); box-shadow: 0 18px 40px -26px var(--s-shadow); }
.vw-facade-art { position: relative; }
.vw-facade img { width: 100%; }
/* Wide screens: the drawing runs the full container, cropped to 16:10 like a print particulars plate. */
@media (min-width: 1024px) {
    .vw-facade-frame { height: 0; padding-top: var(--s-facade-crop); }
    .vw-facade-art { position: absolute; inset: 0 0 auto; margin-top: var(--s-facade-shift); }
}
.vw-frame img { width: 100%; border: 1px solid var(--vw-rule); box-shadow: 0 18px 40px -26px var(--s-shadow); }

/* A lamp in the attic of a vacant house. On for a moment, someone at the glass, then out.
   After the visitor has been inside, it is lit again and she stays. */
.vw-window {
    position: absolute; left: var(--win-x); top: var(--win-y); width: var(--win-w); height: var(--win-h);
    display: flex; align-items: flex-end; justify-content: center; mix-blend-mode: multiply; opacity: 0;
    background: radial-gradient(circle at 50% 60%, var(--s-window-light), var(--s-window-glow));
    box-shadow: 0 0 var(--s-em-1p6) var(--s-em-0p5) var(--s-window-glow);
    animation: vw-lamp-out var(--s-dur-window) linear var(--s-delay-window) both;
}
.vw-window-figure { width: 78%; height: 92%; fill: var(--s-window-figure); animation: vw-figure-out var(--s-dur-window) linear var(--s-delay-window) both; }
.vw-window.is-back { animation: none; opacity: 1; }
.vw-window.is-back .vw-window-figure { animation: none; opacity: 1; }
@keyframes vw-lamp-out { 0% { opacity: 0; } 8% { opacity: 1; } 70% { opacity: 1; } 73% { opacity: 0.3; } 76% { opacity: 1; } 79% { opacity: 0.2; } 100% { opacity: 0; } }
@keyframes vw-figure-out { 0%, 12% { opacity: 0; } 22%, 58% { opacity: 1; } 66%, 100% { opacity: 0; } }
.vw-facade figcaption, .vw-frame figcaption { margin-top: 10px; font: var(--s-weight-400) var(--s-step-small)/var(--s-leading-145) var(--s-font-ui); color: var(--vw-muted); }

.vw-facts {
    display: grid; max-width: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 104px), 1fr)); gap: 0;
    margin: 36px 0 0; border-top: 1px solid currentColor; border-bottom: 1px solid var(--vw-rule);
}
.vw-fact { padding: 14px 12px 14px 0; }
.vw-fact + .vw-fact { padding-left: 12px; border-left: 1px solid var(--vw-rule); }
.vw-fact dt { font: var(--s-weight-600) var(--s-step-micro)/var(--s-leading-130) var(--s-font-ui); letter-spacing: var(--s-track-ui); text-transform: uppercase; color: var(--vw-muted); }
.vw-fact dd { margin: 6px 0 0; font-size: var(--s-step-h3); line-height: var(--s-leading-110); white-space: nowrap; }
@media (max-width: 539px) {
    .vw-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vw-fact, .vw-fact + .vw-fact { padding: 12px 10px 12px 0; border-left: 0; border-top: 1px solid var(--vw-rule); }
    .vw-fact:nth-child(-n+2) { border-top: 0; }
    .vw-fact:nth-child(even) { padding-left: 12px; border-left: 1px solid var(--vw-rule); }
}

/* The rewrite. Without JS only the original fact shows. */
.vw-swap-b { display: none; }
.vw-swap-a { transition: opacity calc(var(--s-dur-ink) / 2) var(--s-ease-ink), filter calc(var(--s-dur-ink) / 2) var(--s-ease-ink); }
.vw-swap.is-bleeding .vw-swap-a { opacity: 0; filter: blur(var(--s-blur-bleed)); }
.vw-swap.is-rewritten .vw-swap-a { display: none; }
.vw-swap.is-rewritten .vw-swap-b { display: inline; animation: vw-ink-in var(--s-dur-ink) var(--s-ease-ink) both; }
@keyframes vw-ink-in { from { opacity: 0; filter: blur(var(--s-blur-ink-in)); } to { opacity: 1; filter: blur(0); } }

.vw-listing-body { display: grid; gap: 0 48px; }
@media (min-width: 1024px) {
    .vw-listing-body { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .vw-prose { grid-column: 1 / span 7; }
    .vw-listing-side { grid-column: 9 / span 4; padding-top: 40px; }
    .vw-listing-side .vw-fine { margin-top: 28px; }
}
.vw-prose { margin-top: 36px; max-width: var(--s-measure); }
.vw-prose p:first-child::first-letter { float: left; margin: var(--s-space-0p06) var(--s-space-0p08) 0 0; font-size: var(--s-size-3p4); line-height: var(--s-leading-82); }
.vw-listing .vw-btn { margin-top: 8px; }
/* The fine print is typed, like the particulars it came off. */
.vw-fine { margin-top: 44px; padding: 16px 0 clamp(40px, 8vw, 80px); border-top: 1px solid var(--vw-rule); font: var(--s-weight-400) var(--s-step-small)/var(--s-leading-160) var(--s-font-type); color: var(--vw-muted); }
.vw-fine p { margin: 0; }

/* ---------------------------------------------------------------- gallery (the layout starts to slip) */
.vw-gallery { padding-bottom: clamp(28px, 4vw, 48px); }
.vw-frames { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; }
.vw-frame figure { margin: 0; }
.vw-frame--lead, .vw-frame--empty { grid-column: 1 / -1; }
/* The withheld photograph: an empty mount, four photo corners still glued in, the room typed in pencil. */
.vw-frame-void {
    position: relative; aspect-ratio: 8 / 3; display: grid; place-content: center; gap: 6px; text-align: center;
    border: 1px solid var(--vw-rule); background: repeating-linear-gradient(135deg, var(--s-mount-hatch) 0 1px, transparent 1px 9px), var(--s-mount);
    box-shadow: inset 0 0 40px -12px var(--s-shadow);
}
.vw-mount-corners, .vw-mount-corners::before, .vw-mount-corners::after { position: absolute; inset: 14% 22%; }
.vw-mount-corners {
    background:
        linear-gradient(135deg, var(--s-mount-corner) 0 10px, transparent 10px) top left / 22px 22px no-repeat,
        linear-gradient(225deg, var(--s-mount-corner) 0 10px, transparent 10px) top right / 22px 22px no-repeat,
        linear-gradient(45deg, var(--s-mount-corner) 0 10px, transparent 10px) bottom left / 22px 22px no-repeat,
        linear-gradient(315deg, var(--s-mount-corner) 0 10px, transparent 10px) bottom right / 22px 22px no-repeat;
    opacity: 0.55;
}
.vw-mount-label { position: relative; font: italic var(--s-weight-400) var(--s-step-h3)/var(--s-leading-130) var(--s-font-display); color: var(--s-ink); }
.vw-mount-note { position: relative; font: var(--s-weight-500) var(--s-step-micro)/var(--s-leading-150) var(--s-font-ui); letter-spacing: var(--s-track-ui); text-transform: uppercase; color: var(--s-ink-soft); }
/* Wide: a plate-led spread — one large lead drawing beside a stacked pair, then a row of three. */
@media (min-width: 1024px) {
    .vw-frames { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 28px; }
    .vw-frame { grid-column: span 4; }
    .vw-frame--lead { grid-column: 1 / span 8; grid-row: span 2; }
    .vw-frame--lead figure { display: flex; flex-direction: column; height: 100%; }
    .vw-frame--lead picture { flex: 1 1 auto; min-height: 0; }
    .vw-frame--lead img { height: 100%; object-fit: cover; }
    .vw-frame--empty { grid-column: span 4; }
    .vw-frame-void { aspect-ratio: 4 / 3; }
}
/* The grid starts to slip: a caption out of line, a frame knocked crooked. */
.vw-frame:nth-child(4) figcaption { padding-left: var(--s-slip-caption); margin-left: var(--s-slip-caption); }
.vw-frame:nth-child(5) { transform: translateY(var(--s-slip-y)) rotate(var(--s-slip-rot)); }
.vw-frame:nth-child(5) figcaption { text-align: right; }
.vw-frame--empty figcaption { font-style: italic; }
.vw-frame-pic img { transition: opacity var(--s-dur-ink) var(--s-ease-ink); }

/* ---------------------------------------------------------------- floor plans */
.vw-plan { padding-top: clamp(8px, 2vw, 24px); padding-bottom: clamp(32px, 5vw, 56px); }
.vw-advisory { padding-top: clamp(16px, 3vw, 32px); }
.vw-plan .vw-paper { padding-left: clamp(0px, 3vw, 40px); }
.vw-plan-svg { display: block; width: 100%; max-width: 560px; height: auto; margin-top: 24px; overflow: visible; }
.vw-plan-walls { fill: none; stroke: currentColor; stroke-width: 7; stroke-linecap: square; }
.vw-plan-fine { fill: none; stroke: currentColor; stroke-width: 1.4; opacity: 0.75; }
.vw-plan-labels text { fill: currentColor; font: var(--s-weight-400) 19px var(--s-font-display); text-anchor: middle; }
.vw-plan-labels .vw-plan-small { font: var(--s-weight-600) 11px var(--s-font-ui); letter-spacing: var(--s-track-0p14); text-transform: uppercase; }
.vw-plan-extra-fill { fill: var(--s-blood-soft); }
.vw-plan-extra-wall { fill: none; stroke: var(--s-blood); stroke-width: 5; }
.vw-plan-extra-door { fill: none; stroke: var(--s-blood); stroke-width: 1.4; }
.vw-plan-note { margin-top: 14px; font: var(--s-weight-400) var(--s-step-small)/var(--s-leading-150) var(--s-font-ui); color: var(--vw-muted); }

/* ---------------------------------------------------------------- advisory */
.vw-advisory { padding-bottom: clamp(40px, 6vw, 72px); }
.vw-advisory-card { max-width: var(--s-card-max); margin-inline: auto; padding: clamp(24px, 5vw, 40px); border: 1px solid currentColor; outline: 1px solid var(--vw-rule); outline-offset: 6px; }
.vw-advisory-card .vw-h3 { margin-bottom: 14px; }
.vw-advisory-body { color: var(--s-ink); }
.vw-advisory-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 24px; }
.vw-advisory-card.is-ack .vw-advisory-actions { opacity: 0.55; }

/* ---------------------------------------------------------------- threshold */
.vw-threshold { position: relative; height: calc(var(--s-threshold-h) * 1vh); display: flex; align-items: flex-end; justify-content: center; padding: 0 var(--s-gutter) 10vh; }
@supports (height: 1svh) { .vw-threshold { height: calc(var(--s-threshold-h) * 1svh); } }
/* The threshold has a subject: a door ajar, the only light in the frame. */
.vw-threshold { flex-direction: column; align-items: center; gap: clamp(20px, 3vh, 36px); }
.vw-door { display: block; width: auto; height: var(--s-door-h); overflow: visible; }
.vw-door-stop-a { stop-color: var(--s-lantern); stop-opacity: 0.85; }
.vw-door-stop-b { stop-color: var(--s-lantern); stop-opacity: 0; }
.vw-door-halo { opacity: 0.35; }
.vw-door-gap, .vw-door-spill { animation: vw-door-flicker var(--s-door-flicker) ease-in-out infinite alternate; }
.vw-door-leaf { fill: var(--s-dusk-4); }
.vw-door-line { fill: none; stroke: var(--s-night-muted); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: 0.75; }
@keyframes vw-door-flicker { from { opacity: 0.72; } to { opacity: 1; } }
.vw-threshold-line { max-width: 22ch; margin: 0; text-align: center; font-style: italic; font-size: var(--s-step-h3); line-height: var(--s-leading-130); color: var(--s-night-muted); }

/* ---------------------------------------------------------------- the house */
.vw-house { padding: 0 0 var(--s-section); }
.vw-house-head { max-width: var(--s-measure); padding: clamp(16px, 3vw, 40px) var(--s-gutter) clamp(24px, 4vw, 48px); margin-left: clamp(0px, 14vw, 220px); }
.vw-lantern-hint { margin: 18px 0 0; font: var(--s-weight-500) var(--s-step-micro)/var(--s-leading-150) var(--s-font-ui); letter-spacing: var(--s-track-ui); text-transform: uppercase; color: var(--s-lantern); }
.vw-lantern-hint:empty { display: none; }

.vw-room { position: relative; padding: 0 0 clamp(48px, 8vw, 96px); }
.vw-room-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.vw-room-count {
    position: absolute; top: 12px; right: var(--s-gutter); z-index: var(--s-z-ui); margin: 0; padding: 6px 10px;
    background: var(--s-ash); border: 1px solid var(--s-rule-night); color: var(--s-night-muted);
    font: var(--s-weight-600) var(--s-step-micro)/var(--s-leading-100) var(--s-font-ui); letter-spacing: var(--s-track-micro); text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.vw-room-view { width: 100%; max-width: var(--s-room-max); display: flex; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.vw-room-art { position: relative; flex: none; width: max(100%, var(--s-room-min)); aspect-ratio: 4 / 3; overflow: hidden; touch-action: pan-y; container-type: inline-size; }
.vw-room-art picture { position: absolute; inset: 0; }
.vw-room-art img { width: 100%; height: 100%; object-fit: cover; }
.vw-room-dim img { filter: var(--s-room-even); }
.vw-room-lit { position: absolute; inset: 0; z-index: var(--s-z-writing); }
.vw-room-lit-pic { display: none; }
.vw-room-glow { display: none; }
.vw-walls { position: absolute; inset: 0; }

/* The wall writing — real text, positioned on the drawing */
.vw-w { position: absolute; left: var(--wx); top: var(--wy); margin: 0; transform: translate(-50%, -50%) rotate(var(--wr)); white-space: nowrap; color: var(--s-ink); line-height: var(--s-leading-110); }
/* Sized to the drawing (container units) so the writing never drifts off its wall */
.vw-w--s { font-size: var(--s-step-wall); font-size: var(--s-wall-s); }
.vw-w--m { font-size: calc(var(--s-step-wall) * 1.25); font-size: var(--s-wall-m); }
.vw-w--l { font-size: var(--s-step-wall-big); font-size: var(--s-wall-l); }
.vw-w--scratch { font-family: var(--s-font-display); letter-spacing: var(--s-track-wall); text-transform: uppercase; }
.vw-w--hand { font-family: var(--s-font-display); font-style: italic; color: var(--s-ink-soft); }
.vw-w--chalk { font-family: var(--s-font-type); font-weight: var(--s-weight-700); color: var(--s-ink-soft); }
.vw-w--tally { font-family: var(--s-font-type); font-weight: var(--s-weight-700); letter-spacing: var(--s-track-0p04); color: var(--s-blood); text-decoration: line-through; text-decoration-thickness: 2px; }
.vw-w ul { margin: 0; padding: 0; list-style: none; }
.vw-w--chart { transform: translate(0, -100%) rotate(var(--wr)); font-family: var(--s-font-type); }
.vw-w--chart ul { display: flex; flex-direction: column-reverse; }
.vw-w--chart li { padding: var(--s-space-0p15) 0 var(--s-space-0p15) var(--s-space-1p6); background: linear-gradient(currentColor, currentColor) left center / var(--s-em-1p2) 1px no-repeat; }
.vw-w--chart li:nth-child(n+6) { margin-bottom: var(--s-space-1p4); }
.vw-w--roll { font-family: var(--s-font-display); font-style: italic; }
.vw-w--roll li { padding: var(--s-space-0p1) 0; }

.vw-room-cap { width: 100%; max-width: var(--s-room-max); padding-inline: var(--s-gutter); display: grid; gap: 4px 32px; }
@media (min-width: 900px) { .vw-room-cap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: baseline; } .vw-room-note { grid-column: 2; grid-row: 1 / span 2; } }
.vw-room-name { font-size: var(--s-step-h3); line-height: var(--s-leading-115); }
.vw-room-listed { margin: 0; font: var(--s-weight-500) var(--s-step-micro)/var(--s-leading-160) var(--s-font-ui); letter-spacing: var(--s-track-micro); text-transform: uppercase; color: var(--vw-muted); }
/* The label stays clean; the claim it introduces is the thing struck out. */
.vw-room-listed-value { color: var(--s-night-text); text-decoration-line: line-through; text-decoration-color: var(--s-blood-lift); text-decoration-thickness: 1px; }
.vw-room-note { margin: 0; color: var(--vw-muted); font-style: italic; }

/* Lantern mode (site.js, motion allowed): the room goes almost black and only the lit circle shows it. */
.vw-lantern-on .vw-room { height: calc(var(--s-room-pin-desk) * 1vh); padding: 0; }
@supports (height: 1svh) { .vw-lantern-on .vw-room { height: calc(var(--s-room-pin-desk) * 1svh); } }
.vw-lantern-on .vw-room-stage { position: sticky; top: 0; height: 100vh; height: 100svh; justify-content: center; padding-block: 12px; }
.vw-lantern-on .vw-room-view { max-width: none; justify-content: center; overflow: hidden; }
.vw-lantern-on .vw-room-art {
    width: auto; min-width: 0; height: min(calc(100svh - 190px), calc(var(--s-room-max) * 0.75));
    --lx: 50%; --ly: 50%; --lr: 160px; --lr-in: 60px;
    will-change: transform;
}
.vw-lantern-on .vw-room-dim img { filter: var(--s-room-dim); }
.vw-lantern-on .vw-room-lit-pic { display: block; }
.vw-lantern-on .vw-room-lit-pic img { filter: var(--s-room-lit); }
.vw-lantern-on .vw-room-lit {
    -webkit-mask-image: radial-gradient(circle at var(--lx) var(--ly), var(--s-mask-solid) var(--lr-in), var(--s-mask-half) calc(var(--lr-in) + (var(--lr) - var(--lr-in)) * 0.45), var(--s-mask-clear) var(--lr));
            mask-image: radial-gradient(circle at var(--lx) var(--ly), var(--s-mask-solid) var(--lr-in), var(--s-mask-half) calc(var(--lr-in) + (var(--lr) - var(--lr-in)) * 0.45), var(--s-mask-clear) var(--lr));
}
.vw-lantern-on .vw-room-glow {
    display: block; position: absolute; inset: 0; z-index: var(--s-z-glow); pointer-events: none; mix-blend-mode: soft-light;
    background: radial-gradient(circle at var(--lx) var(--ly), var(--s-lantern-glow), var(--s-lantern-edge) var(--lr));
}
@media (max-width: 899px) {
    .vw-lantern-on .vw-room { height: calc(var(--s-room-pin-touch) * 1vh); }
    @supports (height: 1svh) { .vw-lantern-on .vw-room { height: calc(var(--s-room-pin-touch) * 1svh); } }
    .vw-lantern-on .vw-room-art { height: min(calc(100svh - 250px), 70vw + 260px); }
}

/* The revised plan sits off-centre: the house no longer lines up */
.vw-plan-late { max-width: 620px; margin: clamp(32px, 6vw, 72px) var(--s-gutter) 0 auto; padding-right: clamp(0px, 8vw, 140px); padding-left: var(--s-gutter); }
.vw-plan-late .vw-plan-note em { display: block; margin-top: 6px; }

/* Particulars, revised: a typed correction slip on the dark table, next to the redrawn plan. */
.vw-revised {
    --vw-muted: var(--s-ink-soft); --vw-rule: var(--s-rule-day); --vw-focus: var(--s-focus-day);
    position: relative; max-width: 36rem; margin: clamp(40px, 7vw, 80px) var(--s-gutter) 0; padding: clamp(22px, 4vw, 36px);
    background: var(--s-paper) url("img/sheet.jpg") center / cover;
    background-image: image-set(url("img/sheet.webp") type("image/webp"), url("img/sheet.jpg") type("image/jpeg"));
    color: var(--s-ink); font: var(--s-weight-400) var(--s-step-small)/var(--s-leading-160) var(--s-font-type);
    box-shadow: 0 30px 50px -24px var(--s-shadow-deep); transform: rotate(-0.8deg);
}
@media (min-width: 1024px) { .vw-revised { margin-left: clamp(40px, 12vw, 200px); } }
.vw-revised-ref { margin: 0 0 14px; text-align: right; color: var(--s-ink-soft); }
.vw-revised-title { margin: 0 0 18px; font: var(--s-weight-400) var(--s-step-h3)/var(--s-leading-120) var(--s-font-display); }
.vw-revised-list { margin: 0; border-top: 1px solid var(--s-ink); }
.vw-revised-row { display: grid; grid-template-columns: minmax(0, var(--s-em-9)) minmax(0, 1fr); gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--s-rule-day); }
.vw-revised-row dt { text-transform: uppercase; letter-spacing: var(--s-track-0p06); color: var(--s-ink-soft); }
.vw-revised-row dd { margin: 0; font: var(--s-weight-400) var(--s-step-h3)/var(--s-leading-125) var(--s-font-display); }
.vw-revised del { margin-right: var(--s-space-0p35); text-decoration-skip-ink: none; color: var(--s-ink-soft); text-decoration-line: line-through; text-decoration-color: var(--s-blood); text-decoration-thickness: var(--s-strike); }
.vw-revised ins { text-decoration: none; font-family: var(--s-font-display); font-style: italic; font-size: var(--s-size-1p1); color: var(--s-ink); }
.vw-revised-row--prose dd { font-size: var(--s-step-body); line-height: var(--s-leading-150); }
@media (max-width: 539px) { .vw-revised-row { grid-template-columns: minmax(0, 1fr); } }
.vw-revised-sign { margin: 16px 0 0; color: var(--s-ink-soft); }

/* ---------------------------------------------------------------- found pages */
.vw-pages { padding: var(--s-section) var(--s-gutter); overflow: hidden; overflow: clip; }
.vw-pages-head { max-width: var(--s-measure); margin: 0 auto clamp(40px, 7vw, 80px); }
.vw-sheets { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; display: grid; gap: clamp(36px, 6vw, 64px); }
.vw-sheet-drop { position: relative; width: min(calc(100% - clamp(0px, 6vw, 80px)), 34rem); filter: drop-shadow(0 24px 30px var(--s-shadow-deep)); }
.vw-sheet-drop:nth-child(odd) { justify-self: start; margin-left: clamp(0px, 6vw, 80px); --rot: -1.4deg; }
.vw-sheet-drop:nth-child(even) { justify-self: end; margin-right: clamp(0px, 4vw, 60px); --rot: 1.1deg; }
.vw-sheet-drop:nth-child(3) { --rot: -0.4deg; }
.vw-sheet-drop:nth-child(5) { --rot: 2deg; }
/* Desktop: the pages lie two abreast on the dark, the right-hand one slid down the desk,
   so every screen of the bureau holds at least two of them. */
@media (min-width: 900px) {
    .vw-sheets { max-width: 1120px; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(36px, 5vw, 80px); row-gap: clamp(20px, 2.4vw, 36px); align-items: start; }
    .vw-sheet-drop, .vw-sheet-drop:nth-child(odd), .vw-sheet-drop:nth-child(even) { width: 100%; max-width: 34rem; margin: 0; }
    .vw-sheet-drop:nth-child(odd) { justify-self: end; }
    .vw-sheet-drop:nth-child(even) { justify-self: start; margin-top: clamp(72px, 9vw, 140px); }
    .vw-sheet-drop:nth-child(odd):not(:first-child) { margin-top: calc(clamp(72px, 9vw, 140px) * -0.5); }
}
.vw-sheet {
    position: relative; padding: clamp(24px, 5vw, 40px) clamp(20px, 5vw, 40px) calc(clamp(24px, 5vw, 40px) + var(--s-tear));
    background: var(--s-paper) url("img/sheet.jpg") center / cover;
    background-image: image-set(url("img/sheet.webp") type("image/webp"), url("img/sheet.jpg") type("image/jpeg"));
    color: var(--s-ink); font: var(--s-weight-400) clamp(0.98rem, 1.1vw, 1.06rem)/var(--s-leading-170) var(--s-font-type);
    transform: rotate(var(--rot));
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), 94% 100%, 88% calc(100% - 7px), 81% calc(100% - 1px), 73% calc(100% - 10px), 66% calc(100% - 3px), 58% calc(100% - 11px), 49% calc(100% - 2px), 41% calc(100% - 9px), 33% 100%, 25% calc(100% - 8px), 17% calc(100% - 2px), 9% calc(100% - 12px), 3% calc(100% - 4px), 0 calc(100% - 10px));
}
.vw-sheet p:last-child { margin-bottom: 0; }
.vw-sheet-date { margin-bottom: 18px; font: var(--s-weight-700) var(--s-step-small)/var(--s-leading-100) var(--s-font-type); letter-spacing: var(--s-track-0p12); text-transform: uppercase; }
.vw-sheet del { text-decoration-line: line-through; text-decoration-color: var(--s-blood); text-decoration-thickness: 2px; color: var(--s-ink-soft); }
.vw-sheet ins { display: inline; text-decoration: none; font-family: var(--s-font-display); font-style: italic; font-size: var(--s-size-1p08); color: var(--s-ink); }

/* ---------------------------------------------------------------- release (a notice, rigidly centred) */
.vw-release { padding: var(--s-section) var(--s-gutter); display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: var(--s-ending-gap); }
.vw-release .vw-agent-card { margin-bottom: 0; font: var(--s-weight-400) var(--s-step-small)/var(--s-leading-160) var(--s-font-ui); }
.vw-notice {
    width: min(100%, var(--s-card-max)); min-width: 0; padding: clamp(32px, 7vw, 64px) clamp(16px, 6vw, 56px); text-align: center;
    background: var(--s-ash); border: 1px solid var(--s-night-muted); outline: 1px solid var(--s-rule-night); outline-offset: 8px;
}
.vw-notice-presenter { font: var(--s-weight-600) var(--s-step-micro)/var(--s-leading-140) var(--s-font-ui); letter-spacing: var(--s-track-ui); text-transform: uppercase; color: var(--vw-muted); }
.vw-notice-title { margin: 10px 0 8px; font-size: var(--s-step-release); line-height: var(--s-leading-95); letter-spacing: var(--s-track-0p03); text-transform: uppercase; }
.vw-notice-tagline { font-style: italic; color: var(--vw-muted); }
.vw-notice-date { margin: 26px 0 18px; padding-block: 14px; border-block: 1px solid var(--vw-rule); font: var(--s-weight-700) var(--s-step-small)/var(--s-leading-130) var(--s-font-ui); letter-spacing: var(--s-track-ui); text-transform: uppercase; }
.vw-notice-rating, .vw-notice-runtime { font: var(--s-weight-400) var(--s-step-small)/var(--s-leading-155) var(--s-font-ui); color: var(--vw-muted); }
.vw-notice-runtime { margin-bottom: 26px; }
.vw-remind { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--vw-rule); text-align: left; }
.vw-remind-title { font-size: var(--s-step-h3); margin-bottom: 12px; }
.vw-remind-label { display: block; margin-bottom: 8px; font: var(--s-weight-600) var(--s-step-micro)/var(--s-leading-130) var(--s-font-ui); letter-spacing: var(--s-track-ui); text-transform: uppercase; color: var(--vw-muted); }
.vw-remind-row { display: flex; flex-wrap: wrap; gap: 10px; }
.vw-remind input {
    flex: 1 1 220px; min-width: 0; min-height: 48px; padding: 10px 14px; border: 1px solid var(--s-night-muted); border-radius: var(--s-radius);
    background: var(--s-ash-3); color: var(--s-night-text); font: var(--s-weight-400) 16px/var(--s-leading-130) var(--s-font-ui);
}
.vw-remind input::placeholder { color: var(--s-night-muted); }
.vw-remind input[aria-invalid="true"] { border-color: var(--s-focus-night); }

/* ---------------------------------------------------------------- footer */
.vw-foot { padding: 0 var(--s-gutter) clamp(40px, 7vw, 72px); font: var(--s-weight-400) var(--s-step-small)/var(--s-leading-160) var(--s-font-ui); color: var(--vw-muted); }
.vw-foot-in { max-width: var(--s-card-max); margin-inline: auto; text-align: center; }
.vw-agent-card { margin: 0 auto 32px; max-width: 360px; padding: 22px 24px; border: 1px dashed var(--s-night-muted); text-align: left; color: var(--s-night-text); transform: rotate(-1deg); }
.vw-agent-card p { margin: 0 0 4px; }
.vw-agent-name { font: var(--s-weight-400) var(--s-step-h3)/var(--s-leading-120) var(--s-font-display); }
.vw-agent-hours, .vw-agent-since { color: var(--vw-muted); }
.vw-agent-since { margin-top: 10px !important; font-style: italic; }
.vw-foot-dist, .vw-foot-copy { margin: 0 0 6px; }

/* ---------------------------------------------------------------- reduced motion: the late state, still */
@media (prefers-reduced-motion: reduce) {
    html { background: var(--s-ash); scroll-behavior: auto; }
    .vw-lamp { display: none; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .vw-agency, .vw-listing, .vw-gallery, .vw-plan, .vw-advisory, .vw-threshold, .vw-house, .vw-pages, .vw-release, .vw-foot { background: transparent; }
    .vw-agency { background: var(--s-paper); }
    .vw-listing .vw-paper, .vw-gallery .vw-paper, .vw-plan .vw-paper {
        padding: clamp(24px, 5vw, 48px); background: var(--s-paper); box-shadow: 0 30px 60px -30px var(--s-shadow-deep);
    }
    .vw-fine { padding-bottom: 0; }
    .vw-advisory-card { background: var(--s-paper); }
    .vw-threshold { height: auto; padding: clamp(48px, 10vw, 96px) var(--s-gutter); }
    .vw-frame:nth-child(5), .vw-agent-card, .vw-revised { transform: none; }
    .vw-sheet { transform: none; }
    /* The attic lamp is simply lit — a still picture with one thing wrong in it. */
    .vw-window, .vw-window-figure { opacity: 1; }
}

/* Wide screens: the bureau's note stays at the left while its pages are read, so the first page
   starts beside the title, not a screen below it. */
@media (min-width: 1100px) {
    .vw-pages { display: grid; grid-template-columns: minmax(0, var(--s-pages-head-w)) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 88px); align-items: start; padding-top: var(--s-pages-top); max-width: var(--s-pages-max); margin-inline: auto; }
    .vw-pages-head { position: sticky; top: var(--s-pages-sticky); margin: 0; }
    .vw-sheets { max-width: none; margin: 0; column-gap: clamp(28px, 3vw, 48px); }
    .vw-sheet-drop:nth-child(odd) { justify-self: stretch; }
    .vw-sheet-drop:nth-child(even) { justify-self: stretch; }
    /* The ending is one composed last page: the notice with the agent's card left beside it, the
       reminder form and the card read together, and no screen of empty dark around them. */
    .vw-pages { padding-bottom: var(--s-ending-pad); }
    .vw-release {
        grid-template-columns: minmax(0, var(--s-card-max)) minmax(0, var(--s-agent-w));
        justify-content: center; align-items: end; column-gap: var(--s-ending-gap);
        padding-top: var(--s-ending-pad); padding-bottom: var(--s-ending-pad);
    }
    .vw-release .vw-agent-card { margin: 0; max-width: none; }
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }