/* Self-hosted fonts (latin subset), copied from the design system. Only weights the CSS uses. */
@font-face{ font-family:"Sora"; src:url("../fonts/sora-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:"Sora"; src:url("../fonts/sora-800.woff2") format("woff2"); font-weight:800; font-style:normal; font-display:swap; }
@font-face{ font-family:"Inter"; src:url("../fonts/inter-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Inter"; src:url("../fonts/inter-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Inter"; src:url("../fonts/inter-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:"IBM Plex Mono"; src:url("../fonts/ibm-plex-mono-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }

:root{
  /* Colors and radius mirror design/tokens.json (names use hyphens for underscores).
     --line is site-only; it is not in the design system. */
  --school-bus-yellow:#ffd800;
  --harbor-teal:#224d4f;
  --white:#ffffff;
  --off-white:#f7f3ec;
  --amber:#b8860b;
  --line:#ddd3bd;

  --f-display:"Sora", ui-sans-serif, system-ui, sans-serif;
  --f-sans:"Inter", ui-sans-serif, system-ui, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --radius-sm:4px;
  color-scheme: light;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--off-white);
  color:var(--harbor-teal);
  font-family:var(--f-sans);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;}
h1,h2,h3,h4,p{margin:0;}
a{color:inherit;}
section{scroll-margin-top:88px;}

/* ---------- primitives ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--f-sans); font-weight:600; font-size:14px; line-height:1.3;
  padding:11px 22px; border-radius:var(--radius-sm); border:1.5px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
}
.btn-primary{ background:var(--school-bus-yellow); color:var(--harbor-teal); }
.btn-secondary{ background:var(--harbor-teal); color:var(--white); }
.btn-ghost{ background:transparent; color:var(--harbor-teal); border-color:var(--harbor-teal); }
.btn-sm{ padding:6px 14px; font-size:13px; }

/* ---------- wordmark lockup ---------- */
.lockup{ display:inline-grid; text-decoration:none; }
.lockup .l1{ display:flex; align-items:center; gap:0.28em; white-space:nowrap; }
.lockup .name{ font-family:var(--f-display); font-weight:800; font-size:1em; line-height:.9; letter-spacing:.01em; text-transform:uppercase; }
.lockup .chip{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-weight:800; font-size:0.4em; line-height:1;
  text-transform:uppercase; letter-spacing:.06em; white-space:nowrap;
  padding:0 0.56em; border-radius:var(--radius-sm);
  /* height and horizontal padding are both pinned to WHEELER's cap-height
     (~0.72em / ~0.22em of the lockup's own font-size) rather than the chip's
     font-size, so bumping the chip's type size doesn't also grow the badge */
  height:1.8em;
}
.lockup .l2{
  display:flex; justify-content:space-between; width:100%;
  font-family:var(--f-display); font-weight:800; font-size:0.6em; line-height:1;
  text-transform:uppercase; margin-top:0.22em; letter-spacing:-0.01em;
}
.lockup .l2 span{ display:inline-block; }
.lockup .l2 .gap{ width:0.55em; }

.lockup.on-light .name{ color:var(--harbor-teal); }
.lockup.on-light .chip{ background:var(--harbor-teal); color:var(--white); }
.lockup.on-light .l2{ color:var(--harbor-teal); }

.lockup.on-teal .name{ color:var(--off-white); }
.lockup.on-teal .chip{ background:var(--school-bus-yellow); color:var(--harbor-teal); }
.lockup.on-teal .l2{ color:var(--off-white); }

.nav .lockup{ font-size:22px; }
.foot .lockup{ font-size:22px; }

/* ---------- nav (stays put; page scrolls behind it) ---------- */
.nav{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:16px 48px;
  background:var(--off-white); border-bottom:1px solid var(--line);
}
.nav-links{ display:flex; gap:30px; font-size:14.5px; font-weight:600; white-space:nowrap; }
.nav-links a{ text-decoration:none; padding-bottom:2px; border-bottom:2px solid transparent; }
.nav-links a:hover{ border-bottom-color:var(--line); }
.nav-links a.active{ border-bottom-color:var(--school-bus-yellow); }

/* ---------- the sign (hero) ---------- */
.sign-frame{ background:var(--off-white); padding:10px; max-width:1180px; margin:0 auto; }
/* Hero lines never wrap: type scales with the sign's width (cqi) instead. */
.sign-top,.sign-bottom{ container-type:inline-size; }
.sign-top{ background:var(--harbor-teal); padding:clamp(36px,7vw,64px) clamp(24px,6vw,64px) clamp(20px,4vw,32px); }
.name{ font-family:var(--f-display); font-weight:800; font-size:clamp(32px,17cqi,100px); white-space:nowrap; line-height:.94; color:var(--off-white); letter-spacing:-0.01em; }
.surname{ font-family:var(--f-display); font-weight:800; font-size:clamp(22px,12cqi,70px); white-space:nowrap; line-height:1; color:var(--school-bus-yellow); margin-top:8px; letter-spacing:-0.01em; }
.sign-bottom{ background:var(--school-bus-yellow); padding:clamp(32px,6.5vw,58px) clamp(24px,6vw,64px); text-align:center; }
.office{ font-family:var(--f-display); font-weight:800; font-size:clamp(16px,8cqi,54px); line-height:1.15; color:var(--harbor-teal); text-transform:uppercase; letter-spacing:-0.005em; white-space:nowrap; }

/* ---------- long-form sections ---------- */
/* Links in running text: a thin teal underline, never yellow, so they can't be mistaken for the
   highlighter stripe on <strong> (design system README › Links in running text). */
.prose a,.lede a,.item a{ color:var(--harbor-teal); text-decoration:underline 1px; text-underline-offset:.2em; }
.prose a:hover,.lede a:hover,.item a:hover{ text-decoration-thickness:2px; }
.section{ max-width:640px; margin:0 auto; padding:64px 32px; container-type:inline-size; }
.section + .section{ border-top:1px solid var(--line); }
.eyebrow{ font-family:var(--f-mono); font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--amber); margin-bottom:14px; }
#platform h2{ white-space:nowrap; font-size:clamp(12px,4.8cqi,34px); }
.section h2{ font-family:var(--f-display); font-weight:800; font-size:clamp(26px,4.5vw,34px); color:var(--harbor-teal); margin-bottom:28px; text-wrap:balance; }
.prose p{ font-size:16.5px; line-height:1.75; color:var(--harbor-teal); max-width:60ch; }
.prose p + p{ margin-top:18px; }
/* Emphasis: semibold + a school-bus-yellow highlighter stripe (design system README › Emphasis).
   Keep bolded runs short — a few words, not whole clauses. */
.prose strong{
  font-weight:600;
  background:linear-gradient(transparent 70%, color-mix(in srgb, var(--school-bus-yellow) 55%, transparent) 70%, color-mix(in srgb, var(--school-bus-yellow) 55%, transparent) 84%, transparent 84%);
  -webkit-box-decoration-break:clone; /* Safari still needs the prefix */
  box-decoration-break:clone;
}
.prose .greeting{ font-family:var(--f-display); font-weight:700; font-size:20px; margin-bottom:4px; }
.prose .sign-off{ margin-top:26px; font-style:normal; }
.prose .ps{ margin-top:26px; }
.prose .ps-mark{ font-family:var(--f-display); font-weight:800; }
.prose .sign-off .name-sig{ display:block; font-family:var(--f-display); font-weight:800; font-size:19px; margin-top:2px; }

.lede{ font-size:17px; line-height:1.75; color:var(--harbor-teal); max-width:60ch; margin-bottom:44px; }
.lede p + p{ margin-top:18px; }

.pillar + .pillar{ margin-top:48px; padding-top:44px; border-top:1px solid var(--line); }
.pillar-name{ font-family:var(--f-display); font-weight:800; font-size:21px; color:var(--harbor-teal); }
.pillar-dek{ font-size:14.5px; font-style:italic; color:var(--harbor-teal); opacity:.7; margin-top:6px; max-width:52ch; }
.items{ margin-top:24px; display:flex; flex-direction:column; gap:22px; }
.item h4{ font-family:var(--f-sans); font-weight:700; font-size:15.5px; color:var(--harbor-teal); margin-bottom:5px; }
.item p{ font-size:14.5px; line-height:1.6; color:var(--harbor-teal); opacity:.88; max-width:58ch; }

.donate-form{ margin-top:36px; }

.foot{ background:var(--harbor-teal); padding:32px 40px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.foot p{ color:var(--off-white); opacity:.7; font-size:12px; }

@media (max-width:640px){
  .nav,.section,.foot{ padding-inline:20px; }
  /* Two fixed rows: wordmark, then all three links on one line. */
  .nav{ flex-direction:column; align-items:flex-start; gap:10px; padding-block:12px; }
  .nav .lockup{ font-size:18px; }
  .nav-links{ gap:clamp(14px,5vw,24px); font-size:clamp(13px,3.7vw,14.5px); }
  section{ scroll-margin-top:120px; }
  .sign-bottom{ padding-inline:16px; }
}