/* Hemophilia Ontario, EVOLUTION door.
   Design system generated from the subject: one thread of care, carried since 1956.
   A single deep red thread (the community's thread) runs down every page, with a
   droplet node wherever the story pauses. Institutional serif display type, warm
   paper ground, the organisation's own red carried onto WXZA tokens. */
:root{
  /* Fruit Chord, sampled from hemophilia.on.ca (CSS + logo), six roles */
  --skin:#FAF6F3;        /* warm paper ground, tint of the site's #F8F9FA */
  --flesh:#9D0208;       /* the brand red: site header, 37 uses in their CSS */
  --seed:#2B1B1B;        /* the theme's dark ink */
  --stem:#6C757D;        /* the site's working grey: structure, captions */
  --ripeness:#CF3537;    /* the logo mark's brighter red: live accents */
  --juice:#F6E3E1;       /* soft wash tinted from the brand red */
  --paper:#FFFDFC;
  --line:#E9D9D5;
  --font-display:"Charter","Bitstream Charter","Sitka Text",Georgia,serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fs-hero:clamp(2rem,6.2vw,3.4rem);
  --fs-h2:clamp(1.5rem,4.4vw,2.1rem);
  --fs-body:1.0625rem;
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem;
  --r-card:14px; --r-btn:999px;
  --thread-w:2px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--skin);color:var(--seed);font-family:var(--font-body);font-size:var(--fs-body);line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--flesh)}
.num,.stat-num{font-variant-numeric:tabular-nums}
.concept-strip{background:var(--seed);color:#F3E9E4;font-size:.8125rem;text-align:center;padding:.5rem 1rem}
.concept-strip strong{color:#fff}
.site-head{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
.head-in{max-width:72rem;margin:0 auto;padding:.6rem 1rem;display:flex;align-items:center;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--seed);min-height:44px}
.brand img{width:40px;height:40px;border-radius:50%}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:1.15rem;line-height:1.1}
.brand-name small{display:block;font-family:var(--font-body);font-weight:400;font-size:.72rem;color:var(--stem);letter-spacing:.04em}
.main-nav{margin-left:auto}
.main-nav ul{display:flex;gap:.25rem;list-style:none;margin:0;padding:0}
.main-nav a{display:flex;align-items:center;min-height:44px;padding:.4rem .8rem;text-decoration:none;color:var(--seed);border-radius:var(--r-btn);font-weight:600;font-size:.95rem}
.main-nav a:hover,.main-nav a[aria-current="page"]{background:var(--juice);color:var(--flesh)}
.menu-btn{display:none;margin-left:auto;min-height:44px;min-width:44px;border:1px solid var(--line);background:var(--paper);border-radius:10px;font-size:1.1rem;cursor:pointer;color:var(--seed)}
.thread{position:relative;max-width:72rem;margin:0 auto;padding:0 1rem}
.thread::before{content:"";position:absolute;left:calc(1rem + 5px);top:0;bottom:0;width:var(--thread-w);background:linear-gradient(var(--ripeness),var(--flesh))}
.crumb{font-size:.85rem;color:var(--stem);padding:1rem 0 0 1.6rem}
.crumb a{color:var(--stem)}
.hero{padding:2.2rem 0 1rem 1.6rem;position:relative}
.hero::before{content:"";position:absolute;left:-1px;top:2.6rem;width:12px;height:12px;border-radius:50% 50% 50% 0;background:var(--flesh);transform:rotate(-45deg)}
.kicker{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--flesh);margin:0 0 .6rem}
.hero h1{font-family:var(--font-display);font-size:var(--fs-hero);line-height:1.12;margin:0 0 1rem;max-width:22ch;text-wrap:balance}
.hero p{max-width:62ch;margin:0}
.hero-photo{margin:1.6rem 0 0 1.6rem;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line)}
.hero-photo img{width:100%;height:auto}
.section{padding:2rem 0 .5rem 1.6rem;position:relative}
.section::before{content:"";position:absolute;left:-1px;top:2.4rem;width:12px;height:12px;border-radius:50% 50% 50% 0;background:var(--paper);border:2px solid var(--flesh);transform:rotate(-45deg)}
.section h2{font-family:var(--font-display);font-size:var(--fs-h2);line-height:1.2;margin:.2rem 0 1rem;text-wrap:balance}
.section p{max-width:68ch}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin:1.4rem 0}
.stat{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--flesh);border-radius:var(--r-card);padding:1rem}
.stat-num{display:block;font-family:var(--font-display);font-size:1.45rem;font-weight:700;color:var(--flesh);line-height:1.15}
.stat-label{display:block;font-size:.85rem;color:var(--stem);margin-top:.3rem}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin:1.2rem 0}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:1.3rem}
.card h3{font-family:var(--font-display);margin:0 0 .5rem;font-size:1.2rem;line-height:1.3}
.card p{margin:0 0 .6rem;font-size:.98rem}
.card-link{font-weight:700;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.card-link::after{content:"\2192";margin-left:.35rem}
.vision{font-family:var(--font-display);font-size:clamp(1.5rem,4.6vw,2.2rem);line-height:1.3;margin:.4rem 0;border:0;padding:0;max-width:30ch;text-wrap:balance}
.vision-note{color:var(--stem)}
.values{list-style:none;margin:0;padding:0}
.values li{padding:.7rem 0 .7rem 1.4rem;border-bottom:1px solid var(--line);position:relative;max-width:68ch}
.values li::before{content:"";position:absolute;left:0;top:1.15rem;width:8px;height:8px;border-radius:50% 50% 50% 0;background:var(--flesh);transform:rotate(-45deg)}
.partners{font-family:var(--font-display);font-size:1.15rem}
.photo{margin:1.4rem 0}
.photo img{border-radius:var(--r-card);border:1px solid var(--line)}
.photo figcaption{font-size:.85rem;color:var(--stem);margin-top:.45rem}
.job{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:1.6rem}
.fineprint{font-size:.85rem;color:var(--stem)}
.cta-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.6rem 1.4rem;border-radius:var(--r-btn);text-decoration:none;font-weight:700;border:2px solid var(--flesh)}
.btn-primary{background:var(--flesh);color:#fff}
.btn-primary:hover{background:var(--ripeness);border-color:var(--ripeness)}
.btn-ghost{background:transparent;color:var(--flesh)}
.nextstep{background:var(--juice);border-radius:var(--r-card);padding:1.8rem;margin:2.2rem 0 2.6rem 1.6rem}
.nextstep h2{font-family:var(--font-display);font-size:var(--fs-h2);margin:.2rem 0 .6rem}
.nextstep p{max-width:62ch}
.site-foot{background:var(--seed);color:#EFE6E1;margin-top:1rem}
.foot-in{max-width:72rem;margin:0 auto;padding:2.2rem 1rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.6rem}
.site-foot h4{margin:0 0 .7rem;font-family:var(--font-display);color:#fff}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin:.3rem 0}
.site-foot a{color:#EFE6E1;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.site-foot a:hover{text-decoration:underline}
.foot-base{border-top:1px solid #4a3535;padding:1.2rem 1rem;text-align:center;font-size:.85rem;color:#CBB9B2}
.foot-base strong{color:#fff}
@media (max-width:760px){
  .main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);padding:.5rem 1rem 1rem}
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column}
  .main-nav a{width:100%}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center}
  .hero,.section{padding-left:1.3rem}
  .hero-photo,.nextstep{margin-left:1.3rem}
  .thread::before{left:calc(1rem + 4px)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}