/* Shared styling for the prose pages. index.html does not use this: the app is
   one self-contained file and stays that way, with its own copy of the font
   inline. These pages are plain documents, so they fetch the font once and
   share it. Same origin, so no third party is involved and nothing is sent
   anywhere. */

@font-face{
  font-family:'Outfit';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(/outfit.woff2) format('woff2');
}

:root{
  --ground:#E8EEF2;
  --panel:#FFFFFF;
  --ink:#12263A;
  --muted:#59748A;
  --rule:#C6D4DE;
  --landmark:#15697A;
  --landmark-soft:#DCEDF0;
  --mark:#C81E5B;
  --shadow:rgba(18,38,58,.10);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#101821;
    --panel:#1A242E;
    --ink:#E7EEF4;
    --muted:#94A9B9;
    --rule:#35454F;
    --landmark:#5FBECE;
    --landmark-soft:#1E3A42;
    --mark:#FF6E9C;
    --shadow:rgba(0,0,0,.4);
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:"Outfit","Trebuchet MS",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:660px;margin:0 auto;padding:0 16px 56px}

.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin:0 -16px 24px;padding:8px 14px;
  background:var(--ground);border-bottom:1px solid var(--rule);
}
.brand{display:flex;align-items:center;gap:7px;text-decoration:none;padding:6px 2px;min-height:44px}
.brand .nm{font-size:16px;font-weight:700;color:var(--landmark);white-space:nowrap}
.practice{
  font-size:14px;font-weight:500;color:var(--landmark);background:var(--panel);
  padding:9px 14px;min-height:38px;border-radius:999px;text-decoration:none;
  box-shadow:0 1px 3px var(--shadow);display:inline-flex;align-items:center;
}

/* Matches the app's in-card back links, which return to the grown-ups page
   the same way. The topbar button crosses the zone; this returns to the parent. */
.backlink{
  display:inline-block;font-size:15px;font-weight:500;color:var(--landmark);
  text-decoration:none;padding:10px 2px;min-height:44px;line-height:24px;
}
.backlink:hover{text-decoration:underline;text-underline-offset:3px}

h1{font-size:30px;line-height:1.2;font-weight:700;margin:10px 0 6px}
.lede{font-size:18px;color:var(--muted);margin:0 0 26px}
h2{font-size:21px;font-weight:700;margin:34px 0 8px;color:var(--landmark)}
h3{font-size:17px;font-weight:700;margin:22px 0 6px}
p{margin:0 0 14px}
ol,ul{margin:0 0 14px;padding-left:22px}
li{margin:0 0 8px}
a{color:var(--landmark)}

.card{background:var(--panel);border-radius:18px;padding:18px 20px;margin:0 0 22px;
  box-shadow:0 2px 10px var(--shadow)}
.card p:last-child{margin-bottom:0}

.eg{
  font-variant-numeric:tabular-nums;font-weight:700;font-size:20px;
  letter-spacing:.01em;white-space:nowrap;
}
.eg u{text-decoration:underline;text-decoration-color:var(--landmark);
  text-decoration-thickness:3px;text-underline-offset:4px;color:var(--landmark)}
.eg b{box-shadow:inset 0 0 0 2px var(--mark);color:var(--mark);border-radius:5px;padding:0 3px}

.try{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:700;padding:15px 22px;border-radius:16px;
  background:var(--ink);color:var(--panel);text-decoration:none;margin:6px 0 4px;
}

.foot{
  border-top:1px solid var(--rule);margin-top:34px;padding-top:18px;
  font-size:14px;color:var(--muted);line-height:2.1;
}
.foot a{color:var(--muted);text-underline-offset:3px}
.foot a:hover{color:var(--landmark)}
.foot .sep{opacity:.5;padding:0 7px}

@media (max-width:420px){
  h1{font-size:26px}
  .eg{font-size:18px}
}