/* Ordelvio News feed: design tokens.
   Direction (Design DNA whole-collection study, 2026-09-23): the feed belongs to the live wall, so it
   keeps the wall's black field and yellow top band. Stories sit on warm paper planes joined flush like
   a mosaic; scale contrast carries hierarchy (large serif headlines, small monospace metadata); sources
   form a connected trail from the article to each outlet. Colour marks category planes, never
   decoration. Identity artwork keeps its own colours and is never recoloured here. */
:root {
  color-scheme: dark;
  /* Field and planes */
  --field: #000000;
  --band: #F9DDA0;          /* the live site's top band */
  --paper: #FBF6EA;         /* reading plane */
  --paper-deep: #F2EAD6;
  --ink: #111111;
  --ink-soft: #3a3833;
  --ink-mute: #6d6a62;
  --rule: #d9d0bc;
  --evidence: #151517;      /* dark evidence panel */
  --evidence-line: #34333a;
  --evidence-text: #efe7d6;
  --evidence-mute: #a9a397;
  /* Category planes */
  --cat-economy: #F9DDA0;
  --cat-business: #DF9BB7;
  --cat-technology: #BFC1E3;
  --cat-ai: #C9E7C1;
  --cat-science: #9FD6DE;
  /* Signals */
  --ok: #2f7d4f;
  --warn: #9a6400;
  --focus: #5a4fcf;
  /* Type */
  --serif: "Iowan Old Style", "Charter", "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "SFMono-Regular", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --measure: 66ch;
  --gap: clamp(12px, 2vw, 20px);
  --radius: 0px;            /* planes join flush; only controls round */
  --pill: 999px;
}

/* ---------------------------------------------------------------------------------------------
   Public feed pages (/news). Every visual decision lives in this file; the HTML carries no inline
   styles or scripts (the Content-Security-Policy forbids both). Source of truth: this file. After
   editing, run `node feed/tools/build-assets.mjs` to regenerate feed/src/publish/assets.mjs.

   Class vocabulary (stable names the renderer emits):
   Page frame     .skip-link  .visually-hidden  .preview-banner  .band  .brand  .tabs  .tab (i = dot)
                  .wrap  .foot  .foot-links  .contact
   Index/category .masthead  .meta-line  .filters  .chip (b = colour dot)  .mosaic  .plane
                  .lead  .lead--full  .tall  .tall--full  .wide  .wide--full  .art  .badge  .txt
                  .cat  .facts  .sources-preview  .section-head  .ledger  .when  .n  .process
                  .editor (process step)  .empty
   Category tint  .cat-economy  .cat-business  .cat-technology  .cat-ai  .cat-science  (set --c)
   Article        .story  .story-head  .dek  .label-row  .label  .pill  .story-figure  .story-grid
                  .story-body  .corrections  .byline  .trail  .outlet  .terms  .checks  .tags
                  .story-nav  .story-nav__prev  .story-nav__next
   Replies        .replies  .reply  .reply-meta  .reply-text  .reply-link (link at the top of the story)
                  .reply-notices  .reply-notices--top  .reply-notices--below (front page, withdrawn stories)
   Text pages     .doc (a .story without category)  .single (one-column .story-grid)  .prose
                  .outlet-list  .log  .notice  .imprint (contact page)  .missing (preview only)
   --------------------------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; background: var(--field); color: var(--ink); font: 400 16px/1.55 var(--sans); }
body { min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.band :focus-visible, .foot :focus-visible, .filters :focus-visible { outline-color: var(--paper); }
.band :focus-visible { outline-color: #000; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 20; padding: 8px 14px; border-radius: var(--pill); background: var(--paper); color: #000; font: 600 13px/1 var(--sans); text-decoration: none; }
.skip-link:focus { left: 12px; }

/* Top band: the live site's yellow band with the approved wordmark and section tabs. */
.band { display: flex; align-items: center; gap: 18px; padding: 10px clamp(12px, 3vw, 28px); background: var(--band); border-bottom: 2px solid #000; flex-wrap: wrap; }
.band .brand { display: block; width: 180px; padding: 4px; flex: none; }
.band .brand img { display: block; width: 100%; height: auto; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; min-height: 30px; border: 1.5px solid #000; border-radius: var(--pill); font: 600 13px/1 var(--sans); text-decoration: none; color: #000; }
.tab:hover { background: #00000014; }
/* Each dot carries its own section's colour (the live site uses the same six); the current pill is ink with
   the band's yellow for its text. */
.tab i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--dot, #000); box-shadow: 0 0 0 1.5px #000; }
.tab[data-section="live"] { --dot: #DF9BB7; } .tab[data-section="economy"] { --dot: #C9E7C1; }
.tab[data-section="markets"] { --dot: #9FD6DE; } .tab[data-section="calendar"] { --dot: #BFC1E3; }
.tab[data-section="news"] { --dot: #F9DDA0; } .tab[data-section="about"] { --dot: #E9E2D5; }
.tab[aria-current] { background: #111; border-color: #111; color: var(--band); }
.tab[aria-current] i { box-shadow: 0 0 0 1.5px var(--band); }

.preview-banner { padding: 10px clamp(12px, 3vw, 28px); background: repeating-linear-gradient(135deg, #111 0 14px, #1d1c1a 14px 28px); color: var(--band); font: 600 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; border-bottom: 2px solid var(--band); }

.wrap { max-width: 1320px; margin: 0 auto; padding: 0 clamp(12px, 3vw, 28px); }

/* Masthead and topic filters */
.masthead { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; padding: 26px 0 16px; color: var(--band); }
.masthead h1 { margin: 0; font: 400 clamp(34px, 5.4vw, 64px)/1 var(--serif); letter-spacing: -.02em; color: var(--paper); }
.masthead h1 em { font-style: normal; color: var(--band); }
.masthead p { margin: 0; }
.meta-line { font: 500 11px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #bfb7a4; }
a.meta-line { text-decoration: none; }
a.meta-line:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 14px; }
.chip { font: 600 12px/1 var(--sans); padding: 7px 12px; min-height: 28px; border-radius: var(--pill); border: 1px solid #3b3a36; color: #e8e0cc; text-decoration: none; display: inline-flex; gap: 7px; align-items: center; }
.chip:hover { border-color: #e8e0cc; }
.chip b { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.chip[aria-current] { background: var(--paper); color: #000; border-color: var(--paper); }

/* Mosaic: joined planes, no gutters, hairline seams */
.mosaic { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; background: #000; border: 2px solid #000; }
.plane { --c: var(--paper-deep); background: var(--paper); position: relative; display: flex; flex-direction: column; min-width: 0; color: var(--ink); }
.plane:focus-within { outline: 3px solid var(--focus); outline-offset: -3px; z-index: 1; }
.art { display: block; width: 100%; aspect-ratio: 3/2; background: var(--paper-deep); position: relative; overflow: hidden; }
.art img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.badge { position: absolute; right: 10px; bottom: 10px; z-index: 1; font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; background: rgba(17, 17, 17, .82); color: #f4ecd8; padding: 6px 8px; border-radius: var(--pill); }
.plane .txt { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cat { font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.cat::before { content: ""; width: 22px; height: 8px; background: var(--c); flex: none; }
.plane :is(h2, h3) { margin: 0; font: 400 22px/1.15 var(--serif); letter-spacing: -.01em; }
.plane :is(h2, h3) a { text-decoration: none; }
.plane :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.plane :is(h2, h3) a:focus-visible { outline: none; }
.plane:hover :is(h2, h3) a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.plane p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.facts { margin-top: auto; display: flex; gap: 14px; flex-wrap: wrap; font: 500 11px/1.4 var(--mono); color: var(--ink-mute); letter-spacing: .04em; }
.facts span, .facts time { white-space: nowrap; }
.lead { grid-column: span 8; grid-row: span 2; flex-direction: row; }
.lead .art { width: 58%; aspect-ratio: auto; min-height: 340px; }
.lead .txt { width: 42%; padding: 28px 28px 26px; background: var(--c); }
.lead :is(h2, h3) { font-size: clamp(28px, 3.1vw, 44px); line-height: 1.04; letter-spacing: -.02em; }
.lead p { font-size: 17px; color: #2a2823; }
.lead .facts, .flat .facts { color: var(--ink-soft); }
.lead--full { grid-column: span 12; grid-row: auto; }
.sources-preview { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(0, 0, 0, .25); font: 500 12px/1.7 var(--mono); color: #3a3833; }
.sources-preview b { display: block; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; margin-bottom: 4px; }
.sources-preview span { display: block; }
.tall { grid-column: span 4; }
.tall--full { grid-row: span 2; }
.wide { grid-column: span 6; flex-direction: row; }
.wide .art { width: 46%; aspect-ratio: auto; min-height: 220px; }
.wide .txt { width: 54%; }
.wide--full { grid-column: span 12; }
.flat { grid-column: span 4; }
.flat .txt { background: var(--c); }
.empty { background: var(--paper); padding: 28px; font: 400 19px/1.5 var(--serif); }
.empty p { margin: 0 0 .6em; }

/* Ledger of latest stories */
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 34px 0 10px; color: #e8e0cc; border-bottom: 1px solid #2c2b28; }
.section-head h2 { margin: 0; font: 600 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.ledger { list-style: none; margin: 0; padding: 0; background: var(--paper); }
.ledger li { --c: var(--paper-deep); display: grid; grid-template-columns: 96px 150px 1fr 110px 110px; gap: 16px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--rule); }
.ledger time, .ledger .n { font: 500 12px/1.3 var(--mono); color: var(--ink-mute); }
.ledger .when span { display: block; }
.ledger a { font: 400 19px/1.25 var(--serif); text-decoration: none; }
.ledger a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Process line (spatial origin → branches motif, read left to right) */
.process { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; margin: 0; padding: 26px 0 8px; list-style: none; color: #e8e0cc; position: relative; }
.process::before { content: ""; position: absolute; left: 4%; right: 4%; top: 37px; height: 1px; background: linear-gradient(90deg, #F9DDA0, #BFC1E3, #DF9BB7); }
.process li { position: relative; padding: 28px 4px 0; text-align: center; font: 500 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.process li::before { content: ""; position: absolute; top: 5px; left: 50%; width: 13px; height: 13px; margin-left: -7px; border-radius: 50%; background: #000; border: 2px solid var(--band); box-shadow: 0 0 12px rgba(249, 221, 160, .45); }
.process li.editor::before { background: var(--band); }
.process small { display: block; text-transform: none; letter-spacing: 0; color: #a9a397; font: 400 12px/1.4 var(--sans); margin-top: 4px; }

/* Article */
.story { --c: var(--paper-deep); background: var(--paper); margin: 26px auto 0; max-width: 1100px; }
.story-head { padding: clamp(22px, 4vw, 48px) clamp(18px, 5vw, 64px) 26px; background: var(--c); border-bottom: 2px solid #000; }
.story-head .meta-line { color: var(--ink-soft); margin: 0; }
.story-head .meta-line a { text-decoration: none; }
.story-head .meta-line a:hover { text-decoration: underline; }
.story-head h1 { margin: 14px 0 14px; font: 400 clamp(32px, 4.6vw, 58px)/1.03 var(--serif); letter-spacing: -.022em; max-width: 20ch; overflow-wrap: anywhere; }
.dek { font: 400 20px/1.45 var(--serif); color: #2a2823; max-width: 52ch; margin: 0; }
.label-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; align-items: center; }
.label { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; min-height: 30px; border-radius: var(--pill); background: #111; color: #f4ecd8; font: 600 12px/1.25 var(--sans); text-decoration: none; }
.label:hover { text-decoration: underline; text-underline-offset: 2px; }
.label svg { width: 14px; height: 14px; flex: none; }
.pill { font: 500 12px/1 var(--mono); padding: 7px 11px; border: 1px solid rgba(0, 0, 0, .35); border-radius: var(--pill); }
.story-figure { margin: 0; position: relative; border-bottom: 2px solid #000; }
.story-figure .art { aspect-ratio: 16/9; display: block; max-height: 620px; }
.story-figure figcaption { padding: 10px clamp(18px, 5vw, 64px); font: 500 12px/1.4 var(--mono); color: var(--ink-mute); background: var(--paper-deep); }
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: clamp(20px, 4vw, 52px); padding: clamp(22px, 4vw, 44px) clamp(18px, 5vw, 64px) 48px; }
.story-grid.single { grid-template-columns: minmax(0, 1fr); }
.story-body { font: 400 19px/1.62 var(--serif); max-width: var(--measure); overflow-wrap: break-word; }
.story-body p { margin: 0 0 1.05em; }
.story-body h2 { font: 600 15px/1.3 var(--sans); letter-spacing: .02em; margin: 1.6em 0 .6em; }
.story-body ul, .story-body ol { margin: 0 0 1.05em; padding-left: 1.3em; }
.story-body li { margin: 0 0 .4em; }
.story-body blockquote { margin: 0 0 1.05em; padding: 2px 0 2px 18px; border-left: 3px solid var(--c); color: var(--ink-soft); }
.story-body a { text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--ink-mute); }
.story-body a:hover { text-decoration-color: currentColor; }
.corrections { margin: 30px 0 0; padding: 16px 18px; background: var(--paper-deep); border-left: 4px solid var(--warn); font: 400 16px/1.55 var(--sans); }
.corrections h2 { margin: 0 0 8px; }
.corrections ol { margin: 0; padding: 0; list-style: none; }
.corrections li { margin: 0 0 8px; }
.corrections time { display: block; font: 500 12px/1.4 var(--mono); color: var(--ink-mute); }
.byline { font: 500 12px/1.5 var(--mono); color: var(--ink-mute); border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 26px; }
.story-body .byline { margin-bottom: 0; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 14px 0 0; padding: 0; font: 500 12px/1 var(--mono); color: var(--ink-mute); }
.tags li { padding: 6px 9px; border: 1px solid var(--rule); border-radius: var(--pill); }

/* Replies and correction requests: directly under the headline, in the story body's own type
   (same family, size and line height as .story-body). */
.replies { padding: clamp(20px, 3.4vw, 36px) clamp(18px, 5vw, 64px); background: var(--paper); border-bottom: 2px solid #000; }
.reply { max-width: var(--measure); padding: 2px 0 2px 20px; border-left: 6px solid #000; }
.reply + .reply { margin-top: 28px; }
.story .reply h2, .story .reply h3 { margin: 0 0 6px; font: 600 22px/1.2 var(--sans); letter-spacing: 0; }
.reply-meta { margin: 0 0 14px; font: 500 12px/1.5 var(--mono); color: var(--ink-mute); }
.reply-meta b { color: var(--ink); font-weight: 600; }
.reply-text { font: 400 19px/1.62 var(--serif); overflow-wrap: break-word; }
.reply-text p { margin: 0 0 1.05em; }
.reply-text p:last-child { margin-bottom: 0; }
.story-head .meta-line a.reply-link { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); font-weight: 600; }

/* Front-page notices for replies to withdrawn stories: top of the page for 24 hours, then below
   the top stories until day 7. */
.reply-notices { background: var(--paper); color: var(--ink); padding: 16px 20px; margin: 18px 0 0; border-left: 8px solid var(--band); }
.reply-notices h2 { margin: 0 0 8px; font: 600 12px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.reply-notices ul { margin: 0; padding: 0; list-style: none; }
.reply-notices li { margin: 0 0 6px; font: 400 16px/1.5 var(--sans); }
.reply-notices li:last-child { margin-bottom: 0; }
.reply-notices a { font-weight: 600; text-underline-offset: 3px; }
.reply-notices--top { margin-top: 26px; border-left-color: var(--warn); }
.reply-notices--top li { font: 400 20px/1.45 var(--serif); }
.reply-notices--below { margin: 2px 0 0; }

/* Source trail: origin node with branches to every outlet */
.trail { background: var(--evidence); color: var(--evidence-text); padding: 22px 20px 18px; align-self: start; position: sticky; top: 18px; }
.trail h2 { margin: 0 0 4px; font: 600 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--band); }
.trail > p { margin: 0 0 16px; font-size: 13px; color: var(--evidence-mute); }
.trail ol { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; }
.trail ol::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 18px; width: 1px; background: linear-gradient(var(--band), #BFC1E3); }
.trail li { position: relative; padding: 0 0 16px; overflow-wrap: anywhere; }
.trail li::before { content: ""; position: absolute; left: -22px; top: 7px; width: 12px; height: 1px; background: #BFC1E3; }
.trail li::after { content: ""; position: absolute; left: -12px; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: #BFC1E3; box-shadow: 0 0 10px rgba(191, 193, 227, .7); }
.trail .outlet { font: 600 14px/1.3 var(--sans); }
.trail a { display: block; font: 400 14px/1.35 var(--serif); color: #f4ecd8; margin: 3px 0 4px; }
.trail :focus-visible { outline-color: var(--band); }
.trail small { display: block; font: 400 11px/1.45 var(--mono); color: var(--evidence-mute); }
.checks { margin-top: 18px; border-top: 1px solid var(--evidence-line); padding-top: 14px; font: 500 12px/1.9 var(--mono); color: var(--evidence-mute); }
.checks p { margin: 0; }
.checks b { color: #9fe0b0; font-weight: 600; }

/* Previous and next story */
.story-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; max-width: 1100px; margin: 2px auto 0; background: #000; }
.story-nav a { display: block; padding: 18px clamp(18px, 3vw, 28px); background: var(--paper-deep); text-decoration: none; font: 400 18px/1.3 var(--serif); }
.story-nav a:hover { background: var(--paper); }
.story-nav a span { display: block; margin-bottom: 6px; font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.story-nav__next { grid-column: 2; text-align: right; }

/* Text pages: methodology, AI disclosure, corrections, withdrawn, not found */
.doc { --c: var(--band); }
.prose h2 { font-size: 16px; }
.prose h2:first-child { margin-top: 0; }
.outlet-list, .log { list-style: none; margin: 0 0 1.05em; padding: 0; border-top: 1px solid var(--rule); }
.outlet-list li, .log li { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 17px; }
.outlet-list small, .log time { display: block; font: 500 12px/1.4 var(--mono); color: var(--ink-mute); }
.log p { margin: 4px 0 0; font-size: 16px; color: var(--ink-soft); }
.notice { padding: 14px 16px; background: var(--paper-deep); font: 400 16px/1.5 var(--sans); }
.imprint { display: grid; grid-template-columns: minmax(150px, 34%) 1fr; gap: 0 18px; margin: 0 0 1.05em; border-top: 1px solid var(--rule); }
.imprint dt, .imprint dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.imprint dt { font: 500 12px/1.9 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); }
.imprint dd { font-size: 17px; overflow-wrap: anywhere; }
.missing { color: var(--warn); font: 600 14px/1.5 var(--sans); }
.contact a { overflow-wrap: anywhere; }

/* Footer */
.foot { color: #bfb7a4; font: 500 12px/1.8 var(--mono); padding: 30px 0 60px; display: flex; flex-direction: column; gap: 10px; }
.foot p { margin: 0; max-width: 90ch; }
.foot a { color: #e8e0cc; }
.foot-links { display: flex; gap: 6px 20px; flex-wrap: wrap; }

/* Category tint: after every default --c so the category always wins. */
.cat-economy { --c: var(--cat-economy); }
.cat-business { --c: var(--cat-business); }
.cat-technology { --c: var(--cat-technology); }
.cat-ai { --c: var(--cat-ai); }
.cat-science { --c: var(--cat-science); }

@media (max-width: 980px) {
  .lead, .wide { grid-column: span 12; flex-direction: column; }
  .lead .art, .lead .txt, .wide .art, .wide .txt { width: 100%; }
  .lead .art, .wide .art { aspect-ratio: 3/2; min-height: 0; }
  .tall, .flat { grid-column: span 6; }
  .tall--full { grid-row: auto; }
  .ledger li { grid-template-columns: 70px 1fr; gap: 6px 12px; }
  .ledger li .cat { grid-column: 2; }
  .ledger li a { grid-column: 1/-1; }
  .ledger li .n { display: none; }
  .story-grid { grid-template-columns: 1fr; }
  .trail { position: static; }
  .process { grid-template-columns: repeat(4, 1fr); row-gap: 18px; }
  .process::before { display: none; }
}
@media (max-width: 600px) {
  .tall, .flat { grid-column: span 12; }
  .ledger li { grid-template-columns: 1fr; }
  .ledger li .cat { grid-column: 1; }
  .ledger .when span { display: inline; }
  .band { gap: 10px; }
  .band .brand { width: 150px; }
  .tabs { gap: 4px; }
  .tab { padding: 5px 8px; gap: 5px; font-size: 12px; }
  .dek { font-size: 18px; }
  .story-body, .reply-text { font-size: 18px; }
  .imprint { grid-template-columns: 1fr; }
  .imprint dt { border-bottom: none; padding-bottom: 0; }
  .process { grid-template-columns: repeat(2, 1fr); }
  .story-nav { grid-template-columns: 1fr; }
  .story-nav__next { grid-column: 1; text-align: left; }
}
@media print {
  html, body { background: #fff; }
  .band .tabs, .filters, .process, .story-nav, .skip-link { display: none; }
  .trail { position: static; background: #fff; color: #000; border: 1px solid #000; }
}

/* Phones: the six section pills share one row, like the wall's band; the dots return above 640 px. */
@media (max-width: 640px) {
  .band { row-gap: 8px; }
  .band .tabs { width: 100%; flex-wrap: nowrap; gap: 3px; justify-content: space-between; }
  .tab { flex: 1 0 auto; justify-content: center; gap: 0; min-height: 30px; padding: 0 6px; font-size: 11.5px; }
  .tab i { display: none; }
}
@media (max-width: 360px) { .band .tabs { gap: 2px; } .tab { padding: 0 3px; font-size: 10.5px; } }