/*!
Theme Name: The Correspondent
Theme URI: http://underscores.me/
Author: Khawar Mehfooz
Author URI: https://khawarmehfooz.com
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: the-correspondent
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

The Correspondent is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* 
   THE CORRESPONDENT — Design System
   WordPress Editorial News Publication
   Sections:
     1.  Font Imports & Design Tokens (:root)
     2.  CSS Reset & Base
     3.  Typography Utilities
     4.  Layout Primitives
     5.  Prose / Article Content
         5a. Scope container
         5b. Headings (h1–h6)
         5c. Paragraphs & lead
         5d. Strong, em, mark, abbr, del, ins
         5e. Links
         5f. Blockquotes
         5g. Pull quotes
         5h. Ordered lists
         5i. Unordered lists
         5j. Definition lists
         5k. Tables
         5l. Figures & captions
         5m. Inline code
         5n. Code blocks (pre)
         5o. Horizontal rules
         5p. Adjacent-element spacing fixes
     6.  Post Header
     7.  Byline & Author Card
     8.  Badges & Taxonomy Labels
     9.  Post Cards
    10.  Site Navigation, Header & Footer
    11.  Pagination & Series Navigation
    12.  Accessibility & Utility States
    13.  Responsive Overrides
    */

/* 
   1. FONT IMPORTS & DESIGN TOKENS
    */

@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,600&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap");

:root {
  /*  Backgrounds  */
  --color-bg: #faf8f5; /* Warm paper white */
  --color-surface: #f2ede4; /* Cards, sidebar, raised surfaces */
  --color-sunken: #e8e0d4; /* Tables, code blocks, input fields */

  /*  Text                          */
  --color-text-primary: #1c1714; /* ~16:1 on bg — body copy, headlines */
  --color-text-secondary: #4d3f37; /* ~8:1 on bg — secondary body copy */
  --color-text-muted: #7a6358; /* ~5.3:1 on bg — captions, timestamps */

  /*   Accent: Burnt Sienna                       ─
     5.38:1 on --color-bg  ✓ WCAG AA (normal text)
     4.70:1 white-on-accent ✓ WCAG AA (normal text on colored bg)           */
  --color-accent: #a83d15;
  --color-accent-hover: #8c3211;
  --color-accent-muted: #c96a42; /* Decorative only — do not use for text */
  --color-accent-subtle: #f5ece6; /* Tinted background */
  --color-accent-border: #e2bba8; /* Accent-tinted border */

  /*   Secondary: Forest Teal                      ─
     6.18:1 on --color-bg  ✓ WCAG AA                                         */
  --color-secondary: #2e6058;
  --color-secondary-hover: #224a43;
  --color-secondary-subtle: #e6f0ee;
  --color-secondary-border: #9fc4bf;

  /*   Tertiary: Warm Amber                       ─
     5.73:1 on --color-bg  ✓ WCAG AA                                         */
  --color-tertiary: #7a5522;
  --color-tertiary-hover: #5c3f19;
  --color-tertiary-subtle: #f4ede0;
  --color-tertiary-border: #d4b98a;

  /*   Borders */
  --color-border: #d8cfc2; /* Default border */
  --color-border-muted: #eae4dc; /* Very subtle */
  --color-border-strong: #b5a899; /* Emphasis border */

  /*   Category Palette (each passes 4.5:1 on --color-bg)        ─ */
  --color-cat-technology: #2e6058; /* Forest Teal */
  --color-cat-business: #7a5522; /* Warm Amber */
  --color-cat-health: #3a6647; /* Muted Forest */
  --color-cat-politics: #4a3f7a; /* Muted Indigo */
  --color-cat-science: #2b5580; /* Muted Slate Blue */
  --color-cat-culture: #7a3b60; /* Muted Plum */
  --color-cat-environment: #2d6635; /* Deep Green */

  /*   Typography                              */
  --font-display: "DM Serif Display", Georgia, serif;
  --font-body: "Lora", Georgia, serif;
  --font-ui: "DM Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;

  /*   Type Scale (Major Third — 1.25 ratio)                 */
  --text-xs: 0.75rem; /*  12px — fine print, timestamps */
  --text-sm: 0.875rem; /*  14px — captions, labels, meta */
  --text-base: 1rem; /*  16px — base body */
  --text-md: 1.125rem; /*  18px — lead paragraph, large body */
  --text-lg: 1.25rem; /*  20px — card headlines, nav */
  --text-xl: 1.5rem; /*  24px — h4, subheadings */
  --text-2xl: 1.875rem; /*  30px — h3 in prose */
  --text-3xl: 2.25rem; /*  36px — h2 in prose */
  --text-4xl: 2.875rem; /*  46px — article h1 */
  --text-5xl: 3.5rem; /*  56px — homepage hero headline */
  --text-6xl: 4.5rem; /*  72px — max display */

  /*   Line Heights                             */
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;
  --leading-loose: 1.85;

  /*   Letter Spacing                            */
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.12em;

  /*   Spacing (4px base unit)                        */
  --space-1: 0.25rem; /*  4px */
  --space-2: 0.5rem; /*  8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */
  --space-20: 5rem; /* 80px */
  --space-24: 6rem; /* 96px */

  /*   Layout                               ─ */
  --content-width: 76ch; /* Article prose column (~65 CPL — optimal reading) */
  --content-wide: 90ch; /* Breakout elements: figures, tables, code */
  --content-full: 1240px; /* Max site width */
  --sidebar-width: 288px;
  --gutter: clamp(1rem, 4vw, 2rem);

  /*   Borders                                */
  --border-thin: 1px solid var(--color-border);
  --border-medium: 2px solid var(--color-border);
  --border-strong: 2px solid var(--color-border-strong);
  --border-accent: 3px solid var(--color-accent);
  --border-secondary: 3px solid var(--color-secondary);
  --border-tertiary: 3px solid var(--color-tertiary);

  /*   Radius                               ─ */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /*   Shadows                                */
  --shadow-sm: 0 1px 3px rgba(28, 23, 20, 0.08);
  --shadow-md: 0 4px 12px rgba(28, 23, 20, 0.1);
  --shadow-lg: 0 8px 28px rgba(28, 23, 20, 0.13);
  --shadow-card: 0 2px 8px rgba(28, 23, 20, 0.07);

  /*   Transitions                              */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 380ms ease;

  /*   Breakpoints (used as reference — media queries use raw values)     */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

/*   
   2. CSS RESET & BASE
      */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  hanging-punctuation: first last;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
}

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

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

p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
blockquote,
figure,
table,
pre {
  max-width: 100%;
}

ul {
  list-style-position: outside;
}

a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-accent-hover);
}

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

table {
  border-collapse: collapse;
}

/*   
   3. TYPOGRAPHY UTILITIES
      */

/* Display headlines — used outside prose (homepage, section headers) */
.display-1 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-4xl), 6vw, var(--text-6xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.display-2 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 4.5vw, var(--text-5xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.display-3 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

/* Eyebrow — small-caps label above a headline */
.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  display: block;
}

/* Kicker — category/section label (secondary color variant of eyebrow) */
.kicker {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-secondary);
  display: block;
  text-decoration: none;
}

.kicker:hover {
  color: var(--color-secondary-hover);
}

/* Text color utilities */
.text-accent {
  color: var(--color-accent);
}
.text-secondary {
  color: var(--color-secondary);
}
.text-muted {
  color: var(--color-text-muted);
}
.text-primary {
  color: var(--color-text-primary);
}

/*   
   4. LAYOUT PRIMITIVES
      */

/* Constrain to site max-width */
.site-wrapper {
  max-width: var(--content-full);
  margin-inline: auto;
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
  padding-inline: var(--gutter);
}

/* Article prose column */
.content-column {
  max-width: var(--content-width);
  margin-inline: auto;
}

/* Wider column for breakout elements */
.content-wide {
  max-width: var(--content-wide);
  margin-inline: auto;
}

/* Two-column: article + sidebar */
.prose-grid {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-width);
  gap: var(--space-12);
  align-items: start;
}

/* Vertical stack with consistent gap */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Horizontal flex wrap — badges, tags, meta */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* Card grids */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr));
  gap: var(--space-8);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--space-6);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--space-6);
}

/* Responsive table wrapper */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-block: var(--space-8);
  border-radius: var(--radius-md);
  border: var(--border-thin);
}

.table-scroll > table {
  margin-block: 0;
  border: none;
  border-radius: 0;
}

/* Horizontal divider with spacing */
.divider {
  border: none;
  border-top: var(--border-thin);
  margin-block: var(--space-8);
}

/*   
   5. PROSE / ARTICLE CONTENT
   All WordPress post.content.rendered is dropped inside .prose.
   No class injection needed — styles target bare HTML elements.
      */

/* 5a — Scope container                          ─ */

.prose {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
}

/* 5b — Headings                              ─ */

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  color: var(--color-text-primary);
  scroll-margin-top: var(--space-8);
}

.prose h1 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 5vw, var(--text-4xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-4);
}

.prose h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-thin);
}

.prose h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  margin-top: var(--space-10);
  margin-bottom: var(--space-3);
}

.prose h4 {
  font-family: var(--font-ui);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-normal);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.prose h5 {
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-normal);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-top: var(--space-8);
  margin-bottom: var(--space-2);
}

.prose h6 {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

/* 5c — Paragraphs & lead paragraph                      */

.prose p {
  margin-bottom: var(--space-6);
}

.prose p:last-child {
  margin-bottom: 0;
}

/* Lead paragraph — applied to .lead class or first <p> */
.prose .lead,
.prose p.lead {
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--color-text-secondary);
  font-weight: 400;
  margin-bottom: var(--space-8);
}

/* 5d — Inline text elements                        ─ */

.prose strong {
  font-weight: 600;
  color: var(--color-text-primary);
}

.prose em {
  font-style: italic;
}

/* Warm amber highlight — not harsh yellow */
.prose mark {
  background-color: var(--color-tertiary-subtle);
  color: var(--color-tertiary);
  padding: 0.05em 0.25em;
  border-radius: var(--radius-sm);
  font-style: normal;
}

/* Dotted underline for abbreviations with tooltips */
.prose abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: help;
  color: var(--color-text-secondary);
}

.prose del {
  text-decoration: line-through;
  color: var(--color-text-muted);
  opacity: 0.8;
}

.prose ins {
  text-decoration: underline;
  text-decoration-color: var(--color-secondary);
  text-underline-offset: 3px;
  color: var(--color-text-primary);
}

.prose sup,
.prose sub {
  font-size: 0.75em;
  font-family: var(--font-ui);
}

.prose kbd {
  font-family: var(--font-mono);
  font-size: 0.8em;
  background-color: var(--color-surface);
  color: var(--color-text-secondary);
  padding: 0.1em 0.4em;
  border: var(--border-thin);
  border-bottom: 2px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* 5e — Links in prose                           ─ */

.prose a {
  color: var(--color-accent);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(168, 61, 21, 0.35);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition:
    text-decoration-color var(--transition-fast),
    color var(--transition-fast);
}

.prose a:hover {
  color: var(--color-accent-hover);
  text-decoration-color: var(--color-accent);
}

/* 5f — Blockquotes                              */

.prose blockquote {
  border-left: var(--border-accent);
  padding: var(--space-4) var(--space-6);
  margin-block: var(--space-8);
  background-color: var(--color-surface);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.prose blockquote p {
  font-size: var(--text-md);
  font-style: italic;
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-2);
}

.prose blockquote p:last-of-type {
  margin-bottom: 0;
}

.prose blockquote cite {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}

.prose blockquote cite::before {
  content: "— ";
}

/* 5g — Pull quotes                              */

/* Applied as <figure class="pull-quote"> or <blockquote class="pull-quote"> */
.prose .pull-quote {
  margin-inline: calc(var(--space-10) * -1);
  padding: var(--space-8) var(--space-10);
  border-top: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  border-left: none;
  background-color: transparent;
  margin-block: var(--space-12);
  text-align: center;
  border-radius: 0;
}

.prose .pull-quote p {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-style: italic;
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
  margin-bottom: 0;
}

.prose .pull-quote cite {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: 600;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-top: var(--space-4);
}

.prose .pull-quote cite::before {
  content: none;
}

/* 5h — Ordered lists                             */

.prose ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-6);
  list-style-type: decimal;
}

.prose ol li {
  padding-left: var(--space-2);
  margin-bottom: var(--space-2);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
}

.prose ol li::marker {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--color-accent);
  font-size: 0.875em;
}

/* Nested ordered */
.prose ol ol {
  list-style-type: lower-alpha;
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

.prose ol ol ol {
  list-style-type: lower-roman;
}

/* 5i — Unordered lists                            */

.prose ul {
  padding-left: var(--space-6);
  margin-bottom: var(--space-6);
  list-style-type: none;
}

.prose ul li {
  padding-left: var(--space-4);
  margin-bottom: var(--space-2);
  line-height: var(--leading-relaxed);
  position: relative;
  color: var(--color-text-primary);
}

/* Burnt sienna disc bullet */
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent);
}

/* Hollow ring on second level */
.prose ul ul li::before {
  background-color: transparent;
  border: 1.5px solid var(--color-accent);
}

/* Diamond on third level */
.prose ul ul ul li::before {
  border-radius: 1px;
  transform: rotate(45deg);
  width: 5px;
  height: 5px;
  top: 0.7em;
  background-color: var(--color-text-muted);
  border: none;
}

/* Nested spacing */
.prose ul ul,
.prose ol ul {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

/* 5j — Definition lists                            */

.prose dl {
  margin-bottom: var(--space-6);
}

.prose dt {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-top: var(--space-4);
}

.prose dt:first-child {
  margin-top: 0;
}

.prose dd {
  padding-left: var(--space-6);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
  line-height: var(--leading-relaxed);
  border-left: 2px solid var(--color-border);
}

/* 5k — Tables                               ─ */

/* .prose table should be wrapped in .table-scroll for responsive overflow */

.prose table {
  width: 100%;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  border-collapse: collapse;
}

.prose thead {
  background-color: var(--color-sunken);
}

.prose thead th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-secondary);
  border-bottom: var(--border-medium);
  white-space: nowrap;
}

.prose thead th:first-child {
  border-radius: var(--radius-md) 0 0 0;
}
.prose thead th:last-child {
  border-radius: 0 var(--radius-md) 0 0;
}

.prose tbody tr {
  background-color: var(--color-bg);
  transition: background-color var(--transition-fast);
}

.prose tbody tr:nth-child(even) {
  background-color: var(--color-surface);
}

.prose tbody tr:hover {
  background-color: var(--color-accent-subtle);
}

.prose tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-thin);
  vertical-align: top;
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

.prose tbody tr:last-child td {
  border-bottom: none;
}

.prose tbody tr:last-child td:first-child {
  border-radius: 0 0 0 var(--radius-md);
}
.prose tbody tr:last-child td:last-child {
  border-radius: 0 0 var(--radius-md) 0;
}

.prose tfoot td {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  border-top: var(--border-medium);
  font-style: italic;
}

/* 5l — Figures & captions                         ─ */

.prose figure {
  margin-block: var(--space-10);
  margin-inline: calc(var(--space-6) * -1); /* slight bleed past prose column */
}

.prose figure img {
  width: 100%;
  border-radius: var(--radius-md);
  display: block;
}

.prose figcaption {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  padding-inline: var(--space-4);
  padding-block: var(--space-2);
  border-left: 2px solid var(--color-border);
}

/* 5m — Inline code                              */

.prose code:not(pre code) {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background-color: var(--color-sunken);
  color: var(--color-accent);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  border: var(--border-thin);
  white-space: nowrap;
}

/* 5n — Code blocks (pre > code)                      ─ */

.prose pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background-color: var(--color-sunken);
  color: var(--color-text-primary);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  border: var(--border-thin);
  overflow-x: auto;
  margin-block: var(--space-8);
  margin-inline: calc(var(--space-4) * -1); /* slight bleed */
  line-height: 1.6;
  tab-size: 2;
  -moz-tab-size: 2;
}

.prose pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
  white-space: pre;
  word-break: normal;
  overflow-wrap: normal;
}

/* Optional language label on pre elements with data-lang attribute */
.prose pre[data-lang]::before {
  display: block;
  content: attr(data-lang);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-thin);
}

/* 5o — Horizontal rules                          ─ */

.prose hr {
  border: none;
  height: 1px;
  background-color: var(--color-border);
  margin-block: var(--space-12);
  position: relative;
  overflow: visible;
}

/* Editorial three-dot section break */
.prose hr::after {
  content: "· · ·";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--color-bg);
  padding-inline: var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  letter-spacing: 0.5em;
  line-height: 1;
}

/* 5p — Adjacent-element spacing fixes                   ─ */

.prose h2 + p,
.prose h3 + p,
.prose h4 + p,
.prose h5 + p,
.prose h6 + p {
  margin-top: 0;
}

.prose p + ul,
.prose p + ol {
  margin-top: calc(var(--space-2) * -1);
}

.prose ul + p,
.prose ol + p,
.prose dl + p {
  margin-top: var(--space-2);
}

.prose blockquote + p {
  margin-top: var(--space-6);
}

.prose figure + p {
  margin-top: var(--space-6);
}

/*   
   6. POST HEADER
      */

.post-header {
  max-width: var(--content-width);
  margin-inline: auto;
  margin-bottom: var(--space-10);
}

.post-header__kicker {
  margin-bottom: var(--space-4);
}

.post-header__headline {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 5vw, var(--text-4xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-5);
}

.post-header__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--color-text-secondary);
  font-weight: 400;
  margin-bottom: var(--space-6);
}

.post-header__badges {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.post-header__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding-block: var(--space-4);
  border-top: var(--border-thin);
  border-bottom: var(--border-thin);
}

.post-header__date,
.post-header__reading-time {
  color: var(--color-text-muted);
}

.post-header__meta-sep {
  color: var(--color-border-strong);
  font-size: 0.7em;
  user-select: none;
}

.post-header__hero {
  margin-block: var(--space-8);
  margin-inline: calc(var(--space-8) * -1);
}

.post-header__hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
}

.post-header__caption {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  padding-inline: var(--space-4);
  border-left: 2px solid var(--color-border);
}

/*   
   7. BYLINE & AUTHOR CARD
      */

/*   Inline byline (within .post-header__meta)               */

.byline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-secondary);
  text-decoration: none;
}

.byline__avatar {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
}

.byline__name {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.byline__name:hover {
  color: var(--color-accent);
}

.byline__role {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: block;
}

/*   Full author card (article footer & author page)            */

.author-card {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-8);
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  border: var(--border-thin);
  margin-top: var(--space-12);
}

.author-card__avatar {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--color-border);
}

.author-card__info {
  flex: 1;
  min-width: 0;
}

.author-card__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text-primary);
  text-decoration: none;
  display: block;
  line-height: var(--leading-snug);
  transition: color var(--transition-fast);
}

.author-card__name:hover {
  color: var(--color-accent);
}

.author-card__role {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-top: var(--space-1);
  display: block;
}

.author-card__bio {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-3);
}

.author-card__social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.author-card__social-link {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--space-1) var(--space-3);
  border: var(--border-thin);
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}

.author-card__social-link:hover {
  color: var(--color-accent);
  border-color: var(--color-accent-border);
  background-color: var(--color-accent-subtle);
}

/* Compact variant — for two-author bylines */
.author-card--compact {
  padding: var(--space-5);
  gap: var(--space-4);
}

.author-card--compact .author-card__avatar {
  width: 48px;
  height: 48px;
}

.author-card--compact .author-card__name {
  font-size: var(--text-lg);
}

/*   
   8. BADGES & TAXONOMY LABELS
      */

/*   Base badge                             ─ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  vertical-align: middle;
}

/*   Article type badges (maps to ACF article_type field values)       */

.badge--article {
  background-color: var(--color-surface);
  color: var(--color-text-secondary);
  border: var(--border-thin);
}

.badge--opinion {
  background-color: var(--color-accent-subtle);
  color: var(--color-accent);
}

.badge--interview {
  background-color: var(--color-secondary-subtle);
  color: var(--color-secondary);
}

.badge--review {
  background-color: var(--color-tertiary-subtle);
  color: var(--color-tertiary);
}

.badge--guide {
  background-color: var(--color-sunken);
  color: var(--color-text-primary);
  border: var(--border-thin);
}

/*   Status badges                             */

/* Breaking news — pulsing white dot on burnt sienna bg */
.badge--breaking {
  background-color: var(--color-accent);
  color: #fff;
}

.badge--breaking::before {
  content: "";
  width: 6px;
  height: 6px;
  background-color: #fff;
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse-dot 1.5s ease-in-out infinite;
}

.badge--featured {
  background-color: var(--color-tertiary);
  color: #fff;
}

/*   Category/topic label (clickable)                   */

.category-label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  text-decoration: none;
  display: inline-block;
  transition: color var(--transition-fast);
}

/* Category-specific colors */
.category-label[data-category="technology"] {
  color: var(--color-cat-technology);
}
.category-label[data-category="business"] {
  color: var(--color-cat-business);
}
.category-label[data-category="health"] {
  color: var(--color-cat-health);
}
.category-label[data-category="politics"] {
  color: var(--color-cat-politics);
}
.category-label[data-category="science"] {
  color: var(--color-cat-science);
}
.category-label[data-category="culture"] {
  color: var(--color-cat-culture);
}
.category-label[data-category="environment"] {
  color: var(--color-cat-environment);
}

/*   Tag pills (taxonomy tags — clickable)                 */

.tag-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--space-1) var(--space-3);
  border: var(--border-thin);
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.tag-pill:hover {
  border-color: var(--color-accent-border);
  color: var(--color-accent);
  background-color: var(--color-accent-subtle);
}

/*   Series label                            ─ */

.series-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-secondary);
  text-decoration: none;
  padding: var(--space-1) var(--space-3);
  background-color: var(--color-secondary-subtle);
  border-radius: var(--radius-full);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: all var(--transition-fast);
}

.series-label:hover {
  background-color: var(--color-secondary);
  color: #fff;
}

/*   @keyframes for breaking badge pulse                ─ */

@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.8);
  }
}

/*   
   9. POST CARDS
      */

/*   Base card                               */

.post-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    box-shadow var(--transition-normal),
    transform var(--transition-normal);
  text-decoration: none;
  color: inherit;
}

.post-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.post-card__image-wrap {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color-surface);
  flex-shrink: 0;
}

.post-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
  display: block;
}

.post-card:hover .post-card__image {
  transform: scale(1.04);
}

.post-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.post-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.post-card__headline {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--space-3);
  transition: color var(--transition-fast);
}

.post-card:hover .post-card__headline,
.post-card__headline:hover {
  color: var(--color-accent);
}

.post-card__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--space-4);
  font-style: italic;
}

.post-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: var(--border-thin);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.post-card__byline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.post-card__author-avatar {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.post-card__author-name {
  font-weight: 500;
  color: var(--color-text-secondary);
}

.post-card__reading-time {
  color: var(--color-text-muted);
  white-space: nowrap;
}

/*   Featured hero card (homepage spotlight)              ─ */

.post-card--featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 420px;
}

.post-card--featured .post-card__image-wrap {
  aspect-ratio: auto;
  height: 100%;
}

.post-card--featured .post-card__body {
  padding: var(--space-10);
  justify-content: flex-end;
  background-color: var(--color-surface);
}

.post-card--featured .post-card__headline {
  font-size: var(--text-3xl);
  -webkit-line-clamp: 4;
}

.post-card--featured .post-card__subtitle {
  -webkit-line-clamp: 3;
}

/*   Horizontal card (sidebar / related posts)             ─ */

.post-card--horizontal {
  flex-direction: row;
  gap: 0;
  align-items: stretch;
}

.post-card--horizontal .post-card__image-wrap {
  width: 120px;
  aspect-ratio: auto;
  flex-shrink: 0;
}

.post-card--horizontal .post-card__body {
  padding: var(--space-4);
}

.post-card--horizontal .post-card__headline {
  font-size: var(--text-base);
  -webkit-line-clamp: 3;
  margin-bottom: var(--space-2);
}

.post-card--horizontal .post-card__subtitle,
.post-card--horizontal .post-card__footer {
  display: none;
}

/*   Minimal card (dense listing — no image)                */

.post-card--minimal {
  border-radius: 0;
  border: none;
  border-top: var(--border-thin);
  box-shadow: none;
}

.post-card--minimal:hover {
  box-shadow: none;
  transform: none;
  background-color: var(--color-surface);
}

.post-card--minimal .post-card__image-wrap {
  display: none;
}

.post-card--minimal .post-card__body {
  padding: var(--space-5) 0;
}

.post-card--minimal .post-card__headline {
  font-size: var(--text-lg);
  -webkit-line-clamp: 2;
}

/*   
   10. SITE NAVIGATION, HEADER & FOOTER
      */

/*   Site header                              */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(250, 248, 245, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: var(--border-thin);
}

.site-header__inner {
  max-width: var(--content-full);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: 64px;
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

/* Logo — DM Serif Display, accent mark on publication name */
.site-logo {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text-primary);
  text-decoration: none;
  letter-spacing: var(--tracking-tight);
  flex-shrink: 0;
  line-height: 1;
}

.site-logo__mark {
  color: var(--color-accent);
}

/* Primary navigation */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
}

.site-nav__link {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast);
  white-space: nowrap;
}

.site-nav__link:hover {
  color: var(--color-text-primary);
  background-color: var(--color-surface);
}

.site-nav__link--active {
  color: var(--color-accent);
  font-weight: 600;
}

/* Search button in nav */
.site-nav__search {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  border: var(--border-thin);
  background: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.site-nav__search:hover,
.site-nav__search[aria-expanded="true"] {
  color: var(--color-accent);
  border-color: var(--color-accent-border);
  background-color: var(--color-accent-subtle);
}

/* Header search panel */
.header-search {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-bg);
  border-bottom: var(--border-thin);
  box-shadow: var(--shadow-md);
  z-index: 99;
}

.header-search__inner {
  max-width: var(--content-full);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.header-search__inner .search-form {
  flex: 1;
  display: flex;
  gap: var(--space-2);
}

.header-search__inner .search-field {
  flex: 1;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-4);
  border: var(--border-medium);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text-primary);
  outline: none;
  transition: border-color var(--transition-fast);
}

.header-search__inner .search-field:focus {
  border-color: var(--color-accent);
}

.header-search__inner .search-submit {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-3) var(--space-6);
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast);
}

.header-search__inner .search-submit:hover {
  background: var(--color-accent-hover);
}

.header-search__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: var(--border-thin);
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.header-search__close:hover {
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
  background: var(--color-surface);
}

/* Mobile menu toggle button */
.site-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: auto;
  padding: 0;
  background: none;
  border: var(--border-thin);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.site-nav__toggle:hover {
  border-color: var(--color-accent-border);
  color: var(--color-accent);
}

/* Mobile menu toggle (JavaScript hook) */
.site-nav--open {
  display: flex;
}

/*   Breadcrumbs                              */

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.breadcrumb__link {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb__link:hover {
  color: var(--color-accent);
}

.breadcrumb__separator {
  color: var(--color-border-strong);
  font-size: 0.8em;
  user-select: none;
}

.breadcrumb__current {
  color: var(--color-text-secondary);
  font-weight: 500;
}

/*   Breaking news ticker                        ─ */

.breaking-ticker {
  background-color: var(--color-accent);
  color: #fff;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
}

.breaking-ticker__inner {
  max-width: var(--content-full);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.breaking-ticker__label {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-size: var(--text-xs);
  flex-shrink: 0;
  padding: var(--space-1) var(--space-2);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-sm);
}

.breaking-ticker__text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.breaking-ticker__link {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/*   Site footer                              */

.site-footer {
  background-color: var(--color-surface);
  border-top: var(--border-medium);
  padding-top: var(--space-12);
  padding-bottom: var(--space-8);
  margin-top: var(--space-20);
}

.site-footer__grid {
  max-width: var(--content-full);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-12);
}

.site-footer__brand {
}

.site-footer__logo {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text-primary);
  text-decoration: none;
  display: block;
  margin-bottom: var(--space-4);
}

.site-footer__about {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.site-footer__social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.site-footer__social-link {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.site-footer__social-link:hover {
  color: var(--color-accent);
}

.site-footer__heading {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-footer__nav-link {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.site-footer__nav-link:hover {
  color: var(--color-accent);
}

.site-footer__bottom {
  max-width: var(--content-full);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-top: var(--space-6);
  margin-top: var(--space-8);
  border-top: var(--border-thin);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.site-footer__copyright {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/*   
   11. PAGINATION & SERIES NAVIGATION
      */

/*   Standard pagination                          */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-16);
  font-family: var(--font-ui);
  flex-wrap: wrap;
}

.pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  border: var(--border-thin);
  background-color: var(--color-bg);
  transition: all var(--transition-fast);
}

.pagination__item:hover {
  border-color: var(--color-accent-border);
  color: var(--color-accent);
  background-color: var(--color-accent-subtle);
}

.pagination__item--active {
  background-color: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

.pagination__item--active:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: #fff;
}

.pagination__item--disabled {
  opacity: 0.38;
  pointer-events: none;
}

.pagination__prev,
.pagination__next {
  padding-inline: var(--space-4);
  gap: var(--space-2);
}

.pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  user-select: none;
  pointer-events: none;
}

/*   Series navigation                           */

.series-nav {
  background-color: var(--color-secondary-subtle);
  border: var(--border-thin);
  border-left: var(--border-secondary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-6);
  margin-block: var(--space-10);
}

.series-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.series-nav__label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-secondary);
}

.series-nav__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text-primary);
  text-decoration: none;
  margin-bottom: var(--space-4);
  display: block;
  transition: color var(--transition-fast);
}

.series-nav__title:hover {
  color: var(--color-secondary);
}

.series-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: series-counter;
}

.series-nav__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-bottom: var(--border-thin);
  counter-increment: series-counter;
}

.series-nav__item:last-child {
  border-bottom: none;
}

.series-nav__item::before {
  content: counter(series-counter);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-secondary);
  min-width: 1.5em;
  flex-shrink: 0;
}

.series-nav__link {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.series-nav__link:hover {
  color: var(--color-secondary);
}

.series-nav__link--current {
  font-weight: 600;
  color: var(--color-text-primary);
}

.series-nav__link--current::after {
  content: " ← you are here";
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 400;
}

/*   Article navigation (prev/next within series)            ─ */

.article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: var(--border-thin);
}

.article-nav__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.article-nav__item:hover {
  border-color: var(--color-accent-border);
  background-color: var(--color-accent-subtle);
}

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

.article-nav__direction {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
}

.article-nav__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  transition: color var(--transition-fast);
}

.article-nav__item:hover .article-nav__title {
  color: var(--color-accent);
}

/*   
   12. ACCESSIBILITY & UTILITY STATES
      */

/* Keyboard focus ring — single visible style for all interactive elements */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Remove focus ring for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* Skip-to-content link */
.skip-link {
  position: absolute;
  top: -60px;
  left: var(--space-4);
  background-color: var(--color-accent);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  z-index: 9999;
  text-decoration: none;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-4);
}

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

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/*   Page section utility spacing                    ─ */

.section {
  padding-block: var(--space-16);
}

.section--sm {
  padding-block: var(--space-10);
}
.section--lg {
  padding-block: var(--space-24);
}

.section__header {
  margin-bottom: var(--space-10);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.section__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
}

.section__link {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.section__link:hover {
  color: var(--color-accent-hover);
}

/*   Inline callout / info box                       */

.callout {
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  border: var(--border-thin);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin-block: var(--space-6);
}

.callout--info {
  background-color: var(--color-secondary-subtle);
  border-color: var(--color-secondary-border);
  color: var(--color-secondary);
}

.callout--warning {
  background-color: var(--color-tertiary-subtle);
  border-color: var(--color-tertiary-border);
  color: var(--color-tertiary);
}

.callout--accent {
  background-color: var(--color-accent-subtle);
  border-color: var(--color-accent-border);
  color: var(--color-accent);
}

.callout__title {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-xs);
  margin-bottom: var(--space-2);
}

/*   
   13. RESPONSIVE OVERRIDES
   All breakpoint overrides collected here (mobile-first).
      */

/*   ≥ 640px                                */
@media (min-width: 640px) {
  .prose figure {
    margin-inline: calc(var(--space-10) * -1);
  }
}

/*   < 640px                               ─ */
@media (max-width: 639px) {
  .prose table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .prose h2 {
    font-size: var(--text-2xl);
  }
  .prose h3 {
    font-size: var(--text-xl);
  }

  .prose .pull-quote {
    margin-inline: 0;
    padding: var(--space-6) var(--space-4);
  }

  .prose .pull-quote p {
    font-size: var(--text-xl);
  }

  .prose figure {
    margin-inline: 0;
  }

  .prose pre {
    margin-inline: 0;
    font-size: 0.8rem;
    padding: var(--space-4);
  }

  .post-header__hero {
    margin-inline: calc(var(--gutter) * -1);
  }

  .post-header__hero img {
    border-radius: 0;
  }

  .author-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .author-card__social {
    justify-content: center;
  }

  .article-nav {
    grid-template-columns: 1fr;
  }

  .article-nav__item--next {
    text-align: left;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/*   < 768px                                */
@media (max-width: 767px) {
  .site-nav {
    display: none; /* Toggled via .site-nav--open with JS */
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background-color: var(--color-bg);
    border-bottom: var(--border-medium);
    flex-direction: column;
    padding: var(--space-4) var(--gutter);
    gap: var(--space-1);
    box-shadow: var(--shadow-md);
  }

  .site-nav--open {
    display: flex;
  }

  .site-nav__toggle {
    display: flex;
  }

  .site-nav__link {
    width: 100%;
    padding: var(--space-3) var(--space-4);
  }

  .post-card--featured {
    grid-template-columns: 1fr;
  }

  .post-card--featured .post-card__image-wrap {
    aspect-ratio: 16 / 9;
    height: auto;
  }
}

/*   < 1024px                              ─ */
@media (max-width: 1023px) {
  .prose-grid {
    grid-template-columns: 1fr;
  }
}