/* Magazine-only styling. Everything else comes from the campaign stylesheet
   so these pages can't drift away from the rest of the site.

   Extracted from the old magazine/index.html <style> block when the magazine
   moved to build-time rendering: the index and every article page share it. */

.mag-article { max-width: 46rem; margin: 0 auto 5rem; scroll-margin-top: 6rem; }
.mag-article + .mag-article { border-top: 1px solid rgba(23,20,15,.12); padding-top: 3rem; }
.mag-kicker { text-transform: uppercase; letter-spacing: .08em; font-weight: 800;
              font-size: .78rem; color: #E85C41; margin-bottom: .25rem; }
.mag-standfirst { font-size: 1.15rem; opacity: .85; margin: .4rem 0 .6rem; }
.mag-byline { font-size: .85rem; opacity: .65; margin: 0 0 1.5rem; }
.mag-cover { width: 100%; height: auto; border-radius: 18px; margin: 1.5rem 0; }
/* The site stylesheet zeroes paragraph margins and hides list markers, which
   suits its landing-page cards and is wrong for running prose. */
.mag-article p { margin: 0 0 1.1rem; line-height: 1.65; }
.mag-article h2 { margin: 2.5rem 0 .75rem; }
.mag-article h3 { margin: 2rem 0 .6rem; }
.mag-article ul { margin: 0 0 1.4rem 1.2rem; padding-left: .8rem; list-style: disc; }
.mag-article li { margin-bottom: .5rem; line-height: 1.6; list-style: disc; }
.mag-article blockquote { border-left: 4px solid #E85C41; margin: 1.8rem 0;
                          padding-left: 1.1rem; font-size: 1.15rem; font-weight: 600;
                          line-height: 1.5; }
/* The index page's masthead: a full-width band in the same yellow as the
   campaign home page's hero. --hero-bg rather than --yellow so that, like the
   hero, it turns deep amber for visitors who picked dark mode on the site. */
.mag-masthead { background: var(--hero-bg); padding: 3.5rem 24px 3rem; }
.mag-masthead-inner { max-width: 46rem; margin: 0 auto; }
.mag-masthead h1 { color: var(--ink); }
/* Coral on yellow is only ~2:1, so the kicker goes to ink on the band. */
.mag-masthead .mag-kicker { color: var(--ink); }
/* .65 opacity reads fine on cream but is 4.46:1 on yellow, just under AA. */
.mag-masthead .mag-byline { margin-bottom: 0; opacity: .8; }

.mag-empty { max-width: 46rem; margin: 0 auto; text-align: center; opacity: .75; }

/* Article pages: one article, so no inter-article rule, and a little more room. */
.mag-single .mag-article { margin-bottom: 3rem; }
.mag-single .mag-article + .mag-article { border-top: 0; padding-top: 0; }

/* The index lists every article in full, as it always has; this is the link
   through to the article's own page, which is what search engines index. */
.mag-permalink { font-size: .85rem; font-weight: 700; margin: 0 0 2rem; }
.mag-nav { text-align: center; margin-top: 3rem; }