/* journal.css — the blog list ("Journal")
 *
 * From `handoff/design/Blog List.dc.html`, with PAGES.md §1 as the summary.
 * The prototype is the spec: every track, pad and size below is read off it,
 * not paraphrased from the log.
 *
 * Ground is the steel #cdd1d5, the same as the Prices page and the page
 * template. Red TYPE here is `--red-label` (#ff0a32) — Zsolt's decision of
 * 2026-08-12, taken against measured alternatives and knowing it fails WCAG AA
 * at 2.56:1 on steel and 3.63:1 on the band. Brightness was chosen over
 * contrast. DO NOT revert it to `--red-text`; see tokens.css for the numbers
 * and the reasoning.
 *
 * EVERY RED ON THIS PAGE IS NOW `--red-label`, fills included — Zsolt asked for
 * one red here on 2026-08-12, so the type/fill split the other secondary pages
 * keep does not apply. `--red` no longer appears in this sheet. What moved with
 * it: the headline's full stop, the featured card's 2px top rule, the cover
 * label's tick, the quiz panel's ground, the current pager number's underline.
 *
 * THE QUIZ PANEL'S GROUND MOVED WITH THEM, so the type on it shifted too:
 *   near-black headline  3.94:1 -> 4.78:1  (26px+, 3:1 floor — passed before
 *                                           and after, and is better now)
 *   white kicker / body  4.77:1 -> 3.93:1  (9.5-11px, 4.5:1 — PASSED BEFORE,
 *                                           FAILS NOW)
 * The white text is the one thing this change made worse rather than simply
 * brighter. Flagged, not fixed — fixing it means changing the panel's type
 * colours, which nobody has asked for.
 *
 * (The old note here claimed near-black on #e6002a was 5.14:1. It measures
 * 3.94:1. The figure was wrong before this change, not because of it.)
 *
 * NOTHING HERE MAY DEPEND ON A COUNT. The grid is two equal columns and takes
 * any number of cards; the featured article, the quiz call-out and the closer
 * are positions, not slots that have to be filled. See netface_journal_split().
 */

.jr {
  background: var(--steel-base);
  color: var(--near-black);
}

/* The prototype's own measure: 5% side margins, 64px above, 52px below. */
.jr__wrap { padding: 64px 5% 52px; }


/* =========================================================================
   Masthead
   ========================================================================= */

.jr__masthead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 48px; flex-wrap: wrap;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--hair-on-light);
}

.jr__eyebrow {
  font-family: var(--hud); font-weight: 400;
  font-size: 12px; line-height: 1;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--red-label);
}

.jr__h1 {
  margin: 22px 0 0;
  font-family: var(--display); font-weight: 900;
  font-size: clamp(38px, 4.6vw, 58px); line-height: .94;
  letter-spacing: -.03em; text-transform: uppercase;
  color: var(--near-black);
}
/* The dimmed tail. `#666` in the prototype; --grey-accent (#7b838c) is the
   site's token for the same job in the footer headline and measures 3.35:1 on
   steel, so the darker literal is kept — this is display type at 38px+, where
   3:1 is the AA floor, and #666 clears it at 4.34:1. */
.jr__h1 .is-dim { color: #666; }
.jr__h1-dot { color: var(--red-label); }   /* a mark, not type — but one red on this page */

.jr__standfirst {
  margin: 0;
  max-width: 40ch;
  font-family: var(--hud); font-weight: 400;
  font-size: 12.5px; line-height: 1.75;
  letter-spacing: .04em;
  color: var(--grey-body);
  text-align: right;
}

.jr__empty {
  margin: 44px 0 0;
  font-family: var(--body);
  font-size: 16px; color: var(--grey-body);
}


/* =========================================================================
   Covers
   -------------------------------------------------------------------------
   PAGES.md: covers are placeholders, "a steel gradient with a label — replace
   with real images". The gradient is therefore the EMPTY STATE and has to
   survive the first real image landing, or a post without one renders a hole.
   ========================================================================= */

.jr-cover {
  position: relative;
  overflow: hidden;
  width: 100%; height: 100%;
  background: linear-gradient(148deg, #c8ccd1 0%, #8d949b 34%, #4d545b 70%, #262b31 100%);
}
.jr-cover__img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.jr-cover__label {
  position: absolute; left: 18px; bottom: 16px;
  display: flex; align-items: center; gap: 9px;
  font-family: var(--hud); font-weight: 400;
  font-size: 9.5px; line-height: 1;
  letter-spacing: .16em; text-transform: uppercase;
  color: #fff;
}
.jr-cover__label i {
  width: 3px; height: 13px; flex: none;
  background: var(--red-label);
  display: block;
}


/* =========================================================================
   Featured article
   -------------------------------------------------------------------------
   Three tracks: meta rail, copy, cover. THE RAIL PADDING SCALES — a fixed
   34px 26px squeezes the two mono blocks into a wrap at the narrow end of the
   rail's own clamp.
   ========================================================================= */

.jr-feat {
  display: grid;
  grid-template-columns:
    minmax(0, clamp(140px, 11vw, 160px))
    minmax(0, 1fr)
    minmax(0, clamp(240px, 30vw, 420px));
  align-items: stretch;
  margin: 44px 0 48px;
  background: #f4f6f8;
  border-top: 2px solid var(--red-label);   /* FILL — same red as the type above it */
}

.jr-feat__rail {
  padding: 34px clamp(12px, 1.2vw, 26px);
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 24px;
  border-right: 1px solid rgba(18, 28, 40, .10);
}
.jr-feat__tag {
  font-family: var(--hud); font-weight: 400;
  font-size: 10.5px; line-height: 1.6;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--red-label);
  white-space: nowrap;
}
.jr-feat__meta {
  font-family: var(--hud); font-weight: 400;
  font-size: 10.5px; line-height: 1.9;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--grey-body);
  white-space: nowrap;
}

.jr-feat__body { padding: 36px 38px; display: flex; flex-direction: column; }

.jr-feat__h2 {
  margin: 0 0 16px;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(26px, 2.8vw, 36px); line-height: 1.04;
  letter-spacing: -.025em;
}
.jr-feat__h2 a { color: var(--near-black); text-decoration: none; }
.jr-feat__h2 a:hover { color: var(--red-label); }

.jr-feat__excerpt {
  margin: 0 0 26px;
  max-width: 50ch;
  font-family: var(--body); font-weight: 400;
  font-size: 15.5px; line-height: 1.62;
  color: var(--grey-body);
}

.jr-feat__more {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--hud); font-weight: 700;
  font-size: 11.5px; line-height: 1;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--near-black); text-decoration: none;
}
.jr-feat__more span { color: var(--red-label); }
.jr-feat__more:hover { color: var(--red-label); }

.jr-feat__cover { display: block; position: relative; min-height: 330px; }


/* =========================================================================
   The card grid
   ========================================================================= */

.jr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 48px;
}

.jr-card {
  display: grid;
  grid-template-columns: minmax(0, clamp(112px, 15vw, 210px)) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding-top: 22px;
  border-top: 1px solid var(--hair-on-light);
}

.jr-card__cover { display: block; }
.jr-card .jr-cover { aspect-ratio: 4 / 3; }
/* The 4:3 cell is small, so the placeholder label takes the tighter inset the
   prototype uses there rather than the featured card's 18/16. */
.jr-card .jr-cover__label { left: 10px; bottom: 9px; letter-spacing: .14em; font-size: 9px; }
.jr-card .jr-cover__label i { display: none; }

.jr-card__body { display: flex; flex-direction: column; min-width: 0; }

/* nowrap is specified: the run is "category · date" and breaking it puts the
   date alone on a second line under a one-word category. */
.jr-card__meta {
  margin-bottom: 12px;
  font-family: var(--hud); font-weight: 400;
  font-size: 10px; line-height: 1;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--red-label);
  white-space: nowrap;
}
.jr-card__date { color: var(--grey-body); }

.jr-card__h3 {
  margin: 0 0 10px;
  font-family: var(--display); font-weight: 700;
  font-size: 20px; line-height: 1.14;
  letter-spacing: -.015em;
}
.jr-card__h3 a { color: var(--near-black); text-decoration: none; }
.jr-card__h3 a:hover { color: var(--red-label); }

.jr-card__excerpt {
  margin: 0;
  font-family: var(--body); font-weight: 400;
  font-size: 13.5px; line-height: 1.55;
  color: var(--grey-body);
}

.jr-card__read {
  margin-top: 14px;
  font-family: var(--hud); font-weight: 400;
  font-size: 10px; line-height: 1;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--near-black);
}
.jr-card__read span { color: var(--red-label); }


/* =========================================================================
   Quiz call-out
   -------------------------------------------------------------------------
   The one panel whose GROUND is the fill red, so the type rules invert: white
   for the kicker and body, near-black for the headline (the design's own
   choice — #0e1216 on #e6002a is 5.14:1), and the button is the dark ground.
   ========================================================================= */

.jr-quiz {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  margin: 40px 0;
  padding: 34px 36px;
  background: var(--red-label);            /* FILL — see the header on the type over it */
  color: var(--banner-black);
}

.jr-quiz__kicker {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 13px;
  font-family: var(--hud); font-weight: 700;
  font-size: 10px; line-height: 1;
  letter-spacing: .18em; text-transform: uppercase;
  color: #fff;
}
.jr-quiz__kicker i { width: 20px; height: 2px; background: #fff; flex: none; display: block; }

.jr-quiz__h2 {
  margin: 0 0 11px;
  font-family: var(--display); font-weight: 900;
  font-size: clamp(24px, 2.4vw, 30px); line-height: 1.02;
  letter-spacing: -.03em; text-transform: uppercase;
  color: var(--banner-black);
}

.jr-quiz__p {
  margin: 0;
  max-width: 58ch;
  font-family: var(--hud); font-weight: 400;
  font-size: 12.5px; line-height: 1.8;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .9);
}

.jr-quiz__cta {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--banner-black); color: #fff;
  font-family: var(--hud); font-weight: 800;
  font-size: 12px; line-height: 1;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 17px 28px;
  white-space: nowrap;
  text-decoration: none;
}
.jr-quiz__cta:hover { background: var(--near-black); color: #fff; }


/* =========================================================================
   The closer — the dark editor's-pick poster
   -------------------------------------------------------------------------
   max-width 1010px, matching the hero's capacity-banner measure, INSIDE the
   5% margins. The wrapper carries the margins so the card can centre in what
   is left rather than in the viewport.
   ========================================================================= */

.jr__closer-wrap { padding: 0 5%; background: var(--steel-base); }

.jr-closer {
  max-width: 1010px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
  align-items: stretch;
  background: var(--near-black);
}

.jr-closer__cover { display: block; position: relative; min-height: 330px; }
/* 212deg here, 148deg everywhere else — the prototype turns the gradient so the
   two placeholder covers on one screen do not read as the same tile twice. */
.jr-closer__cover .jr-cover--empty {
  background: linear-gradient(212deg, #c8ccd1 0%, #8d949b 34%, #4d545b 70%, #262b31 100%);
}

.jr-closer__body {
  padding: 44px clamp(28px, 2.6vw, 48px) 40px;
  display: flex; flex-direction: column;
}

.jr-closer__meta {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 6px 14px;
  margin-bottom: 20px;
  font-family: var(--hud); font-weight: 400;
  font-size: 10.5px; line-height: 1.6;
  letter-spacing: .18em; text-transform: uppercase;
  color: #fff;
}
.jr-closer__pick,
.jr-closer__facts { white-space: nowrap; }
.jr-closer__facts { color: rgba(255, 255, 255, .74); }

.jr-closer__h2 {
  margin: 0 0 18px;
  font-family: var(--display); font-weight: 900;
  font-size: clamp(28px, 3vw, 38px); line-height: 1;
  letter-spacing: -.03em; text-transform: uppercase;
}
.jr-closer__h2 a { color: #fff; text-decoration: none; }
.jr-closer__h2 a:hover .jr-closer__hit { background: #fff; }
/* box-decoration-break so the highlight wraps as one mark across lines instead
   of one box per line with a gap between them. */
.jr-closer__hit {
  background: var(--steel-base);
  color: var(--near-black);
  padding: .02em .14em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

.jr-closer__excerpt {
  margin: 0 0 28px;
  max-width: 52ch;
  font-family: var(--hud); font-weight: 400;
  font-size: 12.5px; line-height: 1.75;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .9);
}

.jr-closer__cta {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  background: var(--steel-base); color: var(--near-black);
  font-family: var(--hud); font-weight: 700;
  font-size: 12px; line-height: 1;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 17px 32px;
  text-decoration: none;
}
.jr-closer__cta:hover { background: #fff; color: var(--near-black); }


/* =========================================================================
   Pagination
   -------------------------------------------------------------------------
   44px below the closer, at the FULL content width, as two hairline rows —
   teaser first, then the numbers. PAGES.md: it must align to the content grid,
   because the original floated free and read as detached.
   ========================================================================= */

.jr-pager { padding: 44px 5% 60px; background: var(--steel-base); }

.jr-pager__next {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 26px 0;
  border-top: 1px solid rgba(18, 28, 40, .16);
  color: var(--near-black);
  text-decoration: none;
}
.jr-pager__next-idx {
  display: block;
  margin-bottom: 9px;
  font-family: var(--hud); font-weight: 400;
  font-size: 9.5px; line-height: 1;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--red-label);
}
.jr-pager__next-title {
  display: block;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(17px, 1.4vw, 21px); line-height: 1.14;
  letter-spacing: -.014em;
}
.jr-pager__next-act {
  font-family: var(--hud); font-weight: 400;
  font-size: 11px; line-height: 1;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--grey-body);
  white-space: nowrap;
}
.jr-pager__next-act span { color: var(--red-label); }
.jr-pager__next:hover .jr-pager__next-title { color: var(--red-label); }

.jr-pager__pages {
  display: flex; align-items: center; gap: 20px;
  padding: 18px 0 0;
  border-top: 1px solid rgba(18, 28, 40, .16);
  font-family: var(--hud); font-weight: 400;
  font-size: 11px; line-height: 1;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--grey-body);
}
.jr-pager__nums { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.jr-pager__num { color: var(--grey-body); text-decoration: none; }
.jr-pager__num:hover { color: var(--red-label); }
.jr-pager__num.is-current {
  color: var(--near-black); font-weight: 800;
  border-bottom: 2px solid var(--red-label);   /* FILL — a rule, not type */
  padding-bottom: 4px;
}
.jr-pager__count { margin-left: auto; color: var(--grey-body); }