/*
 * components-article.css
 * Owner: ARTICLE-TEMPLATES (rar-broadsheet theme)
 * Scope: article/dossier presentation -- folio echo rows, kicker, headline,
 * deck, Oxford rule, byline row, press-photo seating, justified body with
 * drop cap, crossheads, rebuttal exhibits, sources band, marginalia,
 * archive/search teaser lists, typed navigation lines, typed search form,
 * search/404 typewriter register.
 *
 * NOT here (other owners): halftone + color snap, press-photo border and
 * figcaption type, torn slip, all motion (FX, components-fx.css); masthead
 * and nav (masthead part + components-masthead.css); wire-feed masonry and
 * lead band (FRONT-PAGE, components-front.css); clip-share strip visuals
 * (PLUGIN-CORE / ICONS-CARTOONS).
 *
 * Deconfliction with components-front.css (shared registry classes):
 * - .rar-teaser list rules here are scoped to post templates WITHOUT the
 *   .rar-wire-feed class, so the front-page masonry never sees them and
 *   the archive list wins deterministically regardless of enqueue order.
 * - ALL .rar-kicker and .rar-deck rules are scoped to the .rar-article
 *   context (the class on <main> in every article-side template: single,
 *   page, page-dossier, archive, search, 404, index). front-page.html has
 *   no .rar-article, so its lead-band decks, h2.rar-kicker section head,
 *   and teaser kickers can never be restyled from this file (P2 fix;
 *   .rar-article is a scope-class addition for the registry, section 5).
 * - .rar-kicker / .rar-headline centering applies only to direct children
 *   of the article main (the article header position), never inside
 *   teasers.
 * - div.rar-more-line dresses the single-post navigation row; FRONT-PAGE
 *   owns nav.rar-more-line (query pagination) and p.rar-more-line.
 *
 * Note on .rar-rule-oxford: DESIGN-SYSTEM section 3 says implement once.
 * It is implemented here for the hr.rar-rule-oxford separator these
 * templates use; if THEME-CORE also ships it in style.css, dedupe at
 * Gate A (both follow the same spec: 3px rule + 3px gap + 1px rule).
 *
 * House rules honored: nothing from the DESIGN-SYSTEM section 9 banned
 * list appears in this file; all motion belongs to FX; palette limited to
 * paper/paper-slip/paper-shade/ink/red preset variables.
 */

:root {
  --rar-ink: var(--wp--preset--color--ink, #1a1712);
  --rar-red: var(--wp--preset--color--red, #8c1f13);
  --rar-paper: var(--wp--preset--color--paper, #f4efe4);
  --rar-paper-slip: var(--wp--preset--color--paper-slip, #faf6ea);
  --rar-paper-shade: var(--wp--preset--color--paper-shade, #eae3d2);
  --rar-face-head: "Libre Caslon Display", "Playfair Display", Georgia, serif;
  --rar-face-body: "Old Standard TT", "PT Serif", Georgia, serif;
  --rar-face-courier: "Courier Prime", "Courier New", Courier, monospace;
  --rar-face-gothic: "Oswald", "Archivo Narrow", "Arial Narrow", sans-serif;
}

/* ------------------------------------------------------------------ */
/* Folio echo row: Courier page furniture under the masthead          */
/* ------------------------------------------------------------------ */

.rar-folio-echo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 21px;
  font-family: var(--rar-face-courier);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rar-ink);
  border-bottom: 1px solid var(--rar-ink);
  padding: 8px 0;
  margin: 13px 0 26px;
}

.rar-folio-echo p {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
}

/* The rar/jump-line echo block emits its own div.rar-folio-echo; when it
   sits inside the template's folio-echo group (or a content-authored
   byline row) it is a line item, not a second ruled band. */
.rar-folio-echo .rar-folio-echo,
.rar-byline-row .rar-folio-echo {
  border-bottom: 0;
  padding: 0;
  margin: 0;
  font-weight: 700;
}

/* Archive head: the queried category name rides inside the folio row */
.rar-folio-echo .wp-block-query-title {
  margin: 0;
  font-family: var(--rar-face-courier);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* Kicker (category label, red). Scoped to .rar-article so front-page  */
/* kickers (lead band, h2 section head, wire teasers) are untouched.   */
/* ------------------------------------------------------------------ */

.rar-article .rar-kicker {
  font-family: var(--rar-face-gothic);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rar-red);
}

/* Centered only in the article-header position (direct child of the
   article main); archive teaser context never has a kicker. */
.rar-article > .rar-kicker {
  text-align: center;
  margin: 21px 0 0;
}

.rar-article .rar-kicker a {
  color: inherit;
  text-decoration: none;
}

.rar-article .rar-kicker a:hover,
.rar-article .rar-kicker a:focus-visible {
  text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Headline and deck                                                  */
/* ------------------------------------------------------------------ */

.rar-headline {
  font-family: var(--rar-face-head);
  font-weight: 700;
  line-height: 0.98;
  color: var(--rar-ink);
  text-wrap: balance;
}

/* Sizing and centering only in the article-header position */
main > .rar-headline {
  font-size: clamp(28px, 4.5vw, 42px);
  text-align: center;
  margin: 8px auto 13px;
}

/* Dossiers get the wider ceremonial head (custom template page-dossier,
   renamed from page-record by amendment 13.3) */
.page-template-page-dossier main > .rar-headline {
  font-size: clamp(34px, 6vw, 56px);
  letter-spacing: -0.01em;
  margin-top: 13px;
}

/* Deck, scoped to .rar-article: the front-page lead band styles its own
   .rar-deck (components-front.css) and must not inherit this centering. */
.rar-article .rar-deck {
  font-family: var(--rar-face-head);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.35;
  color: var(--rar-ink);
  text-align: center;
  max-width: 60ch;
  margin: 0 auto 13px;
}

.rar-article .rar-deck p {
  margin: 0;
  font: inherit;
}

/* ------------------------------------------------------------------ */
/* Oxford rule: canonical recipe lives in style.css                   */
/* (.rar-rule-oxford: border-top 3px + 3px gap + ::after 1px, height  */
/* 7px total; Gate A dedupe per DESIGN-SYSTEM section 3 "implement    */
/* once"). This hr-scoped rule adds NO geometry: height, position,    */
/* and the ::after lower rule all come from the canonical class. What */
/* stays here only neutralizes core wp-block-separator styling at hr  */
/* specificity (its print order relative to style.css is not          */
/* guaranteed): the border reset repeats the canonical 3px value so a */
/* core "border-top: 2px" can never win, and background/opacity undo  */
/* the separator defaults. margin is article-local spacing.           */
/* ------------------------------------------------------------------ */

hr.rar-rule-oxford {
  border: 0;
  border-top: 3px solid var(--rar-ink); /* matches canonical; specificity armor only */
  width: 100%;
  max-width: 100%;
  background: none;
  opacity: 1;
  margin: 13px auto;
}

/* ------------------------------------------------------------------ */
/* Byline row: Courier, caps, centered                                */
/* ------------------------------------------------------------------ */

.rar-byline-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 8px;
  font-family: var(--rar-face-courier);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rar-ink);
  margin: 0 0 26px;
}

.rar-byline-row p {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
}

.rar-byline-row .wp-block-post-author-name {
  font-weight: 700;
}

.rar-byline-row a {
  color: inherit;
  text-decoration: none;
}

/* Generic Courier dateline (also used on archive teaser post-date) */
.rar-dateline {
  font-family: var(--rar-face-courier);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rar-ink);
}

/* ------------------------------------------------------------------ */
/* Press photo seating on article pages. The border, halftone, snap,   */
/* and figcaption type all belong to FX (components-fx.css).           */
/*                                                                     */
/* P7: block margins are the rhythm ladder's --rar-block, symmetric,   */
/* so the figure clears the copy above AND below it. components-fx.css */
/* no longer zeroes figure margins (it used to, at .rar-press-photo    */
/* specificity, which is what made every caption run flush into the    */
/* next paragraph). Side margins stay auto: on single.html and         */
/* page.html the featured cut is a direct child of the 1200px main and */
/* has to centre itself on the 72ch measure.                           */
/* ------------------------------------------------------------------ */

.rar-press-photo {
  font-family: var(--rar-face-body);
  font-size: 17px;
  /* The body measure below, but never wider than whatever contains it.
     A bare 72ch would overflow a 375px screen, and it would also outrank
     the plugin's own .rar-press-photo{max-width:100%} on the div and
     span wrappers content-media.css builds for legacy cuts (same
     specificity, theme enqueued later). min() satisfies both. */
  max-width: min(72ch, 100%);
  margin: var(--rar-block) auto;
}

/* ------------------------------------------------------------------ */
/* Body: one justified, hyphenated measure with a drop cap            */
/* ------------------------------------------------------------------ */

.rar-body {
  font-family: var(--rar-face-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--rar-ink);
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
}

/* PARAGRAPH RHYTHM AND THE INDENT RULING (P7).
 *
 * The owner's ruling for this round: "Margins between paragraphs and
 * other elements may not be newspaper style but we need them on this
 * website." Body copy used to run at margin 0 with a 1.5em first-line
 * indent -- correct 1972 broadsheet setting, and the thing the owner
 * asked to loosen.
 *
 * THE CHOICE, made once and recorded here: SPACED PARAGRAPHS, NO
 * INDENT. Spacing and indenting are two solutions to the same problem
 * (marking where one paragraph ends and the next begins) and running
 * both is a typographic error, so the indent is retired outright rather
 * than kept "only on unbroken runs" -- a conditional indent cannot be
 * expressed in CSS without knowing what precedes each paragraph, and a
 * rule the next editor cannot predict is worse than either setting.
 *
 * What survives from the print register: the copy is still justified,
 * still hyphenated, still on a 72ch measure, and the lede still takes
 * the three-line drop cap. The drop cap is now the ONLY paragraph
 * marker on the page, which is exactly the idiom a spaced-and-unindented
 * setting wants.
 *
 * Margin is bottom-only. Adjacent margins collapse in normal flow, so a
 * paragraph followed by a figure or a quotation resolves to the block
 * object's larger --rar-block / --rar-section value instead of summing
 * with it.
 */
.rar-body p {
  margin: 0 0 var(--rar-para);
  text-align: justify;
  text-indent: 0;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Drop cap on the lede: 3-line float, headline serif, ink */
.rar-body > p:first-of-type::first-letter {
  float: left;
  font-family: var(--rar-face-head);
  font-weight: 700;
  font-size: 3.4em;
  line-height: 0.75;
  padding: 8px 8px 0 0;
  color: var(--rar-ink);
}

.rar-body a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* FIGURES IN RUNNING COPY (P7 fix 3).
 *
 * Reported symptom: a figcaption's CREDIT line ran straight into the
 * next paragraph or crosshead with no gap at all. Diagnosis, measured on
 * staging: components-fx.css carried "figure.rar-press-photo{margin:0}"
 * at (0,1,1), which outranked BOTH this file's figure rule and core's
 * layout gap, so every cut in the body computed margin 0 top and bottom
 * while the caption below it carried only its own 8px. The zero is gone
 * from fx; the block margins are set here, symmetric, on the rhythm
 * ladder, and they cover all three figure shapes the site actually
 * serves: core image blocks (.wp-block-image), press cuts and cartoons
 * (.rar-press-photo / .rar-cartoon), and the classic-editor markup in
 * the legacy archive (figure.wp-caption).
 *
 * max-width is defensive: legacy classic-editor figures carry an inline
 * style="width:1200px" that no selector can outrank without !important.
 * max-width is a different property, so it wins the used-width
 * computation without one, and the cut folds back onto the measure.
 */
.rar-body figure {
  max-width: 100%;
  margin-top: var(--rar-block);
  margin-bottom: var(--rar-block);
}

/* Caption to the image it belongs to: one tight step, so the pair reads
 * as one object. Separation from what FOLLOWS is the figure's own bottom
 * margin above, never the caption's. Courier and 13px come from
 * style.css; fx sets the same pairing for press cuts and cartoons. Left,
 * not justified: .rar-body justifies, and a justified two-line Courier
 * credit tears itself apart. */
.rar-body figcaption,
.rar-article figcaption {
  margin: var(--rar-tight) 0 0;
  text-align: left;
  text-indent: 0;
}

/* Lists: block objects on the outside, one tight step between items so
 * a list still reads as a single unit. padding-left restates the UA
 * indent explicitly, because the markers have to clear the measure. */
.rar-body ul,
.rar-body ol {
  margin-top: var(--rar-block);
  margin-bottom: var(--rar-block);
  padding-left: 2em;
}

.rar-body li {
  margin-bottom: var(--rar-tight);
}

.rar-body li:last-child {
  margin-bottom: 0;
}

/* Untyped headings inside running copy. Crossheads are excluded by the
 * :not() so their own rule below governs them without needing a second,
 * higher-specificity restatement here: this selector is (0,2,1) and can
 * never match a crosshead, so .rar-crosshead at (0,1,0) stays the single
 * source of the crosshead's margins.
 *
 * A full section step above, one tight step below: the heading is bound
 * downward to the copy it introduces and cut loose from the copy above,
 * which is the whole job of a heading. text-align is reset because
 * .rar-body justifies and headings inherit it; a justified two-line head
 * sets with holes in it. */
.rar-body :is(h2, h3, h4):not(.rar-crosshead) {
  font-family: var(--rar-face-head);
  line-height: 1.1;
  margin: var(--rar-section) 0 var(--rar-lead);
  text-align: left;
}

/* ------------------------------------------------------------------ */
/* Quotations set with core/quote (P7 fix 2).                          */
/*                                                                     */
/* DESIGN-SYSTEM section 7 reserves the torn slip for pull quotes on    */
/* pages the build authored, and it holds: nothing here creates a       */
/* second slip. But the legacy archive predates the build and quotes    */
/* with core/quote (blockquote.wp-block-quote + cite) and, in the       */
/* oldest posts, with a bare classic-editor <blockquote>. Unstyled,     */
/* those inherited the body face at body size and kept only the user-   */
/* agent's 40px side margins and this file's paragraph indent, which is */
/* exactly what the owner saw: "oddly indented running text with no     */
/* visual distinction".                                                 */
/*                                                                     */
/* The treatment is the ratified pull-quote voice (DESIGN-SYSTEM        */
/* section 4: Special Elite, ink at 90 percent, ragged right, typed     */
/* quotation marks) in a different housing. The torn slip is a physical */
/* scrap laid ON the page; this is a quotation ruled INTO the column,   */
/* the way a broadsheet sets an extract: a 3px ink bar in the left      */
/* margin echoing the Oxford rule's heavy stroke, the quote hung off    */
/* it, attribution in Courier caps. Ink, never red -- red is budgeted   */
/* at three appearances per screen and is spent on kickers, rebuttal    */
/* hairlines and marginalia.                                            */
/*                                                                     */
/* margin-inline: 0 is load bearing. The UA's blockquote margin is      */
/* "1em 40px"; core's layout rule only ever replaces the BLOCK margins, */
/* so the 40px indent survived every previous rule in this theme.       */
/* ------------------------------------------------------------------ */

/* Two kinds of blockquote live in this archive and they want opposite  */
/* settings. A PULL QUOTE is one short sentence and takes the           */
/* typewriter voice. A QUOTED PASSAGE is several paragraphs lifted from */
/* another publication (the 2016 posts quote whole Detroit News and     */
/* Atlantic excerpts) and must stay comfortably READABLE: Special Elite */
/* at 19px over four paragraphs is a wall. Both keep the ink rule and   */
/* the same seating, so the page still reads as one system.             */
/*                                                                      */
/* The passage setting is the DEFAULT and the typewriter voice is the   */
/* exception, deliberately: where :has() is unsupported the whole       */
/* exception rule is dropped and every quotation falls back to the      */
/* readable passage, which is the safe direction to fail in.            */

.rar-body blockquote {
  margin: var(--rar-block) 0;
  padding: 0 0 0 26px;
  border-left: 3px solid var(--rar-ink);
  font-family: var(--rar-face-body, "Old Standard TT", Georgia, serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--rar-ink);
  text-align: left;             /* ragged right on purpose */
  -webkit-hyphens: none;
  hyphens: none;
}

/* A single paragraph is a pull quote: give it the typewriter. */
.rar-body blockquote:not(:has(p + p)) {
  font-family: "Special Elite", "Courier Prime", monospace;
  font-size: 19px;
  line-height: 1.5;
  color: rgba(26, 23, 18, 0.9); /* typewriter ribbon is never full black */
}

.rar-body blockquote p {
  margin: 0 0 var(--rar-lead);
  font: inherit;
  color: inherit;
  text-align: left;
  text-indent: 0;
  -webkit-hyphens: none;
  hyphens: none;
}

.rar-body blockquote > :last-child {
  margin-bottom: 0;
}

/* Attribution: Courier caps, its own line, one tight step under the
 * quote. core/quote emits <cite> and already sets display:block; the
 * font-style reset undoes the user agent's italic, which Courier does
 * not have a real cut for. */
.rar-body blockquote cite {
  display: block;
  margin-top: var(--rar-para);
  font-family: var(--rar-face-courier);
  font-size: 13px;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rar-ink);
}

.rar-body blockquote a {
  color: inherit;
}

@media (max-width: 782px) {
  .rar-body blockquote {
    padding-left: 13px;
  }
}

/* ------------------------------------------------------------------ */
/* Torn slip seating on article pages (P7 fix 1).                      */
/*                                                                     */
/* The slip is a physical object laid on the page, not a block in the  */
/* text stream, so it takes the full section step on both edges rather */
/* than the --rar-block a figure or a quotation takes. It had no margin */
/* rule at all before this: it inherited core's 24px layout gap above   */
/* and, because .rar-body p won the cascade for the paragraph beneath   */
/* it with margin 0, absolutely nothing below.                          */
/*                                                                     */
/* 55px IS THE CLEARANCE, not a taste call. Three things stick out of  */
/* the slip's box and every one of them has to clear the copy:          */
/*   rotation  the lean modifiers run to 1.5deg, and on the widest      */
/*             measure this body ever sets (72ch, about 710px) a corner */
/*             drops 355 * sin(1.5deg) = 9.3px below the box;           */
/*   shadow    drop-shadow(3px 4px 8px) reaches about 12px past the     */
/*             bottom edge, and the hover lift (5px 7px 14px) about     */
/*             21px;                                                    */
/*   tape      the .rar-tape corner sits at top:-9px and carries its    */
/*             own 4deg rotation, so it reaches about 12px above the    */
/*             box before the slip's own lean is added.                 */
/* Worst case below: 9.3 + 21 = 30.3px, leaving 24.7px of clear paper.  */
/* Worst case above: 9.3 + 12 = 21.3px, leaving 33.7px. Both hold at    */
/* every width, because a narrower measure shortens the rotation arm.   */
/*                                                                     */
/* Scoped to the article side on purpose. torn-slip-brick.php exists as */
/* a wire-feed masonry brick (amendment 14.12); a 55px block margin on  */
/* a 300px brick would blow a hole in the column pack, so the front     */
/* page keeps .rar-wire-feed > * { margin: 0 0 26px } and is untouched. */
/* ------------------------------------------------------------------ */

.rar-article .rar-torn-slip,
.rar-body .rar-torn-slip {
  margin-top: var(--rar-section);
  margin-bottom: var(--rar-section);
}

/* Protect the torn slip (FX component) from body justification rules */
.rar-body .rar-torn-slip p {
  text-indent: 0;
  text-align: left;
}

/* ------------------------------------------------------------------ */
/* Crosshead: centered small caps flanked by short rules              */
/*                                                                    */
/* P7 note: this rule used to LOSE to ".rar-body h2, .rar-body h3"    */
/* (0,1,1 against 0,1,0), so every crosshead inside a body group set  */
/* in Libre Caslon Display at 26px/13px instead of Oswald at its own  */
/* margins -- verified on staging before the fix. The untyped-heading */
/* rule above now carries :not(.rar-crosshead), so this is once again */
/* the single source of a crosshead's face, size and margins.         */
/*                                                                    */
/* A full section step above, a paragraph step below: a crosshead is  */
/* a harder break than an untyped heading (it is flanked by rules and */
/* announces a numbered part of a dossier), so it takes more air      */
/* underneath than the --rar-lead an inline heading takes.            */
/* ------------------------------------------------------------------ */

.rar-crosshead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  font-family: var(--rar-face-gothic);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rar-ink);
  text-align: center;
  margin: var(--rar-section) 0 var(--rar-para);
}

.rar-crosshead::before,
.rar-crosshead::after {
  content: "";
  flex: 0 0 55px;
  border-top: 1px solid var(--rar-ink);
}

/* ------------------------------------------------------------------ */
/* Rebuttal exhibit: red hairline box, red CLAIM label                */
/* ------------------------------------------------------------------ */

/* A boxed exhibit is a block object set into the copy: --rar-block on
 * the outside, the paragraph step between the CLAIM and THE RECORD
 * lines inside, and 26px of padding so the hairline never crowds the
 * type it encloses. */
.rar-rebuttal-exhibit {
  border: 1px solid var(--rar-red);
  padding: 26px;
  margin: var(--rar-block) 0;
}

.rar-rebuttal-exhibit p {
  margin: 0 0 var(--rar-para);
  text-indent: 0;
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.rar-rebuttal-exhibit p:last-child {
  margin-bottom: 0;
}

.rar-rebuttal-exhibit > p:first-of-type > strong:first-child {
  color: var(--rar-red);
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------------ */
/* Sources band: archival index card block on paper-shade             */
/* ------------------------------------------------------------------ */

/* The sources band closes the page: a full section step off the copy
 * above it, and 26px of padding inside the ruled band. */
.rar-sources {
  background: var(--rar-paper-shade);
  border-top: 1px solid var(--rar-ink);
  border-bottom: 1px solid var(--rar-ink);
  padding: 26px;
  margin: var(--rar-section) 0;
}

.rar-sources .rar-crosshead {
  margin-top: 0;
}

/* The band's own list overrides the body list rhythm above: it is a
 * Courier index card, not running copy, so the outer margins are zero
 * (the band's padding is the air) and the entries sit one lead step
 * apart -- close enough to scan as a numbered column, far enough that a
 * two-line citation does not merge with its neighbour. */
.rar-sources ol {
  font-family: var(--rar-face-courier);
  font-size: 13px;
  line-height: 1.5;
  color: var(--rar-ink);
  margin: 0;
  padding-left: 2.5em;
}

.rar-sources ol li {
  margin-bottom: var(--rar-lead);
  text-align: left;
  text-indent: 0;
}

.rar-sources ol li:last-child {
  margin-bottom: 0;
}

.rar-sources a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* ------------------------------------------------------------------ */
/* CLIP & SHARE seating on article pages (P7).                        */
/*                                                                    */
/* The strip itself is plugin-owned (amendment 14.5, clip-share.css);  */
/* nothing visual is restated here. Only its seating in the article    */
/* flow is a rhythm decision, and the strip is a section break like    */
/* the sources band, so it takes the section step rather than the 26px */
/* the plugin sets for a generic context. Scoped to .rar-article, so   */
/* the plugin's own value still governs anywhere else the strip lands. */
/* Theme CSS is enqueued after the plugin's, so no !important and no   */
/* specificity inflation is needed.                                    */
/* ------------------------------------------------------------------ */

.rar-article .rar-clip-share {
  margin-top: var(--rar-section);
  margin-bottom: var(--rar-section);
}

/* ------------------------------------------------------------------ */
/* Marginalia: 2px red left rule with a margin pull                   */
/* ------------------------------------------------------------------ */

.rar-marginalia {
  border-left: 2px solid var(--rar-red);
  padding-left: 13px;
  margin-left: -15px; /* border + padding, so the text stays on measure */
  text-indent: 0;
}

@media (max-width: 782px) {
  .rar-marginalia {
    margin-left: 0;
  }
}

/* ------------------------------------------------------------------ */
/* Archive / search / index teaser list: hairline-ruled single column. */
/* Scoped to post templates WITHOUT .rar-wire-feed so the front-page   */
/* masonry (FRONT-PAGE's styling) is never touched.                    */
/* ------------------------------------------------------------------ */

.wp-block-post-template:not(.rar-wire-feed) .rar-teaser {
  border-bottom: 1px solid var(--rar-ink);
  padding: 21px 0;
  margin: 0;
}

.wp-block-post-template:not(.rar-wire-feed) .rar-teaser .wp-block-post-title {
  font-family: var(--rar-face-head);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1;
  margin: 0 0 8px;
}

.wp-block-post-template:not(.rar-wire-feed) .rar-teaser .wp-block-post-title a {
  color: inherit;
  text-decoration: none;
}

.wp-block-post-template:not(.rar-wire-feed) .rar-teaser .wp-block-post-title a:hover,
.wp-block-post-template:not(.rar-wire-feed) .rar-teaser .wp-block-post-title a:focus-visible {
  text-decoration: underline;
}

.wp-block-post-template:not(.rar-wire-feed) .rar-teaser .rar-dateline {
  margin: 0 0 8px;
}

.wp-block-post-template:not(.rar-wire-feed) .rar-teaser .wp-block-post-excerpt {
  font-family: var(--rar-face-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--rar-ink);
  margin: 0 0 8px;
}

.wp-block-post-template:not(.rar-wire-feed) .rar-teaser .wp-block-post-excerpt__excerpt {
  margin: 0;
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* ------------------------------------------------------------------ */
/* Typed navigation lines. Base typography matches FRONT-PAGE's        */
/* .rar-more-line register; the div variant is this file's single-post */
/* navigation row (FRONT-PAGE owns the nav and p variants).            */
/* ------------------------------------------------------------------ */

.rar-more-line {
  font-family: var(--rar-face-courier);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rar-ink);
}

div.rar-more-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 13px 21px;
  border-top: 1px solid var(--rar-ink);
  padding-top: 13px;
  margin: 26px 0;
}

.rar-more-line a {
  color: inherit;
  text-decoration: none;
}

.rar-more-line a:hover,
.rar-more-line a:focus-visible {
  text-decoration: underline;
}

/* No-results notice (query-no-results inner paragraph) */
.wp-block-query-no-results p {
  font-family: var(--rar-face-courier);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rar-ink);
  text-align: center;
  margin: 34px 0;
}

/* ------------------------------------------------------------------ */
/* Search form as a typed form                                        */
/* ------------------------------------------------------------------ */

.wp-block-search {
  font-family: var(--rar-face-courier);
  margin: 26px auto;
}

.wp-block-search .wp-block-search__label {
  display: block;
  font-family: var(--rar-face-courier);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rar-ink);
  margin-bottom: 8px;
}

.wp-block-search .wp-block-search__input {
  font-family: var(--rar-face-courier);
  font-size: 14px;
  color: var(--rar-ink);
  background: var(--rar-paper-slip);
  border: 1px solid var(--rar-ink);
  padding: 8px 13px;
}

.wp-block-search .wp-block-search__button {
  font-family: var(--rar-face-courier);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rar-ink);
  background: transparent;
  border: 1px solid var(--rar-ink);
  padding: 8px 21px;
  margin-left: 8px;
  cursor: pointer;
}

.wp-block-search .wp-block-search__button:hover,
.wp-block-search .wp-block-search__button:focus-visible {
  background: var(--rar-paper-shade);
}

/* ------------------------------------------------------------------ */
/* Search results and 404: typewriter register                        */
/* ------------------------------------------------------------------ */

.search main .wp-block-query-title {
  font-family: var(--rar-face-courier);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rar-ink);
  text-align: center;
  margin: 0 0 21px;
}

.search main .wp-block-search {
  max-width: 560px;
}

.error404 .rar-headline {
  font-family: var(--rar-face-courier);
  font-size: clamp(24px, 4vw, 34px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.error404 main p {
  font-family: var(--rar-face-courier);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rar-ink);
  text-align: center;
}

.error404 main p a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.error404 main .wp-block-search {
  max-width: 560px;
}

/* ------------------------------------------------------------------ */
/* LETTERS TO THE EDITOR                                               */
/*                                                                     */
/* The site carries 350 comments, 149 of them on /about/ alone, and    */
/* fourteen years of them are the reason the place has a voice. The    */
/* P1 build shipped no comments block in any template, so switching    */
/* themes made every one of them invisible. This is the repair.        */
/*                                                                     */
/* A broadsheet already had a name for reader mail and a house style   */
/* for setting it: a ruled band, the correspondent's name in caps,     */
/* the date in Courier beside it, the letter itself in body type at a  */
/* slightly tighter size than the article it answers. No avatars, no   */
/* bubbles, no cards. Threading is a plain indent with a rule, the way */
/* a printed exchange was set.                                         */
/* ------------------------------------------------------------------ */

.rar-letters {
  margin: var(--rar-section) 0 0;
  padding-top: var(--rar-lead);
  border-top: 3px solid var(--rar-ink);
}

.rar-letters-label {
  margin: 0 0 var(--rar-para);
  font-family: var(--rar-face-kicker, "Oswald", "Arial Narrow", sans-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rar-ink);
}

.rar-letter {
  margin: 0 0 var(--rar-block);
  padding: 0 0 var(--rar-para);
  border-bottom: 1px solid var(--rar-ink);
}

.rar-letters .wp-block-comment-template > li:last-child > .rar-letter {
  border-bottom: 0;
}

/* Correspondent and date share one Courier line, the way a printed
   letter carried its attribution above the text. */
.rar-letter-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 13px;
  margin-bottom: var(--rar-tight);
}

/* The correspondent's portrait, set as a press cut would be: square,
   ruled, and screened to the same halftone the photographs carry, so a
   Gravatar reads as printed matter rather than as a web profile chip.
   Commenters without a Gravatar get the default silhouette, which under
   the screen looks like any unidentified figure in a newspaper morgue. */
.rar-letter-avatar {
  flex: 0 0 auto;
  margin: 0;
  line-height: 0;
}

.rar-letter-avatar img {
  display: block;
  width: 48px;
  height: 48px;
  border: 1px solid var(--rar-ink);
  filter: grayscale(1) contrast(1.12) brightness(1.02) sepia(0.08);
}

.rar-letter-attribution {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 13px;
  font-family: var(--rar-face-courier, "Courier Prime", "Courier New", monospace);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.rar-letter-author,
.rar-letter-author a {
  font-weight: 700;
  text-transform: uppercase;
  color: var(--rar-ink);
  text-decoration: none;
}

.rar-letter-date,
.rar-letter-date a {
  color: var(--rar-ink);
  text-decoration: none;
}

.rar-letter-body p {
  margin: 0 0 var(--rar-lead);
  font-size: 16px;
  line-height: 1.55;
  text-indent: 0;
}

.rar-letter-body > :last-child {
  margin-bottom: 0;
}

.rar-letter-reply {
  margin-top: var(--rar-tight);
  font-family: var(--rar-face-courier, "Courier Prime", "Courier New", monospace);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* A reply is set in from the letter it answers, with a rule carrying
   the eye down the exchange. */
.rar-letters .wp-block-comment-template ol {
  margin: var(--rar-para) 0 0;
  padding-left: 26px;
  border-left: 1px solid var(--rar-ink);
  list-style: none;
}

.rar-letters .wp-block-comment-template {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rar-letters-pagination {
  margin-top: var(--rar-para);
  font-family: var(--rar-face-courier, "Courier Prime", "Courier New", monospace);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* The form is furniture, not a product sign-up: labels in Courier,
   fields ruled rather than boxed and filled. */
.rar-letters-form {
  margin-top: var(--rar-section);
  padding-top: var(--rar-lead);
  border-top: 1px solid var(--rar-ink);
}

.rar-letters-form label,
.rar-letters-form .comment-notes,
.rar-letters-form .form-submit {
  font-family: var(--rar-face-courier, "Courier Prime", "Courier New", monospace);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.rar-letters-form input[type="text"],
.rar-letters-form input[type="email"],
.rar-letters-form input[type="url"],
.rar-letters-form textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--rar-ink);
  background: var(--rar-paper-slip);
  font-family: var(--rar-face-courier, "Courier Prime", "Courier New", monospace);
  font-size: 14px;
  color: var(--rar-ink);
}

.rar-letters-form input[type="submit"] {
  padding: 8px 21px;
  border: 1px solid var(--rar-ink);
  background: var(--rar-ink);
  font-family: var(--rar-face-kicker, "Oswald", "Arial Narrow", sans-serif);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rar-paper, #f4efe4);
  cursor: pointer;
}

/* ------------------------------------------------------------------ */
/* The reply form, set as a correspondence coupon.                     */
/*                                                                     */
/* Papers printed a form to write in on: a ruled box, a line for each  */
/* thing they needed, and an instruction in small type. That is the    */
/* whole design. Fields are RULED, not boxed and filled, because a     */
/* filled input is a web convention and an underline is a paper one.   */
/*                                                                     */
/* NOTE on Jetpack Comments: if that module renders, the form becomes  */
/* an iframe on jetpack.wordpress.com and nothing below can reach      */
/* inside it. These rules then style the frame's surroundings only.    */
/* ------------------------------------------------------------------ */

.rar-letters-form .comment-reply-title {
  margin: 0 0 var(--rar-tight);
  font-family: var(--rar-face-gothic);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rar-ink);
}

.rar-letters-form .comment-reply-title small {
  font-size: 12px;
  letter-spacing: 0.04em;
}

.rar-letters-form .comment-reply-title small a {
  color: var(--rar-red);
}

.rar-letters-form .comment-notes,
.rar-letters-form .comment-form-cookies-consent label {
  margin: 0 0 var(--rar-para);
  font-family: var(--rar-face-courier);
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: 0.04em;
  text-indent: 0;
  color: var(--rar-ink);
}

.rar-letters-form .required-field-message,
.rar-letters-form .required {
  color: var(--rar-red);
}

.rar-letters-form p {
  margin: 0 0 var(--rar-lead);
  text-indent: 0;
}

.rar-letters-form label {
  display: block;
  margin-bottom: 4px;
  font-family: var(--rar-face-courier);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Ruled lines, not filled boxes. */
.rar-letters-form input[type="text"],
.rar-letters-form input[type="email"],
.rar-letters-form input[type="url"],
.rar-letters-form textarea {
  width: 100%;
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid var(--rar-ink);
  background: transparent;
  font-family: var(--rar-face-courier);
  font-size: 14px;
  line-height: 1.55;
  color: var(--rar-ink);
}

.rar-letters-form textarea {
  min-height: 130px;
  padding: 8px;
  border: 1px solid var(--rar-ink);
  background: var(--rar-paper-slip);
  resize: vertical;
}

.rar-letters-form input:focus-visible,
.rar-letters-form textarea:focus-visible {
  outline: 2px solid var(--rar-red);
  outline-offset: 2px;
}

/* Name, email and website ride one line on a wide sheet, as a coupon's
   boxes did; they stack when the column is too narrow to set them. */
@media (min-width: 700px) {
  .rar-letters-form .comment-form-author,
  .rar-letters-form .comment-form-email,
  .rar-letters-form .comment-form-url {
    display: inline-block;
    width: calc(33.333% - 18px);
    margin-right: 26px;
    vertical-align: top;
  }

  .rar-letters-form .comment-form-url {
    margin-right: 0;
  }
}

/* ------------------------------------------------------------------ */
/* THE THREE OPT-IN BOXES                                              */
/*                                                                     */
/* Core writes the cookies-consent row; Jetpack writes the two         */
/* subscription rows below it. They are different markup from          */
/* different codebases and they were arriving set three different      */
/* ways, so the column of checkboxes stepped in and out. Measured on   */
/* the live form 2026-07-27:                                           */
/*                                                                     */
/*   cookies box       margin 5.95px 3px 3px 4px, row margin-bottom 13 */
/*   subscription box  margin 2px 0 0,             row margin-bottom  4 */
/*                                                                     */
/* All three boxes are 13x13; nothing was the wrong SIZE. The 4px left */
/* is Chrome's UA sheet for input[type=checkbox], which our old        */
/* two-class selector never outranked, and the 5.95px top is 0.35em    */
/* against the form's inherited 17px. Together they pushed the first   */
/* box 4px right and 3px low against the two beneath it, and the 13px  */
/* row gap opened a hole between the consent box and the opt-ins.      */
/*                                                                     */
/* So the three rows are stated ONCE, together, rather than patched    */
/* per source: same row box, same 13x13 checkbox with the UA margin    */
/* zeroed, same 2px optical drop onto the 18px line box. accent-color  */
/* puts a ticked box in ink rather than system blue -- the one colour  */
/* the house palette would never print.                                */
/*                                                                     */
/* THE ID IN THE SELECTOR, measured live 2026-07-29: core's inline     */
/* sheet for the post-comments-form block sets the consent box's top   */
/* margin BY ID (.wp-block-post-comments-form .comment-form-cookies-   */
/* consent #wp-comment-cookies-consent { margin-top: .35em }), which   */
/* at (1,1,0) outranks any class-only selector this sheet can write.   */
/* That is how the consent box sat 4px low while the two Jetpack       */
/* boxes, which core does not touch, obeyed the unified rule. The ID   */
/* is restated here once, inside the same single rule, to win at       */
/* (1,2,1); it is core's own ID, stable since the consent field        */
/* shipped in 4.9.6.                                                   */
/* ------------------------------------------------------------------ */

.rar-letters-form .comment-form-cookies-consent,
.rar-letters-form .comment-subscription-form {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 4px;
}

/* A little air above the block, so the opt-ins read as a group under
   the fields rather than a fourth field. */
.rar-letters-form .comment-form-cookies-consent {
  margin-top: var(--rar-para);
}

.rar-letters-form .comment-form-cookies-consent input[type="checkbox"],
.rar-letters-form .comment-form-cookies-consent input#wp-comment-cookies-consent,
.rar-letters-form .comment-subscription-form input[type="checkbox"] {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  /* 2px drops the 13px box onto the optical centre of the 18px line box
     the 12px/1.5 label sets. flex-start, not center: the label wraps to
     two lines on a phone and the box belongs beside the FIRST one. */
  margin: 2px 0 0;
  border: 0;
  background: none;
  accent-color: var(--rar-ink);
}

.rar-letters-form .comment-form-cookies-consent label {
  margin: 0;
  text-transform: none;
  letter-spacing: 0.04em;
}

.rar-letters-form .form-submit {
  margin: var(--rar-para) 0 0;
}

/* Jetpack's iframe, when that module is on: give it room and a rule,
   which is the most this side of the origin boundary can do. */
.rar-letters-form iframe {
  display: block;
  width: 100%;
  border: 0;
  margin-top: var(--rar-lead);
}

/* ------------------------------------------------------------------ */
/* Jetpack's two subscription checkboxes.                              */
/*                                                                     */
/* These arrive as two separate <p class="comment-subscription-form">, */
/* and the form's own rule sets labels to display:block with a bottom  */
/* margin -- correct for a field label sitting above its input, wrong  */
/* for a checkbox whose label belongs beside it. That is what pushed   */
/* the two rows so far apart. Restore them to one line each and set    */
/* them tight, the way a coupon's opt-in boxes were set.               */
/*                                                                     */
/* These ARE stylable, unlike a Jetpack Comments iframe: the           */
/* subscription checkboxes are ordinary markup in this document.       */
/*                                                                     */
/* The row box and the checkbox box are NOT restated here: they are    */
/* set once, with core's consent row, in THE THREE OPT-IN BOXES above. */
/* Only what is peculiar to Jetpack's markup stays in this section.    */
/* ------------------------------------------------------------------ */

.rar-letters-form .comment-subscription-form:last-of-type {
  margin-bottom: var(--rar-para);
}

/* display:inline overrides the block-label rule above without needing
   specificity games; the margin reset kills the stacked gap. */
.rar-letters-form .comment-subscription-form label,
.rar-letters-form .subscribe-label {
  display: inline;
  margin: 0;
  font-family: var(--rar-face-courier);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--rar-ink);
}

/* The submit sits inside p.form-submit.wp-block-button, so core's button
   styles are in play; state the whole thing rather than inherit half. */
.rar-letters-form .form-submit input[type="submit"],
.rar-letters-form .wp-block-button__link {
  display: inline-block;
  width: auto;
  padding: 8px 21px;
  border: 1px solid var(--rar-ink);
  background: var(--rar-ink);
  font-family: var(--rar-face-gothic);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rar-paper, #f4efe4);
  cursor: pointer;
}

.rar-letters-form .form-submit input[type="submit"]:hover,
.rar-letters-form .form-submit input[type="submit"]:focus-visible {
  background: var(--rar-red);
  border-color: var(--rar-red);
  color: var(--rar-paper, #f4efe4);
}

/* Akismet drops a hidden container in the form; it must not take space. */
.rar-letters-form .akismet-fields-container {
  margin: 0;
}

/* ------------------------------------------------------------------ */
/* PULL QUOTE (core/pullquote) and image alignment inside the body.    */
/*                                                                     */
/* core/pullquote renders figure.wp-block-pullquote wrapping a bare    */
/* blockquote, and core's own stylesheet sets padding: 4em 0 on that   */
/* figure (about 64px top and bottom) plus text-align: center. Those   */
/* stacked on the 34px block margins the blockquote already carried,   */
/* which is the huge gap. Reset the figure and let the ladder own the  */
/* spacing, exactly once.                                              */
/*                                                                     */
/* The centring is also why an inline image would not sit in the text: */
/* a centred paragraph gives a floated element nothing to flow past.   */
/* Ranged left, an aligned image floats and the quote wraps it.        */
/* ------------------------------------------------------------------ */

.rar-body figure.wp-block-pullquote {
  margin: var(--rar-block) 0;
  padding: 0;
  text-align: left;
}

/* The blockquote inside carries the rule and the indent; the figure is
   only a wrapper, so it must not double the margin. */
.rar-body figure.wp-block-pullquote > blockquote {
  margin: 0;
}

.rar-body figure.wp-block-pullquote cite,
.rar-body blockquote cite {
  display: block;
  margin-top: var(--rar-para);
  font-family: var(--rar-face-courier);
  font-size: 13px;
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rar-ink);
}

/* ------------------------------------------------------------------ */
/* WordPress alignment classes.                                        */
/*                                                                     */
/* The theme never defined these, so choosing "align left" on an image */
/* in the editor produced a class nothing acted on and the image never */
/* floated. Defined here for the article body, including inside quotes */
/* and pull quotes, which is where the owner wanted a portrait with    */
/* the quotation running around it.                                    */
/*                                                                     */
/* Scoped to .rar-body so front-page and masthead composition, which   */
/* is hand-set, can never be shoved around by an editor alignment.     */
/* ------------------------------------------------------------------ */

.rar-body .alignleft,
.rar-body img.alignleft,
.rar-body figure.alignleft {
  float: left;
  margin: 4px var(--rar-block) var(--rar-lead) 0;
  max-width: 45%;
}

.rar-body .alignright,
.rar-body img.alignright,
.rar-body figure.alignright {
  float: right;
  margin: 4px 0 var(--rar-lead) var(--rar-block);
  max-width: 45%;
}

.rar-body .aligncenter,
.rar-body figure.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.rar-body .alignleft img,
.rar-body .alignright img,
.rar-body .aligncenter img {
  display: block;
  width: 100%;
  height: auto;
}

/* A float inside a quotation must not escape its box and drag the next
   paragraph up alongside it. */
.rar-body blockquote::after,
.rar-body figure.wp-block-pullquote::after {
  content: "";
  display: table;
  clear: both;
}

/* On a phone a 45% float leaves a column of two words. Stack instead. */
@media (max-width: 600px) {
  .rar-body .alignleft,
  .rar-body img.alignleft,
  .rar-body figure.alignleft,
  .rar-body .alignright,
  .rar-body img.alignright,
  .rar-body figure.alignright {
    float: none;
    margin: 0 0 var(--rar-para);
    max-width: 100%;
  }
}

/* ------------------------------------------------------------------ */
/* A portrait that opens a quotation.                                  */
/*                                                                     */
/* core/pullquote gives no alignment toolbar for an image sitting       */
/* inline inside its paragraph, so the editor emits a bare             */
/* <img class="wp-image-NNN"> with no alignleft, and the image lands on */
/* the text baseline: the first line starts at the bottom of the photo  */
/* and every line after it drops underneath. That is never what anyone  */
/* wants from a headshot at the head of a quote.                        */
/*                                                                     */
/* Float it by default rather than requiring a hand-typed class. An     */
/* explicit alignright or aligncenter still wins, so the default is a   */
/* starting point and not a cage.                                       */
/* ------------------------------------------------------------------ */

.rar-body blockquote p > img:first-child:not(.alignright):not(.aligncenter),
.rar-body figure.wp-block-pullquote p > img:first-child:not(.alignright):not(.aligncenter) {
  float: left;
  margin: 6px var(--rar-para) var(--rar-tight) 0;
  max-width: 45%;
  height: auto;
  border: 1px solid var(--rar-ink);
}

@media (max-width: 600px) {
  .rar-body blockquote p > img:first-child,
  .rar-body figure.wp-block-pullquote p > img:first-child {
    float: none;
    display: block;
    margin: 0 0 var(--rar-lead);
    max-width: 100%;
  }
}

/* ------------------------------------------------------------------ */
/* CHARTS AND TABLES IN RUNNING COPY                                   */
/*                                                                     */
/* The site had neither. Every figure that had ever run here was a     */
/* photograph, so an article carrying survey data had nowhere to put   */
/* it but a wall of percentages in a paragraph, which is the fastest   */
/* way known to make a reader stop reading.                            */
/*                                                                     */
/* WHY THIS IS HTML AND CSS AND NOT AN IMAGE OR A CHART LIBRARY.       */
/* Three reasons, in order of how much they matter:                    */
/*   1. The numbers stay TEXT. A screen reader reads them, a search    */
/*      engine indexes them, a reader can select and paste one into a  */
/*      reply. A PNG of a bar chart is a number nobody can quote.      */
/*   2. It reflows. A chart baked at 700px wide is a smear on a phone; */
/*      these bars are percentages of whatever measure they land in.   */
/*   3. No dependency. SPEC Appendix A11 allows exactly one script on  */
/*      this site and it is already spent. A charting library would be */
/*      130KB to draw eleven rectangles.                               */
/*                                                                     */
/* THE PERIOD DETAIL. A 1972 broadsheet had no colour to spend on a    */
/* chart and no screen to render one, so it distinguished two series   */
/* the way a compositor did: one bar solid, the other HATCHED, both in */
/* the same ink, with the figures set in the same face as the copy.    */
/* That is exactly what runs here -- a repeating 45-degree rule for    */
/* the first series, solid ink for the second. It reads correctly in   */
/* greyscale, in high contrast, and to anyone who cannot tell two      */
/* colours apart, none of which is true of the usual two-tone bar.     */
/*                                                                     */
/* Red is deliberately NOT spent here. SPEC section 4 caps it at three */
/* elements per screen and a chart with five red bars would eat the    */
/* whole budget on furniture. The hatch carries the contrast instead.  */
/*                                                                     */
/* MARKUP CONTRACT (a wp:html block in post content):                  */
/*                                                                     */
/*   figure.rar-chart                                                  */
/*     figcaption                                                      */
/*       span.rar-chart-kicker   Oswald caps, what the exhibit is      */
/*       span.rar-chart-title    the sentence the chart is making      */
/*     p.rar-chart-legend        optional; span.is-before / .is-after  */
/*     div.rar-chart-plot                                              */
/*       div.rar-chart-row       one measure; add .is-pair for two     */
/*         span.rar-chart-key    the label                             */
/*         span.rar-chart-bars                                         */
/*           i[style="--v:9"]    ONE bar; --v is the percentage        */
/*             em                the figure, printed past the bar end  */
/*     p.rar-chart-source        Courier, where the number came from   */
/*                                                                     */
/* --v is a plain number, not a percentage: width resolves it with     */
/* calc(var(--v) * 1%), so 9 means 9 percent of the plot measure.      */
/* ------------------------------------------------------------------ */

.rar-body .rar-chart {
  margin: var(--rar-block) 0;
  padding: 10px 0 8px;
  border-top: 3px solid var(--rar-ink);
  border-bottom: 1px solid var(--rar-ink);
  max-width: 100%;
}

.rar-body .rar-chart figcaption {
  margin: 0 0 var(--rar-lead);
  text-align: left;
}

.rar-chart-kicker {
  display: block;
  font-family: var(--rar-face-gothic);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rar-ink);
  margin-bottom: 4px;
}

.rar-chart-title {
  display: block;
  font-family: var(--rar-face-head);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--rar-ink);
  text-wrap: balance;
}

/* The legend swatches are the bars in miniature, so a reader matches
   them by pattern rather than by remembering an order. */
.rar-chart-legend {
  margin: 0 0 var(--rar-lead);
  font-family: var(--rar-face-courier);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--rar-ink);
  text-indent: 0;
}

.rar-chart-legend span {
  display: inline-block;
  margin-right: 18px;
  white-space: nowrap;
}

.rar-chart-legend span::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 10px;
  margin-right: 6px;
  vertical-align: -1px;
  border: 1px solid var(--rar-ink);
}

.rar-chart-legend .is-before::before {
  background-image: repeating-linear-gradient(
    45deg,
    var(--rar-ink) 0 1px,
    transparent 1px 4px
  );
}

.rar-chart-legend .is-after::before {
  background-color: var(--rar-ink);
}

/* One measure per row: label in a fixed left column, bars in the rest.
   The plot column reserves its right edge for the printed figure, so a
   bar at 100 percent still has somewhere to put its number. */
.rar-chart-row {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  column-gap: 13px;
  align-items: center;
  padding: 7px 0;
  border-top: 1px solid var(--rar-paper-shade);
}

.rar-chart-row:first-child {
  border-top: 0;
}

.rar-chart-key {
  font-family: var(--rar-face-body);
  font-size: 15px;
  line-height: 1.3;
  color: var(--rar-ink);
}

.rar-chart-bars {
  display: block;
  padding-right: 52px;
}

.rar-chart-bars i {
  position: relative;
  display: block;
  width: calc(var(--v, 0) * 1%);
  min-width: 2px;
  height: 13px;
  border: 1px solid var(--rar-ink);
  background-color: var(--rar-ink);
}

/* Two series in one row sit as stacked rules, the way a paired bar was
   set in metal: same baseline, 3px apart, first hatched, second solid. */
.rar-chart-row.is-pair .rar-chart-bars i + i {
  margin-top: 3px;
}

.rar-chart-bars i.is-before {
  background-color: transparent;
  background-image: repeating-linear-gradient(
    45deg,
    var(--rar-ink) 0 1px,
    transparent 1px 4px
  );
}

.rar-chart-bars i em {
  position: absolute;
  left: calc(100% + 7px);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--rar-face-courier);
  font-size: 12px;
  font-style: normal;
  line-height: 1;
  white-space: nowrap;
  color: var(--rar-ink);
}

.rar-chart-source {
  margin: var(--rar-lead) 0 0;
  font-family: var(--rar-face-courier);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-indent: 0;
  color: var(--rar-ink);
}

/* A phone cannot carry a 200px label column and a readable bar beside
   it, so the label takes its own line and the bars run the full
   measure under it. Nothing is hidden and no figure is dropped. */
@media (max-width: 620px) {
  .rar-chart-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 6px;
  }

  .rar-chart-key {
    font-size: 14px;
  }
}

/* ------------------------------------------------------------------ */
/* TABLES                                                              */
/* Hairline rules and Courier figures, the way a paper set a results   */
/* table: no fill, no zebra banding, no rounded anything. Figures are  */
/* Courier so columns of numbers line up on the digit, which is the    */
/* entire reason a newspaper set them in a monospaced face.            */
/* Wide tables scroll inside their own box rather than forcing the     */
/* whole sheet sideways.                                               */
/* ------------------------------------------------------------------ */

.rar-body .wp-block-table,
.rar-body figure.wp-block-table {
  margin: var(--rar-block) 0;
  overflow-x: auto;
}

.rar-body table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--rar-face-body);
  font-size: 15px;
  line-height: 1.4;
  color: var(--rar-ink);
}

.rar-body table th,
.rar-body table td {
  padding: 6px 10px 5px;
  border-bottom: 1px solid var(--rar-paper-shade);
  text-align: left;
  vertical-align: top;
}

.rar-body table thead th {
  font-family: var(--rar-face-gothic);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rar-ink);
}

.rar-body table tbody tr:last-child th,
.rar-body table tbody tr:last-child td {
  border-bottom: 1px solid var(--rar-ink);
}

/* Any cell that is a bare figure sets in Courier and ranges right, so
   the column aligns on the digit. */
.rar-body table td.is-figure,
.rar-body table th.is-figure {
  font-family: var(--rar-face-courier);
  font-size: 13px;
  text-align: right;
  white-space: nowrap;
}

.rar-body table caption {
  caption-side: bottom;
  margin-top: var(--rar-tight);
  font-family: var(--rar-face-courier);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  color: var(--rar-ink);
}