/* =====  Design tokens  ===== */
:root {
  --bg: #f9f6f0;
  --text: #141414;
  --link: #118ab2;
  --max: 48em;

  --font-serif: "IBM Plex Serif", serif;
  --font-sans: "IBM Plex Sans", sans-serif;
  --font-body: "Alegreya", serif;
  --font-mono: "IBM Plex Mono", monospace;
}

/* =====  Global reset  ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* =====  Base styles  ===== */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

p        { font-size: 1.1rem; margin-bottom: 0.65em; }
a        { color: var(--link); text-decoration: none; }
h1, h2   { font-family: var(--font-serif); font-weight: 500; line-height: 1.2; margin: .5em 0 .4em; }
h3       { font-family: var(--font-sans);  font-weight: 500; }
h4       { font-family: var(--font-serif); font-weight: 700; }
ul, ol           { list-style-position: inside;margin-bottom: 0.325em; }
li {margin-bottom: 0.325em;font-size: 1.1rem; }

section  { padding: 2rem 1.25rem; margin: 0 auto; max-width: var(--max); }
header{padding:4rem 1.25rem;margin:0 auto;}
            header h1{font-size:clamp(2.4rem,6vw,4rem)}
            header p{font-size:1.2rem;margin:1rem auto 0}

@media (min-width: 48em) {
  p            { font-size: 1.2rem; }
  li { font-size: 1.2rem; }
  header       {max-width:54em}
  header p     { font-size: 1.3rem; }
}

/* =====  Component hooks  ===== */
site-footer {
  display: block;
  background: #141414;
  color: #f9f6f0;
  padding: 2rem 1.25rem;
  text-align: center;
}