/* The Number. Shared styles for every page in this concept.
   Round 2. The cover is a strict template (see system.html). Tints come from the topic, never from the piece. */

:root {
  --ground: #0D0C0B;
  --ink: #FAF7F0;
  --text-body: rgba(250, 247, 240, 0.88);
  --text-mid: rgba(250, 247, 240, 0.74);
  --text-dim: rgba(250, 247, 240, 0.54);
  --rule: rgba(250, 247, 240, 0.22);
  --rule-soft: rgba(250, 247, 240, 0.11);
  --paper: #EDE6D6;
  --pad-side: clamp(20px, 4vw, 56px);
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --label: "Big Shoulders Text", "Arial Narrow", sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --text: "Newsreader", Georgia, serif;
  --hi: #FAF7F0;
  --lo: #0D0C0B;
}

/* ---------- topic tint pairs. Round 5: the Printed ink set, five colours, fixed (D-805).
   Eight topic labels fold into five colours. A cover takes its topic's pair.
   Money (#FF6A2B) is also the signature: Subscribe, the New tag, links and highlights. ---------- */
.t-money, .t-companies       { --hi: #FF6A2B; --lo: #210A00; }  /* Money */
.t-government, .t-history    { --hi: #E77FA0; --lo: #20010B; }  /* Institutions */
.t-tech, .t-work             { --hi: #D9B648; --lo: #201802; }  /* Ideas */
.t-health                    { --hi: #5FB6CF; --lo: #04181E; }  /* Health */
.t-sport                     { --hi: #8DBF5A; --lo: #111C05; }  /* Sport */

* { box-sizing: border-box; }
html { font-size: 106%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; }
p, li, blockquote, figcaption { text-wrap: pretty; }
ul, ol { list-style: none; margin: 0; padding: 0; }

.rail { padding-left: var(--pad-side); padding-right: var(--pad-side); max-width: 1680px; margin-left: auto; margin-right: auto; }

/* ---------- labels: the one sans in the system, always uppercase and tracked ---------- */
.lbl, .kick, .tag, .dept-head h2, .dept-head a, .dept-head .aside {
  font-family: var(--label); font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em;
}

/* ---------- top strip and masthead ---------- */
.strip {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-top: 14px; padding-bottom: 12px;
  font-family: var(--label); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-mid);
  border-bottom: 1px solid var(--rule);
}
.strip nav { display: flex; gap: clamp(12px, 2vw, 28px); align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.strip nav a:hover, .strip nav a[aria-current] { color: var(--ink); }
.btn { background: var(--ink); color: var(--ground) !important; padding: 7px 12px 6px; border-radius: 2px; }

.masthead { padding-top: clamp(14px, 2vw, 28px); padding-bottom: clamp(16px, 2vw, 28px); text-align: center; container-type: inline-size; }
/* Black Elephant. The wordmark is sized to the rail, not the viewport: 16.3cqi sets the two words
   edge to edge inside the page rail at every width (measured: the set line is 6.09 times its font size). */
.mast {
  font-family: var(--serif); font-weight: 900; font-variation-settings: "opsz" 144;
  font-size: 12.4vw; font-size: 16.3cqi; line-height: 0.86; letter-spacing: -0.035em; white-space: nowrap;
  margin-left: -0.02em;
}
/* the byline under the masthead. The gap clears the descender of the p in Elephant at every size */
.mast-by {
  margin-top: calc(4.4cqi + 6px);
  font-family: var(--label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em;
  font-size: clamp(0.8rem, 1.25cqi, 1.15rem); line-height: 1; color: var(--text-mid);
}
.mast-by + .thesis { margin-top: clamp(14px, 1.8cqi, 26px); }
.thesis {
  margin-top: clamp(12px, 1.4vw, 20px);
  font-family: var(--serif); font-weight: 500; font-variation-settings: "opsz" 24;
  font-size: clamp(1.02rem, 1.7vw, 1.45rem); color: var(--text-mid);
}
.thesis a:hover { color: var(--ink); }

/* the issue line under the masthead: the issue's numbers in a row, each in its topic tint */
.issue-line {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 28px;
  padding-top: 12px; padding-bottom: 12px;
  border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink);
}
.issue-line .lbl { font-size: 0.86rem; color: var(--ink); white-space: nowrap; }
.issue-nums { display: flex; flex-wrap: wrap; gap: 4px clamp(14px, 2.2vw, 34px); align-items: baseline; }
.issue-nums a {
  font-family: var(--display); font-weight: 800; font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1;
  color: var(--hi); letter-spacing: 0.005em; font-variant-numeric: lining-nums;
}
.issue-nums a small { font-size: 0.6em; margin-left: 2px; text-transform: uppercase; }
.issue-nums a:hover { color: var(--ink); }

/* ---------- department heads (Monocle) ---------- */
.dept-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  border-top: 3px solid currentColor; padding-top: 10px; margin-bottom: clamp(18px, 2vw, 28px);
}
.dept-head h2 { font-size: clamp(1rem, 1.3vw, 1.2rem); }
.dept-head a, .dept-head .aside { font-weight: 700; letter-spacing: 0.08em; font-size: 0.82rem; color: var(--text-mid); }
.dept-head a::after { content: " \2192"; }
.dept-head a:hover { color: var(--ink); }

.sect { padding-top: clamp(40px, 5vw, 72px); }
.kick { font-size: 0.85rem; letter-spacing: 0.1em; color: var(--hi); }

/* =====================================================================
   THE COVER. One template, documented in system.html.
   Frame 4:5. Module m = 1/16 of the width (6.25cqi). Margin = 1m.
   Zone A, rows 1 to 6: kicker chip, then the title (max three lines).
   Zone C, rows 13 to 19: the number line, fitted to the inner width (14m),
   standing on the bottom margin. Everything between is picture.
   ===================================================================== */
.cover {
  --m: 6.25cqi;
  position: relative; display: block; overflow: hidden; isolation: isolate;
  aspect-ratio: 4 / 5; container-type: inline-size;
  background: var(--lo); color: var(--ink); border-radius: 2px;
}
/* picture layer. Photograph or document: grey file, multiplied over the highlight, lightened with the shadow */
.duo { position: absolute; inset: 0; background: var(--hi); z-index: 0; overflow: hidden; }
.duo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.18) brightness(1.06);
  mix-blend-mode: multiply;
}
.duo::after { content: ""; position: absolute; inset: 0; background: var(--lo); mix-blend-mode: lighten; pointer-events: none; }
/* document mode: the page is paper, so pull the paper down to the shadow tone a touch more */
.duo.doc img { filter: grayscale(1) contrast(1.5) brightness(0.98); }
/* shade: top 42% and bottom 50% in the cover's own shadow colour, so type always reads */
.cover::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--lo) 0%, color-mix(in srgb, var(--lo) 55%, transparent) 22%, transparent 42%),
    linear-gradient(to top, var(--lo) 0%, color-mix(in srgb, var(--lo) 70%, transparent) 24%, transparent 50%);
}
.cv-top, .cv-bot { position: absolute; left: 0; right: 0; z-index: 2; padding: var(--m); }
.cv-top { top: 0; }
.cv-bot { bottom: 0; display: flex; align-items: flex-end; gap: 0 calc(var(--n, 30cqi) * 0.07); white-space: nowrap; }
.cv-k {
  display: inline-block; margin-bottom: calc(var(--m) * 0.5);
  font-family: var(--label); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em;
  font-size: clamp(10px, 3.6cqi, 15px);
  background: var(--hi); color: var(--lo); padding: 0.32em 0.55em 0.25em; border-radius: 2px;
}
.cv-t {
  display: block; font-family: var(--serif); font-weight: 700; font-variation-settings: "opsz" 72;
  font-size: clamp(17px, 8.75cqi, 60px); line-height: 1.02; letter-spacing: -0.012em;
  text-wrap: balance; max-width: 92%;
}
.cv-num {
  font-family: var(--display); font-weight: 900; line-height: 0.78; letter-spacing: -0.01em;
  font-size: var(--n, var(--fs, 30cqi));
  font-variant-numeric: lining-nums;
  color: var(--ink);
  margin-bottom: -0.035em;
}
.cv-unit {
  font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em;
  font-size: calc(var(--n, 30cqi) * 0.3); line-height: 0.9; color: var(--hi); padding-bottom: 0.08em;
}
a.cover:hover .duo img { filter: grayscale(1) contrast(1.3) brightness(1.12); }

/* figure mode: the number drawn as itself, from the essay's own data. Built by number.js from data-split */
.units { position: absolute; inset: 0; z-index: 0; display: grid; grid-auto-flow: column; gap: 0.7cqi; padding: 0.7cqi; background: var(--lo); }
.units i { display: block; background: var(--hi); border-radius: 1px; }
.units i.u1 { background: color-mix(in srgb, var(--hi) 64%, var(--lo)); }
.units i.u2 { background: color-mix(in srgb, var(--hi) 38%, var(--lo)); }
.units i.u3 { background: color-mix(in srgb, var(--hi) 22%, var(--lo)); }
.units i.rest { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hi) 30%, transparent); }

/* type-only mode: no picture. The highlight colour is the field */
.cover.type { background: var(--hi); color: var(--lo); }
.cover.type::after { display: none; }
.cover.type .cv-k { background: var(--lo); color: var(--hi); }
.cover.type .cv-num { color: var(--lo); }
.cover.type .cv-unit { color: var(--lo); opacity: 0.7; }

/* text that sits under a cover */
.cap {
  font-family: var(--label); font-weight: 700; font-size: 0.98rem; line-height: 1.3; letter-spacing: 0.01em;
  color: var(--hi);
}
.belief {
  font-family: var(--serif); font-weight: 700; font-variation-settings: "opsz" 48;
  font-size: clamp(1.35rem, 1.9vw, 1.75rem); line-height: 1.1; letter-spacing: -0.01em;
  margin-top: 8px;
}
.belief a:hover { color: var(--hi); }
.dek { margin-top: 8px; font-size: 1.04rem; line-height: 1.45; color: var(--text-mid); }
.st-text { padding-top: 14px; }
.st-text .dek { margin-top: 6px; }

/* ---------- lead ---------- */
.lead { padding-top: clamp(28px, 3vw, 44px); display: grid; gap: clamp(24px, 3vw, 48px); }
.lead .cv-t { display: none; }
.lead-title {
  font-family: var(--serif); font-weight: 900; font-variation-settings: "opsz" 144;
  font-size: clamp(2.8rem, 6.4vw, 6.4rem); line-height: 0.92; letter-spacing: -0.03em; margin-top: 12px;
}
.lead-title a:hover { color: var(--hi); }
.lead-dek { margin-top: 18px; font-family: var(--serif); font-weight: 500; font-variation-settings: "opsz" 24; font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.3; color: var(--text-mid); }
.lead-num { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rule); font-family: var(--label); font-weight: 700; font-size: 1.05rem; color: var(--text-mid); }
.lead-num span { font-family: var(--display); font-weight: 900; font-size: 1.6em; color: var(--hi); margin-right: 6px; }
.lead-open { margin-top: 16px; font-size: 1.12rem; line-height: 1.55; color: var(--text-mid); max-width: 36em; font-variant-numeric: oldstyle-nums; }
.read {
  display: inline-block; margin-top: 22px;
  font-family: var(--label); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.9rem;
  border-bottom: 3px solid var(--hi); padding-bottom: 3px;
}
.read::after { content: " \2192"; }
@media (min-width: 960px) {
  .lead { grid-template-columns: 7fr 5fr; align-items: end; }
}
@media (min-width: 700px) and (max-width: 959.98px) {
  .lead { grid-template-columns: 1fr 1fr; align-items: end; }
  .lead-title { font-size: clamp(2.6rem, 6vw, 3.4rem); }
}

/* ---------- issue contents: the contents page of a magazine, keyed by number instead of page ---------- */
.contents { display: grid; gap: 0 clamp(32px, 4vw, 64px); }
.contents li { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: 0 20px; align-items: baseline; padding: 14px 0 18px; border-top: 1px solid var(--rule); }
.contents .c-num { font-family: var(--display); font-weight: 900; font-size: clamp(2.3rem, 3.4vw, 3rem); line-height: 0.82; color: var(--hi); font-variant-numeric: lining-nums; white-space: nowrap; }
.contents .c-num small { font-size: 0.42em; font-weight: 800; text-transform: uppercase; margin-left: 4px; }
.contents h3 { font-family: var(--serif); font-weight: 700; font-variation-settings: "opsz" 48; font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.1; letter-spacing: -0.01em; }
.contents h3 a:hover { color: var(--hi); }
.contents p { margin-top: 6px; font-size: 1rem; line-height: 1.42; color: var(--text-mid); }
.contents .c-meta { margin-top: 8px; font-family: var(--label); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hi); }
.contents .c-meta span + span::before { content: "  /  "; color: var(--text-dim); white-space: pre; }
@media (min-width: 960px) { .contents { grid-template-columns: 1fr 1fr; } }
@media (max-width: 559.98px) { .contents li { grid-template-columns: 1fr; } .contents .c-num { margin-bottom: 8px; } }

/* ---------- grids ---------- */
.grid { display: grid; gap: clamp(28px, 3vw, 44px) clamp(20px, 2vw, 32px); }
@media (min-width: 960px) {
  .g3 { grid-template-columns: repeat(3, 1fr); }
  .g5 { grid-template-columns: repeat(5, 1fr); }
  .g5 .belief { font-size: 1.15rem; }
  .g5 .cap { font-size: 0.9rem; }
  .g5 .dek { display: none; }
  .g5 .cv-t { font-size: clamp(15px, 10cqi, 30px); }
}
/* below 960, every story becomes a row: cover left, words right */
@media (max-width: 959.98px) {
  .story { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 24px; align-items: end; }
  .story .cap { font-size: 1.2rem; line-height: 1.25; }
  .story .dek { font-size: 1.08rem; margin-top: 10px; }
  .story .st-text { padding-top: 2px; }
  .grid { gap: 30px; }
}
@media (max-width: 560px) { .story { grid-template-columns: 1fr; } }

/* ---------- series bands (Pirate Wires). Inside a band, the cover takes the band colour ---------- */
.band { background: var(--band); color: #0D0C0B; margin-top: clamp(48px, 6vw, 88px); padding: clamp(28px, 3vw, 44px) 0 clamp(36px, 4vw, 60px); }
.band + .band { margin-top: 0; }
.band .dept-head a { color: rgba(13, 12, 11, 0.8); }
.band .story { --hi: var(--band-lo); }
.band .cover { --hi: var(--band); --lo: var(--band-lo); outline: 2px solid #0D0C0B; outline-offset: -2px; }
.band .cover .cv-k { background: var(--band); color: #0D0C0B; }
.band .cap { color: #0D0C0B; }
.band .belief a:hover { color: #0D0C0B; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.band .dek { color: rgba(13, 12, 11, 0.78); }
.band-grid { display: grid; gap: 28px; }
.band-blurb { font-family: var(--serif); font-weight: 600; font-variation-settings: "opsz" 36; font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.2; margin-bottom: 18px; }
.band-list ul, .tdept ul { display: grid; gap: 0 32px; }
.band-list li, .tdept li { border-top: 1px solid rgba(13, 12, 11, 0.3); padding: 14px 0 16px; }
.band-list h4, .tdept h4 { font-family: var(--serif); font-weight: 700; font-variation-settings: "opsz" 36; font-size: 1.3rem; line-height: 1.15; }
.band-list h4 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.band-list p, .tdept p:not(.band-blurb) { margin-top: 6px; font-size: 1rem; line-height: 1.45; color: rgba(13, 12, 11, 0.78); }
.band-list .b-num, .tdept .b-num { font-family: var(--display); font-weight: 900; font-size: 1.9rem; line-height: 0.9; display: block; margin-bottom: 6px; }
.band-list .b-num small, .tdept .b-num small { font-size: 0.5em; text-transform: uppercase; margin-left: 3px; }
@media (min-width: 960px) {
  .band-grid { grid-template-columns: 4fr 8fr; gap: clamp(32px, 4vw, 64px); }
  .band-list ul { grid-template-columns: 1fr 1fr; }
  .band .story { display: block; }
}

/* Round 3. The rest of the series as small covers (Pirate Wires). Same template as the big cover,
   no kicker chip (the band already names the series). The dek sits under the cover, or beside it in pairs. */
.band + .band { margin-top: clamp(28px, 4vw, 56px); }
.band-side .band-blurb { margin-bottom: clamp(16px, 2vw, 24px); }
.minis { display: grid; gap: 26px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mini .dek { margin-top: 10px; font-size: 0.96rem; line-height: 1.42; }
.minis .cv-top { padding-bottom: 0; }
@media (min-width: 560px) and (max-width: 959.98px) {
  .band-side { padding-top: 8px; border-top: 1px solid rgba(13, 12, 11, 0.3); }
  .minis { gap: 24px 24px; }
  .mini { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: end; }
  .mini .dek { margin-top: 0; font-size: 1rem; }
}
@media (min-width: 960px) {
  .minis { gap: 28px clamp(16px, 1.6vw, 24px); }
  .minis.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .minis.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* two left in the series: stack them, cover beside a larger dek, so the column matches the big cover's height */
  .minis.n2 { grid-template-columns: 1fr; gap: 28px; }
  .minis.n2 .mini { display: grid; grid-template-columns: clamp(180px, 16vw, 230px) minmax(0, 32em); gap: clamp(20px, 2vw, 32px); align-items: end; }
  .minis.n2 .mini .dek { margin-top: 0; font-family: var(--serif); font-weight: 500; font-variation-settings: "opsz" 24; font-size: clamp(1.1rem, 1.3vw, 1.3rem); line-height: 1.32; padding-bottom: 4px; }
}

/* typographic departments (no covers) */
.tdepts { display: grid; gap: 40px; }
.tdept li { border-top-color: var(--rule); }
.tdept p:not(.band-blurb) { color: var(--text-mid) !important; }
.tdept .b-num { color: var(--hi); }
.tdept h4 a:hover { color: var(--hi); }
@media (min-width: 960px) { .tdepts { grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 64px); } }

/* ---------- subscribe (the one form on any page) ---------- */
.subscribe { margin-top: clamp(56px, 7vw, 100px); padding: clamp(36px, 5vw, 72px) 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.sub-grid { display: grid; gap: 28px; align-items: end; }
.sub-title { font-family: var(--serif); font-weight: 900; font-variation-settings: "opsz" 144; font-size: clamp(2.2rem, 5vw, 4.6rem); line-height: 0.95; letter-spacing: -0.025em; margin-top: 10px; }
.sub-copy { margin-top: 14px; font-size: 1.12rem; color: var(--text-mid); }
.sub-form label { display: block; font-family: var(--label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.82rem; color: var(--text-mid); margin-bottom: 8px; }
.sub-row { display: flex; gap: 0; }
.sub-row input {
  flex: 1; min-width: 0; font: inherit; font-size: 1.05rem; padding: 14px 16px; color: var(--ink);
  background: transparent; border: 1px solid rgba(250, 247, 240, 0.5); border-right: 0; border-radius: 2px 0 0 2px; outline: none;
}
.sub-row input:focus { border-color: var(--ink); }
.sub-row button {
  font-family: var(--label); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.95rem;
  padding: 0 22px; border: 0; border-radius: 0 2px 2px 0; background: var(--hi); color: #0D0C0B; cursor: pointer;
}
@media (min-width: 960px) { .sub-grid { grid-template-columns: 7fr 5fr; gap: 64px; } }

/* ---------- A to Z index on the front page ---------- */
.index { columns: 1; column-gap: 40px; }
.index li { break-inside: avoid; border-top: 1px solid var(--rule); padding: 12px 0 14px; }
.index h4 { font-family: var(--serif); font-weight: 700; font-variation-settings: "opsz" 24; font-size: 1.12rem; line-height: 1.2; }
.index h4 a:hover { color: #FF6A2B; }
.index p { margin-top: 4px; font-size: 0.96rem; line-height: 1.42; color: var(--text-mid); }
.tags { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font-weight: 700; letter-spacing: 0.08em; font-size: 0.72rem; color: var(--text-dim); }
.tag + .tag::before { content: "/ "; }
.tag.new { color: #0D0C0B; background: #FF6A2B; padding: 1px 5px 0; border-radius: 2px; }
.tag.new + .tag::before { content: ""; }
@media (min-width: 700px) { .index { columns: 2; } }
@media (min-width: 1200px) { .index { columns: 3; } }

/* ---------- footer ---------- */
.foot { margin-top: clamp(56px, 7vw, 100px); padding-bottom: 28px; border-top: 1px solid var(--ink); text-align: center; container-type: inline-size; }
.mast-foot { padding-top: 18px; padding-bottom: 0.2em; color: var(--ink); } /* the bottom pad keeps the p of Elephant clear of the footer row */
.foot-row {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 18px;
  font-family: var(--label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem; color: var(--text-mid);
}
.foot-row nav { display: flex; gap: 20px; flex-wrap: wrap; }
.foot-row a:hover { color: var(--ink); }

/* =================== article page =================== */
.mini-mast { font-family: var(--serif); font-weight: 900; font-variation-settings: "opsz" 144; font-size: 1.25rem; letter-spacing: -0.02em; text-transform: none; color: var(--ink); }
.strip .strip-num { font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: 0.01em; color: var(--hi); margin-left: 14px; }

/* the cover, full width: same five fields as the card, title at the top, number at the bottom */
.hero { position: relative; overflow: hidden; isolation: isolate; background: var(--lo); container-type: inline-size; }
.hero .duo img { position: absolute; inset: 0; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--lo) 0%, color-mix(in srgb, var(--lo) 60%, transparent) 26%, transparent 46%),
    linear-gradient(to top, var(--lo) 0%, color-mix(in srgb, var(--lo) 75%, transparent) 22%, transparent 48%);
}
.hero .units { gap: 0.32cqi; padding: 0.32cqi; }
.hero-in { position: relative; z-index: 2; padding-top: clamp(32px, 5vw, 72px); padding-bottom: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; gap: clamp(120px, 22vw, 360px); }
.hero .cv-k { font-size: 0.85rem; margin-bottom: 18px; }
.hero-title {
  font-family: var(--serif); font-weight: 900; font-variation-settings: "opsz" 144;
  font-size: clamp(3.2rem, 9.4vw, 9.5rem); line-height: 0.88; letter-spacing: -0.035em; max-width: 11em;
}
.hero-dek { margin-top: 20px; max-width: 30em; font-family: var(--serif); font-weight: 500; font-variation-settings: "opsz" 30; font-size: clamp(1.25rem, 2.1vw, 1.8rem); line-height: 1.25; color: var(--ink); }
.byline { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; font-family: var(--label); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.9rem; color: var(--hi); }
.byline span { color: var(--text-mid); font-weight: 700; }
.hero .byline { color: var(--ink); }
.hero-bot { display: grid; gap: 14px; align-items: end; }
.hero-num {
  font-family: var(--display); font-weight: 900; line-height: 0.76; letter-spacing: -0.01em;
  font-size: clamp(9rem, 34vw, 34rem); color: var(--ink); margin-left: -0.04em;
  padding-bottom: 0.1em; white-space: nowrap; font-variant-numeric: lining-nums;
}
.hero-cap p:first-child { font-family: var(--label); font-weight: 700; font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.25; color: var(--hi); max-width: 22em; }
.credit { margin-top: 10px; font-size: 0.86rem; line-height: 1.45; color: var(--text-dim); max-width: 34em; }
.credit b, figcaption b { font-family: var(--label); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.92em; color: var(--ink); margin-right: 4px; }
.legend { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--label); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.04em; color: var(--text-mid); }
.legend i { display: inline-block; width: 0.8em; height: 0.8em; margin-right: 6px; vertical-align: -0.05em; background: var(--hi); border-radius: 1px; }
.legend i.u1 { background: color-mix(in srgb, var(--hi) 64%, var(--lo)); }
.legend i.u2 { background: color-mix(in srgb, var(--hi) 38%, var(--lo)); }
.legend i.rest { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hi) 50%, transparent); }
@media (min-width: 960px) {
  .hero-bot { grid-template-columns: auto minmax(0, 1fr); gap: 40px; }
  .hero-cap { padding-bottom: 1.4vw; }
}

/* the long-form body. Newsreader, oldstyle figures in running text so the display numbers stay loud */
.prose {
  --measure: 680px;
  position: relative;
  padding: clamp(48px, 6vw, 88px) var(--pad-side) 0;
  font-size: 1.24rem; line-height: 1.64; color: var(--text-body);
  font-variant-numeric: oldstyle-nums proportional-nums;
}
.prose > * { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.prose > p { margin-bottom: 1.1em; }
article.prose > p:first-child::first-letter {
  float: left; font-family: var(--serif); font-weight: 900; font-variation-settings: "opsz" 144; color: var(--hi);
  font-size: 4.7em; line-height: 0.8; margin: 0.07em 0.1em 0 -0.02em;
}
.prose h2 {
  font-family: var(--serif); font-weight: 900; font-variation-settings: "opsz" 96;
  font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1; letter-spacing: -0.02em; color: var(--ink);
  margin-top: clamp(56px, 6vw, 88px); margin-bottom: 0.6em;
}
.prose h2::before { content: ""; display: block; width: 48px; height: 6px; background: var(--hi); margin-bottom: 18px; }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hi); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose em { font-style: italic; }
/* footnote markers: tint, condensed, never underlined */
.prose sup { font-family: var(--label); font-weight: 800; font-size: 0.6em; line-height: 0; margin-left: 0; font-variant-numeric: lining-nums; }
.prose sup a { text-decoration: none; color: var(--hi); padding: 0 1px; }
.prose sup a:hover { color: var(--ink); }
/* pull quote with a hanging opening mark */
.prose blockquote {
  margin-top: 1.5em; margin-bottom: 1.5em; padding-left: 26px; border-left: 4px solid var(--hi);
  font-family: var(--serif); font-weight: 500; font-variation-settings: "opsz" 36; font-size: 1.3em; line-height: 1.38; color: var(--ink);
  text-indent: -0.42em;
}
.highlight { color: var(--ink); font-weight: 600; background-image: linear-gradient(to top, color-mix(in srgb, var(--hi) 42%, transparent) 0.32em, transparent 0.32em); }
/* the cover number, where it first appears in the text, with a margin note at wide sizes */
.cn { background: var(--hi); color: var(--lo); font-weight: 600; padding: 0 0.18em; border-radius: 2px; font-variant-numeric: lining-nums; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.has-cn { position: relative; }
.cn-note { display: none; }
@media (min-width: 1200px) {
  .cn-note {
    display: block; position: absolute; right: calc(100% + 36px); top: 0.25em; width: 190px; text-align: right;
    font-family: var(--label); font-weight: 700; font-size: 0.82rem; line-height: 1.3; letter-spacing: 0.04em; color: var(--hi);
  }
  .cn-note b { display: block; font-family: var(--display); font-weight: 900; font-size: 2.6rem; line-height: 0.9; color: var(--ink); letter-spacing: 0; margin-bottom: 4px; }
}
/* end mark */
.prose > p.end::after { content: ""; display: inline-block; width: 0.62em; height: 0.62em; background: var(--hi); margin-left: 0.35em; vertical-align: 0.02em; }

/* figures, data */
.prose > .wide { max-width: 1080px; }
.prose > .narrow-fig { max-width: 460px; }
.fig { margin-top: 2.2em; margin-bottom: 2.4em; }
.fig .duo { --hi-soft: color-mix(in srgb, var(--hi) 58%, #FAF7F0); background: var(--hi-soft); position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 2px; }
.fig .duo.tall { aspect-ratio: 3 / 4; }
.fig .duo.doc img { filter: grayscale(1) contrast(1.35) brightness(1.02); }
.fig figcaption { margin-top: 10px; font-size: 0.9rem; line-height: 1.45; color: var(--text-dim); max-width: 680px; font-variant-numeric: oldstyle-nums; }
.fig-pair { display: grid; gap: 24px; margin-top: 2.2em; margin-bottom: 2.4em; }
.fig-pair .fig { margin: 0; }
@media (min-width: 760px) { .fig-pair { grid-template-columns: 1fr 1fr; } }

/* Round 3. Embedded media. A tint label above, the platform's own embed, a caption in the figure style below.
   The video runs wider than the measure; the post sits at the platform's width on the measure. */
.embed { margin-top: 2.2em; margin-bottom: 2.4em; }
.prose > .embed-video { max-width: 880px; }
.embed-k {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  font-family: var(--label); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; line-height: 1; color: var(--hi);
}
.embed-k::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.embed-frame { position: relative; aspect-ratio: 16 / 9; background: var(--lo); border-radius: 2px; overflow: hidden; outline: 1px solid var(--rule); }
.embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed figcaption { margin-top: 10px; font-size: 0.9rem; line-height: 1.45; color: var(--text-dim); font-variant-numeric: oldstyle-nums; }
/* the post. Before (or without) X's script, the blockquote is styled as a quoted post with its author line */
.prose .embed-post blockquote.twitter-tweet {
  margin: 0; max-width: 550px; text-indent: 0; padding: 20px 22px 18px;
  border: 1px solid var(--rule); border-left: 4px solid var(--hi); border-radius: 2px;
  background: color-mix(in srgb, var(--hi) 7%, transparent);
  font-family: var(--text); font-weight: 400; font-size: 1.05em; line-height: 1.5; color: var(--ink);
}
.embed-post blockquote.twitter-tweet p { margin: 0; }
.embed-post blockquote.twitter-tweet a { text-decoration: none; color: var(--hi); }
.embed-post .post-by { margin-top: 14px !important; padding-top: 12px; border-top: 1px solid var(--rule-soft); font-family: var(--label); font-weight: 800; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.embed-post .post-by span { color: var(--text-mid); font-weight: 700; text-transform: none; letter-spacing: 0.02em; }
.embed-post .post-by a { margin-left: auto; color: var(--text-mid) !important; font-weight: 700; }
.embed-post .twitter-tweet-rendered { margin: 0 !important; }
.embed-post figcaption { max-width: 550px; }

.comparison { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 24px; margin-top: 1.6em; margin-bottom: 1.4em; padding: 26px 0 18px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.comparison-item { display: flex; flex-direction: column; gap: 10px; }
.comparison-number { font-family: var(--display); font-weight: 900; font-size: clamp(4.2rem, 10vw, 7.5rem); line-height: 0.8; color: var(--hi); font-variant-numeric: lining-nums; }
.comparison-item + .comparison-divider + .comparison-item .comparison-number { color: var(--ink); }
.comparison-number.dim { color: var(--text-dim) !important; }
.comparison-label { font-family: var(--label); font-weight: 700; font-size: 1rem; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-mid); }
.comparison-divider { width: 1px; align-self: stretch; background: var(--rule); }
.stat { display: block; margin-bottom: 1.8em; font-size: 0.86rem; line-height: 1.45; color: var(--text-dim); }

.math-block { margin-top: 1.6em; margin-bottom: 1.6em; padding: 20px 0; border-top: 3px solid var(--hi); border-bottom: 1px solid var(--rule); font-family: var(--label); font-weight: 600; font-size: 1.15rem; line-height: 1.7; color: var(--text-mid); font-variant-numeric: lining-nums tabular-nums; }
.math-block .label, .chart .label { font-family: var(--label); display: block; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.85rem; color: var(--ink); margin-bottom: 8px; }
.math-block .result { display: block; margin-top: 6px; font-family: var(--display); font-weight: 900; font-size: 2.6rem; line-height: 1; color: var(--hi); }

.prose table, .data-table { width: 100%; border-collapse: collapse; margin-top: 1.6em; margin-bottom: 0.5em; font-family: var(--label); font-variant-numeric: lining-nums tabular-nums; }
.prose th, .data-table th { text-align: left; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.8rem; color: var(--text-mid); padding: 0 8px 10px 0; border-bottom: 3px solid var(--hi); }
.prose td, .data-table td { font-weight: 700; font-size: 1.2rem; padding: 11px 8px 11px 0; border-bottom: 1px solid var(--rule); color: var(--ink); }
.prose td:first-child, .data-table td:first-child { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; }
.verdict-pass { color: var(--ink); }
.verdict-warn { color: rgba(250, 247, 240, 0.7); }
.verdict-fail { color: var(--hi) !important; }

.chart { margin-top: 1.6em; margin-bottom: 0.5em; padding-top: 16px; border-top: 3px solid var(--hi); }
.chart-row { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; gap: 12px; padding: 7px 0; font-family: var(--label); font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }
.chart-year { color: var(--text-mid); font-size: 0.95rem; }
.chart-bar-bg { height: 22px; background: rgba(250, 247, 240, 0.08); border-radius: 2px; overflow: hidden; }
.chart-bar { height: 100%; background: rgba(250, 247, 240, 0.72); }
.chart-bar.accent { background: var(--hi); }
.chart-val { text-align: right; font-size: 1.05rem; }
.chart-val.bright { color: var(--hi); }

/* sources */
.footnotes { margin-top: clamp(56px, 6vw, 88px); padding-top: 18px; border-top: 3px solid var(--ink); }
.prose > .footnotes { max-width: 1080px; }
.fn-head { font-family: var(--label) !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.09em; font-size: 1.05rem !important; margin: 0 0 18px !important; }
.fn-head::before { display: none !important; }
.footnotes ol { list-style: none; counter-reset: fn; padding: 0; }
.footnotes li {
  counter-increment: fn; position: relative; padding: 9px 0 10px 2.9em; break-inside: avoid;
  font-size: 0.95rem; line-height: 1.55; color: var(--text-mid); border-top: 1px solid var(--rule-soft); scroll-margin-top: 24px;
  font-variant-numeric: oldstyle-nums;
}
.footnotes li::before {
  content: counter(fn); position: absolute; left: 0; top: 7px; width: 1.6em; text-align: right;
  font-family: var(--display); font-weight: 900; font-size: 1.25rem; line-height: 1.1; color: var(--hi); font-variant-numeric: lining-nums;
}
.footnotes li:target { color: var(--ink); background: color-mix(in srgb, var(--hi) 14%, transparent); }
.footnotes .back { text-decoration: none; color: var(--hi); margin-left: 4px; }
.prose sup a:target { outline: 2px solid var(--hi); }
@media (min-width: 1100px) { .footnotes ol { columns: 2; column-gap: 48px; } }

.article .subscribe { margin-top: clamp(64px, 7vw, 100px); }

/* =================== archive page =================== */
.arch-head { padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(18px, 2vw, 28px); }
.arch-title { font-family: var(--serif); font-weight: 900; font-variation-settings: "opsz" 144; font-size: clamp(3.4rem, 10vw, 10rem); line-height: 0.86; letter-spacing: -0.035em; }
.arch-title span { font-family: var(--display); font-weight: 900; letter-spacing: 0; color: #FF6A2B; }
.arch-sub { margin-top: 18px; max-width: 40em; font-family: var(--serif); font-weight: 500; font-variation-settings: "opsz" 24; font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.3; color: var(--text-mid); }

.filters { display: grid; gap: 14px; padding-top: 16px; padding-bottom: 18px; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--rule); }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filter-row .lbl { font-size: 0.8rem; color: var(--text-dim); width: 5.2em; }
.chip {
  font-family: var(--label); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem;
  padding: 7px 10px 6px; border-radius: 2px; cursor: pointer;
  background: transparent; color: var(--ink); border: 1px solid rgba(250, 247, 240, 0.34);
}
.chip i { display: inline-block; width: 0.7em; height: 0.7em; background: var(--hi); margin-right: 6px; border-radius: 1px; vertical-align: 0; }
.chip b { font-weight: 700; color: var(--text-dim); margin-left: 5px; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--hi, var(--ink)); border-color: var(--hi, var(--ink)); color: #0D0C0B; }
.chip[aria-pressed="true"] b { color: rgba(13, 12, 11, 0.6); }
.chip[aria-pressed="true"] i { background: #0D0C0B; }
.chip.all { --hi: var(--ink); }

.shelf { display: grid; gap: 0; margin-top: clamp(28px, 3vw, 40px); }
.shelf a { display: block; padding: 18px 20px 20px; background: var(--band); color: #0D0C0B; }
.shelf .lbl { font-size: 0.78rem; opacity: 0.75; }
.shelf h3 { font-family: var(--serif); font-weight: 900; font-variation-settings: "opsz" 72; font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1; letter-spacing: -0.015em; margin-top: 6px; }
.shelf p { margin-top: 8px; font-size: 0.98rem; line-height: 1.4; color: rgba(13, 12, 11, 0.8); }
.shelf .s-nums { margin-top: 12px; font-family: var(--display); font-weight: 900; font-size: 1.5rem; line-height: 1; display: flex; flex-wrap: wrap; gap: 2px 14px; }
@media (min-width: 700px) { .shelf { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .shelf { grid-template-columns: repeat(3, 1fr); } }

.group { padding-top: clamp(40px, 5vw, 64px); }
.group-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; padding-top: 12px; border-top: 6px solid var(--hi); margin-bottom: 4px; }
.group-head h2 { font-family: var(--serif); font-weight: 900; font-variation-settings: "opsz" 144; font-size: clamp(2.2rem, 4.6vw, 4rem); line-height: 0.95; letter-spacing: -0.025em; }
.group-head .lbl { font-size: 0.86rem; color: var(--hi); }

.ledger li { display: grid; grid-template-columns: minmax(0, 30%) minmax(0, 1fr); gap: 4px 22px; padding: 16px 0 18px; border-bottom: 1px solid var(--rule-soft); }
.ledger li[hidden] { display: none; }
.l-num { text-align: right; padding-top: 2px; }
.l-num b { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 0.8; color: var(--hi); font-variant-numeric: lining-nums; white-space: nowrap; letter-spacing: -0.005em; }
.l-num span { display: block; margin-top: 6px; font-family: var(--label); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; color: var(--hi); }
.l-body h3 { font-family: var(--serif); font-weight: 700; font-variation-settings: "opsz" 48; font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.08; letter-spacing: -0.01em; }
.l-body h3 a:hover { color: var(--hi); }
.l-cap { margin-top: 6px; font-family: var(--label); font-weight: 700; font-size: 0.98rem; line-height: 1.3; color: var(--hi); }
.l-dek { margin-top: 6px; font-size: 1.02rem; line-height: 1.45; color: var(--text-mid); }
.l-meta { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 0; font-family: var(--label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.74rem; color: var(--text-dim); }
.l-meta span + span::before { content: "/"; margin: 0 7px; }
.l-meta .new { color: #0D0C0B; background: #FF6A2B; padding: 1px 5px 0; border-radius: 2px; }
.l-meta .new + span::before { content: ""; margin: 0 4px; }
#by-topic .l-meta .tp { display: none; }
#by-topic .l-meta .new + span::before, #by-topic .l-meta .tp + span::before { content: ""; margin: 0; }
#by-topic .l-meta .new + .tp + span::before { content: ""; margin: 0 4px; }
.shelf .s-nums small { font-size: 0.5em; text-transform: uppercase; margin-left: 2px; }
@media (max-width: 959.98px) { .l-meta { grid-column: 2; } }
@media (min-width: 960px) {
  .ledger li { grid-template-columns: minmax(0, 22%) minmax(0, 1fr) minmax(0, 24%); }
  .l-meta { grid-column: 3; margin-top: 4px; flex-direction: column; gap: 6px; }
  .l-meta span + span::before { content: none; }
}
.thesis-row { margin-top: clamp(28px, 3vw, 40px); padding: 22px 0 24px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); display: grid; gap: 8px 22px; }
.thesis-row h3 { font-family: var(--serif); font-weight: 900; font-variation-settings: "opsz" 96; font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.02; letter-spacing: -0.02em; }
.thesis-row h3 a:hover { color: #FF6A2B; }
@media (min-width: 960px) { .thesis-row { grid-template-columns: 22% 1fr; } .thesis-row .lbl { text-align: right; padding-top: 10px; } }
.empty { padding: 28px 0; color: var(--text-mid); }

/* =================== style sheet page =================== */
.sys-intro { max-width: 46em; font-size: 1.15rem; line-height: 1.55; color: var(--text-mid); margin-top: 16px; }
.sys-h { font-family: var(--serif); font-weight: 900; font-variation-settings: "opsz" 144; font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 0.95; letter-spacing: -0.025em; }
.sys-sub { font-family: var(--label); font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.95rem; margin: clamp(32px, 4vw, 48px) 0 14px; padding-top: 10px; border-top: 1px solid var(--rule); }
.sys-note { font-size: 1.02rem; line-height: 1.5; color: var(--text-mid); max-width: 42em; }
.sys-note + .sys-note { margin-top: 10px; }
.swatches { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.sw { border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; }
.sw-chip { height: 76px; }
.sw-pair { display: grid; grid-template-columns: 1fr 1fr; height: 92px; }
.sw-pair div { display: flex; align-items: flex-end; padding: 8px; font-family: var(--display); font-weight: 900; font-size: 2.2rem; line-height: 0.8; }
.sw p { padding: 9px 10px 11px; font-family: var(--label); font-weight: 700; font-size: 0.82rem; line-height: 1.35; letter-spacing: 0.04em; color: var(--text-mid); }
.sw p b { display: block; color: var(--ink); text-transform: uppercase; letter-spacing: 0.08em; }
.scale { display: grid; gap: 0; }
.scale > div { display: grid; grid-template-columns: 1fr; gap: 6px 24px; padding: 16px 0; border-top: 1px solid var(--rule-soft); align-items: baseline; }
.scale .spec { font-family: var(--label); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.05em; color: var(--text-dim); text-transform: uppercase; }
@media (min-width: 960px) { .scale > div { grid-template-columns: 240px 1fr; } }
.rules { counter-reset: r; display: grid; gap: 0; }
.rules li { counter-increment: r; display: grid; grid-template-columns: 2.4em 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule-soft); font-size: 1.04rem; line-height: 1.5; color: var(--text-body); }
.rules li::before { content: counter(r); font-family: var(--display); font-weight: 900; font-size: 1.6rem; line-height: 1; color: var(--hi); text-align: right; }
.rules li b { color: var(--ink); }
.tpl { display: grid; gap: clamp(24px, 3vw, 48px); align-items: start; }
@media (min-width: 960px) { .tpl { grid-template-columns: 5fr 7fr; } }
.tpl-frame { position: relative; max-width: 520px; }
.tpl-grid { position: absolute; inset: 0; z-index: 5; pointer-events: none; container-type: inline-size;
  background-image:
    linear-gradient(to right, rgba(250,247,240,0.28) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(250,247,240,0.28) 1px, transparent 1px);
  background-size: 6.25cqi 6.25cqi;
}
.tpl-zone { position: absolute; left: 6.25%; right: 6.25%; z-index: 6; border: 2px dashed #FAF7F0; border-radius: 0; pointer-events: none; }
.tpl-zone span { position: absolute; right: 6px; top: 4px; font-family: var(--label); font-weight: 800; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; background: #FAF7F0; color: #0D0C0B; padding: 1px 5px 0; }
.modes { display: grid; gap: 28px 20px; }
@media (min-width: 700px) { .modes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .modes { grid-template-columns: repeat(4, 1fr); } }
.mode h4 { font-family: var(--label); font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.95rem; margin-top: 14px; color: var(--hi); }
.mode p { margin-top: 6px; font-size: 0.98rem; line-height: 1.45; color: var(--text-mid); }
.spec-row { display: grid; gap: 28px; }
@media (min-width: 960px) { .spec-row { grid-template-columns: 1fr 1fr; gap: 48px; } }
.mini-prose { font-size: 1.16rem; line-height: 1.62; color: var(--text-body); font-variant-numeric: oldstyle-nums; }
.mini-prose p + p { margin-top: 0.9em; }
.mini-prose sup { font-family: var(--label); font-weight: 800; font-size: 0.6em; line-height: 0; color: var(--hi); font-variant-numeric: lining-nums; }
.code { font-family: ui-monospace, Menlo, monospace; font-size: 0.86rem; line-height: 1.55; color: var(--text-mid); background: rgba(250,247,240,0.05); border: 1px solid var(--rule-soft); border-radius: 2px; padding: 14px 16px; overflow-x: auto; white-space: pre; }
@media (max-width: 559.98px) {
  .comparison { grid-template-columns: 1fr; gap: 18px; }
  .comparison-divider { width: 100%; height: 1px; align-self: auto; }
}
.mini-mast { white-space: nowrap; }
@media (max-width: 559.98px) {
  .strip nav a:not(.btn):not([href="archive.html"]):not([href="about.html"]) { display: none; }
}
@media (max-width: 459.98px) {
  .strip { gap: 10px; }
  .mini-mast { font-size: 1.25rem; }
  .strip .strip-num { margin-left: 8px; font-size: 1rem; }
  .strip nav { gap: 10px; }
}

/* =====================================================================
   Round 4. The Dark / Paper switch, and the Paper ground.
   Black stays the default. Paper is warm stock (#F3EEE4), from the colour test's Paper treatment.
   The ground is set on <html data-ground> by a tiny script in <head>, before paint.
   On Paper: covers and the article hero keep their dark tint and light type; everything else turns to paper.
   Topic text is deepened toward black (--dk) until it reads at 4.5:1 or better on paper. Rules and bars keep the bright tint.
   ===================================================================== */

/* the switch: two words in the strip's label face, the current one in ink and underlined. No box, no pill */
.ground { display: inline-flex; align-items: baseline; gap: 6px; color: var(--text-dim); }
.ground i { font-style: normal; }
.ground button {
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--text-dim);
  background: none; border: 0; border-radius: 0; padding: 2px 0 1px; margin: 0; cursor: pointer;
}
.ground button:hover { color: var(--ink); }
.ground button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
html:not([data-ground="paper"]) .ground [data-ground="dark"],
html[data-ground="paper"] .ground [data-ground="paper"] { color: var(--ink); box-shadow: inset 0 -2px 0 currentColor; }

html[data-ground="paper"] {
  --ground: #F3EEE4;
  --ink: #151311;
  --text-body: rgba(21, 19, 17, 0.86);
  --text-mid: rgba(21, 19, 17, 0.72);
  --text-dim: rgba(21, 19, 17, 0.62);
  --rule: rgba(21, 19, 17, 0.22);
  --rule-soft: rgba(21, 19, 17, 0.11);
}
/* --dk is the topic tint pushed toward black. Declared on every element so it follows that element's own --hi.
   --dp is how much tint survives: 70% as in the colour test, less for the light tints so text clears 4.5:1 */
html[data-ground="paper"], html[data-ground="paper"] * { --dk: color-mix(in srgb, var(--hi) var(--dp, 70%), #000); }
/* Round 5, Printed ink: the most tint each colour keeps while its text clears 4.5:1 on #F3EEE4 (measured in NOTES.md) */
html[data-ground="paper"] :is(.t-money, .t-companies, [style*="--hi:#FF6A2B" i]) { --dp: 70%; }
html[data-ground="paper"] :is(.t-government, .t-history, [style*="--hi:#E77FA0" i]) { --dp: 67%; }
html[data-ground="paper"] :is(.t-tech, .t-work, [style*="--hi:#D9B648" i]) { --dp: 57%; }
html[data-ground="paper"] :is(.t-health, [style*="--hi:#5FB6CF" i]) { --dp: 62%; }
html[data-ground="paper"] :is(.t-sport, [style*="--hi:#8DBF5A" i]) { --dp: 60%; }
html[data-ground="paper"] .group[style*="--hi:#FAF7F0"] { --hi: #151311 !important; }

/* dark surfaces stay dark: covers, the article hero */
html[data-ground="paper"] .cover,
html[data-ground="paper"] .hero {
  --ink: #FAF7F0;
  --text-body: rgba(250, 247, 240, 0.88);
  --text-mid: rgba(250, 247, 240, 0.74);
  --text-dim: rgba(250, 247, 240, 0.54);
  --rule: rgba(250, 247, 240, 0.22);
  --rule-soft: rgba(250, 247, 240, 0.11);
  color: #FAF7F0;
}
html[data-ground="paper"] .cover *, html[data-ground="paper"] .hero * { --dk: var(--hi); }

/* topic-coloured text, deepened */
html[data-ground="paper"] :is(.kick, .cap, .issue-nums a, .lead-num span, .contents .c-num, .contents .c-meta,
  .tdept .b-num, .strip .strip-num, .cn-note, .embed-k, .comparison-number, .math-block .result,
  .chart-val.bright, .footnotes .back, .prose sup a, .embed-post blockquote.twitter-tweet a,
  .l-num b, .l-num span, .l-cap, .group-head .lbl) { color: var(--dk); }
html[data-ground="paper"] .footnotes li::before { color: var(--dk); }
html[data-ground="paper"] article.prose > p:first-child::first-letter { color: var(--dk); }
html[data-ground="paper"] .comparison-item + .comparison-divider + .comparison-item .comparison-number { color: var(--ink); }
html[data-ground="paper"] :is(.lead-title a, .contents h3 a, .belief a, .tdept h4 a, .l-body h3 a):hover { color: var(--dk); }
html[data-ground="paper"] :is(.index h4 a, .thesis-row h3 a):hover { color: #B24A1E; }
html[data-ground="paper"] .arch-title span, html[data-ground="paper"] .thesis-row .lbl[style*="#FF6A2B" i] { color: #B24A1E !important; }
html[data-ground="paper"] .prose a { text-decoration-color: var(--dk); }
html[data-ground="paper"] .prose sup a:hover { color: var(--ink); }

/* the essay's data on paper */
html[data-ground="paper"] .verdict-pass { color: var(--ink); }
html[data-ground="paper"] .verdict-warn { color: var(--text-mid); }
html[data-ground="paper"] .verdict-fail { color: var(--dk) !important; }
html[data-ground="paper"] .chart-bar-bg { background: rgba(21, 19, 17, 0.07); }
html[data-ground="paper"] .chart-bar { background: rgba(21, 19, 17, 0.58); }
html[data-ground="paper"] .chart-bar.accent { background: var(--hi); }
html[data-ground="paper"] .highlight { background-image: linear-gradient(to top, color-mix(in srgb, var(--hi) var(--hl, 34%), transparent) 0.32em, transparent 0.32em); }
/* Round 5. The pale inks need more of the tint for a highlight to show on paper */
html[data-ground="paper"] :is(.t-tech, .t-work) { --hl: 56%; }
html[data-ground="paper"] .t-sport { --hl: 46%; }
html[data-ground="paper"] .t-health { --hl: 44%; }
html[data-ground="paper"] .footnotes li:target { background: color-mix(in srgb, var(--hi) 12%, transparent); }
html[data-ground="paper"] .prose .embed-post blockquote.twitter-tweet { background: color-mix(in srgb, var(--hi) 6%, #FFFDF8); }
html[data-ground="paper"] .embed-frame { outline-color: rgba(21, 19, 17, 0.16); }

/* front page: the solid series bands become paper sections with a thick colour rule on top (the colour test's treatment) */
html[data-ground="paper"] .band { background: transparent; border-top: 8px solid var(--band); color: var(--ink); }
html[data-ground="paper"] .band[style*="--band:#EDE6D6"] { border-top-color: #151311; }
html[data-ground="paper"] .band .cap { color: var(--ink); }
html[data-ground="paper"] .band .dek, html[data-ground="paper"] .band-list p { color: var(--text-mid); }
html[data-ground="paper"] .band .dept-head a { color: var(--text-mid); }
html[data-ground="paper"] .band .cover .cv-k { color: #0D0C0B; }
html[data-ground="paper"] .band-side { border-top-color: var(--rule); }

/* archive: filters, chips, series shelf */
html[data-ground="paper"] .chip { border-color: rgba(21, 19, 17, 0.36); }
html[data-ground="paper"] .chip:hover { border-color: var(--ink); }
html[data-ground="paper"] .chip i { box-shadow: inset 0 0 0 1px rgba(21, 19, 17, 0.28); }
html[data-ground="paper"] .chip.all[aria-pressed="true"] { color: var(--ground); }
html[data-ground="paper"] .chip.all[aria-pressed="true"] b { color: rgba(243, 238, 228, 0.72); }
html[data-ground="paper"] .chip[style*="#EDE6D6"][aria-pressed="true"] { border-color: var(--ink); }
html[data-ground="paper"] .shelf { gap: 28px clamp(20px, 2vw, 32px); }
html[data-ground="paper"] .shelf a { background: transparent; color: var(--ink); border-top: 8px solid var(--band); padding: 14px 0 6px; }
html[data-ground="paper"] .shelf a[style*="#EDE6D6"] { border-top-color: #151311; }
html[data-ground="paper"] .shelf p { color: var(--text-mid); }
html[data-ground="paper"] .shelf .lbl { opacity: 1; color: var(--text-mid); }

/* the one form */
html[data-ground="paper"] .sub-row input { border-color: rgba(21, 19, 17, 0.45); }
html[data-ground="paper"] .sub-row input::placeholder { color: rgba(21, 19, 17, 0.58); }
@media (min-width: 960px) { .l-meta { align-items: flex-start; } }
.comparison { container-type: inline-size; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .comparison-number { font-size: clamp(3.2rem, 15cqi, 7.5rem); }

/* ---------- Big numbers on Paper (D-809, Oct 26 2026). ----------
   Giant numbers only need 3:1, so on Paper they use a vivid display shade instead of the
   darker 4.5:1 text shade, which read as brown. Money is Cedric's pick, #D9521A (3.5:1).
   The other four are their topic colour mixed toward black just far enough to reach 3.5:1.
   Small text keeps --dk. */
html[data-ground="paper"] * { --dv: var(--dv-fixed, color-mix(in srgb, var(--hi) var(--vp, 82%), #000)); }
html[data-ground="paper"] :is(.t-money, .t-companies, [style*="--hi:#FF6A2B" i]) { --dv-fixed: #D9521A; }
html[data-ground="paper"] :is(.t-government, .t-history, [style*="--hi:#E77FA0" i]) { --vp: 79%; }
html[data-ground="paper"] :is(.t-tech, .t-work, [style*="--hi:#D9B648" i]) { --vp: 68%; }
html[data-ground="paper"] :is(.t-health, [style*="--hi:#5FB6CF" i]) { --vp: 74%; }
html[data-ground="paper"] :is(.t-sport, [style*="--hi:#8DBF5A" i]) { --vp: 71%; }
html[data-ground="paper"] :is(.t-government, .t-history, .t-tech, .t-work, .t-health, .t-sport,
  [style*="--hi:#E77FA0" i], [style*="--hi:#D9B648" i], [style*="--hi:#5FB6CF" i], [style*="--hi:#8DBF5A" i]) { --dv-fixed: initial; }
html[data-ground="paper"] :is(.issue-nums a, .lead-num span, .contents .c-num, .tdept .b-num,
  .comparison-number, .l-num b, .strip .strip-num):not(#_) { color: var(--dv); } /* :not(#_) outranks the wide text rule above */
html[data-ground="paper"] .comparison-item + .comparison-divider + .comparison-item .comparison-number:not(#_) { color: var(--ink); }
html[data-ground="paper"] .comparison-number.dim { color: var(--text-dim) !important; }

/* =====================================================================
   Black Elephant. The About page (about.html), Oct 27 2026.
   It opens on a cover like an essay, then walks one real essay apart.
   Every class here starts with ab- or key- so nothing leaks into the other pages.
   ===================================================================== */
.ab-hero .hero-title { max-width: none; white-space: nowrap; font-size: clamp(2.9rem, 11.6vw, 11rem); }
.ab-hero .hero-in { gap: clamp(150px, 26vw, 420px); }

/* placeholders Cedric has to fill or approve. Shown plainly so nobody mistakes them for copy */
.ph { font-family: var(--label); font-weight: 700; letter-spacing: 0.04em; color: var(--ink);
  background: color-mix(in srgb, #FF6A2B 26%, transparent); padding: 0.05em 0.3em; border-radius: 2px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; }
p.ph { display: inline-block; margin-top: 22px; font-size: 1.05rem; }
.ph-tag.aside { color: var(--ink); background: color-mix(in srgb, #FF6A2B 26%, transparent); padding: 2px 6px 1px; border-radius: 2px; }

/* two columns: a large line on the left, the small print on the right */
.ab-cols { display: grid; gap: clamp(20px, 3vw, 56px); }
@media (min-width: 960px) { .ab-cols { grid-template-columns: 7fr 5fr; align-items: start; } }
.ab-big { font-family: var(--serif); font-weight: 700; font-variation-settings: "opsz" 96;
  font-size: clamp(1.7rem, 3.4vw, 3.1rem); line-height: 1.08; letter-spacing: -0.02em; max-width: 18em; }
.ab-small p { font-size: 1.12rem; line-height: 1.55; color: var(--text-body); max-width: 34em; }
.ab-small p + p { margin-top: 1em; color: var(--ink); font-weight: 600; }

/* the name: the sum drawn as type */
.ab-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 10px clamp(12px, 1.6vw, 24px); margin-bottom: clamp(28px, 3.4vw, 48px); }
.ab-sum p { font-family: var(--label); font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em;
  font-size: clamp(0.92rem, 1.25vw, 1.1rem); border: 1px solid var(--rule); padding: 9px 13px 8px; border-radius: 2px; color: var(--text-mid); }
.ab-sum p.is { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.ab-sum i { font-style: normal; font-family: var(--display); font-weight: 900; font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1; color: var(--hi); }

/* the thesis, set large between two heavy rules */
.ab-thesis { margin-top: clamp(56px, 7vw, 104px); }
.ab-thesis > * { border: 0; }
.ab-thesis .kick { border-top: 3px solid var(--ink); padding-top: 10px; }
.ab-thesis blockquote { margin: clamp(18px, 2.4vw, 32px) 0 0; }
.ab-thesis blockquote p { font-family: var(--serif); font-weight: 900; font-variation-settings: "opsz" 144;
  font-size: clamp(2.3rem, 6.2vw, 6.4rem); line-height: 0.98; letter-spacing: -0.03em; max-width: 15em; text-wrap: balance; }
.ab-thesis .read { display: inline-block; margin-top: clamp(18px, 2vw, 28px); }

/* how an essay is built: the cover on the left, its layers on the right */
.ab-anat { display: grid; gap: clamp(24px, 3vw, 48px); }
@media (min-width: 960px) {
  .ab-anat { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; }
  .ab-spec { position: sticky; top: 24px; }
}
@media (min-width: 560px) and (max-width: 959.98px) { .ab-spec { max-width: 360px; } }
.ab-layers { counter-reset: none; }
.ab-layers > li { display: grid; gap: 10px; padding: 18px 0 26px; border-top: 1px solid var(--rule); }
.ab-layers > li:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 700px) { .ab-layers > li { grid-template-columns: 11em minmax(0, 1fr); gap: 28px; } }
.ab-l { font-family: var(--label); font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.86rem; line-height: 1.3; color: var(--hi); padding-top: 6px; }
.ab-x { min-width: 0; }
.ab-title { font-family: var(--serif); font-weight: 900; font-variation-settings: "opsz" 144; font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 0.95; letter-spacing: -0.03em; }
.ab-quote { margin-top: 12px; font-family: var(--serif); font-weight: 500; font-variation-settings: "opsz" 30; font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.32; color: var(--text-body); max-width: 30em; }
.ab-numrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 22px; }
.ab-numrow .ab-quote { margin-top: 0; padding-bottom: 0.3em; flex: 1 1 14em; }
.ab-num { font-family: var(--display); font-weight: 900; font-size: clamp(5rem, 9vw, 8.5rem); line-height: 0.78; color: var(--hi); font-variant-numeric: lining-nums; }
.ab-num.sm { font-size: clamp(2.6rem, 4vw, 3.6rem); }
.ab-prose { font-size: 1.16rem; line-height: 1.62; color: var(--text-body); font-variant-numeric: oldstyle-nums; max-width: 36em; }
.ab-prose sup { font-family: var(--label); font-weight: 800; font-size: 0.66em; line-height: 0; color: var(--hi); font-variant-numeric: lining-nums; margin-left: 1px; }
.ab-fn { display: grid; grid-template-columns: 1.6em minmax(0, 1fr); gap: 0 10px; margin-top: 14px; padding: 12px 0 0; border-top: 1px dotted var(--rule);
  font-size: 0.95rem; line-height: 1.55; color: var(--text-mid); max-width: 38em; font-variant-numeric: oldstyle-nums; }
.ab-fn b { font-family: var(--display); font-weight: 900; font-size: 1.25rem; line-height: 1.1; color: var(--hi); text-align: right; }
.ab-check { display: grid; gap: 0; }
.ab-check > div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--rule-soft); }
.ab-check > div:first-child { border-top: 0; padding-top: 0; }
.ab-check p { font-size: 1.05rem; line-height: 1.45; color: var(--text-body); font-variant-numeric: oldstyle-nums; }
.ab-check > div:first-child p { font-family: var(--serif); font-style: normal; font-weight: 600; color: var(--ink); }
.ab-k { font-family: var(--label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; color: var(--text-dim); }
.ab-src { margin-top: 18px; font-size: 0.92rem; line-height: 1.5; color: var(--text-dim); max-width: 44em; }
@media (max-width: 459.98px) { .ab-check > div { grid-template-columns: 1fr; gap: 4px; } }

/* the colour key: five covers, one per ink, each with what it covers and one real essay */
.key { display: grid; gap: 26px clamp(16px, 2vw, 28px); }
@media (min-width: 960px) { .key { grid-template-columns: repeat(5, minmax(0, 1fr)); } .key .cv-t { font-size: clamp(15px, 10cqi, 30px); } }
@media (max-width: 959.98px) {
  .key { grid-template-columns: 1fr; }
  .key > li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 20px; align-items: end; }
}
.key-t { padding-top: 12px; border-top: 6px solid var(--hi); margin-top: 12px; }
@media (max-width: 959.98px) { .key-t { margin-top: 0; } }
.key-ink { font-family: var(--serif); font-weight: 900; font-variation-settings: "opsz" 96; font-size: clamp(1.6rem, 2.2vw, 2.1rem); line-height: 1; color: var(--hi); }
.key-cov { margin-top: 6px; font-family: var(--label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem; line-height: 1.35; color: var(--text-mid); }
.key-ex { margin-top: 10px; font-family: var(--serif); font-weight: 700; font-variation-settings: "opsz" 36; font-size: 1.12rem; line-height: 1.2; }
.key-ex a { text-decoration: underline; text-decoration-color: var(--hi); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* issues */
.ab-two { display: grid; gap: clamp(28px, 4vw, 64px); }
@media (min-width: 960px) { .ab-two { grid-template-columns: 1fr 1fr; } }
.ab-h { font-family: var(--serif); font-weight: 900; font-variation-settings: "opsz" 144; font-size: clamp(2.2rem, 4.2vw, 3.8rem); line-height: 0.95; letter-spacing: -0.025em; }
.ab-p { margin-top: 12px; font-size: 1.12rem; line-height: 1.5; color: var(--text-body); max-width: 30em; }
.ab-nums { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.ab-nums a { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.ab-links { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.ab-issues > p.ph { margin-top: clamp(24px, 3vw, 40px); }

/* corrections */
.ab-rules li { position: relative; padding: 10px 0 10px 22px; border-top: 1px solid var(--rule); font-size: 1.1rem; line-height: 1.45; color: var(--text-body); }
.ab-rules li:first-child { border-top: 0; padding-top: 2px; }
.ab-rules li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 9px; height: 9px; background: var(--hi); }
.ab-rules li:first-child::before { top: 0.55em; }

/* who writes it */
.ab-name-big { font-family: var(--serif); font-weight: 900; font-variation-settings: "opsz" 144; font-size: clamp(2.6rem, 5.6vw, 5.4rem); line-height: 0.92; letter-spacing: -0.03em; }
.ab-bio { font-size: 1.1rem; }
.ab-words blockquote { margin: 0; padding-left: 18px; border-left: 4px solid var(--hi); }
.ab-words blockquote + blockquote { margin-top: 22px; }
.ab-words blockquote p { font-family: var(--serif); font-weight: 500; font-variation-settings: "opsz" 30; font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.3; color: var(--ink); }

/* Paper: deepened text where the ink is text, bright where it is a mark */
html[data-ground="paper"] :is(.ab-l, .key-ink, .ab-fn b, .ab-prose sup) { color: var(--dk); }
html[data-ground="paper"] :is(.ab-num, .ab-sum i):not(#_) { color: var(--dv); }
html[data-ground="paper"] .key-ex a { text-decoration-color: var(--dk); }
html[data-ground="paper"] :is(.ph, .ph-tag.aside) { background: color-mix(in srgb, #FF6A2B 30%, transparent); }

/* Black Elephant. The top strip on phones, with About added: two rows instead of three.
   Row one is the name and Subscribe, row two is Archive, About and the Dark / Paper switch. */
@media (max-width: 559.98px) {
  .strip { flex-wrap: wrap; row-gap: 0; column-gap: 16px; }
  .strip nav { display: contents; }
  .strip > :first-child { order: 0; }
  .strip .btn { order: 1; margin-left: auto; }
  .strip::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
  .strip nav > a:not(.btn) { order: 3; margin-top: 12px; }
  .strip .ground { order: 4; margin-left: auto; margin-top: 12px; }
}

/* the colour key on narrow screens: smaller covers beside their text, so five covers do not run 2,000 px */
@media (max-width: 959.98px) {
  .key > li { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); }
  .ab-spec { max-width: 340px; }
}
@media (min-width: 560px) and (max-width: 959.98px) {
  .key { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .key > li { display: block; }
  .key-t { margin-top: 12px; }
}
@media (max-width: 559.98px) { .ab-key .dept-head .aside { display: none; } }