/* ==========================================================================
   FWCA site styles

   Reading guide (the file is in this order):
   1.  Reset + page basics
   2.  Fluid type overrides      — makes headline sizes shrink on phones
   3.  Layout helpers            — .wrap, .section, .grid
   4.  Header / nav
   5.  Footer
   6.  Buttons
   7.  Text + headings
   8.  Components                — cards, stats, callouts, tables, timeline
   9.  Forms
   10. Utilities
   11. Print + reduced motion

   Every color here is a var(--color-*) from tokens.css. If you want to
   recolor the site, edit tokens.css, not this file.
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. Reset + page basics
   ------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-body-md);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--color-link);
  text-underline-offset: 2px;
}
a:hover { color: var(--color-link-hover); }

/* One consistent focus ring everywhere, so keyboard users can always see
   where they are. */
:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Lets a keyboard user jump straight past the nav. Hidden until focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--color-primary);
  color: var(--color-text-on-brand);
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--radius-sm) 0;
  font-family: var(--font-display);
  font-weight: 800;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* -------------------------------------------------------------------------
   2. Fluid type
   clamp(minimum, preferred, maximum) — the browser picks the middle value
   but never goes below the first or above the last. 'vw' is 1% of the
   window width, so the headline scales with the window.
   ------------------------------------------------------------------------- */

:root {
  --text-display-xl: clamp(38px, 6.2vw, 64px);
  --text-display-lg: clamp(32px, 4.8vw, 48px);
  --text-display-md: clamp(27px, 3.6vw, 36px);
  --text-heading-lg: clamp(22px, 2.6vw, 28px);
}

/* -------------------------------------------------------------------------
   3. Layout helpers
   ------------------------------------------------------------------------- */

.wrap {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.section { padding-block: var(--space-20); }
.section--tight { padding-block: var(--space-12); }
.section--flush-top { padding-top: 0; }

/* A band of contrasting background that runs the full window width.
   The page itself is white, so a band is the barely-tinted one. Reverse
   the two values in tokens.css to go back to a cream page with white bands. */
.band { background: var(--color-band); border-block: 1px solid var(--color-border); }
.band--brand { background: var(--color-surface-brand); border-color: transparent; }
.band--deep {
  background: var(--fwca-pool-900);
  color: var(--fwca-shore-50);
  border-color: transparent;
}
.band--deep h2,
.band--deep h3 { color: var(--fwca-white); }
.band--deep p  { color: var(--fwca-shore-300); }
.band--deep a  { color: var(--fwca-pool-200); }
.band--deep a:hover { color: var(--fwca-white); }

/* Two- and three-column grids that collapse to one column on narrow screens.
   'minmax(min(100%, 320px), 1fr)' means: each column is at least 320px wide,
   but never wider than the container — which is what makes it wrap on a
   phone without a media query. */
.grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid--tight { gap: var(--space-5); }

/* A deliberate two-column split for hero-style rows. */
.split {
  display: grid;
  gap: var(--space-12);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .split { grid-template-columns: 1.05fr 1fr; }
  .split--even { grid-template-columns: 1fr 1fr; }
  .split--reverse > :first-child { order: 2; }
}

.prose { max-width: var(--content-max); }
.prose p + p { margin-top: var(--space-5); }
.prose > * + h3 { margin-top: var(--space-10); }
.prose ul, .prose ol { padding-left: var(--space-6); }
.prose li + li { margin-top: var(--space-2); }

/* -------------------------------------------------------------------------
   4. Header / nav
   ------------------------------------------------------------------------- */

.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-block: var(--space-3);
  flex-wrap: wrap;
}

.lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex: none;
}
.lockup__mark { width: 40px; height: 40px; flex: none; }
.lockup__line1 { color: var(--fwca-pool-800); }
.lockup__line2 { color: var(--fwca-pool-600); }
[data-theme="dark"] .lockup__line1 { color: var(--fwca-white); }
[data-theme="dark"] .lockup__line2 { color: var(--fwca-pool-300); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lockup__line1 { color: var(--fwca-white); }
  :root:not([data-theme="light"]) .lockup__line2 { color: var(--fwca-pool-300); }
}

/* The nav scrolls sideways on a phone instead of collapsing into a
   hamburger menu. Five links fit; no JavaScript needed, so it can never
   break. */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100%;
}
.site-nav::-webkit-scrollbar { display: none; }

.site-nav a {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-text-2);
  white-space: nowrap;
}
.site-nav a:hover { background: var(--color-surface-2); color: var(--color-text); }

/* aria-current="page" is set in the HTML on the link for the page you're on.
   Styling from that attribute means the highlight and the screen-reader
   announcement can never disagree. */
.site-nav a[aria-current="page"] {
  color: var(--color-text-brand);
  background: var(--color-primary-soft);
}

.theme-toggle {
  flex: none;
  background: transparent;
  border: 1.5px solid var(--color-border-strong);
  color: var(--color-text-2);
  border-radius: var(--radius-sm);
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.theme-toggle:hover { background: var(--color-surface-2); color: var(--color-text); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun  { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
}
/* Without JavaScript the toggle does nothing, so hide it. The class is
   removed by site.js the moment it runs. */
.no-js .theme-toggle { display: none; }

/* On a phone there isn't room for logo + five links + toggle on one line.
   Rather than a hamburger menu (which needs JavaScript and hides the links),
   the toggle stays up beside the logo and the nav drops to its own full-width
   row that scrolls sideways. The negative margin lets that row bleed to the
   screen edges, so it reads as a scrollable strip rather than a clipped list. */
@media (max-width: 719px) {
  .site-header__inner {
    gap: var(--space-3);
    padding-block: var(--space-3) 0;
  }
  .lockup { flex: 1 1 auto; font-size: 14px; }
  .lockup__mark { width: 34px; height: 34px; }
  .theme-toggle { order: 1; }
  .site-nav {
    order: 2;
    flex: 1 0 100%;
    margin-left: 0;
    margin-inline: calc(var(--space-6) * -1);
    padding: var(--space-1) var(--space-6) var(--space-3);
    scroll-padding-inline: var(--space-6);
  }
}

/* -------------------------------------------------------------------------
   5. Footer
   ------------------------------------------------------------------------- */

.site-footer {
  background: var(--fwca-pool-950);
  color: var(--fwca-shore-300);
  margin-top: var(--space-24);
  font-size: var(--text-body-sm);
}
.site-footer__inner {
  display: grid;
  gap: var(--space-10);
  padding-block: var(--space-12);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.site-footer__inner > :first-child { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .site-footer__inner { grid-template-columns: 2fr 1fr 1fr; }
  .site-footer__inner > :first-child { grid-column: auto; }
}
.site-footer a { color: var(--fwca-white); text-decoration: none; }
.site-footer a:hover { color: var(--fwca-pool-200); text-decoration: underline; }
.site-footer h2 {
  font-family: var(--font-utility);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fwca-pool-300);
  margin: 0 0 var(--space-3);
  font-weight: var(--weight-utility);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { padding-block: var(--space-1); }
.site-footer__bar { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.site-footer__bar p {
  padding-block: var(--space-4);
  font-family: var(--font-utility);
  font-size: var(--text-caption);
  margin: 0;
}
.site-footer .lockup__line1 { color: var(--fwca-white); }
.site-footer .lockup__line2 { color: var(--fwca-pool-200); }

/* -------------------------------------------------------------------------
   6. Buttons
   ------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  padding: 13px 20px;
  min-height: 46px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.btn:active { transform: scale(0.98); }

.btn--primary { background: var(--color-primary); color: var(--color-text-on-brand); }
.btn--primary:hover { background: var(--color-primary-hover); color: var(--color-text-on-brand); }

.btn--accent { background: var(--color-accent); color: var(--color-text-on-accent); }
.btn--accent:hover { background: var(--color-accent-hover); color: var(--color-text-on-accent); }

.btn--secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.btn--secondary:hover { background: var(--color-surface-2); color: var(--color-text); }

.band--deep .btn--secondary { color: var(--fwca-white); border-color: rgba(255,255,255,0.35); }
.band--deep .btn--secondary:hover { background: rgba(255,255,255,0.1); color: var(--fwca-white); }

.btn--lg { font-size: 17px; padding: 16px 26px; min-height: 54px; }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

/* -------------------------------------------------------------------------
   7. Text + headings
   ------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  margin: 0;
  text-wrap: balance;
}

.h-hero {
  font-size: var(--text-display-xl);
  line-height: var(--leading-display-xl);
  letter-spacing: var(--tracking-display-xl);
  color: var(--fwca-pool-800);
}
[data-theme="dark"] .h-hero { color: var(--fwca-white); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .h-hero { color: var(--fwca-white); }
}

.h-page {
  font-size: var(--text-display-lg);
  line-height: var(--leading-display-lg);
  letter-spacing: var(--tracking-display-lg);
}
.h-section {
  font-size: var(--text-display-md);
  line-height: var(--leading-display-md);
  letter-spacing: var(--tracking-display-md);
}
.h-sub {
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
}
.h-card {
  font-size: var(--text-heading-md);
  line-height: var(--leading-heading-md);
}

/* The small uppercase label that sits above a heading. */
.eyebrow {
  font-family: var(--font-utility);
  font-weight: var(--weight-utility);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-brand);
  margin: 0 0 var(--space-3);
}
.band--deep .eyebrow { color: var(--fwca-pool-300); }

p { margin: 0; }

.lede {
  font-size: var(--text-body-lg);
  line-height: 1.6;
  color: var(--color-text-2);
  margin-top: var(--space-5);
}
.h-section + .lede,
.h-page + .lede { margin-top: var(--space-5); }

.meta {
  font-family: var(--font-utility);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
   8. Components
   ------------------------------------------------------------------------- */

/* --- card --- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.card--brand {
  background: var(--color-surface-brand);
  border-color: transparent;
  box-shadow: none;
}
.card--plain { background: transparent; border: none; box-shadow: none; padding: 0; }
.card p { color: var(--color-text-2); }
.card .btn-row { margin-top: auto; padding-top: var(--space-3); }

/* --- stat band --- */
.stats {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.stat__figure {
  font-family: var(--font-utility);
  font-weight: var(--weight-utility);
  font-size: clamp(34px, 4vw, 44px);
  line-height: 1;
  color: var(--color-text-brand);
}
.band--deep .stat__figure { color: var(--fwca-pool-300); }
.stat__label {
  margin-top: var(--space-3);
  color: var(--color-text-2);
  max-width: 32ch;
}
.band--deep .stat__label { color: var(--fwca-shore-300); }
.stat__source {
  margin-top: var(--space-2);
  font-family: var(--font-utility);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

/* --- callout --- */
.callout {
  border-left: 4px solid var(--color-primary);
  background: var(--color-surface-brand);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-6);
}
.callout > * + * { margin-top: var(--space-3); }
.callout--urgent {
  border-left-color: var(--color-warning);
  background: var(--color-warning-soft);
}
.callout--urgent .callout__title { color: var(--color-warning-text); }
.callout--note {
  border-left-color: var(--color-border-strong);
  background: var(--color-surface-2);
}
.callout__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-heading-sm);
  color: var(--color-text);
}
.callout p { color: var(--color-text-2); }

/* --- pill / badge --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-utility);
  font-size: var(--text-caption);
  font-weight: var(--weight-utility);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  color: var(--color-text-2);
  border: 1px solid var(--color-border);
}
/* sun-800 rather than the kit's sun-700: on the sun-100 background, sun-700
   measures 4.2:1, just under the AA minimum. sun-800 gives 6.7:1. */
.badge--now { background: var(--fwca-sun-100); color: var(--fwca-sun-800); border-color: transparent; }
[data-theme="dark"] .badge--now { background: var(--fwca-sun-900); color: var(--fwca-sun-200); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge--now { background: var(--fwca-sun-900); color: var(--fwca-sun-200); }
}
.badge--done { background: var(--color-success-soft); color: var(--color-success-text); border-color: transparent; }

/* --- table --- */
.table-scroll { overflow-x: auto; margin-top: var(--space-8); }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-sm);
  min-width: 620px;
}
caption {
  text-align: left;
  color: var(--color-text-muted);
  font-family: var(--font-utility);
  font-size: var(--text-caption);
  padding-bottom: var(--space-3);
}
th, td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
thead th {
  font-family: var(--font-utility);
  font-weight: var(--weight-utility);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom-color: var(--color-border-strong);
}
tbody th {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-body-md);
}
td { color: var(--color-text-2); }

/* --- timeline --- */
.timeline { list-style: none; margin: var(--space-8) 0 0; padding: 0; position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--color-border-strong);
}
.timeline li { position: relative; padding-left: var(--space-8); }
.timeline li + li { margin-top: var(--space-8); }
.timeline li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 3px solid var(--color-border-strong);
}
.timeline li[data-state="done"]::before { border-color: var(--color-primary); background: var(--color-primary); }
.timeline li[data-state="now"]::before  { border-color: var(--color-accent); background: var(--color-accent); }
.timeline__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.timeline__when {
  font-family: var(--font-utility);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}
.timeline p { color: var(--color-text-2); margin-top: var(--space-2); max-width: 60ch; }

/* --- numbered steps --- */
.steps { list-style: none; counter-reset: step; margin: var(--space-8) 0 0; padding: 0; }
.steps li { position: relative; padding-left: var(--space-12); }
.steps li + li { margin-top: var(--space-6); }
.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-text-brand);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  display: grid;
  place-items: center;
}

/* --- figure placeholder ---
   Stands in for a photograph until you have real ones. Replace the whole
   <div class="photo"> with an <img> when you do.

   Kept deliberately neutral — a dashed gray frame, not a solid teal block.
   A big field of brand teal sitting next to the logo competes with it for
   attention, and these are placeholders for content that doesn't exist yet;
   they shouldn't be the loudest thing on the page. The dashed edge also
   reads unmistakably as "not finished," which is the point. */
.photo {
  background: var(--color-surface-2);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: flex-end;
  padding: var(--space-4);
  font-family: var(--font-utility);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}
/* On the deep teal bands, a light gray box would punch a hole in the
   section, so the placeholder goes translucent instead. */
.band--deep .photo {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--fwca-shore-300);
}
/* In dark mode the placeholder sits on Pool 800, where the muted gray only
   reaches 4.1:1. One step lighter clears the 4.5:1 minimum. */
[data-theme="dark"] .photo { color: var(--fwca-shore-300); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .photo { color: var(--fwca-shore-300); }
}

/* --- real photographs ---
   What replaces .photo once an actual image exists. Three things are doing
   work here, and all three are easy to leave out by accident:

   1. The width and height attributes on the <img>, plus aspect-ratio below,
      let the browser reserve exactly the right space before the file has
      downloaded. Without them the text below jumps down the page as each
      image pops in, which is the single most irritating thing a slow
      connection can do to a reader.
   2. object-fit: cover lets one file fill a slightly different box shape
      without stretching anybody sideways. It crops rather than squashes.
   3. The <picture> element in the HTML offers a WebP first and a JPEG
      second. The browser takes the first one it understands — roughly
      everything made since 2020 takes the WebP, which is about a third
      smaller. We don't have to detect anything. */

.figure { margin: 0; }

.figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);   /* holds the space while loading */
}

.figure--tall img  { aspect-ratio: 4 / 5;  object-fit: cover; }
.figure--wide img  { aspect-ratio: 16 / 9; object-fit: cover; }
/* 3:2 is what most cameras shoot. Using it means no crop at all on photos
   whose composition needs the full frame. */
.figure--photo img { aspect-ratio: 3 / 2;  object-fit: cover; }

.figure figcaption {
  margin-top: var(--space-3);
  font-family: var(--font-utility);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-text-muted);
}
.figure figcaption a { color: inherit; }

/* On the deep teal bands the normal muted gray would be unreadable. */
.band--deep .figure figcaption { color: var(--fwca-shore-400); }
.photo--tall { aspect-ratio: 4 / 5; }
.photo--wide { aspect-ratio: 16 / 9; }

/* --- source list --- */
.sources { font-size: var(--text-body-sm); }
.sources ol { padding-left: var(--space-6); color: var(--color-text-2); }
.sources li + li { margin-top: var(--space-3); }
.sources a { word-break: break-word; }

/* -------------------------------------------------------------------------
   9. Forms
   ------------------------------------------------------------------------- */

.form { display: grid; gap: var(--space-5); }
.form fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin: 0;
}
.form legend {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-heading-sm);
  padding-inline: var(--space-2);
}
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field > span { font-weight: var(--weight-body-strong); font-size: var(--text-body-sm); }
.field__hint { font-size: var(--text-caption); color: var(--color-text-muted); font-weight: 400; }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  min-height: 46px;
  width: 100%;
}
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus-ring) 35%, transparent);
}

.field-row {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.check-list { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  line-height: 1.45;
}
.check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--color-primary); }

/* Anti-spam: a field only a bot will fill in. Hidden from people and from
   screen readers; if it arrives filled, the submission is spam. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   10. Utilities
   ------------------------------------------------------------------------- */

.center { text-align: center; }
.center .lede, .center .prose { margin-inline: auto; }
.stack > * + * { margin-top: var(--space-5); }
.stack-lg > * + * { margin-top: var(--space-10); }
.mt-0 { margin-top: 0; }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.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;
}
hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-block: var(--space-12);
}

/* Bracketed text marks a spot where the committee still needs to supply a
   real name, number or date. Search the HTML for "[" to find them all. */
.todo {
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  font-family: var(--font-utility);
  font-size: 0.9em;
}

/* -------------------------------------------------------------------------
   11. Print + reduced motion
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header, .site-footer, .btn-row, .theme-toggle, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .band, .band--deep, .band--brand { background: #fff !important; color: #000 !important; }
  a::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
  .section { padding-block: var(--space-8); }
}