/* The Parker's stylesheet, served for the nested pages under
   /communities/the-parker/ (the standalone design, whole). Copied verbatim from
   parker-website/styles.css 2026-09-17 with only the asset paths rewritten
   (/images/ -> /images/the-parker/, plans -> /images/floorplans/the-parker/);
   fonts resolve from this site's own /fonts/ files (same names). The container
   additions (filter extras + units modal) are appended at the bottom. */
/* ============================================================================
   THE PARKER AT BISHOP RIDGE: THE DESIGN SYSTEM (v2, 2026-08-24)
   ============================================================================
   Session 1 built a competent dark one-pager. Session 2 rebuilds the language
   around what the property actually owns now: REAL PHOTOGRAPHS of finished
   homes, and the argument that brand-new construction is, for once, within
   reach of the people who keep the city running.

   ---- WHERE THIS DESIGN COMES FROM ----------------------------------------
   The photographs. Marc's Matterport captures of the finished S1/A1/B1/C1
   homes are full of Texas daylight: warm white walls, pale oak floors, deep
   window light. So the site's ground is that daylight paper, not a dark scrim.
   Every competitor in this market opens on a dark photo with a gradient over
   it; v1 of this site did too. v2 opens on paper with ink type, which is also
   what the real photography wants.

   The dark pine survives as PUNCTUATION: the dollhouse cut-away captures come
   out of Matterport on pure black, so the dark bands exist to hold them, plus
   the tours and the footer. Dark is now a room you pass through, not the house.

   ---- THE PALETTE (re-specced 2026-09-06 to the Bishop Ridge brand guide) --
   Every colour is a Bishop Ridge brand colour or a stated tint/shade of one:
   Parkside Green is the one green (bands AND footer; no second green), the
   ground is Parchment at the guide's own 50% tint with full Parchment as the
   alternating band, Bishop Bronze is the rule/kicker colour (shaded for text
   on paper, tinted for text on green), ink is Parkside Green taken to near
   black, and Rose Garden is the seam: the 1px hairline at every light/dark
   boundary, plus the one small "3D tour" tag. Lakeside Blue is the selection
   colour. Tints and shades are declared beside each token below.

   ---- THE TYPE ------------------------------------------------------------
   Fraunces (variable, optical size + weight) is the new display voice: a warm,
   sharp serif with old-neighborhood manners on a brand-new building. It kills
   two v1 problems at once: "not heavy enough" (display sits at wght 600+) and
   sameness (v1's Sora + tracked-mono-eyebrow is the most copied lockup on the
   2020s web). The mono survives ONLY as the data voice: figures, tables, the
   phone number. Labels are now the KICKER: Fraunces italic, sentence case,
   bronze, after a short tan rule. Manrope stays the body.

   ---- THE ONE MOTION IDEA: the walk-through -------------------------------
   Cross-page view transitions (@view-transition, 2026-universal) make every
   plan DRAWING morph from its card in the floor plan browser (and the home
   teaser) into the hero of its plan page: the card becomes the page. The
   browser narrows by bedrooms through a radio group and CSS :has(), so the
   whole interactive floor plan browser ships with zero JavaScript. Arrival reveals are scroll-driven CSS (view()), with
   the fully-visible state as the no-JS and no-support default, so a crawler
   and a no-script visitor never see a blank. Off under reduced-motion.
   Nothing loops, nothing bounces, nothing animates its own geometry.
   ========================================================================== */

@font-face{font-family:'Fraunces';src:url('/fonts/fraunces-var-latin.woff2') format('woff2');font-weight:300 900;font-stretch:normal;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('/fonts/fraunces-italic-var-latin.woff2') format('woff2');font-weight:300 900;font-style:italic;font-display:swap}
@font-face{font-family:'Manrope';src:url('/fonts/manrope-200-800-latin.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  /* ---- every colour below is on the Bishop Ridge brand guide (70_CREATIVE/0_BRAND/
     BISHOP_RIDGE_BRAND_GUIDE.pdf, section 6.1), or is a stated tint or shade of one.
     Parkside Green #004D36, Rose Garden #E17958, Parchment #E9F0E2, Lakeside Blue #9AB9E1,
     Bishop Bronze #A48F6E, Leafy Green #5C855A. The guide itself sets Parchment at a 50%
     tint for lighter grounds; that is the paper here. ---- */
  /* grounds */
  --paper:#f4f8f0;        /* Parchment at 50% tint: the page ground */
  --paper-deep:#E9F0E2;   /* Parchment, full: the alternating band */
  --pine:#004D36;         /* Parkside Green, PMS 342C: the sign in the ground and the site are one green */
  --pine-deep:#004D36;    /* the footer sits on the same Parkside Green; the seam divides it */
  /* brand */
  --tan:#A48F6E;          /* Bishop Bronze: fills, rules, never small text on paper */
  --tan-bright:#c8b799;   /* Bishop Bronze at a 40% tint: bronze on green */
  --bronze:#6f5d43;       /* Bishop Bronze shaded for TEXT on paper, 5.6:1 */
  --rose:#E17958;         /* Rose Garden: the seam hairline and the one small tag */
  /* ink: Parkside Green shaded to near-black, so the text and the brand are one hue */
  --ink:#0f1f19;
  --ink-soft:rgba(15,31,25,.72);
  --milk:#E9F0E2;         /* Parchment: text on green */
  --milk-soft:rgba(233,240,226,.74);
  /* hairlines */
  --hair-dark:rgba(233,240,226,.16);
  --hair-light:rgba(15,31,25,.16);
  --seam:1px solid var(--rose);
  /* rhythm */
  --ease:cubic-bezier(.22,1,.36,1);
  --measure:68rem;
  --gutter:clamp(1.25rem,5vw,4rem);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Manrope',-apple-system,'Helvetica Neue',sans-serif;
  background:var(--paper);
  color:var(--ink);
  font-size:clamp(1rem,.95rem + .3vw,1.125rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
::selection{background:#9AB9E1;color:var(--ink)}   /* Lakeside Blue */
img{max-width:100%;display:block}
a{color:inherit}
[hidden]{display:none!important}

/* paper grain: one small SVG noise tile, blended, imperceptible until removed */
.grain::before{
  content:"";position:fixed;inset:0;z-index:9;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.05;mix-blend-mode:overlay;
}

/* ---------- the walk-through: cross-page view transitions ---------- */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}

/* ---------- arrival: scroll-driven, default fully visible ---------- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .rise{
      animation:rise-in linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 66%;
    }
  }
}
@keyframes rise-in{
  from{opacity:.001;transform:translateY(26px)}
  to{opacity:1;transform:none}
}

/* ---------- shared rhythm ---------- */
/* an anchor (#ask, #tour, the map's #home-2314) lands below the sticky header, not under it */
main [id]{scroll-margin-top:5.5rem}
.band{padding:clamp(4.2rem,9vw,7.5rem) var(--gutter)}
.band-inner{max-width:var(--measure);margin:0 auto}
.dark{background:var(--pine);color:var(--milk)}
.dark-deep{background:var(--pine-deep);color:var(--milk)}
.deep{background:var(--paper-deep)}
/* the seam: every light-to-dark boundary carries the 1px tan hairline */
.dark,.dark-deep{border-top:var(--seam);border-bottom:var(--seam)}
.dark + .dark-deep,.dark-deep + .dark{border-top:none}
footer.dark-deep{border-bottom:none}

/* the kicker: Fraunces italic after a short tan rule. The label voice. */
.kicker{
  display:flex;align-items:center;gap:.9rem;
  font-family:'Fraunces',serif;font-style:italic;font-weight:480;
  font-size:clamp(1rem,.94rem + .3vw,1.2rem);
  color:var(--bronze);
  margin-bottom:clamp(1.1rem,2.4vw,1.7rem);
}
.dark .kicker,.dark-deep .kicker{color:var(--tan-bright)}
.kicker::before{content:"";width:2.2rem;height:1px;background:var(--tan);flex:none}

h1,h2{
  font-family:'Fraunces',serif;
  font-weight:620;
  font-optical-sizing:auto;
  letter-spacing:-.015em;
  line-height:1.04;
  text-wrap:balance;
}
h2{font-size:clamp(2rem,1.4rem + 2.9vw,3.7rem);max-width:24ch}
.lede{
  margin-top:clamp(1.1rem,2.4vw,1.6rem);
  max-width:52ch;   /* 56ch ran 75 to 78 characters a line in Manrope at 1440 (measured 9/7 night); 52ch is about 70 */
  color:var(--ink-soft);
  text-wrap:pretty;
}
.dark .lede,.dark-deep .lede{color:var(--milk-soft)}
/* the third way out of a band is a line, not a third button (a lone button on its own row is the
   orphan of button rows; measured on every plan hero, the home page's last band, Essential Housing
   and the seven unscanned plan pages at 390, 9/7 night) */
.more{margin-top:1.1rem}
.more a{font-weight:700;color:var(--bronze);text-decoration:none;border-bottom:2px solid var(--tan);transition:color .3s var(--ease),border-color .3s var(--ease)}
.more a:hover{color:var(--ink)}
.dark .more a,.dark-deep .more a{color:var(--tan-bright)}
.dark .more a:hover,.dark-deep .more a:hover{color:var(--milk)}

/* data voice */
.mono{
  font-family:'IBM Plex Mono',monospace;
  font-size:clamp(.75rem,.68rem + .2vw,.85rem);   /* the data voice floors at 12 px (the expert's item 6) */
  letter-spacing:.08em;
}

/* buttons */
.btn{
  display:inline-block;
  font-family:'Manrope',sans-serif;font-weight:700;
  font-size:clamp(.92rem,.88rem + .2vw,1.02rem);
  text-decoration:none;
  padding:.85em 1.7em;border-radius:99px;
  background:var(--pine);color:var(--milk);
  border:1px solid var(--pine);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn:hover{background:var(--bronze);border-color:var(--bronze)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--hair-light)}
.btn.ghost:hover{background:transparent;color:var(--bronze);border-color:var(--tan)}
.dark .btn,.dark-deep .btn{background:var(--tan-bright);color:var(--pine);border-color:var(--tan-bright)}
.dark .btn:hover,.dark-deep .btn:hover{background:var(--milk);border-color:var(--milk)}
.dark .btn.ghost,.dark-deep .btn.ghost{background:transparent;color:var(--milk);border-color:var(--hair-dark)}
.dark .btn.ghost:hover,.dark-deep .btn.ghost:hover{color:var(--tan-bright);border-color:var(--tan)}

/* ---------- header: one row at every width ----------
   The logo, the six links, the button and the phone share one line from 1000px up;
   under 1000 the links fold into the Menu sheet. Below 1080px the phone becomes its
   ring only. The header never grows, never scrolls and never fades: every link is
   visible in full at every width it is on the bar. Measured at 900, 1024, 1280,
   1366 and 1440 after any change to the links or the button (9/7 evening). */
.site-header{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair-light);
}
.site-header .bar{
  /* the bar's inner width is the page measure: logo and content share a left edge,
     and the seven links have the whole column to sit in (they clipped at 1440 when
     the bar was the measure minus its own gutters) */
  max-width:calc(var(--measure) + 2 * var(--gutter));margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(.7rem,1.5vw,1.1rem);flex-wrap:nowrap;
  padding:.85rem var(--gutter);
}
.site-header .logo{flex:none;display:block;line-height:0}
.site-header .logo img{height:clamp(1.9rem,2.4vw,2.1rem);width:auto;   /* capped: the bar stops growing at 1216 px, so the logo does too (at 2.6rem it ate the links' room on a 1728 display) */
  /* the brand logo is white art; ink it for the paper header */
  filter:invert(1) sepia(.14) saturate(.9) brightness(.36);
  view-transition-name:logo;
}
.site-header nav{
  display:flex;flex-wrap:nowrap;align-items:center;
  gap:clamp(.45rem,.9vw,.75rem);   /* capped at .75rem: the bar is 1216 px wide at most, and a gap that kept growing with the viewport left 43 px for six links at 1728 (measured 9/7 late night) */
  min-width:0;flex:1 1 auto;
  overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:0 .15rem;
}
.site-header nav::-webkit-scrollbar{display:none}
.site-header nav a{
  font-family:'Manrope',sans-serif;font-weight:600;
  font-size:clamp(.78rem,.7rem + .25vw,.9rem);
  color:var(--ink-soft);text-decoration:none;white-space:nowrap;flex:none;
  padding:.35em 0;border-bottom:2px solid transparent;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.site-header nav a:hover{color:var(--ink)}
.site-header nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--tan)}
.site-header .tel{
  flex:none;
  font-family:'IBM Plex Mono',monospace;
  font-size:clamp(.72rem,.68rem + .2vw,.82rem);letter-spacing:.1em;
  color:var(--ink);text-decoration:none;white-space:nowrap;
  border:1px solid var(--hair-light);
  padding:.55em 1.05em;border-radius:99px;
  transition:border-color .35s var(--ease),color .35s var(--ease);
}
.site-header .tel:hover{border-color:var(--tan);color:var(--bronze)}
/* header C: the one call to action on the bar, Parkside Green, to the building map */
.site-header .cta{
  flex:none;
  font-family:'Manrope',sans-serif;font-weight:700;
  font-size:clamp(.78rem,.72rem + .25vw,.92rem);
  color:var(--milk);background:var(--pine);border:1px solid var(--pine);
  text-decoration:none;white-space:nowrap;
  padding:.6em 1.15em;border-radius:99px;
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
.site-header .cta:hover{background:var(--bronze);border-color:var(--bronze)}
/* on the map page the button is where it points: the ghost state, with aria-current (session fourteen) */
.site-header .cta[aria-current="page"]{background:transparent;color:var(--ink);border-color:var(--hair-light)}
.site-header .cta[aria-current="page"]:hover{background:var(--paper-deep);border-color:var(--tan);color:var(--ink)}
@media (max-width:1080px){
  .site-header .tel{font-size:0;padding:.55em;width:2.2rem;height:2.2rem;display:grid;place-items:center}
  .site-header .tel::before{content:"";width:.95rem;height:.95rem;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25c1.1.37 2.3.57 3.6.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1L6.6 10.8z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25c1.1.37 2.3.57 3.6.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1L6.6 10.8z'/%3E%3C/svg%3E") center/contain no-repeat}
}
@media (max-width:640px){
  /* the stacked mark is half the width of the wordmark: the links get the room */
  .site-header .logo img{content:url('/images/the-parker/logo.png');height:2.4rem}
}
/* the Menu header: under 1000 px the six links fold into a Menu button and a native dialog sheet
   (the map, the six links and FAQ). Nothing on the bar ever scrolls, fades or clips: from 1000 px
   up every link is visible in full (about 90 px to spare at 1000, measured 9/7 night; at 900 the fit
   was exact, which is no margin for a wider font rendering), under 1000 px the links live in the
   sheet. The script in header() is the second guard: if the six links ever overflow their lane at any
   width, zoom or font (it re-measures on resize and once the fonts load), the header folds itself. */
.site-header .menu{
  display:none;align-items:center;margin-left:auto;
  font:inherit;font-family:'Manrope',sans-serif;font-weight:700;font-size:.8rem;
  color:var(--ink);background:transparent;border:1px solid var(--hair-light);border-radius:99px;
  padding:.58em .95em;cursor:pointer;
}
@media (max-width:999.98px){
  .site-header nav{display:none}
  .site-header .menu{display:inline-flex}
}
.site-header.is-folded nav{display:none}
.site-header.is-folded .menu{display:inline-flex}
@media (max-width:640px){
  .site-header .bar{gap:.55rem}
  .site-header .cta{padding:.6em .95em;font-size:.8rem}
}
/* the phone bar: under 640 px, Call / Tour / Apply pinned to the bottom of every page (the Marcus
   mobile action bar in the Parker's colours). Parkside Green with the seam on top; Apply is the bronze
   tint, the dark bands' button fill. The body's bottom padding keeps the footer's last line above it. */
.phone-bar{display:none}
@media (max-width:640px){
  .phone-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:18;
    display:grid;grid-template-columns:1fr 1fr 1fr;
    background:var(--pine);color:var(--milk);border-top:var(--seam);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -12px 30px -18px rgba(15,31,25,.45);
  }
  .phone-bar a{
    display:flex;align-items:center;justify-content:center;min-height:3.4rem;
    font-family:'Manrope',sans-serif;font-weight:700;font-size:.9rem;
    color:var(--milk);text-decoration:none;
  }
  .phone-bar a+a{border-left:1px solid var(--hair-dark)}
  .phone-bar .apply{background:var(--tan-bright);color:var(--pine)}
  .phone-bar .apply[aria-current="page"]{background:var(--milk)}
  /* the footer grows by the bar's height, so the page ends on green under the bar, not on a strip of paper */
  footer.dark-deep{padding-bottom:calc(clamp(4.2rem,9vw,7.5rem) + 3.4rem + env(safe-area-inset-bottom))}
}
.nav-sheet{
  border:0;padding:0;margin:0;max-width:none;max-height:none;
  width:100vw;inset:0 0 auto 0;
  background:var(--paper);color:var(--ink);
  border-bottom:var(--seam);
  box-shadow:0 30px 60px -30px rgba(15,31,25,.5);
}
.nav-sheet::backdrop{background:rgba(15,31,25,.45);backdrop-filter:blur(2px)}
.nav-sheet[open]{animation:sheet-down .4s var(--ease)}
@keyframes sheet-down{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
.nav-sheet-top{display:flex;align-items:center;justify-content:space-between;padding:.9rem var(--gutter) 0}
.nav-sheet-top .kicker{margin:0}
.nav-sheet-close{
  width:2.4rem;height:2.4rem;border-radius:99px;border:1px solid var(--hair-light);background:var(--paper);
  font-size:1.4rem;line-height:1;cursor:pointer;color:var(--ink);
}
.nav-sheet nav{display:grid;padding:1rem var(--gutter) .4rem}
.nav-sheet nav a{
  font-family:'Fraunces',serif;font-weight:560;font-size:clamp(1.5rem,1.2rem + 1.6vw,2rem);line-height:1.15;
  color:var(--ink);text-decoration:none;padding:.5em 0;border-bottom:1px solid var(--hair-light);
}
.nav-sheet nav a[aria-current="page"]{color:var(--bronze)}
.nav-sheet-tel{
  display:block;padding:1.1rem var(--gutter) 1.4rem;
  font-family:'IBM Plex Mono',monospace;font-size:.82rem;letter-spacing:.1em;color:var(--bronze);text-decoration:none;
}
@media (prefers-reduced-motion:reduce){.nav-sheet[open]{animation:none}}

/* ---------- the building map, called out on the home page ----------
   Paper ground, the model's own frame as the picture, in a hairline like the
   stage it comes from. On a phone the words come first and the picture follows. */
.map-callout-grid{display:grid;gap:clamp(1.8rem,4vw,3.2rem);align-items:center}
@media (min-width:960px){.map-callout-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.map-callout-pic{display:block;background:var(--paper-deep);border:1px solid var(--hair-light);overflow:hidden}
.map-callout-pic img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;transition:transform 1.2s var(--ease)}
@media (hover:hover){.map-callout-pic:hover img{transform:scale(1.02)}}
@media (prefers-reduced-motion:reduce){.map-callout-pic img{transition:none}}

/* ---------- the rent special (the Live Savoy pattern, ported 9/7) ----------
   Rendered only when data/plans.json carries a special. Rose Garden is the one fill
   on the site that is allowed to shout; ink on it reads at 7:1. The sheen is a slow
   pass of light every seven seconds (the Marcus, 8/11); the return tab (Bishop Ridge,
   7/30) shows once the band has scrolled away, nudges three times, then holds still. */
.rent-special{
  position:relative;overflow:hidden;
  background:var(--rose);color:var(--ink);
  border-bottom:1px solid rgba(15,31,25,.18);
  scroll-margin-top:calc(var(--head-h,72px) + .5rem);
}
.rent-special::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:34%;
  transform:translateX(-130%) skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent);
  pointer-events:none;
  animation:special-sheen 7s ease-in-out 2.2s infinite;
}
@keyframes special-sheen{
  0%{transform:translateX(-130%) skewX(-18deg)}
  22%{transform:translateX(430%) skewX(-18deg)}
  100%{transform:translateX(430%) skewX(-18deg)}
}
.rent-special-inner{
  max-width:calc(var(--measure) + 2 * var(--gutter));margin:0 auto;padding:.9rem var(--gutter);
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem;
}
.rent-special-text{margin:0;flex:1 1 18rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .8rem}
.rent-special-badge{
  align-self:center;
  font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  background:var(--ink);color:var(--rose);border-radius:99px;padding:.35em .85em;
}
.rent-special-headline{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(1.15rem,1rem + .8vw,1.5rem);letter-spacing:-.01em;line-height:1.15}
.rent-special-detail{font-size:.95rem;color:rgba(15,31,25,.82)}
.rent-special-actions{display:inline-flex;align-items:center;gap:.5rem;margin-left:auto}
.rent-special .btn{background:var(--ink);border-color:var(--ink);color:var(--milk);padding:.62em 1.1em;font-size:.86rem}
.rent-special .btn:hover{background:var(--pine);border-color:var(--pine)}
.rent-special-close{
  background:transparent;border:0;color:currentColor;font-size:1.4rem;line-height:1;cursor:pointer;
  width:2.2rem;height:2.2rem;border-radius:99px;
}
.rent-special-close:hover{background:rgba(15,31,25,.14)}
.rent-special-return{
  position:fixed;top:var(--head-h,72px);right:clamp(.5rem,2.5vw,2rem);z-index:19;
  background:var(--rose);color:var(--ink);border:0;cursor:pointer;
  font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.65em 1.05em;min-height:2.6rem;border-radius:0 0 8px 8px;
  box-shadow:0 6px 18px rgba(15,31,25,.22);
  outline:2px solid var(--ink);outline-offset:-2px;
  transition:opacity .35s var(--ease);
}
.rent-special-return:hover{filter:brightness(1.06)}
/* while the band itself is on screen the tab has nothing to return to, so it steps out of the way
   (on a phone it would otherwise cover the end of the headline); it nudges three times the first
   time the band leaves the screen, then holds still for good */
.rent-special-return.is-here{opacity:0;pointer-events:none}
.rent-special-return.has-left:not(.is-here){animation:special-nudge 1.15s ease-in-out .3s 3}
@keyframes special-nudge{
  0%,100%{transform:translateY(0);box-shadow:0 6px 18px rgba(15,31,25,.22)}
  50%{transform:translateY(4px);box-shadow:0 12px 28px rgba(15,31,25,.4)}
}
@media (max-width:640px){
  .rent-special-inner{padding:.8rem var(--gutter)}
  .rent-special-actions{margin-left:0;width:100%;justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){
  .rent-special::after{animation:none}
  .rent-special-return{animation:none;transition:none}
}

/* ---------- the locator (the expert's item 9): one drawn map in the model's palette from OpenStreetMap data,
   images/locator.svg by tools/gen_locator.py; the labels are HTML over the drawing so they set in the site's
   type; on Neighborhood under the distances, on Contact under the address ---------- */
.locator{margin:clamp(2rem,4.5vw,3.2rem) 0 0}
.loc-stage{position:relative;border:1px solid var(--hair-light);background:var(--paper-deep);overflow:hidden}
.loc-stage img{display:block;width:100%;height:auto}
.loc-label,.loc-name{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none}
.loc-label{
  font-family:'IBM Plex Mono',monospace;font-size:clamp(.7rem,.45rem + .5vw,.78rem);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);background:rgba(244,248,240,.72);padding:.25em .55em;border-radius:99px;
}
.loc-name{font-family:'Fraunces',serif;font-style:italic;font-weight:560;font-size:clamp(1rem,.7rem + 1.2vw,1.6rem);color:var(--ink)}
.locator figcaption{margin-top:.8rem}

/* ---------- page hero (interior pages) ---------- */
.page-hero{padding:clamp(3.4rem,7vw,5.5rem) var(--gutter) clamp(2.6rem,5vw,4rem)}
.page-hero .band-inner>h1,.map-hero>div>h1{font-size:clamp(2.5rem,1.7rem + 4vw,5rem);max-width:18ch}   /* the map hero wraps its text beside the Map / List switch */

/* ---------- footer ---------- */
footer .word{
  font-family:'Fraunces',serif;font-weight:600;
  font-size:clamp(2.2rem,1.3rem + 4.6vw,4.6rem);
  line-height:1.06;letter-spacing:-.018em;text-wrap:balance;
  max-width:22ch;
  padding-bottom:clamp(2.2rem,5vw,3.6rem);
  border-bottom:1px solid var(--hair-dark);
}
footer .word em{font-style:italic;font-weight:520;color:var(--tan-bright)}
footer .meta{
  padding-top:clamp(1.6rem,4vw,2.4rem);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.8rem;
  font-family:'IBM Plex Mono',monospace;
  font-size:clamp(.75rem,.66rem + .2vw,.8rem);
  letter-spacing:.1em;color:var(--milk-soft);line-height:2.1;
}
footer .meta a{color:var(--milk);text-decoration:none;border-bottom:1px solid var(--hair-dark);transition:color .35s var(--ease),border-color .35s var(--ease)}
footer .meta a:hover{color:var(--tan-bright);border-color:var(--tan)}
footer .legal{
  margin-top:clamp(1.8rem,4vw,2.6rem);padding-top:1.2rem;
  border-top:1px solid var(--hair-dark);
  font-size:.75rem;letter-spacing:.1em;
  font-family:'IBM Plex Mono',monospace;color:var(--milk-soft);
  display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;
}
footer .legal a{color:inherit;text-decoration:none;border-bottom:1px solid var(--hair-dark)}
footer .legal a:hover{color:var(--tan-bright);border-color:var(--tan)}

/* ============================================================
   HOME
   ============================================================ */
.hero-home{
  display:grid;grid-template-columns:1fr;
  background:var(--paper);
}
.hero-home .type{
  padding:clamp(2.8rem,6vw,5rem) var(--gutter) clamp(2.6rem,5vw,4rem);
}
.hero-home h1{
  font-size:clamp(2.9rem,1.5rem + 6.6vw,5.4rem);   /* 5.4rem, 12ch: three lines at 1440, so the buttons clear the fold (the expert's item 4) */
  font-weight:640;line-height:.99;letter-spacing:-.022em;
  max-width:12ch;
}
.hero-home h1 em{font-style:italic;font-weight:530;color:var(--bronze)}
.hero-home .deck{
  margin-top:clamp(1.2rem,2.6vw,1.9rem);
  max-width:44ch;color:var(--ink-soft);
  font-size:clamp(1.02rem,.94rem + .45vw,1.3rem);line-height:1.55;text-wrap:pretty;
}
.hero-home .ctas{margin-top:clamp(1.6rem,3.4vw,2.4rem);display:flex;flex-wrap:wrap;gap:.8rem}
.hero-home .photo{position:relative}
.hero-home .photo img{width:100%;height:clamp(300px,56vw,460px);object-fit:cover;object-position:center 42%}
/* grand opening: one dark line under the header, home only */
.open-band{
  background:var(--pine);color:var(--milk);
  border-top:var(--seam);border-bottom:var(--seam);
  padding:.75em var(--gutter);
  text-align:center;
  font-family:'IBM Plex Mono',monospace;
  font-size:clamp(.7rem,.64rem + .3vw,.85rem);
  letter-spacing:.14em;text-transform:uppercase;
}
.hero-home .facts{
  margin-top:0;
  border-top:1px solid var(--hair-light);
  display:grid;grid-template-columns:repeat(4,1fr);
  max-width:none;
  padding-inline:var(--pad,var(--gutter));
}
.hero-home .facts .cell{
  border-right:1px solid var(--hair-light);
  padding:clamp(1.3rem,2.8vw,2.2rem) clamp(1rem,2.4vw,2rem);
}
/* the first figure sits on the logo's edge and the last on the measure's right edge, like the type above */
.hero-home .facts .cell:first-child{padding-left:0}
.hero-home .facts .cell:last-child{border-right:none;padding-right:0}
.hero-home .facts .n{
  font-family:'Fraunces',serif;font-weight:600;
  font-size:clamp(1.9rem,1.2rem + 2.8vw,3.4rem);line-height:1;letter-spacing:-.02em;
}
.hero-home .facts .l{
  margin-top:.65em;
  font-family:'IBM Plex Mono',monospace;
  font-size:clamp(.66rem,.62rem + .18vw,.76rem);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
}
@media (min-width:960px){
  .hero-home{
    /* the type's left edge is the measure's left edge, which is the logo's (the old value added a
       gutter on top of the centring and put the kicker 64 px in at 1440) */
    --pad:max(var(--gutter),(100vw - var(--measure)) / 2);
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:clamp(2rem,4vw,4rem);
  }
  .hero-home .type{grid-column:1;grid-row:1;align-self:center;padding-left:var(--pad);padding-right:0}
  .hero-home .photo{grid-column:2;grid-row:1;align-self:stretch}
  .hero-home .photo img{height:100%;min-height:480px}
  .hero-home .facts{grid-column:1 / -1;grid-row:2;
    padding-inline:var(--pad)}
}
@media (max-width:760px){
  .hero-home .facts{grid-template-columns:repeat(2,1fr)}
  .hero-home .facts .cell{border-bottom:1px solid var(--hair-light)}
  .hero-home .facts .cell:nth-child(2n+1){padding-left:0}
  .hero-home .facts .cell:nth-child(2n){border-right:none;padding-right:0}
}

/* photo trio on home */
.trio{
  margin-top:clamp(2.2rem,5vw,3.6rem);
  display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:auto auto;
  gap:clamp(.8rem,1.8vw,1.4rem);
}
.trio figure{position:relative;overflow:hidden}
.trio figure:first-child{grid-row:1 / span 2}
.trio img{width:100%;height:100%;object-fit:cover}
.trio figcaption{
  position:absolute;left:0;bottom:0;right:0;
  padding:2.4rem 1.1rem .8rem;
  background:linear-gradient(180deg,transparent,rgba(12,17,11,.72));
  font-family:'IBM Plex Mono',monospace;
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--milk);
}
@media (max-width:760px){
  .trio{grid-template-columns:1fr}
  .trio figure:first-child{grid-row:auto}
}
.aside-note{
  margin-top:1.2rem;
  font-family:'IBM Plex Mono',monospace;
  font-size:.8rem;letter-spacing:.06em;color:var(--ink-soft);   /* 12.8 px: a note carries sentences (the expert's item 6) */
}
.dark .aside-note,.dark-deep .aside-note{color:var(--milk-soft)}

/* essential band on home + page */
.essential-split{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(2.2rem,6vw,5rem);align-items:start;
}
.essential-split .big{
  font-family:'Fraunces',serif;font-weight:640;
  font-size:clamp(4rem,2.4rem + 7vw,8.5rem);
  line-height:.9;letter-spacing:-.03em;
}
.essential-split .big span{
  display:block;margin-top:1rem;
  font-family:'IBM Plex Mono',monospace;font-weight:500;
  font-size:clamp(.66rem,.62rem + .18vw,.76rem);
  letter-spacing:.18em;text-transform:uppercase;line-height:1.6;
  color:var(--tan-bright);
}
.essential-split p{max-width:48ch;color:var(--milk-soft);text-wrap:pretty}
.essential-split p+p{margin-top:1em}
.essential-split strong{color:var(--milk);font-weight:700}
@media (max-width:760px){.essential-split{grid-template-columns:1fr}}

/* ============================================================
   THE FLOOR PLAN BROWSER (home teaser + /floor-plans/)
   ------------------------------------------------------------
   Eleven cards, each carrying its own drawing on a white sheet
   laid on the paper ground. Narrowing by bedrooms is a radio
   group read by CSS :has(); no script, and with nothing checked
   every plan shows. The drawing on the card MORPHS into the
   drawing in the plan page hero (view-transition-name per plan):
   the card becomes the page.
   ============================================================ */
.plan-grid{
  margin-top:clamp(1.6rem,3.5vw,2.4rem);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,1.8vw,1.4rem);
}
.plan-grid.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.plan-grid,.plan-grid.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){
  .plan-grid,.plan-grid.four{grid-template-columns:1fr}
  /* one column: no row to align to, so the link follows the facts instead of pinning to the foot */
  .plan-tile .body{padding-bottom:1.25rem}
  .plan-tile .go{position:static;grid-column:1 / -1;margin-top:.8rem}
}
.plan-tile{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--hair-light);
  transition:border-color .4s var(--ease);
}
.plan-tile:hover{border-color:var(--tan)}
.plan-tile .draw{
  position:relative;aspect-ratio:16/10;background:#fff;overflow:hidden;
  padding:clamp(.5rem,1.2vw,.9rem);
}
.plan-tile .draw img{width:100%;height:100%;object-fit:contain;transition:transform 1.2s var(--ease)}
.plan-tile:hover .draw img{transform:scale(1.03)}
.plan-tile .tag,.plan-tile .shown{
  position:absolute;
  font-family:'IBM Plex Mono',monospace;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.45em .8em;line-height:1.2;
}
.plan-tile .tag{top:.7rem;right:.7rem;background:var(--rose);color:var(--ink);border-radius:99px}   /* ink on Rose Garden, 5.75:1 */
.plan-tile .shown{
  position:static;grid-column:1 / -1;margin-top:.45rem;padding:0;
  color:var(--bronze);font-size:.75rem;   /* a sentence, so the 12 px floor */
}
.plan-tile .body{
  padding:1.05rem 1.2rem 3.4rem;border-top:1px solid var(--hair-light);
  display:grid;grid-template-columns:auto 1fr;gap:.15rem 1rem;align-items:baseline;align-content:start;
  flex:1;position:relative;   /* the body fills the card, and the link pins to its foot: one height for the row's links */
}
.plan-tile .code{
  font-family:'Fraunces',serif;font-weight:640;
  font-size:clamp(1.7rem,1.4rem + 1vw,2.3rem);line-height:1;letter-spacing:-.015em;
}
.plan-tile .name{font-weight:600;font-size:.95rem;color:var(--ink-soft)}
.plan-tile .spec{
  grid-column:1 / -1;margin-top:.55rem;
  font-family:'IBM Plex Mono',monospace;
  font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
}
.plan-tile .delivery{grid-column:1 / -1;margin-top:.5rem}
.plan-tile .shown{margin-top:.35rem}
.plan-tile .go{position:absolute;left:1.2rem;bottom:1.25rem;font-weight:700;font-size:.88rem;color:var(--bronze);transition:color .3s var(--ease)}
.plan-tile:hover .go{color:var(--ink)}
/* the walk-through: each plan's drawing carries its name on both pages */
.vt-s1{view-transition-name:plan-s1}
.vt-a1{view-transition-name:plan-a1}
.vt-a2{view-transition-name:plan-a2}
.vt-a3{view-transition-name:plan-a3}
.vt-a4{view-transition-name:plan-a4}
.vt-a5{view-transition-name:plan-a5}
.vt-a6{view-transition-name:plan-a6}
.vt-a7{view-transition-name:plan-a7}
.vt-b1{view-transition-name:plan-b1}
.vt-b2{view-transition-name:plan-b2}
.vt-c1{view-transition-name:plan-c1}

/* the filter: one radio group, the data voice, pine when chosen */
.browser-filter{position:relative;display:flex;flex-wrap:wrap;gap:.5rem;margin-top:clamp(.4rem,1vw,.8rem)}  /* relative: the hidden radios sit inside the row, so focusing one never scrolls the page */
.browser-filter input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.browser-filter label{
  cursor:pointer;
  font-family:'IBM Plex Mono',monospace;
  font-size:clamp(.75rem,.64rem + .2vw,.78rem);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);
  padding:.7em 1.15em;border:1px solid var(--hair-light);border-radius:99px;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.browser-filter label b{font-weight:500;color:var(--bronze);margin-left:.55em;transition:color .35s var(--ease)}
.browser-filter label:hover{border-color:var(--tan);color:var(--ink)}
.browser-filter input:checked + label{background:var(--pine);color:var(--milk);border-color:var(--pine)}
.browser-filter input:checked + label b{color:var(--tan-bright)}
.browser-filter input:focus-visible + label{outline:2px solid var(--tan);outline-offset:2px}
.browser-count{
  margin-top:1.1rem;
  font-family:'Fraunces',serif;font-style:italic;font-weight:480;
  font-size:clamp(1rem,.94rem + .3vw,1.2rem);color:var(--bronze);
}
.browser-count span{display:none}
.browser-count span[data-beds="all"]{display:inline}
/* the narrowing itself */
.browser:has(#beds-0:checked) .plan-tile:not([data-beds="0"]),
.browser:has(#beds-1:checked) .plan-tile:not([data-beds="1"]),
.browser:has(#beds-2:checked) .plan-tile:not([data-beds="2"]),
.browser:has(#beds-3:checked) .plan-tile:not([data-beds="3"]){display:none}
.browser:has(#beds-0:checked) .browser-count span,
.browser:has(#beds-1:checked) .browser-count span,
.browser:has(#beds-2:checked) .browser-count span,
.browser:has(#beds-3:checked) .browser-count span{display:none}
.browser:has(#beds-0:checked) .browser-count span[data-beds="0"],
.browser:has(#beds-1:checked) .browser-count span[data-beds="1"],
.browser:has(#beds-2:checked) .browser-count span[data-beds="2"],
.browser:has(#beds-3:checked) .browser-count span[data-beds="3"]{display:inline}

/* ============================================================
   PLAN DETAIL PAGES
   ============================================================ */
.plan-hero{
  display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,4vw,3rem);
  padding:clamp(2.8rem,6vw,4.6rem) var(--gutter) clamp(2.8rem,6vw,4.4rem);
  /* the measure plus the gutters it carries itself, the header bar's construction: the kicker and the
     h1 sit on the logo's left edge and the drawing's right edge on the band's (they were 64 px in at 1440) */
  max-width:calc(var(--measure) + 2 * var(--gutter));margin:0 auto;
  align-items:center;
}
/* the drawing takes the larger share: at .92/1.08 the type column ran 652 px tall beside a 417 px drawing
   at 1440 and the drawing floated in empty paper (measured 9/7 night) */
@media (min-width:900px){.plan-hero{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.plan-hero .code{
  font-family:'Fraunces',serif;font-weight:660;
  font-size:clamp(4.6rem,3rem + 9vw,10rem);
  line-height:.86;letter-spacing:-.03em;
}
.plan-hero h1{font-size:clamp(1.5rem,1.2rem + 1.6vw,2.4rem);font-weight:560;margin-top:1rem;max-width:20ch;text-wrap:pretty}
.plan-hero .spec-row{
  margin-top:clamp(1.4rem,3vw,2rem);
  display:flex;flex-wrap:wrap;gap:1.1rem 2.2rem;
  font-family:'IBM Plex Mono',monospace;
  font-size:clamp(.75rem,.68rem + .2vw,.82rem);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);
}
.plan-hero .spec-row b{display:block;color:var(--ink);font-size:1.5em;letter-spacing:0;font-family:'Fraunces',serif;font-weight:620;margin-bottom:.2em}
.plan-hero .draw{background:#fff;border:1px solid var(--hair-light);padding:clamp(.6rem,1.5vw,1.2rem)}
.plan-hero .draw img{width:100%;height:auto;aspect-ratio:16/10;object-fit:contain}
/* the cut-away band on scanned plan pages */
.dollhouse{background:#000;border:1px solid var(--hair-dark)}
.dollhouse img{width:100%;aspect-ratio:16/9;object-fit:cover}
.plan-hero .delivery{margin-top:clamp(1.1rem,2.2vw,1.5rem)}
.plan-hero .ctas{margin-top:clamp(1.6rem,3vw,2.2rem);display:flex;flex-wrap:wrap;gap:.8rem}

/* photo walk strip */
.walk{
  margin-top:clamp(2rem,4.5vw,3.2rem);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.6vw,1.2rem);
}
@media (max-width:820px){.walk{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.walk{grid-template-columns:1fr}}
.walk figure{position:relative;overflow:hidden;background:var(--paper-deep)}
.walk img{width:100%;aspect-ratio:16/10;object-fit:cover}
.walk figcaption{
  padding:.6rem .15rem 0;
  font-family:'IBM Plex Mono',monospace;
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
}

/* tour frame */
.tour-frame{
  position:relative;aspect-ratio:16/9;
  border:1px solid var(--hair-dark);
  background:#000;
  margin-top:clamp(2rem,4.5vw,3.2rem);
}
.tour-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* the tours load on request (the expert's item 10): the cut-away still with a play control in the tag style;
   the player takes the frame on click (tour.js); without a script the control links to Matterport */
.tour-frame[data-tour]{cursor:pointer}
.tour-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
@media (hover:hover){.tour-frame[data-tour]:hover img{transform:scale(1.02)}}
.tour-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;
  font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);background:var(--rose);text-decoration:none;padding:1.3em 1.7em;border-radius:99px;   /* 12 px and 45 px tall: a thumb's target (session fifteen) */
  box-shadow:0 14px 34px -14px rgba(0,0,0,.7);white-space:nowrap;
}
.tour-frame.is-playing img,.tour-frame.is-playing .tour-play{display:none}
@media (prefers-reduced-motion:reduce){.tour-frame img{transition:none}}
.tour-grid{
  margin-top:clamp(2.2rem,5vw,3.6rem);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2.4rem);
}
@media (max-width:820px){.tour-grid{grid-template-columns:1fr}}
.tour-grid .tour-frame{margin-top:0;aspect-ratio:16/10}
.tour-grid .cap{
  margin-top:.95rem;
  font-family:'IBM Plex Mono',monospace;
  font-size:.82rem;letter-spacing:.1em;color:var(--milk);   /* full Parchment on the green, not the soft tint: Marc 9/7, the captions read faint */
}
.tour-grid .cap a{color:var(--tan-bright);text-decoration:none;border-bottom:1px solid var(--tan)}
.tours-note{color:var(--milk);font-size:.8rem}

/* prev / next plan rail */
.plan-rail{
  display:flex;justify-content:space-between;gap:1.5rem;
  padding:clamp(1.6rem,3.4vw,2.4rem) var(--gutter);
  border-top:1px solid var(--hair-light);
  max-width:calc(var(--measure) + 2 * var(--gutter));margin:0 auto;
  font-family:'Manrope',sans-serif;font-weight:700;
}
.plan-rail a{text-decoration:none;color:var(--bronze);transition:color .3s var(--ease)}
.plan-rail a:hover{color:var(--ink)}

/* ============================================================
   GALLERY
   ============================================================ */
.masonry{
  margin-top:clamp(2rem,4.5vw,3.2rem);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.6vw,1.2rem);
  /* a row-filling grid, not CSS columns: every photograph is 16:9, and columns filled downward,
     so the reading order ran down each stack and rows sat ragged (Marc, 9/8, desktop gallery) */
}
@media (max-width:900px){.masonry{grid-template-columns:repeat(2,1fr)}}
.masonry figure{
  margin:0;
  position:relative;overflow:hidden;background:var(--paper-deep);
}
.masonry img{width:100%}
.masonry figcaption{
  padding:.55rem .1rem 0;
  font-family:'IBM Plex Mono',monospace;
  font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);
}

/* ============================================================
   DETAILS LISTS (amenities, fees, neighborhood ledger)
   ============================================================ */
.cols-2{
  margin-top:clamp(2.2rem,5vw,3.6rem);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.2rem,6vw,4.6rem);
}
@media (max-width:760px){.cols-2{grid-template-columns:1fr}}
.list-h{
  font-family:'Fraunces',serif;font-style:italic;font-weight:500;
  font-size:clamp(1.05rem,1rem + .3vw,1.3rem);
  color:var(--bronze);margin-bottom:1.1rem;
}
.dark .list-h,.dark-deep .list-h{color:var(--tan-bright)}
.tick-list{list-style:none}
.tick-list li{
  padding:.8rem 0;border-bottom:1px solid var(--hair-light);
  display:flex;align-items:baseline;gap:1rem;
}
.dark .tick-list li,.dark-deep .tick-list li{border-color:var(--hair-dark)}
.tick-list li::before{
  content:"";flex:none;width:.45rem;height:.45rem;border-radius:99px;
  background:var(--tan);transform:translateY(-.1rem);
}
.kv{display:grid}
.kv .row{
  display:flex;justify-content:space-between;gap:1.5rem;
  padding:.8rem 0;border-bottom:1px solid var(--hair-light);
}
.dark .kv .row,.dark-deep .kv .row{border-color:var(--hair-dark)}
.kv .k{color:var(--ink-soft)}
.dark .kv .k,.dark-deep .kv .k{color:var(--milk-soft)}
.kv .v{text-align:right;font-weight:700}

/* photo captions: the room, then the home type and its size on a second line */
.trio figcaption span,.masonry figcaption span,.walk figcaption span{
  display:block;margin-top:.25em;font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;opacity:.72;
}

/* the community ledger on the home page: amenities as one wide grid, then the details as one wide
   grid, each under its own italic head; nothing side by side */
.ledger-wide{margin-top:clamp(2.2rem,5vw,3.6rem)}
.ledger-wide+.ledger-wide{margin-top:clamp(2.6rem,6vw,4.2rem)}
.amenity-grid{
  list-style:none;display:grid;grid-template-columns:repeat(3,1fr);column-gap:clamp(1.4rem,4vw,3rem);
  border-top:1px solid var(--hair-light);
}
.amenity-grid li{padding:.8rem 0;border-bottom:1px solid var(--hair-light);display:flex;align-items:baseline;gap:.9rem}
.amenity-grid li::before{content:"";flex:none;width:.45rem;height:.45rem;border-radius:99px;background:var(--tan);transform:translateY(-.1rem)}
.kv-wide{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(1.4rem,4vw,3rem);border-top:1px solid var(--hair-light)}
.kv-wide .row{display:flex;justify-content:space-between;gap:1.5rem;padding:.8rem 0;border-bottom:1px solid var(--hair-light)}
.kv-wide .k{color:var(--ink-soft)}
.kv-wide .v{text-align:right;font-weight:700;max-width:60%}
@media (max-width:900px){.amenity-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.amenity-grid,.kv-wide{grid-template-columns:1fr}}

/* essential housing: the limits table, the steps, the professions */
.limits{margin-top:clamp(1.6rem,4vw,2.6rem);width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.limits caption{text-align:left;font-family:'Fraunces',serif;font-style:italic;font-weight:500;color:var(--bronze);padding-bottom:.9rem}
.limits th,.limits td{padding:.75rem 0;border-bottom:1px solid var(--hair-light);text-align:right}
.limits th:first-child,.limits td:first-child{text-align:left}
.limits thead th{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);border-bottom:1px solid var(--ink)}
.limits td{font-family:'IBM Plex Mono',monospace;font-size:clamp(.86rem,.8rem + .3vw,1rem)}
.limits tbody th{font-weight:500;color:var(--ink-soft)}
.limits-wrap{overflow-x:auto;max-width:44rem}
.steps{list-style:none;counter-reset:s;margin-top:clamp(2rem,5vw,3.2rem);display:grid;gap:clamp(1.4rem,3vw,2.2rem);max-width:62ch}
.steps li{counter-increment:s;display:grid;grid-template-columns:3.2rem 1fr;gap:1rem;align-items:start}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:'Fraunces',serif;font-weight:640;font-size:clamp(1.8rem,1.4rem + 1.6vw,2.6rem);line-height:1;color:var(--tan);letter-spacing:-.02em}
.steps b{display:block;font-family:'Fraunces',serif;font-weight:600;font-size:clamp(1.1rem,1rem + .5vw,1.4rem);margin-bottom:.35rem}
.steps p{color:var(--ink-soft);text-wrap:pretty}
.who{margin-top:clamp(1.6rem,4vw,2.4rem);display:flex;flex-wrap:wrap;gap:.5rem}
.who span{font-family:'IBM Plex Mono',monospace;font-size:clamp(.68rem,.64rem + .2vw,.78rem);letter-spacing:.12em;text-transform:uppercase;padding:.7em 1.15em;border:1px solid var(--hair-light);border-radius:99px;color:var(--ink-soft)}

/* neighborhood distance ledger */
.ledger{margin-top:clamp(2.2rem,5vw,3.4rem)}
.ledger .row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 2rem;align-items:baseline;
  padding:1.05rem 0;border-bottom:1px solid var(--hair-light);
}
.ledger .place{font-weight:700;font-size:clamp(1.02rem,.96rem + .3vw,1.2rem)}
.ledger .place small{display:block;font-weight:500;color:var(--ink-soft);font-size:.85em;margin-top:.15rem}
.ledger .fig{
  font-family:'Fraunces',serif;font-weight:620;
  font-size:clamp(1.3rem,1.1rem + 1vw,1.9rem);white-space:nowrap;
}
.ledger .fig small{font-family:'IBM Plex Mono',monospace;font-size:.5em;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-left:.4em}

/* FAQ blocks (rendered, then mirrored in schema) */
.qa{margin-top:clamp(2.2rem,5vw,3.4rem);max-width:56ch}
.qa dt{
  font-family:'Fraunces',serif;font-weight:600;
  font-size:clamp(1.15rem,1.05rem + .5vw,1.5rem);
  margin-top:clamp(1.8rem,4vw,2.6rem);
}
.qa dd{margin-top:.7rem;color:var(--ink-soft);text-wrap:pretty}
.dark .qa dd{color:var(--milk-soft)}

/* contact page */
.contact-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.6rem,7vw,6rem);
  align-items:start;
}
.contact-grid>div{padding-top:clamp(1.4rem,3vw,2.2rem);border-top:1px solid var(--hair-light)}
.contact-grid .list-h{margin-top:0}
.contact-ctas{margin-top:clamp(3rem,6vw,4.6rem);display:flex;gap:.8rem;flex-wrap:wrap}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}
.contact-grid .phone-big{
  font-family:'Fraunces',serif;font-weight:640;
  font-size:clamp(2rem,1.4rem + 3.4vw,3.9rem);letter-spacing:-.015em;
  color:var(--ink);text-decoration:none;
  border-bottom:3px solid var(--tan);
  transition:color .3s var(--ease);
}
.contact-grid .phone-big:hover{color:var(--bronze)}

/* ============================================================
   THE BUILDING MAP (/homes/)
   ------------------------------------------------------------
   Three buildings as stacking plans. Each floor is a row of
   cells placed by stack; J and E sit on a double-loaded
   corridor, so a floor is two rows of homes around a hall
   line. Cells are coloured by bedroom count, four brand
   colours: Lakeside Blue (studio), Leafy Green (one bedroom),
   Rose Garden (two bedroom), Parkside Green (three bedroom).
   Narrowing dims the other cells instead of hiding them, so
   the shape of the building never changes. A leased home (live
   feed only) keeps its colour as an outline on white.
   ============================================================ */
.homes{
  --map-0:#9AB9E1;--map-0-ink:var(--ink);     /* Lakeside Blue */
  --map-1:#5C855A;--map-1-ink:var(--milk);    /* Leafy Green */
  --map-2:#E17958;--map-2-ink:var(--ink);     /* Rose Garden */
  --map-3:#004D36;--map-3-ink:var(--milk);    /* Parkside Green */
  --cell:clamp(2.75rem,2.2rem + 2.2vw,3.9rem);
}
/* the filter row (session fourteen, the expert's item 1): the four bedroom chips carry their colour, so the
   row is the key and the separate key is gone; the patio-or-yard toggle ends the row. Map and List sit at
   the hero's right edge, on the lede's last line, once the model has drawn (six chips and the switch did not
   fit one row at the 12 px floor; with no script there is only the list and no switch) */
.map-hero{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.2rem 2rem}
.map-filter label[data-beds]{display:inline-flex;align-items:center;gap:.5rem}
.map-filter label[data-beds]::before{content:"";width:.6rem;height:.6rem;border-radius:2px;flex:none}
.map-filter label[data-beds="0"]::before{background:var(--map-0)}
.map-filter label[data-beds="1"]::before{background:var(--map-1)}
.map-filter label[data-beds="2"]::before{background:var(--map-2)}
.map-filter label[data-beds="3"]::before{background:var(--map-3)}
.map-filter label.yard{border-color:var(--tan)}
.map-view{position:relative;display:none;flex:none;border:1px solid var(--hair-light);border-radius:99px;padding:.2rem}
.homes.has-model .map-view{display:inline-flex}
.map-view input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.map-view label{
  cursor:pointer;font-family:'IBM Plex Mono',monospace;
  font-size:clamp(.68rem,.64rem + .2vw,.78rem);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
  padding:.55em 1em;border-radius:99px;transition:background .35s var(--ease),color .35s var(--ease);
}
.map-view label:hover{color:var(--ink)}
.map-view input:checked + label{background:var(--ink);color:var(--milk)}
.map-view input:focus-visible + label{outline:2px solid var(--tan);outline-offset:2px}
/* the count line is spoken, not shown: the chips carry the counts, so on this page it reads to a screen reader only */
.homes .browser-count{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
/* the two views: Map hides the list, List hides the model */
.homes.has-model:has(#view-plan:checked) .map-list,.homes.has-model:has(#view-3d:checked) .map-list{display:none}
/* the plan view never turns: the arrows belong to 3D */
.model[data-mode="plan"] .model-bar button[data-act="left"],.model[data-mode="plan"] .model-bar button[data-act="right"]{display:none}
/* the floor rail's counts once a filter is on: matching homes on that floor, a small pill at the tile's shoulder */
.model-floors label{position:relative}
.model-floors label b{
  position:absolute;top:-.45rem;right:-.55rem;min-width:1.4rem;height:1.4rem;padding:0 .3rem;border-radius:99px;
  background:var(--rose);color:var(--ink);font-size:.75rem;font-weight:700;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
}
.homes:has(#view-list:checked) .model{display:none}
.map-mode{margin-top:1rem}
.map-sample{
  margin-top:1rem;display:inline-block;
  font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);background:var(--rose);   /* ink on Rose Garden, 5.75:1; white was 2.97:1 (the expert's item 6) */padding:.5em .9em;border-radius:99px;
}
.building{margin-top:clamp(3rem,6vw,4.6rem)}
.building-head h2{font-size:clamp(1.7rem,1.3rem + 1.8vw,2.7rem)}
.building-head .lede{margin-top:.7rem;max-width:56ch}
.floor{
  display:grid;grid-template-columns:minmax(6.2rem,9rem) minmax(0,1fr);gap:0 clamp(.8rem,2vw,1.6rem);align-items:center;
  padding:clamp(.55rem,1.2vw,.85rem) 0;border-bottom:1px solid var(--hair-light);
}
.building .floor:first-of-type{border-top:1px solid var(--hair-light);margin-top:clamp(1.4rem,3vw,2.2rem)}
.floor-label b{display:block;font-family:'Fraunces',serif;font-weight:600;font-size:clamp(1rem,.94rem + .3vw,1.2rem);line-height:1.1}
.floor-label span{display:block;margin-top:.25rem;font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
/* the stack: one column per stack pair; scrolls sideways on a phone rather than shrinking the cells */
.stack{
  display:grid;grid-template-columns:repeat(var(--cols),minmax(var(--cell),1fr));gap:.3rem;
  min-width:0;overflow-x:auto;overscroll-behavior-x:contain;padding:.15rem .15rem .45rem;
  scrollbar-width:thin;
}
.stack.corridor{grid-template-rows:auto .55rem auto}
.stack .hall{
  height:.55rem;border-top:1px dashed var(--tan);border-bottom:1px dashed var(--tan);opacity:.7;
}
.slot{min-width:0}
.home{
  display:grid;grid-template-rows:auto 1fr auto;align-content:stretch;justify-items:start;
  min-height:var(--cell);height:100%;padding:.32rem .4rem .3rem;border-radius:3px;
  text-decoration:none;color:var(--home-ink,var(--ink));background:var(--home-bg,var(--paper-deep));
  border:1.5px solid transparent;position:relative;
  transition:transform .35s var(--ease),opacity .35s var(--ease),box-shadow .35s var(--ease);
}
.home[data-beds="0"]{--home-bg:var(--map-0);--home-ink:var(--map-0-ink);--home-line:var(--map-0)}
.home[data-beds="1"]{--home-bg:var(--map-1);--home-ink:var(--map-1-ink);--home-line:var(--map-1)}
.home[data-beds="2"]{--home-bg:var(--map-2);--home-ink:var(--map-2-ink);--home-line:var(--map-2)}
.home[data-beds="3"]{--home-bg:var(--map-3);--home-ink:var(--map-3-ink);--home-line:var(--map-3)}
.home .u{font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.04em;opacity:.82}   /* 12 px: a four-digit number fits the cell at every width */
.home .p{font-family:'Fraunces',serif;font-weight:640;font-size:clamp(.95rem,.85rem + .45vw,1.25rem);line-height:1;align-self:end;letter-spacing:-.01em}
.home .r{font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.02em;min-height:.9rem;opacity:.92}   /* 12 px: $1,445 is 43 px, the cell 79 px at 1440 and 54 px on a phone (session fifteen) */
.home:hover,.home:focus-visible{transform:translateY(-2px);box-shadow:0 6px 18px -8px rgba(15,31,25,.45);outline:none;z-index:2}
.home:focus-visible{border-color:var(--ink)}
/* hover: the square footage */
.home::after{
  content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + .35rem);transform:translateX(-50%) translateY(4px);
  background:var(--ink);color:var(--milk);white-space:nowrap;
  font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.1em;padding:.35em .6em;border-radius:3px;
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease);z-index:3;
}
@media (hover:hover){.home:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}}
/* accessible home: a small ring in the corner */
.home[data-acc]::before{content:"";position:absolute;top:.3rem;right:.3rem;width:.42rem;height:.42rem;border-radius:99px;border:1.5px solid currentColor;opacity:.75}
/* live feed: a leased home is outlined, not filled */
.home[data-status="unavailable"]{background:#fff;color:var(--ink-soft);border-color:var(--home-line)}
.home[data-status="unavailable"] .r::before{content:"leased"}
/* narrowing: dim, never hide, so the building keeps its shape */
.homes:has(#beds-0:checked) .home:not([data-beds="0"]),
.homes:has(#beds-1:checked) .home:not([data-beds="1"]),
.homes:has(#beds-2:checked) .home:not([data-beds="2"]),
.homes:has(#beds-3:checked) .home:not([data-beds="3"]),
.homes[data-plan-focus] .home:not(.is-focus){opacity:.16;pointer-events:none}
.homes[data-yard-only="1"] .home:not([data-yard]){opacity:.16;pointer-events:none}
/* the plan chips narrow with the bedroom choice */
.homes:has(#beds-0:checked) .plan-filter label[data-beds]:not([data-beds="0"]),
.homes:has(#beds-1:checked) .plan-filter label[data-beds]:not([data-beds="1"]),
.homes:has(#beds-2:checked) .plan-filter label[data-beds]:not([data-beds="2"]),
.homes:has(#beds-3:checked) .plan-filter label[data-beds]:not([data-beds="3"]){display:none}
/* the plan chips: a lighter second row, on the page only once a bedroom count is chosen (the rules above
   narrow them to that count's plans); under All homes the row is not on the page */
.homes:has(#beds-all:checked) .plan-filter{display:none}
.plan-filter{margin-top:.6rem;gap:.4rem}
.plan-filter label{padding:.6em .95em;font-size:clamp(.64rem,.6rem + .2vw,.72rem)}
.plan-filter label[data-beds]{display:inline-flex;align-items:center;gap:.45rem}
.plan-filter label[data-beds]::before{content:"";width:.5rem;height:.5rem;border-radius:2px;flex:none}
.plan-filter label[data-beds="0"]::before{background:var(--map-0)}
.plan-filter label[data-beds="1"]::before{background:var(--map-1)}
.plan-filter label[data-beds="2"]::before{background:var(--map-2)}
.plan-filter label[data-beds="3"]::before{background:var(--map-3)}
.delivery{margin-top:.6rem;font-family:'IBM Plex Mono',monospace;font-size:clamp(.75rem,.64rem + .2vw,.78rem);   /* 12 px floor at 390 (session fifteen; it was 11 px on 59 words of the browser) */letter-spacing:.1em;text-transform:uppercase;color:var(--bronze)}
.delivery[data-delivery="finished"]{color:var(--pine)}
/* the list of every home: the page's second view (List on the switch), and the only view without a script */
.map-list{margin-top:.4rem}
.map-list .building:first-child{margin-top:clamp(1.6rem,3.4vw,2.4rem)}
.homes:has(#beds-0:checked) .browser-count span,
.homes:has(#beds-1:checked) .browser-count span,
.homes:has(#beds-2:checked) .browser-count span,
.homes:has(#beds-3:checked) .browser-count span{display:none}
.homes:has(#beds-0:checked) .browser-count span[data-beds="0"],
.homes:has(#beds-1:checked) .browser-count span[data-beds="1"],
.homes:has(#beds-2:checked) .browser-count span[data-beds="2"],
.homes:has(#beds-3:checked) .browser-count span[data-beds="3"]{display:inline}
/* a phone pans each floor sideways */
@media (max-width:640px){
  .floor{grid-template-columns:1fr;gap:.35rem 0}
  .floor-label{display:flex;align-items:baseline;gap:.8rem}
  .floor-label span{margin-top:0}
}

/* ---- the model: the buildings in the round, drawn on a canvas by homes/model.js ----
   Hidden until the script proves it can draw; the floor-by-floor map below is the no-script
   truth. The stage is Parchment with the seam hairline, the way the dark bands are framed. */
.model{margin-top:clamp(1rem,1.6vw,1.3rem)}
.model-frame{position:relative}
.model-stage{
  position:relative;
  background:var(--paper-deep);border:1px solid var(--hair-light);
  overflow:hidden;
}
.model-stage canvas{
  display:block;width:100%;aspect-ratio:16/10;cursor:grab;touch-action:pan-y;
  opacity:0;transition:opacity 1.1s var(--ease);
}
.model.is-in canvas{opacity:1}
.model-stage canvas.is-drag{cursor:grabbing}
.model-stage canvas:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.model-tip{
  position:absolute;transform:translate(-50%,-140%);pointer-events:none;white-space:nowrap;
  background:var(--ink);color:var(--milk);padding:.35em .6em;border-radius:3px;
  font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.06em;
}
.model-bar{
  position:absolute;right:.8rem;bottom:.8rem;display:flex;gap:.4rem;
}
.model-bars{position:absolute;inset:auto 0 0 0;pointer-events:none}
.model-bars .model-bar{pointer-events:auto}
.model-bar button{
  font:inherit;font-weight:700;font-size:.82rem;line-height:1;padding:.6em .8em;min-width:2.4rem;
  border:1px solid var(--hair-light);background:var(--paper);color:var(--ink);border-radius:99px;cursor:pointer;
  transition:border-color .35s var(--ease),color .35s var(--ease),background .35s var(--ease);
}
.model-bar button:hover{border-color:var(--tan);color:var(--bronze)}
.model-bar button[aria-pressed="true"]{background:var(--ink);color:var(--milk);border-color:var(--ink)}
/* the floor rail on the frame's left edge (session fourteen): a floor peels the floors above it; All shows
   the whole building; the same radios the tiles under the frame carried, so model.js reads them unchanged */
.model-floors{position:absolute;left:.8rem;top:.8rem;display:flex;flex-direction:column;gap:.3rem;z-index:2}
.model-floors input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.model-floors label{
  font-family:'Manrope',sans-serif;font-weight:700;font-size:.82rem;line-height:1;
  width:2.4rem;height:2.4rem;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--hair-light);background:var(--paper);color:var(--ink);border-radius:99px;cursor:pointer;
  transition:border-color .35s var(--ease),color .35s var(--ease),background .35s var(--ease);
}
.model-floors label:hover{border-color:var(--tan);color:var(--bronze)}
.model-floors input:checked + label{background:var(--ink);color:var(--milk);border-color:var(--ink)}
.model-floors input:focus-visible + label{outline:2px solid var(--tan);outline-offset:2px}
/* the hint: one line at the frame's bottom edge, in with the drawing, gone on the first drag, wheel or key */
.model-hint{
  position:absolute;left:50%;bottom:1.05rem;transform:translateX(-50%);margin:0;pointer-events:none;white-space:nowrap;
  font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
  background:rgba(244,248,240,.85);padding:.5em 1em;border-radius:99px;
  opacity:0;transition:opacity .8s var(--ease);
}
.model.is-in .model-hint{opacity:1}
.model.is-touched .model-hint{opacity:0}
/* Reset appears once the view has moved from the arrival pose */
.model-bar button[data-act="reset"]{display:none}
.model.is-moved .model-bar button[data-act="reset"]{display:inline-block}
.model .aside-note{margin-top:.9rem}
.model-bar--left{right:auto;left:.8rem}
.model-bar--left button[aria-pressed="true"]{background:var(--pine);border-color:var(--pine)}
@media (max-width:640px){
  /* the model first on a phone: full bleed at 4:5, the buttons under it, the drawing alone */
  .model{margin-top:1rem}
  .model-stage{margin-inline:calc(-1 * var(--gutter));border-left:0;border-right:0}
  .model-stage canvas{aspect-ratio:4/5}
  .model-bars{position:static;display:flex;flex-direction:column;gap:.5rem;margin-top:.6rem}
  .model-bar,.model-bar--left{position:static;justify-content:flex-start;gap:.35rem;flex-wrap:wrap}
  .model-bar button{padding:.62em .75em;font-size:.78rem}
  /* the floor rail and the hint on a phone: the rail static under the stage with the bars until the mobile
     session sizes it on the frame (44 px targets, clear of the blocks); the hint at the top of the stage */
  .model-floors{position:static;flex-direction:row;flex-wrap:wrap;gap:.35rem;margin-top:.6rem}
  .model-hint{bottom:auto;top:.8rem}
}
@media (prefers-reduced-motion:reduce){.model-stage canvas{transition:none}}

/* the home panel: a sheet from the right on desktop, from the bottom on a phone */
.home-panel{
  border:0;padding:0;margin:0;max-width:none;max-height:none;
  width:min(100vw,34rem);height:100dvh;inset:0 0 0 auto;
  background:var(--paper);color:var(--ink);
  border-left:var(--seam);
  box-shadow:-24px 0 60px -30px rgba(15,31,25,.5);
}
.home-panel::backdrop{background:rgba(15,31,25,.45);backdrop-filter:blur(2px)}
.home-panel[open]{animation:panel-in .45s var(--ease)}
@keyframes panel-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.hp-close-row{position:sticky;top:0;display:flex;justify-content:flex-end;padding:.7rem .9rem 0;z-index:1}
.hp-close{
  width:2.4rem;height:2.4rem;border-radius:99px;border:1px solid var(--hair-light);background:var(--paper);
  font-size:1.4rem;line-height:1;cursor:pointer;color:var(--ink);
}
.hp-close:hover{border-color:var(--tan);color:var(--bronze)}
.hp-body{padding:.4rem clamp(1.3rem,4vw,2.2rem) clamp(2rem,5vw,3rem);overflow-y:auto;height:calc(100dvh - 3.3rem)}
.hp-body .code{font-family:'Fraunces',serif;font-weight:660;font-size:clamp(3.6rem,2.6rem + 4vw,5.4rem);line-height:.9;letter-spacing:-.03em}
.hp-body h2{font-size:clamp(1.25rem,1.1rem + .9vw,1.7rem);font-weight:560;margin-top:.8rem;max-width:22ch;text-wrap:pretty}
.hp-body .spec-row{margin-top:1.2rem;display:flex;flex-wrap:wrap;gap:.9rem 1.8rem;font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.hp-body .spec-row b{display:block;color:var(--ink);font-size:1.5em;letter-spacing:0;font-family:'Fraunces',serif;font-weight:620;margin-bottom:.2em}
.hp-avail{margin-top:1.2rem;font-weight:700;padding:.8rem 1rem;border-left:3px solid var(--tan);background:var(--paper-deep)}
.hp-avail[data-status="available"]{border-left-color:var(--map-1)}
.hp-avail[data-status="unavailable"]{border-left-color:var(--rose);font-weight:500;color:var(--ink-soft)}
.hp-body .draw{margin-top:1.3rem;background:#fff;border:1px solid var(--hair-light);padding:.7rem}
.hp-body .draw img{width:100%;height:auto;aspect-ratio:16/10;object-fit:contain}
/* three photographs under the drawing (Marc, 9/8), each opening full screen */
.hp-photos{margin-top:1.1rem;display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
.hp-photos figure{margin:0;background:var(--paper-deep)}
.hp-photos img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;cursor:zoom-in}
.hp-photos figcaption{padding:.4rem .1rem 0;font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
#hp-photos-note{margin-top:.6rem}
.hp-body .ctas{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.7rem}
.hp-body .ctas .more{flex-basis:100%;margin-top:.35rem}
@media (max-width:640px){
  .home-panel{width:100vw;height:auto;max-height:92dvh;inset:auto 0 0 0;border-left:0;border-top:var(--seam)}
  .home-panel[open]{animation-name:panel-up}
  @keyframes panel-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  .hp-body{height:auto;max-height:calc(92dvh - 3.3rem)}
}
@media (prefers-reduced-motion:reduce){.home-panel[open]{animation:none}.home,.home::after{transition:none}}


/* ============================================================
   THE WAY IN: "Ask about this home", one form on every page
   (home, every plan page, the map panel, Contact). Paper ground,
   hairline fields, the data voice for labels, the house button.
   ============================================================ */
.ask-band{border-top:1px solid var(--hair-light)}
.ask{display:grid;gap:clamp(1.8rem,4vw,3rem)}
@media (min-width:900px){.ask:not(.compact){grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}}
.ask-head h2{margin-top:1rem}
.ask-head .lede{margin-top:1rem}
.ask-fields{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.2rem;position:relative}
@media (max-width:560px){.ask-fields{grid-template-columns:1fr}}
.ask .f,.apply-form .f{display:grid;gap:.45rem;min-width:0}
.ask .f span,.apply-form .f span{
  font-family:'IBM Plex Mono',monospace;font-size:clamp(.75rem,.64rem + .2vw,.78rem);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
}
.ask input,.ask select,.apply-form input:not([type="checkbox"]){
  font:inherit;font-size:max(1rem,16px);color:var(--ink);background:#fff;
  border:1px solid var(--hair-light);border-radius:0;padding:.7em .9em;width:100%;min-height:3.1rem;
  transition:border-color .3s var(--ease);
}
.ask select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--bronze) 50%),linear-gradient(135deg,var(--bronze) 50%,transparent 50%);background-position:calc(100% - 1.3rem) 50%,calc(100% - .95rem) 50%;background-size:.35rem .35rem;background-repeat:no-repeat;padding-right:2.6rem}
.ask input:focus-visible,.ask select:focus-visible,.apply-form input:focus-visible{outline:2px solid var(--tan);outline-offset:1px;border-color:var(--tan)}
.ask-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.ask-send{grid-column:1 / -1;display:flex;align-items:center;gap:1rem 1.2rem;flex-wrap:wrap;margin-top:.3rem}
.ask-or{font-size:.95rem;color:var(--ink-soft)}
.ask-or a{color:var(--bronze);font-weight:700;text-decoration:none;border-bottom:2px solid var(--tan)}
.ask-status{grid-column:1 / -1;font-weight:700;padding:.85rem 1rem;border-left:3px solid var(--tan);background:var(--paper-deep)}
.ask-privacy{grid-column:1 / -1;font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.06em;color:var(--ink-soft);line-height:1.7}
.ask-privacy a{color:var(--bronze);text-decoration:none;border-bottom:1px solid var(--tan)}
.ask.is-sent .ask-fields>:not(.ask-status){display:none}
/* ---------- /apply/: the labelled sample of the application (delete with build_apply) ----------
   The eight steps as a rail on the left, step one as a card on the right, the fee facts under the
   rail. The sample banner is the one Rose Garden chip, the same as the map's sample-pricing chip. */
.apply-sample{
  margin-top:clamp(1.2rem,2.4vw,1.6rem);display:inline-block;
  font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);background:var(--rose);padding:.5em .9em;border-radius:99px;   /* ink on Rose Garden, 5.75:1 */
}
.apply-grid{display:grid;gap:clamp(1.8rem,4vw,3rem)}
@media (min-width:900px){.apply-grid{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);align-items:start}}
.apply-rail{list-style:none;counter-reset:st;border-top:1px solid var(--hair-light)}
.apply-rail li{
  counter-increment:st;display:flex;align-items:baseline;gap:1rem;
  padding:.8rem 0;border-bottom:1px solid var(--hair-light);
  font-weight:600;font-size:.95rem;color:var(--ink-soft);
}
.apply-rail li::before{
  content:counter(st,decimal-leading-zero);flex:none;width:2rem;
  font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.12em;color:var(--bronze);
}
.apply-rail li[aria-current="step"]{color:var(--ink);font-weight:700}
.apply-rail li[aria-current="step"]::before{color:var(--pine)}
.apply-costs{margin-top:clamp(1.8rem,4vw,2.6rem)}
.apply-card{background:#fff;border:1px solid var(--hair-light);padding:clamp(1.3rem,3vw,2.2rem)}
.apply-card .kicker{margin-bottom:.8rem}
.apply-card h2{font-size:clamp(1.4rem,1.2rem + 1vw,2rem);font-weight:560;max-width:20ch}
.apply-for{margin-top:1.1rem;padding:.8rem 1rem;border-left:3px solid var(--tan);background:var(--paper-deep);font-weight:700}
.apply-for a{color:var(--bronze);font-weight:700;text-decoration:none;border-bottom:2px solid var(--tan)}
.apply-fields{margin-top:1.4rem;display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.2rem}
@media (max-width:560px){.apply-fields{grid-template-columns:1fr}}
.apply-check{grid-column:1 / -1;display:flex;gap:.8rem;align-items:flex-start;font-size:.92rem;color:var(--ink-soft);line-height:1.5}
.apply-check input{width:1.1rem;height:1.1rem;margin-top:.3rem;flex:none;accent-color:var(--pine)}
.apply-send{grid-column:1 / -1;display:flex;align-items:center;gap:1rem 1.2rem;flex-wrap:wrap;margin-top:.3rem}
/* the privacy page */
.prose{max-width:62ch}
.prose h2{font-size:clamp(1.25rem,1.1rem + .8vw,1.7rem);font-weight:560;margin-top:clamp(1.8rem,4vw,2.6rem)}
.prose h2:first-child{margin-top:0}
.prose p{margin-top:.7rem}
.prose a{color:var(--bronze);font-weight:700;text-decoration:none;border-bottom:2px solid var(--tan)}

/* ============================================================
   THE DRAWING, FULL SCREEN (plan pages, the map panel)
   The Enlarge chip sits in the drawing's corner; on a phone the
   drawing comes first on a plan page.
   ============================================================ */
.draw{position:relative}
.draw img.can-zoom{cursor:zoom-in}
.draw-zoom{
  position:absolute;right:.7rem;bottom:.7rem;
  font:inherit;font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);background:var(--paper);border:1px solid var(--hair-light);border-radius:99px;
  padding:.5em .9em;cursor:pointer;
}
.draw-zoom:hover{border-color:var(--tan);color:var(--bronze)}
@media (max-width:640px){
  .plan-hero>div:last-child{order:-1}
  .plan-hero .draw{margin-inline:calc(-1 * var(--gutter));border-left:0;border-right:0}
}

/* ============================================================
   HOME BY HOME (session fifteen, Marc 9/8): every plan page lists its homes by building and floor, each
   row a tray that opens with the way to apply, tour or find it on the map. The availability adapter
   (avail.js) fills the rent and the move-in date when a feed exists, the same numbers the map shows;
   otherwise the building's line stands. Native details: the trays open without a script.
   ============================================================ */
.plan-homes{border-top:1px solid var(--hair-light)}
.plan-homes .hl-group{
  margin-top:clamp(2.2rem,4.5vw,3.2rem);
  display:flex;align-items:baseline;flex-wrap:wrap;gap:.4rem 1.2rem;
  font-family:'Fraunces',serif;font-weight:600;font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);line-height:1.1;
}
.plan-homes .hl-group .n{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.plan-homes .hl-group .delivery{margin:0;margin-left:auto}
.homes-ledger{list-style:none;margin:.9rem 0 0;padding:0;border-top:1px solid var(--hair-light)}
.hl{border-bottom:1px solid var(--hair-light);transition:background .3s var(--ease)}
.hl summary{
  list-style:none;cursor:pointer;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto 1.7rem;gap:.25rem 1.2rem;align-items:baseline;
  padding:.9rem .25rem;
}
.hl summary::-webkit-details-marker{display:none}
.hl summary:hover,.hl details[open] summary{background:var(--paper-deep)}
.hl summary:focus-visible{outline:2px solid var(--tan);outline-offset:-2px}
.hl-unit{font-family:'Fraunces',serif;font-weight:640;font-size:clamp(1.15rem,1rem + .6vw,1.45rem);line-height:1;letter-spacing:-.01em;min-width:3.4em}
.hl-where{font-weight:600}
.hl-facts{grid-column:2;font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.hl-avail{
  grid-column:3;grid-row:1 / span 2;align-self:center;text-align:right;
  font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bronze);
}
.hl[data-delivery="finished"] .hl-avail{color:var(--pine)}
.hl[data-status="available"] .hl-avail{color:var(--pine);font-weight:500}
.hl[data-status="unavailable"] .hl-avail{color:var(--ink-soft)}
.hl[data-status="available"]{box-shadow:inset 3px 0 var(--pine)}
.hl[data-status="available"] summary{padding-left:.9rem}
.hl[data-status="unavailable"] .hl-unit,.hl[data-status="unavailable"] .hl-where{color:var(--ink-soft)}
.hl-open{
  grid-column:4;grid-row:1 / span 2;align-self:center;justify-self:end;
  width:1.7rem;height:1.7rem;border:1px solid var(--hair-light);border-radius:99px;position:relative;
  transition:border-color .35s var(--ease);
}
.hl summary:hover .hl-open{border-color:var(--tan)}
.hl-open::before,.hl-open::after{content:"";position:absolute;left:50%;top:50%;width:.62rem;height:1px;background:var(--bronze);transform:translate(-50%,-50%)}
.hl-open::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .35s var(--ease)}
.hl details[open] .hl-open::after{transform:translate(-50%,-50%) rotate(0)}
.hl-tray{padding:.3rem .25rem 1.5rem}
.hl[data-status="available"] .hl-tray{padding-left:.9rem}
.hl-line{font-weight:700;padding:.8rem 1rem;border-left:3px solid var(--tan);background:var(--paper-deep);max-width:52ch}
.hl[data-status="available"] .hl-line{border-left-color:var(--pine)}
.hl[data-status="unavailable"] .hl-line{border-left-color:var(--rose);font-weight:500;color:var(--ink-soft)}
.hl-tray .ctas{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.7rem}
.hl-tray .more{margin-top:.9rem}
.plan-homes-count{margin-top:1.4rem;font-weight:700;padding:.8rem 1rem;border-left:3px solid var(--pine);background:var(--paper-deep);max-width:60ch}
.plan-homes .map-sample{margin-top:1rem}
/* the hero's line and the cards' line: only once a feed prices something */
.avail-line{margin-top:.8rem;font-weight:700;color:var(--pine)}
.avail-line a{color:var(--bronze)}
.plan-tile .avail{grid-column:1 / -1;margin-top:.45rem;font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pine);font-weight:500}
@media (max-width:640px){
  .hl summary{grid-template-columns:auto minmax(0,1fr) 1.7rem;gap:.2rem .8rem}
  .hl-unit{min-width:0}
  .hl-avail{grid-column:1 / 3;grid-row:3;text-align:left;margin-top:.15rem}
  .hl-open{grid-column:3;grid-row:1 / span 3}
  .plan-homes .hl-group .delivery{margin-left:0;flex-basis:100%}
}
.draw-sheet{
  border:0;padding:0;margin:0;max-width:none;max-height:none;
  width:100vw;height:100dvh;inset:0;
  background:var(--paper);color:var(--ink);
  display:none;grid-template-rows:auto 1fr auto;
  /* the single column may never exceed the viewport: without this the hint's min-content width
     (one long mono line) set the track at 899 px and pushed half the caption off a phone's left edge */
  grid-template-columns:minmax(0,100%);
}
.draw-sheet-top,.draw-sheet-stage,.draw-sheet-hint{min-width:0}
.draw-sheet[open]{display:grid}
.draw-sheet::backdrop{background:var(--paper)}
.draw-sheet-top{display:flex;align-items:center;gap:.8rem;padding:.8rem var(--gutter);border-bottom:1px solid var(--hair-light)}
.draw-sheet-top .draw-sheet-close{margin-left:auto;flex:none}
.draw-sheet-top .draw-sheet-count+.draw-sheet-close{margin-left:0}
.draw-sheet-title{font-family:'Fraunces',serif;font-weight:560;font-size:1.05rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.draw-sheet-count{margin-left:auto;padding:0 1rem;font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.12em;color:var(--ink-soft);white-space:nowrap}
.draw-sheet-count:empty{display:none}
/* a photograph sits on ink, the drawing on white; the arrows ride the stage's edges */
.draw-sheet.is-photo .draw-sheet-stage{background:var(--ink)}
.draw-sheet-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:2.8rem;height:2.8rem;border-radius:99px;border:1px solid var(--hair-light);
  background:var(--paper);color:var(--ink);font-size:1.2rem;line-height:1;cursor:pointer;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.draw-sheet-arrow.prev{left:clamp(.6rem,2vw,1.4rem)}
.draw-sheet-arrow.next{right:clamp(.6rem,2vw,1.4rem)}
.draw-sheet-arrow:hover{border-color:var(--tan);color:var(--bronze)}
.masonry img.can-zoom,.trio img.can-zoom,.walk img.can-zoom{cursor:zoom-in}
.draw-sheet-close{
  flex:none;width:2.4rem;height:2.4rem;border-radius:99px;border:1px solid var(--hair-light);background:var(--paper);
  font-size:1.4rem;line-height:1;cursor:pointer;color:var(--ink);
}
.draw-sheet-stage{
  position:relative;overflow:hidden;touch-action:none;background:#fff;
  display:grid;place-items:center;cursor:grab;
}
.draw-sheet-stage.is-zoomed{cursor:grabbing}
.draw-sheet-stage img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  transform-origin:0 0;will-change:transform;user-select:none;-webkit-user-drag:none;
}
.draw-sheet-hint{
  padding:.7rem var(--gutter) max(.8rem,env(safe-area-inset-bottom));
  font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.1em;color:var(--ink-soft);text-align:center;
  border-top:1px solid var(--hair-light);
}

/* ============================================================
   THE PHONE (session fifteen, 2026-09-08): the 9/7 audit's open phone items and the expert's phone findings,
   measured at 390 by 844 with tools/drive.mjs. Every data-voice size floors at 12 px on a phone; every control
   a thumb lands on is 44 px; the building map shows the drawing first with the floor rail on its bottom edge
   and the key under it; the gallery and the walks run two columns; the home hero's pair of buttons steps aside
   for the Call / Tour / Apply bar, which carries the same two links; the locator keeps the four names a renter
   needs. The thumb itself (drag, pinch, swipe, the sheets) is Marc's iPhone, not this file.
   ============================================================ */
.stack-hint{display:none}
@media (max-width:640px){
  /* the 12 px floor on the labels the expert kept at .7rem for a desktop */
  .plan-tile .tag,.draw-zoom,.map-sample,.apply-sample,.loc-label,.limits thead th,.open-band,
  .hero-home .facts .l,.who span,.floor-label span,.model-floors label,.essential-split .big span,
  .ledger .place small,.ledger .fig small,.map-view label,.plan-filter label{font-size:.75rem}
  .hero-home .facts .l{letter-spacing:.12em}
  /* 44 px targets */
  .site-header .menu,.site-header .cta{min-height:2.75rem}
  .site-header .tel{width:2.75rem;height:2.75rem}
  .draw-sheet-close,.nav-sheet-close,.hp-close{width:2.75rem;height:2.75rem}
  .model-bar button{min-height:2.75rem;padding:.6em .9em}
  /* the home hero: the bar carries Apply and Tour, so the hero's pair steps aside and the photograph rises */
  .hero-home .ctas{display:none}
  /* the building map: the drawing first, then the key, the plan chips, the notes, the list */
  .homes .band>.band-inner{display:flex;flex-direction:column}
  .homes .model{order:1;margin-top:0}
  .homes .map-filter{order:2;margin-top:1.4rem}
  .homes .plan-filter{order:3}
  .homes .browser-count{order:4}
  .homes .map-mode{order:5}
  .homes .map-sample{order:6}
  .homes .map-list{order:7}
  /* the bedroom chips two to a row (they stood one to a row, 225 px tall) */
  .map-filter{gap:.4rem}
  .map-filter label{padding:.62em .75em;letter-spacing:.08em}
  /* the floor rail on the frame: a row along the stage's bottom edge, 44 px each, clear of the blocks in the
     default view; the hint at the top */
  .model-floors{position:absolute;left:.6rem;right:auto;top:auto;bottom:.6rem;flex-direction:row;flex-wrap:nowrap;gap:.3rem;margin-top:0}
  .model-floors label{width:2.75rem;height:2.75rem;background:rgba(244,248,240,.92)}
  .model-hint{top:auto;bottom:3.9rem}   /* above the rail, on the paper below Sabine Street; at the top it sat on Comal's name */
  /* the list: the cells wide enough for a rent at 12 px, and the line that says a floor scrolls (iOS hides the bar) */
  .stack{--cell:3.4rem}
  .stack-hint{display:block;margin-top:1.2rem}
  /* two columns of photographs: half the bytes, half the height */
  .walk{grid-template-columns:repeat(2,1fr)}
  .masonry{grid-template-columns:repeat(2,1fr)}
  /* the locator keeps The Parker, the park, downtown and Bishop Arts; the streets and the river are drawn */
  .loc-label[data-tier="2"]{display:none}
}

/* ============================================================
   THE PHONE, SESSION SIXTEEN (2026-09-09 teardown, run 9/8 on the iPhone 17 simulator): the dialogs'
   caption and hint stay on the screen, the bedroom chips sit above the drawing so a filter repaints in
   the same screen, Reset rides the frame, and the three targets a thumb missed reach 44 px.
   ============================================================ */
@media (max-width:640px){
  /* the dialog caption may take two lines instead of losing its first half */
  .draw-sheet-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  /* the bedroom chips above the drawing: a filter tap and its repaint share the screen (they sat a full
     screen below the stage, so One bedroom changed nothing a renter could see) */
  .homes .map-filter{order:0;margin-top:1.2rem}
  /* Reset rides the frame once the view has moved: the renter zoomed into a wall gets the way back
     without scrolling (the toolbar sits below the stage, off the screen, when she needs it most) */
  .model .model-bar button[data-act="reset"]{
    position:absolute;top:.6rem;right:.6rem;z-index:3;
    background:rgba(244,248,240,.92);border:1px solid var(--hair-light);
  }
  /* the three targets a thumb missed: the plan rail's two links (27 px), Enlarge (34), the logo (38).
     Enlarge keeps its look; an invisible extension carries the chip to 44 */
  .plan-rail a{display:inline-flex;align-items:center;min-height:2.75rem}
  .draw-zoom::after{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px}
  .site-header .logo{display:flex;align-items:center;min-height:2.75rem}
}

/* ---- the Bishop Ridge nature textures (brand guide 7.1 + 7.2, the two-layer recipe):
   a tonal texture on a brand ground, never a new color. Restrained by rule (Marc 9/8):
   sections, not wallpaper. The water rides the floor-plans building-map band alone;
   the Fountain Trim stamps the neighborhood's century band. */
.band.water{position:relative;overflow:hidden}
.band.water>.band-inner{position:relative;z-index:1}
.band.water::before{content:"";position:absolute;inset:0;background:var(--milk);opacity:.09;
  -webkit-mask-image:url(/images/the-parker/water.svg);mask-image:url(/images/the-parker/water.svg);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:clamp(560px,72vw,980px);mask-size:clamp(560px,72vw,980px);
  -webkit-mask-position:right -130px center;mask-position:right -130px center}
/* the same water on the light ground (Marc 9/8: the cucumber keeps its colour, the pattern
   sits on top; no exposed cutoff, the artwork bleeds off the frame's right edge and every
   other edge fades to nothing, sliding under the white plan cards) */
main.water-ground{position:relative;z-index:0;overflow-x:clip}
main.water-ground::before{content:"";position:absolute;z-index:-1;top:0;right:-90px;
  width:clamp(420px,62vw,860px);aspect-ratio:349/448;background:var(--pine);opacity:.065;
  -webkit-mask-image:url(/images/the-parker/water.svg);mask-image:url(/images/the-parker/water.svg);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%}
.fountain-trim{height:clamp(26px,3.4vw,34px);width:auto;display:block;margin-bottom:1.3rem}

/* ============================================================================
   CONTAINER ADDITIONS (2026-09-17), the standard off Seth's 9/14 call, in the
   Parker's own idiom: the extra filter controls (Max Rent, Square Feet, the
   live count) that ride beside the no-script bedroom radios on /floor-plans/,
   the action row on every plan tile, and the shared two-step units modal.
   Behavior: /scripts/the-parker/plans.js.
   ========================================================================== */
.pk-extra { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .7rem 1.4rem;
  margin: .9rem 0 0; }
.pk-fgroup { display: flex; flex-direction: column; gap: .34rem; }
.pk-flabel { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); }
.pk-input { font: inherit; font-size: .85rem; color: var(--ink); background: var(--paper);
  border: 1px solid rgba(0,77,54,.28); border-radius: 9px; padding: .5rem .65rem; min-height: 42px; }
.pk-input:disabled { opacity: .55; cursor: not-allowed; }
.pk-fcount { margin-left: auto; align-self: center;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .78rem; color: var(--bronze); }
@media (max-width: 640px) { .pk-fcount { flex-basis: 100%; margin-left: 0; } }
.plan-tile.pk-hide { display: none !important; }

.plan-tile .pk-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .85rem; }
.plan-tile .pk-actions .btn { font-size: .78rem; padding: .48rem .8rem; min-height: 40px; }

.pk-um { position: fixed; inset: 0; z-index: 1200; }
.pk-um[hidden] { display: none; }
.pk-um-scrim { position: absolute; inset: 0; background: rgba(15, 31, 25, .55); }
.pk-um-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(34rem, 100%);
  display: flex; flex-direction: column; background: var(--paper); color: var(--ink);
  box-shadow: -24px 0 60px rgba(15,31,25,.35); }
.pk-um-header { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; padding: 1.1rem 1.25rem .9rem; border-bottom: 1px solid rgba(0,77,54,.16); }
.pk-um-back { border: 0; background: transparent; color: var(--bronze); font: inherit;
  font-size: .8rem; cursor: pointer; padding: 0 0 .45rem; }
.pk-um-back:hover { color: var(--ink); }
.pk-um-eyebrow { display: block; font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); }
.pk-um-title { margin: .2rem 0 0; font-family: 'Fraunces', Georgia, serif; font-weight: 560;
  font-size: 1.45rem; letter-spacing: -.01em; }
.pk-um-close { border: 0; background: transparent; font-size: 1.35rem; line-height: 1;
  width: 44px; height: 44px; border-radius: 999px; cursor: pointer; color: inherit; }
.pk-um-close:hover { background: rgba(0,77,54,.08); }
.pk-um-body { flex: 1; overflow-y: auto; padding: .6rem .8rem 1rem; outline: none; }
.pk-um-row { display: grid; grid-template-columns: 4.2rem 1fr auto 1.1rem; align-items: center;
  gap: .2rem .8rem; width: 100%; text-align: left; border: 0; border-bottom: 1px solid rgba(0,77,54,.12);
  background: transparent; font: inherit; color: inherit; padding: .7rem .45rem; cursor: pointer; }
.pk-um-row:hover { background: rgba(0,77,54,.05); }
.pk-um-row.is-leased { opacity: .55; }
.pk-um-unit { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500; font-size: .95rem; }
.pk-um-where { font-size: .85rem; }
.pk-um-facts { grid-column: 2; font-size: .74rem; color: var(--bronze); }
.pk-um-avail { grid-column: 3; grid-row: 1 / span 2; font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .78rem; text-align: right; color: var(--pine); }
.pk-um-go { grid-column: 4; grid-row: 1 / span 2; color: var(--bronze); }
.pk-um-detail { padding: .9rem .5rem; display: flex; flex-direction: column; gap: .9rem; }
.pk-um-dfacts { margin: 0; font-size: .9rem; color: var(--bronze); }
.pk-um-dline { margin: 0; font-size: 1.05rem; }
.pk-um-ctas { display: flex; flex-wrap: wrap; gap: .55rem; }
.pk-um-more a { color: var(--bronze); }
.pk-um-footer { border-top: 1px solid rgba(0,77,54,.16); padding: .8rem 1.25rem; }
.pk-um-note { margin: 0; font-size: .78rem; color: var(--bronze); }
@media (max-width: 640px) { .pk-um-panel { width: 100%; } }

/* ============================================================================
   UNIVERSAL BISHOP RIDGE ELEMENTS (2026-09-17), in the Parker's idiom: the
   district emblem + sheet in the header, the sheet's search and labels, and
   the rent-special landing pop-up. The consent stack ships its own sc- styles.
   ========================================================================== */
.br-mark { display: inline-grid; place-content: center; width: 40px; height: 40px;
  margin-right: .65rem; flex: none; background: var(--pine); border: 0; border-radius: 10px;
  cursor: pointer; transition: filter .3s var(--ease); }
.br-mark img { display: block; width: 24px; height: 24px; }
.br-mark:hover { filter: brightness(1.18); }
@media (max-width: 480px) { .br-mark { width: 36px; height: 36px; margin-right: .5rem; } }


/* the rent-special landing pop-up (the district's popup function, the Parker's card) */
.pk-pop { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center;
  justify-content: center; padding: 1.5rem; background: rgba(15, 31, 25, .62); }
.pk-pop[hidden] { display: none; }
.pk-pop-card { position: relative; width: 100%; max-width: 30rem; background: var(--paper);
  color: var(--ink); border: 1px solid var(--hair-light); border-top: 3px solid var(--rose);
  padding: 2.1rem 1.9rem 1.9rem; box-shadow: 0 24px 60px rgba(15, 31, 25, .4); }
.pk-pop-close { position: absolute; top: .45rem; right: .45rem; width: 44px; height: 44px;
  border: 0; background: transparent; font-size: 1.2rem; line-height: 1; cursor: pointer;
  border-radius: 999px; color: inherit; }
.pk-pop-close:hover { background: rgba(0, 77, 54, .07); }
.pk-pop-badge { margin: 0 0 .6rem; font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); }
.pk-pop-h { margin: 0 0 .5rem; font-family: 'Fraunces', Georgia, serif; font-weight: 560;
  font-size: clamp(1.5rem, 3.4vw, 2rem); letter-spacing: -.015em; line-height: 1.12; }
.pk-pop-detail { margin: 0 0 1.2rem; color: var(--ink-soft); font-size: .95rem; line-height: 1.55; }

/* ---------- the header cluster (Marc 9/17 PM) ----------
   The universal Bishop Ridge top-right, in the Parker's idiom: Residents dropdown,
   Search-communities pill, phone, Contact pill, hamburger (the rent-special tab is the
   sixth element, injected per page from specials.json). The BAR alone goes edge-to-edge
   (Marc's call); the page keeps its measure. Injected by the nest pipeline's
   universal_elements.py pass 2; edit both together. */
.site-header .bar{max-width:none}
.hdr-cluster{display:flex;align-items:center;gap:clamp(.45rem,.9vw,.8rem);flex:none;margin-left:auto}
/* the hamburger sits on the bar at EVERY width (the district pattern); the fold script
   still governs the nav links themselves */
.site-header .menu{display:inline-flex;justify-content:center;align-items:center;width:2.3rem;height:2.3rem;padding:0;margin-left:0;border-radius:99px}
.menu-bars{display:block;width:1.05rem;height:11px;position:relative;
  background:linear-gradient(var(--ink),var(--ink)) center/100% 1.5px no-repeat}
.menu-bars::before,.menu-bars::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:var(--ink)}
.menu-bars::before{top:0}
.menu-bars::after{bottom:0}
/* Residents: a quiet nav-weight toggle, the card in the Parker's paper */
.residents{position:relative;flex:none}
.residents-toggle{display:inline-flex;align-items:center;gap:.3rem;
  font-family:'Manrope',sans-serif;font-weight:600;font-size:clamp(.78rem,.7rem + .25vw,.9rem);
  color:var(--ink-soft);background:transparent;border:0;padding:.35em 0;cursor:pointer;
  transition:color .3s var(--ease);white-space:nowrap}
.residents-toggle::after{content:"\25BE";font-size:.8em;opacity:.75}
.residents-toggle:hover,.residents-toggle[aria-expanded="true"]{color:var(--ink)}
.residents-menu{position:absolute;top:calc(100% + .8rem);right:0;min-width:13rem;
  background:var(--paper);border:1px solid var(--hair-light);border-radius:.9rem;
  box-shadow:0 18px 44px -20px rgba(15,31,25,.35);padding:.4rem;z-index:30}
.residents-menu a{display:block;padding:.55em .7em;border-radius:.55rem;
  font-family:'Manrope',sans-serif;font-weight:600;font-size:.85rem;color:var(--ink);text-decoration:none}
.residents-menu a:hover{background:var(--paper-deep)}
/* Search communities: the pill carries the field wide, the ring alone narrow */
.hdr-search{position:relative;flex:none}
.hdr-search-box{display:flex;align-items:center;gap:.45rem;
  border:1px solid var(--hair-light);border-radius:99px;padding:.45em .95em;
  transition:border-color .35s var(--ease)}
.hdr-search-box:focus-within{border-color:var(--tan)}
.hdr-search-ico{line-height:0;color:var(--ink-soft)}
.hdr-search-input{font-family:'Manrope',sans-serif;font-weight:600;font-size:.82rem;
  color:var(--ink);background:transparent;border:0;outline:0;width:clamp(7rem,8.6vw,9.5rem)}
.hdr-search-input::placeholder{color:var(--ink-soft)}
.hdr-search-input::-webkit-search-cancel-button{display:none}
.hdr-search-open{display:none;justify-content:center;align-items:center;width:2.3rem;height:2.3rem;
  background:transparent;border:1px solid var(--hair-light);border-radius:99px;color:var(--ink);cursor:pointer}
.hdr-search-panel{position:absolute;top:calc(100% + .8rem);right:0;min-width:17rem;
  max-height:min(24rem,60vh);overflow:auto;background:var(--paper);
  border:1px solid var(--hair-light);border-radius:.9rem;
  box-shadow:0 18px 44px -20px rgba(15,31,25,.35);padding:.4rem;z-index:30}
.hdr-search-panel ul{list-style:none;margin:0;padding:0}
.hdr-search-panel li[hidden]{display:none}
.hdr-search-panel a{display:flex;flex-direction:column;gap:.12rem;padding:.5em .7em;border-radius:.55rem;text-decoration:none}
.hdr-search-panel a:hover{background:var(--paper-deep)}
.hdr-search-panel .n{font-family:'Manrope',sans-serif;font-weight:600;font-size:.85rem;color:var(--ink)}
.hdr-search-panel .m{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.06em;color:var(--ink-soft)}
.hdr-search-empty{font-family:'Manrope',sans-serif;font-size:.8rem;color:var(--ink-soft);padding:.5em .7em;margin:0}
/* narrow: the field folds into the ring; opening it drops the field over the page */
@media (max-width:1439.98px){
  /* the phone folds to its ring so the five links keep their lane (measured 9/17 PM) */
  .site-header .tel{font-size:0;padding:.55em;width:2.2rem;height:2.2rem;display:grid;place-items:center}
  .site-header .tel::before{content:"";width:.95rem;height:.95rem;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25c1.1.37 2.3.57 3.6.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1L6.6 10.8z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25c1.1.37 2.3.57 3.6.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1L6.6 10.8z'/%3E%3C/svg%3E") center/contain no-repeat}
}
@media (max-width:1279.98px){
  .hdr-search-box{display:none}
  .hdr-search-open{display:inline-flex}
  .hdr-search.is-open .hdr-search-box{display:flex;position:absolute;top:calc(100% + .8rem);right:0;
    width:16rem;background:var(--paper);box-shadow:0 18px 44px -20px rgba(15,31,25,.35);z-index:31}
  .hdr-search.is-open .hdr-search-panel{top:calc(100% + 3.6rem)}
}
@media (max-width:820px){.residents{display:none}}
@media (max-width:640px){
  .site-header .tel{display:none}
  .site-header .bar{gap:.5rem}
  .residents-menu,.hdr-search-panel{position:fixed;left:1rem;right:1rem;top:4.2rem;min-width:0}
  .hdr-search.is-open .hdr-search-box{position:fixed;left:1rem;right:1rem;top:4.2rem;width:auto}
  .hdr-search.is-open .hdr-search-panel{top:7rem}
}