:root {
  --bg: #faf7f2;
  --ink: #2b2620;
  --head: #3d2f1f;
  --muted: #8a7d6b;
  --faint: #b0a489;
  --line: #e5ddd0;
  --card: #fffdf9;
  --accent: #6b3f2a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1917;
    --ink: #e8e1d6;
    --head: #f3ecdf;
    --muted: #a99e8b;
    --faint: #8a7f6d;
    --line: #342f2a;
    --card: #252019;
    --accent: #d9b08c;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.65;
  font-size: 18px;
}
.wrap { max-width: 620px; margin: 0 auto; padding: 48px 24px 72px; }
a { color: var(--accent); }
.eyebrow { font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
h1 { font-size: 34px; font-weight: normal; color: var(--head); margin: 0 0 12px; line-height: 1.2; }
h2 { font-size: 22px; font-weight: normal; color: var(--head); margin: 40px 0 12px; }
.lede { font-size: 20px; color: var(--ink); margin: 0 0 28px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }

/* signup card */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 24px; margin: 28px 0; }
form.signup { display: flex; flex-direction: column; gap: 14px; }
input[type=email] {
  font-family: inherit; font-size: 17px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 5px; background: var(--bg); color: var(--ink); width: 100%;
}
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); }
.consent input { margin-top: 4px; }
button {
  font-family: inherit; font-size: 17px; cursor: pointer;
  background: var(--head); color: var(--bg); border: 0; border-radius: 5px; padding: 13px 18px;
}
button:disabled { opacity: .6; cursor: default; }
.msg { font-size: 15px; margin: 6px 0 0; min-height: 1.2em; }
.msg.ok { color: var(--accent); }
.msg.err { color: #a3402f; }
@media (prefers-color-scheme: dark) { .msg.err { color: #e59a86; } }

/* how it works */
ol.how { padding-left: 20px; }
ol.how li { margin: 8px 0; }

/* archive list */
ul.issues { list-style: none; padding: 0; margin: 20px 0; }
ul.issues li { border-bottom: 1px solid var(--line); padding: 16px 0; }
ul.issues .day { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
ul.issues .title { font-size: 20px; color: var(--head); display: block; margin: 2px 0; text-decoration: none; }
ul.issues .sub { color: var(--muted); font-size: 15px; }

footer { border-top: 1px solid var(--line); margin-top: 56px; padding-top: 20px; color: var(--faint); font-size: 13px; }
footer a { color: var(--muted); }