/* theme.css — City of Saugatuck.
 *
 * The non-obvious decision: nothing here is painted in a color the Council
 * did not vote on. The nine colors of the 2026 Brand Guidelines, black, and
 * white are the whole palette, with no tints: depth comes from the logo's own
 * hard Teal shadow (6px, no blur), and water comes from the guidelines' wave
 * panels, cut as clip-path geometry. Figtree is the only family, made
 * distinctive by its extremes, Black capitals against Light body.
 *
 * Sections: tokens · base · chrome (banner, masthead, nav, omnibox) · parts
 * (chips, buttons, photos, bands) · homepage bands · interior heads ·
 * meetings and the packet reader · services (task pages, their sections,
 * the lander) · beach and parks · blocks · footer · motion · print.
 */

@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-latin-var.subset.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-latin-italic-var.subset.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

/* ---- Tokens ----------------------------------------------------------------- */
:root {
  --teal: #004d4a;
  --navy: #1f364a;
  --blue: #8ad4e3;
  --cream: #fff7ef;
  --mist: #eaf7fa;
  --royal: #14479e;
  --periwinkle: #99afe7;
  --spruce: #69a2ab;
  --lime: #d9e58a;
  --orange: #e96244;
  --white: #ffffff;
  --black: #000000;

  --ink: var(--navy);
  --accent: var(--teal);
  --accent-50: var(--mist);
  --accent-100: var(--blue);
  --accent-300: var(--spruce);
  --accent-700: var(--teal);
  --accent-900: var(--navy);
  --ring: var(--royal);

  --shadow: 6px 6px 0 var(--teal);
  --shadow-sm: 4px 4px 0 var(--teal);

  --step-0: clamp(1.0625rem, 1.02rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --step-2: clamp(1.375rem, 1.22rem + 0.7vw, 1.75rem);
  --step-3: clamp(1.625rem, 1.38rem + 1.1vw, 2.25rem);
  --step-4: clamp(1.875rem, 1.5rem + 1.7vw, 2.875rem);
  --step-5: clamp(2.125rem, 1.6rem + 2.5vw, 3.625rem);
  --step-6: clamp(2.5rem, 1.7rem + 3.6vw, 4.5rem);
  --line: 1.6rem;

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --max: 76rem;
  --band-pad: clamp(3.5rem, 7vw, 6rem);

  /* The default wave edges; a band carries its own phase inline. */
  --wave-lg: polygon(0% 9px,2.08% 11.9px,4.17% 14.5px,6.25% 16.5px,8.33% 17.7px,10.42% 18px,12.5% 17.3px,14.58% 15.8px,16.67% 13.5px,18.75% 10.8px,20.83% 7.8px,22.92% 5px,25% 2.6px,27.08% 0.9px,29.17% 0.1px,31.25% 0.2px,33.33% 1.2px,35.42% 3.1px,37.5% 5.6px,39.58% 8.4px,41.67% 11.3px,43.75% 14px,45.83% 16.1px,47.92% 17.5px,50% 18px,52.08% 17.5px,54.17% 16.1px,56.25% 14px,58.33% 11.3px,60.42% 8.4px,62.5% 5.6px,64.58% 3.1px,66.67% 1.2px,68.75% 0.2px,70.83% 0.1px,72.92% 0.9px,75% 2.6px,77.08% 5px,79.17% 7.8px,81.25% 10.8px,83.33% 13.5px,85.42% 15.8px,87.5% 17.3px,89.58% 18px,91.67% 17.7px,93.75% 16.5px,95.83% 14.5px,97.92% 11.9px,100% 9px,100% 100%,0% 100%);
  --wave-sm: polygon(0% 6px,3.13% 7.5px,6.25% 8.8px,9.38% 10px,12.5% 11px,15.63% 11.6px,18.75% 12px,21.88% 11.9px,25% 11.5px,28.13% 10.8px,31.25% 9.8px,34.38% 8.6px,37.5% 7.2px,40.63% 5.7px,43.75% 4.3px,46.88% 2.9px,50% 1.8px,53.13% 0.9px,56.25% 0.3px,59.38% 0px,62.5% 0.1px,65.63% 0.6px,68.75% 1.4px,71.88% 2.4px,75% 3.7px,78.13% 5.1px,81.25% 6.6px,84.38% 8px,87.5% 9.3px,90.63% 10.4px,93.75% 11.3px,96.88% 11.8px,100% 12px,100% 100%,0% 100%);
  --wave-stroke: polygon(0% 0%,4.17% 2.7%,8.33% 10%,12.5% 20%,16.67% 30%,20.83% 37.3%,25% 40%,29.17% 37.3%,33.33% 30%,37.5% 20%,41.67% 10%,45.83% 2.7%,50% 0%,54.17% 2.7%,58.33% 10%,62.5% 20%,66.67% 30%,70.83% 37.3%,75% 40%,79.17% 37.3%,83.33% 30%,87.5% 20%,91.67% 10%,95.83% 2.7%,100% 0%,100% 60%,95.83% 62.7%,91.67% 70%,87.5% 80%,83.33% 90%,79.17% 97.3%,75% 100%,70.83% 97.3%,66.67% 90%,62.5% 80%,58.33% 70%,54.17% 62.7%,50% 60%,45.83% 62.7%,41.67% 70%,37.5% 80%,33.33% 90%,29.17% 97.3%,25% 100%,20.83% 97.3%,16.67% 90%,12.5% 80%,8.33% 70%,4.17% 62.7%,0% 60%);
  --wave-under: polygon(0% 0%,100% 0%,100% calc(100% - 21.7px),96.67% calc(100% - 23.4px),93.33% calc(100% - 24px),90% calc(100% - 23.4px),86.67% calc(100% - 21.7px),83.33% calc(100% - 19.1px),80% calc(100% - 15.7px),76.67% calc(100% - 12px),73.33% calc(100% - 8.3px),70% calc(100% - 4.9px),66.67% calc(100% - 2.3px),63.33% calc(100% - 0.6px),60% calc(100% - 0px),56.67% calc(100% - 0.6px),53.33% calc(100% - 2.3px),50% calc(100% - 4.9px),46.67% calc(100% - 8.3px),43.33% calc(100% - 12px),40% calc(100% - 15.7px),36.67% calc(100% - 19.1px),33.33% calc(100% - 21.7px),30% calc(100% - 23.4px),26.67% calc(100% - 24px),23.33% calc(100% - 23.4px),20% calc(100% - 21.7px),16.67% calc(100% - 19.1px),13.33% calc(100% - 15.7px),10% calc(100% - 12px),6.67% calc(100% - 8.3px),3.33% calc(100% - 4.9px),0% calc(100% - 2.3px));
}

/* ---- Base ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: "Figtree", ui-sans-serif, system-ui, sans-serif;
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.6;
  font-optical-sizing: auto;
  /* A word wider than its line ("Administrative/Project" in a phone-width
     title) breaks instead of widening the page. */
  overflow-wrap: break-word;
}
img { max-width: 100%; }
h1, h2, h3, h4 {
  margin: 0;
  color: var(--teal);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
p, li, dd { text-wrap: pretty; }
p { margin: 0 0 1rem; }
a {
  color: var(--teal);
  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-thickness: 0.16em; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
::selection { background: var(--lime); color: var(--navy); }
[hidden] { display: none !important; }
strong { font-weight: 800; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute; left: 0.5rem; top: -10rem; z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--lime); color: var(--navy);
  font-weight: 800;
}
.skip-link:focus { top: 0.5rem; }

.eyebrow {
  margin: 0 0 0.625rem;
  color: var(--teal);
  font-size: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lede { font-size: var(--step-1); font-weight: 300; line-height: 1.5; max-width: 44ch; }
.section-head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.section-head__title { font-size: var(--step-5); }
.section-title { margin-bottom: 0.75rem; font-size: var(--step-3); }
.sub-title { margin: 2.25rem 0 0.75rem; font-size: var(--step-1); }
.side-title {
  margin: 0 0 0.75rem; padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--teal);
  color: var(--teal);
  font-size: 0.9375rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase;
}
* + .side-title { margin-top: 2.25rem; }
.more-link { margin: 2rem 0 0; font-weight: 800; }
.more-link a { text-decoration-thickness: 0.12em; }

/* ---- Chrome: concept notice ----------------------------------------------- */
.proto-banner {
  --ring: var(--lime);
  padding: 0.4rem var(--gutter);
  background: var(--navy);
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
}
.proto-banner p { margin: 0; }
.proto-banner a { color: var(--white); }

/* ---- Chrome: masthead ------------------------------------------------------- */
.masthead { position: relative; z-index: 30; background: var(--white); }
.masthead__bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.875rem 2rem;
  padding-block: 1rem 1.125rem;
}
.brand { display: block; width: clamp(9.75rem, 7rem + 7vw, 14.5rem); padding: 0.25rem 0; }
.brand__logo { display: block; width: 100%; height: auto; }
.masthead__search { justify-self: center; width: min(100%, 36rem); }
.masthead__hall { margin: 0; text-align: right; line-height: 1.25; }
.masthead__hall-label {
  display: block;
  color: var(--teal);
  font-size: 0.875rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase;
}
.masthead__hall a {
  color: var(--navy);
  font-size: 1.125rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}
.masthead__hall a:hover { text-decoration: underline; }
.menu-toggle { display: none; }

/* Five destinations on Teal; the current one wears the wave under its label. */
.masthead__nav { --ring: var(--lime); background: var(--teal); }
.primary-nav { display: flex; align-items: center; justify-content: space-between; gap: 0 2rem; }
.primary-nav__list, .util-nav__list { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.primary-nav__list a, .util-nav__list a {
  position: relative;
  display: block;
  color: var(--white);
  text-decoration: none;
}
.primary-nav__list a {
  padding: 0.95rem 1.05rem 1.15rem;
  font-size: 1.0625rem; font-weight: 800; letter-spacing: 0.005em;
}
.primary-nav__list li:first-child a { padding-left: 0; }
.util-nav__list a { padding: 0.95rem 0.875rem 1.15rem; font-size: 0.9375rem; font-weight: 700; }
.util-nav__list li:last-child a { padding-right: 0; }
/* The wave family: one stroke, four jobs. .wave-link draws it under a navigation
   label on hover and leaves it there under the current page; .wave-rule is the
   short divider that closes a block; .wave-list puts it in the margin as a list
   marker; .wave-empty opens an empty state so a quiet list still belongs here. */
.wave-link::after {
  content: "";
  position: absolute;
  left: 1.05rem; right: 1.05rem; bottom: 0.45rem;
  height: 0.5rem;
  background: var(--blue);
  clip-path: var(--wave-stroke);
  transform: scaleX(0);
  transform-origin: left center;
}
.primary-nav__list li:first-child .wave-link::after { left: 0; }
.util-nav__list .wave-link::after { left: 0.875rem; right: 0.875rem; }
.util-nav__list li:last-child .wave-link::after { right: 0; }
.wave-link:hover::after { transform: none; }
.wave-link[aria-current="page"]::after { background: var(--lime); transform: none; }
.primary-nav__list a:focus-visible, .util-nav__list a:focus-visible { outline-offset: -3px; }
.wave-rule {
  width: 6rem;
  height: 0.5rem;
  margin: 1.75rem 0 0;
  border: 0;
  background: var(--teal);
  clip-path: var(--wave-stroke);
}
.wave-rule--blue { background: var(--blue); }
.wave-rule--lime { background: var(--lime); }
.wave-list { margin: 0; padding-left: 0; list-style: none; }
.wave-list li, .plain-list.wave-list li { position: relative; margin: 0.625rem 0; padding-left: 2.25rem; }
.wave-list li::before, .plain-list.wave-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 1.5rem;
  height: 0.5rem;
  background: var(--teal);
  clip-path: var(--wave-stroke);
  border: 0;
  transform: none;
}
.plain-list--rules.wave-list li::before { background: var(--navy); }
.wave-empty::before {
  content: "";
  display: block;
  width: 3rem;
  height: 0.5rem;
  margin-bottom: 0.625rem;
  background: var(--blue);
  clip-path: var(--wave-stroke);
}

/* ---- Chrome: the one search box ---------------------------------------------- */
.omni { position: relative; display: flex; box-shadow: var(--shadow-sm); }
.omni__input {
  flex: 1;
  min-width: 0;
  height: 3rem;
  margin: 0;
  padding: 0 1rem;
  border: 2px solid var(--teal);
  border-right: 0;
  border-radius: 0;
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  -webkit-appearance: none;
  appearance: none;
}
.omni__input::placeholder { color: var(--teal); font-weight: 500; opacity: 1; }
.omni__input:focus-visible { outline: 3px solid var(--royal); outline-offset: -6px; }
.omni__submit {
  height: 3rem;
  margin: 0;
  padding: 0 1.25rem;
  border: 2px solid var(--teal);
  border-radius: 0;
  background: var(--teal);
  color: var(--white);
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}
.omni__submit:hover { border-color: var(--navy); background: var(--navy); }
.omni__submit:focus-visible { outline: 3px solid var(--lime); outline-offset: -7px; }
.omni__list {
  position: absolute; left: 0; right: 0; top: calc(100% + 0.5rem); z-index: 50;
  max-height: min(70vh, 32rem);
  margin: 0; padding: 0.375rem 0;
  overflow-y: auto;
  list-style: none;
  background: var(--white);
  border: 2px solid var(--teal);
  box-shadow: var(--shadow);
}
.omni__group {
  padding: 0.75rem 1rem 0.25rem;
  color: var(--teal);
  font-size: 0.875rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase;
}
.omni__option {
  display: flex; flex-direction: column; justify-content: center; gap: 0.125rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
.omni__option[aria-selected="true"], .omni__option:hover { background: var(--lime); }
.omni__option-title { color: var(--navy); font-weight: 700; line-height: 1.3; }
.omni__option-meta { color: var(--navy); font-size: 0.875rem; font-weight: 500; }
.omni__option--ask .omni__option-title { color: var(--teal); }
.omni__option--empty { cursor: default; font-size: 0.9375rem; }
.omni__option--empty:hover { background: none; }

/* ---- Parts: chips, status, buttons ------------------------------------------ */
.chip {
  display: inline-flex; align-items: center;
  min-height: 1.5rem;
  padding: 0.0625rem 0.625rem;
  border-radius: 999px;
  background: var(--chip);
  color: var(--chip-ink);
  font-size: 0.875rem; font-weight: 800; line-height: 1.3; letter-spacing: 0.01em;
  white-space: nowrap;
}
.chip--outline { box-shadow: inset 0 0 0 2px var(--navy); }
.status {
  display: inline-flex; align-items: center;
  min-height: 1.5rem;
  padding: 0.0625rem 0.625rem;
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  box-shadow: inset 0 0 0 2px var(--navy);
  font-size: 0.875rem; font-weight: 800; line-height: 1.3;
  white-space: nowrap;
}
.status--upcoming, .status--today, .status--scheduled { background: var(--lime); box-shadow: none; }
.status--cancelled { background: var(--orange); color: var(--black); box-shadow: none; }
.status--plain { padding: 0; background: none; box-shadow: none; }
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem;
  padding: 0.5rem 1.125rem;
  border: 2px solid var(--teal);
  background: var(--blue);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
  font-weight: 800; line-height: 1.25;
  text-decoration: none;
}
.button:hover { background: var(--lime); }
.button:active { transform: translate(4px, 4px); box-shadow: none; }

/* ---- Parts: photographs ------------------------------------------------------ */
/* Untreated color photographs: square corners, the logo's hard shadow, and a
   caption that names the place in capitals and then the moment. */
.photo { position: relative; margin: 0; }
.photo__frame { position: relative; background: var(--blue); box-shadow: var(--shadow); }
.photo__img { display: block; width: 100%; height: auto; }
.photo__caption { margin-top: 0.875rem; color: var(--navy); font-size: 0.875rem; line-height: 1.4; }
.photo__place { color: var(--teal); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.photo__moment { font-weight: 600; }
.photo__credit { display: block; margin-top: 0.125rem; font-weight: 500; }
.photo--on-dark .photo__frame { box-shadow: 6px 6px 0 var(--lime); }
.photo--on-dark .photo__caption { color: var(--white); }
.photo--on-dark .photo__place { color: var(--lime); }

/* ---- Parts: wave-topped bands -------------------------------------------------- */
.band { position: relative; padding-block: var(--band-pad); }
.band--wave {
  margin-top: -18px;
  padding-top: calc(var(--band-pad) + 18px);
  clip-path: var(--wave-lg);
}
.band--blue { background: var(--blue); }
.band--mist { background: var(--mist); }
.band--teal { --ring: var(--lime); background: var(--teal); color: var(--white); }
.band--teal .eyebrow { color: var(--lime); }
.band--teal .section-head__title, .band--teal h3 { color: var(--white); }
.band--teal a { color: var(--white); }
.band--teal .chip { box-shadow: 0 0 0 2px var(--white); }

/* ---- Home: Today in Saugatuck ------------------------------------------------- */
.today { background: var(--white); }
/* Three pieces placed by area: the date and title, the season's photograph,
   the board. One column puts the photograph between the title and the board
   so the place is on the first screen; from 48rem the photograph sits beside
   the title and the board runs full width under both; from 64rem the
   photograph holds the right half and stays put while the board scrolls. */
.today__inner { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "photo" "board"; }
.today__text { grid-area: text; padding: clamp(2rem, 6vw, 3.5rem) var(--gutter) clamp(1.5rem, 4vw, 2.5rem); }
.today__board { grid-area: board; padding: 0 var(--gutter) clamp(2.5rem, 6vw, 4rem); }
.today__title {
  max-width: 10ch;
  font-size: clamp(2.875rem, 1.5rem + 5.2vw, 5.375rem);
  line-height: 1.03;
  letter-spacing: -0.018em;
}
.today__beach {
  max-width: 30ch;
  margin: 1.125rem 0 0;
  color: var(--navy);
  font-size: var(--step-2); font-weight: 300; line-height: 1.3;
}
.board {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  padding: clamp(1rem, 2.5vw, 1.625rem) clamp(1rem, 2.5vw, 1.625rem) 1.25rem;
  background: var(--white);
  border: 2px solid var(--teal);
  box-shadow: var(--shadow);
}
.board__head {
  margin: 0 0 0.25rem;
  color: var(--teal);
  font-size: 0.9375rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase;
}
.board__head--later { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 3px solid var(--teal); }
.board__rows { margin: 0; padding: 0; list-style: none; }
.board__more {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem;
  margin: 1.25rem 0 0; padding-top: 1rem;
  border-top: 3px solid var(--teal);
  font-weight: 800;
}

/* One dated row: a tear-off calendar leaf in the row's own color, then what,
   when, and who. The whole row is the link. */
.row {
  position: relative;
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  gap: 0 1rem;
  padding: 0.875rem 0;
  border-top: 2px solid var(--blue);
}
.row:first-child { border-top: 0; }
.row__date {
  display: flex; flex-direction: column;
  align-self: start;
  width: 3.75rem;
  margin: 0;
  background: var(--white);
  border: 2px solid var(--navy);
  text-align: center;
  line-height: 1.1;
}
.row__date time { display: flex; flex-direction: column; }
.row__mon {
  padding: 0.1875rem 0 0.125rem;
  background: var(--row, var(--teal));
  color: var(--row-ink, var(--white));
  border-bottom: 2px solid var(--navy);
  font-size: 0.875rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase;
}
.row__day { padding-top: 0.3125rem; color: var(--navy); font-size: 1.625rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.row__dow { padding: 0.1875rem 0 0.3125rem; color: var(--navy); font-size: 0.875rem; font-weight: 700; }
.row__body { min-width: 0; }
.row__title { color: var(--teal); font-size: 1.125rem; font-weight: 800; line-height: 1.25; letter-spacing: 0; }
.row__title a { color: inherit; text-decoration: none; }
.row__title a::after { content: ""; position: absolute; inset: 0; }
.row:hover .row__title a { text-decoration: underline; text-decoration-thickness: 0.12em; }
.row__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem;
  margin: 0.3125rem 0 0;
  color: var(--navy);
  font-size: 0.9375rem; font-weight: 700;
}
.row__when, .row__cancelled {
  padding: 0 0.5rem;
  border-radius: 999px;
  font-weight: 900;
}
.row__when { background: var(--lime); color: var(--navy); }
.row__cancelled { background: var(--orange); color: var(--black); }
.row--cancelled .row__title a { text-decoration: line-through; }
.row__detail { max-width: 62ch; margin: 0.375rem 0 0; color: var(--navy); font-size: 0.9375rem; line-height: 1.5; }

.today__photo { grid-area: photo; min-width: 0; }
.photo--hero .photo__frame { box-shadow: none; clip-path: var(--wave-under); }
.photo--hero .photo__caption {
  position: absolute; left: var(--gutter); bottom: 2.75rem;
  max-width: calc(100% - 2 * var(--gutter));
  margin: 0;
  padding: 0.375rem 0.75rem;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 48rem) and (max-width: 63.99rem) {
  .today__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
    grid-template-areas: "text photo" "board board";
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
  }
  .today__text { padding-bottom: 0; }
  .today__photo { padding: clamp(2rem, 6vw, 3.5rem) var(--gutter) 0 0; }
}
@media (min-width: 64rem) {
  .today__inner {
    grid-template-columns: minmax(0, 1fr) min(44vw, 760px);
    grid-template-areas: "text photo" "board photo";
    column-gap: clamp(2.5rem, 4vw, 4.5rem);
    padding-left: max(var(--gutter), (100% - var(--max)) / 2);
  }
  .today__text { padding: 3.25rem 0 0; }
  .today__board { padding: 0 0 5rem; }
  .today__photo { position: sticky; top: 0; align-self: start; }
  .photo--hero .photo__caption { left: 1.5rem; bottom: 3rem; }
}

/* ---- Home: pay, apply, request, find ------------------------------------------- */
.tasks { padding-block: var(--band-pad); }
.tasks__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: 1.75rem; }
.task {
  --tile: var(--blue); --tile-ink: var(--navy);
  padding: 1.5rem 1.5rem 1.25rem;
  background: var(--tile);
  color: var(--tile-ink);
  border: 2px solid var(--teal);
  box-shadow: var(--shadow);
}
.task--periwinkle { --tile: var(--periwinkle); }
.task--lime { --tile: var(--lime); }
.task--teal { --tile: var(--teal); --tile-ink: var(--white); --ring: var(--lime); box-shadow: 6px 6px 0 var(--navy); }
.task__verb {
  margin-bottom: 0.625rem;
  color: var(--tile-ink);
  font-size: var(--step-3); letter-spacing: 0.04em; text-transform: uppercase;
}
.task__list { margin: 0; padding: 0; list-style: none; }
.task__list li + li { border-top: 1px solid var(--tile-ink); }
.task__list a {
  display: block;
  padding: 0.625rem 0;
  color: var(--tile-ink);
  font-weight: 800; line-height: 1.3;
  text-decoration: none;
}
.task__list a:hover { text-decoration: underline; }
.task__note { display: block; margin-top: 0.125rem; font-size: 0.875rem; font-weight: 600; }

/* ---- Home: next at City Hall --------------------------------------------------- */
.city-hall__grid { display: grid; gap: 2.75rem clamp(2rem, 5vw, 4.5rem); }
.meeting-list { margin: 0; padding: 0; list-style: none; }
.meeting-list__item {
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr);
  gap: 0 1rem;
  padding: 1rem 0;
  border-top: 2px solid var(--blue);
}
.meeting-list__item:first-child { border-top: 0; padding-top: 0; }
.meeting-list__date { margin: 0; color: var(--white); font-size: 1.375rem; font-weight: 900; line-height: 1.1; }
.meeting-list__date span { display: block; color: var(--lime); font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; }
.meeting-list__title { font-size: 1.25rem; font-weight: 800; line-height: 1.25; letter-spacing: 0; }
.meeting-list__title a { text-decoration: none; }
.meeting-list__title a:hover { text-decoration: underline; }
.meeting-list__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.875rem;
  margin: 0.375rem 0 0;
  color: var(--blue);
  font-size: 0.9375rem; font-weight: 600;
}
.city-hall__zoom { max-width: 52ch; margin: 1.5rem 0 0; color: var(--white); font-size: 1rem; }
/* The ribbon cutting is a 1,067px frame: held at 32rem so it never paints
   past half its width. */
.city-hall__photo { max-width: 32rem; }
.city-hall__agenda-title { margin: 2.25rem 0 0.75rem; font-size: var(--step-2); }
.agenda-teaser { margin: 0; padding: 0; list-style: none; }
.agenda-teaser a {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.875rem;
  padding: 0.625rem 0;
  border-top: 2px solid var(--blue);
  text-decoration: none;
}
.agenda-teaser li:first-child a { border-top: 0; }
.agenda-teaser__label {
  display: inline-grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: var(--lime);
  color: var(--navy);
  font-size: 0.9375rem; font-weight: 900;
}
.agenda-teaser__title { font-weight: 700; line-height: 1.3; }
.agenda-teaser__pages { color: var(--blue); font-size: 0.875rem; font-weight: 700; white-space: nowrap; }
.agenda-teaser a:hover .agenda-teaser__title { text-decoration: underline; }
.more-link--light a { color: var(--white); }

/* ---- Home: beach and parks ------------------------------------------------------ */
.beach__grid { display: grid; gap: 3rem clamp(2rem, 5vw, 4.5rem); }
.facts { margin: 1.75rem 0 0; }
.facts__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.125rem 1.25rem;
  padding: 0.75rem 0;
  border-top: 2px solid var(--teal);
}
.facts dt { color: var(--teal); font-size: 0.875rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; padding-top: 0.2rem; }
.facts dd { margin: 0; font-weight: 600; }
.beach__photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 1.75rem 0.75rem;
}
.beach__photo--b, .beach__photo--d { margin-top: 2rem; }

/* ---- Home: news and notices ---------------------------------------------------- */
.news { padding-block: var(--band-pad); }
.news__grid { display: grid; gap: 2.75rem 4rem; }
.news-list { margin: 0; padding: 0; list-style: none; }
.news-list__item { padding: 1.25rem 0; border-top: 2px solid var(--teal); scroll-margin-top: 1rem; }
.news-list__date { margin: 0 0 0.375rem; color: var(--teal); font-size: 0.875rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.news-list__title { font-size: var(--step-1); line-height: 1.2; }
.news-list__body { max-width: 64ch; margin: 0.5rem 0 0; }
.news-list__source { margin: 0.5rem 0 0; font-size: 0.9375rem; font-weight: 700; }
/* The email sign-up sits under a rule like a news item, not in a panel. */
.signup { padding-top: 1.25rem; border-top: 2px solid var(--teal); }
.signup__title { margin-bottom: 0.75rem; font-size: var(--step-2); }
.signup p:last-child { margin-bottom: 0; }
.signup a { font-weight: 800; overflow-wrap: anywhere; }

/* ---- Interior: page heads -------------------------------------------------------- */
/* The brand's Blue panel with a wave cut into white at its foot. A meeting
   or an agenda item wears its board's voted color instead. */
.page-head {
  position: relative;
  padding: clamp(1.25rem, 3vw, 2rem) 0 calc(clamp(2.5rem, 5vw, 3.5rem) + 18px);
  background: var(--blue);
  color: var(--navy);
}
.page-head::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 19px;
  background: var(--white);
  clip-path: var(--wave-lg);
}
.crumbs ol {
  display: flex; flex-wrap: wrap;
  margin: 0 0 1.5rem; padding: 0;
  list-style: none;
  font-size: 0.875rem; font-weight: 700;
}
.crumbs li + li::before { content: "/"; margin: 0 0.5rem; }
.crumbs a { color: inherit; }
.page-head__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0 0 0.875rem; }
.page-head__item { font-size: 0.875rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.page-head__title { max-width: 20ch; font-size: var(--step-6); }
.page-head__title--item { max-width: 32ch; font-size: var(--step-4); line-height: 1.08; }
.page-head__lede { max-width: 56ch; margin: 1.125rem 0 0; font-size: var(--step-1); font-weight: 300; line-height: 1.45; }
.page-head__when { margin: 1rem 0 0; font-size: var(--step-1); font-weight: 800; }
.page-head__where { margin: 0.25rem 0 0; font-weight: 600; }
.page-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.875rem 1.5rem; margin: 1.5rem 0 0; }
.page-head__phone { font-size: 0.9375rem; font-weight: 600; }
.page-head__link { font-weight: 700; }
.eyebrow--plain { margin: 0; }

.page-head--meeting, .page-head--item {
  --ring: var(--board-ring);
  background: var(--board);
  color: var(--board-ink);
}
.page-head--meeting .page-head__title, .page-head--item .page-head__title,
.page-head--meeting a, .page-head--item a { color: var(--board-ink); }
.page-head--meeting .chip, .page-head--item .chip { box-shadow: 0 0 0 2px var(--board-ink); }
.page-head--meeting .button, .page-head--item .button {
  background: var(--white);
  color: var(--navy);
  border-color: var(--navy);
  box-shadow: 4px 4px 0 var(--board-ring);
}
.page-head--meeting .button:hover, .page-head--item .button:hover { background: var(--lime); }

/* ---- Meetings: one meeting ------------------------------------------------------- */
.meeting__body, .service__body {
  display: grid;
  gap: 3rem clamp(2.5rem, 5vw, 4rem);
  padding-block: clamp(2rem, 5vw, 3rem) var(--band-pad);
}
.meeting__agenda-note { margin: 0 0 1.25rem; }
.agenda { margin: 0; padding: 0; list-style: none; border-top: 3px solid var(--teal); }
.agenda__section {
  display: flex; align-items: baseline; gap: 0.75rem;
  padding: 1.5rem 0 0.5rem;
  color: var(--teal);
  font-size: 0.9375rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase;
}
.agenda__item { border-bottom: 2px solid var(--blue); }
.agenda__number {
  display: inline-grid; place-items: center;
  min-width: 2.5rem; height: 2.5rem;
  padding: 0 0.375rem;
  border-radius: 999px;
  background: var(--board, var(--teal));
  color: var(--board-ink, var(--white));
  font-size: 0.9375rem; font-weight: 900; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.agenda__section .agenda__number { min-width: 0; height: auto; padding: 0; background: none; color: inherit; }
.fan__summary {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto 1.25rem;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.875rem 0.5rem 0.875rem 0;
  cursor: pointer;
  list-style: none;
}
.fan__summary::-webkit-details-marker { display: none; }
.fan__summary::after {
  content: "";
  justify-self: center;
  width: 0.625rem; height: 0.625rem;
  margin-top: -0.25rem;
  border-right: 3px solid var(--teal);
  border-bottom: 3px solid var(--teal);
  transform: rotate(45deg);
}
.fan[open] > .fan__summary::after { margin-top: 0.25rem; transform: rotate(-135deg); }
.fan__summary:focus-visible { outline-offset: -3px; }
.fan__summary:hover .fan__title { text-decoration: underline; text-decoration-thickness: 0.1em; }
.fan__title { color: var(--navy); font-size: 1.0625rem; font-weight: 700; line-height: 1.35; }
.fan__pages { color: var(--navy); font-size: 0.875rem; font-weight: 700; white-space: nowrap; }
.agenda__item--plain {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto 1.25rem;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.875rem 0.5rem 0.875rem 0;
}
.agenda__item--plain .agenda__number { background: var(--white); color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
.fan__body { padding: 0 0 1.5rem 3.75rem; }
.fan__thumbs {
  display: flex;
  margin: 0; padding: 0.875rem 1rem 1.25rem 0.25rem;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x proximity;
}
.fan__thumbs li { position: relative; z-index: calc(100 - var(--i)); flex: none; margin-left: 0.75rem; scroll-snap-align: start; }
.fan__thumbs li:first-child { margin-left: 0; }
.fan__thumbs li:hover, .fan__thumbs li:focus-within { z-index: 200; }
/* A strip with more pages than the column shows fades at its trailing edge,
   so a page cut at the column reads as the strip continuing, not as a clip;
   packet.js takes the class off once the strip is scrolled to its end. */
.fan__thumbs--more {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 4rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 4rem), transparent);
}
/* Every page sits in the same portrait leaf, so a landscape slide and a
   letter page line up as one row of paper. */
.fan__thumb {
  display: grid; place-items: center;
  width: 7rem; height: 9.25rem;
  background: var(--white);
  border: 2px solid var(--navy);
  box-shadow: 3px 3px 0 var(--teal);
}
.fan__thumb img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
.fan__thumb:hover, .fan__thumb:focus-visible { transform: translateY(-0.5rem); }
.fan__thumb:focus-visible { outline-offset: -6px; }
.fan__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin: 0.875rem 0 0; }
.fan__pdf { font-weight: 700; }
.meeting__empty { font-size: var(--step-1); font-weight: 300; }
/* A rolled list with nothing left in it: the Today board, Next Meetings. */
.list-note { margin: 0.75rem 0 0; font-size: 1.0625rem; font-weight: 300; line-height: 1.45; }
.list-note--light { color: var(--white); }

.meeting__side, .service__side {
  align-self: start;
  padding: 1.5rem;
  background: var(--white);
  border: 2px solid var(--teal);
}
.docs { margin: 0; padding: 0; list-style: none; }
.docs__item {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.125rem 1rem;
  padding: 0.75rem 0;
  border-bottom: 2px solid var(--blue);
  font-weight: 700;
}
.docs__meta { font-size: 0.875rem; font-weight: 600; }
.meeting__schedule { font-size: 0.9375rem; }

/* ---- Meetings: the calendar, the boards, taking part ------------------------------ */
/* Every board's meetings on one month grid in their voted colors, with each
   name printed in its chip. The grid needs room for those names, so on a
   phone it steps aside and the list beside it is the calendar. */
.meetings-next { padding-block: clamp(2rem, 5vw, 3rem) var(--band-pad); }
.meetings-next__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; margin-bottom: 1.25rem; }
.meetings-next__head .section-title { margin: 0; }
.meetings-next__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
.rows { margin: 0; padding: 0; list-style: none; }
.rows--meetings .row__title { font-size: 1.0625rem; }

.cal-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.cal-filter__label { margin: 0; color: var(--teal); font-size: 0.875rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.cal-filter__list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.cal-filter__chip {
  display: inline-flex; align-items: center; gap: 0.375rem;
  min-height: 2.25rem;
  padding: 0.25rem 0.875rem;
  border: 2px solid var(--navy);
  border-radius: 999px;
  background: var(--chip, var(--white));
  color: var(--chip-ink, var(--navy));
  font: inherit; font-size: 0.9375rem; font-weight: 800; line-height: 1.2;
  cursor: pointer;
}
.cal-filter__chip:hover { box-shadow: 3px 3px 0 var(--teal); }
.cal-filter__chip[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--navy); }
.cal-filter__chip[aria-pressed="true"]::before {
  content: "";
  width: 0.375rem; height: 0.75rem;
  margin: -0.125rem 0.125rem 0 0;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(45deg);
}

.cal-months { display: grid; gap: 2rem; }
.cal { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.cal__month { padding-bottom: 0.75rem; color: var(--teal); font-size: var(--step-2); font-weight: 900; text-align: left; }
.cal th {
  padding: 0.375rem 0.5rem;
  border-bottom: 3px solid var(--teal);
  color: var(--navy);
  font-size: 0.875rem; font-weight: 900; letter-spacing: 0.06em; text-align: left; text-transform: uppercase;
}
.cal abbr { text-decoration: none; }
.cal td { height: 5.25rem; padding: 0.375rem; border: 2px solid var(--blue); vertical-align: top; }
.cal__blank { background: var(--white); }
.cal__n { display: block; color: var(--navy); font-size: 0.9375rem; font-weight: 800; line-height: 1.4; }
.cal__day.is-past { background: var(--mist); }
.cal__day.is-today { background: var(--lime); }
.cal__day.is-today .cal__n { font-weight: 900; }
.cal__meeting {
  display: block;
  margin-top: 0.25rem;
  padding: 0.3125rem 0.4375rem;
  background: var(--chip);
  color: var(--chip-ink);
  border: 2px solid var(--navy);
  font-size: 0.75rem; font-weight: 800; line-height: 1.2;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.cal__name { display: block; }
.cal__meeting:hover { box-shadow: 3px 3px 0 var(--teal); }
.cal__meeting:hover .cal__name { text-decoration: underline; }
.cal__meeting.is-cancelled .cal__name { text-decoration: line-through; }
/* The month pager sits on the month's own title row. */
.cal-months { position: relative; }
.cal__pager { position: absolute; top: 0; right: 0; display: flex; gap: 0.75rem; }
.cal__step { gap: 0.5rem; min-height: 2.5rem; padding: 0.375rem 0.875rem; font: inherit; font-weight: 800; cursor: pointer; }
.cal__step[disabled] { visibility: hidden; }
.cal__step--prev::before, .cal__step--next::after {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border-left: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
}
.cal__step--prev::before { transform: rotate(45deg); }
.cal__step--next::after { transform: rotate(-135deg); }

/* The boards, grouped the way the City runs them. A card's rule is the
   board's own color, outlined so a white or cream board still shows one. */
.boards__group { margin: 2.25rem 0 1rem; color: var(--navy); font-size: var(--step-1); }
.boards .section-head + .boards__group { margin-top: 0; }
.boards__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.board-card {
  position: relative;
  padding: 1rem 1.125rem 0.875rem 1.75rem;
  background: var(--white);
  border: 2px solid var(--navy);
}
.board-card::before {
  content: "";
  position: absolute; left: -2px; top: -2px; bottom: -2px;
  width: 0.875rem;
  background: var(--board);
  border: 2px solid var(--navy);
}
.board-card__name { font-size: 1.125rem; line-height: 1.2; letter-spacing: 0; }
.board-card__name a { color: var(--teal); text-decoration: none; }
.board-card__name a::after { content: ""; position: absolute; inset: 0; }
.board-card:hover { box-shadow: var(--shadow-sm); }
.board-card:hover .board-card__name a { text-decoration: underline; text-decoration-thickness: 0.12em; }
.board-card__when { margin: 0.375rem 0 0; font-size: 0.9375rem; font-weight: 700; line-height: 1.4; }
.board-card__meta { display: flex; flex-direction: column; gap: 0.125rem; margin: 0.5rem 0 0; color: var(--navy); font-size: 0.875rem; font-weight: 600; line-height: 1.4; }
.board-card__next { display: contents; }

.take-part { display: grid; gap: 2.5rem clamp(2.5rem, 5vw, 4.5rem); padding-block: var(--band-pad); }
.take-part__text { max-width: 40rem; }
.take-part__lede { font-size: var(--step-1); font-weight: 300; line-height: 1.5; }
.take-part__zoom { margin: 1.5rem 0 0; }
.take-part__zoom div { display: grid; gap: 0.125rem 1.25rem; padding: 0.75rem 0; border-top: 2px solid var(--teal); }
.take-part__zoom + .wave-rule { margin-top: 1rem; }
.take-part__zoom dt { color: var(--teal); font-size: 0.875rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; padding-top: 0.2rem; }
.take-part__zoom dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }

.minutes-band .row { border-top-color: var(--white); }
.rows--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); column-gap: 2.5rem; }
.rows--grid .row:first-child { border-top: 2px solid var(--white); }
.minutes-band__more { margin: 1.75rem 0 0; font-weight: 800; }

/* ---- Meetings: one board, one board's year ------------------------------------ */
.board-page__body {
  display: grid;
  gap: 3rem clamp(2.5rem, 5vw, 4rem);
  padding-block: clamp(2rem, 5vw, 3rem) var(--band-pad);
}
.board-page__main { min-width: 0; }
.board-page__main > section + section { margin-top: 3rem; }
/* A body with no meeting record has nothing for a main column: the notice
   and the card share one reading column instead of a hollow beside a card. */
.board-page__body.board-page__body--no-records { grid-template-columns: minmax(0, 1fr); max-width: 46rem; margin-inline: auto; }
.board-page__ended { margin: 0 0 2.5rem; padding: 1rem 1.25rem; background: var(--mist); border-left: 6px solid var(--orange); font-weight: 600; }
.board-page__side {
  align-self: start;
  padding: 1.5rem;
  background: var(--white);
  border: 2px solid var(--teal);
}
.board-page__purpose { font-size: 1rem; }
.board-page__outside { margin: 1.5rem 0 0; font-weight: 700; }
.board-page__clerk { margin: 1.5rem 0 0; padding-top: 1rem; border-top: 2px solid var(--blue); font-size: 0.9375rem; }
.board-page__clerk a { overflow-wrap: anywhere; }
.members { margin: 0; padding: 0; list-style: none; }
.members__row { display: flex; flex-direction: column; padding: 0.625rem 0; border-top: 2px solid var(--blue); line-height: 1.35; }
.members__row:first-child { border-top: 0; padding-top: 0; }
.members__name { font-weight: 800; }
.members__row.is-vacant .members__name { font-style: italic; font-weight: 600; }
.members__role, .members__term { font-size: 0.9375rem; font-weight: 600; }
.members__note { margin: 0.75rem 0 0; font-size: 0.9375rem; }
.year-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.875rem; margin: 0; padding: 0; list-style: none; }
.year-links a {
  display: flex; flex-direction: column;
  padding: 0.75rem 1rem 0.625rem;
  background: var(--white);
  border: 2px solid var(--teal);
  box-shadow: var(--shadow-sm);
  color: var(--navy);
  text-decoration: none;
}
.year-links a:hover { background: var(--lime); }
.year-links__year { color: var(--teal); font-size: var(--step-2); font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.year-links__n { font-size: 0.875rem; font-weight: 700; }
.board-year { padding-block: clamp(2rem, 5vw, 3rem) 0; }
.board-year .rows { max-width: 52rem; }

/* Older, up, and newer under a year; previous and next under a meeting. */
.year-nav, .meeting-nav { display: grid; gap: 1rem; margin-top: 2.5rem; padding-bottom: var(--band-pad); }
.meeting-nav { margin-top: 3rem; padding-bottom: 0; }
.year-nav a, .meeting-nav a {
  display: block;
  padding: 1rem 1.25rem;
  background: var(--white);
  border: 2px solid var(--teal);
  box-shadow: var(--shadow-sm);
  color: var(--navy);
  font-weight: 700; line-height: 1.35;
  text-decoration: none;
}
.year-nav a:hover, .meeting-nav a:hover { background: var(--lime); }
.meeting-nav span { display: block; margin-bottom: 0.25rem; color: var(--teal); font-size: 0.875rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.year-nav__up { align-self: center; text-align: center; }
.meeting__main { min-width: 0; }
.meeting__note { font-size: 0.9375rem; }

/* ---- Meetings: the packet as one bar ------------------------------------------- */
.packet-map { margin: 0 0 1.75rem; }
.item-page .packet-map { margin: clamp(1.75rem, 3vw, 2.25rem) 0 0; }
.packet-map__bar {
  position: relative;
  height: 2.75rem;
  margin: 0; padding: 0;
  list-style: none;
  background: var(--white);
  border: 2px solid var(--navy);
  box-shadow: var(--shadow-sm);
}
.packet-map__bar > li {
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--s) * 100%);
  width: calc((var(--e) - var(--s)) * 100%);
}
.packet-map__agenda { background: var(--mist); }
.packet-map__item { container-type: inline-size; background: var(--blue); border-left: 2px solid var(--navy); }
.packet-map__item.is-current { background: var(--board, var(--teal)); }
.packet-map__seg {
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  overflow: hidden;
  color: var(--navy);
  font-size: 0.875rem; font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}
a.packet-map__seg:hover { background: var(--lime); }
a.packet-map__seg:focus-visible { outline: 3px solid var(--royal); outline-offset: -5px; }
.packet-map__item.is-current .packet-map__seg { color: var(--board-ink, var(--white)); }
/* A segment narrower than its label sets it smaller; one too narrow to tap
   is a plain block of color, its item still a link in the agenda below. */
@container (max-width: 2.25rem) { .packet-map__seg { font-size: 0.6875rem; } }
@container (max-width: 1.5rem) {
  a.packet-map__seg { display: none; }
  .packet-map__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
.packet-map__scale {
  display: flex; justify-content: space-between;
  margin: 0.375rem 0 0;
  color: var(--navy);
  font-size: 0.875rem; font-weight: 700;
}
.packet-map__caption { margin-top: 0.125rem; color: var(--navy); font-size: 0.9375rem; font-weight: 700; }

/* ---- Meetings: one agenda item, page by page ---------------------------------- */
.reader { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem); }
.reader__rail { min-width: 0; }
.reader__range { margin: 0 0 0.75rem; color: var(--teal); font-size: 0.875rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.reader__thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 5.5rem;
  gap: 0.75rem;
  margin: 0; padding: 0.25rem 0.5rem 0.875rem 0.25rem;
  overflow-x: auto;
  list-style: none;
}
.reader__thumbs a {
  position: relative;
  display: block;
  background: var(--white);
  border: 2px solid var(--navy);
  color: var(--navy);
  text-decoration: none;
}
.reader__thumbs img { display: block; width: 100%; height: auto; }
.reader__thumbs span {
  position: absolute; left: 0; bottom: 0;
  padding: 0 0.5rem;
  background: var(--navy);
  color: var(--white);
  font-size: 0.875rem; font-weight: 800;
}
.reader__thumbs a[aria-current="true"] { border-color: var(--teal); box-shadow: var(--shadow-sm); }
.reader__thumbs a[aria-current="true"] span { background: var(--lime); color: var(--navy); }
.reader__thumbs a:focus-visible { outline-offset: -6px; }
.reader__pages { display: grid; gap: 3rem; min-width: 0; }
.sheet { scroll-margin-top: 1rem; }
.sheet__label {
  display: flex; align-items: center; gap: 0.875rem;
  margin: 0 0 0.875rem;
  color: var(--teal);
  font-size: 0.9375rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.sheet__label::after { content: ""; flex: 1; max-width: 40rem; height: 3px; background: var(--teal); }
.sheet__image {
  display: block;
  width: 100%; max-width: 50rem; height: auto;
  background: var(--white);
  border: 2px solid var(--navy);
  box-shadow: var(--shadow);
}
.sheet:target .sheet__image { view-transition-name: packet-page; }
.sheet__text { max-width: 50rem; margin-top: 1.25rem; background: var(--white); border: 2px solid var(--teal); }
.sheet__text summary { padding: 0.75rem 1rem; color: var(--teal); font-weight: 800; cursor: pointer; }
.sheet__text summary:focus-visible { outline-offset: -5px; }
.sheet__text p { margin: 0; padding: 0 1rem 0.875rem; font-size: 1rem; overflow-wrap: anywhere; }
.sheet__scan { max-width: 50rem; margin: 1rem 0 0; font-size: 0.9375rem; font-style: italic; }
.item-nav { display: grid; gap: 1rem; padding-bottom: var(--band-pad); }
.item-nav a {
  display: block;
  padding: 1rem 1.25rem;
  background: var(--white);
  border: 2px solid var(--teal);
  box-shadow: var(--shadow-sm);
  color: var(--navy);
  font-weight: 700; line-height: 1.35;
  text-decoration: none;
}
.item-nav a:hover { background: var(--lime); }
.item-nav span { display: block; margin-bottom: 0.25rem; color: var(--teal); font-size: 0.875rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.item-nav__up { align-self: center; text-align: center; }

/* ---- Documents: the library ------------------------------------------------------ */
/* Shelves by what a document is, a search bar that stays in view, and each
   file shown by its own first page on the same paper leaf as a packet page. */
.library { padding-block: clamp(1.5rem, 4vw, 2.5rem) var(--band-pad); }
.shelves__list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.shelves__link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.3125rem 0.875rem;
  background: var(--white);
  border: 2px solid var(--teal);
  color: var(--teal);
  font-size: 0.9375rem; font-weight: 800; line-height: 1.2;
  text-decoration: none;
}
.shelves__link:hover { background: var(--lime); }
.shelves__link[aria-current="page"] { background: var(--teal); color: var(--white); }
.shelves__n { font-weight: 600; font-variant-numeric: tabular-nums; }
/* On a phone the shelves sit two to a row, half the height of one wrapped
   column, so the search bar and the first documents come sooner. */
@media (max-width: 39.99rem) {
  .shelves__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shelves__link { justify-content: space-between; height: 100%; padding: 0.375rem 0.625rem; font-size: 0.875rem; }
}

.library__controls {
  margin: 0 0 0.5rem;
  padding: 0.75rem 0.875rem 0.625rem;
  background: var(--blue);
  border: 2px solid var(--teal);
  box-shadow: var(--shadow-sm);
}
.library__row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem 0.625rem; }
.library__q {
  flex: 1 1 16rem;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 0;
  color: var(--navy);
  font: inherit; font-weight: 600;
}
.library__q::placeholder { color: var(--navy); opacity: 1; font-weight: 500; }
.library__go {
  min-height: 2.75rem;
  padding: 0 1.25rem;
  background: var(--teal);
  border: 2px solid var(--teal);
  color: var(--white);
  font: inherit; font-weight: 800;
  cursor: pointer;
}
.library__go:hover { background: var(--navy); border-color: var(--navy); }
.library__more { flex: 0 1 auto; }
.library__more summary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  background: var(--white);
  border: 2px solid var(--navy);
  color: var(--navy);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.library__more summary::-webkit-details-marker { display: none; }
.library__more summary::after {
  content: "";
  width: 0.5rem; height: 0.5rem;
  margin-top: -0.25rem;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(45deg);
}
.library__more[open] summary::after { margin-top: 0.25rem; transform: rotate(-135deg); }
.library__selects { display: flex; flex-wrap: wrap; gap: 0.5rem 0.875rem; padding-top: 0.5rem; }
.library__selects label { display: flex; flex-direction: column; gap: 0.125rem; font-size: 0.875rem; font-weight: 800; }
.library__selects select {
  min-height: 2.75rem;
  max-width: 17rem;
  padding: 0 0.625rem;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 0;
  color: var(--navy);
  font: inherit; font-size: 1rem; font-weight: 600;
}
.library__summary { margin: 0.5rem 0 0; color: var(--navy); font-size: 0.9375rem; font-weight: 700; }
.library__shelf { outline-offset: 6px; }
.library__empty { margin: 2rem 0; font-size: var(--step-1); font-weight: 300; }

.docs-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); column-gap: 2.5rem; margin: 0; padding: 0; list-style: none; }
.doc {
  position: relative;
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 0 1.125rem;
  padding: 1.125rem 0;
  border-top: 2px solid var(--blue);
}
.doc__leaf {
  display: grid; place-items: center;
  align-self: start;
  width: 5rem; height: 6.5rem;
  background: var(--white);
  border: 2px solid var(--navy);
  box-shadow: 3px 3px 0 var(--teal);
}
.doc__leaf img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
.doc__leaf--file { background: var(--mist); }
.doc__leaf--file span { color: var(--teal); font-size: 0.9375rem; font-weight: 900; letter-spacing: 0.06em; }
.doc__body { min-width: 0; }
.doc__type { margin: 0 0 0.25rem; color: var(--teal); font-size: 0.875rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.doc__title { font-size: 1.0625rem; font-weight: 800; line-height: 1.3; letter-spacing: 0; }
.doc__title a { color: var(--navy); text-decoration: none; }
.doc__title a::after { content: ""; position: absolute; inset: 0; }
.doc:hover .doc__title a { text-decoration: underline; text-decoration-thickness: 0.12em; }
.doc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; margin: 0.375rem 0 0; color: var(--navy); font-size: 0.9375rem; font-weight: 600; }
.doc__meeting { position: relative; z-index: 1; margin: 0.25rem 0 0; font-size: 0.9375rem; font-weight: 700; }

.library [data-stoa-index-pagination] { margin-top: 2rem; }
.library [data-stoa-index-pagination] a, .library [data-stoa-index-pagination] [aria-current="page"] {
  padding: 0 0.875rem;
  background: var(--white);
  border: 2px solid var(--teal);
  color: var(--teal);
  font-weight: 800;
  text-decoration: none;
}
.library [data-stoa-index-pagination] a:hover { background: var(--lime); }
.library [data-stoa-index-pagination] [aria-current="page"] { background: var(--teal); color: var(--white); }

/* ---- Search: the results page ------------------------------------------------------ */
/* The box again at the head of the results, a written answer in its own
   panel when the City has one, each group of the site's own pages, and last
   the pages inside documents, each quoted beside the document's first page. */
.search-page { padding-block: clamp(1.5rem, 4vw, 2.5rem) var(--band-pad); }
.search-page__form { display: flex; max-width: 46rem; margin: 0 0 0.875rem; box-shadow: var(--shadow-sm); }
.search-page__q {
  flex: 1;
  min-width: 0;
  height: 3.25rem;
  margin: 0;
  padding: 0 1rem;
  border: 2px solid var(--teal);
  border-right: 0;
  border-radius: 0;
  background: var(--white);
  color: var(--navy);
  font: inherit; font-size: var(--step-1); font-weight: 600;
  -webkit-appearance: none;
  appearance: none;
}
.search-page__q:focus-visible { outline: 3px solid var(--royal); outline-offset: -6px; }
.search-page__go {
  height: 3.25rem;
  margin: 0;
  padding: 0 1.5rem;
  border: 2px solid var(--teal);
  border-radius: 0;
  background: var(--teal);
  color: var(--white);
  font: inherit; font-size: 1rem; font-weight: 800;
  cursor: pointer;
}
.search-page__go:hover { border-color: var(--navy); background: var(--navy); }
.search-page__go:focus-visible { outline: 3px solid var(--lime); outline-offset: -7px; }
.search-page__try { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.875rem; margin: 0 0 1.5rem; font-weight: 700; }
.search-page__try a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--teal); font-weight: 800; }
.search-page__summary { margin: 0 0 1.25rem; color: var(--navy); font-size: 0.9375rem; font-weight: 700; }
.search-page__summary:empty { display: none; }

.answer {
  max-width: 46rem;
  margin: 0 0 2rem;
  padding: 1.125rem 1.25rem 1.25rem;
  background: var(--white);
  border: 2px solid var(--teal);
}
.answer__label { margin: 0 0 0.5rem; color: var(--teal); font-size: 0.9375rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.answer__text { max-width: 60ch; margin: 0; font-size: var(--step-1); font-weight: 500; line-height: 1.45; }
.answer__sources { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.answer__sources a {
  display: inline-flex; align-items: center;
  min-height: 2.75rem;
  padding: 0.375rem 0.875rem;
  background: var(--white);
  border: 2px solid var(--teal);
  color: var(--teal);
  font-weight: 800;
  text-decoration: none;
}
.answer__sources a:hover { background: var(--lime); }

.search-results { outline-offset: 6px; }
.search-group { max-width: 60rem; margin: 0 0 2.5rem; }
.search-group__title { display: flex; align-items: baseline; gap: 0.625rem; margin: 0 0 0.25rem; font-size: var(--step-2); }
.search-group__n {
  display: inline-flex; align-items: center;
  min-height: 1.5rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: var(--blue);
  color: var(--navy);
  font-size: 0.875rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.results { margin: 0; padding: 0; list-style: none; }
.result { position: relative; padding: 0.875rem 0; border-top: 2px solid var(--blue); }
.result__title { font-size: 1.0625rem; font-weight: 800; line-height: 1.3; letter-spacing: 0; }
.result__title a { color: var(--navy); text-decoration: none; }
.result__title a::after { content: ""; position: absolute; inset: 0; }
.result:hover .result__title a { text-decoration: underline; text-decoration-thickness: 0.12em; }
.result__meta { margin: 0.25rem 0 0; color: var(--teal); font-size: 0.9375rem; font-weight: 700; }
.result__body { max-width: 68ch; margin: 0.25rem 0 0; font-weight: 400; line-height: 1.5; }
.search-results mark { padding: 0 0.125em; background: var(--lime); color: var(--navy); font-weight: 700; }
.search-group__more {
  min-height: 2.75rem;
  margin-top: 0.75rem;
  padding: 0 1rem;
  background: var(--white);
  border: 2px solid var(--teal);
  color: var(--teal);
  font: inherit; font-weight: 800;
  cursor: pointer;
}
.search-group__more:hover { background: var(--lime); }
.docs-list--hits .doc { border-top: 2px solid var(--blue); }
.doc__snippet { max-width: 68ch; margin: 0.375rem 0 0; font-size: 0.9375rem; font-weight: 400; line-height: 1.5; }
.search-group__library { margin: 1rem 0 0; font-weight: 700; }
.search-empty { max-width: 46rem; }
.search-empty__text, .search-results noscript p { margin: 0; font-size: var(--step-1); font-weight: 300; line-height: 1.45; }
.search-empty .lost__links { margin-top: 1.25rem; }

/* ---- Services ----------------------------------------------------------------------- */
.service__main { min-width: 0; }
.service__section { margin-top: 3rem; }
.next-pickup {
  padding: 1.5rem;
  background: var(--lime);
  border: 2px solid var(--teal);
  box-shadow: var(--shadow);
}
.next-pickup__head { margin-bottom: 1rem; font-size: 0.9375rem; letter-spacing: 0.08em; text-transform: uppercase; }
.next-pickup__sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
.next-pickup__side {
  display: flex; flex-direction: column;
  margin: 0;
  padding: 1rem 1.25rem 1.125rem;
  background: var(--white);
  border: 2px solid var(--navy);
}
.next-pickup__where { color: var(--teal); font-size: 0.875rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.next-pickup__day { margin-top: 0.5rem; font-size: 1.25rem; font-weight: 700; }
.next-pickup__date { color: var(--navy); font-size: var(--step-4); font-weight: 900; line-height: 1; }
.next-pickup__out { margin: 1.125rem 0 0; font-weight: 600; }
.table-wrap { margin-top: 1.25rem; overflow-x: auto; border: 2px solid var(--teal); }
.schedule { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.schedule th, .schedule td { padding: 0.625rem 0.875rem; border-bottom: 1px solid var(--blue); text-align: left; vertical-align: middle; }
.schedule thead th { background: var(--teal); color: var(--white); font-size: 0.875rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.schedule tbody th { font-weight: 800; }
.schedule tr.is-done { background: var(--mist); }
.schedule tr.is-next { background: var(--lime); }
.schedule tr.is-next th, .schedule tr.is-next td { font-weight: 900; }
.schedule tr:last-child th, .schedule tr:last-child td { border-bottom: 0; }
.schedule__junk a { font-weight: 700; }
/* A phone keeps each pickup date on one line, so the year reads as twelve short rows
   instead of three-line cells, and the status column stays inside the frame. */
@media (max-width: 35.99rem) {
  [data-pickup-table] th, [data-pickup-table] td { padding: 0.5rem 0.375rem; font-size: 0.875rem; }
  [data-pickup-table] thead th { font-size: 0.75rem; letter-spacing: 0.04em; }
  [data-pickup-table] td time { white-space: nowrap; }
  [data-pickup-table] .status { white-space: normal; text-align: center; }
}
.service__doc { margin: 1rem 0 0; }
.doc-link { font-weight: 800; }
.doc-link__meta { font-size: 0.875rem; font-weight: 600; }
.guide { margin: 1.25rem 0 0; }
.guide__row { display: grid; gap: 0.25rem 1.5rem; padding: 1rem 0; border-top: 2px solid var(--blue); }
.guide__label { padding-top: 0.15rem; font-size: 0.9375rem; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; }
.guide__text { margin: 0; }
.plain-list { margin: 0; padding: 0; list-style: none; }
.plain-list li { position: relative; margin: 0.625rem 0; padding-left: 1.5rem; }
.plain-list li::before { content: ""; position: absolute; left: 0.25rem; top: 0.62em; width: 0.5rem; height: 0.5rem; background: var(--teal); }
.plain-list--steps { counter-reset: step; }
.plain-list--steps li { min-height: 2rem; padding-left: 2.75rem; counter-increment: step; }
.plain-list--steps li::before {
  content: counter(step);
  top: 0; left: 0;
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  font-size: 0.9375rem; font-weight: 900;
}
.callout { margin: 1.5rem 0 0; padding: 1rem 1.25rem; background: var(--mist); border-left: 6px solid var(--teal); font-weight: 600; }
.fines { display: grid; gap: 0.75rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.fines li { padding: 0.75rem 1rem; background: var(--white); border: 2px solid var(--navy); border-left: 8px solid var(--orange); font-weight: 700; }
.service__side .photo { margin: -1.5rem -1.5rem 1.75rem; }
.service__side .photo__frame { box-shadow: none; }
.service__side .photo__caption { padding: 0 1.5rem; }
.service__side p { margin: 0 0 0.75rem; }
.person { padding: 0.875rem 0 0.75rem; border-top: 2px solid var(--blue); }
.person p { margin: 0; }
.person__name { font-weight: 800; }
.person__role, .person__reach { font-size: 0.9375rem; }
.person__reach a { overflow-wrap: anywhere; }

/* ---- Services: a task page's head, in its verb's color ------------------------------ */
/* Pay is Blue, Apply Periwinkle, Request Teal, Find Lime: the homepage's task
   tiles. On Periwinkle the title and small capitals go Navy (Teal there is
   4.3:1, short of AA at small sizes); on Teal everything goes White and Lime. */
.page-head--service { padding-bottom: calc(clamp(2rem, 4vw, 3rem) + 18px); }
.page-head--periwinkle { background: var(--periwinkle); }
.page-head--periwinkle .page-head__title, .page-head--periwinkle .eyebrow { color: var(--navy); }
.page-head--lime { background: var(--lime); }
.page-head--teal { --ring: var(--lime); background: var(--teal); color: var(--white); }
.page-head--teal .page-head__title, .page-head--teal a { color: var(--white); }
.page-head--teal .eyebrow, .page-head--teal .photo__place { color: var(--lime); }
.page-head--teal .photo__caption { color: var(--white); }
.page-head--teal .photo__frame { box-shadow: 6px 6px 0 var(--lime); }
.service-head { display: grid; gap: 2rem clamp(2.5rem, 5vw, 4rem); }
.service-head__media { width: 100%; max-width: 26rem; min-width: 0; }
.verb {
  display: inline-flex; align-items: center;
  min-height: 1.75rem;
  padding: 0.125rem 0.75rem;
  background: var(--white);
  color: var(--navy);
  border: 2px solid var(--navy);
  box-shadow: 3px 3px 0 var(--navy);
  font-size: 0.875rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase;
}
.page-head--teal .verb { color: var(--teal); border-color: var(--white); box-shadow: 3px 3px 0 var(--lime); }

/* The City's maps and marks, whole: square corners, the hard shadow, white. */
.graphic { margin: 1.5rem 0; }
.graphic__frame { background: var(--white); border: 2px solid var(--navy); box-shadow: var(--shadow); }
.graphic__img { display: block; width: 100%; height: auto; }
.graphic__caption { margin-top: 0.75rem; color: var(--navy); font-size: 0.9375rem; font-weight: 600; line-height: 1.45; }
.graphic__doc { display: block; margin-top: 0.375rem; }
.graphic--flood-map { max-width: 34rem; }
.graphic--head { max-width: 17rem; margin: 0; }
.graphic--head .graphic__frame { border: 0; }
.page-head .graphic__caption { color: inherit; }

/* ---- Services: the sections a task page is built from -------------------------------- */
.on-page { margin: 0 0 2.75rem; padding: 1rem 1.25rem 1.125rem; background: var(--mist); border-left: 6px solid var(--teal); }
.on-page__title { margin: 0 0 0.375rem; color: var(--teal); font-size: 0.875rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.on-page__list { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 0; padding: 0; list-style: none; }
.on-page__list a { display: inline-block; padding: 0.25rem 0; font-weight: 700; }
.block__lead { max-width: 60ch; font-size: var(--step-1); font-weight: 300; line-height: 1.45; }
.plain-list--check li { padding-left: 2rem; }
.plain-list--check li::before { top: 0.3em; left: 0.375rem; width: 0.5rem; height: 0.95rem; background: none; border: solid var(--teal); border-width: 0 3px 3px 0; transform: rotate(45deg); }

/* Rules set out by what they are about. */
.rules { margin: 0; border-top: 3px solid var(--teal); }
.rules__row { display: grid; gap: 0.25rem 2rem; padding: 1rem 0; border-bottom: 2px solid var(--blue); }
.rules__label { color: var(--teal); font-size: 1.0625rem; font-weight: 900; line-height: 1.3; }
.rules__text { margin: 0; }
.rules__text p { margin: 0 0 0.5rem; }
.rules__text p:last-child { margin-bottom: 0; }
/* The short-term rental registry: one table, every rental by street. */
a.tel { white-space: nowrap; }
.registry { margin-top: 1.25rem; }
.registry__find { display: grid; gap: 0.375rem; max-width: 30rem; margin: 0 0 1rem; }
.registry__find[hidden] { display: none; }
.table-wrap--registry { margin-top: 1rem; }
.registry__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.registry__table th, .registry__table td { padding: 0.5rem 0.875rem; border-bottom: 1px solid var(--blue); text-align: left; vertical-align: top; }
.registry__table thead th { background: var(--teal); color: var(--white); font-size: 0.8125rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.registry__table tbody th { font-weight: 700; }
.registry__table tbody tr:last-child > * { border-bottom: 0; }
.registry__table tr[hidden] { display: none; }
.registry__table .registry__guests { text-align: right; font-weight: 800; }
.registry__tag { display: inline-block; margin-left: 0.25rem; padding: 0 0.375rem; background: var(--periwinkle); color: var(--navy); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.04em; vertical-align: 0.1em; }
.registry__note { display: block; font-size: 0.8125rem; font-weight: 800; }
/* A phone reads each rental as a card: the address, then labelled lines. */
@media (max-width: 39.99rem) {
  .registry__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .registry__table, .registry__table tbody, .registry__table tr, .registry__table th, .registry__table td { display: block; }
  .registry__table tr { padding: 0.75rem 1rem; border-bottom: 1px solid var(--blue); }
  .registry__table tr:last-child { border-bottom: 0; }
  .registry__table tr[hidden] { display: none; }
  .registry__table th, .registry__table td { padding: 0; border: 0; }
  .registry__table tbody th { margin-bottom: 0.25rem; }
  .registry__table td { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.5rem; }
  .registry__table td::before { content: attr(data-label); padding-top: 0.15em; color: var(--teal); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
  .registry__table .registry__guests { text-align: left; }
}
.rules__row-note { color: var(--navy); font-size: 0.9375rem; font-weight: 800; }
/* Rows that follow a timeline: how to take part, once the dates are read. */
.timeline + .rules { margin-top: 2rem; }
.timeline + .block__note { margin-top: 1.5rem; }

/* A dated sequence down one line, each step's time in a Lime tag. */
.timeline { margin: 0.5rem 0 0; padding: 0; list-style: none; }
.timeline__step { position: relative; padding: 0 0 1.75rem 2.5rem; }
.timeline__step::before { content: ""; position: absolute; left: 0.5rem; top: 0.75rem; bottom: -0.5rem; width: 3px; background: var(--blue); }
.timeline__step:last-child { padding-bottom: 0; }
.timeline__step:last-child::before { display: none; }
.timeline__step::after { content: ""; position: absolute; left: 0; top: 0.25rem; width: 1.1875rem; height: 1.1875rem; border-radius: 50%; background: var(--white); border: 4px solid var(--teal); }
.timeline__when { display: inline-block; margin: 0 0 0.5rem; padding: 0.125rem 0.625rem; background: var(--lime); color: var(--navy); font-size: 0.875rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; }
.timeline__title { margin-bottom: 0.375rem; font-size: var(--step-1); }
.timeline__text { margin: 0; }
.timeline__next { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.625rem; margin: 0.625rem 0 0; font-weight: 800; }

/* Where each tax dollar goes: one bar, a key in cents, the calculator. */
.millage__seg--city, .millage__key--city, .calc__part--city, .millage__swatch--city { --fill: var(--teal); }
.millage__seg--schools, .millage__key--schools, .calc__part--schools, .millage__swatch--schools { --fill: var(--royal); }
.millage__seg--county, .millage__key--county, .calc__part--county, .millage__swatch--county { --fill: var(--spruce); }
.millage__seg--fire, .millage__key--fire, .calc__part--fire, .millage__swatch--fire { --fill: var(--orange); }
.millage__seg--library, .millage__key--library, .calc__part--library, .millage__swatch--library { --fill: var(--periwinkle); }
.millage__seg--transit, .millage__key--transit, .calc__part--transit, .millage__swatch--transit { --fill: var(--lime); }
.millage { margin: 1.5rem 0 0; }
.millage__bar { display: flex; height: 3.5rem; background: var(--white); border: 2px solid var(--navy); box-shadow: var(--shadow-sm); }
.millage__seg { flex: 0 0 var(--w); min-width: 6px; background: var(--fill); }
.millage__seg + .millage__seg { border-left: 2px solid var(--white); }
.millage__legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); gap: 1rem 1.5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.millage__key { display: grid; grid-template-columns: 1rem minmax(0, 1fr) auto; column-gap: 0.625rem; align-items: baseline; padding-top: 0.625rem; border-top: 4px solid var(--fill); }
.millage__swatch { display: inline-block; width: 1rem; height: 1rem; align-self: center; background: var(--fill); border: 2px solid var(--navy); }
.millage__who { font-weight: 800; line-height: 1.3; }
.millage__cents { color: var(--teal); font-size: 1.625rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.millage__mills { grid-column: 2 / -1; font-size: 0.875rem; font-weight: 600; }
.millage__caption { margin-top: 0.875rem; color: var(--navy); font-size: 0.9375rem; font-weight: 600; }
.calc__example { margin: 1.5rem 0 0; font-weight: 700; }
.calc { margin: 1.75rem 0 0; padding: clamp(1.25rem, 3vw, 1.75rem); background: var(--white); border: 2px solid var(--teal); box-shadow: var(--shadow); }
.calc__title { margin-bottom: 1rem; font-size: var(--step-2); }
.calc__inputs { display: grid; gap: 1.25rem 2rem; }
.calc__label { display: block; padding: 0; font-weight: 800; }
.calc__hint { display: block; font-size: 0.875rem; font-weight: 600; }
.calc__money { display: flex; align-items: center; max-width: 17rem; margin-top: 0.375rem; background: var(--white); border: 2px solid var(--navy); }
.calc__money:focus-within { outline: 3px solid var(--ring); outline-offset: 3px; }
.calc__dollar { padding: 0 0.25rem 0 0.75rem; color: var(--teal); font-size: var(--step-2); font-weight: 900; }
.calc__input { width: 100%; min-width: 0; min-height: 3rem; padding: 0.25rem 0.75rem 0.25rem 0; border: 0; background: none; color: var(--navy); font: inherit; font-size: var(--step-2); font-weight: 900; font-variant-numeric: tabular-nums; }
.calc__input:focus-visible { outline: none; }
.calc__kind { margin: 0; padding: 0; border: 0; }
.calc__choice { display: flex; align-items: center; gap: 0.625rem; min-height: 2.25rem; font-weight: 700; cursor: pointer; }
.calc__choice input, .request__choice input, .request__check input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--teal); }
.calc__total { margin: 1.5rem 0 0; font-weight: 700; }
.calc__sum { display: block; color: var(--teal); font-size: var(--step-5); font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; }
.calc__split { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 0.5rem 1.75rem; margin: 1.25rem 0 0; padding: 1rem 0 0; list-style: none; border-top: 2px solid var(--blue); font-weight: 700; }
.calc__part { display: flex; align-items: center; gap: 0.5rem; }
.calc__amount { margin-left: auto; font-variant-numeric: tabular-nums; }
.levies { margin: 1.5rem 0 0; }
.levies__summary, .pickup-cal__toggle, .registry__toggle {
  display: inline-flex; align-items: center; gap: 0.625rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  background: var(--white);
  color: var(--teal);
  border: 2px solid var(--teal);
  box-shadow: var(--shadow-sm);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.levies__summary::-webkit-details-marker, .pickup-cal__toggle::-webkit-details-marker, .registry__toggle::-webkit-details-marker { display: none; }
.levies__summary::before, .pickup-cal__toggle::before, .registry__toggle::before { content: "+"; font-size: 1.25rem; font-weight: 900; line-height: 1; }
.levies[open] > .levies__summary::before, .pickup-cal__more[open] > .pickup-cal__toggle::before, .registry__all[open] > .registry__toggle::before { content: "\2212"; }
.levies[open] > .levies__summary, .pickup-cal__more[open] > .pickup-cal__toggle, .registry__all[open] > .registry__toggle { background: var(--lime); color: var(--navy); }
.table-wrap--levies { max-width: 40rem; }
.levies__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.levies__table th, .levies__table td { padding: 0.5rem 0.875rem; border-bottom: 1px solid var(--blue); text-align: left; vertical-align: top; }
.levies__table thead th { background: var(--teal); color: var(--white); font-size: 0.875rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.levies__table thead th + th, .levies__mills { text-align: right; }
.levies__table tbody th[scope="row"] { font-weight: 600; }
.levies__group th { padding-top: 0.875rem; background: var(--mist); color: var(--teal); font-weight: 900; }
.levies__group .millage__swatch { margin-right: 0.5rem; vertical-align: -0.125rem; }
.levies__note { display: block; font-size: 0.875rem; font-weight: 600; }
.levies__mills { font-weight: 800; white-space: nowrap; }
.levies__table tfoot th, .levies__table tfoot td { border-top: 3px solid var(--teal); border-bottom: 0; font-weight: 900; }

/* The fee finder: the box, the groups as chips, the schedule in its tables. */
.feefinder__find { display: grid; gap: 0.375rem; max-width: 30rem; margin: 0 0 1.25rem; }
.feefinder__find[hidden] { display: none; }
.feefinder__label { font-weight: 800; }
.feefinder__input { width: 100%; min-height: 2.875rem; padding: 0.5rem 0.875rem; background: var(--white); color: var(--navy); border: 2px solid var(--navy); border-radius: 0; box-shadow: var(--shadow-sm); font: inherit; font-weight: 600; }
.feefinder__count { margin: 0; font-size: 0.875rem; font-weight: 700; }
.feefinder__jump ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.5rem; padding: 0; list-style: none; }
.feefinder__jump a {
  display: inline-flex; align-items: center;
  min-height: 2rem;
  padding: 0.25rem 0.75rem;
  background: var(--white);
  color: var(--teal);
  border: 2px solid var(--teal);
  border-radius: 999px;
  font-size: 0.9375rem; font-weight: 800;
  text-decoration: none;
}
.feefinder__jump a:hover { background: var(--lime); color: var(--navy); }
.feefinder__group { margin-top: 2rem; }
.feefinder__title { margin-bottom: 0.5rem; font-size: var(--step-1); }
.feefinder__note { margin: 0 0 0.75rem; font-size: 0.9375rem; font-weight: 600; }
.feefinder__none { margin: 1.5rem 0 0; font-weight: 700; }

/* Bars: one row per district, the label over its bar. */
.hbars { max-width: 46rem; margin: 0 0 1.25rem; }
.hbars__rows { margin: 0; padding: 1rem 1.25rem; list-style: none; background: var(--white); border: 2px solid var(--teal); box-shadow: var(--shadow-sm); }
.hbars__row { display: grid; grid-template-columns: minmax(0, 1fr) 3.5rem; align-items: center; gap: 0.25rem 1rem; padding: 0.5rem 0; }
.hbars__row + .hbars__row { border-top: 1px solid var(--blue); }
.hbars__label { grid-column: 1 / -1; font-size: 0.9375rem; font-weight: 700; }
.hbars__track { display: block; height: 1.375rem; background: var(--mist); }
.hbars__bar { display: block; width: max(6px, var(--w)); height: 100%; background: var(--periwinkle); border: 2px solid var(--navy); }
.hbars__n { color: var(--teal); font-size: 1.25rem; font-weight: 900; text-align: right; font-variant-numeric: tabular-nums; }
.hbars__caption { margin-top: 0.625rem; color: var(--navy); font-size: 0.9375rem; font-weight: 600; }

/* Two offices side by side. */
/* Columns keep their own height: a short column does not stretch into an
   empty box beside a long one. */
.compare { display: grid; gap: 1.5rem; align-items: start; }
.compare__col { min-width: 0; padding: 1.25rem 1.5rem 1.5rem; background: var(--white); border: 2px solid var(--teal); box-shadow: var(--shadow-sm); }
.compare__col + .compare__col { background: var(--mist); }
.compare__title { margin-bottom: 0.75rem; font-size: var(--step-1); }
.compare__foot { margin: 1rem 0 0; padding-top: 0.75rem; border-top: 2px solid var(--blue); font-size: 0.9375rem; font-weight: 700; }
.compare .docs-list, .compare .outside { margin-top: 1rem; }

/* Who handles which problem. */
.routes { margin: 0; padding: 0; list-style: none; border-top: 3px solid var(--teal); }
.routes__row { display: grid; gap: 0.375rem 2rem; padding: 1rem 0; border-bottom: 2px solid var(--blue); }
.routes__row--911 { padding-left: 1rem; border-left: 8px solid var(--orange); }
.routes__problem { margin: 0; font-size: 1.0625rem; font-weight: 800; line-height: 1.35; }
.routes__name { margin: 0; color: var(--teal); font-weight: 900; }
.routes__reach { margin: 0.125rem 0 0.375rem; font-weight: 800; }
.routes__phone { font-size: 1.125rem; }
.routes__or { font-weight: 600; }
.routes__text { margin: 0; font-size: 0.9375rem; }

/* A request form: a white card, the real fields, and its notice when sent. */
.request { margin-top: 1.25rem; padding: clamp(1.25rem, 3vw, 2rem); background: var(--white); border: 2px solid var(--teal); box-shadow: var(--shadow); }
.request__required { margin: 0 0 1.25rem; font-size: 0.875rem; font-weight: 700; }
.request__group { margin: 0 0 1.75rem; padding: 0; border: 0; }
.request__legend { margin-bottom: 0.875rem; padding: 0; color: var(--teal); font-size: var(--step-1); font-weight: 900; }
.request__fields { display: grid; gap: 1.125rem 1.5rem; }
.request__field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; margin: 0; }
.request__label { padding: 0; font-weight: 800; line-height: 1.35; }
.request__req { color: var(--teal); }
.request__hint { font-size: 0.875rem; font-weight: 600; }
.request__input { width: 100%; min-height: 2.75rem; padding: 0.5rem 0.75rem; background: var(--white); color: var(--navy); border: 2px solid var(--navy); border-radius: 0; font: inherit; font-weight: 500; }
textarea.request__input { min-height: 0; resize: vertical; }
.request__input--file { padding: 0.375rem 0.5rem; }
.request__choices { padding: 0; border: 0; }
.request__choice { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.25rem; margin-right: 1.5rem; font-weight: 600; cursor: pointer; }
.request__check { flex-direction: row; align-items: flex-start; gap: 0.75rem; }
.request__check input { margin-top: 0.25rem; }
.request__check label { font-weight: 700; }
.request__actions { margin-top: 1.5rem; }
.button--send { min-height: 3rem; padding-inline: 1.5rem; background: var(--teal); color: var(--white); box-shadow: 4px 4px 0 var(--navy); font-family: inherit; font-size: 1.0625rem; }
.button--send:hover { background: var(--lime); color: var(--navy); }
.request__sent { display: none; margin-top: 1.5rem; padding: 1rem 1.25rem; background: var(--white); border: 2px solid var(--navy); border-left: 8px solid var(--orange); }
.request__sent:target, .request.is-sent .request__sent { display: block; }
.request__sent-title { margin: 0 0 0.25rem; color: var(--navy); font-size: 0.875rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.request__sent p:last-child { margin: 0; font-weight: 700; }

/* Trash and recycling: the next pickup, and the year as small calendars. */
.next-pickup__when { margin: 0; }
.next-pickup--trash .next-pickup__day { display: block; margin: 0; }
.next-pickup--trash .next-pickup__date { display: block; font-size: var(--step-5); }
.next-pickup__carts { display: flex; flex-wrap: wrap; gap: 0.5rem 0.625rem; margin: 1.125rem 0 0; padding: 0; list-style: none; }
.cart { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0.25rem 0.875rem; background: var(--white); color: var(--navy); border: 2px solid var(--navy); font-weight: 800; }
.cart--trash { background: var(--teal); color: var(--white); border-color: var(--teal); }
.cart--recycling { background: var(--blue); }
.cart--off { border-style: dashed; font-weight: 600; }
.pickup-cal { margin: 0.5rem 0 0; }
.pickup-cal__key { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0 0 1.25rem; padding: 0; list-style: none; font-size: 0.9375rem; font-weight: 700; }
.pickup-cal__key li { display: inline-flex; align-items: center; gap: 0.5rem; }
.pickup-cal__mark { display: inline-block; width: 1.25rem; height: 1.25rem; border-radius: 50%; }
.pickup-cal__mark--trash, .pickup-cal__month .is-trash .pickup-cal__day { background: var(--teal); color: var(--white); }
.pickup-cal__mark--recycling, .pickup-cal__month .is-recycling .pickup-cal__day { background: var(--lime); color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
.pickup-cal__mark--late, .pickup-cal__month .is-late .pickup-cal__day { background: var(--orange); color: var(--black); }
.pickup-cal__months { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr)); gap: 1.5rem 1.75rem; }
.pickup-cal__month { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.pickup-cal__name { padding-bottom: 0.5rem; color: var(--teal); font-weight: 900; text-align: left; }
.pickup-cal__month th { padding: 0.125rem 0 0.25rem; border-bottom: 2px solid var(--blue); color: var(--navy); font-size: 0.875rem; font-weight: 800; text-align: center; }
.pickup-cal__month td { padding: 0.1875rem 0; font-size: 0.875rem; font-weight: 600; text-align: center; }
.pickup-cal__day { display: inline-grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: 50%; }
.pickup-cal__month td[class] .pickup-cal__day { font-weight: 900; }
.pickup-cal__month [aria-current="date"] .pickup-cal__day { outline: 3px solid var(--royal); outline-offset: 1px; }
.pickup-cal__more { margin-top: 1.5rem; }
.pickup-cal__more .pickup-cal__months { margin-top: 1.5rem; }
.pickup-cal__caption { margin-top: 1rem; color: var(--navy); font-size: 0.9375rem; font-weight: 600; }

/* A map and its numbered key. */
.keyed-map { display: grid; gap: 1.5rem 2rem; }
.keyed-map__map { max-width: 20rem; margin: 0; }
.keyed-map__keys { margin: 0; padding: 0; list-style: none; }
.keyed-map__key { display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: 0.875rem; padding: 0.625rem 0; border-top: 2px solid var(--blue); }
.keyed-map__n { grid-row: 1 / span 3; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--navy); color: var(--white); font-size: 0.9375rem; font-weight: 900; }
.keyed-map__name { font-weight: 800; line-height: 1.3; }
.keyed-map__where { font-size: 0.9375rem; font-weight: 600; }
.keyed-map__who { font-size: 0.875rem; }

/* The side panel's other numbers and related pages. */
.side-phone { display: flex; flex-direction: column; padding: 0.75rem 0 0; border-top: 2px solid var(--blue); }
.side-phone__label { font-weight: 800; }
.related { margin: 0; padding: 0; list-style: none; }
.related li { padding: 0.5rem 0; border-top: 2px solid var(--blue); }
.related a { font-weight: 800; }

/* ---- Services: the lander, four verbs in four colors -------------------------------- */
.page-head--services { padding-bottom: clamp(2.75rem, 6vw, 4rem); background: var(--mist); }
.page-head--services::after { display: none; }
.verb-jump__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem 1rem; max-width: 48rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.verb-jump__link {
  --tile: var(--blue);
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 0.875rem 1rem 1rem;
  background: var(--tile);
  color: var(--navy);
  border: 2px solid var(--teal);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
.verb-jump__link--periwinkle { --tile: var(--periwinkle); }
.verb-jump__link--lime { --tile: var(--lime); }
.verb-jump__link--teal { --tile: var(--teal); --ring: var(--royal); color: var(--white); box-shadow: 4px 4px 0 var(--navy); }
.verb-jump__verb { font-size: var(--step-2); font-weight: 900; letter-spacing: 0.04em; line-height: 1; text-transform: uppercase; }
.verb-jump__n { font-size: 0.875rem; font-weight: 700; }
.verb-band { --band-ink: var(--navy); color: var(--band-ink); }
.verb-band--blue { background: var(--blue); }
.verb-band--periwinkle { background: var(--periwinkle); }
.verb-band--teal { --ring: var(--lime); --band-ink: var(--white); background: var(--teal); }
.verb-band--lime { background: var(--lime); }
.verb-band__grid { display: grid; grid-template-areas: "verb" "body" "photo"; gap: 1.25rem 3rem; }
.verb-band__verb { grid-area: verb; }
.verb-band__body { grid-area: body; }
.verb-band__photo { grid-area: photo; width: 100%; max-width: 26rem; margin-top: 1rem; }
.verb-band .photo__caption { color: var(--band-ink); }
.verb-band .photo__place { color: var(--band-ink); }
.verb-band--teal .photo__place { color: var(--lime); }
.verb-band--teal .photo__frame { box-shadow: 6px 6px 0 var(--lime); }
.verb-band__verb { color: var(--band-ink); font-size: clamp(2.75rem, 1.5rem + 4.5vw, 4.75rem); line-height: 0.92; letter-spacing: -0.015em; text-transform: uppercase; }
.verb-band__body { min-width: 0; }
.task-rows { display: grid; margin: 0; padding: 0; list-style: none; border-top: 3px solid var(--band-ink); }
.task-row { padding: 1rem 0 1.125rem; border-bottom: 1px solid var(--band-ink); }
.task-row__link { color: var(--band-ink); font-size: var(--step-2); font-weight: 900; line-height: 1.15; text-decoration: none; }
.task-row__link:hover { color: var(--band-ink); text-decoration: underline; text-decoration-thickness: 0.1em; }
.task-row__system { display: block; width: fit-content; margin: 0.5rem 0 0; padding: 0 0.5rem; border: 2px solid var(--band-ink); font-size: 0.875rem; font-weight: 800; }
.task-row__about { margin: 0.375rem 0 0; max-width: 40ch; }
.pay-where { margin-top: 2.5rem; padding: clamp(1.25rem, 3vw, 1.75rem); background: var(--white); color: var(--navy); border: 2px solid var(--navy); box-shadow: 6px 6px 0 var(--navy); }
.pay-where__title { margin-bottom: 0.75rem; font-size: var(--step-2); }
.pay-where__list { margin: 0; }
.pay-where__row { display: grid; gap: 0.125rem 1.5rem; padding: 0.75rem 0; border-top: 2px solid var(--blue); }
.pay-where__what a { font-weight: 900; }
.pay-where__how { margin: 0; }
.band--white { background: var(--white); }
.forms-shelf__office { display: grid; align-items: start; gap: 0.5rem 2.5rem; padding: 1.5rem 0 0; border-top: 3px solid var(--teal); }
.forms-shelf__office + .forms-shelf__office { margin-top: 2rem; }
.forms-shelf__title { font-size: var(--step-2); }
.forms-shelf__n { margin: 0.375rem 0 0; color: var(--navy); font-size: 0.875rem; font-weight: 700; letter-spacing: 0; }
.docs-list--compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); column-gap: 1.75rem; }
.docs-list--compact .doc { grid-template-columns: 3rem minmax(0, 1fr); gap: 0 0.875rem; padding: 0.75rem 0; }
.docs-list--compact .doc__leaf { width: 3rem; height: 3.875rem; box-shadow: 2px 2px 0 var(--teal); }
.docs-list--compact .doc__type { display: none; }
.docs-list--compact .doc__title { font-size: 1rem; }
.docs-list--compact .doc__meta { font-size: 0.875rem; }
/* Seven numbers: City Hall, the one most people want, spans two columns, so
   the cards fill two rows of four or four rows of two. */
/* Each card is a three-row subgrid, so a label that wraps to two lines keeps
   every phone number in its row on one line. Rows are spaced by margin: a
   subgrid inherits its parent's row gap between label, number, and note. */
.call__grid { display: grid; gap: 0 1.25rem; margin: 0; padding: 0; list-style: none; }
.call__card { display: grid; grid-row: span 3; grid-template-rows: subgrid; margin: 0 0 1.25rem; padding: 1rem 1.25rem 1.125rem; background: var(--white); border: 2px solid var(--teal); box-shadow: var(--shadow-sm); }
.call__who { margin: 0; color: var(--teal); font-size: 0.875rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.call__phone { margin: 0.25rem 0 0; font-size: var(--step-2); font-weight: 900; font-variant-numeric: tabular-nums; }
.call__phone a { color: var(--navy); text-decoration: none; }
.call__phone a:hover { color: var(--navy); text-decoration: underline; }
.call__for { margin: 0.25rem 0 0; font-size: 0.9375rem; }

@media (min-width: 40rem) {
  .rules__row { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); }
  .calc__inputs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .request__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .request__field--wide { grid-column: 1 / -1; }
  .verb-jump__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pay-where__row { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); }
  .call__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .call__card:first-child { grid-column: span 2; }
}
@media (min-width: 48rem) {
  .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .routes__row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .keyed-map { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: start; }
  .task-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
  .forms-shelf__office { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
}
@media (min-width: 64rem) {
  .service-head--media { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); align-items: center; }
  /* The title holds the same place on every page, however tall the photograph beside it. */
  .service-head__text { align-self: start; }
  .verb-band__grid { grid-template-areas: "verb body" "photo body"; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto 1fr; align-items: start; }
  .verb-band__photo { max-width: 24rem; margin-top: 0.5rem; }
  .call__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- Beach and Parks: the banner -------------------------------------------- */
/* The harbor from the air at its own 16:9, edge to edge, with the brand's
   Blue wave panel rising into its foot instead of cropping it. */
.banner { position: relative; background: var(--blue); }
.photo--banner .photo__frame { background: var(--navy); box-shadow: none; }
.photo--banner .photo__caption {
  position: absolute; right: var(--gutter); top: 1rem;
  max-width: calc(100% - 2 * var(--gutter));
  margin: 0;
  padding: 0.25rem 0.625rem;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.photo--banner .photo__credit { display: inline; margin: 0 0 0 0.375rem; }
.banner__panel {
  position: relative;
  margin-top: clamp(-9rem, -9vw, -2rem);
  padding: calc(clamp(1.5rem, 3vw, 2.5rem) + 18px) 0 calc(clamp(2.25rem, 4vw, 3.25rem) + 18px);
  background: var(--blue);
  clip-path: var(--wave-lg);
}
.banner__panel::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 19px;
  background: var(--white);
  clip-path: var(--wave-lg);
}
.banner__inner { display: grid; gap: 1.75rem 4rem; }
.banner__title { font-size: var(--step-6); }
.banner__lede { max-width: 36ch; margin: 1rem 0 0; font-size: var(--step-2); font-weight: 300; line-height: 1.3; }
.banner__facts { margin: 0; align-self: end; }
.banner__facts div { display: grid; gap: 0.125rem; padding: 0.625rem 0; border-top: 2px solid var(--teal); }
.banner__facts dt { color: var(--teal); font-size: 0.875rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.banner__facts dd { margin: 0; font-weight: 700; }

/* ---- Beach and Parks: the harbor map ------------------------------------------- */
/* The drawing is OpenStreetMap through a viewBox; numbers and names ride on
   top as HTML so they stay text at any size. The parking layer is a switch
   on the same drawing. */
.harbor { padding-block: clamp(2.5rem, 6vw, 4rem) var(--band-pad); }
.harbor__grid { display: grid; gap: 2.5rem clamp(2.5rem, 5vw, 4.5rem); }
.harbor__maps { display: grid; gap: 2.25rem; align-content: start; min-width: 0; }
.layers { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.layers__btn {
  display: inline-flex; align-items: center; gap: 0.375rem;
  min-height: 2.5rem;
  padding: 0.25rem 1rem;
  border: 2px solid var(--navy);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font: inherit; font-size: 0.9375rem; font-weight: 800; line-height: 1.2;
  cursor: pointer;
}
.layers__btn:hover { box-shadow: 3px 3px 0 var(--teal); }
.layers__btn[aria-pressed="true"] { background: var(--lime); }
.layers__btn[data-layer="parking"][aria-pressed="true"] { background: var(--periwinkle); }
.layers__btn[aria-pressed="true"]::before {
  content: "";
  width: 0.375rem; height: 0.75rem;
  margin: -0.125rem 0.125rem 0 0;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(45deg);
}

.map { margin: 0; min-width: 0; }
.map__canvas {
  position: relative;
  aspect-ratio: var(--ratio);
  overflow: hidden;
  background: var(--mist);
  border: 2px solid var(--teal);
  box-shadow: var(--shadow);
  container-type: inline-size;
}
.hm { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hm path, .hm rect { vector-effect: non-scaling-stroke; }
.hm__ground { fill: var(--mist); }
.hm__city { fill: var(--white); }
.hm__water { fill: var(--blue); }
.hm__park { fill: var(--lime); stroke: var(--teal); stroke-width: 1.5px; }
.hm__park.is-focus { fill: var(--teal); stroke: var(--navy); stroke-width: 2px; }
.hm__lot { fill: var(--periwinkle); stroke: var(--navy); stroke-width: 1.25px; }
.hm__road { fill: none; stroke: var(--navy); stroke-linecap: round; stroke-linejoin: round; }
.hm__road--major { stroke-width: 2.75px; }
.hm__road--minor { stroke-width: 1.1px; }
.hm__road--lit { stroke: var(--orange); stroke-width: 7px; }
.hm__trail { fill: none; stroke: var(--teal); stroke-width: 2px; stroke-dasharray: 5 4; stroke-linecap: round; }
.hm__trail--steps { stroke-width: 4px; stroke-dasharray: 1.5 2.5; stroke-linecap: butt; }
.hm__trail.is-focus { stroke: var(--royal); stroke-width: 4px; }
.hm__ferry { fill: none; stroke: var(--royal); stroke-width: 3.5px; stroke-dasharray: 3 3; }
.hm__ferry.is-focus { stroke-width: 6px; }
.hm__limits { fill: none; stroke: var(--navy); stroke-width: 1.5px; stroke-dasharray: 7 5; }
.hm__inset { fill: none; stroke: var(--royal); stroke-width: 2.5px; }
.hm__hall { fill: var(--navy); stroke: var(--white); stroke-width: 1.5px; }
.harbor__maps[data-parking="off"] .hm__lots { display: none; }
.harbor__maps[data-places="off"] .map__pins { display: none; }

.map__labels { margin: 0; }
.map__label {
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  color: var(--teal);
  font-size: max(0.875rem, 2.1cqi); font-style: italic; font-weight: 700; letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
}
.map__label--water-sm { font-size: max(0.8125rem, 1.6cqi); }
/* Street names ride the street, haloed in white over its line. They are set
   in rem, so the names placed only for a wide map step aside on a narrow one. */
.map__street {
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  color: var(--navy);
  font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 2px var(--white), 0 0 2px var(--white), 0 0 3px var(--white), 0 0 4px var(--white);
  pointer-events: none;
}
@container (max-width: 39.99rem) { .map__street--wide { display: none; } }
.map__label--town { color: var(--navy); font-style: normal; font-weight: 900; letter-spacing: 0.16em; }
.map__pins { margin: 0; padding: 0; list-style: none; }
.map__pin { position: absolute; left: var(--x); top: var(--y); z-index: 2; transform: translate(-50%, -50%); }
.map__pin a { position: relative; display: block; color: var(--navy); text-decoration: none; }
.map__n {
  display: grid; place-items: center;
  width: 1.875rem; height: 1.875rem;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  box-shadow: 2px 2px 0 var(--navy);
  font-size: 0.9375rem; font-weight: 900; line-height: 1;
}
.map__name {
  position: absolute; left: calc(100% + 0.25rem); top: 50%;
  transform: translateY(-50%);
  padding: 0.0625rem 0.4375rem;
  background: var(--white);
  box-shadow: 2px 2px 0 var(--teal);
  font-size: 0.875rem; font-weight: 800; line-height: 1.35;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.map__pin a:hover .map__name, .map__pin.is-hot .map__name, .map__pin.is-focus .map__name { opacity: 1; }
.map__pin a:hover .map__n, .map__pin.is-hot .map__n { background: var(--lime); color: var(--navy); }
.map__pin.is-hot, .map__pin:hover { z-index: 3; }
.map__pin.is-focus .map__n { width: 2.25rem; height: 2.25rem; background: var(--navy); }
.map__pin--edge { transform: translate(-100%, -50%); }
.map__pin--edge a { display: flex; align-items: center; gap: 0.25rem; padding-right: 0.375rem; }
.map__pin--edge .map__name { position: static; transform: none; opacity: 1; }
.map__pin--edge .map__name::after { content: " \2192"; }
.map__hall, .map__inset-label { position: absolute; left: var(--x); top: var(--y); z-index: 1; margin: 0; pointer-events: none; }
.map__hall { transform: translate(0.75rem, -50%); }
/* Under the inset box, on the lake, where no pin sits. */
.map__inset-label { transform: translate(-100%, 3px); }
.map__hall span, .map__inset-label span {
  display: block;
  padding: 0.0625rem 0.4375rem;
  background: var(--navy);
  color: var(--white);
  font-size: 0.875rem; font-weight: 800; line-height: 1.35;
  white-space: nowrap;
}
.map__inset-label span { background: var(--royal); }
/* A phone-width map keeps its pins and tags small enough to sit apart. */
@container (max-width: 34rem) {
  .map__n { width: 1.5rem; height: 1.5rem; border-width: 1.5px; font-size: 0.75rem; }
  .map__pin.is-focus .map__n { width: 1.875rem; height: 1.875rem; }
  .map__hall { transform: translate(0.5rem, -50%); }
  .map__hall span, .map__inset-label span, .map__pin--edge .map__name { font-size: 0.75rem; }
  /* The off-map preserve keeps its number and arrow; its name is in the list. */
  .map__edge-name { display: none; }
}
.map__caption { margin-top: 0.875rem; color: var(--navy); font-size: 0.9375rem; font-weight: 600; line-height: 1.45; }
/* OpenStreetMap's credit, in the drawing's corner. */
.map__credit {
  position: absolute; right: 0; bottom: 0; z-index: 3;
  margin: 0;
  padding: 0.125rem 0.4375rem;
  background: var(--white);
  color: var(--navy);
  font-size: 0.75rem; font-weight: 600; line-height: 1.4;
}
.map__credit a { color: inherit; }

/* The list twin: the same numbers, the links, and the facts that decide a visit. */
.place-list { margin: 0; padding: 0; list-style: none; }
.place-list__item { position: relative; padding: 0.875rem 0.5rem 0.875rem 3rem; border-top: 2px solid var(--blue); }
.place-list__item:first-child { border-top: 0; }
.place-list__item.is-hot { background: var(--mist); }
.place-list__link { text-decoration: none; }
.place-list__link::after { content: ""; position: absolute; inset: 0; }
.place-list__n {
  position: absolute; left: 0.25rem; top: 0.875rem;
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  font-size: 0.9375rem; font-weight: 900; line-height: 1;
}
.place-list__n--p { background: var(--periwinkle); color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
.place-list__name { display: block; margin: 0; color: var(--teal); font-size: 1.125rem; font-weight: 800; line-height: 1.3; }
.place-list__item:hover .place-list__name { text-decoration: underline; text-decoration-thickness: 0.1em; }
.place-list__item--minor .place-list__name { color: var(--navy); }
.place-list__where { margin: 0.125rem 0 0; color: var(--navy); font-size: 0.875rem; font-weight: 700; }
.place-list__card { margin: 0.25rem 0 0; font-size: 0.9375rem; line-height: 1.45; }
.place-list__rules { display: flex; flex-wrap: wrap; gap: 0.375rem 0.75rem; margin: 0.5rem 0 0; font-size: 0.875rem; font-weight: 700; }
/* A dog rule reads as a marked phrase: when it wraps (a narrow table cell),
   each line keeps its own rounded mark. */
.dog {
  padding: 0.0625rem 0.5rem;
  border-radius: 0.5rem;
  background: var(--white);
  color: var(--navy);
  box-shadow: inset 0 0 0 2px var(--navy);
  font-weight: 800;
  line-height: 1.75;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.dog--seasonal { background: var(--lime); box-shadow: none; }
.dog--leashed, .dog--free { background: var(--blue); box-shadow: none; }

/* ---- Beach and Parks: the route, the cards, the rules, the plan ------------------ */
.route { display: grid; gap: 2.75rem; margin: 0; padding: 0; list-style: none; }
.route__step { position: relative; }
.route__photo { margin-bottom: 1.25rem; }
.route__n {
  position: absolute; left: -0.625rem; top: -0.75rem; z-index: 2;
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  margin: 0;
  border-radius: 50%;
  background: var(--lime);
  color: var(--navy);
  box-shadow: 3px 3px 0 var(--navy);
  font-size: 1.25rem; font-weight: 900; line-height: 1;
}
.route__name { font-size: var(--step-2); }
.route__name a { color: var(--white); text-decoration: none; }
.route__name a:hover { text-decoration: underline; }
.route__text { max-width: 40ch; margin: 0.625rem 0 0; color: var(--white); font-weight: 400; }
.route__alt { max-width: 62ch; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 2px solid var(--blue); }
.route__alt p { margin: 0 0 0.5rem; }
.route__alt a { font-weight: 800; }

.parks-band { padding-block: var(--band-pad); }
.park-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: 2.5rem 1.75rem; margin: 0; padding: 0; list-style: none; }
.park-card { position: relative; }
.park-card__photo, .park-card .map--thumb { margin-bottom: 1rem; }
.park-card__photo .photo__frame, .map--thumb .map__canvas { box-shadow: var(--shadow-sm); }
.map--thumb .map__canvas { aspect-ratio: 4 / 3; }
.park-card:hover .map--thumb .map__canvas { box-shadow: var(--shadow); }
.park-card__rules { margin-top: 0.75rem; }
.park-card__kind { margin: 0; color: var(--teal); font-size: 0.875rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.park-card__name { margin-top: 0.25rem; font-size: 1.25rem; line-height: 1.2; letter-spacing: 0; }
.park-card__name a { text-decoration: none; }
.park-card__name a::after { content: ""; position: absolute; inset: 0; }
.park-card:hover .park-card__name a { text-decoration: underline; text-decoration-thickness: 0.1em; }
.park-card:hover .photo__frame { box-shadow: var(--shadow); }
.park-card__where { margin: 0.25rem 0 0; font-size: 0.875rem; font-weight: 700; }
.park-card__text { margin: 0.375rem 0 0; font-size: 0.9375rem; line-height: 1.45; }
.park-card--feature .park-card__name { font-size: var(--step-3); }
.park-card--feature .park-card__where { font-size: 0.9375rem; }
.park-card--feature .park-card__text { font-size: 1.0625rem; }
/* Two and three columns: the beach runs the full row, photo beside its words.
   Four: it takes two by two, its words on a panel over the foot of the photo. */
@media (min-width: 40rem) {
  .park-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .park-card--feature { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.75rem; align-items: center; }
  .park-card--feature .park-card__photo { margin-bottom: 0; }
}
@media (min-width: 56rem) {
  .park-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 70rem) {
  .park-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* A grid item takes z-index unpositioned, so the panel rides over the photo
     while the card's stretched link still covers the whole card. */
  .park-card--feature { grid-column: span 2; grid-row: span 2; grid-template-columns: minmax(0, 1fr); gap: 0; align-self: start; }
  .park-card--feature .park-card__body {
    z-index: 1;
    margin: -4.5rem 0 0 1.5rem;
    padding: 1.125rem 1.375rem 1.25rem;
    background: var(--white);
    box-shadow: var(--shadow);
  }
}

.rules__grid { display: grid; gap: 2.5rem clamp(2.5rem, 5vw, 4.5rem); }
.rules-table th a { font-weight: 800; }
.rules-table td { font-weight: 600; }
/* A phone stacks each place: its name, then Open and Dogs as labelled lines. */
@media (max-width: 39.99rem) {
  .rules-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .rules-table, .rules-table tbody, .rules-table tr, .rules-table th, .rules-table td { display: block; }
  .rules-table tr { padding: 0.875rem 1rem 1rem; border-bottom: 1px solid var(--blue); }
  .rules-table tr:last-child { border-bottom: 0; }
  .schedule.rules-table th, .schedule.rules-table td { padding: 0; border: 0; }
  .rules-table th { margin-bottom: 0.375rem; font-size: 1.0625rem; }
  .rules-table td { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 0.75rem; margin-top: 0.25rem; }
  .rules-table td::before { content: attr(data-label); padding-top: 0.2em; color: var(--teal); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
  .rules-table td .dog { justify-self: start; }
}
.sub-title--first { margin-top: 0; }
.rules__note { max-width: 60ch; margin: 1.25rem 0 0; font-size: 0.9375rem; }
.plain-list--rules li::before { background: var(--navy); }

.plan { padding-block: var(--band-pad); }
.plan__grid { display: grid; gap: 2rem clamp(2.5rem, 5vw, 4.5rem); }
.plan .docs-list { grid-template-columns: minmax(0, 1fr); margin-bottom: 2rem; }
.plan__dpw { margin: 0 0 0.5rem; font-weight: 600; }

/* ---- A place: head, facts, body ------------------------------------------------ */
.page-head--place { padding-bottom: calc(clamp(2rem, 4vw, 3rem) + 18px); }
.place-head { display: grid; gap: 2rem clamp(2.5rem, 5vw, 4rem); }
.place-head__media { width: 100%; max-width: 30rem; min-width: 0; }
.place-num {
  display: inline-grid; place-items: center;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  font-size: 0.9375rem; font-weight: 900; line-height: 1;
}
.page-head__where { font-size: 0.9375rem; font-weight: 700; }
.photo--place .photo__caption { color: var(--navy); }
.glance-band .wave-rule { margin: 0 0 1.75rem; }
/* The facts row sits under a page head's wave: its rules start well clear of the wave's lowest point. */
.glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); gap: 0.25rem 2rem; margin-block: 0; padding-block: clamp(1.75rem, 3.5vw, 2.5rem) 1.5rem; }
.glance__row { padding: 0.75rem 0 0; border-top: 3px solid var(--teal); }
.glance dt { color: var(--teal); font-size: 0.875rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.glance dd { margin: 0.125rem 0 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.35; }
.place__body { display: grid; gap: 3rem clamp(2.5rem, 5vw, 4rem); padding-block: clamp(2rem, 5vw, 3rem) var(--band-pad); }
.place__main { min-width: 0; }
.place__side { align-self: start; min-width: 0; }
.place__side .map { margin-bottom: 2.25rem; }
.place__side p { margin: 0 0 0.75rem; }
.place-nav { display: grid; gap: 1rem; padding-bottom: var(--band-pad); }
.place-nav a {
  display: block;
  padding: 1rem 1.25rem;
  background: var(--white);
  border: 2px solid var(--teal);
  box-shadow: var(--shadow-sm);
  color: var(--navy);
  font-weight: 700; line-height: 1.35;
  text-decoration: none;
}
.place-nav a:hover { background: var(--lime); }
.place-nav span { display: block; margin-bottom: 0.25rem; color: var(--teal); font-size: 0.875rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.place-nav__up { align-self: center; text-align: center; }

/* ---- Blocks: the sections interior pages are built from ------------------------- */
.block { display: flow-root; }
.block + .block, .block + .photo-strip { margin-top: 2.75rem; }
.block__title { margin-bottom: 0.875rem; font-size: var(--step-3); }
.block p { max-width: 68ch; }
.block__note { font-size: 0.9375rem; }
.block__source { margin: 0.75rem 0 0; font-size: 0.875rem; font-weight: 600; }
.block__photo { max-width: 22rem; margin: 0 0 1.5rem; }
.table-wrap--fees { margin: 0 0 1.25rem; }
/* A fixed layout gives every fee table the same price column, so prices line
   up group after group down the Schedule of Fees. */
.fees { width: 100%; border-collapse: collapse; table-layout: fixed; }
.fees th, .fees td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--blue); text-align: left; vertical-align: top; }
.fees tr:last-child th, .fees tr:last-child td { border-bottom: 0; }
.fees th { font-weight: 700; }
.fees__note { display: block; margin-top: 0.125rem; font-size: 0.875rem; font-weight: 600; }
.fees .fees__price { width: 8.5rem; color: var(--teal); font-size: 1.25rem; font-weight: 900; line-height: 1.2; text-align: right; font-variant-numeric: tabular-nums; }
.fees__amount { white-space: nowrap; }
.fees__per { display: block; margin-top: 0.125rem; color: var(--navy); font-size: 0.875rem; font-weight: 800; }
.fees .fees__price--words { font-size: 1rem; line-height: 1.3; }
@media (min-width: 40rem) {
  .fees .fees__price { width: 11rem; font-size: 1.375rem; }
  .fees .fees__price--words { font-size: 1.0625rem; }
}
.faq { margin: 0; }
.faq__row { padding: 1rem 0; border-top: 2px solid var(--blue); }
.faq__q { color: var(--teal); font-size: 1.0625rem; font-weight: 800; }
.faq__a { margin: 0.375rem 0 0; }
.faq__a p { margin: 0; }
.facts--block { margin-top: 0; }
.outside { margin: 0; padding: 0; list-style: none; }
.outside__item { padding: 0.625rem 0; border-top: 2px solid var(--blue); }
.outside__item a { font-weight: 800; overflow-wrap: anywhere; }
.outside__for { display: block; font-size: 0.875rem; font-weight: 600; }
.docs-list--page { grid-template-columns: minmax(0, 1fr); }
/* A place's other photographs on one row, each as wide as its shape asks,
   so every picture stands the same height; a phone stacks them. */
.photo-strip { display: grid; gap: 2rem; }
.photo-strip__item { max-width: 30rem; }
@media (min-width: 48rem) {
  .photo-strip { display: flex; align-items: flex-start; gap: 1.5rem; }
  .photo-strip__item { flex: 4 1 0; min-width: 0; }
  .photo-strip__item--square { flex-grow: 3; }
  .photo-strip__item--tall { flex-grow: 2.25; }
  .photo-strip__item--hero { flex-grow: 2.4; }
  .photo-strip__item--wide { flex-grow: 5.333; }
}

/* Downtown's spaces as nested bars, each a share of the one above. */
.supply { max-width: 46rem; margin: 0 0 1.5rem; }
.supply__bars { margin: 0; padding: 1rem 1.25rem; list-style: none; background: var(--white); border: 2px solid var(--teal); box-shadow: var(--shadow-sm); }
.supply__row { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem; align-items: center; gap: 0.25rem 1rem; padding: 0.5rem 0; }
.supply__row + .supply__row { border-top: 1px solid var(--blue); }
.supply__label { grid-column: 1 / -1; font-size: 0.9375rem; font-weight: 700; }
.supply__track { display: block; height: 1.25rem; background: var(--mist); }
.supply__bar { display: block; width: max(4px, var(--w)); height: 100%; background: var(--teal); }
.supply__row:last-child .supply__bar { background: var(--orange); }
.supply__n { color: var(--teal); font-size: 1.25rem; font-weight: 900; text-align: right; font-variant-numeric: tabular-nums; }
.supply__caption { margin-top: 0.625rem; color: var(--navy); font-size: 0.9375rem; font-weight: 600; }
.place-num--p { background: var(--periwinkle); color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }

/* Dates already taken on one bar, January to December. */
.dates__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 0.25rem 1.5rem; max-width: 46rem; margin: 0.5rem 0 0; padding: 0; list-style: none; font-size: 0.9375rem; }
.dates__when { font-weight: 800; }

@media (min-width: 48rem) {
  .block--text .block__photo { float: right; width: 44%; margin: 0.25rem 0 1rem 2rem; }
  .place-nav { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; }
  .place-nav__prev { grid-column: 1; }
  .place-nav__up { grid-column: 2; }
  .place-nav__next { grid-column: 3; text-align: right; }
}
@media (min-width: 64rem) {
  .banner__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); align-items: end; }
  .harbor__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .route { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
  .rules__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .plan__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  /* The media column gives the title its measure first: a long place name
     ("Mildred A. Peterson Nature Preserve") kept one word to a line beside a
     30rem map at 1024px, so the map takes 22rem until the page is wide
     enough for both. */
  .place-head { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); align-items: center; }
  .place-head__text { align-self: start; }
  .place__body { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
}
@media (min-width: 76rem) {
  .place-head { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); }
}
@media (max-width: 47.99rem) {
  .banner__panel { margin-top: 0; clip-path: var(--wave-sm); }
  .banner__panel::after { height: 13px; clip-path: var(--wave-sm); }
  .photo--banner .photo__caption { position: static; margin: 0.5rem var(--gutter) 0; box-shadow: none; padding: 0; background: none; }
  .dates__months li:nth-child(even) { color: transparent; }
}

/* ---- City Hall: Navy heads, the offices, Council, the goals, the building --------- */
/* City Hall is Navy, the footer's color and the building's own panel; Teal
   stays Council's voted color and the Request verb's. On Navy the small
   capitals go Lime and the type White, as they do on Teal. */
.page-head--navy { --ring: var(--lime); background: var(--navy); color: var(--white); }
.page-head--navy .page-head__title, .page-head--navy a { color: var(--white); }
.page-head--navy .eyebrow, .page-head--navy .photo__place { color: var(--lime); }
.page-head--navy .photo__caption { color: var(--white); }
.page-head--navy .photo__frame { box-shadow: 6px 6px 0 var(--lime); }
.page-head--navy .verb { border-color: var(--white); box-shadow: 3px 3px 0 var(--lime); }
.glance__note { margin: -0.75rem 0 0; padding-bottom: 1.125rem; font-size: 0.9375rem; font-weight: 600; }
.hall__jump { margin-top: 2.25rem; }
.hall__jump .on-page { margin: 0; border-left-color: var(--navy); }
.hall__jump .on-page__title { color: var(--navy); }

/* The offices: a card each, who answers, and what residents come for. */
.hall-offices { padding-block: clamp(2.75rem, 6vw, 4.5rem) var(--band-pad); }
.office-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 1.75rem; margin: 0; padding: 0; list-style: none; }
.office-card { display: flex; flex-direction: column; padding: 1.25rem 1.375rem 1.375rem; background: var(--white); border: 2px solid var(--navy); box-shadow: 6px 6px 0 var(--blue); }
.office-card__name { font-size: var(--step-2); line-height: 1.15; }
.office-card__name a { color: var(--navy); text-decoration: none; }
.office-card__name a:hover { text-decoration: underline; }
.office-card__where { margin: 0.375rem 0 0; color: var(--teal); font-size: 0.875rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.office-card__people { margin: 0.875rem 0 0; padding: 0; list-style: none; }
.office-card__person { padding: 0.625rem 0; border-top: 2px solid var(--blue); }
.office-card__person p { margin: 0; }
.office-card__who { font-weight: 800; }
.office-card__role { font-size: 0.9375rem; line-height: 1.4; }
.office-card__reach { display: flex; flex-wrap: wrap; gap: 0 1rem; font-size: 0.9375rem; }
.office-card__reach a { overflow-wrap: anywhere; }
.office-card__for { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: auto 0 0; padding: 1rem 0 0; list-style: none; }
.office-card__for a { display: inline-flex; align-items: center; min-height: 2rem; padding: 0.125rem 0.75rem; background: var(--white); color: var(--navy); border: 2px solid var(--navy); font-size: 0.875rem; font-weight: 800; line-height: 1.25; text-decoration: none; }
.office-card__for a:hover { background: var(--lime); }
.hall-offices__also { margin: 3.25rem 0 0.5rem; font-size: var(--step-2); }
.topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 0 2rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }
.topic { padding: 0.875rem 0; border-top: 3px solid var(--navy); }
.topic__name { margin: 0; font-size: 1.125rem; font-weight: 900; line-height: 1.3; }
.topic__about { margin: 0.25rem 0 0; font-size: 0.9375rem; }

/* Council, on its own Teal: what it does, its next meetings, who serves. */
.hall-council__grid { display: grid; gap: 2.75rem clamp(2.5rem, 5vw, 4.5rem); }
.hall-council__about p { max-width: 60ch; }
.hall-council__lede { font-size: var(--step-1); font-weight: 300; line-height: 1.5; }
.hall-council__subtitle { margin: 2.25rem 0 0.875rem; font-size: var(--step-2); }
.hall-council__members .hall-council__subtitle { margin-top: 0; }
.hall-council .meeting-list__title { margin: 0; }
.hall-council__zoom { margin: 1.5rem 0 0; font-size: 1rem; }
.hall-council__links { margin: 0.5rem 0 0; padding: 0; list-style: none; }
.hall-council__links li { padding: 0.3125rem 0; }
.hall-council__links a { font-weight: 800; }
.council-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 0 1.75rem; margin: 0; padding: 0; list-style: none; }
.council-member { padding: 0.75rem 0 0.875rem; border-top: 2px solid var(--spruce); }
.council-member p { margin: 0; }
.council-member__name { font-size: 1.125rem; font-weight: 900; line-height: 1.25; }
.council-member--officer .council-member__name { font-size: var(--step-1); }
.council-member__role { color: var(--lime); font-size: 0.875rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.council-member__term { display: block; color: var(--white); font-weight: 600; letter-spacing: 0; text-transform: none; }
.council-member__reach { font-size: 0.9375rem; }
.council-member__reach a { overflow-wrap: anywhere; }
.charter { margin: 2.25rem 0 0; padding: 0.25rem 0 0.25rem 1.25rem; border-left: 6px solid var(--lime); }
.charter__quote { margin: 0; }
.charter__quote p { margin: 0; font-size: 1.0625rem; font-style: italic; line-height: 1.5; }
.charter__cite { margin-top: 0.625rem; font-size: 0.875rem; font-weight: 700; }
.hall-write { padding-block: var(--band-pad) clamp(3rem, 6vw, 4.5rem); }
.hall-write .block__title { font-size: var(--step-4); }
.hall-write .request { max-width: 54rem; }

/* Council's goals for the year: its vision, then three areas in three colors,
   each priority with Council's own marks and what the budget gives it. */
.vision { max-width: 56rem; margin: 0 0 clamp(2.25rem, 5vw, 3.25rem); padding: 0 0 0 1.25rem; border-left: 6px solid var(--teal); }
.vision__line { margin: 0 0 0.625rem; color: var(--navy); font-size: var(--step-2); font-weight: 300; line-height: 1.35; }
.vision__line:last-child { margin-bottom: 0; }
.priorities { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1.75rem; align-items: start; }
.priorities__area { --tone: var(--navy); --tone-ink: var(--white); background: var(--white); border: 2px solid var(--navy); box-shadow: 6px 6px 0 var(--tone); }
.priorities__area--royal { --tone: var(--royal); }
.priorities__area--spruce { --tone: var(--spruce); --tone-ink: var(--black); }
.priorities__title { margin: 0; padding: 0.875rem 1.25rem; background: var(--tone); color: var(--tone-ink); font-size: var(--step-1); line-height: 1.2; }
.priorities__goal { margin: 0; padding: 1rem 1.25rem; border-bottom: 2px solid var(--navy); font-size: 0.9375rem; font-weight: 600; line-height: 1.5; }
.priorities__list { margin: 0; padding: 0 1.25rem 0.375rem; list-style: none; }
.priority { padding: 0.75rem 0; border-top: 2px solid var(--blue); }
.priority:first-child { border-top: 0; }
.priority__text { margin: 0; font-weight: 700; line-height: 1.4; }
.priority__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; margin: 0.4375rem 0 0; }
.tag { display: inline-flex; align-items: center; min-height: 1.5rem; padding: 0 0.5rem; color: var(--navy); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.tag--essential { background: var(--lime); }
.tag--regulatory { background: var(--periwinkle); }
.priority__budget { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.priority__amount { display: inline-flex; align-items: center; min-height: 1.5rem; padding: 0 0.5rem; background: var(--navy); color: var(--white); font-size: 0.875rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.priority__note { font-size: 0.875rem; font-weight: 600; line-height: 1.35; }
.hall-goals .block__source { margin-top: 1.75rem; }
.hall-goals .docs-list { margin-top: 1rem; }

/* The partners, and jobs with the City. */
.hall-partners { padding-block: var(--band-pad) 0; }
.partners { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1.75rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.partner { padding: 1rem 0 0; border-top: 6px solid var(--navy); }
.partner--police { border-top-color: var(--royal); }
.partner--fire { border-top-color: var(--orange); }
.partner--water { border-top-color: var(--blue); }
.partner--building { border-top-color: var(--periwinkle); }
.partner__title { font-size: var(--step-2); }
.partner__who { margin: 0.25rem 0 0; font-weight: 800; line-height: 1.35; }
.partner__text { margin: 0.625rem 0 0; font-size: 0.9375rem; line-height: 1.5; }
.partner__phone { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; margin: 0.5rem 0 0; }
.partner__phone-label { color: var(--teal); font-size: 0.8125rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.partner__phone a { font-size: 1.25rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.hall-jobs { padding-block: var(--band-pad); }
.hall-jobs__grid { display: grid; gap: 2rem clamp(2.5rem, 5vw, 4.5rem); }
.hall-jobs__text p { max-width: 62ch; }
.hall-jobs__eeo { font-size: 0.9375rem; }
.hall-jobs__post { margin: 0 0 0.25rem; font-size: var(--step-1); font-weight: 800; line-height: 1.3; }

/* The building, on Blue: its history step by step, and every village
   president and mayor, closed until asked for. */
.hall-history__grid { display: grid; gap: 2.75rem clamp(2.5rem, 5vw, 4.5rem); }
.band--blue .timeline__step::before { background: var(--navy); }
.band--blue .timeline__step::after { border-color: var(--navy); }
.timeline__photo { width: 9.25rem; margin: 0.875rem 0 0.25rem; }
.timeline__photo .photo__frame { box-shadow: 4px 4px 0 var(--navy); }
.timeline__photo .photo__caption { margin-top: 0.625rem; font-size: 0.8125rem; }
.band--blue .photo__place { color: var(--navy); }
.hall-history__subtitle { margin: 0 0 0.875rem; font-size: var(--step-2); }
.hall-history__leaders { align-self: start; }
.leaders { margin: 0 0 0.75rem; background: var(--white); border: 2px solid var(--navy); box-shadow: 4px 4px 0 var(--navy); }
.leaders__summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; min-height: 2.75rem; padding: 0.625rem 1rem; color: var(--navy); font-weight: 900; list-style: none; cursor: pointer; }
.leaders__summary::-webkit-details-marker { display: none; }
.leaders__summary::after { content: "+"; margin-left: 0.25rem; font-size: 1.25rem; line-height: 1; }
.leaders[open] > .leaders__summary::after { content: "–"; }
.leaders__count { margin-left: auto; font-size: 0.875rem; font-weight: 700; }
.leaders__list { columns: 2 12rem; column-gap: 1.75rem; margin: 0; padding: 0.625rem 1rem 1rem; border-top: 2px solid var(--blue); list-style: none; }
.leaders__list li { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.25rem 0; break-inside: avoid; font-size: 0.9375rem; }
.leaders__years { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* An office page's own parts: the Clerk's shelves, the Assessor's hours, the
   polling place on the map, the boards and their open seats, the open
   house's votes, and the next date a rule row names. */
.records-shelves { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1.25rem 1.75rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.shelf { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); grid-auto-rows: min-content; gap: 0 0.875rem; padding: 0.875rem 0 0; border-top: 3px solid var(--navy); }
.shelf__leaf { grid-row: span 3; display: grid; place-items: center; width: 3.25rem; height: 4.25rem; background: var(--white); border: 2px solid var(--navy); box-shadow: 3px 3px 0 var(--teal); }
.shelf__leaf img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
.shelf__name, .shelf__count, .shelf__newest { margin: 0; }
.shelf__name { font-size: 1.125rem; font-weight: 900; line-height: 1.2; }
.shelf__count { color: var(--teal); font-size: 0.875rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.shelf__newest { margin-top: 0.375rem; font-size: 0.875rem; line-height: 1.4; }
.shelf__newest-label { display: block; font-size: 0.75rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.hours { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr)); gap: 0.875rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.hours__day { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 0.875rem 0.875rem; background: var(--white); border: 2px solid var(--navy); border-top: 8px solid var(--teal); }
.hours__day.is-holiday { border-top-color: var(--orange); }
.hours__date { font-weight: 900; line-height: 1.2; }
.hours__dow { display: block; color: var(--teal); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; }
.hours__md { font-size: var(--step-1); }
.hours__time { font-size: 0.9375rem; font-weight: 600; }
.map__vote { position: absolute; left: var(--x); top: var(--y); z-index: 2; margin: 0; pointer-events: none; transform: translate(0.75rem, -50%); }
.map__vote::before { content: ""; position: absolute; left: -0.75rem; top: 50%; width: 0.875rem; height: 0.875rem; border: 2px solid var(--navy); border-radius: 50%; background: var(--orange); transform: translate(-50%, -50%); }
.map__vote span { display: block; padding: 0.0625rem 0.4375rem; background: var(--orange); color: var(--black); font-size: 0.875rem; font-weight: 800; line-height: 1.35; white-space: nowrap; }
.board-groups { display: grid; gap: 2rem; margin-top: 1.25rem; }
.board-group__title { margin: 0 0 0.5rem; font-size: var(--step-1); }
.board-lines { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 0 1.75rem; margin: 0; padding: 0; list-style: none; }
.board-line { position: relative; padding: 0.625rem 0 0.75rem 1.75rem; border-top: 2px solid var(--blue); }
.board-line::before { content: ""; position: absolute; left: 0; top: 0.9375rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--board); box-shadow: inset 0 0 0 2px var(--navy); }
.board-line__name, .board-line__when, .board-line__next { margin: 0; }
.board-line__name { font-weight: 900; line-height: 1.3; }
.board-line__when { font-size: 0.9375rem; }
.board-line__next { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin-top: 0.25rem; font-size: 0.9375rem; font-weight: 700; }
.board-ended { margin: 1.75rem 0 0; font-size: 0.9375rem; }
.board-ended__label { display: block; color: var(--teal); font-size: 0.8125rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.open-seats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1.25rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.open-seat { padding: 1rem 1.125rem 1.125rem; background: var(--board); color: var(--board-ink); border: 2px solid var(--navy); box-shadow: 6px 6px 0 var(--navy); }
.open-seat__n, .open-seat__board, .open-seat__role { margin: 0; }
.open-seat__n { display: flex; align-items: baseline; gap: 0.5rem; }
.open-seat__count { font-size: var(--step-5); font-weight: 900; line-height: 1; }
.open-seat__unit { font-size: 0.875rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.open-seat__board { margin-top: 0.5rem; font-size: var(--step-1); font-weight: 900; line-height: 1.2; }
.open-seat__board a { color: inherit; }
.open-seat__role { margin-top: 0.25rem; font-size: 0.9375rem; font-weight: 600; }
.bucks { margin: 1.25rem 0 0; }
.bucks__rows { margin: 0; padding: 0; list-style: none; }
.bucks__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.3125rem 0.75rem; padding: 0.5rem 0 0.625rem; border-top: 2px solid var(--blue); }
.bucks__label { font-weight: 700; line-height: 1.3; }
.bucks__votes { grid-column: 2; grid-row: 1; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bucks__bar { grid-column: 1 / -1; grid-row: 2; height: 0.875rem; border: 2px solid var(--navy); background: linear-gradient(90deg, var(--royal) calc(var(--share) * 100%), var(--white) 0); }
.bucks__caption { margin-top: 0.75rem; font-size: 0.9375rem; font-weight: 600; }
.rules__next { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.625rem; margin: 0.5rem 0 0; font-weight: 800; }
.request__choices--checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); column-gap: 1.5rem; }
.request__choices--checks .request__label { grid-column: 1 / -1; margin-bottom: 0.375rem; }
.request__choices--checks .request__choice { margin-right: 0; line-height: 1.3; }

@media (min-width: 64rem) {
  .hall-council__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; }
  .hall-jobs__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .hall-history__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .hall-history__leaders { position: sticky; top: 1.5rem; }
  .site-footer__inner.site-footer__inner--text { grid-template-columns: minmax(0, 4fr) minmax(0, 3fr); }
}

/* ---- News: notices first, the City Manager's reports, the standing list ------------ */
/* A notice wears Notice Orange with Black type (White on Orange is 3:1;
   Black is 7:1). An event in the same list is Lime. */
.page-head--notice { --ring: var(--navy); background: var(--orange); color: var(--black); }
.page-head--notice .page-head__title, .page-head--notice a, .page-head--notice .eyebrow { color: var(--black); }
.verb--notice { background: var(--orange); color: var(--black); border-color: var(--black); box-shadow: none; }
.page-head--notice .verb--notice { background: var(--white); }
.notices { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.notice-card { padding: 1rem 1.25rem 1.125rem; background: var(--white); border: 2px solid var(--navy); }
.notice-card:not(.notice-card--notice) .verb--notice { background: var(--lime); color: var(--navy); border-color: var(--navy); }
.notice-card__when { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; margin: 0; font-weight: 800; }
.notice-card__title { margin: 0.625rem 0 0; font-size: var(--step-2); line-height: 1.2; }
.notice-card__title a { color: var(--navy); }
.notice-card__body { max-width: 64ch; margin: 0.375rem 0 0; }
.news-group__title { margin: 2.25rem 0 0.375rem; color: var(--teal); font-size: 0.875rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.block__title + .news-group__title { margin-top: 0.5rem; }
.news-list--page .news-list__item { display: block; }
.news-list__source { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.standing { columns: 2 16rem; column-gap: 2rem; margin: 0; padding: 0; list-style: none; }
.standing__item { padding: 0.5rem 0; border-top: 2px solid var(--blue); break-inside: avoid; }
.standing__item a { font-weight: 800; }
.standing__meta { display: block; font-size: 0.875rem; font-weight: 600; }
.side-note { font-size: 0.9375rem; }
.service__side .block--form .block__title { font-size: var(--step-2); }
.service__side .request { padding: 0; background: none; border: 0; box-shadow: none; }
.service__side .request__fields, .service__side .request__choices--checks { grid-template-columns: minmax(0, 1fr); }
.service__side .request__field { grid-column: 1 / -1; }
.map--street { margin: 0; }

/* ---- Contact: the two buildings on one map, the directory, who runs the rest -------- */
.contact-places { padding-block: clamp(2.25rem, 5vw, 3.5rem) 0; }
.contact-places__grid { display: grid; gap: 1.75rem clamp(2rem, 5vw, 3.5rem); align-items: start; }
.contact-places__list { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.place-card { padding: 1.125rem 1.25rem 1.25rem; background: var(--white); border: 2px solid var(--navy); }
.place-card__name { font-size: var(--step-2); }
.place-card__address { margin: 0.5rem 0 0; font-weight: 600; line-height: 1.45; }
.place-card__phone { margin: 0.5rem 0 0; }
.place-card__phone a { font-size: var(--step-2); font-weight: 900; font-variant-numeric: tabular-nums; }
.place-card__hours { margin: 0.25rem 0 0; font-size: 0.9375rem; font-weight: 700; }
.map--contact { margin: 0; }
.map__tag { position: absolute; left: var(--x); top: var(--y); z-index: 2; margin: 0; pointer-events: none; transform: translate(0.75rem, -50%); }
.map__tag::before { content: ""; position: absolute; left: -0.75rem; top: 50%; width: 0.875rem; height: 0.875rem; border: 2px solid var(--navy); background: var(--lime); transform: translate(-50%, -50%); }
.map__tag span { display: block; padding: 0.0625rem 0.4375rem; background: var(--navy); color: var(--white); font-size: 0.875rem; font-weight: 800; line-height: 1.35; white-space: nowrap; }
.map__tag--left { transform: translate(calc(-100% - 0.75rem), -50%); }
.map__tag--left::before { left: auto; right: -0.75rem; transform: translate(50%, -50%); }
.directory { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1.75rem 2rem; }
.directory__title { margin: 0; padding-bottom: 0.375rem; border-bottom: 3px solid var(--navy); font-size: var(--step-1); }
.directory__title a { color: var(--navy); }
.person--directory { scroll-margin-top: 1.5rem; }
.person--directory:target { background: var(--lime); box-shadow: -0.5rem 0 0 var(--lime), 0.5rem 0 0 var(--lime); }
.who { margin: 0; padding: 0; list-style: none; border-top: 3px solid var(--navy); }
.who__row { display: grid; gap: 0.25rem 2rem; padding: 1rem 0; border-bottom: 2px solid var(--blue); }
.who__label { margin: 0; color: var(--teal); font-size: 1.0625rem; font-weight: 900; line-height: 1.3; }
.who__who { margin: 0; font-weight: 800; }
.who__text { max-width: 60ch; margin: 0.25rem 0 0; font-size: 0.9375rem; }
.who__phone { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; margin: 0.375rem 0 0; }
.who__phone-label { color: var(--teal); font-size: 0.8125rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.who__phone a { font-size: 1.125rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.who__row--emergency .who__phone a { font-size: var(--step-3); }
.who__link { margin: 0.5rem 0 0; }
@media (min-width: 48rem) {
  .contact-places__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .who__row { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); }
}

/* ---- Accessibility: the parking study's blocks lit on downtown, the list beside ------ */
/* Royal is the accessibility blue here: the lit blocks, the counts on them, and the
   same counts in the list, so the eye matches a row to its block. */
.hm__road--block { stroke: var(--royal); stroke-width: 8px; }
.map__counts { margin: 0; }
.map__count {
  position: absolute; left: var(--x); top: var(--y); z-index: 2;
  display: grid; place-items: center;
  width: 1.625rem; height: 1.625rem;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--royal);
  color: var(--white);
  box-shadow: 2px 2px 0 var(--navy);
  font-size: 0.875rem; font-weight: 900; line-height: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.access-parking { display: grid; gap: 1.5rem clamp(1.5rem, 4vw, 2.5rem); align-items: start; margin-block: 1.25rem 1rem; }
.map--access { margin: 0; }
.access-parking__title { margin: 0 0 0.625rem; font-size: var(--step-1); }
.access-blocks { margin: 0; padding: 0; list-style: none; border-top: 3px solid var(--navy); }
.access-blocks__row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.75rem; padding: 0.625rem 0; border-bottom: 2px solid var(--blue); }
.access-blocks__count {
  display: grid; place-items: center;
  width: 1.875rem; height: 1.875rem;
  border-radius: 50%;
  background: var(--royal);
  color: var(--white);
  font-weight: 900; line-height: 1;
}
.access-blocks__street { display: block; font-weight: 800; line-height: 1.3; }
.access-blocks__between { display: block; font-size: 0.9375rem; line-height: 1.35; }
@media (min-width: 40rem) {
  .access-parking { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

/* ---- Footer: City Hall ------------------------------------------------------------- */
.site-footer {
  --ring: var(--lime);
  margin-top: -18px;
  padding: calc(4rem + 18px) 0 2rem;
  background: var(--navy);
  color: var(--white);
  clip-path: var(--wave-lg);
}
.site-footer a { color: var(--white); }
.site-footer a:hover { color: var(--lime); }
.site-footer__inner { display: grid; gap: 2.75rem; }
.site-footer__logo { display: block; width: 13.5rem; height: auto; margin-bottom: 1.75rem; }
.site-footer__heading { margin: 1.5rem 0 0.375rem; color: var(--lime); font-size: 0.9375rem; letter-spacing: 0.08em; text-transform: uppercase; }
.site-footer__hall .site-footer__heading:first-of-type, .site-footer__links .site-footer__heading { margin-top: 0; }
.site-footer__address { font-style: normal; }
.site-footer p { margin: 0 0 0.5rem; }
.site-footer__phone { font-size: 1.5rem; font-weight: 900; text-decoration: none; font-variant-numeric: tabular-nums; }
.site-footer__phone:hover { text-decoration: underline; }
.site-footer__links ul { margin: 0; padding: 0; list-style: none; }
.site-footer__links li { border-top: 1px solid var(--teal); }
.site-footer__links li a { display: block; padding: 0.5rem 0; font-weight: 700; text-decoration: none; }
.site-footer__links li a:hover { text-decoration: underline; }
.photo--footer .photo__frame { box-shadow: 6px 6px 0 var(--blue); }
.photo--footer .photo__caption { color: var(--white); }
.photo--footer .photo__place { color: var(--lime); }
.site-footer__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem;
  margin-top: 3rem; padding-top: 1.25rem;
  border-top: 2px solid var(--teal);
  font-size: 0.875rem;
}

/* ---- Wider screens ---------------------------------------------------------------- */
@media (min-width: 40rem) {
  .facts__row { grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr); }
  .guide__row { grid-template-columns: 7rem minmax(0, 1fr); }
  .news-list__item { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 1.5rem; }
  .news-list__date { grid-row: 1 / span 3; padding-top: 0.3rem; }
}
@media (min-width: 48rem) {
  .item-nav { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; }
  .item-nav__prev { grid-column: 1; }
  .item-nav__up { grid-column: 2; }
  .item-nav__next { grid-column: 3; text-align: right; }
  .year-nav { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; }
  .year-nav__older { grid-column: 1; }
  .year-nav__up { grid-column: 2; }
  .year-nav__newer { grid-column: 3; text-align: right; }
  .meeting-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meeting-nav__next { grid-column: 2; text-align: right; }
  .take-part__zoom div { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); }
}
@media (min-width: 64rem) {
  .city-hall__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  /* Text and photographs split the row evenly until 76rem; the fixed photo
     columns below would leave the title a 226px column at 1024px ("Ferry, /
     Stairs, / Beach" one word to a line). */
  .beach__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .beach__photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.75rem; }
  .beach__photo--a { grid-column: 1; grid-row: 1; }
  .beach__photo--b { grid-column: 2; grid-row: 1; margin-top: 4rem; }
  .beach__photo--c { grid-column: 1; grid-row: 2; justify-self: end; width: 92%; margin-top: 0; }
  .beach__photo--d { grid-column: 2; grid-row: 2; margin-top: -2rem; }
  .news__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .meeting__body, .service__body, .board-page__body { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .meetings-next__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; }
  .take-part { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
  .reader { grid-template-columns: 8.5rem minmax(0, 1fr); gap: 3rem; }
  .reader__rail { position: sticky; top: 1rem; align-self: start; max-height: calc(100vh - 2rem); overflow-y: auto; }
  .reader__thumbs { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 7rem; overflow-x: visible; }
  .site-footer__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 3fr); }
}
@media (min-width: 76rem) {
  .beach__grid { grid-template-columns: minmax(0, 1fr) auto; }
  .beach__photos { grid-template-columns: 300px 340px; }
  .beach__photo--c { width: 280px; }
}

/* ---- Small screens: the menu, the box on its own row -------------------------------- */
@media (max-width: 63.99rem) {
  .masthead__bar { grid-template-columns: minmax(0, 1fr) auto; padding-block: 0.75rem 1rem; }
  .masthead__search { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; width: 100%; }
  .masthead__hall { display: none; }
  .menu-toggle {
    display: inline-flex; align-items: center; gap: 0.625rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.875rem;
    border: 2px solid var(--teal);
    background: var(--white);
    color: var(--teal);
    box-shadow: 3px 3px 0 var(--teal);
    font: inherit; font-weight: 800;
    cursor: pointer;
  }
  .menu-toggle__bars { position: relative; width: 1.125rem; height: 2px; background: currentColor; }
  .menu-toggle__bars::before, .menu-toggle__bars::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; }
  .menu-toggle__bars::before { top: -6px; }
  .menu-toggle__bars::after { top: 6px; }
  .menu-toggle[aria-expanded="true"] { background: var(--lime); }
  .masthead__nav { min-height: 0.375rem; }
  .primary-nav { display: none; flex-direction: column; align-items: stretch; padding-block: 0.5rem 1.25rem; }
  .primary-nav.is-open { display: flex; }
  .primary-nav__list, .util-nav__list { flex-direction: column; }
  .util-nav__list { padding-top: 0.5rem; border-top: 2px solid var(--blue); }
  .primary-nav__list a, .util-nav__list a { padding: 0.75rem 0 0.95rem; }
  .wave-link::after, .util-nav__list .wave-link::after,
  .primary-nav__list li:first-child .wave-link::after, .util-nav__list li:last-child .wave-link::after { left: 0; right: auto; width: 4.5rem; bottom: 0.3rem; }
}
@media (max-width: 47.99rem) {
  .band--wave { margin-top: -12px; padding-top: calc(var(--band-pad) + 12px); clip-path: var(--wave-sm); }
  .site-footer { margin-top: -12px; padding-top: calc(3rem + 12px); clip-path: var(--wave-sm); }
  .page-head::after { height: 13px; clip-path: var(--wave-sm); }
  .fan__summary, .agenda__item--plain { grid-template-columns: 2.5rem minmax(0, 1fr) 1rem; }
  .fan__pages { grid-column: 2; grid-row: 2; }
  .fan__summary::after { grid-column: 3; grid-row: 1; }
  .agenda__item--plain .fan__pages { grid-column: 2; }
  .fan__body { padding-left: 0; }
  .agenda-teaser a { grid-template-columns: 2.75rem minmax(0, 1fr); }
  .agenda-teaser__pages { grid-column: 2; }
  .cal-months { display: none; }
}

/* ---- Motion ------------------------------------------------------------------------ */
@view-transition { navigation: auto; }
::view-transition-group(packet-page) { animation-duration: 420ms; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
/* No smooth scrolling: a focused field or an in-page link arrives at once,
   where a keyboard user expects it. */
@media (prefers-reduced-motion: no-preference) {
  .button, .fan__thumb, .bar--wide, .wave-link::after, .cal__meeting, .cal-filter__chip, .board-card, .doc__leaf { transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease; }
  .doc:hover .doc__leaf { transform: translateY(-3px); box-shadow: 5px 5px 0 var(--teal); }
  .fan[open] .fan__thumbs li { animation: fan-in 520ms cubic-bezier(0.2, 0.75, 0.2, 1) both; animation-delay: calc(min(var(--i), 14) * 32ms); }
}
@keyframes fan-in {
  from { transform: translateX(calc(var(--i) * -7.75rem)) rotate(-4deg); opacity: 0; }
  45% { opacity: 1; }
  to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---- Print ---------------------------------------------------------------------- */
@media print {
  .proto-banner, .masthead__search, .masthead__nav, .menu-toggle, .skip-link, .site-footer__photo { display: none !important; }
  .band--wave, .site-footer, .page-head::after { clip-path: none; }
  .photo__frame, .board, .task, .board-page__side { box-shadow: none; }
  .cal-filter, .cal__pager { display: none !important; }
}

/* ---- Not found and fallback pages ------------------------------------------------ */
.lost { padding-bottom: calc(var(--band-pad) + 1rem); }
.lost__links { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.lost__links a {
  display: inline-flex; align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  background: var(--white);
  border: 2px solid var(--teal);
  box-shadow: var(--shadow-sm);
  color: var(--teal);
  font-weight: 800;
  text-decoration: none;
}
.lost__links a:hover { background: var(--lime); }
.page-body { padding-block: 2rem var(--band-pad); }
.prose { max-width: 68ch; }