/* Self-hosted Fira Sans — the owned SIL-OFL brand face (no third-party font dependency) */
@font-face{
  font-family:"Fira Sans"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/FiraSans-Regular.ttf") format("truetype");
}
@font-face{
  font-family:"Fira Sans"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/FiraSans-SemiBold.ttf") format("truetype");
}
/* Brand design tokens (sampled from the logo; Fibonacci spacing) — design-system foundations */
:root{
  --sop-blue:#0095FF; --sop-blue-deep:#005FA3; --sop-green:#267F00; --sop-green-deep:#1F6A00;
  --sop-black:#000000; --sop-ink:#141414; --sop-muted:#5B6670;
  --sop-border:#E2E6EA; --sop-mist:#F4F6F8; --sop-paper:#FFFFFF;
  --font-sans:"Fira Sans","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --font-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --font-mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  --s3:3px; --s5:5px; --s8:8px; --s13:13px; --s21:21px; --s34:34px; --s55:55px; --s89:89px; --s144:144px;
  --radius:5px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--sop-paper); color:var(--sop-ink);
  font-family:var(--font-sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;}
.wrap{max-width:960px; margin:0 auto; padding:0 var(--s34);}
a{color:var(--sop-blue-deep); text-underline-offset:3px;}
section{padding:var(--s55) 0;}

/* Sticky site header — keeps a membership call-to-action reachable as the page scrolls */
header.site{position:sticky; top:0; background:rgba(255,255,255,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--sop-border); z-index:10;}
header.site .row{display:flex; align-items:center; justify-content:space-between; gap:var(--s21); padding:var(--s13) 0;}
#brand-logo{height:34px;}
.cta-text{font-weight:600; color:var(--sop-blue-deep); text-decoration:none; font-size:16px; white-space:nowrap;}

/* Call-to-action buttons — same size/shape; the hue signals the KIND of action:
   green = connect (initiate the relationship), blue = support (voluntary ongoing support). */
.cta-connect, .cta-support{display:inline-flex; align-items:center; gap:var(--s8); color:#fff;
  font-weight:600; font-size:17px; text-decoration:none; padding:var(--s13) var(--s21); border-radius:var(--radius);
  transition:background .15s ease;}
.cta-connect{background:var(--sop-green);}
.cta-connect:hover{background:var(--sop-green-deep);}
.cta-support{background:var(--sop-blue-deep);}
.cta-support:hover{background:#004A82;}
/* The trailing arrow is decoration, so it lives here, not in the markup (the label stays the only content). */
.cta-connect::after, .cta-support::after{content:"\2192"; font-weight:600;}

.hero{padding:var(--s89) 0 var(--s55); border-bottom:1px solid var(--sop-border);}
.hero h1{font-size:55px; line-height:1.04; font-weight:600; letter-spacing:-.015em; margin:0 0 var(--s21); max-width:16ch;}
.hero .sub{font-size:21px; color:var(--sop-muted); margin:0 0 var(--s34); max-width:54ch; font-weight:400;}
.hero .note{font-size:15px; color:var(--sop-muted); margin:var(--s13) 0 0;}

.conviction{background:var(--sop-mist); border-top:1px solid var(--sop-border); border-bottom:1px solid var(--sop-border);}
.conviction p{font-family:var(--font-serif); font-size:23px; line-height:1.6; max-width:60ch; margin:0 0 var(--s21); color:var(--sop-ink);}
.conviction p:last-child{margin-bottom:0;}
.conviction strong{font-weight:600;}

.eyebrow{font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--sop-blue-deep); margin:0 0 var(--s13);}
h2{font-size:34px; font-weight:600; letter-spacing:-.01em; margin:0 0 var(--s21);}

.copy{font-size:19px; line-height:1.6; color:var(--sop-ink); max-width:60ch; margin:0;}
.copy + .copy{margin-top:var(--s21);}
.code{background:var(--sop-mist); border:1px solid var(--sop-border); border-radius:var(--radius);
  padding:var(--s13) var(--s21); font-family:var(--font-mono); font-size:14px; line-height:1.55;
  overflow-x:auto; white-space:pre; margin:var(--s13) 0 var(--s21);}

.who ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--s13) var(--s34);}
.who li{padding-left:var(--s21); position:relative; color:var(--sop-ink);}
.who li::before{content:"\203A"; position:absolute; left:0; color:var(--sop-blue); font-weight:600;}

.member{background:var(--sop-mist); border-top:1px solid var(--sop-border);}
.member .body{max-width:60ch;}
.member p{margin:0 0 var(--s21);}
.member .free{font-weight:500; color:var(--sop-ink);}

.rv{font-family:var(--font-mono);}
table.stats{border-collapse:collapse; width:100%; max-width:480px; font-size:15px; margin:var(--s13) 0;}
table.stats td{padding:var(--s8) 0; border-bottom:1px solid var(--sop-border);}
table.stats td:first-child{color:var(--sop-muted); padding-right:var(--s21); white-space:nowrap;}

footer.site{border-top:1px solid var(--sop-border); padding:var(--s34) 0 var(--s55);}
footer.site .links{display:flex; gap:var(--s21); flex-wrap:wrap; margin:0 0 var(--s13);}
footer.site .links a{color:var(--sop-blue-deep); text-decoration:none; font-weight:500;}
footer.site .links a:hover{text-decoration:underline;}
footer.site .sig{font-size:15px; color:var(--sop-muted); margin:0 0 var(--s5);}

@media(max-width:680px){ .hero h1{font-size:38px} h2{font-size:27px} .conviction p{font-size:20px} }

/* 'Coverage Reporter' project page (Spec 6). Reached only by direct link, never from this site's
   navigation, and the Designer sized it narrower than the site's own views. Scoped to .project
   because .wrap, section and .copy are shared: unscoped, these values would resize the Landing and
   Quality views to match a page neither of them is. */
body.project .wrap{max-width:760px;}
body.project section{padding:var(--s34) 0;}
body.project h1{font-size:42px; font-weight:600; letter-spacing:-.015em; margin:var(--s21) 0 var(--s13);}
body.project .copy{font-size:17px; line-height:1.65; max-width:62ch; margin:0 0 var(--s13);}
@media(max-width:680px){ body.project h1{font-size:32px} }