/*
 * Varrow House: design tokens. Every colour, font, size, space, duration,
 * easing, scale amount and breakpoint on the concept site lives here;
 * site.css and site.js only reference them (JS reads with getComputedStyle,
 * never with a literal fallback). Prefix: --s-.
 *
 * Palette "limestone afternoon": the page is light stone and chalk; the
 * photographs carry the colour. Charcoal is the only text colour on light
 * grounds. BRONZE IS FOR RULES, DOTS, THE CAMERA WEDGE AND LARGE TYPE ONLY:
 * bronze on chalk is 3.6:1, on limestone 3.1:1: it fails AA for small text.
 * For small text use --s-muted (5.2:1 limestone, 5.9:1 chalk) or
 * --s-bronze-ink (4.6:1 limestone, 5.3:1 chalk). Measured 2026-10-01.
 */

/* Bodoni Moda (variable: opsz 6–96, wght 400–900) and Manrope (variable: wght 200–800).
 * SIL OFL 1.1, latin subset, woff2. Source + hashes in BRIEF.md. */
@font-face {
    font-family: "VH Bodoni";
    src: url("fonts/bodoni-moda-latin-opsz-normal.woff2") format("woff2-variations"), url("fonts/bodoni-moda-latin-opsz-normal.woff2") format("woff2");
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "VH Bodoni";
    src: url("fonts/bodoni-moda-latin-opsz-italic.woff2") format("woff2-variations"), url("fonts/bodoni-moda-latin-opsz-italic.woff2") format("woff2");
    font-weight: 400 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "VH Manrope";
    src: url("fonts/manrope-latin-wght-normal.woff2") format("woff2-variations"), url("fonts/manrope-latin-wght-normal.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ---- colour: grounds ---- */
    --s-chalk: #f6f3ee;            /* page ground A: the arrival panel, residences */
    --s-limestone: #e9e4da;        /* page ground B: the building, the square */
    --s-limestone-deep: #ddd6c9;   /* table zebra, card wells */
    --s-charcoal: #22211f;         /* all text on light grounds; the one dark band */
    --s-charcoal-2: #2c2a27;       /* raised surface inside the dark band */
    --s-bg: #f6f3ee;               /* body background (= chalk) */
    --s-text: #22211f;             /* 14.5:1 chalk, 12.7:1 limestone */
    --s-muted: #625d55;            /* small secondary text: 5.9:1 chalk, 5.2:1 limestone */
    --s-shadow: #6f6a62;           /* the brief's "shadow": 4.85:1 on chalk ONLY: never on limestone */
    --s-bronze: #8a7f5c;           /* olive bronze: rules, dots, wedge, large display numerals */
    --s-bronze-ink: #6e6446;       /* bronze-family text that must pass AA at small size */
    --s-bronze-light: #b3a57a;     /* bronze on the charcoal band: 6.6:1 */
    --s-rule: #22211f24;           /* hairlines on light grounds */
    --s-rule-strong: #22211f66;
    --s-rule-bronze: #8a7f5c;

    /* ---- colour: dark band (viewing) ---- */
    --s-dark: #22211f;
    --s-dark-text: #f6f3ee;        /* 14.5:1 */
    --s-dark-muted: #c9c2b4;       /* 9.6:1 on charcoal */
    --s-dark-rule: #f6f3ee26;
    --s-field-bg: #2c2a27;
    --s-field-border: #f6f3ee4d;
    --s-field-focus: #b3a57a;

    /* ---- colour: availability ---- */
    --s-status-available: #8a7f5c; /* the bronze dot (a dot, not text) */
    --s-status-reserved: #57524b;  /* reserved row text (r5: was #6f6a62 at 4.6:1 on the reserved ground; now 7.0:1 on #f6f3ee, 5.4:1 on limestone-deep) */
    --s-reserved-row: #f6f3ee;     /* reserved rows sit on chalk; available rows on white */
    --s-available-row: #ffffff;
    --s-error: #8c2a1c;            /* form errors on light: 7.4:1 chalk */
    --s-error-dark: #e8a593;       /* form errors on charcoal: 7.9:1 */

    /* ---- colour: plan drawing ---- */
    --s-plan-paper: #e9e4da;       /* limestone sheet */
    --s-plan-wall: #22211f;        /* charcoal walls */
    --s-plan-room: #f6f3ee;        /* room fill */
    --s-plan-room-active: #ffffff; /* the room you are standing in */
    --s-plan-thin: #6f6a62;        /* door swings, window lines, scale bar */
    --s-plan-window: #f6f3ee;      /* glazing gap in the wall */
    --s-plan-outdoor: #8a7f5c;     /* balcony / terrace outline (dashed) */
    --s-plan-label: #22211f;       /* room names */
    --s-plan-dims: #625d55;        /* room dimensions */
    --s-wedge-fill: #8a7f5c38;     /* translucent field of view (22%) */
    --s-wedge-edge: #8a7f5ccc;
    --s-camera-dot: #8a7f5c;
    --s-camera-ring: #f6f3ee;

    /* ---- colour: buttons + focus ---- */
    --s-btn-bg: #22211f;           /* charcoal slab, square corners */
    --s-btn-text: #f6f3ee;
    --s-btn-inset: #8a7f5c;        /* 1px bronze inset rule */
    --s-btn-bg-hover: #3a3833;
    --s-btn-dark-bg: #f6f3ee;      /* the slab inverted on the charcoal band */
    --s-btn-dark-text: #22211f;
    --s-focus: #22211f;
    --s-focus-dark: #f6f3ee;
    --s-focus-w: 2px;
    --s-focus-offset: 3px;

    /* ---- colour: photography support ---- */
    --s-photo-well: #ddd6c9;       /* behind a photo while it decodes */
    --s-edge-fade-from: #f6f3ee00; /* chip-row scroll fade on chalk */
    --s-edge-fade-to: #f6f3ee;

    /* ---- type ---- */
    --s-font-display: "VH Bodoni", "Bodoni 72", Didot, "Times New Roman", serif;
    --s-font-body: "VH Manrope", "Helvetica Neue", Arial, sans-serif;
    --s-weight-display: 400;       /* never bold */
    --s-weight-body: 400;
    --s-weight-label: 500;
    --s-weight-strong: 600;
    --s-opsz-display: 96;          /* Bodoni optical size for headlines */
    --s-opsz-sub: 28;              /* 20–40px Bodoni: room names, captions, prices */
    --s-figures: "tnum" 1, "lnum" 1;   /* EVERY area, floor, price, time, distance */
    --s-figures-display: "lnum" 1;     /* big Bodoni year numerals */

    --s-step-hero: clamp(1.875rem, 1.25rem + 2.2vw, 3.25rem);  /* 30px @390 → 52px @1440: four lines in the 40% column, four on phone */
    --s-step-h2: clamp(2rem, 1.1rem + 3.4vw, 4rem);
    --s-step-h3: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
    --s-step-year: clamp(3.5rem, 2rem + 6vw, 7.5rem);         /* then/now dates */
    --s-step-time: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);    /* time stamp in each step (phone, no motion) */
    --s-step-time-big: clamp(4rem, 1.5rem + 5.4vw, 7.5rem);   /* desktop essay: the hour as the figure on the photograph */
    --s-essay-shade: #22211fb8;    /* charcoal 72% (noon marble measured 3.3:1 at 72%, large-text AA, 2.6:1 at 55%): holds chalk type over the upper photograph */
    --s-essay-shade-h: 42%;
    --s-essay-time-top: clamp(32px, 4vw, 56px);   /* the hour sits inside the frame's top edge, readable the moment the section arrives */
    --s-essay-time-rise: 0.3em;
    --s-essay-rail-w: 3px;
    --s-step-lede: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    --s-step-body: 1rem;
    --s-step-small: 0.875rem;
    --s-step-label: 0.8125rem;     /* labels: sentence case, Manrope 500 */
    --s-step-plate: 0.8125rem;     /* plate captions under photographs */
    --s-plan-label-size: 0.34;     /* plan room names, in METRES (SVG user units) */
    --s-plan-dims-size: 0.26;
    --s-plan-label-size-sm: 0.48;  /* phone: enlarged so plan text renders ≥12px at 390 */
    --s-plan-dims-size-sm: 0.38;

    --s-lh-display: 1.06;
    --s-lh-tight: 1.2;
    --s-lh-body: 1.6;
    --s-track-display: -0.012em;
    --s-track-label: 0.04em;       /* gentle: no shouting micro-labels */
    --s-track-wordmark: 0.18em;    /* VARROW HOUSE wordmark: the one uppercase element */
    --s-measure: 34em;
    --s-measure-hero: 11em;        /* hero headline measure (the 40% column is the real limit) */
    --s-measure-narrow: 26em;      /* building-story columns */

    /* ---- space + grid ---- */
    --s-gutter: clamp(16px, 4.4vw, 72px);
    --s-gap: clamp(16px, 2vw, 32px);
    --s-gap-sm: 12px;
    --s-section: clamp(80px, 11vw, 168px);
    --s-section-sm: clamp(48px, 6vw, 96px);
    --s-cols: 12;
    --s-max: 1440px;
    --s-hero-photo: 60%;           /* desktop arrival: photo takes the right 60% */
    --s-hero-photo-h-sm: 40svh;    /* phone arrival: crop height: 52svh pushed the CTA below 844 once the ribbon wraps */
    --s-nav-h: 64px;
    --s-nav-h-sm: 56px;
    --s-ribbon-h: 34px;            /* measured at 1440 (one line) */
    --s-ribbon-h-sm: 72px;         /* measured at 390: the ribbon wraps to three lines */
    --s-anchor-offset: calc(var(--s-ribbon-h) + var(--s-nav-h) + 16px);
    --s-touch: 44px;
    --s-radius: 0px;               /* square corners everywhere */
    --s-btn-pad-y: 16px;
    --s-btn-pad-x: 28px;
    --s-inset: 1px;                /* bronze inset rule inside the slab */
    --s-rule-w: 1px;
    --s-underline-w: 1px;
    --s-underline-offset: 6px;
    --s-plan-wall-w: 0.12;         /* metres */
    --s-plan-thin-w: 0.035;
    --s-plan-wedge-r: 3.2;         /* wedge radius, metres */
    --s-plan-dot-r: 0.16;
    --s-plan-pad: 0.9;             /* sheet margin round the plan, metres */
    --s-plan-dash: 0.18;           /* balcony / terrace dash, metres */
    --s-dot: 8px;                  /* availability status dot */
    --s-chip-fade: 48px;

    /* ---- breakpoints (CSS writes these in @media; JS reads these tokens) ---- */
    --s-bp-tablet: 48em;           /* 768px */
    --s-bp-desk: 64em;             /* 1024px: split hero, pinned essay, full table */
    --s-bp-wide: 90em;             /* 1440px */

    /* ---- motion ---- */
    --s-ease: cubic-bezier(0.22, 0.61, 0.24, 1);        /* soft settle */
    --s-ease-wedge: cubic-bezier(0.65, 0, 0.35, 1);     /* measured in-out for the wedge */
    --s-ease-reveal: cubic-bezier(0.7, 0, 0.2, 1);      /* clip-path openings */
    --s-dur-fast: 180ms;
    --s-dur: 320ms;
    --s-dur-wedge: 700ms;          /* wedge glide AND the directional photo clip reveal */
    --s-dur-plan-swap: 450ms;      /* residence switcher crossfade */
    --s-dur-reveal: 1100ms;        /* section photo clip reveal on scroll */
    --s-dur-settle: 1800ms;        /* section photo scale settle */
    --s-dur-hero-line: 900ms;
    --s-delay-hero-step: 110ms;
    --s-dur-essay-fade: 600ms;
    --s-dur-row: 240ms;
    --s-hero-rise: 12px;
    --s-scale-settle: 1.04;        /* photos settle FROM this, to 1 */
    --s-scale-hover: 1.02;
    --s-reveal-inset: 18%;         /* clip inset a section photo opens from (its bleed side) */
    --s-essay-steps: 4;            /* pinned for exactly four steps, desktop only */
    --s-head-w: 75%;               /* a section head spans 9 of 12 columns (light essay head, stacked) */
    --s-essay-step-h: 85svh;       /* scroll length per step (≤ one screen) */
    --s-swipe-min: 40;             /* px of horizontal travel that counts as a swipe */
}

/* ---- engineer's block (front-end layout values; same rules: site.css, site.js
 *      and index.php read these, never a literal copy) ---- */
:root {
    /* <picture sizes>, read by index.php (layout widths of each photo slot) */
    --s-sizes-hero: (min-width: 64em) 60vw, 100vw;
    --s-sizes-room: (min-width: 64em) 62vw, 100vw;
    --s-sizes-pair: (min-width: 64em) 50vw, 100vw;
    --s-sizes-tall: (min-width: 64em) 38vw, 100vw;
    --s-sizes-square: (min-width: 64em) 62vw, 100vw;
    --s-sizes-sample: (min-width: 64em) 22vw, (min-width: 48em) 33vw, 100vw;
    /* plan text as a FRACTION of the drawing's rendered width, so a room name
     * renders at the same px on every plan (1 bed to penthouse) at a given width */
    --s-plan-label-frac: 0.036;    /* measured: 12.8px on the 356px phone plan */
    --s-plan-dims-frac: 0.034;   /* measured: 12.1px on the 356px phone plan */
    --s-plan-label-frac-tab: 0.02;
    --s-plan-dims-frac-tab: 0.017;
    --s-plan-label-frac-desk: 0.025;
    --s-plan-dims-frac-desk: 0.023;
    --s-plan-label-px: 12.8;       /* with JS, plan text is held at these rendered px on every plan at every width */
    --s-plan-dims-px: 12.2;
    --s-plan-tag-frac: 0.03;       /* north / scale / entrance tags */
    --s-plan-narrow: 2.8;          /* rooms narrower than this (m) and taller than wide set their label vertically */
    --s-col-max: calc((var(--s-max) - 2 * var(--s-gutter) - 11 * var(--s-gap)) / 12);
    --s-anchor: calc(var(--s-nav-h-sm) + var(--s-gap-sm));   /* sticky nav only: the ribbon scrolls away */
    --s-anchor-desk: calc(var(--s-nav-h) + var(--s-gap));
    --s-stage-h: calc(100svh - var(--s-nav-h) - 2 * var(--s-gap));
    --s-hero-min-h: 560px;         /* desktop arrival never shorter than this (short laptop windows) */
    --s-panel-pad: clamp(16px, 3vw, 40px);
    --s-card-gap: 10px;
    --s-year-gap: 8px;
    --s-nav-link-gap: clamp(16px, 2vw, 32px);
    --s-menu-shadow: 0 18px 30px -24px var(--s-charcoal);
    --s-z-nav: 900;
    --s-z-stage: 2;
    --s-opacity-off: 0;
    --s-opacity-dim: 0.55;
    --s-lh-none: 1;                /* single-line figures and the wordmark */
    --s-measure-h2: 15em;
    --s-viewcap-min: 14em;         /* caption wraps under the stepper below this */
    --s-room-min: 14em;            /* room buttons, tablet grid */
    --s-plan-max-tab: 36em;        /* tablet: the plan never wider than this */
    --s-rows-initial: 12;          /* desktop availability: table rows shown before the Show-all button (no inner scroll) */
    --s-more-min: 20rem;           /* desktop Show-all slab width */
    --s-opsz-figures: 10;          /* Bodoni figures (times, years, home numbers, prices): a low optical size keeps the 4's hairline visible at 1x */
    --s-cards-initial: 8;          /* phone availability: cards shown before the Show-all button */
    --s-tab-cols-sm: 2;            /* phone residence tabs: 2 x 2 inside the gutter */
    --s-sq-cap-h: 4rem;            /* square caption + breathing room under the sticky photo */
    --s-sq-focus: 55% 55%;         /* the plane-tree trunk */
    --s-sample-wide: 3 / 2;        /* phone sample board: brass runs full width under the 2-up row */
    --s-sample-wide-focus: 50% 58%;   /* brass at 3:2: keep the lever's lower finial in frame */
    --s-res-stage-h: clamp(22rem, 100svh - 22rem, 46rem);   /* desktop instrument photo: band + room row + caption fit one screen under the nav */
    --s-res-plan-h: clamp(15rem, 100svh - 28rem, 40rem);    /* desktop plan drawing height cap (same screen budget) */
    --s-stage-max-tab: 82svh;      /* tablet: a 4:5 photo never taller than the screen */
    --s-reveal-threshold: 0.15;    /* share of a photo visible before it opens */
    --s-essay-margin: -45% 0px -45% 0px;   /* the light essay switches step at the viewport's centre line */
    --s-spy-margin: -40% 0px -55% 0px;     /* nav highlights the section crossing 40% of the viewport */
}