/* ==========================================================================
   Cypress Tanglewood Homeowners Association
   site.css — one stylesheet for the whole site.

   Palette note: the two core colors are the community's own documented paint
   specification — Sherwin-Williams "Rainstorm #6230" (trim) and
   "Young Colt #0198" (stucco). Everything else is built around them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* --- Brand -------------------------------------------------------------- */
  --c-deep:        #16303F;   /* deepest slate blue — headers, footer        */
  --c-brand:       #1E4A63;   /* primary deep blue                           */
  --c-rainstorm:   #4E6572;   /* SW Rainstorm 6230 — the community trim color*/
  --c-palm:        #3F7A5E;   /* greenbelt green                             */
  --c-aqua:        #0E9C96;   /* pool water — the accent                     */
  --c-aqua-deep:   #0A7370;
  --c-bougain:     #C2456B;   /* bougainvillea — used sparingly, for chips   */
  --c-aqua-onDark: #35C6BE;   /* aqua that clears 4.5:1 on --c-deep          */

  /* --- Ground & surface --------------------------------------------------- */
  --c-sand:        #F3EEE4;   /* SW Young Colt-derived warm stucco ground    */
  --c-sand-soft:   #FAF7F1;
  --c-surface:     #FFFFFF;
  --c-surface-2:   #FCFAF6;

  /* --- Ink & neutrals (biased blue, never pure grey) ----------------------- */
  --c-ink:         #14262F;
  --c-ink-2:       #3A5561;
  --c-muted:       #5A6E79;   /* 4.6:1 on the sand ground */
  --c-hairline:    #E0D8CA;
  --c-hairline-2:  #EFE8DC;

  /* --- Semantic ----------------------------------------------------------- */
  --c-good:        #2F7A52;
  --c-warn:        #B4761C;
  --c-alert:       #B3402F;

  /* --- Flat tints: fallbacks for browsers without color-mix() ------------- */
  --c-tint-aqua:    #E2F2F1;
  --c-tint-brand:   #E4EBF0;
  --c-tint-palm:    #E4EFE8;
  --c-tint-slate:   #E8ECEE;
  --c-tint-bougain: #F7E5EA;
  --c-tint-warn:    #F7EEDF;
  --c-tint-alert:   #F7E6E3;

  /* --- Effects ------------------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(20, 38, 47, .05), 0 2px 6px rgba(20, 38, 47, .05);
  --shadow-md: 0 2px 4px rgba(20, 38, 47, .05), 0 10px 26px rgba(20, 38, 47, .08);
  --shadow-lg: 0 4px 8px rgba(20, 38, 47, .06), 0 24px 56px rgba(20, 38, 47, .14);
  --scrim: linear-gradient(180deg, rgba(11,28,38,.66) 0%, rgba(11,28,38,.40) 38%, rgba(11,28,38,.80) 100%);

  /* --- Geometry ----------------------------------------------------------- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;
  --wrap: 1200px;
  --wrap-narrow: 780px;
  --measure: 68ch;
  --header-h: 76px;

  /* --- Type --------------------------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --step--1: clamp(.82rem, .80rem + .10vw, .88rem);
  --step-0:  clamp(1rem, .97rem + .16vw, 1.09rem);
  --step-1:  clamp(1.16rem, 1.10rem + .30vw, 1.35rem);
  --step-2:  clamp(1.38rem, 1.26rem + .58vw, 1.75rem);
  --step-3:  clamp(1.64rem, 1.42rem + 1.05vw, 2.3rem);
  --step-4:  clamp(1.95rem, 1.55rem + 1.9vw, 3.1rem);
  --step-5:  clamp(2.35rem, 1.6rem + 3.4vw, 4.4rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-deep:       #0B1720;
    --c-brand:      #7FB4CE;
    --c-rainstorm:  #93A9B4;
    --c-palm:       #74B392;
    --c-aqua:       #2FC6BE;
    --c-aqua-deep:  #53D8D0;
    --c-bougain:    #E8809E;
    --c-aqua-onDark: #4FD8D0;

    --c-sand:       #101E27;
    --c-sand-soft:  #142430;
    --c-surface:    #16262F;
    --c-surface-2:  #1A2C37;

    --c-ink:        #E9E4DA;
    --c-ink-2:      #C3D0D7;
    --c-muted:      #93A6B0;
    --c-hairline:   #2A3E4A;
    --c-hairline-2: #223540;

    --c-good:       #6FBF92;
    --c-warn:       #E0B063;
    --c-alert:      #E88A78;

    --c-tint-aqua:    #16333A;
    --c-tint-brand:   #17303E;
    --c-tint-palm:    #17352C;
    --c-tint-slate:   #1D2F38;
    --c-tint-bougain: #38222B;
    --c-tint-warn:    #33291A;
    --c-tint-alert:   #33211D;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.34), 0 2px 6px rgba(0,0,0,.28);
    --shadow-md: 0 2px 4px rgba(0,0,0,.34), 0 10px 26px rgba(0,0,0,.4);
    --shadow-lg: 0 4px 8px rgba(0,0,0,.4), 0 24px 56px rgba(0,0,0,.5);
  }
}

:root[data-theme="dark"] {
  --c-deep:       #0B1720;
  --c-brand:      #7FB4CE;
  --c-rainstorm:  #93A9B4;
  --c-palm:       #74B392;
  --c-aqua:       #2FC6BE;
  --c-aqua-deep:  #53D8D0;
  --c-bougain:    #E8809E;
  --c-aqua-onDark: #4FD8D0;

  --c-sand:       #101E27;
  --c-sand-soft:  #142430;
  --c-surface:    #16262F;
  --c-surface-2:  #1A2C37;

  --c-ink:        #E9E4DA;
  --c-ink-2:      #C3D0D7;
  --c-muted:      #93A6B0;
  --c-hairline:   #2A3E4A;
  --c-hairline-2: #223540;

  --c-good:       #6FBF92;
  --c-warn:       #E0B063;
  --c-alert:      #E88A78;

  --c-tint-aqua:    #16333A;
  --c-tint-brand:   #17303E;
  --c-tint-palm:    #17352C;
  --c-tint-slate:   #1D2F38;
  --c-tint-bougain: #38222B;
  --c-tint-warn:    #33291A;
  --c-tint-alert:   #33211D;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.34), 0 2px 6px rgba(0,0,0,.28);
  --shadow-md: 0 2px 4px rgba(0,0,0,.34), 0 10px 26px rgba(0,0,0,.4);
  --shadow-lg: 0 4px 8px rgba(0,0,0,.4), 0 24px 56px rgba(0,0,0,.5);
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

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

body {
  margin: 0;
  background: var(--c-sand);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, svg { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 32, "WONK" 1, "opsz" 40;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.012em;
  text-wrap: balance;
  margin: 0;
  color: var(--c-ink);
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0; }

a { color: var(--c-aqua-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--c-brand); }

:focus-visible {
  outline: 3px solid var(--c-aqua);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--c-aqua); color: #fff; }

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }

.section { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.section--sand { background: var(--c-sand); }
.section--surface { background: var(--c-surface-2); }
.section--deep { background: var(--c-deep); }
.section--deep h1, .section--deep h2, .section--deep h3, .section--deep h4 { color: #FBF8F2; }
.section--deep .lede, .section--deep p { color: #CBD9E0; }

.stack { display: flex; flex-direction: column; }
.stack-xs { gap: .5rem; }
.stack-sm { gap: .85rem; }
.stack-md { gap: 1.5rem; }
.stack-lg { gap: 2.5rem; }
.stack-xl { gap: clamp(2.5rem, 1.5rem + 3vw, 4rem); }

.grid { display: grid; gap: clamp(1rem, .6rem + 1.4vw, 1.75rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); }
.grid-5 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 196px), 1fr)); }

.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1.05em; }
.prose h3 { margin-top: 1.8em; }
.prose ul, .prose ol { margin: 1em 0; padding-left: 1.3em; }
.prose li + li { margin-top: .45em; }

/* --------------------------------------------------------------------------
   4. TYPE UTILITIES
   -------------------------------------------------------------------------- */

.eyebrow {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c-aqua-deep);
  margin: 0;
}
.eyebrow--light { color: var(--c-aqua-onDark); }

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--c-ink-2);
  max-width: var(--measure);
}

.small { font-size: var(--step--1); color: var(--c-muted); }
.nums { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   5. BUTTONS & CHIPS
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--c-brand);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .82rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease, background-color .18s ease;
  box-shadow: var(--shadow-sm);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }

.btn--accent { --btn-bg: var(--c-aqua-deep); }
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-ink);
  border-color: var(--c-hairline);
  box-shadow: none;
}
.btn--ghost:hover { background: var(--c-surface); border-color: var(--c-rainstorm); }
.btn--onDark {
  --btn-bg: rgba(255,255,255,.10);
  --btn-fg: #fff;
  border-color: rgba(255,255,255,.34);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.btn--onDark:hover { --btn-bg: rgba(255,255,255,.2); }
.btn--lg { padding: 1rem 1.8rem; font-size: var(--step-1); }
.btn--block { width: 100%; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .28rem .7rem;
  border-radius: var(--r-pill);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--c-tint-aqua);
  background: color-mix(in srgb, var(--c-aqua) 15%, transparent);
  color: var(--c-aqua-deep);
  white-space: nowrap;
}
.chip--news   { background: var(--c-tint-brand); background: color-mix(in srgb, var(--c-brand) 14%, transparent); color: var(--c-brand); }
.chip--event  { background: var(--c-tint-bougain); background: color-mix(in srgb, var(--c-bougain) 15%, transparent); color: var(--c-bougain); }
.chip--project{ background: var(--c-tint-palm); background: color-mix(in srgb, var(--c-palm) 16%, transparent); color: var(--c-palm); }
.chip--meeting{ background: var(--c-tint-slate); background: color-mix(in srgb, var(--c-rainstorm) 20%, transparent); color: var(--c-rainstorm); }
.chip--alert  { background: var(--c-tint-alert); background: color-mix(in srgb, var(--c-alert) 14%, transparent); color: var(--c-alert); }

/* --------------------------------------------------------------------------
   6. HEADER / NAVIGATION
   -------------------------------------------------------------------------- */

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--c-brand); color: #fff; padding: .8rem 1.2rem;
  border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.skip:focus { left: 0; color: #fff; }

/* The header's frosted-glass layer lives on a pseudo-element, NOT on the
   header itself. backdrop-filter makes an element the containing block for
   position:fixed descendants, which would trap the mobile nav drawer inside
   the 76px-tall header and collapse it to zero height. Keeping the filter on
   ::before leaves the header a plain sticky box, so the drawer resolves
   against the viewport as intended. Same look, no trap. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid var(--c-hairline-2);
  transition: box-shadow .25s ease, border-color .25s ease;
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--c-surface) 88%, transparent);
  background: rgba(254, 253, 251, .88);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  transition: opacity .25s ease;
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }

.site-header.is-transparent {
  background: transparent;
  border-bottom-color: transparent;
}
.site-header.is-transparent::before { opacity: 0; }
.site-header.is-transparent .brand-name,
.site-header.is-transparent .brand-sub,
.site-header.is-transparent .nav-link { color: #fff; }
.site-header.is-transparent .brand-mark { border-color: rgba(255,255,255,.5); color:#fff; }

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.brand-mark {
  flex: none;
  width: 42px; height: 42px;
  border: 1.5px solid var(--c-rainstorm);
  border-radius: 12px;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-variation-settings: "WONK" 1;
  font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em;
  color: var(--c-brand);
  transition: color .25s ease, border-color .25s ease;
}
.brand-name {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 20;
  font-weight: 600; font-size: 1.16rem; line-height: 1.05; letter-spacing: -.015em;
  color: var(--c-ink);
  display: block;
}
.brand-sub {
  font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-muted); display: block; margin-top: 2px;
}

.nav { display: flex; align-items: center; gap: .2rem; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: .32rem;
  padding: .6rem .78rem;
  border-radius: var(--r-sm);
  font-size: .95rem; font-weight: 600;
  color: var(--c-ink-2);
  text-decoration: none;
  background: none; border: 0; font-family: inherit; cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.nav-link:hover, .nav-item:focus-within .nav-link { background: var(--c-tint-slate); background: color-mix(in srgb, var(--c-rainstorm) 12%, transparent); color: var(--c-ink); }
.nav-link[aria-current="page"] { color: var(--c-aqua-deep); }
.nav-caret { width: 9px; height: 9px; opacity: .55; transition: transform .2s ease; }
.nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret { transform: rotate(180deg); }

.nav-menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 268px; padding: .5rem;
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-item:hover .nav-menu, .nav-item:focus-within .nav-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-menu a {
  display: block; padding: .58rem .75rem; border-radius: var(--r-sm);
  font-size: .93rem; font-weight: 500; color: var(--c-ink-2); text-decoration: none;
}
.nav-menu a:hover { background: var(--c-sand); color: var(--c-brand); }
.nav-menu a small { display: block; font-size: .78rem; color: var(--c-muted); font-weight: 400; }

.header-cta { display: flex; align-items: center; gap: .6rem; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--c-hairline); border-radius: 12px;
  background: var(--c-surface); color: var(--c-ink);
  cursor: pointer;
  place-items: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 18px; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle span::before { transform: translateY(-6px); }
.nav-toggle span::after  { transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(0); }

/* Level-1 list is transparent to the flex row on desktop. */
.nav-level { display: contents; list-style: none; margin: 0; padding: 0; }
.nav-back-row, .nav-cta-row { display: none; }

/* ── Drawer: drill-down panels ────────────────────────────────────────────
   Below the desktop breakpoint the menu becomes a stack of single-screen
   panels rather than one long accordion. Tapping a section slides its panel
   in over the top level; "Back" slides it out. Every level fits the screen,
   so the drawer never scrolls and nothing is cut off.                      */
@media (max-width: 1080px) {
  .nav-toggle { display: grid; }
  .header-cta .btn { display: none; }

  .nav {
    position: fixed; inset: var(--header-h) 0 0 auto;
    width: min(380px, 92vw);
    display: block; padding: 0;
    background: var(--c-surface);
    border-left: 1px solid var(--c-hairline);
    box-shadow: var(--shadow-lg);
    overflow: hidden;                       /* panels fit; nothing scrolls */
    overscroll-behavior: contain;
    transform: translateX(102%);
    transition: transform .3s cubic-bezier(.3,.8,.3,1);
    visibility: hidden;
  }
  .nav.is-open { transform: translateX(0); visibility: visible; }
  .site-header.is-transparent .nav .nav-link { color: var(--c-ink-2); }

  /* Level 1 ---------------------------------------------------------- */
  .nav-level {
    display: flex; flex-direction: column;
    height: 100%;
    padding: .6rem 1.15rem calc(1rem + env(safe-area-inset-bottom, 0px));
    overflow: hidden;
  }
  /* static, so a panel's inset:0 resolves against the drawer, not the row */
  .nav-item { position: static; border-bottom: 1px solid var(--c-hairline-2); }
  .nav-link {
    width: 100%; justify-content: space-between;
    padding: .85rem .2rem; font-size: 1.05rem;
    min-height: 48px;
  }
  /* Caret points the way the panel will travel. */
  .nav-item > button.nav-link .nav-caret { transform: rotate(-90deg); }

  /* Hide the level behind an open panel from sight, tab order and AT. */
  .nav.is-drilled > .nav-level > .nav-item > .nav-link { visibility: hidden; }

  /* Level 2 ---------------------------------------------------------- */
  .nav-menu {
    position: absolute; inset: 0;
    display: block; min-width: 0;
    margin: 0; border: 0; border-radius: 0; box-shadow: none;
    background: var(--c-surface);
    padding: .6rem 1.15rem calc(1rem + env(safe-area-inset-bottom, 0px));
    opacity: 1;
    transform: translateX(100%);
    visibility: hidden;                     /* keeps it out of the tab order */
    transition: transform .28s cubic-bezier(.3,.8,.3,1), visibility .28s;
    overflow: hidden;
    z-index: 2;
  }
  .nav-item.is-open > .nav-menu { transform: translateX(0); visibility: visible; }
  /* Hover must not open a panel on a touch screen. */
  .nav-item:hover > .nav-menu,
  .nav-item:focus-within > .nav-menu { transform: translateX(100%); visibility: hidden; }
  .nav-item.is-open:hover > .nav-menu,
  .nav-item.is-open:focus-within > .nav-menu { transform: translateX(0); visibility: visible; }
  .nav-menu li + li { border-top: 1px solid var(--c-hairline-2); }
  .nav-menu a { padding: .8rem .2rem; min-height: 48px; }

  /* Back row --------------------------------------------------------- */
  .nav-back-row { display: block; border-bottom: 1px solid var(--c-hairline); }
  .nav-back {
    display: flex; align-items: center; gap: .5rem;
    width: 100%; min-height: 48px;
    padding: .8rem .2rem;
    background: none; border: 0; cursor: pointer;
    font: 600 1.05rem/1.2 var(--font-body);
    color: var(--c-brand);
  }
  .nav-back svg { width: 20px; height: 20px; flex: none; }
  .nav-back:hover span { text-decoration: underline; }

  /* Primary action, pinned to the foot of the top level. */
  .nav-cta-row { display: block; margin-top: auto; padding-top: 1.1rem; border: 0; }
}

@media (max-width: 1080px) and (prefers-reduced-motion: reduce) {
  .nav, .nav-menu { transition: none; }
}

.nav-scrim {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(11,23,32,.45);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
}
.nav-scrim.is-open { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------------------
   7. MEDIA SLOTS — photo / video drop-in system
   -------------------------------------------------------------------------- */

.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--c-brand) 82%, #000 4%) 0%,
      var(--c-rainstorm) 44%,
      color-mix(in srgb, var(--c-palm) 70%, var(--c-rainstorm)) 100%);
  isolation: isolate;
}
.media img, .media video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  position: relative; z-index: 1;
}
.media--4x3  { aspect-ratio: 4 / 3; }
.media--3x2  { aspect-ratio: 3 / 2; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--1x1  { aspect-ratio: 1 / 1; }
.media--tall { aspect-ratio: 3 / 4; }

/* Placeholder label — visible only until a real photo is dropped in.
   Anchored to the TOP so it never collides with text overlaid on a card. */
.media::after {
  content: attr(data-slot);
  position: absolute; inset: 0 0 auto 0; z-index: 0;
  padding: 1rem 1.15rem;
  font-family: var(--font-body);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.media::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image:
    radial-gradient(circle at 22% 26%, rgba(255,255,255,.16) 0, transparent 42%),
    radial-gradient(circle at 78% 74%, rgba(255,255,255,.10) 0, transparent 46%);
}
.media.has-photo::after, .media.has-photo::before { content: none; }

.media-caption {
  font-size: var(--step--1);
  color: var(--c-muted);
  margin-top: .6rem;
}

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: min(88svh, 780px);
  display: grid;
  align-items: end;
  margin-top: calc(var(--header-h) * -1);
  padding-top: var(--header-h);
  background: var(--c-deep);
  overflow: hidden;
}
.hero--short { min-height: min(56svh, 480px); }

.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; }

/* Hero video sits over the poster and cross-fades in once it is actually
   playing. The poster stays underneath, so any bail-out (reduced motion,
   blocked autoplay, save-data, decode error) leaves a finished-looking hero
   with no flash of empty space and no layout shift. */
.hero-video {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}
.hero-media.has-video .hero-video { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero-media.has-video .hero-video { opacity: 0; }
}
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--scrim);
}
.hero-fallback {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(46,198,190,.30) 0, transparent 55%),
    radial-gradient(90% 80% at 88% 92%, rgba(63,122,94,.42) 0, transparent 58%),
    linear-gradient(168deg, #1E4A63 0%, #16303F 52%, #10242F 100%);
}

.hero-inner {
  position: relative; z-index: 2;
  padding-block: clamp(3rem, 2rem + 6vw, 6rem);
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}
.hero h1 { color: #fff; max-width: 16ch; text-shadow: 0 2px 24px rgba(0,0,0,.32); }
.hero .lede { color: #DCE7EC; max-width: 46ch; text-shadow: 0 1px 14px rgba(0,0,0,.34); }
.hero-eyebrow {
  display: inline-flex; align-self: flex-start; align-items: center; gap: .55rem;
  padding: .4rem .95rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: var(--step--1); font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
}
.hero-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-aqua); flex: none; }

.hero-scroll {
  position: absolute; left: 50%; bottom: 1.2rem; z-index: 2;
  transform: translateX(-50%);
  color: rgba(255,255,255,.6); font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
}
.hero-scroll::after {
  content: ""; width: 1px; height: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.7), transparent);
  animation: drift 2.4s ease-in-out infinite;
}
@keyframes drift { 0%,100% { transform: scaleY(.5); opacity: .4 } 50% { transform: scaleY(1); opacity: 1 } }

/* Page-load orchestration */
.reveal-load > * { opacity: 0; transform: translateY(18px); animation: riseIn .85s cubic-bezier(.2,.75,.3,1) forwards; }
.reveal-load > *:nth-child(1) { animation-delay: .1s }
.reveal-load > *:nth-child(2) { animation-delay: .22s }
.reveal-load > *:nth-child(3) { animation-delay: .34s }
.reveal-load > *:nth-child(4) { animation-delay: .46s }
@keyframes riseIn { to { opacity: 1; transform: none } }

/* --------------------------------------------------------------------------
   9. ACTION RAIL — the four primary resident actions
   -------------------------------------------------------------------------- */

.action-rail { position: relative; z-index: 5; margin-top: clamp(-3.5rem, -2rem - 3vw, -2rem); }
.action-rail .grid { gap: 1rem; }

.action-card {
  display: flex; flex-direction: column; gap: .55rem;
  padding: 1.5rem 1.4rem 1.35rem;
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: var(--c-ink);
  transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease, border-color .22s ease;
}
.action-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--c-aqua) 45%, var(--c-hairline));
  color: var(--c-ink);
}
.action-card h3 { font-size: var(--step-1); }
.action-card p { font-size: var(--step--1); color: var(--c-muted); line-height: 1.5; }
.action-icon {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--c-tint-aqua);
  background: color-mix(in srgb, var(--c-aqua) 14%, transparent);
  color: var(--c-aqua-deep);
  margin-bottom: .25rem;
}
.action-icon svg { width: 21px; height: 21px; }
.action-card .go {
  margin-top: auto; padding-top: .7rem;
  font-size: var(--step--1); font-weight: 700; color: var(--c-aqua-deep);
  display: inline-flex; align-items: center; gap: .35rem;
}
.action-card:hover .go svg { transform: translateX(3px); }
.action-card .go svg { width: 14px; height: 14px; transition: transform .2s ease; }

/* The paying-your-dues card carries the accent so it reads first. */
.action-card--feature {
  background: linear-gradient(150deg, var(--c-brand), var(--c-deep));
  border-color: transparent;
  color: #fff;
}
.action-card--feature h3 { color: #fff; }
.action-card--feature p { color: #BFD6DF; }
.action-card--feature .action-icon { background: rgba(46,198,190,.20); color: #7FE3DD; }
.action-card--feature .go { color: #7FE3DD; }
.action-card--feature:hover { color: #fff; border-color: var(--c-aqua); }

/* --------------------------------------------------------------------------
   9b. MAINTENANCE / CONCERN CHOOSER
   -------------------------------------------------------------------------- */

.chooser {
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1.4rem 1.5rem 1.5rem;
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.chooser-lead { font-size: .98rem; color: var(--c-ink-2); }
.chooser-lead strong { color: var(--c-ink); }
.chooser-grid {
  display: grid; gap: .85rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.chooser-card {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: 1rem 1.1rem;
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  text-decoration: none; color: inherit;
  transition: border-color .2s ease, transform .2s ease, background-color .2s ease;
}
a.chooser-card:hover {
  border-color: var(--c-aqua);
  background: color-mix(in srgb, var(--c-aqua) 6%, var(--c-surface));
  transform: translateY(-2px);
  color: inherit;
}
.chooser-card.is-current { background: color-mix(in srgb, var(--c-rainstorm) 10%, transparent); }
.chooser-card > span:last-child { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.chooser-card strong { font-size: 1rem; }
.chooser-card span span { font-size: var(--step--1); color: var(--c-ink-2); line-height: 1.55; }
.chooser-icon {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--c-tint-aqua);
  background: color-mix(in srgb, var(--c-aqua) 14%, transparent);
  color: var(--c-aqua-deep);
}
.chooser-icon svg { width: 18px; height: 18px; }
.chooser-here {
  font-style: normal; font-size: .66rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--c-muted); margin-left: .4rem;
}
.chooser-foot { font-size: var(--step--1); color: var(--c-muted); }

/* --------------------------------------------------------------------------
   9c. "WHAT HAPPENS NEXT" STEPS
   -------------------------------------------------------------------------- */

.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; counter-reset: step; }
.steps li {
  position: relative;
  display: grid; grid-template-columns: 34px 1fr; gap: .95rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--c-hairline-2);
  font-size: .96rem; color: var(--c-ink-2); line-height: 1.55;
}
.steps li:last-child { border-bottom: 0; }
.steps li::before {
  counter-increment: step; content: counter(step);
  width: 26px; height: 26px; margin-top: 1px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-tint-aqua);
  background: color-mix(in srgb, var(--c-aqua) 15%, transparent);
  color: var(--c-aqua-deep);
  font-size: .78rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.steps strong { color: var(--c-ink); }

/* --------------------------------------------------------------------------
   10. CARDS
   -------------------------------------------------------------------------- */

.card {
  display: flex; flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease;
}
a.card { text-decoration: none; color: inherit; }
a.card:hover, .card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card .media { border-radius: 0; }
.card-body { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.card-body h3 { font-size: var(--step-2); }
.card-body p { color: var(--c-ink-2); font-size: .96rem; line-height: 1.6; }
.card-meta {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  font-size: var(--step--1); color: var(--c-muted);
}
.card-foot {
  margin-top: auto; padding-top: .8rem;
  font-weight: 700; font-size: var(--step--1); color: var(--c-aqua-deep);
}

/* Life-at-Tanglewood image cards with text over photo */
.life-card {
  position: relative; display: block; overflow: hidden;
  min-height: 300px;
  border-radius: var(--r-lg);
  text-decoration: none; color: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease;
}
.life-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: #fff; }
/* The photo fills the whole card so cards in a row stay flush regardless of
   the source image's aspect ratio. */
.life-card .media {
  position: absolute; inset: 0;
  height: 100%; aspect-ratio: auto;
  border-radius: 0;
}
.life-card .media img { transition: transform .6s cubic-bezier(.2,.8,.3,1); }
.life-card:hover .media img { transform: scale(1.05); }
.life-card-scrim {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(11,28,38,0) 34%, rgba(11,28,38,.5) 62%, rgba(11,28,38,.86) 100%);
  pointer-events: none;
}
.life-card-text {
  position: absolute; inset: auto 0 0 0; z-index: 3;
  padding: 1.4rem 1.35rem 1.3rem;
  display: flex; flex-direction: column; gap: .3rem;
}
.life-card-text h3 { color: #fff; font-size: var(--step-2); }
.life-card-text p { color: rgba(255,255,255,.86); font-size: .92rem; line-height: 1.5; }
.life-card--wide { grid-column: span 2; min-height: 420px; }
@media (max-width: 720px) {
  .life-card--wide { grid-column: span 1; min-height: 300px; }
}

/* --------------------------------------------------------------------------
   11. SNAPSHOT STATS
   -------------------------------------------------------------------------- */

.snapshot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 1px;
  background: var(--c-hairline);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.snap {
  background: var(--c-surface);
  padding: 1.6rem 1.3rem;
  display: flex; flex-direction: column; gap: .35rem;
}
.snap-icon { color: var(--c-palm); width: 24px; height: 24px; margin-bottom: .3rem; }
.snap-value {
  font-family: var(--font-display);
  font-variation-settings: "WONK" 1, "opsz" 40;
  font-size: var(--step-2); font-weight: 600; line-height: 1.1;
  color: var(--c-brand);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.snap-label { font-size: var(--step--1); color: var(--c-muted); line-height: 1.4; }

/* --------------------------------------------------------------------------
   12. NEWS / EVENT LIST
   -------------------------------------------------------------------------- */

.news-list { display: flex; flex-direction: column; gap: 0; }
.news-row {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 1.35rem;
  align-items: start;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--c-hairline-2);
  text-decoration: none; color: inherit;
}
.news-row:first-child { border-top: 1px solid var(--c-hairline-2); }
.news-row:hover { background: color-mix(in srgb, var(--c-sand) 60%, transparent); }
.news-date {
  text-align: center;
  border-radius: var(--r-md);
  border: 1px solid var(--c-hairline);
  padding: .55rem .3rem .65rem;
  background: var(--c-surface);
}
.news-date .m { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--c-aqua-deep); }
.news-date .d { display: block; font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; line-height: 1.1; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.news-date .y { display: block; font-size: .7rem; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.news-body h3 { font-size: var(--step-1); margin-bottom: .3rem; }
.news-body p { color: var(--c-ink-2); font-size: .95rem; }
.news-tags { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .55rem; }
@media (max-width: 640px) {
  .news-row { grid-template-columns: 62px 1fr; }
  .news-row > .chip { grid-column: 2; justify-self: start; }
}

/* --------------------------------------------------------------------------
   13. DOCUMENTS
   -------------------------------------------------------------------------- */

.doc-tools {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
  padding: 1rem 1.15rem;
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-md);
  position: sticky; top: calc(var(--header-h) + 10px); z-index: 20;
  box-shadow: var(--shadow-sm);
}
.search-field { position: relative; flex: 1 1 260px; }
.search-field svg { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--c-muted); }
.search-field input {
  width: 100%; padding: .72rem .9rem .72rem 2.5rem;
  border: 1px solid var(--c-hairline); border-radius: var(--r-pill);
  background: var(--c-surface-2); color: var(--c-ink);
  font: inherit; font-size: .95rem;
}
.search-field input::placeholder { color: var(--c-muted); }

.filters { display: flex; gap: .4rem; flex-wrap: wrap; }
.filter {
  padding: .5rem .95rem; border-radius: var(--r-pill);
  border: 1px solid var(--c-hairline); background: var(--c-surface-2);
  color: var(--c-ink-2); font: inherit; font-size: .88rem; font-weight: 600;
  cursor: pointer; transition: all .18s ease;
}
.filter:hover { border-color: var(--c-rainstorm); }
.filter[aria-pressed="true"] { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }

.doc-group { margin-top: 2.5rem; }
.doc-group > h3 {
  display: flex; align-items: baseline; gap: .75rem;
  padding-bottom: .7rem; margin-bottom: .3rem;
  border-bottom: 2px solid var(--c-hairline);
}
.doc-group > h3 .count { font-family: var(--font-body); font-size: .8rem; font-weight: 600; color: var(--c-muted); }

.doc-row {
  display: flex; align-items: center; gap: 1rem;
  padding: .95rem .4rem;
  border-bottom: 1px solid var(--c-hairline-2);
  text-decoration: none; color: inherit;
  border-radius: var(--r-sm);
}
.doc-row:hover { background: var(--c-surface); color: inherit; }
.doc-ico {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--c-tint-slate);
  background: color-mix(in srgb, var(--c-rainstorm) 14%, transparent);
  color: var(--c-rainstorm);
}
.doc-ico svg { width: 18px; height: 18px; }
.doc-name { font-weight: 600; font-size: .99rem; }
.doc-sub { font-size: var(--step--1); color: var(--c-muted); }
.doc-go { margin-left: auto; color: var(--c-aqua-deep); font-size: var(--step--1); font-weight: 700; white-space: nowrap; }

/* A document listed in the library but not yet re-uploaded to this site.
   Rendered as a <div>, not an <a>, so there is nothing to click and no 404.
   Filling its url in content/documents.js restores the normal link. */
.doc-row.is-pending { cursor: default; opacity: .62; }
.doc-row.is-pending:hover { background: none; }
.doc-row.is-pending .doc-ico { background: var(--c-hairline-2); color: var(--c-muted); }
.doc-go--pending { color: var(--c-muted); font-weight: 600; font-style: italic; }

.empty-state {
  padding: 3rem 1.5rem; text-align: center;
  color: var(--c-muted); border: 1px dashed var(--c-hairline);
  border-radius: var(--r-md); margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   14. FORMS
   -------------------------------------------------------------------------- */

.form-card {
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  box-shadow: var(--shadow-sm);
}
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-weight: 600; font-size: .93rem; }
.field .hint { font-size: var(--step--1); color: var(--c-muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: .8rem .95rem;
  border: 1px solid var(--c-hairline); border-radius: var(--r-sm);
  background: var(--c-surface-2); color: var(--c-ink);
  font: inherit; font-size: .98rem;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--c-aqua); outline: 2px solid color-mix(in srgb, var(--c-aqua) 30%, transparent); outline-offset: 0;
}
.field-row { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.req { color: var(--c-alert); }

.notice {
  display: flex; gap: .9rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--r-md);
  background: var(--c-tint-aqua);
  background: color-mix(in srgb, var(--c-aqua) 9%, transparent);
  border: 1px solid var(--c-hairline);
  border-color: color-mix(in srgb, var(--c-aqua) 30%, transparent);
  font-size: .95rem; line-height: 1.55;
}
.notice svg { flex: none; width: 20px; height: 20px; color: var(--c-aqua-deep); margin-top: 2px; }
.notice--warn { background: var(--c-tint-warn); background: color-mix(in srgb, var(--c-warn) 10%, transparent); border-color: color-mix(in srgb, var(--c-warn) 34%, transparent); }
.notice--warn svg { color: var(--c-warn); }
.notice strong { display: block; margin-bottom: .15rem; }

/* --------------------------------------------------------------------------
   15. ACCORDION (FAQ)
   -------------------------------------------------------------------------- */

.acc { border-top: 1px solid var(--c-hairline); }
.acc details {
  border-bottom: 1px solid var(--c-hairline);
  background: transparent;
}
.acc summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.2rem .3rem;
  cursor: pointer; list-style: none;
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 24;
  font-weight: 600; font-size: var(--step-1); line-height: 1.3;
  color: var(--c-ink);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: ""; flex: none;
  width: 20px; height: 20px;
  background: currentColor; color: var(--c-aqua-deep);
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  transition: transform .25s ease;
}
.acc details[open] summary::after { transform: rotate(45deg); }
.acc summary:hover { color: var(--c-brand); }
.acc-body { padding: 0 .3rem 1.4rem; max-width: var(--measure); color: var(--c-ink-2); }
.acc-body p + p { margin-top: .85em; }

/* --------------------------------------------------------------------------
   14b. EMBEDDED GOOGLE FORM
   -------------------------------------------------------------------------- */

.gform-frame {
  position: relative;
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-md);
  overflow: hidden;
  background: #fff;
}
/* Shown only once the frame is known to be blocked, so a working embed never
   flashes it and a blocked one never leaves a blank white box. */
.gform-blocked {
  position: absolute; inset: 0; z-index: 2;
  display: none; place-items: center;
  padding: 2rem; text-align: center;
  background: var(--c-surface);
}
.gform-frame.is-blocked .gform-blocked { display: grid; }
.gform-frame.is-blocked iframe { visibility: hidden; }
.gform-blocked-t {
  font-family: var(--font-display);
  font-size: var(--step-1); font-weight: 600; color: var(--c-ink);
}
/* A blocked frame does not need the full form height. */
.gform-frame.is-blocked { height: auto; min-height: 320px; }
.gform-frame.is-blocked iframe { height: 320px; }
/* Height comes from --gform-h, set per form in content/site.js, so a longer
   form gets a taller frame and nobody has to scroll inside the iframe. */
.gform-frame iframe {
  display: block;
  width: 100%;
  height: var(--gform-h, 1600px);
  border: 0; background: #fff;
}
/* Narrow screens stack the questions, so every form runs taller. Phones use
   --gform-h-m (heightMobile in content/site.js). A form without one falls
   back to its desktop height plus 300px. */
@media (max-width: 760px) {
  .gform-frame iframe {
    height: var(--gform-h-m, calc(var(--gform-h, 1600px) + 300px));
  }
}
.gform-fallback { margin-top: .75rem; color: var(--c-muted); }
.gform-hint { margin-bottom: .8rem; color: var(--c-muted); }

/* A Google Form lays its own card out at about 640px. In the standard
   1.15fr/.85fr split the column leaves ~576px, which makes Google compress
   the form. Where a form is embedded, give that column enough room for the
   form's natural width — the supporting aside keeps its place beside it.
   Browsers without :has() simply keep the narrower column, which still works. */
@media (min-width: 900px) {
  .split--wide-left:has(.gform-frame) { grid-template-columns: 1.55fr .85fr; }
}

/* --------------------------------------------------------------------------
   15b. CALENDAR EMBED
   -------------------------------------------------------------------------- */

.cal-frame {
  position: relative;
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
  min-height: 620px;
}
.cal-frame iframe {
  display: block;
  width: 100%;
  height: 720px;
  border: 0;
  /* The Google embed is light-only; keep it on a white card in both themes
     rather than letting it sit on a dark ground looking broken. */
  background: #fff;
}
.cal-fallback {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  padding: 2rem;
  background: var(--c-surface);
  text-align: center;
}
.cal-frame.is-loaded .cal-fallback { display: none; }
.cal-frame.is-blocked .cal-fallback { display: grid; }
@media (max-width: 760px) {
  .cal-frame { min-height: 520px; }
  .cal-frame iframe { height: 560px; }
}

/* --------------------------------------------------------------------------
   16. COMMUNITY MAP
   -------------------------------------------------------------------------- */

.map-layout { display: grid; gap: 1.75rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 940px) { .map-layout { grid-template-columns: minmax(0, 1.55fr) minmax(280px, .85fr); align-items: start; } }

.map-frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--c-hairline);
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
  min-height: 460px;
}
.map-frame iframe {
  display: block;
  width: 100%;
  height: 560px;
  border: 0;
}
.map-fallback {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  padding: 2rem;
  background: var(--c-surface);
  text-align: center;
}
.map-frame.is-loaded .map-fallback { display: none; }
.map-frame.is-blocked .map-fallback { display: grid; }

/* Illustrated community map: fits the column, opens full size on tap. */
.map-frame--art { min-height: 0; }
.map-frame--art a { display: block; }
.map-frame--art img { display: block; width: 100%; height: auto; }
.map-zoom {
  position: absolute; right: .7rem; top: .7rem; z-index: 2;
  padding: .34rem .68rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-surface) 92%, transparent);
  background: rgba(255,255,255,.92);
  border: 1px solid var(--c-hairline);
  font-size: .74rem; font-weight: 700; letter-spacing: .02em;
  color: var(--c-ink-2);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}
@media (max-width: 760px) {
  .map-frame { min-height: 380px; }
  .map-frame iframe { height: 420px; }
  .map-frame--art { min-height: 0; }
  .map-zoom { right: .45rem; top: .45rem; padding: .26rem .5rem; font-size: .66rem; }
}

.legend { display: flex; flex-direction: column; gap: .4rem; }
.legend-item {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: .85rem .95rem;
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-md);
  background: var(--c-surface);
  text-align: left; font: inherit; color: inherit;
  cursor: pointer; width: 100%;
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.legend-item:hover, .legend-item.is-active {
  border-color: var(--c-aqua); background: color-mix(in srgb, var(--c-aqua) 7%, var(--c-surface));
  transform: translateX(2px);
}
.legend-item.is-static { cursor: default; }
.legend-item.is-static:hover { transform: none; }
.legend-dot { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .74rem; font-weight: 800; margin-top: 1px; }
.legend-item strong { display: block; font-size: .97rem; }
.legend-item span { font-size: var(--step--1); color: var(--c-muted); line-height: 1.45; }

/* --------------------------------------------------------------------------
   17. GALLERY
   -------------------------------------------------------------------------- */

.gal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 1rem;
}
.gal-item {
  border: 0; padding: 0; background: none; cursor: zoom-in;
  border-radius: var(--r-md); overflow: hidden; position: relative;
  box-shadow: var(--shadow-sm);
  transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease;
}
.gal-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.gal-item .media { border-radius: 0; }
.gal-item figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 2rem .9rem .75rem;
  background: linear-gradient(180deg, transparent, rgba(11,28,38,.82));
  color: #fff; font-size: .85rem; font-weight: 600; text-align: left;
  opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease;
}
.gal-item:hover figcaption, .gal-item:focus-visible figcaption { opacity: 1; transform: none; }
.gal-item.is-tall { grid-row: span 2; }
.gal-item.is-tall .media { height: 100%; aspect-ratio: auto; }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(9,20,27,.94);
  display: grid; place-items: center;
  padding: 1.5rem;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox figure { margin: 0; max-width: min(1100px, 100%); }
.lightbox .media { max-height: 78svh; border-radius: var(--r-md); }
.lightbox .media img { max-height: 78svh; width: auto; margin-inline: auto; }
.lightbox figcaption { color: #DCE7EC; text-align: center; margin-top: 1rem; font-size: .95rem; }
.lightbox-close {
  position: absolute; top: 1.2rem; right: 1.2rem;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1);
  color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.09);
  color: #fff; cursor: pointer; display: grid; place-items: center; font-size: 1.3rem;
}
.lightbox-nav.prev { left: 1rem; }
.lightbox-nav.next { right: 1rem; }

/* --------------------------------------------------------------------------
   18. BOARD & PEOPLE
   -------------------------------------------------------------------------- */

.person {
  display: flex; flex-direction: column; gap: .2rem;
  padding: 1.4rem;
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-lg);
}
.person .media { width: 84px; border-radius: 50%; margin-bottom: .9rem; }
.person .media::after { font-size: .52rem; padding: .35rem; text-align: center; inset: 34% 0 auto 0; }
.person-role { font-size: var(--step--1); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-aqua-deep); }
.person-name { font-family: var(--font-display); font-variation-settings: "WONK" 1; font-size: var(--step-1); font-weight: 600; }
.person-note { font-size: .92rem; color: var(--c-muted); margin-top: .4rem; }

.contact-block {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.contact-item { display: flex; gap: .9rem; align-items: flex-start; }
.contact-item svg { flex: none; width: 20px; height: 20px; color: var(--c-aqua-deep); margin-top: 4px; }
.contact-item > span { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.contact-item .k { display: block; font-size: var(--step--1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.contact-item .v { display: block; font-weight: 600; font-size: 1.02rem; overflow-wrap: anywhere; }
.contact-item .v a { color: inherit; }

/* --------------------------------------------------------------------------
   19. SPLIT / FEATURE
   -------------------------------------------------------------------------- */

.split { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--wide-left { grid-template-columns: 1.15fr .85fr; }
  .split--wide-right { grid-template-columns: .85fr 1.15fr; }
  .split--flip > *:first-child { order: 2; }
}

.stat-strip {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  padding: 1.6rem 0 0;
  border-top: 1px solid var(--c-hairline);
}
.stat-strip .v { font-family: var(--font-display); font-variation-settings: "WONK" 1; font-size: var(--step-3); font-weight: 600; line-height: 1; color: var(--c-brand); font-variant-numeric: tabular-nums; }
.stat-strip .k { font-size: var(--step--1); color: var(--c-muted); margin-top: .3rem; }

/* Progress bar for projects */
.progress { height: 7px; border-radius: 99px; background: var(--c-hairline); overflow: hidden; }
.progress i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--c-palm), var(--c-aqua)); }

.timeline { display: flex; flex-direction: column; gap: 0; }
.tl-item {
  display: grid; grid-template-columns: 132px 1fr; gap: 1.5rem;
  padding: 1.5rem 0; border-bottom: 1px solid var(--c-hairline-2);
}
.tl-year { font-family: var(--font-display); font-variation-settings: "WONK" 1; font-size: var(--step-2); font-weight: 600; color: var(--c-rainstorm); font-variant-numeric: tabular-nums; }
.tl-item h3 { font-size: var(--step-1); margin-bottom: .35rem; }
.tl-item p { color: var(--c-ink-2); font-size: .97rem; max-width: var(--measure); }
@media (max-width: 640px) { .tl-item { grid-template-columns: 1fr; gap: .4rem; } }

/* --------------------------------------------------------------------------
   20. FOOTER
   -------------------------------------------------------------------------- */

.site-footer { background: var(--c-deep); color: #C3D4DC; padding-block: clamp(3rem, 2rem + 4vw, 4.5rem) 2rem; }
.site-footer a { color: #C3D4DC; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.footer-brand { max-width: 34ch; }
.footer-brand .brand-name { color: #fff; font-size: 1.28rem; }
.footer-brand .brand-sub { color: #7E9AA8; }
.footer-brand p { color: #9FB6C1; font-size: .93rem; margin-top: .9rem; line-height: 1.6; }
.footer-col h2 { color: #fff; font-size: .78rem; font-family: var(--font-body); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; font-size: .93rem; }
.footer-bottom {
  margin-top: 2.75rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  font-size: .84rem; color: #86A0AD;
}

/* Credit and media-ownership strip, quietly below the legal line. */
.colophon {
  margin-top: 1.1rem; padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.08);
  display: grid; gap: .3rem;
  font-size: .78rem; line-height: 1.55; color: #86A0AD;
}
.colophon p { margin: 0; }
.colophon strong { color: #A8C2CE; font-weight: 700; }
.colophon a { color: #9DB4BF; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.18); }
.colophon a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.5); }
.colophon-sep { opacity: .5; }
@media (max-width: 620px) {
  /* Stack the credit onto its own lines rather than running it together. */
  .colophon-sep { display: block; height: 0; overflow: hidden; }
  .colophon a { display: inline-block; margin-top: .15rem; }
}

/* --------------------------------------------------------------------------
   21. MOBILE ACTION BAR
   -------------------------------------------------------------------------- */

.mobile-bar {
  position: fixed; inset: auto 0 0 0; z-index: 90;
  display: none;
  background: color-mix(in srgb, var(--c-surface) 94%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--c-hairline);
  padding: .45rem .35rem calc(.45rem + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 20px rgba(20,38,47,.10);
}
.mobile-bar ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.mobile-bar a {
  display: flex; flex-direction: column; align-items: center; gap: .22rem;
  padding: .45rem .2rem; border-radius: var(--r-sm);
  color: var(--c-ink-2); text-decoration: none;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em; text-align: center;
}
.mobile-bar a svg { width: 21px; height: 21px; }
.mobile-bar a[aria-current="page"] { color: var(--c-aqua-deep); }
@media (max-width: 780px) {
  .mobile-bar { display: block; }
  body { padding-bottom: 74px; }
}

/* --------------------------------------------------------------------------
   22. SCROLL REVEAL
   -------------------------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.75,.3,1), transform .7s cubic-bezier(.2,.75,.3,1); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .65s cubic-bezier(.2,.75,.3,1), transform .65s cubic-bezier(.2,.75,.3,1); }
.reveal-stagger.is-in > * { opacity: 1; transform: none; }
.reveal-stagger.is-in > *:nth-child(1) { transition-delay: .04s }
.reveal-stagger.is-in > *:nth-child(2) { transition-delay: .10s }
.reveal-stagger.is-in > *:nth-child(3) { transition-delay: .16s }
.reveal-stagger.is-in > *:nth-child(4) { transition-delay: .22s }
.reveal-stagger.is-in > *:nth-child(5) { transition-delay: .28s }
.reveal-stagger.is-in > *:nth-child(6) { transition-delay: .34s }
.reveal-stagger.is-in > *:nth-child(7) { transition-delay: .40s }
.reveal-stagger.is-in > *:nth-child(8) { transition-delay: .46s }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > *, .reveal-load > * { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   23. PAGE HEADER (interior pages)
   -------------------------------------------------------------------------- */

.page-head {
  position: relative;
  background: var(--c-deep);
  color: #fff;
  padding-block: clamp(3.5rem, 2rem + 7vw, 6.5rem) clamp(2.5rem, 1.5rem + 4vw, 4rem);
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + clamp(2.5rem, 1.5rem + 5vw, 5rem));
  overflow: hidden;
}
.page-head::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(46,198,190,.24) 0, transparent 55%),
    radial-gradient(80% 100% at 92% 100%, rgba(63,122,94,.34) 0, transparent 60%);
}
.page-head > * { position: relative; }
.page-head h1 { color: #fff; max-width: 20ch; }
.page-head .lede { color: #C9DCE4; max-width: 58ch; }
.page-head .eyebrow { color: var(--c-aqua-onDark); }


/* ── Photo page-head ──────────────────────────────────────────────────────
   The interior-page banner with a community photograph behind it. Same box,
   same padding and same type as the plain .page-head, so every interior page
   keeps an identical hero height and rhythm — only the backdrop changes.
   Readability comes from two stacked gradients: one across (text sits left),
   one up from the base. Both are tuned so white text clears 4.5:1 over any
   part of the photo the copy actually sits on.                            */
.page-head--photo {
  padding-block: clamp(2.75rem, 1.5rem + 5vw, 4.5rem) clamp(2.25rem, 1.25rem + 3vw, 3.25rem);
  padding-top: calc(var(--header-h) + clamp(2rem, 1rem + 4vw, 3.5rem));
  background: var(--c-deep);
  /* One height band for every interior page, with the copy centred in it, so
     the heroes line up whether the title runs to one line or three. */
  min-height: clamp(430px, 54svh, 545px);
  display: grid; align-items: center;
}
.page-head-media {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
}
.page-head-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
  display: block;
}
/* ::before is the readability scrim; it sits above the photo, below the text. */
.page-head--photo::before {
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(7,17,24,.74) 0%, rgba(7,17,24,.60) 40%, rgba(7,17,24,.30) 76%, rgba(7,17,24,.18) 100%),
    linear-gradient(to top,  rgba(7,17,24,.34) 0%, rgba(7,17,24,.06) 52%, transparent 74%),
    /* --scrim-boost: extra flat darkening for bright photos (set per page). */
    linear-gradient(0deg, rgba(7,17,24,var(--scrim-boost,0)), rgba(7,17,24,var(--scrim-boost,0))),
    radial-gradient(80% 100% at 92% 100%, rgba(63,122,94,.20) 0, transparent 60%);
}
.page-head--photo > * { z-index: 2; }
/* Must out-specify the rule above, or the photo paints over its own scrim and
   the overlay does nothing. Paint order: photo 0 -> scrim 1 -> copy 2. */
.page-head--photo > .page-head-media { z-index: 0; }
/* Video inside a photo page-head sits over its own poster, under the scrim. */
.page-head-media .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Narrow screens: the copy runs full width, so darken evenly rather than across. */
@media (max-width: 700px) {
  .page-head--photo::before {
    background:
      linear-gradient(to top, rgba(7,17,24,.80) 0%, rgba(7,17,24,.56) 52%, rgba(7,17,24,.44) 100%),
      linear-gradient(0deg, rgba(7,17,24,var(--scrim-boost,0)), rgba(7,17,24,var(--scrim-boost,0))),
      radial-gradient(90% 70% at 90% 0%, rgba(46,198,190,.12) 0, transparent 60%);
  }
}

.crumbs { display: flex; gap: .5rem; align-items: center; font-size: var(--step--1); color: #93B0BD; margin-bottom: 1rem; flex-wrap: wrap; }
.crumbs a { color: #93B0BD; text-decoration: none; }
.crumbs a:hover { color: #fff; }
.crumbs span { opacity: .55; }

/* --------------------------------------------------------------------------
   24. MISC
   -------------------------------------------------------------------------- */

.hr { border: 0; border-top: 1px solid var(--c-hairline); margin: 0; }
.center { text-align: center; margin-inline: auto; }
.tag-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.btn-row { display: flex; gap: .75rem; flex-wrap: wrap; }
.pill-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.pill-list li { display: flex; gap: .7rem; align-items: flex-start; font-size: .97rem; color: var(--c-ink-2); }
.pill-list li::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%;
  background: color-mix(in srgb, var(--c-palm) 20%, transparent);
  -webkit-mask: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233F7A5E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 12px; background-position: center; background-repeat: no-repeat;
}

.callout {
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
  box-shadow: var(--shadow-sm);
}
.callout--accent {
  background: linear-gradient(140deg, var(--c-brand), var(--c-deep));
  border-color: transparent; color: #fff;
}
.callout--accent h2, .callout--accent h3 { color: #fff; }
.callout--accent p { color: #C6DAE2; }

table.data { width: 100%; border-collapse: collapse; font-size: .96rem; }
table.data th, table.data td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--c-hairline-2); }
table.data th { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .09em; color: var(--c-muted); font-weight: 700; }
table.data td.nums { font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; border: 1px solid var(--c-hairline); border-radius: var(--r-md); background: var(--c-surface); }

.print-only { display: none; }
@media print {
  .site-header, .mobile-bar, .site-footer, .hero-scroll, .nav-scrim { display: none !important; }
  body { background: #fff; }
  .print-only { display: block; }
}

/* ==========================================================================
   25. COLLECTION-DAY NOTE
   A single glanceable statement for the thing residents ask about most.
   ========================================================================== */

.day-note {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1.1rem 1.3rem;
  border-radius: var(--r-lg);
  background: var(--c-tint-palm);
  background: color-mix(in srgb, var(--c-palm) 12%, var(--c-surface));
  border: 1px solid var(--c-hairline);
  border-color: color-mix(in srgb, var(--c-palm) 32%, transparent);
}
.day-note > div { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.day-note strong { font-size: var(--step-1); line-height: 1.3; color: var(--c-ink); }
.day-note > div > span { font-size: .95rem; color: var(--c-ink-2); }

.day-badge {
  flex: none;
  width: 62px; height: 62px;
  border-radius: 16px;
  display: grid; place-items: center;
  background: var(--c-palm);
  box-shadow: var(--shadow-sm);
}
.day-badge-d {
  font-family: var(--font-body);
  font-size: .82rem; font-weight: 800; letter-spacing: .08em;
  color: #fff;
}
@media (max-width: 480px) {
  .day-note { gap: .85rem; padding: 1rem; }
  .day-badge { width: 52px; height: 52px; border-radius: 14px; }
  .day-badge-d { font-size: .72rem; }
}

/* ==========================================================================
   26. EXTERNAL-LINK CUE
   Tells people a link leaves the site, in prose and lists where it matters.
   ========================================================================== */

.prose a[target="_blank"]::after,
.acc-body a[target="_blank"]::after,
.day-note a[target="_blank"]::after,
a.btn .ext::after {
  content: "";
  display: inline-block;
  width: .62em; height: .62em;
  margin-left: .32em;
  vertical-align: baseline;
  background: currentColor;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5H5v14h14v-5M14 4h6v6M20 4l-9 9'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5H5v14h14v-5M14 4h6v6M20 4l-9 9'/%3E%3C/svg%3E");
  opacity: .65;
}

/* ==========================================================================
   27. TOUCH TARGETS & SMALL-SCREEN COMFORT
   ========================================================================== */

@media (pointer: coarse) {
  table.data td a,
  .footer-brand p a,
  .contact-item .v a {
    display: inline-block;
    padding-block: .35rem;
    min-height: 24px;
  }
  .card-foot a,
  .callout > a,
  .callout a.small,
  .legend-item a,
  .snap a {
    display: inline-block;
    padding-block: .4rem;
    min-height: 24px;
  }
  .filter { padding: .68rem 1.05rem; }
  .nav-menu a { padding: .8rem .75rem; }
  .doc-row { padding: 1.1rem .5rem; }
  .legend-item { padding: 1rem 1.05rem; }
  .mobile-bar a { padding: .55rem .2rem; }
  .acc summary { padding: 1.35rem .3rem; }
}

/* The document toolbar is sticky; on a short phone screen it must not eat
   the results underneath it. */
@media (max-width: 640px) {
  .doc-tools { position: static; box-shadow: none; }
  .news-row { gap: .9rem; }
  .btn { padding: .82rem 1.25rem; }
  .btn--lg { padding: .95rem 1.45rem; font-size: var(--step-0); }
}

/* ==========================================================================
   28. QUIET MOTION
   Cards lift; photographs inside them breathe very slightly. Nothing else.
   ========================================================================== */

.card .media img { transition: transform .7s cubic-bezier(.2,.8,.3,1); }
a.card:hover .media img, .card--hover:hover .media img { transform: scale(1.03); }

/* A hairline that fades in from nothing — used between stacked sections so
   the page reads as chapters rather than one long scroll. */
.section + .section:not([class*="--"]) { border-top: 1px solid var(--c-hairline-2); }

/* ==========================================================================
   29. PRINT
   Residents do print the pool rules and the parking page.
   ========================================================================== */

@media print {
  .chooser, .day-badge { break-inside: avoid; }
  .acc details { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; word-break: break-all; }
}

/* ── 30. Sticky aside ─────────────────────────────────────────────────────
   Keeps a short sidebar in view beside a long left column instead of
   leaving a tall empty gutter. Disabled on narrow screens where the
   aside stacks underneath.                                               */
@media (min-width: 900px) {
  .aside-sticky { position: sticky; top: calc(var(--header-h) + 1.25rem); }
}
@media (prefers-reduced-motion: reduce) {
  .aside-sticky { position: static; }
}

/* ── 31. Standalone "read more" link ──────────────────────────────────────
   A link that is the whole paragraph is a target, not prose, so WCAG 2.5.8's
   inline exception does not cover it. Give it a real hit area.            */
.link-more {
  display: inline-flex; align-items: center;
  min-height: 24px; padding-block: .3rem;
  font-weight: 600;
}
@media (pointer: coarse) { .link-more { min-height: 32px; } }

/* ==========================================================================
   32. FLOOR PLANS — the original Larwin models
   Scoped to .fp-* so nothing here can reach any other page. Built entirely
   from the existing tokens; the only new note is a restrained mid-century
   accent (thin rules, a small starburst, warm archival ground) that lets the
   floor-plan artwork carry the period character.
   ========================================================================== */

/* Quick model directory ---------------------------------------------------- */
.fp-directory { display: grid; gap: .4rem; }
.fp-dir-link {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  min-height: 44px; padding: .6rem .8rem;
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-md);
  background: var(--c-surface);
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.fp-dir-link strong { font-family: var(--font-display); font-size: 1.02rem; color: var(--c-ink); }
.fp-dir-link span   { font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--c-muted); }
.fp-dir-link:hover,
.fp-dir-link:focus-visible {
  border-color: var(--c-aqua-deep);
  background: var(--c-tint-aqua);
  background: color-mix(in srgb, var(--c-aqua) 9%, var(--c-surface));
  transform: translateX(2px);
}

/* One model ---------------------------------------------------------------- */
.fp-model {
  display: grid; gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  align-items: start;
  padding-block: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  border-top: 1px solid var(--c-hairline);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.fp-model:first-child { border-top: 0; padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }

/* A thin mid-century rule with a small starburst, between models. */
.fp-model + .fp-model { position: relative; }
.fp-model + .fp-model::before {
  content: "✳";
  position: absolute; top: -.72em; left: 50%; transform: translateX(-50%);
  padding: 0 .7rem;
  background: var(--c-sand);
  color: var(--c-bougain);
  font-size: .95rem; line-height: 1;
}

@media (min-width: 900px) {
  /* The Larwin sheets are tall portrait brochures, so the artwork column gets
     the larger share — at this width the room labels stay legible in place. */
  .fp-model { grid-template-columns: 1.35fr .9fr; }
  /* Mirror the track sizes as well as the order, or the flipped rows would put
     the artwork in the narrow column and the plans would shrink on every
     second model. */
  .fp-model.is-flipped { grid-template-columns: .9fr 1.35fr; }
  .fp-model.is-flipped .fp-art  { order: 2; }
  .fp-model.is-flipped .fp-info { order: 1; }
}

/* The artwork ------------------------------------------------------------- */
.fp-art { margin: 0; }
.fp-art-btn {
  display: block; width: 100%;
  padding: 0; border: 0; background: none; cursor: pointer;
  position: relative;
  border-radius: var(--r-lg);
}
.fp-art-btn:focus-visible { outline: 3px solid var(--c-aqua-deep); outline-offset: 3px; }
.fp-art figcaption {
  margin-top: .7rem;
  font-size: .85rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-muted); text-align: center;
}

/* Framed like a brochure sheet: warm ground, generous padding, never cropped. */
.media--plan {
  aspect-ratio: auto;
  background: #FBF7EE;
  border: 1px solid var(--c-hairline);
  box-shadow: var(--shadow-sm);
  padding: clamp(.9rem, .5rem + 1.6vw, 1.9rem);
  display: grid; place-items: center;
  min-height: 260px;
}
.media--plan img {
  width: 100%; height: auto;
  max-height: 82svh;
  object-fit: contain;                 /* never crop the plan */
  border-radius: 0;
}
.fp-zoom {
  position: absolute; right: .8rem; top: .8rem;
  padding: .3rem .62rem;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.93);
  border: 1px solid var(--c-hairline);
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  color: var(--c-ink-2);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
  opacity: 0; transition: opacity .2s ease;
}
.fp-art-btn:hover .fp-zoom,
.fp-art-btn:focus-visible .fp-zoom { opacity: 1; }
/* No artwork in place yet: wireMedia() removes an image that fails to load and
   the labelled .media placeholder shows through, so the affordance that would
   promise a larger view is hidden too.
   NB: never use display:none on the <img> here — a lazily-loaded image that is
   display:none is never fetched, so it can never fire the load event that adds
   .has-photo, and a perfectly good plan would stay invisible forever. */
.media--plan:not(.has-photo)      { background: var(--c-sand); }
.fp-art-btn:has(.media--plan:not(.has-photo)) { cursor: default; }
.fp-art-btn:has(.media--plan:not(.has-photo)) .fp-zoom { display: none; }

/* The information panel ---------------------------------------------------- */
.fp-info h3 {
  font-size: var(--step-3); line-height: 1.05; margin: 0;
  letter-spacing: -.015em;
}
.fp-sqft { font-size: .95rem; color: var(--c-ink-2); margin: 0; }
.fp-sqft strong { color: var(--c-ink); }

.fp-chips { list-style: none; margin: .35rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.fp-chip {
  padding: .34rem .7rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-hairline);
  background: var(--c-tint-aqua);
  background: color-mix(in srgb, var(--c-aqua) 11%, var(--c-surface));
  font-size: .8rem; font-weight: 700; letter-spacing: .01em;
  color: var(--c-aqua-deep);
  white-space: nowrap;
}

.fp-block { margin-top: .4rem; }
.fp-block h4 {
  font-family: var(--font-body);
  font-size: .74rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--c-muted);
  margin: 0 0 .5rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--c-hairline-2);
}
.fp-details { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.fp-details li {
  position: relative; padding-left: 1.15rem;
  font-size: .93rem; color: var(--c-ink-2);
}
.fp-details li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; transform: rotate(45deg);
  background: var(--c-bougain);
}
.fp-note {
  margin: .3rem 0 0;
  padding: .7rem .85rem;
  border-left: 3px solid var(--c-warn);
  background: var(--c-tint-warn);
  background: color-mix(in srgb, var(--c-warn) 12%, transparent);
  font-size: .89rem; color: var(--c-ink-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* Mobile: always artwork first, then the information. */
@media (max-width: 899px) {
  .fp-model,
  .fp-model.is-flipped { grid-template-columns: minmax(0, 1fr); }
  .fp-model .fp-art,
  .fp-model.is-flipped .fp-art  { order: 1; }
  .fp-model .fp-info,
  .fp-model.is-flipped .fp-info { order: 2; }
  .media--plan img { max-height: none; }
  .fp-zoom { opacity: 1; }              /* no hover on touch — always show it */
}

/* The lightbox holds a plan sheet, not a photo. */
/* A plan sheet is there to be read, so use as much of the screen as possible. */
.lightbox .media--plan { background: #FBF7EE; max-height: 90svh; padding: clamp(.6rem, .3rem + 1vw, 1.1rem); }
.lightbox .media--plan img { max-height: 86svh; width: auto; max-width: 100%; }