/*
 * components-v2.css -- THE SEPTEMBER 2026 REPLATE
 *
 * Owner-approved redesign, 2026-09-25. Loaded last, after desk.css.
 *
 * Two parts, and they are kept apart on purpose:
 *
 *   PART A: LIVE FIXES. Apply to every reader now.
 *   PART B: THE REPLATE. Every rule is scoped under body.rar-v2, which
 *           the plugin (inc/redesign.php) adds only when the replate is
 *           switched on: ?edition=v2 on any URL for the owner's preview,
 *           or the rar_v2 option for everyone. With the switch off, Part
 *           B matches nothing.
 *
 * The reference throughout is the Washington Post's front page of
 * August 9, 1974: a banner across the full sheet, the lead's art and
 * lede beneath it, a boxed index and standing features down the right
 * hand column, then the rest of the file in descending weight.
 */

/* ================================================================== */
/* PART A: LIVE FIXES                                                  */
/* ================================================================== */

/* A1. Ears were 11px Courier, which reads as a smudge at arm's length. */
.rar-masthead .rar-ears > * {
  font-size: 13px;
}

/* A2. Justified copy in a phone measure. At 360px there are six or seven
   words to a line and hyphenation cannot find enough breaks, so justify
   opens rivers a word wide ("On   Saturday,   Georgia's"). A compositor
   setting a column that narrow would have set it ragged; so do we.
   Hyphenation stays on, which is what keeps the rag even. */
@media (max-width: 600px) {
  .rar-body p,
  .rar-body,
  .rar-rebuttal-exhibit p,
  .rar-lead-band .rar-body p,
  .rar-record-teaser p:not(.rar-deck):not(.rar-jump),
  .rar-teaser .wp-block-post-excerpt p,
  .wp-block-post-template:not(.rar-wire-feed) .rar-teaser .wp-block-post-excerpt__excerpt {
    text-align: left;
  }
}

/* A3. The TrustedSite badge, set at the foot of the sheet instead of
   floating over it. The float is switched off by the plugin's
   .trustedsite-tm-float-disable marker; this is the belt to that brace. */
#trustedsite-tm-image {
  display: none !important;
}

.rar-trustmark {
  display: flex;
  justify-content: center;
  margin: 13px 0 0;
}

.rar-trustmark img {
  display: block;
  filter: grayscale(1);
  mix-blend-mode: multiply;
}

/* ================================================================== */
/* PART B: THE REPLATE (body.rar-v2 only)                              */
/* ================================================================== */

/* ------------------------------------------------------------------ */
/* B1. MASTHEAD: boxed ears either side of the nameplate, and the      */
/*     edition strip under the folio line.                             */
/* ------------------------------------------------------------------ */

.rar-ears-v2 {
  display: none;
}

.rar-edition-strip {
  display: none;
}

@media (min-width: 761px) {
  .rar-v2 .rar-masthead {
    display: grid;
    grid-template-columns: 172px minmax(0, 1fr) 172px;
    column-gap: 21px;
    align-items: center;
  }

  .rar-v2 .rar-masthead > * {
    grid-column: 1 / -1;
  }

  /* The old ears row gives way to the boxes. */
  .rar-v2 .rar-masthead > .rar-ears {
    display: none;
  }

  .rar-v2 .rar-masthead > .rar-ears-v2 {
    display: contents;
  }

  .rar-v2 .rar-masthead > .rar-nameplate {
    grid-column: 2;
    grid-row: 1;
    font-size: clamp(44px, 6.2vw, 84px);
    margin: 13px 0 8px;
  }

  .rar-v2 .rar-ear {
    grid-row: 1;
    align-self: center;
    margin: 0;
    border: 1px solid var(--rar-ink);
    outline: 1px solid var(--rar-ink);
    outline-offset: 2px;
    padding: 8px 10px 9px;
    font-family: var(--rar-face-courier);
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: 0.02em;
    text-align: center;
    color: var(--rar-ink);
  }

  .rar-v2 .rar-ear--l {
    grid-column: 1;
  }

  .rar-v2 .rar-ear--r {
    grid-column: 3;
  }

  .rar-v2 .rar-ear-head {
    display: block;
    font-family: var(--rar-face-gothic);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--rar-ink);
    padding-bottom: 4px;
    margin-bottom: 5px;
  }

  .rar-v2 .rar-masthead > .rar-folio-line {
    grid-row: 2;
  }

  .rar-v2 .rar-masthead > .rar-edition-strip {
    grid-row: 3;
  }

  .rar-v2 .rar-masthead > .rar-rule-oxford {
    grid-row: 4;
  }

  .rar-v2 .rar-masthead > .rar-nav {
    grid-row: 5;
  }
}

/* The strip: VOL. XV, NO. 97 . FRIDAY, SEPTEMBER 25, 2026 . FINAL EDITION . FREE */
.rar-v2 .rar-edition-strip {
  display: block;
  margin: 8px 0 0;
  padding: 5px 0 4px;
  border-top: 1px solid var(--rar-ink);
  font-family: var(--rar-face-courier);
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--rar-ink);
}

.rar-v2 .rar-edition-strip span {
  padding: 0 0.5em;
}

@media (max-width: 760px) {
  .rar-v2 .rar-edition-strip {
    font-size: 10.5px;
    letter-spacing: 0.04em;
  }
}

/* ------------------------------------------------------------------ */
/* B2. FRONT PAGE: banner, lead, rail.                                 */
/* ------------------------------------------------------------------ */

.rar-front {
  --rar-col-gap: 26px;
  margin: 8px 0 0;
}

.rar-front p {
  margin: 0;
}

.rar-front a {
  color: inherit;
}

.rar-front .rar-kicker {
  font-family: var(--rar-face-gothic);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rar-ink);
  margin: 0 0 5px;
}

.rar-front .rar-kicker a,
.rar-front .rar-headline a,
.rar-front .rar-banner a,
.rar-front .rar-box-title,
.rar-front .rar-leaders a,
.rar-inside-rail .rar-box-title,
.rar-inside-rail .rar-file a {
  text-decoration: none;
}

.rar-front .rar-headline a:hover,
.rar-front .rar-headline a:focus-visible,
.rar-front .rar-banner a:hover,
.rar-front .rar-banner a:focus-visible,
.rar-front .rar-box-title:hover,
.rar-front .rar-box-title:focus-visible,
.rar-front .rar-leaders a:hover span:first-child,
.rar-front .rar-leaders a:focus-visible span:first-child,
.rar-inside-rail .rar-box-title:hover,
.rar-inside-rail .rar-box-title:focus-visible,
.rar-inside-rail .rar-file a:hover,
.rar-inside-rail .rar-file a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.1em;
}

.rar-front .rar-dateline {
  font-family: var(--rar-face-courier);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.rar-front .rar-copy {
  font-family: var(--rar-face-body);
  font-size: 16px;
  line-height: 1.5;
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  color: var(--rar-ink);
}

.rar-front .rar-jump {
  font-family: var(--rar-face-courier);
  font-size: 13px;
  text-align: right;
  margin: 8px 0 0;
}

.rar-front .rar-jump a {
  text-decoration: none;
}

.rar-front .rar-jump a:hover,
.rar-front .rar-jump a:focus-visible {
  text-decoration: underline;
}

/* The banner. Across the whole sheet, the way the Post set NIXON
   RESIGNS: the one thing on the page that is bigger than the nameplate's
   line of sight. */
.rar-front-lead {
  text-align: center;
  padding: 0 0 13px;
  border-bottom: 1px solid var(--rar-ink);
}

.rar-front-lead .rar-kicker {
  font-size: 13px;
  color: var(--rar-red);
  margin-bottom: 8px;
}

.rar-banner {
  font-family: var(--rar-face-head);
  font-weight: 700;
  font-size: clamp(34px, 5.4vw, 68px);
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--rar-ink);
  margin: 0 auto 10px;
  max-width: 22ch;
}

.rar-front .rar-front-deck {
  font-family: var(--rar-face-head);
  font-style: italic;
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.3;
  text-wrap: balance;
  max-width: 52ch;
  margin: 0 auto;
}

/* Lead body (three of four columns) and the rail (the fourth). */
.rar-front-top {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  column-gap: var(--rar-col-gap);
  padding: 16px 0 21px;
  border-bottom: 3px solid var(--rar-ink);
  box-shadow: 0 4px 0 -3px var(--rar-ink);
  margin-bottom: 8px;
}

/* THE LEAD, WRAPPED ROUND ITS CUT. Three equal measures: the story runs
   the full depth of measure one, the cut takes the top of measures two
   and three, and the story carries on underneath it in a two-column
   block (front-v2.js threads the copy and sets the depth to the rail's).
   Reading order is the order a 1974 reader followed: down column one,
   then across under the picture. */
.rar-front-lead-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "lede cut   cut"
    "lede carry carry";
  column-gap: var(--rar-col-gap);
  align-items: start;
}

.rar-front-lede {
  grid-area: lede;
}

.rar-front-lead-body > .rar-front-cut {
  grid-area: cut;
}

.rar-front-carry {
  grid-area: carry;
  margin-top: 16px;
  columns: 2;
  column-gap: var(--rar-col-gap);
  column-rule: 1px solid var(--rar-ink);
  column-fill: auto;
  overflow: hidden;
}

.rar-front-carry[hidden] {
  display: none;
}

/* Threaded copy runs as continuous columns: a paragraph broken at the
   foot of one column resumes at the head of the next with no gap and no
   ellipsis, and its first line is not a new paragraph. */
.rar-front-lead-body .rar-copy {
  margin: 0 0 10px;
}

.rar-front-lead-body .rar-copy.is-broken {
  margin-bottom: 0;
  text-align-last: justify;
}

.rar-front-lead-body .rar-copy--quote.is-broken {
  text-align-last: auto;
}

/* The halves of a broken quotation read as one slip: no closing edge at
   the foot of the column, no opening edge at the head of the next. */
.rar-front-lead-body .rar-copy--quote.is-broken {
  padding-bottom: 0;
}

.rar-front-lead-body .rar-copy--quote.is-carried {
  padding-top: 2px;
}

.rar-front-carry .rar-copy:first-child {
  margin-top: 0;
}

.rar-front-carry .rar-jump {
  margin-top: 4px;
  break-inside: avoid;
}

/* A pulled quotation carried into the lead: typewriter on the slip paper,
   the torn-slip idiom in miniature. */
.rar-front-lead-body .rar-copy--quote {
  font-family: "Special Elite", "Courier New", monospace;
  font-size: 15px;
  line-height: 1.45;
  text-align: left;
  color: rgb(26 23 18 / 0.9);
  background: var(--rar-paper-slip);
  border-left: 2px solid var(--rar-ink);
  padding: 6px 8px;
}

.rar-front-cut {
  margin: 0;
}

.rar-front-cut img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 30%;
}

.rar-front-cut figcaption {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.rar-front-lede .rar-dateline + .rar-copy::first-letter {
  float: left;
  font-family: var(--rar-face-head);
  font-weight: 700;
  font-size: 3.4em;
  line-height: 0.78;
  padding: 6px 6px 0 0;
}

.rar-front-rail {
  border-left: 1px solid var(--rar-ink);
  padding-left: var(--rar-col-gap);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ------------------------------------------------------------------ */
/* B3. THE BOXES: INSIDE, THE RECORD, CORRECTIONS, THE FILE, and the   */
/*     lists that share their furniture.                               */
/* ------------------------------------------------------------------ */

.rar-box {
  border: 1px solid var(--rar-ink);
  padding: 10px 12px 12px;
  background: var(--rar-paper-slip);
}

.rar-box-head {
  font-family: var(--rar-face-gothic);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--rar-ink);
  border-bottom: 3px solid var(--rar-ink);
  padding: 0 0 6px;
  margin: 0 0 9px;
}

.rar-box-head a {
  color: inherit;
  text-decoration: none;
}

.rar-box--record .rar-box-head {
  color: var(--rar-red);
}

.rar-box-note {
  font-family: var(--rar-face-courier);
  font-size: 12px;
  line-height: 1.45;
  margin: 0 0 8px;
}

.rar-box-note a {
  color: inherit;
}

.rar-box-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rar-box-list li {
  padding: 7px 0;
  border-top: 1px solid var(--rar-ink);
}

.rar-box-list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.rar-box-title {
  display: block;
  font-family: var(--rar-face-head);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.12;
  color: var(--rar-ink);
}

.rar-box-deck {
  display: block;
  font-family: var(--rar-face-head);
  font-style: italic;
  font-size: 14px;
  line-height: 1.3;
  margin: 3px 0 0;
}

.rar-box-folio {
  display: block;
  font-family: var(--rar-face-courier);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 3px 0 0;
}

/* INSIDE: an index with dot leaders, section name to page number. */
.rar-leaders {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--rar-face-courier);
  font-size: 13px;
  line-height: 1.7;
}

.rar-leaders a {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--rar-ink);
}

.rar-leaders a span:first-child {
  flex: 0 1 auto;
}

.rar-leaders a::after {
  content: "";
  order: 1;
  flex: 1 1 auto;
  border-bottom: 1px dotted var(--rar-ink);
  transform: translateY(-4px);
}

.rar-leaders a span:last-child {
  order: 2;
  font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* B4. THE WIRE: tiers below the fold.                                 */
/* ------------------------------------------------------------------ */

.rar-front-wirehead .rar-kicker--wire {
  margin-top: 13px;
}

/* The front's paragraph reset (.rar-front p) outranks the note's own
   margin in components-front.css; give the section head its air back so
   the first tier does not butt against it. */
.rar-front .rar-front-wirehead .rar-section-note {
  margin: 0 0 21px;
}

.rar-story .rar-headline {
  font-family: var(--rar-face-head);
  font-weight: 700;
  color: var(--rar-ink);
  text-wrap: balance;
  margin: 0 0 8px;
}

/* Second tier: two stories, each across two columns, art beside copy. */
.rar-front-second {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--rar-col-gap);
  padding: 0 0 21px;
  border-bottom: 1px solid var(--rar-ink);
}

.rar-front-second .rar-story + .rar-story {
  border-left: 1px solid var(--rar-ink);
  padding-left: var(--rar-col-gap);
}

.rar-story--b .rar-headline {
  font-size: clamp(24px, 2.4vw, 31px);
  line-height: 1.03;
}

.rar-story-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--rar-col-gap);
  align-items: start;
}

.rar-story-body .rar-press-photo {
  margin: 0;
}

.rar-story-body .rar-press-photo img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 25%;
}

/* A story without art takes both measures for its copy. */
.rar-story-body > .rar-story-copy:only-child {
  grid-column: 1 / -1;
}

/* Third tier: four columns under hairline rules, each with a cut under
   its head (owner, 2026-09-27: the pictures come back). */
.rar-front-third {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--rar-col-gap);
  padding: 16px 0 21px;
  border-bottom: 1px solid var(--rar-ink);
}

.rar-front-third {
  column-gap: 0;
}

.rar-front-third .rar-story {
  padding: 0 13px;
}

.rar-front-third .rar-story:first-child {
  padding-left: 0;
}

.rar-front-third .rar-story:last-child {
  padding-right: 0;
}

.rar-front-third .rar-story + .rar-story {
  border-left: 1px solid var(--rar-ink);
}

.rar-story--c .rar-headline {
  font-size: 20px;
  line-height: 1.1;
}

/* The third tier's cuts take the wire feed's crop (components-front.css,
   THE WIRE CUT CROP): one declared 4:3 ratio, so every column's picture
   is the same height and the row still copyfits to a common baseline.
   The ratio also gives each cut its height before the photograph loads,
   which is what front-v2.js needs when it clamps the copy beneath. */
.rar-story--c .rar-press-photo {
  margin: var(--rar-tight) 0;
}

.rar-story--c .rar-press-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 28%;
}

/* IN BRIEF and the advertisement. */
.rar-front-brief {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  column-gap: var(--rar-col-gap);
  align-items: start;
  padding: 16px 0 8px;
}

.rar-in-brief ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--rar-col-gap);
}

.rar-in-brief ul {
  column-gap: 0;
}

.rar-in-brief li {
  padding: 0 13px;
}

.rar-in-brief li:first-child {
  padding-left: 0;
}

.rar-in-brief li + li {
  border-left: 1px solid var(--rar-ink);
}

/* IN BRIEF, COPYFIT TO THE ADVERTISEMENT. The advert is a fixed 250x360
   creative, so it sets the depth of this row every time. The briefs
   stretch to that depth: each column is a flex stack whose copy box
   takes whatever room the head leaves and contributes nothing to the
   row's height itself (flex-basis 0), so the advert, not the text, decides
   how deep the row runs. front-v2.js then clamps each copy box to whole
   lines with an ellipsis, and the jump lines sit on the common baseline
   at the foot, level with the foot of the advert. CORRECTIONS runs as a
   single ruled standing line across the bottom of the three columns. */
.rar-front-brief {
  align-items: stretch;
}

.rar-in-brief {
  display: flex;
  flex-direction: column;
}

.rar-in-brief > ul {
  flex: 1 1 auto;
}

.rar-in-brief li {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.rar-brief-fill {
  flex: 1 1 0;
  min-height: 7.5em;
  overflow: hidden;
  margin: 0 0 4px;
}

.rar-brief-fill .rar-copy {
  font-size: 15px;
  line-height: 1.5;
}

.rar-brief-fill .rar-copy.is-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rar-in-brief .rar-jump {
  margin-top: auto;
}

.rar-corrections-strip {
  margin: 13px 0 0;
  padding: 7px 0 0;
  border-top: 3px solid var(--rar-ink);
  font-family: var(--rar-face-courier);
  font-size: 12px;
  line-height: 1.45;
  color: var(--rar-ink);
}

.rar-corrections-head {
  font-family: var(--rar-face-gothic);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rar-red);
  margin-right: 8px;
}

.rar-corrections-strip a {
  color: inherit;
}

@media (max-width: 900px) {
  .rar-brief-fill {
    flex: 0 0 auto;
    min-height: 0;
  }
}

.rar-in-brief .rar-headline {
  font-family: var(--rar-face-head);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.15;
  margin: 0 0 6px;
}

.rar-front-brief .rar-signal--front {
  border-left: 1px solid var(--rar-ink);
  padding-left: var(--rar-col-gap);
}

/* ------------------------------------------------------------------ */
/* B5. FRONT PAGE, NARROWER SHEETS.                                    */
/* ------------------------------------------------------------------ */

@media (max-width: 1100px) {
  .rar-front-third {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 21px;
  }

  .rar-front-third .rar-story:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }

  .rar-front-third .rar-story:nth-child(even) {
    padding-right: 0;
  }
}

@media (max-width: 900px) {
  .rar-front-lead-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "cut"
      "lede";
    row-gap: 13px;
  }

  .rar-front-top,
  .rar-front-second,
  .rar-front-brief {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 21px;
  }

  .rar-front-rail,
  .rar-front-second .rar-story + .rar-story,
  .rar-front-brief .rar-signal--front {
    border-left: 0;
    padding-left: 0;
  }

  .rar-front-second .rar-story + .rar-story {
    border-top: 1px solid var(--rar-ink);
    padding-top: 16px;
  }

  .rar-in-brief ul {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 13px;
  }

  .rar-in-brief li,
  .rar-in-brief li + li {
    border-left: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .rar-in-brief li + li {
    border-top: 1px solid var(--rar-ink);
    padding-top: 13px;
  }
}

@media (max-width: 600px) {
  .rar-box--inside {
    display: none;
  }

  .rar-front-lead-body,
  .rar-story-body,
  .rar-front-third {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 13px;
  }

  .rar-front-third .rar-story,
  .rar-front-third .rar-story + .rar-story {
    border-left: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .rar-front-third .rar-story + .rar-story {
    border-top: 1px solid var(--rar-ink);
    padding-top: 16px;
  }

  .rar-story-body .rar-press-photo img {
    aspect-ratio: 3 / 2;
  }

  .rar-front-lead {
    text-align: left;
  }

  .rar-banner {
    margin-left: 0;
  }
}

/* ------------------------------------------------------------------ */
/* B6. THE INSIDE PAGE: running head, article and side column.          */
/* ------------------------------------------------------------------ */

.rar-running-head {
  display: flex;
  justify-content: space-between;
  gap: 13px;
  font-family: var(--rar-face-courier);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rar-ink);
  border-bottom: 1px solid var(--rar-ink);
  padding: 4px 0 5px;
  margin: 8px 0 0;
}

.rar-running-head span:first-child {
  font-weight: 700;
}

/* The byline row's own folio echo is now the running head's job. */
.rar-v2 .rar-byline-row > :nth-last-child(-n + 2) {
  display: none;
}

@media (min-width: 981px) {
  .rar-v2 .rar-inside {
    display: grid;
    /* 352 = 26 of gutter inside the rule + a 326px box, which is a 300px
       advert plus the box's 12px padding and 1px rule either side. */
    grid-template-columns: minmax(0, 640px) 352px;
    column-gap: 26px;
    justify-content: center;
    align-items: start;
    max-width: none;
  }

  .rar-v2 .rar-inside > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none;
  }

  .rar-v2 .rar-inside-main {
    grid-column: 1;
  }

  .rar-v2 .rar-inside-rail {
    grid-column: 2;
    border-left: 1px solid var(--rar-ink);
    padding-left: 26px;
    /* Level with the top of the article's first element (the cut, which
       the constrained layout seats flush as a first child). */
    margin-top: 0 !important;
  }
}

.rar-inside-rail {
  display: flex;
  flex-direction: column;
  gap: 21px;
}

@media (max-width: 980px) {
  .rar-inside-rail {
    max-width: min(72ch, 100%);
    margin: 34px auto 0;
    padding-top: 21px;
    border-top: 3px solid var(--rar-ink);
  }
}

.rar-file {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 10px;
  font-family: var(--rar-face-courier);
  font-size: 12px;
  line-height: 1.4;
}

.rar-file dt {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rar-file dd {
  margin: 0;
}

.rar-file a {
  color: inherit;
}

/* The advertisement, boxed like the rest of the column's furniture. The
   box is sized to the network's 300px creative plus its own padding and
   rule; the wire tile's inline-block slot shrink-wraps whatever arrives,
   so a 250px creative simply centres inside the same box. */
.rar-signal.rar-signal--rail {
  box-sizing: border-box;
  width: 100%;
  max-width: 326px;
  border: 1px solid var(--rar-ink);
  background: var(--rar-paper-slip);
  padding: 10px 12px 8px;
  text-align: center;
}

.rar-signal--rail .rar-signal-label {
  font-family: var(--rar-face-gothic);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rar-ink);
  border-bottom: 3px solid var(--rar-ink);
  padding: 0 0 6px;
  margin: 0 0 10px;
}

.rar-signal--rail .signal-slot {
  max-width: 300px;
  min-height: 250px;
}

/* Earlier on the Wire: a small cut beside each head, the way an inside
   page ran thumbnail "mugs" down a digest column. Square, halftoned like
   every other cut, and outside the tab order (the headline is the link). */
.rar-box-list li.has-thumb {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
}

.rar-box-thumb {
  margin: 0;
}

.rar-box-thumb img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 25%;
}

.rar-box--earlier .rar-box-title {
  font-size: 15px;
  line-height: 1.15;
}

/* Phone measure: ragged right for the front page's copy too. Last in the
   file so it outranks the justified settings above at equal weight. */
@media (max-width: 600px) {
  .rar-front .rar-copy {
    text-align: left;
  }
}

/* ------------------------------------------------------------------ */
/* B7. ONE GRID FOR THE WHOLE SHEET (full width, four columns).        */
/*                                                                      */
/* Each band used to size its own columns (3fr/1fr with a gutter, 2 up  */
/* with a gutter, 4 up without), so the hairlines between columns fell  */
/* a few pixels apart from band to band and the advert overhung its     */
/* column. Every band now sits on the same four equal columns with no   */
/* grid gap; the gutter is 13px of padding either side of the rule, so  */
/* every rule on the page lands on one of the same three lines, the way */
/* a compositor's column rules ran unbroken down the chase.             */
/* ------------------------------------------------------------------ */

@media (min-width: 1101px) {
  .rar-front-top,
  .rar-front-brief {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 0;
  }

  .rar-front-top > .rar-front-lead-body {
    grid-column: 1 / 4;
    padding-right: 13px;
  }

  .rar-front-top > .rar-front-rail {
    grid-column: 4;
    padding-left: 13px;
  }

  .rar-front-second {
    column-gap: 0;
  }

  .rar-front-second .rar-story:first-child {
    padding-right: 13px;
  }

  .rar-front-second .rar-story + .rar-story {
    padding-left: 13px;
  }

  /* IN BRIEF takes columns one to three on a subgrid, so each brief sits
     in exactly the column the story above it does. */
  .rar-front-brief > .rar-in-brief {
    grid-column: 1 / 4;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: auto 1fr auto;
  }

  .rar-in-brief > .rar-box-head,
  .rar-in-brief > .rar-corrections-strip {
    grid-column: 1 / -1;
    margin-right: 13px;
  }

  .rar-in-brief > ul {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
  }

  .rar-in-brief li,
  .rar-in-brief li:first-child {
    padding: 0 13px;
  }

  .rar-in-brief li:first-child {
    padding-left: 0;
  }

  .rar-front-brief > .rar-signal--front {
    grid-column: 4;
    padding-left: 13px;
    text-align: center;
  }
}

/* The four-story row, copyfit the same way: the heads decide how much
   room each column's copy gets, the copy fills to one common depth and
   ends on a whole line, and the jump lines share a baseline. The depth is
   set by the longest head plus nine lines of copy. */
@media (min-width: 901px) {
  .rar-story--c {
    display: flex;
    flex-direction: column;
  }

  .rar-story--c .rar-jump {
    margin-top: auto;
  }

  .rar-fill--c {
    min-height: 13.5em;
  }

  .rar-fill--c .rar-copy {
    font-size: 16px;
  }
}