/* ResilientSA: Living Soil design system, as real CSS custom properties */
:root {
  --bark-900: #2C2A29;
  --bark-700: #47433F;
  --bark-600: #5C5854;
  --bark-400: #8A857F;
  --bark-200: #C9C6C1;
  --canvas: #F4F4F2;
  --canvas-raised: #FBFBF9;
  --canvas-sunk: #EAEAE6;
  --aloe: #4A7256;
  --aloe-deep: #3B5D46;
  --aloe-tint: #E4EBE5;
  --ochre: #C85A3C;
  --ochre-tint: #F5E3DC;
  --clay: #E6A854;
  --clay-deep: #C98A3A;
  --clay-tint: #F9EFDA;
  --rain: #3D6B8C;
  --rain-tint: #E0E8ED;
  --protea: #B24C63;
  --protea-tint: #F3E1E6;
  --indigo: #5E5A8C;
  --indigo-tint: #E7E5F0;

  --font-display: 'Ubuntu', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-street: 'Bungee', system-ui, sans-serif;

  --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-pill: 999px;
  --max: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--bark-900);
  font-family: var(--font-body);
  line-height: 1.5;
}
a { color: var(--aloe); }
a:hover { color: var(--aloe-deep); }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; color: var(--bark-900); }
p { margin: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--space-5); padding-right: var(--space-5); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--canvas); border-bottom: 1px solid rgba(44,42,41,0.12);
}
.nav-row {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--space-5);
  height: 72px; display: flex; align-items: center; justify-content: space-between;
}
.nav-logo { font: 700 20px var(--font-display); color: var(--bark-900); text-decoration: none; display: flex; align-items: center; gap: 9px; }
.nav-logo img { width: 42px; height: 42px; display: block; }
.nav-links { display: none; align-items: center; gap: var(--space-6); }
.nav-links a { font: 500 15px var(--font-body); text-decoration: none; color: var(--bark-900); }
.nav-links a.active { color: var(--aloe); font-weight: 600; border-bottom: 2px solid var(--aloe); padding-bottom: 2px; }
.nav-cta {
  font: 500 15px var(--font-body) !important; color: var(--canvas-raised) !important;
  background: var(--aloe); padding: 10px 20px; border-radius: var(--radius-pill);
}
.nav-toggle { display: block; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span, .nav-toggle::before, .nav-toggle::after { content: ''; display: block; width: 22px; height: 2px; background: var(--bark-900); margin: 5px 0; }
#nav-check { display: none; }
.nav-mobile {
  display: none; flex-direction: column; padding: var(--space-4) var(--space-5) var(--space-6);
  border-top: 1px solid rgba(44,42,41,0.12); gap: var(--space-2);
}
#nav-check:checked ~ .nav-mobile { display: flex; }
#nav-check:checked ~ .nav-row .nav-toggle-open { display: none; }
.nav-mobile a {
  font: 500 16px var(--font-body); text-decoration: none; color: var(--bark-900);
  padding: 12px 4px; border-bottom: 1px solid rgba(44,42,41,0.08);
}
.nav-mobile a.cta {
  margin-top: var(--space-3); text-align: center; color: var(--canvas-raised);
  background: var(--aloe); border: none; border-radius: var(--radius-md); padding: 14px;
}
@media (min-width: 900px) {
  .nav-links { display: flex; }
  .nav-toggle-label { display: none; }
  .nav-mobile { display: none !important; }
}

/* ---------- Hero ---------- */
.hero { padding: var(--space-10) var(--space-5) var(--space-8); }
.hero-inner { max-width: var(--max); margin: 0 auto; display: flex; flex-direction: column-reverse; gap: var(--space-8); align-items: center; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px;
  border-radius: var(--radius-pill); font: 500 13px var(--font-body); align-self: flex-start;
}
.hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; }
.hero h1 { font: 400 40px/0.98 var(--font-street); margin: var(--space-4) 0; max-width: 640px; }
.hero p.lede { font: 400 17px/1.6 var(--font-body); color: var(--bark-600); max-width: 480px; margin-bottom: var(--space-5); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.btn {
  font: 500 15px var(--font-display); text-decoration: none; padding: 14px 26px;
  border-radius: var(--radius-md); display: inline-block; border: 1px solid transparent; cursor: pointer;
}
.btn-primary { background: var(--aloe); color: var(--canvas-raised); }
.btn-clay { background: var(--clay); color: var(--bark-900); }
.btn-ghost { background: transparent; color: var(--bark-900); border-color: rgba(44,42,41,0.25); }
.hero-art { width: 100%; max-width: 420px; }
@media (min-width: 900px) {
  .hero { padding: var(--space-16) var(--space-5); }
  .hero-inner { flex-direction: row; align-items: center; }
  .hero h1 { font-size: 64px; }
  .hero p.lede { font-size: 19px; }
}

/* ---------- Photo hero (About) ---------- */
.photo-hero { position: relative; width: 100%; min-height: 380px; overflow: hidden; }
.photo-hero img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.photo-hero-content {
  position: relative; z-index: 1; max-width: var(--max); margin: 0 auto;
  padding: var(--space-12) var(--space-5); display: flex; flex-direction: column; gap: var(--space-4);
  min-height: 380px; justify-content: center;
}
.photo-hero h1 { color: var(--canvas); font-size: 42px; max-width: 560px; }
.photo-hero p.lede { color: #E0E0DC; }
.photo-credit { position: absolute; right: 14px; bottom: 10px; z-index: 1; font: 400 10px var(--font-body); color: rgba(244,244,242,0.6); }
@media (min-width: 900px) { .photo-hero h1 { font-size: 56px; } }

/* ---------- Sections ---------- */
section.block { padding: var(--space-10) var(--space-5); }
section.block.raised { background: var(--canvas-raised); }
section.block.dark { background: var(--bark-900); color: var(--canvas); }
section.block.dark h2 { color: var(--canvas); }
section.block.dark p { color: var(--bark-200); }
.block-inner { max-width: var(--max); margin: 0 auto; }
.split { display: flex; flex-direction: column; gap: var(--space-6); }
.split h2 { font-size: 26px; line-height: 1.15; margin-bottom: var(--space-2); }
.split .col-body { display: flex; flex-direction: column; gap: var(--space-4); }
.split .col-body p { font: 400 16px/1.65 var(--font-body); color: var(--bark-600); }
section.block.dark .split .col-body p { color: var(--bark-200); }
@media (min-width: 860px) {
  .split { flex-direction: row; gap: var(--space-10); }
  .split .col-title { flex: 0 0 320px; }
  .split .col-body { flex: 1; }
  .split h2 { font-size: 30px; }
}

.cards { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); }
.card {
  padding: var(--space-6); border-radius: var(--radius-xl); display: flex; flex-direction: column; gap: 10px;
}
.card.bg-raised { background: var(--canvas-raised); border: 1px solid rgba(44,42,41,0.1); }
.card.bg-aloe { background: var(--aloe); }
.card.bg-aloe .card-title, .card.bg-aloe p { color: var(--canvas); }
.card.bg-ink { background: var(--bark-900); }
.card.bg-ink .card-title, .card.bg-ink p { color: var(--canvas); }
.card.bg-clay { background: var(--clay); }
.card.pending { border: 1.5px dashed rgba(44,42,41,0.28); background: transparent; }
.card.pending .card-title { color: var(--bark-600); }
.card.pending p { color: var(--bark-400); }
.card-title { font: 700 18px var(--font-display); color: var(--bark-900); }
.card p { font: 400 15px/1.6 var(--font-body); color: var(--bark-600); }
.card-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill);
  font: 600 11px var(--font-body); letter-spacing: 0.02em; text-transform: uppercase; align-self: flex-start;
  background: var(--canvas-sunk); color: var(--bark-400);
}
.card-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bark-400); }
@media (min-width: 860px) { .cards { flex-direction: row; } .cards .card { flex: 1; } }

/* ---------- Podcast embed ---------- */
.podcast-embed {
  background: var(--canvas-raised); border: 1px solid rgba(44,42,41,0.1); border-radius: var(--radius-xl);
  padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6);
}
.podcast-embed-head { display: flex; flex-direction: column; gap: 4px; }
.podcast-embed-eyebrow { font: 600 12px var(--font-body); letter-spacing: 0.03em; text-transform: uppercase; color: var(--bark-400); }
.podcast-embed-title { font: 700 17px var(--font-display); color: var(--bark-900); }
.podcast-embed-desc { font: 400 14px/1.55 var(--font-body); color: var(--bark-600); max-width: 560px; }
.podcast-embed iframe { width: 100%; border: none; border-radius: var(--radius-md); }
.podcast-embed-fallback { font: 500 13px var(--font-body); color: var(--aloe-deep); text-decoration: none; }
.podcast-hub-list { display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-6); }

.pillars { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-4); }
.pillar {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px;
  border-radius: var(--radius-pill); font: 500 14px var(--font-body); color: var(--bark-900);
}
.pillar-icon { width: 15px; height: 15px; flex-shrink: 0; }

.paths { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); }
.path-card {
  padding: var(--space-6); border-radius: var(--radius-xl); text-decoration: none;
  display: flex; flex-direction: column; gap: 10px; min-height: 180px;
}
.path-card .title { font: 700 21px var(--font-display); }
.path-card .cta { margin-top: auto; font: 600 14px var(--font-body); }
@media (min-width: 860px) { .paths { flex-direction: row; } .path-card { flex: 1; } }

.steps { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); }
.step { padding: var(--space-5); border-radius: var(--radius-xl); background: var(--canvas-raised); border: 1px solid rgba(44,42,41,0.1); display: flex; flex-direction: column; gap: 8px; }
.step .num { font: 700 22px var(--font-display); color: var(--ochre); }
.step .title { font: 700 16px var(--font-display); }
.step p { font: 400 14px/1.6 var(--font-body); color: var(--bark-600); }
@media (min-width: 860px) { .steps { flex-direction: row; } .step { flex: 1; } }

.status-grid { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); }
.status-col { flex: 1; padding: var(--space-6); border-radius: var(--radius-xl); }
.status-col.live { background: var(--canvas-raised); border: 1px solid rgba(44,42,41,0.1); }
.status-col.pending { border: 1.5px dashed rgba(44,42,41,0.28); }
.status-col h3 { font: 700 18px var(--font-display); margin-bottom: var(--space-4); }
.status-col.live h3 { color: var(--aloe); }
.status-col ul { margin: 0; padding-left: 20px; }
.status-col li { font: 400 15px/1.55 var(--font-body); color: var(--bark-600); margin-bottom: 8px; }
@media (min-width: 860px) { .status-grid { flex-direction: row; } }

.log-entry { display: flex; flex-direction: column; gap: 6px; padding: var(--space-5) 0; border-top: 1px solid rgba(44,42,41,0.12); }
.log-date { font: 600 13px var(--font-body); color: var(--bark-400); }
.log-title { font: 700 18px var(--font-display); }
.log-entry p { font: 400 15px/1.6 var(--font-body); color: var(--bark-600); }
@media (min-width: 860px) { .log-entry { flex-direction: row; gap: var(--space-8); } .log-date { flex: 0 0 160px; } }

.priv-row { display: flex; flex-direction: column; gap: 6px; padding: var(--space-5) 0; border-top: 1px solid rgba(44,42,41,0.12); }
.priv-row h3 { font: 700 16px var(--font-display); }
.priv-row p { font: 400 15px/1.6 var(--font-body); color: var(--bark-600); }
@media (min-width: 860px) { .priv-row { flex-direction: row; gap: var(--space-8); } .priv-row h3 { flex: 0 0 240px; } }

/* ---------- Form ---------- */
.form-card { background: var(--canvas-raised); border: 1px solid rgba(44,42,41,0.1); border-radius: var(--radius-xl); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 9px 16px; border-radius: var(--radius-pill); background: var(--canvas-raised); border: 1px solid rgba(44,42,41,0.22); font: 500 14px var(--font-body); color: var(--bark-900); cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:checked) { background: var(--aloe); color: var(--canvas-raised); border-color: var(--aloe); }
label.field { display: flex; flex-direction: column; gap: 8px; font: 600 13px var(--font-body); color: var(--bark-900); }
input[type=text], input[type=email], textarea {
  width: 100%; box-sizing: border-box; padding: 13px 15px; border: 1px solid rgba(44,42,41,0.22);
  border-radius: var(--radius-md); background: var(--canvas-raised); font: 400 15px var(--font-body); color: var(--bark-900);
}
textarea { min-height: 110px; resize: vertical; }
.form-note { font: 400 13px/1.6 var(--font-body); color: var(--bark-600); }

/* ---------- Footer ---------- */
footer.site {
  border-top: 1px solid rgba(44,42,41,0.12); padding: var(--space-8) var(--space-5);
}
.footer-inner {
  max-width: var(--max); margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-3);
}
.footer-brand { font: 700 17px var(--font-display); }
.footer-links { display: flex; gap: var(--space-5); align-items: center; flex-wrap: wrap; font: 400 13px var(--font-body); color: var(--bark-400); }
.footer-links a { color: var(--bark-600); }
@media (min-width: 860px) { .footer-inner { flex-direction: row; justify-content: space-between; } }

/* ---------- Utility ---------- */
.draft-badge { display: inline-flex; padding: 7px 14px; border-radius: var(--radius-pill); background: var(--clay-tint); font: 600 12px var(--font-body); color: var(--bark-900); margin-bottom: var(--space-4); }