/* NETechConnect site styles. Mobile first (360 px and up), WCAG AA contrast in both themes,
   visible keyboard focus, no external fonts or images. */

/* Self-hosted fonts (T150, research R15): Latin subsets from Fontsource 5.3.0, SIL OFL 1.1
   (licenses in /fonts/), trimmed to the weights this stylesheet uses (T138, web/fonts/README.md):
   Archivo 500-800 and Inter 400-700, both variable; the two are preloaded in base.html. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/fonts/archivo-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/inter-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* Design direction B (T151, research R15): cream, scarlet and black; a dark header band. */
:root {
  /* Husker-inspired: scarlet, black, and cream. */
  --bg: #f7f3ea;
  --surface: #fffdf8;
  --surface-2: #efe9dd;
  --ink: #141414;
  --muted: #4d4a45;
  --line: #ddd5c6;
  --brand-red: #d00000;
  --brand-black: #141414;
  --link: #a30000;
  --accent: #b00000;
  --accent-bg: #f6e3df;
  --tag-ink: #a30000;
  --button: #d00000;
  --button-ink: #ffffff;
  --bad: #8f1d1d;
  --bad-bg: #f8e1de;
  --warn: #6e4b00;
  --warn-bg: #fbefd2;
  --focus: #141414;
  /* The header band and hero are dark in both themes. */
  --band-bg: #121110;
  --band-line: #36322d;
  --band-ink: #f2eee6;
  --band-muted: #d9d2c6;
  --band-quiet: #b5ada1;
  --band-current: #24211e;
  --band-red: #ff5c5c;
  /* Type scale */
  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.625rem;
  --step-3: clamp(1.75rem, 3.5vw, 2.25rem);
  --step-hero: clamp(2.4rem, 6.5vw, 4.25rem);
  --radius: 8px;
  --radius-lg: 14px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121110;
    --surface: #1c1a18;
    --surface-2: #24211e;
    --ink: #f2eee6;
    --muted: #b5ada1;
    --line: #36322d;
    --brand-red: #ff5c5c;
    --brand-black: #f2eee6;
    --link: #ff8a8a;
    --accent: #ff7a7a;
    --accent-bg: #3a1d1b;
    --tag-ink: #ffb3ad;
    --button: #ff5c5c;
    --button-ink: #121110;
    --bad: #f1a299;
    --bad-bg: #3b1d19;
    --warn: #f0c374;
    --warn-bg: #3a2e17;
    --focus: #f2eee6;
    --band-bg: #0b0a09;
    color-scheme: dark;
  }
}

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

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

/* `hidden` always wins over a component's own display (the legend, the filter bar). */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: var(--step-0)/1.6 var(--font-text);
}
/* The footer stays at the bottom of short pages. */
main { flex: 1 0 auto; }

.wrap {
  max-width: 75rem;
  margin: 0 auto;
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}
@media (min-width: 600px) {
  .wrap { padding-left: max(1.5rem, env(safe-area-inset-left)); padding-right: max(1.5rem, env(safe-area-inset-right)); }
}

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

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--focus);
  border-radius: var(--radius);
  z-index: 10;
}
.skip-link:focus { top: 0.5rem; }

h1, h2, h3 { font-family: var(--font-display); }
h1 { font-size: var(--step-3); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin: 0.5rem 0 0.75rem; text-wrap: balance; }
h2 { font-size: var(--step-2); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
h3 { font-size: var(--step-1); font-weight: 700; line-height: 1.25; text-wrap: balance; }
.lede { color: var(--muted); font-size: 1.1rem; max-width: 46ch; margin: 0 0 1.5rem; }
.prose { max-width: 44rem; }
/* Long addresses (the GitHub link, the bot's user agent) wrap rather than widen a phone screen. */
.prose a, .prose code { overflow-wrap: anywhere; }

/* Header: the dark band */
.site-header {
  --focus: var(--band-ink);
  background: var(--band-bg);
  color: var(--band-ink);
  border-bottom: 1px solid var(--band-line);
}
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 0.9rem;
}
.brand { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--band-ink); text-decoration: none; letter-spacing: -0.02em; }
.brand-ne { color: var(--band-red); }
.nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.nav a {
  display: inline-block;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius);
  color: var(--band-muted);
  font-weight: 500;
  text-decoration: none;
}
.nav a:hover { color: var(--band-ink); text-decoration: underline; }
.nav a[aria-current="page"] { color: var(--band-ink); font-weight: 600; background: var(--band-current); }
/* The suggestion form (T132), outlined so visitors notice it without scrolling to the footer. */
.nav .nav-suggest { color: var(--band-ink); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--band-red); }
@media (max-width: 599px) {
  .header-inner { position: relative; }
  /* On phones the page links fill their row, so Suggest moves up beside the brand. It stays
     the menu's last link, so screen readers and keyboards meet it in the same place. */
  .nav-suggest-item {
    position: absolute;
    top: 0.9rem;
    right: max(1rem, env(safe-area-inset-right));
  }
  .nav a { padding-inline: 0.6rem; }
  .nav .nav-suggest { padding-block: 0.3rem; }
  /* "Suggest" on phones; screen readers still hear the whole name. */
  .nav-long {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.main-inner { padding-block: 2rem 4rem; }
main:focus { outline: none; }

/* Home hero: the band continues, with the header map (T153) behind the copy on wide screens
   and in its own row on narrower ones. The map is decoration; the text stands on its own. */
.home-hero {
  --focus: var(--band-ink);
  display: grid;
  background: var(--band-bg);
  color: var(--band-ink);
}
.home-hero-text { grid-row: 1; width: 100%; position: relative; padding-block: 2.5rem 1.5rem; display: flex; flex-direction: column; gap: 2rem; }
.hero-copy { max-width: 38rem; }
.eyebrow { margin: 0 0 1rem; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--band-quiet); }
.home-hero h1 { font-size: var(--step-hero); line-height: 1.02; letter-spacing: -0.03em; max-width: 13ch; margin: 0 0 1.25rem; }
.home-hero h1 .accent { color: var(--band-red); }
.home-hero .lede { color: var(--band-muted); font-size: clamp(1.05rem, 1.6vw, 1.2rem); margin-bottom: 1.5rem; }
.hero-cta {
  display: inline-block;
  padding: 0.8rem 1.25rem;
  border-radius: var(--radius);
  background: #d00000;
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
}
.hero-cta:hover { text-decoration: underline; }
.hero-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem; }
.counts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; }
.count { display: flex; flex-direction: column; }
.count-n { font-family: var(--font-display); font-weight: 800; font-size: 2.1rem; line-height: 1; }
.count-label { font-size: var(--step--1); color: var(--band-quiet); }
.legend { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; font-size: 0.8rem; color: var(--band-quiet); }
.legend li { display: flex; align-items: center; gap: 0.4rem; }
.legend-pin, .legend-town { display: inline-block; border-radius: 50%; }
.legend-pin { width: 10px; height: 10px; background: var(--band-red); }
.legend-town { width: 6px; height: 6px; background: var(--band-ink); }

.header-map { grid-row: 2; position: relative; height: 12rem; overflow: hidden; --map-align: center; }
/* Absolute, so the canvas's drawing size never feeds back into the band's height. */
.header-map > :not([hidden]) { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.header-map-still { object-fit: contain; }

@media (min-width: 600px) {
  .header-map { height: 18rem; }
}
@media (min-width: 1200px) {
  .home-hero { min-height: 37.5rem; }
  .home-hero > * { grid-area: 1 / 1; }
  .header-map { height: auto; --map-align: right; }
  .header-map-still { object-position: right center; }
  .home-hero-text { padding-block: 4.5rem 2.5rem; justify-content: space-between; }
}

/* Filters (T112-T113): area chips (checkboxes), a topic, a date range and a search box. The
   form stays hidden until filters.js runs; the status line announces how many events match. */
.filter-band { background: var(--surface); border-bottom: 1px solid var(--line); }
.filter-band .wrap { padding-block: 1rem; }
.filters { display: grid; gap: 0.75rem; }
.filters fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.chips legend { float: left; margin-right: 0.5rem; font-size: var(--step--1); color: var(--muted); }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center;
  font: 500 var(--step--1) var(--font-text);
  min-height: 2.75rem;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}
.chip input:checked + span { font-weight: 600; background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.filter-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; }
.field { display: grid; gap: 0.25rem; font-size: var(--step--1); color: var(--muted); }
.field-q { flex: 1 1 14rem; }
.filters select, .filters input[type="date"], .filters input[type="search"] {
  font: 500 var(--step--1) var(--font-text);
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  width: 100%;
}
/* Always outlined on focus: inside a date field, focus moves to its month, day and year parts. */
.filters select:focus, .filters input:focus, .filters input:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.filter-clear { align-self: center; padding-block: 0.6rem; font-weight: 600; }
.filter-status { margin: 0; font-size: var(--step--1); color: var(--muted); }
.filter-status:empty { display: none; }
.filters-nojs { margin: 0; font-size: var(--step--1); color: var(--muted); }
/* The suggestion form (T132). */
.suggest { display: grid; gap: 1.25rem; max-width: 40rem; margin-top: 1.5rem; }
.suggest .field { font-size: 1rem; color: var(--ink); font-weight: 600; }
.suggest input, .suggest textarea {
  font: 400 1rem var(--font-text);
  padding: 0.6rem 0.75rem;
  min-height: 2.75rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  width: 100%;
}
.suggest input:focus, .suggest textarea:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.suggest .hint, .suggest .optional { margin: 0; font-weight: 400; font-size: var(--step--1); color: var(--muted); }
.suggest .notice { margin: 0; font-size: var(--step--1); color: var(--muted); max-width: 60ch; }
.suggest p { margin: 0; }
.suggest button { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.suggest button:disabled { opacity: 0.6; cursor: progress; }
.suggest-status { font-weight: 600; }
.suggest-status:empty { display: none; }
main .filters, main .filters-nojs { margin-bottom: 0.75rem; }
main .filter-status { margin-bottom: 1rem; }

/* Event list: month groups of cards */
.months { display: grid; gap: 2.5rem; }
.month h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem; margin: 0 0 1rem; }
.month-count { font: 500 var(--step--1) var(--font-text); color: var(--muted); letter-spacing: 0; }
.events { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }

.event {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
}
.date-block {
  flex: 0 0 auto;
  width: 4.5rem;
  border-radius: 10px;
  background: #141414;
  color: #f7f3ea;
  text-align: center;
  padding: 0.55rem 0 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.db-month { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; }
.db-day { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; line-height: 1; }
.db-dow { font-size: 0.75rem; color: #d9d2c6; }
.event-body { flex: 1 1 22rem; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.event h3 { margin: 0; }
.event h3 a { color: var(--ink); text-decoration: none; }
.event h3 a:hover { text-decoration: underline; }
.event-meta { margin: 0; color: var(--muted); font-size: 0.95rem; overflow-wrap: anywhere; }
.event-meta time { font-variant-numeric: tabular-nums; }
.sep { margin-inline: 0.15rem; }

.tags { list-style: none; margin: 0.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tags li {
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--accent-bg);
  color: var(--tag-ink);
}

.cta { margin: 0; }
.event .cta { flex: 0 0 auto; }
.primary {
  display: inline-block;
  background: var(--button);
  color: var(--button-ink);
  font-weight: 600;
  text-decoration: none;
  padding: 0.75rem 1.1rem;
  border-radius: var(--radius);
  overflow-wrap: anywhere;
}
.primary::after { content: " →"; }
.primary:hover { text-decoration: underline; }

.badge {
  display: inline-block;
  align-self: flex-start;
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.1rem 0.6rem;
  border-radius: var(--radius);
}
.badge--cancelled { background: var(--bad-bg); color: var(--bad); }
.badge--unverified { background: var(--warn-bg); color: var(--warn); }
.event--cancelled h3 a { text-decoration: line-through; }

.empty {
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  padding: 2rem 1rem;
  text-align: center;
  color: var(--muted);
}

@media (max-width: 599px) {
  .event .cta, .event .primary { width: 100%; }
  .event .primary { text-align: center; }
}

/* Text for screen readers only. */
.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;
}

/* Calendar (T109): month grids and week lists, both plain tables; under 600 px the month
   becomes a stacked agenda of the days that have events. */
.cal-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem; margin-bottom: 1rem; }
.cal-head h1 { margin: 0; }
.cal-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-weight: 600; }
.cal-nav a { display: inline-block; padding-block: 0.4rem; }
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.25rem;
  margin-block: 2rem 0;
  font-weight: 600;
}
.pager a { display: inline-block; padding-block: 0.4rem; }
.pager-where { color: var(--muted); font-weight: 400; }
.cal { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); }
.cal caption { text-align: left; color: var(--muted); font-size: var(--step--1); padding-bottom: 0.5rem; caption-side: top; }
.cal th, .cal td { border: 1px solid var(--line); vertical-align: top; text-align: left; }
.cal thead th { font: 500 0.75rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 0.5rem; background: var(--surface-2); }
.cal abbr { text-decoration: none; }
.cal-month { table-layout: fixed; }
.cal-month td { height: 7rem; padding: 0.35rem 0.4rem; }
.cal-num { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.cal-month .cal-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cal-day.is-other-month { background: var(--bg); }
.cal-day.is-other-month .cal-num { color: var(--muted); font-weight: 500; }
.cal-day[aria-current="date"] { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-day[aria-current="date"] .cal-num { color: var(--accent); }
.cal-events { list-style: none; margin: 0.25rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.cal-event { font-size: 0.8rem; line-height: 1.3; overflow-wrap: anywhere; }
.cal-time { display: block; font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); }
/* Every link is at least 24 px tall, with room between them (WCAG 2.2 target size, 2.5.8). */
.cal-title, .cal-original { display: block; min-height: 24px; padding-block: 3px; }
.cal-title { color: var(--ink); font-weight: 600; text-decoration: none; }
.cal-title:hover { text-decoration: underline; }
.cal-original { font-size: 0.75rem; margin-top: 2px; }
.cal-event--cancelled .cal-title { text-decoration: line-through; }
.cal-flag { font-size: 0.7rem; font-weight: 700; color: var(--bad); }
.cal-week th[scope="row"] { width: 11rem; padding: 0.75rem; font-family: var(--font-display); font-weight: 700; background: var(--surface-2); }
.cal-week td { padding: 0.75rem; }
.cal-week .cal-event { font-size: 0.95rem; }
.cal-week .cal-time { font-size: 0.8rem; }
.cal-week .cal-original { font-size: 0.85rem; }
.cal-none { color: var(--muted); font-size: var(--step--1); }
.cal-weeks { margin-top: 1.5rem; }
.cal-weeks h2 { font-size: var(--step-1); margin: 0 0 0.5rem; }
.cal-weeks ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }

@media (max-width: 599px) {
  .cal-month, .cal-month tbody, .cal-month tr, .cal-month td { display: block; width: 100%; }
  .cal-month thead { display: none; }
  .cal-month caption { display: block; width: 100%; }
  .cal-month { border: 0; background: none; }
  .cal-month td { height: auto; border: 0; border-bottom: 1px solid var(--line); background: var(--surface); padding: 0.75rem; }
  .cal-month td.is-empty, .cal-month td.is-other-month, .cal-month td.is-filtered-empty { display: none; }
  .cal-month .cal-num { display: none; }
  .cal-month .cal-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; display: block; font-family: var(--font-display); font-weight: 700; }
  .cal-event { font-size: 0.95rem; }
  .cal-week th[scope="row"] { width: 6.5rem; }
}

/* Event detail */
.event-detail {
  max-width: 52rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}
.event-detail h1 { margin-top: 0.25rem; }
.when { margin: 0; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.facts { margin: 0 0 0.75rem; display: grid; gap: 0.25rem; }
.facts div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.5rem; }
.facts dt { color: var(--muted); font-size: 0.9rem; }
.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.event-detail .cta { margin-top: 1rem; }
.summary { max-width: 44rem; }
.also { padding-left: 1.2rem; }
.meta, .note { color: var(--muted); font-size: 0.9rem; }
@media (min-width: 600px) {
  .event, .event-detail { padding: 1.25rem 1.5rem; }
}

/* About */
code { font-size: 0.9em; background: var(--accent-bg); padding: 0.05rem 0.35rem; border-radius: 4px; overflow-wrap: anywhere; }

/* Footer */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--step--1); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; padding-block: 2rem; }
.footer-inner p { margin: 0 0 0.5rem; max-width: 60ch; }
.footer-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}