/* Gluten Hero — Resources design system
   Spine palette, type, spacing, radii, shadows, plus the component primitives
   used by the Resources homepage. Tracks the canonical design system tokens.
*/

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Quicksand:wght@400;500;600;700&display=swap");

:root {
  /* Spine palette */
  --plum:           #493751;
  --plum-dark:      #352840;
  --sage:           #A6C9BB;
  --sage-dark:      hsl(160, 25%, 38%);
  --cream:          #F8F1F2;
  --navy:           #3B3B58;
  --mauve:          #B375A0;
  --mint:           hsl(160, 45%, 50%);
  --mint-light:     hsl(160, 50%, 92%);
  --sunshine:       hsl(45, 90%, 65%);
  --sunshine-light: hsl(45, 85%, 90%);
  --beige:          hsl(30, 50%, 97%);
  --beige-dark:     hsl(30, 30%, 80%);
  --warm-brown:     hsl(25, 30%, 20%);
  --mid-brown:      hsl(25, 15%, 50%);

  /* Semantic */
  --bg:           var(--beige);
  --surface:      var(--cream);
  --surface-2:    #ffffff;
  --border:       var(--beige-dark);
  --border-soft:  hsl(30, 30%, 88%);
  --text:         var(--warm-brown);
  --text-body:    var(--navy);
  --text-muted:   var(--mid-brown);
  --text-inverse: var(--cream);
  --primary:      var(--plum);
  --primary-fg:   var(--cream);
  --cta:          var(--mint);
  --cta-fg:       #fff;
  --danger:       hsl(0, 60%, 50%);
  --danger-soft:  hsl(0, 60%, 95%);

  /* Type */
  --font-display: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Quicksand", system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Spacing */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px;

  /* Radii */
  --r-sm:   8px;
  --r-md:   12px;
  --r-card: 16px;
  --r-chip: 20px;
  --r-pill: 999px;

  /* Shadows (warm plum-tinted, never black) */
  --shadow-1: 0 1px 2px rgba(73, 55, 81, 0.06), 0 1px 1px rgba(73, 55, 81, 0.04);
  --shadow-2: 0 4px 12px rgba(73, 55, 81, 0.08), 0 1px 2px rgba(73, 55, 81, 0.06);
  --shadow-3: 0 14px 36px rgba(73, 55, 81, 0.14), 0 4px 10px rgba(73, 55, 81, 0.06);
  --shadow-pop: 0 22px 60px rgba(73, 55, 81, 0.20);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--text-body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
::selection { background: var(--mauve); color: #fff; }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mid-brown);
}
.mono { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* Buttons */
.btn {
  --btn-bg: var(--primary);
  --btn-fg: var(--primary-fg);
  --btn-edge: transparent;
  font-family: var(--font-display); font-weight: 800;
  font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1.5px solid var(--btn-edge);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
  box-shadow: var(--shadow-1);
  line-height: 1;
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }
.btn--cta { --btn-bg: var(--cta); --btn-fg: var(--cta-fg); }
.btn--tertiary {
  --btn-bg: transparent; --btn-fg: var(--plum); --btn-edge: transparent;
  box-shadow: none;
}
.btn--tertiary:hover { background: var(--cream); }
.btn--sm { padding: 8px 14px; font-size: 13px; }

.input {
  font: inherit; font-weight: 500;
  color: var(--text-body); background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: 11px 14px; width: 100%;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.input::placeholder { color: var(--mid-brown); }
.input:focus {
  outline: none; border-color: var(--plum);
  box-shadow: 0 0 0 4px rgba(73, 55, 81, 0.12);
}

/* ── Site nav ─────────────────────────────────────────────────────────── */
.gh-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 16px 32px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-soft);
}
.gh-nav__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.gh-nav__shield {
  width: 28px; height: 28px; border-radius: 6px; overflow: hidden;
  background: var(--cream); border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.gh-nav__shield img { width: 100%; height: 100%; object-fit: cover; }
.gh-nav__wordmark {
  font-family: var(--font-display); font-weight: 900;
  font-size: 17px; color: var(--plum); letter-spacing: -0.01em;
  text-decoration: none;
}
.gh-nav__items { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.gh-nav__item {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  color: var(--text-body); text-decoration: none;
  padding: 8px 14px; border-radius: var(--r-pill);
  transition: background 120ms ease, color 120ms ease;
}
.gh-nav__item:hover { background: var(--mint-light); color: var(--plum); }
.gh-nav__item.is-active { background: var(--mint-light); color: var(--plum); }

/* ── Page shell sections ─────────────────────────────────────────────── */
.gh-page { display: flex; flex-direction: column; min-height: 100vh; }
.gh-page__main { flex: 1; }

/* Hero header */
.gh-hero {
  background: var(--cream);
  border-bottom: 1px solid var(--border-soft);
  padding: 56px 48px 48px;
}
.gh-hero__inner { max-width: 1280px; margin: 0 auto; }
.gh-hero__grid {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 40px; align-items: end;
}
.gh-hero__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: 52px; line-height: 1.02; letter-spacing: -0.025em;
  margin: 0 0 14px; color: var(--plum); max-width: 16ch;
}
.gh-hero__eyebrow { margin-bottom: 12px; color: var(--mauve); }
.gh-hero__lede {
  margin: 0; font-size: 17px; color: var(--text-muted);
  max-width: 52ch; line-height: 1.55;
}
.gh-hero__meta {
  display: flex; gap: 24px; margin-top: 24px;
  font-size: 13px; font-family: var(--font-display); font-weight: 700;
  color: var(--text-muted); flex-wrap: wrap;
}
.gh-hero__meta span { display: inline-flex; align-items: center; gap: 8px; }

.gh-search {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 6px 6px 16px;
  border-radius: 999px; background: var(--surface-2);
  border: 1.5px solid var(--border-soft);
  box-shadow: var(--shadow-1);
}
.gh-search input {
  flex: 1; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 14px; font-weight: 500;
  color: var(--text-body); padding: 8px 0;
}
.gh-search__hint {
  margin: 8px 4px 0; padding: 0;
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  color: var(--text-muted); line-height: 1.5;
}
.gh-search__sugg {
  background: transparent; border: 0; padding: 0 2px;
  font: inherit; color: var(--plum); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.gh-search__sugg:hover { color: var(--warm-brown); }
.gh-audience-row {
  margin-top: 12px; display: flex; gap: 6px;
  flex-wrap: wrap; justify-content: flex-end;
}
.gh-audience-pill {
  cursor: pointer; font-family: var(--font-display);
  font-weight: 700; font-size: 12px; padding: 5px 11px;
  border-radius: 999px;
  border: 1.5px solid var(--border-soft);
  background: transparent; color: var(--text-body);
  transition: all 120ms ease;
}
.gh-audience-pill.is-active {
  border-color: var(--plum); background: var(--plum); color: var(--cream);
}

/* Newly diagnosed callout */
.gh-callout-wrap { padding: 36px 48px 0; max-width: 1280px; margin: 0 auto; }
.gh-callout {
  background: linear-gradient(135deg, var(--mint-light) 0%, var(--cream) 60%, var(--sunshine-light) 100%);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-card);
  padding: 36px 40px;
}
.gh-callout__grid { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; align-items: start; }
.gh-callout__pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--sunshine); color: var(--warm-brown);
  font-family: var(--font-display); font-weight: 800; font-size: 11px;
  letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 14px;
}
.gh-callout__title {
  margin: 0 0 10px; font-family: var(--font-display); font-weight: 900;
  font-size: 26px; color: var(--plum); letter-spacing: -0.015em; line-height: 1.1;
}
.gh-callout__lede {
  margin: 0; color: var(--text-body); font-size: 14.5px;
  line-height: 1.55; max-width: 38ch;
}
.gh-callout__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gh-callout__card {
  appearance: none; cursor: pointer; text-align: left; font: inherit;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: var(--shadow-1);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.gh-callout__card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.gh-callout__card-type {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 800; font-size: 10px;
  color: var(--mid-brown); letter-spacing: 1.5px; text-transform: uppercase;
}
.gh-callout__card-title {
  font-family: var(--font-display); font-weight: 800; font-size: 14.5px;
  color: var(--plum); line-height: 1.25; letter-spacing: -0.005em;
}
.gh-callout__card-meta {
  margin-top: auto; font-family: var(--font-mono); font-size: 11px;
  color: var(--text-muted);
}

/* Section header */
.gh-section { padding: 44px 48px 16px; max-width: 1280px; margin: 0 auto; }
.gh-section--featured { padding: 40px 48px 16px; }
.gh-section--mixed { padding: 32px 48px 32px; }
.gh-section--band { padding: 16px 48px 16px; }
.gh-section--newsletter { padding: 16px 48px 56px; }
.gh-section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 18px;
}
.gh-section__title {
  margin: 0; font-family: var(--font-display); font-weight: 900;
  font-size: 22px; color: var(--plum); letter-spacing: -0.01em;
}

/* Tile grid */
.gh-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gh-tile {
  appearance: none; cursor: pointer; text-align: left; font: inherit;
  border: 1px solid var(--border-soft); border-radius: var(--r-card);
  padding: 24px; display: flex; flex-direction: column; gap: 14px;
  min-height: 200px; box-shadow: var(--shadow-1);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.gh-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.gh-tile__row { display: flex; align-items: center; justify-content: space-between; }
.gh-tile__count { font-family: var(--font-mono); font-size: 11px; opacity: 0.85; }
.gh-tile__body { margin-top: auto; }
.gh-tile__label {
  font-family: var(--font-display); font-weight: 900; font-size: 20px;
  line-height: 1.15; letter-spacing: -0.015em; margin-bottom: 6px;
}
.gh-tile__copy {
  font-family: var(--font-body); font-weight: 500; font-size: 13.5px;
  line-height: 1.45; max-width: 30ch;
}
.gh-tile--plum     { background: var(--plum);            color: var(--cream); }
.gh-tile--plum     .gh-tile__count, .gh-tile--plum     .gh-tile__copy { color: rgba(248,241,242,0.78); }
.gh-tile--sage     { background: var(--sage);            color: var(--plum); }
.gh-tile--sage     .gh-tile__count, .gh-tile--sage     .gh-tile__copy { color: rgba(73,55,81,0.72); }
.gh-tile--mauve    { background: rgba(179,117,160,0.16); color: var(--plum); }
.gh-tile--mauve    .gh-tile__count, .gh-tile--mauve    .gh-tile__copy { color: var(--text-muted); }
.gh-tile--mint     { background: var(--mint-light);      color: hsl(160,55%,25%); }
.gh-tile--mint     .gh-tile__count, .gh-tile--mint     .gh-tile__copy { color: hsl(160,30%,35%); }
.gh-tile--sunshine { background: var(--sunshine-light);  color: hsl(28,70%,30%); }
.gh-tile--sunshine .gh-tile__count, .gh-tile--sunshine .gh-tile__copy { color: hsl(28,40%,40%); }
.gh-tile--cream    { background: var(--cream);           color: var(--plum); }
.gh-tile--cream    .gh-tile__count, .gh-tile--cream    .gh-tile__copy { color: var(--text-muted); }

/* Featured row */
.gh-featured { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }
.gh-featured__stack { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
.gh-fcard {
  appearance: none; cursor: pointer; text-align: left; font: inherit;
  color: var(--cream); border: 0; border-radius: var(--r-card);
  padding: 28px; display: flex; flex-direction: column; gap: 14px;
  min-height: 240px; height: 100%;
  box-shadow: var(--shadow-2); position: relative; overflow: hidden;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.gh-fcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); }
.gh-fcard--large { padding: 36px; min-height: 320px; }
.gh-fcard--plum     { background: linear-gradient(160deg, var(--plum), var(--plum-dark)); }
.gh-fcard--sage     { background: linear-gradient(160deg, var(--sage-dark), hsl(160, 30%, 28%)); }
.gh-fcard--mauve    { background: linear-gradient(160deg, var(--mauve), hsl(316, 40%, 38%)); }
.gh-fcard--sunshine { background: linear-gradient(160deg, hsl(35, 90%, 60%), hsl(28, 80%, 50%)); }
.gh-fcard__watermark {
  position: absolute; right: -30px; bottom: -40px; pointer-events: none;
  color: rgba(248,241,242,0.10);
}
.gh-fcard__eyebrow {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 800; font-size: 10px;
  color: var(--cream); opacity: 0.75; letter-spacing: 2px; text-transform: uppercase;
}
.gh-fcard__title {
  position: relative; margin: 0;
  font-family: var(--font-display); font-weight: 900;
  font-size: 22px; color: var(--cream); line-height: 1.1;
  letter-spacing: -0.02em; max-width: 18ch;
}
.gh-fcard--large .gh-fcard__title { font-size: 32px; max-width: 16ch; }
.gh-fcard__blurb {
  position: relative; margin: 0;
  color: rgba(248,241,242,0.85); font-size: 13.5px;
  line-height: 1.55; max-width: 44ch; flex: 1;
}
.gh-fcard--large .gh-fcard__blurb { font-size: 15.5px; }
.gh-fcard__cta {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
  color: var(--cream);
}

/* Active filter pill bar */
.gh-filterbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 20px; margin-bottom: 20px;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: 999px; flex-wrap: wrap;
}
.gh-filterbar__left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gh-filterbar__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 8px 5px 12px; border-radius: 999px;
  background: var(--plum); color: var(--cream);
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
}
.gh-filterbar__chip button {
  appearance: none; border: 0; background: rgba(248,241,242,0.2);
  color: var(--cream); border-radius: 999px; width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}

/* Resource card grid */
.gh-rgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gh-rcard {
  text-align: left; cursor: pointer; appearance: none;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--r-card); padding: 20px;
  display: flex; flex-direction: column; gap: 12px; height: 100%;
  box-shadow: var(--shadow-1);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
  font: inherit; color: inherit;
}
.gh-rcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--plum); }
.gh-rcard__top { display: flex; align-items: center; justify-content: space-between; }
.gh-rcard__type {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 800; font-size: 11px;
  color: var(--mid-brown); letter-spacing: 1.5px; text-transform: uppercase;
}
.gh-rcard__minutes {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
}
.gh-rcard__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: 17px; color: var(--plum);
  margin: 0; line-height: 1.25; letter-spacing: -0.01em;
}
.gh-rcard__blurb {
  margin: 0; color: var(--text-muted);
  font-size: 13.5px; line-height: 1.55; flex: 1;
}
.gh-rcard__when {
  display: inline-flex; align-items: center; gap: 6px; color: var(--plum);
  font-family: var(--font-display); font-weight: 700; font-size: 12.5px;
}
.gh-rcard__foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px; border-top: 1px solid var(--border-soft); margin-top: auto;
}
.gh-rcard__audience { display: flex; gap: 6px; flex-wrap: wrap; }
.gh-tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-body); font-weight: 600;
  font-size: 11px; padding: 3px 10px; border-radius: var(--r-chip);
  background: var(--cream); color: var(--text-body);
  border: 1px solid var(--border-soft);
}

.gh-empty {
  padding: 56px 40px; text-align: center;
  background: var(--surface-2); border-radius: var(--r-card);
  border: 1px solid var(--border-soft);
}
.gh-empty p {
  margin: 0 auto; max-width: 480px;
  color: var(--text-muted); line-height: 1.55;
}
.gh-empty__sugg {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-top: 20px;
}
.gh-empty__chip {
  cursor: pointer; font-family: var(--font-display);
  font-weight: 700; font-size: 13px; padding: 7px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--border-soft);
  background: var(--cream); color: var(--text-body);
  transition: all 120ms ease;
}
.gh-empty__chip:hover {
  border-color: var(--plum); background: var(--plum); color: var(--cream);
}
.gh-empty__clear {
  display: inline-block; margin-top: 20px;
  cursor: pointer; font-family: var(--font-display);
  font-weight: 700; font-size: 12px; padding: 6px 12px;
  border: 0; background: transparent;
  color: var(--text-muted); text-decoration: underline;
  text-underline-offset: 3px;
}
.gh-empty__clear:hover { color: var(--plum); }

/* Office hours band */
.gh-officehours {
  background: linear-gradient(135deg, var(--sage) 0%, var(--cream) 100%);
  border: 1px solid var(--border-soft); border-radius: var(--r-card);
  padding: 36px 40px;
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 32px; align-items: center;
}
.gh-officehours__title {
  margin: 0 0 8px; font-family: var(--font-display); font-weight: 900;
  font-size: 24px; color: var(--plum); letter-spacing: -0.01em;
}
.gh-officehours__lede {
  margin: 0; color: var(--text-body); font-size: 14px;
  line-height: 1.55; max-width: 56ch;
}
.gh-officehours__actions {
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
}
/* TidyCal inline embed container. The widget injects its own iframe;
   we just give it a clean white surface and a min-height so the band
   doesn't collapse before the script loads. */
.gh-officehours__embed {
  background: var(--cream);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-card);
  padding: 12px;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gh-officehours__embed > div { width: 100%; }
.gh-officehours__embed iframe { width: 100%; min-height: 540px; border: 0; }

/* Newsletter */
.gh-newsletter {
  background: var(--cream); border: 1px solid var(--border-soft);
  border-radius: var(--r-card); padding: 32px 36px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.gh-newsletter__copy { max-width: 44ch; }
.gh-newsletter__title {
  margin: 0 0 6px; font-family: var(--font-display); font-weight: 900;
  font-size: 22px; color: var(--plum); letter-spacing: -0.01em;
}
.gh-newsletter__lede {
  margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.55;
}
.gh-newsletter__form { display: flex; gap: 8px; min-width: 320px; }
.gh-newsletter__form .input { min-width: 220px; }
.gh-newsletter__success {
  padding: 14px 22px; border-radius: 999px; background: var(--mint-light);
  color: hsl(160,55%,25%); font-family: var(--font-display); font-weight: 800;
  font-size: 14px; display: inline-flex; align-items: center; gap: 8px;
}
.gh-newsletter__error {
  flex-basis: 100%;
  margin: 8px 0 0;
  color: hsl(8, 55%, 35%);
  font-size: 13px;
  line-height: 1.45;
}

/* Footer */
.gh-footer {
  background: var(--plum); color: var(--cream); padding: 56px 48px 28px;
}
.gh-footer__grid {
  display: grid; grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 32px; margin-bottom: 40px; max-width: 1280px; margin-left: auto; margin-right: auto;
}
.gh-footer__brand-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.gh-footer__brand-row .gh-nav__shield { width: 32px; height: 32px; }
.gh-footer__wordmark {
  font-family: var(--font-display); font-weight: 900; font-size: 19px; color: var(--cream);
  text-decoration: none;
}
.gh-footer__tagline {
  margin: 0; font-size: 13px; color: rgba(248,241,242,0.7); max-width: 32ch;
}
.gh-footer__tag-tweak {
  margin: 16px 0 0; font-family: var(--font-mono); font-size: 11px;
  color: rgba(248,241,242,0.55);
}
.gh-footer__col-head {
  margin: 0 0 14px; font-family: var(--font-display); font-weight: 800;
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--sage);
}
.gh-footer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.gh-footer__list a {
  color: rgba(248,241,242,0.82); text-decoration: none;
  font-size: 13px; font-family: var(--font-body); font-weight: 500;
}
.gh-footer__list a:hover { color: var(--cream); }
.gh-footer__disclaimer {
  padding-top: 20px; border-top: 1px solid rgba(248,241,242,0.15);
  font-size: 12px; color: rgba(248,241,242,0.55); line-height: 1.6;
  max-width: 92ch; margin: 0 auto 16px; padding-left: 0; padding-right: 0;
}
.gh-footer__legal {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  font-size: 12px; color: rgba(248,241,242,0.6); font-family: var(--font-mono);
  max-width: 1280px; margin: 0 auto;
}

/* Modal */
.gh-modal-backdrop {
  position: fixed; inset: 0; z-index: 1000; /* above the sticky search bar (900) */
  background: rgba(73, 55, 81, 0.55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 32px; animation: ghFade 160ms ease;
}
@keyframes ghFade { from { opacity: 0 } to { opacity: 1 } }
.gh-modal {
  width: 100%; max-width: 560px;
  background: var(--surface-2);
  border-radius: var(--r-card); padding: 36px;
  box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column; gap: 18px;
  max-height: calc(100vh - 64px); overflow-y: auto;
}
.gh-modal__top { display: flex; align-items: center; justify-content: space-between; }
.gh-modal__type {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 800; font-size: 11px;
  color: var(--mid-brown); letter-spacing: 2px; text-transform: uppercase;
}
.gh-modal__close {
  appearance: none; cursor: pointer; border: 0; background: transparent;
  color: var(--text-muted); padding: 6px; border-radius: 8px;
}
.gh-modal__title {
  margin: 0; font-family: var(--font-display); font-weight: 900;
  font-size: 26px; color: var(--plum); line-height: 1.15; letter-spacing: -0.01em;
}
.gh-modal__blurb { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.55; }
.gh-modal__meta {
  display: flex; gap: 18px; flex-wrap: wrap; padding: 12px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.gh-modal__meta-label {
  font-family: var(--font-display); font-weight: 800; font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--mid-brown);
}
.gh-modal__meta-value {
  font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--text-body);
}
.gh-modal__actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ── Sticky search bar + mobile nav ───────────────────────────────────
   Reveal/hide helpers. Mobile-only elements stay out of the DOM flow on
   desktop; the ≤880px media block below flips them on. No !important is
   needed because nothing carries an inline display style except Alpine's
   x-show, which (as an inline style) already wins over these stylesheet
   rules — so x-show toggling works correctly on every breakpoint. */
.gh-mobile-only,
.gh-mobile-flex { display: none; }

/* Sticky bar: always in the DOM, slid off-screen until `is-on`. The
   transform (not display) keeps the 260ms slide animation intact. */
.gh-sticky-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  transform: translateY(-100%);
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-soft);
  box-shadow: 0 2px 16px rgba(73, 55, 81, 0.10);
}
.gh-sticky-bar.is-on { transform: translateY(0); }
.gh-sticky-inner {
  max-width: 1280px; margin: 0 auto; padding: 10px 48px;
  display: flex; align-items: center; gap: 12px;
}
.gh-sticky-search { flex: 1; position: relative; min-width: 120px; display: block; }
.gh-sticky-search > svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--navy); opacity: 0.35; pointer-events: none;
}
.gh-sticky-search input {
  width: 100%; box-sizing: border-box; padding: 9px 34px;
  border-radius: 9px; border: 1.5px solid var(--border-soft);
  background: var(--surface-2); color: var(--navy);
  font-family: var(--font-body); font-size: 14.5px; font-weight: 500;
  outline: none; transition: border-color 120ms ease;
}
.gh-sticky-search input:focus { border-color: var(--plum); }
/* The custom × button is the only clear affordance — suppress the native one. */
.gh-sticky-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.gh-sticky-search__clear {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--text-muted); font-size: 17px; line-height: 1;
}
.gh-sticky-pills { display: flex; gap: 5px; flex-shrink: 0; }
.gh-sticky-pill {
  appearance: none; cursor: pointer; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: 11.5px;
  padding: 5px 11px; border-radius: 999px;
  border: 1.5px solid var(--border-soft);
  background: transparent; color: var(--text-muted);
  transition: all 120ms ease;
}
.gh-sticky-pill.is-active { border-color: var(--plum); background: var(--plum); color: var(--cream); }
.gh-sticky-count {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-muted);
  flex-shrink: 0; white-space: nowrap;
}
.gh-sticky-clear {
  display: inline-flex; flex-shrink: 0; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  border: 1.5px solid var(--plum); background: transparent; color: var(--plum);
  font-family: var(--font-display); font-weight: 700; font-size: 12.5px;
  transition: background 120ms ease, color 120ms ease;
}
.gh-sticky-clear:hover { background: var(--plum); color: var(--cream); }

/* Mobile: Filters button (replaces inline pills ≤880px) */
.gh-sticky-filters-btn {
  flex-shrink: 0; align-items: center; gap: 6px;
  padding: 9px 13px; border-radius: 9px; cursor: pointer; white-space: nowrap;
  border: 1.5px solid var(--border-soft); background: transparent;
  color: var(--text-body); font-family: var(--font-display);
  font-weight: 700; font-size: 13px;
}
.gh-sticky-filters-btn.is-active { border-color: var(--plum); background: var(--plum); color: var(--cream); }

/* Mobile filter sheet: drops below the sticky bar */
.gh-sticky-sheet {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--surface-2); border-bottom: 1px solid var(--border-soft);
  box-shadow: 0 14px 28px rgba(73, 55, 81, 0.14);
}
.gh-sticky-sheet__inner { max-width: 1280px; margin: 0 auto; padding: 14px 18px 16px; }
.gh-sticky-sheet__head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.gh-sticky-sheet__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.gh-sticky-sheet__pill {
  appearance: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 13.5px;
  padding: 9px 15px; border-radius: 999px;
  border: 1.5px solid var(--border-soft);
  background: transparent; color: var(--text-body);
  transition: all 120ms ease;
}
.gh-sticky-sheet__pill.is-active { border-color: var(--plum); background: var(--plum); color: var(--cream); }
.gh-sticky-sheet__clear {
  margin-top: 14px; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 13px; border-radius: 10px; cursor: pointer;
  border: 1.5px solid var(--plum); background: transparent; color: var(--plum);
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
}

/* Mobile hamburger nav */
.gh-nav__toggle {
  align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  background: none; border: 1.5px solid var(--border-soft);
  border-radius: 10px; color: var(--plum); cursor: pointer;
}
.gh-nav__mobile {
  background: var(--surface-2); border-bottom: 1px solid var(--border-soft);
  padding: 8px 14px 16px;
  flex-direction: column; gap: 2px;
}
.gh-nav__mobile.gh-mobile-only { display: none; }
.gh-nav__mobile-item {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  color: var(--text-body); text-decoration: none;
  padding: 12px; border-radius: 10px;
}
.gh-nav__mobile-item.is-active { background: var(--mint-light); color: var(--plum); }
.gh-nav__mobile-cta { margin-top: 10px; width: 100%; }

/* Responsive collapses ── design is tuned for ≥1024px ─────────────── */
@media (max-width: 1023px) {
  .gh-hero { padding: 40px 24px 32px; }
  .gh-hero__grid { grid-template-columns: 1fr; gap: 28px; align-items: stretch; }
  .gh-hero__title { font-size: 40px; max-width: none; }
  .gh-audience-row { justify-content: flex-start; }
  .gh-callout-wrap { padding: 24px 24px 0; }
  .gh-callout { padding: 28px 24px; }
  .gh-callout__grid { grid-template-columns: 1fr; gap: 20px; }
  .gh-callout__cards { grid-template-columns: 1fr; }
  .gh-section { padding: 32px 24px 12px; }
  .gh-section--featured, .gh-section--mixed, .gh-section--band, .gh-section--newsletter {
    padding-left: 24px; padding-right: 24px;
  }
  .gh-tiles { grid-template-columns: repeat(2, 1fr); }
  .gh-featured { grid-template-columns: 1fr; }
  .gh-featured__stack { grid-template-rows: auto auto; }
  .gh-fcard--large { padding: 28px; min-height: 240px; }
  .gh-fcard--large .gh-fcard__title { font-size: 26px; }
  .gh-rgrid { grid-template-columns: repeat(2, 1fr); }
  .gh-officehours { grid-template-columns: 1fr; padding: 28px 24px; }
  .gh-officehours__actions { justify-content: flex-start; }
  .gh-footer { padding: 40px 24px 24px; }
  .gh-footer__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  .gh-nav { padding: 12px 16px; gap: 12px; }
  .gh-nav__items { gap: 0; }
  .gh-nav__item { padding: 6px 10px; font-size: 12px; }
  .gh-hero__title { font-size: 34px; }
  .gh-tiles { grid-template-columns: 1fr; }
  .gh-rgrid { grid-template-columns: 1fr; }
  .gh-newsletter { flex-direction: column; align-items: stretch; }
  .gh-newsletter__form { min-width: 0; }
  .gh-footer__grid { grid-template-columns: 1fr; }
  .gh-modal { padding: 24px; }
  .gh-modal__title { font-size: 22px; }
}

/* ── Mobile-forward breakpoints for the sticky bar + hamburger nav ──────
   Kept after the collapses above so the visibility flips win on ties.
   At ≤880px the desktop nav and the sticky bar's inline audience pills
   give way to the hamburger menu and the Filters sheet. */
@media (max-width: 880px) {
  .gh-desktop-only { display: none; }
  .gh-mobile-flex  { display: inline-flex; }
  .gh-mobile-only  { display: block; }
  .gh-nav__mobile.gh-mobile-only { display: flex; } /* panel is a flex column */
  .gh-sticky-inner { padding: 10px 24px; }
}
@media (max-width: 560px) {
  .gh-sticky-inner { padding: 10px 16px; }
  /* The "{n} results" count is redundant on phones — the filter sheet shows it. */
  .gh-sticky-count { display: none; }
  .gh-hero__title { font-size: 32px; }
}