/* everlastingparables.com, one sheet for the three pages */
:root {
  --bg: #1c1712;
  --ink: #f3e9dc;
  --muted: #c7b8a5;
  --accent: #f2a65a;
  --line: #3a3027;
  --measure: 38rem;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  color: var(--ink);
  font: 1.125rem/1.65 "Alegreya", Georgia, serif;
  background: radial-gradient(60rem 40rem at 50% -10%, #3b2a1c 0%, var(--bg) 70%) no-repeat, var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { width: 100%; max-width: var(--measure); margin: 0 auto; padding: 4rem 1rem 3rem; flex: 1; }
header.hero { text-align: center; }
header.hero img { width: 12rem; height: 12rem; border-radius: 50%; display: block; margin: 0 auto 2rem; box-shadow: 0 0 4rem #f2a65a33; }
h1 { font-weight: 700; font-size: 2.5rem; line-height: 1.15; margin: 0 0 1rem; letter-spacing: 0.01em; }
h2 { font-weight: 700; font-size: 1.35rem; margin: 2.5rem 0 0.5rem; }
p, li { color: var(--muted); }
h1, header.hero p { text-wrap: balance; }
p.lead { font-size: 1.3rem; color: var(--ink); }
a { color: var(--accent); text-underline-offset: 0.2em; }
a.button { display: inline-block; margin-top: 1.5rem; padding: 0.7rem 1.6rem; border: 1px solid var(--accent); border-radius: 2rem; text-decoration: none; }
a.button:hover, a.button:focus-visible { background: var(--accent); color: var(--bg); }
footer { border-top: 1px solid var(--line); padding: 1.5rem 1rem; font-size: 0.95rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; }
@media (max-width: 30rem) {
  main { padding-top: 2.5rem; }
  h1 { font-size: 2rem; }
  header.hero img { width: 9rem; height: 9rem; }
}