/* ============================================================
   LISTING & UTILITY VIEWS
   Insights index · generic archive · search · 404

   Four templates, four structures, on purpose:

     .cz-index  numbered contents list under a dark masthead
     .cz-arc    mosaic of image tiles, type set over photograph
     .cz-find   dense typed ledger, the field itself as the hero
     .cz-lost   route board into the services that do exist

   Tokens only. One container. No !important outside reduced motion.

   HEADER-HEIGHT FALLBACKS: 08 §14.6 counted 22 wrong var() fallbacks across
   four stylesheets and named this file the worst offender — six sites writing
   88px, 76px and 76px against real values of 80 and 70. The six in this file
   now read 80 / 70. Nothing rendered changed, and could not have: --header-h
   and --header-h-compact are declared unconditionally at main.css:38-39 and
   re-declared inside @media (max-width: 680px), so no fallback in this file
   has ever fired. Verified in the browser at 1600px and at 375px — the tokens
   resolve to 80/70 and 68/64 respectively, and .cz-index__masthead's computed
   padding-top is unchanged at 172px / 112px across the edit. They were 6
   pieces of misinformation for whoever read this file on its own, which is
   what §14.6 says they cost. The other 16 live in activity.css (8),
   article.css (5) and reading.css (3) and belong to those files' owners.
   ============================================================ */

/* Running copy in these views is near-black, the same value the article
   template sets on its prose. --cz-mid (#5b6570) is a caption and meta colour;
   it was being used for standfirsts, extracts and the empty-state note, which
   is what made a listing page read washed out beside an article page. */
:root { --cz-body: #21262d; }

/* GOLD ON PAPER. --cz-gold (#c7a36b) is a dark-ground colour and was being set
   as the text colour on the four light grounds these templates use. Measured:
   2.36:1 on --cz-paper (#ffffff) and 2.16:1 on --cz-paper-2 (#f3f5f7), which is
   under 4.5:1 for body copy and under even the relaxed 3:1 for large display
   type — .cz-find__title em fails at 52px on desktop as well as at 28px on a
   375px screen, and so does the 44px .cz-arc__count numeral.

   The same gold rotated down in lightness and nothing else: hsl 36.7 48% 36%
   against the token's 36.5 45% 60%. Hue is within 0.2°, so this is still the
   brand gold, not a brown. Measured after: 5.17:1 on --cz-paper, 4.73:1 on
   --cz-paper-2 — the hover ground of .cz-entry__link and .cz-result__link, so
   it is the value that has to clear, not white.

   IT REPLACES --cz-gold ONLY where gold is the colour of visible, resting-state
   text on a light ground. Deliberately NOT touched:
     · gold on the dark masthead, the tile scrims and the 404 head — swapping
       those would cut their contrast, not raise it (.cz-index__masthead
       .cz-eyebrow, .cz-index__figures dd, .cz-tile__kicker, .cz-tile__meta);
     · non-text gold — the .cz-subject.is-active underline, the
       .cz-lead__kicker fill, the .cz-lead__title underline gradient, the
       .cz-lost__code text-stroke, every hover border and .cz-result mark;
     · hover-only text colour (.cz-btn--ghost, .cz-arc__crumbs a, .pagination
       .page-numbers) — not measured in this pass, and changing a hover state
       changes the interaction, not a contrast defect;
     · the aria-hidden "/" and "·" separators (.cz-arc__crumbs span,
       .cz-lead__meta span[aria-hidden]) — decoration, not content. */
:root { --cz-gold-on-light: #8a6730; }

/* Base for the h1 scale. main.css ships only the mobile override, which left
   every archive h1 rendering at the browser default. */
.cz-h1 {
  margin: 0;
  font-size: clamp(34px, 3.4vw + 20px, 62px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.035em;
  text-wrap: balance;
}

/* A ghost button for light grounds. cz-btn--outline is white-on-dark and
   disappears completely on paper. */
.cz-btn--ghost {
  background: transparent;
  color: var(--cz-text);
  border-color: var(--cz-line);
}
.cz-btn--ghost:hover {
  border-color: var(--cz-gold);
  color: var(--cz-gold);
  transform: translateY(-2px);
}

/* ------------------------------------------------------------
   Search form — shared by all four templates
   ------------------------------------------------------------ */
.cz-searchform {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
}
.cz-searchform__field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 320px;
  min-width: 0;
  background: var(--cz-paper);
  border: 1px solid var(--cz-line);
  border-radius: 2px;
  transition: border-color .3s var(--cz-ease), box-shadow .3s var(--cz-ease);
}
.cz-searchform__field:focus-within {
  border-color: var(--cz-blue);
  box-shadow: 0 0 0 3px rgba(23, 105, 255, .13);
}
.cz-searchform__icon {
  width: 19px;
  height: 19px;
  margin-inline: 16px 0;
  flex: none;
  color: var(--cz-mid);
}
.cz-searchform input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 52px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--cz-text);
  font-size: 15px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.cz-searchform input[type="search"]::placeholder { color: var(--cz-mid); opacity: .82; }
.cz-searchform .cz-btn { flex: none; }

/* Inverted, for the dark mastheads. */
.cz-index__masthead .cz-searchform__field,
.cz-lost__form .cz-searchform__field {
  background: rgba(255, 255, 255, .06);
  border-color: var(--cz-line-dk);
}
.cz-index__masthead .cz-searchform input[type="search"],
.cz-lost__form .cz-searchform input[type="search"] { color: #fff; }
/* --cz-faint is .46 white. Over a photographic plate rather than flat ink that
   measured 3.6:1 against the brightest patch under the field — a placeholder is
   text and has to clear 4.5:1. --cz-lt is still visibly dimmer than the #fff
   the field itself types in. */
.cz-index__masthead .cz-searchform input[type="search"]::placeholder,
.cz-lost__form .cz-searchform input[type="search"]::placeholder { color: var(--cz-lt); }
.cz-index__masthead .cz-searchform__icon,
.cz-lost__form .cz-searchform__icon { color: var(--cz-faint); }

/* ============================================================
   1 — INSIGHTS INDEX
   ============================================================ */
.cz-index { padding-bottom: var(--cz-y); background: var(--cz-paper); }

.cz-index__masthead {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--header-h) + clamp(56px, 6vw, 92px)) 0 clamp(48px, 4.6vw, 72px);
  background: var(--cz-ink);
  color: #fff;
}

/* Three photographs as a quiet plate behind the type — not one full-bleed
   hero, which is the article template's move.

   The opacity sits on each image, NOT on .cz-index__plate. Putting it on the
   parent made the whole plate one composited group, so the ::after scrim was
   being faded to 17% along with the photographs: the scrim did almost nothing
   and the images were a barely-visible wash. With the images carrying their
   own opacity the scrim works at full strength, which lets the photographs
   come up to a level where they actually read while the type stays well clear
   of AA. No greyscale, no blend mode — these are colour photographs. */
/*
   min-width: 0 on the IMG below is load-bearing. A grid item's automatic
   minimum size is its content's intrinsic size, and for an img with an
   aspect-ratio that is height x ratio - so `repeat(3, 1fr)` computed to
   944px 1090px 1154px instead of three equal tracks, and the page carried
   1,704px of real horizontal overflow. It was invisible because main.css
   clips overflow-x on html, body and main: the standard scrollWidth test
   reads 0 and always will. Measured with the clip lifted.
*/
.cz-index__plate {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.cz-index__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  opacity: .54;
}
/* The middle plate is a bright, white-walled interior between two dusk
   cityscapes. Matched by eye to the same apparent weight as its neighbours. */
.cz-index__plate img:nth-child(2) { opacity: .3; }

/* Dense over the type on the left, opening up on the right so the photographs
   are visible where nothing is set over them.

   The two gradients MULTIPLY. The previous pair reached .44 horizontally and
   .42 vertically at the same point, which transmits .56 × .58 = 33% of a .38
   image: 13% of the photograph survived anywhere on the band and the plate was
   a black rectangle with a faint smudge in it. That is the heavy scrim the
   client has rejected. The vertical pass now only anchors the bottom edge
   where the band meets white, so the horizontal pass alone governs.

   Type runs from the container edge to roughly 49% of the viewport, so the
   horizontal ramp is held dense to 48% and released after it. */
.cz-index__plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 6, 7, .94) 0%, rgba(5, 6, 7, .9) 46%, rgba(5, 6, 7, .3) 78%, rgba(5, 6, 7, .42) 100%),
    linear-gradient(180deg, rgba(5, 6, 7, .34) 0%, rgba(5, 6, 7, 0) 42%, rgba(5, 6, 7, .58) 100%);
}

.cz-index__masthead-inner { position: relative; }
.cz-index__masthead .cz-eyebrow { color: var(--cz-gold); }

.cz-index__title {
  margin: 0;
  max-width: 16ch;
  font-size: clamp(40px, 4.6vw + 20px, 84px);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.042em;
  text-wrap: balance;
}

.cz-index__standfirst {
  margin: 26px 0 0;
  max-width: 62ch;
  font-size: clamp(15px, .55vw + 13.6px, 18px);
  line-height: 1.72;
  color: var(--cz-lt);
  text-wrap: pretty;
}

.cz-index__figures {
  margin: clamp(34px, 3.4vw, 52px) 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--cz-line-dk);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 76px);
}

/* When the index has nothing in it the ledger reads "0 / 0 / (blank)", which
   is three large gold noughts announcing that the site is empty. A masthead
   with no ledger is honest; a masthead counting to zero is a fault. The empty
   state below carries the page from here. */
.cz-index:has(.cz-empty) .cz-index__figures { display: none; }

.cz-index__figures div { display: flex; flex-direction: column-reverse; gap: 7px; }
.cz-index__figures dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cz-faint);
}
.cz-index__figures dd {
  margin: 0;
  font-size: clamp(28px, 2vw + 18px, 42px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--cz-gold-soft);
}

/* ---- subject rail ----

   IT WAS A STICKY HORIZONTAL SCROLLER AND BOTH HALVES OF THAT WERE WRONG.

   Scrolling: there are eighteen subjects. At 1500px eleven fitted and seven
   sat outside the viewport behind a 3px scrollbar — measured, two subject
   chips and their counts ending at x=1766 against a 1485px client width. The
   rail is the only route this page offers to "find me everything on visas",
   and it was hiding a third of its own answers. Wrapping shows all eighteen at
   every width and costs one line of vertical space at 1500px.

   Sticky: a wrapped rail is two rows tall, so sticking it under an 80px header
   would park ~170px of chrome permanently over the grid. The rail is a band
   the reader passes through once, between the masthead and the work. It is a
   filter, not a toolbar.

   ALIGNMENT. The chips keep 14px of inline padding so each one clears the 44px
   touch floor in BOTH axes, and the list is pulled back by exactly that much,
   so the first chip's TEXT starts on the container's left edge — the same edge
   as the masthead title, the lead headline and the first card. One left edge
   (R5); the hit area simply overhangs it invisibly. */
.cz-index__subjects {
  position: static;
  background: var(--cz-paper);
  border-bottom: 1px solid var(--cz-line);
}
.cz-subjects {
  margin: 0 0 0 -14px;
  padding: 6px 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0 2px;
}

.cz-subject {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 14px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--cz-mid);
  box-shadow: inset 0 -2px 0 transparent;
  transition: color .25s var(--cz-ease), box-shadow .25s var(--cz-ease);
}
/* box-shadow rather than border-bottom: a border sits on the box, and the box
   is 44px tall to clear the touch floor, so a border would draw the underline
   11px below the word it belongs to. An inset shadow can be offset to the
   text's own baseline and stays on the word at every width. */
.cz-subject:hover { color: var(--cz-text); box-shadow: inset 0 -2px 0 var(--cz-line); }
.cz-subject.is-active { color: var(--cz-text); box-shadow: inset 0 -2px 0 var(--cz-gold); }
/* The rail is rgba(255,255,255,.94) over --cz-paper, i.e. white. Both rules
   carried --cz-gold at 12px: 2.36:1. The is-active rule sets the same value as
   the base rule and always has — it is kept, and kept in step, so the active
   state cannot silently fall back to the pale gold if either is edited alone. */
.cz-subject__count {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--cz-gold-on-light);
}
.cz-subject.is-active .cz-subject__count { color: var(--cz-gold-on-light); }

.cz-index__filtered {
  margin: clamp(30px, 3vw, 46px) 0 0;
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--cz-mid);
}
.cz-index__filtered strong { color: var(--cz-text); font-weight: 700; }
/* The subject name inside "N pieces on {subject}" — content, on white, 14px. */
.cz-index__filtered em { font-style: normal; color: var(--cz-gold-on-light); font-weight: 600; }
/* .14em, not .1em. R19's floor for uppercase labels is ".14em or more", and at
   12.5px this is simultaneously the smallest type in the band and — before this
   edit — the most tightly tracked thing in the file, which is backwards: caps at
   small sizes need more tracking to stay legible, not less. Measured rendered
   before: 12.5px / 1.25px tracking. Floor is 12.5 x .14 = 1.75px.
   The 44px tap floor this link also failed is at the 1000px breakpoint below,
   scoped the same way article.css:446 scopes .cz-crumbs a. */
.cz-index__filtered a {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cz-blue);
  border-bottom: 1px solid transparent;
}
.cz-index__filtered a:hover { border-bottom-color: currentColor; }

/* ---- lead story ----

   SELECTOR NOTE. `.cz-lead` is NOT free. main.css defines it as the site-wide
   lead-paragraph style (15–17px, --cz-mid) and twenty templates use it —
   404.php among them. listing.css loads after main.css, so declaring a bare
   `.cz-lead` here turned the 404's board intro into a two-column grid with a
   rule under it: the paragraph rendered in a 170px-wide column with a
   horizontal line beneath. The index lead story is the only ARTICLE carrying
   the class, and it only ever appears inside .cz-index, so both are required
   here. Do not shorten this selector. */
.cz-index article.cz-lead {
  margin-top: clamp(40px, 4vw, 68px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr);
  align-items: center;
  gap: clamp(32px, 4vw, 72px);
  padding-top: clamp(18px, 1.6vw, 26px);
  padding-bottom: clamp(40px, 4vw, 64px);
  /* Two rules, and the weights say what each one is. A 2px ink rule opens the
     feature; a 1px hairline closes it and separates it from the grid, whose
     cards each carry the same 1px hairline. The whole page is ruled to one
     system, and the only place a heavier weight appears is the one place there
     is a hierarchy to declare. R51: structure from rules, never from panels. */
  border-top: 2px solid var(--cz-text);
  border-bottom: 1px solid var(--cz-line);
}
.cz-lead__copy { min-width: 0; }

.cz-lead__kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--cz-mid);
}
.cz-lead__kicker span {
  padding: 5px 10px;
  background: var(--cz-gold);
  color: var(--cz-ink);
  letter-spacing: .14em;
}

/* The feature headline is DOUBLE the card headline at every width — 50px
   against 24.4px at 1500, 30px against 19px at 375. That ratio is the whole of
   the hierarchy on this page, and it is why the lead needs no wider column, no
   second aspect ratio and no coloured field to be read as the lead. */
.cz-lead__title {
  margin: 0;
  font-size: clamp(30px, 2.5vw + 16px, 50px);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -.034em;
  text-wrap: balance;
}
.cz-lead__title a { background-image: linear-gradient(var(--cz-gold), var(--cz-gold)); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .5s var(--cz-ease-out); }
.cz-lead:hover .cz-lead__title a,
.cz-lead__title a:hover { background-size: 100% 2px; }

.cz-lead__standfirst {
  margin: 20px 0 0;
  max-width: 56ch;
  font-size: clamp(15px, .5vw + 13.6px, 17px);
  line-height: 1.72;
  color: var(--cz-body);
  text-wrap: pretty;
}
.cz-lead__meta {
  margin: 22px 0 26px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--cz-mid);
}
/* Measured 2.36:1 at 12.5px on white. The file's earlier pass left the
   aria-hidden separators on the pale gold on the grounds that decoration is
   not content — but a middot IS a text node, it IS rendered, and a reader with
   low vision sees a gap where the rhythm of the meta line should be. Same hue,
   same brand, 5.17:1. The only gold left at resting state on a light ground in
   this stylesheet is now non-text: rules, underlines and the lead's tag fill. */
.cz-lead__meta span[aria-hidden] { color: var(--cz-gold-on-light); }

/* ONE RATIO ON THIS PAGE. 3:2, here and on every card, at every breakpoint.
   The index shipped three — 16:10 on the lead, 3:2 on the cards, 2:1 on the
   wide card — and the eye reads three ratios in one view as inconsistency
   rather than as variety. The lead is 1.5x the width of a card and its
   headline is 2x the size; it does not also need a different shape, and taking
   the shape away is what lets the scale do the work. */
.cz-lead__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--cz-ink-2);
}
.cz-lead__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* R3.9, the same anchor the cards use. A photograph's subject sits a third
     of the way down; a centred crop takes the chin and loses the eyes. */
  object-position: 50% 34%;
  transition: transform .9s var(--cz-ease-out);
}
.cz-lead:hover .cz-lead__media img { transform: scale(1.035); }

/* ---- the index grid ----

   WHAT WAS HERE, AND WHY IT WAS REPLACED. A three-column grid with a
   full-width first card and every fifth card spanning two columns. Measured at
   1500px, one page of it:

     row 1   lead card, span 3     482px    media 726x454   16:10
     row 2   three cards           541px    media 452x302    3:2
     row 3   wide + single         719px    media 935x467    2:1  and 3:2
     row 4   three cards           567px    media 452x302    3:2

   Four rows, four heights, three aspect ratios, and a span-2 card dragging the
   single card beside it to 719px of mostly empty space. Nothing lined up with
   anything below it, which is exactly what "scattered" describes. The variety
   was deliberate and it was the wrong call: an index exists to let a reader
   scan eighty-three pieces, and regularity is what makes that possible.

   WHAT IT IS NOW. One shape, repeated, with the hierarchy carried entirely by
   the lead story above the grid — which is a different structure, not a
   different card.

     - three equal columns, no spans, no grid-auto-flow: dense (dense reorders
       items away from DOM order, and these carry visible 01/02/03 numbering
       that would then run out of sequence on screen)
     - one aspect ratio, 3:2, on every plate on the page including the lead's
     - one crop anchor, centre 34%
     - every text block's height RESERVED, so rows agree with each other and
       not merely with themselves

   THE HEIGHT RULE IS THE WHOLE FIX. Grid already stretches items to the
   tallest in their row, so each row was internally level; that is why the old
   grid looked fine card-by-card and wrong page-wide. What no grid property can
   do is make row 4 agree with row 2. Fixing the headline box at three lines
   and the standfirst at two makes every card in the section identical in
   height by construction, so every hairline, every plate top, every headline
   baseline and every date line runs straight across the page. */
.cz-entries {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(20px, 2vw, 34px);
  row-gap: clamp(38px, 3.6vw, 60px);
  margin: clamp(40px, 4vw, 66px) 0 0;
  padding: 0;
  list-style: none;
}

.cz-entry { min-width: 0; }

.cz-entry__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: 12px;
  /* The one piece of structure every card carries. Because the cards are the
     same height, these hairlines land on one line across a row and repeat at
     one interval down the page — the grid's discipline made visible instead of
     merely asserted. A panel would do the same job and is forbidden (R51);
     a rule does it without enclosing anything. */
  border-top: 1px solid var(--cz-line);
  transition: border-color .3s var(--cz-ease);
}
.cz-entry__link:hover { border-top-color: var(--cz-gold); }

/* THE PLATE LINE — the index number and the subject, set on the rule.

   It used to sit below the photograph inside the body, where it read as a
   label belonging to the headline. On the rule it reads as an index position,
   which is what it is, and the rule stops being a bare line. */
.cz-entry__plate,
.cz-entry__kicker {
  display: flex;
  align-items: baseline;
  gap: 11px;
  min-width: 0;
  margin-bottom: 13px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cz-gold-on-light);
}
.cz-entry__no {
  flex: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  color: var(--cz-mid);
}
.cz-entry__topic { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* SQUARE CORNERS, DARK GROUND.

   The 3px radius was this stylesheet's alone: `grep border-radius` across
   article.css, figures.css and zones.css finds none on any photographic frame,
   so the masthead plate and all four figure treatments render hard-cornered
   and the index was the one place on the site with rounded pictures. A rounded
   corner is also the single loudest "card component" tell there is, and this
   page is meant to read as a ruled index (R51, and 17-ART-DIRECTION).

   The placeholder is ink rather than the cool grey. The library's register is
   low-key and warm-on-cool; a pale grey box behind it reads as a hole in the
   page for as long as the decode takes, where ink reads as an empty frame. */
.cz-entry__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--cz-ink-2);
}
.cz-entry__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* R3: centre 34%. A face or a skyline sits above the middle of a frame far
     more often than below it, so a centred crop takes the chin and the plinth
     and throws away the eyes and the spire. object-fit: cover on a declared
     ratio means the frame is never letterboxed and the photograph is never
     squashed — there is no dead space inside any plate on this page. */
  object-position: 50% 34%;
  transition: transform .8s var(--cz-ease-out);
}
.cz-entry__link:hover .cz-entry__media img { transform: scale(1.04); }

.cz-entry__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
  padding-top: 16px;
}

/* THE HEADLINE BOX IS THREE LINES, ALWAYS.

   Measured over all 83 published titles: min 36 characters, median 87, mean
   88, max 170 — these are editorial sentences, not labels. At this size in a
   457px column that is two to four lines. A two-line box would truncate the
   majority; a four-line box would leave two lines of air under most of them.
   Three is where the fewest cards are damaged in either direction, and the
   `height` is fixed rather than a `min-height` because a min-height still lets
   a four-line headline push its row taller than the row above it. */
.cz-entry__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 0;
  font-size: clamp(19px, .6vw + 15.2px, 24px);
  font-weight: 700;
  line-height: 1.24;
  height: calc(3 * 1.24em);
  letter-spacing: -.021em;
  color: var(--cz-text);
}
.cz-entry__link:hover .cz-entry__title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Two lines, reserved the same way. The string is cut at 208 characters and
   two lines hold roughly 124 at this width, so nearly every card clamps —
   which is correct here: the standfirst's job on an index is to say what kind
   of piece this is, and the piece itself is one click away. */
.cz-entry__standfirst {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
  height: calc(2 * 1.6em);
  color: var(--cz-body);
  text-wrap: pretty;
}

/* margin-top: auto pins the meta to the foot of the card. With the boxes above
   it fixed this is belt and braces rather than the mechanism — but it is what
   keeps the empty-state shelf, whose rows are not fixed, level as well. */
.cz-entry__meta {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: auto;
  padding-top: 16px;
  font-size: 12.5px;
  letter-spacing: .03em;
  color: var(--cz-mid);
  white-space: nowrap;
}
.cz-entry__meta time::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 0 3px 11px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}
.cz-entry__time { font-weight: 600; }
.cz-entry__go { display: flex; margin-left: auto; color: var(--cz-blue); }
.cz-entry__go svg { width: 20px; height: 20px; transition: transform .35s var(--cz-ease); }
.cz-entry__link:hover .cz-entry__go svg { transform: translateX(4px); }

/* The empty-state shelf in index.php keeps the older anatomy — a bare ordinal
   as a direct child of the link, and the kicker inside the body. It renders
   only when the corpus is empty, which it is not, but it must not break if it
   ever does: give its ordinal its own line and let the rest inherit. */
.cz-entry__link > .cz-entry__no {
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
}


/* ============================================================
   2 — GENERIC ARCHIVE — tile mosaic
   ============================================================ */
.cz-arc { padding-bottom: var(--cz-y); background: var(--cz-paper); }

.cz-arc__head {
  padding: calc(var(--header-h) + clamp(48px, 5vw, 78px)) 0 clamp(36px, 3.4vw, 54px);
  background: var(--cz-paper-2);
  border-bottom: 1px solid var(--cz-line);
}

.cz-arc__crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cz-mid);
}
.cz-arc__crumbs a { transition: color .25s var(--cz-ease); }
.cz-arc__crumbs a:hover { color: var(--cz-gold); }
.cz-arc__crumbs span { color: var(--cz-gold); }

.cz-arc__headline {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(28px, 3.4vw, 64px);
}
.cz-arc__title {
  margin: 0;
  font-size: clamp(32px, 3.4vw + 18px, 66px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.038em;
  text-wrap: balance;
}
.cz-arc__aside { padding-bottom: 6px; }
.cz-arc__count { display: flex; align-items: baseline; gap: 11px; margin: 0; }
/* Large text, and it still failed: 30–44px at weight 300 on the head's
   --cz-paper-2 measured 2.16:1 against a 3:1 floor. The `:has(.cz-empty)`
   override below is untouched — it is (0,3,0) to this rule's (0,1,1) and wins
   as it always did, and it sets --cz-body, not gold, so it needs nothing. */
.cz-arc__count strong {
  font-size: clamp(30px, 2vw + 18px, 44px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--cz-gold-on-light);
}
.cz-arc__count span { font-size: 13px; font-weight: 600; color: var(--cz-mid); }

/* An empty collection still states its size honestly, but a 44px gold nought
   should not be the loudest mark on the page. Dropped to the same weight as
   the sentence it belongs to when there is nothing to count. */
.cz-arc:has(.cz-empty) .cz-arc__count { align-items: baseline; }
.cz-arc:has(.cz-empty) .cz-arc__count strong {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--cz-body);
}
.cz-arc:has(.cz-empty) .cz-arc__count span { color: var(--cz-body); }
.cz-arc__desc {
  margin: 16px 0 0;
  max-width: 52ch;
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--cz-body);
  text-wrap: pretty;
}

.cz-arc__siblings {
  margin-top: clamp(30px, 3vw, 46px);
  padding-top: 22px;
  border-top: 1px solid var(--cz-line);
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
}
.cz-arc__siblings-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cz-gold-on-light);
  flex: none;
}
.cz-arc__siblings ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cz-arc__siblings a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  min-height: 40px;
  background: var(--cz-paper);
  border: 1px solid var(--cz-line);
  border-radius: 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cz-text);
  transition: border-color .25s var(--cz-ease), color .25s var(--cz-ease);
}
.cz-arc__siblings a:hover { border-color: var(--cz-gold); color: var(--cz-gold); }
.cz-arc__siblings a span { font-size: 12px; font-weight: 700; color: var(--cz-mid); }

/* ---- mosaic ----

   The archive is deliberately not the index (R1): type over photograph, a
   feature spanning two columns and two rows. What it borrows from the index
   rewrite is the arithmetic. Row height was left to `min-height: 236px` on the
   tiles and `486px` on the feature, two numbers that have to agree with each
   other and with the gap and did not — 2 x 236 + 22 is 494, not 486. A single
   declared row height makes the feature exactly two rows plus one gap, by
   construction, at every breakpoint. */
.cz-mosaic {
  --cz-tile-h: 260px;
  margin-top: clamp(36px, 3.6vw, 60px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: var(--cz-tile-h);
  gap: clamp(14px, 1.3vw, 22px);
}
.cz-tile { position: relative; min-width: 0; }
.cz-tile--feature { grid-column: span 2; grid-row: span 2; }

.cz-tile__link {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: 2px;
  background: var(--cz-ink-2);
  isolation: isolate;
}
/* No min-height on either tile any more: the row track IS the height, so the
   feature is exactly two rows plus one gap and cannot disagree with its
   neighbours by the few pixels 486 disagreed with 494 by. */

.cz-tile__media { position: absolute; inset: 0; display: block; }
.cz-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--cz-ease-out);
}
.cz-tile__link:hover .cz-tile__media img { transform: scale(1.055); }

.cz-tile__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 6, 7, .06) 22%, rgba(5, 6, 7, .58) 62%, rgba(5, 6, 7, .93) 100%);
  transition: opacity .5s var(--cz-ease);
}
.cz-tile__link:hover .cz-tile__scrim { opacity: .88; }

.cz-tile__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: clamp(18px, 1.7vw, 28px);
  color: #fff;
  gap: 9px;
}
.cz-tile__kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cz-gold-soft);
}
.cz-tile__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.cz-tile--feature .cz-tile__title { font-size: clamp(22px, 1.5vw + 14px, 34px); line-height: 1.14; }
.cz-tile__standfirst {
  max-width: 48ch;
  font-size: 14.5px;
  line-height: 1.64;
  color: var(--cz-lt);
  text-wrap: pretty;
}
.cz-tile__meta {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--cz-faint);
}
.cz-tile__meta span[aria-hidden] { color: var(--cz-gold); }

/* ============================================================
   3 — SEARCH — result ledger
   ============================================================ */
.cz-find { padding-bottom: var(--cz-y); background: var(--cz-paper); }

.cz-find__head {
  padding: calc(var(--header-h) + clamp(46px, 5vw, 74px)) 0 clamp(32px, 3vw, 48px);
  border-bottom: 1px solid var(--cz-line);
}
.cz-find__title {
  margin: 0 0 30px;
  max-width: 26ch;
  font-size: clamp(28px, 2.6vw + 16px, 52px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.035em;
  text-wrap: balance;
}
/* The searched term inside the H1. Large text at both ends of the clamp — 52px
   at 1600px, 28px bold at 375px — and 2.36:1 clears neither 4.5:1 nor the 3:1
   large-text relaxation. It is also the one word on the page the reader came
   for, so it is the worst possible place for the site's weakest contrast. */
.cz-find__title em { font-style: normal; color: var(--cz-gold-on-light); }
.cz-find__field { max-width: 720px; }

.cz-find__types {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cz-find__types li {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 13px;
  background: var(--cz-paper-2);
  border-radius: 2px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cz-mid);
}
/* Sits on the --cz-paper-2 pill declared directly above: 2.16:1, the worst of
   the two grounds, which is why the token is chosen against #f3f5f7. */
.cz-find__type-count { font-weight: 700; color: var(--cz-gold-on-light); font-variant-numeric: tabular-nums; }

/* The ledger runs at a measure, not across the whole 1720px container. A
   result is read, not browsed, and a 1300px line of 14px type is not readable.
   The field in the head is already capped at 720px, so a single instrument
   column is the consistent move; the section rules still run full width. */
.cz-results,
.cz-find .cz-pagination,
.cz-find .pagination { max-width: min(100%, 1120px); }

.cz-results { margin: 0; padding: 0; list-style: none; }
.cz-result { border-bottom: 1px solid var(--cz-line); }

/* ONE grid for every row, illustrated or not.

   EVERY CHILD IS PLACED EXPLICITLY. This grid has an optional child — the
   media plate is only printed for posts and pages — and auto-placement cannot
   survive that. It did not: with the plate present, flow put badge in 1/1,
   MEDIA in 1/2 where the body belongs, the body into the 28px arrow column and
   the arrow onto a second row. Measured at 1600px, an illustrated row rendered
   1359px tall with a 937px-wide photograph and a 28px-wide column of text, and
   the titles of those rows started at x=1128 while every other title started
   at x=166. A ledger is scanned in one vertical sweep; that broke it twice.

   Placement: badge 1/1, plate under it at 2/1, body spans both rows in
   column 2 so every title starts on the same x, arrow spans both rows in
   column 3. Row 2 is `auto`, so a row with no plate collapses it to nothing
   and gains no phantom height. */
.cz-result__link,
.cz-result__link--flat {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) 28px;
  grid-template-rows: auto auto;
  align-items: start;
  align-content: start;
  column-gap: clamp(16px, 1.6vw, 28px);
  row-gap: 0;
  padding: 20px 0;
  transition: background .35s var(--cz-ease);
}
.cz-result__link:hover { background: var(--cz-paper-2); }

/* .14em is R19's floor for uppercase labels; this shipped at .12em.
   THE PADDING GOES DOWN 1px EACH SIDE IN THE SAME EDIT, AND THAT IS NOT
   cosmetic. The badge sits in the fixed 104px rail declared above, and
   `white-space: nowrap` means it cannot reflow. cz_result_type()
   (inc/listing.php:423-429) has a closed label set — Insight, Service,
   Activity, Free zone, Page — whose longest member is "Free zone", 9
   characters. Measured at 1600px before this edit: 102.04px inside a 104px
   track. Raising tracking by .02em adds 9 x .02 x 12px = 2.16px, which would
   have put it at 104.2px and spilled the nowrap text past its own border.
   Dropping 11px to 10px returns 2px and keeps the rail width — and therefore
   the single title x-origin the grid comment above exists to protect —
   untouched. Re-measure the "Free zone" badge, not the "Insight" one, if this
   rule is ever edited again: Insight has 2px more slack and will pass while
   the long label fails. */
.cz-result__badge {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: start;
  padding: 6px 10px;
  border: 1px solid var(--cz-line);
  border-radius: 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cz-mid);
  white-space: nowrap;
}
/* TEXT COLOUR ONLY. The .48 border stays on the old gold on purpose: it is the
   same tinted-hairline treatment as the --cz-blue variant on the next line
   (.38 blue behind #1769ff text), it is non-text so 1.4.3 does not reach it,
   and it is not what was measured. Darkening it too would change the badge's
   weight in the 104px rail the comment above exists to protect. */
.cz-result__badge--post { color: var(--cz-gold-on-light); border-color: rgba(199, 163, 107, .48); }
.cz-result__badge--cz_freezone { color: var(--cz-blue); border-color: rgba(23, 105, 255, .38); }

.cz-result__media {
  grid-column: 1;
  grid-row: 2;
  display: block;
  width: 100%;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 2px;
  aspect-ratio: 3 / 2;
  background: var(--cz-paper-2);
}
.cz-result__media img { width: 100%; height: 100%; object-fit: cover; }

.cz-result__body {
  grid-column: 2;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.cz-result__title {
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.018em;
  color: var(--cz-text);
}
/* Near-black, not --cz-mid. An extract is running copy the reader actually
   reads; --cz-mid is the caption and meta value and is what made this ledger
   look washed out beside an article page. */
.cz-result__extract {
  max-width: 72ch;
  font-size: 14px;
  line-height: 1.62;
  color: var(--cz-body);
  text-wrap: pretty;
}
.cz-result mark {
  background: rgba(199, 163, 107, .28);
  color: inherit;
  padding: 0 2px;
  border-radius: 1px;
}
/* BLUE ON PAPER. The path line was --cz-blue (#1769ff) under `opacity: .78`,
   which is not a blue the reader ever sees: composited over --cz-paper it
   renders #4a8aff — 3.30:1 at 12px/600 — and over --cz-paper-2, the
   .cz-result__link hover ground declared above, #4788fd at 3.09:1. Both are
   under 4.5:1, and this is the one line in a result that is a URL, so it is
   also the line a reader squints at to decide whether a hit is worth a click.

   The opacity goes, because compositing the colour down is what caused this.
   Dropping it alone is not enough: bare --cz-blue measures 4.67:1 on
   --cz-paper but 4.27:1 on --cz-paper-2, and paper-2 is the value that has to
   clear, for the same reason the gold note at the top of this file gives.

   The literal below is --cz-blue with lightness rotated down and nothing else:
   hsl 218.75 100% 47% against the token's 218.79 100% 54.5%. Hue is within
   0.04°, so this is still the brand blue, not a navy. Measured after: 5.90:1
   on --cz-paper, 5.40:1 on --cz-paper-2. Blue is correct here and is not being
   traded for a neutral — the whole card is an <a> (result.php:27), so the path
   is inside the link and reads as link colour on purpose.

   A literal, not a :root token, on purpose: it has exactly one consumer in the
   theme, and a second shared token name declared in this file would collide
   with the token work in main.css the same way a --cz-blue-on-light would.
   .cz-result__badge--cz_freezone is the other blue text on these grounds and
   is NOT touched — it passes at rest on --cz-paper (4.67:1) and only its hover
   ground falls short, which was not measured in this pass. */
.cz-result__path {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: #0055f0;
  overflow-wrap: anywhere;
}
.cz-result__go {
  grid-column: 3;
  grid-row: 1 / -1;
  align-self: center;
  display: flex;
  justify-content: flex-end;
  color: var(--cz-blue);
}
.cz-result__go svg { width: 20px; height: 20px; }

/* ============================================================
   4 — 404 — route board
   ============================================================ */
.cz-lost { padding-bottom: var(--cz-y); background: var(--cz-paper); }

.cz-lost__head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--header-h) + clamp(52px, 5.4vw, 88px)) 0 clamp(52px, 5vw, 84px);
  background: var(--cz-ink);
  color: #fff;
}
.cz-lost__plate { position: absolute; inset: 0; z-index: -1; }
/* A .32 image under a scrim that is fully opaque ink for its first 26% and
   still .58 at the far edge left 13% of the photograph visible at the very
   brightest point — the band read as flat black and the Dubai Frame plate was
   doing nothing. The ramp now stays dense across the 404 mark and the copy,
   which end around 65% of the viewport, and opens after them. No greyscale, no
   blend mode: this is a colour photograph and it is meant to be seen. */
.cz-lost__plate img { width: 100%; height: 100%; object-fit: cover; opacity: .6; }
.cz-lost__plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(102deg, rgba(5, 6, 7, .95) 0%, rgba(5, 6, 7, .9) 63%, rgba(5, 6, 7, .3) 100%);
}

.cz-lost__head-inner {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(30px, 4vw, 76px);
}
.cz-lost__code {
  margin: 0;
  font-size: clamp(88px, 11vw, 200px);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 1px var(--cz-gold);
  opacity: .72;
  user-select: none;
}
.cz-lost__copy { min-width: 0; }
.cz-lost__title {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(28px, 2.4vw + 16px, 50px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.cz-lost__note {
  margin: 20px 0 30px;
  max-width: 60ch;
  font-size: clamp(15px, .5vw + 13.6px, 17px);
  line-height: 1.72;
  color: var(--cz-lt);
  text-wrap: pretty;
}
.cz-lost__form { max-width: 620px; }

.cz-lost__board { padding-top: clamp(48px, 4.6vw, 78px); }
.cz-lost__board-head { max-width: 62ch; margin-bottom: clamp(28px, 2.8vw, 44px); }
.cz-lost__board-head .cz-h2 { margin-bottom: 14px; }

.cz-lost__routes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(14px, 1.3vw, 20px);
}
.cz-lost__routes a {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 18px;
  height: 100%;
  padding: 16px;
  background: var(--cz-paper);
  border: 1px solid var(--cz-line);
  border-radius: 2px;
  transition: border-color .3s var(--cz-ease), background .3s var(--cz-ease), transform .3s var(--cz-ease);
}
.cz-lost__routes a:hover {
  border-color: var(--cz-gold);
  background: var(--cz-paper-2);
  transform: translateY(-2px);
}
.cz-lost__route-media {
  display: block;
  overflow: hidden;
  border-radius: 2px;
  aspect-ratio: 4 / 3;
  background: var(--cz-paper-2);
}
.cz-lost__route-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--cz-ease-out);
}
.cz-lost__routes a:hover .cz-lost__route-media img { transform: scale(1.06); }
.cz-lost__route-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cz-lost__route-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.018em;
  color: var(--cz-text);
  text-wrap: balance;
}
.cz-lost__route-note { font-size: 13px; line-height: 1.55; color: var(--cz-mid); text-wrap: pretty; }
.cz-lost__route-go { display: flex; justify-content: flex-end; color: var(--cz-blue); }
.cz-lost__route-go svg { width: 19px; height: 19px; }

/* ---- shared two-column blocks on 404 and empty state ----

   The second column is "the most detailed guides we have", which is built from
   published posts. With the legacy corpus removed there are none, so ONE
   column arrives. `repeat(auto-fit, minmax(320px, 1fr))` stretched that single
   column to the full 1512px container: a list of 15.5px links on a 1500px
   measure. Capping the track keeps two columns reading as two columns and one
   column reading at a measure. */
.cz-lost__cols,
.cz-empty__cols {
  margin-top: clamp(44px, 4.4vw, 72px);
  padding-top: clamp(34px, 3.4vw, 52px);
  border-top: 1px solid var(--cz-line);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 560px));
  gap: clamp(28px, 3vw, 60px);
}

/* …and when it really is alone, a 560px list stranded in a 1512px container is
   itself an empty space. The register routes run horizontally instead: three
   destinations under one rule, which is a different shape from both the card
   board above it and the two-column form. */
.cz-lost__cols:has(.cz-lost__col:only-child),
.cz-empty__cols:has(.cz-empty__col:only-child) { grid-template-columns: minmax(0, 1fr); }

.cz-lost__cols:has(.cz-lost__col:only-child) .cz-lost__col ul,
.cz-empty__cols:has(.cz-empty__col:only-child) .cz-empty__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  column-gap: clamp(22px, 2.4vw, 52px);
}
/* Both consumers are on paper: .cz-lost__cols sits in .cz-lost__board, below
   the dark .cz-lost__head, and .cz-empty__cols is inside .cz-empty on the index
   and search bodies. Nothing here is ever set over the ink band, so there is no
   ground on which the darker gold would be the wrong direction. */
.cz-lost__subhead,
.cz-empty__subhead {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--cz-gold-on-light);
}

/* margin-top: 0 above is right for every subhead that OPENS its wrapper, and
   that is all three in template-parts/content/none.php and both in 404.php —
   there the space is supplied by the parent (.cz-empty__routes carries
   margin-top: clamp(40px, 4vw, 66px)).

   index.php reuses the same class vocabulary but places its subhead directly
   after .cz-empty__lead with no wrapper to carry that margin, and neither
   .cz-empty__lead nor .cz-empty__form declares a bottom one — so the gold
   "On the shelf now" welded itself to the search button at 0.0px. One missing
   margin, two consumers, one of them broken.

   :not(:first-child) is what separates them: it fires only where the subhead
   follows a sibling, which is exactly and only the index.php case. It is inert
   in all five wrapper-opening cases, so the working consumer cannot regress. */
.cz-empty__subhead:not(:first-child) { margin-top: clamp(38px, 4vw, 58px); }
.cz-lost__col ul,
.cz-empty__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--cz-line);
}
.cz-lost__col li,
.cz-empty__list li { border-bottom: 1px solid var(--cz-line); }
.cz-lost__col a,
.cz-empty__list a {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px 0;
  transition: padding-left .3s var(--cz-ease);
}
.cz-lost__col a:hover,
.cz-empty__list a:hover { padding-left: 10px; }
.cz-lost__col strong,
.cz-empty__list strong {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: -.015em;
  color: var(--cz-text);
}
.cz-lost__col span,
.cz-empty__list span { font-size: 13px; line-height: 1.55; color: var(--cz-mid); }

/* ---- closing ask ---- */
.cz-lost__ask,
.cz-empty__ask {
  margin-top: clamp(44px, 4.4vw, 72px);
  padding: clamp(28px, 3vw, 46px);
  background: var(--cz-ink);
  color: #fff;
  border-radius: 2px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(24px, 3vw, 52px);
}
.cz-lost__ask-copy,
.cz-empty__ask p {
  margin: 0;
  max-width: 58ch;
  font-size: clamp(15px, .5vw + 13.6px, 17px);
  line-height: 1.68;
  color: var(--cz-lt);
  text-wrap: pretty;
}
.cz-lost__ask-actions,
.cz-empty__ask-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cz-lost__ask .cz-btn--ghost,
.cz-empty__ask .cz-btn--ghost { color: #fff; border-color: var(--cz-line-dk); }
.cz-lost__ask .cz-btn--ghost:hover,
.cz-empty__ask .cz-btn--ghost:hover { border-color: var(--cz-gold); color: var(--cz-gold); }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.cz-empty { padding: clamp(44px, 4.4vw, 76px) 0 0; }
.cz-empty__lead { max-width: 74ch; }
.cz-empty__title {
  margin: 0 0 18px;
  font-size: clamp(24px, 1.9vw + 15px, 38px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.cz-empty__note {
  margin: 0 0 30px;
  font-size: clamp(15px, .5vw + 13.6px, 17px);
  line-height: 1.72;
  color: var(--cz-body);
  text-wrap: pretty;
}
.cz-empty__form { max-width: 640px; }

.cz-empty__routes { margin-top: clamp(40px, 4vw, 66px); }

/* Six routes, three across, so the board closes in two full rows. auto-fit
   made four tracks at 1512px and left the last row two-thirds empty — the
   ragged shelf the client keeps calling a big empty space. */
.cz-empty__routes ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 18px);
}

/* PLACED EXPLICITLY. The anchor holds three children — title, note, chevron —
   and this was a two-track grid relying on auto-flow, so the note landed in
   the 22px chevron track and rendered 22px wide by 181px tall while the
   chevron dropped to a second row. Every card was a 230px box with a column
   of single letters down the right of it. Title and note own column 1 on
   their own rows; the chevron owns column 2. */
.cz-empty__routes a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  grid-template-rows: auto auto;
  align-content: start;
  column-gap: 16px;
  row-gap: 6px;
  height: 100%;
  padding: 20px 20px 22px;
  background: var(--cz-paper-2);
  border-top: 2px solid var(--cz-line);
  transition: border-top-color .3s var(--cz-ease), background .3s var(--cz-ease), transform .3s var(--cz-ease);
}
.cz-empty__routes a:hover {
  border-top-color: var(--cz-gold);
  background: var(--cz-paper);
  transform: translateY(-2px);
}
.cz-empty__routes svg {
  grid-column: 2;
  grid-row: 1;
  width: 18px;
  height: 18px;
  color: var(--cz-blue);
}
.cz-empty__route-title {
  grid-column: 1;
  grid-row: 1;
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--cz-text);
  text-wrap: balance;
}
.cz-empty__route-note {
  grid-column: 1;
  grid-row: 2;
  display: block;
  font-size: 13px;
  line-height: 1.55;
  color: var(--cz-mid);
  text-wrap: pretty;
}

/* ============================================================
   PAGINATION — shared
   ============================================================ */
.cz-pagination,
.pagination {
  margin-top: clamp(40px, 4vw, 68px);
  padding-top: clamp(24px, 2.4vw, 36px);
  border-top: 1px solid var(--cz-line);
}
/* WHERE THE READER IS, before offering to move them.

   83 pieces at ten a page was nine pages of numbers with nothing saying how
   far through them you were. The page size is now 25 — four pages, and page
   one closes on eight complete rows of three — and this line states the span
   and the position it was derived from. Centred over the numbers so the block
   reads as one instrument rather than a caption and a control. */
.cz-pagination__where {
  margin: 0 0 16px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cz-mid);
}

.cz-pagination .nav-links,
.pagination .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.cz-pagination .page-numbers,
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--cz-line);
  border-radius: 2px;
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--cz-text);
  transition: border-color .25s var(--cz-ease), color .25s var(--cz-ease), background .25s var(--cz-ease);
}
.cz-pagination .page-numbers:hover,
.pagination .page-numbers:hover { border-color: var(--cz-gold); color: var(--cz-gold); }
.cz-pagination .page-numbers.current,
.pagination .page-numbers.current {
  background: var(--cz-ink);
  border-color: var(--cz-ink);
  color: #fff;
}
.cz-pagination .page-numbers.dots,
.pagination .page-numbers.dots { border-color: transparent; color: var(--cz-mid); min-width: 26px; padding: 0; }
.cz-pagination .page-numbers.prev,
.cz-pagination .page-numbers.next,
.pagination .page-numbers.prev,
.pagination .page-numbers.next { font-weight: 700; letter-spacing: .06em; }
.cz-pagination .screen-reader-text,
.pagination .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* The five blocks below carried declarations for a four-track `.cz-entry__link`
   row — 46px numeral / 122px thumbnail / 1fr body / auto meta — that has not
   existed since the index became a grid of cards. They were described as
   "inert now" and left in place. Two of them were not inert: `padding: 20px 0`
   at 860px overrode the card's own padding and added 20px under every card,
   and `aspect-ratio: 16 / 9` at 420px silently gave the narrowest phone a
   different plate shape from every other width. Both are removed here rather
   than out-specified further down the file (23.1). */
@media (max-width: 1180px) {
  /* Three columns, and the feature stays 2x2 rather than becoming a full-width
     banner. 24 tiles is 27 cells — the feature is worth four — which divides
     by three exactly, so the mosaic still closes on a straight bottom edge. */
  .cz-mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); --cz-tile-h: 250px; }
}

@media (max-width: 1000px) {
  /* Lead stacking moved up to the 1100px block, so the feature and the grid
     change shape at the same width rather than 100px apart. */
  .cz-arc__headline { grid-template-columns: 1fr; align-items: start; gap: 24px; }
  .cz-lost__head-inner { grid-template-columns: 1fr; gap: 20px; }
  .cz-lost__code { font-size: clamp(76px, 17vw, 128px); }
  /* The head stacks here, so the copy runs the full width of the band and the
     horizontal ramp has no empty right-hand side left to open into. The ramp
     turns vertical and is cut to where the type actually is, measured: the 404
     mark occupies 19–29% of the band, the eyebrow, title and note 32–68%, the
     search field 73–91%. Light over the mark, where the photograph reads and
     nothing but a decorative gold outline is set; dense from 31% to 70%. */
  .cz-lost__plate::after {
    background: linear-gradient(180deg,
      rgba(5, 6, 7, .3) 0%,
      rgba(5, 6, 7, .44) 22%,
      rgba(5, 6, 7, .75) 31%,
      rgba(5, 6, 7, .79) 70%,
      rgba(5, 6, 7, .74) 86%,
      rgba(5, 6, 7, .8) 100%);
  }
  .cz-lost__ask,
  .cz-empty__ask { grid-template-columns: 1fr; }
  /* Six routes still close in whole rows: two across, three rows. */
  .cz-empty__routes ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* R7, 44px. Measured at 375px on /insights/?cz_topic=default before this
     rule: the "Clear" link was 46.6 x 20.4 with min-height and min-width both
     computing `auto`, and it was the ONLY element outside the header and
     footer under 44px on any of the three routes this stylesheet serves.
     min-width as well as min-height, and the 1000px band rather than 640px,
     because that is exactly how article.css:446 solves the identical problem
     on .cz-crumbs a — one problem, one pattern, one breakpoint.

     THE UNDERLINE HAS TO MOVE WITH IT. The resting affordance is
     `border-bottom: 1px solid transparent`, revealed on hover. A border sits
     on the box, and the box is now ~24px taller than the word, so the hover
     underline would detach and float below "Clear" instead of underlining it.
     text-decoration follows the text rather than the box, so it survives the
     taller target. Confined to this block: above 1000px the border-bottom
     mechanism and the row's baseline rhythm are untouched. */
  .cz-index__filtered a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    border-bottom: 0;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }
  .cz-index__filtered a:hover { text-decoration-color: currentColor; }
}

@media (max-width: 860px) {
  .cz-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); --cz-tile-h: 230px; }
  .cz-tile--feature { grid-column: span 2; }

  /* The ledger turns: plate becomes a left rail spanning the row, badge sits
     over the title rather than beside it, and the chevron is dropped — it is
     aria-hidden decoration and the whole row is already the link, so spending
     24px of a 343px line on it costs the title two words per line.
     Every child is placed explicitly here too, for the same reason as above. */
  .cz-result__link,
  .cz-result__link--flat {
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 0;
    padding: 18px 0;
  }
  .cz-result__media { grid-area: 1 / 1 / 3 / 2; margin-top: 3px; }
  .cz-result__badge { grid-area: 1 / 2 / 2 / 3; }
  .cz-result__body { grid-area: 2 / 2 / 3 / 3; margin-top: 9px; }
  .cz-result__go { display: none; }

  /* No plate on this row, so the 96px rail would be 96px of nothing. */
  .cz-result__link--flat { grid-template-columns: minmax(0, 1fr); }
  .cz-result__link--flat .cz-result__badge { grid-area: 1 / 1 / 2 / 2; }
  .cz-result__link--flat .cz-result__body { grid-area: 2 / 1 / 3 / 2; }
}

@media (max-width: 640px) {
  .cz-index__masthead,
  .cz-arc__head,
  .cz-find__head,
  .cz-lost__head { padding-top: calc(var(--header-h) + 44px); }

  .cz-index__plate { grid-template-columns: 1fr; }
  .cz-index__plate img:nth-child(n + 2) { display: none; }
  /* One plate, and the standfirst reaches the far edge of it, so there is no
     right-hand side left to open into. Vertical ramp instead: the photograph
     reads across the top of the band, above where the type starts. */
  .cz-index__plate::after {
    background: linear-gradient(180deg,
      rgba(5, 6, 7, .34) 0%,
      rgba(5, 6, 7, .46) 20%,
      rgba(5, 6, 7, .78) 30%,
      rgba(5, 6, 7, .82) 100%);
  }

  .cz-index__figures { gap: 22px 34px; }
  .cz-index__subjects { position: static; }

  .cz-searchform { gap: 10px; }
  .cz-searchform__field { flex: 1 1 100%; }
  .cz-searchform .cz-btn { width: 100%; justify-content: center; }

  /* One column: a 2x2 feature would be a 343 x 502 portrait, so the feature
     drops to one row and is simply the first tile. */
  .cz-mosaic { grid-template-columns: 1fr; --cz-tile-h: 240px; }
  .cz-tile--feature { grid-column: span 1; grid-row: auto; }

  .cz-lost__routes a { grid-template-columns: 72px minmax(0, 1fr) 20px; gap: 14px; }
  .cz-empty__routes ul { grid-template-columns: minmax(0, 1fr); }
  .cz-empty__routes a { padding: 17px 16px 19px; }
}

@media (max-width: 420px) {
  /* The route board keeps its horizontal card at this width. Stacking a 16/9
     plate over every route turned eight routes into roughly 2,100px of
     scrolling on a 375px screen — the whole 404 measured 7,542px. A thumbnail
     keeps the board scannable and still shows the photograph. The chevron goes
     because the entire card is already the link and it is aria-hidden. */
  .cz-lost__routes a { grid-template-columns: 76px minmax(0, 1fr); gap: 13px; padding: 14px; }
  .cz-lost__route-go { display: none; }
}

/* ------------------------------------------------------------
   Touch — hover affordances are meaningless and must not stick
   ------------------------------------------------------------ */
@media (hover: none) {
  .cz-entry__link:hover,
  .cz-result__link:hover { background: transparent; }
  /* A tap latches :hover on touch, so the gold rule would stay lit on the last
     card tapped and read as a selected state that means nothing. */
  .cz-entry__link:hover { border-top-color: var(--cz-line); }
  .cz-entry__link:hover .cz-entry__title { text-decoration: none; }
  .cz-subject:hover { box-shadow: inset 0 -2px 0 transparent; }
  .cz-subject.is-active:hover { box-shadow: inset 0 -2px 0 var(--cz-gold); }
  .cz-entry__link:hover .cz-entry__media img,
  .cz-lead:hover .cz-lead__media img,
  .cz-tile__link:hover .cz-tile__media img,
  .cz-lost__routes a:hover .cz-lost__route-media img { transform: none; }
  /* A tap leaves :hover latched on touch, so the whole hover state — not just
     the lift — is returned to its resting values. */
  .cz-lost__routes a:hover {
    transform: none;
    background: var(--cz-paper);
    border-color: var(--cz-line);
  }
  .cz-empty__routes a:hover {
    transform: none;
    background: var(--cz-paper-2);
    border-top-color: var(--cz-line);
  }
  .cz-lost__col a:hover,
  .cz-empty__list a:hover { padding-left: 0; }
  .cz-lead:hover .cz-lead__title a { background-size: 0 2px; }
}

/* ------------------------------------------------------------
   Touch — the 44px floor (R7), measured rather than assumed
   ------------------------------------------------------------ */
@media (pointer: coarse) {
  /* The lead's "Read the piece" link measured 118.2 x 25.7 — the only control
     on this page under the floor once the subject chips were given their own
     min-height. .cz-textlink is main.css's and is used on twenty templates, so
     it is raised HERE, scoped inside .cz-index, rather than edited there:
     a cross-file defect is reported, not fixed (12.5), and this is the version
     of the fix that belongs to this file.

     The whole card, the plate and every chip already clear 44px by their own
     geometry; this is the one exception and it is stated as one. */
  .cz-index .cz-textlink {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cz-entry__link,
  .cz-subject,
  .cz-entry__go svg,
  .cz-entry__media img,
  .cz-lead__media img,
  .cz-tile__media img,
  .cz-lost__route-media img,
  .cz-lead__title a,
  .cz-lost__col a,
  .cz-empty__list a,
  .cz-lost__routes a,
  .cz-empty__routes a { transition: none !important; }
}

/* ============================================================
   THE INDEX GRID — responsive.

   Three columns, then two, then one. Nothing else changes: same plate ratio,
   same crop anchor, same reserved line boxes, same hairline. The one thing
   that is released is the reserved heights, and only in the single-column
   band, where "every row the same height" describes one card and therefore
   describes nothing — so the phone gets the full headline instead of a clamp
   protecting an alignment that no longer exists.
   ============================================================ */

@media (max-width: 1100px) {
  .cz-entries { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* The feature stacks at the SAME width the grid drops a column, not 100px
     later. Between 1000 and 1100 the split survived with a copy column under
     480px, which set the 50px headline six lines deep beside a plate less than
     two thirds as tall — the feature reading as a column of type with a
     picture parked next to it. Plate first, then copy: the order that reads on
     a narrow screen, and the order the cards below already use.

     The ratio does NOT change with the stack. 3:2 is the shape of every plate
     on this page at every width, and the stacked lead is the one place a
     second ratio used to creep back in. */
  .cz-index article.cz-lead {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .cz-lead__media { order: -1; }
}

@media (max-width: 680px) {
  .cz-entries {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(30px, 6vw, 40px);
    margin-top: clamp(30px, 6vw, 44px);
  }

  /* Heights released, clamps loosened. A 343px column holds fewer characters
     per line, so the same headline that set three lines on a laptop sets four
     on a phone; clamping it to three there would truncate the majority of the
     corpus to buy an alignment that a single column cannot have. */
  .cz-entry__title {
    -webkit-line-clamp: 4;
    height: auto;
    font-size: clamp(19px, 1.6vw + 15px, 22px);
  }
  .cz-entry__standfirst {
    -webkit-line-clamp: 3;
    height: auto;
    font-size: 14.5px;
  }

  /* 44px tap target (R7): the card is the link and its own height carries it,
     but the meta line must not crowd the card below. */
  .cz-entry__meta { padding-top: 14px; }
}

/* See the note at .cz-index__plate. A grid item's automatic minimum size is its
   content's intrinsic size; for an image carrying an aspect-ratio that resolves
   to height x ratio, which forced the three equal tracks apart and produced
   1,704px of horizontal overflow on /insights/ — masked by `overflow-x: clip`,
   so every standard overflow check on this page was a false pass. */
.cz-index__plate,
.cz-index__plate img,
.cz-entry__media,
.cz-entry__media img { min-width: 0; }

/* ============================================================
   9 — INSIGHTS, EDITORIAL REDESIGN

   The archive now behaves like a publication: one decisive feature, a
   structured subject directory, then a compact field of horizontal entries.
   These rules intentionally sit after the shared listing breakpoints so the
   index can change without disturbing archive, search or 404 views.
   ============================================================ */

.cz-index__masthead {
  min-height: clamp(540px, 68vh, 760px);
  display: flex;
  align-items: flex-end;
  padding: calc(var(--header-h) + clamp(64px, 8vw, 128px)) 0 clamp(58px, 6vw, 96px);
}

.cz-index__plate {
  grid-template-columns: 1.35fr .9fr .9fr;
  transform: scale(1.012);
}

.cz-index__plate img {
  opacity: .62;
}

.cz-index__plate img:nth-child(2) { opacity: .42; }

.cz-index__plate::after {
  background:
    linear-gradient(90deg, rgba(5, 6, 7, .97) 0%, rgba(5, 6, 7, .91) 38%, rgba(5, 6, 7, .48) 72%, rgba(5, 6, 7, .62) 100%),
    linear-gradient(180deg, rgba(5, 6, 7, .18) 0%, rgba(5, 6, 7, .08) 48%, rgba(5, 6, 7, .76) 100%);
}

.cz-index__masthead-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr);
  align-items: end;
  gap: clamp(48px, 7vw, 132px);
}

.cz-index__intro { max-width: 830px; }

.cz-index__masthead .cz-eyebrow {
  margin-bottom: 18px;
  letter-spacing: .22em;
}

.cz-index__title {
  max-width: 10ch;
  font-size: clamp(64px, 7.2vw, 126px);
  font-weight: 760;
  line-height: .86;
  letter-spacing: -.065em;
}

.cz-index__standfirst {
  max-width: 58ch;
  margin-top: clamp(26px, 3vw, 42px);
  font-size: clamp(16px, .55vw + 13.8px, 19px);
  line-height: 1.72;
  color: rgba(255, 255, 255, .78);
}

.cz-index__ledger {
  padding: 8px 0 4px clamp(28px, 3vw, 52px);
  border-left: 1px solid rgba(255, 255, 255, .28);
}

.cz-index__ledger-label {
  margin: 0 0 24px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cz-gold);
}

.cz-index__figures {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.cz-index__figures div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 20px;
  padding-bottom: 17px;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.cz-index__figures div:last-child { padding-bottom: 0; border-bottom: 0; }

.cz-index__figures dt {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .58);
}

.cz-index__figures dd {
  font-size: clamp(28px, 2vw, 40px);
  font-weight: 400;
  color: var(--cz-gold-soft);
}

.cz-index__feature {
  padding-top: clamp(66px, 7vw, 118px);
}

.cz-index__section-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cz-line);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cz-mid);
}

.cz-index__section-label span:last-child {
  font-variant-numeric: tabular-nums;
  color: var(--cz-gold-on-light);
}

.cz-index article.cz-lead {
  min-height: clamp(470px, 34vw, 610px);
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, .9fr);
  align-items: stretch;
  gap: 0;
  background: var(--cz-ink);
  color: #fff;
}

.cz-lead__media {
  grid-column: 1;
  grid-row: 1;
  min-height: 100%;
  aspect-ratio: auto;
}

.cz-lead__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 70%, rgba(5, 6, 7, .3) 100%);
}

.cz-lead__copy {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(42px, 5vw, 82px);
}

.cz-lead__kicker {
  margin-bottom: 24px;
  color: rgba(255, 255, 255, .62);
}

.cz-lead__kicker span {
  background: var(--cz-gold);
  color: var(--cz-ink);
}

.cz-lead__title {
  font-size: clamp(32px, 2.35vw, 48px);
  color: #fff;
}

.cz-lead__title a { color: inherit; }

.cz-lead__standfirst {
  margin-top: 22px;
  font-size: clamp(15px, .38vw + 13.7px, 17px);
  line-height: 1.68;
  color: rgba(255, 255, 255, .7);
}

.cz-lead__meta { color: rgba(255, 255, 255, .58); }
.cz-lead__meta span[aria-hidden] { color: var(--cz-gold); }
.cz-index article.cz-lead .cz-textlink { color: var(--cz-gold-soft); }

.cz-index__subjects {
  margin-top: clamp(70px, 7vw, 116px);
  border: 0;
  background: transparent;
}

.cz-index__subjects-inner {
  display: grid;
  grid-template-columns: minmax(190px, .52fr) minmax(0, 1.48fr);
  align-items: start;
  gap: clamp(38px, 5vw, 90px);
}

.cz-index__subjects-copy { padding-top: 4px; }

.cz-index__subjects-copy .cz-eyebrow {
  margin-bottom: 13px;
  color: var(--cz-gold-on-light);
}

.cz-index__subjects-copy h2 {
  margin: 0;
  max-width: 8ch;
  font-size: clamp(28px, 2.2vw, 42px);
  line-height: 1.02;
  letter-spacing: -.035em;
}

.cz-subjects {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--cz-line);
  border-left: 1px solid var(--cz-line);
}

.cz-subjects li { min-width: 0; }

.cz-subject {
  width: 100%;
  min-height: 54px;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border-right: 1px solid var(--cz-line);
  border-bottom: 1px solid var(--cz-line);
  box-shadow: none;
  white-space: normal;
  font-size: 12.5px;
  line-height: 1.25;
}

.cz-subject:hover {
  color: var(--cz-text);
  background: var(--cz-paper-2);
  box-shadow: none;
}

.cz-subject.is-active,
.cz-subject.is-active:hover {
  color: #fff;
  background: var(--cz-ink);
  box-shadow: none;
}

.cz-subject.is-active .cz-subject__count { color: var(--cz-gold-soft); }

.cz-index__archive-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  margin-top: clamp(74px, 8vw, 132px);
  padding-bottom: 20px;
  border-bottom: 2px solid var(--cz-text);
}

.cz-index__archive-head .cz-eyebrow {
  margin-bottom: 10px;
  color: var(--cz-gold-on-light);
}

.cz-index__archive-head h2 {
  margin: 0;
  font-size: clamp(34px, 3.5vw, 62px);
  line-height: .98;
  letter-spacing: -.048em;
}

.cz-index__archive-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cz-mid);
}

.cz-index__archive-meta a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--cz-blue);
  border-bottom: 1px solid currentColor;
}

.cz-entries {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(30px, 3.2vw, 58px);
  row-gap: clamp(42px, 4vw, 70px);
  margin-top: clamp(42px, 4.8vw, 78px);
}

.cz-entry__link {
  display: grid;
  grid-template-columns: minmax(180px, .82fr) minmax(0, 1.18fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(18px, 2vw, 30px);
  align-items: stretch;
  height: 100%;
  padding-top: 13px;
}

.cz-entry__plate,
.cz-entry__kicker {
  grid-column: 1 / -1;
  grid-row: 1;
  margin-bottom: 15px;
}

.cz-entry__media {
  grid-column: 1;
  grid-row: 2;
  aspect-ratio: 4 / 3;
}

.cz-entry__body {
  grid-column: 2;
  grid-row: 2;
  padding: 0;
}

.cz-entry__title {
  font-size: clamp(19px, .48vw + 15.5px, 22px);
  line-height: 1.23;
  height: calc(3 * 1.23em);
}

.cz-entry__standfirst {
  -webkit-line-clamp: 3;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.55;
  height: calc(3 * 1.55em);
}

.cz-entry__meta {
  padding-top: 15px;
  font-size: 12px;
}

.cz-pagination {
  margin-top: clamp(70px, 7vw, 116px);
  padding-top: 24px;
  border-top: 2px solid var(--cz-text);
}

@media (max-width: 1180px) {
  .cz-index__masthead-inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, .72fr);
    gap: clamp(36px, 5vw, 70px);
  }

  .cz-index__title { font-size: clamp(58px, 9vw, 96px); }

  .cz-index article.cz-lead {
    grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
  }

  .cz-lead__media {
    grid-column: 1;
    grid-row: 1;
  }

  .cz-lead__copy {
    grid-column: 2;
    grid-row: 1;
  }

  .cz-subjects { grid-template-columns: repeat(3, minmax(0, 1fr)); }

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

  .cz-entry__link {
    grid-template-columns: minmax(260px, .56fr) minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .cz-index__masthead {
    min-height: 0;
    padding-bottom: 52px;
  }

  .cz-index__masthead-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 42px;
  }

  .cz-index__intro { max-width: 680px; }

  .cz-index__ledger {
    padding: 24px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .28);
  }

  .cz-index__figures {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .cz-index__figures div {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 8px;
    padding: 0 20px;
    border-right: 1px solid rgba(255, 255, 255, .18);
    border-bottom: 0;
  }

  .cz-index__figures div:first-child { padding-left: 0; }
  .cz-index__figures div:last-child { padding-right: 0; border-right: 0; }

  .cz-index article.cz-lead {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
  }

  .cz-lead__media {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    aspect-ratio: 16 / 10;
    order: 0;
  }

  .cz-lead__media::after {
    background: linear-gradient(180deg, transparent 72%, rgba(5, 6, 7, .24) 100%);
  }

  .cz-lead__copy {
    grid-column: 1;
    grid-row: 2;
    padding: clamp(34px, 7vw, 58px);
  }

  .cz-index__subjects-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .cz-index__subjects-copy h2 { max-width: none; }
}

@media (max-width: 640px) {
  .cz-index__masthead {
    padding-top: calc(var(--header-h) + 50px);
    padding-bottom: 42px;
  }

  .cz-index__plate {
    grid-template-columns: 1fr;
    transform: none;
  }

  .cz-index__plate::after {
    background: linear-gradient(180deg,
      rgba(5, 6, 7, .34) 0%,
      rgba(5, 6, 7, .72) 28%,
      rgba(5, 6, 7, .91) 66%,
      rgba(5, 6, 7, .96) 100%);
  }

  .cz-index__title {
    font-size: clamp(54px, 17vw, 72px);
    line-height: .9;
  }

  .cz-index__standfirst {
    margin-top: 24px;
    font-size: 15.5px;
    line-height: 1.62;
  }

  .cz-index__ledger { margin-top: 0; padding-top: 20px; }
  .cz-index__ledger-label { margin-bottom: 17px; }

  .cz-index__figures div { padding: 0 12px; }

  .cz-index__figures dt {
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: .12em;
  }

  .cz-index__figures dd { font-size: clamp(24px, 8vw, 30px); }

  .cz-index__feature { padding-top: 48px; }
  .cz-index__section-label { margin-bottom: 12px; }

  .cz-lead__copy { padding: 30px 24px 34px; }
  .cz-lead__kicker { margin-bottom: 18px; }
  .cz-lead__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    font-size: clamp(26px, 8.2vw, 34px);
  }
  .cz-lead__standfirst {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    margin-top: 17px;
    font-size: 14.5px;
  }
  .cz-lead__meta { margin: 18px 0 20px; }

  .cz-index__subjects { margin-top: 58px; }
  .cz-index__subjects-inner { gap: 22px; }

  .cz-index__subjects-copy h2 {
    font-size: 30px;
    line-height: 1;
  }

  .cz-subjects { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .cz-subject {
    min-height: 50px;
    padding: 11px 12px;
    font-size: 12px;
  }

  .cz-index__archive-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: 64px;
  }

  .cz-index__archive-head h2 { font-size: 38px; }

  .cz-index__archive-meta {
    justify-content: space-between;
    padding-bottom: 0;
  }

  .cz-entries {
    row-gap: 34px;
    margin-top: 34px;
  }

  .cz-entry__link {
    grid-template-columns: 116px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 15px;
    padding-top: 11px;
  }

  .cz-entry__plate,
  .cz-entry__kicker {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 9px;
    font-size: 12px;
    letter-spacing: .13em;
  }

  .cz-entry__media {
    grid-column: 1;
    grid-row: 1 / 3;
    aspect-ratio: 4 / 5;
  }

  .cz-entry__body {
    grid-column: 2;
    grid-row: 2;
  }

  .cz-entry__title {
    -webkit-line-clamp: 4;
    height: auto;
    font-size: 17px;
    line-height: 1.24;
  }

  .cz-entry__standfirst { display: none; }

  .cz-entry__meta {
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 11px;
    padding-top: 0;
    font-size: 12px;
  }

  .cz-entry__meta time::after { margin-left: 7px; }
  .cz-entry__go { display: none; }
  .cz-pagination { margin-top: 68px; }
}

@media (max-width: 390px) {
  .cz-index__figures div { padding: 0 9px; }
  .cz-index__figures dd { font-size: 23px; }

  .cz-entry__link {
    grid-template-columns: 100px minmax(0, 1fr);
    column-gap: 13px;
  }
}

@media (hover: none) {
  .cz-subject:hover { background: transparent; }
  .cz-subject.is-active:hover { color: #fff; background: var(--cz-ink); }
}

@media (prefers-reduced-motion: reduce) {
  .cz-index__plate { transform: none; }
}


/* ============================================================
   THE INSIGHTS ROW SHOWS HIS SQUARE COVER WHOLE — 28 Sep 2026
   ============================================================

   He supplied one 1:1 cover per insights post and said, twice
   inside one sentence, "without changing image aspect ratio".
   `.cz-entry__media` is 4 / 3 above, which would cut a quarter
   off a square file, so a row carrying one of his covers gets
   `.cz-entry--sq` and the slot becomes 1 / 1.

   Scoped to the modifier, so the search results and the 404
   shelf — which use the same `.cz-entry__media` with landscape
   library frames — are untouched.

   Appended rather than edited in place: these three rules have
   to beat the `4 / 3` at line 2141 and the narrow-viewport
   block at 2382, and winning on ORDER keeps this file free of
   `!important`, which is the same contract `editorial.css`
   keeps for the article cascade.
   ============================================================ */

.cz-entry--sq .cz-entry__media {
  aspect-ratio: 1 / 1;
}

.cz-entry--sq .cz-entry__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* a 1:1 box on a 1:1 file crops nothing */
  object-position: center center;
}

/* The narrow layout stacks the row and gives the media a fixed
   height; a square there would be a 116px block of photograph
   against three lines of text. Bounded at both ends per R7. */
@media (min-width: 380px) and (max-width: 620px) {

  .cz-entry--sq .cz-entry__media {
    aspect-ratio: 1 / 1;
    height: auto;
  }
}

/* ============================================================
   11 — /insights/, 29 SEPTEMBER 2026: HIS FOUR REPORTS

   > "Now let's have a look at /insights page. Look at this really big black
   >  box. Reduce the size of this box, it's too big. Also add it's cover image
   >  on left, looks emoty. The 'explore the category browse by subject'
   >  heading should have categories below, not on right, as you can see there
   >  is empty space on left below heading and text 'browse by subject'. Also
   >  have a look at how is both mobile and desktop view of /insights page.
   >  This page needs a lot of improvement for both mobile and desktop view."

   MEASURED BEFORE ANY OF IT WAS WRITTEN, at a 1845 viewport:

     the feature          1720 x 610, ONE child, grid `1032px 688px`
                          -> 1,032 x 610 of black ground, 60% of the band
     the subject copy     424px track, glyphs stop at 280  -> 206px dead
                          112px tall beside a 271px list   -> 158px dead
     the subject grid     17 cells in 4 columns = 4+4+4+4+1, 3 cells of
                          white where the rectangle should close
     the joins            113 / 116 / 132 / 78px — four values for one
                          rhythm, all of them looser than the 81px he
                          accepted on the homepage on the same day (B328)
     the 1165 band        one-column rows, 391px square plates, page
                          15,873px against 8,731px at 1425

   Appended rather than edited in place. This file's contract is stated at its
   own head — "No !important outside reduced motion", and there is exactly one
   such declaration in 2,700 lines — so a late section wins on ORDER or it does
   not win. These rules have to beat section 9 (the editorial redesign) and the
   shared breakpoints at 1180 / 900 / 640 that come after it, and they do it by
   sitting last. Nothing below is forced.
   ============================================================ */

/* ---- 11.1 THE FEATURE: his cover on the left, and the square sets the height.

   The band's height stops being a `min-height` somebody chose and becomes the
   size of the picture. That is what answers "too big": 610px to 430px at the
   widest, with nothing removed and nothing cropped.

   His rule for these frames is "without changing the aspect ratio" (R83), said
   twice inside one sentence, and every insights cover is 1:1. The base rule
   declares 3 / 2 on `.cz-lead__media`, which would discard 41% of a square
   file, so the SLOT changes rather than the frame.

   Everything is scoped to `.cz-lead--cover`, which index-lead.php prints only
   when cz_signed_cover() returns a frame. A post with no signed plan keeps the
   single-column band it has today — the layout cannot reserve a column for a
   picture that is not coming, which is the defect this whole section is about.
   ---- */

/* THE STACKED ARRANGEMENT IS THE BASE, NOT A `max-width` BLOCK, AND THAT IS A
   BUG FIX RATHER THAN A PREFERENCE.

   It was written as `@media (max-width: 619px)` against `@media (min-width:
   620px)` above it. Measured in a 619px frame on a 1.25 device pixel ratio:
   `matchMedia('(max-width: 619px)')` false AND `matchMedia('(min-width:
   620px)')` false — the viewport resolves to a FRACTIONAL width inside the
   one-pixel gap between two adjacent integer breakpoints, so NEITHER band
   applied and the cover fell through to the 16/10 ratio in the 900px block:
   572 x 358 on a square file, 41% of his frame discarded, at exactly one
   window size.

   Two adjacent integers are not adjacent on a fractional-DPR display. The
   stacked case is therefore unconditional and the wide case overrides it with
   `min-width`, which cannot leave a gap. R7 asks for media queries bounded at
   both ends; this is that rule one layer down. */
.cz-index article.cz-lead--cover {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 0;
}

.cz-lead--cover .cz-lead__media {
  grid-column: 1;
  grid-row: 1;
  order: 0;
  float: none;
  width: auto;
  min-height: 0;
  margin: 0;
  aspect-ratio: 1 / 1;        /* a 1:1 box on a 1:1 file crops nothing */
}

.cz-lead--cover .cz-lead__copy {
  grid-column: 1;
  grid-row: 2;
}

/* ---- 620 to 1239: THE COVER FLOATS AND THE COPY WRAPS AROUND IT.

   The first version of this band was a two-track grid with the square in track
   one. It overlapped the copy by 91px at 1239 and by 313px at 620, and the
   photograph printed on top of the headline. `aspect-ratio` with `align-items:
   stretch` takes the height from the row and DERIVES the width from the ratio,
   so a 158px track held a 471px square. Nothing in a standard overflow check
   can see it: the page does not grow, `documentElement.scrollWidth` reads
   exactly the viewport at every width, and the defect is entirely inside the
   band.

   The grid cannot be rescued here by capping the square either, and the
   arithmetic says why. In this band the copy needs about 500px of height
   whatever width it is given — narrow it and it grows taller — so a square
   tall enough to match it is roughly HALF the band. Measured: 1111px total
   needs a 560px square before the two heights cross. Every other grid
   arrangement leaves a block of the band's own ink below the square, which is
   the "really big black box" this whole section exists to remove.

   A float has neither failure. The square takes a capped width, the headline
   and the deck set beside it and continue underneath when they run past it,
   and the band is exactly as tall as its content at every width and for every
   headline length. `display: flow-root` contains the float without a clearfix.
   `.cz-lead__copy` must be `display: block` here: a flex or grid box
   establishes its own formatting context and is pushed BESIDE a float instead
   of flowing around it.
   ---- */

@media (min-width: 620px) {

  .cz-index article.cz-lead--cover {
    display: flow-root;
    grid-template-columns: none;
    grid-template-rows: none;
    padding: clamp(30px, 2.8vw, 52px) clamp(30px, 2.8vw, 56px);
  }

  .cz-lead--cover .cz-lead__media {
    float: left;
    width: clamp(196px, 27vw, 380px);
    margin: 0 clamp(26px, 2.4vw, 40px) clamp(16px, 1.4vw, 22px) 0;
    aspect-ratio: 1 / 1;
  }

  .cz-lead--cover .cz-lead__copy {
    display: block;
    padding: 0;
  }
}

/* The square is CAPPED in pixels above 1240, not held at a fraction.

   A fraction of a 1720px container gives a 754px square, which is taller than
   the 610px band it was meant to shrink — the picture would have solved the
   empty column by making the box bigger, which is the opposite of the
   instruction. 430px is the largest square whose height the copy beside it can
   fill honestly at this width, and it is a clear step up from the 328px plate
   the rows below carry, so the hierarchy still reads. */
@media (min-width: 1240px) {

  .cz-index article.cz-lead--cover {
    display: grid;
    grid-template-columns: clamp(340px, 24vw, 430px) minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: stretch;
    padding: 0;
  }

  /* `width: 100%` and `align-self: start` together, and neither is spare.

     The track here is a definite LENGTH, so the ratio would normally take the
     height from the width and the square would be 430 x 430. But `stretch`
     gives the item a definite height from the row, and with a height in hand
     `aspect-ratio` derives the WIDTH instead — which is how the same two
     declarations put a 471px square in a 158px track in the band below. A
     definite width closes that door: if anything ever makes the row taller
     than the square, the result is a gap under the picture, never a picture
     printed over the text. The clamps below are what stop the gap. */
  /* THE PLACEMENTS HAVE TO BE RESTATED HERE, AND LEAVING THEM OUT BROKE THE PAGE.

     The base rule above is the STACKED arrangement, so it pins the media to
     `grid-column: 1; grid-row: 1` and the copy to `grid-column: 1; grid-row: 2`.
     This block changed the TRACKS to two columns and said nothing about the
     children — so the copy stayed in column 1, row 2, underneath the cover,
     inside a 430px track, with its own two inner columns at about 200px each.
     He photographed it: a headline setting one word per line beside a deck
     setting two.

     B316 is this trap the other way round — releasing a track is not enough
     when a child is explicitly placed. **A grid that changes its tracks must
     restate every placement it inherits.** */
  .cz-lead--cover .cz-lead__media {
    grid-column: 1;
    grid-row: 1;
    float: none;
    width: 100%;
    margin: 0;
    align-self: start;
    aspect-ratio: 1 / 1;
  }

  /* THE COPY PANEL IS TWO COLUMNS ABOVE 1240, AND THAT IS NOT DECORATION.

     With a 430px square the copy column is 1,290px. One column of text in it
     puts the title's measure at 26ch and the standfirst's at 56ch, both of
     which stop around x=1314 inside a panel whose right edge is 1782 — 468px
     of black to the right of the ink, which is the defect he reported on the
     homepage's regulated head the same day and the one this section exists to
     remove. Title left, deck right, meta and the link on one foot line: the
     width is consumed by content rather than by padding, and the band gets
     SHORTER because the same copy stacks in two columns instead of five
     blocks. */
  .cz-lead--cover .cz-lead__copy {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-content: center;
    column-gap: clamp(30px, 2.4vw, 54px);
    row-gap: 0;
    padding: clamp(30px, 2.8vw, 52px) clamp(30px, 2.8vw, 56px);
  }

  /* THE CLAMPS ARE THE GUARANTEE, NOT HOUSEKEEPING.

     The square sets the band's height here, so the copy must be unable to
     exceed it or the band grows and the picture is left with a gap under it.
     Worst case at the narrow end of this band, 1240px: two inner columns of
     390px, kicker 38 + three title lines 151 + foot 76 + 69 of padding = 334
     against a 340px square. At 1845: 275 + 104 = 379 against 430. Both fit,
     with the smaller margin at the breakpoint, which is where to check it.

     Three lines and four are also editorially right rather than merely safe —
     `.cz-entry__title` clamps to three and `.cz-lead__standfirst` to four on a
     phone already, so a reader meets the same shape at every width and the
     full text is one click away. */

  .cz-lead--cover .cz-lead__kicker {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: clamp(20px, 1.8vw, 30px);
  }

  .cz-lead--cover .cz-lead__title {
    grid-column: 1;
    grid-row: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  /* The deck's top aligns to the title's cap height, not to its line box, so
     the two columns start on one line rather than 6px apart. */
  .cz-lead--cover .cz-lead__standfirst {
    grid-column: 2;
    grid-row: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    margin: 5px 0 0;
    max-width: none;
  }

  .cz-lead--cover .cz-lead__meta {
    grid-column: 1;
    grid-row: 3;
    align-self: end;
    margin: clamp(22px, 2vw, 32px) 0 0;
  }

  .cz-index article.cz-lead--cover .cz-textlink {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
    justify-self: start;
    margin-top: clamp(22px, 2vw, 32px);
  }
}

/* The scrim runs the other way now. The base rule darkens the media's right
   edge to meet a copy column that used to be a black panel to its right; with
   the cover carrying the left of the band the gradient's job is to seat the
   frame against the panel, not to fade a third of it. */
.cz-lead--cover .cz-lead__media::after {
  background: linear-gradient(90deg, transparent 82%, rgba(5, 6, 7, .26) 100%);
}

/* ---- 11.2 THE SUBJECT DIRECTORY: heading above, grid across, rectangle closed.

   Two columns put 206px of dead track beside the heading and 158px of empty
   column below it. The heading block now sits above a full-width grid, and the
   section is SHORTER than the two-column version it replaces even so, because
   six columns close the grid in three rows where four columns took five.

   THE EYEBROW IS ABOVE THE HEADING, NOT BESIDE IT, and that is his second
   instruction on this section: *"the deading 'browse by subject' should be
   below 'explore the archieve'"*. The first version put them on one baseline
   to save ~30px of height — the arrangement the homepage's approvals head
   uses — and he rejected it within a minute of seeing it. Height is not worth
   a reading order he has ruled on twice in one session.
   ---- */

.cz-index__subjects-inner {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 2vw, 34px);
}

.cz-index__subjects-copy {
  padding-top: 0;
  display: block;
}

.cz-index__subjects-copy .cz-eyebrow { margin-bottom: clamp(10px, .9vw, 14px); }

.cz-index__subjects-copy h2 { max-width: none; }

/* Six, three and two. Nothing else, and index.php's filler arithmetic depends
   on it: the cell count is computed once for six columns, and three and two
   both DIVIDE six, so a total that closes a six-column rectangle closes the
   other two as well. A five- or four-column band would break that silently. */
.cz-subjects { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.cz-subjects__fill {
  min-height: 54px;
  border-right: 1px solid var(--cz-line);
  border-bottom: 1px solid var(--cz-line);
}

@media (max-width: 1239px) {
  .cz-subjects { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 719px) {
  .cz-subjects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cz-subjects__fill { min-height: 50px; }
}

/* ---- 11.3 ONE RHYTHM FOR THE JOINS.

   He called the same house join "empty" on three homepage sections earlier the
   same day and it was one instruction, not three defects (B328). This page had
   four different values for the same join — 113, 116, 132 and 78 — every one
   of them looser than the 81px he accepted there. They are one figure now.
   `.cz-pagination` and `.cz-entries` are scoped to `.cz-index` because the
   archive, search and 404 views share those classes and he has not looked at
   them.
   ---- */

.cz-index__feature { padding-top: clamp(48px, 4.4vw, 84px); }
.cz-index__subjects { margin-top: clamp(48px, 4.4vw, 84px); }
.cz-index__archive-head { margin-top: clamp(52px, 4.8vw, 88px); }
.cz-index .cz-entries { margin-top: clamp(32px, 3vw, 54px); }
.cz-index .cz-pagination { margin-top: clamp(48px, 4.4vw, 84px); }

/* ---- 11.4 TWO THINGS THE SWEEP FOUND THAT HE HAD NOT REPORTED.

   Both are on this page, both are measurable, and neither is a surface he has
   approved — which is the test R82.4 sets.
   ---- */

/* "Read the piece" measured 118 x 26 at every desktop width. The 44px floor
   was already written for it, inside `@media (pointer: coarse)`, so it reached
   a phone and never reached the page he was looking at — a guard on the branch
   production does not take (R85, B308). It applies unconditionally now. It is
   a standalone call to action, not a link inside a sentence, so the WCAG 2.5.8
   inline exemption this file records elsewhere does not cover it. */
.cz-index .cz-textlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* The row plate was sized as a FRACTION of the row in the one-column band, so
   it grew as the row grew: 391px square at a 1165 viewport, against three
   clamped lines of standfirst, and 24 of those put the page at 15,873px —
   nearly twice the 8,731px the same page measures at 1425. Capped. The `sizes`
   clause in cz_entry_media_sizes() was updated in the same edit, because it
   was declaring 36vw for a box that is now 248px and the browser was fetching
   the 700px derivative for it. */
@media (min-width: 641px) and (max-width: 1180px) {
  .cz-entry__link {
    grid-template-columns: minmax(0, 248px) minmax(0, 1fr);
  }
}

/* ---- 11.5 THE ROW PHOTOGRAPH PRINTED OVER THE ROW TEXT ON EVERY PHONE.

   His screenshot at 360px: "Sixteen free zone benefits are advertised in this
   market" set ON TOP of the picture, on every row down the page, and the date
   half-hidden behind it too.

   Measured: `@media (max-width: 390px)` sizes the plate track at **100px** and
   the photograph rendered **142px** — 29px of it lying across the body column,
   which starts at x=129 while the frame ends at x=158. Identical at 345 and at
   375, so it is every phone width this site has a rule for.

   THE CAUSE IS THE ONE THE FEATURE'S COVER HAD, and finding it there is what
   found it here. `.cz-entry--sq .cz-entry__media` carries `aspect-ratio: 1 / 1`
   and, in this band, `grid-row: 1 / 3`. Spanning two rows makes its HEIGHT
   definite by stretch, and `aspect-ratio` with a definite height derives the
   WIDTH from the ratio rather than from the track — so a 100px column held a
   142px square. A fixed track does not constrain a box whose width is being
   computed from its own height.

   `width: 100%` makes the width definite so the ratio runs the intended way
   round, and `align-self: start` stops the stretch that started it. Bounded at
   both ends against the 641px rule (R7).

   THE TRACK GOES TO 116px FOR A SQUARE, which is the value the 391-640 band
   already uses and the one he approved on 28 September. 100px was authored for
   a 4:5 portrait plate; a square needs the extra 16px to read at all, and the
   body column still gains width against what it had, because 29px of it was
   underneath a photograph. Scoped to `--sq` so the search results and the 404
   shelf — same class, landscape library frames — keep the 100px they were
   drawn for.

   **This has been shipping since 28 September.** That night's ledger recorded
   "375 142x142, all r1.000" and read the ratio as proof the frame was correct;
   the number that mattered was the TRACK beside it, which nothing compared it
   to. A box measured on its own cannot tell you it is in the wrong place.
   ---- */

@media (min-width: 320px) and (max-width: 640px) {

  .cz-entry--sq .cz-entry__media {
    width: 100%;
    align-self: start;
    aspect-ratio: 1 / 1;
  }

  .cz-entry--sq .cz-entry__link {
    grid-template-columns: 116px minmax(0, 1fr);
  }
}