/* Self-hosted fonts (SIL Open Font License; latin subsets, variable weight). No third-party request. */
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/manrope.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 400;font-display:swap;src:url(fonts/fraunces.woff2) format("woff2")}
/* 2335sunset.com — Design System v1.0 (approved 2026-09-20). Cream / sand / stone grounds, one warm graphite, one ocean
   accent, bronze for provenance. Fraunces for every h1 and display moment; Manrope for everything structural (600 max).
   The token block below is a verbatim mirror of design-system/tokens.css (tests/test_tokens.py keeps them identical);
   the legacy names that follow it alias onto the tokens so older rules keep resolving. */

/* ==== TOKENS (mirror of design-system/tokens.css — do not edit here; edit tokens.css and paste) ==== */
/* 2335sunset.com — Design tokens v1.0 (2026-09-20, for review)
   The single source for color, type, spacing, radius, shadow, border and breakpoints.
   Naming: --{group}-{role}[-{state}]. Roles, not appearances: a component asks for
   --color-text-muted, never for "#605B54". Breakpoints cannot be var()'d in media
   queries; they are listed here as the record and used as literals in style.css. */

:root {
  /* ---------- Color: grounds ---------- */
  --color-cream:        #F6F3ED;   /* page ground */
  --color-warm-white:   #FCFAF6;   /* cards, fields, floating panels */
  --color-sand:         #EDE7DB;   /* alternating sections, hover fills */
  --color-stone:        #E2DACB;   /* inset panels, tab rails, disabled fills */
  --color-graphite:     #2A2622;   /* ink AND dark sections — one charcoal, warm */
  --color-deep:         #1C1917;   /* image overlays, lightbox, video wells */

  /* ---------- Color: text ---------- */
  --color-text:         #2A2622;   /* headings, body on light — 13.6:1 on cream */
  --color-text-2:       #4B4744;   /* running prose, secondary — 8.3:1 */
  --color-text-muted:   #605B54;   /* captions, labels, helper — 6.1:1 cream, 4.8:1 stone */
  --color-text-on-dark: #FFFFFF;
  --color-text-on-dark-2: rgba(255,255,255,.78);  /* prose on graphite — 8.4:1 */
  --color-text-on-dark-muted: rgba(255,255,255,.62); /* captions on graphite — 5.4:1 */

  /* ---------- Color: accent (Ocean) ---------- */
  --color-accent:       #5B7280;   /* the one accent: dots, rules, focus, markers */
  --color-accent-ink:   #40515C;   /* accent used AS TEXT (eyebrows, links) — 7.4:1 */
  --color-accent-hover: #4F6572;   /* primary button hover, link hover */
  --color-accent-tint:  #E6EBEE;   /* selected/active fills on light */

  /* ---------- Color: provenance (Bronze) ---------- */
  --color-bronze:       #765B3B;   /* dates, "artist's rendering", material captions — 5.7:1 */
  --color-bronze-tint:  #F1EBE1;   /* callout fill behind bronze text */

  /* ---------- Color: lines ---------- */
  --color-line:         #D9D2C5;   /* default divider / border on cream & sand */
  --color-line-strong:  #B9AE9D;   /* taupe: emphasised rule, disabled text on light (non-text use) */
  --color-line-on-dark: rgba(255,255,255,.22);
  --color-line-on-dark-strong: rgba(255,255,255,.45);

  /* ---------- Color: semantic (forms only; never decorative) ---------- */
  --color-success:      #4E6B4C;
  --color-error:        #8A4A3C;
  --color-error-tint:   #F4E9E5;

  /* ---------- Color: image overlays ---------- */
  --overlay-hero:  linear-gradient(to top, rgba(28,25,23,.62) 0, rgba(28,25,23,.18) 38%, rgba(28,25,23,0) 62%);
  --overlay-side:  linear-gradient(to right, rgba(28,25,23,.28) 0, rgba(28,25,23,0) 45%);
  --overlay-label: linear-gradient(to top, rgba(28,25,23,.55), rgba(28,25,23,0));
  --overlay-glass: rgba(252,250,246,.92);

  /* ---------- Typography ---------- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans:    "Manrope", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Sizes — desktop value, mobile in the comment; fluid steps use clamp() */
  --text-display-xl: clamp(2.75rem, 5.6vw, 4.5rem);   /* 72 / 44 — hero only */
  --text-display-l:  clamp(2.25rem, 3.8vw, 3rem);     /* 48 / 36 — page titles (h1) */
  --text-h2:         clamp(1.75rem, 2.8vw, 2.25rem);  /* 36 / 28 — section headings */
  --text-h3:         clamp(1.25rem, 1.6vw, 1.375rem); /* 22 / 20 */
  --text-h4:         1.125rem;                        /* 18 / 17 */
  --text-lede:       clamp(1.125rem, 1.5vw, 1.25rem); /* 20 / 18 */
  --text-body:       1rem;                            /* 16 — UI and short copy */
  --text-prose:      1.0625rem;                       /* 17 — long reading */
  --text-body-s:     0.9375rem;                       /* 15 — card text, spec rows, nav */
  --text-caption:    0.8125rem;                       /* 13 */
  --text-label:      0.75rem;                         /* 12 — eyebrows, uppercase */
  --text-micro:      0.6875rem;                       /* 11 — stat labels, badges */
  --text-stat:       clamp(1.5rem, 2vw, 1.75rem);     /* 28 / 24 — numbers */

  --leading-display: 1.02;
  --leading-tight:   1.12;
  --leading-heading: 1.25;
  --leading-body:    1.65;
  --leading-prose:   1.7;
  --leading-caption: 1.45;

  --tracking-display: -0.01em;
  --tracking-heading: -0.015em;
  --tracking-label:    0.12em;
  --tracking-micro:    0.08em;
  --tracking-button:   0.01em;

  --weight-display: 300;
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;   /* the heaviest weight on the site */

  --measure-prose: 66ch;
  --measure-lede:  56ch;
  --measure-short: 44ch;

  /* ---------- Spacing (4-pt scale) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* Fluid layout spacing */
  --gutter:          clamp(20px, 4vw, 40px);   /* page side margin */
  --section:         clamp(48px, 6vw, 88px);   /* vertical padding of a section */
  --section-tight:   clamp(24px, 3vw, 40px);
  --stack:           clamp(20px, 3vw, 32px);   /* heading → content */
  --gap-grid:        clamp(16px, 2vw, 24px);   /* column / card gap */
  --gap-section:     clamp(24px, 4vw, 56px);   /* gap between the two halves of a section (prose | image) */
  --gap-gallery:     clamp(12px, 2vw, 24px);
  --card-pad:        clamp(16px, 2vw, 24px);
  --card-pad-l:      clamp(24px, 3vw, 36px);
  --max-content:     1240px;
  --max-prose:       66ch;
  --header-h:        72px;
  --touch-min:       44px;

  /* ---------- Radius ---------- */
  --radius-0:    0;      /* floor plans, drawings, logos */
  --radius-xs:   4px;    /* focus ring, inline code, tooltips */
  --radius-s:    8px;    /* small images, fields, thumbnails */
  --radius-m:    12px;   /* cards, images, panels — the default */
  --radius-l:    16px;   /* large floating panels, download block */
  --radius-pill: 999px;  /* buttons, tabs, badges, nav items */

  /* ---------- Shadow (warm, low, never gray) ---------- */
  --shadow-s:  0 1px 2px rgba(28,25,23,.06), 0 4px 12px -6px rgba(28,25,23,.12);
  --shadow-m:  0 12px 28px -16px rgba(28,25,23,.28);
  --shadow-l:  0 24px 48px -24px rgba(28,25,23,.40);
  --shadow-float: 0 24px 50px -28px rgba(28,25,23,.50);  /* panels sitting on imagery */

  /* ---------- Borders ---------- */
  --border:        1px solid var(--color-line);
  --border-strong: 1px solid var(--color-line-strong);
  --border-ink:    1px solid var(--color-graphite);
  --border-on-dark:1px solid var(--color-line-on-dark);
  --rule-accent:   2px solid var(--color-accent);

  /* ---------- Motion ---------- */
  --ease:       cubic-bezier(.2,.7,.2,1);
  --dur-fast:   .18s;
  --dur:        .25s;
  --dur-slow:   .5s;

  /* ---------- Breakpoints (record only; use the literal in @media) ----------
     --bp-xs: 480px   phones landscape / large phones
     --bp-sm: 720px   tablet portrait — two columns collapse to one
     --bp-md: 960px   tablet landscape / small laptop — nav collapses
     --bp-lg: 1200px  laptop — full grid, max-content reached
     --bp-xl: 1440px  large desktop — content stays 1240; imagery may bleed */
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0s; --dur: 0s; --dur-slow: 0s; }
}
/* ==== END TOKENS ==== */

/* Legacy names → tokens (older rules and site.js selectors keep resolving) */
:root{
  --bg:var(--color-cream);--bg2:var(--color-sand);--bg3:var(--color-stone);
  --ink:var(--color-graphite);--ink2:var(--color-text-2);--muted:var(--color-text-muted);
  --line:var(--color-line);--accent:var(--color-accent);--accent-ink:var(--color-accent-ink);--bronze:var(--color-bronze);
  --card:var(--color-warm-white);--r:var(--radius-m);--r-sm:var(--radius-s);--max:var(--max-content);
  --sans:var(--font-sans);--serif:var(--font-display);--head-h:var(--header-h);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
body{margin:0;background:var(--color-cream);color:var(--color-text);font:var(--text-body)/var(--leading-body) var(--font-sans);overflow-x:hidden;font-weight:400}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0 0 .5em;text-wrap:balance}
h1{font-family:var(--font-display);font-weight:300;font-size:var(--text-display-l);line-height:1.06;letter-spacing:var(--tracking-display)}
h2{font-weight:300;font-size:var(--text-h2);line-height:var(--leading-tight);letter-spacing:var(--tracking-heading)}
h3{font-weight:500;font-size:var(--text-h3);line-height:var(--leading-heading);letter-spacing:0}
p{margin:0 0 1em}
.wrap{max-width:var(--max-content);margin:0 auto;padding:0 var(--gutter)}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:var(--radius-xs)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--color-graphite);color:#fff;padding:8px 14px;border-radius:var(--radius-pill);z-index:100}
.skip:focus{left:8px}
.eyebrow{font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--color-accent-ink);font-weight:600;margin:0 0 .9em}
.eyebrow.light{color:rgba(255,255,255,.85)}
.lede{font-size:var(--text-lede);line-height:1.5;max-width:var(--measure-lede);color:var(--color-text-2);font-weight:400}
.sec-text{max-width:58ch;color:var(--color-text-2);font-size:var(--text-body)}
.textlink{color:var(--color-accent-ink);text-decoration:none;font-weight:600;border-bottom:1px solid transparent;transition:border-color var(--dur) var(--ease)}
.textlink:hover{border-bottom-color:var(--color-accent)}

/* ---- header ---- */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--header-h);padding:0 var(--gutter);
  position:sticky;top:0;z-index:20;background:rgba(246,243,237,.86);backdrop-filter:saturate(1.2) blur(12px);-webkit-backdrop-filter:saturate(1.2) blur(12px);
  border-bottom:1px solid transparent;transition:border-color var(--dur) var(--ease)}
.site-header.scrolled{border-bottom-color:var(--color-line)}
.wordmark{text-decoration:none;display:flex;flex-direction:column;line-height:1.05;gap:3px}
.wm-line{font-family:var(--font-display);font-weight:300;font-size:1.3rem;letter-spacing:var(--tracking-display)}
.wm-sub{font-size:var(--text-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--color-bronze);font-weight:500}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;align-items:center}
.site-nav a{text-decoration:none;font-size:var(--text-body-s);font-weight:500;padding:10px 14px;min-height:40px;display:inline-flex;align-items:center;border-radius:var(--radius-pill);white-space:nowrap;color:var(--color-text-2);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.site-nav a:hover{background:var(--color-sand);color:var(--color-text)}
.site-nav a[aria-current="page"]{color:var(--color-text);background:var(--color-sand)}
.site-nav .nav-cta a{background:var(--color-graphite);color:#fff;margin-left:8px;font-weight:600;padding:11px 20px}
.site-nav .nav-cta a:hover,.site-nav .nav-cta a[aria-current="page"]{background:var(--color-accent-hover);color:#fff}
.nav-toggle{display:none;position:relative;width:44px;height:44px;background:none;border:1px solid var(--color-line);border-radius:var(--radius-pill);cursor:pointer;transition:border-color var(--dur) var(--ease)}
.nav-toggle-bar,.nav-toggle-bar::before,.nav-toggle-bar::after{position:absolute;left:12px;width:18px;height:1.5px;background:var(--color-text);border-radius:2px;content:"";transition:transform var(--dur) var(--ease),opacity var(--dur-fast)}
.nav-toggle-bar{top:21px}.nav-toggle-bar::before{left:0;top:-6px}.nav-toggle-bar::after{left:0;top:6px}
.site-nav.open .nav-toggle{border-color:var(--color-graphite)}
.site-nav.open .nav-toggle-bar{background:transparent}
.site-nav.open .nav-toggle-bar::before{transform:translateY(6px) rotate(45deg)}
.site-nav.open .nav-toggle-bar::after{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:960px){
  .nav-toggle{display:block}
  .site-nav ul{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:2px;align-items:stretch;background:var(--color-cream);border-bottom:1px solid var(--color-line);padding:8px var(--gutter) 18px;box-shadow:var(--shadow-m)}
  .site-nav.open ul{display:flex}
  .site-nav a{display:flex;min-height:48px;padding:0 14px;font-size:1.0625rem;border-radius:var(--radius-s)}
  .site-nav .nav-cta a{margin:10px 0 0;justify-content:center;border-radius:var(--radius-pill);min-height:40px;padding:11px 20px}
}
html.nav-open,html.nav-open body{overflow:hidden}  /* the phone menu is open: the page behind it stays put */
@media(max-width:720px){:root{--header-h:64px}}

/* ---- hero ---- */
.hero{padding:0;position:relative;display:grid;grid-template-columns:1fr;min-height:min(86vh,880px);isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--color-deep)}
.hero-media picture,.hero-media video{position:absolute;inset:0}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--overlay-hero),var(--overlay-side)}
.hero-copy{align-self:end;padding:0 var(--gutter) clamp(28px,4.5vw,56px);color:#fff;max-width:640px;text-shadow:0 1px 18px rgba(0,0,0,.35)}
.hero-copy h1{font-size:var(--text-display-xl);margin-bottom:.25em;color:#fff;line-height:var(--leading-display)}
.hero-copy .lede{color:rgba(255,255,255,.92);max-width:var(--measure-short);margin-bottom:1.3em}
.explore{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:500;font-size:var(--text-body-s);padding:10px 0;border-bottom:1px solid var(--color-line-on-dark-strong);transition:border-color var(--dur) var(--ease)}
.explore:hover{border-bottom-color:#fff}
.explore span{transition:transform var(--dur-slow) var(--ease);display:inline-block}.explore:hover span{transform:translateY(3px)}
.disclosure-badge{position:absolute;z-index:1;right:14px;top:14px;font-size:var(--text-micro);color:#fff;background:rgba(28,25,23,.5);padding:6px 10px;border-radius:var(--radius-pill);letter-spacing:.02em;backdrop-filter:blur(6px)}
.prop-card{position:absolute;right:var(--gutter);bottom:clamp(28px,4.5vw,56px);width:min(340px,calc(100% - 40px));
  background:var(--overlay-glass);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-radius:var(--radius-m);padding:16px 18px 18px;box-shadow:var(--shadow-float);border:1px solid rgba(255,255,255,.6)}
.prop-card .status{font-size:var(--text-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--color-bronze);font-weight:600;margin:0 0 10px}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin:0 0 14px}
.facts dt{font-size:1.15rem;font-weight:500;letter-spacing:-.01em;line-height:1.1;font-variant-numeric:tabular-nums}
.facts dd{margin:2px 0 0;font-size:var(--text-micro);color:var(--color-text-muted);letter-spacing:var(--tracking-micro);text-transform:uppercase}
.prop-card .card-note{font-size:var(--text-caption);color:var(--color-text-2);margin:0 0 10px}
.prop-card .cta{display:flex;width:100%;text-align:center;padding:11px 20px;min-height:40px;white-space:nowrap}
.hero-caption{display:none}  /* phones only: the disclosure moves off the picture into a caption, as on every other page */
@media(max-width:960px){
  .hero{min-height:0;grid-template-rows:auto auto auto;background:var(--color-cream)}
  .hero-media{position:relative;inset:auto;z-index:0;aspect-ratio:4/5;max-height:78vh;border-radius:0 0 var(--radius-m) var(--radius-m)}
  .hero-media picture{position:absolute;inset:0}
  .hero-media img{object-position:50% 50%}
  .hero-media::after{background:linear-gradient(to top,rgba(28,25,23,.28) 0,rgba(28,25,23,0) 40%)}
  .hero-copy{color:var(--color-text);text-shadow:none;padding:26px var(--gutter) 8px;max-width:none}
  .hero-copy h1{color:var(--color-text);font-size:clamp(2.3rem,9.5vw,3.2rem)}
  .hero-copy .eyebrow.light{color:var(--color-accent-ink)}
  .hero-copy .lede{color:var(--color-text-2)}
  .explore{color:var(--color-text);border-bottom-color:var(--color-line)}
  .explore:hover{border-bottom-color:var(--color-graphite)}
  .prop-card{position:static;width:auto;margin:6px var(--gutter) 40px;background:var(--color-warm-white);box-shadow:var(--shadow-m)}
  .disclosure-badge{display:none}
  .hero-caption{display:block;font-size:var(--text-caption);color:var(--color-text-muted);padding:8px var(--gutter) 0;line-height:var(--leading-caption);margin:0}
  .hero-caption .disclosure{color:var(--color-bronze)}
}
@media(max-width:960px) and (min-width:480px){.hero-media{aspect-ratio:4/3}}

/* ---- buttons: L (default) · .m · .s; primary (default) · .ghost-dark (secondary) · .light (primary on dark) ---- */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--color-graphite);color:#fff;text-decoration:none;padding:14px 24px;min-height:var(--touch-min);border-radius:var(--radius-pill);font-weight:600;font-size:var(--text-body-s);line-height:1;letter-spacing:var(--tracking-button);border:1px solid var(--color-graphite);cursor:pointer;font-family:inherit;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.cta:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover)}
.cta:active{background:var(--color-accent-ink);border-color:var(--color-accent-ink);transform:translateY(1px)}
.cta[disabled],.cta.disabled{background:var(--color-stone);color:var(--color-line-strong);border-color:var(--color-stone);cursor:not-allowed;transform:none}
.cta.m{padding:11px 20px;min-height:40px}
.cta.s{padding:7px 14px;min-height:32px;font-size:.8125rem}
.cta.ghost-dark{background:transparent;color:var(--color-text);border-color:var(--color-graphite)}
.cta.ghost-dark:hover{background:var(--color-sand);border-color:var(--color-graphite)}
.cta.ghost-dark:active{background:var(--color-stone)}
.cta.light{background:#fff;color:var(--color-text);border-color:#fff}
.cta.light:hover{background:var(--color-sand);border-color:var(--color-sand);color:var(--color-text)}
.cta.light:active{background:var(--color-stone);border-color:var(--color-stone)}

/* ---- figures ---- */
figure{margin:0}
figure img{border-radius:var(--radius-m);width:100%}
figcaption{font-size:var(--text-caption);color:var(--color-text-muted);padding:8px 2px 0;line-height:var(--leading-caption)}
figcaption .disclosure,figcaption .kind{color:var(--color-bronze)}
figcaption .kind::before{content:"· "}
figure[data-full]{cursor:zoom-in}
figure[data-full] img{transition:transform var(--dur-slow) var(--ease),filter var(--dur) var(--ease)}
@media(hover:hover){figure[data-full]:hover img{filter:brightness(1.03)}}
figure[data-full]:focus-visible{outline-offset:4px}

/* ---- sections ---- */
section{padding:var(--section) 0}
[id]{scroll-margin-top:calc(var(--header-h) + 12px)}
.section-tight{padding:var(--section-tight) 0}
.page-head{padding:var(--section-tight) 0 var(--space-4)}
.page-head h1{margin:0;max-width:20ch}
.page-head .eyebrow{margin-bottom:.4em}
.page-head .prose,.page-head .lede{margin-top:.8em}
.page-head-row{display:grid;grid-template-columns:auto 1fr;gap:12px var(--gap-section);align-items:end}
.page-intro{margin:0;max-width:64ch;color:var(--color-text-2);font-size:var(--text-body);line-height:1.55;justify-self:end}
.page-intro p{margin:0}
@media(max-width:720px){.page-head-row{grid-template-columns:1fr;gap:8px}.page-intro{justify-self:start}}
.sec-sub{padding:var(--section-tight) 0}
.sub-head{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;margin-bottom:var(--space-4)}
.sub-head h2{font-size:var(--text-h3);font-weight:500;letter-spacing:0;line-height:var(--leading-heading);margin:0}.sub-head p{margin:0;color:var(--color-text-muted)}
.sec-prose{padding:var(--section-tight) 0 var(--space-5)}
.fig-lead-page img{aspect-ratio:21/9;max-height:calc(100vh - 250px);min-height:280px;object-fit:cover}
.sec-head{max-width:760px;margin-bottom:var(--stack)}
.sec-head h2{margin-bottom:0}
.sec-foot{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--space-6);align-items:start;margin-top:var(--stack)}
@media(max-width:720px){.sec-foot{grid-template-columns:1fr;gap:var(--space-4)}}
.fig-wide img{aspect-ratio:16/9;object-fit:cover;object-position:50% 45%}
@media(max-width:720px){.fig-wide img{aspect-ratio:4/3}}
.mini-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0;padding-top:6px;border-top:1px solid var(--color-line)}
.mini-facts div{padding-top:14px}
.mini-facts dt{font-size:var(--text-stat);font-weight:300;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mini-facts dd{margin:4px 0 0;font-size:var(--text-micro);color:var(--color-text-muted);letter-spacing:var(--tracking-micro);text-transform:uppercase}

/* kitchen: big image + narrow column with two sample details */
.sec-pair{background:var(--color-sand)}
.pair-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:var(--gap-section);align-items:start}
.fig-main img{aspect-ratio:4/3;object-fit:cover}
.pair-side h2{font-size:var(--text-h2)}
.detail-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-top:var(--space-5)}
.fig-detail img{aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius-s)}
.fig-detail figcaption{font-size:var(--text-caption)}
@media(max-width:960px){.pair-grid{grid-template-columns:1fr}.pair-side{padding-top:8px}}

/* roof deck: graphite immersive section; the documented view photograph overlaps the rendering as a layered card */
.sec-deck.dark{background:var(--color-graphite);color:#fff;padding-bottom:clamp(64px,8vw,110px)}
.sec-deck.dark .eyebrow{color:var(--color-text-on-dark-muted)}
.sec-deck.dark h2{color:#fff}.sec-deck.dark .sec-text{color:var(--color-text-on-dark-2)}
.deck-head{display:grid;grid-template-columns:1.2fr 1fr;gap:16px var(--gap-section);align-items:end;margin-bottom:var(--stack)}
.deck-head .eyebrow{grid-column:1/-1;margin-bottom:0}.deck-head h2{margin:0}.deck-head .sec-text{margin:0;max-width:var(--measure-short)}
h2.display{font-family:var(--font-display);font-weight:300;font-size:clamp(1.9rem,3.6vw,3rem);letter-spacing:var(--tracking-display);line-height:1.05}
.deck-layer{position:relative}
.fig-deck img{aspect-ratio:21/9;object-fit:cover}
.fig-deck figcaption,.sec-deck.dark figcaption{color:var(--color-text-on-dark-muted)}.sec-deck.dark figcaption .disclosure,.sec-deck.dark figcaption .kind{color:var(--color-text-on-dark-muted)}
.deck-doc{position:absolute;right:clamp(18px,3vw,40px);bottom:-46px;width:min(380px,38%);background:var(--color-warm-white);color:var(--color-text);padding:10px;border-radius:var(--radius-m);
  box-shadow:var(--shadow-float)}
.deck-doc img{border-radius:var(--radius-s)}.deck-doc figcaption{color:var(--color-text-muted);padding:6px 4px 0}
.deck-doc .doc-text{margin:0;padding:8px 4px 4px;font-size:var(--text-caption);color:var(--color-text-2);line-height:var(--leading-caption)}
.deck-doc .doc-text .eyebrow{display:block;margin:0 0 4px;font-size:var(--text-micro)}
.fig-doc img{aspect-ratio:auto}  /* the view photo is pre-cropped panoramic; show it whole */
@media(max-width:960px){.sec-deck.dark{padding-bottom:var(--section)}.deck-head{grid-template-columns:1fr}.deck-doc{position:static;width:auto;margin-top:14px}}

/* suite: one lead image with text, side column of two flexible rooms shown two ways */
.suite-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--gap-section);align-items:start}
.fig-lead img{aspect-ratio:3/2;object-fit:cover}
.suite-lead .sec-text{margin-top:var(--space-4)}
.flex-room+.flex-room{margin-top:var(--space-6);padding-top:var(--space-6);border-top:1px solid var(--color-line)}
.flex-imgs{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-bottom:var(--space-3)}
.fig-sm img{aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-s)}
.fig-sm figcaption{font-size:var(--text-caption)}
.flex-room h3{margin-bottom:.3em}.flex-room p{color:var(--color-text-2);font-size:var(--text-body-s);margin:0}
@media(max-width:960px){.suite-grid{grid-template-columns:1fr}}

/* location + build story */
.sec-story{background:var(--color-sand)}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-section)}
.story-col h2{font-size:var(--text-h2)}
.dist-list{list-style:none;padding:0;margin:0 0 18px;border-top:1px solid var(--color-line)}
.dist-list li{display:flex;gap:14px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--color-line);font-size:var(--text-body-s);color:var(--color-text-2)}
.dist-list strong{font-weight:500;color:var(--color-text);min-width:4.5em}
.fig-journal{margin:6px 0 18px}
.fig-journal img{aspect-ratio:16/9;object-fit:cover}
@media(max-width:720px){.story-grid{grid-template-columns:1fr}}

/* ---- inquiry ---- */
.inquire{background:var(--color-graphite);color:#fff;padding:var(--section) 0}
.inquire-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--gap-section);align-items:center}
.inq-figure img{aspect-ratio:4/5;object-fit:cover}
.inquire h1{margin:0 0 .35em;color:#fff}
.inquire.inquire-page{background:var(--color-cream);color:var(--color-text);padding:var(--section-tight) 0 var(--section)}
.inquire.inquire-page .inquire-grid{align-items:start}
.inquire.inquire-page .eyebrow{color:var(--color-accent-ink)}.inquire.inquire-page h1,.inquire.inquire-page h2{color:var(--color-text)}
.inquire.inquire-page .inq-text{color:var(--color-text-2)}
.inquire.inquire-page .inq-figure img{max-height:calc(100vh - 140px);min-height:320px}
.inquire.inquire-page .inq-figure figcaption,.inquire.inquire-page .inq-figure figcaption .disclosure{color:var(--color-text-muted)}
.inquire.inquire-page .inq-figure figcaption .disclosure{color:var(--color-bronze)}
.inquire.inquire-page .form-grid label{color:var(--color-text-2)}.inquire.inquire-page .form-grid .opt{color:var(--color-text-muted)}
.inquire.inquire-page .form-grid input[type=text],.inquire.inquire-page .form-grid input[type=email],.inquire.inquire-page .form-grid input[type=tel],.inquire.inquire-page .form-grid textarea{
  color:var(--color-text);background:var(--color-warm-white);border-color:var(--color-line)}
.inquire.inquire-page .form-grid input:hover,.inquire.inquire-page .form-grid textarea:hover{border-color:var(--color-line-strong)}
.inquire.inquire-page .form-grid input:focus,.inquire.inquire-page .form-grid textarea:focus{border-color:var(--color-accent);background:var(--color-warm-white);box-shadow:0 0 0 3px var(--color-accent-tint)}
.inquire.inquire-page .form-grid label.check input{accent-color:var(--color-graphite)}
.inquire.inquire-page .form-foot .cta{background:var(--color-graphite);color:#fff;border-color:var(--color-graphite)}.inquire.inquire-page .form-foot .cta:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover)}
.inquire.inquire-page .form-foot .cta:focus-visible{outline-color:var(--color-accent)}
.inquire.inquire-page .form-note{color:var(--color-text-muted)}
.inquire.inquire-page .inq-channels{color:var(--color-text-2)}.inquire.inquire-page .inq-channels a{color:var(--color-text);border-bottom-color:var(--color-line)}
.inquire.inquire-page .form-pending{background:var(--color-sand);border-color:var(--color-line)}.inquire.inquire-page .form-pending a{color:var(--color-text)}
.inq-figure figcaption{color:var(--color-text-on-dark-muted)}
.inq-figure figcaption .disclosure,.inq-figure figcaption .kind{color:var(--color-text-on-dark-muted)}
.inquire h2{font-family:var(--font-display);font-weight:300;color:#fff;font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:var(--tracking-display);line-height:1.08}
.inquire .eyebrow{color:rgba(255,255,255,.7)}
.inq-text{color:var(--color-text-on-dark-2);max-width:52ch;margin-bottom:.6em}
.inq-channels{color:var(--color-text-on-dark-2);font-size:var(--text-body-s);margin:18px 0 0}
.inq-channels a{color:#fff;text-decoration:none;border-bottom:1px solid var(--color-line-on-dark-strong)}
.inq-channels a:hover{border-bottom-color:#fff}
@media(max-width:720px){.inquire-grid{grid-template-columns:1fr}.inq-figure img{aspect-ratio:4/3;max-height:none}.inquire.inquire-page .inq-figure img{max-height:none;min-height:0}}

/* form */
form.interest{margin-top:6px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.form-grid label{display:block;font-size:var(--text-caption);color:var(--color-text-on-dark-2);font-weight:500;letter-spacing:.02em}
.form-grid label.full{grid-column:1/-1}
.form-grid .opt{color:rgba(255,255,255,.5);font-weight:400}
.form-grid input[type=text],.form-grid input[type=email],.form-grid input[type=tel],.form-grid textarea{
  display:block;width:100%;margin-top:6px;padding:12px 14px;min-height:var(--touch-min);font:inherit;font-size:1rem;color:#fff;background:rgba(255,255,255,.08);
  border:1px solid var(--color-line-on-dark);border-radius:var(--radius-s);transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.form-grid input:hover,.form-grid textarea:hover{border-color:var(--color-line-on-dark-strong)}
.form-grid input:focus,.form-grid textarea:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.12)}
.form-grid textarea{resize:vertical;min-height:96px}
.form-grid label.check{display:flex;align-items:center;gap:10px;align-self:end;padding-bottom:12px;cursor:pointer;min-height:var(--touch-min)}
.form-grid label.check input{width:20px;height:20px;accent-color:#fff;margin:0}
.hp{position:absolute;left:-9999px;opacity:0}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:20px}
.form-foot .cta{background:#fff;color:var(--color-text);border-color:#fff;padding:11px 20px;min-height:40px}
.form-foot .cta:hover{background:var(--color-sand);border-color:var(--color-sand)}
.form-foot .cta:active{background:var(--color-stone);border-color:var(--color-stone)}
.form-foot .cta:focus-visible{outline-color:#fff}
.form-note{font-size:var(--text-caption);color:var(--color-text-on-dark-muted);margin:0;max-width:34ch}
.form-pending{background:rgba(255,255,255,.08);border:1px solid var(--color-line-on-dark);border-radius:var(--radius-s);padding:16px 18px}
.form-pending a{color:#fff}
@media(max-width:960px){.form-grid{grid-template-columns:1fr}.form-grid label.check{padding-bottom:0}}

/* ---- The Residence ---- */
.prose{max-width:var(--max-prose);font-size:var(--text-prose);line-height:var(--leading-prose);color:var(--color-text-2);text-wrap:pretty}
.prose h2{margin-top:1.8em;color:var(--color-text)}.prose h2:first-child{margin-top:0}
.prose ul{padding-left:1.2em}.prose li{margin-bottom:.35em}
.prose.with-sides{max-width:104ch}.prose.with-sides h2{clear:both}
.prose .side{float:right;width:40%;margin:.5em 0 1.2em 40px}.prose .side figure{margin:0}
@media(max-width:720px){.prose .side{float:none;width:100%;margin:12px 0 22px}}
.plan-link{display:block;text-decoration:none;color:inherit;margin:6px auto 28px;max-width:900px;clear:both;text-align:center}  /* centred on the page, outside the prose column */
.plan-link figcaption{text-align:left}
.plan-link img{border-radius:var(--radius-m);border:1px solid var(--color-line);background:#fff}
.plan-3d img{background:transparent;padding:0;border:0;border-radius:0}
.plan-peel{--roll:calc(22px + var(--p)*30px);transition:--p 1.3s cubic-bezier(.6,0,.3,1)}
.peel{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent;outline-offset:8px;border-radius:var(--radius-m)}
.peel:focus-visible{outline:2px solid var(--color-accent)}
.peel-base img,.peel-sheet img{display:block;width:100%;height:auto}
.peel-sheet{position:absolute;inset:0;clip-path:inset(0 calc(var(--p)*100%) 0 0)}  /* stapled on the left: the sheet rolls back from the right edge */
.peel-roll{position:absolute;top:-1.5%;bottom:-1.5%;width:var(--roll);left:calc((1 - var(--p))*(100% - var(--roll)));pointer-events:none;
  opacity:clamp(0,var(--p)*12,1);border-radius:999px;background-color:#ece7dd;background-size:auto 103%;background-position:calc((1 - var(--p))*100%) center;
  box-shadow:-10px 0 18px -4px rgba(0,0,0,.38),-2px 0 4px rgba(0,0,0,.18)}
.peel-roll::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,.14) 34%,rgba(255,255,255,.08) 68%,rgba(255,255,255,.7))}
.plan-peel .peel-hint{display:inline-block;color:var(--color-accent-ink);font-weight:600}
@media(hover:none){.plan-peel .peel-hint{font-weight:600}}
html:not(.js) .peel-roll,html:not(.js) .peel-hint{display:none}
.plan-link .plan-more{display:inline-block;margin-top:10px;text-decoration:none}
.plan-more{display:inline-block;margin-top:8px;color:var(--color-accent-ink);font-weight:600;font-size:var(--text-body-s)}
.sec-details{background:var(--color-sand)}
.details{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6) var(--gap-grid)}
.details .detail.big{grid-column:1/-1;display:grid;grid-template-columns:1.6fr 1fr;gap:var(--gap-section);align-items:end}
.details .detail.big img{aspect-ratio:auto}
.details .detail:not(.big) img{aspect-ratio:3/2;object-fit:cover}
.detail-text{padding-top:12px}
.detail .num{font-size:var(--text-stat);font-weight:300;letter-spacing:-.02em;color:var(--color-accent-ink);line-height:1;margin-bottom:6px;font-variant-numeric:tabular-nums}
.detail h3{margin-bottom:.35em;font-size:var(--text-h4)}.detail p{color:var(--color-text-2);font-size:var(--text-body-s);margin:0}
@media(max-width:720px){.details{grid-template-columns:1fr}.details .detail.big{grid-template-columns:1fr}}
.spec-fold{margin-top:var(--section-tight);border-top:1px solid var(--color-line);padding-top:6px}
.spec-fold summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;font-size:var(--text-h4);font-weight:500}
.spec-fold summary::-webkit-details-marker{display:none}
.spec-fold summary::after{content:"+";font-size:1.5rem;font-weight:300;color:var(--color-accent-ink);transition:transform var(--dur) var(--ease)}
.spec-fold[open] summary::after{transform:rotate(45deg)}
.spec{margin:6px 0 0}
.spec-row{display:grid;grid-template-columns:1fr 2fr;gap:8px 24px;padding:14px 0;border-top:1px solid var(--color-line)}
.spec-row dt{font-weight:500}.spec-row .num{color:var(--color-accent-ink);font-weight:400;margin-right:6px;font-variant-numeric:tabular-nums}
.spec-row dd{margin:0;color:var(--color-text-2);font-size:var(--text-body-s)}
@media(max-width:720px){.spec-row{grid-template-columns:1fr}}
.spec-dl{margin:22px 0 6px}

/* ---- gallery ---- */
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-gallery)}
.gallery figure img{aspect-ratio:3/2;object-fit:cover}
.gallery .g-wide{grid-column:1/-1}
.gallery .g-wide img{aspect-ratio:21/9;max-height:calc(100vh - 260px);min-height:260px}
.gallery.docs{grid-template-columns:repeat(3,1fr)}
.gallery.docs figure img{aspect-ratio:4/3}
/* A labelled 2x2 of manufacturer images (Teza windows and doors): two columns of the row; labels are live text over a soft fade */
.gallery.docs .quad{grid-column:span 2}
.quad-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quad .q{position:relative;line-height:0}
.quad .q img{border-radius:var(--radius-s)}
.quad .q-label{position:absolute;left:0;right:0;bottom:0;padding:28px 13px 10px;line-height:1.2;font-size:var(--text-caption);letter-spacing:.01em;font-weight:500;color:rgba(255,255,255,.94);
  background:var(--overlay-label);border-radius:0 0 var(--radius-s) var(--radius-s)}  /* quiet: sentence case, normal tracking, the site's weight */
@media(max-width:720px){.gallery.docs .quad{grid-column:auto}.quad-grid{gap:6px}.quad .q-label{font-size:var(--text-micro);padding:18px 8px 7px}}
.sec-docs{background:var(--color-sand)}
@media(max-width:720px){.gallery,.gallery.docs{grid-template-columns:1fr}.gallery .g-wide img{aspect-ratio:3/2}}

/* ---- progress (journal) ---- */
.journal .entry{display:grid;grid-template-columns:1fr 2fr;gap:var(--gap-section);padding:var(--section-tight) 0;border-top:1px solid var(--color-line)}
.journal .entry:first-child{border-top:0;padding-top:8px}
.entry time{display:block;font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--color-bronze);font-weight:600;margin-bottom:8px}
.entry h2{font-size:var(--text-h3);font-weight:500;letter-spacing:0;line-height:var(--leading-heading);margin-bottom:.4em}
.entry-head p{color:var(--color-text-2);font-size:var(--text-body)}
.entry .photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-3);align-content:start}
.entry .photos img{aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-s)}
.entry .photos .fig-video{grid-column:span 2}.entry .photos video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-s);background:var(--color-deep)}
@media(max-width:480px){.entry .photos .fig-video{grid-column:auto}}
@media(max-width:720px){.journal .entry{grid-template-columns:1fr}}

/* ---- location ---- */
.loc-text{margin-top:1em}
.loc-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--gap-section);align-items:start;padding-bottom:var(--section-tight)}
.map{width:100%;aspect-ratio:4/3;border:0;border-radius:var(--radius-m);background:var(--color-sand)}
.distances{list-style:none;margin:0;padding:0}
.distances li{border-top:1px solid var(--color-line)}
.distances li:last-child{border-bottom:1px solid var(--color-line)}
.dist{width:100%;display:flex;justify-content:space-between;align-items:baseline;gap:12px;background:none;border:0;font:inherit;text-align:left;padding:12px 4px;min-height:var(--touch-min);cursor:pointer;border-radius:var(--radius-s);transition:background var(--dur) var(--ease)}
.dist:hover{background:var(--color-sand)}
.dist.active{background:var(--color-sand)}
.dist strong{font-weight:500;white-space:nowrap}.dist span{color:var(--color-text-2);font-size:var(--text-body-s)}
.hint{font-size:var(--text-caption);color:var(--color-text-muted);margin:12px 0 0}
@media(max-width:720px){.loc-grid{grid-template-columns:1fr}}

/* ---- floor plans (viewpoints preserved) ---- */
.plans{display:grid;gap:var(--section-tight)}
/* Two levels on one sheet size: the tabs roll the main level back from the right edge (stapled on the left) to reveal the street level.
   --p runs 0 (main level flat) to 1 (rolled to the left edge); the roll is a shaded cylinder carrying the sheet's own slice. */
@property --p{syntax:"<number>";inherits:true;initial-value:0}
.plans-peel{--roll:calc(22px + var(--p)*30px);transition:--p 1.3s cubic-bezier(.6,0,.3,1)}
.plan-stage{display:inline-block;position:relative;max-width:100%;line-height:0}
html.js .plans-peel{display:grid;gap:0}
html.js .plans-peel .plan{grid-area:1/1}
html.js .plans-peel.rolling .plan-sheet .plan-map,html.js .plans-peel.up .plan-sheet .plan-map{clip-path:inset(0 calc(var(--p)*100%) 0 0 round var(--radius-m))}  /* only while moving or rolled: at rest the previews may hang outside the sheet */
html.js .plans-peel .plan-sheet figcaption{opacity:clamp(0,1 - var(--p)*3,1)}  /* captions hand over early and late, so the two never read on top of each other */
html.js .plans-peel .plan-base figcaption{opacity:clamp(0,var(--p)*3 - 2,1)}
html.js .plans-peel .plan[inert]{pointer-events:none}  /* the covered level's caption sits under (or over) the other's; clicks must reach the one showing */
.plan-roll{position:absolute;top:-1.5%;bottom:-1.5%;width:var(--roll);left:calc((1 - var(--p))*(100% - var(--roll)));pointer-events:none;
  opacity:clamp(0,var(--p)*12,1);border-radius:999px;background-color:#f4f2ee;background-size:auto 103%;background-position:calc((1 - var(--p))*100%) center;
  box-shadow:-10px 0 18px -4px rgba(0,0,0,.38),-2px 0 4px rgba(0,0,0,.18)}
.plan-roll::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,.14) 34%,rgba(255,255,255,.08) 68%,rgba(255,255,255,.7))}
html:not(.js) .plan-roll{display:none}
.plan-controls{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin:2px 0 14px}
.tabs{display:inline-flex;background:var(--color-sand);border-radius:var(--radius-pill);padding:4px;gap:2px}
.tab{font:inherit;font-weight:600;font-size:var(--text-body-s);padding:9px 18px;min-height:40px;border:0;background:transparent;border-radius:var(--radius-pill);cursor:pointer;color:var(--color-text-2);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.tab:hover{color:var(--color-text)}.tab[aria-selected="true"]{background:var(--color-graphite);color:#fff}
.plan-controls .hint{margin:0;flex:1 1 280px}
.plan{text-align:center;margin:0}
.plan.fade{animation:planfade .4s var(--ease)}@keyframes planfade{from{opacity:0}to{opacity:1}}
.plan-map{display:inline-block;position:relative;max-width:100%;background:#fff;border:1px solid var(--color-line);border-radius:var(--radius-m);overflow:visible;line-height:0}
.plan-map>picture>img{border-radius:var(--radius-m);width:auto;max-width:100%;height:auto;max-height:calc(100vh - 300px);min-height:300px;object-fit:contain}  /* the drawing only, never the preview thumbnails */
.plan figcaption{display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:left;font-size:var(--text-body-s);color:var(--color-text-2);padding-top:10px;line-height:1.45}
.enlarge{flex:none;font:inherit;font-size:.8125rem;font-weight:600;padding:7px 14px;min-height:32px;border:1px solid var(--color-line);background:var(--color-warm-white);border-radius:var(--radius-pill);cursor:pointer;color:var(--color-text);transition:border-color var(--dur) var(--ease)}
.enlarge:hover{border-color:var(--color-graphite)}
@media(max-width:720px){.plan-map>picture>img{max-height:none;min-height:0}.plan figcaption{flex-direction:column;align-items:flex-start}}
.viewpoint{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:2px solid #fff;background:var(--color-accent);
  cursor:pointer;padding:0;box-shadow:0 2px 10px rgba(0,0,0,.28);transition:transform var(--dur) var(--ease)}
.viewpoint::before{content:"";position:absolute;left:50%;top:50%;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;
  border-bottom:32px solid rgba(91,114,128,.28);transform-origin:top center;transform:translate(-50%,0) rotate(calc(var(--dir) + 180deg));pointer-events:none}
.viewpoint:hover,.viewpoint:focus-visible{transform:scale(1.18);z-index:2}
.viewpoint .peek{display:none;position:absolute;left:50%;bottom:34px;transform:translateX(-50%);width:200px;background:var(--color-warm-white);border-radius:var(--radius-s);
  padding:5px;box-shadow:var(--shadow-m);border:1px solid var(--color-line);text-align:left;z-index:3}
.viewpoint .peek img{border-radius:var(--radius-xs);width:100%;height:auto;aspect-ratio:auto;object-fit:contain}  /* natural horizontal rectangles, as on the first site */
.viewpoint .peek span{display:block;font-size:var(--text-micro);color:var(--color-text-2);padding:4px 3px 1px;line-height:1.25;letter-spacing:0;text-transform:none}
.viewpoint .peek.set{width:330px;display:none;grid-template-columns:1fr 1fr;gap:6px}  /* a pair sits side by side, small enough to stay on the page */
.viewpoint .peek.set .pk{display:block;min-width:0}.viewpoint .peek.set img{margin:0}
.viewpoint.left .peek{left:0;transform:none}.viewpoint.right .peek{left:auto;right:0;transform:none}
.viewpoint.below .peek{bottom:auto;top:34px}  /* dots in the upper part of a plan open downward so the card is not clipped by the page top */
@media(hover:hover){.viewpoint:hover .peek{display:block}.viewpoint:hover .peek.set{display:grid}}
.viewpoint:focus-visible .peek{display:block}.viewpoint:focus-visible .peek.set{display:grid}
@media(max-width:720px){.viewpoint{width:20px;height:20px;margin:-10px 0 0 -10px}.viewpoint::before{border-left-width:11px;border-right-width:11px;border-bottom-width:22px}}

/* ---- lightbox ---- */
.lightbox{position:fixed;inset:0;z-index:50;display:none;background:rgba(28,25,23,.94);padding:20px;align-items:center;justify-content:center}
.lightbox.open{display:flex}
.lightbox figure{max-width:min(1400px,96vw);max-height:92vh;display:flex;flex-direction:column;align-items:center}
.lightbox img{max-height:82vh;width:auto;max-width:100%;object-fit:contain;border-radius:var(--radius-s)}
.lightbox figcaption{color:rgba(255,255,255,.8);text-align:center;font-size:var(--text-body-s);padding-top:12px}
.lightbox figcaption .disclosure,.lightbox figcaption .kind{color:rgba(255,255,255,.8)}
.lb-close{position:absolute;top:16px;right:16px;font:inherit;font-size:.8125rem;font-weight:600;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.3);padding:7px 14px;min-height:32px;border-radius:var(--radius-pill);cursor:pointer}
.lb-close:hover{background:rgba(255,255,255,.2)}
.lb-nav{display:none;position:absolute;top:50%;transform:translateY(-50%);font:inherit;font-size:2rem;line-height:1;width:48px;height:48px;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:50%;cursor:pointer}
.lightbox.multi .lb-nav{display:block}
.lb-prev{left:16px}.lb-next{right:16px}
.lb-nav:hover{background:rgba(255,255,255,.2)}
.lightbox :focus-visible{outline-color:#fff}

/* ---- footer ---- */
.site-footer{border-top:1px solid var(--color-line);padding:var(--space-7) 0 var(--space-6);font-size:var(--text-body-s);color:var(--color-text-2)}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1.2fr;gap:var(--space-6);align-items:start}
.footer-address{font-weight:500;color:var(--color-text);margin:0 0 6px;line-height:1.35}
.offered{margin:0;color:var(--color-text-muted)}
.footer-nav{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
.footer-nav a{text-decoration:none;color:var(--color-text-2)}.footer-nav a:hover{color:var(--color-text)}
.footer-contact .contact-line{margin:0 0 12px;line-height:1.6}
.footer-contact .contact-line a{text-decoration:none;color:var(--color-text);border-bottom:1px solid var(--color-line)}
.share{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin:0;font-size:var(--text-caption)}
.share-label{color:var(--color-text-muted)}
.share a,.share button{font:inherit;background:none;border:0;padding:0;color:var(--color-text-2);text-decoration:none;cursor:pointer;border-bottom:1px solid transparent}
.share a:hover,.share button:hover{border-bottom-color:var(--color-text-2)}
.footer-fine{margin-top:var(--space-6);padding-top:18px;border-top:1px solid var(--color-line);font-size:var(--text-caption);color:var(--color-text-muted)}
.footer-fine p{margin:0 0 6px}
.eho{display:flex;gap:8px;align-items:flex-start}.eho img{flex:none;border-radius:0;width:20px}
.fine a{color:inherit}
@media(max-width:720px){.footer-grid{grid-template-columns:1fr;gap:20px}}

/* misc */
.invite-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.invite-actions .or{color:var(--color-text-muted);font-size:var(--text-body-s)}
.stats{display:none}

/* reveals removed 9/15 (Larry): content appears immediately */
.lightbox.open figure{animation:lbin var(--dur) var(--ease)}@keyframes lbin{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.sec-deck.dark .deck-doc .eyebrow{color:var(--color-accent-ink)}
.sec-deck.dark .deck-doc figcaption,.sec-deck.dark .deck-doc figcaption .kind{color:var(--color-text-muted)}
.sec-deck.dark .deck-doc figcaption .kind{color:var(--color-bronze)}
.inq-channels a[href^="tel:"],.footer-contact a[href^="tel:"]{white-space:nowrap}
.gallery figure.g-natural img{aspect-ratio:auto;max-height:none}
.gallery figure.g-top img{aspect-ratio:3/2;max-height:none;object-fit:cover;object-position:50% 0}  /* the 4:3 exterior rendering: keep the roof line, trim the street and driveway */

/* ---- Specifications: the feature & specification sheet as a page (9/19/26; tokenised 9/20). Same idiom as the printed
   sheet — cream ground, panel cards, ruled uppercase section headings, bronze sub-heads, accent bullets — laid out in two
   packed columns that fall to one on phones. */
.spec-head h1.serif{max-width:none}
.spec-head .eyebrow{color:var(--color-bronze)}
.nobr{white-space:nowrap}  /* "Ventura, California 93001" wraps as one unit; the zip never sits alone on a line */
.spec-sub{margin:.55em 0 0;color:var(--color-accent-ink);font-weight:600;font-size:var(--text-body)}
.spec-meta{margin:.15em 0 0;color:var(--color-text-muted);font-size:var(--text-caption)}
.spec-toplink{font-size:var(--text-body-s)}
.spec-stats{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin:6px 0 14px}
.spec-stats .stat{background:var(--color-warm-white);border:1px solid var(--color-line);border-radius:var(--radius-m);padding:14px 8px 12px;text-align:center;display:flex;flex-direction:column;justify-content:center;min-height:74px}
.spec-stats .stat strong{font-size:1.125rem;font-weight:500;line-height:1.1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.spec-stats .stat span{color:var(--color-bronze);font-size:var(--text-micro);letter-spacing:var(--tracking-micro);text-transform:uppercase;margin-top:5px;line-height:1.2}
@media(max-width:960px){.spec-stats{grid-template-columns:repeat(4,1fr)}}
@media(max-width:720px){.spec-stats{grid-template-columns:repeat(2,1fr)}.spec-stats .stat{min-height:66px}}
.spec-card{background:var(--color-warm-white);border:1px solid var(--color-line);border-radius:var(--radius-m);padding:var(--card-pad);margin:0 0 18px;break-inside:avoid}
.spec-card h2{font-family:var(--font-sans);font-size:var(--text-label);font-weight:600;letter-spacing:.075em;text-transform:uppercase;color:var(--color-accent-ink);margin:0 0 12px;padding-bottom:8px;border-bottom:2px solid var(--color-accent);line-height:1.25;text-wrap:pretty}
.spec-card h2 .heading-note{color:var(--color-text-muted);font-weight:400;letter-spacing:0;text-transform:none;font-size:var(--text-body-s)}
.spec-card h3{color:var(--color-bronze);font-size:var(--text-micro);font-weight:600;letter-spacing:var(--tracking-micro);text-transform:uppercase;margin:14px 0 6px;line-height:1.2}
.spec-card h3:first-of-type{margin-top:4px}
.spec-card .lead{color:var(--color-text-muted);font-size:var(--text-body-s);line-height:1.5;margin:0 0 10px}
.spec-card ul{margin:0;padding:0 0 0 1.05em}
.spec-card li{font-size:var(--text-body-s);line-height:1.5;margin:0 0 7px;color:var(--color-text-2)}
.spec-card li:last-child{margin-bottom:0}
.spec-card li::marker{color:var(--color-accent)}
.spec-card strong{font-weight:600;color:var(--color-accent-ink)}
.spec-overview h2.serif{font-family:var(--font-display);font-weight:300;text-transform:none;letter-spacing:var(--tracking-heading);font-size:clamp(1.35rem,2.2vw,1.7rem);border:0;padding:0;margin:0 0 8px;color:var(--color-text);line-height:1.15}
.spec-overview p{margin:0;color:var(--color-text-2);font-size:var(--text-prose);line-height:1.55;max-width:80ch}
.spec-grid{columns:2;column-gap:18px;margin-top:4px}
.spec-grid>.spec-card{break-inside:avoid;page-break-inside:avoid}
.spec-grid>.col-break{break-before:column}
.spec-signature ul{columns:2;column-gap:28px}
.spec-signature li{break-inside:avoid}
@media(max-width:720px){.spec-grid{columns:1}.spec-grid>.col-break{break-before:auto}.spec-signature ul{columns:1}}
.palette-card h2{font-family:var(--font-display);font-weight:300;text-transform:none;letter-spacing:var(--tracking-heading);font-size:1.45rem;border:0;padding:0;margin:0 0 12px;color:var(--color-text);line-height:1.15}
.swatch-row{display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:center;margin:0 0 10px}
.swatch-row:last-child{margin-bottom:0}
.swatch{width:48px;height:32px;border-radius:var(--radius-s);border:1px solid var(--color-line)}
.swatch-copy strong{display:block;font-size:var(--text-body-s);color:var(--color-text);font-weight:600}
.swatch-copy span{display:block;color:var(--color-text-muted);font-size:var(--text-caption);margin-top:1px}
.spec-notes{margin-top:4px}
.spec-notes p{color:var(--color-bronze);font-size:var(--text-caption);line-height:1.5;margin:0 0 8px}
.spec-notes p:last-child{margin-bottom:0}
.spec-notes strong{color:var(--color-bronze);font-weight:600}
.spec-download{background:var(--color-graphite);color:#fff;border-radius:var(--radius-l);padding:var(--card-pad-l);margin:18px 0 var(--section-tight);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.spec-download h2{font-family:var(--font-display);font-weight:300;color:#fff;font-size:clamp(1.4rem,2.4vw,1.9rem);margin:0 0 .3em;letter-spacing:var(--tracking-display);line-height:1.1}
.spec-download p{margin:0;color:var(--color-text-on-dark-2)}
.spec-download .eyebrow.light{margin-bottom:.6em}
/* ---- press feedback + touch targets (9/23/26, from the apple-design audit, items 4 and 5; the plan roll is untouched by design) ----
   A control answers the press the instant it lands (the press-in is immediate, the release eases back over --dur). On a touch
   screen every control reaches the 44px minimum (--touch-min) without changing how it looks: the viewpoint dots grow an invisible
   hit area, and the small pills grow only where a finger, not a pointer, is doing the pressing. */
.site-nav a:active{background:var(--color-stone);color:var(--color-text);transition-duration:0s}
.site-nav .nav-cta a:active{background:var(--color-accent-ink);color:#fff}
.nav-toggle:active{background:var(--color-sand);transition-duration:0s}
.cta:active,.cta.ghost-dark:active,.cta.light:active,.form-foot .cta:active{transition-duration:0s}
.tab:active{color:var(--color-text);background:var(--color-stone);transition-duration:0s}
.tab[aria-selected="true"]:active{background:var(--color-accent-ink);color:#fff}
.enlarge:active{background:var(--color-sand);border-color:var(--color-graphite);transition-duration:0s}
.dist:active{background:var(--color-stone);transition-duration:0s}
.share a:active,.share button:active{color:var(--color-text);border-bottom-color:var(--color-text)}
.lb-close:active,.lb-nav:active{background:rgba(255,255,255,.3);border-color:rgba(255,255,255,.6)}
.viewpoint:active{transform:scale(1.08);transition-duration:0s}
.viewpoint::after{content:"";position:absolute;inset:-12px;border-radius:50%}
figure[data-full]:active img{transform:scale(.985);filter:brightness(.97);transition-duration:0s}
/* the viewer's photo is dragged sideways by hand (site.js): sideways is ours, up-down and pinch stay with the browser */
.lightbox figure{touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none}
.lightbox img{-webkit-user-drag:none}
@media (pointer:coarse){
  .site-nav a,.site-nav .nav-cta a,.prop-card .cta,.form-foot .cta,.cta.m,.cta.s,.tab,.enlarge,.lb-close{min-height:var(--touch-min)}
  .share a,.share button{display:inline-flex;align-items:center;min-height:var(--touch-min)}
}