:root{
  --ink:#191919;
  --paper:#FAF9F5;
  --cream:#F0EEE6;
  --coral:#D97757;
  --clay:#CC785C;
  --slate:#5C5A54;
  --line:#E3DFD5;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:840px;margin:0 auto;padding:0 24px}

/* ---------- header ---------- */
header{
  background:var(--cream);
  border-bottom:1px solid var(--line);
  padding:64px 0 48px;
}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:11.5px;
  font-weight:700;
  color:var(--coral);
  margin:0 0 14px;
}
h1{
  font-size:44px;
  line-height:1.12;
  letter-spacing:-.02em;
  font-weight:600;
  margin:0 0 18px;
  max-width:17ch;
}
h1 em{font-style:italic;color:var(--coral)}
.sub{
  font-size:18px;
  color:var(--slate);
  max-width:62ch;
  margin:0 0 22px;
}
.sub strong{color:var(--ink)}
.meta{
  font-size:13px;
  color:var(--slate);
  border-left:3px solid var(--coral);
  padding-left:12px;
  margin:0;
}

/* ---------- stat cards ---------- */
main{padding:48px 24px 80px}
.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px;
  margin-bottom:56px;
}
.stat{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:8px;
  padding:18px 20px;
}
.stat b{
  display:block;
  font-size:28px;
  font-weight:600;
  letter-spacing:-.02em;
  color:var(--ink);
  line-height:1.2;
}
.stat span{
  display:block;
  margin-top:4px;
  font-size:12.5px;
  color:var(--slate);
}

/* ---------- sections ---------- */
section{margin-bottom:60px}
h2{
  font-size:23px;
  font-weight:600;
  letter-spacing:-.01em;
  margin:0 0 6px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.note{
  font-size:14px;
  color:var(--slate);
  margin:0 0 24px;
  max-width:62ch;
}
.note strong{color:var(--ink)}
canvas{max-width:100%}

/* ---------- table ---------- */
table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
th{
  text-align:left;
  background:var(--cream);
  padding:9px 12px;
  font-weight:600;
  border-bottom:2px solid var(--coral);
}
td{
  padding:9px 12px;
  border-bottom:1px solid var(--line);
  color:var(--slate);
}
td:first-child{color:var(--ink)}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- caveats ---------- */
.caveats{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:8px;
  padding:28px 32px;
}
.caveats h2{border:0;padding:0;font-size:18px;margin-bottom:14px}
.caveats ul{margin:0;padding-left:20px;font-size:14.5px;
            color:var(--slate)}
.caveats li{margin-bottom:9px}
.caveats strong{color:var(--ink)}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--line);
  padding-top:24px;
  font-size:14px;
  color:var(--slate);
}
a{color:var(--clay)}
a:hover{color:var(--coral)}

@media(max-width:600px){
  h1{font-size:31px}
  header{padding:44px 0 34px}
  .stat b{font-size:23px}
}