:root {
  --sage: #4A7C6F;
  --sage-deep: #35594F;
  --gold: #B8963E;
  --ink: #1C1C1E;
  --paper: #F7F3EC;
  --card: #FFFFFF;
  --muted: #6E6E73;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Georgia, serif;
  color: var(--ink);
  background: var(--paper);
}
header {
  background: linear-gradient(160deg, var(--sage) 0%, var(--sage-deep) 100%);
  color: #fff;
  padding: 3.5rem 1.5rem 3rem;
  text-align: center;
}
header h1 { font-size: 1.9rem; font-weight: 600; }
header p { color: #F3E3B5; margin-top: .4rem; font-size: 1rem; }
header .arabic { font-size: 1.6rem; color: #F3E3B5; margin-bottom: .6rem; }
main { max-width: 42rem; margin: 0 auto; padding: 2.5rem 1rem 4rem; }
h2 {
  font-size: 1.15rem;
  color: var(--sage);
  margin: 2rem 0 .6rem;
  padding-bottom: .3rem;
  border-bottom: 2px solid var(--gold);
  display: inline-block;
}
p { margin: .7rem 0; }
ul { margin: .7rem 0 .7rem 1.3rem; }
li { margin: .3rem 0; }
.lede {
  font-size: 1.15rem;
  background: var(--card);
  border-left: 4px solid var(--gold);
  padding: 1rem 1.2rem;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
footer {
  text-align: center;
  color: var(--muted);
  font-size: .85rem;
  padding: 0 1.5rem 3rem;
}
a { color: var(--sage); }
@media (prefers-color-scheme: dark) {
  :root { --sage: #5E9485; --gold: #D0A94F; --ink: #F0EADD; --paper: #15120E; --card: #211C16; --muted: #9C948A; }
}