/* Marion County, Arkansas: "Service desk" theme.
   One family (Archivo, variable width + weight), flat department colors, no shadows. */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --ink: #111111;
  --paper: #ffffff;
  --muted: #4a4a4a;
  --gap: 8px;
  --wrap: 1376px;
  --pad: clamp(16px, 3vw, 32px);
  --focus: #111111;
  --hl: #111111;      /* phone-number highlight color */
  --hl-ink: #ffffff;  /* text on that highlight */
  --font: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
}

/* Department colors. --dept is the block, --on is text on the block. */
.dept-judge, .dept-county { --dept: #5D544B; --on: #ffffff; }
.dept-quorum    { --dept: #B7311C; --on: #ffffff; }
.dept-boards    { --dept: #8C8279; --on: #111111; }
.dept-assessor  { --dept: #FFC20E; --on: #111111; }
.dept-collector { --dept: #00704A; --on: #ffffff; --tint: #DCEFE5; }
.dept-treasurer { --dept: #0E7C86; --on: #ffffff; }
.dept-clerk     { --dept: #4FB3EA; --on: #111111; }
.dept-court     { --dept: #3A3F47; --on: #ffffff; }
.dept-election  { --dept: #6C3EB8; --on: #ffffff; }
.dept-oem       { --dept: #FF4F9A; --on: #111111; }
.dept-road      { --dept: #FF6A13; --on: #111111; }
.dept-transfer  { --dept: #A3D139; --on: #111111; }
.dept-veterans  { --dept: #1F3F99; --on: #ffffff; }
.dept-plain     { --dept: #ffffff; --on: #111111; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.125rem;          /* 18px */
  line-height: 1.5;
  font-stretch: 100%;
  font-weight: 400;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
a[href^="tel:"] { white-space: nowrap; }
a:hover { text-decoration-thickness: 4px; }
h1, h2, h3 { margin: 0; font-weight: 800; line-height: 1.05; text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding: 0; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

.wrap { max-width: calc(var(--wrap) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }

.skip {
  position: absolute; left: 12px; top: -200px; z-index: 50;
  background: var(--ink); color: #fff; padding: 12px 18px; font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; outline-color: #FFC20E; }

/* ---------- Department spectrum (brand strip) ---------- */
.spectrum { display: flex; height: 8px; }
.spectrum span { flex: 1; background: var(--dept); }

/* ---------- Masthead ---------- */
.masthead { position: relative; z-index: 20; background: var(--paper); border-bottom: 2px solid var(--ink); }
.masthead-inner { display: flex; align-items: center; gap: 12px 28px; min-height: 88px; padding-block: 14px; }

.brand { display: inline-flex; flex-direction: column; text-decoration: none; line-height: 1; margin-right: auto; }
.brand-name { font-size: 1.75rem; font-weight: 850; font-stretch: 125%; letter-spacing: -0.01em; }
.brand-state { font-size: 1.0625rem; font-weight: 500; font-stretch: 125%; margin-top: 4px; }
.brand:hover .brand-name { text-decoration: underline; text-decoration-thickness: 3px; }

.now-bar { font-size: 1.0625rem; line-height: 1.3; }
.now-bar strong { font-weight: 750; }

.nav-toggle {
  display: inline-flex; align-items: center; gap: 12px;
  font: inherit; font-size: 1.0625rem; font-weight: 700; font-stretch: 105%;
  background: var(--ink); color: #fff; border: 2px solid var(--ink);
  padding: 11px 16px 11px 18px; cursor: pointer; border-radius: 0;
}
.nav-toggle:hover { background: #fff; color: var(--ink); }
.nav-toggle-icon { position: relative; width: 14px; height: 14px; }
.nav-toggle-icon::before, .nav-toggle-icon::after {
  content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; background: currentColor;
  transition: transform .2s ease;
}
.nav-toggle-icon::after { transform: rotate(90deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after { transform: rotate(135deg); }

.nav ul { list-style: none; }
.label-narrow { display: none; }

/* Department links: a color square that floods the row on hover */
.nav-depts a {
  position: relative; isolation: isolate; display: flex; align-items: center; gap: 14px;
  padding: 12px 12px 12px 0; font-weight: 650; font-size: 1.1875rem; line-height: 1.2; text-decoration: none;
  transition: padding .18s ease, color .18s ease;
}
.nav-depts a::before {
  content: ""; flex: none; width: 18px; height: 18px; background: var(--dept);
}
.nav-depts .dept-plain a::before { outline: 2px solid var(--ink); outline-offset: -2px; }
.nav-depts a::after {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--dept);
  transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.nav-depts a:hover, .nav-depts a:focus-visible { color: var(--on); padding-left: 14px; }
.nav-depts a:hover::after, .nav-depts a:focus-visible::after { transform: scaleX(1); }
.nav-depts a:focus-visible { outline-color: var(--ink); outline-offset: 2px; }
.nav-depts a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; }

.nav-util a { font-weight: 600; text-decoration: none; padding: 8px 0; display: inline-block; }
.nav-util a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.nav-util a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; }

/* Without JavaScript the menu is simply shown. */
html:not(.js) .nav-toggle { display: none; }

@media (min-width: 1200px) {
  .nav { display: flex; align-items: center; gap: 28px; }
  .nav-panel { display: contents; }
  .nav-util { order: 1; display: flex; gap: 24px; }
  .nav-toggle { order: 2; }
  .nav-depts {
    order: 3;
    position: absolute; left: 0; right: 0; top: 100%;
    display: none; grid-template-columns: repeat(4, 1fr); gap: 0 32px;
    background: var(--paper); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
    padding: 20px max(var(--pad), calc((100% - var(--wrap)) / 2)) 28px;
  }
  .nav-depts li { border-bottom: 2px solid #e4e4e0; }
  .nav.is-open .nav-depts { display: grid; }
  html:not(.js) .masthead-inner { flex-wrap: wrap; }
  html:not(.js) .nav { flex-basis: 100%; flex-wrap: wrap; }
  html:not(.js) .nav-depts { display: grid; position: static; order: 9; flex-basis: 100%; padding: 8px 0 12px; border-bottom: 0; }
  .now-bar { max-width: 22em; }
}

@media (max-width: 1199.98px) {
  .masthead-inner { flex-wrap: wrap; min-height: 0; padding-block: 12px; }
  .brand-name { font-size: 1.5rem; }
  .now-bar { order: 3; flex-basis: 100%; padding-top: 10px; border-top: 2px solid #e4e4e0; }
  .nav { order: 2; }
  .label-wide { display: none; }
  .label-narrow { display: inline; }
  .nav-panel {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--paper); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
    padding: 8px var(--pad) 24px;
  }
  .nav.is-open .nav-panel { display: block; }
  html:not(.js) .nav-panel { display: block; position: static; border: 0; padding: 0; }
  html:not(.js) .nav { flex-basis: 100%; order: 4; }
  .nav-depts li { border-bottom: 2px solid #e4e4e0; }
  .nav-util { display: flex; flex-wrap: wrap; gap: 4px 24px; padding-top: 16px; }
}

/* ---------- Home: the desk ---------- */
.desk { padding-top: clamp(36px, 5vw, 72px); padding-bottom: clamp(48px, 6vw, 96px); }
.desk-head { display: grid; gap: 16px 48px; align-items: end; margin-bottom: clamp(24px, 3vw, 40px); }
.desk-head h1 {
  font-size: clamp(2.6rem, 1.2rem + 5.6vw, 6.25rem);
  font-stretch: 125%; font-weight: 850; letter-spacing: -0.025em; line-height: 0.95;
}
.desk-lede { font-size: 1.1875rem; max-width: 26em; }
@media (min-width: 1100px) {
  .desk-head { grid-template-columns: 1fr 22rem; }
  .desk-lede { padding-bottom: 6px; }
}

/* Bento */
.bento { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "tax    tax"
      "now    qc"
      "assess qc"
      "road   road"
      "trans  vets"
      "trans  clerk"
      "elect  jobs";
  }
}
@media (min-width: 1100px) {
  .bento {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "tax    tax    now    qc"
      "tax    tax    assess qc"
      "road   road   trans  vets"
      "clerk  elect  trans  jobs";
  }
}
@media (min-width: 700px) {
  .tile-tax { grid-area: tax; }
  .tile-now { grid-area: now; }
  .tile-assess { grid-area: assess; }
  .tile-qc { grid-area: qc; }
  .tile-road { grid-area: road; }
  .tile-trans { grid-area: trans; }
  .tile-vets { grid-area: vets; }
  .tile-clerk { grid-area: clerk; }
  .tile-elect { grid-area: elect; }
  .tile-jobs { grid-area: jobs; }
}

.tile {
  --focus: var(--on); --hl: var(--on); --hl-ink: var(--dept);
  container-type: inline-size;
  background: var(--dept); color: var(--on);
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: clamp(20px, 2vw, 28px);
  min-height: 300px;
}
.tile.dept-plain { border: 3px solid var(--ink); }

.tile-dept { font-size: 1.0625rem; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.tile-dept::before { content: ""; width: 12px; height: 12px; background: currentColor; flex: none; }
.tile-dept a { text-decoration-thickness: 1.5px; }
.tile-dept a:hover { text-decoration-thickness: 3px; }

.tile-title {
  font-size: 1.75rem;
  font-size: clamp(1.625rem, 9cqi, 2.375rem);
  font-stretch: 112%; font-weight: 800; letter-spacing: -0.012em; line-height: 1.02;
  max-width: 14em;
  margin-bottom: 4px;
}
.tile-text { font-size: 1.125rem; line-height: 1.45; max-width: 34em; }
.tile-note { font-size: 1.0625rem; line-height: 1.4; }
.tile-figure {
  font-size: 2.25rem;
  font-size: clamp(2rem, 13cqi, 3.25rem);
  font-weight: 800; font-stretch: 75%; line-height: 0.95; letter-spacing: -0.01em;
}
.tile-figure-sm { font-size: clamp(1.5rem, 9cqi, 2.125rem); font-stretch: 85%; line-height: 1.05; }
.tile-links { list-style: none; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.tile-links a:not(.button) { font-weight: 600; }

/* Phone numbers: the varying last four digits carry the weight. */
.tel {
  display: inline-block; white-space: nowrap; text-decoration: none; color: inherit;
  font-size: 2.5rem;
  font-size: clamp(2.25rem, 15cqi, 3.5rem);
  font-stretch: 75%; line-height: 1; letter-spacing: -0.005em;
  padding: 0 0.1em 0.06em; margin: 0 -0.1em;
  background: linear-gradient(var(--hl), var(--hl)) 0 100% / 100% 0.08em no-repeat;
  transition: background-size .2s ease, color .2s ease;
}
.tel-pre { font-weight: 400; }
.tel-end { font-weight: 850; }
.tel:hover, .tel:focus-visible { background-size: 100% 100%; color: var(--hl-ink); }
.tile-foot { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 6px; }
.tile-foot .tile-call-label { margin-bottom: -2px; }

.tile-call-label { font-size: 1.0625rem; font-weight: 600; margin-bottom: 6px; }

/* Buttons: flat, square, inverse of the block they sit on */
.button {
  display: inline-block; text-decoration: none; font-weight: 750; font-stretch: 105%;
  font-size: 1.125rem; line-height: 1.2;
  padding: 14px 22px; border: 3px solid var(--btn-bg, var(--ink));
  background: var(--btn-bg, var(--ink)); color: var(--btn-ink, #fff);
  transition: background-color .15s ease, color .15s ease;
}
.button:hover { background: transparent; color: var(--btn-bg, var(--ink)); text-decoration: none; }
/* On a color block the button is the inverse of the block; on white it takes the department color. */
.tile, .card-id { --btn-bg: var(--on); --btn-ink: var(--dept); }
.prose { --btn-bg: var(--dept, var(--ink)); --btn-ink: var(--on, #fff); }
.button:active { transform: translateY(1px); }

/* Live status (filled in by script.js; empty without it) */
.live:empty, .qc-next:empty { display: none; }
.live {
  font-size: 1.75rem;
  font-size: clamp(1.5rem, 10cqi, 2.25rem);
  font-weight: 800; font-stretch: 90%; line-height: 1.05;
}
.live-mark {
  display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.3em; vertical-align: 0.06em;
  background: currentColor; border: 0.09em solid currentColor;
}
.is-closed .live-mark { background: transparent; }
.live-sub { display: block; font-size: 1.125rem; font-weight: 500; font-stretch: 100%; line-height: 1.4; margin-top: 6px; }
.live-quiet { font-size: 1.125rem; font-weight: 500; font-stretch: 100%; line-height: 1.4; }
.live-quiet strong { font-weight: 750; }

/* Tile specifics */
.tile-tax { min-height: 0; display: grid; gap: 24px 40px; align-items: stretch; align-content: start; }
.tax-head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.tax-main, .tax-ways { container-type: inline-size; }
.tax-main { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.tile-tax .tile-title { font-size: clamp(2.25rem, 9.5cqi, 4.5rem); font-stretch: 118%; max-width: none; }
.tax-due { display: flex; flex-direction: column; line-height: 0.88; }
.tax-due-label { font-size: 1.125rem; font-weight: 600; margin-bottom: 8px; line-height: 1.2; }
.tax-due-date { font-size: clamp(3.25rem, 24cqi, 6.5rem); font-weight: 850; font-stretch: 72%; letter-spacing: -0.015em; word-spacing: 0.06em; white-space: nowrap; }
.tax-ways { display: flex; flex-direction: column; }
.tax-more { margin-top: auto; padding-top: 8px; font-weight: 600; max-width: 22em; }
.ways-title { font-size: 1.25rem; font-weight: 800; font-stretch: 110%; padding-bottom: 12px; }
.ways { list-style: none; border-top: 3px solid currentColor; }
.way { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 0 16px; border-bottom: 2px solid currentColor; }
.way-name { font-size: 1.0625rem; font-weight: 700; }
.way-detail { font-size: 1.0625rem; line-height: 1.4; }
.tile-tax .button { font-size: 1.25rem; padding: 16px 26px; }
.tile-tax .tel { margin-top: 0; font-size: clamp(2.25rem, 17cqi, 3.5rem); }
@media (min-width: 700px) {
  .tile-tax { grid-template-columns: 1fr 1fr; }
  .tax-head { grid-column: 1 / -1; }
}

.tile-now .tile-text { font-weight: 500; }

.tile-qc .qc-rule { font-size: clamp(1.375rem, 8cqi, 1.75rem); font-stretch: 90%; line-height: 1.15; }
.qc-next { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 3px solid currentColor; width: 100%; }
.qc-label { font-size: 1.125rem; font-weight: 600; }
.qc-date { display: flex; align-items: flex-end; gap: 14px; }
.qc-day { font-size: clamp(5rem, 40cqi, 8.5rem); font-weight: 850; font-stretch: 72%; line-height: 0.78; letter-spacing: -0.03em; }
.qc-md { font-size: clamp(1.25rem, 8cqi, 1.625rem); font-weight: 750; font-stretch: 100%; line-height: 1.1; padding-bottom: 2px; }
.tile-qc .tile-links { margin-top: auto; }

.road-lines { display: flex; flex-wrap: wrap; gap: 20px 48px; }
.road-line .tel { margin-top: 0; }
.road-line[data-road="fri"] .tel { font-size: clamp(1.75rem, 8cqi, 2.5rem); }
.tile-road .tile-title { max-width: 18em; }

.hours { margin: 0; width: 100%; }
.hours div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 10px 0; border-top: 2px solid currentColor; }
.hours div:last-child { border-bottom: 2px solid currentColor; }
.hours dt { font-weight: 700; }
.hours dd { margin: 0; }

.tile-jobs .tile-links a { font-weight: 600; }

/* ---------- Section heads ---------- */
.section-head { display: grid; gap: 10px 48px; align-items: end; margin-bottom: 28px; }
.section-head h2, .board h2, .about h2 {
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); font-stretch: 125%; font-weight: 850; letter-spacing: -0.02em;
}
.section-head p { max-width: 30em; font-size: 1.125rem; }
@media (min-width: 1100px) { .section-head { grid-template-columns: 1fr 22rem; } }

/* ---------- Directory ---------- */
.directory { padding-bottom: clamp(56px, 7vw, 112px); }
.dir { list-style: none; display: grid; grid-template-columns: 1fr; gap: 0 32px; }
@media (min-width: 700px) { .dir { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .dir { grid-template-columns: repeat(3, 1fr); } }
.dir-item {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name tel" "who tel";
  align-items: center; gap: 2px 16px; padding: 24px 0 18px;
  position: relative;
}
.dir-item::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--dept);
  transform-origin: top; transition: transform .2s ease;
}
.dir-item.dept-plain::before { background: var(--ink); }
.dir-item:hover::before, .dir-item:focus-within::before { transform: scaleY(1.75); }
.dir-name { grid-area: name; font-weight: 750; font-size: 1.1875rem; line-height: 1.2; }
a.dir-name { text-decoration-thickness: 1.5px; }
a.dir-name:hover { text-decoration-thickness: 3px; }
.dir-who { grid-area: who; color: var(--muted); font-size: 1.0625rem; line-height: 1.3; }
.dir-item .tel { grid-area: tel; font-size: clamp(1.875rem, 1.4rem + 1vw, 2.375rem); }
.dir-item:only-child { grid-template-areas: "name tel"; }

/* ---------- Notices / links ---------- */
.board { display: grid; gap: 40px 32px; padding-bottom: clamp(56px, 7vw, 112px); }
@media (min-width: 900px) { .board { grid-template-columns: repeat(3, 1fr); } }
.board h2 { font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); margin-bottom: 16px; }
.link-list { list-style: none; border-top: 3px solid var(--ink); }
.link-list li { border-bottom: 2px solid #e4e4e0; }
.link-list a { display: block; padding: 13px 0; font-weight: 650; text-decoration-thickness: 1.5px; }
.link-list a:hover { text-decoration: underline; text-decoration-thickness: 3px; }

/* ---------- About ---------- */
.about {
  display: grid; gap: 32px; padding-bottom: clamp(56px, 7vw, 112px);
  grid-template-areas: "text" "facts" "card";
}
.about-text { grid-area: text; }
.about-text h2 { margin-bottom: 20px; }
.about-text p { max-width: 36em; font-size: 1.1875rem; }
.facts { grid-area: facts; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.fact { background: var(--dept); color: var(--on); padding: 18px 20px 20px; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; min-height: 150px; }
.fact dd { margin: 0; font-size: clamp(2.5rem, 1.6rem + 2.6vw, 4.5rem); font-weight: 850; font-stretch: 75%; line-height: 0.9; letter-spacing: -0.01em; }
.fact dt { font-size: 1.0625rem; line-height: 1.3; font-weight: 500; max-width: 16em; }
.postcard { grid-area: card; margin: 0; max-width: 300px; }
.postcard figcaption { font-size: 1.0625rem; margin-top: 10px; color: var(--muted); }
@media (min-width: 1100px) {
  .about {
    grid-template-columns: repeat(12, 1fr); column-gap: 32px; row-gap: 40px;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "text  text  text  text  text  text  text  text  .     card  card  card"
      "facts facts facts facts facts facts facts facts .     card  card  card";
  }
  .facts { align-self: start; }
  .postcard { max-width: 320px; justify-self: end; }
}


/* ---------- Department page ---------- */
.crumbs ol { list-style: none; margin: 0; padding: 22px 0 18px; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 1.0625rem; }
.crumbs li + li::before { content: "/"; padding: 0 10px; color: var(--muted); }
.crumbs a { font-weight: 600; }
.crumbs a[aria-current="page"] { text-decoration: none; }

/* The contact card: the department's own bento */
.card-grid { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
.card-facts { display: contents; margin: 0; }
.card-id, .cf { padding: clamp(20px, 2vw, 28px); }
.card-id {
  --focus: var(--on); container-type: inline-size;
  background: var(--dept); color: var(--on);
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-height: 260px;
}
.card-id h1 {
  font-size: 3rem;
  font-size: clamp(2.75rem, 17cqi, 7.5rem);
  font-stretch: 125%; font-weight: 850; letter-spacing: -0.03em; line-height: 0.92;
  overflow-wrap: anywhere;
}
/* Long department names ("Emergency Management & E911") take the smaller title step. */
.card-id h1.title-long { font-size: clamp(2.25rem, 9cqi, 4.5rem); font-stretch: 112%; line-height: 1; }
.card-official { display: flex; flex-direction: column; font-size: 1.25rem; line-height: 1.3; margin-top: auto; }
.card-name { font-weight: 750; font-size: 1.5rem; font-stretch: 110%; }
.card-action .button { font-size: 1.1875rem; }
.cf { background: var(--tint, #eeeeea); color: var(--ink); display: flex; flex-direction: column; gap: 8px; }
.cf dt { font-size: 1.0625rem; font-weight: 700; }
.cf dd { margin: 0; font-size: 1.1875rem; line-height: 1.4; overflow-wrap: anywhere; }
.cf-phone { --focus: var(--on); --hl: var(--on); --hl-ink: var(--dept); background: var(--dept); color: var(--on); container-type: inline-size; }
.cf-phone .tel { font-size: clamp(2.75rem, 16cqi, 5.5rem); }
.cf-hours .live { font-size: 1.75rem; margin-bottom: 6px; }
.cf-email dd { font-weight: 600; }
@media (max-width: 699.98px) {
  .card-grid { gap: 0; }
  .card-id, .cf-phone { margin-bottom: var(--gap); }
  .cf:not(.cf-phone) { padding-block: 14px 16px; gap: 4px; }
  .cf:not(.cf-phone) + .cf { border-top: 2px solid var(--paper); }
}
@media (min-width: 700px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .card-id { grid-column: 1 / -1; }
  .cf-phone, .cf-hours { grid-column: span 1; }
}
@media (min-width: 1100px) {
  .card-grid { grid-template-columns: repeat(4, 1fr); }
  .card-id { grid-column: 1 / 3; grid-row: 1 / 3; min-height: 420px; }
  .cf-phone, .cf-hours { grid-column: 3 / 5; }
  .cf-phone { justify-content: space-between; }
}

/* Body: generic blocks the county edits */
.page-body { display: grid; gap: 40px; padding-top: clamp(40px, 5vw, 80px); padding-bottom: clamp(64px, 8vw, 128px); }
@media (min-width: 1100px) {
  .page-body { grid-template-columns: repeat(12, 1fr); column-gap: 32px; }
  .toc { grid-column: 1 / 4; }
  .prose { grid-column: 4 / 11; }
  .toc[hidden] + .prose { grid-column: 1 / 9; }
}
.toc-title { font-size: 1.125rem; font-weight: 750; font-stretch: 100%; padding-bottom: 12px; border-bottom: 3px solid var(--ink); }
.toc ul { list-style: none; }
.toc li { border-bottom: 2px solid #e4e4e0; }
.toc a { display: block; padding: 10px 0; font-weight: 600; text-decoration: none; font-size: 1.0625rem; line-height: 1.35; }
.toc a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
@media (min-width: 1100px) { .toc { position: sticky; top: 24px; align-self: start; } }

.prose { font-size: 1.1875rem; line-height: 1.6; max-width: 46rem; min-width: 0; }
.prose > * + * { margin-top: 1em; }
.prose h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); font-stretch: 115%; font-weight: 820; letter-spacing: -0.015em; line-height: 1.08;
  margin-top: 2.2em; padding-top: 18px; border-top: 8px solid var(--dept, var(--ink));
  scroll-margin-top: 24px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.375rem; font-stretch: 105%; font-weight: 800; line-height: 1.2; margin-top: 1.8em; }
.prose h2 + *, .prose h3 + * { margin-top: 0.6em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: square; }
.prose li + li { margin-top: 0.35em; }
.prose li::marker { color: var(--ink); }
.prose a:not(.button) { font-weight: 600; }
.prose .button { margin-top: 0.2em; }
.prose img { width: 100%; }
.prose figure { margin: 1.5em 0 0; }
.prose figcaption { font-size: 1.0625rem; color: var(--muted); margin-top: 8px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 1.125rem; line-height: 1.4; margin-top: 1.5em; }
.prose caption { text-align: left; font-weight: 800; font-size: 1.25rem; font-stretch: 105%; padding-bottom: 10px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 2px solid #e4e4e0; }
.prose thead th { border-bottom: 3px solid var(--ink); font-weight: 700; }
.prose tbody td:first-child { font-weight: 650; }
.prose table + p { margin-top: 1.25em; }

/* ---------- Footer ---------- */
.footer { background: #5D544B; color: #fff; --focus: #fff; padding-top: 48px; }
.footer-inner { display: grid; gap: 32px; grid-template-columns: 1fr; padding-bottom: 40px; }
@media (min-width: 700px) { .footer-inner { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .footer-inner { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer .brand-name { font-size: 2rem; line-height: 1; }
.footer .brand-state { margin-top: 6px; }
.footer-h { font-size: 1.0625rem; font-weight: 750; font-stretch: 100%; margin-bottom: 8px; line-height: 1.3; }
.footer-links { list-style: none; }
.footer-links a { display: inline-block; padding: 3px 0; }
.footer-base { border-top: 2px solid rgba(255, 255, 255, 0.4); padding-block: 18px 28px; font-size: 1.0625rem; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}