/* ============================================================
   Rotonda West Association
   Art direction: the community's own signage. Their RW roundel is
   cast in gold on the physical entrance monuments, and the monument
   itself is stone + sand + deep green. That is the palette: it is
   not invented, it is what you see driving in.

   Display face is Cinzel (they already load it) because it is a
   Roman-inscription face, which is exactly what monument lettering
   is. Montserrat carries the body, as on their current site.

   Colors verified against their live CSS, NOT assumed:
     #0a5a10  primary green   (22 uses, most-used color on the site)
     #005009  logo green
     #e8c652  gold  (the roundel)
     #f0cba4  sand  (monument stucco)
     #855b30  stone (monument base)
   The letterhead green #196B24 appears NOWHERE on their site. Do not use it.
   ============================================================ */

:root{
  --green:#0a5a10;
  --green-deep:#053c0a;
  --green-ink:#012e06;
  --green-soft:#0f7a19;
  --gold:#e8c652;
  --gold-deep:#a8862a;
  --sand:#f0cba4;
  --stone:#855b30;
  --ink:#1c1f1a;
  --ink-soft:#4d5449;
  --ink-dim:#8b917f;
  --paper:#fbfaf6;
  --paper-warm:#f4f1e8;
  --white:#fff;
  --rule:#e2e0d5;
  --rule-soft:#f0eee6;
  --fd:'Cinzel', 'Cinzel Decorative', Georgia, serif;
  --fb:'Montserrat', system-ui, -apple-system, sans-serif;
  --max:1280px;
  --pad:clamp(20px,4vw,64px);
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--fb);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* Lenis smooth scroll */
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- type ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--fb);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-deep);font-weight:700}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--gold)}
.eyebrow-light{color:var(--gold)}
.eyebrow-light::before{background:var(--gold)}
h1,h2,h3{font-family:var(--fd);font-weight:600;letter-spacing:-0.005em;line-height:1.08}

/* ---------- utility bar ---------- */
.util{background:var(--green-ink);color:rgba(255,255,255,.82);font-size:12.5px;letter-spacing:.03em}
.util .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:9px;padding-bottom:9px;flex-wrap:wrap}
.util a:hover{color:var(--gold)}
.util .r{display:flex;gap:16px;align-items:center}
.util .pay{display:inline-flex;align-items:center;gap:7px;background:var(--gold);color:var(--green-ink);padding:5px 13px;border-radius:999px;font-weight:700;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;transition:transform .2s var(--ease),background .2s}
.util .pay:hover{background:var(--white);color:var(--green-ink);transform:translateY(-1px)}

/* ---------- nav ---------- */
nav.top{position:sticky;top:0;z-index:60;background:rgba(251,250,246,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--rule);transition:box-shadow .3s}
nav.top.stuck{box-shadow:0 10px 40px -22px rgba(5,60,10,.4)}
nav.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:46px;width:auto}
.tl{display:flex;gap:26px;align-items:center}
.tl a{font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);padding:8px 0;position:relative;transition:color .2s}
.tl a::after{content:"";position:absolute;left:0;bottom:2px;width:0;height:2px;background:var(--gold);transition:width .28s var(--ease)}
.tl a:hover,.tl a.active{color:var(--green)}
.tl a:hover::after,.tl a.active::after{width:100%}
.nav-cta{background:var(--green);color:var(--white);padding:11px 22px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;transition:background .2s,transform .2s var(--ease)}
.nav-cta:hover{background:var(--green-deep);transform:translateY(-1px)}
.burger{display:none;flex-direction:column;gap:5px;padding:8px}
.burger span{display:block;width:24px;height:2px;background:var(--green-ink);transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* inset:0 alone let this size to its content (525px on a 390px phone) and it
   became the only horizontal-overflow source on the page. Pin the width to the
   viewport explicitly and clip. Measured at a real 390px viewport, not guessed. */
.drawer{position:fixed;top:0;left:0;width:100vw;max-width:100vw;height:100dvh;background:var(--green-ink);z-index:70;transform:translateY(-100%);transition:transform .5s var(--ease);display:flex;flex-direction:column;justify-content:center;padding:40px var(--pad);overflow-y:auto;overflow-x:hidden}
.drawer-links{width:100%;max-width:100%}
.drawer.open{transform:translateY(0)}
.drawer a{font-family:var(--fd);font-size:clamp(24px,5vw,38px);color:var(--paper);padding:11px 0;display:block;border-bottom:1px solid rgba(232,198,82,.18);transition:color .2s,padding-left .3s var(--ease)}
.drawer a:hover{color:var(--gold);padding-left:12px}
.drawer-close{position:absolute;top:22px;right:var(--pad);color:var(--gold);font-size:30px;line-height:1}
body.locked{overflow:hidden}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;font-family:var(--fb);font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;border-radius:999px;transition:transform .22s var(--ease),background .22s,color .22s,border-color .22s}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:var(--green-ink)}
.btn-gold:hover{background:var(--white)}
.btn-green{background:var(--green);color:var(--white)}
.btn-green:hover{background:var(--green-deep)}
.btn-ghost{border:1.5px solid var(--green);color:var(--green)}
.btn-ghost:hover{background:var(--green);color:var(--white)}
.btn-outline-light{border:1.5px solid rgba(255,255,255,.5);color:var(--white)}
.btn-outline-light:hover{background:var(--white);color:var(--green-ink);border-color:var(--white)}

/* ---------- HERO, full bleed ---------- */
.hero{position:relative;min-height:min(94vh,940px);display:flex;align-items:flex-end;overflow:hidden;background:var(--green-ink)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:kb 26s ease-out forwards}
@keyframes kb{to{transform:scale(1)}}
/* The hero photo puts the entrance monument on the LEFT and open sunset sky on
   the RIGHT. Setting the headline left buried the sign behind it, which defeats
   the whole point of that photograph. So: copy sits in the right half, the
   monument keeps the left, and the scrim is weighted right to give the type a
   ground without dimming the sign. */
.hero-scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(1,46,6,.30) 0%,rgba(1,46,6,.10) 34%,rgba(1,46,6,.62) 78%,rgba(1,46,6,.92) 100%),
  linear-gradient(260deg,rgba(1,46,6,.80) 0%,rgba(1,46,6,.42) 40%,rgba(1,46,6,0) 68%);}
.hero-inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(48px,7vw,96px);padding-top:clamp(90px,14vw,150px);display:flex;justify-content:flex-end}
.hero-copy{width:min(50%,620px)}
@media (max-width:900px){
  .hero-inner{justify-content:flex-start}
  .hero-copy{width:100%}
  .hero-scrim{background:
    linear-gradient(180deg,rgba(1,46,6,.34) 0%,rgba(1,46,6,.14) 26%,rgba(1,46,6,.78) 66%,rgba(1,46,6,.95) 100%)}
}
.hero .eyebrow{margin-bottom:22px}
.hero h1{font-size:clamp(38px,5.2vw,76px);color:var(--white);line-height:1.02;margin-bottom:26px;text-shadow:0 2px 40px rgba(1,46,6,.5)}
.hero h1 .l{display:block;overflow:hidden}
.hero h1 .l span{display:block}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero-lede{font-size:clamp(15.5px,1.5vw,18.5px);color:rgba(255,255,255,.9);max-width:56ch;margin-bottom:34px;line-height:1.75}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap}
.hero-scroll{position:absolute;left:50%;bottom:22px;z-index:3;transform:translateX(-50%);width:26px;height:42px;border:1.5px solid rgba(255,255,255,.45);border-radius:999px;display:grid;place-items:start center;padding-top:7px}
.hero-scroll span{width:3px;height:8px;border-radius:2px;background:var(--gold);animation:sc 1.9s var(--ease) infinite}
@keyframes sc{0%{transform:translateY(0);opacity:0}35%{opacity:1}70%{transform:translateY(15px);opacity:0}100%{opacity:0}}

/* hero stat rail */
.hero-rail{position:relative;z-index:2;border-top:1px solid rgba(232,198,82,.28);background:rgba(1,46,6,.5);backdrop-filter:blur(8px)}
.hero-rail .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-top:26px;padding-bottom:26px}
.hr-i .n{font-family:var(--fd);font-size:clamp(24px,2.6vw,36px);color:var(--gold);line-height:1;display:block;margin-bottom:5px}
.hr-i .l{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72);font-weight:600}

/* ---------- sections ---------- */
.sec{padding:clamp(72px,9vw,132px) 0}
.sec-paper{background:var(--paper-warm)}
.sec-green{background:var(--green-ink);color:var(--paper)}
.sec-head{max-width:760px;margin-bottom:clamp(40px,5vw,68px)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-head .eyebrow{margin-bottom:20px}
.sec-head h2{font-size:clamp(30px,4.4vw,58px);color:var(--green-ink);margin-bottom:18px}
.sec-green .sec-head h2{color:var(--paper)}
.sec-head h2 em{font-style:normal;color:var(--gold-deep)}
.sec-green .sec-head h2 em{color:var(--gold)}
.sec-head p{font-size:17px;color:var(--ink-soft);line-height:1.8;max-width:64ch}
.sec-green .sec-head p{color:rgba(251,250,246,.78)}

/* ---------- amenities ----------
   Rotonda West has NO amenity photography: 20 images site-wide and the only
   large ones are the entrance sign (verified). Image tiles with no images read
   as a broken page, so this is a typographic treatment instead: a gold rule,
   the amenity set in Cinzel, and a line of the association's own words. It is
   honest about what exists and it still reads as grand. If a photo shoot ever
   happens, add .amen-r img and this upgrades without a rewrite. */
.amen{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(32px,5vw,80px);border-top:1px solid rgba(232,198,82,.28)}
.amen-r{display:flex;align-items:baseline;gap:18px;padding:22px 4px;border-bottom:1px solid rgba(232,198,82,.16);transition:padding-left .35s var(--ease)}
.amen-r:hover{padding-left:14px}
.amen-r h3{font-family:var(--fd);font-size:clamp(20px,2.2vw,29px);color:var(--paper);font-weight:500;white-space:nowrap;transition:color .25s}
.amen-r:hover h3{color:var(--gold)}
.amen-r p{font-size:13px;color:rgba(251,250,246,.5);line-height:1.5;text-align:right;margin-left:auto}
.amen-r .dot{width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none;transform:translateY(-6px)}

/* ---------- quick links ---------- */
.ql{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ql-c{background:var(--white);border:1px solid var(--rule);border-radius:12px;padding:30px;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;display:flex;flex-direction:column;gap:12px}
.ql-c:hover{transform:translateY(-5px);border-color:var(--gold);box-shadow:0 22px 50px -30px rgba(5,60,10,.5)}
.ql-c .ic{width:40px;height:40px;color:var(--green)}
.ql-c .ic svg{width:100%;height:100%;stroke-width:1.4}
.ql-c h3{font-size:20px;color:var(--green-ink)}
.ql-c p{font-size:14.5px;color:var(--ink-soft);line-height:1.65}
.ql-c .go{margin-top:auto;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep)}

/* ---------- reveal (GSAP sets .is-in) ---------- */
.rv{opacity:0;transform:translateY(26px)}
.rv.is-in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .rv,.rv.is-in{opacity:1!important;transform:none!important;transition:none!important}
  .hero-media img{animation:none;transform:none}
  .hero-scroll span{animation:none}
  *{scroll-behavior:auto!important}
}

/* ---------- footer ---------- */
footer{background:var(--green-ink);color:rgba(251,250,246,.8);padding:clamp(56px,7vw,88px) 0 30px}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:44px;margin-bottom:48px}
.f-brand img{height:56px;margin-bottom:18px;filter:brightness(0) invert(1) opacity(.92)}
.f-brand p{font-size:13.5px;line-height:1.75;color:rgba(251,250,246,.62);max-width:40ch}
.f-col h4{font-family:var(--fd);font-size:16px;color:var(--gold);margin-bottom:18px;letter-spacing:.04em}
.f-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.f-col a,.f-col li{font-size:13.5px;color:rgba(251,250,246,.78);transition:color .2s}
.f-col a:hover{color:var(--gold)}
.f-bot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:26px;border-top:1px solid rgba(232,198,82,.18);font-size:11.5px;color:rgba(251,250,246,.45);letter-spacing:.04em}
.f-bot a{color:var(--gold)}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .amen{grid-template-columns:repeat(3,1fr)}
  .ql{grid-template-columns:repeat(2,1fr)}
  .f-grid{grid-template-columns:1fr 1fr;gap:34px}
}
@media (max-width:900px){
  .tl,.nav-cta{display:none}
  .burger{display:flex}
  .hero-rail .wrap{grid-template-columns:repeat(2,1fr);gap:18px}
}
@media (max-width:640px){
  .amen{grid-template-columns:repeat(2,1fr)}
  .ql{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
  .util .r{gap:10px}
  .util .wrap{justify-content:center;text-align:center}
  .hero{min-height:88vh}
}

/* ---------- split band: photo hard against copy ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;background:var(--paper-warm);align-items:stretch}
.split-img{position:relative;min-height:clamp(340px,42vw,600px);overflow:hidden}
.split-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split-body{display:flex;align-items:center;padding:clamp(48px,6vw,96px) clamp(28px,5vw,80px)}
.split-inner{max-width:56ch}
.split-inner .eyebrow{margin-bottom:20px}
.split-inner h2{font-size:clamp(28px,3.4vw,48px);color:var(--green-ink);margin-bottom:20px}
.split-inner h2 em{font-style:normal;color:var(--gold-deep)}
.split-inner p{font-size:16px;color:var(--ink-soft);line-height:1.8;margin-bottom:16px}
.split-inner .btn{margin-top:14px}
@media (max-width:900px){
  .split{grid-template-columns:1fr}
  .split-img{min-height:280px}
}

/* Footer logo: the mark is dark green on transparent, so a brightness/invert
   filter turned the roundel into a white blob. Put it on a light chip instead
   and let the real logo read. */
.f-brand img{filter:none;background:var(--paper);padding:10px 14px;border-radius:8px;height:62px;width:auto}

/* Amenities on small screens: the 2-col grid could not shrink because
   `white-space:nowrap` on the Cinzel headings pins a min-content width, which
   forced the whole page to 525px on a 390px phone. One column, and let the
   heading keep its nowrap without dragging the grid with it. */
@media (max-width:760px){
  .amen{grid-template-columns:1fr}
  .amen-r{gap:12px;padding:16px 2px;flex-wrap:wrap}
  .amen-r h3{font-size:20px}
  .amen-r p{text-align:left;margin-left:0;flex-basis:100%;font-size:12.5px}
}

/* ============================================================
   CALENDAR
   Amanda is the Event Coordinator and asked for "a different layout,
   more user friendly and easier to read". So: a real month grid that
   is scannable, a list view for "what's on this week", and filters
   that separate club life from board business, because today they are
   one undifferentiated pile.
   ============================================================ */
.cal-head{background:var(--green-ink);color:var(--paper);padding:clamp(80px,10vw,120px) 0 clamp(28px,4vw,44px)}
.cal-head h1{font-size:clamp(34px,5vw,64px);color:var(--paper);margin-bottom:14px}
.cal-head h1 em{font-style:normal;color:var(--gold)}
.cal-head p{color:rgba(251,250,246,.75);max-width:62ch;font-size:16.5px}

.cal-bar{position:sticky;top:71px;z-index:40;background:var(--paper);border-bottom:1px solid var(--rule);padding:14px 0}
.cal-bar .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cal-nav{display:flex;align-items:center;gap:8px}
.cal-nav button{width:38px;height:38px;border-radius:50%;border:1px solid var(--rule);display:grid;place-items:center;color:var(--green);transition:background .2s,border-color .2s}
.cal-nav button:hover{background:var(--green);color:var(--white);border-color:var(--green)}
.cal-month{font-family:var(--fd);font-size:20px;color:var(--green-ink);min-width:190px;text-align:center}
.cal-views{display:flex;gap:4px;background:var(--paper-warm);border-radius:999px;padding:4px}
.cal-views button{padding:8px 18px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);transition:background .2s,color .2s}
.cal-views button[aria-pressed="true"]{background:var(--green);color:var(--white)}
.cal-filters{display:flex;gap:7px;flex-wrap:wrap;margin-left:auto}
.chip{padding:8px 15px;border-radius:999px;border:1px solid var(--rule);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);transition:all .2s;display:inline-flex;align-items:center;gap:7px}
.chip .sw{width:8px;height:8px;border-radius:50%}
.chip[aria-pressed="true"]{background:var(--green-ink);color:var(--paper);border-color:var(--green-ink)}
.chip:hover{border-color:var(--green)}
.sw-community{background:var(--gold)}
.sw-governance{background:var(--green-soft)}
.sw-notice{background:var(--stone)}

/* month grid */
.cal-wrap{padding:clamp(28px,4vw,48px) 0 clamp(64px,8vw,110px)}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px}
.cal-dow span{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);text-align:center;padding:6px 0}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-cell{background:var(--white);border:1px solid var(--rule);border-radius:8px;min-height:118px;padding:8px;display:flex;flex-direction:column;gap:4px;transition:border-color .2s}
.cal-cell:hover{border-color:var(--gold)}
.cal-cell.pad{background:var(--rule-soft);border-color:transparent}
.cal-cell.today{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.cal-d{font-size:12px;font-weight:700;color:var(--ink-soft);display:flex;justify-content:space-between;align-items:center}
.cal-cell.today .cal-d{color:var(--green)}
.cal-d .cnt{font-size:9.5px;color:var(--ink-dim);font-weight:600}
.ev{font-size:11px;line-height:1.35;padding:4px 6px;border-radius:4px;border-left:3px solid var(--gold);background:var(--paper-warm);color:var(--ink);cursor:pointer;text-align:left;width:100%;transition:transform .15s var(--ease)}
.ev:hover{transform:translateX(2px)}
.ev .t{font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev .h{color:var(--ink-dim);font-size:10px}
.ev-governance{border-left-color:var(--green-soft);background:rgba(15,122,25,.07)}
.ev-notice{border-left-color:var(--stone);background:rgba(133,91,48,.08)}
.ev-more{font-size:10px;color:var(--gold-deep);font-weight:700;text-align:left;padding:2px 6px}

/* list view */
.cal-list{display:none;flex-direction:column;gap:0}
.cal-list.on{display:flex}
.cal-grid.off,.cal-dow.off{display:none}
.li-day{display:grid;grid-template-columns:92px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--rule)}
.li-date{font-family:var(--fd);font-size:15px;color:var(--green);line-height:1.3}
.li-date .dn{display:block;font-family:var(--fb);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);font-weight:700}
.li-evs{display:flex;flex-direction:column;gap:9px}
.li-ev{display:grid;grid-template-columns:88px 1fr auto;gap:16px;align-items:baseline;padding:9px 12px;border-radius:7px;border-left:3px solid var(--gold);background:var(--paper-warm)}
.li-ev.li-governance{border-left-color:var(--green-soft);background:rgba(15,122,25,.06)}
.li-ev.li-notice{border-left-color:var(--stone);background:rgba(133,91,48,.07)}
.li-ev .tm{font-size:12px;font-weight:700;color:var(--ink-soft);white-space:nowrap}
.li-ev .nm{font-size:14.5px;font-weight:600;color:var(--ink)}
.li-ev .nm small{display:block;font-weight:400;font-size:11.5px;color:var(--ink-dim);margin-top:2px}
.li-ev .rm{font-size:11px;color:var(--ink-dim);text-align:right;white-space:nowrap}
.cal-empty{padding:60px 0;text-align:center;color:var(--ink-dim);font-size:15px}

@media (max-width:900px){
  .cal-bar{top:0}
  .cal-filters{margin-left:0;width:100%}
  .cal-cell{min-height:82px;padding:5px}
  .ev .t{font-size:10px}
  .ev .h{display:none}
}
@media (max-width:640px){
  /* A 7-col month grid is unusable on a phone. Amanda's readers are mostly on
     phones, so default them to the list and keep the grid for tablets up. */
  .cal-grid,.cal-dow{display:none}
  .cal-list{display:flex}
  .cal-views [data-view="month"]{display:none}
  .li-day{grid-template-columns:1fr;gap:8px}
  .li-ev{grid-template-columns:74px 1fr;gap:10px}
  .li-ev .rm{grid-column:2;text-align:left}
}

/* Grid children default to min-width:auto, so a long event title (e.g. the
   "Rotonda Puzzlers Puzzle Swap Located at Rotonda Park off of Parade Circle"
   entry) refuses to shrink and drags the whole 7-column month grid past the
   viewport: measured 1906px wide at a 1440px viewport. Let the tracks shrink
   and make the ellipsis actually apply. */
.cal-grid{min-width:0}
.cal-cell{min-width:0;overflow:hidden}
.ev{min-width:0;max-width:100%;display:block}
.ev .t{max-width:100%;min-width:0}

/* ============================================================ page mastheads
   Every interior page opens on the same green band so the site reads as one
   place. Cheaper than a hero photo per page, and they own no photography for
   most of these subjects. */
.mast{background:var(--green-ink);color:var(--paper);padding:clamp(96px,11vw,150px) 0 clamp(48px,6vw,74px);position:relative;overflow:hidden}
.mast::after{content:"";position:absolute;right:-90px;top:-60px;width:420px;height:420px;border:1px solid rgba(232,198,82,.16);border-radius:50%;pointer-events:none}
.mast .eyebrow{margin-bottom:20px}
.mast h1{font-size:clamp(34px,5vw,64px);line-height:1.06;margin-bottom:18px}
.mast h1 em{font-style:normal;color:var(--gold)}
.mast p{max-width:66ch;color:rgba(251,250,246,.8);font-size:clamp(15.5px,1.4vw,17.5px);line-height:1.78}

/* ========================================================= document library */
.dl-bar{background:var(--paper-warm);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:40}
.dl-bar .wrap{padding-top:20px;padding-bottom:20px}
.dl-search{position:relative;display:flex;align-items:center;margin-bottom:14px}
.dl-search svg{position:absolute;left:18px;width:19px;height:19px;color:var(--ink-dim);pointer-events:none}
.dl-q{width:100%;padding:16px 52px 16px 50px;border:1.5px solid var(--rule);border-radius:999px;background:var(--white);font-family:var(--fb);font-size:16px;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.dl-q:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(10,90,16,.1)}
.dl-q::placeholder{color:var(--ink-dim)}
.dl-clear{position:absolute;right:16px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--ink-dim);font-size:19px;line-height:1}
.dl-clear:hover{background:var(--rule);color:var(--ink)}
.dl-rows{display:flex;flex-direction:column;gap:9px}
.dl-frow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.dl-frow > b{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);font-weight:700;flex:0 0 62px}
.dl-scroll{display:flex;gap:8px;flex-wrap:wrap;min-width:0}
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 15px;border:1.5px solid var(--rule);border-radius:999px;background:var(--white);font-size:12.5px;font-weight:600;color:var(--ink-soft);white-space:nowrap;transition:border-color .2s,background .2s,color .2s}
.chip:hover{border-color:var(--green-soft);color:var(--green)}
.chip[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:var(--white)}
.dl-count{font-size:13px;color:var(--ink-dim);font-weight:600;padding:16px 0 6px;display:block}
.dl-list{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.dl-row{display:flex;align-items:center;gap:16px;padding:17px 8px;border-bottom:1px solid var(--rule-soft);transition:background .18s,padding-left .3s var(--ease);min-width:0}
.dl-row:hover{background:var(--paper-warm);padding-left:16px}
.dl-ic{flex:0 0 34px;height:34px;display:grid;place-items:center;color:var(--green);background:rgba(10,90,16,.07);border-radius:8px}
.dl-ic svg{width:18px;height:18px}
.dl-main{flex:1;min-width:0}
.dl-t{display:block;font-weight:600;font-size:15.5px;color:var(--ink);line-height:1.45;margin-bottom:3px}
.dl-t mark{background:rgba(232,198,82,.45);color:inherit;border-radius:2px;padding:0 1px}
.dl-meta{display:block;font-size:12.5px;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-meta i{font-style:normal;color:var(--rule);margin:0 3px}
.dl-side{flex:0 0 auto;display:flex;align-items:center;gap:16px}
.dl-kb{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);font-weight:600}
.dl-go{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--green);opacity:0;transition:opacity .2s}
.dl-row:hover .dl-go{opacity:1}
.dl-empty{padding:64px 8px;text-align:center}
.dl-empty p{font-family:var(--fd);font-size:22px;color:var(--green-ink)}
.dl-empty-sub{font-family:var(--fb) !important;font-size:15px !important;color:var(--ink-soft) !important;max-width:52ch;margin:12px auto 0;line-height:1.75}
.dl-empty-sub a{color:var(--green);font-weight:600;border-bottom:1px solid var(--gold)}
.dl-more{padding:32px 0;text-align:center}
#docs.is-loading .dl-list{min-height:280px;opacity:.4}
.dl-note{background:var(--paper-warm);border-left:3px solid var(--gold);padding:18px 22px;margin-top:34px;font-size:14px;color:var(--ink-soft);line-height:1.75;border-radius:0 8px 8px 0}
.dl-note a{color:var(--green);font-weight:600}
@media (max-width:760px){
  .dl-side{display:none}
  .dl-frow > b{flex:0 0 100%}
  .dl-scroll{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none;max-width:100%}
  .dl-scroll::-webkit-scrollbar{display:none}
  .dl-bar{position:static}
}

/* ================================================================== forms */
.fm-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.fm-c{display:flex;flex-direction:column;justify-content:space-between;gap:24px;background:var(--white);border:1px solid var(--rule);border-radius:14px;padding:32px;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.fm-c:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(1,46,6,.09);border-color:var(--gold)}
.fm-c h3{font-family:var(--fd);font-size:21px;color:var(--green-ink);line-height:1.3;margin-bottom:12px}
.fm-c p{font-size:14.5px;color:var(--ink-soft);line-height:1.75}
.fm-c p strong{color:var(--green);font-weight:700}
.fm-note{display:inline-block;margin-top:14px;font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--gold-deep);border-bottom:1px solid var(--gold)}
.fm-note:hover{color:var(--green)}
.fm-act{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.fm-paper{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);transition:color .2s}
.fm-paper:hover{color:var(--green)}
.fm-paper svg{width:16px;height:16px;stroke-width:1.6}
@media (max-width:860px){.fm-grid{grid-template-columns:1fr}.fm-c{padding:26px}}

/* ================================================================ portal */
#portal{background:var(--paper-warm);min-height:70vh}
.pt-login{display:grid;place-items:center;padding:clamp(40px,7vw,90px) var(--pad)}
.pt-card{width:100%;max-width:480px;background:var(--white);border:1px solid var(--rule);border-radius:16px;padding:clamp(28px,4vw,44px);box-shadow:0 24px 60px rgba(1,46,6,.08)}
.pt-card h2{font-size:clamp(26px,3vw,34px);color:var(--green-ink);margin:16px 0 10px}
.pt-card h2 em{font-style:normal;color:var(--gold-deep)}
.pt-sub{font-size:14.5px;color:var(--ink-soft);line-height:1.7;margin-bottom:26px}
.pt-card label,.pt-form label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px}
.pt-card input,.pt-form input,.pt-form select{width:100%;margin-top:7px;padding:13px 15px;border:1.5px solid var(--rule);border-radius:9px;font-family:var(--fb);font-size:15px;color:var(--ink);background:var(--white);text-transform:none;letter-spacing:0;font-weight:400;transition:border-color .2s,box-shadow .2s}
.pt-card input:focus,.pt-form input:focus,.pt-form select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(10,90,16,.1)}
.pt-go{width:100%;justify-content:center;margin-top:6px}
.pt-err{background:rgba(168,134,42,.1);border-left:3px solid var(--gold);padding:11px 14px;border-radius:0 7px 7px 0;font-size:13.5px;color:var(--ink-soft);margin:16px 0 0;line-height:1.6}
.pt-forgot{text-align:center;margin:16px 0 0;font-size:13px}
.pt-forgot a{color:var(--green);border-bottom:1px solid var(--gold)}
.pt-demo{margin-top:30px;padding-top:26px;border-top:1px solid var(--rule)}
.pt-demo b{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:8px}
.pt-demo p{font-size:13.5px;color:var(--ink-soft);line-height:1.7;margin-bottom:18px}
.pt-roles{display:flex;gap:10px;flex-wrap:wrap}
.pt-roles .btn{flex:1;justify-content:center;padding:13px 18px;font-size:11.5px;white-space:nowrap}
.shake{animation:shk .42s var(--ease)}
@keyframes shk{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}

.pt-shell{display:grid;grid-template-columns:270px 1fr;gap:0;min-height:70vh;max-width:var(--max);margin:0 auto;background:var(--white);border-left:1px solid var(--rule);border-right:1px solid var(--rule)}
.pt-side{background:var(--green-ink);color:var(--paper);padding:34px 22px;display:flex;flex-direction:column;gap:26px}
.pt-who{display:flex;align-items:center;gap:12px;padding-bottom:22px;border-bottom:1px solid rgba(232,198,82,.2)}
.pt-av{width:42px;height:42px;flex:0 0 42px;border-radius:50%;background:var(--gold);color:var(--green-ink);display:grid;place-items:center;font-family:var(--fd);font-size:19px;font-weight:700}
.pt-wt{display:flex;flex-direction:column;min-width:0}
.pt-wt b{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-wt i{font-style:normal;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.pt-nav{display:flex;flex-direction:column;gap:3px;flex:1}
.pt-nav button{text-align:left;padding:12px 14px;border-radius:9px;font-size:14px;font-weight:600;color:rgba(251,250,246,.72);transition:background .2s,color .2s,padding-left .25s var(--ease)}
.pt-nav button:hover{background:rgba(255,255,255,.07);color:var(--white);padding-left:19px}
.pt-nav button.on{background:var(--gold);color:var(--green-ink)}
.pt-out{text-align:left;padding:11px 14px;font-size:12.5px;font-weight:600;color:rgba(251,250,246,.55)}
.pt-out:hover{color:var(--gold)}
.pt-main{padding:clamp(28px,4vw,48px);min-width:0}
.pt-head{margin-bottom:30px}
.pt-head h2{font-size:clamp(24px,3vw,34px);color:var(--green-ink);margin-bottom:7px}
.pt-head p{font-size:15px;color:var(--ink-soft)}
.pt-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:30px}
.pt-s{background:var(--paper-warm);border-radius:12px;padding:20px 18px}
.pt-s b{display:block;font-family:var(--fd);font-size:29px;color:var(--green);line-height:1;margin-bottom:7px}
.pt-s span{font-size:11.5px;letter-spacing:.06em;color:var(--ink-dim);font-weight:600;line-height:1.4;display:block}
.pt-cta{background:var(--green);color:var(--white);border-radius:14px;padding:30px}
.pt-cta h3{font-family:var(--fd);font-size:22px;margin-bottom:10px;line-height:1.3}
.pt-cta p{font-size:14.5px;color:rgba(255,255,255,.85);line-height:1.75;margin-bottom:20px}
.pt-cta p b{color:var(--gold);font-weight:700}
.pt-cta a{color:var(--gold);border-bottom:1px solid rgba(232,198,82,.5)}
.pt-cta .btn-ghost{border-color:rgba(255,255,255,.55);color:var(--white)}
.pt-cta .btn-ghost:hover{background:var(--white);color:var(--green)}
.pt-list{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.pt-r{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 4px;border-bottom:1px solid var(--rule-soft);min-width:0}
.pt-rm{display:flex;flex-direction:column;min-width:0;flex:1}
.pt-rm b{font-size:15px;font-weight:600;color:var(--ink);line-height:1.4}
.pt-rm i{font-style:normal;font-size:12.5px;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-badge{flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.pt-badge.ok{background:rgba(10,90,16,.11);color:var(--green)}
.pt-badge.wait{background:rgba(168,134,42,.15);color:var(--gold-deep)}
.pt-badge.hold{background:rgba(133,91,48,.13);color:var(--stone)}
.pt-kb{font-size:11px;letter-spacing:.08em;color:var(--ink-dim);font-weight:700;flex:0 0 auto}
.pt-del{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim);flex:0 0 auto}
.pt-del:hover{color:#a3311f}
.pt-none{padding:34px 4px;color:var(--ink-dim);font-size:14.5px;border-bottom:1px solid var(--rule-soft)}
.pt-none a{color:var(--green);font-weight:600;border-bottom:1px solid var(--gold)}
.pt-note{background:var(--paper-warm);border-left:3px solid var(--gold);padding:16px 20px;margin-top:26px;font-size:13.5px;color:var(--ink-soft);line-height:1.75;border-radius:0 8px 8px 0}
.pt-note a{color:var(--green);font-weight:600}
.pt-form{margin-bottom:8px}
.pt-fg{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pt-h4{font-family:var(--fd);font-size:16px;color:var(--green-ink);margin:30px 0 4px}
.pt-pay{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:var(--paper-warm);border-radius:14px;padding:26px}
.pt-paid b{display:block;font-family:var(--fd);font-size:26px;color:var(--green)}
.pt-paid span{font-size:13px;color:var(--ink-dim)}
.pt-drop{border:2px dashed var(--rule);border-radius:14px;padding:44px 20px;text-align:center;margin-bottom:20px;transition:border-color .2s}
.pt-drop:hover{border-color:var(--green-soft)}
.pt-drop b{display:block;font-family:var(--fd);font-size:19px;color:var(--green-ink);margin-bottom:6px}
.pt-drop span{font-size:13.5px;color:var(--ink-dim)}
@media (max-width:900px){
  .pt-shell{grid-template-columns:1fr;border:0}
  .pt-side{flex-direction:row;align-items:center;flex-wrap:wrap;gap:14px;padding:18px var(--pad)}
  .pt-who{padding-bottom:0;border-bottom:0;flex:1 0 100%}
  .pt-nav{flex-direction:row;flex-wrap:wrap;gap:6px}
  .pt-nav button{padding:8px 13px;font-size:12.5px;background:rgba(255,255,255,.07)}
  .pt-nav button:hover{padding-left:13px}
  .pt-stats{grid-template-columns:repeat(2,1fr)}
  .pt-fg{grid-template-columns:1fr}
  .pt-roles{flex-direction:column}
}

/* A board-published event, seen from the public side. */
.li-day.focus{background:rgba(232,198,82,.09);border-radius:12px}
.li-ev.li-new{position:relative}
.li-tag{display:inline-block;margin-left:9px;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--green-ink);background:var(--gold);padding:2px 8px;border-radius:999px;vertical-align:middle}
.pt-see{flex:0 0 auto;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green);border-bottom:1px solid var(--gold)}
.pt-see:hover{color:var(--gold-deep)}


/* ================================================================== about */
.ab-lede{max-width:900px;margin-bottom:clamp(44px,5vw,72px)}
.ab-lede .eyebrow{margin-bottom:20px}
.ab-q{font-family:var(--fd);font-size:clamp(21px,2.7vw,33px);line-height:1.45;color:var(--green-ink)}
.ab-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.ab-body h2{font-size:clamp(24px,2.8vw,34px);color:var(--green-ink);margin-bottom:20px}
.ab-body p{font-size:15.5px;color:var(--ink-soft);line-height:1.85;margin-bottom:16px}
.ab-side{background:var(--paper-warm);border-radius:14px;padding:30px;position:sticky;top:24px}
.ab-side h4{font-family:var(--fd);font-size:17px;color:var(--green-ink);margin-bottom:11px}
.ab-side p{font-size:14px;color:var(--ink-soft);line-height:1.7;margin-bottom:14px}
.ab-side p b{color:var(--green)}
.ab-side hr{border:0;border-top:1px solid var(--rule);margin:26px 0}
.bd-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.bd-c{display:flex;align-items:center;gap:16px;background:var(--white);border:1px solid var(--rule);border-radius:12px;padding:20px 22px;transition:transform .28s var(--ease),box-shadow .28s,border-color .28s;min-width:0}
.bd-c:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(1,46,6,.08);border-color:var(--gold)}
.bd-i{flex:0 0 46px;height:46px;border-radius:50%;background:var(--green);color:var(--gold);display:grid;place-items:center;font-family:var(--fd);font-size:16px;font-weight:700;letter-spacing:.03em}
.bd-t{flex:1;min-width:0}
.bd-t h3{font-size:16px;font-weight:600;color:var(--ink);line-height:1.35}
.bd-r{display:block;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--gold-deep)}
.bd-d{display:block;font-size:12px;color:var(--ink-dim)}
.bd-m{flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--green);border-bottom:1px solid var(--gold);white-space:nowrap}
.bd-m:hover{color:var(--gold-deep)}
.bd-office{color:var(--ink-dim);border-bottom-color:var(--rule)}
@media (max-width:900px){.ab-grid{grid-template-columns:1fr}.ab-side{position:static}.bd-grid{grid-template-columns:1fr}}
@media (max-width:520px){.bd-c{flex-wrap:wrap}.bd-m{flex:1 0 100%;text-align:left}}

/* ================================================================ contact */
.ct-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(30px,4vw,60px);align-items:start}
.ct-form-w h2{font-size:clamp(24px,2.8vw,34px);color:var(--green-ink);margin-bottom:10px}
.ct-sub{font-size:14.5px;color:var(--ink-soft);margin-bottom:28px;line-height:1.7}
.ct-form label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:16px}
.ct-form input,.ct-form select,.ct-form textarea{width:100%;margin-top:7px;padding:13px 15px;border:1.5px solid var(--rule);border-radius:9px;font-family:var(--fb);font-size:15px;color:var(--ink);background:var(--white);text-transform:none;letter-spacing:0;font-weight:400;transition:border-color .2s,box-shadow .2s}
.ct-form textarea{resize:vertical;min-height:130px}
.ct-form input:focus,.ct-form select:focus,.ct-form textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(10,90,16,.1)}
.hp{position:absolute !important;left:-9999px !important;width:1px !important;height:1px !important;opacity:0 !important;pointer-events:none}
.cf-turnstile{margin:6px 0 18px}
.ct-status{margin-top:14px;font-size:14px;line-height:1.6;min-height:1px}
.ct-status.ok{color:var(--green);font-weight:600}
.ct-status.err{color:#a3311f;font-weight:600}
.ct-side{display:flex;flex-direction:column;gap:16px}
.ct-block{background:var(--paper-warm);border-radius:14px;padding:26px}
.ct-block h4{font-family:var(--fd);font-size:17px;color:var(--green-ink);margin-bottom:12px}
.ct-block p{font-size:14px;color:var(--ink-soft);line-height:1.7;margin-bottom:12px}
.ct-list{list-style:none;display:flex;flex-direction:column}
.ct-list li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px solid var(--rule);font-size:13.5px;min-width:0}
.ct-list li:last-child{border-bottom:0}
.ct-list li > span:first-child{color:var(--ink-dim);flex:0 0 auto;font-weight:600}
.ct-list li a,.ct-list li > span:last-child{text-align:right;word-break:break-word;min-width:0}
.ct-list li a{color:var(--green);font-weight:600;border-bottom:1px solid var(--gold)}
.ct-list li a:hover{color:var(--gold-deep)}
.st-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.st-c{background:var(--white);border:1px solid var(--rule);border-radius:12px;padding:24px;transition:transform .28s var(--ease),box-shadow .28s,border-color .28s;min-width:0}
.st-c:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(1,46,6,.08);border-color:var(--gold)}
.st-c h3{font-family:var(--fd);font-size:18px;color:var(--green-ink)}
.st-r{display:block;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--gold-deep);margin:3px 0 12px}
.st-m,.st-t{display:block;font-size:13.5px;color:var(--green);font-weight:600;word-break:break-word}
.st-m:hover,.st-t:hover{color:var(--gold-deep)}
.st-t{color:var(--ink-soft);margin-top:4px}
@media (max-width:980px){.ct-grid{grid-template-columns:1fr}.st-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.st-grid{grid-template-columns:1fr}}

/* ============================================================ living here */
.lv-alert{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:rgba(163,49,31,.07);border-left:4px solid #a3311f;border-radius:0 10px 10px 0;padding:18px 22px;margin-bottom:clamp(40px,5vw,64px)}
.lv-alert b{font-family:var(--fd);font-size:17px;color:#a3311f}
.lv-alert span{font-size:14.5px;color:var(--ink-soft)}
.lv-alert a{color:#a3311f;font-weight:700;border-bottom:1px solid rgba(163,49,31,.4)}
.sv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sv-c{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--rule);border-radius:12px;padding:26px;transition:transform .28s var(--ease),box-shadow .28s,border-color .28s}
.sv-c:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(1,46,6,.09);border-color:var(--gold)}
.sv-c h3{font-family:var(--fd);font-size:18px;color:var(--green-ink);line-height:1.3;margin-bottom:9px}
.sv-c p{font-size:14px;color:var(--ink-soft);line-height:1.7;flex:1;margin-bottom:16px}
.sv-c .go{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--green)}
.lv-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,70px);align-items:start}
.lv-h2{font-size:clamp(24px,3vw,36px);color:var(--green-ink);margin:16px 0 22px}
.lv-h2 em{font-style:normal;color:var(--gold-deep)}
.lv-p{font-size:15px;color:var(--ink-soft);line-height:1.8;margin-bottom:14px}
.lv-p b{color:var(--green)}
.lv-hint{font-size:13.5px;color:var(--ink-dim);font-style:italic;line-height:1.7;padding-left:14px;border-left:2px solid var(--gold);margin-bottom:20px}
.lv-list li{padding:12px 0}
@media (max-width:980px){.sv-grid{grid-template-columns:repeat(2,1fr)}.lv-two{grid-template-columns:1fr}}
@media (max-width:600px){.sv-grid{grid-template-columns:1fr}}

/* ==================================================================== 404 */
.nf{min-height:64vh;display:grid;place-items:center;text-align:center;padding:clamp(70px,10vw,130px) var(--pad)}
.nf h1{font-size:clamp(60px,12vw,150px);color:var(--green-ink);line-height:.9;margin-bottom:18px}
.nf h1 em{font-style:normal;color:var(--gold)}
.nf h2{font-family:var(--fd);font-size:clamp(20px,2.4vw,28px);color:var(--green-ink);margin-bottom:14px}
.nf p{font-size:15.5px;color:var(--ink-soft);max-width:56ch;margin:0 auto 30px;line-height:1.8}
.nf-links{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}


/* ====================================================== footer sitemap */
.f-top{display:grid;grid-template-columns:1fr 2.6fr;gap:clamp(30px,4vw,64px);padding-bottom:44px}
.f-map{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}
.f-office{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:5px}
.f-office li{font-size:12.5px;color:rgba(251,250,246,.62);line-height:1.6}
.f-office a{color:rgba(251,250,246,.62)}
.f-office a:hover{color:var(--gold)}
@media (max-width:1100px){.f-top{grid-template-columns:1fr}.f-map{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.f-map{grid-template-columns:repeat(2,1fr)}}
@media (max-width:440px){.f-map{grid-template-columns:1fr}}

/* ======================================================= article pages */
.art{max-width:74ch}
.art h3{font-family:var(--fd);font-size:clamp(19px,2.2vw,25px);color:var(--green-ink);margin:34px 0 12px;line-height:1.32}
.art h3:first-child{margin-top:0}
.art p{font-size:16px;color:var(--ink-soft);line-height:1.85;margin-bottom:16px}
.art p b,.art p strong{color:var(--green)}

/* An unbreakable token (an email, a long URL) must never widen the page.
   "communityoutreach@rotondawest.org" as an h3 pushed /news to 438px on a
   390px phone. Belt and braces alongside the fix in _para(). */
.art{overflow-wrap:break-word;word-break:break-word}
.art a{color:var(--green);font-weight:600;border-bottom:1px solid var(--gold)}
.art a:hover{color:var(--gold-deep)}


/* ============================================== header search + results */
.usearch{position:relative;display:flex;align-items:center}
.usearch svg{position:absolute;left:11px;width:14px;height:14px;color:rgba(251,250,246,.5);pointer-events:none}
.usearch input{width:190px;padding:6px 12px 6px 32px;border:1px solid rgba(232,198,82,.28);border-radius:999px;background:rgba(255,255,255,.07);color:var(--paper);font-family:var(--fb);font-size:12.5px;transition:width .3s var(--ease),border-color .2s,background .2s}
.usearch input::placeholder{color:rgba(251,250,246,.5)}
.usearch input:focus{outline:none;width:250px;border-color:var(--gold);background:rgba(255,255,255,.13)}
.usearch input::-webkit-search-cancel-button{filter:invert(1);opacity:.5}
@media (max-width:900px){.usearch input{width:150px}.usearch input:focus{width:170px}}
@media (max-width:600px){.util .wrap > span{display:none}.usearch input{width:100%}.usearch{flex:1}.util .r{flex:1;gap:10px}}

.sr-mast{padding-bottom:clamp(30px,4vw,44px)}
.sr-form{position:relative;display:flex;align-items:center;max-width:660px;margin-top:26px}
.sr-form svg{position:absolute;left:20px;width:20px;height:20px;color:var(--green-ink);pointer-events:none}
.sr-q{width:100%;padding:17px 22px 17px 54px;border:0;border-radius:999px;background:var(--white);font-family:var(--fb);font-size:16px;color:var(--ink)}
.sr-q:focus{outline:none;box-shadow:0 0 0 4px rgba(232,198,82,.5)}
.sr-q::placeholder{color:var(--ink-dim)}
.sr-count{display:block;font-size:13px;color:var(--ink-dim);font-weight:600;margin-bottom:10px}
.sr-h{font-family:var(--fd);font-size:15px;color:var(--green-ink);text-transform:uppercase;letter-spacing:.12em;margin:30px 0 4px;display:flex;align-items:center;gap:10px}
.sr-h:first-child{margin-top:0}
.sr-h span{font-family:var(--fb);font-size:11px;background:var(--paper-warm);color:var(--ink-dim);padding:2px 9px;border-radius:999px;letter-spacing:.04em}
.sr-list{display:flex;flex-direction:column}
.sr-r{display:flex;gap:15px;padding:17px 8px;border-bottom:1px solid var(--rule-soft);transition:background .18s,padding-left .3s var(--ease);min-width:0}
.sr-r:hover{background:var(--paper-warm);padding-left:16px}
.sr-ic{flex:0 0 32px;height:32px;display:grid;place-items:center;color:var(--green);background:rgba(10,90,16,.07);border-radius:8px}
.sr-ic svg{width:17px;height:17px}
.sr-m{min-width:0;flex:1}
.sr-t{display:block;font-weight:600;font-size:15.5px;color:var(--ink);line-height:1.45}
.sr-s{display:block;font-size:13.5px;color:var(--ink-soft);line-height:1.65;margin:3px 0}
.sr-s mark,.sr-t mark{background:rgba(232,198,82,.45);color:inherit;border-radius:2px;padding:0 1px}
.sr-u{display:block;font-size:12px;color:var(--ink-dim)}
.sr-u i{font-style:normal;color:var(--rule)}
.sr-empty{padding:54px 8px;text-align:center}
.sr-empty p{font-family:var(--fd);font-size:21px;color:var(--green-ink)}
.sr-more{display:inline-block;margin-top:20px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green);border-bottom:1px solid var(--gold)}
#search.is-loading .sr-list{opacity:.4;min-height:200px}
.f-more{color:var(--gold) !important;font-weight:700}


/* ========================================= photographic page mastheads */
.mast-photo{padding-top:clamp(120px,14vw,180px);padding-bottom:clamp(56px,7vw,86px);background:var(--green-ink)}
.mast-photo::after{display:none}
.mast-media{position:absolute;inset:0;z-index:0}
.mast-media img{width:100%;height:100%;object-fit:cover}
.mast-scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(to right,rgba(1,46,6,.94) 0%,rgba(1,46,6,.78) 46%,rgba(1,46,6,.42) 100%),
  linear-gradient(to top,rgba(1,46,6,.7) 0%,rgba(1,46,6,0) 55%)}
.mast-photo .wrap{position:relative;z-index:2}
.mast-photo h1,.mast-photo p{text-shadow:0 2px 30px rgba(1,46,6,.55)}
@media (max-width:720px){
  .mast-scrim{background:linear-gradient(to top,rgba(1,46,6,.95) 8%,rgba(1,46,6,.62) 100%)}
}

/* ================================================= shell page link lists */
.ll{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:8px}
.ll-i{display:flex;align-items:center;gap:14px;background:var(--white);border:1px solid var(--rule);border-radius:12px;padding:18px 20px;transition:transform .26s var(--ease),box-shadow .26s,border-color .26s;min-width:0}
.ll-i:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(1,46,6,.08);border-color:var(--gold)}
.ll-ic{flex:0 0 36px;height:36px;display:grid;place-items:center;color:var(--green);background:rgba(10,90,16,.07);border-radius:9px}
.ll-ic svg{width:18px;height:18px}
.ll-t{flex:1;min-width:0}
.ll-t b{display:block;font-size:15px;font-weight:600;color:var(--ink);line-height:1.4}
.ll-t span{display:block;font-size:12px;color:var(--ink-dim);letter-spacing:.04em}
.ll-go{flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
@media (max-width:760px){.ll{grid-template-columns:1fr}}