/* ============================================================
   RIDGELINE TOWNHOMES HOA — site stylesheet
   Design: Hill Country Light. Clay, limestone, cedar.
   Newsreader + Public Sans on paper.
   Motion: drawn ridge horizon, self-drawing dividers,
   accordion height, tactile press. All opt-in, all reversible.
   ============================================================ */

:root{
  --paper:#FAF6EF;
  --paper-2:#F1EADC;
  --paper-3:#E7DECB;
  --card:#FFFDF8;
  --rule:#DED4C2;
  --rule-strong:#C6B89F;
  --ink:#2A2520;
  --ink-2:#5C5347;
  --clay:#A4432A;
  --clay-deep:#7C2F1B;
  --clay-wash:#F6E3D9;
  --cedar:#3E5A44;
  --cedar-deep:#2A3F2F;
  --cedar-wash:#E3EBDF;
  --sand:#8A6320;
  --sand-wash:#F6EBD6;
  --deep:#24382B;
  --deep-ink:#F6F1E6;
  --deep-ink-2:#CBD9C8;
  --deep-link:#F3CFA4;
  --deep-alert:#FF8A6B;
  --focus:#1A1510;
  --focus-halo:#FFD9A8;
  --shadow:0 1px 2px rgba(60,44,26,.07), 0 10px 26px -14px rgba(60,44,26,.28);
  --shadow-lift:0 2px 4px rgba(60,44,26,.10), 0 18px 40px -18px rgba(60,44,26,.34);
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --maxw:1180px;
  --pad:20px;
  /* Fine paper: a generated grain tile plus laid-paper fibre lines.
     Blended into each warm surface's own colour — no image files, no
     extra compositing layer, nothing painted over live text. */
  --tex:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23g)' opacity='0.4'/></svg>"),
    repeating-linear-gradient(90deg, rgba(122,96,58,.055) 0 1px, transparent 1px 7px);
  --tex-blend:multiply,multiply;
  color-scheme:light;
}

/* Dark mode, in two blocks that must stay identical (app/ui/theme.test.ts
   fails if they drift). The first follows the device until the reader picks a
   theme with the toggle; the second applies an explicit dark choice on any
   device. theme.js sets data-theme. One block cannot do both: a media query
   cannot be switched on by an attribute. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#14120E;
    --paper-2:#1C1913;
    --paper-3:#241F18;
    --card:#201C15;
    --rule:#3A332A;
    --rule-strong:#4E4537;
    --ink:#F3ECDE;
    --ink-2:#C0B5A2;
    --clay:#E8946B;
    --clay-deep:#F2B18E;
    --clay-wash:#331F16;
    --cedar:#96BE9D;
    --cedar-deep:#B6D6BB;
    --cedar-wash:#1A271E;
    --sand:#D9B26B;
    --sand-wash:#2A2316;
    --deep:#0E1712;
    --deep-ink:#EFE9DB;
    --deep-ink-2:#B9C7B7;
    --deep-link:#F2C79C;
    --deep-alert:#FF8A6B;
    --focus:#FFF4E2;
    --focus-halo:#6B4A1E;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 26px -14px rgba(0,0,0,.7);
    --shadow-lift:0 2px 4px rgba(0,0,0,.55), 0 18px 40px -18px rgba(0,0,0,.8);
    --tex:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23g)' opacity='0.3'/></svg>"),
      repeating-linear-gradient(90deg, rgba(214,192,156,.05) 0 1px, transparent 1px 6px);
    --tex-blend:screen,screen;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#14120E;
  --paper-2:#1C1913;
  --paper-3:#241F18;
  --card:#201C15;
  --rule:#3A332A;
  --rule-strong:#4E4537;
  --ink:#F3ECDE;
  --ink-2:#C0B5A2;
  --clay:#E8946B;
  --clay-deep:#F2B18E;
  --clay-wash:#331F16;
  --cedar:#96BE9D;
  --cedar-deep:#B6D6BB;
  --cedar-wash:#1A271E;
  --sand:#D9B26B;
  --sand-wash:#2A2316;
  --deep:#0E1712;
  --deep-ink:#EFE9DB;
  --deep-ink-2:#B9C7B7;
  --deep-link:#F2C79C;
  --deep-alert:#FF8A6B;
  --focus:#FFF4E2;
  --focus-halo:#6B4A1E;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 26px -14px rgba(0,0,0,.7);
  --shadow-lift:0 2px 4px rgba(0,0,0,.55), 0 18px 40px -18px rgba(0,0,0,.8);
  --tex:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23g)' opacity='0.3'/></svg>"),
    repeating-linear-gradient(90deg, rgba(214,192,156,.05) 0 1px, transparent 1px 6px);
  --tex-blend:screen,screen;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background-color:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
}
body,
.hero,
.page-head,
.cta-band,
.section.band,
.section.band-deep,
.acc-panel,
.lender-side{
  background-image:var(--tex);
  background-size:180px 180px, 7px 100%;
  background-blend-mode:var(--tex-blend);
}

img{max-width:100%;height:auto}

h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.16;margin:0;letter-spacing:-.005em}
p{margin:0}
a{color:var(--clay);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--clay-deep)}

:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
  border-radius:3px;
  box-shadow:0 0 0 7px var(--focus-halo);
}

/* focus on the dark bands needs the opposite pair to stay visible */
.util :focus-visible,
footer :focus-visible,
.emergency :focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible{
  outline-color:#FFF4E2;
  box-shadow:0 0 0 6px rgba(20,14,8,.55);
}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--clay);color:#fff;padding:14px 20px;font-weight:600;border-radius:0 0 6px 0;
}
.skip:focus{left:0}

.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--sand);
  margin:0 0 12px;
}
.lede{font-size:1.12rem;color:var(--ink-2);max-width:62ch}

/* ---------- buttons: tactile, with a real press ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:11px 22px;
  font-family:var(--sans);font-size:1rem;font-weight:600;
  border-radius:7px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:background-color .18s ease, box-shadow .12s ease, transform .12s ease;
}
.btn-primary{background:var(--clay);color:#FFF9F3;box-shadow:0 3px 0 var(--clay-deep), var(--shadow)}
.btn-primary:hover{background:var(--clay-deep);color:#FFF9F3}
.btn-secondary{background:var(--cedar);color:#F7FAF5;box-shadow:0 3px 0 var(--cedar-deep), var(--shadow)}
.btn-secondary:hover{background:var(--cedar-deep);color:#F7FAF5}
.btn-ghost{
  background:var(--card);color:var(--ink);border-color:var(--rule-strong);
  box-shadow:0 3px 0 var(--rule), var(--shadow);
}
.btn-ghost:hover{background:var(--paper-2);color:var(--ink)}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 rgba(0,0,0,0)}
@media (prefers-reduced-motion: reduce){
  .btn:active{transform:none}
}
.btn-sm{min-height:44px;padding:9px 16px;font-size:.92rem}

/* ---------- utility strip ---------- */
.util{background:var(--deep);color:var(--deep-ink);font-size:.86rem;position:relative;z-index:3}
.util .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding-top:6px;padding-bottom:6px}
.util-emerg{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0}
.util-emerg .dot{width:8px;height:8px;border-radius:50%;background:var(--deep-link);flex:none}
.util-emerg span{color:var(--deep-ink-2)}
.util a{color:var(--deep-link)}
.util-tel{font-weight:700;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px}
.util-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lang{display:flex;align-items:center;gap:2px;border:1px solid rgba(255,255,255,.28);border-radius:6px;padding:2px}
.lang button{
  min-height:44px;padding:4px 12px;background:transparent;border:0;border-radius:4px;
  color:var(--deep-ink-2);font-family:var(--sans);font-size:.84rem;font-weight:600;cursor:pointer;
}
.lang button[aria-pressed="true"]{background:var(--deep-ink);color:var(--deep)}
/* Shown only once theme.js has added the js class to <html>, synchronously in
   <head>: no button without JavaScript, and no layout shift with it. */
.theme-toggle{display:none}
html.js .theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;background:transparent;cursor:pointer;
  border:1px solid rgba(255,255,255,.28);border-radius:6px;color:var(--deep-ink);
}
.theme-toggle:hover{background:rgba(255,255,255,.1)}
.theme-toggle[aria-pressed="true"] .i-moon,
.theme-toggle[aria-pressed="false"] .i-sun{display:none}
.util .btn-sm{min-height:44px;padding:5px 14px;font-size:.84rem;border-radius:6px;box-shadow:none}
.util .btn-pay{background:var(--deep-link);color:#2A1A08;border:0}
.util .btn-pay:hover{background:#fff;color:#2A1A08}
.util .btn-portal{background:transparent;color:var(--deep-ink);border:1px solid var(--deep-link)}
.util .btn-portal:hover{background:var(--deep-link);color:#2A1A08}

/* ---------- header ---------- */
.masthead{
  background:transparent;
  border-bottom:1px solid var(--rule);
  position:relative;z-index:3;
}
.masthead .wrap{display:flex;align-items:center;gap:16px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--ink);min-height:44px}
.brand-mark{flex:none;display:block;width:96px;height:auto}
.brand-name{font-family:var(--serif);font-size:1.42rem;font-weight:600;line-height:1.05;letter-spacing:-.01em}
.brand-sub{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2);font-weight:600}

.navrail{border-bottom:1px solid var(--rule);background:var(--paper-2);position:relative;z-index:3}
.navrail::after{content:"";position:absolute;top:0;right:0;bottom:1px;width:34px;pointer-events:none;
  background:linear-gradient(90deg, rgba(241,234,220,0), var(--paper-2))}
@media (min-width:1080px){ .navrail::after{display:none} }
.navrail nav{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
.navrail ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;width:max-content;min-width:100%}
.navrail a{
  display:flex;align-items:center;min-height:48px;padding:0 15px;
  color:var(--ink);text-decoration:none;font-size:.95rem;font-weight:500;white-space:nowrap;
  border-bottom:3px solid transparent;
}
.navrail a:hover{color:var(--clay-deep);border-bottom-color:var(--clay);background:rgba(164,67,42,.05)}

/* ---------- hero ---------- */
.hero{display:grid;position:relative;background-color:var(--paper)}
.hero-media{position:relative;min-height:320px;overflow:hidden}
.hero-media picture,.hero-media img{display:block;width:100%;height:100%;object-fit:cover}
.hero-media img{position:absolute;inset:0;object-position:66% 62%}
.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(20,14,8,.16) 0%, rgba(20,14,8,.04) 30%, rgba(20,14,8,0) 55%),
    linear-gradient(90deg, rgba(28,20,12,.12) 0%, rgba(28,20,12,0) 50%);
}
.ridge{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:auto;display:block;z-index:2}
.ridge .r-back{fill:var(--paper);opacity:.34}
.ridge .r-mid{fill:var(--paper);opacity:.62}
.ridge .r-front{fill:var(--paper)}
.ridge .r-line{fill:none;stroke:var(--clay);stroke-width:2.4;stroke-linecap:round;opacity:.85}
.ridge .r-line-2{fill:none;stroke:var(--cedar);stroke-width:1.6;stroke-linecap:round;opacity:.5}

.hero-panel-wrap{display:flex;align-items:center;position:relative;z-index:3}
.hero-panel{
  width:100%;
  padding:30px var(--pad) 34px;
}
.hero-panel .plate{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:26px 22px;
}
.hero h1{font-size:clamp(2.05rem,7.2vw,3.55rem);letter-spacing:-.018em;margin:0 0 14px}
.hero h1 .accent{display:block;color:var(--clay);font-weight:500}
.hero-lede{font-family:var(--serif);font-style:italic;font-size:clamp(1.22rem,3.6vw,1.5rem);line-height:1.3;color:var(--ink);margin-bottom:24px;max-width:30ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px}
.hero-actions .btn{flex:1 1 auto;min-width:fit-content}

/* search box (documents page) */
.searchbox{display:flex;gap:8px;flex-wrap:wrap}
.searchbox input[type="search"]{
  flex:1 1 200px;min-width:0;min-height:48px;
  padding:11px 14px;font-family:var(--sans);font-size:1rem;
  color:var(--ink);background:var(--paper);
  border:1px solid var(--rule-strong);border-radius:7px;
  box-shadow:inset 0 2px 3px rgba(80,60,35,.07);
}
.searchbox input[type="search"]::placeholder{color:var(--ink-2);opacity:.85}
.searchhint{font-size:.85rem;color:var(--ink-2);margin-top:9px}
/* the 911 in the Contact page's emergency card, in the site's red */
.call-911{color:var(--clay)}

/* ---------- sections and dividers ---------- */
.section{padding:56px 0;position:relative;z-index:1}
.section.band{background-color:var(--paper-2)}
.section.band-deep{background-color:var(--cedar-wash)}
.section-head{max-width:70ch;margin-bottom:30px}
.section-head h2{font-size:clamp(1.62rem,4.2vw,2.3rem);margin-bottom:10px}

.divider{display:block;width:100%;height:34px;overflow:hidden;position:relative;z-index:1}
.divider svg{display:block;width:100%;height:34px}
.divider path{fill:none;stroke:var(--rule-strong);stroke-width:2;stroke-linecap:round}
.divider path.d2{stroke:var(--clay);opacity:.45;stroke-width:1.4}

/* ---------- welcome + snapshot ---------- */
.welcome-grid{display:grid;gap:30px}
.photo-frame{
  position:relative;border:1px solid var(--rule);border-radius:12px;overflow:hidden;
  background:var(--paper-3);box-shadow:var(--shadow);
}
.photo-frame img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
.photo-caption{
  font-size:.82rem;color:var(--ink-2);margin-top:10px;font-style:italic;font-family:var(--serif);
}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:12px;overflow:hidden;margin-top:24px}
.stat{background:var(--card);padding:22px 12px;text-align:center}
.stat .num{font-family:var(--serif);font-size:2.2rem;font-weight:600;line-height:1;color:var(--cedar-deep);display:block}
.stat .lab{font-size:.85rem;color:var(--ink-2);margin-top:6px;display:block}
/* "About our community" (home): the board's mockup, a two-line headline over
   two short paragraphs, with the numbers centred in their cells. */
.about-title{font-size:clamp(1.9rem,5vw,2.7rem);line-height:1.08;letter-spacing:-.015em;color:var(--cedar-deep);margin-bottom:18px}
.about-title .accent{display:block;color:var(--clay)}
.about-copy{font-size:1.04rem;color:var(--ink-2);max-width:56ch;margin:0 0 14px}

/* ---------- accordion document library ---------- */
.doc-toolbar{
  display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between;
  padding:16px 18px;border:1px solid var(--rule);border-radius:12px;background:var(--card);
  box-shadow:var(--shadow);margin-bottom:8px;
}
.doc-toolbar .tb-field{flex:1 1 320px;min-width:0}
.doc-toolbar .tb-label{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--sand);margin-bottom:8px}
.doc-controls{display:flex;gap:8px}
.results{font-size:.92rem;color:var(--ink-2);min-height:1.6em;margin:12px 2px 14px}
.results.hit{color:var(--cedar);font-weight:600}

.accordion{border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.acc-item + .acc-item{border-top:1px solid var(--rule)}
.acc-btn{
  display:flex;align-items:center;gap:14px;width:100%;
  min-height:60px;padding:14px 18px;
  background:transparent;border:0;cursor:pointer;text-align:left;
  font-family:var(--sans);color:var(--ink);
}
.acc-btn:hover{background:var(--paper-2)}
.acc-btn .chev{flex:none;transition:transform .22s ease;color:var(--clay)}
.acc-btn[aria-expanded="true"] .chev{transform:rotate(90deg)}
.acc-title{flex:1 1 auto;min-width:0}
.acc-title .t{display:block;font-family:var(--serif);font-size:1.16rem;font-weight:600;line-height:1.25}
.acc-title .d{display:block;font-size:.88rem;color:var(--ink-2);margin-top:3px}
.acc-count{
  flex:none;font-size:.8rem;font-weight:700;letter-spacing:.04em;
  background:var(--cedar-wash);color:var(--cedar-deep);
  border:1px solid var(--rule);border-radius:999px;padding:4px 11px;white-space:nowrap;
}
.acc-panel{overflow:hidden;background-color:var(--paper-2)}
.acc-panel[hidden]{display:none}
.acc-inner{padding:6px 18px 18px}
.doc-row{
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;justify-content:space-between;
  padding:13px 0;border-bottom:1px dotted var(--rule-strong);
}
.doc-row:last-child{border-bottom:0}
.doc-row.gone{display:none}
.doc-main{flex:1 1 300px;min-width:0}
.doc-row a.doc-link{font-weight:600;color:var(--ink);text-decoration-color:var(--rule-strong);position:relative}
/* 44px tap area without 44px of layout: the row keeps its density */
.doc-row a.doc-link::after{content:"";position:absolute;left:0;right:0;top:-12px;bottom:-12px}
.doc-row a.doc-link:hover{color:var(--clay-deep);text-decoration-color:var(--clay)}
.doc-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.82rem;color:var(--ink-2);margin-top:4px}
.doc-meta .k{color:var(--ink-2);opacity:.8}
.doc-size{font-size:.82rem;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.doc-empty{padding:14px 0;color:var(--ink-2);font-style:italic}

.note-card{
  border:1px solid var(--rule);border-left:4px solid var(--cedar);border-radius:0 10px 10px 0;
  background:var(--card);padding:16px 18px;
}
.note-card.clay{border-left-color:var(--clay)}
.note-card.sand{border-left-color:var(--sand)}
.note-card h3{font-size:1.05rem;margin-bottom:6px}
.note-card p{font-size:.94rem;color:var(--ink-2)}

/* ---------- lender panel ---------- */
.lender{
  border:1px solid var(--rule);border-radius:14px;background:var(--card);
  box-shadow:var(--shadow);overflow:hidden;display:grid;
}
.lender-main{padding:26px 22px}
.lender-side{padding:24px 22px;background-color:var(--paper-3);border-top:1px solid var(--rule)}
.lender h2{font-size:clamp(1.5rem,3.6vw,2rem);margin-bottom:12px}
.lender ul{margin:12px 0 0;padding:0;list-style:none}
.lender ul li{position:relative;padding-left:24px;margin-bottom:11px;font-size:.95rem;color:var(--ink-2)}
.lender ul li::before{
  content:"";position:absolute;left:0;top:.55em;width:10px;height:2px;background:var(--clay);
}
.lender .btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

/* ---------- announcements ---------- */
.posts{display:grid;gap:18px}
.post{
  background:var(--card);border:1px solid var(--rule);border-radius:12px;
  padding:22px 20px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.post:hover{box-shadow:var(--shadow-lift)}
.post time{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--sand)}
.post h3{font-size:1.25rem;margin:10px 0}
.post p{font-size:.95rem;color:var(--ink-2);flex:1 1 auto}
.post .more{margin-top:16px;font-weight:600;font-size:.94rem;display:inline-flex;align-items:center;gap:7px;min-height:44px}

/* ---------- dues ---------- */
.covers{margin:0;padding:0;list-style:none}
.covers li{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-bottom:1px dotted var(--rule-strong);font-size:.96rem}
.covers li:last-child{border-bottom:0}
/* Pay Dues: the list stands on its own under the page head, centred, as on the board's mockup */
.covers-solo{max-width:620px;margin:0 auto}
.covers-solo h2{font-size:clamp(1.62rem,4.2vw,2.3rem);text-align:center;margin-bottom:14px}
/* Pay Dues head card: it holds a single action, so it gets room round it and a
   full-width, taller button rather than the compact padding of a card of facts */
.pay-head .head-card{padding:34px 32px}
.pay-cta{margin:0}
.pay-cta .btn{width:100%;justify-content:center;min-height:56px;font-size:1.05rem}
.covers svg{flex:none;margin-top:4px;color:var(--cedar)}

/* The service-request notes sit in half the page; side by side they wrap a word to a line. */
#service-requests .card-grid{grid-template-columns:1fr}

/* A portal button whose address has not been supplied yet: visibly inactive, never a dead link. */
.btn-pending{background:transparent;color:var(--ink-2);border:1px dashed var(--rule-strong);box-shadow:none;cursor:not-allowed}
.btn-pending:active{transform:none}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chip{
  background:var(--card);border:1px solid var(--rule);border-radius:999px;
  padding:7px 14px;font-size:.88rem;color:var(--ink-2);
}
.meeting{
  margin-top:20px;background:var(--card);border:1px solid var(--rule);border-radius:12px;
  padding:18px 20px;box-shadow:var(--shadow);
}
.meeting .k{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--sand);display:block}
.meeting .v{font-family:var(--serif);font-size:1.3rem;font-weight:600;display:block;margin-top:5px}
.meeting p{font-size:.9rem;color:var(--ink-2);margin-top:6px}

/* ---------- board ---------- */
.board-grid{display:grid;gap:16px}
.member{
  background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:20px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;
}
.member .role{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--clay)}
.member h3{font-size:1.2rem;margin:8px 0 6px}
.member .handles{font-size:.92rem;color:var(--ink-2);flex:1 1 auto}
.member a.mail{display:inline-flex;align-items:center;min-height:44px;margin-top:12px;font-size:.92rem;font-weight:600;word-break:break-word}
.mgmt{
  margin-top:20px;background:var(--card);border:1px solid var(--rule);border-radius:14px;
  box-shadow:var(--shadow);display:grid;overflow:hidden;
}
.mgmt-body{padding:24px 22px;display:flex;flex-direction:column}
.mgmt .tag{
  align-self:flex-start;display:inline-block;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  background:var(--sand-wash);color:var(--sand);border:1px solid var(--rule);border-radius:999px;padding:4px 11px;margin-bottom:12px;
}
.mgmt h3{font-size:1.35rem;margin-bottom:10px}
.mgmt p{font-size:.95rem;color:var(--ink-2);margin-bottom:12px}
.emergency{background:var(--deep);color:var(--deep-ink);padding:24px 22px}
/* The community photo closes the left column. Stacked (phones), it is a 3:2
   picture; side by side it stretches to whatever height the manager's card
   leaves, so no gap opens under the paragraphs in either language. The alt is
   empty because the caption names it and the home page describes it. */
.mgmt-photo{margin:8px 0 0;position:relative;aspect-ratio:3/2;border-radius:12px;overflow:hidden}
.mgmt-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.mgmt-photo figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:28px 18px 14px;
  background:linear-gradient(transparent,rgba(0,0,0,.65));color:#F6F1E6;font-size:.85rem;letter-spacing:.04em;
}
.emergency h3{color:var(--deep-ink);font-size:1.45rem;margin-bottom:14px}
.mgmt-icon{flex:none;color:var(--deep-link)}
.mgmt-contacts{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mgmt-contacts li{display:flex;align-items:center;gap:14px;min-height:44px;font-size:.98rem;overflow-wrap:anywhere}
.mgmt-contacts a{color:var(--deep-link)}
.mgmt-rule{border-top:1px solid rgba(255,255,255,.2);margin-top:18px;padding-top:18px}
.mgmt-hours{display:flex;align-items:flex-start;gap:14px}
.mgmt-hours dl{margin:0;display:grid;gap:4px;font-size:.95rem}
.mgmt-hours dt{display:inline;font-weight:700}
.mgmt-hours dd{display:inline;margin:0}
.mgmt .emergency .mgmt-911{
  display:flex;align-items:center;gap:14px;margin-bottom:0;
  color:var(--deep-alert);font-size:.86rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1.45;
}
.mgmt-911 .mgmt-icon{color:var(--deep-alert)}
.mgmt-person,.mgmt-row{display:flex;align-items:flex-start;gap:14px}
.mgmt-person{align-items:center}
.mgmt .emergency .mgmt-person p{margin:0;color:var(--deep-ink);font-size:.95rem}
.mgmt-person strong{display:block;font-size:1.08rem}
.mgmt-person span{color:var(--deep-ink-2);font-size:.88rem}
.emergency .mgmt-label{
  color:var(--deep-ink);font-family:inherit;font-size:.76rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px;
}
.mgmt .emergency .mgmt-place{margin:0;color:var(--deep-ink);font-size:.95rem;line-height:1.55}
.mgmt .emergency .mgmt-note{margin:8px 0 0;color:var(--deep-ink-2);font-size:.85rem;font-style:italic}
.mgmt-hours dt{color:var(--deep-link)}

/* ---------- contact ---------- */
.contact-grid{display:grid;gap:18px}
.contact-card{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:20px;box-shadow:var(--shadow)}
.contact-card h3{font-size:1.1rem;margin-bottom:8px}
.contact-card p{font-size:.94rem;color:var(--ink-2)}
.contact-card a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;word-break:break-word}

/* ---------- footer ---------- */
footer{background:var(--deep);color:var(--deep-ink);padding:44px 0;position:relative;z-index:1}
footer a{color:var(--deep-link)}
footer a:hover{color:#fff}
.foot-grid{display:grid;gap:28px}
/* The logo file is the whole badge, cut like a sticker: a cream outline round
   the oval and a rounded cream box round the lettering, as on the board's
   mockup. It sits straight on the green with no plate behind it; a plate drawn
   in CSS showed as cream slivers beside the banner, whose edges are not a
   rectangle. */
.foot-logo{display:inline-block}
.foot-logo img{display:block;width:210px;height:auto}
.foot-brand .foot-name{max-width:none;font-family:var(--serif);font-size:1.18rem;font-weight:600;color:#fff;margin-top:16px;line-height:1.3}
.foot-brand p{color:var(--deep-ink-2);font-size:.92rem;max-width:62ch}
.foot-brand p + p{margin-top:8px}
.foot-brand .foot-copy{max-width:none;color:var(--deep-ink)}
.foot-mgmt strong{color:var(--deep-ink);font-weight:600}
.foot-brand .foot-mgmt{margin-top:16px}
.foot-col h4{font-family:var(--sans);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--deep-ink-2);margin-bottom:12px;font-weight:700}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li a{display:inline-flex;align-items:center;min-height:44px;font-size:.94rem;text-decoration:none}
.foot-col li a:hover{text-decoration:underline}
.foot-col p{font-size:.94rem;color:var(--deep-ink-2)}
.foot-col p a{display:inline-flex;align-items:center;min-height:44px}

/* ============================================================
   MULTI-PAGE COMPONENTS
   ============================================================ */

/* current page in the navigation */
.navrail a[aria-current="page"]{color:var(--clay-deep);border-bottom-color:var(--clay);font-weight:600}
.foot-col li a[aria-current="page"]{color:#fff}

/* ---------- interior page header ---------- */
.page-head{position:relative;background-color:var(--paper-2);padding:34px 0 0;overflow:hidden}
.page-head > .wrap{position:relative;z-index:3;padding-bottom:72px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 8px;margin:0 0 16px;padding:0;font-size:.86rem;color:var(--ink-2)}
.crumbs li + li::before{content:"/";margin-right:8px;color:var(--rule-strong)}
.crumbs a{color:var(--ink-2);display:inline-flex;align-items:center;min-height:44px}
.crumbs a:hover{color:var(--clay-deep)}
.crumbs [aria-current="page"]{display:inline-flex;align-items:center;min-height:44px}
.head-grid{display:grid;gap:24px}
.page-head h1{font-size:clamp(2rem,6.4vw,3.15rem);letter-spacing:-.016em;margin:0 0 14px;max-width:20ch}
.page-head h1 .accent{color:var(--clay);font-style:italic;font-weight:400}
.lender h2 .accent{color:var(--clay)}
.head-card{
  background:var(--card);border:1px solid var(--rule);border-radius:12px;box-shadow:var(--shadow);
  padding:20px 22px;
}
.head-card .k{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--sand)}
.head-card .v{display:block;font-family:var(--serif);font-size:1.9rem;font-weight:600;line-height:1.1;color:var(--clay);margin-top:6px}
.head-card .v.cedar{color:var(--cedar)}
.head-card .v a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.head-card .v a:hover{text-decoration:underline}
.head-card p{font-size:.9rem;color:var(--ink-2);margin-top:6px}
.page-head .ridge{height:64px}
.head-card .v.sm{font-size:1.35rem;line-height:1.25}

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

/* ---------- call-to-action band ---------- */
.cta-band{
  background-color:var(--deep);color:var(--deep-ink);
  border-radius:16px;padding:30px 24px;display:grid;gap:20px;align-items:center;
  box-shadow:var(--shadow);
}
.cta-band h2{color:var(--deep-ink);font-size:clamp(1.5rem,3.8vw,2.05rem);margin-bottom:8px}
.cta-band p{color:var(--deep-ink-2);max-width:56ch}
.cta-band .btns{display:flex;flex-wrap:wrap;gap:10px}
.btn-light{background:var(--deep-ink);color:var(--deep);box-shadow:0 3px 0 rgba(0,0,0,.35)}
.btn-light:hover{background:#fff;color:var(--deep)}
.btn-outline-light{background:transparent;color:var(--deep-ink);border-color:rgba(255,255,255,.45);box-shadow:none}
.btn-outline-light:hover{background:rgba(255,255,255,.1);color:#fff}
.cta-band :focus-visible{outline-color:#FFF4E2;box-shadow:0 0 0 6px rgba(20,14,8,.55)}

/* ---------- generic card grid (amenities, how-tos) ---------- */
.card-grid{display:grid;gap:16px}
.card-grid .note-card h3{font-size:1.15rem}
.note-card .k{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--sand);margin-bottom:6px}
.note-card a{font-weight:600}
.note-card p + p{margin-top:8px}
/* Pay Dues questions: an outline icon in the card's accent colour beside the text */
.q-card{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 18px;align-items:start;padding:22px 22px 22px 20px}
.q-icon{color:var(--cedar);margin-top:2px}
.q-card.clay .q-icon{color:var(--clay)}
.q-card.sand .q-icon{color:var(--sand)}
.card-grid .q-card h3{font-size:1.25rem;margin-bottom:10px}

/* ---------- announcements archive ---------- */
.post .tag{
  align-self:flex-start;margin-top:10px;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  background:var(--cedar-wash);color:var(--cedar-deep);border:1px solid var(--rule);border-radius:999px;padding:3px 10px;
}
.post .tag + h3{margin-top:10px}
@media (min-width:900px){ .posts.two{grid-template-columns:repeat(2,1fr)} }

/* ---------- community calendar ---------- */
.section-head .terms{font-size:.88rem;color:var(--sand);font-weight:600;margin-top:10px}
.cal-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.cal-title{font-size:clamp(1.2rem,3.6vw,1.6rem);text-align:center;flex:1 1 auto}
.cal-step{flex:0 0 auto;white-space:nowrap}
.cal-today-link{text-align:center;margin:-6px 0 14px;font-size:.92rem;font-weight:600}
.cal-grid{table-layout:fixed;border-collapse:separate;border-spacing:4px;margin:0 -4px 24px;width:calc(100% + 8px)}
.cal-grid th{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ink-2);padding:4px 0;text-align:center}
.cal-grid td{
  vertical-align:top;height:52px;padding:5px 6px;border-radius:6px;
  background:var(--card);border:1px solid var(--rule);overflow:hidden;
}
.cal-grid td.cal-blank{background:transparent;border-color:transparent}
.cal-grid td.is-past{opacity:.6}
.cal-grid td.is-today{border-color:var(--clay);box-shadow:inset 0 0 0 1px var(--clay)}
.cal-grid td.has-events{background:var(--cedar-wash)}
.cal-num{display:block;font-size:.85rem;font-weight:700;color:var(--ink)}
.cal-cell-events{list-style:none;margin:2px 0 0;padding:0}
.cal-cell-events a{
  display:block;font-size:.76rem;line-height:1.25;font-weight:600;text-decoration:none;
  color:var(--cedar-deep);border-left:3px solid var(--cedar);padding-left:5px;margin-top:3px;
}
.cal-cell-events a.clay{border-left-color:var(--clay);color:var(--clay-deep)}
.cal-cell-events a.sand{border-left-color:var(--sand);color:var(--sand)}
.cal-cell-events a:hover{text-decoration:underline}
/* Too narrow for titles: each event becomes a dot, and the list below gives the detail. */
@media (max-width:599px){
  .cal-grid{border-spacing:2px;margin:0 -2px 20px;width:calc(100% + 4px)}
  .cal-grid td{height:46px;padding:4px}
  .cal-cell-events a{border-left:0;padding:0;width:10px;height:10px;border-radius:50%;background:var(--cedar);margin-top:4px}
  .cal-cell-events a.clay{background:var(--clay)}
  .cal-cell-events a.sand{background:var(--sand)}
  .cal-cell-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cal-step .cal-step-name{display:none}
}
@media (min-width:600px){ .cal-grid td{height:84px} }
.cal-event.cal-past{opacity:.65}
.cal-event:target{box-shadow:0 0 0 3px var(--focus-halo)}
.cal-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cal-event{
  display:grid;grid-template-columns:72px 1fr;gap:16px;align-items:start;
  background:var(--card);border:1px solid var(--rule);border-left:4px solid var(--cedar);
  border-radius:0 10px 10px 0;padding:14px 16px;
}
.cal-event.clay{border-left-color:var(--clay)}
.cal-event.sand{border-left-color:var(--sand)}
.cal-date{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:var(--paper-2);border:1px solid var(--rule);border-radius:8px;padding:6px 4px;line-height:1.1;
}
.cal-mon,.cal-wday{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink-2)}
.cal-day{font-family:var(--serif);font-size:1.75rem;font-weight:700;color:var(--ink);margin:2px 0}
.cal-body{min-width:0}
.cal-tag{
  display:inline-block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  background:var(--cedar-wash);color:var(--cedar-deep);border:1px solid var(--rule);border-radius:999px;padding:2px 9px;
}
.cal-body h4{font-family:var(--serif);font-size:1.12rem;margin:8px 0 4px}
.cal-when{font-size:.9rem;font-weight:600;color:var(--ink)}
.cal-body p + p{margin-top:4px;font-size:.93rem;color:var(--ink-2)}
.cal-empty{color:var(--ink-2);font-style:italic}
@media (min-width:900px){ .cal-list{grid-template-columns:repeat(2,1fr)} }

/* ---------- announcements: headline and category filter ---------- */
.page-head h1.news-title{max-width:none}
.page-head h1.news-title .accent{display:block}
.cat-filter ul{list-style:none;margin:0 0 34px;padding:0;display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.cat-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;height:100%;
  background:var(--card);border:1px solid var(--rule);border-radius:12px;box-shadow:var(--shadow);
  padding:18px 14px 20px;color:var(--ink);text-decoration:none;transition:box-shadow .2s,border-color .2s;
}
.cat-card:hover{box-shadow:var(--shadow-lift);border-color:var(--rule-strong)}
.cat-card.is-active{background:var(--cedar-wash);border:2px solid var(--cedar);padding:17px 13px 19px}
.cat-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;margin-bottom:4px}
.cat-icon.cedar{background:var(--cedar-wash);color:var(--cedar-deep)}
.cat-icon.sand{background:var(--sand-wash);color:var(--clay-deep)}
.cat-card.is-active .cat-icon.cedar{background:var(--card)}
.cat-label{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.cat-sub{font-size:.84rem;font-weight:700;line-height:1.3}
.cat-desc{font-size:.88rem;color:var(--ink-2);line-height:1.45}
.cat-empty{color:var(--ink-2);font-style:italic}
.post[hidden],.cat-empty[hidden]{display:none}
@media (min-width:700px){ .cat-filter ul{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1100px){ .cat-filter ul{grid-template-columns:.8fr repeat(5,minmax(0,1fr))} }

/* The documents page is marked data-no-motion: a reader scanning records is
   never made to wait, so even its header ridge arrives already drawn. */
.motion-ok [data-no-motion] .ridge .r-line,
.motion-ok [data-no-motion] .ridge .r-line-2{animation:none}

/* ---------- contact form ---------- */
.contact-layout{display:grid;gap:28px}
.form{
  background:var(--card);border:1px solid var(--rule);border-radius:14px;box-shadow:var(--shadow);
  padding:24px 20px;display:grid;gap:20px;position:relative;
}
.form h2{font-size:clamp(1.45rem,3.6vw,1.9rem)}
.field-row{display:grid;gap:20px}
.field label,.field legend{display:block;font-weight:600;font-size:.97rem;margin-bottom:7px;padding:0}
.field .hint{display:block;font-size:.86rem;color:var(--ink-2);font-weight:400;margin-top:2px}
.req{color:var(--clay)}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea{
  width:100%;min-height:48px;padding:11px 14px;
  font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule-strong);border-radius:7px;
  box-shadow:inset 0 2px 3px rgba(80,60,35,.07);
}
.field textarea{min-height:160px;resize:vertical;line-height:1.55}
.field select{appearance:auto}
fieldset.field{border:0;margin:0;padding:0;min-width:0}
.choices{display:flex;flex-wrap:wrap;gap:4px 22px}
.choice{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:.97rem;cursor:pointer}
.choice input{width:20px;height:20px;margin:0;accent-color:var(--clay)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-foot{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.form-foot p{font-size:.86rem;color:var(--ink-2);flex:1 1 240px}
.form-status{
  padding:14px 16px;border-radius:0 8px 8px 0;font-size:.95rem;
  background:var(--cedar-wash);border-left:4px solid var(--cedar);
}
.form-status[hidden]{display:none}
.form-status.err{background:var(--clay-wash);border-left-color:var(--clay)}
.aside-stack{display:grid;gap:16px;align-content:start}

/* ============================================================
   MOTION — armed by JS only, and only when motion is welcome.
   Nothing below runs without the .motion-ok class on <html>.
   ============================================================ */

/* Scroll reveal: transform + opacity only. */
.motion-ok .reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease, transform .55s cubic-bezier(.22,.7,.3,1)}
.motion-ok .reveal.in{opacity:1;transform:none}
.motion-ok .reveal.s1{transition-delay:.08s}
.motion-ok .reveal.s2{transition-delay:.16s}
.motion-ok .reveal.s3{transition-delay:.24s}

/* Dividers draw themselves in. Default (no JS) they are simply drawn. */
.motion-ok .divider path{transition:stroke-dashoffset 1.05s cubic-bezier(.25,.6,.25,1)}
.motion-ok .divider path.d2{transition-duration:1.35s;transition-delay:.12s}

/* Hero: the ridge contour draws, the plate settles. Self-completing, never scroll-gated. */
.motion-ok .ridge .r-line,.motion-ok .ridge .r-line-2{animation:draw 1.5s cubic-bezier(.25,.6,.25,1) both}
.motion-ok .ridge .r-line-2{animation-duration:1.8s;animation-delay:.15s}
@keyframes draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
.motion-ok .hero-plate-anim{animation:plate .7s cubic-bezier(.22,.7,.3,1) both}
@keyframes plate{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.motion-ok .hero-media img{animation:heroin 1.1s ease both}
@keyframes heroin{from{opacity:0}to{opacity:1}}

/* Accordion: a real height transition, the one place height is animated. */
.motion-ok .acc-panel{transition:height .34s cubic-bezier(.3,.7,.3,1)}
.motion-ok .post:hover{transform:translateY(-3px)}

/* A scroll-driven settle where the browser supports it; the observer covers the rest. */
@supports (animation-timeline: view()){
  .motion-ok .photo-frame img{
    animation:settle linear both;
    animation-timeline:view();
    animation-range:entry 0% cover 42%;
  }
  @keyframes settle{from{transform:scale(1.06)}to{transform:scale(1)}}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ============================================================
   BREAKPOINTS
   ============================================================ */
@media (min-width:600px){
  .hero-panel .plate{padding:32px 30px}
  .stats{grid-template-columns:repeat(4,1fr)}
  .posts{grid-template-columns:repeat(2,1fr)}
  .board-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:repeat(2,1fr)}
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .field-row{grid-template-columns:repeat(2,1fr)}
  .form{padding:30px 28px}
}
@media (min-width:900px){
  :root{--pad:32px}
  .section{padding:76px 0}
  .divider,.divider svg{height:48px}
  /* Height follows width so the photo keeps the board mockup's framing — about
     two thirds of its height showing — at every desktop size. A fixed height
     would crop ever more of its top and bottom as the screen widens. */
  .hero{min-height:clamp(620px,38vw,780px)}
  .hero-media{grid-area:1/1;min-height:clamp(620px,38vw,780px)}
  /* The card sits high, as in the board's mockup, leaving the lower hero to
     the sign, the flower beds and the ridge line. */
  .hero-panel-wrap{grid-area:1/1;align-items:flex-start}
  .hero-panel{padding:60px var(--pad) 56px}
  .hero-panel .plate{max-width:540px;padding:38px 36px;background:color-mix(in srgb, var(--card) 94%, transparent)}
  /* The sign sits just right of the photo's centre (its plate starts 49% of
     the way across), where the card's right edge falls. Drawing the photo 8%
     wider than the hero, cropped on the right, moves the sign clear of the
     card; below about 1130px that is not enough, as the card keeps its 540px,
     so the photo never draws narrower than 1220px. max-width:none lifts the
     site-wide img{max-width:100%}, which would otherwise cancel the width
     without a trace. */
  .hero-media img{width:max(108%, 1220px);max-width:none;object-position:0 60%}
  .hero h1{font-size:3.05rem}
  .welcome-grid{grid-template-columns:1fr 1fr;gap:48px;align-items:center}
  .lender{grid-template-columns:1.35fr 1fr}
  .lender-main{padding:38px 36px}
  .lender-side{border-top:0;border-left:1px solid var(--rule);padding:38px 32px}
  .posts{grid-template-columns:repeat(3,1fr)}
  .board-grid{grid-template-columns:repeat(3,1fr)}
  .mgmt{grid-template-columns:1.25fr .75fr}
  .mgmt-photo{aspect-ratio:auto;flex:1 1 auto;min-height:220px}
  .emergency{display:flex;flex-direction:column;justify-content:center}
  .contact-grid{grid-template-columns:repeat(4,1fr)}
  .foot-grid{grid-template-columns:minmax(0,1fr) auto auto;gap:0 56px}
  .foot-col + .foot-col{border-left:1px solid rgba(255,255,255,.16);padding-left:56px}
  footer{padding-bottom:56px}
  .brand-name{font-size:1.55rem}
  .page-head{padding-top:44px}
  .page-head > .wrap{padding-bottom:96px}
  .page-head .ridge{height:96px}
  .head-grid{grid-template-columns:1.5fr .8fr;align-items:end;gap:48px}
  /* a lone button reads as floating low when bottom-aligned; centre it on the text */
  .head-grid.pay-head{align-items:center}
  .card-grid{grid-template-columns:repeat(3,1fr)}
  .card-grid.two{grid-template-columns:repeat(2,1fr)}
  .cta-band{grid-template-columns:1.5fr auto;padding:40px 44px;gap:32px}
  .contact-layout{grid-template-columns:1.4fr .9fr;align-items:start;gap:40px}
  .form{padding:36px 34px}
}
@supports not (color-mix(in srgb, red 50%, transparent)){
  @media (min-width:900px){ .hero-panel .plate{background:var(--card)} }
}

/* ============================================================
   PROTOTYPE ONLY — delete this block with app/prototype/.
   The prototype banner (docs/plans/prototype.md "Every page") is
   inserted into public pages as well as app pages, so its one rule
   has to live in the stylesheet the public pages already load. It
   is listed in README.md's delete list beside the markup that
   emits it. Nothing else in this file is prototype-specific.
   ============================================================ */
.prototype-banner{
  margin:0;
  padding:8px var(--pad);
  background:var(--sand-wash);
  border-bottom:1px solid var(--sand);
  color:var(--ink);
  font-family:var(--sans);
  font-size:.86rem;
  font-weight:600;
  text-align:center;
}