:root {
  /* Palette: docs/specs/gchnrt-design-tokens.md sections 1 and 7. */
  --gold: #C8A47E;
  --gold-light: #d4b896;
  --gold-text: #7A5C34;
  --gold-text-large: #9A7A54;
  --plum: #32273B;
  --plum-light: #46374f;
  --cream: #F1F1EF;
  --white: #FFFFFF;
  --black: #000000;
  --logo-paper: #FFFFFF;

  /* Neutral text and rule roles. */
  --ink: var(--black);
  --muted: #555555;
  --rule: #D9D6CF;
  --rule-strong: #8C877E;
  --muted-on-dark: #C9C4D1;
  --rule-on-black: #333333;
  /* Form validation error state. Added for the contact page 2026-09-08.
     6.54:1 on white, 5.78:1 on cream: clears 4.5:1 body text and 3:1
     component-border thresholds on both grounds the contact page uses.
     Contrast pairs asserted in tools/check-contrast.py. */
  --error: #B3261E;

  /* Type: the live Trust embed's licensed fallback pairing. */
  --font-body: 'Libre Baskerville', 'Calluna', Georgia, serif;
  --font-heading: system-ui, -apple-system, 'Expressway', sans-serif;
  --font-button: 'Poppins', system-ui, sans-serif;
  --weight-body: 300;
  --weight-heading: 400;
  --weight-button: 500;
  --lh-body: 1.8;
  --lh-heading: 1.4;
  --lh-button: 1.2;
  --fs-base: 1.1875rem;  /* 19px. Was 16px; both reference sites run 20px */
  --fs-h1: clamp(2.4rem, 6vw, 4rem);
  --fs-h2: clamp(1.75rem, 4vw, 2.3rem);
  --fs-h3: clamp(1.4rem, 3vw, 2rem);
  --fs-h4: 1.2rem;
  --fs-lead: 1.4rem;
  --fs-small: .9rem;
  --fs-meta: .8rem;
  --track-button: .02em;

  /* Layout. */
  --max-w: 1080px;
  --gutter: 3vw;
  --header-h: 100px;
  --measure-prose: 45rem;   /* 720px, ~75 chars at 19px */
  --measure-wide:  55rem;   /* 880px, the breakout width for figures and tables */
  --pad-section: clamp(2.5rem, 6.6vmax, 7rem);
  --pad-section-lg: clamp(4rem, 10vmax, 11rem);

  /* Sharp shapes, photo layers, and menu shadow. */
  --radius: 2px;
  --radius-button: 6.4px;
  --overlay-credit: rgba(0,0,0,.55);
  --shadow-menu: 0 8px 24px rgba(0,0,0,.12);

  --btn-pad-y: 1.2rem;
  --btn-pad-x: 2.004rem;
  --focus-w: 3px;
}

@media (max-width: 767px) {
  :root {
    --gutter: 6vw;
    --header-h: 80px;
    /* The 42-word lead ran 9 lines / 323px at 1.4rem, driving the hero to
       2.77 viewports on a 390px phone. */
    --fs-lead: 1.15rem;
  }
}

/* Role tokens every component uses. Default = light-on-white. */
:root, [data-section-theme="default"] {
  --section-bg: var(--white);
  --section-ink: var(--ink);
  --section-muted: var(--muted);
  --section-rule: var(--rule);
  --section-rule-strong: var(--rule-strong);
  --section-link: var(--gold-text);
  --section-label: var(--gold-text);
  --btn-bg: var(--black);
  --btn-ink: var(--white);
  --btn-bg-hover: var(--plum);
  --focus: var(--plum);
  --section-inset-bg: var(--cream);
}

[data-section-theme="light"] {
  --section-bg: var(--cream);
  --section-inset-bg: var(--white);
}

[data-section-theme="dark"] {
  --section-bg: var(--plum);
  --section-ink: var(--white);
  --section-muted: var(--muted-on-dark);
  --section-inset-bg: var(--plum-light);
  --section-rule: var(--plum-light);
  --section-rule-strong: var(--gold);
  --section-link: var(--gold);
  --section-label: var(--gold);
  --btn-bg: var(--gold);
  --btn-ink: var(--black);
  --btn-bg-hover: var(--gold-light);
  --focus: var(--gold);
}

[data-section-theme="black"] {
  --section-bg: var(--black);
  --section-ink: var(--white);
  --section-muted: var(--muted-on-dark);
  --section-inset-bg: var(--plum-light);
  --section-rule: var(--rule-on-black);
  --section-rule-strong: var(--gold);
  --section-link: var(--gold);
  --section-label: var(--gold);
  --btn-bg: var(--gold);
  --btn-ink: var(--black);
  --btn-bg-hover: var(--gold-light);
  --focus: var(--gold);
}

[data-section-theme="bright"] {
  --section-bg: var(--gold);
  --section-ink: var(--black);
  --section-muted: var(--black);
  --section-rule: var(--gold-text-large);
  --section-rule-strong: var(--black);
  --section-link: var(--black);
  --section-label: var(--black);
  --section-inset-bg: var(--white);
  --btn-bg: var(--black);
  --btn-ink: var(--white);
  --btn-bg-hover: var(--plum);
  --focus: var(--black);
}

[data-section-theme] {
  background: var(--section-bg);
  color: var(--section-ink);
}

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

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  padding-top: var(--header-h);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}

[hidden] {
  display: none !important;
}

:where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, table) {
  margin-top: 0;
}

:where(a, button, input, summary) {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font: inherit;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  line-height: var(--lh-heading);
  letter-spacing: 0;
  color: inherit;
}

h1 {
  font-size: var(--fs-h1);
  margin-bottom: .5em;
}

h2 {
  font-size: var(--fs-h2);
  margin-bottom: .5em;
  text-wrap: balance;
}

/* In-section headlines are set in ALL CAPS. Rendered at display size they
   optically outweigh their own h2 and the section reads as two competing
   titles. Demoted to a letterspaced label: the caps then read as deliberate
   rather than shouting, and the h2 leads. */
h3 {
  font-size: .82rem;
  font-family: var(--font-button);
  font-weight: var(--weight-button);
  letter-spacing: .085em;
  line-height: 1.45;
  color: var(--section-label, var(--gold-text));
  margin: 2.4em 0 .75em;
  text-wrap: balance;
}

h4 {
  font-size: var(--fs-h4);
  text-wrap: balance;
  margin: 1.2em 0 .4em;
}

p {
  text-wrap: pretty;
  margin-bottom: 1.1em;
  max-width: var(--measure-prose);
}

a {
  color: var(--section-link);
  text-decoration: underline;
  text-underline-offset: .15em;
}

a:hover {
  color: var(--section-ink);
}

strong {
  font-weight: 700;
}

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 200;
  padding: .6rem 1rem;
  background: var(--black);
  color: var(--white);
}

.skip:focus {
  left: 0;
}

.wrap {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--pad-section);
}

.section--lg {
  padding-block: var(--pad-section-lg);
  min-height: 66vh;
  display: grid;
  align-content: center;
}

.eyebrow {
  font-family: var(--font-button);
  font-weight: var(--weight-button);
  font-size: var(--fs-meta);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--section-muted);
  margin-bottom: .6rem;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
}

.btn {
  display: inline-block;
  font-family: var(--font-button);
  font-weight: var(--weight-button);
  font-size: 1rem;
  line-height: var(--lh-button);
  letter-spacing: var(--track-button);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: 0;
  border-radius: var(--radius-button);
  background: var(--btn-bg);
  color: var(--btn-ink);
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-ink);
}

.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--white);
  border-bottom: 1px solid var(--rule);
}

.site-head-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.brand img {
  height: calc(var(--header-h) - 28px);
  width: auto;
  background: var(--logo-paper);
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  /* Max lowered 1.3rem -> 1.05rem on 2026-09-15. With ten items the old cap
     let the row outgrow .site-head-inner at 1728px and 1920px, the two most
     common desktop widths, and the overflow is clipped rather than scrolled,
     so the last item lost letters with no scrollbar to reveal them. */
  gap: clamp(.6rem, 1.4vw, 1.05rem);
}

.site-nav a {
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: .88rem;
  white-space: nowrap;
  padding: .5rem .1rem;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover {
  border-bottom-color: var(--gold);
}

.nav-menu {
  display: none;
}

@media (max-width: 1023px) {
  .site-nav {
    display: none;
  }

  .nav-menu {
    display: block;
    position: relative;
  }

  .nav-menu summary {
    list-style: none;
    cursor: pointer;
    font-family: var(--font-button);
    font-weight: var(--weight-button);
    padding: .6rem 1rem;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .nav-menu summary::-webkit-details-marker {
    display: none;
  }

  .nav-menu ul {
    list-style: none;
    margin: .5rem 0 0;
    padding: .5rem 0;
    position: absolute;
    right: 0;
    min-width: 16rem;
    background: var(--white);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-menu);
    /* D1: on a short viewport (landscape phone) the panel used to run off the
       bottom with four links unreachable and no way to scroll to them. */
    max-height: calc(100svh - var(--header-h) - 1rem);
    overflow-y: auto;
  }

  .nav-menu li a {
    display: block;
    padding: .7rem 1rem;
    color: var(--ink);
    text-decoration: none;
    min-height: 44px;
  }

  .nav-menu li a:hover {
    background: var(--cream);
  }
}

.hero {
  position: relative;
  overflow: hidden;
}

.hero > .wrap {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Feature-opener hero. The photograph is a plate, printed full width and left
   alone; the headline is set beneath it in the body serif. Nothing overlaps, so
   legibility does not depend on what the photograph happens to show.
   Replaces the translucent-scrim treatment, 2026-09-04. */
.hero.has-banner {
  padding-block-start: 0;
  min-height: 0;
}

.hero-plate {
  margin: 0;
  line-height: 0;
}

.hero-plate img {
  width: 100%;
  height: clamp(240px, 40vw, 540px);
  object-fit: cover;
  object-position: 50% 34%;
  display: block;
}


/* The headline block overlaps the foot of the plate, so the photograph is
   interrupted rather than captioned. It carries the section's own background,
   which is what makes it read as one surface with the argument below.
   After The New Atlantis, whose feature openers do the same in white. */
.hero-card {
  position: relative;
  z-index: 1;
  max-width: min(70vw, 1013px);
  margin: clamp(-5rem, -6vw, -2.2rem) auto 0;
  padding: clamp(1.8rem, 3.4vw, 3rem) clamp(1.2rem, 3vw, 2.5rem);
  background: var(--section-bg);
}

.hero-masthead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.55rem, 3.4vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -.008em;
  text-align: center;
  margin-block: 0;
  text-wrap: balance;
}

@media (max-width: 767px) {
  /* Full-bleed card on a phone: 70vw leaves useless slivers of photograph
     either side. Placed after the base rule, not in the :root media block,
     because both are (0,1,0) and source order decides. */
  .hero-card {
    max-width: 100%;
    padding-inline: var(--gutter);
  }

  .hero-masthead {
    font-size: 1.45rem;
    line-height: 1.2;
  }
}

.ballot-quote {
  margin: 0;
  padding: 1.2rem 1.4rem;
  background: var(--section-bg);
  border: 1px solid var(--section-rule-strong);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  font-size: .95rem;
  max-width: var(--measure-prose);
}

.ballot-quote p {
  margin-bottom: .8em;
  max-width: none;
}

.ballot-quote p:last-child {
  margin-bottom: 0;
}

.ballot-title, .ballot-q {
  font-family: var(--font-button);
  font-weight: var(--weight-button);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ballot-title {
  font-size: var(--fs-meta);
  color: var(--section-muted);
  margin-bottom: 1rem;
}

.ballot-q {
  font-size: var(--fs-small);
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--section-rule-strong);
}

.ballot-title + .ballot-q {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.ballot-project {
  padding-left: .9rem;
  border-left: 2px solid var(--section-rule);
}

.ballot-yesno {
  font-family: var(--font-button);
  font-weight: var(--weight-button);
  letter-spacing: .3em;
}

.two-col {
  display: grid;
  gap: 1.5rem 3rem;
  margin-block: 1.6rem;
}

/* Shared panel chrome: gold top rule, hairline border, section ground.
   The data tables and the two-column tax comparison read as the same kind
   of object, so they carry the same frame. */
.table-wrap,
.two-col {
  padding: 1rem;
  background: var(--section-bg);
  border: 1px solid var(--section-rule);
  border-top: 3px solid var(--gold);
}

@media (min-width: 720px) {
  .two-col {
    grid-template-columns: 1fr 1fr;
  }
}

.two-col h4 {
  margin-top: 0;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--gold);
}

.two-col ul {
  padding-left: 1.2rem;
}

.two-col li {
  margin-bottom: .6rem;
}

.table-wrap {
  overscroll-behavior-x: contain;
  overflow-x: auto;
  /* margin-BLOCK only. A `margin` shorthand here also sets margin-inline:0,
     which outranks the :where() centring rule below and left-pins the table. */
  margin-block: 1.6rem;
}

table.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  min-width: 34rem;
  font-variant-numeric: tabular-nums lining-nums;
}

table.compare:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: 3px;
}

table.compare caption {
  text-align: left;
  font-size: var(--fs-small);
  color: var(--section-muted);
  margin-bottom: .5rem;
}

table.compare th, table.compare td {
  padding: .7rem .75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--section-rule-strong);
}

table.compare thead th {
  font-family: var(--font-button);
  font-weight: var(--weight-button);
  font-size: var(--fs-meta);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--section-muted);
}

table.compare th[scope="row"] {
  font-weight: 700;
}

.plan-comparison-table th:first-child {
  width: 25%;
}

.plan-comparison-table th:not(:first-child), .plan-comparison-table td {
  text-align: center;
}

.plan-comparison-subuses {
  display: block;
  margin-top: .25rem;
  color: var(--section-muted);
  font-family: var(--font-heading);
  font-size: .8rem;
  font-weight: 400;
  line-height: 1.35;
}

.table-note {
  margin: .6rem 0 0;
  color: var(--section-muted);
  font-size: var(--fs-small);
}

@media (max-width: 767px) {
  .table-wrap {
    overflow-x: visible;
    padding: 1rem;
    margin-inline: calc(-1 * var(--gutter));
    border-left: 0;
    border-right: 0;
  }

  table.compare {
    min-width: 0;
  }

  table.compare, table.compare caption, table.compare tbody, table.compare tr,
  table.compare th, table.compare td {
    display: block;
    width: 100%;
  }

  table.compare thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }

  table.compare tbody tr {
    margin: 0 0 1.3rem;
    padding-top: .7rem;
    border-top: 2px solid var(--section-rule-strong);
  }

  table.compare th[scope="row"] {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    padding: 0 0 .5rem;
    border-bottom: 0;
  }

  table.compare td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--section-rule);
    text-align: right;
  }

  table.compare td::before {
    content: attr(data-label);
    font-family: var(--font-button);
    font-size: var(--fs-meta);
    font-weight: var(--weight-button);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--section-muted);
    text-align: left;
    flex: 0 0 auto;
  }

  .plan-comparison-table th:not(:first-child), .plan-comparison-table td {
    text-align: right;
  }
}

.faq-item {
  border-bottom: 1px solid var(--section-rule);
  max-width: var(--measure-prose);
}

.faq-item:first-of-type {
  border-top: 1px solid var(--section-rule);
}

.faq-item summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  line-height: 1.4;
  padding: 1.15rem 2.5rem 1.15rem 0;
}

.faq-item summary:focus-visible {
  outline: var(--focus-w) solid var(--section-label);
  outline-offset: -3px;
  border-radius: var(--radius);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+" / "";
  position: absolute;
  right: .25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold-text);
  font-size: 1.25rem;
  line-height: 1;
}

.faq-item[open] summary::after {
  content: "−" / "";
}

.faq-item p {
  margin: 0 0 1.3rem;
  /* Offset the answer from its question: the measured gap was 0px, so the
     answer read as a continuation of the summary rather than a reply to it. */
  padding-left: 1.1rem;
  border-left: 2px solid var(--section-rule);
}

.faq-item p:first-of-type {
  margin-top: 1rem;
}

.faq-item p:last-of-type {
  margin-bottom: 1.6rem;
}

/* ---------------------------------------------------------------------------
   County open house meetings (added 2026-09-15).
   Deliberately the same object as .faq-item: prose measure, hairline rules
   between rows, section-rule colour. A 19-row schedule and a 6-row FAQ are the
   same kind of list to a reader, so they should not introduce two list styles.
   .is-past is applied by script (see index.html) once a meeting's day has
   ended; it uses --section-muted, which check-contrast.py already asserts at
   4.5:1 against --section-bg in every theme, so it adds no unverified pair.
   --------------------------------------------------------------------------- */
.meeting-list {
  max-width: var(--measure-prose);
  margin-bottom: 1.6rem;
  padding-left: 0;
  list-style: none;
}

.meeting-list li {
  padding: .75rem 0;
  border-bottom: 1px solid var(--section-rule);
}

.meeting-list li:first-child {
  border-top: 1px solid var(--section-rule);
}

/* Struck through AND muted: colour alone is not a sufficient signal, and the
   line-through survives a high-contrast or forced-colours mode that drops the
   muted token. */
.meeting-list li.is-past {
  color: var(--section-muted);
  text-decoration: line-through;
}

.stub {
  max-width: var(--measure-prose);
  padding: 1rem 1.2rem;
  border: 2px dashed var(--gold-text);
  border-radius: var(--radius);
  background: var(--section-inset-bg);
  color: var(--ink);
}

.stub-label {
  font-family: var(--font-button);
  font-weight: var(--weight-button);
  font-size: var(--fs-meta);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: .4rem;
}

.stub p {
  margin-bottom: .4em;
}

.stub p:last-child {
  margin-bottom: 0;
}

.photo {
  margin: 2rem 0;
}

.photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.photo figcaption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem 0 0;
  font-size: var(--fs-meta);
  color: var(--section-muted);
}

.photo-credit {
  white-space: nowrap;
}

.hero .photo-credit {
  position: absolute;
  right: var(--gutter);
  bottom: .6rem;
  z-index: 2;
  font-size: var(--fs-meta);
  color: var(--white);
  background: var(--overlay-credit);
  padding: .2rem .5rem;
  border-radius: var(--radius);
}

.site-foot {
  padding-block: var(--pad-section);
  text-align: center;
  font-size: var(--fs-small);
}

.site-foot h2 {
  font-size: var(--fs-h3);
  font-size: var(--fs-h4);
  margin-bottom: .6rem;
}

.site-foot p {
  margin-inline: auto;
}

.site-foot .foot-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem 1.4rem;
  margin: 1.2rem 0;
  padding-block: .75rem;
  border-top: 1px solid var(--section-rule);
  border-bottom: 1px solid var(--section-rule);
}

.site-foot .foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: .5rem;
  color: var(--section-link);
}

.site-foot .disclosure {
  font-size: var(--fs-meta);
  color: var(--section-muted);
}

/* Shared changelog: the same reading width and typography as the site. */
.changelog-content {
  max-width: var(--measure-prose);
  margin-inline: auto;
}

.changelog-entry {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--section-rule);
}

.changelog-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-button);
  font-size: var(--fs-small);
}

/* ---------------------------------------------------------------------------
   Section media.
   The prose column is ~580px inside a 1200px container, so every text section
   left an empty right half. Images go there rather than interrupting the read.
   Single column below 1000px, where the menu breakpoint already sits.
   --------------------------------------------------------------------------- */
.section-figure {
  /* margin-block only: see the note on .table-wrap. Both sides: with 0 bottom
     the gap to a following <p> measured 0px, because the page-scoped reset
     zeroes p's top margin. Adjacent-sibling margins collapse, so a following
     h3 still gets one 2rem gap rather than two stacked. */
  margin-block: 2rem;
}

.section-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media (min-width: 1000px) {
  /* Figures break out wider than the prose and stay centred, rather than
     floating. Matches thenewatlantis.com: prose 672, figures 874, both centred. */
  .section--media .section-figure {
    max-width: var(--measure-wide);
    margin-inline: auto;
  }
}

/* A section carrying a data table cannot also give up half its width to an
   image -- the table gets squeezed. Those sections take a full-width figure. */
.section-figure--wide {
  max-width: none;
  margin-block: 2.5rem;
}



/* ---------------------------------------------------------------------------
   Centred measure.
   Left-aligning a 672px column inside a 1080px container puts all the slack on
   one side, which reads as unused space. Centring splits it and reads as
   deliberate. Wide elements break out, also centred.
   --------------------------------------------------------------------------- */
.wrap > h2,
.wrap > h3,
.wrap > h4,
.wrap > p,
.wrap > ul,
.wrap > ol,
.wrap > .lead,
.wrap > .eyebrow,
.wrap > .ballot-quote,
.wrap > .faq-item,
.wrap > .btn {
  margin-inline: auto;
}

:where(.wrap) > :where(.table-wrap, table, .section-figure, .two-col) {
  max-width: var(--measure-wide);
  margin-inline: auto;
}

.hero > .wrap > * {
  margin-inline: auto;
}


/* Headings sit on the prose column, not the container, so the left edge of a
   heading and the left edge of its paragraph agree. Both reference sites do
   this; ours were spanning 994px against 720px of prose. */
.wrap > h1,
.wrap > h2,
.wrap > h3,
.wrap > h4 {
  max-width: var(--measure-prose);
}

/* ---------------------------------------------------------------------------
   Contact page.
   Same reading width and typography as the changelog: a centred prose column
   inside the page's .wrap. Inputs get a fixed white surface and the
   role-token border/focus colours so the form reads correctly regardless of
   the section theme it is placed in.
   --------------------------------------------------------------------------- */
.contact-content {
  max-width: var(--measure-prose);
  margin-inline: auto;
}

.contact-content form {
  margin-top: 2rem;
}

.field {
  margin-bottom: 1.5rem;
}

.field label {
  display: block;
  font-family: var(--font-button);
  font-weight: var(--weight-button);
  font-size: var(--fs-small);
  letter-spacing: .02em;
  margin-bottom: .4rem;
}

.field input[type="text"],
.field input[type="email"],
.field textarea {
  display: block;
  width: 100%;
  padding: .75rem .9rem;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
}

.field textarea {
  resize: vertical;
  min-height: 8rem;
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--error);
}

.field-error {
  margin-top: .4rem;
  margin-bottom: 0;
  font-size: var(--fs-small);
  color: var(--error);
}

/* Honeypot. Off-screen for sighted users; aria-hidden on the wrapping div
   (in the HTML) and this positioning both keep it out of a human's way. A
   bot that fills every input in the DOM without rendering CSS still finds
   and fills it, which is the point. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cf-turnstile {
  margin-bottom: .5rem;
}

.form-status {
  margin-top: 1rem;
  margin-bottom: 0;
  font-weight: 700;
}