/* ==========================================================================
   Trans Health South Australia

   Theming
   -------
   Colour is driven entirely by light-dark() tokens below, which resolve
   against the `color-scheme` property. That means the theme switch is just:

       :root                    -> color-scheme: light dark   (follows system)
       :root[data-theme=light]  -> color-scheme: light        (forced light)
       :root[data-theme=dark]   -> color-scheme: dark         (forced dark)

   No duplicated palettes, and native form controls / scrollbars follow along.

   Every token declares its light value first as a plain fallback, so browsers
   without light-dark() (pre-2024) simply get the light theme rather than an
   unstyled page.
   ========================================================================== */

:root {
  color-scheme: light dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

:root {
  /* Trans flag — accent only, identical in both themes */
  --flag-blue: #5bcefa;
  --flag-pink: #f5a9b8;

  /* ---- Surfaces + text ---- */
  --bg: #fbfcfd;
  --bg: light-dark(#fbfcfd, #0e1419);
  --surface: #ffffff;
  --surface: light-dark(#ffffff, #161e26);
  --surface-alt: #f4f7f9;
  --surface-alt: light-dark(#f4f7f9, #1b242d);
  --text: #1d2731;
  --text: light-dark(#1d2731, #e6edf3);
  --text-muted: #5b6b7b;
  --text-muted: light-dark(#5b6b7b, #9fb0be);
  --border: #d9e0e7;
  --border: light-dark(#d9e0e7, #2a3742);
  --border-soft: #e9eef2;
  --border-soft: light-dark(#e9eef2, #222d36);

  /* ---- Accent ---- */
  --accent: #0d7ead;
  --accent: light-dark(#0d7ead, #6bc5e8);
  --accent-hover: #0b6a95;
  --accent-hover: light-dark(#0b6a95, #93d6f0);
  --accent-soft: #f1fafe;
  --accent-soft: light-dark(#f1fafe, #16303c);
  --on-accent: #ffffff;
  --on-accent: light-dark(#ffffff, #12181f);

  --pink: #c25a72;
  --pink: light-dark(#c25a72, #e8879f);
  --pink-hover: #a3475c;
  --pink-hover: light-dark(#a3475c, #f0a3b6);
  --on-pink: #ffffff;
  --on-pink: light-dark(#ffffff, #12181f);
  --pink-icon-bg: #fdeaef;
  --pink-icon-bg: light-dark(#fdeaef, #3a2028);
  --pink-icon-fg: #a3475c;
  --pink-icon-fg: light-dark(#a3475c, #f5a9b8);

  /* ---- Crisis strip ---- */
  --urgent-bg: #fff8f9;
  --urgent-bg: light-dark(#fff8f9, #2a1a20);
  --urgent-border: #f0c4ce;
  --urgent-border: light-dark(#f0c4ce, #4d2d38);
  --urgent-text: #8f3a4d;
  --urgent-text: light-dark(#8f3a4d, #f3b9c6);

  /* ---- Hero glow ---- */
  --hero-glow-1: rgba(91, 206, 250, 0.26);
  --hero-glow-1: light-dark(rgba(91, 206, 250, 0.26), rgba(91, 206, 250, 0.1));
  --hero-glow-2: rgba(245, 169, 184, 0.22);
  --hero-glow-2: light-dark(rgba(245, 169, 184, 0.22), rgba(245, 169, 184, 0.09));
  --accent-grad-from: #0d7ead;
  --accent-grad-from: light-dark(#0d7ead, #5bcefa);
  --accent-grad-to: #c25a72;
  --accent-grad-to: light-dark(#c25a72, #f5a9b8);

  /* ---- Directory feature panel ---- */
  --feature-from: #f1fafe;
  --feature-from: light-dark(#f1fafe, #16303c);
  --feature-to: #fef6f8;
  --feature-to: light-dark(#fef6f8, #2a1f26);

  /* ---- Dark CTA band ---- */
  --band-bg: #1d2731;
  --band-bg: light-dark(#1d2731, #1b242d);
  --band-border: #1d2731;
  --band-border: light-dark(#1d2731, #2a3742);
  --band-text: #ffffff;
  --band-text: light-dark(#ffffff, #e6edf3);
  --band-muted: rgba(255, 255, 255, 0.72);
  --band-muted: light-dark(rgba(255, 255, 255, 0.72), #9fb0be);
  --band-ghost-bg: rgba(255, 255, 255, 0.1);
  --band-ghost-bg: light-dark(rgba(255, 255, 255, 0.1), #161e26);
  --band-ghost-border: rgba(255, 255, 255, 0.25);
  --band-ghost-border: light-dark(rgba(255, 255, 255, 0.25), #2a3742);
  --band-ghost-hover: rgba(255, 255, 255, 0.18);
  --band-ghost-hover: light-dark(rgba(255, 255, 255, 0.18), #16303c);

  /* ---- Shadows (colour tokens, composed below) ---- */
  --sh-1: rgba(18, 24, 31, 0.05);
  --sh-1: light-dark(rgba(18, 24, 31, 0.05), rgba(0, 0, 0, 0.4));
  --sh-2: rgba(18, 24, 31, 0.06);
  --sh-2: light-dark(rgba(18, 24, 31, 0.06), rgba(0, 0, 0, 0.35));
  --sh-3: rgba(18, 24, 31, 0.1);
  --sh-3: light-dark(rgba(18, 24, 31, 0.1), rgba(0, 0, 0, 0.5));

  --shadow-sm: 0 1px 2px var(--sh-1), 0 1px 3px var(--sh-1);
  --shadow: 0 4px 12px var(--sh-2), 0 2px 4px var(--sh-1);
  --shadow-lg: 0 18px 40px var(--sh-3), 0 4px 12px var(--sh-2);

  /* ---- Type ---- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* ---- Space + shape ---- */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --wrap: 1160px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
}

/* ==========================================================================
   Base
   ========================================================================== */

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

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--text);
}

h1 {
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  letter-spacing: -0.035em;
}
h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
}
h3 {
  font-size: 1.15rem;
}

p {
  margin: 0 0 1.15em;
}

a {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  text-underline-offset: 0.18em;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover {
  color: var(--accent-hover);
  text-decoration-color: currentColor;
}

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

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

/* ==========================================================================
   Layout helpers
   ========================================================================== */

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

.section {
  padding-block: clamp(3.5rem, 8vw, 6rem);
}

.section--alt {
  background: var(--surface-alt);
  border-block: 1px solid var(--border-soft);
}

.section__head {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section__head p {
  color: var(--text-muted);
  font-size: 1.075rem;
  margin-bottom: 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.85rem;
}

.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--flag-blue), var(--flag-pink));
}

/* Available to screen readers, removed from the visual flow */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -100px;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
  transition: top 0.18s ease;
}

.skip-link:focus {
  top: 0;
  color: var(--on-accent);
}

/* Flag stripe — the one overt nod to the flag */
.flagline {
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--flag-blue) 0%,
    var(--flag-blue) 20%,
    var(--flag-pink) 20%,
    var(--flag-pink) 40%,
    #ffffff 40%,
    #ffffff 60%,
    var(--flag-pink) 60%,
    var(--flag-pink) 80%,
    var(--flag-blue) 80%
  );
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background: var(--accent-hover);
  color: var(--on-accent);
  box-shadow: var(--shadow);
}

.btn--ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.btn--ghost:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.btn--pink {
  background: var(--pink);
  color: var(--on-pink);
}

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

.btn--sm {
  padding: 0.55rem 1.05rem;
  font-size: 0.875rem;
}

.btn svg {
  flex: none;
}

/* ==========================================================================
   Header + navigation
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--border-soft);
}

.header-bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 76px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--text);
  flex: none;
}

.brand:hover {
  color: var(--text);
}

.brand img {
  width: 42px;
  height: 42px;
  flex: none;
}

.brand__name {
  display: flex;
  flex-direction: column;
  line-height: 1.12;
}

.brand__name strong {
  font-size: 1.02rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.brand__name span {
  font-size: 0.76rem;
  font-weight: 550;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.nav {
  margin-left: auto;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius-sm);
  font-size: 0.925rem;
  font-weight: 550;
  color: var(--text);
  text-decoration: none;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav__link:hover,
.nav__link[aria-expanded="true"] {
  background: var(--accent-soft);
  color: var(--accent-hover);
}

.nav__link .chev {
  transition: transform 0.2s ease;
}

.nav__link[aria-expanded="true"] .chev {
  transform: rotate(180deg);
}

/* Dropdown */
.has-menu {
  position: relative;
}

.menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 270px;
  padding: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

.menu[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.menu--right {
  left: auto;
  right: 0;
  min-width: 190px;
}

.menu a,
.menu button {
  display: block;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.menu a:hover,
.menu button:hover {
  background: var(--accent-soft);
  color: var(--accent-hover);
}

.menu a small {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 0.05rem;
}

.menu a:hover small {
  color: inherit;
  opacity: 0.8;
}

.menu__group {
  padding: 0.65rem 0.7rem 0.3rem;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.menu__sep {
  height: 1px;
  margin: 0.4rem 0.35rem;
  background: var(--border-soft);
}

/* ==========================================================================
   Theme switch
   ========================================================================== */

.theme__btn {
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}

.theme__btn:hover,
.theme__btn[aria-expanded="true"] {
  color: var(--accent-hover);
}

/* Which icon shows depends on the stored preference, not the resolved theme,
   so "Auto" keeps reading as Auto even when the system is dark. */
.theme__btn svg {
  display: none;
}

:root:not([data-theme]) .theme__btn .ico-auto,
:root[data-theme="light"] .theme__btn .ico-light,
:root[data-theme="dark"] .theme__btn .ico-dark {
  display: block;
}

.theme__opt {
  display: flex !important;
  align-items: center;
  gap: 0.6rem;
}

.theme__opt svg:first-child {
  flex: none;
  opacity: 0.75;
}

.theme__opt .tick {
  margin-left: auto;
  flex: none;
  color: var(--accent);
  visibility: hidden;
}

.theme__opt[aria-checked="true"] {
  font-weight: 620;
}

.theme__opt[aria-checked="true"] .tick {
  visibility: visible;
}

/* Header actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
}

.search {
  position: relative;
  display: flex;
  align-items: center;
}

.search input {
  width: 172px;
  padding: 0.5rem 0.75rem 0.5rem 2.15rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--text);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: width 0.2s ease, border-color 0.15s ease,
    background-color 0.15s ease;
}

.search input::placeholder {
  color: var(--text-muted);
}

.search input:focus {
  width: 210px;
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.search svg {
  position: absolute;
  left: 0.7rem;
  color: var(--text-muted);
  pointer-events: none;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
}

.nav-toggle:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 9vw, 7rem);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      58rem 30rem at 78% -12%,
      var(--hero-glow-1),
      transparent 62%
    ),
    radial-gradient(46rem 26rem at 8% 8%, var(--hero-glow-2), transparent 60%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero h1 {
  margin-bottom: 0.35em;
  text-wrap: balance;
}

.hero h1 .accent {
  background: linear-gradient(
    100deg,
    var(--accent-grad-from) 10%,
    var(--accent-grad-to) 92%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lede {
  font-size: clamp(1.075rem, 1.9vw, 1.3rem);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 34rem;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.hero__motto {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  font-weight: 550;
  font-style: italic;
  color: var(--text-muted);
  width: 100%;
  max-width: 34rem;
}

.hero__art {
  display: flex;
  justify-content: center;
}

.hero__art img {
  width: min(100%, 300px);
  filter: drop-shadow(0 22px 40px var(--sh-3));
}

/* ==========================================================================
   Crisis strip
   ========================================================================== */

.crisis {
  background: var(--urgent-bg);
  border-block: 1px solid var(--urgent-border);
}

.crisis__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-block: 1.15rem;
  flex-wrap: wrap;
}

.crisis__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--urgent-text) 12%, transparent);
  color: var(--urgent-text);
}

.crisis__text {
  flex: 1 1 22rem;
  font-size: 0.95rem;
  color: var(--urgent-text);
}

.crisis__text strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
}

.crisis__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  align-items: center;
}

.crisis__links a {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--urgent-text);
  white-space: nowrap;
}

.crisis__links a:hover {
  color: var(--urgent-text);
}

/* ==========================================================================
   Card grid
   ========================================================================== */

.grid {
  display: grid;
  gap: 1.15rem;
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--flag-blue), var(--flag-pink));
  opacity: 0;
  transition: opacity 0.18s ease;
}

a.card:hover,
.card:not(a):hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  color: inherit;
}

a.card:hover::after,
.card:not(a):hover::after {
  opacity: 1;
}

.card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1.1rem;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  flex: none;
}

.card--pink .card__icon {
  background: var(--pink-icon-bg);
  color: var(--pink-icon-fg);
}

.card h3 {
  margin-bottom: 0.4rem;
  font-size: 1.075rem;
}

/* Heading links read as headings until hovered */
.card h3 a {
  color: inherit;
  text-decoration: none;
}

.card h3 a:hover {
  color: var(--accent);
}

.card p {
  margin-bottom: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.card__more {
  margin-top: 1.1rem;
  font-size: 0.875rem;
  font-weight: 620;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

a.card:hover .card__more {
  gap: 0.6rem;
}

.card__more svg {
  transition: transform 0.18s ease;
}

/* Sub-links inside a card */
.card__links {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.card__links a {
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.card__links a::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  flex: none;
}

.card__links a:hover {
  color: var(--accent);
}

/* ==========================================================================
   Directory feature
   ========================================================================== */

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(2rem, 4.5vw, 3.5rem);
  background: linear-gradient(135deg, var(--feature-from), var(--feature-to));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.feature h2 {
  margin-bottom: 0.5rem;
}

.feature p {
  color: var(--text-muted);
  font-size: 1.05rem;
}

.feature__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.feature__panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.5rem;
}

.dir-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 0.9rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s ease;
}

.dir-row:hover {
  background: var(--surface-alt);
  color: inherit;
}

.dir-row + .dir-row {
  border-top: 1px solid var(--border-soft);
}

/* Pastel avatars stay light in both themes, so the dark ink on them is
   readable either way. */
.dir-row__avatar,
.donor__mark {
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--flag-blue) 55%, #ffffff),
    color-mix(in srgb, var(--flag-pink) 55%, #ffffff)
  );
  color: #1d2731;
  font-weight: 700;
}

.dir-row__avatar {
  width: 40px;
  height: 40px;
  font-size: 0.85rem;
}

.dir-row__body {
  min-width: 0;
}

.dir-row__body strong {
  display: block;
  font-size: 0.925rem;
  font-weight: 620;
}

.dir-row__body span {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.dir-row__go {
  margin-left: auto;
  color: var(--text-muted);
  flex: none;
}

.dir-row:hover .dir-row__go {
  color: var(--accent);
}

/* ==========================================================================
   About + acknowledgements
   ========================================================================== */

.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

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

.note {
  padding: 1.5rem 1.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--flag-pink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.note h3 {
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
}

.note p {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin-bottom: 0;
}

.note p + p {
  margin-top: 0.75rem;
}

/* ==========================================================================
   Donors
   ========================================================================== */

.donor {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  height: 100%;
}

.donor__mark {
  width: 46px;
  height: 46px;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.donor h3 {
  font-size: 1rem;
  margin-bottom: 0.35rem;
}

.donor p {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0;
}

.donor a {
  margin-top: 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}

.donor a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Poster / CTA band
   ========================================================================== */

.cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--band-bg);
  border: 1px solid var(--band-border);
  border-radius: var(--radius-lg);
  color: var(--band-text);
  overflow: hidden;
  position: relative;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--flag-blue),
    var(--flag-pink),
    #fff,
    var(--flag-pink),
    var(--flag-blue)
  );
}

.cta-band h2 {
  color: var(--band-text);
  margin-bottom: 0.35rem;
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
}

.cta-band p {
  margin-bottom: 0;
  color: var(--band-muted);
  font-size: 0.975rem;
  max-width: 40rem;
}

.cta-band .btn--ghost {
  background: var(--band-ghost-bg);
  border-color: var(--band-ghost-border);
  color: var(--band-text);
}

.cta-band .btn--ghost:hover {
  background: var(--band-ghost-hover);
  color: var(--band-text);
}

.cta-band__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-top: clamp(3rem, 6vw, 4.5rem);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 2.5rem 2rem;
  padding-bottom: 3rem;
}

.footer-brand p {
  font-size: 0.9rem;
  color: var(--text-muted);
  max-width: 24rem;
  margin-top: 1rem;
}

.footer-social {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.footer-social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: all 0.15s ease;
}

.footer-social a:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

.footer-col h4 {
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.footer-col li + li {
  margin-top: 0.55rem;
}

.footer-col a {
  font-size: 0.9rem;
  color: var(--text);
  text-decoration: none;
  font-weight: 480;
}

.footer-col a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.acknowledgement {
  padding: 1.4rem 1.6rem;
  margin-bottom: 2.5rem;
  background: var(--surface-alt);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.acknowledgement strong {
  color: var(--text);
  font-weight: 620;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding-block: 1.5rem;
  border-top: 1px solid var(--border-soft);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.footer-bottom p {
  margin: 0;
}

.footer-bottom nav {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.footer-bottom a {
  color: var(--text-muted);
  text-decoration: none;
}

.footer-bottom a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ==========================================================================
   Interior pages
   --------------------------------------------------------------------------
   The homepage is a landing page; every other page is a document. These
   components carry the same tokens into long-form content.
   ========================================================================== */

/* Compact hero — same glow as the homepage, a third of the height */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--border-soft);
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      42rem 22rem at 82% -30%,
      var(--hero-glow-1),
      transparent 62%
    ),
    radial-gradient(34rem 20rem at 4% 0%, var(--hero-glow-2), transparent 60%);
  pointer-events: none;
}

.page-hero__inner {
  position: relative;
  max-width: 52rem;
}

.page-hero h1 {
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  margin-bottom: 0.3em;
  text-wrap: balance;
}

.page-hero__lede {
  font-size: clamp(1rem, 1.6vw, 1.175rem);
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 0;
  text-wrap: pretty;
}

/* Breadcrumb */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.crumbs a {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
}

.crumbs a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.crumbs svg {
  flex: none;
  opacity: 0.55;
}

.crumbs [aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}

/* ---- Long-form content -------------------------------------------------- */

.prose {
  max-width: 46rem;
}

.prose > :first-child {
  margin-top: 0;
}

.prose h2 {
  margin-top: 2.5rem;
  margin-bottom: 0.6rem;
  font-size: clamp(1.35rem, 2.4vw, 1.6rem);
}

.prose h3 {
  margin-top: 1.85rem;
  margin-bottom: 0.5rem;
  font-size: 1.075rem;
}

.prose p,
.prose li {
  color: var(--text-muted);
}

.prose strong {
  color: var(--text);
  font-weight: 620;
}

.prose ul {
  margin: 0 0 1.15em;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.prose ul li {
  position: relative;
  padding-left: 1.4rem;
}

.prose ul li::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.55;
}

.prose blockquote {
  margin: 1.5rem 0;
  padding: 0.15rem 0 0.15rem 1.25rem;
  border-left: 3px solid var(--flag-blue);
  color: var(--text-muted);
  font-style: italic;
}

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

.prose hr {
  height: 1px;
  border: 0;
  margin: 2.5rem 0;
  background: var(--border-soft);
}

/* ---- Two-column page shell: content + sticky aside ---------------------- */

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17.5rem;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.layout .prose {
  max-width: none;
}

.aside {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.aside__card {
  padding: 1.25rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.aside__card h2 {
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.85rem;
}

.aside__card ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.aside__card a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
}

.aside__card a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ---- Resource entries --------------------------------------------------- */

.res-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin: 1.5rem 0 0;
}

.res {
  padding: 1.25rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    transform 0.18s ease;
}

.res:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: var(--shadow);
}

.res h3 {
  margin-bottom: 0.35rem;
  font-size: 1.02rem;
}

.res h3 a {
  color: inherit;
  text-decoration: none;
}

.res h3 a:hover {
  color: var(--accent);
}

.res p {
  margin-bottom: 0;
  font-size: 0.92rem;
  color: var(--text-muted);
}

.res p + p {
  margin-top: 0.6rem;
}

/* Grid variant — turns a long single column into a scannable board.
   Cards stretch to equal height so the chips line up along the bottom. */
.res-list--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 0.9rem;
}

.res-list--grid .res {
  display: flex;
  flex-direction: column;
}

.res-list--grid .res__links {
  margin-top: auto;
  padding-top: 0.9rem;
}

/* Meta rows: phone, email, hours, location */
.res__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin-top: 0.85rem;
  font-size: 0.875rem;
}

.res__meta span,
.res__meta a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-muted);
  text-decoration: none;
}

.res__meta a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.res__meta svg {
  flex: none;
  opacity: 0.7;
}

/* Outbound / download link chips */
.res__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.9rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  font-size: 0.8rem;
  font-weight: 550;
  color: var(--text);
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease;
}

.chip:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-hover);
}

.chip svg {
  flex: none;
  opacity: 0.75;
}

/* ---- Filter -------------------------------------------------------------
   Built by filter.js and injected at runtime, so it never appears without
   working JS. Everything it hides is visible by default.

   Deliberately quiet. An earlier version used filled pills, which read as a
   row of primary buttons and fought the real CTAs. Categories are plain text
   instead, and the active one is marked with the flag gradient as a thin rule
   — the same device as .flagline, .eyebrow::before and .card::after.
   -------------------------------------------------------------------------- */

.filter {
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  padding-bottom: 1.35rem;
  border-bottom: 1px solid var(--border-soft);
}

.filter__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.9rem 1.5rem;
  margin-bottom: 1.15rem;
}

/* The eyebrow already carries its own gradient rule; don't double the margin */
.filter__top .eyebrow {
  margin-bottom: 0;
}

.filter__search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 15rem;
  max-width: 21rem;
}

.filter__search svg {
  position: absolute;
  left: 0.85rem;
  color: var(--text-muted);
  pointer-events: none;
}

/* Matches the header search rather than inventing a second input style */
.filter__search input {
  width: 100%;
  padding: 0.55rem 2.3rem 0.55rem 2.3rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.filter__search input::placeholder {
  color: var(--text-muted);
}

.filter__search input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.filter__clear {
  position: absolute;
  right: 0.5rem;
  display: none;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.filter__clear:hover {
  color: var(--accent);
}

.filter__clear[data-show="true"] {
  display: grid;
}

.filter__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.6rem;
}

.filter__cat {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0 0.55rem;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 550;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s ease;
}

/* The one overt nod to the flag, same as everywhere else on the site */
.filter__cat::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--flag-blue), var(--flag-pink));
  opacity: 0;
  transition: opacity 0.18s ease;
}

.filter__cat:hover {
  color: var(--text);
}

.filter__cat:hover::after {
  opacity: 0.4;
}

.filter__cat[aria-pressed="true"] {
  color: var(--text);
  font-weight: 650;
}

.filter__cat[aria-pressed="true"]::after {
  opacity: 1;
}

.filter__count {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.filter__cat[aria-pressed="true"] .filter__count {
  color: var(--accent);
}

.filter__status {
  margin: 1.1rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Hidden by filtering — distinct from [hidden] so nothing fights over it */
.is-filtered {
  display: none !important;
}

.no-results {
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--text-muted);
  background: var(--surface-alt);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

.no-results p {
  margin-bottom: 0;
}

/* A search hit inside an otherwise-filtered group still needs its heading */
.fgroup {
  scroll-margin-top: 6rem;
}

/* ---- Accordion (crisis supports uses these) ----------------------------- */

.acc {
  margin-top: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.acc + .acc {
  margin-top: 0.75rem;
}

.acc > summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.05rem 1.35rem;
  font-size: 1.02rem;
  font-weight: 650;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  transition: background-color 0.15s ease;
}

.acc > summary::-webkit-details-marker {
  display: none;
}

.acc > summary:hover {
  background: var(--surface-alt);
}

.acc > summary::after {
  content: "";
  margin-left: auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}

.acc[open] > summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.acc[open] > summary {
  border-bottom: 1px solid var(--border-soft);
}

.acc__body {
  padding: 1.35rem;
}

.acc__body > :last-child {
  margin-bottom: 0;
}

/* ---- Callouts ----------------------------------------------------------- */

.callout {
  display: flex;
  gap: 0.9rem;
  padding: 1.15rem 1.35rem;
  margin: 1.75rem 0;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-alt);
  font-size: 0.92rem;
  color: var(--text-muted);
}

.callout svg {
  flex: none;
  margin-top: 0.15rem;
  color: var(--accent);
}

.callout strong {
  color: var(--text);
}

.callout > div > :last-child {
  margin-bottom: 0;
}

.callout--urgent {
  background: var(--urgent-bg);
  border-color: var(--urgent-border);
  color: var(--urgent-text);
}

.callout--urgent svg,
.callout--urgent strong {
  color: var(--urgent-text);
}

.callout--urgent a {
  color: var(--urgent-text);
  font-weight: 600;
}

/* ---- Forms -------------------------------------------------------------- */

.form {
  max-width: 38rem;
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.field label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.field label .req {
  color: var(--pink);
  font-weight: 700;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

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

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field__hint {
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* ==========================================================================
   Directory
   --------------------------------------------------------------------------
   Listing cards reuse .res / .res-list--grid from the resource-list
   component; this block adds only what's new — the avatar, the category
   badges, the two-facet select row that sits alongside filter.js's search
   box, and the "show more" pager.
   ========================================================================== */

.directory__intro {
  max-width: 46rem;
  color: var(--text-muted);
  margin-bottom: 1.75rem;
}

.res--listing {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

.res__avatar {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--flag-blue) 55%, #ffffff),
    color-mix(in srgb, var(--flag-pink) 55%, #ffffff)
  );
  color: #1d2731;
  font-weight: 700;
  font-size: 0.85rem;
}

.res__body {
  min-width: 0;
  flex: 1 1 auto;
}

.res__tagline {
  margin: 0 0 0.35rem;
  font-size: 0.92rem;
  color: var(--text-muted);
}

.res__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.7rem;
}

.res__badges:empty,
.res__meta:empty {
  display: none;
}

/* Informational, not interactive — no hover-as-link affordance */
.chip--tag {
  cursor: default;
}

.chip--tag:hover {
  background: var(--surface-alt);
  border-color: var(--border);
  color: var(--text);
}

.listing-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.75rem;
}

/* ---- Toolbar: search (from filter.js styles) + category/location selects */

.filter__selects {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.15rem;
}

.filter__select-wrap {
  flex: 1 1 12rem;
  max-width: 16rem;
}

.filter__select {
  width: 100%;
  padding: 0.5rem 2rem 0.5rem 0.9rem;
  font: inherit;
  font-size: 0.88rem;
  color: var(--text);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' stroke='%235b6b7b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.filter__select:focus {
  outline: none;
  background-color: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.filter__reset {
  flex: none;
}

.directory-pager {
  margin-top: 1.75rem;
  text-align: center;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 940px) {
  .nav-toggle {
    display: inline-flex;
  }

  .search {
    display: none;
  }

  .nav {
    position: fixed;
    inset: 76px 0 auto 0;
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding: 1rem var(--gutter) 2rem;
    display: none;
  }

  .nav[data-open="true"] {
    display: block;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
  }

  .nav__link {
    width: 100%;
    justify-content: space-between;
    padding: 0.8rem 0.75rem;
    font-size: 1rem;
  }

  /* The theme switch stays in the header bar, so keep its popup anchored. */
  .has-menu {
    position: static;
  }

  .theme.has-menu {
    position: relative;
  }

  .menu {
    position: static;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--border);
    border-radius: 0;
    margin: 0.15rem 0 0.5rem 0.75rem;
    padding: 0.15rem 0 0.15rem 0.5rem;
  }

  .menu[data-open="true"] {
    display: block;
  }

  /* …but the theme popup keeps floating rather than expanding inline. */
  .theme .menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: auto;
    right: 0;
    min-width: 190px;
    margin: 0;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
  }

  .theme__btn {
    width: auto;
    justify-content: center;
  }

  .hero__inner {
    grid-template-columns: 1fr;
  }

  .hero__art {
    order: -1;
  }

  .hero__art img {
    width: min(52%, 200px);
  }

  .feature,
  .about {
    grid-template-columns: 1fr;
  }

  .feature__panel {
    order: -1;
  }

  /* Aside drops below the content and stops sticking */
  .layout {
    grid-template-columns: 1fr;
  }

  .aside {
    position: static;
  }
}

@media (max-width: 620px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .brand__name span {
    display: none;
  }

  /* Brand + theme + Donate + burger overran a 375px viewport by ~26px, which
     scrolled the whole page sideways. Trim the gaps and the logo rather than
     dropping the Donate button. */
  .header-bar {
    gap: 0.75rem;
  }

  .header-bar .brand {
    gap: 0.55rem;
  }

  .header-bar .brand img {
    width: 36px;
    height: 36px;
  }

  .header-actions {
    gap: 0.4rem;
  }

  .header-actions .btn--sm {
    padding-inline: 0.8rem;
  }

  .cta-band__actions,
  .hero__actions {
    width: 100%;
  }

  .cta-band__actions .btn,
  .hero__actions .btn {
    flex: 1 1 auto;
  }
}

/* ==========================================================================
   Motion + print
   ========================================================================== */

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

@media print {
  .site-header,
  .cta-band,
  .hero__art {
    display: none;
  }
  body {
    background: #fff;
    color: #000;
  }
}