/* Siriology.com — the reading pages: terms of use, and what the site records.
   A separate sheet so it touches nothing else: his six stylesheets and theme.css
   are untouched, and the room working on the phone layout is not disturbed.
   Colors come from theme.css tokens, so these pages follow light/dark/auto. */

main.legal{
  max-width:760px;
  margin:0 auto;
  padding:50px 25px 90px;
}
main.legal .eyebrow{margin-bottom:18px}
main.legal h1{font-size:clamp(40px,5vw,62px);margin-bottom:26px}
main.legal h1 span{color:var(--s-accent)}
main.legal .lead{
  font-size:22px;line-height:1.5;color:var(--s-soft);
  margin:0 0 40px;
}
main.legal h2{
  font-size:clamp(25px,2.6vw,30px);
  letter-spacing:-.03em;
  margin:52px 0 16px;
  padding-top:26px;
  border-top:1px solid var(--s-rule);
}
main.legal p{font-size:18px;line-height:1.65;color:var(--s-soft)}
main.legal p strong,
main.legal li strong{color:var(--s-ink);font-weight:600}
/* li strong was inheriting the list's muted color and only going bold: 5.8:1
   against the dark ground where p strong sits at 19.29:1. Measured, not
   assumed - the two emphases looked the same weight and were not the same
   color, which is the failure a palette variable hides. */
main.legal ul{
  margin:0 0 24px;padding-left:22px;
  font-size:18px;line-height:1.7;color:var(--s-soft);
}
main.legal li{margin-bottom:7px}
main.legal a{color:var(--s-link)}

main.legal .callout{
  background:var(--s-panel);
  border-radius:18px;
  padding:24px 26px;
  margin:0 0 10px;
}
main.legal .callout p{margin:0;font-size:18px}

main.legal .legal-note{
  margin-top:50px;padding-top:24px;
  border-top:1px solid var(--s-rule);
  font-size:15px;line-height:1.6;
}

@media(max-width:650px){
  main.legal{padding:28px 22px 70px}
  main.legal h1{font-size:38px}
  main.legal .lead{font-size:19px;margin-bottom:32px}
  main.legal h2{font-size:23px;margin-top:42px}
  main.legal p,main.legal ul{font-size:17px}
  main.legal .callout{padding:20px;border-radius:14px}
}