/* Birth Bridge — static content pages.
   One spacing scale (8/12/16/24/32/48/64/88) drives every margin, padding and
   rule on these pages, so the vertical rhythm is even rather than ad hoc.
   It lines up with the app's Tailwind steps (2/3/4/6/8/12/16). */
:root{
  --cream:#faf8f4; --cream-dark:#f3efe8;
  --ink:#33312d; --ink-soft:#5c574f; --ink-faint:#8a8175;
  --sage-900:#2e3c2b; --sage-700:#43593a; --sage-600:#537148; --sage-500:#6b8f5b;
  --sage-100:#e8ece3; --sage-50:#f6f7f4;
  --warm-200:#efe8dd; --warm-700:#6b5539;
  --rule:#e8e2d7;

  --s1:.5rem; --s2:.75rem; --s3:1rem; --s4:1.5rem;
  --s5:2rem;  --s6:3rem;   --s7:4rem; --s8:5.5rem;

  --measure:38rem;
  --radius:16px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.75; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--measure); margin:0 auto; padding:0 var(--s4)}
a{color:var(--sage-600); text-underline-offset:.18em; text-decoration-thickness:1px}
a:hover{color:var(--sage-700)}

/* Masthead — the mark, drawn not simplified, same two elements at every size. */
.masthead{border-bottom:1px solid var(--rule); background:var(--cream)}
.masthead .wrap{display:flex; align-items:center; gap:var(--s2); padding-top:var(--s4); padding-bottom:var(--s4)}
.masthead a{display:flex; align-items:center; gap:var(--s2); text-decoration:none; color:var(--sage-900)}
.masthead svg{flex:none}
.masthead b{font-family:"DM Serif Display",Georgia,serif; font-weight:400; font-size:1.2rem; letter-spacing:.01em}

h1,h2,h3,.standfirst{text-wrap:pretty}
h1{
  font-family:"DM Serif Display",Georgia,serif; font-weight:400;
  font-size:2.4rem; line-height:1.18; letter-spacing:-.012em;
  margin:var(--s7) 0 var(--s3); color:var(--sage-900);
}
.standfirst{font-size:1.16rem; line-height:1.62; color:var(--ink-soft); margin:0 0 var(--s6)}
h2{
  font-family:"DM Serif Display",Georgia,serif; font-weight:400;
  font-size:1.55rem; line-height:1.3; margin:var(--s7) 0 var(--s3); color:var(--sage-900);
}
h3{font-size:1rem; font-weight:600; line-height:1.5; margin:var(--s5) 0 var(--s2); color:var(--ink)}
p{margin:0 0 var(--s4)}
ul,ol{margin:0 0 var(--s4); padding-left:var(--s4)}
li{margin-bottom:var(--s2); padding-left:.15rem}
li:last-child{margin-bottom:0}
strong{font-weight:600; color:var(--ink)}
main{padding-bottom:var(--s5)}

/* A pulled-out figure for the numbers that matter. */
.stat{
  background:var(--sage-50); border:1px solid var(--sage-100);
  border-radius:var(--radius); padding:var(--s5); margin:var(--s5) 0;
}
.stat .fig{
  font-family:"DM Serif Display",Georgia,serif; font-size:1.8rem; color:var(--sage-700);
  line-height:1.15; margin:0 0 var(--s2);
}
.stat p{margin:0 0 var(--s3)}
.stat p:last-child{margin:0}
.stat .src{margin-top:var(--s4)}

.src{font-size:.84rem; line-height:1.65; color:var(--ink-faint); margin-top:var(--s5)}

/* The one call to action. Quiet, and never the first thing on the page. */
.cta{
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:var(--s6) 0; margin:var(--s7) 0;
}
.cta p{margin:0 0 var(--s4)}
.cta p:last-child{margin:0}
.btn{
  background:var(--sage-600); color:#fff; text-decoration:none;
  font-weight:600; font-size:.95rem; line-height:1.4; padding:var(--s2) var(--s4);
  border-radius:999px; min-height:44px; display:inline-flex; align-items:center;
}
.btn:hover{background:var(--sage-700); color:#fff}

.note{
  font-size:.92rem; line-height:1.7; color:var(--ink-soft); background:var(--cream-dark);
  border-radius:var(--radius); padding:var(--s5); margin:var(--s6) 0;
}
.note p{margin:0 0 var(--s3)}
.note p:last-child{margin:0}
.note .src{margin-top:var(--s4)}

footer.site{border-top:1px solid var(--rule); margin-top:var(--s8); padding:var(--s6) 0 var(--s7)}
footer.site .mark{font-family:"DM Serif Display",Georgia,serif; font-style:italic; color:var(--ink-faint); margin:0 0 var(--s2)}
footer.site .fine{font-size:.84rem; color:var(--ink-faint); line-height:1.65; margin:0}

@media (max-width:560px){
  :root{--s6:2.5rem; --s7:3rem; --s8:4rem}
  body{font-size:16px}
  h1{font-size:1.95rem}
  h2{font-size:1.35rem}
  .stat,.note{padding:var(--s4)}
  .wrap{padding:0 var(--s3)}
}