/* The look of the website. No build step: nginx serves this file exactly as it
   stands here.

   The values come from two sources, and the first one wins any argument:
     1. the tool's delivered join form (frontend/beitritt.html), because that is
        what is live and what a visitor has already seen,
     2. the draft in design/entwurf.dc.html for layout, spacing and components.

   No content lives here. Every text of the page comes from content.json. */

/* ── Fonts ────────────────────────────────────────────────────────────────────
   Both self-hosted, never from Google. Bricolage is byte-identical to the tool's
   file (frontend/fonts/) so that the page and the embedded form show the same
   typeface; Newsreader comes from the draft on top of that.
   Both are variable: ONE file per character range carries every weight. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Newsreader;
  font-style: normal; font-weight: 300 600; font-display: swap;
  src: url('fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Newsreader;
  font-style: normal; font-weight: 300 600; font-display: swap;
  src: url('fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
  /* ⚠ These six are inherited by the embedded form and donation page. CSS does
     NOT cross the iframe boundary: beitritt-embed.js reads exactly these names
     off :root and appends them to the iframe's address. Change a colour HERE if
     you want the form to follow; every other variable in this file never
     reaches the iframe.
     ⚠ Their names are a contract with the tool, not our naming choice. They
     stay exactly as they are.
     --dsi-font is a choice among what the tool ships
     (bricolage | system | sans | serif), not a free value. */
  --dsi-accent: #F14902;
  --dsi-bg: #F1E8E0;
  --dsi-surface: #FFFDFB;
  --dsi-ink: #262422;
  --dsi-radius: 10px;
  --dsi-font: bricolage;

  --sand: #F1E8E0;
  --sand-deep: #E7DAD0;
  --surface: #FFFDFB;
  --dark: #121212;
  --darker: #0A0A0A;
  --accent: #F14902;
  --accent-2: #C0380A;
  /* ⚠ Only for the kicker on a sand-deep band. --accent-2 reaches 4.55 on sand,
     which passes, but only 4.02 on sand-deep. Rather than shifting --accent-2,
     which is the tool's tone and shared with the embedded form, the darker
     ground gets a darker tone. 4.65, so with a little room above the line. */
  --accent-deep: #AF3309;

  --ink: #262422;
  --ink-2: #3D3A37;
  --muted: #615B56;
  /* ⚠ Measured, not chosen: #756E69 from the draft reaches only 4.14 on sand and
     3.66 on sand-deep, so it misses AA (4.5) for the small labels that use it.
     Darkened along the same hue until the harder ground passes. `npm run check`
     keeps it that way. */
  --muted-2: #66605B;

  --light: #F1E8E0;
  --light-82: rgba(241, 232, 224, .82);
  --light-74: rgba(241, 232, 224, .74);
  /* ⚠ .45 measured 3.92 on --darker and missed AA. .50 reaches 4.60. */
  --light-50: rgba(241, 232, 224, .50);
  --light-16: rgba(241, 232, 224, .16);

  --line: rgba(51, 51, 51, .12);
  --line-strong: rgba(51, 51, 51, .22);

  --sans: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: Newsreader, Georgia, 'Times New Roman', serif;

  --width: 1160px;
  --width-header: 1240px;
  --width-text: 760px;
  --header-height: 66px;
}

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

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

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: var(--darker); }

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

/* Anchor targets land under the sticky header unless something pushes them. */
[id] { scroll-margin-top: calc(var(--header-height) + 16px); }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: 12px; top: -100px; z-index: 90;
  padding: 12px 18px; border-radius: 10px;
  background: var(--dark); color: var(--light);
  font: 600 .95rem/1 var(--sans);
}
.skip:focus { top: 12px; }

/* ── Recurring components ─────────────────────────────────────────────────── */
.wrap {
  max-width: var(--width);
  margin: 0 auto;
  padding: clamp(56px, 9vw, 120px) clamp(20px, 5vw, 64px);
}
.wrap--narrow { max-width: calc(var(--width-text) + 2 * 64px); }
.wrap--tight-top { padding-top: clamp(48px, 8vw, 96px); }
.wrap--tight-bottom { padding-bottom: clamp(24px, 4vw, 48px); }

.band--sand {
  background: var(--sand-deep);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.band--dark { background: var(--dark); color: var(--light); }
.band--darker { background: var(--darker); color: var(--light); }

.kicker {
  font: 700 .72rem/1 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 0 0 22px;
}
.kicker--light { color: var(--accent); }
.band--sand .kicker { color: var(--accent-deep); }

.heading-1 {
  font: 600 clamp(2.2rem, 7vw, 4.4rem)/1 var(--sans);
  letter-spacing: -.032em;
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}
.heading-2 {
  font: 600 clamp(1.9rem, 5vw, 3rem)/1.05 var(--sans);
  letter-spacing: -.028em;
  margin: 0;
  text-wrap: balance;
}
.heading-3 {
  font: 600 clamp(1.6rem, 4vw, 2.4rem)/1.1 var(--sans);
  letter-spacing: -.026em;
  margin: 0 0 32px;
}

.prose {
  font: 400 clamp(1.02rem, 2.2vw, 1.18rem)/1.7 var(--serif);
  color: var(--ink-2);
  margin: 0 0 18px;
  max-width: 62ch;
  text-wrap: pretty;
}
.prose:last-child { margin-bottom: 0; }
.prose--light { color: var(--light-82); }
.prose--large {
  font: 400 clamp(1.15rem, 2.8vw, 1.45rem)/1.6 var(--serif);
  color: var(--ink);
}

.bullets {
  margin: 12px 0 0;
  padding: 0 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bullets li {
  font: 400 1.02rem/1.6 var(--serif);
  color: var(--ink-2);
  max-width: 64ch;
}

.label {
  font: 500 .78rem/1.4 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 15px 26px;
  border: 0;
  border-radius: 11px;
  font: 600 .98rem/1 var(--sans);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.button--accent { background: var(--accent); color: var(--darker); }
.button--accent:hover { background: var(--sand); }
.button--dark { background: var(--dark); color: var(--light); }
.button--dark:hover { background: var(--accent); color: var(--darker); }
.button--outline { border: 1px solid rgba(51, 51, 51, .28); color: var(--dark); }
.button--outline:hover { background: rgba(51, 51, 51, .06); }
.button--outline-light { border: 1px solid rgba(241, 232, 224, .35); color: var(--light); }
.button--outline-light:hover { background: rgba(241, 232, 224, .1); }

.buttons { display: flex; flex-wrap: wrap; gap: 12px; }

.textlink {
  display: inline-block;
  font: 600 .94rem/1 var(--sans);
  color: var(--dark);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 4px;
}
.textlink:hover { color: var(--accent-2); }

/* ── Header and navigation ────────────────────────────────────────────────── */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(241, 232, 224, .94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  max-width: var(--width-header);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px clamp(16px, 4vw, 48px);
}
.header__logo { flex: none; margin-right: auto; display: flex; align-items: center; }
.header__logo img { height: 46px; width: auto; }

.nav { display: flex; align-items: center; gap: 2px; flex: none; }
.nav a {
  flex: none;
  padding: 9px 13px;
  border-radius: 9px;
  font: 500 .92rem/1 var(--sans);
  white-space: nowrap;
  color: var(--ink-2);
}
.nav a:hover { background: rgba(51, 51, 51, .07); color: var(--dark); }
.nav a[aria-current] { color: var(--dark); background: rgba(51, 51, 51, .07); }

.header__cta {
  flex: none;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 10px;
  background: var(--dark);
  color: var(--light);
  font: 600 .9rem/1 var(--sans);
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.header__cta:hover { background: var(--accent); color: var(--darker); }

.menu-toggle {
  display: none;
  flex: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0 11px;
  border: 1px solid rgba(51, 51, 51, .2);
  border-radius: 11px;
  background: transparent;
  cursor: pointer;
}
.menu-toggle span { display: block; height: 2px; border-radius: 2px; background: var(--dark); }

.menu {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--sand);
  padding: 8px clamp(16px, 4vw, 48px) 22px;
  flex-direction: column;
}
.header[data-menu='open'] .menu { display: flex; }
/* ⚠ `:not(.button)` is load-bearing, not tidiness. The last child of the menu
   is the "Mitglied werden" button, and it is an `a` like every entry above it.
   A plain `.menu a { color }` beats `.button--dark { color }` on specificity
   (0,1,1 against 0,1,0), so the button drew --ink on its own --dark ground:
   measured on 2026-08-31 as #262422 on #121212, a contrast of 1.1, which on a
   phone looks like a black rectangle with no label. Every declaration here that
   the button also carries has to keep the exclusion. */
.menu a:not(.button) {
  min-height: 54px;
  display: flex;
  align-items: center;
  font: 500 1.08rem/1 var(--sans);
  color: var(--ink);
  border-bottom: 1px solid rgba(51, 51, 51, .1);
}
.menu a:not(.button):hover { color: var(--accent-2); }
.menu .button { margin-top: 18px; }

@media (max-width: 919px) {
  .header .nav, .header__cta { display: none; }
  .menu-toggle { display: flex; }
}
@media (min-width: 920px) {
  .menu { display: none !important; }
}

/* ── Home page: hero ──────────────────────────────────────────────────────── */
.hero {
  background: var(--dark);
  color: var(--light);
  padding: clamp(64px, 11vw, 140px) clamp(20px, 5vw, 64px) 0;
  overflow: hidden;
}
.hero__inner { max-width: var(--width); margin: 0 auto; }
.hero h1 {
  font: 600 clamp(2.5rem, 8.4vw, 6rem)/.98 var(--sans);
  letter-spacing: -.035em;
  margin: 0;
  max-width: 19ch;
  text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero__text {
  font: 300 clamp(1.15rem, 3vw, 1.6rem)/1.45 var(--serif);
  color: rgba(241, 232, 224, .72);
  margin: 32px 0 0;
  max-width: 46ch;
}
.hero .buttons { margin: 44px 0 clamp(56px, 9vw, 96px); }
.hero__image {
  width: 100%;
  aspect-ratio: 16 / 7;
  min-height: 220px;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
}
.hero__image img { width: 100%; height: 100%; object-fit: cover; }

/* ── Home page: two-column text sections ──────────────────────────────────── */
.two-columns {
  display: grid;
  gap: clamp(28px, 5vw, 64px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: start;
}
.two-columns .heading-2 { max-width: 20ch; }

/* ── News cards on the home page ──────────────────────────────────────────── */
.section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 44px;
}

.cards {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.card {
  display: flex;
  flex-direction: column;
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .15s ease;
}
.card:hover { border-color: var(--accent); }
/* ⚠ The post images are square event posters with text burnt into them. The
   slot stays square, otherwise it cuts into that text. */
.card__image { aspect-ratio: 1 / 1; overflow: hidden; background: var(--sand-deep); }
.card__image img { width: 100%; height: 100%; object-fit: cover; }
.card__body {
  padding: 24px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.card__kicker {
  font: 700 .7rem/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.card__title {
  font: 600 1.22rem/1.25 var(--sans);
  letter-spacing: -.015em;
  margin: 0;
  color: var(--ink);
  text-wrap: pretty;
}
.card__teaser {
  font: 400 1rem/1.6 var(--serif);
  color: var(--muted);
  margin: 0;
}

/* ── News page: the full posts ────────────────────────────────────────────── */
.posts {
  max-width: var(--width);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px) clamp(56px, 9vw, 110px);
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 5vw, 64px);
}
.post {
  display: grid;
  gap: clamp(20px, 4vw, 44px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: start;
  padding-top: clamp(28px, 4vw, 48px);
  border-top: 1px solid rgba(51, 51, 51, .14);
}
.post__image {
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--sand-deep);
}
.post__image img { width: 100%; height: 100%; object-fit: cover; }
.post__kicker {
  display: block;
  font: 700 .7rem/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 0 0 14px;
}
.post h2 {
  font: 600 clamp(1.4rem, 3.2vw, 2rem)/1.15 var(--sans);
  letter-spacing: -.022em;
  margin: 0 0 18px;
  text-wrap: pretty;
}

/* ── Goals ────────────────────────────────────────────────────────────────── */
.goals {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--light-16);
  border-top: 1px solid var(--light-16);
}
.goal {
  background: var(--darker);
  padding: clamp(26px, 3.6vw, 40px) 0;
  display: grid;
  gap: clamp(14px, 3vw, 48px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: start;
}
.goal__head { display: flex; gap: 16px; align-items: baseline; }
.goal__num { flex: none; font: 600 .95rem/1.5 var(--sans); color: var(--accent); }
.goal h3 {
  font: 600 clamp(1.2rem, 2.6vw, 1.5rem)/1.22 var(--sans);
  letter-spacing: -.018em;
  margin: 0;
  text-wrap: pretty;
}
.goal p {
  font: 400 1.04rem/1.7 var(--serif);
  color: var(--light-74);
  margin: 0;
  max-width: 62ch;
  text-wrap: pretty;
}

/* ── Team ─────────────────────────────────────────────────────────────────── */
.team__intro {
  font: 400 clamp(1.05rem, 2.3vw, 1.2rem)/1.7 var(--serif);
  color: var(--muted);
  margin: 20px 0 clamp(36px, 6vw, 64px);
  max-width: 56ch;
  text-wrap: pretty;
}
.people {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}
.person { display: flex; flex-direction: column; gap: 14px; }
.person__photo {
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  background: var(--sand-deep);
}
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
.person h3 {
  font: 600 1.05rem/1.3 var(--sans);
  letter-spacing: -.01em;
  margin: 0;
  color: var(--ink);
}
.person__role { font: 400 .95rem/1.5 var(--serif); color: var(--accent-2); margin: 4px 0 0; }
.person__task { font: 400 .95rem/1.5 var(--serif); color: var(--muted-2); margin: 2px 0 0; }

/* ── Contact ──────────────────────────────────────────────────────────────── */
.contact {
  display: grid;
  gap: clamp(24px, 4vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  align-items: start;
}
.contact__column { display: flex; flex-direction: column; gap: 24px; }
.contact__label {
  font: 500 .76rem/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 8px;
}
.contact__value { font: 400 1.15rem/1.5 var(--serif); color: var(--ink); margin: 0; }
a.contact__value:hover { color: var(--accent-2); }
.contact__social { display: flex; flex-wrap: wrap; gap: 10px; }
.contact__social a {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--dark);
}
.contact__social a:hover { border-color: var(--accent-2); color: var(--accent-2); }
.contact__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  background: var(--sand);
  border-radius: 18px;
  padding: clamp(24px, 4vw, 36px);
}
.contact__card h3 {
  font: 600 clamp(1.3rem, 3vw, 1.7rem)/1.2 var(--sans);
  letter-spacing: -.02em;
  margin: 0;
}

/* ── The two call-to-action cards ─────────────────────────────────────────── */
.cta-pair {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.cta {
  border-radius: 20px;
  padding: clamp(32px, 5vw, 52px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.cta h3 {
  font: 600 clamp(1.5rem, 3.4vw, 2.1rem)/1.1 var(--sans);
  letter-spacing: -.025em;
  margin: 0;
}
.cta p { font: 400 1.08rem/1.65 var(--serif); margin: 0; }
.cta--dark { background: var(--dark); color: var(--light); }
.cta--dark p { color: rgba(241, 232, 224, .76); }
.cta--sand { background: var(--sand-deep); color: var(--dark); }
.cta--sand p { color: var(--muted); }

/* ── Joining ──────────────────────────────────────────────────────────────── */
.benefits {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.benefit {
  background: var(--sand-deep);
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.benefit h3 {
  font: 600 1.1rem/1.25 var(--sans);
  letter-spacing: -.012em;
  margin: 0;
  color: var(--dark);
}
.benefit p { font: 400 1.02rem/1.6 var(--serif); color: var(--muted); margin: 0; text-wrap: pretty; }

.steps { display: flex; flex-direction: column; }
.step { display: grid; grid-template-columns: auto 1fr; column-gap: clamp(20px, 3vw, 32px); }
.step__rail { display: flex; flex-direction: column; align-items: center; }
.step__num {
  width: 38px; height: 38px; flex: none;
  border-radius: 99px;
  background: var(--accent);
  /* ⚠ Not white: white on this orange is 3.69 and misses AA. --darker reaches
     5.37, and it is what .button--accent already puts on the same ground. */
  color: var(--darker);
  display: flex; align-items: center; justify-content: center;
  font: 600 .85rem/1 var(--sans);
}
.step__line { flex: 1; width: 1px; background: var(--line-strong); }
.step:last-child .step__line { background: transparent; }
.step__body { padding: 4px 0 clamp(30px, 4vw, 44px); }
.step h3 {
  font: 600 clamp(1.15rem, 2.6vw, 1.45rem)/1.2 var(--sans);
  letter-spacing: -.018em;
  margin: 0 0 10px;
  color: var(--dark);
  text-wrap: pretty;
}
.step p {
  font: 400 clamp(1rem, 2.1vw, 1.1rem)/1.65 var(--serif);
  color: var(--ink-2);
  margin: 0;
  max-width: 52ch;
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }
}

/* ── The embedded form and donation page ──────────────────────────────────── */
.embed {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 80px) clamp(20px, 5vw, 48px) clamp(56px, 9vw, 110px);
}
.embed iframe { width: 100%; border: 0; display: block; }

/* ── Imprint and privacy policy ───────────────────────────────────────────── */
.legal { max-width: var(--width-text); margin: 0 auto; padding: clamp(48px, 8vw, 96px) clamp(20px, 5vw, 48px) clamp(56px, 9vw, 110px); }
.legal h1 {
  font: 600 clamp(2rem, 6vw, 3.4rem)/1.02 var(--sans);
  letter-spacing: -.03em;
  margin: 0 0 8px;
}
.legal h2 {
  font: 600 clamp(1.4rem, 3.4vw, 1.9rem)/1.2 var(--sans);
  letter-spacing: -.02em;
  margin: 48px 0 0;
}
.legal h3 {
  font: 600 1.12rem/1.35 var(--sans);
  margin: 34px 0 0;
  color: var(--dark);
}
.legal p {
  font: 400 1.05rem/1.75 var(--serif);
  color: var(--ink-2);
  margin: 14px 0 0;
  white-space: pre-line;
}
.legal ul { margin: 14px 0 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 10px; }
.legal li { font: 400 1.05rem/1.7 var(--serif); color: var(--ink-2); }
.legal__updated { font: 400 .95rem/1.5 var(--serif); color: var(--muted-2); margin: 0 0 28px; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.footer { background: var(--darker); color: rgba(241, 232, 224, .7); }
.footer__inner {
  max-width: var(--width);
  margin: 0 auto;
  padding: clamp(48px, 7vw, 88px) clamp(20px, 5vw, 64px) 32px;
  display: grid;
  gap: 36px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
/* ⚠ The dark logo disappears on this ground: the mark's grey is #393939. The
   LIGHT version belongs here. Always check a logo against the ground it really
   stands on, never against white. */
.footer__mark { width: 64px; height: 64px; object-fit: contain; }
.footer__name {
  font: 600 1.1rem/1.35 var(--sans);
  letter-spacing: -.015em;
  color: var(--light);
  margin: 18px 0 0;
  max-width: 18ch;
}
.footer__group { display: flex; flex-direction: column; gap: 10px; }
.footer__group h2 {
  font: 500 .74rem/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--light-50);
  margin: 0 0 4px;
}
.footer__group a { font: 400 1rem/1.4 var(--serif); color: rgba(241, 232, 224, .78); }
.footer__group a:hover { color: var(--accent); }
.footer__bottom { max-width: var(--width); margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px) 40px; }
.footer__bottom p {
  font: 400 .92rem/1.5 var(--serif);
  color: var(--light-50);
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid rgba(241, 232, 224, .14);
}

/* ── When no script runs ──────────────────────────────────────────────────── */
.no-script {
  max-width: var(--width-text);
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) clamp(20px, 5vw, 48px);
  font: 400 1.1rem/1.7 var(--serif);
  color: var(--ink-2);
}

/* ── Per-section details ──────────────────────────────────────────────────────
   What a single section does differently from the component it uses. It lives
   here rather than as a style attribute in app.js so that every measurement of
   the page sits in one place. */
.section-about .label { margin-top: 24px; }
.section-about .textlink { margin-top: 26px; }

.section-goals .heading-2 { margin-bottom: clamp(40px, 6vw, 72px); max-width: 24ch; }

.section-team .heading-2 { max-width: 24ch; }
.section-team .label { margin-bottom: 20px; }

.section-contact .heading-2 { margin-bottom: clamp(36px, 6vw, 56px); max-width: 20ch; }

.section-join .heading-1 { max-width: 16ch; }
.section-join .buttons { margin-top: 36px; }

.section-benefits { padding-top: 0; }

.section-steps .heading-3 { margin-bottom: 40px; max-width: 26ch; }
.section-steps__outro { margin-top: 40px; max-width: 44ch; }

.donate-head {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: start;
}
.donate-head .heading-1 { max-width: 15ch; }
.prose--pull {
  font: 500 clamp(1.15rem, 2.6vw, 1.35rem)/1.5 var(--serif);
  color: var(--light);
  margin: 18px 0 0;
  max-width: 62ch;
}