/* =============================================
   LEADING SAFELY — Main Stylesheet
   Palette: Warm sage/forest green primary,
   soft cream surfaces, deep charcoal text
   ============================================= */

/* ---------- DESIGN TOKENS ---------- */
:root {
  /* Type scale */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);
  --text-hero: clamp(3rem,     0.5rem  + 7vw,    7rem);

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Borders & Radius */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Content widths */
  --content-narrow:  640px;
  --content-default: 960px;
  --content-wide:    1200px;

  /* Fonts */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Work Sans', 'Helvetica Neue', sans-serif;
}

/* ---------- LIGHT MODE ---------- */
:root, [data-theme="light"] {
  --color-bg:              #f7f5f0;
  --color-surface:         #faf9f5;
  --color-surface-2:       #fcfbf8;
  --color-surface-offset:  #eeebe4;
  --color-surface-offset-2:#e7e3da;
  --color-divider:         #ddd9d0;
  --color-border:          #d3cfc5;

  --color-text:            #252018;
  --color-text-muted:      #6e6a60;
  --color-text-faint:      #b0ac9f;
  --color-text-inverse:    #f9f8f4;

  /* Sage green primary */
  --color-primary:          #3d6b4f;
  --color-primary-hover:    #2e5440;
  --color-primary-active:   #1f3d2d;
  --color-primary-highlight:#d2e4d9;

  /* Warm terracotta accent */
  --color-accent:           #b55c38;
  --color-accent-hover:     #9a4a2b;
  --color-accent-highlight: #f0ddd4;

  --shadow-sm: 0 1px 2px  rgba(30,24,10,0.06);
  --shadow-md: 0 4px 12px rgba(30,24,10,0.08);
  --shadow-lg: 0 12px 32px rgba(30,24,10,0.12);
}

/* ---------- DARK MODE ---------- */
[data-theme="dark"],
@media (prefers-color-scheme: dark) { :root:not([data-theme]) {
  --color-bg:              #181610;
  --color-surface:         #1d1b15;
  --color-surface-2:       #22201a;
  --color-surface-offset:  #1f1d17;
  --color-surface-offset-2:#252310;
  --color-divider:         #2c291f;
  --color-border:          #3a3728;
  --color-text:            #d4d0c6;
  --color-text-muted:      #7a7768;
  --color-text-faint:      #4e4c42;
  --color-text-inverse:    #1d1b15;
  --color-primary:          #78b899;
  --color-primary-hover:    #5da082;
  --color-primary-active:   #3e8868;
  --color-primary-highlight:#253327;
  --color-accent:           #e08060;
  --color-accent-hover:     #d06840;
  --color-accent-highlight: #3d2820;
  --shadow-sm: 0 1px 2px  rgba(0,0,0,0.25);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.45);
}}

[data-theme="dark"] {
  --color-bg:              #181610;
  --color-surface:         #1d1b15;
  --color-surface-2:       #22201a;
  --color-surface-offset:  #1f1d17;
  --color-surface-offset-2:#252310;
  --color-divider:         #2c291f;
  --color-border:          #3a3728;
  --color-text:            #d4d0c6;
  --color-text-muted:      #7a7768;
  --color-text-faint:      #4e4c42;
  --color-text-inverse:    #1d1b15;
  --color-primary:          #78b899;
  --color-primary-hover:    #5da082;
  --color-primary-active:   #3e8868;
  --color-primary-highlight:#253327;
  --color-accent:           #e08060;
  --color-accent-hover:     #d06840;
  --color-accent-highlight: #3d2820;
  --shadow-sm: 0 1px 2px  rgba(0,0,0,0.25);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.45);
}

/* ---------- BASE RESET ---------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html {
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  scroll-behavior:smooth;
  scroll-padding-top:var(--space-16);
}
body {
  min-height:100dvh;
  line-height:1.65;
  font-family:var(--font-body);
  font-size:var(--text-base);
  color:var(--color-text);
  background-color:var(--color-bg);
}
img,picture,video,canvas,svg { display:block; max-width:100%; height:auto; }
h1,h2,h3,h4,h5,h6 { text-wrap:balance; line-height:1.15; font-family:var(--font-display); font-weight:600; }
p,li,figcaption { text-wrap:pretty; max-width:72ch; }
ul[role="list"],ol[role="list"] { list-style:none; }
input,button,textarea,select { font:inherit; color:inherit; }
button { cursor:pointer; background:none; border:none; }
::selection { background:rgba(61,107,79,0.18); color:var(--color-text); }
:focus-visible { outline:2px solid var(--color-primary); outline-offset:3px; border-radius:var(--radius-sm); }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}
a { color:var(--color-primary); text-decoration:none; transition:color var(--transition-interactive); }
a:hover { color:var(--color-primary-hover); }

/* ---------- UTILITIES ---------- */
.container { width:100%; max-width:var(--content-wide); margin-inline:auto; padding-inline:clamp(var(--space-6),5vw,var(--space-16)); }
.container--narrow { max-width:var(--content-narrow); }
.container--default { max-width:var(--content-default); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border-width:0; }
.text-muted { color:var(--color-text-muted); }
.text-accent { color:var(--color-accent); }
.text-primary { color:var(--color-primary); }

/* ---------- HEADER / NAV ---------- */
.site-header {
  position:sticky; top:0; z-index:50;
  background:color-mix(in oklab, var(--color-bg) 90%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--color-divider);
  transition:box-shadow var(--transition-interactive);
}
.site-header.scrolled { box-shadow:var(--shadow-sm); }
.nav {
  display:flex; align-items:center; justify-content:space-between;
  height:68px;
}
.nav-logo {
  display:flex; align-items:center; gap:var(--space-3);
  color:var(--color-text); font-family:var(--font-display);
  font-size:var(--text-lg); font-weight:600; letter-spacing:-0.01em;
}
.nav-logo:hover { color:var(--color-primary); }
.nav-links {
  display:flex; align-items:center; gap:var(--space-8); list-style:none;
}
.nav-links a {
  font-size:var(--text-sm); font-weight:500; color:var(--color-text-muted);
  transition:color var(--transition-interactive);
  position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-3px; left:0; width:0; height:1.5px;
  background:var(--color-primary); transition:width var(--transition-interactive);
}
.nav-links a:hover { color:var(--color-primary); }
.nav-links a:hover::after { width:100%; }
.nav-links a.active { color:var(--color-primary); }
.nav-links a.active::after { width:100%; }
.nav-actions { display:flex; align-items:center; gap:var(--space-4); }
.btn { display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-3) var(--space-6); border-radius:var(--radius-full); font-size:var(--text-sm); font-weight:600; transition:background var(--transition-interactive), color var(--transition-interactive), transform var(--transition-interactive); }
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:var(--color-primary); color:#fff; }
.btn-primary:hover { background:var(--color-primary-hover); color:#fff; }
.btn-outline { border:1.5px solid var(--color-primary); color:var(--color-primary); }
.btn-outline:hover { background:var(--color-primary); color:#fff; }
.btn-accent { background:var(--color-accent); color:#fff; }
.btn-accent:hover { background:var(--color-accent-hover); color:#fff; }
.theme-toggle { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:var(--radius-full); color:var(--color-text-muted); transition:color var(--transition-interactive), background var(--transition-interactive); }
.theme-toggle:hover { color:var(--color-primary); background:var(--color-surface-offset); }
.hamburger { display:none; flex-direction:column; gap:5px; width:28px; cursor:pointer; }
.hamburger span { display:block; height:2px; background:var(--color-text); border-radius:2px; transition:all var(--transition-interactive); }
@media (max-width:768px) {
  .hamburger { display:flex; }
  .nav-links { display:none; position:absolute; top:68px; left:0; right:0; background:var(--color-surface); border-bottom:1px solid var(--color-divider); flex-direction:column; padding:var(--space-6); gap:var(--space-5); }
  .nav-links.open { display:flex; }
  .nav-actions .btn-primary { display:none; }
}

/* ---------- HERO ---------- */
.hero {
  min-height:88vh; display:grid; place-items:center;
  padding-block:clamp(var(--space-16),12vw,var(--space-32));
  position:relative; overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(135deg, var(--color-surface-offset) 0%, var(--color-bg) 60%, var(--color-primary-highlight) 100%);
}
.hero-pattern {
  position:absolute; inset:0; z-index:1; opacity:0.035;
  background-image:radial-gradient(circle, var(--color-primary) 1.5px, transparent 1.5px);
  background-size:28px 28px;
}
.hero-content { position:relative; z-index:2; text-align:center; max-width:800px; margin-inline:auto; }
.hero-eyebrow { display:inline-block; font-size:var(--text-sm); font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--color-primary); margin-bottom:var(--space-5); }
.hero h1 { font-size:var(--text-hero); font-family:var(--font-display); font-weight:500; line-height:1.05; letter-spacing:-0.02em; margin-bottom:var(--space-6); color:var(--color-text); }
.hero h1 em { font-style:italic; color:var(--color-primary); }
.hero-sub { font-size:var(--text-lg); color:var(--color-text-muted); max-width:56ch; margin-inline:auto; margin-bottom:var(--space-10); line-height:1.6; }
.hero-actions { display:flex; gap:var(--space-4); justify-content:center; flex-wrap:wrap; }
.hero-pills { display:flex; gap:var(--space-3); justify-content:center; flex-wrap:wrap; margin-top:var(--space-10); }
.pill { display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-full); font-size:var(--text-xs); color:var(--color-text-muted); font-weight:500; }

/* ---------- SECTIONS ---------- */
.section { padding-block:clamp(var(--space-16),8vw,var(--space-24)); }
.section-alt { background:var(--color-surface); }
.section-dark { background:var(--color-primary-active, #1f3d2d); color:#f0ede4; }
.section-dark h2, .section-dark p, .section-dark .section-label { color:#f0ede4; }
.section-label { font-size:var(--text-xs); font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--color-primary); margin-bottom:var(--space-3); display:block; }
.section-title { font-size:var(--text-2xl); font-family:var(--font-display); font-weight:500; letter-spacing:-0.02em; margin-bottom:var(--space-5); line-height:1.1; }
.section-sub { font-size:var(--text-base); color:var(--color-text-muted); max-width:55ch; line-height:1.7; margin-bottom:var(--space-12); }
.section-header-centered { text-align:center; }
.section-header-centered .section-sub { margin-inline:auto; }

/* ---------- PILLARS ---------- */
.pillars-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--space-8); }
.pillar-card { padding:var(--space-10); background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-xl); position:relative; overflow:hidden; transition:transform var(--transition-interactive), box-shadow var(--transition-interactive); }
.pillar-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.pillar-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--color-primary); }
.pillar-number { font-size:var(--text-3xl); font-family:var(--font-display); font-weight:400; color:var(--color-primary-highlight); line-height:1; margin-bottom:var(--space-4); }
.pillar-card h3 { font-size:var(--text-xl); margin-bottom:var(--space-3); }
.pillar-card p { color:var(--color-text-muted); font-size:var(--text-base); line-height:1.7; }

/* ---------- ABOUT STRIP ---------- */
.about-strip { display:grid; grid-template-columns:1fr 1fr; gap:clamp(var(--space-12),6vw,var(--space-24)); align-items:center; }
@media (max-width:768px) { .about-strip { grid-template-columns:1fr; } }
.about-img-wrap { position:relative; }
.about-img-wrap img { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius-xl); }
.about-badge { position:absolute; bottom:-var(--space-6); right:-var(--space-6); background:var(--color-primary); color:#fff; padding:var(--space-5) var(--space-6); border-radius:var(--radius-lg); font-size:var(--text-sm); font-weight:600; box-shadow:var(--shadow-lg); max-width:180px; line-height:1.4; }
.about-content { display:flex; flex-direction:column; gap:var(--space-6); }
.about-content p { color:var(--color-text-muted); line-height:1.75; font-size:var(--text-base); }
.stat-row { display:flex; gap:var(--space-8); flex-wrap:wrap; margin-top:var(--space-4); }
.stat { display:flex; flex-direction:column; }
.stat-num { font-size:var(--text-2xl); font-family:var(--font-display); font-weight:600; color:var(--color-primary); line-height:1; }
.stat-label { font-size:var(--text-xs); color:var(--color-text-muted); font-weight:500; text-transform:uppercase; letter-spacing:0.07em; margin-top:var(--space-1); }

/* ---------- SERVICES ---------- */
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--space-6); }
.service-card { background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:var(--space-8); display:flex; flex-direction:column; gap:var(--space-4); transition:transform var(--transition-interactive), box-shadow var(--transition-interactive); }
.service-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.service-icon { width:48px; height:48px; background:var(--color-primary-highlight); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; color:var(--color-primary); }
.service-card h3 { font-size:var(--text-lg); }
.service-card p { color:var(--color-text-muted); font-size:var(--text-base); line-height:1.7; flex:1; }
.service-price { font-size:var(--text-sm); font-weight:700; color:var(--color-accent); margin-top:auto; }

/* ---------- QUOTE BLOCK ---------- */
.quote-block { background:var(--color-primary); color:#fff; padding:clamp(var(--space-12),8vw,var(--space-20)); border-radius:var(--radius-xl); text-align:center; position:relative; overflow:hidden; }
.quote-block::before { content:'\201C'; position:absolute; top:-var(--space-8); left:var(--space-6); font-size:14rem; font-family:var(--font-display); color:rgba(255,255,255,0.08); line-height:1; pointer-events:none; }
.quote-text { font-family:var(--font-display); font-size:var(--text-xl); font-style:italic; line-height:1.5; max-width:60ch; margin-inline:auto; margin-bottom:var(--space-6); position:relative; z-index:1; }
.quote-source { font-size:var(--text-sm); font-weight:600; letter-spacing:0.08em; text-transform:uppercase; opacity:0.75; }

/* ---------- CTA BAND ---------- */
.cta-band { background:var(--color-surface-offset); border-radius:var(--radius-xl); padding:clamp(var(--space-12),8vw,var(--space-20)); display:grid; grid-template-columns:1fr auto; gap:var(--space-10); align-items:center; }
@media (max-width:640px) { .cta-band { grid-template-columns:1fr; } }
.cta-band h2 { font-size:var(--text-2xl); font-family:var(--font-display); font-weight:500; line-height:1.1; margin-bottom:var(--space-3); }
.cta-band p { color:var(--color-text-muted); }

/* ---------- FOOTER ---------- */
.site-footer { border-top:1px solid var(--color-divider); padding-block:var(--space-16); margin-top:var(--space-20); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--space-12); }
@media (max-width:640px) { .footer-grid { grid-template-columns:1fr; gap:var(--space-8); } }
.footer-brand { display:flex; flex-direction:column; gap:var(--space-4); }
.footer-brand p { font-size:var(--text-sm); color:var(--color-text-muted); max-width:38ch; line-height:1.7; }
.footer-col h4 { font-size:var(--text-sm); font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--color-text-muted); margin-bottom:var(--space-4); }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:var(--space-3); }
.footer-col ul a { font-size:var(--text-sm); color:var(--color-text-muted); transition:color var(--transition-interactive); }
.footer-col ul a:hover { color:var(--color-primary); }
.footer-bottom { margin-top:var(--space-12); padding-top:var(--space-6); border-top:1px solid var(--color-divider); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--space-4); }
.footer-bottom p { font-size:var(--text-xs); color:var(--color-text-faint); }

/* ---------- PAGE HERO (interior) ---------- */
.page-hero { padding-block:clamp(var(--space-16),10vw,var(--space-24)); background:linear-gradient(135deg, var(--color-surface-offset) 0%, var(--color-bg) 100%); }
.page-hero h1 { font-size:var(--text-3xl); font-family:var(--font-display); font-weight:500; letter-spacing:-0.02em; margin-bottom:var(--space-4); }
.page-hero p { font-size:var(--text-lg); color:var(--color-text-muted); max-width:55ch; }

/* ---------- BLOG ---------- */
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:var(--space-8); }
.post-card { background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-xl); overflow:hidden; display:flex; flex-direction:column; transition:transform var(--transition-interactive), box-shadow var(--transition-interactive); }
.post-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.post-card-img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.post-card-body { padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-3); flex:1; }
.post-meta { display:flex; align-items:center; gap:var(--space-3); font-size:var(--text-xs); color:var(--color-text-muted); }
.post-tag { background:var(--color-primary-highlight); color:var(--color-primary); padding:var(--space-1) var(--space-3); border-radius:var(--radius-full); font-size:var(--text-xs); font-weight:600; }
.post-card h3 { font-size:var(--text-lg); line-height:1.3; }
.post-card p { color:var(--color-text-muted); font-size:var(--text-sm); line-height:1.65; flex:1; }
.post-card-link { display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm); font-weight:600; color:var(--color-primary); margin-top:auto; }
.post-card-link:hover { gap:var(--space-3); }

/* ---------- SUPPLIES LIST ---------- */
.supplies-section { margin-bottom:var(--space-12); }
.supplies-section h3 { font-size:var(--text-xl); font-family:var(--font-display); margin-bottom:var(--space-6); padding-bottom:var(--space-3); border-bottom:2px solid var(--color-primary-highlight); color:var(--color-primary); }
.supplies-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:var(--space-4); }
.supply-item { background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-5) var(--space-6); display:flex; align-items:flex-start; gap:var(--space-4); }
.supply-check { width:22px; height:22px; border-radius:var(--radius-sm); border:2px solid var(--color-primary); flex-shrink:0; margin-top:2px; display:flex; align-items:center; justify-content:center; color:var(--color-primary); }
.supply-text { font-size:var(--text-sm); color:var(--color-text); line-height:1.5; }
.supply-urgent { border-color:var(--color-accent); }
.supply-urgent .supply-check { border-color:var(--color-accent); color:var(--color-accent); }

/* ---------- DONATE HERO ---------- */
.donate-hero { background:linear-gradient(135deg, #2e5440 0%, #3d6b4f 60%, #4a8060 100%); color:#fff; padding:clamp(var(--space-16),10vw,var(--space-24)); border-radius:var(--radius-xl); text-align:center; margin-bottom:var(--space-12); }
.donate-hero h1 { color:#fff; font-size:var(--text-2xl); margin-bottom:var(--space-4); }
.donate-hero p { color:rgba(255,255,255,0.85); font-size:var(--text-lg); max-width:55ch; margin-inline:auto; margin-bottom:var(--space-8); }

/* ---------- FORM ---------- */
.contact-form { display:flex; flex-direction:column; gap:var(--space-5); max-width:560px; }
.form-group { display:flex; flex-direction:column; gap:var(--space-2); }
.form-group label { font-size:var(--text-sm); font-weight:600; color:var(--color-text); }
.form-group input, .form-group textarea, .form-group select { padding:var(--space-3) var(--space-5); background:var(--color-surface); border:1.5px solid var(--color-border); border-radius:var(--radius-md); font-size:var(--text-base); color:var(--color-text); transition:border-color var(--transition-interactive); }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline:none; border-color:var(--color-primary); }
.form-group textarea { min-height:140px; resize:vertical; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); }
@media (max-width:480px) { .form-row { grid-template-columns:1fr; } }

/* ---------- RWANDA BANNER ---------- */
.rwanda-banner { background:linear-gradient(135deg, #1a3a28 0%, #2d5e41 100%); color:#fff; padding:var(--space-3) var(--space-6); text-align:center; font-size:var(--text-sm); font-weight:500; }
.rwanda-banner a { color:#a8d9bb; text-decoration:underline; }

/* ---------- ANIMATIONS ---------- */
@keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.animate-fade-up { animation:fadeUp 0.6s cubic-bezier(0.16,1,0.3,1) both; }
.animate-delay-1 { animation-delay:0.1s; }
.animate-delay-2 { animation-delay:0.2s; }
.animate-delay-3 { animation-delay:0.3s; }

/* ---------- DIVIDER ---------- */
hr.divider { border:none; border-top:1px solid var(--color-divider); margin-block:var(--space-12); }