/* ============================================================
   MAGNOLIA BAY GARDENS — SHARED DESIGN SYSTEM
   Extends the completed homepage (index.html) across all pages.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* ---------------------------------------------------------------- BRAND --
     Change these five and the whole site follows: everything below and every
     component references them. A deep coastal blue, picked to sit on the same
     warm ivory/sand surfaces the brass accent already works against.

     Alternatives that drop straight in, if this one is not the one:
       Harbour   #17415c / #0d2a3d / #35759c
       Slate     #24455e / #162e40 / #4b7fa1
       Ink blue  #14395e / #0b2340 / #356494                                  */
  --brand:#1b4d6e;          /* primary — headings, dark bands, solid buttons  */
  --brand-deep:#0f3048;     /* deeper — footers, hero grounds, hovers         */
  --brand-soft:#3c7fa6;     /* lighter — soft fills and hover washes          */
  --accent:#b08d4f;         /* brass, unchanged — it pairs well with blue     */
  --accent-bright:#cba968;

  /* Legacy names. The components were written against --green/--brass and are
     referenced ~160 times; aliasing keeps one source of truth without a
     rename that could silently miss a usage. */
  --green:var(--brand); --green-deep:var(--brand-deep); --green-soft:var(--brand-soft);
  --brass:var(--accent); --brass-bright:var(--accent-bright);
  /* The wordmark itself is teal; against a blue scheme the Login button reads
     better in the brand colour, so both point at it. */
  --logo:var(--brand); --logo-hi:var(--brand-soft);
  --brass-ink:#7a6029;              /* accent TEXT on light — 5.1:1 (brass fails at 2.8:1) */
  --petal:#e8c9c0;
  /* surfaces */
  --ivory:#faf7f0; --sand:#e6ecf1; --white:#fff;
  /* text — neutrals carry a slight blue bias so they read as chosen */
  --ink:#16242e; --ink-2:#3f5a6b; --mut:#5f7686;
  /* lines */
  --line:rgba(22,36,46,.12); --line-2:rgba(22,36,46,.26); --line-light:rgba(255,255,255,.16);
  /* semantic */
  --ok:#3f7d55; --warn:#a8762a; --crit:#a4453a;
  /* elevation */
  --e1:0 1px 2px rgba(15,48,72,.05),0 10px 30px -18px rgba(15,48,72,.35);
  --e2:0 30px 60px -36px rgba(27,77,110,.45);
  /* layout */
  --maxw:1180px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --hdr-h:72px;   /* 10px padding + 52px logo + 10px padding */
}

/* ---------- 2. BASE ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Archivo',system-ui,-apple-system,sans-serif;
  background:var(--ivory);color:var(--ink);
  font-size:16px;line-height:1.65;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
body.lock{overflow:hidden}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;line-height:1.08;font-weight:500;letter-spacing:-.015em;text-wrap:balance}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
svg{display:block}
button{font-family:inherit}
::selection{background:var(--brass);color:#fff}

/* focus — visible everywhere, never removed */
:focus-visible{outline:2px solid var(--brass-ink);outline-offset:3px;border-radius:4px}
.dark :focus-visible,.on-dark :focus-visible{outline-color:var(--brass-bright)}

.skip{
  position:absolute;left:16px;top:-64px;z-index:200;
  background:var(--green);color:var(--ivory);padding:12px 22px;border-radius:0 0 12px 12px;
  font-weight:600;font-size:.9rem;transition:top .25s;
}
.skip:focus{top:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.pad{padding:clamp(56px,7vw,104px) 0}
.pad-sm{padding:clamp(40px,5vw,72px) 0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- 3. TYPOGRAPHY HELPERS ---------- */
.eyebrow{
  font-family:'Archivo Narrow',sans-serif;text-transform:uppercase;
  letter-spacing:.26em;font-size:.7rem;font-weight:700;color:var(--brass-ink);
  display:inline-flex;align-items:center;gap:.8em;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--brass);flex:none}
.eyebrow.c{justify-content:center}
.on-dark .eyebrow,.eyebrow.light{color:var(--brass-bright)}
.on-dark .eyebrow::before,.eyebrow.light::before{background:var(--brass-bright)}
.serif-i{font-family:'Fraunces',serif;font-style:italic;font-weight:400}
.i{font-style:italic;color:var(--green-soft)}
.on-dark .i{color:var(--petal)}

.section-head{max-width:660px;margin-bottom:clamp(32px,4vw,52px)}
.section-head.c{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{font-size:clamp(1.9rem,4.2vw,3rem);margin:14px 0}
.section-head p{color:var(--mut);font-size:1.04rem;max-width:62ch}
.on-dark .section-head h2{color:var(--ivory)}
.on-dark .section-head p{color:rgba(250,247,240,.7)}

.lede{font-size:1.1rem;color:var(--ink-2);max-width:64ch}
.prose{max-width:65ch}
.prose p{margin-bottom:1.1em;color:var(--ink-2)}
.prose p:last-child{margin-bottom:0}
.prose h2{font-size:1.7rem;color:var(--green);margin:1.6em 0 .5em}
.prose h3{font-size:1.28rem;color:var(--green);margin:1.5em 0 .4em}
.prose ul,.prose ol{margin:0 0 1.1em 1.2em;color:var(--ink-2)}
.prose li{margin-bottom:.5em}
.prose a{color:var(--brass-ink);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--green)}
.prose blockquote{
  border-left:3px solid var(--brass);padding:4px 0 4px 22px;margin:1.6em 0;
  font-family:'Fraunces',serif;font-style:italic;font-size:1.22rem;color:var(--green);
}

/* ---------- 4. BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--green);color:var(--ivory);
  font-weight:600;font-size:.9rem;font-family:'Archivo',sans-serif;
  padding:14px 30px;min-height:48px;border-radius:50px;border:1px solid transparent;
  cursor:pointer;position:relative;overflow:hidden;letter-spacing:.01em;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.btn span.l{position:relative;z-index:1}
.btn svg{position:relative;z-index:1;width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.btn::after{content:"";position:absolute;inset:0;background:var(--green-soft);transform:translateY(101%);transition:transform .4s var(--ease)}
.btn:hover::after{transform:translateY(0)}
.btn:hover{transform:translateY(-3px);box-shadow:0 18px 36px -16px rgba(31,61,47,.6)}
.btn.brass{background:var(--brass);color:#231a06}
.btn.brass::after{background:var(--brass-bright)}
.btn.brass:hover{box-shadow:0 18px 36px -16px rgba(176,141,79,.7)}
.btn.ghost{background:transparent;border-color:var(--line-2);color:var(--ink)}
.btn.ghost::after{background:var(--sand)}
.btn.outline-l{background:transparent;border-color:var(--line-light);color:var(--ivory)}
.btn.outline-l::after{background:rgba(255,255,255,.14)}
.btn.sm{padding:9px 20px;min-height:40px;font-size:.8rem}
.btn.wide{width:100%}
.btn[disabled],.btn.is-off{opacity:.45;pointer-events:none}
.link-a{
  color:var(--brass-ink);font-weight:600;font-size:.88rem;
  display:inline-flex;align-items:center;gap:7px;transition:gap .3s var(--ease),color .25s;
}
.link-a svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.link-a:hover{gap:12px;color:var(--green)}
.on-dark .link-a{color:var(--brass-bright)}
.on-dark .link-a:hover{color:var(--ivory)}

/* ---------- 5. HEADER ---------- */
header#hdr{
  position:sticky;top:0;z-index:100;
  background:var(--ivory);box-shadow:0 1px 0 var(--line);
  transition:padding .35s var(--ease),box-shadow .35s;
  padding:10px 0;
}
header#hdr.stuck{padding:4px 0;box-shadow:0 2px 20px -8px rgba(12,38,56,.25)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand img{height:52px;width:auto;object-fit:contain;transition:height .35s var(--ease)}
header#hdr.stuck .brand img{height:44px}
.nav-main{display:flex;min-width:0}
.nav-main>ul{display:flex;gap:22px;list-style:none;align-items:center;flex-wrap:nowrap}
/* [hidden] only sets display:none through the UA sheet, so ANY author rule that
   sets display (.row{display:flex}, .album{display:block}) silently beats it and
   the element stays visible. That is why the contact and gallery filter pills
   appeared to do nothing. This makes hidden mean hidden everywhere. */
[hidden]{display:none!important}

/* Both nav lists are in the DOM and toggled by auth state. A bare [hidden]
   would lose to the display:flex above, so state it explicitly. */
.nav-main>ul[hidden],.mm-body>div[hidden]{display:none}
/* The signed-in bar carries 11 items. Tighten it, and let the header use more
   of the viewport than the 1180px content container — the bar is chrome, not
   prose, so it does not need the reading measure. */
.nav-main.wide>ul{gap:19px}
.nav-main.wide a.link,.nav-main.wide button.link{font-size:.82rem;white-space:nowrap}
body.is-signed-in header#hdr .wrap.nav{max-width:1400px}
.nav-main a.link,.nav-main button.link{
  font-size:.9rem;font-weight:600;color:var(--ink);white-space:nowrap;
  padding:6px 0;position:relative;background:none;border:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;transition:color .3s;
}
.nav-main a.link::after,.nav-main button.link::after{
  content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;
  background:var(--brass);transition:width .3s var(--ease);
}
.nav-main a.link:hover,.nav-main button.link:hover{color:var(--green)}
.nav-main a.link:hover::after,.nav-main button.link:hover::after{width:100%}
.nav-main a.link[aria-current="page"]{color:var(--green)}
.nav-main a.link[aria-current="page"]::after{width:100%}
.nav-main .caret{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.4;transition:transform .3s}
.nav-main [aria-expanded="true"] .caret{transform:rotate(180deg)}

/* dropdown — opens on click, not hover */
.has-menu{position:relative}
.dd{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-8px);
  background:var(--white);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 30px 60px -24px rgba(12,38,56,.35);
  padding:10px;min-width:250px;list-style:none;
  opacity:0;visibility:hidden;transition:.28s var(--ease);z-index:20;
}
.has-menu.open .dd{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dd li a{
  display:block;padding:11px 14px;border-radius:10px;font-size:.88rem;font-weight:500;
  color:var(--ink-2);transition:background .2s,color .2s;
}
.dd li a:hover{background:var(--sand);color:var(--green)}
.dd li a small{display:block;font-size:.76rem;color:var(--mut);font-weight:400;margin-top:1px}
.dd .dd-sep{height:1px;background:var(--line);margin:8px 6px}

.nav-cta{display:flex;align-items:center;gap:22px}
.nav-login{display:inline-flex;align-items:center;justify-content:center;font-family:'Archivo',sans-serif;font-size:.86rem;font-weight:600;letter-spacing:.01em;color:var(--ivory);background:var(--logo);border:1px solid var(--logo);padding:11px 24px;min-height:44px;border-radius:50px;white-space:nowrap;transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.nav-login:hover{background:var(--logo-hi);border-color:var(--logo-hi);color:var(--ivory);transform:translateY(-2px);box-shadow:0 14px 28px -14px rgba(13,66,62,.7)}
.ext{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.2;opacity:.6}

/* Owner Portal pill inside the bar */
.nav-main a.link.nav-pill{
  background:var(--sand);border:1px solid var(--line);border-radius:50px;
  padding:8px 16px;color:var(--green);transition:background .25s var(--ease),color .25s,border-color .25s;
}
.nav-main a.link.nav-pill::after{display:none}
.nav-main a.link.nav-pill:hover,
.nav-main a.link.nav-pill:focus-visible{
  background:var(--green);color:var(--ivory);border-color:var(--green);
}
.nav-main a.link.nav-pill:hover .ext{opacity:1}

/* account chip (signed-in) */
.acct-wrap{position:relative}
.acct{display:flex;align-items:center;gap:9px;background:var(--sand);border:1px solid var(--line);
  border-radius:50px;padding:6px 14px 6px 6px;cursor:pointer;font-size:.85rem;font-weight:600;color:var(--ink)}
.acct::after{display:none}
.acct .av{width:30px;height:30px;border-radius:50%;background:var(--green);color:var(--ivory);
  display:grid;place-items:center;font-size:.75rem;font-family:'Archivo Narrow',sans-serif;font-weight:700;flex:none}
.acct:hover{border-color:var(--brass)}
.dd-right{left:auto;right:0;transform:translateX(0) translateY(-8px)}
.has-menu.open .dd-right{transform:translateX(0) translateY(0)}

.hamb{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:11px;min-width:44px;min-height:44px;align-items:center;justify-content:center}
.hamb span{width:26px;height:2px;background:var(--ink);border-radius:2px;transition:.3s var(--ease)}

/* ---------- 6. MOBILE MENU ---------- */
.mobile-menu{
  position:fixed;inset:0 0 0 auto;width:min(400px,88vw);z-index:130;
  background:var(--green-deep);color:var(--ivory);
  transform:translateX(100%);transition:transform .4s var(--ease);
  display:flex;flex-direction:column;overflow-y:auto;
}
.mobile-menu.open{transform:none}
.mm-top{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line-light)}
/* drawer sits on green-deep and logo-light.png is already white */
.mm-top img{height:42px}
.mm-close{background:none;border:none;color:var(--ivory);font-size:1.9rem;line-height:1;cursor:pointer;min-width:44px;min-height:44px}
.mm-body{padding:10px 0;flex:1}
.mm-body a,.mm-body .mm-grp>button{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:15px 22px;min-height:56px;color:var(--ivory);
  font-family:'Fraunces',serif;font-size:1.2rem;font-weight:500;
  background:none;border:none;border-bottom:1px solid rgba(255,255,255,.08);cursor:pointer;text-align:left;
}
.mm-body a:hover,.mm-body .mm-grp>button:hover{background:rgba(255,255,255,.06)}
.mm-grp>button .caret{width:14px;height:14px;stroke:var(--brass-bright);fill:none;stroke-width:2.4;transition:transform .3s}
.mm-grp.open>button .caret{transform:rotate(180deg)}
.mm-sub{display:none;background:rgba(0,0,0,.22)}
.mm-grp.open .mm-sub{display:block}
.mm-sub a{font-family:'Archivo',sans-serif;font-size:.95rem;padding-left:38px;min-height:50px;color:rgba(250,247,240,.82)}
.mm-foot{padding:20px 22px 32px;border-top:1px solid var(--line-light);display:grid;gap:12px}
.mm-foot .tel{font-family:'Archivo Narrow',sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;color:rgba(250,247,240,.6);text-align:center}
.mm-foot .tel a{color:var(--brass-bright);font-weight:700}
.scrim{position:fixed;inset:0;background:rgba(13,26,20,.55);z-index:120;opacity:0;visibility:hidden;transition:.35s}
.scrim.open{opacity:1;visibility:visible}

/* ---------- 7. PAGE HERO ---------- */
/* One banner for every page. The photograph is a wide, shallow strip (2880x557)
   already darkened at its edges, so the scrim here is lighter than a full-bleed
   hero would need — enough to hold the title at AA, not so much that the houses
   and palms disappear behind it. */
.phero{
  position:relative;min-height:270px;display:flex;align-items:flex-end;
  background:var(--brand-deep);overflow:hidden;
}
.phero-bg{position:absolute;inset:0;z-index:0}
/* <picture> is inline by default, so it would not fill the absolute box and the
   image inside it would collapse against the text baseline. */
.phero-bg picture{display:block;width:100%;height:100%}
.phero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 46%}
.phero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to right,rgba(9,32,49,.78) 0%,rgba(9,32,49,.5) 52%,rgba(9,32,49,.24) 100%),
             linear-gradient(to top,rgba(9,32,49,.66) 0%,rgba(9,32,49,.05) 62%);
}
/* .phero is a flex row so the content bottom-aligns. Without width:100% the
   wrap is a flex item and shrinks to its own text, which centred the title and
   put it at a different x on every page — the longer the heading, the further
   left it started. */
.phero .wrap{position:relative;z-index:2;width:100%;padding-top:52px;padding-bottom:52px}
.phero h1{font-size:clamp(2.1rem,5vw,3.6rem);color:var(--ivory);margin:14px 0 10px}
.phero p{color:rgba(250,247,240,.82);max-width:56ch;font-size:1.02rem}
.phero .phero-act{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}

/* portal compact hero — no photo, data first */

/* breadcrumb */
.crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;
  font-family:'Archivo Narrow',sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;font-weight:700}
.crumb li{display:flex;align-items:center;gap:8px;color:var(--mut)}
.crumb li::after{content:"/";color:var(--line-2)}
.crumb li:last-child::after{display:none}
.crumb a{color:var(--brass-ink)}
.crumb a:hover{color:var(--green)}
.crumb [aria-current]{color:var(--mut)}
.phero .crumb li{color:rgba(250,247,240,.6)}
.phero .crumb a{color:var(--brass-bright)}
.phero .crumb a:hover{color:var(--ivory)}
.phero .crumb li::after{color:rgba(255,255,255,.3)}

/* ---------- 8. CARDS & GRIDS ---------- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
/* two-column splits — always collapse below lg.
   Use these instead of inline grid-template-columns, which media queries cannot override. */
.split{display:grid;gap:clamp(30px,4vw,52px);align-items:start}
.split-1-2{grid-template-columns:minmax(0,1fr) minmax(0,2.6fr)}   /* rail + content   */
.split-2-1{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}     /* article + aside  */
.split-3-2{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}   /* prose + facts    */
.split-even{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}  /* details + form   */
.sticky-side{position:sticky;top:calc(var(--hdr-h) + 20px)}
@media(max-width:1023px){
  .split,.split-1-2,.split-2-1,.split-3-2,.split-even{grid-template-columns:1fr}
  .sticky-side{position:static}
}

.card{
  background:var(--white);border:1px solid var(--line);border-radius:18px;padding:26px;
  box-shadow:var(--e1);transition:transform .45s var(--ease),box-shadow .45s,border-color .45s;
}
.card.hov:hover{transform:translateY(-5px);box-shadow:var(--e2);border-color:transparent}
.card h3{font-size:1.28rem;color:var(--green);margin-bottom:7px}
.card p{font-size:.93rem;color:var(--ink-2)}
.card .ic{
  width:48px;height:48px;border-radius:13px;background:var(--sand);
  display:grid;place-items:center;margin-bottom:16px;flex:none;
}
.card .ic svg{width:22px;height:22px;stroke:var(--green);fill:none;stroke-width:1.7}
.card.hov:hover .ic{background:var(--green)}
.card.hov:hover .ic svg{stroke:var(--brass-bright)}

/* stat / fact panel */
.facts{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:8px 24px;box-shadow:var(--e1)}
.facts dl{display:grid}
.facts div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:15px 0;border-bottom:1px solid var(--line)}
.facts div:last-child{border-bottom:none}
.facts dt{font-family:'Archivo Narrow',sans-serif;text-transform:uppercase;letter-spacing:.13em;font-size:.68rem;font-weight:700;color:var(--mut)}
.facts dd{font-family:'Fraunces',serif;font-size:1.18rem;color:var(--green);text-align:right;font-variant-numeric:tabular-nums}

/* ---------- 9. LISTROW — documents, contacts, resources ---------- */
.rows{display:grid;gap:10px}
.row{
  display:flex;align-items:center;gap:16px;
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  padding:16px 20px;min-height:72px;
  transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;
  position:relative;
}
.row:hover{transform:translateX(4px);box-shadow:var(--e1);border-color:var(--brass)}
.row .ic{
  width:46px;height:46px;border-radius:12px;background:var(--sand);
  display:grid;place-items:center;flex:none;transition:background .35s;
}
.row .ic svg{width:21px;height:21px;stroke:var(--green);fill:none;stroke-width:1.7;transition:stroke .35s}
.row:hover .ic{background:var(--green)}
.row:hover .ic svg{stroke:var(--brass-bright)}
.row .rb{flex:1;min-width:0}
.row .rt{font-weight:600;font-size:.98rem;color:var(--ink);line-height:1.35}
.row .rm{
  font-family:'Archivo Narrow',sans-serif;font-size:.78rem;color:var(--mut);
  margin-top:3px;display:flex;flex-wrap:wrap;gap:5px 12px;font-variant-numeric:tabular-nums;
}
.row .rm a{color:var(--brass-ink);border-bottom:1px solid rgba(122,96,41,.35)}
.row .rm a:hover{color:var(--green)}
.row .ra{flex:none;display:flex;align-items:center;gap:10px}
/* stretched link: whole row is one target */
.row .stretch::before{content:"";position:absolute;inset:0;z-index:1;border-radius:14px}
.row .ra .btn{position:relative;z-index:2}

/* ---------- 10. CHIPS & STATUS ---------- */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Archivo Narrow',sans-serif;text-transform:uppercase;letter-spacing:.12em;
  font-size:.66rem;font-weight:700;padding:5px 11px;border-radius:50px;
  background:var(--sand);color:var(--ink-2);white-space:nowrap;
}
.chip.new{background:var(--brass);color:#231a06}
.chip.green{background:var(--green);color:var(--ivory)}
.chip.line{background:none;border:1px solid var(--line-2);color:var(--mut)}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.65}
.chip.no-dot::before{display:none}
.chip.ok{background:rgba(63,125,85,.14);color:#2c5c3d}
.chip.warn{background:rgba(168,118,42,.16);color:#7d570f}
.chip.crit{background:rgba(164,69,58,.14);color:#8a3128}
.chips{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- 11. FILTER PILLS (tablist) ---------- */
.pills{
  display:flex;gap:9px;overflow-x:auto;padding:4px 0 10px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.pills::-webkit-scrollbar{display:none}
.pill{
  font-family:'Archivo Narrow',sans-serif;text-transform:uppercase;letter-spacing:.12em;
  font-size:.72rem;font-weight:700;white-space:nowrap;
  padding:10px 20px;min-height:40px;border-radius:50px;
  border:1px solid var(--line-2);background:none;color:var(--mut);cursor:pointer;
  transition:.3s var(--ease);
}
.pill:hover{border-color:var(--brass);color:var(--green)}
.pill[aria-selected="true"],.pill.on{background:var(--green);color:var(--ivory);border-color:transparent}

/* ---------- 12. ACCORDION ---------- */
.acc{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--white);box-shadow:var(--e1)}
.acc details{border-bottom:1px solid var(--line)}
.acc details:last-child{border-bottom:none}
.acc summary{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:19px 24px;min-height:60px;cursor:pointer;list-style:none;
  font-weight:600;font-size:1rem;color:var(--ink);transition:background .25s,color .25s;
}
/* Review 8.2: the committee found the FAQ too small and preferred the prior
   proportions. Scoped to the FAQ page — the same accordion is used elsewhere
   and should keep its current size. */
.faq-lg .acc summary{font-size:1.12rem;padding:22px 26px;min-height:68px}
.faq-lg .acc .ab{font-size:1.04rem;line-height:1.75;padding:0 26px 26px}
.faq-lg .acc .ab li{margin-bottom:9px}
.faq-lg .acc-group-head{font-size:1.55rem}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{background:var(--ivory);color:var(--green)}
.acc summary .pm{
  flex:none;width:26px;height:26px;border-radius:50%;background:var(--sand);
  display:grid;place-items:center;color:var(--brass-ink);font-size:1.15rem;line-height:1;transition:.3s var(--ease);
}
.acc details[open]>summary{background:var(--ivory);color:var(--green)}
.acc details[open]>summary .pm{background:var(--green);color:var(--brass-bright);transform:rotate(180deg)}
.acc details[open]>summary .pm::after{content:"\2013"}
.acc summary .pm::after{content:"+"}
.acc .ab{padding:0 24px 22px;color:var(--ink-2);font-size:.94rem;max-width:72ch}
.acc .ab ul{margin:10px 0 0 1.1em}
.acc .ab li{margin-bottom:6px}
.acc .ab .rows{margin-top:16px}
.acc-group-head{
  background:var(--green);color:var(--ivory);border-radius:12px;
  padding:13px 24px;margin:34px 0 14px;
  font-family:'Archivo Narrow',sans-serif;text-transform:uppercase;letter-spacing:.18em;
  font-size:.78rem;font-weight:700;
}
.acc-group-head:first-child{margin-top:0}

/* ---------- 13. FORMS ---------- */
.form{display:grid;gap:20px;max-width:560px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{display:grid;gap:7px}
.fld label{
  font-family:'Archivo Narrow',sans-serif;text-transform:uppercase;letter-spacing:.13em;
  font-size:.7rem;font-weight:700;color:var(--ink);
}
.fld label .req{color:var(--crit);margin-left:3px}
.fld input,.fld textarea,.fld select{
  width:100%;font-family:'Archivo',sans-serif;font-size:1rem;color:var(--ink);
  background:var(--white);border:1.5px solid var(--line);border-radius:12px;
  padding:13px 15px;min-height:50px;transition:border-color .25s,box-shadow .25s;
}
.fld textarea{min-height:120px;resize:vertical}
.fld select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2365796d' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;background-size:16px;padding-right:44px}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(31,61,47,.12)}
.fld .hint{font-size:.8rem;color:var(--mut)}
.fld.err input,.fld.err textarea,.fld.err select{border-color:var(--crit)}
.fld.err .hint{color:var(--crit);font-weight:600}
.check{display:flex;align-items:flex-start;gap:11px;font-size:.88rem;color:var(--ink-2);cursor:pointer;line-height:1.5}
.check input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--green)}
.check a{color:var(--brass-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.check.err{color:var(--crit)}
.check.err input{outline:2px solid var(--crit);outline-offset:2px;border-radius:3px}
.radio-opt.err{border-color:var(--crit)}
.radio-set{display:grid;gap:12px}
.radio-opt{
  display:flex;align-items:flex-start;gap:13px;padding:16px 18px;cursor:pointer;
  border:1.5px solid var(--line);border-radius:14px;background:var(--white);transition:.25s;
}
.radio-opt:hover{border-color:var(--brass)}
.radio-opt input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--green)}
.radio-opt b{display:block;font-size:.95rem;color:var(--ink);font-weight:600}
.radio-opt span{font-size:.85rem;color:var(--mut)}
.radio-opt:has(input:checked){border-color:var(--green);background:var(--ivory)}
.form-note{
  background:var(--sand);border-left:3px solid var(--brass);border-radius:0 12px 12px 0;
  padding:15px 20px;font-size:.88rem;color:var(--ink-2);
}
.form-note b{color:var(--ink)}
.err-summary{
  border:1.5px solid var(--crit);background:rgba(164,69,58,.06);border-radius:12px;padding:16px 20px;
}
.err-summary h3{font-size:1rem;color:var(--crit);font-family:'Archivo',sans-serif;font-weight:700;margin-bottom:8px}
.err-summary a{color:var(--crit);text-decoration:underline;font-size:.88rem}
.ok-panel{
  background:var(--white);border:1px solid var(--line);border-left:4px solid var(--ok);
  border-radius:0 18px 18px 0;padding:30px 34px;box-shadow:var(--e1);
}
.ok-panel h3{font-size:1.4rem;color:var(--green);margin-bottom:8px}

/* search field */
.search{position:relative;max-width:520px}
.search svg{position:absolute;left:17px;top:50%;transform:translateY(-50%);width:19px;height:19px;stroke:var(--mut);fill:none;stroke-width:2}
.search input{
  width:100%;font-family:'Archivo',sans-serif;font-size:1rem;
  padding:14px 18px 14px 48px;min-height:52px;
  border:1.5px solid var(--line);border-radius:50px;background:var(--white);color:var(--ink);
}
.search input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(31,61,47,.12)}

/* ---------- 14. TABLES ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--white);box-shadow:var(--e1)}
table.dt{border-collapse:collapse;width:100%;min-width:560px}
table.dt th{
  font-family:'Archivo Narrow',sans-serif;text-transform:uppercase;letter-spacing:.14em;
  font-size:.7rem;font-weight:700;color:var(--mut);text-align:left;
  padding:15px 20px;background:var(--sand);border-bottom:1px solid var(--line);white-space:nowrap;
}
table.dt th button{background:none;border:none;cursor:pointer;font:inherit;color:inherit;display:inline-flex;align-items:center;gap:6px}
table.dt th svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.4;opacity:.5}
table.dt td{padding:16px 20px;border-bottom:1px solid var(--line);color:var(--ink-2);font-size:.94rem;vertical-align:middle}
table.dt tbody tr:last-child td{border-bottom:none}
table.dt tbody tr{transition:background .2s}
table.dt tbody tr:hover{background:var(--ivory)}
table.dt td b{color:var(--ink);font-weight:600}
table.dt td.num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* pagination */
.pager{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:22px}
.pager .count{font-family:'Archivo Narrow',sans-serif;font-size:.8rem;color:var(--mut);font-variant-numeric:tabular-nums}
.pager ul{display:flex;gap:6px;list-style:none;align-items:center;flex-wrap:wrap}
.pager a,.pager span.gap{
  display:grid;place-items:center;min-width:42px;height:42px;padding:0 12px;
  border-radius:11px;border:1px solid var(--line);background:var(--white);
  font-size:.88rem;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums;transition:.25s;
}
.pager a:hover{border-color:var(--brass);color:var(--green)}
.pager a[aria-current="page"]{background:var(--green);color:var(--ivory);border-color:transparent}
.pager span.gap{border:none;background:none;min-width:24px;color:var(--mut)}

/* ---------- 15. GALLERY ---------- */
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.album{
  display:block;border-radius:18px;overflow:hidden;background:var(--white);
  border:1px solid var(--line);box-shadow:var(--e1);
  transition:transform .45s var(--ease),box-shadow .45s;
}
.album:hover{transform:translateY(-6px);box-shadow:var(--e2)}
.album .ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sand)}
.album .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.album:hover .ph img{transform:scale(1.06)}
.album .ph .cnt{
  position:absolute;bottom:12px;right:12px;background:rgba(9,25,38,.82);color:var(--ivory);
  border-radius:50px;padding:5px 13px;font-family:'Archivo Narrow',sans-serif;
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;backdrop-filter:blur(6px);
}
.album .mt{padding:18px 20px 20px}
.album h3{font-size:1.15rem;color:var(--green);margin-bottom:4px}
.album .dt{font-family:'Archivo Narrow',sans-serif;font-size:.76rem;color:var(--mut);text-transform:uppercase;letter-spacing:.12em}

/* masonry-ish photo grid + lightbox */
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.photos button{
  border:none;padding:0;background:var(--sand);cursor:pointer;border-radius:14px;overflow:hidden;
  aspect-ratio:4/3;display:block;
}
.photos img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.photos button:hover img{transform:scale(1.07)}
.lb{position:fixed;inset:0;z-index:150;background:rgba(10,20,15,.95);display:none;place-items:center}
.lb.open{display:grid}
.lb img{max-width:92vw;max-height:82vh;border-radius:12px}
.lb .lb-close,.lb .lb-nav{
  position:absolute;background:rgba(255,255,255,.1);border:1px solid var(--line-light);
  color:var(--ivory);border-radius:50%;width:52px;height:52px;display:grid;place-items:center;cursor:pointer;
  font-size:1.5rem;line-height:1;transition:.25s;
}
.lb .lb-close:hover,.lb .lb-nav:hover{background:var(--brass);border-color:transparent;color:#231a06}
.lb .lb-close{top:24px;right:24px}
.lb .prev{left:24px;top:50%;transform:translateY(-50%)}
.lb .next{right:24px;top:50%;transform:translateY(-50%)}
.lb .lb-cap{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:rgba(250,247,240,.8);font-size:.9rem;padding:0 24px}

/* ---------- 16. CTA BAND ---------- */
.cta-band{background:var(--green-deep);color:var(--ivory);text-align:center;position:relative;overflow:hidden;padding:clamp(52px,6vw,88px) 0}
.cta-band::before{content:"";position:absolute;left:50%;top:50%;width:640px;height:640px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(176,141,79,.13),transparent 62%);pointer-events:none}
.cta-band .wrap{position:relative;z-index:2}
.cta-band h2{font-size:clamp(1.8rem,4.2vw,2.9rem);max-width:700px;margin:16px auto 14px;color:var(--ivory)}
.cta-band p{color:rgba(250,247,240,.78);max-width:520px;margin:0 auto 28px}
.cta-band .acts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- 17. CONTACT CARD (glass, on dark) ---------- */
.con-card{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-radius:22px;padding:28px 32px;transition:.5s var(--ease);
}
.con-card:hover{transform:translateY(-5px);border-color:rgba(203,169,104,.35)}
.con-card .ic{width:48px;height:48px;border-radius:13px;background:linear-gradient(135deg,rgba(176,141,79,.3),rgba(176,141,79,.1));border:1px solid rgba(203,169,104,.3);display:grid;place-items:center;margin-bottom:16px}
.con-card .ic svg{width:22px;height:22px;stroke:var(--brass-bright);fill:none;stroke-width:1.7}
.con-card h3{font-size:1.32rem;color:var(--ivory);margin-bottom:5px}
.con-card .who{font-weight:700;color:rgba(250,247,240,.6);margin-bottom:14px;font-size:.9rem}
.con-card .crow{display:flex;align-items:center;gap:10px;color:rgba(250,247,240,.78);font-size:.92rem;margin-bottom:9px}
.con-card .crow svg{width:15px;height:15px;stroke:var(--brass-bright);fill:none;stroke-width:2;flex:none}
.con-card .crow a{color:rgba(250,247,240,.9);border-bottom:1px solid rgba(203,169,104,.35);padding-bottom:1px}
.con-card .crow a:hover{color:var(--brass-bright);border-bottom-color:var(--brass-bright)}
.con-card .hours{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);font-size:.84rem;color:rgba(250,247,240,.5)}
.con-card .hours b{color:rgba(250,247,240,.75)}

/* light contact card */
.mgmt{background:var(--white);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--e1)}
.mgmt .hd{background:var(--green);color:var(--ivory);padding:15px 26px;font-family:'Fraunces',serif;font-size:1.12rem}
.mgmt .bd{padding:24px 26px;display:grid;gap:18px}
.mgmt dl{display:grid;gap:9px}
.mgmt dl div{display:flex;gap:12px;align-items:baseline}
.mgmt dt{font-family:'Archivo Narrow',sans-serif;text-transform:uppercase;letter-spacing:.13em;font-size:.68rem;font-weight:700;color:var(--mut);min-width:88px}
.mgmt dd{font-size:.94rem;color:var(--ink-2)}
.mgmt dd a{color:var(--brass-ink);border-bottom:1px solid rgba(122,96,41,.35)}
.mgmt dd a:hover{color:var(--green)}

/* ---------- 18. SECTION BANDS ---------- */
.band-sand{background:var(--sand)}
.band-green{background:var(--green);color:var(--ivory)}
.band-deep{background:var(--green-deep);color:var(--ivory)}
.band-white{background:var(--white)}
.on-dark h1,.on-dark h2,.on-dark h3{color:var(--ivory)}
.on-dark p{color:rgba(250,247,240,.78)}

/* alternating media block */
.media-block{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:center}
.media-block.flip .mb-fig{order:2}
.mb-fig{border-radius:20px;overflow:hidden;aspect-ratio:4/3;box-shadow:var(--e2);border:4px solid var(--white)}
.on-dark .mb-fig{border-color:rgba(255,255,255,.1)}
.mb-fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.mb-fig:hover img{transform:scale(1.04)}
.mb-body h2{font-size:clamp(1.7rem,3.6vw,2.6rem);color:var(--green);margin:14px 0 14px}
.on-dark .mb-body h2{color:var(--ivory)}
.mb-body p{color:var(--ink-2);margin-bottom:14px;max-width:52ch}
.on-dark .mb-body p{color:rgba(250,247,240,.8)}

/* numbered process steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s}
.step{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:26px 22px;position:relative;box-shadow:var(--e1)}
.step::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:'Fraunces',serif;font-size:2.2rem;color:var(--brass);line-height:1;display:block;margin-bottom:12px;
}
.step h3{font-size:1.08rem;color:var(--green);margin-bottom:6px}
.step p{font-size:.88rem;color:var(--ink-2)}
.step .when{font-family:'Archivo Narrow',sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;color:var(--mut);font-weight:700;margin-top:10px;display:block}

/* empty state */
.empty{
  text-align:center;padding:56px 26px;border:1.5px dashed var(--line-2);border-radius:18px;background:var(--white);
}
.empty .ic{width:56px;height:56px;border-radius:16px;background:var(--sand);display:grid;place-items:center;margin:0 auto 16px}
.empty .ic svg{width:26px;height:26px;stroke:var(--mut);fill:none;stroke-width:1.6}
.empty h3{font-size:1.2rem;color:var(--green);margin-bottom:6px}
.empty p{font-size:.92rem;color:var(--mut);max-width:44ch;margin:0 auto 18px}

/* ---------- 19. PORTAL SHELL ---------- */
.portal-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.portal-grid.wide-first{grid-template-columns:1.7fr 1fr}
.pcard{background:var(--white);border:1px solid var(--line);border-radius:18px;box-shadow:var(--e1);overflow:hidden;display:flex;flex-direction:column}
.pcard .ph{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 24px;border-bottom:1px solid var(--line)}
.pcard .ph h2{font-size:1.15rem;color:var(--green)}
.pcard .pb{padding:20px 24px;flex:1}
.pcard .pf{padding:14px 24px;border-top:1px solid var(--line);background:var(--ivory)}

/* event row */
.ev-row{display:flex;gap:18px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.ev-row:last-child{border-bottom:none}
.ev-row .date{
  flex:none;width:62px;text-align:center;border-radius:12px;background:var(--sand);padding:9px 0;
}
.ev-row .date .mo{font-family:'Archivo Narrow',sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:.64rem;color:var(--brass-ink);font-weight:700}
.ev-row .date .dy{font-family:'Fraunces',serif;font-size:1.6rem;color:var(--green);line-height:1.05;font-weight:600}
.ev-row .eb{flex:1;min-width:0}
.ev-row .eb h3{font-size:1.02rem;color:var(--ink);font-family:'Archivo',sans-serif;font-weight:600;margin-bottom:2px}
.ev-row .eb .meta{font-family:'Archivo Narrow',sans-serif;font-size:.76rem;color:var(--mut);display:flex;gap:10px;flex-wrap:wrap}

/* masked secret (gate codes) */
.secret{display:grid;gap:11px}
.secret .sr-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.secret .sr-row:last-child{border-bottom:none}
.secret .k{font-family:'Archivo Narrow',sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;font-weight:700;color:var(--mut)}
.secret .v{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1rem;color:var(--green);font-weight:600;letter-spacing:.06em}
.secret[data-hidden="true"] .v{filter:blur(7px);user-select:none}

/* category rail (records) */
.rail-cat{background:var(--green);border-radius:18px;padding:20px 16px;color:var(--ivory);position:sticky;top:calc(var(--hdr-h) + 16px)}
.rail-cat h2{font-size:1.15rem;color:var(--ivory);padding:0 10px 14px;border-bottom:1px solid var(--line-light);margin-bottom:10px}
.rail-cat ul{list-style:none;display:grid;gap:2px}
.rail-cat a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 12px;border-radius:10px;font-size:.88rem;font-weight:500;
  color:rgba(250,247,240,.82);transition:.25s;
}
.rail-cat a:hover{background:rgba(255,255,255,.09);color:var(--ivory)}
.rail-cat a.on{background:var(--ivory);color:var(--green);font-weight:600}
.rail-cat a .n{font-family:'Archivo Narrow',sans-serif;font-size:.72rem;opacity:.65;font-variant-numeric:tabular-nums}
.rail-cat .sub{margin-left:12px;padding-left:10px;border-left:1px solid var(--line-light)}
.rail-cat .sub a{font-size:.83rem;padding:9px 12px}

/* calendar month grid */
.cal{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--white);box-shadow:var(--e1)}
.cal .dow{display:grid;grid-template-columns:repeat(7,1fr);background:var(--sand)}
.cal .dow span{
  padding:11px 8px;text-align:center;font-family:'Archivo Narrow',sans-serif;
  text-transform:uppercase;letter-spacing:.13em;font-size:.66rem;font-weight:700;color:var(--mut);
}
.cal .weeks{display:grid;grid-template-columns:repeat(7,1fr)}
.cal .day{min-height:118px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px;display:flex;flex-direction:column;gap:4px}
.cal .day:nth-child(7n){border-right:none}
.cal .day.out{background:var(--ivory);opacity:.5}
.cal .day .n{font-family:'Archivo Narrow',sans-serif;font-size:.78rem;font-weight:700;color:var(--mut);font-variant-numeric:tabular-nums}
.cal .day.today .n{background:var(--brass);color:#231a06;border-radius:50%;width:24px;height:24px;display:grid;place-items:center}
.cal .ce{
  font-size:.72rem;padding:3px 7px;border-radius:6px;background:var(--sand);color:var(--ink-2);
  display:flex;align-items:center;gap:5px;cursor:pointer;border:none;text-align:left;width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Archivo',sans-serif;
}
.ce::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;background:var(--mut)}
.ce.board::before{background:var(--green)}
.ce.social::before{background:var(--brass)}
.ce.maint::before{background:var(--mut)}
.ce.mgmt::before{background:var(--green-soft)}
.ce:hover{background:var(--green);color:var(--ivory)}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-family:'Archivo Narrow',sans-serif;font-size:.74rem;color:var(--mut);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.legend span{display:flex;align-items:center;gap:7px}
.legend i{width:9px;height:9px;border-radius:50%;display:block}

/* timeline */
.tl{display:grid;gap:0;position:relative;padding-left:26px}
.tl::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--line)}
.tl li{list-style:none;position:relative;padding:0 0 22px}
.tl li::before{content:"";position:absolute;left:-24px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--sand);border:2px solid var(--line-2)}
.tl li.done::before{background:var(--ok);border-color:var(--ok)}
.tl li.now::before{background:var(--brass);border-color:var(--brass)}
.tl b{display:block;font-size:.95rem;color:var(--ink)}
.tl span{font-family:'Archivo Narrow',sans-serif;font-size:.76rem;color:var(--mut)}

/* ---------- 20. FOOTER ---------- */
footer.site{background:var(--green-deep);color:rgba(250,247,240,.7);padding:56px 0 26px;border-top:1px solid var(--line-light)}
.foot-band{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-bottom:38px;margin-bottom:38px;border-bottom:1px solid var(--line-light);
}
.foot-band h2{font-size:clamp(1.5rem,3vw,2.1rem);color:var(--ivory);max-width:15ch}
.foot-band .fb-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.foot-band input{
  background:rgba(255,255,255,.08);border:1px solid var(--line-light);border-radius:50px;
  padding:14px 22px;min-height:48px;min-width:260px;color:var(--ivory);font-family:'Archivo',sans-serif;font-size:.9rem;
}
.foot-band input::placeholder{color:rgba(250,247,240,.45)}
.foot-band input:focus{outline:none;border-color:var(--brass-bright)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:38px;margin-bottom:40px}
footer.site h3{
  color:var(--ivory);font-family:'Archivo Narrow',sans-serif;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.16em;margin-bottom:16px;font-weight:700;
}
footer.site ul{list-style:none;display:grid;gap:11px}
footer.site ul a{font-size:.9rem;transition:color .25s}
footer.site ul a:hover{color:var(--brass-bright)}
/* logo-light.png is already white artwork — no filter needed */
.foot-brand img{height:58px;margin-bottom:16px}
.foot-brand p{font-size:.9rem;max-width:300px;line-height:1.6}
.foot-brand .est{font-family:'Archivo Narrow',sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;color:var(--brass-bright);font-weight:700;margin-top:14px}
.foot-mgmt p{font-size:.88rem;line-height:1.75}
.foot-mgmt a{color:rgba(250,247,240,.85);border-bottom:1px solid rgba(203,169,104,.3)}
.foot-mgmt a:hover{color:var(--brass-bright)}
.foot-bottom{
  border-top:1px solid var(--line-light);padding-top:22px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  font-size:.8rem;color:rgba(250,247,240,.5);
}
/* Matched to beat `footer.site ul{display:grid}` above (0,1,2): the bottom
   bar's links are a row, and the shorter `.foot-bottom ul` selector (0,1,1)
   lost to it, so Terms/Privacy/Accessibility stacked. Specificity, not
   !important. */
footer.site .foot-bottom ul{display:flex;gap:20px;list-style:none}
.foot-bottom a:hover{color:var(--brass-bright)}

/* ---------- 21. REVEAL ---------- */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
/* portal pages never animate data in */
.portal .reveal{opacity:1;transform:none;transition:none}

/* ---------- 22. RESPONSIVE (Tailwind breakpoints) ---------- */
/* the signed-in bar carries 11 items — it needs the drawer sooner than the
   public bar, which is comfortable down to 1024px */
@media(max-width:1279px){
  body.is-signed-in .nav-main{display:none}
  body.is-signed-in .hamb{display:flex}
}
@media(max-width:1023px){          /* < lg — collapse nav */
  .nav-main,.nav-cta .nav-login,.nav-cta .btn,.acct,.acct-wrap{display:none}
  .hamb{display:flex}
  .g4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .portal-grid,.portal-grid.wide-first{grid-template-columns:1fr}
  .rail-cat{position:static}
}
@media(max-width:900px){
  .g3,.gal-grid,.photos{grid-template-columns:repeat(2,1fr)}
  .media-block{grid-template-columns:1fr}
  .media-block.flip .mb-fig{order:0}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:767px){           /* < md */
  .wrap{padding:0 20px}
  .news-teaser{grid-template-columns:1fr!important}
  .g2,.g3,.g4,.gal-grid,.photos{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .phero{min-height:220px}
  .phero .wrap{padding-top:34px;padding-bottom:34px}
  .row{flex-wrap:wrap;padding:15px 17px}
  .row .ra{width:100%;margin-top:4px}
  .row .ra .btn{width:100%}
  .cta-band .acts .btn,.phero-act .btn{width:100%}
  .foot-band input{min-width:0;width:100%}
  .foot-band .fb-form{width:100%}
  .foot-band .fb-form .btn{width:100%}
  .lb .prev{left:12px}.lb .next{right:12px}
  .lb .lb-close{top:14px;right:14px}
}
@media(max-width:639px){           /* < sm */
  .wrap{padding:0 16px}
  .foot-grid{grid-template-columns:1fr;gap:30px}
  .foot-bottom{flex-direction:column;align-items:flex-start}
  .btn{width:100%}
  .nav-cta .btn,.pager a,.pill,.acc summary .pm,.row .ra .btn.sm{width:auto}
  .mgmt dl div{flex-direction:column;gap:2px}
}

/* mobile card-ised tables */
@media(max-width:767px){
  table.dt.stack{min-width:0}
  table.dt.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  table.dt.stack tr{display:block;border:1px solid var(--line);border-radius:14px;margin-bottom:10px;padding:6px 0}
  table.dt.stack td{display:flex;justify-content:space-between;gap:16px;border-bottom:none;padding:8px 18px}
  table.dt.stack td::before{
    content:attr(data-l);font-family:'Archivo Narrow',sans-serif;text-transform:uppercase;
    letter-spacing:.13em;font-size:.66rem;font-weight:700;color:var(--mut);flex:none;
  }
  .cal .weeks{grid-template-columns:1fr}
  .cal .day{min-height:0;border-right:none}
}

/* ---------- 23. MOTION PREFERENCES & PRINT ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
}
@media print{
  header#hdr,.mobile-menu,.scrim,footer.site,.cta-band,.hamb,.phero-bg{display:none!important}
  body{background:#fff;font-size:11pt}
  .acc details{border:1px solid #ccc}
  .acc .ab{display:block!important}
  .phero{min-height:0;background:none;color:#000}
  .phero h1,.phero p{color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

/* ---------- account bar (signed-in header) ---------- */
/* Both buttons sit inside the authbar span, so a gap on .nav-cta never applied
   between them - it only spaced the spans. Make the spans the flex row. */
.nav-cta [data-authbar-out],
.nav-cta [data-authbar-in]{display:flex;align-items:center;gap:14px}
.nav-cta [data-authbar-in][hidden]{display:none}
.nav-cta .btn.sm svg,.mm-foot .btn svg{flex:none}
.mm-foot [data-authbar-in]{gap:12px}
.mm-foot [data-authbar-in][hidden]{display:none}
.btn .l{white-space:nowrap}

/* ============================================================
   EVENTS CALENDAR — month grid + upcoming rail + detail modal.
   Ported from Preserve's events.html, in Magnolia's palette.
   ============================================================ */
.ev-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(250px,1fr);gap:32px;align-items:start}
@media(max-width:900px){.ev-layout{grid-template-columns:1fr}}

.cal-card{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:var(--e1)}
.cal-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.cal-top h2{font-size:clamp(1.35rem,2.4vw,1.9rem);margin:0;color:var(--green)}
.cal-nav{display:flex;align-items:center;gap:8px}
.cal-btn{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line-2);background:var(--white);
  color:var(--green);display:grid;place-items:center;cursor:pointer;transition:.25s var(--ease)}
.cal-btn:hover{background:var(--green);color:var(--ivory);border-color:transparent}
.cal-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4}
.cal-today{font-family:'Archivo Narrow',sans-serif;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;padding:10px 18px;border-radius:100px;border:1.5px solid var(--line-2);
  background:var(--white);color:var(--green);cursor:pointer;transition:.25s;min-height:40px}
.cal-today:hover{border-color:var(--brass);color:var(--brass-ink)}

/* repeat(7,minmax(0,1fr)), not repeat(7,1fr): the event chips give each day a
   min-content width, and a bare fr track will not shrink below it, so the last
   columns pushed outside the card. */
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal-dow{text-align:center;font-family:'Archivo Narrow',sans-serif;font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut);font-weight:700;padding:6px 0}
.cal-day{min-height:138px;border:1px solid var(--line);border-radius:12px;padding:7px 8px;
  background:var(--white);position:relative;transition:.2s;display:flex;flex-direction:column;gap:4px}
.cal-day .daynum{font-family:'Archivo Narrow',sans-serif;font-size:.82rem;color:var(--ink);font-weight:700}
.cal-day.other{background:var(--ivory);opacity:.55}
.cal-day.other .daynum{color:var(--mut)}
.cal-day.today{border-color:var(--brass);box-shadow:0 0 0 2px rgba(176,141,79,.22)}
.cal-day.today .daynum{color:var(--brass-ink)}
.cal-day.has-event{cursor:pointer}
.cal-day.has-event:hover{transform:translateY(-2px);border-color:var(--green);box-shadow:var(--e1)}
.cal-event{font-size:.66rem;line-height:1.25;padding:3px 6px;border-radius:6px;
  background:rgba(31,61,47,.09);color:var(--green);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.cal-event.more{background:none;color:var(--mut);padding:2px 4px}
@media(max-width:560px){
  .cal-day{min-height:78px}
  .cal-event{display:none}
  .cal-day.has-event::after{content:"";position:absolute;bottom:7px;left:8px;width:7px;height:7px;
    border-radius:50%;background:var(--brass)}
}

/* upcoming-by-month rail */
.ebm-card{background:var(--green-deep);color:rgba(250,247,240,.85);border-radius:20px;padding:26px;
  position:relative;overflow:hidden}
.ebm-card::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;top:-140px;right:-120px;
  background:radial-gradient(circle,rgba(176,141,79,.18),transparent 65%);pointer-events:none}
.ebm-head{display:flex;align-items:center;gap:10px;margin-bottom:18px;position:relative;z-index:1}
.ebm-head h2{color:var(--ivory);margin:0;font-size:1.2rem}
.ebm-head svg{width:18px;height:18px;stroke:var(--brass-bright);fill:none;stroke-width:1.9;flex:none}
/* Upcoming / Recent toggle. A segmented control rather than two links: there
   are exactly two states and one is always on, which is what a segment means. */
.ebm-tabs{position:relative;z-index:1;display:flex;gap:4px;margin-bottom:16px;
  background:rgba(255,255,255,.07);border-radius:50px;padding:4px}
.ebm-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  min-height:38px;padding:8px 14px;border:0;border-radius:50px;cursor:pointer;
  background:transparent;color:rgba(250,247,240,.72);
  font-family:'Archivo',sans-serif;font-size:.84rem;font-weight:600;
  transition:background .18s ease,color .18s ease}
.ebm-tab:hover{background:rgba(255,255,255,.08);color:var(--ivory)}
.ebm-tab.active{background:linear-gradient(135deg,#c8a86e,#a8813f);color:#231a06}
.ebm-tab__n{font-family:'Archivo Narrow',sans-serif;font-size:.68rem;
  background:rgba(255,255,255,.16);color:inherit;border-radius:50px;padding:2px 7px;line-height:1.5}
.ebm-tab__n:empty{display:none}
.ebm-tab.active .ebm-tab__n{background:rgba(35,26,6,.2)}
.ebm-tab:focus-visible{outline:2px solid var(--brass-bright);outline-offset:2px}
.ebm-scroll{max-height:560px;overflow-y:auto;position:relative;z-index:1;padding-right:6px}
.ebm-month{font-family:'Archivo Narrow',sans-serif;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass-bright);margin:16px 0 10px;font-weight:700}
.ebm-event{display:flex;gap:14px;align-items:center;padding:12px;border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);margin-bottom:9px;
  cursor:pointer;transition:.2s;width:100%;text-align:left;font:inherit;color:inherit}
.ebm-event:hover{background:rgba(255,255,255,.1);transform:translateX(3px)}
.ebm-date{flex:none;width:52px;text-align:center;background:rgba(203,169,104,.16);border-radius:10px;padding:8px 0}
.ebm-date .d{font-family:'Fraunces',serif;font-size:1.3rem;color:var(--ivory);line-height:1}
.ebm-date .m{font-family:'Archivo Narrow',sans-serif;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brass-bright);margin-top:2px;font-weight:700}
.ebm-info{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.ebm-title{font-weight:600;color:var(--ivory);font-size:.94rem;line-height:1.3;overflow-wrap:anywhere}
.ebm-meta{font-size:.75rem;color:rgba(250,247,240,.6);line-height:1.4}
.ebm-cat{display:inline-block;margin-top:5px;font-family:'Archivo Narrow',sans-serif;font-size:.58rem;
  letter-spacing:.1em;text-transform:uppercase;padding:2px 9px;border-radius:100px;font-weight:700;
  background:rgba(203,169,104,.18);color:var(--brass-bright)}
.ebm-empty{color:rgba(250,247,240,.6);text-align:center;padding:26px 0;position:relative;z-index:1}
.ebm-empty svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.6;margin:0 auto 10px}

/* event detail modal */
.ev-backdrop{position:fixed;inset:0;background:rgba(13,26,20,.62);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;z-index:9000;padding:20px}
.ev-backdrop.active{display:flex}
.ev-modal{background:var(--white);border-radius:20px;max-width:460px;width:100%;overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7);position:relative}
.ev-modal-top{background:linear-gradient(135deg,var(--green-deep),var(--green-soft));padding:26px 28px;
  color:var(--ivory);display:flex;gap:18px;align-items:center}
.ev-bigdate{flex:none;width:70px;text-align:center;background:rgba(255,255,255,.12);border-radius:14px;padding:10px 0}
.ev-bigdate .d{font-family:'Fraunces',serif;font-size:2rem;line-height:1}
.ev-bigdate .m{font-family:'Archivo Narrow',sans-serif;font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass-bright);font-weight:700}
.ev-modal-top h2{color:var(--ivory);margin:0;font-size:1.25rem}
.ev-modal-top .cat{display:inline-block;margin-top:6px;font-family:'Archivo Narrow',sans-serif;font-size:.6rem;
  letter-spacing:.12em;text-transform:uppercase;padding:3px 10px;border-radius:100px;font-weight:700;
  background:rgba(203,169,104,.22);color:var(--brass-bright)}
.ev-modal-body{padding:22px 28px}
.ev-detail{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.ev-detail:last-child{border-bottom:none}
.ev-detail svg{width:17px;height:17px;stroke:var(--brass-ink);fill:none;stroke-width:1.9;flex:none;margin-top:3px}
.ev-detail .lbl{font-family:'Archivo Narrow',sans-serif;font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mut);font-weight:700}
.ev-detail .val{color:var(--ink);font-size:.94rem}
.ev-close{position:absolute;top:16px;right:18px;background:rgba(255,255,255,.16);border:none;color:var(--ivory);
  width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:1.2rem;line-height:1}
.ev-close:hover{background:rgba(255,255,255,.3)}

/* ============================================================
   BOARD & COMMITTEES — director cards
   The previous list rows read as a spreadsheet; these give each
   person a card with their role, term and remit.
   ============================================================ */
.ppl-group{margin-bottom:40px}
.ppl-group:last-child{margin-bottom:0}
.ppl-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:12px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.ppl-head h2{font-size:1.35rem;color:var(--green);margin:0}
.ppl-count{font-family:'Archivo Narrow',sans-serif;text-transform:uppercase;letter-spacing:.14em;
  font-size:.66rem;font-weight:700;color:var(--mut);white-space:nowrap}

.ppl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.ppl-card{position:relative;display:flex;gap:16px;align-items:flex-start;
  background:var(--white);border:1px solid var(--line);border-radius:16px;padding:22px 22px 20px;
  box-shadow:var(--e1);transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.ppl-card:hover{transform:translateY(-3px);box-shadow:var(--e2);border-color:var(--brass)}
/* the president / chair gets a brass edge so the leader reads at a glance */
.ppl-card.lead{border-left:3px solid var(--brass)}

.ppl-mono{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:var(--green);color:var(--brass-bright);
  font-family:'Archivo Narrow',sans-serif;font-weight:700;font-size:1rem;letter-spacing:.04em}
.ppl-card.lead .ppl-mono{background:var(--brass);color:#231a06}

.ppl-body{min-width:0;flex:1}
.ppl-body h3{font-size:1.1rem;color:var(--ink);margin:0 0 2px;font-family:'Fraunces',serif}
.ppl-role{font-family:'Archivo Narrow',sans-serif;text-transform:uppercase;letter-spacing:.14em;
  font-size:.68rem;font-weight:700;color:var(--brass-ink);margin:0 0 12px}
.ppl-meta{display:grid;gap:6px;margin:0 0 10px}
.ppl-meta div{display:flex;gap:10px;align-items:baseline}
.ppl-meta dt{font-family:'Archivo Narrow',sans-serif;text-transform:uppercase;letter-spacing:.12em;
  font-size:.62rem;font-weight:700;color:var(--mut);min-width:74px;flex:none}
.ppl-meta dd{margin:0;font-size:.88rem;color:var(--ink-2)}

.ppl-contact{position:absolute;top:18px;right:18px;width:34px;height:34px;border-radius:9px;
  display:grid;place-items:center;border:1px solid var(--line);color:var(--mut);
  background:var(--ivory);transition:.25s}
.ppl-contact svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.ppl-contact:hover{border-color:var(--brass);color:var(--green);background:var(--sand)}

@media(max-width:520px){
  .ppl-grid{grid-template-columns:1fr}
  .ppl-card{padding:18px}
  .ppl-mono{width:44px;height:44px;font-size:.9rem}
}

/* Committee cards. Only what the association publishes: name, chair, board
   liaison and members. */
.cmt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;
  align-items:start}
.cmt-card{background:var(--white);border:1px solid var(--line);border-radius:18px;
  overflow:hidden;box-shadow:var(--e1);display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.cmt-card:hover{transform:translateY(-4px);box-shadow:var(--e2);border-color:var(--brass)}
.cmt-head{position:relative;padding:20px 24px;background:linear-gradient(135deg,var(--green),var(--green-deep));
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.cmt-head::after{content:"";position:absolute;left:24px;right:24px;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--brass),transparent)}
.cmt-head h3{margin:0;font-family:'Fraunces',serif;font-weight:500;font-size:1.18rem;
  color:var(--ivory);line-height:1.25}
.cmt-count{flex:none;font-family:'Archivo Narrow',sans-serif;text-transform:uppercase;
  letter-spacing:.12em;font-size:.6rem;font-weight:700;color:var(--brass-bright);
  background:rgba(0,0,0,.25);padding:5px 10px;border-radius:100px;white-space:nowrap}
.cmt-body{padding:20px 24px 24px;display:grid;gap:18px}
.cmt-lead{display:grid;gap:12px}
.cmt-person{display:flex;align-items:center;gap:12px}
.cmt-mono{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:var(--sand);color:var(--green);font-family:'Archivo Narrow',sans-serif;
  font-weight:700;font-size:.82rem;letter-spacing:.03em}
.cmt-person:first-child .cmt-mono{background:var(--brass);color:#231a06}
.cmt-who{display:flex;flex-direction:column;min-width:0}
.cmt-who b{font-size:.95rem;color:var(--ink);font-weight:600;line-height:1.3}
.cmt-who span{font-family:'Archivo Narrow',sans-serif;text-transform:uppercase;
  letter-spacing:.12em;font-size:.6rem;font-weight:700;color:var(--brass-ink)}
.cmt-members{padding-top:16px;border-top:1px solid var(--line)}
.cmt-lbl{display:block;font-family:'Archivo Narrow',sans-serif;text-transform:uppercase;
  letter-spacing:.13em;font-size:.6rem;font-weight:700;color:var(--mut);margin-bottom:10px}
.cmt-chips{display:flex;flex-wrap:wrap;gap:7px}
.cmt-chip{font-size:.83rem;color:var(--ink-2);background:var(--ivory);
  border:1px solid var(--line);border-radius:100px;padding:5px 12px}
.cmt-cta{margin-top:32px;padding:26px 30px;border-radius:18px;background:var(--sand);
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.cmt-cta p{margin:0;max-width:60ch;font-size:.94rem;color:var(--ink-2)}
@media(max-width:520px){.cmt-grid{grid-template-columns:1fr}.cmt-cta{flex-direction:column;align-items:flex-start}}


/* ============================================================
   DOCUMENT PORTAL — two-pane records browser
   Same structure as Preserve's documents.html (category rail,
   sub-category tabs, document rows) in the Magnolia palette:
   green rail, brass active state.
   ============================================================ */
.docportal{display:grid;grid-template-columns:292px minmax(0,1fr);
  background:var(--white);border:1px solid var(--line);border-radius:22px;
  overflow:hidden;box-shadow:0 30px 70px -46px rgba(12,38,56,.55);min-height:560px}

/* rail */
.docportal__side{background:linear-gradient(180deg,var(--brand),var(--brand-deep));padding:26px 18px;color:var(--ivory)}
.docportal__side-label{font-family:'Archivo Narrow',sans-serif;font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(216,188,133,.85);padding:0 8px 16px;margin:0}
/* A block, not a flex column. As a flex child of the stretched rail the
   tree nodes were shrinkable, so they squashed below their own content
   height and the rail filled with uneven gaps. Spacing lives on the node. */
.docportal__cats{display:block}
.docportal__none{color:rgba(250,247,240,.6);font-size:.85rem;padding:8px}
.cat-btn{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:14px;
  border-radius:14px;border:1px solid transparent;background:transparent;color:#dfeae4;
  cursor:pointer;transition:.22s var(--ease);font-family:'Archivo',sans-serif}
.cat-btn:hover{background:rgba(255,255,255,.06)}
.cat-btn.active{background:linear-gradient(135deg,#c8a86e,#a8813f);color:#231a06;
  border-color:rgba(255,255,255,.35);box-shadow:0 12px 24px -14px rgba(176,141,79,.9)}
.cat-btn__ic{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:rgba(255,255,255,.1);color:#d9bd85;transition:.22s}
.cat-btn__ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.cat-btn.active .cat-btn__ic{background:rgba(35,26,6,.16);color:#231a06}
.cat-btn__name{flex:1;font-weight:600;font-size:.92rem;line-height:1.2}
.cat-btn__count{flex:none;min-width:24px;height:24px;padding:0 7px;border-radius:100px;
  display:grid;place-items:center;font-family:'Archivo Narrow',sans-serif;font-size:.72rem;
  font-weight:700;background:rgba(0,0,0,.22);color:#e6dcc6}
.cat-btn.active .cat-btn__count{background:rgba(35,26,6,.2);color:#231a06}

/* main */
.docportal__main{padding:34px 36px;background:linear-gradient(180deg,#fdfbf6,var(--ivory));min-width:0}
.docportal__head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:6px}
.docportal__head-text{flex:1;min-width:0}
.docportal__head h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:0;color:var(--green)}
.docportal__desc{color:var(--mut);margin:8px 0 0;font-size:.95rem}
.docportal__search{position:relative;flex:none;width:min(330px,42%)}
.docportal__search svg{position:absolute;left:17px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;stroke:var(--mut);fill:none;stroke-width:1.9;stroke-linecap:round}
.docportal__search input{width:100%;padding:13px 18px 13px 44px;border-radius:100px;
  border:1px solid var(--line);background:var(--white);font-family:'Archivo',sans-serif;
  font-size:.92rem;color:var(--ink)}
.docportal__search input:focus{border-color:var(--brass);outline:none;
  box-shadow:0 0 0 4px rgba(176,141,79,.16)}

/* rail: an unlimited-depth tree. Indentation comes from an inline padding-left
   per level, so nesting is not capped by a fixed set of CSS rules. */
.dp-node{display:block;margin-bottom:2px}
.dp-branch{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  padding:9px 10px 9px 12px;border:none;background:transparent;color:#cbdad3;cursor:pointer;
  font-family:'Archivo',sans-serif;font-size:.85rem;line-height:1.3;border-radius:9px;
  transition:.18s var(--ease)}
.dp-branch:hover{background:rgba(255,255,255,.07);color:var(--ivory)}
.dp-branch.active{background:linear-gradient(135deg,#c8a86e,#a8813f);color:#231a06;font-weight:600}
.dp-chev{flex:none;width:16px;height:16px;display:grid;place-items:center;border-radius:4px;
  transition:transform .22s var(--ease)}
/* "blank", not "empty": .empty is the site-wide dashed empty-state box with
   56px padding, and sharing the name inflated this 16px spacer to 132px. */
.dp-chev.blank{visibility:hidden}
.dp-chev svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.dp-node.open>.dp-branch .dp-chev{transform:rotate(180deg)}
.dp-ic{flex:none;display:grid;place-items:center}
.dp-ic svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.dp-branch.active .dp-ic svg{opacity:1}
.dp-name{flex:1;min-width:0}
.dp-n{flex:none;font-family:'Archivo Narrow',sans-serif;font-size:.66rem;font-weight:700;
  color:rgba(255,255,255,.45);background:rgba(0,0,0,.2);padding:2px 7px;border-radius:100px}
.dp-branch.active .dp-n{color:#231a06;background:rgba(35,26,6,.2)}
.dp-kids{display:none}
.dp-node.open>.dp-kids{display:block}

/* breadcrumb above the pane title */
.dp-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:6px;
  font-family:'Archivo Narrow',sans-serif;text-transform:uppercase;letter-spacing:.12em;
  font-size:.64rem;font-weight:700;color:var(--mut)}
.dp-crumb button{background:none;border:none;padding:0;cursor:pointer;font:inherit;
  letter-spacing:inherit;text-transform:inherit;color:var(--brass-ink)}
.dp-crumb button:hover{text-decoration:underline}
.dp-crumb .sep{opacity:.5}

/* Child categories of the selected node, as a scrollable row of tabs. Their
   names are arbitrary — "2026 Minutes", "2025 Agendas", anything the admin
   typed — so nothing here assumes a year or a fixed set. */
.dp-tabs{display:flex;gap:10px;margin:22px 0 4px;overflow-x:auto;padding-bottom:10px;
  scrollbar-width:thin}
.dp-tabs::-webkit-scrollbar{height:7px}
.dp-tabs::-webkit-scrollbar-track{background:var(--sand);border-radius:100px}
.dp-tabs::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:100px}
.dp-tabs::-webkit-scrollbar-thumb:hover{background:var(--mut)}
.dp-tabs+.dp-tabs{margin-top:2px}
.dp-tab{flex:none;display:inline-flex;align-items:center;gap:8px;padding:10px 20px;
  border-radius:100px;border:1px solid var(--line);background:var(--white);
  font-family:'Archivo',sans-serif;font-weight:600;font-size:.87rem;color:var(--brass-ink);
  white-space:nowrap;cursor:pointer;transition:.2s var(--ease)}
.dp-tab:hover{border-color:var(--brass);background:var(--sand)}
/* Brass, matching the active item in the rail and the reference portal. */
.dp-tab.active{background:linear-gradient(135deg,#c8a86e,#a8813f);border-color:#a8813f;
  color:#231a06;box-shadow:0 8px 18px -10px rgba(176,141,79,.9)}
.dp-tab__n{font-family:'Archivo Narrow',sans-serif;font-size:.68rem;font-weight:700;
  background:var(--sand);color:var(--green);border-radius:100px;padding:1px 7px}
.dp-tab.active .dp-tab__n{background:rgba(35,26,6,.18);color:#231a06}

/* the two actions on a document row */
.dp-acts{flex:none;display:flex;gap:8px}

/* rows */
.docportal__list{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.dp-row{display:flex;align-items:center;gap:18px;padding:16px 18px;background:var(--white);
  border:1px solid var(--line);border-radius:16px;transition:.2s var(--ease)}
.dp-row:hover{border-color:var(--brass);box-shadow:0 16px 30px -22px rgba(12,38,56,.6);
  transform:translateY(-1px)}
.dp-badge{flex:none;width:58px;height:58px;border-radius:13px;display:grid;place-items:center;
  font-family:'Archivo Narrow',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.04em;
  color:#fff;background:linear-gradient(135deg,#b8443a,#9c3229)}
.dp-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.dp-info b{font-family:'Fraunces',serif;font-weight:500;font-size:1.1rem;color:var(--green);
  line-height:1.25;overflow-wrap:anywhere}
.dp-info span{font-size:.85rem;color:var(--mut)}
.dp-view{flex:none;width:46px;height:46px;border-radius:12px;border:1px solid var(--line);
  background:var(--white);color:var(--green);display:grid;place-items:center;transition:.2s}
.dp-view svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.dp-view:hover{background:var(--green);color:var(--ivory);border-color:var(--green)}
.dp-view.off{opacity:.4;pointer-events:none}
.dp-empty{padding:50px 20px;text-align:center;color:var(--mut)}
.dp-empty svg{width:34px;height:34px;stroke:var(--line);fill:none;stroke-width:1.5;
  margin:0 auto 12px;display:block}
.dp-empty p{margin:0}

@media(max-width:900px){
  /* minmax(0,..) not a bare 1fr: the rows' min-content is wider than the phone
     viewport, and a bare fr track refuses to shrink past it, so the main pane
     overflowed and was clipped by the card's overflow:hidden. */
  .docportal{grid-template-columns:minmax(0,1fr)}
  .docportal__side{padding:20px 16px}
  /* The rail keeps its tree on one column; it just gets a max height. */
  .docportal__cats{max-height:320px;overflow-y:auto}
}
@media(max-width:640px){
  .docportal__head{flex-wrap:wrap}
  .docportal__search{width:100%}
  .docportal__main{padding:24px 20px}
  .dp-badge{width:46px;height:46px;font-size:.64rem}
  .dp-view{width:40px;height:40px}
}

/* Member directory card — opened from the View button on a directory row */
.mem-backdrop{position:fixed;inset:0;z-index:220;background:rgba(12,38,56,.55);
  backdrop-filter:blur(3px);display:grid;place-items:center;padding:24px}
.mem-card{position:relative;width:min(560px,100%);background:var(--white);
  border-radius:20px;padding:38px 34px 34px;box-shadow:var(--e3);text-align:center}
.mem-card h2{font-size:1.55rem;color:var(--green);margin:0 0 24px}
.mem-close{position:absolute;top:-14px;right:-14px;width:34px;height:34px;border-radius:50%;
  border:none;background:var(--green);color:var(--ivory);font-size:1.2rem;line-height:1;
  cursor:pointer;display:grid;place-items:center;box-shadow:var(--e2)}
.mem-close:hover{background:var(--brass);color:#231a06}
.mem-body{display:flex;gap:22px;align-items:flex-start;text-align:left}
.mem-avatar{flex:none;width:104px;height:104px;border-radius:14px;overflow:hidden;
  background:var(--sand);display:grid;place-items:center;border:1px solid var(--line)}
.mem-avatar img{width:100%;height:100%;object-fit:cover}
.mem-avatar span{font-family:'Archivo Narrow',sans-serif;font-weight:700;font-size:1.6rem;
  color:var(--green)}
/* Fallback when a member has no photo: the association mark, which is wide, so
   it is contained inside the square rather than cropped like a portrait. */
.mem-avatar.is-logo{background:var(--ivory);padding:12px}
.mem-avatar .mem-logo{width:100%;height:100%;object-fit:contain}
.mem-rows{flex:1;min-width:0;margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.mem-rows>div{display:grid;grid-template-columns:118px 1fr;border-bottom:1px solid var(--line)}
.mem-rows>div:last-child{border-bottom:none}
.mem-rows dt{padding:12px 14px;font-weight:600;font-size:.88rem;color:var(--ink);
  background:var(--ivory);border-right:1px solid var(--line)}
.mem-rows dd{padding:12px 14px;margin:0;font-size:.88rem;color:var(--ink-2);
  overflow-wrap:anywhere}
.mem-rows dd a{color:var(--brass-ink);font-weight:600}
@media(max-width:560px){
  .mem-body{flex-direction:column;align-items:center}
  .mem-rows{width:100%}
  .mem-rows>div{grid-template-columns:1fr}
  .mem-rows dt{border-right:none;border-bottom:1px solid var(--line);padding-bottom:6px}
}

/* Embedded Google map */
.map-embed{border-radius:18px;overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--e1);line-height:0;background:var(--sand)}
.map-embed iframe{width:100%;height:clamp(300px,42vw,480px);border:0;display:block}

/* ============================================================
   KEY INFORMATION (Buyers & Realtors) — topic rows + detail dialog
   ============================================================ */
.kv-list{display:grid;gap:14px}
.kv-row{display:flex;align-items:center;gap:20px;background:var(--white);
  border:1px solid var(--line);border-radius:16px;padding:18px 22px;box-shadow:var(--e1);
  transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.kv-row:hover{transform:translateY(-2px);box-shadow:var(--e2);border-color:var(--brass)}
.kv-ic{flex:none;width:58px;height:58px;border-radius:14px;display:grid;place-items:center;
  background:var(--sand);color:var(--green)}
.kv-ic svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.kv-row h3{flex:1;min-width:0;margin:0;font-size:1.15rem;color:var(--green);
  font-family:'Fraunces',serif;font-weight:500}
.kv-row .btn{flex:none}

.kv-backdrop{position:fixed;inset:0;z-index:220;background:rgba(12,38,56,.55);
  backdrop-filter:blur(3px);display:grid;place-items:center;padding:24px;overflow-y:auto}
.kv-modal{position:relative;width:min(620px,100%);background:var(--white);border-radius:20px;
  padding:40px 38px 32px;box-shadow:var(--e3);text-align:center;margin:auto}
.kv-close{position:absolute;top:16px;right:18px;width:34px;height:34px;border-radius:50%;
  border:none;background:transparent;color:var(--mut);font-size:1.5rem;line-height:1;cursor:pointer}
.kv-close:hover{background:var(--sand);color:var(--green)}
.kv-modal-ic{width:74px;height:74px;border-radius:50%;margin:0 auto 18px;display:grid;
  place-items:center;background:var(--sand);color:var(--green);border:1px solid var(--line)}
.kv-modal-ic svg{width:32px;height:32px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.kv-modal h2{font-size:1.5rem;color:var(--green);margin:0 0 16px;position:relative;padding-bottom:16px}
.kv-modal h2::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:64px;height:3px;border-radius:3px;background:var(--brass)}
.kv-modal-body{font-size:.95rem;color:var(--ink-2);line-height:1.65;text-align:left}
.kv-modal-body a{color:var(--brass-ink);font-weight:600}
.kv-office{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);text-align:left}
.kv-office h3{font-family:'Archivo Narrow',sans-serif;text-transform:uppercase;
  letter-spacing:.14em;font-size:.68rem;font-weight:700;color:var(--mut);margin:0 0 8px}
.kv-office p{margin:0;font-size:.9rem;color:var(--ink-2);line-height:1.7}
.kv-office a{color:var(--brass-ink);font-weight:600}
@media(max-width:600px){
  .kv-row{flex-wrap:wrap;gap:14px}
  .kv-row h3{flex:1 1 100%;order:2}
  .kv-row .btn{order:3;width:100%}
  .kv-modal{padding:34px 22px 26px}
}


/* Login / Register toggle on the sign-in page.
   The sliding white pill is moved by a .right class that had no rule, so it
   stayed under "Login" whatever tab was open — the tab looked stuck. The tab
   colours were inline too, so Login always read as active. */
#auth-tab-ink{transform:translateX(0)}
#auth-tab-ink.right{transform:translateX(100%)}
.auth-tab{color:var(--mut)!important;transition:color .3s}
.auth-tab.active{color:var(--green)!important}

/* ============================================================
   AMENITIES
   ============================================================ */
.amen-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.amen-card{background:var(--white);border:1px solid var(--line);border-radius:18px;
  padding:26px;box-shadow:var(--e1);display:flex;flex-direction:column;gap:16px;
  transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.amen-card:hover{transform:translateY(-3px);box-shadow:var(--e2);border-color:var(--brass)}
.amen-card__top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.amen-card__top h3{margin:0;font-size:1.2rem;color:var(--green)}
.amen-facts{display:grid;gap:8px;margin:0}
.amen-facts div{display:flex;gap:12px;align-items:baseline}
.amen-facts dt{flex:none;min-width:78px;font-family:'Archivo Narrow',sans-serif;
  text-transform:uppercase;letter-spacing:.12em;font-size:.62rem;font-weight:700;color:var(--mut)}
.amen-facts dd{margin:0;font-size:.9rem;color:var(--ink-2)}
.amen-rules{list-style:none;margin:0;padding:14px 0 0;border-top:1px solid var(--line);display:grid;gap:8px}
.amen-rules li{position:relative;padding-left:16px;font-size:.88rem;color:var(--ink-2);line-height:1.5}
.amen-rules li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;
  border-radius:50%;background:var(--brass)}
.amen-card .btn{align-self:flex-start;margin-top:auto}

.amen-steps{counter-reset:s;list-style:none;margin:0;padding:0;display:grid;gap:18px}
.amen-steps li{counter-increment:s;position:relative;padding-left:52px;font-size:.96rem;
  color:var(--ink-2);line-height:1.65}
.amen-steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:34px;height:34px;
  border-radius:50%;display:grid;place-items:center;background:var(--green);color:var(--ivory);
  font-family:'Archivo Narrow',sans-serif;font-weight:700;font-size:.9rem}
.amen-steps li b{color:var(--ink)}
@media(max-width:520px){.amen-grid{grid-template-columns:1fr}.amen-card{padding:22px}}

/* Contact page action buttons (Work Orders / View Amenities) */
.contact-acts{display:grid;gap:14px;margin:26px 0}
.contact-acts .btn{width:100%;justify-content:center;min-height:58px;font-size:1rem}
.contact-acts .btn .ext{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;
  margin-left:9px;opacity:.75}

/* ============================================================
   RESERVATION FORM — the page is the form, nothing else
   ============================================================ */
.res-head{margin-bottom:30px}
.res-head h2{font-size:clamp(1.5rem,3vw,2rem);color:var(--green);margin:0 0 8px}
.res-head p{color:var(--ink-2);font-size:1rem;margin:0}
.res-form{background:var(--white);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;box-shadow:var(--e1);max-width:1080px}
.res-bar{background:linear-gradient(135deg,var(--brand-soft),var(--brand));
  color:var(--ivory);text-align:center;font-weight:700;font-size:1.02rem;padding:15px 20px}
.res-body{padding:26px 26px 30px;display:grid;gap:18px}
.res-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.res-row--3{grid-template-columns:1fr 1fr 1fr}
.res-body .fld{margin:0}
.res-body label{display:block;font-weight:700;font-size:.92rem;color:var(--green);margin-bottom:7px}
.res-body input,.res-body select,.res-body textarea{width:100%;padding:13px 15px;
  border:1px solid var(--line-2);border-radius:8px;background:var(--white);
  font-family:'Archivo',sans-serif;font-size:.94rem;color:var(--ink);min-height:48px}
.res-body textarea{min-height:110px;resize:vertical}
.res-body input:focus,.res-body select:focus,.res-body textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(27,77,110,.14)}
.res-body .req{color:var(--crit)}
.res-body #resGo{justify-self:start;background:var(--brand-deep);border-color:var(--brand-deep);
  min-height:52px;padding:0 30px}
/* honeypot: present for bots, never shown or focusable for people */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:760px){
  .res-row,.res-row--3{grid-template-columns:1fr}
  .res-body{padding:20px 18px 24px}
}