/* A Century Late. Font faces from tokens.json. */
@font-face{font-family:"League Gothic";src:url("/static/fonts/league-gothic-latin-ext.woff2?v=cc62fc98e28f") format("woff2");font-style:normal;font-weight:400;font-display:optional}
@font-face{font-family:"Libre Franklin";src:url("/static/fonts/libre-franklin-latin-ext.woff2?v=af15f626e339") format("woff2");font-style:normal;font-weight:400 600;font-display:optional}
/* Generated from tokens.json by
   skills/interfata-web/scripts/genereaza_css.py.
   Do not edit by hand: change tokens.json and regenerate.
   Document 13 is the human explanation; this file is the machine one. */

:root {
  /* Palette, document 13 section 3.1. The ratio is the measured
     contrast against the background named beside it. */
  --paper: #F4EBD7;  /* main background */
  --paper-deep: #E6D7B9;  /* context box background; the transcription box background until 2026-09-25 */
  --ink: #1B1814;  /* body text, titles, 14.92:1 on --paper */
  --ink-soft: #453D32;  /* secondary text, 9.01:1 on --paper */
  --muted: #5B5041;  /* date, byline, credit, 6.64:1 on --paper */
  --accent: #7A1F1A;  /* section label, editorial accent, 8.69:1 on --paper */
  --link: #38566B;  /* links, 6.53:1 on --paper */
  --rule: #8B7355;  /* rules and borders, 3.16:1 on --paper-deep, never text */

  /* Families, document 13 sections 2 and 2.2. */
  --font-display: "Girassol", "Georgia", serif;
  --font-condensed: "League Gothic", system-ui, -apple-system, sans-serif;
  --font-reading: "ACL Fell Text", "Georgia", serif;
  --font-utility: "Libre Franklin", system-ui, -apple-system, sans-serif;
  --font-decorative: "Old Standard TT", "Georgia", serif;
  --font-display-min-size: 1.75rem;  /* 28 px */
  --font-decorative-min-size: 1.4375rem;  /* 23 px */
  --font-utility-label-weight: 600;
  --font-utility-metadata-weight: 400;
  --font-display-weight: 400;
  --font-decorative-weight: 400;

  /* Type scale, phone. */
  --phone-body-size: 1.125rem;  /* 18 px */
  --phone-body-leading: 1.85625rem;  /* 29.7 px */
  --phone-deck-size: 1.25rem;  /* 20 px */
  --phone-deck-leading: 1.75rem;  /* 28 px */
  --phone-h2-size: 1.875rem;  /* 30 px */
  --phone-h2-leading: 2.15625rem;  /* 34.5 px */
  --phone-h3-size: 1.4375rem;  /* 23 px */
  --phone-h3-leading: 1.8rem;  /* 28.8 px */
  --phone-metadata-size: 0.875rem;  /* 14 px */
  --phone-metadata-leading: 1.225rem;  /* 19.6 px */
  --phone-section-label-size: 0.8125rem;  /* 13 px */
  --phone-section-label-leading: 0.975rem;  /* 15.6 px */
  --phone-section-label-tracking: 0.06em;
  --phone-note-size: 0.875rem;  /* 14 px */
  --phone-note-leading: 1.225rem;  /* 19.6 px */
  --phone-h1-size: clamp(2.5rem, 9vw, 3.5rem);
  --phone-h1-leading: 1.02;

  /* Grid and layout, document 13 section 4. */
  --rule-width: 1px;
  --measure: 66ch;
  --text-align: left;
  --transcript-edge: 4px;
  --transcript-edge-color: var(--accent);
  --context-background: var(--paper-deep);
  --info-icon-size: 20px;
  --info-note-background: var(--paper);
  --info-note-border: var(--rule);

  /* Breakpoint values, for reference. A media query cannot read a
     custom property, so the queries repeat these values, in rem. */
  --breakpoint-1-min: 0px;
  --breakpoint-2-min: 640px;
  --breakpoint-3-min: 880px;
  --breakpoint-4-min: 1200px;
  --grid-1-columns: 1;
  --grid-1-margin: 16px;
  --grid-1-gap: 24px;
  --grid-1-lead-span: 1;
  --grid-1-rail-span: 1;
  --grid-1-card-span-1: 1;
  --grid-2-columns: 2;
  --grid-2-margin: 24px;
  --grid-2-gap: 24px;
  --grid-2-lead-span: 2;
  --grid-2-rail-span: 1;
  --grid-2-card-span-1: 1;
  --grid-3-columns: 4;
  --grid-3-margin: 32px;
  --grid-3-gap: 20px;
  --grid-3-lead-span: 3;
  --grid-3-rail-span: 1;
  --grid-3-card-span-1: 2;
  --grid-4-columns: 7;
  --grid-4-margin: 48px;
  --grid-4-gap: 18px;
  --container-max: 1400px;
  --grid-4-lead-span: 5;
  --grid-4-rail-span: 2;
  --grid-4-card-span-1: 2;
  --grid-4-card-span-2: 2;
  --grid-4-card-span-3: 3;

  /* Chrome, document 13 sections 6 and 8. */
  --masthead-initial-max: 104px;
  --masthead-sticky-max: 56px;
  --double-rule-line: 1px;
  --double-rule-gap: 3px;
  --double-rule-color: var(--rule);
  --uppercase-tracking: 0.06em;
  --title-main-case: uppercase;
  --band-link-underline-style: dotted;
  --band-link-underline-thickness: 2px;
  --band-link-underline-offset: 0.15em;
  --band-link-underline-color: var(--rule);
  --band-link-underline-hover-style: solid;
  --icon-max: 24px;
  --image-border: 2px;
  --image-border-color: #000000;
  --image-caption-gap: 16px;
  --label-background: rgba(0, 0, 0, 0.75);
  --label-text: #F3EADB;
  --label-inset: 24px;
  --label-padding-inline: 16px;
  --label-padding-block: 10px;
  --texture-max-opacity: 0.035;
  --viewer-min-height: min(70svh, 720px);
  --viewer-min-height-phone: 420px;
  --target-min: 44px;
  --focus-outline: 2px;
  --calendar-cell-min: 44px;
  --calendar-gap: 2px;
}

@media (min-width: 40rem) {
  :root {
  
    /* Type scale, tablet. */
    --tablet-body-size: 1.1875rem;  /* 19 px */
    --tablet-body-leading: 1.9rem;  /* 30.4 px */
    --tablet-deck-size: 1.375rem;  /* 22 px */
    --tablet-deck-leading: 1.925rem;  /* 30.8 px */
    --tablet-h2-size: 2.125rem;  /* 34 px */
    --tablet-h2-leading: 2.44375rem;  /* 39.1 px */
    --tablet-h3-size: 1.5625rem;  /* 25 px */
    --tablet-h3-leading: 1.95625rem;  /* 31.3 px */
    --tablet-metadata-size: 0.875rem;  /* 14 px */
    --tablet-metadata-leading: 1.225rem;  /* 19.6 px */
    --tablet-section-label-size: 0.8125rem;  /* 13 px */
    --tablet-section-label-leading: 0.975rem;  /* 15.6 px */
    --tablet-section-label-tracking: 0.06em;
    --tablet-note-size: 0.875rem;  /* 14 px */
    --tablet-note-leading: 1.225rem;  /* 19.6 px */
    --tablet-h1-size: 56px;
    --tablet-h1-leading: 1.0;
  }
}

@media (min-width: 55rem) {
  :root {
  
    /* Type scale, desktop. */
    --desktop-body-size: 1.25rem;  /* 20 px */
    --desktop-body-leading: 2rem;  /* 32 px */
    --desktop-deck-size: 1.5rem;  /* 24 px */
    --desktop-deck-leading: 2.1rem;  /* 33.6 px */
    --desktop-h2-size: 2.5rem;  /* 40 px */
    --desktop-h2-leading: 2.875rem;  /* 46 px */
    --desktop-h3-size: 1.75rem;  /* 28 px */
    --desktop-h3-leading: 2.1875rem;  /* 35 px */
    --desktop-metadata-size: 0.9375rem;  /* 15 px */
    --desktop-metadata-leading: 1.3125rem;  /* 21 px */
    --desktop-section-label-size: 0.875rem;  /* 14 px */
    --desktop-section-label-leading: 1.05rem;  /* 16.8 px */
    --desktop-section-label-tracking: 0.06em;
    --desktop-note-size: 0.875rem;  /* 14 px */
    --desktop-note-leading: 1.3125rem;  /* 21 px */
    --desktop-h1-size: clamp(3.5rem, 5vw, 4.5rem);
    --desktop-h1-leading: 0.98;
  }
}

/* Night edition, document 13 section 3.4. Not available at launch:
   the block is inert until an ancestor carries data-theme="night".
   Scans and photographs are never inverted, and the texture is off. */
:root[data-theme="night"] {
  --paper: #181511;  /* night background */
  --ink: #EEE1C8;  /* night body text, 14.07:1 */
  --ink-soft: #CCBEA5;  /* night secondary text, 9.94:1 */
  --link: #F0B58B;  /* night links, 10.13:1 */
  --accent: #FF9685;  /* night accent, 8.62:1 */
  --texture-max-opacity: 0;  /* texture is off at night */
}

/* Texture, document 13 section 5: under the documented opacity at every
   point, with no extra network request, on the page background only,
   never animated. */
.paper {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 18% 22%, rgb(27 24 20 / 2%) 0 0.75px, transparent 1px),
    repeating-linear-gradient(0deg, rgb(27 24 20 / 1.2%) 0 1px, transparent 1px 4px);
  background-size: 19px 19px, 100% 4px;
}

@media (prefers-contrast: more), (forced-colors: active) {
  .paper { background-image: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* The official combination, docs/13 section 2.2. */
@font-face{font-family:"ACL Fell Text";src:url("/static/fonts/acl-fell-text-latin-ext.woff2?v=b01d0a620f43") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"ACL Fell Text";src:url("/static/fonts/acl-fell-text-italic-latin-ext.woff2?v=b2a4a477a7ed") format("woff2");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"ACL Fell Text";src:url("/static/fonts/figures-junicode.woff2?v=1e9c093a9aa3") format("woff2");font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0030-0039, U+2032-2033, U+2212;size-adjust:101.47%}
@font-face{font-family:"ACL Fell Text";src:url("/static/fonts/figures-junicode-italic.woff2?v=ca7d6e5bc84d") format("woff2");font-style:italic;font-weight:400;font-display:swap;unicode-range:U+0030-0039, U+2032-2033, U+2212;size-adjust:101.47%}
@font-face{font-family:"Girassol";src:url("/static/fonts/girassol-400-latin-ext.woff2?v=20cfa77d8cce") format("woff2");font-style:normal;font-weight:400;font-display:swap}
.transcript__body,.prose,.deck,.clarifier,.context,.bridge__body,.photo__legend{font-synthesis-weight:none}
:is(.transcript__body,.prose,.deck,.clarifier,.context,.bridge__body,.photo__legend) :is(strong,b){font-weight:inherit;font-style:italic}
/* A Century Late, site rules.
   Every colour, font, size and grid value is a custom property from tokens.css,
   which is generated from tokens.json. This file writes no colour, no font name
   and no absolute length of its own: tests/test_site.py fails if it does. The
   only literals are the breakpoint media queries, which CSS cannot read from a
   property; the test checks each one against tokens.json. Spacing inside text
   blocks is in em, a proportion of the token sizes. */

/* The current step of the type scale and of the grid. */
:root {
  --body-size: var(--phone-body-size);
  --body-leading: var(--phone-body-leading);
  --deck-size: var(--phone-deck-size);
  --deck-leading: var(--phone-deck-leading);
  --h1-size: var(--phone-h1-size);
  --h1-leading: var(--phone-h1-leading);
  --h2-size: var(--phone-h2-size);
  --h2-leading: var(--phone-h2-leading);
  --h3-size: var(--phone-h3-size);
  --h3-leading: var(--phone-h3-leading);
  --meta-size: var(--phone-metadata-size);
  --meta-leading: var(--phone-metadata-leading);
  --label-size: var(--phone-section-label-size);
  --label-leading: var(--phone-section-label-leading);
  --label-tracking: var(--phone-section-label-tracking);
  --note-size: var(--phone-note-size);
  --note-leading: var(--phone-note-leading);
  --card-title-size: max(var(--h3-size), var(--font-display-min-size));
  --mark-size: var(--h3-leading);
  --columns: var(--grid-1-columns);
  --margin: var(--grid-1-margin);
  --gap: var(--grid-1-gap);
  --lead-span: var(--grid-1-lead-span);
  --rail-span: var(--grid-1-rail-span);
  --card-span-1: var(--grid-1-card-span-1);
  --card-span-2: var(--grid-1-card-span-1);
  --card-span-3: var(--grid-1-card-span-1);
  --column-rule: 0;
}

@media (min-width: 40rem) {
  :root {
    --body-size: var(--tablet-body-size);
    --body-leading: var(--tablet-body-leading);
    --deck-size: var(--tablet-deck-size);
    --deck-leading: var(--tablet-deck-leading);
    --h1-size: var(--tablet-h1-size);
    --h1-leading: var(--tablet-h1-leading);
    --h2-size: var(--tablet-h2-size);
    --h2-leading: var(--tablet-h2-leading);
    --h3-size: var(--tablet-h3-size);
    --h3-leading: var(--tablet-h3-leading);
    --meta-size: var(--tablet-metadata-size);
    --meta-leading: var(--tablet-metadata-leading);
    --label-size: var(--tablet-section-label-size);
    --label-leading: var(--tablet-section-label-leading);
    --label-tracking: var(--tablet-section-label-tracking);
    --note-size: var(--tablet-note-size);
    --note-leading: var(--tablet-note-leading);
    --columns: var(--grid-2-columns);
    --margin: var(--grid-2-margin);
    --gap: var(--grid-2-gap);
    --lead-span: var(--grid-2-lead-span);
    --rail-span: var(--grid-2-rail-span);
    --card-span-1: var(--grid-2-card-span-1);
    --card-span-2: var(--grid-2-card-span-1);
    --card-span-3: var(--grid-2-card-span-1);
  }
}

@media (min-width: 55rem) {
  :root {
    --body-size: var(--desktop-body-size);
    --body-leading: var(--desktop-body-leading);
    --deck-size: var(--desktop-deck-size);
    --deck-leading: var(--desktop-deck-leading);
    --h1-size: var(--desktop-h1-size);
    --h1-leading: var(--desktop-h1-leading);
    --h2-size: var(--desktop-h2-size);
    --h2-leading: var(--desktop-h2-leading);
    --h3-size: var(--desktop-h3-size);
    --h3-leading: var(--desktop-h3-leading);
    --meta-size: var(--desktop-metadata-size);
    --meta-leading: var(--desktop-metadata-leading);
    --label-size: var(--desktop-section-label-size);
    --label-leading: var(--desktop-section-label-leading);
    --label-tracking: var(--desktop-section-label-tracking);
    --note-size: var(--desktop-note-size);
    --note-leading: var(--desktop-note-leading);
    --mark-size: var(--h2-leading);
    --columns: var(--grid-3-columns);
    --margin: var(--grid-3-margin);
    --gap: var(--grid-3-gap);
    --lead-span: var(--grid-3-lead-span);
    --rail-span: var(--grid-3-rail-span);
    --card-span-1: var(--grid-3-card-span-1);
    --card-span-2: var(--grid-3-card-span-1);
    --card-span-3: var(--grid-3-card-span-1);
    /* Vertical rules between columns only from this width (R11 section 4.2). */
    --column-rule: var(--rule-width);
  }
}

@media (min-width: 75rem) {
  :root {
    --columns: var(--grid-4-columns);
    --margin: var(--grid-4-margin);
    --gap: var(--grid-4-gap);
    --lead-span: var(--grid-4-lead-span);
    --rail-span: var(--grid-4-rail-span);
    --card-span-1: var(--grid-4-card-span-1);
    --card-span-2: var(--grid-4-card-span-2);
    --card-span-3: var(--grid-4-card-span-3);
  }
}

/* ------------------------------------------------------------------------
   Page
   ------------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-reading);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  font-weight: var(--font-utility-metadata-weight);
  text-align: var(--text-align);
  overflow-wrap: break-word;
}

a { color: var(--link); text-decoration: underline; text-decoration-thickness: var(--rule-width); }
a:visited { color: var(--accent); }
a:hover { text-decoration-thickness: var(--focus-outline); }

:focus-visible {
  outline: var(--focus-outline) solid var(--ink);
  outline-offset: var(--focus-outline);
}

img, svg { max-inline-size: 100%; block-size: auto; }

.wrap {
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--margin);
}

main { display: block; padding-block-end: var(--gap); }
main:focus { outline: none; }

.visually-hidden {
  position: absolute;
  inline-size: var(--rule-width);
  block-size: var(--rule-width);
  margin: calc(-1 * var(--rule-width));
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--margin);
  inset-block-start: 0;
  transform: translateY(-120%);
  padding: 0.5em 1em;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-utility);
  font-size: var(--meta-size);
  font-weight: var(--font-utility-label-weight);
  z-index: 2;
}
.skip-link:focus { transform: none; }
.skip-link:visited { color: var(--paper); }

.test-notice {
  margin: 0;
  padding: 0.5em var(--margin);
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-utility);
  font-size: var(--note-size);
  line-height: var(--note-leading);
}

.notice {
  margin-block: 1em;
  padding: 0.75em 1em;
  border: var(--rule-width) solid var(--rule);
  border-inline-start: var(--transcript-edge) solid var(--accent);
  font-family: var(--font-utility);
  font-size: var(--meta-size);
  line-height: var(--meta-leading);
}

.muted { color: var(--muted); }

/* ------------------------------------------------------------------------
   Masthead: the mark, the dates, the navigation. Initial height within
   --masthead-initial-max; it does not follow the reader down the page.
   ------------------------------------------------------------------------ */

.masthead {
  font-family: var(--font-utility);
  font-size: var(--meta-size);
  line-height: var(--meta-leading);
}

/* The double rule under the nameplate (document 13 section 4): two lines of
   --double-rule-line with --double-rule-gap between them. Borders, not a
   "double" border style, whose line widths the browser divides as it likes. */
.masthead::after {
  content: "";
  display: block;
  block-size: calc(2 * var(--double-rule-line) + var(--double-rule-gap));
  border-block: var(--double-rule-line) solid var(--double-rule-color);
}

.masthead__inner {
  display: grid;
  grid-template-areas: "brand" "dates" "nav";
  align-items: center;
  padding-block: 0.25em 0;
}

.masthead__brand { grid-area: brand; justify-self: start; display: block; color: var(--ink); }
.masthead__brand:visited { color: var(--ink); }
.masthead__mark { display: block; block-size: var(--mark-size); inline-size: auto; }

.masthead__dates { grid-area: dates; margin: 0; color: var(--muted); }
.masthead__dates time:first-child { color: var(--ink); font-weight: var(--font-utility-label-weight); }
.masthead__today::before { content: " · "; }
/* On a phone the line keeps only the edition's own date, so the header stays
   within --masthead-initial-max; the publish date is on the edition page. */
.masthead__today { display: none; }
@media (min-width: 40rem) { .masthead__today { display: inline; } }

.masthead__nav { grid-area: nav; }
.masthead__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.masthead__nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
  color: var(--ink);
  font-weight: var(--font-utility-label-weight);
  text-decoration: none;
}
.masthead__nav a:hover { text-decoration: underline; }

@media (min-width: 55rem) {
  .masthead__inner {
    grid-template-areas: "brand nav" "dates nav";
    grid-template-columns: auto 1fr;
    column-gap: var(--gap);
  }
  .masthead__nav { justify-self: end; }
}

/* ------------------------------------------------------------------------
   Shared text pieces
   ------------------------------------------------------------------------ */

.page-title {
  margin-block: 0.5em 0.25em;
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--h2-size);
  line-height: var(--h2-leading);
}

.lede {
  max-inline-size: var(--measure);
  font-size: var(--deck-size);
  line-height: var(--deck-leading);
  color: var(--ink-soft);
}

.eyebrow {
  margin: 0 0 0.5em;
  font-family: var(--font-utility);
  font-size: var(--meta-size);
  line-height: var(--meta-leading);
  font-weight: var(--font-utility-label-weight);
  color: var(--muted);
}

.rule-heading {
  margin: 1em 0 0.75em;
  padding-block-start: 0.5em;
  border-block-start: var(--rule-width) solid var(--rule);
  font-family: var(--font-utility);
  font-size: var(--meta-size);
  line-height: var(--meta-leading);
  font-weight: var(--font-utility-label-weight);
  color: var(--muted);
}

.rule-heading__note { font-weight: var(--font-utility-metadata-weight); }
.rule-heading__note::before { content: " · "; }

.section-label {
  margin: 0 0 0.25em;
  font-family: var(--font-condensed);
  font-size: var(--label-size);
  line-height: var(--label-leading);
  letter-spacing: var(--label-tracking);
  color: var(--accent);
}
.section-label--caps { text-transform: uppercase; letter-spacing: var(--uppercase-tracking); }

.story-title {
  margin: 0 0 0.25em;
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--card-title-size);
  line-height: var(--h3-leading);
}
.story-title a { color: var(--ink); text-decoration: none; }
.story-title a:visited { color: var(--ink); }
.story-title a:hover { text-decoration: underline; }
.story-title--lead { font-size: var(--h1-size); line-height: var(--h1-leading); }
.story-title__level { display: block; }
/* The main level in capitals, however it was printed: on the front page, in
   the edition list, at the head of the article page and in search. A display
   rule, not a correction: the HTML carries the stored text, and the
   transcription title and the levels under the main one keep the printed case
   (operator decision of 2026-09-25, document 13 section 2). */
.story-title__level:first-child { text-transform: var(--title-main-case); }

/* The small levels of a 1926 title, from the second on, in the condensed face
   at the H3 size, in the case they were printed in (document 13 section 2). */
.story-title__level + .story-title__level,
.transcript__title-level + .transcript__title-level {
  font-family: var(--font-condensed);
  font-size: var(--h3-size);
  line-height: var(--h3-leading);
}
/* In a card of the front page or the list, each on its own line under the
   main level, at the deck size; the lead keeps the H3 size (document 13
   section 2). */
.card:not(.card--lead) .story-title__level + .story-title__level,
.search-results .story-title__level + .story-title__level {
  font-size: var(--deck-size);
  line-height: var(--deck-leading);
}

/* The newspaper, small, right under the section label (document 13 section 7). */
.card__publication {
  margin: 0 0 0.25em;
  font-family: var(--font-utility);
  font-size: var(--meta-size);
  line-height: var(--meta-leading);
  color: var(--muted);
}

.clarifier {
  margin: 0 0 0.5em;
  font-style: italic;
  color: var(--ink-soft);
  max-inline-size: var(--measure);
}

.deck {
  margin: 0 0 0.5em;
  max-inline-size: var(--measure);
  font-size: var(--deck-size);
  line-height: var(--deck-leading);
  color: var(--ink-soft);
}
.card .deck { font-size: var(--body-size); line-height: var(--body-leading); }
.card--lead .deck { font-size: var(--deck-size); line-height: var(--deck-leading); }

.credit {
  margin: 0 0 0.5em;
  font-family: var(--font-utility);
  font-size: var(--meta-size);
  line-height: var(--meta-leading);
  color: var(--muted);
}
.credit__publication { font-style: normal; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--target-min);
  min-inline-size: var(--target-min);
  padding: 0 1em;
  border: var(--rule-width) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-utility);
  font-size: var(--meta-size);
  font-weight: var(--font-utility-label-weight);
  line-height: var(--meta-leading);
  cursor: pointer;
}
.button--primary { background: var(--accent); border-color: var(--accent); color: var(--paper); }

input[type="email"], input[type="search"], input[type="date"] {
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  min-block-size: var(--target-min);
  padding: 0 0.5em;
  border: var(--rule-width) solid var(--ink-soft);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-utility);
  font-size: var(--body-size);
}

/* ------------------------------------------------------------------------
   Edition page: the front page grid and the edition list (R11 section 4)
   ------------------------------------------------------------------------ */

.front__grid,
.edition-grid {
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  gap: var(--gap);
}

.card { margin: 0; }
.card--lead { grid-column: span var(--lead-span); }

.front__rail {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  align-content: start;
}

.front__texture { grid-column: 1 / -1; }

/* One column: everything in running order. Two: the rail cards sit side by
   side (cards one column each). Four and seven: the two secondary items form
   the rail beside the lead, with a vertical rule, and the visual texture item
   sits under the lead. */
@media (min-width: 40rem) {
  .front__rail { grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); grid-column: 1 / -1; }
  .front__rail > .card { grid-column: span var(--rail-span); }
}
@media (min-width: 55rem) {
  /* The rail spans both rows; the second row takes what the rail adds, so the
     texture item sits right under the lead. */
  .front__grid { grid-template-rows: auto 1fr; }
  .card--lead { grid-column: 1 / span var(--lead-span); grid-row: 1; }
  .front__rail {
    grid-template-columns: minmax(0, 1fr);
    grid-column: span calc(var(--columns) - var(--lead-span));
    grid-row: 1 / span 2;
    padding-inline-start: var(--gap);
    border-inline-start: var(--column-rule) solid var(--rule);
  }
  .front__rail > .card { grid-column: auto; }
  .front__rail > .card + .card { padding-block-start: var(--gap); border-block-start: var(--rule-width) solid var(--rule); }
  .front__texture {
    grid-column: 1 / span var(--lead-span);
    grid-row: 2;
    padding-block-start: var(--gap);
    border-block-start: var(--rule-width) solid var(--rule);
  }
}

.in-edition {
  margin-block: var(--gap);
  padding-block: 0.5em;
  border-block: var(--rule-width) solid var(--rule);
}
.in-edition ul, .edition-nav ul, .story-nav ul, .site-footer ul, .calendar-nav ul, .year-list ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5em;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-utility);
  font-size: var(--meta-size);
  line-height: var(--meta-leading);
}
.in-edition a, .edition-nav a, .story-nav a, .site-footer a, .calendar-nav a, .year-list a,
.calendar-nav__off {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
}

.edition-grid {
  margin: 0;
  padding: 0;
  list-style: none;
}
.edition-grid__item { grid-column: span var(--card-span-1); }
@media (min-width: 55rem) {
  .edition-grid__item { padding-block-start: var(--gap); border-block-start: var(--rule-width) solid var(--rule); }
}
@media (min-width: 75rem) {
  .edition-grid__item:nth-child(3n + 2) { grid-column: span var(--card-span-2); }
  .edition-grid__item:nth-child(3n + 3) { grid-column: span var(--card-span-3); }
}

.day-notes { margin-block: var(--gap); }
.day-notes dl { margin: 0; font-family: var(--font-utility); font-size: var(--meta-size); line-height: var(--meta-leading); }
.day-notes dt { font-weight: var(--font-utility-label-weight); }
.day-notes dd { margin: 0 0 0.5em; }

.edition-nav { margin-block: var(--gap); padding-block-start: 0.5em; border-block-start: var(--rule-width) solid var(--rule); }

/* ------------------------------------------------------------------------
   Headline band
   ------------------------------------------------------------------------ */

.headline-band { margin-block: 1em; padding-block-start: 0.5em; border-block-start: var(--rule-width) solid var(--rule); }
.headline-band__list { margin: 0; padding: 0; list-style: none; }
.headline-band__list li { margin-block-end: 0.5em; }
/* The band's titles in capitals, like the main level (operator decision of
   2026-09-25, document 13 section 2); a title whose article image is stored
   with us opens it large. Since the operator decision of 2026-09-26 (document
   13 section 6) such a title carries a discreet dotted underline without hover,
   so that a phone shows it too, solid on hover; a title without an image is
   not a link and has none. */
.headline-band__title { display: block; font-family: var(--font-condensed); font-size: var(--h3-size); line-height: var(--h3-leading); color: var(--ink); text-transform: var(--title-main-case); }
.headline-band .zoomable { text-decoration: none; }
.headline-band .zoomable .headline-band__title { text-decoration-line: underline; text-decoration-style: var(--band-link-underline-style); text-decoration-thickness: var(--band-link-underline-thickness); text-decoration-color: var(--band-link-underline-color); text-underline-offset: var(--band-link-underline-offset); }
.headline-band .zoomable:hover .headline-band__title { text-decoration-style: var(--band-link-underline-hover-style); }
.headline-band__paper { font-family: var(--font-utility); font-size: var(--meta-size); color: var(--muted); font-style: normal; }

/* ------------------------------------------------------------------------
   Newsletter
   ------------------------------------------------------------------------ */

.newsletter {
  margin-block: var(--gap);
  padding: var(--gap) var(--margin);
  border: var(--rule-width) solid var(--rule);
  max-inline-size: var(--measure);
}
.newsletter__title {
  margin: 0 0 0.25em;
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--card-title-size);
  line-height: var(--h3-leading);
}
.newsletter__form { display: grid; gap: 0.5em; }
.newsletter__label { font-family: var(--font-utility); font-weight: var(--font-utility-label-weight); font-size: var(--meta-size); }
.newsletter__privacy, .newsletter__error { margin: 0; font-family: var(--font-utility); font-size: var(--meta-size); line-height: var(--meta-leading); }
.newsletter__privacy { color: var(--muted); }
.newsletter__error { color: var(--accent); font-weight: var(--font-utility-label-weight); }
.newsletter__done { font-family: var(--font-utility); font-size: var(--meta-size); font-weight: var(--font-utility-label-weight); }
.newsletter .button { inline-size: 100%; }
@media (min-width: 40rem) { .newsletter .button { inline-size: auto; justify-self: start; } }

/* ------------------------------------------------------------------------
   Article page: one column of at most --measure
   ------------------------------------------------------------------------ */

.story { max-inline-size: var(--measure); }
.story__header { margin-block: 1em; }
.story__kicker { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1em; }
.story__date { margin: 0 0 0.25em; font-family: var(--font-utility); font-size: var(--meta-size); line-height: var(--meta-leading); color: var(--muted); }
.story .story-title--lead { margin-block: 0.25em; }

/* The context box (document 13 section 7): the label above it links to How
   we work; inside, on the background of the former reproduction box, the
   summary in italics, then the critical context. */
.context { margin-block: var(--gap); }
.context__label {
  margin: 0;
  font-family: var(--font-utility);
  font-size: var(--meta-size);
  line-height: var(--meta-leading);
  font-weight: var(--font-utility-label-weight);
}
.context__label a { display: inline-flex; align-items: center; min-block-size: var(--target-min); color: var(--link); }
.context__box {
  padding: var(--gap) var(--margin);
  background: var(--context-background);
  color: var(--ink);
}
.context__box p { margin: 0 0 1em; }
.context__box p:last-child { margin-block-end: 0; }
.context__summary { font-style: italic; font-size: var(--deck-size); line-height: var(--deck-leading); }

.prose p { margin: 0 0 1em; }
.prose h2 {
  margin: 1.5em 0 0.5em;
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--card-title-size);
  line-height: var(--h3-leading);
}
.page { max-inline-size: var(--measure); }
.page blockquote { margin: 1em 0; padding-inline-start: 1em; border-inline-start: var(--transcript-edge) solid var(--rule); }

/* The transcription (skill component 2): no box and no background, set apart
   by its type and its label only (docs/01 section 4, document 13 section 7).
   It opens with the label, the "i" beside it, then the original title, every
   level, then the text. */
.transcript { margin-block: var(--gap); color: var(--ink); }
.transcript__label-row {
  position: relative;
  display: flex;
  align-items: center;
  column-gap: 0.25em;
  margin-block-end: 0.5em;
}
.transcript__label {
  flex: 0 1 auto;
  margin: 0;
  font-family: var(--font-utility);
  font-size: var(--meta-size);
  line-height: var(--meta-leading);
  font-weight: var(--font-utility-label-weight);
  color: var(--muted);
}
.transcript__title { margin: 0 0 0.75em; font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: var(--card-title-size); line-height: var(--h3-leading); }
.transcript__title-level { display: block; }
.transcript__body {
  font-family: var(--font-reading);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  max-inline-size: var(--measure);
  text-align: var(--text-align);
}
.transcript__body p { margin: 0 0 1em; }

/* An illegible word, in the transcription and in a title wherever it is shown
   (operator decision of 2026-09-26, document 13 section 7): "[illegible]" in
   the metadata style, small and grey, in lowercase even inside a level set in
   capitals. It is text of ours, not of 1926, so it takes the utility face. A
   screen reader reads it where the word stood. */
.illegible {
  font-family: var(--font-utility);
  font-size: var(--meta-size);
  font-style: normal;
  font-weight: var(--font-utility-metadata-weight);
  text-transform: none;
  color: var(--muted);
}

/* The "i" and the permanent note under it (document 13 section 7). The note
   opens on hover where the pointer can hover, on a tap and from the keyboard
   (site.js), under the label row, over the text; Escape closes it. Without
   the script it still opens on hover and on keyboard focus. */
.info { display: inline-flex; flex: none; }
/* The target keeps --target-min on both sides; in the row it takes only the
   icon's width, so the icon stays beside the label on a phone. */
.info__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--target-min);
  min-inline-size: var(--target-min);
  margin-inline: calc((var(--info-icon-size) - var(--target-min)) / 2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  cursor: pointer;
}
.info__icon { display: block; inline-size: var(--info-icon-size); block-size: var(--info-icon-size); }
.info__note {
  position: absolute;
  inset-block-start: 100%;
  inset-inline: 0;
  z-index: 1;
  margin: 0;
  padding: 0.75em 1em;
  max-inline-size: var(--measure);
  background: var(--info-note-background);
  border: var(--rule-width) solid var(--info-note-border);
  color: var(--ink);
  font-family: var(--font-utility);
  font-size: var(--note-size);
  line-height: var(--note-leading);
}
@media (hover: hover) {
  .info:not([data-dismissed]):hover .info__note { display: block; }
}
.info:not([data-ready]) .info__button:focus-visible + .info__note { display: block; }

/* The scanned page (skill reference viewer.md). */
.scan { margin: var(--gap) 0; }
.scan__activate {
  display: grid;
  gap: 0.5em;
  inline-size: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font-family: var(--font-utility);
  font-size: var(--meta-size);
  font-weight: var(--font-utility-label-weight);
  text-align: start;
  cursor: zoom-in;
}
.scan__activate[hidden] { display: none; }
.scan__frame { display: block; position: relative; }
.scan__poster { display: block; inline-size: 100%; block-size: auto; border: var(--image-border) solid var(--image-border-color); }
.scan__open { text-decoration: underline; }
.scan__caption { margin-block-start: var(--image-caption-gap); font-family: var(--font-utility); font-size: var(--meta-size); line-height: var(--meta-leading); color: var(--muted); }
.scan__controls { display: flex; flex-wrap: wrap; gap: 0.5em; margin-block: 0.5em; }
.scan__controls[hidden] { display: none; }
.scan__controls button {
  min-block-size: var(--target-min);
  min-inline-size: var(--target-min);
  padding: 0 0.75em;
  border: var(--rule-width) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-utility);
  font-size: var(--meta-size);
  font-weight: var(--font-utility-label-weight);
  cursor: pointer;
}
.scan__controls button[hidden] { display: none; }
.scan__viewer {
  block-size: var(--viewer-min-height);
  min-block-size: var(--viewer-min-height-phone);
  border: var(--image-border) solid var(--image-border-color);
  background: var(--paper-deep);
}
.scan__viewer[hidden] { display: none; }
.scan__highlight { outline: var(--focus-outline) solid var(--accent); }
.scan-missing { font-family: var(--font-utility); font-size: var(--meta-size); color: var(--muted); }

/* A photograph (docs/02 section 4, item 5): border and caption gap from
   document 13; the docs/12 section 7 label sits in the frame, over the image,
   never baked into it. Captions under 23 px are in the reading face (doc 13). */
.photo { margin: var(--gap) 0; }
.photo__frame { position: relative; }
.photo__image { display: block; inline-size: 100%; block-size: auto; border: var(--image-border) solid var(--image-border-color); }
.photo__label,
.scan__label {
  display: block;
  position: absolute;
  inset-block-start: var(--label-inset);
  inset-inline-start: var(--label-inset);
  margin: 0;
  padding: var(--label-padding-block) var(--label-padding-inline);
  background: var(--label-background);
  color: var(--label-text);
  font-family: var(--font-utility);
  font-weight: var(--font-utility-label-weight);
  font-size: var(--meta-size);
  line-height: var(--meta-leading);
  letter-spacing: var(--uppercase-tracking);
}
/* In the open viewer the label is a viewer control, so it stays in full screen. */
.scan__label--viewer { position: static; margin: var(--label-inset); }
.photo__caption { margin-block-start: var(--image-caption-gap); }
.photo__legend { display: block; font-family: var(--font-reading); font-size: var(--meta-size); line-height: var(--meta-leading); }
.photo__credit { display: block; margin-block-start: 0.25em; font-family: var(--font-utility); font-size: var(--meta-size); line-height: var(--meta-leading); color: var(--muted); }

/* An image with its label in the frame (document 13 section 7): the card
   photograph and the period visual material. Same border, caption gap and
   label as the article's photograph. */
.frame { position: relative; }
.frame__image { display: block; inline-size: 100%; block-size: auto; border: var(--image-border) solid var(--image-border-color); }
.frame__label {
  position: absolute;
  inset-block-start: var(--label-inset);
  inset-inline-start: var(--label-inset);
  margin: 0;
  padding: var(--label-padding-block) var(--label-padding-inline);
  background: var(--label-background);
  color: var(--label-text);
  font-family: var(--font-utility);
  font-weight: var(--font-utility-label-weight);
  font-size: var(--meta-size);
  line-height: var(--meta-leading);
}
/* Period visual material (operator decision of 2026-09-25): the label on a
   band of its own under the image, aligned left, inside the border, which
   moves from the image to the frame; nothing of the image is covered. */
.frame--band { border: var(--image-border) solid var(--image-border-color); }
.frame--band .frame__image { border: 0; }
.frame__band {
  margin: 0;
  padding: var(--label-padding-block) var(--label-padding-inline);
  background: var(--label-background);
  color: var(--label-text);
  font-family: var(--font-utility);
  font-weight: var(--font-utility-label-weight);
  font-size: var(--meta-size);
  line-height: var(--meta-leading);
  text-align: start;
}
/* An image that opens large (operator decision of 2026-09-25; document 13
   section 6): a link around the picture, and the dialog it opens. */
.zoomable { display: block; color: inherit; cursor: zoom-in; }
.zoomable picture { display: block; }
.zoom-dialog {
  inline-size: calc(100% - 2 * var(--margin));
  max-inline-size: var(--container-max);
  max-block-size: calc(100% - 2 * var(--margin));
  padding: var(--margin);
  border: var(--image-border) solid var(--image-border-color);
  background: var(--paper);
  color: var(--ink);
}
.zoom-dialog::backdrop { background: var(--label-background); }
.zoom-dialog__bar { display: flex; justify-content: flex-end; margin-block-end: 0.5em; }
.zoom-dialog__stage { display: flex; justify-content: center; }
.zoom-dialog__image {
  display: block;
  inline-size: auto;
  block-size: auto;
  max-inline-size: 100%;
  max-block-size: var(--viewer-min-height);
}
/* With the magnifier the dialog fills the screen, less the grid margin, and
   the viewer takes what the bar, the controls and the caption leave. */
.zoom-dialog--magnifier[open] {
  display: flex;
  flex-direction: column;
  block-size: calc(100% - 2 * var(--margin));
}
.zoom-dialog--magnifier .zoom-dialog__stage { flex: 1 1 auto; min-block-size: 0; }
.zoom-dialog__viewer {
  inline-size: 100%;
  block-size: 100%;
  background: var(--paper-deep);
}
.zoom-dialog__controls[hidden] { display: none; }
.zoom-dialog__caption {
  margin: var(--image-caption-gap) 0 0;
  font-family: var(--font-utility);
  font-size: var(--meta-size);
  line-height: var(--meta-leading);
  color: var(--muted);
}
.card-photo { margin: 0.5em 0; }
.card-photo__credit,
.period-visual__caption { margin-block-start: var(--image-caption-gap); }
.card-photo__credit { font-family: var(--font-utility); font-size: var(--meta-size); line-height: var(--meta-leading); color: var(--muted); }
.period-visual { margin: 0; }
/* The context note of a visual sits right above it, in the item's own cell. */
.period-visual-item > .context { margin-block-start: 0; }
.front__texture > * + * { margin-block-start: var(--gap); }

/* The time bridge: folded, one visible line (docs/02 section 4, item 9). */
.bridge { margin-block: var(--gap); border-block: var(--rule-width) solid var(--rule); }
.bridge__summary {
  display: flex;
  align-items: center;
  min-block-size: var(--target-min);
  font-family: var(--font-utility);
  font-weight: var(--font-utility-label-weight);
  font-size: var(--body-size);
  cursor: pointer;
}
.bridge__body { padding-block-end: 0.5em; }
.bridge__sources { font-family: var(--font-utility); font-size: var(--meta-size); line-height: var(--meta-leading); }

.correction, .source { margin-block: var(--gap); }

.story-nav { margin-block: var(--gap); padding-block-start: 0.5em; border-block-start: var(--rule-width) solid var(--rule); }
.story-nav ul { flex-direction: column; }
.story-nav__label { font-weight: var(--font-utility-label-weight); margin-inline-end: 0.5em; }

/* ------------------------------------------------------------------------
   Archive calendar (R11 section 4.3)
   ------------------------------------------------------------------------ */

.archive-tools { display: grid; gap: 0.5em; margin-block: 1em; }
.calendar-nav__off { color: var(--muted); }
.date-form, .search-form { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5em; font-family: var(--font-utility); font-size: var(--meta-size); }
.date-form label, .search-form label { inline-size: 100%; font-weight: var(--font-utility-label-weight); }
.date-form input, .search-form input { flex: 1 1 auto; inline-size: auto; }
@media (min-width: 40rem) { .date-form input, .search-form input { flex: 0 1 auto; } }
.year-list a[aria-current] { font-weight: var(--font-utility-label-weight); color: var(--ink); }

.calendar-title { margin: 1em 0 0.5em; font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: var(--card-title-size); line-height: var(--h3-leading); }
/* The calendar is a table of seven columns of --calendar-cell-min: on a
   screen narrower than that, it scrolls inside its own box and the page does
   not (a two-dimensional table is the WCAG 1.4.10 exception). */
.calendar-scroll { position: relative; max-inline-size: 100%; overflow-x: auto; }
.calendar {
  border-collapse: separate;
  border-spacing: var(--calendar-gap);
  font-family: var(--font-utility);
  font-size: var(--meta-size);
  line-height: var(--meta-leading);
}
.calendar th { font-size: var(--meta-size); font-weight: var(--font-utility-label-weight); color: var(--muted); }
.calendar abbr { text-decoration: none; }
.calendar__day { padding: 0; text-align: center; }
.calendar__day > a, .calendar__day > span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--calendar-cell-min);
  min-block-size: var(--calendar-cell-min);
}
.calendar__day--available > a { border: var(--rule-width) solid var(--ink); color: var(--link); font-weight: var(--font-utility-label-weight); }
.calendar__day--current > a { border-width: var(--focus-outline); border-style: double; }
.calendar__day--none > span, .calendar__day--future > span { color: var(--muted); }
.calendar-legend { font-family: var(--font-utility); font-size: var(--meta-size); line-height: var(--meta-leading); max-inline-size: var(--measure); }
.calendar-legend__sample { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--target-min); margin-inline-end: 0.5em; color: var(--muted); }
.calendar-legend__sample--available { border: var(--rule-width) solid var(--ink); color: var(--link); text-decoration: underline; }

/* ------------------------------------------------------------------------
   Search, tables, footer
   ------------------------------------------------------------------------ */

.search-count { font-family: var(--font-utility); font-size: var(--meta-size); }
.search-results { margin: 0; padding: 0; list-style: none; max-inline-size: var(--measure); }
.search-results li { padding-block: 1em; border-block-start: var(--rule-width) solid var(--rule); }

.plain-table { border-collapse: collapse; font-family: var(--font-utility); font-size: var(--meta-size); line-height: var(--meta-leading); margin-block-end: 1em; }
.plain-table th, .plain-table td { padding: 0.5em; border-block-end: var(--rule-width) solid var(--rule); text-align: start; vertical-align: top; }

.site-footer {
  margin-block-start: var(--gap);
  padding-block: var(--gap);
  border-block-start: calc(3 * var(--rule-width)) double var(--rule);
  font-family: var(--font-utility);
  font-size: var(--meta-size);
  line-height: var(--meta-leading);
  color: var(--ink-soft);
}
.site-footer p { max-inline-size: var(--measure); }

/* Increased contrast and forced colours: the texture is already off
   (tokens.css); the notices keep a visible edge. */
@media (forced-colors: active) {
  .test-notice, .button--primary { border: var(--rule-width) solid; }
}

@media print {
  .masthead__nav, .in-edition, .edition-nav, .story-nav, .scan__controls, .scan__open,
  .test-notice, .skip-link, .newsletter { display: none !important; }
  .bridge { border: 0; }
  .context__box { background: none; }
  .info__button { display: none; }
  .info__note { display: block; position: static; padding: 0; border: 0; }
}

/* Print stylesheet, from research/R11 section 8.
   The numbers match tokens.json, web.print. The faces are those of the site,
   the official combination of docs/13 section 2.2, through tokens.css. The
   paper stays white: browsers may drop backgrounds, and no reader should
   spend ink on cream.
   Security note: print CSS hides nothing and protects nothing. The server does
   not send the full transcription to a reader who is not entitled to it; the
   subscriber receives the markup and this sheet only reformats it. */

@page {
  size: letter portrait;
  margin: 0.45in 0.4in 0.55in;
}

@media print {
  html,
  body {
    background: #fff !important;
    color: #000 !important;
  }

  body {
    margin: 0;
    font-family: var(--font-reading);
    font-size: 9.5pt;
    line-height: 1.32;
  }

  .site-nav,
  .site-footer,
  .paywall,
  .newsletter,
  .scan-toolbar,
  .share-tools,
  .sticky-cta,
  .no-print {
    display: none !important;
  }

  .print-edition {
    display: block;
  }

  .article-header,
  .source-credit,
  .credit,
  .modern-context,
  figure {
    column-span: all;
  }

  .article-body {
    max-width: none;
    columns: 2 3.2in;
    column-gap: 0.28in;
    column-rule: 0.5pt solid #666;
    orphans: 3;
    widows: 3;
  }

  h1 {
    margin: 0 0 10pt;
    font-family: var(--font-display);
    font-size: 30pt;
    line-height: 1;
  }

  h2 { font-size: 17pt; line-height: 1.1; }
  h3 { font-size: 12pt; line-height: 1.15; }

  h1,
  h2,
  h3,
  figure,
  blockquote,
  .editor-note,
  .info__note {
    break-inside: avoid;
  }

  p { margin: 0 0 6pt; }

  a {
    color: #000;
    text-decoration: none;
  }

  img {
    max-width: 100% !important;
    height: auto !important;
  }

  .scan__viewer { display: none !important; }
  .scan__print-thumbnail { display: block !important; }
}

/* Tabloid, on the separate ?print=tabloid route. It does not replace Letter. */
@page newspaper {
  size: 11in 17in;
  margin: 0.5in;
}

@media print {
  .print-tabloid {
    page: newspaper;
  }

  .print-tabloid .article-body {
    columns: 4 2.25in;
    column-gap: 0.25in;
  }
}