/**
 * Overture Pro — assets/css/main.css
 *
 * Master stylesheet. Every rule that Tailwind cannot generate lives here.
 * Loaded after Google Fonts, after Tailwind CDN — so Tailwind utilities
 * take precedence unless we use specificity or !important deliberately.
 *
 * ─────────────────────────────────────────────────────────────────────
 *  SECTION INDEX
 * ─────────────────────────────────────────────────────────────────────
 *
 *  1.  GLOBALS          — CSS tokens, body noise, selection, scrollbar,
 *                         focus-visible accessibility outlines
 *  2.  GRID SYSTEM      — .system-grid, .system-cell (1px gap engine)
 *  3.  ARCHITECTURAL    — .crosshair, .bg-stripe, .nav-ruler
 *  4.  HOVER SYSTEMS    — .pro-hover, .accent-hover
 *  5.  ANIMATIONS       — @keyframes: barcode-scan, cursor-blink,
 *                         fade-up, progress-reveal
 *  6.  TYPOGRAPHY       — clamp scales: mega, hero, archive-hero,
 *                         featured, title
 *  7.  NAVIGATION       — Sticky header states, mobile menu overlay
 *                         (consolidates menu-mobile.php <style> block)
 *  8.  ARTICLE CONTENT  — .article-content prose: paragraphs, headings,
 *                         blockquotes, code, lists, figures, marks,
 *                         font-size data-attr toggle states
 *  9.  SINGLE POST UI   — TOC spy states, reading progress bar,
 *                         control bar, mobile share bar
 *  10. SEARCH           — <mark> highlight, refine bar
 *  11. PAGINATION       — .overture-pagination
 *  12. PRINT            — Clean print reset
 *
 * @package Overture_Pro
 */


/* ═══════════════════════════════════════════════════════════════════════════
   1. GLOBALS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1.1 CSS Custom Properties ────────────────────────────────────────────── */
/*
 * Design token mirror of the Tailwind config in functions.php.
 * Using CSS vars here lets us reference them in calc(), gradients,
 * and pseudo-elements that Tailwind utilities cannot reach.
 */

:root {
    /* Colour palette */
    --color-paper:  #F0F0EC;
    --color-ink:    #090909;
    --color-accent: #FF3300;
    --color-faded:  #B4B4AF;
    --color-desk:   #D9D9D6;

    /* Font stacks */
    --font-sans:  "Inter", system-ui, -apple-system, sans-serif;
    --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
    --font-mono:  "JetBrains Mono", "Courier New", Courier, monospace;

    /* Grid system */
    --grid-gap: 1px;

    /* Scrollbar width — JS writes this on load to prevent layout shift */
    --scrollbar-width: 0px;

    /* Transition presets */
    --snap:   80ms  linear;
    --brisk: 120ms  linear;
    --swift: 200ms  cubic-bezier(0.16, 1, 0.3, 1);
}


/* ── 1.2 Body Noise Texture (body::before) ────────────────────────────────── */
/*
 * A fixed full-viewport noise overlay that gives the paper surface
 * its analogue grain. Uses ::before so it never interferes with
 * layout or pointer events.
 *
 * The SVG data-URI encodes an feTurbulence fractalNoise filter at ~700 bytes.
 * fixed attachment ensures the grain doesn't scroll with the page.
 */

body {
    background-color: var(--color-desk); /* Shows behind the document wrapper */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body::before {
    content:  '';
    position: fixed;
    inset:    0;
    z-index:  0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size:   300px 300px;
    opacity: 1;
}

/* All page content must sit above the noise layer */
body > * {
    position: relative;
    z-index:  1;
}


/* ── 1.3 Global Text Selection ────────────────────────────────────────────── */

::selection {
    background-color: var(--color-ink);
    color:            var(--color-paper);
}

::-moz-selection {
    background-color: var(--color-ink);
    color:            var(--color-paper);
}


/* ── 1.4 Focus-Visible Accessibility Outlines ─────────────────────────────── */
/*
 * Replaces the browser default blue ring with a branded blueprint outline.
 * Only shown on keyboard focus (not mouse clicks) via :focus-visible.
 * The offset creates a visible gap over dark backgrounds.
 */

*:focus-visible {
    outline:        2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Remove default focus ring — we use focus-visible exclusively */
*:focus:not(:focus-visible) {
    outline: none;
}

/* Invert focus ring on dark backgrounds (inside .pro-hover active state) */
.pro-hover:hover *:focus-visible,
.pro-hover:focus-within *:focus-visible,
#overture-mobile-menu *:focus-visible {
    outline-color: var(--color-paper);
}


/* ── 1.5 Custom OS-Style Scrollbar ────────────────────────────────────────── */
/*
 * Webkit-only (Chrome, Safari, Edge). Firefox uses scrollbar-width/color.
 * Designed to match the blueprint aesthetic: thin, ink-coloured thumb,
 * paper track. Disappears when not scrolling via thin profile.
 */

::-webkit-scrollbar {
    width:  6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--color-paper);
    border-left: 1px solid rgba(9, 9, 9, 0.08);
}

::-webkit-scrollbar-thumb {
    background:    var(--color-ink);
    border-radius: 0; /* No radius — brutalist */
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent);
}

::-webkit-scrollbar-corner {
    background: var(--color-paper);
}

/* Firefox equivalent */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-ink) var(--color-paper);
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. GRID SYSTEM — The 1px Gap Engine
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * HOW IT WORKS:
 * .system-grid sets background-color: ink.
 * .system-cell sets background-color: paper.
 * The 1px gap between cells reveals the ink background — creating
 * seamless 1px borders without border properties, border-collapse,
 * or negative margins. The technique works across all display contexts.
 *
 * COLUMN LAYOUT:
 * The grid defaults to a single column on mobile, 12 columns on md+.
 * Tailwind col-span-N classes control each cell's width.
 * Calling templates are responsible for setting grid-template-columns
 * via Tailwind classes when a non-12 layout is needed.
 */

.system-grid {
    display:          grid;
    gap:              var(--grid-gap);
    background-color: var(--color-ink);
    width:            100%;
    position:         relative;
}

/* Auto 12-col layout when no explicit grid-cols class is present */
.system-grid:not([class*="grid-cols"]) {
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .system-grid:not([class*="grid-cols"]) {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
}

/* ── System Cell ─────────────────────────────────────────────────────────── */

.system-cell {
    background-color: var(--color-paper);
    position:         relative;
    min-width:        0; /* Prevents grid blowout from long unbreakable content */
}

/*
 * Nested system-grids inherit the gap and ink background automatically.
 * No additional selectors needed.
 */


/* ═══════════════════════════════════════════════════════════════════════════
   3. ARCHITECTURAL DETAILS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 3.1 Crosshair Registration Marks ─────────────────────────────────────── */
/*
 * Four-corner tic marks rendered via ::before + ::after.
 * Used on hero sections, bento grids, and featured card wrappers.
 * All four marks require two pseudo-elements — top pair on the element,
 * bottom pair on a .crosshair-bottom child or the same element if
 * the bottom marks use a separate utility.
 *
 * z-index: 10 ensures they render above .bg-stripe and barcode overlays.
 */

.crosshair {
    position: relative;
}

.crosshair::before,
.crosshair::after {
    content:  '';
    position: absolute;
    width:    14px;
    height:   14px;
    z-index:  10;
    pointer-events: none;
}

/* Top-left tic */
.crosshair::before {
    top:         -1px;
    left:        -1px;
    border-top:  1px solid var(--color-ink);
    border-left: 1px solid var(--color-ink);
}

/* Top-right tic */
.crosshair::after {
    top:          -1px;
    right:        -1px;
    border-top:   1px solid var(--color-ink);
    border-right: 1px solid var(--color-ink);
}

/* Bottom corners — applied with a companion class or directly */
.crosshair-bottom {
    position: relative;
}

.crosshair-bottom::before,
.crosshair-bottom::after {
    content:  '';
    position: absolute;
    width:    14px;
    height:   14px;
    z-index:  10;
    pointer-events: none;
}

.crosshair-bottom::before {
    bottom:       -1px;
    left:         -1px;
    border-bottom: 1px solid var(--color-ink);
    border-left:   1px solid var(--color-ink);
}

.crosshair-bottom::after {
    bottom:        -1px;
    right:         -1px;
    border-bottom: 1px solid var(--color-ink);
    border-right:  1px solid var(--color-ink);
}

/* Inverted crosshairs for dark-background contexts */
.crosshair-paper::before { border-top-color:   var(--color-paper); border-left-color:  var(--color-paper); }
.crosshair-paper::after  { border-top-color:   var(--color-paper); border-right-color: var(--color-paper); }


/* ── 3.2 Background Stripe / Noise ────────────────────────────────────────── */
/*
 * Paper surface with vertical rule lines every 24px + subtle noise overlay.
 * Applied to panels that need visual texture without dark colour fill.
 */

.bg-stripe {
    background-color: var(--color-paper);
    background-image:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent       23px,
            rgba(9,9,9,0.045) 23px,
            rgba(9,9,9,0.045) 24px
        ),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}


/* ── 3.3 Nav Ruler Strip ──────────────────────────────────────────────────── */
/*
 * Simulates measuring-tape tick marks using a repeating gradient.
 * Minor ticks every 12px (rgba 0.12), major ticks every 24px (rgba 0.28).
 * Applied to the flex-grow spacer inside the sticky header <nav>.
 */

.nav-ruler {
    background-image: repeating-linear-gradient(
        90deg,
        transparent,
        transparent        11px,
        rgba(9,9,9,0.12)   11px,
        rgba(9,9,9,0.12)   12px,
        transparent        12px,
        transparent        23px,
        rgba(9,9,9,0.28)   23px,
        rgba(9,9,9,0.28)   24px
    );
    background-size:  24px 100%;
    background-repeat: repeat-x;
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. HOVER SYSTEMS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 4.1 Pro Hover — Ink Flood ─────────────────────────────────────────────── */
/*
 * The signature interaction: the entire cell background flips from paper
 * to ink. All child text inherits the inversion to paper.
 * Transition is deliberately instant (linear, 120ms) — "mechanical" not "soft".
 */

.pro-hover {
    transition:
        background-color var(--brisk),
        color            var(--brisk);
    cursor: pointer;
}

.pro-hover:hover,
.pro-hover:focus-within {
    background-color: var(--color-ink);
    color:            var(--color-paper);
}

/* Push inversion through all child elements */
.pro-hover:hover *,
.pro-hover:focus-within * {
    border-color: rgba(240, 240, 236, 0.2) !important;
}

/* Accent text converts to paper on hover (not to accent-on-ink which is illegible) */
.pro-hover:hover .text-accent,
.pro-hover:focus-within .text-accent {
    color: var(--color-paper) !important;
}

/* Faded text lightens to paper/60 on hover */
.pro-hover:hover .text-faded,
.pro-hover:focus-within .text-faded {
    color: rgba(240, 240, 236, 0.55) !important;
}


/* ── 4.2 Accent Hover — Orange Flood ─────────────────────────────────────── */
/*
 * Secondary hover variant. Used for the featured-post right panel
 * and any cell that should call out in accent colour rather than ink.
 */

.accent-hover {
    transition:
        background-color var(--brisk),
        color            var(--brisk);
    cursor: pointer;
}

.accent-hover:hover,
.accent-hover:focus-within {
    background-color: var(--color-accent);
    color:            var(--color-paper);
}

.accent-hover:hover *,
.accent-hover:focus-within * {
    border-color: rgba(240, 240, 236, 0.25) !important;
}

.accent-hover:hover .text-ink,
.accent-hover:focus-within .text-ink {
    color: var(--color-paper) !important;
}

.accent-hover:hover .text-faded,
.accent-hover:focus-within .text-faded {
    color: rgba(240, 240, 236, 0.65) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. ANIMATIONS & KEYFRAMES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 5.1 Barcode Glitch ────────────────────────────────────────────────────── */
/*
 * Slow vertical oscillation applied to the .barcode-glitch decorative divs
 * inside featured cards and the menu overlay left panel.
 * Parent group:hover changes opacity via Tailwind — we only own the motion.
 */

@keyframes barcode-scan {
    0%   { transform: translateY(0);    }
    20%  { transform: translateY(-6px); }
    40%  { transform: translateY(2px);  }
    60%  { transform: translateY(-3px); }
    80%  { transform: translateY(4px);  }
    100% { transform: translateY(0);    }
}

.barcode-glitch {
    animation:  barcode-scan 6s ease-in-out infinite;
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .barcode-glitch { animation: none; }
}


/* ── 5.2 Cursor Blink ──────────────────────────────────────────────────────── */
/*
 * Terminal cursor blinking appended after the "SYS.NAV // OVERRIDE" label
 * in the mobile menu top bar. Also used on the 404 page CLI prompt.
 */

@keyframes cursor-blink {
    0%,  49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.cursor-blink::after {
    content:        '█';
    font-size:      0.6em;
    line-height:    1;
    margin-left:    2px;
    vertical-align: middle;
    animation:      cursor-blink 1s step-end infinite;
}

@media (prefers-reduced-motion: reduce) {
    .cursor-blink::after { animation: none; opacity: 1; }
}


/* ── 5.3 Fade-Up Entry ─────────────────────────────────────────────────────── */
/*
 * Subtle entry animation for content sections on first paint.
 * Applied to .article-content and archive section headers.
 * Short duration keeps it from feeling precious.
 */

@keyframes fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

.animate-fade-up {
    animation: fade-up 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .animate-fade-up { animation: none; }
}


/* ── 5.4 Progress Bar Reveal ──────────────────────────────────────────────── */

@keyframes progress-reveal {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. TYPOGRAPHY — Clamp Scales
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * All clamp() values follow the formula:
 *   clamp( MIN, PREFERRED-VW, MAX )
 *
 * MIN is sized for the smallest viewport where the class is used.
 * MAX prevents runaway type at ultra-wide breakpoints.
 * PREFERRED is calibrated so the type hits MAX at the document's
 * max-w-5xl boundary (~1024px).
 *
 * These CANNOT be generated by Tailwind CDN — they require custom config.
 */

/* Fullscreen nav overlay — largest type in the theme */
.clamp-mega {
    font-size:      clamp(2rem, 8.5vw, 4.75rem);
    line-height:    1.0;
    letter-spacing: -0.025em;
}

/* Homepage hero headline */
.clamp-hero {
    font-size:      clamp(2.5rem, 7.5vw, 5.75rem);
    line-height:    0.95;
    letter-spacing: -0.035em;
}

/* Archive page cinematic 3-line title */
.clamp-archive-hero {
    font-size:      clamp(1.75rem, 5.5vw, 4rem);
    line-height:    1.0;
    letter-spacing: -0.03em;
}

/* Featured card headline */
.clamp-featured {
    font-size:      clamp(1.625rem, 3.75vw, 3rem);
    line-height:    1.1;
    letter-spacing: -0.025em;
}

/* Split card and standard editorial headline */
.clamp-title {
    font-size:      clamp(1.25rem, 2.75vw, 2.25rem);
    line-height:    1.15;
    letter-spacing: -0.02em;
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. NAVIGATION
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 7.1 Sticky Header Scroll State ────────────────────────────────────────── */
/*
 * The header becomes fully opaque + drops a stronger shadow on scroll.
 * JS adds .is-scrolled to <header> when window.scrollY > 40.
 * (The JS module is inside assets/js/main.js initNavActiveState or can
 *  be added as a separate lightweight listener.)
 */

header.is-scrolled {
    box-shadow: 0 1px 0 0 var(--color-ink), 0 4px 16px rgba(9, 9, 9, 0.08);
}


/* ── 7.2 Active Nav Link ───────────────────────────────────────────────────── */
/*
 * Applied by JS in main.js (initNavActiveState) when a nav link's href
 * matches the current page URL. Supplements WP's aria-current="page".
 */

.is-active-nav-link {
    background-color: var(--color-accent) !important;
    color:            var(--color-paper)  !important;
}


/* ── 7.3 Mobile Menu Overlay ───────────────────────────────────────────────── */
/*
 * Consolidates the inline <style> block from template-parts/system/menu-mobile.php.
 * Moving these rules here removes render-blocking inline CSS from every page.
 *
 * State machine:
 *   Default (hidden): opacity 0, visibility hidden, translated -6px up
 *   .is-open:         opacity 1, visible, translated 0
 *
 * Transition uses cubic-bezier(0.16, 1, 0.3, 1) — fast attack, minimal
 * overshoot. Feels mechanical without being jarring.
 */

#overture-mobile-menu {
    transition:
        opacity    180ms cubic-bezier(0.16, 1, 0.3, 1),
        visibility 180ms cubic-bezier(0.16, 1, 0.3, 1),
        transform  180ms cubic-bezier(0.16, 1, 0.3, 1);
    opacity:    0;
    visibility: hidden;
    transform:  translateY(-6px) scale(0.997);
    will-change: opacity, transform;
}

#overture-mobile-menu.is-open {
    opacity:    1;
    visibility: visible;
    transform:  translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
    #overture-mobile-menu {
        transition: opacity 80ms linear, visibility 80ms linear;
        transform:  none !important;
    }
}

/* Nav item stagger — CSS custom property --item-index set per <li> in PHP */
.menu-item-fullscreen {
    opacity:   0;
    transform: translateX(-16px);
    transition:
        opacity   180ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--item-index, 1) * 45ms + 50ms);
}

#overture-mobile-menu.is-open .menu-item-fullscreen {
    opacity:   1;
    transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    .menu-item-fullscreen {
        transition: none;
        opacity:    1 !important;
        transform:  none !important;
    }
}

/* Fullscreen nav link — clamp typography */
.fullscreen-nav-link .nav-label {
    font-size:      clamp(2rem, 7.5vw, 4.5rem);
    line-height:    1.0;
    letter-spacing: -0.025em;
    color:          var(--color-paper);
    transition:     color var(--snap);
    font-family:    var(--font-serif);
    font-weight:    700;
    text-transform: uppercase;
}

.fullscreen-nav-link:hover .nav-label,
.fullscreen-nav-link:focus .nav-label {
    color: var(--color-accent);
}

.menu-item-fullscreen.is-current .fullscreen-nav-link .nav-label {
    color: var(--color-accent);
}

.menu-item-fullscreen.is-current .nav-index {
    color: rgba(255, 51, 0, 0.45);
}

/* Scanline texture overlay inside the menu */
.menu-scanlines {
    background-image: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent                    2px,
        rgba(240, 240, 236, 0.012)     2px,
        rgba(240, 240, 236, 0.012)     4px
    );
}

/* Body scroll lock — added by JS when menu opens */
body.menu-open {
    overflow:      hidden;
    padding-right: var(--scrollbar-width); /* Prevents layout shift */
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. ARTICLE CONTENT — Prose Styles
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * .article-content wraps the_content() output in single.php and page.php.
 * These rules create the reading experience: Playfair serif body,
 * Inter heading labels, JetBrains Mono code, and accent-colour links.
 *
 * Rules mirror editor-style.css so authors see what readers see.
 * Keep these two files in sync when updating typography.
 *
 * Font-size data attribute system (toggled by JS initFontToggle()):
 *   [data-font-size="default"] → 1.0625rem (~17px)
 *   [data-font-size="large"]   → 1.175rem  (~19px)
 *   [data-font-size="xlarge"]  → 1.3125rem (~21px)
 */

/* ── Base ────────────────────────────────────────────────────────────────── */

.article-content {
    font-family:    var(--font-serif);
    font-size:      1.0625rem;
    line-height:    1.8;
    color:          var(--color-ink);
    animation:      fade-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.article-content[data-font-size="large"]  { font-size: 1.175rem;   }
.article-content[data-font-size="xlarge"] { font-size: 1.3125rem;  }

/* ── Paragraphs ──────────────────────────────────────────────────────────── */

.article-content p {
    margin-top:    0;
    margin-bottom: 1.3em;
    max-width:     70ch;
}

/* First paragraph after a heading — no top margin needed */
.article-content h2 + p,
.article-content h3 + p,
.article-content h4 + p {
    margin-top: 0;
}

/* Drop cap on first paragraph of post (opt-in via .has-drop-cap on <p>) */
.article-content .has-drop-cap::first-letter {
    font-family:  var(--font-sans);
    font-weight:  900;
    font-size:    4.5em;
    line-height:  0.82;
    float:        left;
    margin-right: 0.1em;
    margin-top:   0.06em;
    color:        var(--color-ink);
    text-transform: uppercase;
}

/* ── Headings — H2 ───────────────────────────────────────────────────────── */

.article-content h2 {
    font-family:    var(--font-sans);
    font-size:      1.125rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height:    1.2;
    color:          var(--color-ink);
    margin-top:     2.5rem;
    margin-bottom:  0.875rem;
    padding-bottom: 0.5rem;
    border-bottom:  1px solid var(--color-ink);
}

/* ── Headings — H3 ───────────────────────────────────────────────────────── */

.article-content h3 {
    font-family:    var(--font-sans);
    font-size:      0.9375rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height:    1.25;
    color:          var(--color-ink);
    margin-top:     2rem;
    margin-bottom:  0.625rem;
}

/* ── Headings — H4 / H5 / H6 ────────────────────────────────────────────── */

.article-content h4,
.article-content h5,
.article-content h6 {
    font-family:  var(--font-sans);
    font-weight:  600;
    line-height:  1.3;
    color:        var(--color-ink);
    margin-top:   1.75rem;
    margin-bottom: 0.5rem;
}

.article-content h4 { font-size: 0.9375rem; letter-spacing: 0.02em; }
.article-content h5 { font-size: 0.875rem;  opacity: 0.8; }
.article-content h6 { font-size: 0.8125rem; opacity: 0.7; }

/* ── Blockquote ──────────────────────────────────────────────────────────── */

.article-content blockquote {
    position:      relative;
    font-style:    italic;
    font-family:   var(--font-serif);
    font-size:     1.125em;
    line-height:   1.7;
    color:         var(--color-ink);
    border-left:   3px solid var(--color-accent);
    padding-left:  1.375rem;
    margin-left:   0;
    margin-right:  0;
    margin-top:    2rem;
    margin-bottom: 2rem;
}

.article-content blockquote p {
    margin-bottom: 0.5em;
}

/* Blockquote citation */
.article-content blockquote cite,
.article-content blockquote footer {
    display:        block;
    font-family:    var(--font-mono);
    font-style:     normal;
    font-size:      0.6875rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--color-faded);
    margin-top:     0.75rem;
}

.article-content blockquote cite::before {
    content: '— ';
}

/* ── Lists ───────────────────────────────────────────────────────────────── */

.article-content ul,
.article-content ol {
    font-family:   var(--font-serif);
    padding-left:  1.625rem;
    margin-top:    0;
    margin-bottom: 1.25em;
    max-width:     70ch;
}

.article-content li {
    margin-bottom: 0.4em;
    line-height:   1.7;
}

/* Unordered list — accent arrow marker */
.article-content ul {
    list-style: none;
    padding-left: 1.25rem;
}

.article-content ul li {
    position: relative;
    padding-left: 1rem;
}

.article-content ul li::before {
    content:     '▸';
    position:    absolute;
    left:        -0.25rem;
    color:       var(--color-accent);
    font-size:   0.75em;
    line-height: 1.9;
}

/* Ordered list — bold mono counter */
.article-content ol {
    counter-reset: article-ol;
    list-style:    none;
    padding-left:  1.75rem;
}

.article-content ol li {
    counter-increment: article-ol;
    position:          relative;
    padding-left:      0.5rem;
}

.article-content ol li::before {
    content:        counter(article-ol, decimal-leading-zero) '.';
    position:       absolute;
    left:           -1.75rem;
    width:          1.625rem;
    text-align:     right;
    font-family:    var(--font-mono);
    font-size:      0.625rem;
    font-weight:    700;
    color:          var(--color-faded);
    line-height:    2.2;
    letter-spacing: 0.02em;
}

/* Nested lists */
.article-content ul ul,
.article-content ol ol,
.article-content ul ol,
.article-content ol ul {
    margin-top:    0.4em;
    margin-bottom: 0.4em;
}

/* ── Code Blocks ─────────────────────────────────────────────────────────── */

/* Inline code */
.article-content code {
    font-family:    var(--font-mono);
    font-size:      0.8125em;
    font-weight:    500;
    background-color: var(--color-ink);
    color:          var(--color-paper);
    padding:        0.1em 0.4em;
    border-radius:  0;
    white-space:    nowrap;
}

/* Block code */
.article-content pre {
    font-family: var(--font-mono);
    font-size:   0.8125rem;
    line-height: 1.65;
    background-color: var(--color-ink);
    color:       var(--color-paper);
    padding:     1.25rem 1.5rem;
    overflow-x:  auto;
    margin-top:  0;
    margin-bottom: 2rem;
    tab-size:    4;
}

.article-content pre code {
    background: none;
    padding:    0;
    color:      inherit;
    font-size:  inherit;
    white-space: pre;
}

/* ── Mark / Highlight ────────────────────────────────────────────────────── */
/*
 * <mark> used in two contexts:
 *   (a) search.php — highlights search query terms in results
 *   (b) any <mark> in article body content
 *
 * Uses a translucent accent tint rather than opaque yellow,
 * maintaining text legibility over the paper background.
 */

.article-content mark,
mark {
    background-color: rgba(255, 51, 0, 0.15);
    color:            var(--color-ink);
    padding:          0.05em 0.2em;
    border-radius:    0;
}

/* Inside dark contexts (pro-hover active, menu) — invert */
.pro-hover:hover mark,
.pro-hover:focus-within mark {
    background-color: rgba(255, 51, 0, 0.35);
    color:            var(--color-paper);
}

/* ── Links ───────────────────────────────────────────────────────────────── */

.article-content a {
    color:                  var(--color-ink);
    text-decoration:        underline;
    text-decoration-color:  var(--color-accent);
    text-decoration-thickness: 1px;
    text-underline-offset:  3px;
    transition:             color var(--snap);
}

.article-content a:hover,
.article-content a:focus-visible {
    color:               var(--color-accent);
    text-decoration:     none;
}

/* ── Horizontal Rule ─────────────────────────────────────────────────────── */

.article-content hr {
    border:        none;
    border-top:    1px solid var(--color-ink);
    margin-top:    2.5rem;
    margin-bottom: 2.5rem;
    max-width:     100%;
}

/* Three-dot separator variant */
.article-content hr.has-dots {
    border:      none;
    text-align:  center;
}

.article-content hr.has-dots::after {
    content:        '· · ·';
    font-family:    var(--font-mono);
    font-size:      0.75rem;
    letter-spacing: 0.6em;
    color:          var(--color-faded);
}

/* ── Tables ──────────────────────────────────────────────────────────────── */

.article-content table {
    font-family:     var(--font-mono);
    font-size:       0.8125rem;
    width:           100%;
    border-collapse: collapse;
    margin-bottom:   2rem;
}

.article-content th {
    font-family:    var(--font-sans);
    font-size:      0.625rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background:     var(--color-ink);
    color:          var(--color-paper);
    padding:        0.5rem 0.75rem;
    text-align:     left;
    border:         none;
}

.article-content td {
    padding:       0.5rem 0.75rem;
    border-bottom: 1px solid rgba(9, 9, 9, 0.12);
    vertical-align: top;
}

.article-content tr:hover td {
    background-color: rgba(9, 9, 9, 0.025);
}

/* ── Images & Figures ────────────────────────────────────────────────────── */

.article-content img {
    max-width:    100%;
    height:       auto;
    display:      block;
    margin-block: 2rem;
}

.article-content figure {
    margin-left:  0;
    margin-right: 0;
    margin-block: 2rem;
}

.article-content figure img {
    margin-block: 0;
}

.article-content figcaption {
    font-family:    var(--font-mono);
    font-size:      0.6875rem;
    font-weight:    400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          var(--color-faded);
    margin-top:     0.625rem;
    line-height:    1.45;
}

/* ── Alignment Utilities (Gutenberg block alignment) ─────────────────────── */

.article-content .alignleft  { float: left;  margin-right: 1.5rem; margin-bottom: 1rem; }
.article-content .alignright { float: right; margin-left:  1.5rem; margin-bottom: 1rem; }
.article-content .aligncenter {
    display:     block;
    margin-left:  auto;
    margin-right: auto;
    text-align:  center;
}

.article-content .alignwide {
    margin-left:  -2rem;
    margin-right: -2rem;
}

@media (max-width: 767px) {
    .article-content .alignleft,
    .article-content .alignright {
        float:        none;
        margin-left:  0;
        margin-right: 0;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   9. SINGLE POST UI COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 9.1 Table of Contents — Active / Inactive States ────────────────────── */
/*
 * Toggled by JS initTocSpy() via IntersectionObserver.
 * .toc-active   → current visible heading
 * .toc-inactive → all other headings
 */

.toc-list {
    list-style: none;
    padding:    0;
    margin:     0;
}

.toc-list a {
    display:         block;
    font-family:     var(--font-mono);
    font-size:       0.625rem;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.07em;
    line-height:     1.4;
    color:           var(--color-faded);
    padding:         0.4rem 0.75rem;
    border-left:     2px solid transparent;
    transition:
        color        100ms linear,
        border-color 100ms linear;
    text-decoration: none;
}

.toc-list a.toc-active {
    color:            var(--color-ink);
    border-left-color: var(--color-accent);
}

.toc-list a.toc-inactive {
    color:            var(--color-faded);
    border-left-color: transparent;
}

.toc-list a:hover,
.toc-list a:focus-visible {
    color:             var(--color-ink);
    border-left-color: rgba(9, 9, 9, 0.25);
}

/* Nested TOC items (H3 under H2) */
.toc-list .toc-depth-2 a {
    padding-left: 1.375rem;
    font-size:    0.5625rem;
    opacity:      0.75;
}


/* ── 9.2 Reading Progress Bar ─────────────────────────────────────────────── */
/*
 * A 2px accent bar at the very top of single post pages.
 * width% is written directly by JS initProgressBar() on scroll.
 * The bar container spans full width behind the sticky header.
 */

#overture-progress-bar-container {
    position:   fixed;
    top:        0;
    left:       0;
    right:      0;
    height:     2px;
    z-index:    1000;
    background: rgba(9, 9, 9, 0.08);
    animation:  progress-reveal 600ms ease both;
    animation-delay: 400ms;
}

#overture-progress-bar {
    height:           100%;
    width:            0%;
    background-color: var(--color-accent);
    transition:       width 80ms linear;
    will-change:      width;
}


/* ── 9.3 Mobile Sticky Share Bar ─────────────────────────────────────────── */
/*
 * Slides up from the bottom of the viewport after user scrolls 200px.
 * JS adds .is-visible. Only visible on mobile (hidden sm:hidden in markup).
 */

#overture-mobile-share-bar {
    transform:  translateY(100%);
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

#overture-mobile-share-bar.is-visible {
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    #overture-mobile-share-bar {
        transition: opacity 120ms linear;
        transform:  none;
        opacity:    0;
    }
    #overture-mobile-share-bar.is-visible {
        opacity: 1;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   10. SEARCH — Mark Highlights & Refine Bar
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * <mark class="bg-accent/20 text-ink px-0.5"> is injected by the PHP
 * search highlighting logic (content-row.php, search.php). The Tailwind
 * bg-accent/20 utility may not generate correctly on CDN — we define
 * the fallback here to ensure highlights always render.
 */

mark.bg-accent\/20 {
    background-color: rgba(255, 51, 0, 0.18) !important;
    color:            var(--color-ink)        !important;
}

/* Ensure marks inside the system-grid rows are visible */
.system-cell mark,
.system-cell mark.bg-accent\/20 {
    background-color: rgba(255, 51, 0, 0.18);
    color:            var(--color-ink);
    padding:          0 0.2em;
}


/* ═══════════════════════════════════════════════════════════════════════════
   11. PAGINATION
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * Wraps WP's the_posts_pagination() output.
 * The nav element rendered by WP has class "pagination" — we override
 * that via our wrapper class .overture-pagination set in the 'class' arg.
 */

.overture-pagination {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.375rem;
    align-items: center;
}

.overture-pagination .page-numbers {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    font-family:     var(--font-mono);
    font-size:       0.625rem;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.08em;
    color:           var(--color-ink);
    padding:         0.375rem 0.625rem;
    min-width:       2rem;
    border:          1px solid var(--color-ink);
    text-decoration: none;
    transition:
        background-color var(--snap),
        color            var(--snap);
}

.overture-pagination .page-numbers:hover,
.overture-pagination .page-numbers:focus-visible {
    background-color: var(--color-ink);
    color:            var(--color-paper);
}

.overture-pagination .page-numbers.current {
    background-color: var(--color-ink);
    color:            var(--color-paper);
    cursor:           default;
}

.overture-pagination .page-numbers.dots {
    border-color: transparent;
    cursor:       default;
}

.overture-pagination .page-numbers.dots:hover {
    background-color: transparent;
    color:            var(--color-ink);
}

/* Prev / Next links */
.overture-pagination .prev.page-numbers,
.overture-pagination .next.page-numbers {
    letter-spacing: 0.04em;
    padding-inline: 0.875rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   12. PRINT
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {

    /* Suppress chrome */
    body::before,
    header,
    footer,
    #overture-mobile-menu,
    #overture-progress-bar-container,
    #overture-mobile-share-bar,
    .overture-control-bar,
    .overture-pagination,
    aside,
    nav {
        display: none !important;
    }

    /* Reset colours */
    body,
    .system-cell,
    .article-content {
        background: #fff !important;
        color:      #000 !important;
        box-shadow: none !important;
    }

    /* Expand to fill */
    .w-full.max-w-5xl {
        max-width: 100% !important;
        border:    none !important;
        box-shadow: none !important;
    }

    .article-content {
        max-width:  100%;
        font-size:  11pt;
        line-height: 1.65;
    }

    /* Print link URLs */
    .article-content a::after {
        content:   " (" attr(href) ")";
        font-size: 0.7em;
        color:     #555;
        word-break: break-all;
    }

    /* Don't print internal anchor links */
    .article-content a[href^="#"]::after {
        content: '';
    }

    /* Avoid breaking headings across pages */
    .article-content h2,
    .article-content h3,
    .article-content h4 {
        page-break-after:  avoid;
        break-after:       avoid;
    }

    /* Keep images on the same page as their captions */
    .article-content figure {
        page-break-inside: avoid;
        break-inside:      avoid;
    }
}