/* New ERA Communications — shared stylesheet.
   Extracted from the approved single-page draft (v2.5). Palette, typography,
   spacing, and components are preserved verbatim; the site nav is added below. */

@font-face {
  font-family:"Atkinson"; font-weight:400; font-style:normal; font-display:swap;
  src:url(assets/fonts/atkinson-400.woff2) format("woff2");
}
@font-face {
  font-family:"Atkinson"; font-weight:700; font-style:normal; font-display:swap;
  src:url(assets/fonts/atkinson-700.woff2) format("woff2");
}

:root {
  --paper:#FDFBF8; --ink:#2B3238; --teal:#149A92; --teal-soft:#DDF1EF;
  --rose:#D9608C; --rose-soft:#FAE7EE; --sand:#EAE4DC; --muted:#6E7A80;
  --card:#FFFFFF; --gold:#DEA24A;
}
@media (prefers-color-scheme: dark) { :root {
  --paper:#171D21; --ink:#EDF1F2; --teal:#2FC0B7; --teal-soft:#153A3B;
  --rose:#E67FA5; --rose-soft:#3A2230; --sand:#2A343A; --muted:#93A2A8;
  --card:#1F272C; --gold:#E4B269;
} }
:root[data-theme="dark"] {
  --paper:#171D21; --ink:#EDF1F2; --teal:#2FC0B7; --teal-soft:#153A3B;
  --rose:#E67FA5; --rose-soft:#3A2230; --sand:#2A343A; --muted:#93A2A8;
  --card:#1F272C; --gold:#E4B269;
}
:root[data-theme="light"] {
  --paper:#FDFBF8; --ink:#2B3238; --teal:#149A92; --teal-soft:#DDF1EF;
  --rose:#D9608C; --rose-soft:#FAE7EE; --sand:#EAE4DC; --muted:#6E7A80;
  --card:#FFFFFF; --gold:#DEA24A;
}

* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink);
  font-family:"Atkinson",system-ui,sans-serif; font-size:19px; line-height:1.65; }
h1,h2,h3 { font-family:"Atkinson",sans-serif; font-weight:700; line-height:1.16;
  text-wrap:balance; margin:0; letter-spacing:-.005em; }
h2 { font-size:32px; margin-bottom:12px; }
p { max-width:62ch; margin:14px 0; }
main { max-width:1040px; margin:0 auto; padding:0 28px 80px; }
section { margin-top:100px; }
.eyebrow { text-transform:uppercase; letter-spacing:.15em; font-size:12.5px;
  font-weight:700; color:var(--rose); margin-bottom:12px; }
.lede { color:var(--muted); font-size:21px; }

/* shared top nav (reused across every page) */
nav { display:flex; gap:26px; align-items:center; padding:26px 0 0; flex-wrap:wrap; }
nav .brand { font-weight:700; font-size:21px; color:var(--teal); text-decoration:none; margin-right:6px; }
nav a { color:var(--muted); text-decoration:none; font-size:16.5px; }
nav a:hover, nav a:focus { color:var(--teal); }
nav a[aria-current="page"] { color:var(--teal); }
nav .spacer { flex:1; }

.hero { display:grid; grid-template-columns:1.02fr .98fr; gap:52px; align-items:center; padding-top:64px; }
@media (max-width:860px){ .hero { grid-template-columns:1fr; } }
.hero h1 { font-size:clamp(36px,5.2vw,54px); }
.hero .lede { margin-top:18px; }
.cta-row { display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; }
.btn { display:inline-block; text-decoration:none; font-weight:700; font-size:18px;
  border-radius:999px; padding:14px 26px; }
.btn.primary { background:var(--teal); color:#fff; }
.btn.ghost { background:var(--teal-soft); color:var(--ink); }
.heroimg { width:100%; display:block; border-radius:22px; border:1px solid var(--sand); }
.caption { font-size:15.5px; color:var(--muted); margin-top:10px; font-style:italic; }

.story { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start; }
@media (max-width:860px){ .story { grid-template-columns:1fr; } }
.pull { font-weight:700; font-size:25px; color:var(--rose);
  border-left:5px solid var(--rose); padding:6px 0 6px 22px; margin:26px 0; max-width:24ch; }

.tools { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; margin-top:30px; }
.tool { background:var(--card); border:1px solid var(--sand); border-radius:18px;
  padding:26px 24px 30px; text-decoration:none; color:var(--ink); display:block;
  position:relative; }
.tool .dl { position:absolute; right:16px; bottom:14px; width:30px; height:30px;
  border-radius:50%; background:var(--teal-soft); display:grid; place-items:center; }
.tool .dl svg { width:15px; height:15px; stroke:var(--teal); stroke-width:2.4;
  fill:none; stroke-linecap:round; stroke-linejoin:round; }
.tool:hover .dl { background:var(--teal); }
.tool:hover .dl svg { stroke:#fff; }
.tier-head { display:flex; align-items:center; gap:16px; }
.dl-all { display:inline-flex; align-items:center; gap:7px; font-size:14.5px;
  font-weight:700; color:var(--teal); background:var(--teal-soft);
  border-radius:999px; padding:7px 16px; text-decoration:none; }
.dl-all svg { width:14px; height:14px; stroke:var(--teal); stroke-width:2.4;
  fill:none; stroke-linecap:round; stroke-linejoin:round; }
.tool:hover { border-color:var(--teal); }
.tool h3 { font-size:21px; margin-bottom:6px; }
.tool p { font-size:16.5px; color:var(--muted); margin:0; }
.tool .why { font-size:14.5px; color:var(--rose); margin-top:12px; display:block; }
.tier { margin-top:44px; }
.tier-label { font-weight:700; font-size:15px; color:var(--muted); letter-spacing:.09em; }

.shape { background:var(--card); border:1px solid var(--sand); border-radius:24px; padding:44px 42px; }
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:26px; margin-top:22px; }
.steps b { display:block; font-size:18px; margin-bottom:6px; }
.steps p { font-size:16.5px; color:var(--muted); margin:0; }

.promise { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:10px 36px; padding:0; list-style:none; margin-top:24px; }
.promise li { padding-left:30px; position:relative; font-size:17.5px; }
.promise li::before { content:""; position:absolute; left:0; top:8px; width:13px; height:13px;
  border-radius:50%; border:4px solid var(--teal); }

.lanes { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; margin-top:28px; }
.lane { background:var(--card); border:1px solid var(--sand); border-radius:18px; padding:30px 26px; }
.lane h3 { font-size:21px; margin-bottom:8px; }
.lane p { font-size:16.5px; color:var(--muted); }
.lane .btn { margin-top:10px; font-size:16px; padding:11px 20px; }
.lane.give { border-top:5px solid var(--teal); }
.lane.invest { border-top:5px solid var(--gold); }
.counsel { font-size:13.5px; color:var(--gold); font-weight:700; }

footer { margin-top:110px; border-top:1px solid var(--sand); padding-top:26px;
  color:var(--muted); font-size:15px; }
footer p { max-width:none; }
a { color:var(--teal); }
.hidden { display:none; }

.badge { display:inline-block; background:var(--teal-soft); color:var(--teal);
  font-weight:700; font-size:13px; border-radius:999px; padding:4px 12px;
  letter-spacing:.05em; vertical-align:middle; margin-left:10px; }
.badge.coming { background:var(--rose-soft); color:var(--rose); }
.req { display:flex; gap:22px; flex-wrap:wrap; margin-top:18px; font-size:16px; color:var(--muted); }
.req span b { color:var(--ink); }
.privcard { background:var(--teal-soft); border-radius:18px; padding:26px 28px; margin-top:34px; }
.privcard h3 { color:var(--teal); font-size:20px; }
.videobox { background:var(--card); border:1px dashed var(--sand); border-radius:18px;
  min-height:260px; display:grid; place-items:center; color:var(--muted); margin-top:26px; font-size:15px; }

/* keyboard-visible focus states (accessibility-native, matches Atkinson choice) */
a:focus-visible, .btn:focus-visible, .tool:focus-visible, .dl-all:focus-visible {
  outline:3px solid var(--teal); outline-offset:3px; border-radius:6px; }
.btn:focus-visible { border-radius:999px; }

/* donation tier chooser */
.give-tiers { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.tier-btn { display:inline-block; text-decoration:none; font-weight:700; font-size:16px;
  border-radius:999px; padding:11px 18px; background:var(--teal-soft); color:var(--ink); }
.tier-btn.suggested { background:var(--teal); color:#fff; box-shadow:0 0 0 3px var(--teal-soft); }
.tier-btn:hover { filter:brightness(1.06); }