/**
 * Gold Alpha — main.css
 *
 * Light editorial finance publication. White ground, charcoal ink, gold accent
 * (taken from the wordmark), with black inversion bands for emphasis sections.
 *
 * Contents
 *   1.  Tokens
 *   2.  Reset & base
 *   3.  Layout primitives
 *   4.  Typography helpers
 *   5.  Buttons, chips, pills
 *   6.  Arrow badge (the recurring corner affordance)
 *   7.  Header
 *   8.  Ticker
 *   9.  Front page — hero / search
 *   10. Front page — featured mosaic
 *   11. Front page — in-the-loop rail
 *   12. Front page — latest carousel
 *   13. Front page — popular (inverted band)
 *   14. Front page — highlight
 *   15. Cards (shared)
 *   16. Newsletter CTA band
 *   17. Footer
 *   18. Archive
 *   19. Single post
 *   20. Static page
 *   21. 404
 *   22. Newsletter forms
 *   23. Pagination
 *   24. Motion & responsive
 */

/* ═══ 1. TOKENS ═══════════════════════════════════════════════════════════ */
:root {
  /* Ground */
  --paper: #ffffff;
  --paper-2: #f7f7f5;
  --paper-3: #efefec;
  --ink: #121212;
  --ink-2: #1c1c1c;
  --ink-3: #2a2a2a;

  /* Text */
  --text: #121212;
  --text-2: #55555a;
  --text-3: #86868c;
  --text-on-dark: #ffffff;
  --text-on-dark-2: rgba(255, 255, 255, 0.66);
  --text-on-dark-3: rgba(255, 255, 255, 0.42);

  /* Accent — the reference's signal orange.
	   Token names stay `--gold-*` so every existing rule keeps working; only the
	   values change. --accent-* are the preferred aliases going forward. */
  --gold: #f4531f;
  --gold-bright: #ff6a38;
  --gold-deep: #d8410f;
  --gold-wash: rgba(244, 83, 31, 0.09);
  --gold-line: rgba(244, 83, 31, 0.26);

  --accent: var(--gold);
  --accent-bright: var(--gold-bright);
  --accent-deep: var(--gold-deep);

  /* Market semantics */
  --up: #0f8a5f;
  --down: #c2402f;

  /* Lines */
  --line: rgba(18, 18, 18, 0.1);
  --line-2: rgba(18, 18, 18, 0.16);
  --line-dark: rgba(255, 255, 255, 0.12);

  /* Type */
  /* Bricolage Grotesque carries both display and body copy, so the whole page
	   reads as one voice. Inter stays in the stack purely as the metric-adjacent
	   fallback while the webfont loads. */
  --font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --font-body: "Bricolage Grotesque", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Retired: the meta/market furniture (timestamps, tickers, eyebrows, tags)
     used to be IBM Plex Mono. It now resolves to the same Bricolage Grotesque
     as everything else, so the page reads in one voice. The token is kept —
     rather than replaced at its ~17 call sites — so those rules stay grouped
     and semantic, and a mono face could be reinstated in one line.
     tabular-nums preserves what the monospace was actually doing structurally:
     keeping digits from shifting width in tickers, times and counters. */
  --font-mono: "Bricolage Grotesque", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Real code still needs a real monospace — proportional code misaligns and
     hurts readability. System stack only, so no extra webfont is loaded. */
  --font-code: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Metrics */
  --wrap: 1240px;
  --gutter: 24px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(18, 18, 18, 0.06), 0 2px 8px rgba(18, 18, 18, 0.04);
  --shadow-md: 0 4px 12px rgba(18, 18, 18, 0.07), 0 12px 32px rgba(18, 18, 18, 0.06);
  --shadow-lg: 0 8px 24px rgba(18, 18, 18, 0.1), 0 28px 60px rgba(18, 18, 18, 0.09);

  /* Header logo height — overridden by the customizer */
  --logo-h: 40px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ═══ 2. RESET & BASE ═════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  /* Bricolage runs tighter than Inter at text sizes; a hair of positive
	   tracking keeps body copy from feeling cramped. */
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

figure {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection {
  background: var(--gold);
  color: #fff;
}

.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 16px;
}

.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ═══ 3. LAYOUT PRIMITIVES ════════════════════════════════════════════════ */
.container {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: 760px;
}

.container--wide {
  max-width: 1400px;
}

.section-pad {
  padding-block: clamp(52px, 7vw, 88px);
}

.section-pad--tight {
  padding-block: clamp(36px, 4.5vw, 56px);
}

/* Inverted band — black ground, white type. Used by "Popular Story" and the
   footer, matching the reference's alternating rhythm. */
.is-inverted {
  background: var(--ink);
  color: var(--text-on-dark);
}

.is-inverted h1,
.is-inverted h2,
.is-inverted h3,
.is-inverted h4 {
  color: var(--text-on-dark);
}

/* The blueprint grid that backs the hero and newsletter bands. */
.grid-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.grid-field::before {
  content: "";
  position: absolute;
  inset: -10%;
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 78%);
}

/* A plotted trend line rising across the blueprint grid, drawn as a single
   polyline with a few candlestick wicks along it. This replaced two crossing
   full-bleed diagonals: that "X" met dead-centre behind the heading and, being
   unmasked at 90% opacity, read as a placeholder rather than a motif. A rising
   plot says the same "graph paper" thing but belongs to a finance publication.

   Inline SVG in a data URI rather than gradients — a polyline is the honest
   primitive for this, and gradient fakery would need one layer per segment.
   Colour is baked (%23dcd7cf ~= --line) because a data URI cannot read custom
   properties; the token drives the grid above, which carries the theming. */
.grid-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 320' preserveAspectRatio='none' fill='none' stroke='%23c9c2b6' stroke-width='2.5'%3E%3Cpolyline points='0,268 120,244 240,258 360,206 480,222 600,164 720,178 840,120 960,132 1080,74 1200,88'/%3E%3Cg stroke-width='2'%3E%3Cpath d='M120,226 V262M360,188 V224M600,146 V182M840,102 V138M1080,56 V92'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  /* Defaults suit the left-aligned archive hero: the plot rises through the
     open space to the right of the copy, which is capped at 720px. Centred
     bands override these below — see .cta / .error-main. */
  background-position: right 72%;
  background-size: 92% 52%;
  opacity: 0.8;
  /* Fades in from the left so it never collides with the headline, and off the
     right edge so it reads as a passing slice of a longer series. */
  -webkit-mask-image: linear-gradient(to right, transparent 6%, #000 34%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent 6%, #000 34%, #000 88%, transparent);
}

/* The mosaic fills its whole section with cards, so the plot would be almost
   entirely occluded and the sliver that escaped past the edge read as a stray
   line. That section keeps the graph-paper grid only. */
.mosaic-section .grid-field::after {
  content: none;
}


/* The newsletter band is centred, so the plot cannot sit beside the copy. Drop
   it to the floor of the band as a baseline strip — still a rising series, but
   clear of the headline and the input. */
.cta .grid-field::after {
  background-position: center bottom;
  background-size: 100% 30%;
  opacity: 0.6;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
}

/* .error-main wraps the whole 404 — error block AND the Latest News grid below
   it — so a band-floor plot would land behind those cards. Pin it to the top
   region the error copy occupies instead, and keep it off the centred text. */
.error-main .grid-field::after {
  background-position: center 8%;
  background-size: 100% 22%;
  opacity: 0.5;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 16%, #000 84%, transparent);
  mask-image:
    linear-gradient(to right, transparent, #000 16%, #000 84%, transparent);
}

/* Narrow screens: copy takes the full width, so there is no clear space to the
   right of it. Drop the plot to the band floor everywhere and lighten it, rather
   than letting it run through the heading. Placed AFTER the .cta/.error-main
   rules deliberately — those are more specific, so an earlier media query would
   lose to them and this would silently not apply. */
@media (max-width: 700px) {
  .grid-field::after,
  .cta .grid-field::after,
  .error-main .grid-field::after {
    background-position: center bottom;
    background-size: 100% 34%;
    opacity: 0.45;
  }
}

/* ═══ 4. TYPOGRAPHY HELPERS ═══════════════════════════════════════════════ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.is-inverted .eyebrow {
  color: var(--text-on-dark-3);
}

/* Section heading + "See more" action on one line. */
.sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(20px, 3vw, 32px);
}

.sec-head__title {
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.sec-head__nav {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 0 3px rgba(15, 138, 95, 0.16);
  flex-shrink: 0;
  animation: pulse-dot 2.4s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* ═══ 5. BUTTONS, CHIPS, PILLS ════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  border: 1px solid transparent;
  transition:
    transform 0.2s var(--ease),
    background-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease),
    color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

/* :not(.btn--split) because a split button paints itself through its own goo
   blobs, not through this background — and this box-shadow would draw a
   phantom capsule behind the liquid shape. See the .btn--split block. */
.btn--primary:not(.btn--split) {
  background: var(--gold);
  color: #fff;
  box-shadow: 0 2px 10px rgba(244, 83, 31, 0.3);
}

.btn--primary:not(.btn--split):hover {
  background: var(--gold-bright);
  box-shadow: 0 8px 22px rgba(244, 83, 31, 0.38);
}

/* Split variants still need the text colour the background rule above carried. */
.btn--primary.btn--split {
  color: #fff;
}

.btn--ink {
  background: var(--ink);
  color: #fff;
}

.btn--ink:hover {
  background: var(--ink-3);
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-2);
}

.btn--ghost:hover {
  border-color: var(--ink);
  background: var(--paper-2);
}

.btn--on-dark {
  background: #fff;
  color: var(--ink);
}

.btn--on-dark:hover {
  background: var(--gold);
  color: #fff;
}

.btn--sm {
  padding: 9px 18px;
  font-size: 13px;
}

.btn--lg {
  padding: 16px 34px;
  font-size: 15px;
}

/* Split pill — a capsule label and a circular arrow joined by a liquid gold
   neck. Both blobs live on a filtered background layer (.btn__goo): a Gaussian
   blur bleeds them into each other, then a colour-matrix alpha threshold snaps
   the soft edges back to hard, so their overlap resolves into a solid neck.
   Text and icon sit ABOVE that layer, unfiltered, so the label stays sharp and
   the focus ring survives.

   On hover the neck FILLS IN — the two shapes flow together into one. That is
   driven from st_goo_filter() in functions.php, which tweens the threshold
   over 900ms. It is not done here because CSS cannot animate an SVG filter's
   values attribute, and animating the blob positions instead does not work:
   the threshold is a step function, so it pops rather than flows. */

/* --gap must be REGISTERED to animate. An unregistered custom property has no
   type, so the browser cannot interpolate it — it flips in one step and the
   neck appears to pop rather than flow. */
@property --gap {
  syntax: "<length>";
  inherits: true;
  initial-value: 9px;
}

/* --gap: distance between the capsule's right edge and the circle, and the one
   value that drives the whole effect. Large gap = pinched neck; shrinking it
   fattens the neck until the two blobs read as a single solid pill. Negative is
   legal and useful — the shapes overlap and the waist disappears entirely.
   --circle: horizontal space reserved for the arrow blob. The blob's actual
   drawn size is NOT this value — it is stretched to the button's full height
   (top:0/bottom:0 + aspect-ratio:1) so it matches the capsule exactly. Two
   blobs of different heights can never merge into a clean pill: the shorter one
   leaves a step at the join and reads as a smaller right cap. */
.btn--split {
  --gap: 9px;
  --circle: 43px;
  /* Balanced ease-in-out, no overshoot. Deliberately NOT back-loaded: with a
     late-weighted curve the neck sits still for most of the duration and then
     rushes, which reads as a lag followed by a snap. A springy curve is also
     wrong here — it overshoots past solid and bounces back like a glitch. */
  --goo-ease: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  position: relative;
  isolation: isolate;
  padding: 0;
  gap: 0;
  background: none;
  box-shadow: none;
  border-radius: var(--r-pill);
  /* The glow rides the unfiltered wrapper — a box-shadow on the filtered
     layer would be eaten by the color matrix. */
  filter: drop-shadow(0 2px 10px rgba(244, 83, 31, 0.3));
  transition:
    transform 0.3s var(--ease),
    filter 0.9s var(--ease);
}

/* Reserve room for the circle plus the RESTING gap. This deliberately uses a
   literal 9px rather than var(--gap): the label must not shift when the gap
   animates, or the text would slide around under the hover. */
.btn--split .btn__label {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  margin-right: calc(var(--circle) + 9px);
  background: none;
  color: #fff;
}

/* Matches the circle blob's box exactly (full height, square) so the icon sits
   dead centre in the drawn circle rather than in a differently sized box. */
.btn--split .btn__arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: none;
  color: #fff;
}

.btn--split .btn__arrow svg {
  width: 19px;
  height: 19px;
}

/* The filtered blob layer, painted behind the text. */
.btn--split .btn__goo {
  position: absolute;
  inset: 0;
  z-index: -1;
  filter: url(#st-goo);
  pointer-events: none;
}

/* Capsule blob — spans from the left edge to where the circle begins. */
.btn--split .btn__goo::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: calc(var(--circle) + var(--gap));
  border-radius: var(--r-pill);
  background: var(--gold);
  /* The --gap transition MUST be declared here, on the element that actually
     consumes it. Declared on the parent it does nothing: the pseudo-element
     inherits only the settled value, never the interpolating one. */
  transition:
    --gap 0.85s var(--goo-ease),
    background-color 0.85s var(--ease);
}

/* Circle blob — the blob's "head", anchored to the right edge. Sized by
   top/bottom:0 + aspect-ratio rather than a fixed width/height so its diameter
   always equals the button's height, and therefore the capsule's height. That
   equality is what lets the two merge into a clean pill with no step at the
   join and no undersized right cap. */
.btn--split .btn__goo::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold);
  transition:
    --gap 0.85s var(--goo-ease),
    background-color 0.85s var(--ease);
}

/* Hover: collapse the gap to exactly -(--circle) so the capsule's right edge
   reaches right:0 — it spans the whole button and the circle sits entirely
   inside it, making the union a true pill with no seam and no waist. This is
   geometry, not a value tuned by eye: anything less than -43px leaves a slight
   bulge where the two outlines still differ.
   Leaving reverses the same transition back to the resting 9px neck.
   The filter threshold stays fixed; only this distance moves. */
.btn--split:hover,
.btn--split:focus-visible {
  --gap: calc(-1 * var(--circle));
  filter: drop-shadow(0 8px 22px rgba(244, 83, 31, 0.38));
}

.btn--split:hover .btn__goo::before,
.btn--split:hover .btn__goo::after,
.btn--split:focus-visible .btn__goo::before,
.btn--split:focus-visible .btn__goo::after {
  background: var(--gold-bright);
}

/* Fallback: with no .btn__goo element in the markup the two segments would
   render invisible, so paint them directly on the label and arrow instead. */
.btn--split:not(:has(.btn__goo)) .btn__label {
  margin-right: 0;
  border-radius: var(--r-pill);
  background: var(--gold);
}

.btn--split:not(:has(.btn__goo)) .btn__arrow {
  border-radius: 50%;
  background: var(--gold);
}

/* Reduced motion: keep the hover's end state (the neck still fills, so the
   affordance is unchanged) but drop the slow travel to a quick colour shift. */
@media (prefers-reduced-motion: reduce) {
  .btn--split .btn__goo::before,
  .btn--split .btn__goo::after {
    transition: background-color 0.2s var(--ease);
  }
}

/* Category chip */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: var(--gold-wash);
  color: var(--gold-deep);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition:
    background-color 0.2s var(--ease),
    color 0.2s var(--ease);
}

.chip:hover {
  background: var(--gold);
  color: #fff;
}

.story__chips,
.card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Chips sitting on photography or dark ground */
.chip--on-media {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.chip--on-media:hover {
  background: var(--gold);
  border-color: var(--gold);
}

/* ═══ 6. ARROW BADGE ══════════════════════════════════════════════════════ */
/* The recurring circular/rounded arrow that overlaps the corner of every card
   in the reference. Absolutely positioned by its parent card. */
.arrow-badge {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-md);
  transition:
    background-color 0.25s var(--ease),
    color 0.25s var(--ease),
    transform 0.25s var(--ease);
  z-index: 3;
}

.arrow-badge svg {
  width: 21px;
  height: 21px;
  transition: transform 0.25s var(--ease);
}

.arrow-badge--gold {
  background: var(--gold);
  color: #fff;
  box-shadow: 0 6px 20px rgba(244, 83, 31, 0.36);
}

.arrow-badge--ink {
  background: var(--ink);
  color: #fff;
}

.arrow-badge--lg {
  width: 68px;
  height: 68px;
  border-radius: 20px;
}

.arrow-badge--lg svg {
  /* Roughly 58% of the badge — the glyph carries the tile, so it wants to be
	   generous rather than a small mark floating in the middle. */
  width: 58px;
  height: 58px;
}

/* Hover is driven from the card, so the whole tile is one target. */
.has-badge:hover .arrow-badge {
  background: var(--gold);
  color: #fff;
}

.has-badge:hover .arrow-badge svg {
  transform: translate(2px, -2px);
}

/* ═══ 7. HEADER ═══════════════════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  transition:
    box-shadow 0.25s var(--ease),
    border-color 0.25s var(--ease);
  border-bottom: 1px solid transparent;
}

.site-header--scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 20px rgba(18, 18, 18, 0.06);
}

/* Brand row — wordmark centred and alone, as in the reference. The burger is
   absolutely positioned so it can never pull the logo off-centre. */
.masthead {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(18px, 2.4vw, 26px);
}

.masthead__brand {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.masthead__brand .custom-logo-link,
.masthead__brand .site-logo {
  display: inline-flex;
  align-items: center;
}

.masthead__brand .custom-logo {
  height: var(--logo-h);
  width: auto;
  max-width: min(320px, 60vw);
  object-fit: contain;
}

.masthead__brand .site-logo {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
}

/* Nav row — a single hairline above, centred links, as in the reference */
.nav-primary {
  border-top: 1px solid var(--line);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
}

.nav-list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(14px, 2.4vw, 34px);
}

.nav-list a {
  display: inline-block;
  padding: 15px 0;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-2);
  position: relative;
  transition: color 0.2s var(--ease);
}

.nav-list a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 1.5px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}

.nav-list a:hover,
.nav-list .current-menu-item > a,
.nav-list .current-menu-parent > a {
  color: var(--ink);
}

.nav-list a:hover::after,
.nav-list .current-menu-item > a::after,
.nav-list .current-menu-parent > a::after {
  transform: scaleX(1);
}

/* Hamburger — pinned to the right edge of the masthead row */
.nav-toggle {
  display: none;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  justify-content: center;
  gap: 4.5px;
  width: 42px;
  height: 42px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
}

.nav-toggle__bar {
  display: block;
  height: 1.8px;
  background: var(--ink);
  border-radius: 2px;
  transition:
    transform 0.28s var(--ease),
    opacity 0.2s var(--ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(6.3px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-6.3px) rotate(-45deg);
}

/* ═══ 8. MARQUEE KEYFRAMES ════════════════════════════════════════════════ */
/* Shared by the "In the Loop" headline rail. JS sets --ticker-to to the exact
   width of one content set so the loop point is invisible. */
@keyframes marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(var(--ticker-to, -50%), 0, 0);
  }
}

/* ═══ 9. FRONT PAGE — HERO / SEARCH ═══════════════════════════════════════ */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(48px, 7vw, 84px) clamp(36px, 4.5vw, 52px);
  text-align: center;
  background: var(--paper);
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin-inline: auto;
}

.hero__title {
  font-size: clamp(34px, 6.4vw, 62px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin-bottom: 14px;
  text-wrap: balance;
}

.hero__title em {
  font-style: normal;
  color: var(--gold);
}

.hero__sub {
  max-width: 520px;
  margin: 0 auto clamp(26px, 3.4vw, 36px);
  font-size: clamp(15px, 1.6vw, 17px);
  color: var(--text-2);
  line-height: 1.6;
  text-wrap: pretty;
}

/* Pill search bar with an attached submit button */
.hero__search {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 560px;
  margin-inline: auto;
}

.searchbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 6px 6px 6px 18px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
  transition:
    border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

.searchbar:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px var(--gold-wash);
}

.searchbar__icon {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  color: var(--gold);
}

.searchbar__input {
  flex: 1;
  min-width: 0;
  padding: 10px 0;
  border: 0;
  background: none;
  font-size: 14.5px;
  outline: none;
}

.searchbar__input::placeholder {
  color: var(--text-3);
}

.searchbar__btn {
  flex-shrink: 0;
}

/* ═══ 10. FRONT PAGE — FEATURED MOSAIC ════════════════════════════════════ */
/* Hosts the blueprint grid the hero used to carry. .grid-field is absolutely
   positioned at z-index 0, so the section needs its own stacking context and
   the content has to be lifted above it.

   The grid runs UP past the section's own top edge, behind the transparent
   header, so it reads as one field from the top of the page — the way it did
   when the hero sat above the mosaic. --st-header-h is the amount it extends;
   overflow stays visible so that overhang isn't clipped, and the ::before's
   own radial mask already fades its edges. */
.mosaic-section {
  --st-header-h: 190px;

  position: relative;
  background: var(--paper);
}

.mosaic-section .grid-field {
  top: calc(-1 * var(--st-header-h));
  /* Only the VERTICAL overhang may escape. `overflow: visible` here used to let
     the ::before's inset:-10% bleed sideways too, which pushed the document
     ~35px wider than the viewport and produced a horizontal scrollbar on narrow
     phones (360px). clip on X, visible on Y keeps the upward overhang while
     containing the sideways bleed. */
  overflow-x: clip;
  overflow-y: visible;
}

.mosaic-section > .container {
  position: relative;
  z-index: 1;
}

/* Homepage only: let the field show through the masthead. The header keeps its
   paper fill everywhere else, and regains it here once scrolled (see
   .site-header--scrolled) so headlines never run under bare text. */
.home .site-header:not(.site-header--scrolled) {
  background: transparent;
}

/* Big lead card at left; three horizontal digest rows at right. */
.mosaic {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  /* Wide enough for the lead's corner badge to straddle the edge without
	   colliding with the digest column. */
  column-gap: clamp(20px, 3.4vw, 46px);
  row-gap: 18px;
  align-items: stretch;
}

/* — Lead card —
   .lead-wrap positions the badge/notch; .lead__clip is the masked photo
   plate whose bottom-right corner is genuinely cut concave (see .lead__clip
   below) so the notch reads as a real bite, not an overlaid square. */
.lead-wrap {
  position: relative;
  display: block;
  isolation: isolate;

  /* Box the mask cuts away. Must fit the badge PLUS its 8px halo ring and
	   that ring's feathering — the halo paints outside the badge box, so a
	   notch sized to the badge alone clips the glow against the photo. */
  --notch: 132px;
  /* Radius of the CONCAVE cut where the bite meets the card edge. Deliberately
	   the SAME value as the card's other three corners (--r-xl) so the scoop
	   reads as the same curve turned inside out, rather than a wider sweep that
	   looks unrelated to the rest of the card. Follows --r-xl through the
	   breakpoints, so the match holds at every width. */
  --notch-fillet: var(--r-xl);
}

.lead {
  position: relative;
  display: block;
  /* Matches the stacked height of the three digest rows beside it, so the
	   mosaic's two columns end flush. */
  min-height: clamp(380px, 44vw, 596px);
  /* Fills the wrapper so the notch — positioned against this box — lands on
	   the card's real bottom-right corner. Without it the wrapper stretches to
	   the grid row while .lead stays at its min-height, and the badge drifts
	   off the bottom of the card. */
  height: 100%;
  /* No background here. The photo plate (.lead__clip) is the only painted
	   layer, and it's the one carrying the mask — anything painted on this
	   parent would show straight through the scooped corner as a dark square,
	   defeating the cut. The placeholder tone lives on .lead__clip instead. */
}

/* Inverted-radius mask: a rounded-rect base radius on all four corners, with
   the bottom-right corner instead scooped CONCAVE by --notch-fillet and
   pushed out by --notch. Two masks draw the corner: one radial gradient cuts
   the concave bite itself, the other two conic gradients square off the strip
   above/beside the bite so it doesn't just look like a stray circle floating
   off the edge. mask-composite isn't needed — layering multiple mask images
   (each opaque where it should show) is native, broad support back to
   Safari 15.4 / Firefox 53 / all evergreen Chromium. */
.lead__clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  border-radius: var(--r-xl);
  /* Placeholder tone for posts with no artwork. Lives here rather than on
	   .lead so it is masked along with the photo. */
  background: var(--ink-2);

  --_m: /calc(2 * var(--notch-fillet)) calc(2 * var(--notch-fillet)) radial-gradient(#000 70%, #0000 72%);
  --_g: conic-gradient(from 90deg at calc(100% - var(--notch-fillet)) calc(100% - var(--notch-fillet)), #0000 25%, #000 0);
  --_d: calc(var(--notch) + var(--notch-fillet));
  mask:
    calc(100% - var(--_d)) 100% var(--_m),
    100% calc(100% - var(--_d)) var(--_m),
    radial-gradient(var(--notch) at 100% 100%, #0000 99%, #000 calc(100% + 1px)) calc(-1 * var(--notch-fillet)) calc(-1 * var(--notch-fillet)),
    var(--_g) calc(-1 * var(--_d)) 0,
    var(--_g) 0 calc(-1 * var(--_d));
  mask-repeat: no-repeat;
}

/* The mask above ties the cut-out's INNER corner radius to --notch (the bite's
   size), so that corner is always a huge quarter-circle bowl. Where shape() is
   supported it draws every corner as its own arc, letting the inner corner use
   --notch-inner instead — set to the card's own radius so the scoop reads as
   part of the same shape language. Chromium-only for now; elsewhere the mask's
   rounder inner corner still stands, which degrades gracefully. */
@supports (clip-path: shape(from 0 0, line to 100% 100%)) {
  .lead__clip {
    --notch-inner: var(--r-xl);

    mask: none;
    clip-path: shape(from var(--r-xl) 0, line to calc(100% - var(--r-xl)) 0, arc to 100% var(--r-xl) of var(--r-xl) cw, line to 100% calc(100% - var(--notch) - var(--notch-fillet)), arc to calc(100% - var(--notch-fillet)) calc(100% - var(--notch)) of var(--notch-fillet) cw, line to calc(100% - var(--notch) + var(--notch-inner)) calc(100% - var(--notch)), arc to calc(100% - var(--notch)) calc(100% - var(--notch) + var(--notch-inner)) of var(--notch-inner) ccw, line to calc(100% - var(--notch)) calc(100% - var(--notch-fillet)), arc to calc(100% - var(--notch) - var(--notch-fillet)) 100% of var(--notch-fillet) cw, line to var(--r-xl) 100%, arc to 0 calc(100% - var(--r-xl)) of var(--r-xl) cw, line to 0 var(--r-xl), arc to var(--r-xl) 0 of var(--r-xl) cw, close);
  }
}

.lead-wrap .notch {
  background: none;
  border-radius: 0;
  /* Fills the --notch square the mask cuts away. The padding is the gap
	   between the cut edge and the badge — the page-coloured ring the
	   reference shows around it. */
  top: auto;
  left: auto;
  right: 0;
  bottom: 0;
  width: var(--notch);
  height: var(--notch);
  /* Asymmetric on purpose. Top/left face the concave cut, so they carry the
	   wide ring that separates the badge from the card; bottom/right face the
	   open page, where only enough room for the badge's 8px glow ring and its
	   feather is needed. Trimming below ~10px there clips the halo. */
  padding: 22px 10px 10px 22px;
}

.lead__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.lead-wrap:hover .lead__img {
  transform: scale(1.045);
}

.lead__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 8, 8, 0.92) 0%, rgba(8, 8, 8, 0.66) 32%, rgba(8, 8, 8, 0.12) 62%, transparent 82%);
}

.lead__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(22px, 3vw, 38px);
  /* Copy clears the corner badge, so the text block reads narrower than the
	   card — as in the reference. */
  padding-right: clamp(22px, 13vw, 168px);
  color: #fff;
  z-index: 2;
}

.lead__title {
  font-size: clamp(23px, 3.1vw, 34px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
  color: #fff;
  text-wrap: balance;
}

.lead__excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.76);
  margin-bottom: 18px;
  max-width: 52ch;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Corner notch ──────────────────────────────────────────────────────────
   A rounded bite out of a card's bottom-right corner, with the arrow badge
   floating over it. Two layers:

     1. The CUT. .lead__clip / .digest__media-clip mask away a --notch-square
        region in the bottom-right corner, rounded concave by --notch-fillet
        (the mask recipe lives on those rules — a radial gradient draws the
        concave arc, two conic gradients square off the strip above/beside
        it). This is real, in every evergreen browser — no @supports fallback
        needed, since CSS masks have been broadly supported for years.
     2. The BADGE HOUSING. .notch is a plain absolutely-positioned square,
        page-coloured, sized to --notch and rounded on its own top-left corner
        by --notch-fillet, sitting directly in the masked-away region.

   Every dimension is a single custom property, --notch / --notch-fillet, set
   once per context (.lead-wrap, .digest__media) in absolute px — nothing is
   derived by relative math against a different element's box, so there is
   nothing that can drift out of sync at another viewport width. */
.notch {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: var(--notch);
  height: var(--notch);
  background: var(--paper);
  border-top-left-radius: var(--notch-fillet);
}

/* Shared cut. Any masked plate can opt in by adding this class and setting
   --notch / --notch-fillet on its positioning parent; --notch-radius is the
   plate's own corner radius (defaults to --r-lg). Every per-section clip
   (.highlight__clip, .card__media-clip, …) reuses this rather than repeating
   the gradient stack. */
.notch-clip {
  --notch-radius: var(--r-lg);

  --_m: /calc(2 * var(--notch-fillet)) calc(2 * var(--notch-fillet)) radial-gradient(#000 70%, #0000 72%);
  --_g: conic-gradient(from 90deg at calc(100% - var(--notch-fillet)) calc(100% - var(--notch-fillet)), #0000 25%, #000 0);
  --_d: calc(var(--notch) + var(--notch-fillet));
  mask:
    calc(100% - var(--_d)) 100% var(--_m),
    100% calc(100% - var(--_d)) var(--_m),
    radial-gradient(var(--notch) at 100% 100%, #0000 99%, #000 calc(100% + 1px)) calc(-1 * var(--notch-fillet)) calc(-1 * var(--notch-fillet)),
    var(--_g) calc(-1 * var(--_d)) 0,
    var(--_g) 0 calc(-1 * var(--_d));
  mask-repeat: no-repeat;
}

@supports (clip-path: shape(from 0 0, line to 100% 100%)) {
  .notch-clip {
    --notch-inner: var(--notch-radius);

    mask: none;
    clip-path: shape(
      from var(--notch-radius) 0,
      line to calc(100% - var(--notch-radius)) 0,
      arc to 100% var(--notch-radius) of var(--notch-radius) cw,
      line to 100% calc(100% - var(--notch) - var(--notch-fillet)),
      arc to calc(100% - var(--notch-fillet)) calc(100% - var(--notch)) of var(--notch-fillet) cw,
      line to calc(100% - var(--notch) + var(--notch-inner)) calc(100% - var(--notch)),
      arc to calc(100% - var(--notch)) calc(100% - var(--notch) + var(--notch-inner)) of var(--notch-inner) ccw,
      line to calc(100% - var(--notch)) calc(100% - var(--notch-fillet)),
      arc to calc(100% - var(--notch) - var(--notch-fillet)) 100% of var(--notch-fillet) cw,
      line to var(--notch-radius) 100%,
      arc to 0 calc(100% - var(--notch-radius)) of var(--notch-radius) cw,
      line to 0 var(--notch-radius),
      arc to var(--notch-radius) 0 of var(--notch-radius) cw,
      close
    );
  }
}

/* Dark cards (the "Popular Story" band) cut through to ink, not paper. */
.is-inverted .notch {
  background: var(--ink);
}

.lead-wrap .arrow-badge {
  position: static;
  /* Fills .notch's padding box, whatever --notch and its padding resolve to. */
  width: 100%;
  height: 100%;
  /* Scales with the now-larger badge so the corners keep the reference's
	   squircle proportion rather than reading as a tight radius on a big box. */
  border-radius: 26px;
  /* The reference's badge sits in a soft orange halo — sampling it shows an
	   almost flat ~6%-of-badge band of rgb(250,203,186) rather than a blurred
	   drop shadow, so it's a spread ring with just enough blur to feather the
	   outer edge, not an offset shadow. */
  box-shadow:
    0 0 0 8px rgba(244, 83, 31, 0.22),
    0 0 12px 8px rgba(244, 83, 31, 0.16);
}

/* Byline with avatar */
.byline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--text-2);
}

.byline__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--paper-3);
}

.byline__name {
  font-weight: 500;
}

.byline__sep {
  color: var(--text-3);
}

.byline--on-dark {
  color: rgba(255, 255, 255, 0.82);
}

.byline--on-dark .byline__avatar {
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.32);
}

.byline--on-dark .byline__sep {
  color: rgba(255, 255, 255, 0.45);
}

/* — Digest rows — thumb left, headline + dek + byline right */
.mosaic__side {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 18px;
  min-width: 0;
}

.digest {
  position: relative;
  display: grid;
  /* Thumb takes a shade under half the row, as in the reference. */
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1fr);
  /* Extra left gap on the copy so the thumb's corner badge doesn't crowd it. */
  gap: clamp(20px, 2.4vw, 32px);
  align-items: stretch;
  min-width: 0;
}

/* Thumb. Positioning context only — no background here, or it would paint
   behind the masked plate and fill the notch (the bug the lead card had). */
.digest__media {
  position: relative;
  display: block;
  /* Fill the row so thumbs line up down the column instead of leaving ragged
	   gaps. No aspect-ratio: combined with height:100% it made the box taller
	   than the row, dropping the notch below the visible thumb. */
  height: 100%;

  --notch: 56px;
  /* Same trick as the lead card: match the thumb's own corner radius so the
	   scoop reads as that curve inverted. */
  --notch-fillet: var(--r-lg);
}

/* Inner clip. Same inverted-radius mask recipe as .lead__clip, at thumb
   scale — see the comment there for how the two gradient layers cut a
   genuinely concave bite out of the bottom-right corner. */
.digest__media-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--paper-3);

  --_m: /calc(2 * var(--notch-fillet)) calc(2 * var(--notch-fillet)) radial-gradient(#000 70%, #0000 72%);
  --_g: conic-gradient(from 90deg at calc(100% - var(--notch-fillet)) calc(100% - var(--notch-fillet)), #0000 25%, #000 0);
  --_d: calc(var(--notch) + var(--notch-fillet));
  mask:
    calc(100% - var(--_d)) 100% var(--_m),
    100% calc(100% - var(--_d)) var(--_m),
    radial-gradient(var(--notch) at 100% 100%, #0000 99%, #000 calc(100% + 1px)) calc(-1 * var(--notch-fillet)) calc(-1 * var(--notch-fillet)),
    var(--_g) calc(-1 * var(--_d)) 0,
    var(--_g) 0 calc(-1 * var(--_d));
  mask-repeat: no-repeat;
}

/* Same shape()-drawn inner corner as the lead card, at thumb scale. See the
   @supports block under .lead__clip for why this exists. */
@supports (clip-path: shape(from 0 0, line to 100% 100%)) {
  .digest__media-clip {
    --notch-inner: var(--r-lg);

    mask: none;
    clip-path: shape(from var(--r-lg) 0, line to calc(100% - var(--r-lg)) 0, arc to 100% var(--r-lg) of var(--r-lg) cw, line to 100% calc(100% - var(--notch) - var(--notch-fillet)), arc to calc(100% - var(--notch-fillet)) calc(100% - var(--notch)) of var(--notch-fillet) cw, line to calc(100% - var(--notch) + var(--notch-inner)) calc(100% - var(--notch)), arc to calc(100% - var(--notch)) calc(100% - var(--notch) + var(--notch-inner)) of var(--notch-inner) ccw, line to calc(100% - var(--notch)) calc(100% - var(--notch-fillet)), arc to calc(100% - var(--notch) - var(--notch-fillet)) 100% of var(--notch-fillet) cw, line to var(--r-lg) 100%, arc to 0 calc(100% - var(--r-lg)) of var(--r-lg) cw, line to 0 var(--r-lg), arc to var(--r-lg) 0 of var(--r-lg) cw, close);
  }
}

/* Placeholder tone (posts with no thumbnail) skips the cut entirely — a
   flat rounded rect reads better than an empty-looking bite with no image
   to justify it. */
.digest__media-clip.card__media--empty {
  mask: none;
  clip-path: none;
  border-radius: var(--r-lg);
}

.digest__media .notch {
  background: none;
  border-radius: 0;
  top: auto;
  left: auto;
  right: 0;
  bottom: 0;
  width: var(--notch);
  height: var(--notch);
  /* Same asymmetry as the lead card, at thumb scale: the wide sides face the
	   concave cut, the tight sides face the open page. */
  padding: 10px 5px 5px 10px;
}

.digest__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.digest:hover .digest__img {
  transform: scale(1.06);
}

/* Same .notch construction as the lead, at thumb scale. The badge itself is
   ink (not the page colour), so it reads as a chip sitting in the cut-out
   rather than a hole straight through to white. */
.digest__media .arrow-badge {
  position: static;
  /* Fills .notch's padding box exactly — the same 100%-of-padding-box
	   approach as the lead badge, so it can't drift out of sync with --notch
	   or the notch's own padding. */
  width: 100%;
  height: 100%;
  background: var(--ink);
  color: #fff;
  border-radius: 13px;
  box-shadow: 0 8px 18px rgba(18, 18, 18, 0.18);
}

.digest__media .arrow-badge svg {
  width: 24px;
  height: 24px;
}

.digest.has-badge:hover .arrow-badge {
  background: var(--gold);
}

.digest__body {
  min-width: 0;
  padding-top: 2px;
}

.digest__title {
  font-size: clamp(16px, 1.75vw, 20px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.024em;
  margin-bottom: 9px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s var(--ease);
}

.digest:hover .digest__title {
  color: var(--gold-deep);
}

.digest__excerpt {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-2);
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.digest__byline {
  font-size: 11.5px;
}

.digest__byline .byline__avatar {
  width: 20px;
  height: 20px;
}

/* ═══ 11. FRONT PAGE — IN THE LOOP RAIL ═══════════════════════════════════ */
/* Pill label + a marquee of bullet-separated headlines. */
.loop {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(20px, 2.6vw, 30px);
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  overflow: hidden;
}

.loop__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.loop__viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}

.loop__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee var(--loop-dur, 60s) linear infinite;
  will-change: transform;
}

.loop:hover .loop__track {
  animation-play-state: paused;
}

.loop__item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-right: 14px;
  font-size: 13px;
  color: var(--text-2);
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}

.loop__item:hover {
  color: var(--gold-deep);
}

.loop__item::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  opacity: 0.55;
}

/* ═══ 12. FRONT PAGE — LATEST CAROOUSEL ═══════════════════════════════════ */
.rail {
  position: relative;
}

.rail__viewport {
  overflow: hidden;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}

.rail__track {
  display: flex;
  gap: 18px;
  transition: transform 0.55s var(--ease);
  will-change: transform;
}

.rail__item {
  flex: 0 0 auto;
  /* Roughly three cards per desktop viewport, matching the reference's
	   density; the clamp keeps them legible on tablets without a media query. */
  width: clamp(280px, 31vw, 400px);
  min-width: 0;
}

.rail-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  /* Rounded square, matching the reference's carousel controls. */
  border-radius: 12px;
  border: 1px solid transparent;
  /* Inactive/back direction reads as a soft grey tile in the design. */
  background: var(--paper-3);
  color: var(--ink);
  transition:
    background-color 0.2s var(--ease),
    color 0.2s var(--ease),
    border-color 0.2s var(--ease),
    opacity 0.2s var(--ease);
}

/* The forward control is the primary action, so it carries the solid ink fill
   the design shows. */
.rail-btn[data-rail-next] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.rail-btn:hover:not(:disabled) {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.rail-btn[data-rail-next]:hover:not(:disabled) {
  background: var(--gold);
  border-color: var(--gold);
}

.rail-btn:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}

.rail-btn svg {
  width: 16px;
  height: 16px;
}

.is-inverted .rail-btn {
  background: transparent;
  border-color: var(--line-dark);
  color: #fff;
}

.is-inverted .rail-btn:hover:not(:disabled) {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}

/* Horizontal card used inside the Latest rail: thumb left, copy right. */
.hcard {
  position: relative;
  display: grid;
  /* Thumb reads a little narrower than the copy, as in the design. */
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

/* Positioning context only — no background or radius here, or it would paint
   behind the masked plate and fill the notch. */
.hcard__media {
  position: relative;
  display: block;
  /* Near-square, as in the design — the 4/3 it used to be read too wide and
	   short next to the copy. */
  aspect-ratio: 1 / 1;

  --notch: 52px;
  --notch-fillet: var(--r-lg);
}

/* Masked plate carrying the scooped corner. Same recipe as .digest__media-clip
   — see the comment on .lead__clip for how the gradient layers cut the bite. */
.hcard__media-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--paper-3);

  --_m: /calc(2 * var(--notch-fillet)) calc(2 * var(--notch-fillet)) radial-gradient(#000 70%, #0000 72%);
  --_g: conic-gradient(from 90deg at calc(100% - var(--notch-fillet)) calc(100% - var(--notch-fillet)), #0000 25%, #000 0);
  --_d: calc(var(--notch) + var(--notch-fillet));
  mask:
    calc(100% - var(--_d)) 100% var(--_m),
    100% calc(100% - var(--_d)) var(--_m),
    radial-gradient(var(--notch) at 100% 100%, #0000 99%, #000 calc(100% + 1px)) calc(-1 * var(--notch-fillet)) calc(-1 * var(--notch-fillet)),
    var(--_g) calc(-1 * var(--_d)) 0,
    var(--_g) 0 calc(-1 * var(--_d));
  mask-repeat: no-repeat;
}

/* Tighter inner corner where shape() is available — see .lead__clip's
   @supports block for the reasoning. */
@supports (clip-path: shape(from 0 0, line to 100% 100%)) {
  .hcard__media-clip {
    --notch-inner: var(--r-lg);

    mask: none;
    clip-path: shape(
      from var(--r-lg) 0,
      line to calc(100% - var(--r-lg)) 0,
      arc to 100% var(--r-lg) of var(--r-lg) cw,
      line to 100% calc(100% - var(--notch) - var(--notch-fillet)),
      arc to calc(100% - var(--notch-fillet)) calc(100% - var(--notch)) of var(--notch-fillet) cw,
      line to calc(100% - var(--notch) + var(--notch-inner)) calc(100% - var(--notch)),
      arc to calc(100% - var(--notch)) calc(100% - var(--notch) + var(--notch-inner)) of var(--notch-inner) ccw,
      line to calc(100% - var(--notch)) calc(100% - var(--notch-fillet)),
      arc to calc(100% - var(--notch) - var(--notch-fillet)) 100% of var(--notch-fillet) cw,
      line to var(--r-lg) 100%,
      arc to 0 calc(100% - var(--r-lg)) of var(--r-lg) cw,
      line to 0 var(--r-lg),
      arc to var(--r-lg) 0 of var(--r-lg) cw,
      close
    );
  }
}

.hcard__media-clip.card__media--empty {
  mask: none;
  clip-path: none;
  border-radius: var(--r-lg);
}

.hcard__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.hcard:hover .hcard__img {
  transform: scale(1.06);
}

.hcard__media .notch {
  background: none;
  border-radius: 0;
  top: auto;
  left: auto;
  right: 0;
  bottom: 0;
  width: var(--notch);
  height: var(--notch);
  /* Same asymmetry as the mosaic badges: wide toward the cut, tight toward
	   the open page. */
  padding: 9px 4px 4px 9px;
}

.hcard__media .arrow-badge {
  position: static;
  width: 100%;
  height: 100%;
  background: var(--ink);
  color: #fff;
  border-radius: 12px;
}

.hcard__media .arrow-badge svg {
  width: 22px;
  height: 22px;
}

.hcard__title {
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s var(--ease);
}

.hcard:hover .hcard__title {
  color: var(--gold-deep);
}

.hcard__excerpt {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-2);
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hcard__byline {
  font-size: 11.5px;
}

.hcard__byline .byline__avatar {
  width: 20px;
  height: 20px;
}

/* ═══ 13. FRONT PAGE — POPULAR (INVERTED) ═════════════════════════════════ */
.popular__lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(24px, 3.6vw, 48px);
  align-items: center;
  margin-bottom: clamp(28px, 4vw, 44px);
}

/* Positioning context only — the painted, masked plate is .popular__media-clip
   below, or a background here would fill the notch. */
.popular__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 11;

  --notch: 104px;
  --notch-fillet: var(--r-xl);
}

.popular__media-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--ink-3);

  --_m: /calc(2 * var(--notch-fillet)) calc(2 * var(--notch-fillet)) radial-gradient(#000 70%, #0000 72%);
  --_g: conic-gradient(from 90deg at calc(100% - var(--notch-fillet)) calc(100% - var(--notch-fillet)), #0000 25%, #000 0);
  --_d: calc(var(--notch) + var(--notch-fillet));
  mask:
    calc(100% - var(--_d)) 100% var(--_m),
    100% calc(100% - var(--_d)) var(--_m),
    radial-gradient(var(--notch) at 100% 100%, #0000 99%, #000 calc(100% + 1px)) calc(-1 * var(--notch-fillet)) calc(-1 * var(--notch-fillet)),
    var(--_g) calc(-1 * var(--_d)) 0,
    var(--_g) 0 calc(-1 * var(--_d));
  mask-repeat: no-repeat;
}

@supports (clip-path: shape(from 0 0, line to 100% 100%)) {
  .popular__media-clip {
    --notch-inner: var(--r-xl);

    mask: none;
    clip-path: shape(
      from var(--r-xl) 0,
      line to calc(100% - var(--r-xl)) 0,
      arc to 100% var(--r-xl) of var(--r-xl) cw,
      line to 100% calc(100% - var(--notch) - var(--notch-fillet)),
      arc to calc(100% - var(--notch-fillet)) calc(100% - var(--notch)) of var(--notch-fillet) cw,
      line to calc(100% - var(--notch) + var(--notch-inner)) calc(100% - var(--notch)),
      arc to calc(100% - var(--notch)) calc(100% - var(--notch) + var(--notch-inner)) of var(--notch-inner) ccw,
      line to calc(100% - var(--notch)) calc(100% - var(--notch-fillet)),
      arc to calc(100% - var(--notch) - var(--notch-fillet)) 100% of var(--notch-fillet) cw,
      line to var(--r-xl) 100%,
      arc to 0 calc(100% - var(--r-xl)) of var(--r-xl) cw,
      line to 0 var(--r-xl),
      arc to var(--r-xl) 0 of var(--r-xl) cw,
      close
    );
  }
}

.popular__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.popular__media:hover .popular__img {
  transform: scale(1.05);
}

.popular__media .notch {
  background: none;
  border-radius: 0;
  top: auto;
  left: auto;
  right: 0;
  bottom: 0;
  width: var(--notch);
  height: var(--notch);
  /* Generous on the sides facing the cut so the scoop stays clearly visible
	   against the dark band — a badge that nearly fills the notch reads as a
	   plain square sitting on the photo. */
  padding: 26px 0 0 26px;
}

/* White badge on the dark band, as in the design. */
.popular__media .arrow-badge {
  position: static;
  width: 100%;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  border-radius: 22px;
  box-shadow: none;
}

.popular__media .arrow-badge svg {
  width: 34px;
  height: 34px;
}

.has-badge:hover .popular__media .arrow-badge,
.popular__media:hover .arrow-badge {
  background: var(--gold);
  color: #fff;
}

.popular__title {
  font-size: clamp(26px, 3.6vw, 42px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.032em;
  margin-bottom: 16px;
  text-wrap: balance;
}

.popular__title a {
  transition: color 0.2s var(--ease);
}

.popular__title a:hover {
  color: var(--gold-bright);
}

.popular__excerpt {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-on-dark-2);
  margin-bottom: 20px;
  max-width: 58ch;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Three compact overlay tiles under the lead */
/* Three across on desktop. The query returns four minis so tablet can show a
   full 2x2 — the fourth is hidden here and on mobile, where a 3-up and a 1-up
   respectively would otherwise leave a ragged trailing item. */
.popular__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.popular__row .mini:nth-child(4) {
  display: none;
}

.mini {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
}

.mini__media {
  position: relative;
  display: block;
  /* Squarer and larger than the old 4/3, matching the design's tiles. */
  aspect-ratio: 1 / 1;

  --notch: 50px;
  --notch-fillet: var(--r-md);
}

.mini__media-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--ink-3);

  --_m: /calc(2 * var(--notch-fillet)) calc(2 * var(--notch-fillet)) radial-gradient(#000 70%, #0000 72%);
  --_g: conic-gradient(from 90deg at calc(100% - var(--notch-fillet)) calc(100% - var(--notch-fillet)), #0000 25%, #000 0);
  --_d: calc(var(--notch) + var(--notch-fillet));
  mask:
    calc(100% - var(--_d)) 100% var(--_m),
    100% calc(100% - var(--_d)) var(--_m),
    radial-gradient(var(--notch) at 100% 100%, #0000 99%, #000 calc(100% + 1px)) calc(-1 * var(--notch-fillet)) calc(-1 * var(--notch-fillet)),
    var(--_g) calc(-1 * var(--_d)) 0,
    var(--_g) 0 calc(-1 * var(--_d));
  mask-repeat: no-repeat;
}

@supports (clip-path: shape(from 0 0, line to 100% 100%)) {
  .mini__media-clip {
    --notch-inner: var(--r-md);

    mask: none;
    clip-path: shape(
      from var(--r-md) 0,
      line to calc(100% - var(--r-md)) 0,
      arc to 100% var(--r-md) of var(--r-md) cw,
      line to 100% calc(100% - var(--notch) - var(--notch-fillet)),
      arc to calc(100% - var(--notch-fillet)) calc(100% - var(--notch)) of var(--notch-fillet) cw,
      line to calc(100% - var(--notch) + var(--notch-inner)) calc(100% - var(--notch)),
      arc to calc(100% - var(--notch)) calc(100% - var(--notch) + var(--notch-inner)) of var(--notch-inner) ccw,
      line to calc(100% - var(--notch)) calc(100% - var(--notch-fillet)),
      arc to calc(100% - var(--notch) - var(--notch-fillet)) 100% of var(--notch-fillet) cw,
      line to var(--r-md) 100%,
      arc to 0 calc(100% - var(--r-md)) of var(--r-md) cw,
      line to 0 var(--r-md),
      arc to var(--r-md) 0 of var(--r-md) cw,
      close
    );
  }
}

.mini__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.mini:hover .mini__img {
  transform: scale(1.07);
}

.mini__media .notch {
  background: none;
  border-radius: 0;
  top: auto;
  left: auto;
  right: 0;
  bottom: 0;
  width: var(--notch);
  height: var(--notch);
  padding: 13px 0 0 13px;
}

.mini__media .arrow-badge {
  position: static;
  width: 100%;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  border-radius: 12px;
}

.mini__media .arrow-badge svg {
  width: 21px;
  height: 21px;
}

.mini__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.02em;
  margin-bottom: 9px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s var(--ease);
}

.mini:hover .mini__title {
  color: var(--gold-bright);
}

.mini__byline {
  font-size: 11px;
}

.mini__byline .byline__avatar {
  width: 18px;
  height: 18px;
}

/* ═══ 14. FRONT PAGE — HIGHLIGHT ══════════════════════════════════════════ */
/* One wide overlay banner, then a 4-up grid of vertical cards. */
/* .highlight__clip is inset:0 inside this, so it has no height of its own —
   this min-height is what sizes the plate. Adjust it here, not on the clip. */
.highlight__banner {
  position: relative;
  display: block;
  min-height: clamp(340px, 38vw, 480px);
  margin-bottom: clamp(22px, 3vw, 34px);
  isolation: isolate;

  /* Scales down on narrow screens — a fixed 116px bite is a third of a phone's
	   banner width. */
  --notch: clamp(76px, 8vw + 46px, 116px);
  --notch-fillet: var(--r-xl);
}

/* Masked plate holding the photo, scrim and copy. Inherits the cut from
   .notch-clip; only the radius differs from that rule's default. */
.highlight__clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--ink-2);

  --notch-radius: var(--r-xl);
}

.highlight__banner .notch {
  background: none;
  border-radius: 0;
  top: auto;
  left: auto;
  right: 0;
  bottom: 0;
  width: var(--notch);
  height: var(--notch);
  padding: 22px 0 0 22px;
  z-index: 3;
}

.highlight__banner .arrow-badge {
  position: static;
  width: 100%;
  height: 100%;
  border-radius: 24px;
}

.highlight__banner .arrow-badge svg {
  width: 38px;
  height: 38px;
}

.highlight__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}

.highlight__banner:hover .highlight__img {
  transform: scale(1.04);
}

.highlight__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 8, 8, 0.9) 0%, rgba(8, 8, 8, 0.6) 34%, rgba(8, 8, 8, 0.1) 66%, transparent 84%);
}

.highlight__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(22px, 3.2vw, 40px);
  padding-right: clamp(22px, 12vw, 140px);
  color: #fff;
  z-index: 2;
}

.highlight__title {
  font-size: clamp(22px, 3.2vw, 34px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
  color: #fff;
  max-width: 30ch;
  text-wrap: balance;
}

.highlight__excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.76);
  margin-bottom: 16px;
  max-width: 74ch;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ═══ 15. CARDS (SHARED) ══════════════════════════════════════════════════ */
/* Vertical card: image on top, copy beneath. Used by the Highlight grid,
   archives, related posts and the 4-up grids. */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Positioning context only — the painted plate is .card__media-clip. */
.card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  margin-bottom: 14px;

  --notch: 58px;
  --notch-fillet: var(--r-lg);
}

.card__media-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--paper-3);
}

.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.card:hover .card__img {
  transform: scale(1.05);
}

.card__media .notch {
  background: none;
  border-radius: 0;
  top: auto;
  left: auto;
  right: 0;
  bottom: 0;
  width: var(--notch);
  height: var(--notch);
  padding: 13px 0 0 13px;
}

.card__media .arrow-badge {
  position: static;
  width: 100%;
  height: 100%;
  background: var(--ink);
  color: #fff;
  border-radius: 13px;
}

.card__media .arrow-badge svg {
  width: 24px;
  height: 24px;
}

/* Placeholder when a post has no featured image. */
.card__media--empty {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--paper-2), var(--paper-3));
}

.card__media--empty::after {
  content: "";
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1.5px solid var(--gold-line);
  background: var(--gold-wash);
}

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

.card__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.022em;
  margin-bottom: 8px;
  text-wrap: pretty;
}

.card__title a {
  transition: color 0.2s var(--ease);
}

.card:hover .card__title a {
  color: var(--gold-deep);
}

.card__excerpt {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-2);
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  /* Read times and dates are numeric; without this they shift width between
     cards now that the family is proportional rather than monospaced. */
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

.card__chips {
  margin-bottom: 10px;
}

/* Card on dark ground */
.is-inverted .card__media,
.card--on-dark .card__media {
  background: var(--ink-3);
}

.is-inverted .card__excerpt,
.card--on-dark .card__excerpt {
  color: var(--text-on-dark-2);
}

.is-inverted .card__meta,
.card--on-dark .card__meta {
  color: var(--text-on-dark-3);
}

.is-inverted .card:hover .card__title a,
.card--on-dark:hover .card__title a {
  color: var(--gold-bright);
}

/* Grids */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
}

/* ═══ 16. NEWSLETTER CTA BAND ═════════════════════════════════════════════ */
/* Logo, oversized headline, single button — the reference's closing band. */
.cta {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 8vw, 96px);
  text-align: center;
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.cta__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin-inline: auto;
}

.cta__mark {
  display: inline-flex;
  margin-bottom: clamp(20px, 3vw, 30px);
}

.cta__mark img {
  height: clamp(28px, 3.4vw, 38px);
  width: auto;
  object-fit: contain;
}

.cta__mark-text {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 28px);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.cta__title {
  font-size: clamp(30px, 5.6vw, 56px);
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -0.035em;
  margin-bottom: 14px;
  text-wrap: balance;
}

.cta__title em {
  font-style: normal;
  color: var(--gold);
}

.cta__sub {
  max-width: 500px;
  margin: 0 auto clamp(26px, 3.4vw, 34px);
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.6;
}

.cta__form {
  max-width: 480px;
  margin-inline: auto;
}

.cta__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 18px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
  transition:
    border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

.cta__row:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px var(--gold-wash);
}

.cta__row .newsletter-form__input {
  flex: 1;
  min-width: 0;
  padding: 11px 0;
  border: 0;
  background: none;
  font-size: 14.5px;
  outline: none;
}

.cta__note {
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-3);
}

/* ═══ 17. FOOTER ══════════════════════════════════════════════════════════ */
/* The footer is a single dark panel inset from the page edges so the paper
   shows around it. The asymmetric radius gives it a deliberate sweep rather
   than a uniform tile — large on the top-left, half that top-right, square
   at the bottom-left where it meets the page edge. */
.site-footer {
  background: var(--ink);
  color: var(--text-on-dark);
  padding-top: clamp(40px, 5vw, 62px);
  /* A restrained sweep: enough to read as a deliberate shape, small enough
	   that it costs the layout little. Still tapers as the panel narrows, so
	   the curve never eats a meaningful share of a phone's width. */
  border-radius:
    clamp(40px, 14vw - 52px, 200px)
    clamp(20px, 7vw - 26px, 100px)
    clamp(40px, 14vw - 52px, 200px)
    0;
  margin-top: clamp(28px, 4vw, 48px);
  overflow: hidden;

  /* Clearance the bottom-right curve steals from the last row, tracking the
	   radius above so the legal line clears the sweep at every width. */
  --st-footer-curve: clamp(12px, 7vw - 26px, 100px);
}

/* The top-left sweep eats into the brand column, which starts at the gutter.
   Clearing it needs BOTH axes: the curve is as wide as it is tall, so a purely
   vertical push still leaves the logo inside the arc on narrow screens where
   the radius is a large fraction of the footer's width. */
.site-footer > .container {
  padding-top: clamp(4px, 2vw - 7px, 16px);
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(36px, 4.5vw, 54px);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Inset from the top-left sweep. The curve is as wide as it is tall, so the
	   brand needs horizontal clearance too — the .container's padding-top alone
	   leaves the logo inside the arc on narrow screens. Tapers with the radius
	   so it doesn't sit at the desktop value all the way down to tablet. */
  padding-left: clamp(4px, 2vw - 7px, 18px);
}

.footer-brand__logo {
  display: inline-flex;
  margin-bottom: 18px;
}

.footer-brand__logo img {
  height: clamp(26px, 3vw, 34px);
  width: auto;
  object-fit: contain;
  /* The wordmark is dark-charcoal on transparent, which would vanish against
	   the black footer. Flattening to pure white keeps it legible; the mark
	   reads as a monochrome lockup here by design. */
  filter: brightness(0) invert(1);
  opacity: 0.95;
  transition: opacity 0.2s var(--ease);
}

.footer-brand__logo:hover img {
  opacity: 1;
}

.footer-brand__name {
  display: inline-block;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.footer-brand__desc {
  max-width: 34ch;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-on-dark-2);
}

/* Short accent rule under the brand blurb — the reference's vertical tick. */
.footer-brand__rule {
  display: block;
  width: 1.5px;
  height: 44px;
  margin-top: 24px;
  background: linear-gradient(to bottom, var(--accent), transparent);
}

.footer-col__heading {
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-on-dark-3);
}

/* Back-to-top tile — the notch + badge motif from the cards, at footer scale.
   The clip carries the scooped corner and the badge sits in the cut, so the
   footer echoes the same shape vocabulary as the mosaic and grids above. */
.footer-col--action {
  justify-self: end;
  width: 100%;
  max-width: 210px;
}

.footer-top-link {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;

  --notch: 54px;
  --notch-fillet: var(--r-lg);
}

/* Lifted well clear of the footer's own --ink so the scooped corner actually
   reads — a tile only a shade off its backdrop hides the cut entirely. */
.footer-top-link__clip {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.09);
  transition: background-color 0.25s var(--ease);
}

.footer-top-link:hover .footer-top-link__clip {
  background: rgba(255, 255, 255, 0.15);
}

.footer-top-link__label {
  position: absolute;
  inset: auto auto 16px 18px;
  max-width: 8ch;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
}

.footer-top-link .notch {
  background: none;
  border-radius: 0;
  top: auto;
  left: auto;
  right: 0;
  bottom: 0;
  width: var(--notch);
  height: var(--notch);
  padding: 12px 0 0 12px;
}

.footer-top-link .arrow-badge {
  position: static;
  width: 100%;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  border-radius: 13px;
}

/* Points up-and-right: it returns you to the top of the page. */
.footer-top-link .arrow-badge svg {
  width: 21px;
  height: 21px;
}

.footer-col__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col__list a {
  font-size: 13.5px;
  color: var(--text-on-dark-2);
  transition:
    color 0.2s var(--ease),
    padding-left 0.2s var(--ease);
}

.footer-col__list a:hover {
  color: #fff;
  padding-left: 4px;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-block: 22px;
  /* Keeps the legal line inboard of the bottom-right sweep, which would
	   otherwise clip it. Scales with the radius via --st-footer-curve. */
  padding-right: var(--st-footer-curve);
  border-top: 1px solid var(--line-dark);
  font-family: var(--font-display);
  font-size: 11.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-on-dark-3);
}

.footer-bottom a {
  color: var(--text-on-dark-3);
  transition: color 0.2s var(--ease);
}

.footer-bottom a:hover {
  color: #fff;
}

.footer-legal {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

/* ═══ 18. ARCHIVE ═════════════════════════════════════════════════════════ */
.archive-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(44px, 6vw, 76px) clamp(32px, 4vw, 48px);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.archive-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

.archive-hero__title {
  font-size: clamp(32px, 5.6vw, 56px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-block: 14px 12px;
  text-wrap: balance;
}

.archive-hero__desc {
  font-size: clamp(14.5px, 1.6vw, 16.5px);
  line-height: 1.6;
  color: var(--text-2);
  max-width: 60ch;
  margin-bottom: 14px;
  text-wrap: pretty;
}

.archive-hero__count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.archive-hero__count strong {
  color: var(--gold-deep);
}

/* Lead row: first post runs wide with copy alongside. */
.archive-lead {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.24fr) minmax(0, 1fr);
  gap: clamp(22px, 3.2vw, 40px);
  align-items: center;
  padding-bottom: clamp(30px, 4vw, 46px);
  margin-bottom: clamp(30px, 4vw, 46px);
  border-bottom: 1px solid var(--line);
}

/* --notch/--notch-fillet drive both the cut and the badge housing, exactly as
   on .card__media and .digest__media. Sized between those two: this plate is
   wider than a card but the badge is the --lg variant. */
.archive-lead__media {
  /* Proportioned off the home page's .lead-wrap notch (132px / 30px fillet /
     22px inset) rather than invented: this plate is smaller, so all three
     scale down together and the corner reads as the same shape. */
  --notch: 92px;
  --notch-fillet: 26px;
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  /* No overflow/radius here any more — both move to the clip below. Clipping at
     this level would cut off the notch mask and the cut would never show. */
}

/* Masked plate holding the image. Inherits the concave corner cut from
   .notch-clip; only the radius differs from that rule's default. */
.archive-lead__clip {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--paper-3);

  --notch-radius: var(--r-xl);
}

.archive-lead__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.archive-lead__media:hover .archive-lead__img {
  transform: scale(1.04);
}

/* Badge housing sits in the cut-away region, same construction as the lead and
   digest cards: the .notch square is transparent and the badge fills it. */
.archive-lead__media .notch {
  background: none;
  border-radius: 0;
  top: auto;
  left: auto;
  right: 0;
  bottom: 0;
  /* Asymmetric like .lead-wrap's: the gap belongs on the two sides that face
     the cut (top and left), not on the sides flush with the plate edge. */
  padding: 16px 6px 6px 16px;
}

.archive-lead__media .arrow-badge {
  position: static;
  /* Fills .notch's padding box, so it cannot drift out of sync with --notch. */
  width: 100%;
  height: 100%;
  border-radius: 20px;
}

.archive-lead__title {
  font-size: clamp(24px, 3.4vw, 38px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.032em;
  margin-bottom: 14px;
  text-wrap: balance;
}

.archive-lead__title a {
  transition: color 0.2s var(--ease);
}

.archive-lead__title a:hover {
  color: var(--gold-deep);
}

.archive-lead__excerpt {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-2);
  margin-bottom: 18px;
  max-width: 56ch;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.no-results {
  padding-block: clamp(56px, 9vw, 110px);
  text-align: center;
}

.no-results p {
  margin-bottom: 22px;
  font-size: 16px;
  color: var(--text-2);
}

/* ═══ 19. SINGLE POST ═════════════════════════════════════════════════════ */
.single-main {
  padding-block: clamp(30px, 4vw, 48px) clamp(48px, 6vw, 80px);
}

.single-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(32px, 4.6vw, 64px);
  align-items: start;
}

/* Article header */
.article-header {
  margin-bottom: clamp(22px, 3vw, 30px);
}

.article-header__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.article-header__title {
  font-size: clamp(29px, 4.6vw, 48px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.033em;
  margin-bottom: 18px;
  text-wrap: balance;
}

.article-header__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--text-2);
}

.article-header__meta .byline__avatar {
  width: 32px;
  height: 32px;
}

.article-header__read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  /* Sized to sit with the byline beside it rather than the 10.5px mono it
	   replaced — the body face reads smaller at the same nominal size. */
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-3);
}

/* Reading-progress bar pinned under the sticky header. */
.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 120;
  background: transparent;
  pointer-events: none;
}

.read-progress__fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  transform-origin: left;
  transition: width 0.1s linear;
}

.article-hero {
  margin-bottom: clamp(24px, 3.4vw, 36px);
}

.article-hero__img {
  width: 100%;
  border-radius: var(--r-xl);
  object-fit: cover;
}

.article-hero__caption {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
}

/* Long-form content */
.entry-content {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--text);
}

.entry-content > * + * {
  margin-top: 1.15em;
}

.entry-content p {
  text-wrap: pretty;
}

.entry-content h2 {
  margin-top: 1.9em;
  font-size: clamp(21px, 2.6vw, 28px);
  letter-spacing: -0.028em;
}

.entry-content h3 {
  margin-top: 1.7em;
  font-size: clamp(18px, 2.1vw, 22px);
  letter-spacing: -0.024em;
}

.entry-content h4 {
  margin-top: 1.5em;
  font-size: 17px;
}

.entry-content a {
  color: var(--gold-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2.5px;
  transition: color 0.2s var(--ease);
}

.entry-content a:hover {
  color: var(--gold);
}

.entry-content ul,
.entry-content ol {
  padding-left: 1.4em;
  list-style: disc;
}

.entry-content ol {
  list-style: decimal;
}

.entry-content li + li {
  margin-top: 0.5em;
}

.entry-content li::marker {
  color: var(--gold);
}

.entry-content blockquote {
  margin: 1.8em 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--gold);
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.entry-content blockquote p + p {
  margin-top: 0.6em;
}

.entry-content blockquote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.entry-content img,
.entry-content figure img {
  border-radius: var(--r-md);
}

.entry-content figcaption {
  margin-top: 9px;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
}

.entry-content hr {
  margin-block: 2.2em;
  border: 0;
  border-top: 1px solid var(--line);
}

.entry-content code {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--paper-2);
  font-family: var(--font-code);
  font-size: 0.88em;
}

.entry-content pre {
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: var(--ink);
  color: #f3f3f3;
  overflow-x: auto;
  /* Explicit, not inherited from the nested code element, so an unwrapped
     <pre> still renders as monospace. */
  font-family: var(--font-code);
  font-size: 13px;
  line-height: 1.6;
}

.entry-content pre code {
  padding: 0;
  background: none;
  color: inherit;
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  display: block;
  overflow-x: auto;
}

.entry-content th,
.entry-content td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.entry-content th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--paper-2);
}

/* Tag list */
.article-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: clamp(28px, 3.6vw, 40px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.article-tags__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Prev / next */
.article-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(28px, 3.6vw, 40px);
}

.article-nav__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition:
    border-color 0.2s var(--ease),
    background-color 0.2s var(--ease),
    transform 0.2s var(--ease);
}

.article-nav__item:hover {
  border-color: var(--gold-line);
  background: var(--gold-wash);
  transform: translateY(-2px);
}

.article-nav__item--next {
  text-align: right;
  align-items: flex-end;
}

.article-nav__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.article-nav__title {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: -0.02em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.related {
  margin-top: clamp(40px, 5.4vw, 68px);
  padding-top: clamp(30px, 4vw, 44px);
  border-top: 1px solid var(--line);
}

/* Sidebar */
.single-sidebar {
  position: sticky;
  top: 132px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.panel {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
}

.panel--dark {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--text-on-dark);
}

.panel__heading {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.panel--dark .panel__heading {
  border-bottom-color: var(--line-dark);
  color: var(--text-on-dark-3);
}

.side-list {
  display: flex;
  flex-direction: column;
}

.side-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding-block: 14px;
  border-bottom: 1px solid var(--line);
}

.side-item:first-child {
  padding-top: 0;
}

.side-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.side-item__num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--gold);
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}

.side-item__title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.018em;
  margin-bottom: 5px;
  transition: color 0.2s var(--ease);
}

.side-item:hover .side-item__title {
  color: var(--gold-deep);
}

.side-item__time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
}

.panel--dark .panel__title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: 10px;
}

.panel--dark .panel__sub {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-on-dark-2);
  margin-bottom: 18px;
}

.panel--dark .newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.panel--dark .newsletter-form__input {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-dark);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 14px;
  outline: none;
  transition:
    border-color 0.2s var(--ease),
    background-color 0.2s var(--ease);
}

.panel--dark .newsletter-form__input::placeholder {
  color: var(--text-on-dark-3);
}

.panel--dark .newsletter-form__input:focus {
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.1);
}

/* Category list in the sidebar */
.cat-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cat-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 500;
  transition:
    background-color 0.2s var(--ease),
    color 0.2s var(--ease);
}

.cat-list a:hover {
  background: var(--gold-wash);
  color: var(--gold-deep);
}

.cat-list__count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* ═══ 20. STATIC PAGE ═════════════════════════════════════════════════════ */
.page-main {
  padding-block: clamp(32px, 4.4vw, 56px) clamp(48px, 6vw, 80px);
}

.page-header {
  margin-bottom: clamp(26px, 3.4vw, 38px);
  padding-bottom: clamp(20px, 2.6vw, 28px);
  border-bottom: 1px solid var(--line);
}

.page-header__title {
  font-size: clamp(30px, 5vw, 50px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.034em;
  margin-bottom: 12px;
  text-wrap: balance;
}

.page-header__updated {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-3);
}

.page-hero {
  margin-bottom: clamp(24px, 3.2vw, 34px);
}

.page-hero__img {
  width: 100%;
  border-radius: var(--r-xl);
}

/* ═══ 21. 404 ═════════════════════════════════════════════════════════════ */
.error-main {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 8vw, 104px);
}

.error-page {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 620px;
  margin-inline: auto;
}

.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(88px, 17vw, 180px);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.05em;
  margin-bottom: 8px;
  background: linear-gradient(160deg, var(--ink) 18%, var(--gold) 52%, var(--gold-bright) 88%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* A losing tape under the code — reinforces the finance framing. */
.error-page__delta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 22px;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  background: rgba(194, 64, 47, 0.1);
  color: var(--down);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.error-page__title {
  font-size: clamp(26px, 4.2vw, 40px);
  font-weight: 600;
  letter-spacing: -0.032em;
  margin-bottom: 14px;
  text-wrap: balance;
}

.error-page__desc {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-2);
  margin-bottom: 28px;
  text-wrap: pretty;
}

.error-page__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: clamp(40px, 6vw, 64px);
}

.error-recent {
  text-align: left;
  padding-top: clamp(30px, 4vw, 42px);
  border-top: 1px solid var(--line);
}

/* ═══ 22. NEWSLETTER FORMS ════════════════════════════════════════════════ */
.newsletter-form__msg {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 14px;
  border-radius: var(--r-sm);
}

.newsletter-form__msg--success {
  background: rgba(15, 138, 95, 0.1);
  color: var(--up);
}

.newsletter-form__msg--error {
  background: rgba(194, 64, 47, 0.1);
  color: var(--down);
}

.newsletter-form__btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* ═══ 23. PAGINATION ══════════════════════════════════════════════════════ */
.navigation.pagination {
  margin-top: clamp(36px, 5vw, 60px);
  padding-top: clamp(26px, 3.4vw, 36px);
  border-top: 1px solid var(--line);
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding-inline: 13px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  /* Page numbers sit in fixed 40px cells — tabular digits keep them optically
     centred instead of drifting as the digit widths change. */
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  transition:
    background-color 0.2s var(--ease),
    color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}

.page-numbers:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.page-numbers.current {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.page-numbers.dots {
  border-color: transparent;
}

.page-numbers.dots:hover {
  color: var(--text-2);
}

/* ═══ 24. MOTION & RESPONSIVE ═════════════════════════════════════════════ */
/* Scroll-reveal. Elements start hidden only when JS is present to unhide them
   (main.js sets .js on <html>), so no-JS visitors always see content. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 1100px) {
  .single-layout {
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 32px;
  }

  .footer-top {
    grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
    row-gap: 36px;
  }

  /* With only three tracks the action tile wraps to row 2, where auto-placement
	   drops it in column 1 — its justify-self:end then ends it against the LEFT
	   column's edge, stranding it mid-footer. Pin it to the last track so it
	   stays right-aligned with the panel. */
  .footer-col--action {
    grid-column: -2 / -1;
  }
}

@media (max-width: 1000px) {
  .mosaic {
    grid-template-columns: minmax(0, 1fr);
  }

  .lead {
    min-height: clamp(340px, 54vw, 440px);
  }

  .mosaic__side {
    grid-template-rows: none;
  }

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

  /* The banner's dek costs vertical space the shorter banner can't spare at
	   this width — the headline and byline carry it on their own. Cascades to
	   mobile too. */
  .highlight__excerpt {
    display: none;
  }

  .popular__lead {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  /* Tablet has room for a 2x2 — this is the one width where the fourth mini
	   is shown, so the grid fills out evenly instead of leaving a gap. */
  .popular__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
  }

  .popular__row .mini:nth-child(4) {
    display: grid;
  }

  .archive-lead {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

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

@media (max-width: 900px) {
  /* Nav collapses into a slide-down panel. Logo goes hard left, burger hard
	   right — the standard mobile arrangement. */
  .masthead {
    justify-content: space-between;
    padding-block: 14px;
    /* Room for the absolutely-positioned burger at the right edge. */
    padding-right: 52px;
  }

  .masthead__brand {
    justify-content: flex-start;
  }

  .masthead__brand .custom-logo {
    max-width: 100%;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-primary {
    border-top: 0;
  }

  .nav-inner {
    min-height: 0;
    display: block;
  }

  .nav-menu {
    display: none;
    border-top: 1px solid var(--line);
    padding-block: 8px 16px;
  }

  .nav-menu.is-open {
    display: block;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-list li {
    border-bottom: 1px solid var(--line);
  }

  .nav-list li:last-child {
    border-bottom: 0;
  }

  .nav-list a {
    display: block;
    padding: 14px 4px;
    font-size: 12.5px;
  }

  .nav-list a::after {
    display: none;
  }

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

  .single-sidebar {
    position: static;
    top: auto;
  }

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

@media (max-width: 700px) {
  :root {
    --gutter: 18px;
    --r-xl: 22px;
    --r-lg: 16px;
  }

  /* Back to a single column and three cards — the fourth mini is tablet-only. */
  .popular__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .popular__row .mini:nth-child(4) {
    display: none;
  }

  /* Once the row is a single column the cards are full-bleed, so the thumb
	   stacks above the copy rather than sitting beside it — a side-by-side
	   thumb at this width leaves the headline in a cramped half-column. */
  .mini {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .mini__media {
    aspect-ratio: 16 / 9;
  }

  .hero__search {
    flex-direction: column;
    align-items: stretch;
  }

  .searchbar {
    padding-right: 18px;
  }

  .searchbar__btn {
    display: none;
  }

  /* On phones the search submit becomes a full-width button below the field. */
  .hero__search .btn--search-mobile {
    display: inline-flex;
    width: 100%;
  }

  .grid-4,
  .grid-3,
  .grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Two columns on phones: the link lists are short enough to sit side by
	   side, which saves a lot of vertical scroll. The brand and the action tile
	   span both tracks. */
  .footer-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 20px;
  }

  /* Brand is centred and full width above the two link columns. */
  .footer-brand {
    grid-column: 1 / -1;
    align-items: center;
    text-align: center;
    padding-left: 0;
  }

  .footer-brand__desc {
    max-width: 40ch;
  }

  /* The accent tick reads as a stray mark when the column is centred. */
  .footer-brand__rule {
    display: none;
  }

  .footer-brand__logo img {
    height: 40px;
  }

  .footer-brand__name {
    font-size: 28px;
  }

  /* Full width once the columns collapse — capped and right-aligned it reads
	   as stranded in the corner rather than as a deliberate action. */
  .footer-col--action {
    grid-column: 1 / -1;
    justify-self: stretch;
    max-width: none;
  }

  .footer-top-link {
    aspect-ratio: auto;
    min-height: 96px;
  }

  .footer-bottom {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 10px;
    /* The curve clearance is applied on one side only, which would throw the
	     centred stack off-axis. Pad both sides equally instead so the text sits
	     truly centred while still clearing the bottom-right sweep. */
    padding-right: 0;
    padding-inline: var(--st-footer-curve);
  }

  .footer-legal {
    justify-content: center;
  }

  .cta__row {
    flex-direction: column;
    align-items: stretch;
    padding: 8px;
    border-radius: var(--r-lg);
  }

  .cta__row .newsletter-form__input {
    padding: 12px 12px;
  }

  .cta__row .btn {
    width: 100%;
  }

  .sec-head {
    flex-wrap: wrap;
  }

  .article-header__meta {
    gap: 10px;
  }

  .panel {
    padding: 20px;
  }

  .entry-content {
    font-size: 16px;
  }
}

@media (max-width: 560px) {
  /* Digest / hcard rows stack their thumb above the copy. (.mini already
	   stacked at the 700px breakpoint, with the rest of the Popular band.) */
  .digest,
  .hcard {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .digest__media,
  .hcard__media {
    aspect-ratio: 16 / 9;
  }

  .digest__title,
  .hcard__title,
  .mini__title {
    -webkit-line-clamp: 3;
  }

  /* The lead card hides its badge at this width, so the copy can run the full
	   width of the card. */
  .lead__body {
    padding-right: clamp(18px, 5vw, 24px);
  }

  /* The highlight banner KEEPS its badge, so its copy still has to clear the
	   notch — dropping this to the plain gutter runs the headline under it. The
	   byline is the last line, so only it needs the full inset. */
  .highlight__body {
    padding-right: clamp(18px, 5vw, 24px);
    padding-bottom: calc(var(--notch) - 34px);
  }

  /* The dek costs more vertical space than it earns at this width — the
	   headline and byline carry the card on their own. */
  .lead__excerpt {
    display: none;
  }

  /* The lead card's badge would sit on top of its headline at this width, so
	   the notch goes too — otherwise the corner reads as an empty cut. The
	   highlight banner keeps its badge: it sits in a real notch below the copy
	   rather than floating over it, so there is nothing to collide with. */
  .lead-wrap .notch {
    display: none;
  }

  /* .lead__clip cuts the notch as a real hole (see .lead__clip above), so
	   hiding .notch alone would leave that hole empty and visible. Both the
	   mask and the shape() clip-path have to be cleared — whichever of the two
	   is doing the cutting in this browser — to fall back to a plain corner. */
  .lead__clip {
    mask: none;
    clip-path: none;
    border-radius: var(--r-xl);
  }

  .arrow-badge--lg {
    width: 48px;
    height: 48px;
  }

  .loop {
    border-radius: var(--r-lg);
  }

  .error-page__code {
    font-size: clamp(74px, 26vw, 110px);
  }
}

/* Search submit is desktop-only inside the pill; the mobile twin is hidden
   until the 700px breakpoint above reveals it. */
.btn--search-mobile {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .loop__track {
    animation: none !important;
  }
}

@media print {
  .site-header,
  .site-footer,
  .cta,
  .single-sidebar,
  .related,
  .article-nav,
  .read-progress {
    display: none !important;
  }

  body {
    font-size: 12pt;
  }

  /* Never carry the reveal's hidden state into print. */
  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}