:root{
  --paper:#F6F5F2; --surface:#FFFFFF; --surface-alt:#EEEDE8;
  --ink:#18242F; --muted:#5A6774; --line:#DBD8D0;
  --navy:#10263B; --navy-soft:#1C4266; --gold:#A87C2C; --gold-soft:#C9A34E;
  --shadow:0 1px 2px rgba(16,38,59,.06), 0 10px 28px rgba(16,38,59,.07);
  --wrap:1160px; --radius:3px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0E151C; --surface:#141F29; --surface-alt:#18242F;
    --ink:#E6ECF2; --muted:#94A3B1; --line:#25333F;
    --navy:#080F16; --navy-soft:#16344F; --gold:#D0A24C; --gold-soft:#E0BC7A;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --paper:#0E151C; --surface:#141F29; --surface-alt:#18242F;
  --ink:#E6ECF2; --muted:#94A3B1; --line:#25333F;
  --navy:#080F16; --navy-soft:#16344F; --gold:#D0A24C; --gold-soft:#E0BC7A;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:"Public Sans","Segoe UI",system-ui,sans-serif; font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:"Source Serif 4",Georgia,serif; font-weight:600; margin:0; line-height:1.2; text-wrap:balance}
p{margin:0}
a{color:inherit}
img{max-width:100%; display:block}
.wrap{width:min(100% - 40px, var(--wrap)); margin-inline:auto}
.eyebrow{font-size:12px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); margin:0 0 10px}
.section{padding:68px 0}
.section + .section{border-top:1px solid var(--line)}
.lede{color:var(--muted); max-width:62ch}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.mockbar{background:#2A2118; color:#F3E7D2; font-size:13px; padding:9px 20px; text-align:center}
.mockbar b{color:#E9C583; letter-spacing:.1em; text-transform:uppercase; font-size:11.5px}

/* ---------- masthead ---------- */
.masthead{background:var(--surface); border-bottom:1px solid var(--line)}
.masthead-inner{display:flex; align-items:center; gap:28px; padding:14px 0}
.lockup{display:flex; align-items:center; gap:15px; text-decoration:none; flex:0 0 auto}
.lockup .mark{width:62px; color:var(--navy)}
:root[data-theme="dark"] .lockup .mark{color:var(--gold-soft)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .lockup .mark{color:var(--gold-soft)}}
.lockup .name{font-family:"Source Serif 4",Georgia,serif; font-size:20px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; line-height:1.1}
.lockup .name span{display:block; font-family:"Public Sans",sans-serif; font-size:10.5px; font-weight:600; letter-spacing:.24em; color:var(--muted); margin-top:3px}
nav.primary{margin-left:auto; display:flex; align-items:center; gap:26px; flex-wrap:wrap}
nav.primary a{text-decoration:none; font-size:14.5px; font-weight:500; padding:6px 0; border-bottom:2px solid transparent}
nav.primary a:hover{border-bottom-color:var(--gold); color:var(--navy-soft)}
:root[data-theme="dark"] nav.primary a:hover{color:var(--gold-soft)}
.btn{display:inline-block; text-decoration:none; font-weight:600; font-size:14.5px; padding:11px 19px;
  border-radius:var(--radius); border:1px solid transparent}
.btn-gold{background:var(--gold); color:#18120A}
.btn-gold:hover{background:var(--gold-soft)}
.btn-outline{border-color:var(--line); background:var(--surface)}
.btn-outline:hover{border-color:var(--gold); color:var(--gold)}
.btn-ghost{border-color:rgba(255,255,255,.5); color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.14)}

/* ---------- hero ---------- */
.hero{position:relative; isolation:isolate; color:#fff; text-align:center}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%; z-index:-2}
.hero::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(8,20,33,.76) 0%, rgba(8,20,33,.58) 45%, rgba(8,20,33,.88) 100%)}
.hero-inner{padding:92px 0 84px}
.hero .signmark{width:min(560px, 84%); margin:0 auto; color:#fff}
.hero .signmark svg{width:100%; height:auto; display:block}
.hero p{color:#D9E2EA; max-width:54ch; margin:26px auto 0; font-size:18px}
.hero-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:28px}

/* ---------- next-up strip ---------- */
.nextup{background:var(--navy); color:#E4EBF1}
.nextup-inner{display:flex; align-items:center; gap:22px; padding:16px 0; flex-wrap:wrap}
.nextup .tag{font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-soft);
  border:1px solid rgba(201,163,78,.5); padding:5px 10px; border-radius:2px}
.nextup strong{font-family:"Source Serif 4",serif; font-size:19px; font-weight:600}
.nextup span{color:#9FB2C2; font-size:15px}
.nextup a{margin-left:auto; color:var(--gold-soft); font-weight:600; font-size:14.5px; text-decoration:none;
  border-bottom:1px solid rgba(201,163,78,.45)}

/* ---------- quick links ---------- */
.quick-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px}
.quick-card{background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--gold);
  border-radius:var(--radius); padding:24px 22px 20px; box-shadow:var(--shadow); text-decoration:none;
  display:block; transition:transform .15s ease, box-shadow .15s ease}
.quick-card:hover{transform:translateY(-3px); box-shadow:0 12px 32px rgba(16,38,59,.16)}
.quick-card h3{font-size:19px; margin-bottom:6px}
.quick-card p{font-size:14.5px; color:var(--muted); line-height:1.5}
.quick-card .go{display:inline-block; margin-top:12px; font-size:13.5px; font-weight:600; color:var(--gold)}

/* ---------- two column ---------- */
.cols{display:grid; grid-template-columns:1.7fr 1fr; gap:48px; align-items:start}
.cols-mid > aside{align-self:center}

/* The emergency notice. Full width, high contrast, and 911 large enough to read at a glance -
   it is the one thing on the page that matters more than the form beneath it. */
.alert{display:flex; align-items:center; gap:26px; margin-bottom:42px; padding:22px 30px;
  background:var(--navy); color:#C5D3E0; border-left:6px solid var(--gold);
  border-radius:var(--radius); box-shadow:var(--shadow)}
.alert-num{flex:0 0 auto; font-family:"Source Serif 4",Georgia,serif; font-size:46px;
  font-weight:700; line-height:1; color:var(--gold-soft); letter-spacing:.02em}
.alert p{margin:0; font-size:16px; max-width:82ch}
.alert strong{color:#fff; font-weight:600}
@media (max-width:640px){
  .alert{flex-direction:column; align-items:flex-start; gap:12px; padding:20px 22px}
  .alert-num{font-size:38px}
}
@media (max-width:880px){.cols{grid-template-columns:1fr; gap:36px}}
.post{padding:22px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:76px 1fr; gap:22px}
.post:first-of-type{padding-top:4px}
.post .date{text-align:center; border:1px solid var(--line); border-radius:var(--radius); padding:8px 4px;
  background:var(--surface-alt); height:fit-content}
.post .date .m{display:block; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold)}
.post .date .d{display:block; font-family:"Source Serif 4",serif; font-size:24px; font-weight:600; line-height:1.1}
.post h3{font-size:21px; margin-bottom:6px}
.post p{font-size:15.5px; color:var(--muted)}
.post a.more{font-size:14px; font-weight:600; text-decoration:none; border-bottom:1px solid var(--gold);
  display:inline-block; margin-top:8px; color:var(--navy-soft)}
:root[data-theme="dark"] .post a.more{color:var(--gold-soft)}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow)}
.panel + .panel{margin-top:20px}
.panel h3{font-size:20px; margin-bottom:14px; display:flex; align-items:baseline;
  justify-content:space-between; gap:10px; flex-wrap:wrap}

/* Where a link goes, shown rather than explained. .who names the far end of a section;
   .ext puts an arrow after any link that leaves this site. */
.who{font-family:"Public Sans",sans-serif; font-size:10px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; white-space:nowrap; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:3px 9px; line-height:1.5}
.who.here{color:var(--gold); border-color:var(--gold)}
h2 .who{margin-left:12px; vertical-align:middle}
a.ext::after{content:"\2197"; margin-left:.3em; font-size:.8em; line-height:1; opacity:.8}
.legend{font-size:12px; font-weight:600; letter-spacing:.05em; color:var(--muted);
  margin:14px 0 0; text-align:right}
.sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.meeting{display:flex; gap:14px; padding:12px 0; border-bottom:1px dotted var(--line); font-size:15px}
.meeting:last-of-type{border-bottom:0}
.meeting time{font-weight:600; flex:0 0 92px; font-variant-numeric:tabular-nums; color:var(--navy-soft)}
:root[data-theme="dark"] .meeting time{color:var(--gold-soft)}
.meeting span{color:var(--muted)}

/* ---------- documents ---------- */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
table{border-collapse:collapse; width:100%; min-width:620px; font-size:15px}
thead th{text-align:left; font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); padding:14px 20px; border-bottom:1px solid var(--line); background:var(--surface-alt)}
tbody td{padding:14px 20px; border-bottom:1px solid var(--line)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-alt)}
td.doc a{font-weight:600; text-decoration:none; color:var(--navy-soft)}
:root[data-theme="dark"] td.doc a{color:var(--gold-soft)}
td.doc a:hover{text-decoration:underline}
td.meta{color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.tag{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 8px; border:1px solid var(--line); border-radius:2px; color:var(--muted); background:var(--paper)}

/* ---------- amenities ---------- */
.amen{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:30px}
.amen h3{font-size:19px; margin-bottom:6px}
.amen p{font-size:15px; color:var(--muted)}
.amen .ic{width:34px; height:34px; color:var(--gold); margin-bottom:12px}

/* ---------- contact ---------- */
.contact{background:var(--surface-alt)}
.contact-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:34px}
.contact h3{font-size:18px; margin-bottom:10px}
dl{margin:0; font-size:15px}
dt{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:12px}
dd{margin:2px 0 0}

/* ---------- footer ---------- */
footer{background:var(--navy); color:#C9D5E0; padding:54px 0 28px; font-size:14.5px}
footer a{color:#C9D5E0; text-decoration:none}
footer a:hover{color:var(--gold-soft)}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
footer h4{font-family:"Public Sans",sans-serif; font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:#fff; margin-bottom:12px}
footer ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.foot-mark{display:flex; align-items:center; gap:13px; margin-bottom:14px}
.foot-mark .mark{width:58px; color:var(--gold-soft)}
.foot-mark strong{font-family:"Source Serif 4",serif; font-size:17px; letter-spacing:.06em; text-transform:uppercase; color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.14); margin-top:34px; padding-top:18px; font-size:13px;
  color:#8FA2B3; display:flex; gap:16px; flex-wrap:wrap; justify-content:space-between}
@media (max-width:700px){
  nav.primary a:not(.btn){display:none}
  .hero-inner{padding:64px 0 68px}
  .section{padding:50px 0}
}

/* =====================================================================
   Additions for the live multi-page site
   ===================================================================== */

/* Logos are external SVGs painted with currentColor via a CSS mask, so one
   file serves navy, white and gold without duplicating the artwork. */
.mark, .signmark-img{
  background-color:currentColor;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
  display:block;
}
.mark{
  -webkit-mask-image:url("logo-mark.svg"); mask-image:url("logo-mark.svg");
  aspect-ratio:931/347;
}
.signmark-img{
  -webkit-mask-image:url("logo-lockup.svg"); mask-image:url("logo-lockup.svg");
  aspect-ratio:1269/756; width:100%;
}
.lockup .mark{width:62px}
.foot-mark .mark{width:58px}

nav.primary a[aria-current="page"]{border-bottom-color:var(--gold); color:var(--navy-soft)}
:root[data-theme="dark"] nav.primary a[aria-current="page"]{color:var(--gold-soft)}

/* interior page header */
.pagehead{background:var(--navy); color:#fff; padding:52px 0 46px}
.pagehead .eyebrow{color:var(--gold-soft)}
.pagehead h1{font-size:clamp(30px,4.4vw,44px); color:#fff}
.pagehead p{color:#CBD8E4; max-width:62ch; margin-top:14px; font-size:17.5px}

/* readable prose blocks */
.prose{max-width:70ch}
.prose h3{font-size:22px; margin:30px 0 8px}
.prose p + p{margin-top:14px}
.prose ul, .prose ol{margin:14px 0 0; padding-left:22px}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--gold)}
.prose a{color:var(--navy-soft); font-weight:600}
:root[data-theme="dark"] .prose a{color:var(--gold-soft)}

/* callout */
.callout{border:1px solid var(--line); border-left:3px solid var(--gold); background:var(--surface);
  padding:20px 22px; border-radius:var(--radius); margin-top:24px}
.callout h3{font-size:18px; margin-bottom:8px}
.callout p{font-size:15.5px; color:var(--muted)}
.callout p + p{margin-top:10px}

/* numbered steps */
.steps{counter-reset:step; display:grid; gap:18px; margin-top:24px; padding:0; list-style:none}
.steps li{counter-increment:step; display:grid; grid-template-columns:38px 1fr; gap:16px; align-items:start}
.steps li::before{content:counter(step); font-family:"Source Serif 4",serif; font-weight:600; font-size:17px;
  width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--gold);
  color:var(--gold); border-radius:50%}
.steps h3{font-size:18px; margin-bottom:4px}
.steps p{font-size:15.5px; color:var(--muted)}

/* definition rows */
.facts-rows{border-top:1px solid var(--line); margin-top:22px}
.facts-rows div{display:grid; grid-template-columns:230px 1fr; gap:20px; padding:13px 0;
  border-bottom:1px solid var(--line)}
.facts-rows dt{font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin:0}
.facts-rows dd{margin:0; font-size:16px}
@media (max-width:640px){.facts-rows div{grid-template-columns:1fr; gap:4px}}

/* portal callout card */
.portal{background:var(--navy); color:#fff; border-radius:var(--radius); padding:28px 30px;
  display:flex; gap:26px; align-items:center; flex-wrap:wrap}
.portal h3{font-size:22px; color:#fff; margin-bottom:6px}
.portal p{color:#C5D3E0; font-size:15.5px; max-width:52ch}
.portal .btn{margin-left:auto}
@media (max-width:700px){.portal .btn{margin-left:0}}

/* to-be-confirmed marker: remove these before launch */
.tbc{background:#FFF3D4; color:#6B4A05; border:1px dashed #C9A34E; padding:1px 7px;
  border-radius:2px; font-size:.9em; font-weight:600}
:root[data-theme="dark"] .tbc{background:#3A2E12; color:#EBCF8C}
.foot-mark{color:var(--gold-soft)}
.foot-mark strong{color:#fff}

/* ---- members area chrome (gated build) ---- */
.memberbar{background:#0B1B2A; color:#B9C9D6; font-size:13px; border-bottom:1px solid #1E3348}
.memberbar-inner{display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:9px 0}
.mb-tag{font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-soft); border:1px solid #34506A; border-radius:2px; padding:3px 8px}
.mb-note{color:#7E93A5; max-width:56ch}
.memberbar a{color:#D7E3EC; text-decoration:none; font-weight:600}
.memberbar a:hover{color:#fff; text-decoration:underline}
.memberbar a:nth-of-type(1){margin-left:auto}
@media (max-width:760px){.mb-note{display:none} .memberbar a:nth-of-type(1){margin-left:0}}

/* ---- public landing page ---- */
.gate{background:var(--navy); color:#fff; border-radius:var(--radius); padding:30px 32px;
  display:flex; gap:26px; align-items:center; flex-wrap:wrap}
.gate h3{font-size:22px; color:#fff; margin-bottom:6px}
.gate p{color:#C5D3E0; font-size:15.5px; max-width:54ch}
.gate .btn{margin-left:auto}
@media (max-width:700px){.gate .btn{margin-left:0}}
.duo{display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:start}
@media (max-width:880px){.duo{grid-template-columns:1fr; gap:38px}}
.duo .plain{max-width:none}
.plain{max-width:66ch}
.plain p{font-size:16.5px; color:var(--ink); margin-bottom:16px}
.plain p.small{font-size:15px; color:var(--muted)}

/* ---- hero without a background photograph: the sign carries the page ---- */
.hero-plain{background:var(--navy); color:#E4EBF1; padding:66px 0 70px}
.hero-plain-inner{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:52px; align-items:center}
/* The emblem, not a photograph of the sign. The photo spelled the neighborhood's name a
   third time in a single screenful, next to the masthead and the headline; the emblem says
   the same thing without the words. Same SVG the masthead uses, painted by currentColor. */
.heromark{display:flex; align-items:center; justify-content:center; padding:10px 0}
.heromark .mark{width:min(100%,440px); color:var(--gold-soft)}
@media (max-width:880px){.heromark .mark{width:min(78%,320px)}}
.hero-copy .eyebrow{color:var(--gold-soft); margin-bottom:10px}
.hero-copy h1{color:#fff; font-size:clamp(30px,3.6vw,43px); text-wrap:balance}
.hero-copy p{color:#B7C7D5; font-size:17.5px; max-width:48ch; margin-top:16px}
.hero-plain .hero-actions{justify-content:flex-start; margin-top:28px}
@media (max-width:880px){
  .hero-plain{padding:44px 0 50px}
  .hero-plain-inner{grid-template-columns:1fr; gap:32px}
  .hero-plain .hero-actions{justify-content:center}
  .hero-copy{text-align:center}
  .hero-copy p{margin-inline:auto}
}

/* ---- contact form (public page) ---- */
.cform{display:flex; flex-direction:column; gap:18px; max-width:34rem}
.frow{display:flex; flex-direction:column; gap:6px}
.frow label{font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.cform input, .cform select, .cform textarea{
  font:inherit; font-size:16px; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); padding:11px 13px; width:100%}
.cform textarea{resize:vertical; min-height:150px; line-height:1.55}
.cform input:focus-visible, .cform select:focus-visible, .cform textarea:focus-visible{
  outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold)}
.frow .hint{font-size:14px; color:var(--muted)}
/* Bot check at the left, Send at the right - so the button's right edge lands flush
   with the right edge of the message box directly above it. */
.fsend{display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap}
/* The Turnstile widget is a fixed-size iframe; line-height:0 stops it adding a phantom row
   under itself, so it lines up with the button rather than sitting slightly high. */
.fsend .cf-turnstile{flex:0 0 auto; line-height:0}
.fsend .btn{flex:0 0 auto}
/* Status always takes its own line, so a long error message never pushes the button away
   from the bot check it belongs beside. */
.fstatus{flex:1 0 100%; font-size:15px; color:var(--muted); margin:0}
.fstatus:empty{height:0; overflow:hidden}
.fstatus.bad{color:#A03328; font-weight:600}
:root[data-theme="dark"] .fstatus.bad{color:#F1A79C}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .fstatus.bad{color:#F1A79C}}
/* After a successful send: the fields stay put, dimmed and disabled, so the sender can read
   back what they submitted. Nothing is removed above the button row, so the page cannot jump.
   WebKit overrides the text colour of a disabled field, hence -webkit-text-fill-color. */
.cform .frow{transition:opacity .45s ease}
.cform.sent .frow{opacity:.5; pointer-events:none}
.cform.sent input, .cform.sent select, .cform.sent textarea{
  background:var(--surface-alt); color:var(--ink); -webkit-text-fill-color:var(--ink);
  opacity:1; cursor:default}

/* The confirmation lands in the row the bot check and button vacated. */
.fstatus.good{padding:14px 18px; background:var(--surface); border:1px solid var(--line);
  border-left:4px solid var(--gold); border-radius:var(--radius); color:var(--ink); font-size:15.5px}
.fstatus.good strong{font-weight:700}

.fdone{border-left:3px solid var(--gold); padding:6px 0 6px 20px}
.fdone h3{font-size:22px; margin-bottom:8px}
.fdone p{color:var(--muted); font-size:16px}