/* =============================================================================
   40 — THE JOURNAL   (home blog teaser)
   The page's back page.
   -----------------------------------------------------------------------------

   WHAT THIS REPLACES
   Two identical cards, side by side, inside one bordered panel: a 16:9 crop of
   a square photograph capped at 240px, a bold micro-word for the category, a
   serif title, three lines of grey, and a green "View All Posts" floating
   under the panel with nothing to sit on. No date, no weight, no order — a
   grid of two, which is the one shape that can never say what to read first.

   WHAT IT IS NOW
   A closing spread. One LEAD piece with a real photographic plate and a
   display headline, and a RAIL of shorter entries beside it, parted by a
   hairline that runs the full height of the gutter. Under both, a colophon
   rule carrying a note and the way out. The section finally has a bottom edge
   to hand to the footer.

   THE FOUR MOVES

   1 — HIERARCHY BY AREA, NOT BY DECORATION. 1.5fr against 1fr, a 3:2 plate
       against square thumbnails, 45px of Fraunces against 20px. Nothing is
       boxed, shadowed or raised to say which matters; size says it.

   2 — REAL META, IN THE HERO'S HUD VOICE. Index numeral, category, date and
       an honest reading time on one 0.7rem / 0.16em line parted by middots.
       The numerals are tabular so the rail's entries align down their left
       edge like a contents page.

   3 — RULES, NOT BORDERS. Every division in this section is a 1px hairline
       that fades before it ends — the gutter rule, the rail's dividers, the
       colophon. Nothing here draws a closed box, because a closed box is what
       made the old version read as a widget.

   4 — TWO REGISTERS ONLY. Fraunces 300 for anything that is writing (and one
       italic line in the colophon, which is where a magazine puts its own
       voice), Inter at 0.7rem / uppercase for anything that is chrome. There
       is no third size and no bold sans anywhere.

   5 — THE SPREAD CLOSES ITSELF (round 2). The two columns cannot be allowed
       to end at different heights, and with three posts published the rail
       can only ever hold two entries against a lead that is half again as
       tall — which punched a void into the lower right. The fix is
       structural, not a tuned number:

         · the rail's THIRD slot is a set-in MARGINALIA note (`.journal-setin`)
           and it is `flex: 1 1 auto`, so it absorbs whatever height the lead
           has over the rail and its own closing rule lands on the lead's
           baseline at any measure, any headline length, any font size;
         · the lead's action is `margin-top: auto`, so if the RAIL is the
           taller column the lead's CTA drops to the same baseline instead.

       Whichever column wins, both finish on one line. There is no arithmetic
       here to go stale.

   6 — ONE DATUM PER ROW. A rail entry is `align-items: start`, so its meta
       line sits on the top edge of its thumbnail; the text column stretches
       and the reading time is pushed to the foot, so it sits on the
       thumbnail's bottom edge. Top and bottom of every row agree. The
       thumbnails are square because the sources are square: no crop at all.

   CASCADE / CONTRACT NOTES
   - Part files load after every media query in main.css, so this file carries
     its own breakpoints. main.css styles `.blog-section`, `.blog-section-card`
     and `.section-title` at 0-1-0 (including inside its 1200/768/480 blocks);
     every rule here is written parent-scoped through `.journal`, so it wins on
     both specificity and order. No `!important` anywhere.
   - 05-motion.css owns this section's vertical rhythm through
     `body :is(… .blog-section …)` and gives it the deep run-out padding
     because it is the last section on the page. Nothing here sets section
     padding.
   - The reveal is re-weighted, not re-implemented: `.blog-section-card` drops
     to a "ground" (opacity only, fast) and the lead and the rail entries carry
     the movement through the documented `data-reveal` / `data-reveal-i` hooks.
   ========================================================================== */


/* -----------------------------------------------------------------------------
   1. SECTION GROUND

   main.css paints a flat `--color-bg-light` slab end to end, which seams
   against the promo section above (transparent, so `--color-bg`) and against
   the footer's photograph below. The ground is a shallow pool instead: it
   starts and ends on the page colour, so both boundaries are invisible, and it
   carries one 8% bloom of brand green behind the lead — the outro's device, at
   the outro's strength. It is never seen as colour, only as air.
   -------------------------------------------------------------------------- */

.blog-section.journal {
  position: relative;
  isolation: isolate;
  overflow-x: clip;               /* never `hidden`: no new scroll container */

  --jr-ease: var(--ease-brand, cubic-bezier(0.2, 0.75, 0.2, 1));
  --jr-gutter: clamp(30px, 4.2vw, 78px);
  --jr-hair: var(--color-border);
  --jr-hair-strong: var(--color-border-strong);

  background: linear-gradient(
    180deg,
    var(--color-bg) 0%,
    color-mix(in srgb, var(--color-bg-light) 84%, var(--color-bg)) 22%,
    color-mix(in srgb, var(--color-bg-light) 84%, var(--color-bg)) 66%,
    var(--color-bg) 100%
  );
}

.blog-section.journal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    64% 52% at 24% 40%,
    color-mix(in srgb, var(--color-primary) 11%, transparent) 0%,
    transparent 68%
  );
}


/* -----------------------------------------------------------------------------
   2. SECTION HEADER

   The same construction as the shelf above it: a micro-kicker on a 34x1px
   rule, a Fraunces 300 title with its last word italic in the accent, a lede
   at a real measure, and a readout on the right. Exactly two direct children,
   because motion.js staggers a header's direct children as its beats.
   -------------------------------------------------------------------------- */

.journal .journal-kicker {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0 0 clamp(20px, 2.2vw, 34px);
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.journal .journal-kicker-rule {
  flex: none;
  display: block;
  width: 34px;
  height: 1px;
  background: var(--jr-hair-strong);
}

.journal .journal-head-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(26px, 4vw, 84px);
}

.journal .journal-head-main { min-width: 0; }

.journal .section-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(2.3rem, 4.3vw, 3.85rem);
  line-height: 0.98;
  letter-spacing: -0.042em;
  color: var(--color-dark);
  text-wrap: balance;
}

.journal .section-title em {
  font-style: italic;
  color: var(--color-accent);
}

.journal .journal-lede {
  margin: 0;
  max-width: 50ch;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.72;
  color: var(--color-text-light);
  text-wrap: pretty;
}

/* The issue readout. A numeral in the display face against two lines of HUD —
   the hero's "01 / 06" idea, rewritten as a masthead figure. */
.journal .journal-issue {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin: 0;
  padding-bottom: 4px;
  white-space: nowrap;
}

.journal .journal-issue-num {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(2.4rem, 3.6vw, 3.3rem);
  line-height: 0.76;
  letter-spacing: -0.04em;
  /* Cream, not the body colour. At `--color-text-light` this numeral matched
     the lede beside it exactly and read as one more grey thing; lifted to a
     translucent ink it separates as a masthead figure without taking the
     accent, which is spent on the title's last word. */
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  font-variant-numeric: tabular-nums;
}

.journal .journal-issue-label {
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}


/* -----------------------------------------------------------------------------
   3. THE SPREAD

   Kept on `.blog-section-card` so motion.js still finds it, but it is a bare
   layout grid: no ground, no border, no radius, no shadow.
   -------------------------------------------------------------------------- */

.journal .blog-section-card {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  column-gap: var(--jr-gutter);
  row-gap: clamp(34px, 3.8vw, 62px);
  align-items: stretch;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  overflow: visible;
  box-shadow: none;
}

/* One post published: no rail, so no second column to hold open. */
.journal .journal-spread--solo { grid-template-columns: minmax(0, 1fr); }


/* -----------------------------------------------------------------------------
   4. SHARED CHROME — the meta line

   One line, one size, one colour ladder. The numeral and the category are the
   two things a reader scans for, so they sit a step brighter than the rest;
   the separators are the border colour, not the text colour, so they part the
   items without becoming items themselves.
   -------------------------------------------------------------------------- */

.journal .journal-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.journal .journal-meta > * + *::before {
  content: "·";
  margin-right: 9px;
  color: var(--jr-hair-strong);
}

.journal .journal-meta-no {
  color: var(--color-text-light);
  font-variant-numeric: tabular-nums;
}

.journal .journal-meta-cat { color: var(--color-text-light); }


/* -----------------------------------------------------------------------------
   5. THE LEAD

   The whole piece is one <a>: one link, one focus target, one hover. The plate
   is a real 3:2 crop of the square source at the full width of its column —
   the old rule cropped a square to 16:9 and then capped it at 240px, which
   squashed the photograph twice and left it smaller than the headline.
   -------------------------------------------------------------------------- */

.journal .journal-lead {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.journal .journal-lead-plate {
  position: relative;
  display: block;
  flex: none;                     /* never shrink when the column is stretched */
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--jr-hair);
}

.journal .journal-lead-media,
.journal .journal-lead-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.journal .journal-lead-media img {
  object-fit: cover;
  /* Graded at rest and released on hover, the way the mosaic grades its
     tiles: the photograph relaxes rather than zooms. */
  filter: saturate(0.9) contrast(1.04) brightness(0.9);
  transform: scale(1.001);
  transition:
    transform 1.15s var(--jr-ease),
    filter    0.9s  var(--jr-ease);
}

/* Authored, not assumed: two stops holding the bottom corner where the flag
   sits, and a whisper across the top so a bright sky never blows out the
   plate's edge. */
.journal .journal-lead-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      0deg,
      color-mix(in srgb, var(--night-2) 72%, transparent) 0%,
      color-mix(in srgb, var(--night-2) 34%, transparent) 22%,
      transparent 46%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--night-2) 26%, transparent) 0%,
      transparent 30%
    );
}

.journal .journal-flag {
  position: absolute;
  left: clamp(16px, 1.6vw, 24px);
  bottom: clamp(16px, 1.6vw, 24px);
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--paper) 26%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--night-2) 46%, transparent);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 88%, transparent);
  transition: border-color 0.42s var(--jr-ease), color 0.42s var(--jr-ease);
}

/* Grows to fill whatever the column has left, so the CTA below can be pushed
   to the foot of it. */
.journal .journal-lead-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 auto;
  gap: clamp(12px, 1.2vw, 18px);
  padding-top: clamp(22px, 2.4vw, 36px);
}

.journal .journal-lead-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(1.85rem, 3.1vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--color-dark);
  text-wrap: balance;
}

/* The rule is drawn by the headline itself, so it can never sit under a
   descender it does not belong to and never reserves space when it is off. */
.journal .journal-lead-title > span,
.journal .journal-entry-title > span {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.55s var(--jr-ease), color 0.35s var(--jr-ease);
}

.journal .journal-lead-dek {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(0.95rem, 1.02vw, 1.05rem);
  line-height: 1.7;
  color: var(--color-text-light);
  text-wrap: pretty;
}

.journal .journal-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  /* auto, not a fixed step: the lead is a stretched grid item, so this drops
     the action to the foot of the column and puts it on the same baseline as
     the rail's closing rule whenever the RAIL is the taller of the two. The
     flex gap above it is the minimum, so it can never crowd the dek. */
  margin-top: auto;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--jr-hair-strong);
  font-family: var(--font-primary);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-light);
  transition: color 0.4s var(--jr-ease), border-color 0.4s var(--jr-ease);
}

.journal .journal-cta svg {
  width: 15px;
  height: 15px;
  transition: transform 0.45s var(--jr-ease);
}

/* Four things move together, none of them fast: the photograph relaxes out of
   its grade and pushes 4%, the flag's hairline brightens, the headline draws
   its rule, and the arrow leaves. */
.journal .journal-lead:hover .journal-lead-media img,
.journal .journal-lead:focus-visible .journal-lead-media img {
  transform: scale(1.045);
  filter: saturate(1) contrast(1) brightness(1);
}

.journal .journal-lead:hover .journal-lead-title > span,
.journal .journal-lead:focus-visible .journal-lead-title > span { background-size: 100% 1px; }

.journal .journal-lead:hover .journal-flag,
.journal .journal-lead:focus-visible .journal-flag {
  border-color: color-mix(in srgb, var(--color-accent) 60%, transparent);
  color: var(--paper);
}

.journal .journal-lead:hover .journal-cta,
.journal .journal-lead:focus-visible .journal-cta {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.journal .journal-lead:hover .journal-cta svg,
.journal .journal-lead:focus-visible .journal-cta svg { transform: translateX(6px); }


/* -----------------------------------------------------------------------------
   6. THE RAIL

   A ruled contents column. The gutter hairline is a pseudo-element centred in
   the gap rather than a border on the rail, so the line sits between the two
   columns instead of hard against one of them, and it fades out at both ends
   the way the band's rules do — a horizon, not a border.

   Every rule in the rail is drawn ABOVE the entry it belongs to, so a rule is
   never seen without its content directly under it, and the list reads
   top-down like a contents page. The rule that CLOSES the list belongs to the
   set-in below (section 7), which is the element that soaks up whatever height
   the lead has over the rail — so the closing rule lands on the lead's own
   baseline rather than floating somewhere above it.
   -------------------------------------------------------------------------- */

.journal .journal-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.journal .journal-rail::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--jr-gutter) / -2);
  width: 1px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--jr-hair) 7%,
    var(--jr-hair-strong) 46%,
    var(--jr-hair) 88%,
    transparent 100%
  );
}

/* A contents-page head: the label on the left, the range of entries it covers
   on the right, both in the HUD voice. No rule of its own — the first entry's
   own top rule is the label's underline, so the two never stack. */
.journal .journal-rail-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0 0 clamp(12px, 1.3vw, 20px);
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.journal .journal-rail-range {
  flex: none;
  color: var(--color-text-light);
  font-variant-numeric: tabular-nums;
}

/* `start`, not `center`: centring floated the meta line somewhere in the
   middle of the thumbnail, so no two rows agreed about where a row began. Now
   the meta sits on the thumbnail's top edge and the reading time (pushed down
   inside the stretched text column) sits on its bottom edge. */
.journal .journal-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(112px, 12.2vw, 174px);
  align-items: start;
  gap: clamp(16px, 1.8vw, 30px);
  flex: none;
  padding: clamp(22px, 2.8vw, 40px) 0;
  color: inherit;
  text-decoration: none;
  border-top: 1px solid var(--jr-hair);
  transition: border-color 0.42s var(--jr-ease);
}

/* No closing rule here any more — `.journal-setin` below is the rail's last
   element and carries it, which is what lets the rail close on the lead's
   baseline instead of 170px above it. */

.journal .journal-entry-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Explicitly nothing, so the meta line and the top edge of the thumbnail
     beside it are the same datum. Every row in the rail therefore begins on
     one line, which is what makes it read as a contents page. */
  margin-top: 0;
  /* No single gap: the stack is graduated so the title reads as the head of
     the row — 8 above it, 14 under it, 18 before the reading time. */
  gap: 0;
  min-width: 0;
}

.journal .journal-entry-title {
  margin: 8px 0 0;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(1.08rem, 1.32vw, 1.34rem);
  line-height: 1.24;
  letter-spacing: -0.024em;
  color: var(--color-dark);
  text-wrap: balance;
}

/* PHP hands this a hand-cut clause that finishes, so the clamp below is a
   guard-rail rather than the usual outcome — the rail no longer ends on two
   ellipses. The reserve stays, so a two-line entry and a three-line one still
   agree about where the reading time sits. */
.journal .journal-entry-dek {
  margin: 14px 0 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* em, never rem: a rem reserve stops matching the line box the moment a
     breakpoint changes the font size. */
  min-height: calc(2 * 1.6em);
}

.journal .journal-entry-read {
  margin-top: 18px;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color 0.4s var(--jr-ease);
}

/* Square, because the sources are 800x800 squares: the contents thumbnails are
   now the photographer's whole frame with nothing cropped away, and the radius
   is the plate's radius so both photographs in the spread share one corner. */
.journal .journal-entry-media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--jr-hair);
}

.journal .journal-entry-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.04) brightness(0.86);
  transition:
    transform 1s   var(--jr-ease),
    filter    0.8s var(--jr-ease);
}

.journal .journal-entry:hover,
.journal .journal-entry:focus-visible { border-color: var(--jr-hair-strong); }

.journal .journal-entry:hover .journal-entry-media img,
.journal .journal-entry:focus-visible .journal-entry-media img {
  transform: scale(1.06);
  filter: saturate(1) contrast(1) brightness(1);
}

.journal .journal-entry:hover .journal-entry-title > span,
.journal .journal-entry:focus-visible .journal-entry-title > span {
  background-size: 100% 1px;
  color: var(--color-accent);
}

.journal .journal-entry:hover .journal-entry-read,
.journal .journal-entry:focus-visible .journal-entry-read { color: var(--color-text-light); }


/* -----------------------------------------------------------------------------
   7. THE SET-IN — the rail's third slot, and the thing that closes the spread

   Three posts are published. A lead plus two entries leaves the rail roughly
   170px short of the lead column, and a 470x170 hole in the lower right of a
   two-column spread does not read as air — it reads as a mistake. There is no
   third post to render, so the third slot carries the journal's own voice
   instead: a rule, a HUD label and one line of italic Fraunces. A magazine
   sets exactly this at the foot of a contents rail.

   It is also the mechanism. `flex: 1 1 auto` inside the stretched rail column
   means the set-in absorbs the whole difference between the two columns and
   its bottom rule lands on the lead's baseline — at any measure, any headline
   length, any user font size. The quote is centred in whatever height that
   turns out to be, so the block is never seen to be padded, only set. Nothing
   here is a measured number that can go stale.
   -------------------------------------------------------------------------- */

.journal .journal-setin {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  gap: clamp(13px, 1.3vw, 19px);
  padding: clamp(24px, 2.8vw, 40px) 0;
  /* Bracketed, not boxed: the top rule keeps the rail's every-rule-above-its-
     content rhythm, the bottom rule is the rail's closing rule. */
  border-top: 1px solid var(--jr-hair);
  border-bottom: 1px solid var(--jr-hair);
}

.journal .journal-setin-label {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.journal .journal-setin-rule {
  flex: none;
  display: block;
  width: 34px;
  height: 1px;
  background: var(--jr-hair-strong);
}

.journal .journal-setin-quote { margin: 0; }

/* Brighter than the colophon's note and quieter than a headline: this is the
   one voice in the section that is neither chrome nor a link. */
.journal .journal-setin-quote p {
  margin: 0;
  max-width: 27ch;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.14rem, 1.4vw, 1.42rem);
  line-height: 1.45;
  letter-spacing: -0.018em;
  color: color-mix(in srgb, var(--ink) 76%, transparent);
  /* `balance`, not `pretty`: three short sentences over three even lines is
     the whole shape of the thing. */
  text-wrap: balance;
}


/* -----------------------------------------------------------------------------
   8. THE COLOPHON

   The page's last line. A full-measure rule that brightens at the left and
   fades to nothing at the right, an italic note in the display face — the one
   place in the section where the magazine speaks in its own voice — and the
   way out, set as the same hairline action the shelf uses.
   -------------------------------------------------------------------------- */

.journal .journal-colophon {
  position: relative;
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 64px);
  padding-top: clamp(18px, 1.9vw, 28px);
}

.journal .journal-colophon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--jr-hair-strong) 0%,
    var(--jr-hair) 52%,
    transparent 100%
  );
}

.journal .journal-colophon-note {
  margin: 0;
  max-width: 56ch;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(0.95rem, 1.05vw, 1.08rem);
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--color-text-muted);
}

.journal .journal-all {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: var(--space-3);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--jr-hair-strong);
  font-family: var(--font-primary);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-text-light);
  transition: color 0.4s var(--jr-ease), border-color 0.4s var(--jr-ease);
}

.journal .journal-all svg {
  width: 15px;
  height: 15px;
  transition: transform 0.45s var(--jr-ease);
}

.journal .journal-all:hover,
.journal .journal-all:focus-visible {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.journal .journal-all:hover svg,
.journal .journal-all:focus-visible svg { transform: translateX(6px); }


/* -----------------------------------------------------------------------------
   9. FOCUS

   The whole piece is the link, so the ring goes round the whole piece — offset
   far enough that it never crops the plate's corner radius.
   -------------------------------------------------------------------------- */

.journal :is(.journal-lead, .journal-entry, .journal-all):focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 8px;
  border-radius: 2px;
}


/* -----------------------------------------------------------------------------
   10. MOTION

   The spread wrapper stops being an object that arrives and becomes the ground
   the pieces arrive on: opacity only, fast, no stagger. The lead and the rail
   entries then carry the movement through the `data-reveal` hooks the motion
   workstream publishes. Matches that file's selector weight, and loads after
   it, so the re-weight wins the tie without `!important`.
   -------------------------------------------------------------------------- */

html.ts-motion .journal .blog-section-card {
  --reveal-rise-base: 0px;
  --reveal-blur-base: 0px;
  --reveal-scale-base: 1;
  --reveal-dur-base: 420ms;
  --reveal-step: 0ms;
}


/* -----------------------------------------------------------------------------
   11. WIDE — the lead gets a little more of the page

   Above 1560px the rail would otherwise keep growing with the container and
   the two columns start to look like a 60/40 split of nothing in particular.
   -------------------------------------------------------------------------- */

@media (min-width: 1560px) {
  .journal .blog-section-card { grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); }
}


/* -----------------------------------------------------------------------------
   12. TABLET — the rail turns and runs under the lead

   Below 1100px a 1fr rail beside a 1.5fr lead leaves the entries about 300px
   wide, which is not enough for a serif headline and a standfirst. The rail
   becomes a two-up row under the lead: same entries, same rules, laid across
   instead of down. The gutter hairline is dropped because there is no longer a
   gutter for it to sit in, and the dividers move to the TOP of each entry so
   the row reads as one ruled band.

   There are no longer two columns to reconcile, so the set-in stops being the
   mechanism and becomes only what it looks like: a full-measure marginal note
   set between the entries and the colophon. It gives up its grow and its
   bottom rule, because the colophon's rule is 28px below it.
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .journal .blog-section-card {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(30px, 4vw, 52px);
  }

  .journal .journal-lead-plate { aspect-ratio: 16 / 9; }

  .journal .journal-lead-title { font-size: clamp(1.8rem, 4.2vw, 2.6rem); }

  .journal .journal-rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(24px, 3.4vw, 48px);
  }

  .journal .journal-rail::before { display: none; }

  .journal .journal-rail-label {
    grid-column: 1 / -1;
    margin-bottom: 0;
    padding-bottom: clamp(12px, 1.4vw, 18px);
  }

  /* Laid across, the entries share one rule along the top of the row. */
  .journal .journal-entry { padding: clamp(22px, 3vw, 34px) 0; }

  .journal .journal-setin {
    grid-column: 1 / -1;
    flex: none;
    padding: clamp(24px, 3.4vw, 38px) 0 0;
    border-bottom: 0;
  }

  .journal .journal-setin-quote p { max-width: 46ch; }
}


/* -----------------------------------------------------------------------------
   13. NARROW TABLET / LARGE PHONE

   The header's readout stops competing with the title for the same line, and
   the rail becomes a single column of ruled entries.
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .journal .journal-head-row {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(22px, 4vw, 34px);
  }

  .journal .journal-issue {
    align-items: center;
    gap: 12px;
    padding-bottom: 0;
  }

  .journal .journal-issue-num { font-size: 2.1rem; line-height: 0.9; }
  .journal .journal-issue-label { line-height: 1.35; }

  .journal .journal-rail { grid-template-columns: minmax(0, 1fr); }
}


/* -----------------------------------------------------------------------------
   14. PHONE

   One column, one measure. The plate keeps a landscape crop because a portrait
   plate on a phone pushes the headline off the screen entirely; the rail's
   thumbnails shrink but stay, because a ruled list of titles with no pictures
   in it stops looking like a magazine and starts looking like a sitemap.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .blog-section.journal { --jr-gutter: 0px; }

  .journal .section-title { font-size: clamp(2.05rem, 9.4vw, 2.9rem); }

  .journal .journal-lede { font-size: 0.95rem; line-height: 1.68; }

  .journal .journal-lead-plate { aspect-ratio: 3 / 2; }

  .journal .journal-lead-title {
    font-size: clamp(1.6rem, 6.6vw, 2.1rem);
    line-height: 1.1;
    letter-spacing: -0.028em;
  }

  .journal .journal-lead-dek { font-size: 0.94rem; line-height: 1.65; }

  .journal .journal-entry {
    grid-template-columns: minmax(0, 1fr) clamp(84px, 24vw, 104px);
    gap: 16px;
    padding: 20px 0;
  }

  .journal .journal-entry-title { font-size: 1.08rem; }

  .journal .journal-setin {
    gap: 12px;
    padding: 24px 0 0;
  }

  .journal .journal-setin-quote p {
    font-size: 1.16rem;
    line-height: 1.44;
  }

  .journal .journal-colophon {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .journal .journal-colophon-note { font-size: 0.95rem; }
}

@media (max-width: 420px) {
  .journal .journal-flag { padding: 7px 11px; letter-spacing: 0.13em; }
  .journal .journal-meta { gap: 7px; }
  .journal .journal-meta > * + *::before { margin-right: 7px; }
  .journal .journal-entry-dek { -webkit-line-clamp: 3; min-height: calc(2 * 1.6em); }
  .journal .journal-rail-label { font-size: 0.7rem; letter-spacing: 0.14em; }
}


/* -----------------------------------------------------------------------------
   15. COARSE POINTER

   Nothing here is hidden until hover, so the only thing to stand down is the
   movement itself.
   -------------------------------------------------------------------------- */

@media (hover: none) {
  .journal .journal-lead:hover .journal-lead-media img,
  .journal .journal-entry:hover .journal-entry-media img { transform: none; }
}


/* -----------------------------------------------------------------------------
   16. REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .journal .journal-lead-media img,
  .journal .journal-entry-media img,
  .journal .journal-lead-title > span,
  .journal .journal-entry-title > span,
  .journal .journal-cta,
  .journal .journal-cta svg,
  .journal .journal-all,
  .journal .journal-all svg,
  .journal .journal-flag,
  .journal .journal-entry {
    transition: none;
  }

  .journal .journal-lead:hover .journal-lead-media img,
  .journal .journal-entry:hover .journal-entry-media img { transform: none; }
}