/* A long read on the game's paper: a dark wood bar on top, one narrow column, clause numbers as slab tabs. */
:root {
  --paper: #fbf4e6; --ink: #3b2216; --muted: #7d6150; --rule: #e6d6bb;
  --wood: #2a1a10; --cream: #f6e7c8; --link: #a03a22; --tab: #ffcd3c; --mark: #ffe9a8;
  --slab: "Roboto Slab", "Rockwell", Georgia, serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #1d140e; --ink: #f1e2c8; --muted: #bfa386; --rule: #3e2c20;
  --wood: #120b07; --cream: #f6e7c8; --link: #ffa27a; --tab: #e8b72c; --mark: #5a4614; color-scheme: dark; } }
:root[data-theme="dark"] {
  --paper: #1d140e; --ink: #f1e2c8; --muted: #bfa386; --rule: #3e2c20;
  --wood: #120b07; --cream: #f6e7c8; --link: #ffa27a; --tab: #e8b72c; --mark: #5a4614; color-scheme: dark; }

* { box-sizing: border-box; }
html { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.65 var(--serif); }
a { color: var(--link); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--tab); outline-offset: 3px; border-radius: 2px; }
mark { background: var(--mark); color: inherit; padding: 0 3px; border-radius: 3px; }
.mail { user-select: all; white-space: nowrap; }

.bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: var(--wood);
  padding-block: 14px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.bar a { color: var(--cream); text-decoration: none; font-family: var(--slab); }
.home { font-weight: 800; font-size: 19px; transform: rotate(-2deg); display: inline-block; text-shadow: 0 2px 0 #000; }
.bar nav { display: flex; gap: 18px; font-size: 15px; }
.bar nav a { opacity: .75; }
.bar nav a[aria-current="page"], .bar nav a:hover { opacity: 1; box-shadow: inset 0 -2px 0 var(--tab); }

main { max-width: 68ch; margin: 0 auto; padding-block: 40px 56px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.kicker { margin: 0; font: 700 13px/1 var(--slab); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
h1 { margin: 10px 0 4px; font: 800 clamp(34px, 6vw, 48px)/1.08 var(--slab); text-wrap: balance; }
.date { margin: 0 0 28px; color: var(--muted); font-size: 15px; }
section { border-top: 1px solid var(--rule); margin-top: 30px; padding-top: 22px; }
h2 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 10px; font: 700 21px/1.3 var(--slab); text-wrap: balance; }
h2 span { flex: none; display: inline-grid; place-items: center; min-width: 28px; height: 28px; border-radius: 6px;
  background: var(--tab); color: #3b2216; font-size: 15px; font-weight: 800; transform: translateY(-2px); }
p, ul, dl { margin: 0 0 14px; }
ul { padding-left: 22px; }
li + li { margin-top: 6px; }
dl { display: grid; grid-template-columns: 9.5em 1fr; gap: 10px 20px; }
dt { font: 700 15px/1.6 var(--slab); padding-top: 2px; }
dd { margin: 0; min-width: 0; }
@media (max-width: 560px) { dl { grid-template-columns: 1fr; gap: 2px; } dd { margin-bottom: 12px; } }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; max-width: 68ch; margin: 0 auto;
  border-top: 1px solid var(--rule); color: var(--muted); font-size: 14px; padding-block: 18px 32px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }