/* ==========================================================================
   Nadea Clarke — design system
   Colours: the flyer's actual printed values (decision 2026-09-15).
   Roles:   the structure proposed in NADEA WEBSITE STRATEGY.pdf.
   ========================================================================== */
:root{
  /* --- brand, sampled from the printed flyers --- */
  --navy:#1C2634;          /* headers, footer, dark bands           */
  --navy-deep:#1B2A40;     /* headings on light backgrounds         */
  --teal:#1FAFAA;          /* buttons, accents                      */
  --teal-deep:#096763;     /* body copy on teal, link hover         */
  --teal-dark:#17908C;     /* button hover                          */
  --mint:#00E2B2;          /* checkmark, small highlights only      */
  --red:#D32F2F;           /* donate CTA — 4.98:1 on white text,    */
  --red-dark:#B71C1C;      /* 3.06:1 against the navy header bar    */

  /* --- surfaces (strategy's roles, flyer-derived tints) --- */
  --white:#FFFFFF;
  --aqua:#EDF8F7;          /* soft alternating section background   */
  --aqua-line:#D4EAE9;     /* hairlines on aqua                     */

  /* --- text --- */
  --ink:#1C2634;           /* primary text                          */
  --ink-soft:#4A5866;      /* secondary text (meets AA on white)    */
  --ink-invert:#FFFFFF;

  /* --- gradient from the Coming Soon flyer, for hero use --- */
  --hero-gradient:linear-gradient(180deg,
    #3EB9B5 0%, #4BBDBA 15%, #5EC4C1 23%, #72CBC9 30%, #89D2D0 38%,
    #A1DBDA 45%, #B3E0E0 53%, #C0E6E5 60%, #C5E7E7 68%, #C2E6E5 75%,
    #B4E0E1 83%, #A1DADA 90%, #83D0CF 100%);

  /* --- type: matched to the flyer, not the strategy's proposal --- */
  --font-display:'Poppins',system-ui,-apple-system,sans-serif;
  --font-body:'Lato',system-ui,-apple-system,sans-serif;

  /* --- scale --- */
  --step--1:clamp(14px,.35vw + 13px,15px);
  --step-0: clamp(16px,.4vw + 15px,18px);
  --step-1: clamp(19px,.7vw + 17px,22px);
  --step-2: clamp(23px,1.2vw + 20px,29px);
  --step-3: clamp(27px,2vw + 22px,38px);
  --step-4: clamp(32px,3.2vw + 24px,52px);
  --step-5: clamp(38px,4.6vw + 26px,68px);

  /* --- space --- */
  --sp-1:8px;  --sp-2:16px; --sp-3:24px; --sp-4:32px;
  --sp-5:48px; --sp-6:64px; --sp-7:96px; --sp-8:128px;

  --wrap:1180px;
  --measure:68ch;
  --radius:14px;
  --radius-pill:999px;
  --shadow:0 10px 30px rgba(20,42,67,.10);
  --focus:3px solid var(--teal-deep);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.65;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.12;margin:0 0 var(--sp-3);color:var(--navy-deep)}
h1{font-size:var(--step-5);font-weight:800;letter-spacing:-.01em}
h2{font-size:var(--step-4);font-weight:700}
h3{font-size:var(--step-2);font-weight:700}
h4{font-size:var(--step-1);font-weight:700}
p{margin:0 0 var(--sp-3);max-width:var(--measure)}
a{color:var(--teal-deep);text-underline-offset:.18em;text-decoration-thickness:.08em}
a:hover{color:var(--navy-deep)}
:focus-visible{outline:var(--focus);outline-offset:3px;border-radius:4px}
img{max-width:100%;height:auto;display:block}
strong{font-weight:700}

/* --- layout --- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--sp-3)}
.section{padding-block:clamp(48px,7vw,104px)}
.section--aqua{background:var(--aqua)}
.section--navy{background:var(--navy);color:var(--ink-invert)}
.section--navy h2,.section--navy h3{color:var(--ink-invert)}
.section--tight{padding-block:clamp(32px,4vw,56px)}
.lede{font-size:var(--step-1);line-height:1.5;color:var(--ink-soft)}

/* --- buttons --- */
.btn{
  display:inline-block;font-family:var(--font-display);font-weight:700;
  font-size:var(--step--1);letter-spacing:.02em;text-decoration:none;
  padding:15px 30px;border-radius:var(--radius-pill);border:2px solid transparent;
  transition:background .15s ease,color .15s ease,transform .15s ease;
}
.btn--primary{background:var(--teal);color:var(--navy)}          /* navy text, per strategy */
.btn--primary:hover{background:var(--teal-dark);color:var(--navy);transform:translateY(-2px)}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{background:#2A3950;color:#fff;transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn--ghost:hover{background:var(--navy);color:#fff}
.btn--on-dark{background:#fff;color:var(--navy)}
.btn--on-dark:hover{background:var(--aqua);color:var(--navy)}
.btn--donate{background:var(--red);color:#fff}
.btn--donate:hover{background:var(--red-dark);color:#fff;transform:translateY(-2px)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-2)}

/* --- eyebrow + rule --- */
.eyebrow{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:var(--step--1);color:var(--teal-deep);
  margin:0 0 var(--sp-2);
}
.section--navy .eyebrow{color:var(--mint)}

/* --- cards --- */
.grid{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.grid > *{flex:1 1 275px;min-width:0}
.grid--3 > *{flex:1 1 275px}
.grid--2 > *{flex:1 1 330px}
.card{
  background:var(--white);border:1px solid var(--aqua-line);
  border-radius:var(--radius);padding:var(--sp-4);
  display:flex;flex-direction:column;
}
.card h3{margin-bottom:var(--sp-2)}
.card p{font-size:var(--step--1);color:var(--ink-soft);margin-bottom:var(--sp-3)}
.card__num{
  font-family:var(--font-display);font-weight:800;font-size:var(--step-1);
  color:var(--teal);line-height:1;margin-bottom:var(--sp-2);
}
.card__link{margin-top:auto;font-family:var(--font-display);font-weight:700;font-size:var(--step--1);text-decoration:none}
.card__link::after{content:" \2192"}

/* --- evidence / source citation --- */
.source{
  font-size:var(--step--1);color:var(--ink-soft);
  border-left:3px solid var(--teal);padding:var(--sp-2) 0 var(--sp-2) var(--sp-3);
  margin:0 0 var(--sp-3);background:var(--aqua);border-radius:0 var(--radius) var(--radius) 0;
}
.source strong{color:var(--navy-deep)}

/* --- things awaiting Nadea's confirmation --- */
.todo{
  font-family:var(--font-display);font-size:var(--step--1);font-weight:600;
  background:#FFF4D6;border:1px dashed #C9A227;color:#6B5200;
  padding:var(--sp-2) var(--sp-3);border-radius:var(--radius);margin:0 0 var(--sp-3);
}
.todo::before{content:"NEEDS CONFIRMATION — ";font-weight:800;letter-spacing:.04em}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--sp-3);top:var(--sp-3);z-index:100;background:#fff;padding:12px 20px;border-radius:8px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}