/* Site 3 — "ink on paper"
   Reference lock: Monocle as the primary direction — pristine white stock,
   printer's black, a serif carrying headlines and article body, a compact
   grotesque for navigation and metadata, tight negative tracking on display
   sizes, 0px radius on controls, no shadows anywhere, and depth expressed by
   background shifts rather than elevation.
   Role rules kept from the source: Editorial Yellow is a call-to-action colour
   only — it never becomes a background band, a badge or a heading. Sky Blue
   belongs to topic labels only.
   Borrowed only from Public: hairline-separated feature rows.
   Rejected: rounded buttons, shadows, a third accent, sans-serif body copy.

   This is the densest of the three sites on purpose: it is the business title,
   and business readers scan a front page before they read. */

:root {
  --paper: #ffffff;
  --paper-tint: #f4f4f2;
  --black: #000000;
  --sterling: #5c5c5c;
  --zinc: #d9d9d9;
  --cloud: #e7e7e7;
  --yellow: #ffc500;   /* CTA only */
  --sky: #64d5ff;      /* topic labels only */

  --serif: Plantin, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Helvetica Neue", Helvetica, ui-sans-serif, -apple-system, Arial, sans-serif;

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 35rem;
  --wide: 81rem;    /* 1296px */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--black);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 48em) { body { font-size: 1.1875rem; line-height: 1.6; } }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: underline; text-underline-offset: .15em;
    text-decoration-thickness: from-font; text-decoration-color: var(--zinc); }
a:hover { text-decoration-color: var(--black); }
:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }

.skip { position: absolute; left: -9999px; background: var(--black); color: #fff; padding: .75rem 1rem; }
.skip:focus { left: 1rem; top: 1rem; z-index: 10; }

.shell { max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }

/* ---- Masthead: a newspaper nameplate ----------------------------------- */

.masthead { border-bottom: 2px solid var(--black); }
.masthead-inner { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
                  align-items: baseline; justify-content: space-between; padding-block: 1rem .75rem; }
.wordmark { font-family: var(--serif); font-weight: 700; font-size: clamp(1.4rem, 4vw, 2rem);
            letter-spacing: -0.035em; text-decoration: none; }
.nav { display: flex; flex-wrap: wrap; gap: 1.1rem; font-family: var(--sans);
       font-size: .8125rem; }
.nav a { text-decoration: none; color: var(--black); }
.nav a:hover { text-decoration: underline; text-underline-offset: .2em;
               text-decoration-thickness: 1px; }

/* ---- Home -------------------------------------------------------------- */

.intro { padding-block: clamp(2rem, 5vw, 3.25rem) 1.25rem; border-bottom: 1px solid var(--zinc); }
.intro-title { font-size: clamp(2rem, 5.4vw, 3.4rem); line-height: 1.06; font-weight: 700;
               letter-spacing: -0.035em; margin: 0 0 .7rem; max-width: 20ch; text-wrap: balance; }
.intro-dek { margin: 0; max-width: 52ch; font-family: var(--sans); font-size: .9375rem;
             line-height: 1.5; color: var(--sterling); }

.lead-story { padding-block: clamp(1.75rem, 4vw, 2.75rem);
              border-bottom: 1px solid var(--zinc); }
.lead-title { font-size: clamp(1.75rem, 4.4vw, 2.9rem); line-height: 1.08; font-weight: 700;
              letter-spacing: -0.03em; margin: .5rem 0 .5rem; max-width: 24ch; text-wrap: balance; }
.lead-title a { text-decoration: none; }
.lead-title a:hover { text-decoration: underline; text-underline-offset: .1em; }
.lead-dek { margin: 0 0 .6rem; max-width: 56ch; }

.kicker { font-family: var(--sans); font-size: .6875rem; letter-spacing: .1em;
          text-transform: uppercase; margin: 0; font-weight: 700; }
.kicker a { text-decoration: none; background: var(--sky); padding: .15rem .4rem; }
.meta { font-family: var(--sans); font-size: .75rem; color: var(--sterling); margin: 0; }
.section-label { font-family: var(--sans); font-size: .6875rem; letter-spacing: .12em;
                 text-transform: uppercase; font-weight: 700; margin: 0 0 1rem;
                 padding-bottom: .4rem; border-bottom: 2px solid var(--black); }
.stream, .topics { padding-block: clamp(2rem, 4vw, 3rem); }

.card-grid { display: grid; gap: 1.75rem; }
@media (min-width: 40em) { .card-grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 2rem; } }
@media (min-width: 62em) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
.card { padding-bottom: 1.5rem; border-bottom: 1px solid var(--zinc); }
.card-media { display: block; margin-bottom: .75rem; }
.card-media img { aspect-ratio: 3/2; object-fit: cover; }
.card-title { font-size: 1.25rem; line-height: 1.14; font-weight: 700;
              letter-spacing: -0.025em; margin: .4rem 0 .35rem; text-wrap: balance; }
.card-title a { text-decoration: none; }
.card-title a:hover { text-decoration: underline; text-underline-offset: .1em; }
.card-dek { margin: 0 0 .45rem; font-family: var(--sans); font-size: .8125rem;
            line-height: 1.5; color: var(--sterling); }

.more { margin-top: 1.75rem; font-family: var(--sans); font-size: .8125rem; }
.more a { display: inline-block; background: var(--yellow); color: var(--black);
          font-weight: 700; padding: .55rem .9rem; text-decoration: none; }
.more a:hover { text-decoration: underline; }

.topic-list { list-style: none; padding: 0; margin: 0; }
@media (min-width: 44em) { .topic-list { columns: 2; column-gap: 3rem; } }
.topic-list li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
                 padding: .5rem 0; border-bottom: 1px solid var(--zinc);
                 break-inside: avoid; font-family: var(--sans); font-size: .9375rem; }
.topic-list a { text-decoration: none; }
.count { font-size: .75rem; color: var(--sterling); font-variant-numeric: tabular-nums; }

/* ---- Article ----------------------------------------------------------- */

.post { max-width: var(--measure); margin-inline: auto;
        padding-inline: var(--gutter); padding-block: clamp(1.75rem, 4vw, 2.75rem) 0; }
.is-post main { padding-bottom: clamp(2.5rem, 6vw, 4rem); }

.crumbs { font-family: var(--sans); font-size: .6875rem; letter-spacing: .1em;
          text-transform: uppercase; color: var(--sterling); margin-bottom: 1.5rem; }
.crumbs a { text-decoration: none; }

.post-head h1 { font-size: clamp(2rem, 5.4vw, 3.1rem); line-height: 1.06; font-weight: 700;
                letter-spacing: -0.035em; margin: 0 0 .65rem; text-wrap: balance; }
.dek { font-family: var(--sans); font-size: .9375rem; line-height: 1.55;
       color: var(--sterling); margin: 0 0 1.1rem; text-wrap: pretty; }
.byline { font-family: var(--sans); font-size: .75rem; color: var(--sterling); margin: 0;
          padding-bottom: 1rem; border-bottom: 2px solid var(--black); }
.byline .author { color: var(--black); font-weight: 700; }
.sep { margin-inline: .35rem; }

.lede { margin: 1.75rem 0 2rem; }
.lede img { aspect-ratio: 3/2; object-fit: cover; }
figcaption, .credit { font-family: var(--sans); font-size: .75rem; color: var(--sterling);
                      margin-top: .45rem; line-height: 1.45; }

.toc { background: var(--paper-tint); padding: 1rem 1.15rem; margin-bottom: 2.25rem; }
.toc-label { font-family: var(--sans); font-size: .6875rem; letter-spacing: .12em;
             text-transform: uppercase; font-weight: 700; margin: 0 0 .5rem; }
.toc ol { margin: 0; padding-left: 1.1rem; font-family: var(--sans); font-size: .875rem; }
.toc li { margin-bottom: .3rem; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

.prose p { margin: 0 0 1.25em; text-wrap: pretty; }
.prose h2 { font-size: clamp(1.35rem, 2.8vw, 1.65rem); line-height: 1.15; font-weight: 700;
            letter-spacing: -0.025em; margin: 2.3em 0 .6em; text-wrap: balance; }
.prose h3 { font-family: var(--sans); font-size: .9375em; font-weight: 700;
            letter-spacing: .04em; text-transform: uppercase; margin: 1.9em 0 .5em; }
.prose ul, .prose ol { margin: 0 0 1.25em; padding-left: 1.25em; }
.prose li { margin-bottom: .4em; }
.prose strong { font-weight: 700; }

.prose blockquote { margin: 1.9em 0; padding: 1rem 0; border-block: 1px solid var(--zinc);
                    font-size: 1.2em; line-height: 1.3; letter-spacing: -0.02em; font-weight: 700; }
.prose blockquote p:last-child { margin-bottom: 0; }

.prose hr { border: 0; border-top: 1px solid var(--zinc); margin: 2.4em 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 2em 0;
               font-family: var(--sans); font-size: .8125rem; line-height: 1.4; }
.prose table :is(th, td) { text-align: left; padding: .6rem .7rem .6rem 0;
                           border-bottom: 1px solid var(--zinc); vertical-align: top; }
.prose th { font-weight: 700; border-bottom: 2px solid var(--black); }
.prose tbody tr:nth-child(even) { background: var(--paper-tint); }
.prose figure { margin: 2em 0; }
.prose code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .85em;
              background: var(--paper-tint); padding: .1em .35em; }
.prose pre { background: var(--paper-tint); padding: 1rem; overflow-x: auto;
             font-size: .8rem; line-height: 1.5; }
.prose pre code { background: none; padding: 0; }

.faq { max-width: var(--measure); margin: 2.5rem auto 0; padding-inline: var(--gutter); }
.faq h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.025em; margin: 0 0 .8rem;
          padding-bottom: .4rem; border-bottom: 2px solid var(--black); }
.faq dt { font-weight: 700; margin-top: 1.1rem; }
.faq dd { margin: .3rem 0 0; font-family: var(--sans); font-size: .9375rem; color: var(--sterling); }

.post-foot { margin-top: 2.25rem; padding-top: 1rem; border-top: 1px solid var(--zinc); }
.author-note, .disclosure-note { font-family: var(--sans); font-size: .8125rem;
                                 color: var(--sterling); line-height: 1.5; margin: 0 0 .45rem; }

.related { max-width: var(--wide); margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
           padding-inline: var(--gutter); border-top: 2px solid var(--black); padding-top: 1.5rem; }
.related h2 { font-family: var(--sans); font-size: .6875rem; letter-spacing: .12em;
              text-transform: uppercase; font-weight: 700; margin: 0 0 1.25rem; }

/* ---- Lists and footer -------------------------------------------------- */

.list-head { padding-block: clamp(2rem, 4vw, 3rem) 1.25rem; border-bottom: 2px solid var(--black);
             margin-bottom: 2rem; }
.list-head h1 { font-size: clamp(1.9rem, 4.6vw, 2.75rem); font-weight: 700;
                letter-spacing: -0.035em; margin: .25rem 0 .4rem; }
.year { margin-bottom: 2.25rem; }
.year-label { font-family: var(--sans); font-size: .6875rem; letter-spacing: .12em;
              text-transform: uppercase; font-weight: 700; margin: 0 0 .5rem;
              padding-bottom: .35rem; border-bottom: 2px solid var(--black); }
.index-list { list-style: none; margin: 0; padding: 0; }
.index-list li { display: flex; flex-wrap: wrap; gap: .2rem 1rem; justify-content: space-between;
                 align-items: baseline; padding: .55rem 0; border-bottom: 1px solid var(--zinc); }
.index-list a { text-decoration: none; }
.index-list time { font-family: var(--sans); font-size: .75rem; color: var(--sterling);
                   white-space: nowrap; font-variant-numeric: tabular-nums; }

.site-footer { margin-top: clamp(2.5rem, 6vw, 4rem); border-top: 2px solid var(--black);
               padding-block: 1.75rem 3rem; }
.footer-line { margin: 0 0 .6rem; font-weight: 700; letter-spacing: -0.02em; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 1.1rem; font-family: var(--sans);
              font-size: .8125rem; margin-bottom: .85rem; }
.footer-fine { font-family: var(--sans); font-size: .75rem; color: var(--sterling); margin: 0; }

/* ---- Topic cluster ------------------------------------------------------
   A cluster article points up to its pillar; the pillar lists the whole set.
   Both directions are load-bearing: the reader gets a way through the subject
   and the subject reads as one body of work rather than scattered posts. */

.series-up {
  font-family: var(--sans); font-size: .8125rem; color: var(--sterling);
  margin: 0 0 1.5rem; padding-bottom: .75rem; border-bottom: 1px solid var(--zinc);
}
.series {
  margin: 2.75rem 0 0; padding: 0 0 1.25rem; border-top: 2px solid var(--black);
  background: var(--paper-tint); padding-inline: 1.25rem; border-radius: 0;
}
.series h2 {
  font-family: var(--sans); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sterling); font-weight: 600; margin: 1.25rem 0 1rem;
}
.series-list { margin: 0; padding-left: 1.25rem; }
.series-list li { margin-bottom: .9rem; }
.series-list a { text-decoration: none; font-weight: 500; }
.series-list a:hover { text-decoration: underline; text-underline-offset: .16em; }
.series-dek {
  display: block; font-family: var(--sans); font-size: .8125rem; line-height: 1.5;
  color: var(--sterling); margin-top: .15rem;
}
.checked { font-family: var(--sans); font-size: .78rem; color: var(--sterling); margin: 0 0 .5rem; }