/* ============================================================
   STARKEY RANCH — community home page concept
   Visual direction: "Nature Distilled" — warm earth palette
   sampled from the Starkey Ranch mark (rust + leaf green +
   charcoal), cream ground, grain texture, restrained motion.
   Type: Fraunces (display serif) + Hanken Grotesk (text).
   ============================================================ */

:root{
  /* --- brand, sampled from the logo --- */
  --rust:        #c15c2c;   /* the ragged circle */
  --rust-ink:    #b25324;   /* interactive rust — passes AA on white */
  --rust-deep:   #98451c;   /* hover / pressed */
  --leaf:        #5c8a3c;   /* the frond */
  --leaf-ink:    #40632a;   /* green text / links */
  --pine:        #2e4723;   /* deep green — footer, bands */
  --pine-2:      #24391b;

  /* --- neutrals --- */
  --ink:         #33352e;   /* headings */
  --body:        #45463e;   /* body copy */
  --cream:       #f7f2e8;   /* page ground */
  --sand:        #efe6d4;   /* muted panels */
  --paper:       #ffffff;   /* cards */
  --line:        #e2d7c0;   /* hairlines on cream */
  --line-soft:   #ece3d1;

  /* --- type --- */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --text: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* --- rhythm --- */
  --wrap: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 4px;
  --shadow-1: 0 1px 2px rgba(51,53,46,.06), 0 8px 24px -12px rgba(51,53,46,.18);
  --shadow-2: 0 2px 6px rgba(51,53,46,.08), 0 26px 50px -20px rgba(51,53,46,.32);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--cream);
  color:var(--body);
  font-family:var(--text);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* grain — subtle, per Nature Distilled */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:9999;
  opacity:.035;
  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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ max-width:100%; display:block; }
a{ color:var(--leaf-ink); }
h1,h2,h3,h4{ font-family:var(--display); color:var(--ink); line-height:1.12; margin:0; font-weight:600; letter-spacing:-.01em; }
p{ margin:0 0 1rem; }
p:last-child{ margin-bottom:0; }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }

/* focus — visible, consistent */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline:3px solid var(--rust-ink);
  outline-offset:2px;
  border-radius:2px;
}

.skip{
  position:absolute; left:8px; top:-46px;
  background:var(--paper); color:var(--ink);
  padding:.6rem 1rem; border-radius:var(--radius); z-index:10000;
  font-weight:600; transition:top .15s ease;
}
.skip:focus{ top:8px; }

/* eyebrow — a real structural device: it labels the section */
.eyebrow{
  font-family:var(--text);
  font-weight:600;
  font-size:.8rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--rust-ink);
  display:flex; align-items:center; gap:.6rem;
  margin:0 0 1rem;
}
.eyebrow::before{
  content:""; width:26px; height:2px; background:var(--rust); flex:none;
}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--rust-ink); --fg:#fff;
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--bg); color:var(--fg);
  font-family:var(--text); font-weight:600; font-size:1rem;
  padding:.85rem 1.5rem;
  border:1px solid transparent; border-radius:var(--radius);
  text-decoration:none; cursor:pointer;
  min-height:48px;
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover{ background:var(--rust-deep); }
.btn:active{ transform:translateY(1px); }
.btn--ghost{
  --bg:transparent; --fg:var(--cream);
  border-color:rgba(247,242,232,.5);
}
.btn--ghost:hover{ --bg:rgba(247,242,232,.12); background:rgba(247,242,232,.12); }
.btn--on-light{
  --bg:transparent; --fg:var(--ink);
  border-color:var(--line);
}
.btn--on-light:hover{ background:var(--sand); }
.btn--forest{
  --bg:var(--pine); --fg:#fff;
  border-color:transparent;
  padding-inline:1.75rem;
  box-shadow:0 8px 22px -8px rgba(46,71,35,.55);
}
.btn--forest:hover{ background:#3c5a2c; box-shadow:0 10px 26px -8px rgba(46,71,35,.6); }

/* ---------- utility bar ---------- */
.util{
  background:var(--pine);
  color:#f4efe4;
  font-size:.82rem;
}
.util .wrap{
  display:flex; justify-content:space-between; align-items:center;
  min-height:38px; gap:1rem;
}
.util a{ color:#f4efe4; text-decoration:none; }
.util a:hover{ text-decoration:underline; }
.util__loc{ display:flex; align-items:center; gap:.4rem; letter-spacing:.02em; }
.util__right{ display:flex; align-items:center; gap:1.25rem; }
.util__right a{ display:flex; align-items:center; gap:.4rem; font-weight:600; }
@media (max-width:640px){ .util__loc span{ display:none; } }

/* ---------- masthead ---------- */
.mast{
  background:var(--paper);
  border-bottom:1px solid var(--line-soft);
}
.mast .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:1rem;
  gap:1rem;
}
.brand{ display:flex; align-items:center; gap:.9rem; text-decoration:none; }
.brand img{ height:72px; width:auto; }
.brand__type{ display:flex; flex-direction:column; line-height:1; }
.brand__name{
  font-family:var(--display); font-weight:600; color:var(--ink);
  font-size:1.5rem; letter-spacing:.01em;
}
.brand__sub{
  font-family:var(--text); font-weight:600;
  font-size:.62rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--rust-ink); margin-top:.35rem; padding-left:.05rem;
}
.mast__tag{
  font-family:var(--display); font-style:italic; color:var(--body);
  font-size:1.02rem; text-align:right;
}
@media (max-width:860px){ .mast__tag{ display:none; } .brand img{ height:58px; } }

/* ---------- primary nav (persistent links, Harmony-style) ---------- */
.nav{
  background:var(--rust-ink);
  position:sticky; top:0; z-index:100;
  box-shadow:0 10px 24px -18px rgba(51,53,46,.6);
}
.nav__list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center;
}
.nav__list a{
  display:flex; align-items:center; justify-content:center;
  min-height:54px;
  padding:.5rem clamp(.7rem, 1.7vw, 1.2rem);
  color:#fdf3e9; text-decoration:none;
  font-weight:600; font-size:.95rem;
  letter-spacing:.012em;
  border-bottom:3px solid transparent;
  transition:background .16s ease, border-color .16s ease;
}
.nav__list a:hover,
.nav__list a:focus-visible,
.nav__list a[aria-current="page"]{
  background:rgba(0,0,0,.16);
  border-bottom-color:var(--leaf);
}
@media (max-width:560px){
  .nav__list a{ font-size:.84rem; min-height:46px; padding:.45rem .65rem; letter-spacing:0; }
}

/* ---------- nav submenu (e.g. MPOA → Architectural Review) ---------- */
.nav__item{ position:relative; }
.nav__caret{ margin-left:.4rem; flex:none; transition:transform .15s ease; }
.submenu{ list-style:none; margin:0; padding:0; }

@media (min-width:681px){
  .submenu{
    display:none;
    position:absolute; top:100%; left:50%; transform:translateX(-50%);
    min-width:15rem;
    background:var(--rust-ink);
    box-shadow:0 16px 28px -16px rgba(0,0,0,.5);
    border-top:2px solid var(--leaf);
    z-index:110;
  }
  .nav__item.has-submenu:hover .submenu,
  .nav__item.has-submenu:focus-within .submenu{ display:block; }
  .nav__item.has-submenu:hover .nav__caret,
  .nav__item.has-submenu:focus-within .nav__caret{ transform:rotate(180deg); }
  .submenu a{
    display:block; justify-content:flex-start;
    min-height:0; white-space:nowrap;
    padding:.85rem 1.2rem;
    border-bottom:1px solid rgba(255,255,255,.09);
  }
  .submenu li:last-child a{ border-bottom:0; }
  .submenu a:hover, .submenu a:focus-visible{
    background:rgba(0,0,0,.18); border-bottom-color:rgba(255,255,255,.09);
  }
}

@media (max-width:680px){
  .nav__caret{ display:none; }
  .submenu{ background:rgba(0,0,0,.14); }
  .submenu a{
    min-height:46px; font-size:.88rem;
    padding-inline:calc(var(--gutter) + 1.1rem);
    border-bottom:1px solid rgba(255,255,255,.09);
  }
}

/* ---------- mobile nav toggle (hamburger) ---------- */
.nav__toggle{
  display:none;
  align-items:center; gap:.65rem;
  width:100%;
  background:none; border:0; cursor:pointer;
  padding:.9rem .1rem;
  color:#fdf3e9; font-family:var(--text); font-weight:700;
  font-size:.92rem; letter-spacing:.02em;
}
.nav__toggle-icon{ position:relative; width:22px; height:15px; flex:none; }
.nav__toggle-icon span{
  position:absolute; left:0; width:100%; height:2px;
  background:currentColor; border-radius:2px;
  transition:transform .2s ease, opacity .2s ease, top .2s ease;
}
.nav__toggle-icon span:nth-child(1){ top:0; }
.nav__toggle-icon span:nth-child(2){ top:6.5px; }
.nav__toggle-icon span:nth-child(3){ top:13px; }
.nav.is-open .nav__toggle-icon span:nth-child(1){ top:6.5px; transform:rotate(45deg); }
.nav.is-open .nav__toggle-icon span:nth-child(2){ opacity:0; }
.nav.is-open .nav__toggle-icon span:nth-child(3){ top:6.5px; transform:rotate(-45deg); }

@media (max-width:680px){
  .nav{ position:sticky; } /* establishes the containing block for the dropdown below */
  .nav__toggle{ display:flex; }
  .nav__list{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column;
    background:var(--rust-ink);
    box-shadow:0 16px 28px -16px rgba(0,0,0,.5);
    border-top:1px solid rgba(255,255,255,.14);
    max-height:calc(100vh - 100%);
    overflow-y:auto;
  }
  .nav.is-open .nav__list{ display:flex; }
  .nav__list a{
    justify-content:flex-start;
    padding-inline:var(--gutter);
    border-bottom:1px solid rgba(255,255,255,.09);
    min-height:52px;
  }
  .nav__list li:last-child a{ border-bottom:0; }
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  color:var(--cream);
  isolation:isolate;
  min-height:min(78vh, 640px);
  display:flex; align-items:center;
}
.hero__media{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 62%; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(46,71,35,.30) 0%, rgba(38,57,27,.20) 40%, rgba(38,45,32,.78) 100%),
    linear-gradient(90deg, rgba(38,45,32,.55) 0%, rgba(38,45,32,0) 60%);
}
.hero .wrap{
  padding-block:clamp(3rem, 8vw, 5.5rem);
  max-width:760px; margin-inline:0;
}
.hero__wrap-outer{ width:100%; max-width:var(--wrap); margin-inline:auto; }
.hero h1{
  color:#fff;
  font-size:clamp(2.9rem, 7vw, 5.2rem);
  font-weight:600;
  letter-spacing:-.02em;
  margin:0 0 1.1rem;
  text-shadow:0 2px 30px rgba(30,40,20,.35);
}
.hero h1 em{
  font-style:italic; font-weight:400;
  color:#f3d9c4;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }
.hero__eyebrow{
  color:#f3d9c4;
  border-color:#f3d9c4;
  font-size:clamp(1.05rem, 2.2vw, 1.4rem);
  letter-spacing:.2em;
}
.hero__eyebrow::before{ background:#f3d9c4; width:34px; }

.hero__scroll{
  position:absolute; left:50%; bottom:1.4rem; transform:translateX(-50%);
  z-index:1; color:var(--cream); opacity:.8;
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
}
.hero__scroll svg{ width:18px; height:18px; animation:bob 2.4s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }
@media (prefers-reduced-motion: reduce){ .hero__scroll svg{ animation:none; } }
@media (max-width:640px){ .hero__scroll{ display:none; } }

/* ---------- section scaffolding ---------- */
.section{ padding-block:clamp(3.5rem, 8vw, 6.5rem); }
#committees, #volunteer, #contact, #mpoa, #events, #parks,
#welcome-center, #cdd, #utilities, #trash{ scroll-margin-top:72px; } /* clears the sticky nav so the section lands in full view */
.section__head{ max-width:60ch; margin-bottom:2.75rem; }
.section__head h2{
  font-size:clamp(2rem, 4.4vw, 2.9rem);
  margin-bottom:.75rem;
}
.section__head p{ font-size:1.1rem; }

/* ---------- welcome / identity band ---------- */
.welcome{ background:var(--paper); border-block:1px solid var(--line-soft); }
.welcome__grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.welcome__figure{ position:relative; }
.welcome__figure img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--radius);
  box-shadow:var(--shadow-2);
}
.welcome__caption{
  position:absolute; left:-1px; bottom:1.25rem;
  background:var(--pine); color:var(--cream);
  font-size:.82rem; padding:.6rem 1rem;
  border-radius:0 var(--radius) var(--radius) 0;
  max-width:78%;
}
@media (max-width:820px){
  .welcome__grid{ grid-template-columns:1fr; }
  .welcome__figure{ order:-1; }
}

/* ---------- section cards ---------- */
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}
.card{
  display:flex; flex-direction:column;
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  overflow:hidden;
  text-decoration:none; color:inherit;
  box-shadow:var(--shadow-1);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-2);
  border-color:var(--line);
}
.card__media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--sand); }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.card:hover .card__media img{ transform:scale(1.045); }
.card__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(38,45,32,0) 45%, rgba(38,45,32,.5) 100%);
}
.card__index{
  position:absolute; top:.75rem; left:.75rem; z-index:1;
  font-family:var(--display); font-size:.78rem; font-weight:600;
  color:var(--cream);
  background:rgba(46,71,35,.72);
  padding:.15rem .55rem; border-radius:2px;
  letter-spacing:.02em;
}
.card__body{ padding:1.5rem 1.5rem 1.65rem; display:flex; flex-direction:column; flex:1; }
.card__icon{
  width:38px; height:38px; color:var(--leaf-ink);
  margin-bottom:.9rem;
}
.card__body h3{ font-size:1.4rem; margin-bottom:.5rem; }
.card__body p{ font-size:.96rem; }
.card__link{
  margin-top:1.1rem;
  font-family:var(--text); font-weight:600; font-size:.9rem;
  color:var(--rust-ink);
  display:inline-flex; align-items:center; gap:.4rem;
  letter-spacing:.02em;
}
.card:hover .card__link{ gap:.7rem; }
.card__link svg{ width:16px; height:16px; transition:gap .2s; }
@media (max-width:960px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .cards{ grid-template-columns:1fr; } }

/* ---------- events ---------- */
.events{ background:var(--sand); }
.events__list{ border-top:1px solid var(--line); }
.events__status{ padding:1.35rem 0; color:var(--body); font-style:italic; }
.event{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:1.5rem; align-items:center;
  padding:1.35rem 0;
  border-bottom:1px solid var(--line);
}
.event__date{
  text-align:center; flex:none;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius);
  width:66px; padding:.5rem 0;
}
.event__mon{
  font-family:var(--text); font-weight:700; font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--rust-ink);
}
.event__day{ font-family:var(--display); font-size:1.6rem; font-weight:600; color:var(--ink); line-height:1; }
.event__info h3{ font-size:1.2rem; margin-bottom:.15rem; }
.event__meta{ font-size:.88rem; color:var(--body); }
.event__tag{
  font-size:.74rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--leaf-ink); background:rgba(92,138,60,.14);
  padding:.3rem .6rem; border-radius:2px; white-space:nowrap;
}
@media (max-width:680px){
  .event{ grid-template-columns:auto 1fr; }
  .event__tag{ grid-column:2; justify-self:start; }
}
.events__foot{ margin-top:2rem; display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.events__note{ font-size:.82rem; color:var(--body); font-style:italic; }

/* ---------- MPOA band ---------- */
.mpoa{
  background:
    linear-gradient(180deg, rgba(46,71,35,.94), rgba(36,57,27,.96));
  color:var(--cream);
}
.mpoa h2{ color:#fff; }
.mpoa .eyebrow{ color:#f3d9c4; }
.mpoa .eyebrow::before{ background:#f3d9c4; }
.mpoa__grid{
  display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(2rem,5vw,4rem);
  align-items:start;
}
.mpoa__body p{ color:#eef0e6; }
.mpoa__contacts{
  display:grid; grid-template-columns:1fr; gap:1px;
  background:rgba(247,242,232,.16);
  border:1px solid rgba(247,242,232,.16);
  border-radius:var(--radius); overflow:hidden;
}
.contactcard{
  background:var(--pine-2);
  padding:1.15rem 1.25rem;
}
.contactcard__role{
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#f3d9c4; margin-bottom:.35rem;
}
.contactcard__name{ font-family:var(--display); font-size:1.15rem; color:#fff; margin-bottom:.4rem; }
.contactcard a{ color:#eef0e6; text-decoration:none; font-size:.9rem; display:block; }
.contactcard a:hover{ text-decoration:underline; color:#fff; }
.mpoa__meeting{
  margin-top:1.25rem; padding-top:1.25rem;
  border-top:1px solid rgba(247,242,232,.2);
  font-size:.92rem; color:#eef0e6;
}
.mpoa__cta{ margin-top:1.5rem; display:flex; gap:.9rem; flex-wrap:wrap; }
.mpoa__links{
  margin-top:2.75rem;
  display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem;
}
.mpoa__links .btn{ width:100%; justify-content:center; }
@media (max-width:820px){
  .mpoa__grid{ grid-template-columns:1fr; }
  .mpoa__links{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px){
  .mpoa__links{ grid-template-columns:1fr; }
}

/* ---------- contacts directory ---------- */
.contacts__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  align-items:start;
  gap:1.25rem;
  margin-top:1.5rem;
}
@media (max-width:900px){ .contacts__grid{ grid-template-columns:repeat(2, 1fr); } }
.ccard{
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  padding:1.1rem 1.3rem;
  box-shadow:var(--shadow-1);
}
.ccard__role{
  font-family:var(--text); font-weight:700;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--rust-ink); margin:0 0 .35rem;
}
.ccard__org{ font-size:.86rem; color:#736d5e; margin:0 0 .15rem; }
.ccard__name{
  font-family:var(--display); font-weight:600; font-size:1.12rem;
  color:var(--ink); margin:0 0 .5rem; line-height:1.2;
}
.ccard__cred{
  display:block; font-family:var(--text); font-weight:400;
  font-size:.76rem; letter-spacing:.02em; color:#736d5e; margin-top:.1rem;
}
.ccard__lines{ display:flex; flex-direction:column; gap:.2rem; font-size:.9rem; }
.ccard__lines span{ color:var(--body); }
.ccard__lines a{ color:var(--leaf-ink); text-decoration:none; display:inline-flex; align-items:center; gap:.35rem; }
.ccard__lines a:hover{ text-decoration:underline; }
.ccard--accent{ border-color:var(--rust); border-left-width:4px; }
.ccard--accent .ccard__name{ color:var(--rust-ink); }
@media (max-width:820px){ .contacts__grid{ grid-template-columns:1fr; } }

/* ---------- footer ---------- */
.foot{
  background:var(--pine-2); color:#d9ddcf;
  font-size:.92rem;
  padding-block:clamp(3rem,6vw,4.5rem) 2rem;
}
.foot a{ color:#d9ddcf; text-decoration:none; }
.foot a:hover{ color:#fff; text-decoration:underline; }
.foot__grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem;
  padding-bottom:2.5rem; border-bottom:1px solid rgba(247,242,232,.14);
}
.foot__brand{ display:flex; gap:.85rem; align-items:flex-start; margin-bottom:1rem; }
.foot__brand svg, .foot__brand img{ width:46px; height:46px; flex:none; }
.foot__brand .brand__name{ color:#fff; font-size:1.3rem; }
.foot__brand .brand__sub{ color:#f3d9c4; }
.foot__col h4{ color:#fff; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; font-family:var(--text); font-weight:700; margin-bottom:1rem; }
.foot__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.foot__bottom{
  padding-top:1.75rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.8rem; color:#a9b09b;
}
.foot__bottom p{ margin:0; max-width:60ch; }
.social{ display:flex; gap:.6rem; margin-top:1.1rem; }
.social a{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  background:rgba(247,242,232,.12); color:#f4efe4;
  transition:background .15s ease, color .15s ease;
}
.social a:hover{ background:var(--rust); color:#fff; }
.social svg{ width:17px; height:17px; }
@media (max-width:820px){ .foot__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot__grid{ grid-template-columns:1fr; } }

/* toast — concept feedback for un-wired links */
.toast{
  position:fixed; left:50%; bottom:1.5rem; transform:translate(-50%,140%);
  background:var(--pine); color:var(--cream);
  padding:.8rem 1.2rem; border-radius:var(--radius);
  box-shadow:var(--shadow-2);
  font-size:.9rem; font-weight:600;
  z-index:10001; opacity:0; max-width:90vw; text-align:center;
  transition:transform .32s cubic-bezier(.2,.7,.3,1), opacity .32s ease;
}
.toast.show{ transform:translate(-50%,0); opacity:1; }
@media (prefers-reduced-motion: reduce){ .toast{ transition:opacity .2s ease; } }

/* visually-hidden (screen-reader only) */
.sr-only{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   SUBPAGE SHELL  (Lifestyle & Events, and future section pages)
   ============================================================ */

.pagehero{
  position:relative; color:var(--cream); isolation:isolate;
  min-height:min(46vh, 420px);
  display:flex; align-items:flex-end;
}
.pagehero__media{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.pagehero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 55%; }
.pagehero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(46,71,35,.20) 0%, rgba(38,45,32,.35) 45%, rgba(38,45,32,.82) 100%);
}
.pagehero .wrap{ padding-block:clamp(2.75rem, 7vw, 4.5rem); }
.pagehero .eyebrow{ color:#f3d9c4; }
.pagehero .eyebrow::before{ background:#f3d9c4; }
.pagehero h1{
  color:#fff; font-size:clamp(2.4rem, 5.5vw, 3.9rem);
  letter-spacing:-.02em; margin:0 0 .55rem;
  text-shadow:0 2px 24px rgba(30,40,20,.35);
}
.pagehero p{ color:#f4efe4; max-width:48ch; font-size:clamp(1rem,2vw,1.15rem); margin:0; }

.lede{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.15rem, 2.3vw, 1.5rem); line-height:1.5;
  color:var(--ink); max-width:36ch;
}
.prose p{ font-size:1.02rem; max-width:64ch; }
.prose p + p{ margin-top:1rem; }

.section--sand{ background:var(--sand); }
.section--paper{ background:var(--paper); border-block:1px solid var(--line-soft); }

.split{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:clamp(2rem, 5vw, 4rem); align-items:start;
}
@media (max-width:840px){ .split{ grid-template-columns:1fr; } }

/* stat tiles */
.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:2rem; }
.tile{ background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--radius); padding:1.35rem 1.4rem; box-shadow:var(--shadow-1); }
.tile__n{ font-family:var(--display); font-weight:600; font-size:clamp(1.7rem,3.6vw,2.3rem); color:var(--rust-ink); line-height:1; }
.tile__l{ font-size:.9rem; color:var(--body); margin-top:.45rem; }
@media (max-width:680px){ .tiles{ grid-template-columns:1fr; } }

/* parks */
.parks{ display:grid; gap:1.25rem; }
.park{
  background:var(--paper); border:1px solid var(--line-soft);
  border-radius:var(--radius); box-shadow:var(--shadow-1);
  padding:1.55rem 1.65rem;
}
.park__head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.15rem .9rem; margin-bottom:.6rem; }
.park__name{ font-family:var(--display); font-weight:600; font-size:1.4rem; color:var(--ink); margin:0; }
.park__addr{ font-size:.88rem; color:#736d5e; }
.park p{ font-size:.97rem; margin:0 0 1.1rem; }
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{
  font-size:.76rem; font-weight:600; letter-spacing:.015em;
  color:var(--leaf-ink); background:rgba(92,138,60,.12);
  border:1px solid rgba(92,138,60,.24);
  padding:.3rem .65rem; border-radius:100px;
}
.chip--rust{ color:var(--rust-ink); background:rgba(178,83,36,.10); border-color:rgba(178,83,36,.24); }

/* callout */
.callout{
  background:var(--paper); border:1px solid var(--line);
  border-left:4px solid var(--leaf);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:1.15rem 1.35rem;
}
.callout h3{ font-size:1.05rem; margin:0 0 .35rem; }
.callout p{ margin:0; font-size:.95rem; }
.callout p + p{ margin-top:.2rem; }

/* download card */
.download{
  display:flex; align-items:center; gap:1rem;
  background:var(--paper); border:1px solid var(--line-soft);
  border-radius:var(--radius); box-shadow:var(--shadow-1);
  padding:1.15rem 1.35rem; text-decoration:none; color:inherit;
  max-width:34rem;
  transition:transform .18s ease, box-shadow .18s ease;
}
.download:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); }
.download svg{ width:38px; height:38px; flex:none; color:var(--rust-ink); }
.download__t{ font-family:var(--display); font-weight:600; font-size:1.1rem; color:var(--ink); }
.download__m{ font-size:.84rem; color:#736d5e; margin-top:.1rem; }

/* welcome-center panel */
.wc{
  background:linear-gradient(180deg, rgba(46,71,35,.96), rgba(36,57,27,.97));
  color:var(--cream); border-radius:var(--radius);
  padding:clamp(1.6rem, 4vw, 2.6rem);
  display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(1.5rem,4vw,3rem);
}
.wc h2, .wc h3{ color:#fff; }
.wc .eyebrow{ color:#f3d9c4; }
.wc .eyebrow::before{ background:#f3d9c4; }
.wc p{ color:#eef0e6; }
.wc a{ color:#fff; }
.wc__block{ display:grid; gap:.3rem; font-size:.95rem; }
.wc__block strong{ font-family:var(--display); font-weight:600; color:#fff; }
.wc__contacts{ display:grid; gap:1rem; }
@media (max-width:760px){ .wc{ grid-template-columns:1fr; } }

/* back-to-home crumb */
.crumb{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.85rem; font-weight:600; color:#f3d9c4;
  text-decoration:none; margin-bottom:1rem;
}
.crumb:hover{ color:#fff; }
.crumb svg{ width:14px; height:14px; }

/* app download buttons (Lifestyle & Events) */
.appbtns{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.15rem; }
.appbtns .btn{ padding-block:.7rem; }

/* footer welcome-center block */
.foot__wc{ margin-top:1.1rem; font-size:.9rem; line-height:1.75; }
.foot__wc strong{ display:block; color:#fff; font-family:var(--display); font-weight:600; font-size:1rem; margin-bottom:.15rem; }

/* ---- governing documents ---- */
.doclist{ display:grid; gap:1.25rem; }
.doc{
  display:grid; grid-template-columns:auto 1fr; gap:.4rem 1.4rem;
  background:var(--paper); border:1px solid var(--line-soft);
  border-radius:var(--radius); box-shadow:var(--shadow-1);
  padding:1.6rem 1.7rem;
}
.doc__icon{ width:42px; height:42px; flex:none; color:var(--rust-ink); grid-row:1 / span 3; }
.doc__title{ font-family:var(--display); font-weight:600; font-size:1.3rem; color:var(--ink); margin:0; }
.doc__desc{ font-size:.97rem; margin:.5rem 0 1rem; max-width:60ch; }
.doc__dl{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:600; font-size:.92rem; color:var(--rust-ink); text-decoration:none;
}
.doc__dl:hover{ text-decoration:underline; }
.doc__dl svg{ width:16px; height:16px; flex:none; }
.doc__meta{ color:#736d5e; font-weight:400; }
@media (max-width:560px){
  .doc{ grid-template-columns:1fr; }
  .doc__icon{ grid-row:auto; }
}

/* ---- ARB application tips ---- */
.tips{ display:grid; gap:1.25rem; }
.tip{
  background:var(--paper); border:1px solid var(--line-soft);
  border-radius:var(--radius); box-shadow:var(--shadow-1);
  padding:1.55rem 1.7rem;
}
.tip h3{ font-family:var(--display); font-weight:600; font-size:1.25rem; color:var(--ink); margin:0 0 .85rem; }
.tip ul{ margin:0; padding-left:1.2rem; display:grid; gap:.7rem; }
.tip li{ font-size:.97rem; line-height:1.6; }
.tip li::marker{ color:var(--rust); }
.tip p{ font-size:.97rem; line-height:1.6; margin:0 0 .85rem; }
.tip p:last-child{ margin-bottom:0; }

/* ---- community information: utilities + steps + who-does-what ---- */
.steps{ counter-reset:step; list-style:none; margin:0; padding:0; display:grid; gap:1rem; max-width:62ch; }
.steps li{ counter-increment:step; position:relative; padding-left:2.7rem; font-size:1rem; line-height:1.55; }
.steps li::before{
  content:counter(step); position:absolute; left:0; top:-.15rem;
  width:1.85rem; height:1.85rem; display:grid; place-items:center;
  background:var(--rust-ink); color:#fff;
  font-family:var(--display); font-weight:600; font-size:.9rem; border-radius:50%;
}
.steps a{ font-weight:600; }

.utils{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
@media (max-width:760px){ .utils{ grid-template-columns:1fr; } }
.util-cat{
  background:var(--paper); border:1px solid var(--line-soft);
  border-radius:var(--radius); box-shadow:var(--shadow-1);
  padding:1.5rem 1.6rem;
}
.util-cat > h3{ font-family:var(--display); font-weight:600; font-size:1.28rem; color:var(--ink); margin:0 0 1rem; }
.util-prov + .util-prov{ margin-top:1.1rem; padding-top:1.1rem; border-top:1px solid var(--line-soft); }
.util-prov__name{ font-weight:600; color:var(--ink); margin:0 0 .35rem; }
.util-prov__rows{ display:grid; gap:.22rem; font-size:.94rem; color:var(--body); }
.util-prov__rows .lbl{ color:#736d5e; }
.util-prov__rows a{ color:var(--body); text-decoration:none; }
.util-prov__rows a:hover{ text-decoration:underline; }
.util-prov__links{ display:flex; flex-wrap:wrap; gap:.3rem 1.1rem; margin-top:.55rem; }
.util-prov__links a{
  color:var(--rust-ink); font-weight:600; font-size:.88rem; text-decoration:none;
  display:inline-flex; align-items:center; gap:.3rem;
}
.util-prov__links a:hover{ text-decoration:underline; }
.util-prov__links svg{ width:13px; height:13px; flex:none; }

.duo{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
@media (max-width:760px){ .duo{ grid-template-columns:1fr; } }

/* provider block with a brand mark to the right */
.util-prov--wlogo{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:.75rem 1.25rem; }
.util-prov--wlogo .util-prov__main{ flex:1 1 12rem; }
.brandmark-spectrum{
  display:inline-flex; align-items:center; gap:.14em;
  font-family:var(--text); font-weight:700;
  font-size:1.75rem; letter-spacing:-.025em;
  color:#0d1f35; white-space:nowrap; flex:none;
  margin-top:.15rem;
}
.brandmark-spectrum svg{ width:.58em; height:.58em; fill:#1d6fe0; flex:none; }

.util-prov__links--lg a{ font-size:1.08rem; }
.util-prov__links--lg svg{ width:1em; height:1em; }

/* ---- compact information page (Community Information) ---- */
.compact .pagehero{ min-height:min(34vh, 300px); }
.compact .section{ padding-block:clamp(1.75rem, 3.5vw, 2.75rem); }
.compact .section__head{ margin-bottom:1.4rem; }
.compact .section__head h2,
.compact .section > .wrap > h2{ font-size:clamp(1.6rem, 3vw, 2.1rem); }
.compact .eyebrow{ margin-bottom:.6rem; }
.compact .utils{ gap:1rem; }
.compact .util-cat{ padding:1.2rem 1.35rem; }
.compact .util-cat > h3{ margin-bottom:.65rem; }
.compact .steps{ gap:.65rem; }
.compact .prose p{ margin-bottom:.65rem; }
.compact .callout, .compact .tip{ padding:1.1rem 1.25rem; }

/* trash block: pack the schedule + contact side by side */
.trash-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.1rem; }
.trash-grid > *{ margin-top:0 !important; max-width:none !important; }
@media (max-width:640px){ .trash-grid{ grid-template-columns:1fr; } }

/* compact also tightens the home landing sections */
.compact .hero{ min-height:min(46vh, 400px); }
.compact .cards{ gap:1rem; }
.compact .mpoa__grid{ gap:clamp(1.5rem,4vw,3rem); }
.compact .mpoa__links{ margin-top:1.75rem; }

/* compact: lifestyle & governance page components */
.compact .event{ padding-block:1rem; }
.compact .park{ padding:1.2rem 1.4rem; }
.compact .parks{ gap:1rem; }
.compact .doclist{ gap:1rem; }
.compact .doc{ padding:1.25rem 1.4rem; }
.compact .tips{ gap:1rem; }
.compact .wc{ padding:clamp(1.4rem,3.5vw,2rem); gap:clamp(1.25rem,3vw,2rem); }
.compact .contacts__grid{ gap:1rem; margin-top:1.25rem; }

/* neighborhood sub-associations grid */
.subassoc{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:1.25rem; }
@media (max-width:680px){ .subassoc{ grid-template-columns:1fr; } }
.contacts__sub{ margin-top:2.25rem; }
.contacts__sub h2{ font-size:clamp(1.4rem,2.6vw,1.8rem); }
.contacts__sub > p{ margin-top:.5rem; max-width:56ch; font-size:.97rem; }

/* ---- history / story page ---- */
.pagehero--sepia .pagehero__media img{ filter:sepia(.5) saturate(.7) contrast(1.04) brightness(.92); }
.article{ max-width:44rem; }
.article__lead{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.2rem, 2.4vw, 1.55rem); line-height:1.5;
  color:var(--ink); margin:0 0 1.75rem;
}
.article h2{ font-size:clamp(1.55rem, 3vw, 2rem); margin:0 0 .75rem; }
.article section + section{ margin-top:2.25rem; }
.article p{ font-size:1.05rem; line-height:1.72; }
.article p + p{ margin-top:1rem; }
.factbar{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem 1.5rem;
  padding:1.4rem 0; border-block:1px solid var(--line); margin:1.75rem 0;
}
.factbar b{ display:block; font-family:var(--display); font-weight:600; font-size:clamp(1.4rem,2.6vw,1.9rem); color:var(--rust-ink); line-height:1.05; }
.factbar span{ font-size:.82rem; color:var(--body); }
@media (max-width:640px){ .factbar{ grid-template-columns:1fr 1fr; } }