/* Shared styling for the privacy and terms pages. Same palette and type as
   the book page, set for long-form reading rather than marketing. */

:root {
  --cream: #f4ecda;
  --ink: #1f2f3d;
  --muted: rgba(31, 47, 61, .68);
  --rule: rgba(31, 47, 61, .14);
  --accent: #c2962f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 17px/1.65 'Nunito Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 68ch;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 5vw, 40px) 96px;
}

header { padding-bottom: 26px; border-bottom: 1px solid var(--rule); margin-bottom: 34px; }

.home {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 800 13px/1 'Nunito Sans', sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.home:hover { color: var(--ink); }
.home img { width: 30px; height: 30px; object-fit: contain; }

h1 {
  font: 700 clamp(30px, 5vw, 40px)/1.15 'Zilla Slab', Georgia, serif;
  letter-spacing: -.01em;
  margin: 22px 0 8px;
}

.updated { font-size: 14.5px; color: var(--muted); margin: 0; }

h2 {
  font: 600 clamp(20px, 2.6vw, 23px)/1.3 'Zilla Slab', Georgia, serif;
  margin: 40px 0 10px;
}

h3 { font: 800 15px/1.4 'Nunito Sans', sans-serif; margin: 26px 0 6px; }

p, li { color: rgba(31, 47, 61, .88); }
p { margin: 0 0 14px; }

ul { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 7px; }

a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent); }

strong { font-weight: 800; }

/* The one thing worth pulling out of the prose on the privacy page. */
.callout {
  background: rgba(255, 255, 255, .5);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
  margin: 0 0 26px;
}
.callout p:last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; margin: 6px 0 20px; font-size: 15.5px; }
th, td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font: 800 12.5px/1.3 'Nunito Sans', sans-serif; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }

footer {
  margin-top: 52px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  color: var(--muted);
}
footer a { margin-right: 16px; }

/* Placeholders the site owner still has to fill in. Deliberately loud so a
   page can never be published with one left in by accident. */
.todo {
  background: #ffe9a8;
  border-bottom: 2px solid #c2962f;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 800;
  color: #5a4300;
}