:root{
  --ink:#1a1a18; --soft:#4a4a45; --faint:#7a7a72;
  --rule:#ddd8cc; --bg:#faf8f3; --card:#fff; --gold:#8a6a2f;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--serif); font-size:18px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:44rem; margin:0 auto; padding:0 1.4rem}
header{border-bottom:1px solid var(--rule); background:var(--card)}
header .wrap{display:flex; flex-wrap:wrap; align-items:baseline; gap:1.1rem; padding:1.1rem 1.4rem}
header a.brand{
  font-family:var(--sans); font-weight:700; font-size:.95rem; letter-spacing:.02em;
  color:var(--ink); text-decoration:none; margin-right:auto;
}
header nav a{
  font-family:var(--sans); font-size:.85rem; color:var(--soft);
  text-decoration:none; border-bottom:1px solid transparent;
}
header nav a:hover{color:var(--ink); border-bottom-color:var(--gold)}
main{padding:2.6rem 0 4rem}
h1{font-size:2.1rem; line-height:1.2; font-weight:400; margin:0 0 .6rem; letter-spacing:.01em}
h1+p{font-size:1.16rem; color:var(--soft)}
h2{
  font-family:var(--sans); font-size:.82rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--gold);
  margin:2.6rem 0 .7rem;
}
p{margin:0 0 1.05rem}
ul{margin:0 0 1.15rem; padding-left:1.15rem}
li{margin:0 0 .55rem}
hr{border:0; border-top:1px solid var(--rule); margin:2.4rem 0}
a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--gold);
  text-underline-offset:2px}
a:hover{color:var(--gold)}
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.86em; background:#efeade; padding:.1em .34em; border-radius:3px;
}
strong{font-weight:600}
.cards{display:grid; gap:1rem; margin:1.2rem 0 0}
.card{
  display:block; background:var(--card); border:1px solid var(--rule);
  border-radius:9px; padding:1.15rem 1.25rem; text-decoration:none; color:inherit;
}
.card:hover{border-color:var(--gold)}
.card h3{margin:0 0 .3rem; font-size:1.16rem; font-weight:400}
.card p{margin:0; font-size:.98rem; color:var(--soft)}
.card .score{
  font-family:var(--sans); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint); margin-top:.5rem; display:block;
}
h3{font-family:var(--serif); font-size:1.22rem; font-weight:600; margin:2rem 0 .5rem}
h4{font-family:var(--sans); font-size:.95rem; font-weight:700; margin:1.5rem 0 .4rem}
ol{margin:0 0 1.15rem; padding-left:1.4rem}
blockquote{
  margin:1.3rem 0; padding:.2rem 0 .2rem 1.1rem;
  border-left:3px solid var(--gold); color:var(--soft); font-style:italic;
}
blockquote p{margin:0}
/* Tables here run to forty rows and several columns, so they scroll inside
   their own box rather than pushing the page sideways. */
.tw{overflow-x:auto; margin:1.2rem 0 1.4rem; border:1px solid var(--rule); border-radius:8px; background:var(--card)}
table{border-collapse:collapse; width:100%; font-family:var(--sans); font-size:.9rem}
th,td{text-align:left; padding:.6rem .8rem; border-bottom:1px solid var(--rule); vertical-align:top}
th{font-weight:700; font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td code{white-space:nowrap}
footer{border-top:1px solid var(--rule); background:var(--card)}
footer .wrap{padding:1.6rem 1.4rem; font-family:var(--sans); font-size:.8rem; color:var(--faint)}
footer p{margin:0 0 .4rem}
@media (max-width:600px){ body{font-size:17px} h1{font-size:1.72rem} main{padding:1.9rem 0 3rem} }