/* ============================================================
   Guides — index, category listings and the article page.
   Loaded only on those routes, after main.css.
   ============================================================ */

/* ---------- Index hero ---------- */

/* The wash is defined once in main.css so this hero, the tool hero and the
   static page hero cannot drift apart as the site grows. */
.guides-hero {
  border-bottom: 1.5px solid var(--line);
  background: var(--hero-wash);
  padding: var(--space-8) 0 var(--space-7);
}

/* No grid and no stats column. The hero is a single column of headline plus
   standfirst; the old two-up and the .guides-hero__stats table it held were
   removed on 2026-10-01. Nothing in this file should reintroduce a second
   column here without also giving it something to say.
   No max-width on the h1 either: it was capped by the old 1.35fr column, and
   with the column gone the headline should run the full width it was measured
   for rather than wrap a line earlier. */
.guides-hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-4);
}

.guides-hero__lede {
  font-size: 1.08rem;
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0;
}

/* ---------- Topic rail ---------- */

.topic-rail {
  border-bottom: 1.5px solid var(--line);
  background: var(--bg);
}

.topic-rail__inner {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding: var(--space-4) 0;
}

.topic-rail__inner::-webkit-scrollbar { display: none; }

.topic {
  flex-shrink: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 15px;
  border: 1.5px solid var(--line-strong);
  border-radius: 100px;
  background: var(--surface);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.topic:hover {
  border-color: var(--jade);
  color: var(--jade-deep);
  text-decoration: none;
}

.topic__n {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.topic[aria-current="page"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.topic[aria-current="page"] .topic__n { color: rgba(255, 255, 255, 0.6); }

/* ---------- Lead article ---------- */

/* Full width, one column, no cover. The lead card used to be a two-up with the
   generated cover filling the right half; with the artwork gone there is nothing
   for a second column to hold, so the card is a single wide box and the headline
   gets the whole measure. */
.lead-guide {
  position: relative;
  display: block;
  margin-bottom: var(--space-8);
  overflow: hidden;
  padding: 0;
}

.lead-guide::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--jade);
}

/* The rail: "Latest", the topic, the date. Coral on "Latest" so the one warm
   accent on the page sits at the top of the lead card. */
.lead-guide__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.lead-guide__flag {
  color: var(--coral-deep);
  color: color-mix(in srgb, var(--coral-deep) 82%, var(--ink));
}

.lead-guide__cat { color: var(--jade-deep); }
.lead-guide__meta time { font-family: var(--font-mono); font-weight: 400; letter-spacing: 0.03em; }
.lead-guide__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); flex-shrink: 0; }

.lead-guide__body {
  padding: var(--space-7) var(--space-7) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.lead-guide__body h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.024em;
  margin: 0;
  transition: color 0.2s ease;
}

.lead-guide:hover .lead-guide__body h2 { color: var(--jade-deep); }

.lead-guide__lede {
  font-size: 1.04rem;
  line-height: 1.62;
  color: var(--ink-soft);
  margin: 0;
  max-width: 62ch;
}

.lead-guide__foot {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1.5px solid var(--line);
  font-size: 0.86rem;
  color: var(--ink-faint);
}

.lead-guide__by { font-weight: 620; color: var(--ink-soft); }
.lead-guide__foot .go { margin-left: auto; font-weight: 650; color: var(--jade); white-space: nowrap; }
.lead-guide:hover .lead-guide__foot .go { text-decoration: underline; }

/* ---------- Count line ---------- */

.guide-count {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.guide-count::after {
  content: "";
  flex: 1;
  height: 1.5px;
  background: var(--line);
}

/* ---------- Pagination ---------- */

.guide-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1.5px solid var(--line);
}

.guide-pager__at {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Article page — editorial masthead
   ============================================================

   The single-article page is set as a newspaper front page rather than as
   another hero band: a small category rail, then a headline that is by a wide
   margin the loudest thing on the screen, then a type-only byline over a
   hairline. No wash and no card, because a tinted box behind a 3.4rem headline
   flattens exactly the contrast the headline is there to create. The rest of
   the site keeps .page-hero; this template opts out with .masthead.
   ------------------------------------------------------------ */

.masthead {
  background: var(--paper);
  padding: var(--space-7) 0 0;
}

.masthead__crumbs {
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin-bottom: var(--space-6);
}

.masthead__crumbs a { color: var(--ink-faint); }
.masthead__crumbs a:hover { color: var(--jade-deep); }

/* The category rail. .eyebrow is not reused here: its ::before dash pushes the
   label off the left margin, and this rail has to align flush with the
   headline below it. Coral rather than jade so the one warm accent on the page
   sits at the very top, the way the reference sets its section flag. */
.masthead__rail {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* The rail is set smaller than any existing meta text on the site, and at
   0.74rem bold --coral-deep lands on 4.35:1 against --paper, just under the
   4.5:1 AA floor for text this size. Darkened toward --ink to clear it. The
   plain declaration above is the fallback: a browser without color-mix drops
   the second line and keeps the token. Same reason --ink-soft rather than
   --ink-faint on the reading time. */
.masthead__cat {
  color: var(--coral-deep);
  color: color-mix(in srgb, var(--coral-deep) 82%, var(--ink));
}

.masthead__bar { color: var(--line-strong); font-weight: 400; }
.masthead__read { color: var(--ink-soft); font-weight: 600; letter-spacing: 0.1em; }

/* Tight leading and negative tracking are what make a large serif headline read
   as editorial rather than as a hero. Both only work at size, so the clamp
   floor stays near the base h1 and the ceiling is where the effect lands.

   TWO THINGS HERE WERE WRONG ONCE AND MUST NOT COME BACK:

   1. No `max-width`. A `20ch` cap used to sit here, which floated long
      headlines inside the column with the byline rule running on past them.
   2. No `text-wrap: balance`. Balance does not only pick break points — it
      narrows the block until the lines come out even, so a 74-character
      headline collapsed into four short lines about 450px wide in a 760px
      column with a quarter of the width left empty. It reads as a broken
      layout. `pretty` is the safe choice: it avoids a one-word last line and
      leaves the measure alone.

   The ceiling is 2.8rem, not the 3.55rem it was, because this library has
   twelve-word titles ("Ideal Body Weight Formulas Compared: Why Four Equations
   Give Four Answers") and at 3.55rem even a correct wrap ran to four lines of
   display type above the byline. The column is 760px — the same measure the
   prose below is set in — so the title fills it and breaks in two or three. */
.masthead__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.6vw, 2.8rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}

/* Two lines of type separated from the headline by whitespace alone, closed by
   a hairline. The name is body face and near-black; the timestamp is a step
   down in size and colour so the hierarchy is legible without a rule between
   them. */
.masthead__meta {
  margin-top: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1.5px solid var(--line);
}

.masthead__by {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0.005em;
  color: var(--ink);
}

.masthead__stamp {
  margin: var(--space-1) 0 0;
  font-size: 0.83rem;
  color: var(--ink-faint);
}

/* The masthead already supplies the top rule and spacing, so the body section
   would otherwise open with a double gap. */
.article-body { padding-top: var(--space-6); }

/* ---------- Topline ---------- */

/*
 * The lead summary, set in a very softly tinted panel under a small caps label.
 * The tint is a low-alpha jade rather than --jade-soft: at full strength that
 * token reads as a callout box competing with the headline, and this panel has
 * to sit quietly under it. Left border carries the accent instead.
 */
.topline {
  background:
    linear-gradient(180deg, rgba(15, 122, 90, 0.05), rgba(15, 122, 90, 0.02));
  border: 1.5px solid var(--line);
  border-left: 3px solid var(--jade);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--space-5);
  margin: 0 0 var(--space-6);
}

.topline__label {
  margin: 0 0 var(--space-2);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jade-deep);
}

.topline__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--ink);
}

/* ---------- Reading column ---------- */

/* Serif body copy, scoped to the article page so guide listings and every
   other .prose on the site are untouched. Slightly larger and looser than the
   sans default because a serif at the same metrics reads tighter. */
.article-body .prose {
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.78;
  letter-spacing: -0.003em;
}

.article-body .prose p { margin-bottom: var(--space-5); }

/* Headings inside the prose are the same face as the body now, so they need
   weight and tracking to separate rather than a change of family. */
.article-body .prose h2 {
  font-size: clamp(1.45rem, 3vw, 1.85rem);
  font-weight: 620;
  letter-spacing: -0.018em;
}

.article-body .prose h3 {
  font-size: 1.22rem;
  font-weight: 620;
  letter-spacing: -0.012em;
}

/* The furniture below the prose stays in the body face: it is metadata, not
   reading copy, and setting it in the display face blurs that line. */
.article-body .article-toc,
.article-body .source-note,
.article-body .author-box { font-family: var(--font-body); }

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .lead-guide__body { padding: var(--space-6); }
}

@media (max-width: 620px) {
  .guides-hero { padding: var(--space-7) 0 var(--space-6); }
  .topic-rail__inner { padding: var(--space-3) 0; }
  .guide-pager { justify-content: center; }
  .lead-guide__meta { flex-wrap: wrap; gap: var(--space-2); }
  .lead-guide__foot { flex-wrap: wrap; gap: var(--space-3); }
  .lead-guide__foot .go { margin-left: 0; width: 100%; }

  .masthead { padding-top: var(--space-6); }
  .masthead__crumbs { margin-bottom: var(--space-5); }
  .article-body .prose { font-size: 1.05rem; line-height: 1.72; }
}

/* At 360px the rail is the first thing to overflow, so it wraps and the
   separator is dropped rather than allowed to start a line. */
@media (max-width: 400px) {
  .masthead__rail { flex-wrap: wrap; gap: var(--space-2); font-size: 0.7rem; }
  .masthead__bar { display: none; }
  .topline { padding: var(--space-4); }
  .topline__text { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lead-guide__body h2 { transition: none; }
}