/* ==========================================================================
   Town of Cloud Lake, Florida — demo site
   Single hand-written stylesheet. No external requests, no frameworks.
   Aesthetic: a small lakeside town, est. 1935 — "A Bird Sanctuary City."
   Newsreader (display serif) + Public Sans (humanist body, the U.S. gov typeface),
   lake blue, warm sand, sanctuary green, water-ripple texture.
   Every text/background pair verified >=4.5:1 (body) / >=3:1 (large/UI) — see README.
   ========================================================================== */

/* ---- Self-hosted fonts (offline; zero external requests) ---------------- */
@font-face { font-family:"Public Sans"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/publicsans-400.woff2") format("woff2"); }
@font-face { font-family:"Public Sans"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/publicsans-600.woff2") format("woff2"); }
@font-face { font-family:"Public Sans"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fonts/publicsans-700.woff2") format("woff2"); }
@font-face { font-family:"Newsreader"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/newsreader-400.woff2") format("woff2"); }
@font-face { font-family:"Newsreader"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/newsreader-600.woff2") format("woff2"); }
@font-face { font-family:"Newsreader"; font-style:italic; font-weight:400; font-display:swap;
  src:url("fonts/newsreader-italic-400.woff2") format("woff2"); }

/* ---- Design tokens ------------------------------------------------------ */
:root {
  /* Lake blues */
  --lake:      #124F6B;   /* primary — masthead */
  --lake-700:  #17607F;   /* links / secondary */
  --lake-900:  #0B3548;   /* headings / deep */
  --deep:      #072634;   /* deepest — utility bar / footer */
  --mist:      #E3EDF2;   /* pale blue fill */

  /* Sanctuary + sun accents */
  --reed:      #2F6B4F;   /* sanctuary green */
  --reed-ink:  #1F4A36;   /* green text */
  --sun:       #E0A32E;   /* warm accent, on dark surfaces only */
  --brass:     #8A6A1E;   /* rules/ticks on light */

  /* Neutrals — warm sand */
  --ink:       #1F1B16;
  --ink-soft:  #524A3C;
  --paper:     #FBF9F5;
  --card:      #FFFFFF;
  --sand:      #F2EBDD;
  --sand-line: #DDD2BC;
  --line:      #D8D2C6;

  /* Callouts */
  --amber-bg:  #FBF1D6;
  --amber-line:#8A6212;
  --amber-ink: #533905;

  /* Metrics */
  --wrap:   1100px;
  --prose:  68ch;
  --radius: 4px;
  /* Not --gap: Elementor sets .elementor-element { --gap: initial }, which
     erased the theme's gutters inside every widget. */
  --cl-gap: clamp(1.25rem, 3vw, 2rem);
  --pad-y:  clamp(2.75rem, 6vw, 4.5rem);
  --shadow: 0 1px 0 rgba(7,38,52,.04), 0 10px 28px -14px rgba(7,38,52,.22);
  --shadow-lift: 0 2px 0 rgba(7,38,52,.05), 0 16px 34px -16px rgba(7,38,52,.30);

  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-body: "Public Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  /* Textures — water ripples */
  --ripple-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.08' stroke-width='1.1'%3E%3Cpath d='M-5 12 q 15 -7 30 0 t 30 0 t 30 0 t 30 0'/%3E%3Cpath d='M-5 30 q 15 -7 30 0 t 30 0 t 30 0 t 30 0'/%3E%3Cpath d='M-5 48 q 15 -7 30 0 t 30 0 t 30 0 t 30 0'/%3E%3C/g%3E%3C/svg%3E");
  --ripple-sand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cg fill='none' stroke='%23124F6B' stroke-opacity='0.055' stroke-width='1.1'%3E%3Cpath d='M-5 12 q 15 -7 30 0 t 30 0 t 30 0 t 30 0'/%3E%3Cpath d='M-5 30 q 15 -7 30 0 t 30 0 t 30 0 t 30 0'/%3E%3Cpath d='M-5 48 q 15 -7 30 0 t 30 0 t 30 0 t 30 0'/%3E%3C/g%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Recurring shades, tokenised per the design handoff. */
  --sun-soft: #F3DFB0;
  --chrome-text: #DCE7EC;
  --chrome-text-dim: #BFD2DA;
  --control-line: #7C7566;
  --lake-800: #103F55;
}

/* ---- Reset / base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@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; font-family: var(--font-body); font-size: 1.125rem; line-height: 1.62;
  color: var(--ink); background-color: var(--paper); position: relative;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  /* A long record title or a pasted county URL must wrap, not clip or force
     sideways scrolling (WCAG 2.2 AA 1.4.10). break-word leaves min-content
     sizing alone, so no grid or flex track is resized. */
  overflow-wrap: break-word;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--grain); background-size: 140px 140px; opacity: .02;
}
body > * { position: relative; z-index: 1; }
img, svg { max-width: 100%; height: auto; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; color: var(--lake-900); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.005em; }
h1 { font-size: clamp(2.25rem, 5vw, 3.3rem); line-height: 1.07; letter-spacing: -.015em; }
h2 { font-size: clamp(1.55rem, 3.3vw, 2.15rem); }
h3 { font-size: 1.38rem; }
h4 { font-family: var(--font-body); font-size: .95rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--lake-700); margin: 0 0 .5em; }
p, ul, ol, dl, table { margin: 0 0 1.15rem; }
a { color: var(--lake-700); text-underline-offset: .16em; text-decoration-thickness: 1px; }
a:hover { color: var(--lake-900); }
strong { font-weight: 700; }
small { font-size: .86rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

/* ---- Visually hidden ---------------------------------------------------- */
/* Owned by the theme on purpose. These labels are the accessible names of the
   search toggle, the search field and the dialog close button; borrowing the
   rule from core's block-library or from Elementor would make them visible
   text in the masthead the moment either stylesheet stops loading. */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; word-wrap: normal;
}

/* ---- Focus -------------------------------------------------------------- */
:focus-visible { outline: 3px solid var(--lake-700); outline-offset: 2px; border-radius: 2px; }
.site-header a:focus-visible, .site-header button:focus-visible,
.util-bar a:focus-visible, .site-footer a:focus-visible,
.skip-link:focus-visible,
.hero a:focus-visible, .page-head a:focus-visible { outline-color: var(--sun); }
/* Gold alone fell to 2.3–2.7:1 where it crossed the emblem or the current-page
   pill. A deep band outside it keeps one contrasting edge on every side. */
.site-header a:focus-visible, .site-header button:focus-visible, .skip-link:focus-visible { box-shadow: 0 0 0 7px var(--deep); }
.primary-nav a[aria-current="page"]:focus-visible { box-shadow: inset 0 -3px 0 var(--sun), 0 0 0 7px var(--deep); }
/* The meeting card is a white island inside the dark hero: gold on white is
   2.2:1, so it keeps the light-surface ring. */
.hero .meeting-card a:focus-visible { outline-color: var(--lake-700); }

/* ---- Skip link ---------------------------------------------------------- */
/* Hidden by its own height, not by a fixed offset: the box is rem-driven, so a
   hard-coded -60px stops covering it once the resident enlarges text. */
.skip-link {
  position: absolute; left: 8px; top: 8px; background: var(--deep); color: #fff;
  padding: .65rem 1rem; border-radius: var(--radius); z-index: 1000; text-decoration: none;
  font-weight: 700; transform: translateY(calc(-100% - 16px)); transition: transform .15s ease;
}
.skip-link:focus { transform: none; color: #fff; }

/* ---- Layout helpers ----------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
main { display: block; }
.section { padding-block: var(--pad-y); }
.section--sand { background-color: var(--sand); background-image: var(--ripple-sand); background-size: 120px 60px; border-block: 1px solid var(--sand-line); }
.prose { max-width: var(--prose); }
/* .wrap.prose centred the article away from the page heading; keep the page's
   left edge and cap each block at the reading measure instead. */
.wrap.prose { max-width: var(--wrap); }
.wrap.prose > * { max-width: var(--prose); }
.prose li { margin-bottom: .45rem; }
.lede { font-size: 1.2rem; line-height: 1.55; color: var(--ink-soft); max-width: 62ch; }

.eyebrow {
  /* Wraps so the label can drop below its rule instead of past the viewport
     when text is enlarged; the rule itself is fixed-width and cannot shrink. */
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lake-700); margin: 0 0 .7rem;
}
.eyebrow::before { content: ""; width: 1.6rem; height: 2px; background: currentColor; opacity: .85; flex: 0 0 auto; }

/* ---- Utility bar -------------------------------------------------------- */
.util-bar { background: var(--deep); color: var(--chrome-text); font-size: .82rem; }
.util-inner { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; align-items: center; justify-content: space-between; padding-block: .4rem; }
.util-bar p { margin: 0; }
.util-official { display: inline-flex; align-items: center; gap: .5rem; }
.util-star { color: var(--sun); font-size: .8em; }
.util-bar a { color: #fff; text-decoration: none; font-weight: 600; }
.util-bar a:hover { text-decoration: underline; }
.util-contact { color: var(--chrome-text-dim); }

/* ---- Masthead ----------------------------------------------------------- */
.site-header {
  background-color: var(--lake);
  background-image: linear-gradient(180deg, #14576F, #0F4459), var(--ripple-light);
  background-size: auto, 120px 60px;
  color: #fff; border-bottom: 3px solid var(--sun);
}
.site-header a { color: #fff; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .85rem; }
.brand { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; }
.brand:hover { color: #fff; }
.brand .emblem { flex: 0 0 auto; width: 58px; height: 58px; }
/* An image logo keeps its own proportions: the Town seal is a wide sign, not a roundel. */
.brand .emblem--image { width: auto; max-width: 120px; object-fit: contain; }
@media (max-width: 420px){ .brand .emblem--image { height: 46px; } }
.brand-name { display: flex; flex-direction: column; line-height: 1.02; }
.brand-name .b1 { font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; }
.brand-name .b2 { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sun-soft); margin-top: .2rem; }

/* ---- Primary nav -------------------------------------------------------- */
.nav-toggle {
  display: none; align-items: center; gap: .55rem; background: transparent; color: #fff;
  border: 2px solid rgba(255,255,255,.55); border-radius: var(--radius);
  padding: .5rem .85rem; font: inherit; font-weight: 700; cursor: pointer;
}
.nav-toggle .bars { display: inline-block; width: 20px; height: 2px; background: #fff; position: relative; }
.nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: #fff; }
.nav-toggle .bars::before { top: -6px; } .nav-toggle .bars::after { top: 6px; }

.primary-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: .1rem; margin: 0; padding: 0; }
.primary-nav a { display: block; padding: .5rem .7rem; border-radius: var(--radius); text-decoration: none; font-weight: 600; font-size: .98rem; color: #fff; }
.primary-nav a:hover { background: rgba(255,255,255,.14); color: #fff; }
.primary-nav a[aria-current="page"] { background: rgba(255,255,255,.16); box-shadow: inset 0 -3px 0 var(--sun); }

/* ---- Site search -------------------------------------------------------- */
.site-search-toggle {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: 0 0 auto;
  border: 2px solid rgba(255,255,255,.7); border-radius: 50%; background: transparent; color: #fff; cursor: pointer;
}
/* Only the dialog-capable document gets the icon button; everyone else keeps
   the ordinary header form below it. */
.no-js .site-search-toggle, html:not(.has-search-dialog) .site-search-toggle { display: none; }
.site-search-toggle:hover { background: rgba(255,255,255,.14); }
.site-search-toggle svg { width: 1.25rem; height: 1.25rem; }
.header-search { flex: 1 1 15rem; max-width: 22rem; margin-left: auto; }
.cloudlake-site-search { margin: 0 0 1.5rem; }
.header-search .cloudlake-site-search { margin: 0; }
/* Wraps rather than crushing the field to a couple of characters when a
   resident enlarges text (SC 1.4.4). */
.cloudlake-site-search__group { display: flex; align-items: stretch; flex-wrap: wrap; }
.cloudlake-site-search__input {
  min-width: 0; flex: 1 1 12ch; font: inherit; color: var(--ink); background: var(--card);
  border: 2px solid var(--control-line); border-right: 0; border-radius: var(--radius) 0 0 var(--radius);
  padding: .58rem .7rem;
}
.cloudlake-site-search__submit {
  flex: 0 0 auto;
  border: 2px solid var(--lake-700); border-radius: 0 var(--radius) var(--radius) 0;
  padding: .58rem .8rem; background: var(--lake-700); color: #fff; font: inherit; font-weight: 700; cursor: pointer;
}
/* No media query splits the joined pill: `em` in a media query always resolves
   against the initial 16px and cannot see a root font-size change, so such a
   rule would fire on every phone and never on the zoom case it claims to cover.
   The field keeps its room from the ch-based flex-basis above, which does scale
   with text size. */
.cloudlake-site-search__submit:hover { background: var(--lake-900); border-color: var(--lake-900); }
.header-search .cloudlake-site-search__input { border-color: rgba(255,255,255,.7); }
.header-search .cloudlake-site-search__submit { background: var(--sun); border-color: var(--sun); color: var(--deep); }
.header-search .cloudlake-site-search__submit:hover { background: var(--sun-soft); border-color: var(--sun-soft); }
.has-search-dialog .header-search--fallback { display: none; }
/* Without the dialog the plain form takes its own row, so it never squeezes the
   nav onto two lines. */
html:not(.has-search-dialog) .header-search { order: 3; flex-basis: 100%; max-width: none; margin: 0; }
.site-search-dialog {
  width: min(100% - 2rem, 42rem); border: 0; padding: 0; background: transparent; color: var(--ink);
}
.site-search-dialog::backdrop { background: rgba(7,38,52,.72); }
.site-search-dialog__inner { background: var(--paper); border: 1px solid var(--sand-line); border-top: 5px solid var(--sun); border-radius: var(--radius); box-shadow: 0 20px 44px -18px rgba(0,0,0,.5); padding: clamp(1.25rem, 4vw, 2rem); }
/* Wraps so the close button drops below the title rather than off the panel
   when a resident enlarges text on a narrow screen. */
.site-search-dialog__heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.site-search-dialog__heading h2 { margin: 0; min-width: 0; }
.site-search-dialog__close { display: inline-grid; place-items: center; width: 2.35rem; height: 2.35rem; flex: 0 0 auto; border: 2px solid var(--lake-700); border-radius: 50%; background: var(--card); color: var(--lake-900); cursor: pointer; font-size: 1.6rem; line-height: 1; }
.site-search-dialog .cloudlake-site-search { margin: 0; }
.site-search-dialog .cloudlake-site-search__input { min-height: 3rem; }
.cloudlake-search-count { color: var(--ink-soft); margin-top: 1.25rem; }
.cloudlake-search-result { padding-block: 1.35rem; border-bottom: 1px solid var(--line); }
.cloudlake-search-result .eyebrow { margin-bottom: .4rem; }
.cloudlake-search-result h2 { font-size: 1.55rem; }
.nav-links { display: flex; gap: .5rem; margin-top: 1.5rem; }
.nav-links .page-numbers { padding: .35rem .65rem; border: 1px solid var(--line); border-radius: var(--radius); }
.nav-links .current { background: var(--lake); color: #fff; border-color: var(--lake); }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; margin: .2rem .4rem .2rem 0;
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  padding: .72rem min(1.2rem, 4vw); border-radius: var(--radius); border: 2px solid transparent;
  /* At 200% text a label must wrap, or it spills out of the button (SC 1.4.4). */
  flex-wrap: wrap; overflow-wrap: anywhere; text-align: left;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  max-width: 100%;
}
.btn::after { content: "\2192"; transition: transform .18s ease; }
.btn:hover::after { transform: translateX(3px); }
.btn--primary { background: var(--lake); color: #fff; }
.btn--primary:hover { background: var(--lake-900); color: #fff; }
.btn--ghost { background: transparent; color: var(--lake-700); border-color: var(--lake-700); }
.btn--ghost:hover { background: var(--lake-700); color: #fff; }
.btn--reed { background: var(--reed-ink); color: #fff; }
.btn--reed:hover { background: #163826; color: #fff; }

/* ---- Hero --------------------------------------------------------------- */
.hero {
  color: #fff; position: relative; overflow: hidden; background-color: var(--lake-800);
  background-image: linear-gradient(165deg, #155670 0%, #08303F 78%), var(--ripple-light);
  background-size: auto, 120px 60px;
}
.hero-inner { position: relative; display: grid; gap: var(--cl-gap); padding-block: var(--pad-y); grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; }
.hero h1 { color: #fff; margin-bottom: .3em; }
.hero .lede { color: rgba(255,255,255,.94); }
/* --sun over the hero gradient measures 3.86:1 at mobile type sizes; the
   masthead's lighter gold clears 4.5:1 at every width. */
.hero .eyebrow { color: var(--sun-soft); }
.hero .btn--ghost { color: #fff; border-color: rgba(255,255,255,.75); }
.hero .btn--ghost:hover { background: #fff; color: var(--lake-900); }
.cloudlake-home-hero__aside { display: grid; gap: 1rem; min-width: 0; }
.cloudlake-home-hero .meeting-card { margin: 0; }

/* v2 homepage hero: the Town Hall photograph sits behind a deep-blue scrim.
   It is still a real, described photograph (it keeps its alt text), not
   decoration. Every text pair is measured against the scrim alone, so the copy
   stays readable if the image fails to load: background-color is the
   darkest the scrim ever gets. */
.hero--bg { background-color: #082634; background-image: none; }
.hero--bg .hero-photo { position: absolute; inset: 0; z-index: 0; margin: 0; }
.hero--bg .hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero--bg::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* The design's ramp. An earlier, darker version of this held the photograph
     back further than the design does; measuring settled it. Compositing the
     hero photo under this gradient and sampling the worst pixel beneath each
     text run gives 8.72:1 for the eyebrow, 9.66:1 for the h1 and 7.43:1 for the
     lede. Against a pure white photograph — the worst case any Town photo could
     be — it still gives 7.15, 6.12 and 5.64 against requirements of 4.5, 3 and
     4.5. The extra darkness bought no accessibility, only a dimmer photo. */
  background: linear-gradient(90deg, rgba(8,38,52,.94) 0%, rgba(8,38,52,.82) 42%, rgba(8,38,52,.55) 72%, rgba(8,38,52,.42) 100%), var(--ripple-light);
  background-size: auto, 120px 60px;
}
.hero--bg .hero-inner { z-index: 2; }
/* Stacked, the copy runs the full width, so the scrim must be dark everywhere. */
@media (max-width: 860px){
  .hero--bg::after { background: linear-gradient(180deg, rgba(8,38,52,.9) 0%, rgba(8,38,52,.82) 100%), var(--ripple-light); background-size: auto, 120px 60px; }
}
.hero .eyebrow::before { content: none; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .2rem .4rem; margin: 1.3rem 0 0; }

/* Real Town photos are editorial figures: bordered image, caption beneath. */
.photo-figure { margin: 0; }
.photo-figure__image { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); }
.photo-figure figcaption { margin-top: .6rem; color: var(--ink-soft); font-size: .95rem; line-height: 1.45; }
.photo-figure--history, .photo-figure--contact { width: 100%; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: var(--cl-gap); margin-top: 1rem; }
.photo-grid figure { margin: 0; }
.photo-grid img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); }

.meeting-card {
  background: var(--card); color: var(--ink); border-radius: var(--radius);
  padding: 1.6rem min(1.7rem, 5vw); box-shadow: 0 20px 44px -18px rgba(0,0,0,.5); border-top: 5px solid var(--sun);
}
.meeting-card .eyebrow { color: var(--reed-ink); }
.meeting-card .m-date { font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; color: var(--lake-900); line-height: 1.05; margin: .1rem 0; }
.meeting-card .m-meta { margin: .1rem 0; color: var(--ink-soft); }
.meeting-card dl { margin: .9rem 0 1.1rem; border-top: 1px solid var(--line); padding-top: .9rem; }
.meeting-card dt { font-weight: 700; color: var(--lake-900); }

/* ---- Cards -------------------------------------------------------------- */
/* min(…, 100%): a fixed floor overflows any container narrower than it, e.g.
   the padded notices box at 320px with enlarged text (SC 1.4.10). In rem
   (260px at default size), so enlarged text drops a column instead of
   squeezing every card's text to a sliver (SC 1.4.4). */
.card-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(16.25rem, 100%), 1fr)); }
/* Spacing is a token, never a number typed at a call site. These replace inline
   style attributes that used to be seeded into the Clerk's own document, where
   she could not remove them. */
.card-grid--spaced, .cloudlake-cards-spaced { margin-top: 1.5rem; }
.card-grid--single { grid-template-columns: minmax(0, 1fr); }
.card--flat { position: static; }
.card {
  position: relative; background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--reed); border-radius: var(--radius);
  padding: 1.35rem min(1.4rem, 5vw) 1.4rem; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: .45rem;
  transition: transform .16s ease, box-shadow .16s ease, border-left-color .16s ease;
}
/* Only a card that is one big link lifts on hover. A notice card holds separate
   links, so lifting the whole card would promise a click target it isn't. */
.card:not(.card--flat):hover { transform: translateY(-2px); border-left-color: var(--lake); box-shadow: var(--shadow-lift); }
.card .card-icon { width: 34px; height: 34px; color: var(--lake); }
.card h3 { margin: 0; font-size: 1.26rem; }
.card h3 a { color: var(--lake-900); text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; }
.card p { color: var(--ink-soft); margin: 0; font-size: 1rem; }
.card .more { margin-top: auto; padding-top: .3rem; font-weight: 700; font-size: .95rem; color: var(--lake-700); }

/* ---- Tables ------------------------------------------------------------- */
/* position: relative keeps screen-reader-only text in a cell (the View and
   Download links name their record) inside the scroller; otherwise it is placed
   against the page and widens the whole document on a phone. */
.table-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1.25rem; border: 1px solid var(--line); border-top: 3px solid var(--brass); border-radius: var(--radius); background: var(--card); }
table.data { width: 100%; border-collapse: collapse; font-size: 1rem; background: var(--card); }
table.data caption { font-family: var(--font-display); font-weight: 600; text-align: left; color: var(--lake-900); padding: 1rem 1rem .7rem; font-size: 1.2rem; }
table.data th, table.data td { text-align: left; padding: .72rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data thead th { background: var(--lake-900); color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; border-bottom: 0; }
table.data tbody tr:nth-child(even) { background: #FAF6EE; }
table.data tbody tr:hover { background: var(--mist); }
table.data th[scope="row"] { font-weight: 700; color: var(--lake-900); }
table.data a { font-weight: 600; }
.table-scroll > table.data { margin-bottom: 0; }
.cloudlake-officials-directory table.data { min-width: 44rem; }
/* Beside the aside the column is ~600px, so the 44rem floor hid the Term column
   behind a sideways scroll on every desktop. Stacked, the floor still applies. */
@media (min-width: 860px){ .cols--2 .cloudlake-officials-directory table.data { min-width: 0; } }
/* Addresses and URLs are single unbreakable tokens. `break-word` on body is not
   enough for them: it wraps text but does NOT reduce an element's min-content
   contribution, so a grid or flex track still sizes itself to the whole
   un-wrapped string and pushes the page sideways. `anywhere` does reduce
   min-content, which is why the design handoff called for it by name. It
   belongs everywhere the Town renders an address, not only in the directory. */
.cloudlake-officials-directory table.data a,
.info-dl dd,
.meeting-card dd,
.cloudlake-contact-details dd,
.site-footer a { overflow-wrap: anywhere; }

.pill { display: inline-block; font-size: .72rem; font-weight: 700; padding: .16rem .55rem; border-radius: 2px; letter-spacing: .04em; text-transform: uppercase; }
.pill--live { background: #DDEBE2; color: var(--reed-ink); border: 1px solid #93BAA4; }
.pill--pending { background: var(--amber-bg); color: var(--amber-ink); border: 1px solid var(--amber-line); }

/* ---- Blocks ------------------------------------------------------------- */
/* Label/value pairs. The label and value bases sum to the whole line, so a
   following label can never join a value's line; when the value cannot keep
   8em beside its label it wraps beneath it. Both sides are em, so the switch
   follows the resident's text size, which no viewport query can see
   (SC 1.4.4). A grid track here let the value shrink to one glyph. */
.info-dl, .meeting-card dl {
  --dl-label: 6.5em;
  display: flex; flex-wrap: wrap; column-gap: 1.2rem; row-gap: .2rem;
}
.info-dl dt, .meeting-card dt { flex: 0 0 min(var(--dl-label), 100%); }
.info-dl dd, .meeting-card dd { flex: 1 1 calc(100% - var(--dl-label) - 1.2rem - 1px); min-width: min(8em, 100%); margin: 0 0 .2rem; }
.info-dl dt { font-weight: 700; color: var(--lake-900); }
/* Must follow the shared rule above: same specificity, so order decides.
   Label widths are measured, not guessed: the longest panel label ("Office
   hours") is 5.9em and the longest card label ("Agenda") 3.7em. */
.meeting-card dl {
  --dl-label: 4em;
}

/* Inner padding is capped by the viewport: in rem alone it grows with text size
   and, nested, left a 60px text column at 320px and 200% text (SC 1.4.4). */
.panel { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--lake); border-radius: var(--radius); padding: 1.3rem min(1.45rem, 5vw); box-shadow: var(--shadow); }
.panel--reed { border-left-color: var(--reed); }
.panel h3 { margin-top: 0; }
/* One component, two shapes: a band on the homepage, stacked in a sidebar. */
.cloudlake-accommodation-panel { display: flex; flex-wrap: wrap; gap: 1rem 3rem; align-items: center; justify-content: space-between; }
.cloudlake-accommodation-panel > * { min-width: 0; }
.cloudlake-accommodation-panel__copy { flex: 1 1 30ch; }
.cloudlake-accommodation-panel__copy p { margin: 0; }
/* A definite basis: an auto basis sizes the list as if every label and value
   sat on one line, which always forced it under the copy. */
.cloudlake-accommodation-panel .info-dl { flex: 0 1 22rem; margin: 0; }
.cloudlake-contact-details h2 { font-size: 1.38rem; margin-top: 0; }

.statement { background: var(--mist); border: 1px solid #BBD3DE; border-left: 4px solid var(--lake); border-radius: var(--radius); padding: 1.15rem 1.4rem; font-size: 1.1rem; line-height: 1.55; }
.statement strong { color: var(--lake-900); }

.placeholder { background: var(--amber-bg); border: 1px dashed var(--amber-line); border-radius: var(--radius); padding: .85rem 1rem; color: var(--amber-ink); font-size: .98rem; }
.placeholder b { text-transform: uppercase; letter-spacing: .04em; font-size: .78rem; display: inline-block; margin-right: .35rem; }
.placeholder--inline { display: inline-block; padding: .1rem .5rem; }

/* Accessible text alternative for a PDF that cannot be read on its own.
   A <details> disclosure needs no JavaScript and is keyboard reachable. */
.pdf-text-version { margin-top: .45rem; }
.pdf-text-version > summary { cursor: pointer; color: var(--lake-700); font-weight: 700; font-size: .95rem; }
.pdf-text-version > summary:focus-visible { outline: 2px solid var(--lake-700); outline-offset: 2px; }
.pdf-text-version__body { margin-top: .35rem; max-width: 42rem; color: var(--ink-soft); font-size: .95rem; }
.pdf-text-version__body p { margin: 0 0 .5rem; }
.pdf-text-version__body p:last-child { margin-bottom: 0; }

/* ---- PDF viewer (2.2.0) -------------------------------------------------- */
/* View beside Download in tables and record pages. */
.pdf-links { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .5rem; }
.pdf-links__view { font-weight: 700; }
.pdf-links__download { font-size: .92rem; }
.pdf-links__sep { color: var(--ink-soft); }

.section--viewer { padding-top: 0; }
.pdf-viewer { margin-block: 0 2rem; }
.pdf-viewer__title { font-size: 1.38rem; margin: 0 0 .6rem; }
.pdf-viewer__back { margin: 0 0 .8rem; }
.pdf-viewer__back a::before { content: "\2190\00a0"; }

.pdf-viewer__toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
  padding: .5rem .6rem; background: var(--mist); border: 1px solid #BBD3DE; border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
}
.pdf-viewer__toolbar[hidden] { display: none; }
/* The full-page viewer keeps its controls in reach while the pages scroll. */
.pdf-viewer--page .pdf-viewer__toolbar { position: sticky; top: 0; z-index: 5; }
.pdf-viewer__group { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.pdf-viewer__group--links { gap: .4rem 1rem; }
.pdf-viewer__btn {
  font: inherit; font-size: .92rem; font-weight: 600; line-height: 1.2; min-height: 44px; padding: .35rem .7rem;
  color: var(--lake-900); background: var(--card); border: 1px solid var(--lake-700); border-radius: var(--radius); cursor: pointer;
}
.pdf-viewer__btn:hover { background: var(--lake-700); color: #fff; }
.pdf-viewer__btn[aria-pressed="true"] { background: var(--lake-900); color: #fff; border-color: var(--lake-900); }
.pdf-viewer__btn[aria-disabled="true"] { color: var(--ink-soft); border-color: var(--line); background: var(--card); cursor: default; }
.pdf-viewer__goto { display: inline-flex; align-items: center; gap: .35rem; font-size: .92rem; font-weight: 600; color: var(--lake-900); white-space: nowrap; }
.pdf-viewer__goto input {
  font: inherit; width: 4.2em; min-height: 44px; padding: .25rem .4rem; text-align: center;
  border: 1px solid var(--lake-700); border-radius: var(--radius); background: var(--card); color: var(--ink);
}
.pdf-viewer__link { font-weight: 600; font-size: .95rem; }

.pdf-viewer__status:empty { display: none; }
.pdf-viewer__status { margin: 0; font-size: .95rem; color: var(--ink-soft); }
.pdf-viewer.is-ready .pdf-viewer__status { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pdf-viewer.is-failed .pdf-viewer__status { color: var(--amber-ink); font-weight: 600; margin-bottom: .4rem; }
.pdf-viewer__scan-note { margin: 0; border-radius: 0; }
.pdf-viewer__scan-note[hidden] { display: none; }

.pdf-viewer__pages {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
  padding: 1rem; overflow-x: auto; background: #5B6670;
  border: 1px solid #BBD3DE; border-radius: 0 0 var(--radius) var(--radius);
}
.pdf-viewer__pages[hidden] { display: none; }
.pdf-viewer__pages:focus-visible { outline: 3px solid var(--lake-700); outline-offset: 2px; }
/* Embedded on a record page: a window onto the document, scrolling inside. */
.pdf-viewer--embed .pdf-viewer__pages { height: min(80vh, 60rem); min-height: 20rem; overflow-y: auto; }
/* Pages wider than the window scroll sideways inside the viewer, never the page.
   Auto margins centre a page without pushing a zoomed one out past the left
   edge, where align-items: center would put it beyond reach of the scrollbar. */
.pdf-viewer__pages > .pdf-viewer__page { flex: none; margin-inline: auto; }
.pdf-viewer__page {
  position: relative; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35);
  /* PDF.js sizes the text layer from these; the script sets --scale-factor. */
  --scale-factor: 1;
  --user-unit: 1;
  --total-scale-factor: calc(var(--scale-factor) * var(--user-unit));
  --scale-round-x: 1px;
  --scale-round-y: 1px;
}
.pdf-viewer__canvas { display: block; }
.pdf-viewer__fallback { margin: .6rem 0 0; }
/* Web links found in the PDF, laid over the words they cover. */
.pdf-viewer__links { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pdf-viewer__pdf-link { position: absolute; pointer-events: auto; color: transparent; overflow: hidden; white-space: nowrap; border-radius: 2px; }
.pdf-viewer__pdf-link:hover { background: rgba(23, 96, 127, .12); }
.pdf-viewer__pdf-link:focus-visible { outline: 3px solid var(--lake-700); outline-offset: 1px; }
.pdf-viewer__fallback[hidden] { display: none; }

/* Text layer: transparent words laid over the drawn page, so a resident can
   select, search (Ctrl+F) and have a screen reader read the PDF. Adapted from
   PDF.js web/pdf_viewer.css (Apache-2.0). */
.pdf-viewer .textLayer {
  position: absolute; inset: 0; overflow: clip; opacity: 1; line-height: 1; text-align: initial;
  letter-spacing: normal; word-spacing: normal; -webkit-text-size-adjust: none; text-size-adjust: none;
  forced-color-adjust: none; transform-origin: 0 0; caret-color: CanvasText; z-index: 0;
  --min-font-size: 1;
  --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
  --min-font-size-inv: calc(1 / var(--min-font-size));
}
.pdf-viewer .textLayer :is(span, br) {
  color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%;
  -webkit-user-select: text; user-select: text;
}
.pdf-viewer .textLayer > :not(.markedContent),
.pdf-viewer .textLayer .markedContent span:not(.markedContent) {
  z-index: 1;
  --font-height: 0;
  --scale-x: 1;
  --rotate: 0deg;
  font-size: calc(var(--text-scale-factor) * var(--font-height));
  transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
}
.pdf-viewer .textLayer .markedContent { display: contents; }
.pdf-viewer .textLayer span[role="img"] { user-select: none; cursor: default; }
.pdf-viewer .textLayer ::selection { background: rgba(0, 0, 255, .25); }
.pdf-viewer .textLayer br::selection { background: transparent; }
.pdf-viewer .textLayer .endOfContent { display: block; position: absolute; inset: 100% 0 0; z-index: 0; cursor: default; user-select: none; }

/* Phones: one compact row that scrolls away with the page. Pinch-zoom does the
   zooming, and the short labels stay the whole accessible name. */
@media (max-width: 600px) {
  .pdf-viewer__toolbar { justify-content: flex-start; padding: .4rem; gap: .4rem .6rem; }
  .pdf-viewer--page .pdf-viewer__toolbar { position: static; }
  .pdf-viewer__group--zoom, .pdf-viewer__long { display: none; }
  .pdf-viewer__btn { padding: .3rem .55rem; }
  .pdf-viewer__pages { padding: .5rem; gap: .5rem; }
}

blockquote.quote {
  margin: 0 0 1.2rem; padding: .2rem 0 .2rem 1.4rem; border-left: 3px solid var(--brass);
  font-family: var(--font-display); font-style: italic; font-size: 1.4rem; line-height: 1.4; color: var(--lake-900);
}
blockquote.quote cite { display: block; font-family: var(--font-body); font-style: normal; font-size: .84rem; color: var(--ink-soft); margin-top: .6rem; }

/* ---- Forms -------------------------------------------------------------- */
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-weight: 700; color: var(--lake-900); margin-bottom: .3rem; }
.field .hint { font-size: .9rem; color: var(--ink-soft); margin: 0 0 .35rem; }
.field .req { color: #A02A12; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea, select {
  width: 100%; font: inherit; color: var(--ink);
  padding: .68rem .8rem; border: 2px solid var(--control-line); border-radius: var(--radius); background: var(--card);
}
input:focus, textarea:focus, select:focus { border-color: var(--lake-700); }
textarea { min-height: 8rem; resize: vertical; }
.cloudlake-contact-form { max-width: 60ch; }
.form-note { max-width: 60ch; font-size: .92rem; color: var(--ink-soft); background: var(--sand); border: 1px solid var(--sand-line); border-radius: var(--radius); padding: .75rem .95rem; }

/* Document library filters */
.cloudlake-doc-jump-links { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0 1.5rem; }
.cloudlake-doc-jump-links a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: .55rem 1rem;
  border: 2px solid var(--lake-700); border-radius: var(--radius); background: var(--card);
  color: var(--lake-900); font-weight: 700; text-decoration: none;
}
.cloudlake-doc-jump-links a:hover { background: var(--lake-700); color: var(--card); }
.cloudlake-documents-library h2[id] { scroll-margin-top: 1rem; }
.cloudlake-doc-filters { margin: 1rem 0 1.5rem; padding: 1rem 1.1rem; background: var(--sand); border: 1px solid var(--sand-line); border-radius: var(--radius); }
.cloudlake-doc-search-heading { margin: 0 0 .85rem; font-size: 1.1rem; }
/* Wraps by content, not viewport: fixed and auto grid tracks took all the room
   at 200% text and left Search and Type 0px wide (SC 1.4.4). Proportions
   follow the design's 2.4 : 1 : 1 : auto. */
.cloudlake-doc-filters__row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.cloudlake-doc-filters__row > .field { flex: 1 1 9em; }
.cloudlake-doc-filters__row > .field:first-child { flex: 2.4 1 16em; }
.cloudlake-doc-filters__actions { flex: 0 1 auto; }
.cloudlake-doc-filters .field { margin-bottom: 0; }
.cloudlake-doc-filters .field, .cloudlake-doc-filters input, .cloudlake-doc-filters select { min-width: 0; }
.cloudlake-doc-filters__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.cloudlake-doc-clear { font-weight: 700; }
.cloudlake-doc-results-heading { font-size: 1rem; margin: 0 0 .75rem; color: var(--ink-soft); font-weight: 600; }
.cloudlake-doc-records-heading { margin-top: 2rem; }
.cloudlake-doc-pagination { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 1rem; }
.table-scroll:focus { outline: 3px solid var(--lake-700); outline-offset: 2px; }
.table-scroll-note { font-size: .92rem; color: var(--ink-soft); margin: 0 0 .6rem; }
.band-head { margin-bottom: 1rem; }

/* ---- v2 section header: eyebrow + heading, with a note or action beside ---- */
.section-head { display: flex; flex-wrap: wrap; gap: .5rem 2.5rem; align-items: baseline; justify-content: space-between; margin-bottom: 1.6rem; }
.section-head > * { min-width: 0; }
.section-head h2 { margin: .35rem 0 0; }
.section-head__note { max-width: 42ch; color: var(--ink-soft); margin: 0; text-wrap: pretty; }
.section-head .btn { margin: 0; }
.section-head .eyebrow { margin: 0; }

/* Sidebar panels in a two-column page body. */
.cols--2 > aside.panel, .cols--2 > .panel, .cols--2 > .cloudlake-aside { align-self: start; }
.panel__title { margin-top: 0; font-size: 1.35rem; }
.panel .info-dl { margin: 1rem 0 0; }
.panel .btn { margin-top: 1.2rem; }
.meetings-statement { margin-top: 0; }

/* ---- v2 documents library ------------------------------------------------ */
.cloudlake-doc-notices {
  background-color: var(--sand); background-image: var(--ripple-sand); background-size: 120px 60px;
  border: 1px solid var(--sand-line); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem) min(clamp(1.25rem, 3vw, 2rem), 4vw);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.cloudlake-doc-library {
  border: 1px solid var(--line); border-top: 3px solid var(--brass); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--shadow);
}
/* No overflow:hidden here: it only rounded corners, and it clipped controls at
   320px with enlarged text. The first and last bands round themselves. */
.cloudlake-doc-library > :first-child { border-radius: var(--radius) var(--radius) 0 0; }
.cloudlake-doc-library > :last-child { border-radius: 0 0 var(--radius) var(--radius); }
.cloudlake-doc-library .cloudlake-doc-filters { margin: 0; border: 0; border-bottom: 1px solid var(--sand-line); padding: 1.1rem min(1.3rem, 4vw); }
.cloudlake-doc-library .cloudlake-doc-results-heading { margin: 0; padding: .85rem min(1.3rem, 4vw) 0; }
.cloudlake-doc-library .table-scroll-note { padding: .35rem min(1.3rem, 4vw) 0; }
.cloudlake-doc-library .table-scroll { border: 0; border-radius: 0; margin: 0; }
.cloudlake-doc-library > p { padding: 0 min(1.3rem, 4vw) 1rem; margin: .6rem 0 0; }
.cloudlake-doc-library .cloudlake-doc-pagination {
  margin: 0; padding: .85rem 1.3rem; border-top: 1px solid var(--line); background: var(--paper); justify-content: space-between;
}
.cloudlake-doc-pages { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0; padding: 0; list-style: none; }
.cloudlake-doc-pages a, .cloudlake-doc-pages span[aria-current] {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem;
  padding: .3rem .75rem; border: 1px solid var(--control-line); border-radius: var(--radius);
  text-decoration: none; font-weight: 600; background: var(--card);
}
.cloudlake-doc-pages a:hover { background: var(--mist); }
.cloudlake-doc-pages span[aria-current="page"] { background: var(--lake-700); border-color: var(--lake-700); color: #fff; }
.cloudlake-doc-page-status { font-size: .92rem; color: var(--ink-soft); }

/* ---- Page header -------------------------------------------------------- */
.page-head {
  color: #fff; position: relative; overflow: hidden; background-color: var(--lake-900);
  background-image: linear-gradient(160deg, #10465E 0%, #072634 100%), var(--ripple-light);
  background-size: auto, 120px 60px;
}
.page-head .wrap { position: relative; padding-block: clamp(2.25rem, 5vw, 3.5rem); }
.page-head h1 { color: #fff; margin-bottom: .3rem; }
.page-head .lede { color: rgba(255,255,255,.92); }
.breadcrumb { font-size: .88rem; margin: 0 0 .7rem; color: rgba(255,255,255,.85); }
.breadcrumb a { color: #fff; }

.cols { display: grid; gap: var(--cl-gap); grid-template-columns: minmax(0, 1fr); }
.cols--spaced { margin-top: 1.5rem; }
@media (min-width: 860px){ .cols--2 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.cloudlake-contact-layout { align-items: start; }
/* v2: the message form leads; Town Hall details and photo sit beside it. */
.cloudlake-contact-aside { display: grid; gap: 1.6rem; align-content: start; }
.cloudlake-contact-form-panel { margin-top: 1.2rem; max-width: 44rem; padding: 1.6rem min(1.6rem, 5vw) 1.7rem; }
.cloudlake-contact-form-panel .form-note { margin: 0 0 1.3rem; }
/* Inside a builder page Elementor already spaces the heading widget above. */
.cloudlake-builder-page .cloudlake-contact-form-panel { margin-top: 0; }
.cloudlake-contact-form-panel .cloudlake-contact-form { max-width: none; }
.cloudlake-contact-form__pair { display: grid; gap: 0 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.cloudlake-contact-form .field--last { margin-bottom: 1.4rem; }
.field .optional { font-weight: 400; color: var(--ink-soft); }
@media (min-width: 860px){ .cloudlake-contact-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }

/* History highlights, v2: a single-column timeline on a brass rule. Verified
   local facts only; richer copy and assets remain editorial work. The dots are
   decoration drawn in CSS, so nothing is announced twice. */
.cloudlake-history-highlights { display: grid; gap: 2.2rem; margin-top: 2rem; grid-template-columns: minmax(0, 1fr); border-left: 3px solid var(--brass); padding-left: 1.6rem; }
.cloudlake-history-highlights section { position: relative; }
.cloudlake-history-highlights section::before {
  /* Sized in em and centred on the eyebrow's line box (.78rem x 1.62 line
     height), so the dot stays on its label when text is enlarged. */
  content: ""; position: absolute; left: calc(-1.6rem - 1.5px - .36em); top: calc(.632rem - .36em); width: .72em; height: .72em;
  border-radius: 50%; background: var(--brass); border: 2.5px solid var(--paper);
}
/* Block-level, so it has no baseline offset inside the section's line box and
   the dot's em position lands on its centre at every text size. */
.cloudlake-history-highlights .eyebrow { display: flex; margin-bottom: 0; }
.cloudlake-history-highlights h2 { margin: .35rem 0 .5rem; }
.cloudlake-history-highlights p:last-child { margin-bottom: 0; }
.cloudlake-history-layout .cloudlake-history-highlights { margin-top: 0; }
.cloudlake-history-media { display: grid; gap: 1.6rem; align-content: start; }
.cloudlake-asset-slot { padding: 2.2rem 1.4rem; text-align: center; }
.cloudlake-asset-slot p { margin: .5rem 0 0; }
.cloudlake-history-layout { display: grid; gap: var(--cl-gap); align-items: start; grid-template-columns: minmax(0, 1fr); }
.cloudlake-history-media, .cloudlake-builder-content,
.cloudlake-history-highlights > section, .cols > *, .footer-grid > * { min-width: 0; }
@media (min-width: 860px){ .cloudlake-history-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }

/* ---- Footer ------------------------------------------------------------- */
.site-footer { background-color: var(--deep); background-image: var(--ripple-light); background-size: 120px 60px; color: var(--chrome-text); }
.site-footer a { color: #fff; }
.footer-grid { display: grid; gap: var(--cl-gap); grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); padding-block: 3rem; }
.site-footer h2 { color: #fff; font-family: var(--font-body); font-size: .84rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .9rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.footer-brand .fname { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; color: #fff; line-height: 1.15; display: block; }
.footer-brand p { color: var(--chrome-text-dim); margin: .6rem 0; font-size: .97rem; }
.footer-trio { border-top: 1px solid rgba(255,255,255,.18); }
.footer-trio .wrap { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; align-items: center; justify-content: space-between; padding-block: 1.1rem; font-size: .9rem; }
.footer-trio nav ul { display: flex; flex-wrap: wrap; gap: .3rem 1.3rem; }
.footer-trio .copy { color: #A8BFC9; }

/* ---- Motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  .hero-inner > *, .page-head .wrap > * { animation: rise .6s cubic-bezier(.2,.7,.2,1) both; }
  .hero-inner > *:nth-child(2) { animation-delay: .1s; }
  .page-head .wrap > *:nth-child(2) { animation-delay: .06s; }
  .page-head .wrap > *:nth-child(3) { animation-delay: .12s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 960px){
  .nav-toggle { display: inline-flex; }
  /* Without JavaScript the nav is already open, so the button would do nothing. */
  .no-js .nav-toggle { display: none; }
  .primary-nav { position: static; width: 100%; }
  .header-inner { flex-wrap: wrap; }
  .primary-nav[hidden] { display: none; }
  .primary-nav ul { flex-direction: column; gap: .1rem; padding-block: .5rem 0; }
  .primary-nav a { padding: .72rem .6rem; }
	.header-search { order: 3; flex-basis: 100%; max-width: none; margin: 0; }
	.primary-nav { order: 4; }
}
/* Just above the collapse the search button shares the row; tighten spacing so
   the seven links stay on one line instead of wrapping 'Contact' alone. The
   Town seal (2.0.17) is wider than the old roundel, so the band is wider and
   the nav collapses to the Menu button from 960px instead of 900px. */
@media (min-width: 961px) and (max-width: 1180px){
  .header-inner { gap: .5rem; }
  .brand { gap: .6rem; }
  .brand .emblem--image { height: 48px; }
  .brand-name .b1 { font-size: 1.45rem; }
  .primary-nav a { padding-inline: .42rem; font-size: .94rem; }
}
@media (max-width: 860px){
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px){ .util-contact { display: none; } }

/* ---- Forced colors ------------------------------------------------------ */
/* Forced-colors modes override background-color but not background-image, so a
   gradient chrome survives while the light text over it is repainted dark. Drop
   the images and let the system supply the pair. */
@media (forced-colors: active) {
  .util-bar, .site-header, .hero, .page-head, .section--sand, .cloudlake-doc-notices, .site-footer { background-image: none; }
  /* The scrim is a background and is dropped with the rest; the photograph
     would then sit directly under system-coloured text. */
  .hero--bg .hero-photo, .hero--bg::after { display: none; }
  body::before { display: none; }
  /* Belt-and-braces, not a fix for an observed break: the spec requires engines
     to force border-color, and Chromium does even without this. Kept because
     .btn declares `border: 2px solid transparent` and the tests here only run
     in Chromium, so they cannot speak for Firefox or Edge. */
  .btn { border-color: currentColor; }
  .nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after { background: CanvasText; }
  .pill { border: 1px solid currentColor; }
  /* PDF viewer: colour alone cannot carry the pressed and unavailable states. */
  .pdf-viewer__btn[aria-pressed="true"] { border-width: 3px; text-decoration: underline; }
  .pdf-viewer__btn[aria-disabled="true"] { color: GrayText; border-color: GrayText; }
}

/* ---- Print -------------------------------------------------------------- */
/* Repair at the region, never per child: a hand-listed set of descendants goes
   stale the moment a new one is added, and the missing ones print white on
   white. A resident printing a notice must still get the phone and address. */
@media print {
  /* Print the record from the PDF itself; the viewer's controls mean nothing on paper. */
  .pdf-viewer__toolbar, .pdf-viewer__scan-note { display: none !important; }
  .pdf-viewer--embed .pdf-viewer__pages { height: auto; overflow: visible; }
  .pdf-viewer__pages { background: none; border: 0; padding: 0; }
  .pdf-viewer__fallback { display: block !important; }
  /* The text version is the only readable form of a scanned record; never let
     it print collapsed. */
  .pdf-text-version > summary { display: none; }
  .pdf-text-version__body { display: block !important; }
  .pdf-text-version[open] > .pdf-text-version__body,
  .pdf-text-version:not([open]) > .pdf-text-version__body { display: block !important; }
  body::before { display: none; }
  .util-bar, .util-bar *,
  .site-header, .site-header *,
  .site-footer, .site-footer *,
  .hero, .hero *,
  .page-head, .page-head *,
  table.data thead th,
  .btn, .nav-toggle, .skip-link { background: #fff !important; color: #000 !important; }
  a { color: #000; text-decoration: underline; }
  .card, .panel, .meeting-card { box-shadow: none; border: 1px solid #999; }
  .btn, .hero .btn--ghost { border: 1px solid #000; }
  .hero--bg .hero-photo, .hero--bg::after { display: none; }

  /* Controls that cannot do anything on paper. */
  .site-search-toggle, .nav-toggle, .skip-link, .cloudlake-doc-jump-links { display: none; }
  /* "Scroll sideways to see every column" is meaningless once printed. */
  .table-scroll-note { display: none; }
  /* A scroll container does not scroll on paper — it clips. The officials table
     carries min-width: 44rem, which silently cut the Term column off the right
     edge of an A4 sheet. Let data tables reflow to the page instead. */
  .table-scroll { overflow: visible; }
  table.data, .cloudlake-officials-directory table.data { min-width: 0; }
}

/* Fluent Forms markup the theme does not control keeps its own skin. */
.ff-el-form-control,
.ff-el-input--content input,
.ff-el-input--content textarea {
  width: 100%;
  font: inherit;
  padding: .55rem .7rem;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}
/* The theme's own fields inherit the base control border (4.57:1). The 1.5px
   --line border this rule used to set measured 1.50:1 on white — below the 3:1
   floor SC 1.4.11 requires, and the only 6px radius in the system. */
.cloudlake-contact-form input,
.cloudlake-contact-form textarea {
  width: 100%;
  font: inherit;
  padding: .55rem .7rem;
  color: var(--ink);
}
.ff-btn-submit,
.cloudlake-contact-form .btn {
  margin-top: .5rem;
}
.ff-message-success,
.cloudlake-form-success {
  padding: 1rem 1.1rem;
  border-left: 4px solid var(--reed);
  background: var(--sand);
  max-width: 60ch;
}
.staging-banner {
  background: #7A3E00;
  color: #fff;
  text-align: center;
  padding: .45rem 1rem;
  font: 600 .85rem/1.4 var(--font-body);
}
.staging-banner a { color: #FFE6B8; }

/* Gutenberg homepage blocks map onto theme components */
.hero .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  color: #fff;
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  text-decoration: none;
}
.hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: #fff;
  color: var(--lake-900);
}
.section .wp-block-button .wp-block-button__link {
  border-radius: 999px;
  text-decoration: none;
}
.wp-block-group.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  width: min(100% - 2 * var(--pad-x, 1.25rem), var(--wrap));
  padding-inline: 0;
}
.wp-block-group.section > .wp-block-group.wrap {
  padding-block: 0;
}
.hero .wp-block-heading,
.hero h1 {
  color: #fff;
}

/* ---- Elementor Free kit: keep municipal contrast & type ---------------- */
body[class*="elementor-kit-"] {
  --e-global-color-primary: var(--lake);
  --e-global-color-secondary: var(--lake-900);
  --e-global-color-text: var(--ink);
  /* Elementor paints its Button, and active tabs and accordions, in the accent:
     reed made every button a Clerk added green beside the theme's lake ones. */
  --e-global-color-accent: var(--lake);
  --e-global-typography-primary-font-family: var(--font-display);
  --e-global-typography-secondary-font-family: var(--font-body);
  --e-global-typography-text-font-family: var(--font-body);
  --e-global-typography-accent-font-family: var(--font-body);
}
/* Elementor 4's atomic Button is a <button> with a hard-coded blue fill and no
   text colour, so it rendered in the browser's Arial, black on #375EFB (4.1:1,
   below 4.5:1). Only what the default leaves unset is supplied here, at base
   specificity, so a colour or font the Clerk picks for it still applies. */
.e-button-base { font: inherit; font-weight: 700; color: #fff; }
/* Every rule below that reaches a document's top-level sections or containers
   accepts two parents: the live page puts them directly in .elementor, and the
   editor wraps them in .elementor-section-wrap. Written for the live page only,
   these rules previewed Meetings as one column and a Clerk's containers 10px
   in, so the editor did not show the design the page ships with. */
.cloudlake-builder-page { width: 100%; }
.cloudlake-builder-content {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding: clamp(1.75rem, 4vw, 3.5rem) clamp(1rem, 4vw, 2rem);
}
.cloudlake-builder-page .section > .cloudlake-builder-content { padding-block: 0; }
/* Builder body placed inside a theme two-column layout: the .wrap already
   supplies the width and gutters. */
.cloudlake-builder-content--in-cols { max-width: none; padding: 0; }
:is(.cloudlake-builder-content > .elementor, .cloudlake-builder-content > .elementor > .elementor-section-wrap) > .elementor-section > .elementor-container {
  width: 100%; max-width: none !important; margin-inline: auto;
  padding: 0 !important;
}
.cloudlake-builder-page .elementor-container,
.cloudlake-builder-page .elementor-column,
.cloudlake-builder-page .elementor-widget-wrap,
.cloudlake-builder-page .e-con,
.cloudlake-builder-page .e-con-inner,
.cloudlake-builder-page .elementor-widget { min-width: 0; }
/* Elementor pads every column 10px and boxes sections at 1140px, which pushed
   widgets off the theme's frame and inset the full-bleed hero. Only single
   full-width columns are reset, so a Clerk's multi-column row keeps gutters.
   Elementor's stylesheet loads after this one, so each selector carries one
   more class than the rule it overrides. A lone column, not .elementor-col-100:
   the editor never prints that class, so the reset missed there and every
   section, the full-bleed hero included, previewed 10px narrower than it ships. */
.cloudlake-builder-page .elementor-column:only-child > .elementor-element-populated { padding: 0; }
/* The same frame for the Flexbox Containers Elementor 4 builds by default: a
   Clerk's new top-level container lines up with the seeded sections instead of
   sitting 10px in. This is Elementor's own default hook, so padding she sets on
   a container still wins, and nested containers keep their gutters. */
:is(.cloudlake-builder-content > .elementor, .cloudlake-builder-content > .elementor > .elementor-section-wrap) > .e-con {
  --container-default-padding-left: 0px; --container-default-padding-right: 0px;
}
/* Home has no framing wrapper, so its containers carry the section gutter. */
:is(.cloudlake-builder-page--home > .elementor, .cloudlake-builder-page--home > .elementor > .elementor-section-wrap) > .e-con {
  --container-default-padding-left: clamp(1rem, 4vw, 2rem); --container-default-padding-right: clamp(1rem, 4vw, 2rem);
  --container-max-width: calc(var(--wrap) - 2 * clamp(1rem, 4vw, 2rem));
}
.cloudlake-builder-page .e-con .e-con {
  --container-default-padding-left: 10px; --container-default-padding-right: 10px;
}
.cloudlake-builder-page--home .elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--wrap); padding-inline: clamp(1rem, 4vw, 2rem); }
.cloudlake-builder-page .elementor-widget-heading:first-child .elementor-heading-title { margin-bottom: .15em; }
.cloudlake-builder-page [class*="elementor-widget-cloudlake-"] + .elementor-widget-text-editor { margin-bottom: 1.35rem; }

/* Contact is one resident task: ways to reach Town Hall beside the message form. */
@media (min-width: 860px) {
  /* Legacy (kit v4) builder Contact pages hold the details widget first, so
     they keep details on the left: moving it right visually would make focus
     and reading order jump backwards (SC 1.3.2, 2.4.3). Kit v5 pages hold only
     the form, and the template renders details beside it in source order.
     Matches a legacy Section document and an Elementor 4 Container document.
     Only the details panel is pinned: auto-placement fills the rest, so
     deleting a widget reflows instead of stranding an empty column. */
  .cloudlake-builder-page--contact-legacy :is(.cloudlake-builder-content > .elementor, .cloudlake-builder-content > .elementor > .elementor-section-wrap) > .elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap,
  .cloudlake-builder-page--contact-legacy :is(.cloudlake-builder-content > .elementor, .cloudlake-builder-content > .elementor > .elementor-section-wrap) > .e-con > .e-con-inner {
    display: grid; grid-template-columns: minmax(16rem, .85fr) minmax(0, 1.15fr);
    column-gap: clamp(1.5rem, 4vw, 3rem); align-items: start;
  }
  .cloudlake-builder-page--contact-legacy .elementor-widget-cloudlake-contact-details {
    grid-column: 1; grid-row: 1 / span 3; align-self: start;
  }
  /* Meetings: the accommodation widget already follows the table in source, so
     pinning it to the second column keeps reading order (kit v4 and v5 alike). */
  .cloudlake-builder-page--meetings :is(.cloudlake-builder-content > .elementor, .cloudlake-builder-content > .elementor > .elementor-section-wrap) > .elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap,
  .cloudlake-builder-page--meetings :is(.cloudlake-builder-content > .elementor, .cloudlake-builder-content > .elementor > .elementor-section-wrap) > .e-con > .e-con-inner {
    display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    column-gap: var(--cl-gap); align-items: start;
  }
  .cloudlake-builder-page--meetings .elementor-widget-cloudlake-accommodation-panel {
    grid-column: 2; grid-row: 1 / span 3; align-self: start;
  }
  /* The same layout for a block-editor body: the panel beside whatever the
     Clerk writes above and below the archive. */
  .cloudlake-builder-page--meetings .cloudlake-builder-content--blocks {
    display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    column-gap: var(--cl-gap); align-items: start;
  }
  .cloudlake-builder-page--meetings .cloudlake-builder-content--blocks > * { grid-column: 1; }
  .cloudlake-builder-page--meetings .cloudlake-builder-content--blocks > .cloudlake-accommodation-panel {
    grid-column: 2; grid-row: 1 / span 3; align-self: start;
  }
}

/* Legacy Cloud Lake-owned History data predating the structured highlights wrapper. */
.cloudlake-builder-page--history .elementor-widget-text-editor .elementor-widget-container > h2 {
  margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--sand-line);
}
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-shortcode {
  color: var(--ink);
}
.elementor-heading-title {
  color: var(--lake-900);
}
.elementor-section.hero,
.elementor-section.hero .elementor-heading-title,
.elementor-section.hero .elementor-widget-text-editor,
.elementor-section.hero .elementor-widget-text-editor p,
.elementor-section.hero .lede {
  color: #fff;
}
/* --sun measures 3.13:1 against the light end of this gradient; --sun-soft
   clears 4.5:1 across every stop. Same correction as .hero .eyebrow, which this
   more specific rule was overriding on legacy text-editor hero layouts. */
.elementor-section.hero .elementor-widget-text-editor .eyebrow { color: var(--sun-soft); }
.elementor-section.hero .meeting-card .eyebrow { color: var(--reed-ink); }
.elementor-section.hero .lede { color: rgba(255,255,255,.94); }
.elementor-section.hero .btn--ghost { color: #fff; border-color: rgba(255,255,255,.75); }
.elementor-section.hero {
  background-color: var(--lake-800);
  background-image: var(--ripple-light), linear-gradient(160deg, #0E3A4E 0%, #17607F 55%, #1F4A36 120%);
  background-size: 120px 60px, auto;
}
.elementor-section.hero > .elementor-container {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-block: var(--pad-y);
  padding-inline: 1.25rem;
  align-items: center;
}
:is(.elementor .elementor-widget-text-editor, .elementor .elementor-shortcode, .elementor-element .elementor-widget-container) a:not(.btn, .card h3 a, .cloudlake-doc-pages a, .cloudlake-doc-jump-links a) {
  /* Components carry their own affordance; the design draws none of these
     underlined. Links in running text still are (SC 1.4.1). */
  text-decoration: underline !important;
  text-underline-offset: .16em;
  text-decoration-thickness: 1px;
}

/* 2.0.11 block layouts: the whole page body, side column included, is blocks
   the Administrator can edit, move and remove. Columns match the theme's
   1.6 : 1 two-column frame and stack below 860px like .cols--2. */
.cloudlake-block-layout > .cloudlake-layout > * + * { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.cloudlake-block-layout > .cloudlake-layout > :first-child { margin-top: 0; }
.wp-block-columns.cloudlake-cols { gap: var(--cl-gap); align-items: flex-start; margin-bottom: 0; }
.cloudlake-cols > .wp-block-column { min-width: 0; }
.cloudlake-cols > .wp-block-column > * { margin-top: 0; margin-bottom: 0; }
.cloudlake-cols > .wp-block-column > * + * { margin-top: 1.6rem; }
.cloudlake-cols > .wp-block-column > .band-head + * { margin-top: 0; }
@media (max-width: 859px) {
  .wp-block-columns.cloudlake-cols { flex-wrap: wrap !important; }
  .wp-block-columns.cloudlake-cols > .wp-block-column { flex-basis: 100% !important; }
}
@media (min-width: 860px) { .cloudlake-cols .cloudlake-officials-directory table.data { min-width: 0; } }
.cloudlake-layout-meetings .meetings-statement { margin-bottom: 0; }
/* 2.0.14 The Town's standing meeting notice (F.S. 286.0105, ADA, Sunshine Law):
   a quiet bordered panel under the archive, read as reference, not an alert. */
.cloudlake-meeting-notice { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--brass); border-radius: var(--radius); padding: 1.25rem 1.5rem; }
.cloudlake-meeting-notice > .band-head { font-size: clamp(1.25rem, 2.4vw, 1.45rem); margin: 0 0 .6rem; }
.cloudlake-meeting-notice > p { max-width: var(--prose); margin: 0; color: var(--ink-soft); font-size: .98rem; line-height: 1.55; }
.cloudlake-meeting-notice > p + p { margin-top: .75rem; }
.cloudlake-layout-history .cloudlake-history-highlights { margin-top: 0; }
/* A photograph placed as an Image block keeps the theme's framed look, and
   its caption (edited on the page) reads like the other captions. */
.photo-figure.wp-block-image { margin: 0; }
.photo-figure.wp-block-image img { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); }
.photo-figure.wp-block-image figcaption { margin: .6rem 0 0; text-align: left; color: var(--ink-soft); font-size: .95rem; line-height: 1.45; }
/* Task Card blocks sit in a card-grid Group. */
.card-grid > .card, .card-grid > .wp-block-cloud-lake-task-card { margin-block: 0; }

/* 2.0.17 Town boundary map (Contact page, and anywhere the block is placed). */
.cloudlake-boundary-map { margin-top: 2.5rem; }
.cloudlake-boundary-map > .band-head { margin: 0 0 1rem; }
.cloudlake-boundary-map > p { max-width: var(--prose); }
.boundary-map { margin: 0 0 1.25rem; }
.boundary-map img { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); }
.boundary-map figcaption { margin-top: .6rem; color: var(--ink-soft); font-size: .9rem; line-height: 1.45; }


/* 2.0.18 History video: a link out and its transcript (no embedded player). */
.cloudlake-history-video { margin-top: 2.5rem; }
.cloudlake-history-video > .band-head { margin: 0 0 1rem; }
.cloudlake-history-video > p { max-width: var(--prose); }
.cloudlake-transcript { max-width: var(--prose); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1.25rem; }
.cloudlake-transcript > summary { cursor: pointer; font-weight: 700; color: var(--lake-900); }
.cloudlake-transcript[open] > summary { margin-bottom: .75rem; }
.cloudlake-transcript p { margin: 0 0 .9rem; line-height: 1.6; }
.cloudlake-transcript .transcript-note { border-left: 3px solid var(--sun); padding-left: .8rem; color: var(--ink-soft); }

/* 2.0.19 Click-to-play video: the theme's own panel until the visitor presses Play. */
.cloudlake-video { margin: 0 0 1.25rem; max-width: 880px; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--lake-900); }
.cloudlake-video__play { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; width: 100%; height: 100%; padding: 1.25rem; text-align: center; text-decoration: none; color: #fff;
  background: radial-gradient(120% 90% at 50% 30%, var(--lake-700), var(--lake-900)), var(--lake-900); }
.cloudlake-video__play:hover, .cloudlake-video__play:focus-visible { color: #fff; }
.cloudlake-video__play:focus-visible { outline: 3px solid var(--sun); outline-offset: -6px; }
.cloudlake-video__icon { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--sun); color: var(--lake-900); box-shadow: 0 6px 18px rgba(0,0,0,.25); transition: transform .15s ease; }
.cloudlake-video__icon svg { width: 2.2rem; height: 2.2rem; margin-left: .2rem; }
.cloudlake-video__play:hover .cloudlake-video__icon { transform: scale(1.06); }
.cloudlake-video__text { display: flex; flex-direction: column; gap: .3rem; max-width: 34rem; }
.cloudlake-video__label { font-family: var(--font-display); font-size: clamp(1.1rem, 2.6vw, 1.5rem); font-weight: 600; line-height: 1.25; }
.cloudlake-video__meta { font-weight: 600; color: var(--sun-soft); }
.cloudlake-video__note { font-size: .9rem; color: #E3EDF2; }
.cloudlake-video__frame { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 420px) { .cloudlake-video { aspect-ratio: auto; } .cloudlake-video__play { min-height: 14rem; } .cloudlake-video__icon { width: 3.5rem; height: 3.5rem; } }
@media (prefers-reduced-motion: reduce) { .cloudlake-video__icon { transition: none; } }

/* ---- Upload desk -------------------------------------------------------- */
/* templates/upload-desk.php. Staff page; theme tokens only. The receipt is a
   filed-stamp (brass double rule) — the page's one bold element. */
.upload-desk { padding-bottom: 3rem; }
.ud-bar { background: var(--lake) var(--ripple-light); color: #fff; }
.ud-bar__in { max-width: 38rem; margin: 0 auto; padding: .7rem 1rem; display: flex; align-items: center; gap: .75rem; }
.ud-bar img { width: 40px; height: 40px; border-radius: 50%; background: #fff; }
.ud-bar__town { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; line-height: 1.1; }
.ud-bar__what { margin-left: auto; font-size: .9rem; color: var(--chrome-text); }
.ud-main { max-width: 38rem; margin: 0 auto; padding: 2.25rem 1rem 0; }
.ud-h1 { font-size: clamp(2rem, 6vw, 2.6rem); margin: 0 0 .4rem; }
.ud-lede { color: var(--ink-soft); margin: 0 0 2rem; max-width: 34em; }
.ud-step { border: 0; margin: 0 0 2rem; padding: 0; min-width: 0; }
.ud-step legend, .ud-step__head { display: flex; align-items: baseline; gap: .65rem; padding: 0; margin: 0 0 .8rem; font-weight: 700; font-size: 1.15rem; color: var(--lake-900); }
.ud-num { flex: none; display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 1.5px solid var(--brass); border-radius: 50%;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--brass); transform: translateY(.1rem); }
.upload-desk input[type=radio], .upload-desk input[type=checkbox] { accent-color: var(--lake); width: 1.25rem; height: 1.25rem; margin: 0; flex: none; }
.ud-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.ud-kind { display: flex; align-items: center; gap: .7rem; min-height: 3.6rem; padding: .7rem 1rem; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); cursor: pointer; font-weight: 600; }
.ud-kind:hover { border-color: var(--control-line); }
.ud-kind:has(input:checked) { border-color: var(--lake); background: var(--mist); box-shadow: inset 4px 0 0 var(--lake); }
.ud-kind:has(input:focus-visible) { outline: 3px solid var(--lake-700); outline-offset: 2px; }
.ud-kind small { display: block; font-weight: 400; font-size: .88rem; color: var(--ink-soft); }
.ud-docket { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); }
.ud-group { padding: .55rem 1rem .35rem; font-size: .9rem; font-weight: 600; color: var(--ink-soft); background: var(--paper); border-bottom: 1px solid var(--line); }
.ud-row { display: grid; grid-template-columns: auto 3.2rem minmax(0, 1fr) auto; align-items: center; gap: .3rem .9rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); cursor: pointer; }
.ud-row:hover { background: var(--paper); }
.ud-row:has(input:checked) { background: var(--mist); box-shadow: inset 4px 0 0 var(--lake); }
.ud-row:has(input:focus-visible) { outline: 3px solid var(--lake-700); outline-offset: -3px; }
.ud-row.is-locked { cursor: not-allowed; }
.ud-row.is-locked .ud-when, .ud-row.is-locked .ud-day { opacity: .6; }
.ud-row--new { grid-template-columns: auto minmax(0, 1fr); color: var(--lake-700); }
.ud-day { text-align: center; line-height: 1; }
.ud-day b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.95rem; color: var(--lake-900); }
.ud-day span { display: block; font-size: .78rem; font-weight: 600; color: var(--ink-soft); margin-top: .15rem; }
.ud-when { min-width: 0; overflow-wrap: anywhere; }
.ud-when b { display: block; font-weight: 600; }
.ud-when > span { font-size: .92rem; color: var(--ink-soft); }
.ud-posted { display: grid; gap: .1rem; font-size: .88rem; text-align: right; white-space: nowrap; }
.ud-has { color: var(--reed-ink); }
.ud-has::before, .ud-not::before { content: ""; display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .4rem; vertical-align: .05em; }
.ud-has::before { background: var(--reed); }
.ud-not { color: var(--ink-soft); }
.ud-not::before { border: 1.5px solid var(--control-line); }
.ud-locknote { grid-column: 3 / -1; font-size: .86rem; color: var(--ink-soft); }
.ud-newdate { padding: .9rem 1rem 1rem; border-top: 1px solid var(--line); background: var(--mist); }
.ud-newdate[hidden], .ud-replace[hidden] { display: none; }
.ud-label { display: block; font-weight: 600; margin-bottom: .3rem; }
.ud-hint { display: block; font-size: .9rem; color: var(--ink-soft); margin-top: .35rem; }
.upload-desk input[type=date] { font: inherit; padding: .55rem .7rem; border: 1.5px solid var(--control-line); border-radius: var(--radius); background: #fff; min-height: 2.9rem; }
.ud-drop { position: relative; display: block; border: 2px dashed var(--control-line); border-radius: var(--radius); background: var(--card); padding: 1.4rem 1.1rem; text-align: center; }
.ud-drop:hover { border-color: var(--lake); }
.ud-drop:has(input:focus-visible) { border-color: var(--lake); outline: 3px solid var(--lake-700); outline-offset: 2px; }
.ud-drop__line { display: block; font-weight: 600; color: var(--lake-900); }
.ud-drop__sub { display: block; font-size: .9rem; color: var(--ink-soft); margin-top: .2rem; }
.ud-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.ud-drop.is-chosen { border-style: solid; border-color: var(--reed); background: #F3F8F5; }
.ud-drop.is-err { border-style: solid; border-color: #A1261B; background: #FBEAE7; }
.ud-replace { display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-start; margin: 1rem 0 0; padding: .85rem 1rem; background: var(--amber-bg); border: 1.5px solid var(--amber-line); border-radius: var(--radius); color: var(--amber-ink); }
.ud-replace .ud-err { flex-basis: 100%; }
.ud-replace input { margin-top: .2rem; }
.ud-replace label { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.ud-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.1rem; padding: .7rem 1.6rem; border: 0; border-radius: var(--radius); background: var(--lake); color: #fff; font: 700 1.1rem/1 var(--font-body); cursor: pointer; }
.ud-btn:hover { background: var(--lake-800); }
.ud-btn:disabled { opacity: .7; cursor: progress; }
.ud-actions { padding-top: .25rem; }
.ud-summary { margin: 0 0 1.75rem; padding: .9rem 1.1rem; border: 2px solid #A1261B; border-radius: var(--radius); background: #FBEAE7; }
.ud-summary h2 { margin: 0 0 .25rem; font: 700 1.05rem/1.3 var(--font-body); color: #A1261B; }
.ud-summary ul { margin: 0; padding-left: 1.1rem; }
.ud-err { color: #A1261B; font-weight: 600; font-size: .95rem; margin: 0 0 .5rem; }
.ud-err:empty { display: none; }
#ud-file-js-err:empty { display: block; margin: 0; }
.ud-stamp { margin: .5rem 0 2rem; padding: 1.4rem 1.5rem 1.3rem; background: var(--card); border: 5px double var(--brass); border-radius: 2px; transform: rotate(-.6deg); transform-origin: 30% 50%; animation: ud-press .32s cubic-bezier(.2,.9,.3,1.15) both .08s; }
@keyframes ud-press { from { opacity: 0; transform: rotate(-.6deg) scale(.97); } to { opacity: 1; transform: rotate(-.6deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .ud-stamp { animation: none; } }
.ud-stamp .ud-stamp__word { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(2.2rem, 7vw, 2.7rem); line-height: 1; color: var(--brass); margin: 0 0 .25rem; }
.ud-stamp__when { font-family: var(--font-display); font-size: 1.1rem; color: var(--brass); margin: 0 0 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--sand-line); }
.ud-stamp__what { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.35rem, 4.5vw, 1.6rem); line-height: 1.2; color: var(--lake-900); margin: 0; }
.ud-stamp dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem 1rem; margin: .9rem 0 0; font-size: .98rem; }
.ud-stamp dt { color: var(--ink-soft); }
.ud-stamp dd { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.ud-remediate { margin: 0 0 2rem; padding: .9rem 1.1rem; background: var(--amber-bg); border-left: 5px solid var(--amber-line); color: var(--amber-ink); font-size: .98rem; line-height: 1.5; }
.ud-next { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.ud-next li { padding: .2rem 0; }
.ud-mailed { color: var(--ink-soft); font-size: .98rem; }
.ud-foot { max-width: 38rem; margin: 3rem auto 0; padding: 1.2rem 1rem 0; border-top: 1px solid var(--line); font-size: .9rem; color: var(--ink-soft); }
/* Without JS the date and replace boxes stay visible; the script hides them until relevant. */
@media (max-width: 30rem) {
  .ud-kinds { grid-template-columns: 1fr; }
  .ud-row { grid-template-columns: auto 2.6rem minmax(0, 1fr); }
  .ud-row.ud-row--new { grid-template-columns: auto minmax(0, 1fr); }
  .ud-posted { grid-column: 3; min-width: 0; text-align: left; display: flex; flex-wrap: wrap; gap: .1rem .9rem; white-space: normal; }
  .ud-locknote { grid-column: 3; }
  .ud-bar__what { display: none; }
}

/* ---- 2.3.0 Hero cards, events card, events gallery ------------------------- */
/* A scroll-snap row: swipe, trackpad and arrow keys work with no script, and
   both cards stay in the reading order. main.js adds the controls. */
/* Clipped: the scrolled row otherwise lends the hero its width, and the
   overflow-hidden hero then slides sideways with it. The margin keeps focus rings. */
.hero-cards { min-width: 0; overflow: clip; overflow-clip-margin: 8px; }
.hero-cards__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding-bottom: .4rem; align-items: start;
}
.hero-cards__slide { scroll-snap-align: start; min-width: 0; }
.hero-cards__slide .meeting-card { margin: 0; }
.hero-cards__track:focus-visible { outline: 3px solid var(--sun-soft); outline-offset: 4px; }
/* With the buttons in place the scrollbar is noise; without them it is the affordance. */
.hero-cards.has-controls .hero-cards__track { scrollbar-width: none; }
.hero-cards.has-controls .hero-cards__track::-webkit-scrollbar { display: none; }
.hero-cards__controls { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: .8rem; }
.hero-cards__controls[hidden] { display: none; }
.hero-cards__arrow {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.8); background: transparent; color: #fff; font-size: 1.2rem; cursor: pointer;
}
.hero-cards__arrow:hover:not([aria-disabled="true"]) { background: #fff; color: var(--lake-900); }
.hero-cards__arrow[aria-disabled="true"] { opacity: .45; cursor: default; }
.hero-cards__dot { width: 1.5rem; height: 1.5rem; border-radius: 50%; padding: 0; cursor: pointer; border: 2px solid #fff; background: transparent; }
.hero-cards__dot[aria-current="true"] { background: var(--sun-soft); }
.hero-cards__arrow:focus-visible, .hero-cards__dot:focus-visible { outline: 3px solid var(--sun-soft); outline-offset: 3px; }

.event-card { border-top-color: var(--reed-ink); }
.event-card .m-date { font-size: 1.6rem; }
.event-card__image { display: block; width: 100%; height: auto; max-height: 9rem; object-fit: cover; border-radius: var(--radius); margin: .8rem 0 0; }

.events-gallery { margin-top: calc(var(--pad-y) * .75); scroll-margin-top: 1.5rem; }
.events-gallery:focus { outline: none; }
.events-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cl-gap); grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); }
.events-tile {
  display: flex; flex-direction: column; gap: .25rem; height: 100%; color: var(--ink); text-decoration: none;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.events-tile:hover .events-tile__title { text-decoration: underline; }
.events-tile:focus-visible { outline: 3px solid var(--lake-700); outline-offset: 3px; }
.events-tile__image, .events-tile__placeholder { display: block; width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; margin-bottom: .5rem; }
.events-tile__placeholder { background: var(--lake-800) var(--ripple-light); background-size: 120px 60px; }
.events-tile__title, .events-tile__when, .events-tile__place { padding-inline: 1rem; }
.events-tile__title { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--lake-900); line-height: 1.2; }
.events-tile__when { font-weight: 600; }
.events-tile__place { color: var(--ink-soft); }
.events-tile > :last-child { padding-bottom: 1rem; }

.events-lightbox { padding: 0; border: 0; border-radius: var(--radius); width: min(60rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); background: var(--paper); color: var(--ink); box-shadow: 0 20px 44px -18px rgba(0,0,0,.5); }
.events-lightbox::backdrop { background: rgba(7,38,52,.72); }
.events-lightbox__inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); border-top: 5px solid var(--sun); }
.events-lightbox__image { display: block; width: 100%; height: 100%; max-height: calc(100dvh - 2rem); object-fit: contain; background: var(--lake-900); }
.events-lightbox__text { padding: clamp(1.25rem, 4vw, 2rem); }
.events-lightbox__text h3 { margin-top: 0; }
.events-lightbox__when { font-weight: 600; }
.events-lightbox__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.events-lightbox .btn::after { content: none; }
@media (max-width: 700px) {
  .events-lightbox__inner { grid-template-columns: 1fr; }
  .events-lightbox__image { height: auto; max-height: 55dvh; }
}

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (forced-colors: active) {
  .hero-cards__arrow, .hero-cards__dot, .events-tile { border-color: ButtonText; }
  .hero-cards__dot[aria-current="true"] { background: Highlight; }
  .hero-cards__arrow[aria-disabled="true"] { border-color: GrayText; color: GrayText; }
}