/*
 * components-front.css -- rar-broadsheet front page components
 * Owner: FRONT-PAGE agent.
 * Scope: section labels, lead band, masonry wire feed, teasers (incl. the
 * 2-col span variant), roll call, jump lines, typed pagination.
 * Enqueued by functions.php (THEME-CORE).
 *
 * House rules honored here: no rounded corners, no shadows, no scale
 * transforms, no blanket transitions, no bang-important overrides, and
 * the palette is limited to the five theme presets (every color is
 * var(--wp--preset--color--*) with the section 3 hex as fallback).
 *
 * MOTION OWNERSHIP. Every effect (paper stir, halftone snap, curl
 * flutter, drift keyframes) is DEFINED by components-fx.css; this file
 * defines none of them. It makes exactly one motion statement, in
 * section 9: which single wire brick is the front page's one loose
 * clipping. That is a composition decision, not an effect, and it has
 * to live here because the wire feed is a core Query Loop that stamps
 * identical markup for all eight bricks, so the registry class cannot
 * be written onto one of them in the template. Section 9 reuses fx's
 * rar-drift keyframes and sits inside the same prefers-reduced-motion:
 * no-preference gate fx uses, so reduced motion stays the default-off
 * path. It adds no keyframes and no second effect.
 */

/* ------------------------------------------------------------------ */
/* 1. SECTION LABELS                                                   */
/* The THE RECORD label in front-page.html is the only red element on   */
/* the front page (budget: max 3 per screen; we spend 1). Teaser        */
/* kickers below are ink, deliberately: SPEC section 4 reserves red for */
/* FROM THE RECORD labels, rebuttal hairlines, and marginalia only.     */
/* ------------------------------------------------------------------ */

h2.rar-kicker {
  font-family: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--wp--preset--color--red, #8c1f13);
  border-top: 1px solid var(--wp--preset--color--ink, #1a1712);
  border-bottom: 1px solid var(--wp--preset--color--ink, #1a1712);
  padding: 6px 0 5px;
  margin: 21px 0;
}

/* THE WIRE SECTION HEAD (owner request 2026-07-27). The oxford rule
   under the lead band was doing all the work of separating the band
   from the feed, and a rule alone does not say what the thing below it
   IS. This names it.

   INK, NOT RED, and that is the point of it rather than a saving. SPEC
   section 4 reserves red for FROM THE RECORD labels; the wire is not
   the Record, it is the day's file. Setting it in ink differentiates
   the two heads at a glance instead of printing the same red label
   twice down one sheet, and it leaves the red budget where it was --
   one element per screen, spent on THE RECORD.

   The Courier note under it carries the section's terms of trade and
   the way through to the full index, which is where a reader who has
   read the four across the top actually wants to go next. */
h2.rar-kicker--wire {
  color: var(--wp--preset--color--ink, #1a1712);
  margin-bottom: 8px;
}

.rar-section-note {
  font-family: "Courier Prime", "Courier New", Courier, monospace;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--wp--preset--color--ink, #1a1712);
  margin: 0 0 21px;
}

.rar-section-note a {
  color: var(--wp--preset--color--ink, #1a1712);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .12em;
}

.rar-section-note a:hover,
.rar-section-note a:focus-visible {
  color: var(--wp--preset--color--red, #8c1f13);
}

/* ------------------------------------------------------------------ */
/* 2. LEAD BAND                                                        */
/* Hand-composed. First child = lead article (wide headline block over  */
/* a lede measure and the lead press cut), last child = secondary       */
/* dossier stack, divided by one hairline with 26px of air on each side */
/* of the rule.                                                         */
/*                                                                      */
/* LEAD COLUMN INTERNAL GRID. The lead article is itself two measures:  */
/* the drop-cap lede holds measure 1, the press cut sits in measure 2   */
/* BESIDE it, and the headline, deck and jump line span both. Seating   */
/* the cut beside the lede rather than under it is what keeps the       */
/* photograph from shoving the band down by its full height: it eats    */
/* space the lede already occupied. Placement is auto-placement plus    */
/* definite columns, so lead-band.php's source order (.rar-body BEFORE  */
/* the figure) is load bearing; reversing it drops the cut to its own   */
/* row. align-items: start keeps the shorter item from stretching       */
/* (a stretched figure would stretch its own image cell and drag the    */
/* halftone screen past the photograph).                                */
/* ------------------------------------------------------------------ */

.rar-lead-band {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  column-gap: 0;
  margin: 0 0 26px;
}

.rar-lead-band > :first-child {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  column-gap: 26px;
  align-content: start;
  align-items: start;
  padding-right: 26px;
}

/* Everything in the lead column runs the full width by default; only
   the lede and the cut take a single measure each. */
.rar-lead-band > :first-child > * {
  grid-column: 1 / -1;
}

.rar-lead-band > :first-child > .rar-body {
  grid-column: 1;
}

.rar-lead-band > :first-child > .rar-press-photo {
  grid-column: 2;
}

.rar-lead-band > :last-child {
  border-left: 1px solid var(--wp--preset--color--ink, #1a1712);
  padding-left: 26px;
}

.rar-lead-band .rar-headline {
  font-family: "Libre Caslon Display", Georgia, "Times New Roman", serif;
  font-weight: 700;
  color: var(--wp--preset--color--ink, #1a1712);
  margin: 0 0 10px;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.rar-lead-band > :first-child .rar-headline {
  font-size: clamp(34px, 4.5vw, 54px); /* SPEC lead anchor heads 42-56px */
  line-height: .98;
}

.rar-lead-band > :last-child .rar-headline {
  font-size: clamp(22px, 2.4vw, 30px); /* SPEC secondary 28-34px */
  line-height: 1.05;
}

.rar-lead-band .rar-headline a {
  color: var(--wp--preset--color--ink, #1a1712);
  text-decoration: none;
}

.rar-lead-band .rar-headline a:hover,
.rar-lead-band .rar-headline a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .1em;
}

.rar-lead-band .rar-deck {
  font-family: "Libre Caslon Display", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  color: var(--wp--preset--color--ink, #1a1712);
  margin: 0 0 13px;
}

.rar-lead-band > :first-child .rar-deck {
  font-size: 20px;
  line-height: 1.3;
}

.rar-lead-band > :last-child .rar-deck {
  font-size: 17px;
  line-height: 1.35;
}

.rar-lead-band .rar-body {
  margin: 0 0 8px;
}

.rar-lead-band .rar-body p {
  font-family: "Old Standard TT", Georgia, "Times New Roman", serif;
  color: var(--wp--preset--color--ink, #1a1712);
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  margin: 0;
}

/* Lead lede runs as ONE compositor measure under the wide headline: the
   second measure of the lead column is now the press cut (section 2B), so
   the band still reads as two measures wide, one of ink and one of
   halftone. The multicolumn declaration is retired rather than left in
   place; at the 470px-ish measure this track resolves to, columns: 2 300px
   would silently compute to one column and the column-rule would never
   draw, which is a trap for the next editor. */
.rar-lead-band > :first-child .rar-body {
  columns: auto;
  column-rule: none;
}

.rar-lead-band > :first-child .rar-body p {
  font-size: 17px;
  line-height: 1.55;
}

/* Drop cap on the lead lede only: 3-line float, headline serif, ink. */
.rar-lead-band > :first-child .rar-body p:first-of-type::first-letter {
  float: left;
  font-family: "Libre Caslon Display", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 3.4em;
  line-height: .8;
  padding: .04em .09em 0 0;
}

.rar-lead-band > :last-child .rar-body p {
  font-size: 16px;
  line-height: 1.5;
}

.rar-lead-band .rar-jump {
  margin-top: 4px;
}

/* ------------------------------------------------------------------ */
/* 2B. LEAD BAND PRESS CUTS                                            */
/* SPEC section 6 puts photographs on the front page; SPEC section 9    */
/* governs their treatment. Everything material about a press cut (the  */
/* 1px ink border, the halftone screen, the colour snap, the curled     */
/* corner and its flutter) belongs to components-fx.css and is NOT      */
/* restated here: this section only seats the two cuts in the band and  */
/* crops them. No border, no shadow, no scale.                          */
/*                                                                      */
/* ASYMMETRY. The two columns are not mirrors. Lead cut: measure 2 of   */
/* the lead column, BESIDE the lede, taller 4:5 portrait crop, and the  */
/* band's single curled corner. Secondary cut: full narrow measure,     */
/* ABOVE its brief, squared to 1:1, no curl. The lead cut also runs the */
/* larger of the two at every viewport (about 320px against 256px at    */
/* the 1200px content width).                                           */
/* ------------------------------------------------------------------ */

.rar-lead-band .rar-press-photo {
  margin: 0 0 13px;
}

/* THE CROP. Both library files are portraits (773 is 1708x2560, 779 is
   398x510) and at their natural ratio would set 400 to 500px tall in
   these measures, a photograph running the composition rather than the
   other way round. object-fit: cover against a declared ratio is the
   compositor's crop, performed in CSS over the untouched colour original
   exactly as SPEC section 9 demands: nothing is baked into the file, and
   the halftone screen and the colour snap still run over the crop.
   object-position sits above centre because both frames are head and
   shoulders with the head in the upper third. */
.rar-lead-band .rar-press-photo img {
  object-fit: cover;
}

.rar-lead-band > :first-child .rar-press-photo img {
  aspect-ratio: 4 / 5;
  object-position: 50% 15%;
}

.rar-lead-band > :last-child .rar-press-photo img {
  aspect-ratio: 1 / 1;
  object-position: 50% 12%;
}

/* The band's ONE ambient element, and the front page's first of two.
   SPEC section 11 caps a viewport at two moving elements; the second
   slot changes hands at 1360px, which is where main.js injects the desk
   props:
     >= 1360px  curl + the coffee steam on .rar-prop--coffee (desk.css)
     <  1360px  curl + the one loose clipping in the wire feed (sec. 9)
   Never three. Section 9 is gated on max-width so the two rules can
   never both spend the second slot.
   The flutter period is set here rather than inline in the pattern
   because there is exactly one curl in this band, so the per-instance
   de-sync that an inline --fd exists to provide has nothing to de-sync
   against; 6.3s is one of the five canned values (DESIGN-SYSTEM 14.13).
   Keep this the only has-curl on the front page. */
.rar-lead-band .rar-press-photo.has-curl {
  --fd: 6.3s;
}

/* ------------------------------------------------------------------ */
/* 3. WIRE FEED MASONRY -- THE NO-JS PATH                              */
/*                                                                      */
/* STATUS, 2026-07-27 (owner directive; DESIGN-SYSTEM section 23).      */
/* This section is no longer what a reader with JavaScript sees. It is  */
/* the fallback, and it is kept working, not deprecated.                */
/*                                                                      */
/* The line that used to close this header read "No JS masonry, ever."  */
/* It has been overruled, for a reason multicolumn cannot answer:       */
/* column-fill: balance BALANCES HEIGHTS BUT STILL FILLS IN ORDER. It   */
/* pours bricks into column 1 up to the balanced height, then column 2, */
/* then column 3 -- so on an 8-brick sheet the head of column 4 is the  */
/* EIGHTH-newest story, a 2016 post across the top of the page from     */
/* this morning's. The owner wants the four newest across the four      */
/* column tops, newest at the left, and packing below that. There is no */
/* value of any multicolumn property that does it. main.js section 5    */
/* does, by measuring; section 3B below dresses what it builds.         */
/*                                                                      */
/* Everything here stands as written, because with scripting off this   */
/* is still what prints: four packed columns of newsprint with hairline */
/* dividers, every brick readable, in the old fill order. The order is  */
/* worse; nothing is broken or missing. That is the trade, and it is    */
/* the right way round -- the news does not depend on the script.       */
/*                                                                      */
/* CSS multicolumn IS the masonry: packs with zero dead space, reads    */
/* top-to-bottom down each column exactly as a newspaper is read, and   */
/* column-rule draws the hairline column dividers for free. Container   */
/* height is auto, so column-fill balancing makes all columns end near  */
/* a common baseline.                                                   */
/* The element is the Query Loop post-template ul; children are li.     */
/*                                                                      */
/* THE BRICK COUNT, AND WHY IT MOVED FROM 8 TO 10 (2026-07-27).        */
/* It used to be 8 for one reason: 8 is the count in the owner's        */
/* standing "8 to 10 per page" band that divides evenly by 4, so every  */
/* column took exactly 2 and the bottoms landed level -- SPEC section   */
/* 14 item 8's "no ragged column bottoms" falling out of the            */
/* arithmetic rather than being fought for.                             */
/*                                                                      */
/* The arithmetic changed because the feed now carries advertisements.  */
/* inc/ads.php prints one Signal tile per five articles, so the number  */
/* of things in the sheet is articles + articles/5, and it is THAT      */
/* total that has to divide by 4:                                       */
/*                                                                      */
/*     8 posts  ->  1 advert  ->   9 tiles  ->  3/2/2/2, ragged         */
/*    10 posts  ->  2 adverts -> 12 tiles  ->  3/3/3/3, level           */
/*                                                                      */
/* So 10 is now the count that 8 used to be, and it is still inside the */
/* owner's band. If the per-page count moves again, re-derive the same  */
/* way: (posts + posts/5) must divide by the column count the sheet     */
/* resolves to, or expect a ragged bottom. Note that the JS path has a  */
/* balance pass (main.js) that rescues a bad split; this arithmetic is  */
/* what keeps the NO-JS path level, where nothing can rescue it.        */
/* ------------------------------------------------------------------ */

.rar-wire-feed {
  columns: 4 260px;
  column-gap: 26px;
  column-rule: 1px solid var(--wp--preset--color--ink, #1a1712);
  column-fill: balance;
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}

.rar-wire-feed > * {
  break-inside: avoid;
  margin: 0 0 26px;
}

/*
 * NATIVE CSS MASONRY: NOT THE ANSWER HERE, AND NOT WAITED FOR.
 * This section used to carry an @supports (grid-template-rows: masonry)
 * block, held in reserve for the day an engine shipped CSS Grid Level 3
 * masonry. It has been removed rather than left to rot, because it would
 * not have solved the problem that actually needed solving: native
 * masonry packs in ROW-MAJOR order, so the four newest would run across
 * the top the way the owner wants, but item 5 goes wherever the packing
 * algorithm puts it rather than under the shortest column, and the
 * hairline column dividers column-rule gave for free do not exist in
 * grid at all. Section 3B builds both properties explicitly. If native
 * masonry ever ships, re-read 3B before reaching for it; the JS is 60
 * lines and it is exact.
 */

/* ------------------------------------------------------------------ */
/* 3B. WIRE FEED MASONRY -- THE BUILT GRID                             */
/*                                                                      */
/* What main.js section 5 assembles, and the only thing in this file    */
/* that depends on scripting. Markup contract, and it is a contract:    */
/*                                                                      */
/*   div.rar-wire-grid                  N tracks, --rar-wire-cols       */
/*     ul.rar-wire-col          x N     one per track, li bricks inside */
/*                                                                      */
/*   ...or, on a paged sheet at four columns:                           */
/*                                                                      */
/*   div.rar-wire-grid                                                  */
/*     div.rar-wire-left               spans tracks 1-2                 */
/*       aside.rar-record-teaser       the dossier, two measures wide   */
/*       div.rar-wire-pair             tracks 1 and 2 under it          */
/*         ul.rar-wire-col      x 2                                     */
/*     ul.rar-wire-col          x 2    tracks 3 and 4, full height      */
/*                                                                      */
/* WHY THE NESTING RATHER THAN A ROW SPAN. The obvious shape is one     */
/* grid with the teaser at grid-column 1/3 and columns 3 and 4 spanning */
/* both rows. It breaks: a spanning item taller than the sum of the     */
/* tracks it crosses grows those tracks, so a long column 3 would grow  */
/* row 1 and push columns 1 and 2 down, opening a hole under the        */
/* teaser that nothing fills. Nesting a 2-track region inside the same  */
/* grid gives identical track widths (the inner pair inherits the same  */
/* gap, so its two columns measure exactly one outer track each) with   */
/* no row coupling at all.                                              */
/*                                                                      */
/* THE HAIRLINES. column-rule does not exist outside multicolumn, so    */
/* each column draws its own in the gutter to its left: left: -13px is  */
/* dead centre of the 26px gap. Columns stretch to the tallest (the     */
/* grid default), so the rules run the full depth of the sheet and end  */
/* level, exactly as column-rule drew them. main.js marks the one       */
/* leftmost column of the page rar-wire-col--first; :first-child cannot */
/* find it, because on a paged sheet it is nested two levels down.      */
/*                                                                      */
/* .rar-teaser--2col has no literal two-track span here either, and now */
/* never will: columns are independent boxes by construction. It stays  */
/* what it has always been in practice, a heavier single-column brick   */
/* (section 4).                                                         */
/* ------------------------------------------------------------------ */

.rar-wire-grid {
  display: grid;
  grid-template-columns: repeat(var(--rar-wire-cols, 4), minmax(0, 1fr));
  gap: 26px;
  margin: 26px 0 0;
}

.rar-wire-col {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

.rar-wire-col > * {
  margin: 0 0 26px;
}

/* The last brick in a column sets no trailing space; the column rules
   are stretched to a common depth regardless, so the bottoms read level
   without a row of dead air under them. */
.rar-wire-col > :last-child {
  margin-bottom: 0;
}

.rar-wire-col::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -13px;
  border-left: 1px solid var(--wp--preset--color--ink, #1a1712);
}

.rar-wire-col--first::before {
  content: none;
}

/* The paged sheet's left region: teaser above, two columns below it,
   the pair taking whatever depth is left so its hairline runs the full
   height of the sheet like the outer two. */
.rar-wire-left {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 26px;
  grid-column: span 2;
}

.rar-wire-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}

/* ------------------------------------------------------------------ */
/* 3C. THE PAGED RECORD TEASER                                         */
/*                                                                      */
/* Page 1 opens on the hand-set lead band. Page 2 and beyond must not   */
/* reprint it -- a reader who has scrolled past the Southern Strategy   */
/* does not need it again at the top of every page -- so the plugin     */
/* suppresses the band there and rar/record-teaser prints a standing    */
/* dossier in its place, rotating through whatever is filed under       */
/* /record/. Two measures wide at the top left of the sheet: cut on the */
/* left, title and opening over on the right, the shape a broadsheet    */
/* used for a standing feature trailed on an inside page.               */
/*                                                                      */
/* This is the second sanctioned red on the front page (SPEC section 4  */
/* reserves red for FROM THE RECORD labels; budget is 3 per screen and  */
/* the lead band's own label is not on this sheet, so the paged view    */
/* still spends 1 of 3).                                                */
/* ------------------------------------------------------------------ */

.rar-record-teaser {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  column-gap: 26px;
  align-items: start;
  border-bottom: 1px solid var(--wp--preset--color--ink, #1a1712);
  padding: 0 0 13px;
  margin: 0;
}

.rar-record-teaser .rar-press-photo {
  margin: 3px 0 0;
}

.rar-record-teaser .rar-press-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 18%;
}

.rar-record-teaser .rar-kicker {
  font-family: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--red, #8c1f13);
  margin: 0 0 6px;
}

.rar-record-teaser .rar-headline {
  font-family: "Libre Caslon Display", Georgia, "Times New Roman", serif;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.04;
  color: var(--wp--preset--color--ink, #1a1712);
  margin: 0 0 8px;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.rar-record-teaser .rar-headline a {
  color: var(--wp--preset--color--ink, #1a1712);
  text-decoration: none;
}

.rar-record-teaser .rar-headline a:hover,
.rar-record-teaser .rar-headline a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .08em;
}

.rar-record-teaser .rar-deck {
  font-family: "Libre Caslon Display", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.3;
  color: var(--wp--preset--color--ink, #1a1712);
  margin: 0 0 10px;
}

.rar-record-teaser p:not(.rar-deck):not(.rar-jump) {
  font-family: "Old Standard TT", Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--wp--preset--color--ink, #1a1712);
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  margin: 0 0 8px;
}

/* No cut on file for this dossier: the copy takes the whole measure
   rather than sitting in the narrow right-hand track with a hole beside
   it. Emitted by render.php, which knows whether it found a frame. */
.rar-record-teaser--nocut {
  grid-template-columns: minmax(0, 1fr);
}

/* Below four columns the teaser has no two-measure slot to sit in, so
   main.js hands it the full sheet above the feed and it sets as a band:
   cut left at a fixed measure, copy running beside it. */
.rar-record-teaser--full {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  margin-bottom: 0;
}

@media (max-width: 560px) {
  .rar-record-teaser,
  .rar-record-teaser--full {
    display: block;
  }

  .rar-record-teaser .rar-press-photo {
    max-width: 240px;
    margin: 0 0 13px;
  }
}

/* ------------------------------------------------------------------ */
/* 4. TEASERS                                                          */
/* Anatomy: kicker (category), serif headline link, Courier dateline,   */
/* 75-word excerpt, optional press photo, jump line. Each brick closes  */
/* with a 1px rule (border-bottom here, not a separator block: fewer    */
/* nodes, and the rule can never drift from its teaser).                */
/* ------------------------------------------------------------------ */

.rar-teaser {
  border-bottom: 1px solid var(--wp--preset--color--ink, #1a1712);
  padding: 0 0 13px;
}

.rar-teaser .rar-kicker {
  font-family: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink, #1a1712);
  margin: 0 0 6px;
}

.rar-teaser .rar-kicker a {
  color: var(--wp--preset--color--ink, #1a1712);
  text-decoration: none;
}

.rar-teaser .rar-kicker a:hover,
.rar-teaser .rar-kicker a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.rar-teaser .rar-headline {
  font-family: "Libre Caslon Display", Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.08;
  color: var(--wp--preset--color--ink, #1a1712);
  margin: 0 0 8px;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.rar-teaser .rar-headline a {
  color: var(--wp--preset--color--ink, #1a1712);
  text-decoration: none;
}

.rar-teaser .rar-headline a:hover,
.rar-teaser .rar-headline a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .08em;
}

.rar-teaser .rar-dateline {
  font-family: "Courier Prime", "Courier New", Courier, monospace;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: .02em;
  text-transform: uppercase; /* Courier dateline caps, done in CSS */
  color: var(--wp--preset--color--ink, #1a1712);
  margin: 0 0 8px;
}

.rar-teaser .wp-block-post-excerpt {
  margin: 0 0 8px;
}

.rar-teaser .wp-block-post-excerpt p {
  font-family: "Old Standard TT", Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--wp--preset--color--ink, #1a1712);
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  margin: 0;
}

/* DROP CAP ON EVERY WIRE BRICK (owner request, 2026-07-28).
   The lead band has had one since P1; this gives the same three-line
   float to each brick in the feed, which is what a broadsheet did to
   every story on the page and not just the lead.

   3.2em against the 16px/1.5 excerpt, not the band's 3.4em: the band's
   lede sets at 17px in a wider measure, and the same multiple in a
   264px column would leave the third line of the wrap with about four
   words in it. line-height .8 seats the cap on the third baseline.

   Scoped to the feed containers rather than .rar-teaser, deliberately.
   The same teaser markup is used by archive, search and index views,
   where the excerpt runs the full sheet width and a drop cap on a
   single-column list reads as a mistake rather than a convention.

   ONE KNOWN EFFECT, ACCEPTED. ::first-letter takes any punctuation
   attached to the first character with it, so an excerpt opening on a
   quotation mark sets a large quote mark as its cap. That is not a bug
   to be worked around -- there is no CSS way to skip punctuation, and a
   drop quote is a real compositor's convention, which is why the mark
   is nudged left by its own bearing below. */
.rar-wire-feed .rar-teaser .wp-block-post-excerpt p::first-letter,
.rar-wire-grid .rar-teaser .wp-block-post-excerpt p::first-letter {
  float: left;
  font-family: "Libre Caslon Display", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 3.2em;
  line-height: .8;
  padding: .04em .07em 0 0;
  margin-left: -.03em; /* optical: the cap's left bearing, hung out */
  color: var(--wp--preset--color--ink, #1a1712);
}

/* Press photo placement inside the brick. The single 1px ink border is
 * owned by components-fx.css (FX), which draws it on the img element
 * inside the figure; this file must never add a border to the figure OR
 * the img (a figure border AND an img border = a doubled rule). Verified
 * single-sourced at the P2 fix pass. Halftone screen and the color snap
 * are likewise FX's; this file only seats the figure in the column. */
.rar-teaser .rar-press-photo {
  margin: 2px 0 10px;
}

.rar-teaser .rar-press-photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* THE WIRE CUT CROP -- brick weight normalisation, section 3.
   Featured images arrive at whatever ratio the library happens to hold;
   uncropped, a portrait cut sets nearly twice the height of a landscape
   one in the same 280px measure, so two stacked bricks in one column
   could out-run the next column by a third of its height. That is the
   ragged bottom SPEC section 14 item 8 forbids, and with only 2 bricks
   per column there is no third item left to absorb it. One declared
   ratio makes the image portion of every brick identical, so column
   height varies only by headline and excerpt lines (tens of pixels, not
   hundreds) and the four columns end on a common baseline.

   The crop is performed in CSS over the untouched colour original, the
   same compositor's crop the lead band takes (section 2B) and exactly
   what SPEC section 9 demands: nothing is baked into the file, and the
   halftone screen and the colour snap still run over the crop. 4:3 is
   the gentler landscape of the two candidates (a 3:2 cut takes more off
   the top and bottom of the portrait frames this archive is full of),
   and it reads against the band's 4:5 and 1:1 cuts rather than echoing
   them. object-position sits above centre because press portraits carry
   the head in the upper third.

   Scoped to the two feed containers on purpose: archive, search and
   index teasers run a single-column list where variable cut heights
   cost nothing, and components-article.css owns their treatment.

   BOTH containers are named, and both must stay named. .rar-wire-feed
   is the no-JS multicolumn list; .rar-wire-grid is what main.js builds
   in its place, at which point the bricks are no longer inside anything
   called rar-wire-feed at all. Dropping either selector does not just
   lose a crop: it is this declared ratio that lets the masonry pass
   measure a brick's true height BEFORE its photograph has loaded, so
   losing it on the JS path would put every column height wrong at the
   moment placement is decided. */
.rar-wire-feed .rar-teaser .rar-press-photo img,
.rar-wire-grid .rar-teaser .rar-press-photo img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 28%;
}

/* 2-col span variant: the bigger story with a halftone image. In the
 * multicolumn fallback it renders as a heavier single-column brick
 * (larger head); its literal two-track span activates only inside the
 * @supports grid-masonry block above. */
.rar-teaser--2col .rar-headline {
  font-size: 28px;
  line-height: 1.03;
}

/* ------------------------------------------------------------------ */
/* 5. ROLL CALL                                                        */
/* Rule-boxed head (classic double box: border + offset outline) over   */
/* text-only grassroots briefs. Ships as a registered pattern; sized    */
/* to sit as one masonry brick when the page is hand-composed.          */
/* ------------------------------------------------------------------ */

.rar-roll-call h3 {
  font-family: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--wp--preset--color--ink, #1a1712);
  border: 1px solid var(--wp--preset--color--ink, #1a1712);
  outline: 1px solid var(--wp--preset--color--ink, #1a1712);
  outline-offset: 2px;
  padding: 7px 8px 6px;
  margin: 3px 3px 16px;
}

.rar-roll-call .wp-block-post-template {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rar-roll-call .wp-block-post-template > * {
  break-inside: avoid;
  margin: 0 0 13px;
}

.rar-roll-call .rar-teaser {
  padding-bottom: 10px;
}

.rar-roll-call .rar-headline {
  font-size: 20px; /* SPEC briefs 20px */
  line-height: 1.1;
}

.rar-roll-call .rar-dateline {
  font-size: 12px;
  margin: 0 0 6px;
}

.rar-roll-call .wp-block-post-excerpt p {
  font-size: 15px;
  line-height: 1.45;
}

/* ------------------------------------------------------------------ */
/* 6. JUMP LINES                                                       */
/* Courier, right-set, the ENTIRE line is the anchor (display: block),  */
/* underline on hover/focus only. Covers both markup shapes: a p        */
/* wrapper classed rar-jump with an inner a, or an anchor itself        */
/* classed rar-jump (whichever rar/jump-line renders).                  */
/* ------------------------------------------------------------------ */

.rar-jump {
  font-family: "Courier Prime", "Courier New", Courier, monospace;
  font-size: 13px;
  line-height: 1.4;
  text-align: right;
  color: var(--wp--preset--color--ink, #1a1712);
  margin: 0;
}

.rar-jump a,
a.rar-jump {
  display: block;
  font-family: "Courier Prime", "Courier New", Courier, monospace;
  font-size: 13px;
  line-height: 1.4;
  text-align: right;
  color: var(--wp--preset--color--ink, #1a1712);
  text-decoration: none;
}

.rar-jump a:hover,
.rar-jump a:focus-visible,
a.rar-jump:hover,
a.rar-jump:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .12em;
}

/* ------------------------------------------------------------------ */
/* 7. TYPED PAGINATION                                                 */
/* Core query-pagination restyled as Courier typed lines, labels per    */
/* DESIGN-SYSTEM amendment 13.8: previous (toward newer) reads          */
/* -- BACK TO THE LATEST --, next (toward older) reads                  */
/* -- MORE OF THE RECORD --. The whole typed label is the anchor (core  */
/* wraps the full label text in the a). Numbers plain, current number   */
/* pressed harder (bold). Base class also dresses standalone typed      */
/* status lines (roll call no-results).                                 */
/* ------------------------------------------------------------------ */

.rar-more-line {
  font-family: "Courier Prime", "Courier New", Courier, monospace;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--wp--preset--color--ink, #1a1712);
}

nav.rar-more-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 34px;
  row-gap: 8px;
  border-top: 1px solid var(--wp--preset--color--ink, #1a1712);
  padding-top: 13px;
  margin: 8px 0 34px;
}

p.rar-more-line {
  margin: 0;
}

.rar-more-line a {
  color: var(--wp--preset--color--ink, #1a1712);
  text-decoration: none;
}

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

.rar-more-line .page-numbers {
  padding: 0 3px;
}

.rar-more-line .page-numbers.current {
  font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* 8. RESPONSIVE                                                       */
/* The wire feed collapses on its own (columns: 4 260px). Only the      */
/* lead band needs a hand: below 760px it stacks, the dividing hairline */
/* rotates from vertical to horizontal, and below 600px the lead column */
/* gives up its second measure so the cut runs full width.              */
/* ------------------------------------------------------------------ */

@media (max-width: 760px) {
  .rar-lead-band {
    grid-template-columns: minmax(0, 1fr);
  }

  .rar-lead-band > :first-child {
    padding-right: 0;
  }

  .rar-lead-band > :last-child {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--wp--preset--color--ink, #1a1712);
    padding-top: 21px;
    margin-top: 21px;
  }

  /* Once the band stacks, both columns run the full sheet, and a cut set
     to 100 percent of that measure stops being a press cut and becomes a
     slab: 594px square on a 620px sheet. Cap both at mug scale. The lead
     cut is unaffected above 600px, where it still sits in its own track
     at about 283px. */
  .rar-lead-band .rar-press-photo {
    max-width: 300px;
  }
}

/* Below 600px a two-measure lead column stops working: the cut would be
   a postage stamp and the lede measure would fall under 200px. The
   article returns to plain flow, which by source order puts the cut at
   full measure under the lede and above the jump line. The grid-column
   declarations in section 2 go inert on their own; nothing to undo. */
@media (max-width: 600px) {
  .rar-lead-band > :first-child {
    display: block;
  }

  .rar-lead-band .rar-press-photo {
    margin: 13px 0;
  }
}

/* ------------------------------------------------------------------ */
/* 9. THE ONE LOOSE CLIPPING                                           */
/* SPEC section 11: "At most one front-page element (a torn slip or a  */
/* wire brief styled as a physical clipping) may drift almost           */
/* imperceptibly, plus or minus 1px translate, plus or minus 0.3 deg,   */
/* about 8s, like paper not quite held down." This is that one element: */
/* the third brick in the wire feed, which under the four-column        */
/* balance lands at the head of column 2, high enough that a reader     */
/* registers the page as alive early (the SPEC test: you feel it before */
/* you can point at it) without being the first thing the eye lands on. */
/*                                                                      */
/* IT IS NOW A CLASS, NOT A POSITIONAL SELECTOR (2026-07-27). This      */
/* section used to read .rar-wire-feed > :nth-child(3), with a note     */
/* that a literal greppable class was wanted but that nothing in the    */
/* theme could write one, because core/post-template stamps identical   */
/* markup for every row in the loop. main.js section 5 now places the   */
/* bricks itself, so it marks the one brick on its way past:            */
/* .rar-wire-loose, on the li, and never on the advert tile.            */
/*                                                                      */
/* The brick it lands on is unchanged in intent. Under greedy placement */
/* item 2 is a COLUMN TOP at every column count -- head of column 2 on  */
/* the front page, head of column 4 on a paged sheet -- which is what   */
/* the effect was specified for: high enough that a reader registers    */
/* the page as alive early (you feel it before you can point at it),    */
/* never the first thing the eye lands on.                              */
/*                                                                      */
/* The old positional selector is NOT kept as a no-JS fallback, and the */
/* omission is deliberate: without scripting there is no advert tile    */
/* and no rebuilt grid, but there is also no way to know which brick    */
/* nth-child(3) will balance to. A page with scripting off simply       */
/* prints still. Losing an almost-imperceptible 1px drift is the        */
/* smallest thing on this page worth losing.                            */
/*                                                                      */
/* WHY .rar-wire-loose AND NOT fx's .rar-loose. components-fx.css       */
/* section 5 defines .rar-loose with animation-play-state: paused on    */
/* hover. That is the version this page cannot use -- see the hover     */
/* note below. Same effect, same keyframes, different hover exit.       */
/*                                                                      */
/* MOTION BUDGET. Two moving elements per viewport is the SPEC section  */
/* 11 hard cap, and the second slot is already spoken for above 1360px  */
/* by the coffee steam that main.js injects with the desk props         */
/* (desk.css section 2). So this rule is capped at 1359.98px, mirroring */
/* desk.css's (min-width: 1360px) with no gap and no overlap:           */
/*   >= 1360px  lead-band curl + coffee steam        = 2                */
/*   <  1360px  lead-band curl + this loose clipping = 2                */
/* Never three at any width. If the integrator would rather the         */
/* clipping run at desk widths too, the steam has to go first, and then */
/* this max-width bound comes off; do not remove one without the other. */
/*                                                                      */
/* NO NEW EFFECT IS DEFINED HERE. rar-drift and its keyframes belong to */
/* components-fx.css section 5, which registers them inside             */
/* prefers-reduced-motion: no-preference; this rule carries the same    */
/* condition, so reduced motion is the default-off path (Appendix A6)   */
/* rather than something the kill block has to undo. The hover pause is */
/* fx's own ratified answer for a drifting brick ("a hand resting on    */
/* the page holds the paper still"): it stands in for the paper stir,   */
/* which a running transform animation would override anyway.           */
/* ------------------------------------------------------------------ */

@media (max-width: 1359.98px) and (prefers-reduced-motion: no-preference) {
  .rar-wire-loose .rar-teaser {
    animation: rar-drift 8s ease-in-out infinite;
  }

  /* The drift must DROP on hover, not merely pause, and it must be
     triggered from the static list item rather than the moving teaser.
     Reason (owner-reported, diagnosed on staging 2026-07-27): a running
     transform animation promotes this brick to its own compositing
     layer, and a composited layer with a live transform animation does
     not reliably repaint a `filter` change on a descendant. The colour
     snap on this one brick's press photo therefore computed correctly
     (getComputedStyle returned `none`) while nothing changed on screen.
     `animation-play-state: paused` keeps the animation active and so
     keeps the layer promoted; `animation: none` removes it, the layer
     de-composites, and the halftone lift and colour snap repaint like
     every other brick. Hovering the LI (never transformed) latches the
     moment the pointer enters the brick, before it reaches the figure.
     The brick settles back to its untransformed position, which at a
     1px / 0.3deg amplitude is imperceptible, and reads as the metaphor
     the effect was written for: a hand resting on the page holds the
     paper still. */
  .rar-wire-loose:hover .rar-teaser {
    animation: none;
  }
}

/* ------------------------------------------------------------------ */
/* 2C. LEAD BAND -- THE WIDE (16:9) CUT                                */
/*                                                                     */
/* Section 2B seats the lead cut in measure 2 of a 3fr/2fr grid and     */
/* crops it 4:5, which suits the portrait the Southern Strategy runs    */
/* (Goldwater, 1962). The owner intends 16:9 for future Record          */
/* features, and a 16:9 frame in a 2fr measure sets only about 180px    */
/* tall against a lede several hundred deep, leaving the cut's own      */
/* column half empty. Wrong shape for the slot.                         */
/*                                                                     */
/* So a wide cut takes the whole measure instead, the way a broadsheet  */
/* runs a scene photograph across the top of its lead story, with the   */
/* copy set beneath it. Add rar-cut--wide to a cut's classes in         */
/* lead-band.php and the geometry follows; nothing else changes.        */
/*                                                                     */
/* Source order still matters: .rar-body precedes the figure in the     */
/* pattern, so the copy would seat above the photograph. The wide cut   */
/* pulls itself to row 1 with grid-row so the picture leads, which is   */
/* what a lead cut is for.                                              */
/* ------------------------------------------------------------------ */

.rar-lead-band > :first-child > .rar-press-photo.rar-cut--wide {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0 0 21px;
}

.rar-lead-band > :first-child > .rar-press-photo.rar-cut--wide img {
  aspect-ratio: 16 / 9;
  object-position: 50% 40%;
  width: 100%;
}

/* With the cut across the top, the lede has the full measure under it,
   so it sets as two columns the way a lead story does rather than one
   long line. The drop cap stays on the first column only. */
.rar-lead-band > :first-child:has(.rar-cut--wide) > .rar-body {
  grid-column: 1 / -1;
  columns: 2 var(--rar-lead-col, 240px);
  column-gap: 26px;
  column-rule: 1px solid var(--wp--preset--color--ink, #1a1712);
}

/* Stacked, a wide cut is already full width; drop the two-column set so
   a phone does not get two columns of four words. */
@media (max-width: 900px) {
  .rar-lead-band > :first-child:has(.rar-cut--wide) > .rar-body {
    columns: auto;
    column-rule: none;
  }
}