/* build 2 — v14 */
/* v13.1 */
/* ============================================================
   ACAPG — Animal Care and Protection Group
   v3 — colours taken directly from /Users/dave/Downloads/animal-care/acpg-logo.jpg
   Two typefaces only: Fraunces (display) + Inter (body).
   ============================================================ */

:root {
  /* ---------- Palette: sampled from the logo, not invented ---------- */
  --c-plum-deep:   #300050;   /* the deep eggplant-plum in the badge */
  --c-plum:        #401060;   /* the logo plum, slightly brighter */
  --c-cream:       #E0E0E0;   /* the badge plate background */
  --c-cream-soft:  #CFCFCF;   /* secondary panel surface */
  --c-paper:       #E8E8E8;   /* slightly lifted card surface */
  --c-gold:        #B08020;   /* the muted gold from logo accents */
  --c-gold-soft:   #8E6618;   /* gold hover */
  --c-ink:         #2A1840;   /* text — a hint toward plum rather than pure black */
  --c-ink-soft:    #6E5A82;
  --c-line:        #BDBDBD;   /* hairline dividers */
  --c-line-soft:   #D2D2D2;

  /* ---------- Type scale (no mono - everything is Fraunces or Inter) ---------- */
  --fs-display:  clamp(2.5rem, 6vw, 4.5rem);
  --fs-h1:       clamp(1.75rem, 3vw, 2.5rem);
  --fs-h2:       clamp(1.25rem, 2vw, 1.6rem);
  --fs-h3:       1.0625rem;
  --fs-body:     1.0625rem;
  --fs-small:    0.875rem;
  --fs-micro:    0.75rem;
  --fs-eyebrow:  0.8125rem;

  /* ---------- Space ---------- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 5rem;

  /* ---------- Structure (minimal radii) ---------- */
  --max-w:    1180px;
  --ease:     cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur:      200ms;
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, li, a {
  overflow-wrap: anywhere;
  word-break: break-word;
}
img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}
a { color: var(--c-plum); text-decoration: none; }
a:hover { color: var(--c-plum-deep); }

h1, h2, h3 {
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  color: var(--c-plum);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
}
h1 { font-size: var(--fs-h1); font-weight: 600; }
h2 { font-size: var(--fs-h2); font-weight: 600; margin-bottom: var(--space-2); }
p { margin: 0 0 var(--space-2); }

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px; top: 0;
  background: var(--c-plum);
  color: var(--c-cream);
  padding: var(--space-1) var(--space-2);
  font-weight: 600;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* ============================================================
   STANDARDISED PATTERNS — reusable visual tokens
   Apply these directly in HTML wherever the pattern appears.
   Context via modifiers: --dark for plum-background sections.
   ============================================================ */

/* ---------- Eyebrow — gold uppercase label above a heading ---------- */
.eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin: 0 0 var(--space-2);
}

/* ---------- Display heading — page-scale hero headline ---------- */
.display-heading {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: var(--fs-display);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--c-plum-deep);
  margin: 0 0 var(--space-3);
}
.display-heading em {
  font-style: italic;
  color: var(--c-plum);
}
.display-heading--dark {
  color: var(--c-cream);
  font-size: clamp(2.25rem, 4vw, 3rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
}

/* ---------- Section title — standard section heading ---------- */
.section-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  letter-spacing: -0.025em;
  color: var(--c-plum-deep);
  margin: 0 0 var(--space-2);
}
.section-title em {
  font-style: italic;
  color: var(--c-plum);
}
.section-title--dark {
  color: var(--c-cream);
}

/* ---------- Subtitle — italic Fraunces below a heading ---------- */
.subtitle {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.375rem);
  color: var(--c-plum);
  max-width: 28ch;
  line-height: 1.4;
  margin: 0 0 var(--space-3);
}
.subtitle--dark {
  color: var(--c-cream-soft);
  font-size: clamp(1rem, 1.4vw, 1.1875rem);
  max-width: 100%;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(224, 224, 224, 0.25);
}

/* ---------- Lede — italic intro paragraph ---------- */
.lede {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  color: var(--c-ink-soft);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 var(--space-3);
}
.lede--bordered {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--c-line);
}

/* ---------- Prose — editorial Fraunces body text ---------- */
.prose {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  margin: 0 0 var(--space-2);
  color: var(--c-ink);
}
.prose--dark {
  color: var(--c-cream);
}

/* ============================================================
   SEMANTIC CMS SECTIONS
   Editors use only h1–h4, p, ul/ol, blockquote, links and images.
   A developer-owned class on the Block wrapper supplies the design.
   These same rules are loaded into TinyMCE for an accurate preview.
   ============================================================ */
.about-hero-content h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: var(--fs-display);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--c-plum-deep);
  margin: 0 0 var(--space-3);
}
.about-hero-content > p,
.about-hero-content > .content-columns > .content-column > p {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.375rem);
  color: var(--c-plum);
  max-width: 60ch;
  line-height: 1.4;
  margin: 0 auto var(--space-3);
}
.about-mission-content h2,
.about-why-content h2,
.campaigns-approach-content h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  letter-spacing: -0.025em;
  color: var(--c-plum-deep);
  margin: 0 0 var(--space-3);
}
.about-mission-content h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  font-weight: 500;
  color: var(--c-ink-soft);
  margin: 0 0 var(--space-2);
}
.about-mission-content > p,
.about-mission-content > .content-columns > .content-column > p,
.campaigns-approach-content > p,
.campaigns-approach-content > .content-columns > .content-column > p {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  color: var(--c-ink-soft);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 var(--space-3);
}
.about-mission-content h2 + p,
.about-mission-content h2 + p + p,
.campaigns-approach-content h2 + p {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--c-line);
}
.about-why-content > p,
.about-why-content > .content-columns > .content-column > p {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  margin: 0 0 var(--space-2);
  color: var(--c-ink);
}
.about-founder-content {
  color: var(--c-cream);
}
body.about-founder-content { background: var(--c-plum-deep); }
.about-founder-content h2 {
  color: var(--c-cream);
  font-size: clamp(2.25rem, 4vw, 3rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 var(--space-2);
}
.about-founder-content h3 {
  color: var(--c-cream-soft);
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1rem, 1.4vw, 1.1875rem);
  font-style: italic;
  font-weight: 500;
  max-width: 100%;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(224, 224, 224, 0.25);
  margin: 0 0 var(--space-3);
}
.about-founder-content > p,
.about-founder-content > .content-columns > .content-column > p {
  color: var(--c-cream);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  margin: 0 0 var(--space-2);
}
.about-founder-content > blockquote {
  color: var(--c-cream);
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  border-left: 3px solid var(--c-gold);
  padding-left: var(--space-3);
  margin: var(--space-3) 0;
  max-width: 60ch;
}
.about-founder-content > p:last-child,
.about-founder-content > .content-columns > .content-column > p:last-child {
  font-style: italic;
  max-width: 60ch;
}

.footer-manifesto-content > p,
.footer-manifesto-content > .content-columns > .content-column > p {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  line-height: 1.3;
  color: var(--c-plum-deep);
  margin: 0;
}
.footer-manifesto-content > p strong,
.footer-manifesto-content > .content-columns > .content-column > p strong {
  font-style: normal;
  font-weight: 600;
  color: var(--c-plum);
}
.campaigns-hero-content > p:first-child,
.campaigns-hero-content > .content-columns > .content-column > p:first-child {
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin: 0 0 var(--space-2);
}
body.campaigns-hero-content { background: var(--c-plum-deep); }
.campaigns-hero-content h1 {
  color: var(--c-cream);
  font-size: var(--fs-display);
  margin: 0 0 var(--space-2);
}
.campaigns-hero-content > p:last-child,
.campaigns-hero-content > .content-columns > .content-column > p:last-child {
  color: var(--c-cream-soft);
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1rem, 1.6vw, 1.375rem);
  font-style: italic;
  line-height: 1.4;
  max-width: 60ch;
  margin: 0 auto var(--space-3);
}

/* ---------- Prose group — flex column for stacked prose blocks ---------- */
.prose-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ---------- Quote — pull quote with gold left border ---------- */
.quote {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  border-left: 3px solid var(--c-gold);
  padding-left: var(--space-3);
  margin: var(--space-3) 0;
  max-width: 60ch;
}

/* ---------- Signoff — italic closing line ---------- */
.signoff {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  max-width: 60ch;
  margin: 0;
}

/* ---------- Band — full-width visual section ---------- */
.band {
  padding: var(--space-5) 0;
}
.band--plum {
  background: var(--c-plum-deep);
  color: var(--c-cream);
}
.band--lg {
  padding: var(--space-6) 0 var(--space-5);
  margin-top: var(--space-5);
}
.band__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--space-3);
}
.band__inner--narrow {
  max-width: 880px;
}

/* ---------- Enum list — gold-numeral styled list ---------- */
.enum-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
}
.enum-list li {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--c-line-soft);
}
.enum-list li:last-child { border-bottom: 0; }
.enum-list__num {
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-gold);
  letter-spacing: 0.04em;
  font-style: italic;
}
.enum-list__label {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
  color: var(--c-plum-deep);
  line-height: 1.1;
}

/* ---------- Bold "more" link (gold bottom border) ---------- */
.cta-link--gold {
  display: inline-block;
  margin-top: var(--space-3);
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-plum-deep);
  border-bottom: 2px solid var(--c-gold);
  padding-bottom: 4px;
}
.cta-link--gold:hover {
  color: var(--c-plum-deep);
  text-decoration: none;
  background: var(--c-gold);
}

/* ============================================================
   HEADER — large centred logo (and hamburger on mobile)
   ============================================================ */
.site-header {
  background: var(--c-cream);
  padding: var(--space-4) var(--space-3) var(--space-2);
}
.site-header__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  min-height: 96px;
}
.site-header__logo {
  flex: 1;
  display: flex;
  justify-content: center;
}
.site-header__logo img {
  /* logo is 1011x394 — give it real space */
  height: 140px;
  width: auto;
  display: block;
}

/* --------- Hamburger toggle (hidden on desktop) --------- */
.site-nav__toggle {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  /* use grid + place-self so the stacked SVGs sit perfectly centred */
  display: grid;
  place-items: center;
  color: var(--c-cream);
  background: var(--c-plum-deep);
  border: 2px solid var(--c-plum-deep);
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 0;
  cursor: pointer;
  overflow: hidden;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.site-nav__toggle:hover {
  background: var(--c-plum);
  border-color: var(--c-plum);
}
.site-nav__toggle:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
}

/* Lucide "menu" icon — strokes inherit from the button's `color` */
.site-nav__toggle-icon {
  display: block;
  width: 22px;
  height: 22px;
}

@media (min-width: 721px) {
  /* hide entirely on desktop */
  .site-nav__toggle { display: none; }
  .site-nav__close { display: none; }
}
.site-nav {
  position: relative;
  background: var(--c-plum-deep);
  border-top: 1px solid var(--c-gold);
  border-bottom: 1px solid var(--c-gold);
  box-shadow: 0 4px 18px rgba(48, 0, 80, 0.12);
}
.site-nav__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0.45rem var(--space-3);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
}
.site-nav__inner::before,
.site-nav__inner::after {
  content: "";
  width: clamp(2rem, 7vw, 5rem);
  height: 1px;
  flex: 0 1 auto;
  background: linear-gradient(90deg, transparent, var(--c-gold));
  opacity: 0.8;
}
.site-nav__inner::after {
  transform: scaleX(-1);
}
.site-nav__inner a {
  display: inline-block;
  padding: 0.7rem 0.75rem 0.6rem;
  color: var(--c-cream);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.site-nav__inner a:hover,
.site-nav__inner a[aria-current="page"] {
  color: #f0c96b;
  border-bottom-color: var(--c-gold);
  background: rgba(224, 224, 224, 0.06);
  text-decoration: none;
}

/* Submenus are enhanced by the header script. Links remain usable if JS is
   unavailable; the nested list simply stays in normal document flow. */
.site-nav__item--has-children {
  display: grid;
  grid-template-columns: minmax(0, auto) 1.75rem;
  align-items: center;
}
.site-nav__submenu-toggle {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 2rem;
  padding: 0;
  color: var(--c-cream);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.site-nav__submenu-toggle span {
  width: 0.48rem;
  height: 0.48rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.14rem) rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.site-nav__submenu-toggle:hover,
.site-nav__submenu-toggle:focus-visible,
.site-nav__item--has-current > .site-nav__submenu-toggle {
  color: #f0c96b;
}
.site-nav__item--has-children.submenu-open > .site-nav__submenu-toggle span {
  transform: translateY(0.12rem) rotate(225deg);
}
.site-nav__sub {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 14rem;
  margin: 0;
  padding: 0.45rem;
  list-style: none;
  background: var(--c-plum-deep);
  border: 1px solid var(--c-gold);
  box-shadow: 0 14px 32px rgba(31, 5, 49, 0.24);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-0.35rem);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility var(--dur) var(--ease);
}
.site-nav__item,
.site-nav__subitem { position: relative; }
.site-nav__subitem > .site-nav__sub {
  top: -0.45rem;
  left: 100%;
}
.site-nav__item:not(.submenu-suppress-hover):hover > .site-nav__sub,
.site-nav__subitem:not(.submenu-suppress-hover):hover > .site-nav__sub,
.site-nav__item:not(.site-nav__item--has-children):focus-within > .site-nav__sub,
.site-nav__subitem:not(.site-nav__item--has-children):focus-within > .site-nav__sub,
.site-nav__item--has-children.submenu-open > .site-nav__sub {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.site-nav__inner .site-nav__sub a {
  display: block;
  width: 100%;
  padding: 0.7rem 0.8rem;
  color: var(--c-cream);
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  line-height: 1.35;
  letter-spacing: 0.025em;
  text-transform: none;
  border: 0;
  white-space: normal;
}
.site-nav__inner .site-nav__sub a:hover,
.site-nav__inner .site-nav__sub a[aria-current="page"] {
  color: #f0c96b;
  background: rgba(224, 224, 224, 0.08);
}

/* ============================================================
   HERO — split layout, oversized serif headline + photo
   ============================================================ */
.hero {
  padding: var(--space-6) 0 var(--space-5);
  border-bottom: 1px solid var(--c-line);
}
.hero__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--space-3);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: end;
}
.hero__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: var(--fs-display);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--c-plum-deep);
  margin: 0 0 var(--space-3);
}
.hero__title em {
  font-style: italic;
  color: var(--c-plum);
}
.hero__title .dot { color: var(--c-gold); }
.hero__sub {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.375rem);
  color: var(--c-plum);
  max-width: 28ch;
  line-height: 1.4;
  margin: 0 0 var(--space-3);
}
.hero__cta-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ---------- Hero — centred single-column variant ---------- */
.hero--center .hero__inner {
  grid-template-columns: 1fr;
  text-align: center;
  max-width: 760px;
}
.hero--center .hero__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  letter-spacing: -0.025em;
  margin-bottom: var(--space-3);
}
.hero--center .subtitle {
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Hero — full-bleed background image cover ---------- */
.hero--cover {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-bottom: none;
  min-height: 60vh;
  display: grid;
  place-items: center;
}
.hero--cover .hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero--cover .hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero--cover .hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--c-plum-deep);
  opacity: 0.6;
  z-index: 1;
}
.hero--cover .hero__inner {
  position: relative;
  z-index: 2;
  grid-template-columns: 1fr;
  text-align: center;
  align-items: center;
  justify-items: center;
  padding: var(--space-6) var(--space-3);
  max-width: 760px;
}
.hero--cover .display-heading {
  color: var(--c-cream);
  margin-bottom: var(--space-2);
}
.hero--cover .subtitle {
  color: var(--c-cream-soft);
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

/* CTA — square, no pill */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--c-plum-deep);
  color: var(--c-cream);
  padding: 0.95rem 1.5rem;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
  text-decoration: none;
}
.cta:hover {
  background: var(--c-plum);
  color: var(--c-cream);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--c-gold);
}
.cta--gold {
  background: var(--c-gold);
  color: var(--c-plum-deep);
}
.cta--gold:hover {
  background: var(--c-gold-soft);
  color: var(--c-cream);
  box-shadow: 4px 4px 0 var(--c-plum-deep);
}

.cta-link {
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-plum-deep);
  border-bottom: 1px solid var(--c-line);
  padding-bottom: 4px;
}
.cta-link:hover { color: var(--c-gold); border-color: var(--c-gold); text-decoration: none; }

/* Hero image */
.hero__figure {
  margin: 0;
  position: relative;
  border: 1px solid var(--c-line);
  background: var(--c-cream-soft);
  overflow: hidden;
  aspect-ratio: 4/5;
}
.hero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.85) sepia(0.25) contrast(1.05);
  transition: filter 600ms var(--ease), transform 600ms var(--ease);
}
.hero__figure:hover img {
  filter: grayscale(0.6) sepia(0.15);
  transform: scale(1.02);
}

/* ============================================================
   DASHBOARD
   ============================================================ */
.dashboard {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-5) var(--space-3) var(--space-6);
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: var(--space-5);
  align-items: start;
}

/* --------- Principles --------- */
.principles {
  position: sticky;
  top: var(--space-3);
  padding: var(--space-4) 0 var(--space-3);
  border-top: 3px solid var(--c-plum);
}
.principles .section-title {
  margin-bottom: var(--space-3);
}

/* --------- Posts --------- */
.posts {
  border-top: 3px solid var(--c-plum);
  padding-top: var(--space-3);
}
.posts__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--c-line);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
  gap: var(--space-1);
}
.posts__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  color: var(--c-plum-deep);
  margin: 0;
}
.posts__meta {
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  font-style: italic;
}

.post-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.post {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--c-line);
  align-items: start;
  position: relative;
  transition: background var(--dur) var(--ease);
}
.post:hover { background: rgba(64, 16, 96, 0.04); }

.post__cat {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--c-plum);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--c-plum-deep);
  background: var(--c-cream);
  letter-spacing: 0.05em;
}
.post__cat--campaign  { background: var(--c-plum-deep); color: var(--c-cream); border-color: var(--c-plum-deep); }
.post__cat--policy    { background: var(--c-gold); color: var(--c-plum-deep); border-color: var(--c-gold); }

.post__body { min-width: 0; padding-top: 6px; }
.post__meta-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: 4px;
  font-size: var(--fs-micro);
  color: var(--c-ink-soft);
  font-style: italic;
}
.post__meta-row time { font-feature-settings: "tnum"; font-style: normal; }
.post__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--c-plum-deep);
  margin: 0 0 6px;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: auto;
}
.post__title a {
  color: inherit;
  background-image: linear-gradient(var(--c-gold), var(--c-gold));
  background-size: 0 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur) var(--ease);
}
.post__title a:hover {
  color: var(--c-plum);
  text-decoration: none;
  background-size: 100% 2px;
}
.post__excerpt {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  line-height: 1.55;
  max-width: 60ch;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
@media (max-width: 720px) {
  .post__excerpt { max-width: 100%; }
}
.post__arrow {
  font-size: var(--fs-small);
  color: var(--c-plum);
  opacity: 0;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  padding-top: 14px;
}
.post:hover .post__arrow {
  opacity: 1;
  transform: translateX(4px);
}

/* ============================================================
   SINGLE ARTICLE
   ============================================================ */
.article-page {
  border-top: 1px solid var(--c-line);
}
.article {
  width: min(100%, 900px);
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) var(--space-3) var(--space-6);
}
.article__header {
  max-width: 760px;
  margin: 0 auto var(--space-5);
  text-align: center;
}
.article__title {
  max-width: 18ch;
  margin: 0 auto var(--space-3);
  color: var(--c-plum-deep);
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.article__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  color: var(--c-ink-soft);
  font-size: var(--fs-small);
}
.article__meta time {
  font-feature-settings: "tnum";
}
.article__meta-divider {
  width: 24px;
  height: 1px;
  background: var(--c-gold);
}
.article__categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.article__excerpt {
  max-width: 54ch;
  margin: var(--space-3) auto 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--c-ink-soft);
  text-wrap: balance;
}
.article__featured {
  margin: 0 0 var(--space-5);
  background: var(--c-cream-soft);
  overflow: hidden;
}
.article__featured img {
  width: 100%;
  max-height: 620px;
  object-fit: cover;
}
.article__body {
  max-width: 680px;
  margin: 0 auto;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.0625rem, 1.8vw, 1.1875rem);
  line-height: 1.75;
  color: var(--c-ink);
}
.article__body > :first-child { margin-top: 0; }
.article__body > :last-child { margin-bottom: 0; }
.article__body p,
.article__body ul,
.article__body ol,
.article__body blockquote,
.article__body figure,
.article__body img {
  margin-top: 0;
  margin-bottom: var(--space-3);
}
.article__body h2,
.article__body h3,
.article__body h4 {
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
  color: var(--c-plum-deep);
  text-wrap: balance;
}
.article__body h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
.article__body h3 { font-size: clamp(1.35rem, 2.5vw, 1.75rem); }
.article__body h4 { font-size: 1.125rem; }
.article__body ul,
.article__body ol {
  padding-left: 1.4em;
}
.article__body li { margin-bottom: 0.5rem; }
.article__body a {
  color: var(--c-plum-deep);
  text-decoration: underline;
  text-decoration-color: var(--c-gold);
  text-underline-offset: 0.2em;
}
.article__body blockquote {
  padding: var(--space-2) 0 var(--space-2) var(--space-3);
  border-left: 3px solid var(--c-gold);
  color: var(--c-plum);
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
  font-style: italic;
  line-height: 1.5;
}
.article__body blockquote > :last-child { margin-bottom: 0; }
.article__body img {
  width: auto;
  max-width: 100%;
  height: auto;
}
.article__body hr {
  width: 80px;
  margin: var(--space-5) auto;
  border: 0;
  border-top: 1px solid var(--c-gold);
}
.article__footer {
  max-width: 680px;
  margin: var(--space-5) auto 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--c-line);
}

/* ============================================================
   LEDGER ARCHIVE
   ============================================================ */
.ledger-page { border-top: 1px solid var(--c-line); }
.ledger-hero { padding: clamp(3.5rem, 8vw, 6.5rem) var(--space-3); }
.ledger-hero__inner { max-width: var(--max-w); margin: 0 auto; }
.ledger-hero .display-heading { margin-bottom: var(--space-3); }
.ledger-hero__intro {
  max-width: 58ch;
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--c-ink-soft);
}
.ledger-layout {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--space-3) var(--space-6);
  display: grid;
  grid-template-columns: minmax(220px, 290px) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.ledger-filter { position: sticky; top: var(--space-3); padding-top: var(--space-3); border-top: 3px solid var(--c-gold); }
.ledger-filter h2 { font-size: 1.35rem; margin-bottom: 0.4rem; }
.ledger-filter > p { color: var(--c-ink-soft); font-size: var(--fs-small); }
.ledger-filter__nav { margin-top: var(--space-3); border-top: 1px solid var(--c-line); }
.ledger-filter__nav a {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-ink-soft);
  font-size: var(--fs-small);
}
.ledger-filter__nav a:hover,
.ledger-filter__nav a[aria-current="page"] { color: var(--c-plum-deep); }
.ledger-filter__nav a[aria-current="page"] { font-weight: 700; }
.ledger-posts { border-top: 3px solid var(--c-plum); }
.ledger-posts__header { padding: var(--space-3) 0; border-bottom: 1px solid var(--c-line); }
.ledger-posts__header h2 { margin: 0; font-size: clamp(1.5rem, 2.5vw, 2.25rem); }
.ledger-posts__header p { margin: var(--space-1) 0 0; color: var(--c-ink-soft); }
.ledger-card {
  display: grid;
  grid-template-columns: minmax(180px, 30%) minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--c-line);
}
.ledger-card--text { grid-template-columns: 1fr; }
.ledger-card__image { aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-cream-soft); }
.ledger-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 450ms var(--ease), filter 450ms var(--ease); }
.ledger-card:hover .ledger-card__image img { transform: scale(1.025); filter: saturate(0.85); }
.ledger-card__content { min-width: 0; }
.ledger-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-1); }
.ledger-card__meta time { color: var(--c-ink-soft); font-size: var(--fs-micro); font-feature-settings: "tnum"; }
.ledger-card__categories { display: flex; flex-wrap: wrap; gap: 5px; }
.ledger-card h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin-bottom: var(--space-1); text-wrap: balance; }
.ledger-card h3 a { color: var(--c-plum-deep); }
.ledger-card h3 a:hover { color: var(--c-plum); }
.ledger-card__content > p { max-width: 58ch; color: var(--c-ink-soft); font-size: var(--fs-small); line-height: 1.65; }
.ledger-card__read { display: inline-flex; gap: 0.4rem; align-items: center; border-bottom: 1px solid var(--c-gold); font-size: var(--fs-small); font-weight: 600; }
.ledger-card__read span { transition: transform var(--dur) var(--ease); }
.ledger-card__read:hover span { transform: translateX(4px); }
.ledger-empty { padding: var(--space-5) 0; border-bottom: 1px solid var(--c-line); }
.ledger-empty h3 { margin-bottom: var(--space-1); }
.ledger-empty p { color: var(--c-ink-soft); }
.ledger-pagination { display: flex; flex-wrap: wrap; gap: var(--space-1); padding-top: var(--space-4); }
.ledger-pagination a { display: grid; place-items: center; min-width: 42px; min-height: 42px; padding: 0.5rem; border: 1px solid var(--c-line); color: var(--c-plum-deep); font-weight: 600; }
.ledger-pagination a:hover,
.ledger-pagination a[aria-current="page"] { border-color: var(--c-plum-deep); background: var(--c-plum-deep); color: var(--c-cream); }

/* ============================================================
   TAKE ACTION + CONTACT
   ============================================================ */
.action-page,
.contact-page { border-top: 1px solid var(--c-line); }
.action-hero,
.contact-hero { padding: clamp(3.5rem, 8vw, 7rem) var(--space-3); }
.action-hero__inner,
.contact-hero__inner { max-width: var(--max-w); margin: 0 auto; }
.action-hero__inner { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: var(--space-5); align-items: end; }
.action-hero .display-heading { max-width: 14ch; margin: 0; }
.action-hero__lede,
.contact-hero__inner > p:last-child { font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.15rem, 2vw, 1.5rem); font-style: italic; line-height: 1.5; color: var(--c-ink-soft); }
.action-options { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--space-3) var(--space-6); }
.action-options__intro { max-width: 600px; padding-top: var(--space-3); border-top: 3px solid var(--c-plum); }
.action-options__intro > p:last-child { color: var(--c-ink-soft); }
.action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-4); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.action-card { display: flex; flex-direction: column; min-height: 360px; padding: var(--space-4); border-right: 1px solid var(--c-line); }
.action-card:first-child { padding-left: 0; }
.action-card:last-child { padding-right: 0; border-right: 0; }
.action-card__number { margin-bottom: auto; font-family: 'Fraunces', Georgia, serif; font-size: 2.5rem; color: var(--c-gold); }
.action-card h3 { margin-top: var(--space-4); font-size: 1.5rem; }
.action-card p { color: var(--c-ink-soft); font-size: var(--fs-small); }
.action-card .cta-link { align-self: flex-start; margin-top: auto; padding-top: var(--space-2); }
.action-principle { background: var(--c-plum-deep); color: var(--c-cream); }
.action-principle__inner { max-width: 900px; margin: 0 auto; padding: clamp(4rem, 9vw, 7rem) var(--space-3); text-align: center; }
.eyebrow--dark { color: var(--c-gold); }
.action-principle blockquote { margin: 0 auto var(--space-4); font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.8rem, 4vw, 3.25rem); font-style: italic; line-height: 1.25; color: var(--c-cream); }
.action-principle .cta { display: inline-flex; }
.contact-hero { padding-bottom: var(--space-5); }
.contact-hero .display-heading { max-width: 14ch; }
.contact-hero__inner > p:last-child { max-width: 58ch; margin: 0; }
.contact-layout { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--space-3) var(--space-6); display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.contact-details { padding-top: var(--space-3); border-top: 3px solid var(--c-gold); }
.contact-details > p:not(.eyebrow) { color: var(--c-ink-soft); }
.contact-detail { margin-top: var(--space-4); padding: var(--space-2) 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.contact-detail span { display: block; margin-bottom: .25rem; color: var(--c-ink-soft); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.contact-detail a { font-family: 'Fraunces', Georgia, serif; font-size: 1.1rem; }
.contact-note { margin-top: var(--space-4); padding: var(--space-3); background: var(--c-cream-soft); border-left: 3px solid var(--c-plum); }
.contact-note h3 { font-family: 'Inter', sans-serif; font-size: .9rem; letter-spacing: 0; }
.contact-note p { margin: 0; color: var(--c-ink-soft); font-size: var(--fs-small); }
.contact-form-panel { padding: var(--space-4); background: var(--c-paper); border-top: 3px solid var(--c-plum); }
.contact-form-panel > h2 { margin-bottom: var(--space-3); font-size: clamp(1.5rem, 2.5vw, 2.25rem); }
.contact-form-panel .cms-form__intro { color: var(--c-ink-soft); font-size: var(--fs-small); }
.contact-form-panel .cms-form__grid { gap: var(--space-3) var(--space-2); }
.contact-form-panel .cms-form__label { color: var(--c-plum-deep); font-size: var(--fs-small); }
.contact-form-panel .cms-form__input { padding: .85rem 0; border: 0; border-bottom: 1px solid var(--c-line); border-radius: 0; background: transparent; color: var(--c-ink); font: inherit; }
.contact-form-panel .cms-form__input:focus { border-color: var(--c-plum); outline: 0; box-shadow: 0 2px 0 var(--c-plum); }
.contact-form-panel .cms-form__textarea { min-height: 10rem; padding: .85rem; border: 1px solid var(--c-line); }
.contact-form-panel .cms-form__actions button { display: inline-flex; align-items: center; min-height: 48px; padding: .8rem 1.25rem; border: 1px solid var(--c-plum-deep); background: var(--c-plum-deep); color: var(--c-cream); font: 600 var(--fs-small) 'Inter', sans-serif; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.contact-form-panel .cms-form__actions button:hover { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-plum-deep); }
.contact-form-panel .cms-form__success,
.contact-form-panel .cms-form__error-summary { background: var(--c-cream); }

/* ============================================================
   PUBLIC SITEMAP
   ============================================================ */
.public-sitemap-page { border-top: 1px solid var(--c-line); }
.public-sitemap-hero { padding: clamp(3.5rem, 8vw, 6.5rem) var(--space-3) var(--space-5); }
.public-sitemap-hero__inner { max-width: var(--max-w); margin: 0 auto; }
.public-sitemap-hero .display-heading { margin-bottom: var(--space-3); }
.public-sitemap-hero__inner > p:last-child {
  max-width: 56ch;
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--c-ink-soft);
}
.public-sitemap-content { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--space-3) var(--space-6); }
.cms-sitemap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.cms-sitemap__group { padding-top: var(--space-3); border-top: 3px solid var(--c-plum); }
.cms-sitemap__group:nth-child(even) { border-top-color: var(--c-gold); }
.cms-sitemap__group h2 { margin-bottom: var(--space-3); font-size: clamp(1.5rem, 2.5vw, 2.25rem); }
.cms-sitemap__group ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-line); }
.cms-sitemap__item { border-bottom: 1px solid var(--c-line); }
.cms-sitemap__item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 1rem 0;
  color: var(--c-plum-deep);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.0625rem;
  line-height: 1.35;
}
.cms-sitemap__item a::after { content: '→'; color: var(--c-gold); font-family: 'Inter', sans-serif; transition: transform var(--dur) var(--ease); }
.cms-sitemap__item a:hover { color: var(--c-plum); }
.cms-sitemap__item a:hover::after { transform: translateX(4px); }

/* ============================================================
   NOT FOUND
   ============================================================ */
.not-found-page { border-top: 1px solid var(--c-line); }
.not-found {
  max-width: var(--max-w);
  min-height: min(680px, 72vh);
  margin: 0 auto;
  padding: clamp(4rem, 10vw, 8rem) var(--space-3);
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(0, 1fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: center;
}
.not-found__code {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(7rem, 20vw, 15rem);
  font-weight: 600;
  line-height: .75;
  letter-spacing: -.08em;
  color: transparent;
  -webkit-text-stroke: 2px var(--c-gold);
  text-align: center;
}
.not-found__content { padding-top: var(--space-3); border-top: 3px solid var(--c-plum); }
.not-found__content .display-heading { max-width: 11ch; }
.not-found__content > p:not(.eyebrow) { max-width: 48ch; color: var(--c-ink-soft); }
.not-found__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }

/* ============================================================
   CARD — reusable listing component for campaigns, resources, etc.
   ============================================================ */
.card {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--c-line);
}
.card:first-of-type {
  padding-top: 0;
}
.card:last-of-type {
  border-bottom: none;
}
.card__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--c-plum-deep);
  margin: 0 0 6px;
}
.card__title a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--c-gold), var(--c-gold));
  background-size: 0 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur) var(--ease);
}
.card__title a:hover {
  color: var(--c-plum);
  background-size: 100% 2px;
  text-decoration: none;
}
.card__meta {
  font-size: var(--fs-micro);
  color: var(--c-ink-soft);
  margin: 0 0 6px;
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}
.card__body {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  line-height: 1.55;
  max-width: 60ch;
}
.card__status {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid var(--c-line);
}
.card__status--active {
  border-color: var(--c-gold);
  color: var(--c-gold);
}
.card__status--won {
  border-color: var(--c-plum);
  color: var(--c-plum);
}

/* ============================================================
   INSTAGRAM STRIP — plum band, gold gutters
   ============================================================ */
.ig-strip__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid rgba(224, 224, 224, 0.2);
}
.ig-strip__header .section-title {
  letter-spacing: -0.025em;
}
.ig-strip__handle {
  font-size: var(--fs-small);
  letter-spacing: 0.1em;
  color: var(--c-gold);
  text-decoration: none;
  white-space: nowrap;
}
.ig-strip__handle:hover { color: var(--c-cream); }
.ig-strip__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  background: var(--c-gold);
  border: 2px solid var(--c-gold);
}
.ig-tile {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  display: block;
  background: var(--c-cream-soft);
}
.ig-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
  opacity: 0.92;
}
.ig-tile:hover img {
  opacity: 0.7;
  transform: scale(1.04);
}
.ig-tile::after {
  content: "+";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--c-cream);
  background: rgba(48, 0, 80, 0.7);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.ig-tile:hover::after { opacity: 1; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--c-cream);
  padding: var(--space-5) 0 var(--space-3);
  border-top: 4px solid var(--c-plum);
}
.site-footer__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--space-3);
}
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--c-line);
}
.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.site-footer__brand img {
  width: 220px;
  height: auto;
}
.site-footer__brand p {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  line-height: 1.6;
}
.site-footer__brand strong {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--c-plum-deep);
  display: block;
}
.site-footer__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.site-footer__nav h3 {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin: 0 0 var(--space-2);
}
.site-footer__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1rem;
}
.site-footer__nav ul a { color: var(--c-plum-deep); }
.site-footer__nav ul a:hover { color: var(--c-plum); }

/* CMS menu list reset — strips default <ul>/<li> styling so the
   generated `.menu` / `.menu__item` wrappers lay out flat inside
   the existing footer column. */
.site-footer__nav .menu,
.site-footer__nav .menu__item {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__nav .menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1rem;
}

/* Social links collection ("social") — small horizontal list under
   the brand block. Anchor colour matches the brand block links. */
.site-footer__social {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.site-footer__social a {
  color: var(--c-plum-deep);
  border-bottom: 1px solid var(--c-line);
  padding-bottom: 2px;
}
.site-footer__social a:hover {
  color: var(--c-plum);
  border-bottom-color: var(--c-gold);
}

.site-footer__manifesto {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4) 0;
  align-items: center;
}
.site-footer__manifesto p {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  line-height: 1.3;
  color: var(--c-plum-deep);
  margin: 0;
}
.site-footer__manifesto p strong {
  font-style: normal;
  font-weight: 600;
  color: var(--c-plum);
}

.site-footer__legal {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-micro);
  letter-spacing: 0.05em;
  color: var(--c-ink-soft);
}
.site-footer__legal a { color: var(--c-ink-soft); }
.site-footer__legal a:hover { color: var(--c-plum); }
.site-footer__legal-links,
.site-footer__legal-links p {
  margin: 0;
  font: 500 0.6875rem/1.45 'Inter', sans-serif;
  letter-spacing: 0.04em;
}
.site-footer__legal-links a {
  font-family: 'Inter', sans-serif;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* ============================================================
   CMS-rendered content classes

   `.post-card` is the markup emitted by `cms:posts` (see
   lib/markers.php renderPosts). We restyle it to fit the editorial
   palette rather than ship the bundled SaaS look.

   `.cms-block` wraps every `cms:block` output; the editor's CMS
   wraps Block content in this div. It is mostly transparent by
   design — Block view files render their own meaningful elements.

   `.cms-block__field` is the per-field wrapper emitted by the
   built-in blocks/default.php view.
   ============================================================ */
.post-card {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--c-line);
  background: transparent;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--space-3);
  align-items: start;
}
.post-card::before {
  /* monogram square for the first article category, like the static */
  content: "";
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--c-plum);
  background: var(--c-cream);
}
.post-card h3 {
  margin: 0 0 6px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--c-plum-deep);
  grid-column: 2;
}
.post-card h3 a {
  color: inherit;
  background-image: linear-gradient(var(--c-gold), var(--c-gold));
  background-size: 0 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur) var(--ease);
}
.post-card h3 a:hover {
  color: var(--c-plum);
  text-decoration: none;
  background-size: 100% 2px;
}
.post-card p {
  grid-column: 2;
  margin: 0;
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  line-height: 1.55;
}
.post-card__categories,
.post__categories {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 6px;
  font-size: var(--fs-micro);
}
.post-category {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid var(--c-line);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  text-decoration: none;
  font-size: 0.7rem;
}
.post-category:hover {
  border-color: var(--c-gold);
  color: var(--c-plum-deep);
}

/* Layout pass — renderPosts emits <article class="post-card">. Make
   the list behave like the earlier editorial ledger by removing the
   bullet style and tucking the first card up against the header. */
.post-list .post-card {
  list-style: none;
}

.cms-block,
.cms-block--hero-title,
.cms-block--hero-subtitle,
.cms-block--principles-heading {
  /* Block wrappers stay transparent — the underlying view renders
     whatever element it wants. The classes from custom_css_class
     remain on the wrapper for any per-Block styling. */
}

/* When the principles collection is rendered without a view file
   the default collection view emits .collection wrappers; keep
   margins sensible just in case. */
.collection { margin: 0; padding: 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Allow flex/grid children to actually shrink below intrinsic content width */
.site-header__inner,
.dashboard,
.principles,
.posts,
.posts__title,
.posts__header,
.post,
.post__body,
.post__title,
.post__title a,
.hero__inner,
.hero__figure,
.hero__cta-row,
.cta,
.site-footer__inner,
.site-footer__top,
.site-footer__brand,
.site-footer__nav,
.site-footer__manifesto,
.site-footer__manifesto p,
.band__inner,
.ig-strip__header,
.ig-strip__grid,
.ig-tile,
.card,
.card__title,
.card__title a,
.card__meta,
.card__body {
  min-width: 0;
}

@media (max-width: 960px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .hero__figure { aspect-ratio: 16/10; max-width: 560px; }
  .dashboard {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .principles { position: static; }
  .ledger-layout { grid-template-columns: 1fr; gap: var(--space-4); }
  .ledger-filter { position: static; }
  .ledger-filter__nav { display: flex; flex-wrap: wrap; gap: var(--space-1); border: 0; }
  .ledger-filter__nav a { gap: var(--space-1); padding: 0.55rem 0.8rem; border: 1px solid var(--c-line); }
  .action-hero__inner { grid-template-columns: 1fr; gap: var(--space-3); }
  .contact-layout { grid-template-columns: 1fr; gap: var(--space-4); }
  .site-footer__top {
    grid-template-columns: 1fr;
  }
  .site-footer__manifesto {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

@media (max-width: 720px) {
  .site-header { padding: var(--space-3) var(--space-3) var(--space-2); }
  .site-header__inner { min-height: 132px; }
  .site-header__logo img { height: 110px; }

  /* Show the hamburger button on mobile */
  .site-nav__toggle { display: grid; }

  /* Hide the nav by default; reveal when .is-open */
  .site-nav {
    position: fixed;
    top: 0; right: 0;
    bottom: 0;
    width: min(320px, 90vw);
    background: var(--c-plum-deep);
    border: 0;
    border-left: 1px solid var(--c-gold);
    transform: translateX(100%);
    transition: transform 240ms var(--ease);
    overflow-y: auto;
    z-index: 50;
    box-shadow: -8px 0 32px rgba(0,0,0,0.18);
    display: flex;
    flex-direction: column;
    padding-top: 80px;            /* leave room for the absolutely-positioned close button */
  }
  .site-nav.is-open {
    transform: translateX(0);
  }

  /* Hamburger toggle is the Menu icon only — close is handled by the in-panel X */

  /* In-panel close button — gold X on plum, top-right inside the panel */
  .site-nav__close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: rgba(176, 128, 32, 0.15);   /* subtle gold tint so the button is discoverable */
    border: 1.5px solid var(--c-gold);
    color: var(--c-gold);
    cursor: pointer;
    z-index: 2;
    transition: background var(--dur) var(--ease),
                color var(--dur) var(--ease),
                transform var(--dur) var(--ease);
  }
  .site-nav__close:hover,
  .site-nav__close:focus-visible {
    background: var(--c-gold);
    color: var(--c-plum-deep);
    transform: rotate(90deg);
    outline: none;
  }

  .site-nav__inner {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: var(--space-3) var(--space-3) var(--space-3);
  }
  .site-nav__inner::before,
  .site-nav__inner::after { display: none; }
  .site-nav__inner a {
    display: block;
    padding: var(--space-3) var(--space-2);
    color: var(--c-cream);
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.375rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    border-bottom: 1px solid rgba(224, 224, 224, 0.12);
    border-radius: 0;
  }
  .site-nav__inner a:last-child { border-bottom: 0; }
  .site-nav__inner a:hover,
  .site-nav__inner a[aria-current="page"] {
    color: var(--c-gold);
    border-bottom-color: rgba(224, 224, 224, 0.12);
  }
  .site-nav__inner a[aria-current="page"] {
    border-left: 3px solid var(--c-gold);
    padding-left: calc(var(--space-2) - 3px);
  }
  .site-nav__item--has-children {
    grid-template-columns: minmax(0, 1fr) 3rem;
    align-items: stretch;
  }
  .site-nav__item--has-children > .site-nav__parent-label {
    min-width: 0;
    border-bottom: 1px solid rgba(224, 224, 224, 0.12);
  }
  .site-nav__submenu-toggle {
    width: 3rem;
    height: auto;
    min-height: 3.5rem;
    border-bottom: 1px solid rgba(224, 224, 224, 0.12);
  }
  .site-nav__submenu-toggle span {
    width: 0.6rem;
    height: 0.6rem;
  }
  .site-nav__sub,
  .site-nav__subitem > .site-nav__sub {
    position: static;
    grid-column: 1 / -1;
    min-width: 0;
    padding: 0.25rem 0 0.55rem var(--space-2);
    background: rgba(13, 0, 27, 0.22);
    border: 0;
    border-left: 2px solid rgba(176, 128, 32, 0.55);
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: none;
  }
  .site-nav__sub[hidden] { display: none; }
  .site-nav__subitem.site-nav__item--has-children {
    display: grid;
  }
  .site-nav__inner .site-nav__sub a {
    padding: 0.7rem 0.85rem;
    color: var(--c-cream-soft);
    font-family: 'Inter', sans-serif;
    font-size: 0.925rem;
  }
  .site-nav__inner .site-nav__sub a[aria-current="page"] {
    border-left: 0;
    padding-left: 0.85rem;
  }

  /* Backdrop — toggled via the is-open class on body */
  body.nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 4, 32, 0.45);
    z-index: 49;
  }
  .hero { padding: var(--space-4) 0; }
  .hero--cover { min-height: 50vh; }
  .hero--cover .hero__inner { padding: var(--space-5) var(--space-3); }
  .hero__title { font-size: clamp(1.75rem, 9vw, 3rem); }
  .hero__sub { font-size: 1rem; max-width: 100%; }
  .hero__inner { gap: var(--space-3); }
  .post { grid-template-columns: 40px 1fr; }
  .post__arrow { display: none; }
  .post__cat { width: 36px; height: 36px; font-size: 0.85rem; }
  .ig-strip__grid { grid-template-columns: repeat(3, 1fr); }
  .site-footer__brand img { width: 180px; }
  .site-footer__manifesto { text-align: left; }
  .post__title { font-size: 1rem; }
  .post__excerpt { font-size: 0.8125rem; }
  .section-title { font-size: 1.375rem; }
  .lede { font-size: 0.95rem; }
  .article { padding: var(--space-4) var(--space-2) var(--space-5); }
  .article__header { margin-bottom: var(--space-4); }
  .article__title { font-size: clamp(2.25rem, 12vw, 3.5rem); }
  .article__featured { margin-inline: calc(var(--space-2) * -1); margin-bottom: var(--space-4); }
  .article__meta-divider { display: none; }
  .article__meta { flex-direction: column; }
  .article__body h2,
  .article__body h3,
  .article__body h4 { margin-top: var(--space-4); }
  .ledger-hero { padding: var(--space-4) var(--space-2); }
  .ledger-layout { padding: 0 var(--space-2) var(--space-5); }
  .ledger-card { grid-template-columns: 1fr; padding: var(--space-3) 0; }
  .ledger-card__image { aspect-ratio: 16 / 9; }
  .action-hero,
  .contact-hero { padding: var(--space-4) var(--space-2); }
  .action-options,
  .contact-layout { padding-left: var(--space-2); padding-right: var(--space-2); }
  .action-grid { grid-template-columns: 1fr; }
  .action-card { min-height: 0; padding: var(--space-3) 0; border-right: 0; border-bottom: 1px solid var(--c-line); }
  .action-card:last-child { border-bottom: 0; }
  .action-card__number { margin-bottom: var(--space-3); }
  .action-card h3 { margin-top: 0; }
  .action-card .cta-link { margin-top: var(--space-2); }
  .contact-form-panel { padding: var(--space-3) var(--space-2); }
  .public-sitemap-hero { padding: var(--space-4) var(--space-2); }
  .public-sitemap-content { padding: 0 var(--space-2) var(--space-5); }
  .cms-sitemap { grid-template-columns: 1fr; gap: var(--space-4); }
  .not-found { min-height: 0; grid-template-columns: 1fr; padding: var(--space-5) var(--space-2); gap: var(--space-4); }
  .not-found__code { text-align: left; }
  .enum-list li { grid-template-columns: 28px 1fr; padding: var(--space-2) 0; }
  .enum-list__label { font-size: 1.0625rem; }
  .band__inner .section-title { font-size: 1.25rem; }
}

@media (max-width: 480px) {
  body { font-size: 1rem; }
  .site-header__inner { min-height: 120px; }
  .site-header__logo img { height: 96px; }
  .site-nav__toggle { width: 40px; height: 40px; }
  .site-nav__inner { gap: 0.4rem var(--space-2); }
  .site-nav__inner > a {
    font-size: 0.7rem;
    letter-spacing: 0.03em;
  }
  .hero__title {
    font-size: clamp(1.5rem, 8vw, 2rem);
    letter-spacing: -0.025em;
    line-height: 1;
  }
  .hero__sub { font-size: 0.9375rem; }
  .hero__cta-row { flex-direction: column; align-items: stretch; }
  .hero__cta-row .cta, .hero__cta-row .cta-link {
    text-align: center; justify-content: center;
  }
  .dashboard { padding: var(--space-4) var(--space-2); }
  .section-title { font-size: 1.5rem; }
  .posts__title { font-size: 1.5rem; }
  .posts__header { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .band__inner .section-title { font-size: 1.25rem; }
  .ig-strip__header { flex-direction: column; align-items: flex-start; }
  .ig-strip__grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer__brand img { width: 140px; }
  .site-footer__brand strong { font-size: 1.0625rem; }
  .site-footer__brand p { font-size: 0.8125rem; }
  .site-footer__nav { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .site-footer__manifesto p { font-size: 1rem; }
  .site-footer__legal { font-size: 0.65rem; }
}

/* CMS integration adjustments. The CMS menu/gallery renderers emit list
   wrappers, while the supplied static previews contain direct anchors. */
.site-nav__inner > .menu {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(0.15rem, 1vw, 0.6rem);
  margin: 0;
  padding: 0;
}
.site-nav__inner > .menu.site-nav {
  position: static;
  inset: auto;
  width: auto;
  min-height: 0;
  overflow: visible;
  transform: none;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.site-nav__inner .menu__item { list-style: none; margin: 0; padding: 0; }
.site-nav__inner .menu__item a { white-space: nowrap; }

.hero-title h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: var(--fs-display);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--c-plum-deep);
  margin: 0 0 var(--space-3);
}
.hero-title h1 em { color: var(--c-plum); font-style: italic; }
.hero-subtitle p {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.375rem);
  color: var(--c-plum);
  max-width: 28ch;
  line-height: 1.4;
  margin: 0 0 var(--space-3);
}
.principles-heading h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  letter-spacing: -0.025em;
  color: var(--c-plum-deep);
  margin: 0 0 var(--space-3);
}
.principles-heading h2 em { color: var(--c-plum); font-style: italic; }
.principles__blurb {
  display: block;
  margin-top: 0.35rem;
  color: var(--c-ink-soft);
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1.45;
}

.ig-strip { background: var(--c-plum-deep); padding: var(--space-5) 0; }
.ig-strip__inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--space-3); }
.ig-strip__grid > .cms-gallery,
.ig-strip__grid .gallery {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ig-strip__grid .gallery__item {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin: 0;
  background: var(--c-cream-soft);
}
.gallery__item figure { margin: 0; }
.ig-strip__grid .gallery__item figure { width: 100%; height: 100%; }
.ig-strip__grid .gallery__item a { display: block; width: 100%; height: 100%; }
.ig-strip__grid .gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
.ig-strip__grid .gallery__item:hover img { opacity: 0.7; transform: scale(1.04); }
.ig-strip__grid figcaption { display: none; }

.cms-gallery .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.cms-gallery .gallery__item { margin: 0; }
.cms-gallery .gallery__item img { display: block; width: 100%; height: auto; }
.cms-gallery .gallery__item figcaption { padding-top: var(--space-2); }
.cms-gallery .gallery__item figcaption h3 { margin: 0 0 var(--space-1); }
.cms-gallery .gallery__item figcaption p { margin: 0; }
.ig-strip__grid .gallery { display: contents; }
.ig-strip__grid .gallery__item figcaption { display: none; }
.ig-strip__grid .gallery__item img { height: 100%; object-fit: cover; }
.posts__more-row { margin-top: var(--space-3); }

@media (max-width: 720px) {
  .site-nav__inner > .menu,
  .site-nav__inner > .menu.site-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
  }
  .site-nav__inner .menu__item a { white-space: normal; }
}

img, video, svg, iframe, table,
h1, h2, h3, h4, .display-heading {
  max-width: 100%;
}

/* ============================================================
   MOTION + FOCUS
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}
:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
}
.cta:focus-visible {
  outline-offset: 4px;
}