/* Broadsheet newsprint crossed with a terminal: serif for the news, mono for the machine. */
  :root {
    --paper: #f3efe4;
    --ink: #1a1a17;
    --muted: #5e5a50;
    --rule: #1a1a17;
    --hair: #c9c2b0;
    --term: #1d6b3a;
    --warn: #a3401c;
    --box: #ebe5d5;
    --serif: "Source Serif 4", Georgia, serif;
    --display: "Playfair Display", Georgia, serif;
    --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --paper: #121311;
      --ink: #e8e4d6;
      --muted: #9a9585;
      --rule: #e8e4d6;
      --hair: #3a3a34;
      --term: #5fd38a;
      --warn: #f08a5d;
      --box: #1b1c19;
    }
  }
  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 17px/1.55 var(--serif);
  }
  a { color: inherit; }
  .page { max-width: 72rem; margin: 0 auto; padding: 0 16px 4rem; }

  /* Satire strip and terminal ticker */
  .satire {
    font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
    text-align: center; padding: 8px 16px; background: var(--ink); color: var(--paper);
  }
  .ticker {
    font: 12px/1.5 var(--mono); color: var(--term);
    border-bottom: 1px solid var(--hair); padding: 10px 0; overflow-wrap: anywhere;
  }
  .ticker .cursor { display: inline-block; width: .6em; background: var(--term); animation: blink 1.1s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .ticker .cursor { animation: none; } }

  /* Masthead */
  .mast { text-align: center; padding: 1.6rem 0 .8rem; border-bottom: 4px double var(--rule); }
  .mast h1 {
    margin: 0; font: 900 clamp(2.4rem, 8vw, 5.4rem)/1 var(--display); letter-spacing: -.01em;
    display: inline-flex; align-items: center; gap: .18em;
  }
  .mast h1 svg { width: .55em; height: .9em; flex: none; }
  .motto { margin: .5rem 0 0; font-style: italic; color: var(--muted); }
  .dateline {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px;
    font: 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em;
    border-bottom: 1px solid var(--rule); padding: 8px 0;
  }

  /* Layout */
  .grid { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 0 2.2rem; margin-top: 1.6rem; }
  @media (max-width: 860px) { .grid { grid-template-columns: minmax(0, 1fr); } }
  .stories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; align-content: start; }
  @media (max-width: 640px) { .stories { grid-template-columns: minmax(0, 1fr); } }

  article { padding: 0 0 1.4rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--hair); }
  article.lead { grid-column: 1 / -1; border-bottom: 2px solid var(--rule); }
  .kicker { font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--warn); margin: 0 0 .5rem; }
  article h2 { font: 700 1.45rem/1.15 var(--display); margin: 0 0 .45rem; text-wrap: balance; }
  article.lead h2 { font-size: clamp(1.9rem, 4.6vw, 3rem); }
  .dek { font-style: italic; color: var(--muted); margin: 0 0 .6rem; font-size: 1.02rem; }
  article.lead .dek { font-size: 1.2rem; }
  .byline { font: 11.5px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 .8rem; }
  article p { margin: 0 0 .8rem; }
  article.lead .body { columns: 2 18rem; column-gap: 2rem; column-rule: 1px solid var(--hair); }
  article.lead .body p:first-child::first-letter {
    float: left; font: 900 3.6rem/.8 var(--display); padding: .3rem .4rem 0 0;
  }
  blockquote { margin: .4rem 0 .9rem; padding-left: .8rem; border-left: 3px solid var(--term); font-style: italic; }
  .source { font: 12px/1.4 var(--mono); }
  .source a { color: var(--term); text-underline-offset: 3px; }

  .briefs h3, aside h3 {
    font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
    margin: 0 0 .8rem; padding-bottom: .5rem; border-bottom: 2px solid var(--rule);
  }
  .briefs { grid-column: 1 / -1; }
  .briefs ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 2rem; }
  @media (max-width: 640px) { .briefs ul { grid-template-columns: minmax(0, 1fr); } }
  .briefs li { font-size: .95rem; }
  .briefs b { font-family: var(--display); }

  /* Sidebar: the machine's own departments */
  aside > section { background: var(--box); border: 1px solid var(--hair); padding: 1rem; margin-bottom: 1.2rem; }
  .status { display: flex; align-items: center; gap: .6rem; font: 600 14px/1.3 var(--mono); }
  .dot { width: 14px; height: 14px; border-radius: 50%; background: #2fbf5f; box-shadow: 0 0 0 4px color-mix(in srgb, #2fbf5f 25%, transparent); flex: none; }
  .fine { font: 11px/1.45 var(--mono); color: var(--muted); margin: .6rem 0 0; }
  table { width: 100%; border-collapse: collapse; font: 13px/1.4 var(--mono); }
  td { padding: 4px 0; border-bottom: 1px dotted var(--hair); vertical-align: top; }
  td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 8px; }
  .up { color: var(--term); }
  .down { color: var(--warn); }
  .wx { font: 13px/1.5 var(--mono); margin: 0; }
  .wx dt { font-weight: 600; }
  .wx dd { margin: 0 0 .5rem; }
  .letter p { margin: 0 0 .6rem; font-size: .95rem; }
  .letter .sig { font-style: italic; text-align: right; }
  .letter .reply { border-top: 1px solid var(--hair); padding-top: .6rem; }
  .ads { display: grid; gap: .7rem; }
  .ad { font: 12.5px/1.45 var(--mono); border: 1px dashed var(--muted); padding: .6rem; }
  .ad b { display: block; letter-spacing: .08em; }

  footer { margin-top: 2rem; padding-top: 1rem; border-top: 4px double var(--rule); font: 12px/1.6 var(--mono); color: var(--muted); text-align: center; }
  footer p { margin: 0 0 .4rem; }

/* Links that are headlines: ink, not blue, underlined only on hover. */
article h2 a, .briefs b a, .more a, .archive a { text-decoration: none; }
article h2 a:hover, .briefs b a:hover, .more a:hover, .archive a:hover { text-decoration: underline; text-underline-offset: 4px; }
.mast a { text-decoration: none; }
.read { font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--term); text-underline-offset: 3px; }
.teaser { margin: 0 0 .8rem; }

/* Edition navigation under the dateline */
.nav { display: flex; flex-wrap: wrap; gap: 4px 18px; font: 12px/1.4 var(--mono); padding: 8px 0; border-bottom: 1px solid var(--hair); }
.nav a { color: var(--term); text-underline-offset: 3px; }
.nav .spacer { flex: 1; }

/* A single story, read on its own page */
.mast.small { padding: 1rem 0 .6rem; }
.mast.small h1 { font-size: clamp(1.8rem, 6vw, 3rem); }
.story { max-width: 42rem; margin: 2rem auto 0; }
.story article { border-bottom: 2px solid var(--rule); }
.story article h2 { font-size: clamp(1.9rem, 5vw, 2.8rem); }
.story .dek { font-size: 1.2rem; }
.story .body p:first-child::first-letter { float: left; font: 900 3.6rem/.8 var(--display); padding: .3rem .4rem 0 0; }
.label { display: inline-block; font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--warn); color: var(--warn); padding: 4px 6px; margin: 0 0 .9rem; }
.more h3, .archive h2 { font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .8rem; padding-bottom: .5rem; border-bottom: 2px solid var(--rule); }
.more ul, .archive ul { list-style: none; padding: 0; margin: 0 0 2rem; }
.more li, .archive li { padding: .55rem 0; border-bottom: 1px solid var(--hair); }
.more li b { font-family: var(--display); font-size: 1.1rem; }
.more .k, .archive .k { display: block; font: 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

/* Archive and About */
.archive, .about { max-width: 42rem; margin: 2rem auto 0; }
.archive li b { font-family: var(--display); font-size: 1.15rem; }
.about h2 { font: 700 2rem/1.15 var(--display); margin: 0 0 1rem; }
.about p { margin: 0 0 1rem; }
.about code { font: 14px var(--mono); }