* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-weight: 500; font-size: 18px; line-height: 1.55; }
a { color: var(--accent); }

.site { width: min(560px, 100%); margin: 0 auto; padding: 56px 22px 64px; }
.site h1 { margin: 0 0 18px; font-weight: 700; font-size: 40px; letter-spacing: -1.2px; line-height: 1.1; }
.site .lede { margin: 0 0 28px; font-size: 19px; color: var(--ink); }
.site .label { margin: 0 0 12px; font-family: var(--font-mono); font-size: 14px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--accent); }

.button { display: inline-block; margin: 0 0 36px; padding: 14px 26px; border-radius: var(--radius-pill); background: var(--ink); color: var(--on-ink); font-weight: 700; text-decoration: none; }

.issue-list { list-style: none; margin: 0; padding: 0; }
.issue-list li { border-top: 1px solid var(--hairline); }
.issue-list li:last-child { border-bottom: 1px solid var(--hairline); }
.issue-list a { display: block; padding: 18px 0; color: var(--ink); text-decoration: none; }
.issue-list a:hover .title { color: var(--accent); }
.issue-list .meta { display: block; font-family: var(--font-mono); font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-soft); }
.issue-list .title { display: block; font-weight: 700; font-size: 20px; letter-spacing: -0.2px; }

.site-foot { margin-top: 40px; font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); }

.issue-nav { margin: 28px 22px 0; font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); }
.issue-nav a { color: var(--accent); }

/* Desktop: the issue page widens into a reading column and the type scales up.
   The issue pages keep their phone rules inline, so these use !important to win over them. */
@media (min-width: 768px) {
  body { font-size: 20px !important; line-height: 1.6 !important; }
  .page { width: min(680px, 100%) !important; padding-bottom: 88px !important; }
  .page p { font-size: 20px; }
  .page .label { font-size: 15px !important; }
  .page .stat .big { font-size: 64px !important; letter-spacing: -2px !important; }
  .page .stat .cap { font-size: 17px !important; }
  .page .bq { font-size: 26px !important; }
  .page .about-top { font-size: 17px !important; }
  .page .seriesline, .issue-nav { font-size: 14px !important; }
}