/* ══════════════════════════════════════════════════════════════
   HIGH PRAIRIE FARMS at The Lake - public homepage
   Tokens per docs/00-ARCHITECTURE.md section 9.
   Light only by design. The resident portal ships the dark theme.
   ══════════════════════════════════════════════════════════════ */

:root {
  --ink:        #1A1815;
  --ink-2:      #56514A;
  --ink-3:      #857F75;
  --paper:      #FAF8F4;
  --paper-2:    #F2EFE8;
  --stone:      #E8E3D9;
  --hair:       #DDD7CB;
  --reservoir:  #2C4A5B;
  --wheat:      #C9AE7E;
  --ember:      #A84E2C;
  --night:      #141311;

  --gutter:     clamp(20px, 4vw, 56px);
  --maxw:       1560px;
  --band:       clamp(52px, 7vh, 100px);   /* rhythm between sections */
  --e:          cubic-bezier(.2,.7,.2,1);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--paper); color: var(--ink);
  font-family: "Newsreader", Georgia, serif; font-optical-sizing: auto;
  font-size: 17.5px; line-height: 1.62;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}

.u { font-family: "Instrument Sans", system-ui, sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.shell { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
section[id], header[id] { scroll-margin-top: 150px; }

h1, h2, h3, h4 { font-family: "Newsreader", Georgia, serif; font-weight: 400; margin: 0; }
p { margin: 0 0 1.05em; }

/* ══ LINE BREAKING, SITEWIDE
   Display type balances across lines so a break never lands mid-sentence or
   mid-phrase. Body copy uses `pretty` so no paragraph ends on an orphan word. ══ */
h1, h2, h3, h4,
.hero-copy h1, .day-cap p, .words blockquote p, .invite h2,
.sec-head .lede, .lst .addr, .ut .prov, figcaption, .em h3, .tl h3, .truth h3 {
  text-wrap: balance;
}
p, li, dd, dt, .note p, .truth p, .tl p, .typo p, .ut .prov em, .ledger dt em {
  text-wrap: pretty;
}
/* Never strand a single short word alone on the last line of display type. */
.day-cap p, .invite h2, .hero-copy h1, .words blockquote p { hanging-punctuation: first; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--reservoir); outline-offset: 3px; border-radius: 2px; }

/* ══ SECTION HEADER
   Two columns that together span the container, so a heading never sits
   scrunched in a narrow ribbon with dead space beside it. ══ */
.sec-head {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px); align-items: end;
  border-bottom: 1px solid var(--hair);
  padding-bottom: clamp(18px, 2.4vh, 26px);
  margin-bottom: clamp(28px, 4vh, 46px);
}
.sec-head .eyebrow { color: var(--ink-3); display: block; margin-bottom: 14px; }
.sec-head h2 { font-size: clamp(29px, 4.3vw, 56px); line-height: 1.03; letter-spacing: -0.027em; font-weight: 300; max-width: none; }
.sec-head .lede { margin: 0 0 4px; color: var(--ink-2); max-width: 46ch; font-size: 17px; }
@media (max-width: 880px) {
  .sec-head { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .sec-head h2 { font-size: clamp(28px, 8vw, 40px); }
}

/* ---------- navigation ---------- */
nav.top {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: clamp(26px, 3.2vh, 44px) var(--gutter) clamp(18px, 2.2vh, 26px);
  transition: background .4s var(--e), border-color .4s var(--e), color .4s var(--e);
  border-bottom: 1px solid transparent; color: #fff;
}
nav.top.solid {
  background: color-mix(in srgb, var(--paper) 95%, transparent);
  backdrop-filter: blur(10px); border-bottom-color: var(--hair); color: var(--ink);
  padding-top: clamp(14px, 1.6vh, 20px); padding-bottom: clamp(12px, 1.4vh, 18px);
}
.brand { text-decoration: none; display: block; line-height: 1.04; }
.brand b {
  display: block; font-family: "Newsreader", serif; font-weight: 400;
  font-size: clamp(19px, 2.5vw, 34px); letter-spacing: .085em; text-transform: uppercase;
}
.brand em {
  display: block; font-style: italic; font-family: "Newsreader", serif; font-weight: 300;
  font-size: clamp(14px, 1.6vw, 21px); opacity: .78; margin-top: 2px; letter-spacing: .01em;
}
.navR { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); padding-top: clamp(4px, .8vw, 10px); }
.acct { display: flex; align-items: baseline; gap: 9px; }
.acct .for { font-family: "Instrument Sans", sans-serif; font-size: 12.5px; font-weight: 500; letter-spacing: .04em; opacity: .66; white-space: nowrap; }
.acct .sep { opacity: .34; font-size: 12px; }
.lnk { font-family: "Instrument Sans", sans-serif; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; border-bottom: 1px solid currentColor; padding-bottom: 2px; opacity: .86; }
.lnk:hover { opacity: 1; }
@media (max-width: 620px) { .acct .for { display: none; } }
@media (max-width: 430px) { .acct .sep, .acct .join { display: none; } }

.burger { appearance: none; background: none; border: 0; cursor: pointer; color: inherit; width: 32px; height: 24px; padding: 4px 1px; display: flex; flex-direction: column; justify-content: space-between; }
.burger span.bar { display: block; height: 1.5px; width: 100%; background: currentColor; transition: transform .34s var(--e), opacity .2s var(--e); }
.burger[aria-expanded="true"] span.bar:nth-child(1) { transform: translateY(6.75px) rotate(45deg); }
.burger[aria-expanded="true"] span.bar:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span.bar:nth-child(3) { transform: translateY(-6.75px) rotate(-45deg); }

.menu { position: fixed; inset: 0; z-index: 55; background: var(--paper); overflow-y: auto; padding: 104px 0 48px; animation: menuIn .3s var(--e); }
@keyframes menuIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; border-top: 1px solid var(--hair); padding-top: 30px; }
@media (max-width: 880px) { .menu-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 520px) { .menu-grid { grid-template-columns: 1fr; gap: 24px; } }
.menu-grid h3 { font-family: "Instrument Sans", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.menu-grid ul { list-style: none; margin: 0; padding: 0; }
.menu-grid li { margin-bottom: 9px; }
.menu-grid a { font-size: clamp(18px, 1.9vw, 24px); line-height: 1.22; text-decoration: none; letter-spacing: -0.012em; border-bottom: 1px solid transparent; }
.menu-grid a:hover { border-bottom-color: var(--ink); }
.menu-foot { margin-top: 40px; border-top: 1px solid var(--hair); padding-top: 22px; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }
.btn-solid { font-family: "Instrument Sans", sans-serif; font-size: 13.5px; font-weight: 600; letter-spacing: .04em; text-decoration: none; background: var(--ink); color: var(--paper); padding: 13px 24px; border-radius: 2px; border: 1px solid var(--ink); transition: background .25s var(--e), color .25s var(--e); }
.btn-solid:hover { background: transparent; color: var(--ink); }
.menu-foot p { font-family: "Instrument Sans", sans-serif; font-size: 12.5px; color: var(--ink-3); margin: 0 0 0 auto; }
body.locked { overflow: hidden; }

/* ══ I - ARRIVAL ══ */
.hero { position: relative; height: clamp(580px, 90vh, 960px); display: flex; align-items: flex-end; overflow: hidden; background: var(--night); }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; animation: drift 26s var(--e) forwards; }
@keyframes drift { from { transform: scale(1.06); } to { transform: scale(1); } }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14,16,18,.80) 0%, rgba(14,16,18,.36) 28%, rgba(14,16,18,0) 54%), linear-gradient(to bottom, rgba(14,16,18,.42) 0%, rgba(14,16,18,0) 22%); }
.hero-copy { position: relative; z-index: 2; width: 100%; padding: 0 var(--gutter) clamp(40px, 6vh, 80px); max-width: var(--maxw); margin: 0 auto; color: #fff; }
.hero-copy .u { color: rgba(255,255,255,.8); margin-bottom: 16px; display: block; }
.hero-copy h1 { font-size: clamp(38px, 7.2vw, 94px); line-height: 1; letter-spacing: -0.03em; font-weight: 300; max-width: 15ch; text-shadow: 0 1px 40px rgba(0,0,0,.3); }
.scrollcue { position: absolute; z-index: 2; bottom: 24px; right: var(--gutter); display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.68); }
.scrollcue i { display: block; width: 44px; height: 1px; background: currentColor; transform-origin: left; animation: cue 2.8s var(--e) infinite; }
@keyframes cue { 0%,100% { transform: scaleX(.35); opacity:.5 } 50% { transform: scaleX(1); opacity:1 } }
@media (max-width: 640px) { .scrollcue { display: none; } }

/* ══ II - SIGHTLINE ══ */
.sightline { padding-top: var(--band); }
.sightline .grid { display: grid; grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (max-width: 940px) { .sightline .grid { grid-template-columns: 1fr; } }
.sightline h2 { font-size: clamp(28px, 3.7vw, 46px); line-height: 1.06; letter-spacing: -0.027em; font-weight: 300; margin-bottom: .58em; }
.sightline .prose p { color: var(--ink-2); max-width: 50ch; }
.sightline .eyebrow { color: var(--ink-3); display: block; margin-bottom: 14px; }
.orientfig { margin: 0; }
#map { width: 100%; aspect-ratio: 16/11; min-height: 340px; background: var(--paper-2); border: 1px solid var(--hair); }
/* Leaflet 1.9.4 ships mix-blend-mode:plus-lighter on tiles to hide seams.
   Against a light page background that composites additively to pure white
   and the map disappears. Force normal blending. */
.leaflet-tile { mix-blend-mode: normal !important; }
.leaflet-container { font-family: "Instrument Sans", sans-serif; background: #E4DFD4; }
.leaflet-container a { color: var(--reservoir); }
.leaflet-control-attribution { font-size: 10px; background: rgba(250,248,244,.86) !important; }
.hpf-label {
  font-family: "Instrument Sans", sans-serif; font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--reservoir);
  white-space: nowrap; text-shadow: 0 0 3px var(--paper), 0 0 6px var(--paper);
}
.poi-label { font-family: "Instrument Sans", sans-serif; font-size: 10px; letter-spacing: .06em; color: var(--ink-2); white-space: nowrap; text-shadow: 0 0 3px var(--paper), 0 0 6px var(--paper); }
.orientfig figcaption { font-family: "Instrument Sans", sans-serif; font-size: 12px; color: var(--ink-3); margin-top: 10px; line-height: 1.5; }
.wx { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--hair); padding-top: 13px; margin-top: 24px !important; max-width: 50ch; }
.wx .u { color: var(--ink-3); }
.wx #wxv { font-size: 19px; color: var(--ink); font-variant-numeric: tabular-nums; }

.measure { margin-top: clamp(36px, 5vh, 66px); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hair); display: grid; grid-template-columns: repeat(4, 1fr); }
.measure div { padding: 22px 26px 24px 0; border-right: 1px solid var(--hair); }
.measure div + div { padding-left: 26px; }
.measure div:last-child { border-right: 0; }
.measure b { display: block; font-family: "Newsreader", serif; font-weight: 300; font-size: clamp(30px, 3.2vw, 46px); line-height: 1; letter-spacing: -0.02em; margin-bottom: 10px; color: var(--ember); }
.measure span { color: var(--ink-3); }
@media (max-width: 760px) {
  .measure { grid-template-columns: repeat(2, 1fr); }
  .measure div:nth-child(2) { border-right: 0; }
  .measure div:nth-child(3) { padding-left: 0; }
  .measure div:nth-child(-n+2) { border-bottom: 1px solid var(--hair); }
}

/* ══ III - GALLERY ══
   Fixed row rhythm plus explicit row spans, so every cell is filled and the
   grid never leaves a dead pocket of paper between two different aspect ratios.
   Captions live in the lightbox, not under the tiles. ══ */
.gal { margin-top: var(--band); }
.gal-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(96px, 10.5vw, 168px);
  gap: 10px;
}
.gi { position: relative; margin: 0; grid-column: span 4; grid-row: span 2; }
.gi.w5 { grid-column: span 5; }
.gi.w6 { grid-column: span 6; }
.gi.w7 { grid-column: span 7; }
.gi.w12 { grid-column: span 12; }
.gi.r3 { grid-row: span 3; }
.gi.r4 { grid-row: span 4; }
.gi button {
  display: block; width: 100%; height: 100%; padding: 0; border: 0;
  background: var(--paper-2); cursor: zoom-in; overflow: hidden; position: relative;
}
.gi img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--e), filter .5s var(--e); }
.gi button:hover img, .gi button:focus-visible img { transform: scale(1.035); }
.gi figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 900px) {
  .gal-grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(88px, 13vw, 150px); }
  .gi, .gi.w5, .gi.w6, .gi.w7 { grid-column: span 3; }
  .gi.w12 { grid-column: span 6; }
}
@media (max-width: 560px) {
  .gal-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 8px; }
  .gi, .gi.w5, .gi.w6, .gi.w7, .gi.w12 { grid-column: span 1; grid-row: auto; }
  .gi img { aspect-ratio: 3/2; height: auto; }
  .gi.tall img { aspect-ratio: 3/4; }
  .gi.wide img { aspect-ratio: 2/1; }
}

/* lightbox */
.lb { position: fixed; inset: 0; z-index: 90; background: rgba(14,14,12,.96); display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 56px 20px 72px; }
.lb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb figcaption { font-family: "Instrument Sans", sans-serif; font-size: 13px; color: rgba(255,255,255,.72); margin-top: 16px; text-align: center; max-width: 60ch; }
.lb-close, .lb-prev, .lb-next {
  position: absolute; appearance: none; background: none; border: 1px solid rgba(255,255,255,.3);
  color: #fff; cursor: pointer; border-radius: 2px;
  font-family: "Instrument Sans", sans-serif; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  padding: 9px 15px;
}
.lb-close { top: 16px; right: 20px; }
.lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 20px; top: 50%; transform: translateY(-50%); }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,.12); }
.lb-count { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-family: "Instrument Sans", sans-serif; font-size: 12px; color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums; }

/* ══ IV - TRUTHS ══ */
.truths { margin-top: var(--band); }
.truth { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.08fr); gap: clamp(24px, 4vw, 64px); align-items: center; border-top: 1px solid var(--hair); padding: clamp(32px, 4.5vh, 62px) 0; }
.truth:last-child { border-bottom: 1px solid var(--hair); }
.truth .fig { margin: 0; }
.truth img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 16/10; }
.truth:nth-child(even) .fig { order: -1; }
.truth .n { font-family: "Newsreader", serif; font-weight: 300; font-size: clamp(36px, 4.2vw, 56px); line-height: 1; color: var(--stone); display: block; margin-bottom: 10px; letter-spacing: -0.03em; }
.truth h3 { font-size: clamp(22px, 2.6vw, 33px); line-height: 1.12; letter-spacing: -0.02em; margin-bottom: .48em; font-weight: 300; }
.truth p { color: var(--ink-2); max-width: 44ch; margin: 0; }
@media (max-width: 860px) { .truth { grid-template-columns: 1fr; gap: 20px; } .truth:nth-child(even) .fig { order: 0; } }

/* ══ WHAT'S INCLUDED ══ */
.incl { margin-top: clamp(36px, 5vh, 68px); }
.incl > h3 { font-size: clamp(22px, 2.5vw, 30px); letter-spacing: -0.02em; font-weight: 300; margin-bottom: 18px; }
.incl-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); }
@media (max-width: 900px) { .incl-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .incl-grid { grid-template-columns: 1fr; } }
.ic { padding: 20px 26px 26px 0; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.ic + .ic { padding-left: 26px; }
@media (max-width: 900px) { .incl-grid .ic:nth-child(2n) { border-right: 0; } .incl-grid .ic:nth-child(2n+1) { padding-left: 0; } }
@media (max-width: 560px) { .ic, .ic + .ic { border-right: 0; padding-left: 0; } }
.ic .u { color: var(--ink-3); display: block; margin-bottom: 10px; }
.ic h4 { font-size: 19px; line-height: 1.2; letter-spacing: -0.014em; margin-bottom: 7px; }
.ic p { color: var(--ink-2); font-size: 15.5px; margin: 0; }

/* ══ V - HOMES ══ */
.homes { margin-top: var(--band); }

.listings { border-top: 1px solid var(--ink); margin-top: 12px; }
.lst { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 6px 28px; align-items: baseline; padding: 19px 0; border-bottom: 1px solid var(--hair); }
.lst .addr { font-size: clamp(19px, 2vw, 25px); letter-spacing: -0.014em; line-height: 1.22; }
.lst .addr em { display: block; font-style: normal; font-family: "Instrument Sans", sans-serif; font-size: 12.5px; letter-spacing: .04em; color: var(--ink-3); margin-top: 5px; }
.lst .spec { font-family: "Instrument Sans", sans-serif; font-size: 12.5px; color: var(--ember); white-space: nowrap; }
.zl { font-family: "Instrument Sans", sans-serif; font-size: 13px; font-weight: 500; white-space: nowrap; color: var(--reservoir); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--reservoir) 40%, transparent); padding-bottom: 2px; }
.zl:hover { border-bottom-color: var(--reservoir); }
@media (max-width: 720px) { .lst { grid-template-columns: 1fr; gap: 8px; } }

/* ══ VI - THE YEAR ══ */
.year { margin-top: var(--band); background: var(--paper-2); padding: clamp(48px, 7vh, 92px) 0; }
.timeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(196px, 1fr); border-top: 1px solid var(--ink); overflow-x: auto; }
.tl { padding: 20px 24px 26px 0; border-right: 1px solid var(--hair); min-width: 188px; }
.tl + .tl { padding-left: 24px; }
.tl:last-child { border-right: 0; }
.tl .u { color: var(--ink-3); display: block; margin-bottom: 10px; }
.tl h3 { font-size: 20px; line-height: 1.18; margin-bottom: 5px; letter-spacing: -0.012em; }
.tl p { color: var(--ink-2); font-size: 15px; margin: 0; }
.next-event { margin-top: 28px; border-top: 1px solid var(--hair); padding-top: 20px; display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.next-event .u { color: var(--reservoir); }
.next-event strong { font-family: "Newsreader", serif; font-weight: 400; font-size: 21px; }
.next-event span.d { color: var(--ink-2); }

/* ══ VII - AROUND ══ */
.around { margin-top: var(--band); }
.ledger { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 4vw, 68px); }
@media (max-width: 780px) { .ledger { grid-template-columns: 1fr; } }
.ledger section { margin-bottom: 32px; }
.ledger h3 { border-bottom: 1px solid var(--ink); padding-bottom: 8px; margin-bottom: 2px; }
.ledger h3 span { font-family: "Instrument Sans", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.ledger dl { margin: 0; }
.ledger .row { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.ledger dt { font-size: 16.5px; }
.ledger dt em { display: block; font-style: normal; font-family: "Instrument Sans", sans-serif; font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.ledger .row.hi dt { color: var(--reservoir); }
.ledger .row.hi dd { color: var(--reservoir); font-weight: 600; }
.ledger dd { margin: 0; color: var(--ember); font-family: "Instrument Sans", sans-serif; font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger dd.mi { min-width: 54px; text-align: right; }
.ledger dd.min { min-width: 52px; text-align: right; }

/* ══ PRACTICAL: utilities + association ══ */
.util { margin-top: var(--band); }
.util-table { border-top: 1px solid var(--ink); }
.ut { display: grid; grid-template-columns: 190px minmax(0,1fr) auto; gap: 8px 28px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--hair); }
.ut .svc { font-family: "Instrument Sans", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.ut .prov { font-size: 20px; line-height: 1.28; }
.ut .prov em { display: block; font-style: normal; font-family: "Instrument Sans", sans-serif; font-size: 13px; color: var(--ink-2); margin-top: 5px; }
@media (max-width: 720px) { .ut { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; } }

.ut .tel { font-family: "Instrument Sans", sans-serif; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; text-decoration: none; border-bottom: 1px solid var(--hair); padding-bottom: 2px; }
.ut .tel:hover { border-bottom-color: var(--ink-2); }
.ut .right { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
@media (max-width: 720px) { .ut .right { align-items: flex-start; } }

.emerg { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); }
@media (max-width: 900px) { .emerg { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .emerg { grid-template-columns: 1fr; } }
.em { padding: 20px 24px 24px 0; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.em + .em { padding-left: 24px; }
@media (max-width: 900px) { .emerg .em:nth-child(2n) { border-right: 0; } .emerg .em:nth-child(2n+1) { padding-left: 0; } }
@media (max-width: 560px) { .em, .em + .em { border-right: 0; padding-left: 0; } }
.em .u { color: var(--ink-3); display: block; margin-bottom: 9px; }
.em h3 { font-size: 18px; line-height: 1.2; margin-bottom: 7px; letter-spacing: -0.012em; }
.em a, .em span.n { display: block; font-family: "Instrument Sans", sans-serif; font-size: 13.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; text-decoration: none; margin-bottom: 3px; }
.em a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.em .n b { color: var(--ember); font-weight: 500; }


/* ══ VIII - WORDS ══ */
.words { margin-top: var(--band); display: grid; grid-template-columns: minmax(0,.66fr) minmax(0,1fr); border-top: 1px solid var(--hair); }
.words .img { position: relative; min-height: 400px; }
.words .img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.words .q { padding: clamp(40px, 6vw, 88px) clamp(26px, 4.5vw, 72px); display: flex; flex-direction: column; justify-content: center; }
.words .eyebrow { color: var(--ink-3); display: block; margin-bottom: 20px; }
.words blockquote { margin: 0; }
.words blockquote p { font-size: clamp(23px, 3vw, 37px); line-height: 1.24; letter-spacing: -0.025em; font-weight: 300; margin-bottom: 22px; }
.words cite { font-style: normal; color: var(--ink-3); font-family: "Instrument Sans", sans-serif; font-size: 12.5px; letter-spacing: .04em; }
@media (max-width: 860px) { .words { grid-template-columns: 1fr; } .words .img { min-height: 300px; } }

/* ══ IX - INVITATION ══ */
.invite { position: relative; margin-top: var(--band); min-height: clamp(460px, 72vh, 760px); display: flex; align-items: center; background: var(--night); overflow: hidden; }
.invite img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.invite::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(12,14,16,.86) 0%, rgba(12,14,16,.5) 50%, rgba(12,14,16,.2) 100%); }
.invite .shell { position: relative; z-index: 2; width: 100%; color: #fff; }
.invite .u { color: rgba(255,255,255,.64); display: block; margin-bottom: 16px; }
.invite h2 { font-size: clamp(30px, 4.6vw, 58px); line-height: 1.04; letter-spacing: -0.028em; font-weight: 300; max-width: 16ch; margin-bottom: 26px; }
.cta-row { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-bottom: 38px; }
.btn { font-family: "Instrument Sans", sans-serif; font-size: 13.5px; font-weight: 600; letter-spacing: .05em; text-decoration: none; background: var(--paper); color: var(--ink); padding: 15px 28px; border-radius: 2px; border: 1px solid var(--paper); transition: background .25s var(--e), color .25s var(--e); }
.btn:hover { background: transparent; color: #fff; }
.btn-quiet { font-family: "Instrument Sans", sans-serif; font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.85); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 3px; }
.btn-quiet:hover { color: #fff; border-bottom-color: #fff; }
.capture { border-top: 1px solid rgba(255,255,255,.2); padding-top: 22px; max-width: 490px; }
.capture p { font-size: 15.5px; color: rgba(255,255,255,.78); margin-bottom: 13px; }
.capture form { display: flex; }
.capture input { flex: 1; min-width: 0; background: transparent; border: 1px solid rgba(255,255,255,.35); border-right: 0; color: #fff; padding: 12px 14px; font-family: "Instrument Sans", sans-serif; font-size: 14px; border-radius: 2px 0 0 2px; }
.capture input::placeholder { color: rgba(255,255,255,.45); }
.capture input:focus { outline: none; border-color: #fff; }
.capture button { background: transparent; border: 1px solid rgba(255,255,255,.35); color: #fff; font-family: "Instrument Sans", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 0 20px; cursor: pointer; border-radius: 0 2px 2px 0; transition: background .2s, color .2s; }
.capture button:hover { background: #fff; color: var(--ink); }

/* ══ FOOTER ══ */
footer.site { padding: clamp(48px, 7vh, 84px) 0 36px; border-top: 1px solid var(--hair); }
.fgrid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; margin-bottom: 42px; }
@media (max-width: 880px) { .fgrid { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 520px) { .fgrid { grid-template-columns: 1fr; } }
.fgrid h4 { font-family: "Instrument Sans", sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 13px; }
.fgrid ul { list-style: none; margin: 0; padding: 0; }
.fgrid li { margin-bottom: 7px; }
.fgrid a { font-size: 15.5px; text-decoration: none; color: var(--ink-2); }
.fgrid a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.fbrand p { color: var(--ink-2); font-size: 15.5px; max-width: 34ch; }
.fbrand .mark { display: block; margin-bottom: 12px; }
.fbrand .mark b { display: block; font-family: "Newsreader", serif; font-weight: 400; font-size: 17px; letter-spacing: .1em; text-transform: uppercase; }
.fbrand .mark em { display: block; font-style: italic; font-weight: 300; font-size: 16px; opacity: .74; }
.legal { border-top: 1px solid var(--hair); padding-top: 20px; display: flex; flex-wrap: wrap; gap: 10px 32px; justify-content: space-between; align-items: baseline; }
.legal p { font-family: "Instrument Sans", sans-serif; font-size: 12.5px; color: var(--ink-3); margin: 0; max-width: 62ch; }
.legal nav { display: flex; gap: 22px; }
.legal nav a { font-family: "Instrument Sans", sans-serif; font-size: 12.5px; color: var(--ink-3); text-decoration: none; }
.legal nav a:hover { color: var(--ink); }

body{margin:0} [hidden]{display:none!important} .u{font-size:12px} .desktop-nav{display:flex;gap:26px;align-items:center;font:14px "Instrument Sans",sans-serif}.desktop-nav a{text-decoration:none;padding:10px 0}.desktop-nav a:hover{text-decoration:underline;text-underline-offset:6px}.desktop-nav .resource-link{border:1px solid currentColor;padding:10px 16px}.burger{display:none;width:44px;height:44px;padding:12px 7px}nav.top{align-items:center;background:rgba(15,22,24,.72)}nav.top.solid,body.locked nav.top{background:var(--paper);color:var(--ink)}.brand b{font-size:clamp(19px,2.1vw,28px)}.hero{min-height:700px;height:90svh;max-height:1000px}.hero-copy{padding-top:160px}.hero-copy h1{font-size:clamp(44px,6.8vw,88px)}.hero-copy .intro{font-size:20px;max-width:49ch;line-height:1.5;margin:22px 0 28px;color:#fff}.hero-copy .cta-row{margin:0;gap:22px}.hero::after{background:linear-gradient(0deg,rgba(10,17,20,.85),rgba(10,17,20,.1) 90%)}.skip{position:fixed;top:-100px;left:16px;z-index:100;background:var(--paper);padding:12px}.skip:focus{top:12px}.section{padding-top:var(--band)}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.features img{width:100%;aspect-ratio:4/3;object-fit:cover}.features h3{font-size:30px;line-height:1.15;margin:20px 0 12px}.features p{color:var(--ink-2);font-size:18px}.photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.photo-grid figure{margin:0}.photo-grid button{display:block;border:0;background:none;padding:0;width:100%;cursor:zoom-in}.photo-grid img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}.photo-grid figcaption{font:14px/1.6 "Instrument Sans",sans-serif;margin-top:10px;color:var(--ink-2)}.section-link{display:inline-block;margin-top:24px;font:15px "Instrument Sans",sans-serif;text-underline-offset:5px}.location-photo{width:100%;aspect-ratio:4/3;object-fit:cover}.resource-band{padding:40px;background:var(--paper-2);display:flex;gap:30px;align-items:center;justify-content:space-between}.resource-band h2{font-size:36px;line-height:1.1;margin-bottom:12px}.resource-band p{max-width:58ch;margin:0}.page-head{padding:160px var(--gutter) 30px;max-width:var(--maxw);margin:auto}.page-head h1{font-size:clamp(42px,6vw,72px);line-height:1.1;margin:14px 0 20px}.page-head p{max-width:65ch;font-size:20px}.subpage nav.top{background:var(--paper);color:var(--ink);border-bottom:1px solid var(--hair)}.subpage .util{margin-top:36px}.footer-links{display:flex;gap:24px;flex-wrap:wrap;font:14px "Instrument Sans",sans-serif;margin-bottom:24px}.legal p{max-width:90ch;color:var(--ink-2)}.invite{min-height:400px}.invite .shell{padding-block:60px}.invite .cta-row{margin-bottom:0}.ut .prov em{font-size:16px}.ut .zl{font-size:14px}a:focus-visible,button:focus-visible{outline:3px solid #b77430;outline-offset:5px}.hero a:focus-visible{outline-color:white} @media(max-width:1000px){.desktop-nav{display:none}.burger{display:flex}.features{gap:20px}.hero{height:auto;min-height:760px}.menu-grid{grid-template-columns:1fr 1fr}}@media(max-width:640px){.hero{min-height:720px}.hero-copy{padding-top:160px}.hero-copy .intro{font-size:18px}.features,.photo-grid{grid-template-columns:1fr}.resource-band{padding:26px;display:block}.resource-band .btn-solid{display:inline-block;margin-top:24px}.page-head{padding-top:140px}.menu-grid{grid-template-columns:1fr}.cta-row{gap:20px}.invite h2{max-width:18ch}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* The compact gallery uses natural rows and visible captions. */
.photo-grid .gi{grid-column:auto;grid-row:auto;min-width:0}
.photo-grid .gi button{position:relative;inset:auto;height:auto;overflow:hidden}
.photo-grid .gi img{height:auto;aspect-ratio:3/2}
.photo-grid .gi figcaption{position:static;width:auto;height:auto;overflow:visible;clip:auto}
.lb img{min-height:0;flex:0 1 auto}.lb figcaption{flex-shrink:0}
/* Resident directory: centered introduction, compact readable service rows. */
.residents-page{--maxw:1160px}
.residents-page .page-head{text-align:center;max-width:880px;padding:140px 24px 24px}
.residents-page .page-head h1{font-size:clamp(38px,4vw,56px);margin:12px 0 14px}
.residents-page .page-head p{max-width:56ch;margin:0 auto 20px;font-size:18px;line-height:1.5;color:var(--ink-2)}
.residents-page .page-head .footer-links{justify-content:center;gap:12px;margin:0}
.residents-page .page-head .footer-links a{padding:11px 18px;border:1px solid var(--hair);background:var(--paper-2);text-decoration:none;border-radius:3px}
.residents-page .page-head .footer-links a:hover{border-color:var(--reservoir);background:var(--stone)}
.residents-page .util{margin-top:30px}
.residents-page .util + .util{margin-top:44px}
.residents-page .sec-head{display:block;padding-bottom:18px;margin-bottom:0;border:0}
.residents-page .sec-head .eyebrow{margin-bottom:8px}
.residents-page .sec-head h2{font-size:clamp(28px,3vw,36px);line-height:1.15;margin-bottom:10px}
.residents-page .sec-head .lede{max-width:75ch;font-size:17px;line-height:1.5;margin:0}
.residents-page .ut{grid-template-columns:150px minmax(0,1fr) 190px;gap:20px;padding:20px 0;align-items:start}
.residents-page .ut .svc{font-size:12px;line-height:1.5;color:var(--ink-2)}
.residents-page .ut .prov{font-size:22px}
.residents-page .ut .prov em{font-size:15px;line-height:1.5;max-width:58ch}
.residents-page .ut>a{justify-self:end}
.residents-page footer.site{margin-top:44px;padding:32px 0}
.residents-page .emerg{grid-template-columns:repeat(2,minmax(0,1fr))}
.residents-page .emerg .em:nth-child(2n){border-right:0;padding-left:24px}
.residents-page .emerg .em:nth-child(2n+1){padding-left:0}
@media(max-width:760px){.residents-page .page-head{padding-top:125px}.residents-page .ut{grid-template-columns:1fr;gap:7px;padding:18px 0}.residents-page .ut>a{justify-self:start}.residents-page .ut .right{align-items:flex-start}.residents-page .util{margin-top:24px}}
@media(max-width:480px){.residents-page .emerg{grid-template-columns:1fr}.residents-page .emerg .em:nth-child(n){padding-left:0;border-right:0}.residents-page .page-head .footer-links{flex-direction:column;align-items:center}}

/* Let the disclaimer use the entire footer content width. */
footer.site .legal{width:100%}
footer.site .legal p{flex:1 1 100%;width:100%;max-width:none}

/* Bold desktop navigation labels. */
.desktop-nav a{font-weight:700}

/* Resident access stays visible above the primary navigation. */
:root{--resident-bar-height:40px}
.resident-bar{position:fixed;inset:0 0 auto;z-index:65;height:var(--resident-bar-height);background:var(--reservoir);color:#fff;font:14px/1.3 "Instrument Sans",sans-serif}
.resident-bar-inner{height:100%;max-width:1560px;margin:auto;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:16px}
.resident-bar-inner>div{display:flex;align-items:center;gap:16px}
.resident-bar a{font-weight:700;text-decoration:none;display:inline-flex;align-items:center;min-height:40px;padding:0 4px}
.resident-bar a:hover{text-decoration:underline;text-underline-offset:4px}
.resident-bar a:focus-visible{outline-color:#fff}
.resident-bar-label{opacity:.8}
nav.top{top:var(--resident-bar-height)}
.menu{padding-top:150px}
.page-head{padding-top:200px}
.residents-page .page-head{padding-top:180px}
.hero-copy{padding-top:200px}
section[id],header[id],.access-card[id]{scroll-margin-top:160px}
.resident-access{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.access-card{border:1px solid var(--hair);background:var(--paper-2);padding:28px;display:flex;flex-direction:column;align-items:flex-start}
.access-card h2{font-size:32px;line-height:1.15;margin:12px 0}
.access-card p{font-size:17px;line-height:1.5;color:var(--ink-2)}
.access-card .btn-solid{margin-top:auto;font-size:14px}
@media(max-width:760px){.resident-access{grid-template-columns:1fr}.residents-page .page-head{padding-top:165px}}
@media(max-width:640px){.resident-bar-label{display:none}.resident-bar-inner>div{gap:12px}.resident-bar{font-size:13px}.page-head{padding-top:180px}.hero-copy{padding-top:200px}}

/* Neutral resident bar and a hero that ends at the viewport fold. */
.resident-bar{background:#292722;color:#faf8f4;border-bottom:1px solid rgba(255,255,255,.13)}
.homepage .hero{height:100vh;height:100dvh;min-height:0;max-height:none}
.homepage .hero-copy{padding-top:160px;padding-bottom:clamp(24px,5dvh,64px)}
.homepage .hero-copy h1{font-size:clamp(36px,min(6.8vw,10dvh),88px)}
.homepage .hero-copy .intro{font-size:clamp(16px,2.4dvh,20px);margin:clamp(12px,2.5dvh,22px) 0}
@media(max-width:640px){.homepage .hero-copy h1{font-size:clamp(32px,min(10vw,7dvh),52px)}.homepage .hero-copy .cta-row{gap:16px}.homepage .hero-copy .btn{padding:12px 18px}.homepage .hero-copy .u{font-size:11px;letter-spacing:.12em;margin-bottom:12px}}
@media(max-height:600px){.homepage nav.top{padding-top:10px;padding-bottom:10px}.homepage .hero-copy{padding-top:125px;padding-bottom:18px}.homepage .hero-copy h1{font-size:clamp(28px,7dvh,44px);max-width:26ch}.homepage .hero-copy .u{margin-bottom:8px}.homepage .hero-copy .intro{margin:10px 0;font-size:16px;max-width:65ch}.homepage .hero-copy .btn{padding:10px 18px}.homepage .hero-copy .cta-row{gap:16px}}

/* ── homes for sale ── */
.listing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.listing{border:1px solid var(--hair);background:var(--paper);display:flex;flex-direction:column}
.listing-img{position:relative;display:block;overflow:hidden}
.listing-img img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.listing-img:hover img{transform:scale(1.03)}
.listing-tag{position:absolute;left:14px;bottom:12px;font:600 10.5px "Instrument Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(14,16,18,.55);padding:5px 9px;border-radius:2px}
.listing-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:8px;flex:1}
.listing-body h3{font-size:24px;line-height:1.15;letter-spacing:-.015em;margin:0}
.listing-addr{font:13px "Instrument Sans",sans-serif;letter-spacing:.04em;color:var(--ink-3);margin:0}
.listing-note{color:var(--ink-2);font-size:16px;margin:6px 0 10px;flex:1}
.section-note{font:15px "Instrument Sans",sans-serif;color:var(--ink-2);margin-top:22px}
.section-note a{color:var(--reservoir)}
@media(max-width:1000px){.listing-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.listing-grid{grid-template-columns:1fr}}

/* subpage headers: centered, per owner rule (fill the container or center) */
.page-head{text-align:center}
.page-head h1{margin-inline:auto;max-width:22ch}
.page-head p{margin-inline:auto}
.page-head .footer-links{justify-content:center}

.legal .credit{font:12.5px "Instrument Sans",sans-serif;color:var(--ink-3);margin-top:14px}.legal .credit a{color:var(--ink-2)}