/* Business Leaders for Peace - shared site styles (v2, brand-aligned)
   Tokens lifted from the live BLFP theme by Leap.
*/

@font-face {
  font-family: 'Manrope';
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  src: url('manrope-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: 'Manrope';
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  src: url('manrope-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;
}

:root {
  /* brand colour */
  --bg: #F7F1E3;
  --bg-alt: #ffffff;
  --surface: #F1E9D7;
  --text: #3B614F;
  --text-mid: #4f6b5d;
  --text-light: #7c8b82;
  --accent: #996200;
  --accent-soft: #b07a1f;
  --border: rgba(59, 97, 79, 0.18);
  --band: #335146;
  --band-deep: #271845;
  /* type */
  --sans: 'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* DESIGN SYSTEM tokens. GENERATED by scripts/design_scale.py; do not hand-edit.
     Major third ratio 1.25; base 1rem body; spacing unit 1.5rem (one line-height). */
  --size-300: 0.8rem;
  --size-400: 1.0rem;
  --size-500: 1.25rem;
  --size-600: 1.562rem;
  --size-700: 1.953rem;
  --size-800: 2.441rem;
  --size-900: 3.052rem;
  --space-1: 0.768rem;
  --space-2: 0.96rem;
  --space-3: 1.2rem;
  --space-4: 1.5rem;
  --space-5: 1.875rem;
  --space-6: 2.344rem;
  --space-7: 2.93rem;
  --space-8: 3.662rem;
  --space-9: 4.578rem;
  --grid-cols: 12;
  --grid-gutter: var(--space-4);
  --grid-col: 4.176rem;
  --max: 66.613rem;
  --max-narrow: 42.633rem;

  --space-hero-top: var(--space-8);
  --space-hero-bottom: var(--space-5);
  --space-section-y: var(--space-5);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:hover { color: var(--accent-soft); }

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
  margin: 0 0 0.55em;
  letter-spacing: -0.005em;
}
h1 { font-size: clamp(2rem, 3vw + 1.2rem, var(--size-800)); }
h2 { font-size: clamp(1.25rem, 1.4vw + 0.95rem, var(--size-600)); margin-top: 1em; }
h3 { font-size: var(--size-500); color: var(--accent); margin-top: 1.2em; }
p  { margin: 0 0 1em; max-width: 70ch; }

ul, ol { padding-left: 1.2em; max-width: 70ch; }
li { margin: 0.35em 0; }

/* Header / nav */
.site-header {
  background: var(--bg);
  color: var(--text);
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--border);
}
.site-header .inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-3) var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.15;
}
.brand img {
  display: block;
  height: 56px;
  width: auto;
}
.brand strong { font-weight: 600; }
.nav-links {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
/* Nav comfort: match the Actions Accumulator page (same font, one line on desktop) */
.site-header,
.site-header .nav-links a { font-family: var(--sans); }
.site-header .nav-links { gap: var(--space-3); }
.site-header .nav-links a { white-space: nowrap; }
@media (min-width: 1000px) {
  .site-header .inner { flex-wrap: nowrap; }
  .site-header .nav-links { flex-wrap: nowrap; }
}

/* Hero */
.hero {
  padding: var(--space-hero-top) var(--space-5) var(--space-hero-bottom);
  max-width: var(--max);
  margin: 0 auto;
}
.hero .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: var(--space-2);
}
.hero h1 { margin-bottom: 0.3em; }
.hero > :last-child { margin-bottom: 0; }
.hero .sub {
  font-size: clamp(1.05rem, 0.5vw + 0.95rem, 1.3rem);
  color: var(--text-mid);
  max-width: 60ch;
  font-weight: 500;
}

/* Content section. Vertical rhythm rule: the gap between any two blocks is
   exactly bottom padding + top padding = 2 x space-5. Last children lose their
   trailing margins and a leading h2 loses its top margin so nothing leaks. */
.section > :last-child { margin-bottom: 0; }
.section > h2:first-child { margin-top: 0; }
.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-section-y) var(--space-5);
}
.section.narrow { max-width: var(--max-narrow); }

/* Buttons */
.btn {
  display: inline-block;
  background: var(--text);
  color: var(--bg);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  padding: var(--space-1) var(--space-4);
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: background 120ms ease;
}
.btn:hover { background: var(--band); color: var(--bg); }
.btn.secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--text);
}
.btn.secondary:hover { background: var(--text); color: var(--bg); }
.btn-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: var(--space-3) 0 var(--space-1);
}

/* Proof / quiet band */
.proof-band {
  background: var(--band);
  color: var(--bg);
  padding: var(--space-5);
  text-align: center;
  font-size: 1rem;
  line-height: 1.55;
}
.proof-band .inner {
  max-width: var(--max);
  margin: 0 auto;
}
.proof-band strong { color: var(--bg); font-weight: 600; }

/* Cards */
.cards {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin: var(--space-3) 0 0;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: var(--space-4);
}
.card h3 { margin-top: 0; color: var(--text); }

/* Callout */
.callout {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: var(--space-3) var(--space-4);
  border-radius: 6px;
  margin: var(--space-4) 0;
}
.callout h3 { margin-top: 0; color: var(--text); }

/* Footer */
.site-footer {
  background: var(--band);
  color: var(--bg);
  margin-top: var(--space-8);
  padding: var(--space-6) var(--space-5);
  font-size: 0.92rem;
}
.site-footer .inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
}
.site-footer a { color: var(--bg); }
.site-footer .small { color: rgba(247, 241, 227, 0.7); font-size: 0.8rem; }

/* Forms */
form.simple {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  max-width: 480px;
  margin-top: var(--space-2);
}
form.simple input[type="email"] {
  flex: 1 1 240px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--bg-alt);
}
form.simple button {
  background: var(--text);
  color: var(--bg);
  border: none;
  padding: var(--space-1) var(--space-4);
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
form.simple button:hover { background: var(--band); }

/* Bracketed placeholder styling */
.placeholder {
  background: #FFF4D6;
  padding: 0 4px;
  border-radius: 3px;
  font-style: italic;
  color: var(--accent);
}

@media (max-width: 640px) {
  .hero { padding: var(--space-6) var(--space-3) var(--space-4); }
  .section { padding: var(--space-4) var(--space-3); }
  .site-header .inner { padding: var(--space-2) var(--space-3); }
  .brand img { height: 44px; }
  .nav-links { gap: var(--space-2); font-size: 0.8rem; }
}


/* The Letter page */
.letter-doc { max-width: var(--max-narrow); }
.letter-doc p { white-space: pre-line; }
.letter-doc ol, .letter-doc ul { margin: 0 0 1em; }
.signatures {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-5) var(--space-5) var(--space-5);
  position: relative;
}
.signatures:before {
  content: ""; display: block;
  position: absolute; top: 0; left: var(--space-5); right: var(--space-5);
  height: 1px; background: var(--text); opacity: 0.3;
}
.signatures .h3-look { font-size: var(--size-600); line-height: 1.1; margin: 0 0 0.4em; }
.signatures-list {
  list-style: none; margin: 1.4rem 0 0; padding: 0;
  max-width: 100%;
  columns: 3 240px; column-gap: var(--space-5);
}
.signatures-list li {
  font-size: 0.82rem; line-height: 1.4; letter-spacing: -0.01em;
  margin: 0 0 0.5rem; break-inside: avoid;
}

/* Cookie consent box (consent.js). Added 2026-08-23. */
#blfp-consent{position:fixed;right:var(--space-4);bottom:var(--space-4);left:auto;max-width:21rem;margin:0;background:#fff;color:#1a1a1a;border:1px solid #ccc;border-radius:8px;padding:var(--space-3) var(--space-4);box-shadow:0 6px 24px rgba(0,0,0,.15);z-index:9999;font-size:0.8rem;line-height:1.5}
@media (max-width: 480px){#blfp-consent{left:var(--space-3);right:var(--space-3);max-width:none}}
#blfp-consent p{margin:0 0 .75rem}
#blfp-consent a{color:#1B4332;text-decoration:underline}
.blfp-consent-buttons{display:flex;gap:.5rem;flex-wrap:wrap}
.blfp-consent-buttons button{font:inherit;padding:.5rem 1rem;border-radius:6px;border:1px solid #1B4332;cursor:pointer;background:#fff;color:#1B4332}
#blfp-consent-yes{background:#1B4332;color:#fff}