/* ============================================================
   Reapse Child — child-overrides.css
   INDUSTRIAL MONOLITH — Graphic Industrialist aesthetic
   Source Serif 4 (headings) + IBM Plex Sans (body, UI)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;600;700&family=Source+Serif+4:wght@400;600;700&display=swap');

/* ============================================================
   1.  ROOT TOKENS
       Default = DAY = "Ahoi White" (NOMOS galvanized dial).
       [data-theme='dark'] = NIGHT = Forged Iron.
       All UI consumes these tokens, so the entire theme
       inverts atomically when data-theme flips.
   ============================================================ */
:root {
    /* ---- DAY MODE — Ahoi White (default) ------------------- */
    --bg-primary:     #F7F7F7;   /* Ahoi galvanized white — the dial */
    --text-primary:   #1A2432;   /* Atlantic Blue ink — sharp serif cuts */
    --text-secondary: #4A5568;   /* Disciplined charcoal — hyper-legible body */
    --text-muted:     #6B7280;   /* Quieter charcoal — taglines, captions */
    --text-quiet:     #94A3B8;   /* Faintest grey — eyebrows, footnotes */
    --bg-panel:       #E5E7EB;   /* Structural paneling — dividers, borders */
    --bg-bookend:     #FFFFFF;   /* Top-bar + bottom-bar — bright bookends */
    --accent-wink:    #FF4500;   /* Neon orange — hover, links, the dot */

    /* Inline-link hairline rule — dark in Day, light in Night.
       Used by section 14.2 so underlines stay visible in both
       modes without baking-in white or black. */
    --link-rule:      rgba(26, 36, 50, 0.30);

    /* ---- Header geometry (consumed by layout offset) -------
       Padding is the literal breathing room BELOW the fixed
       header before content begins (spec: header_h + 40px). */
    --header-h:       88px;
    --header-pad:     40px;

    /* ---- Aliases — every public-facing token name from prior
           specs (Ahoi White, Industrial Monolith, etc.) resolves
           to the same underlying value so any new rule written
           against EITHER vocabulary just works. ---------------- */
    --bg-ahoi:        var(--bg-primary);   /* "Ahoi White" alias */
    --text-ink:       var(--text-primary); /* "Atlantic Blue ink" alias */
    --header-height:  calc(var(--header-h) + var(--header-pad));
    --bg-monolith:    var(--bg-primary);
    --paper:          var(--bg-primary);
    --ink:            var(--text-primary);
    --ink-soft:       var(--text-secondary);
    --ink-mute:       var(--text-muted);
    --ink-quiet:      var(--text-quiet);
    --rule:           var(--bg-panel);

    /* ---- Type stacks --------------------------------------- */
    --font-primary-heading: 'Source Serif 4', Georgia, serif;
    --font-secondary-body:  'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;

    /* ---- Whitespace scale — severe, architectural ---------- */
    --space-1:   .5rem;
    --space-2:   1rem;
    --space-3:   1.5rem;
    --space-4:   2.25rem;
    --space-5:   3.5rem;
    --space-6:   5rem;
    --space-heading-after:    1.25rem;
    --space-heading-before:   3.5rem;
    --space-paragraph:        1.4rem;

    /* Main column beside the fixed 200 px sidebar — same cap as the
       editorial reading strip (never full viewport width past the sidebar). */
    --hron-sidebar-width:       200px;
    /* Fixed editorial cap (~70–74 rem at 16px); keeps grey margin visible on desktop */
    --hron-content-column-max:  744px;

    /* Hero subtitle — IBM Plex accent (reference layout) */
    --hero-tagline-color:       #4668BF;
}

[data-theme='dark'] {
    --hero-tagline-color:       #93B6FF;
    --bg-primary:     #0D0E12;   /* Forged Iron */
    --text-primary:   #F7F7F7;
    --text-secondary: #D1D5DB;
    --text-muted:     #9AA3AE;
    --text-quiet:     #6B7280;
    --bg-panel:       #16181D;
    --bg-bookend:     #1F232B;   /* Visibly lighter than page, still subdued */
    --link-rule:      rgba(247, 247, 247, 0.30);
}


/* ============================================================
   2.  SCORCHED EARTH — eradicate every smuggled-in texture
       The parent theme injects an inline `style="background:url(..)"`
       on <body> and WordPress core can inject a `custom-background-css`
       <style>. We assassinate every vector here.
   ============================================================ */

/* 2a. Establish the absolute base color on the entire architecture
       and every common structural / plugin wrapper. Uses the
       theme-aware token so flipping data-theme inverts everything
       in one atomic step. */
html,
body,
body.custom-background,
body.custom-background-image,
main,
#root,
#page,
#main,
#primary,
#wrapper,
.site,
.site-wrapper,
.site-content,
.main-container,
.main-content,
.tabs-main,
.section,
.home-section,
.homepage-wrap,
.section-page-wrap,
.entry-content,
.content-block,
.container-fluid,
.elementor-background-overlay,
.bg-overlay {
    background-color: var(--bg-primary) !important;
    background-image: none !important;
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* 2b. Pseudo-element textures, noise overlays, and patterns — gone. */
html::before,
html::after,
body::before,
body::after,
#page::before,
#page::after,
.main-container::before,
.main-container::after,
.main-content::before,
.main-content::after,
.section::before,
.section::after,
.home-section::before,
.home-section::after {
    background-image: none !important;
    background-color: transparent !important;
    background: none !important;
    opacity: 0 !important;
    display: none !important;
    content: none !important;
}

/* 2c. The preloader gif (a 30 KB base64-embedded animated PNG in the
       parent theme) is the largest texture vector. Annihilate it. */
#preloader,
#preloader *,
.preloader,
.preloader * {
    display: none !important;
    visibility: hidden !important;
    background: none !important;
    background-image: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* ============================================================
   3.  BASE — rendering + typography
       (background already locked above)
   ============================================================ */
html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    margin: 0 !important;
    color: var(--text-secondary) !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Industrial Monolith forbids glow. */
*,
*::before,
*::after {
    text-shadow: none !important;
}

/* ---- SHARP CORNERS — global mandate -----------------------
   Every box, button, image, panel: a clean 90° cut.
   Rounded exceptions: horizontal theme pill + knob (section 8b), focus halo on the button. */
*,
*::before,
*::after {
    border-radius: 0 !important;
}
.hron-theme-switch,
.hron-theme-switch-thumb {
    border-radius: 999px !important;
}


body,
button, input, select, textarea {
    font-family: var(--font-secondary-body) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: var(--text-secondary) !important;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* ---- Headings: white Source Serif, tight, authoritative ---- */
h1, h2, h3, h4, h5, h6,
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4,
.content-block h1, .content-block h2, .content-block h3, .content-block h4 {
    font-family: var(--font-primary-heading) !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.005em !important;
    color: var(--text-primary) !important;
    text-transform: none !important;
    text-shadow: none !important;
    margin: 0 0 var(--space-heading-after) 0;
    padding: 0;
}

h1 { font-size: clamp(2.25rem, 3.4vw, 3.25rem) !important; line-height: 1.08 !important; font-weight: 700 !important; }
h2 { font-size: clamp(1.75rem, 2.4vw, 2.25rem) !important; line-height: 1.15 !important; font-weight: 700 !important; }
h3 { font-size: 1.375rem !important; line-height: 1.2  !important; font-weight: 600 !important; }
h4 { font-size: 1.125rem !important; line-height: 1.2  !important; font-weight: 600 !important; }

* + h1, * + h2 { margin-top: var(--space-heading-before) !important; }
* + h3, * + h4 { margin-top: calc(var(--space-heading-before) * 0.7) !important; }
h1 + *, h2 + *, h3 + *, h4 + * { margin-top: 0 !important; }

/* ---- Body copy: IBM Plex Sans, generous line-height -------- */
p, li, blockquote, dd, dt, figcaption, td, th {
    font-family: var(--font-secondary-body) !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: var(--text-secondary) !important;
}

p {
    margin: 0 0 var(--space-paragraph) 0;
}

/* ---- Links: pure white, neon-orange wink on hover ---------- */
a {
    font-family: var(--font-secondary-body);
    color: var(--text-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 160ms ease, border-color 160ms ease;
}

a:hover,
a:focus {
    color: var(--accent-wink) !important;
}

/* ---- Structural rules: paneling, never glowing lines ------- */
hr {
    border: 0 !important;
    height: 1px !important;
    background: var(--bg-panel) !important;
    margin: var(--space-4) 0 !important;
    box-shadow: none !important;
}


/* ============================================================
   4.  UI ELEMENTS — control-panel typography
   ============================================================ */
button,
.btn,
.btn-custom,
input[type="submit"],
input[type="button"],
.tabs a,
.nav a,
.tag,
.label,
.section-page-back a,
.homepage-section-link,
.small-heading {
    font-family: var(--font-secondary-body) !important;
    font-weight: 600 !important;
    font-style: normal !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    text-decoration: none;
    box-shadow: none !important;
}

.btn,
.btn-custom,
button,
input[type="submit"],
input[type="button"] {
    background: transparent !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--bg-panel) !important;
    padding: 10px 18px !important;
    border-radius: 0 !important;
}

.btn:hover,
.btn-custom:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    color: var(--accent-wink) !important;
    border-color: var(--accent-wink) !important;
    background: transparent !important;
}

#preloader {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.small-heading {
    font-size: 11px !important;
    color: var(--text-quiet) !important;
}


/* ============================================================
   5.  LAYOUT — fixed sidebar + flowing content
   ============================================================ */
@media (min-width: 992px) {
    .main-container {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        overflow: visible !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: var(--bg-monolith) !important;
    }
}

/* Sidebar — fixed rail; keeps the same inset from the viewport top at all times
   (no jump when the homepage sticky toolbar fades in — see `--header-height`). */
.tabs-main {
    position: fixed !important;
    top: var(--header-height) !important;
    left: 0 !important;
    bottom: 0 !important;
    padding-top: 0 !important;
    width: var(--hron-sidebar-width) !important;
    background: var(--bg-ahoi) !important;
    background-image: none !important;
    border-right: 1px solid var(--bg-panel) !important;
    border-bottom: 0 !important;
    overflow-y: auto !important;
    /* Sit above the reading column if a page template omits .main-content (#primary only). */
    z-index: 104 !important;
    box-shadow: none !important;
}

body.hron-topbar-compact .tabs-main {
    top: var(--header-height) !important;
}

body.admin-bar .tabs-main {
    top: calc(var(--header-height) + 32px) !important;
}

@media (max-width: 782px) {
    body.admin-bar .tabs-main {
        top: calc(var(--header-height) + 46px) !important;
    }
}

/* Main content — editorial column anchored to the sidebar seam,
   left-aligned with a capped max width (never a full bleed stripe). */
.main-content,
#primary,
.content-area {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 100vh !important;
    padding-top: calc(var(--header-height) + 8px) !important;
    padding-bottom: 96px !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    box-sizing: border-box !important;
    background: var(--bg-ahoi) !important;
    background-image: none !important;
    color: var(--text-ink) !important;
    text-align: left !important;
    overflow-y: visible !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

@media (min-width: 993px) {
    /*
     * Cancel centred “site-inner” rails from the bundled twentytwelve-ish layer
     * so `.main-content` truly hugs the sidebar.
     */
    #page.site,
    .site,
    .site-inner,
    #content.site-content {
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    .main-content,
    #primary,
    .content-area {
        margin-left: var(--hron-sidebar-width) !important;
        margin-right: 0 !important;
        width: min(var(--hron-content-column-max), calc(100vw - var(--hron-sidebar-width))) !important;
        max-width: min(var(--hron-content-column-max), calc(100vw - var(--hron-sidebar-width))) !important;
    }
}

/* Homepage / front: hide sticky toolbar until `.hron-topbar-revealed`
   beats body.* rules that forced it visible everywhere. */
body.page-template-page-homepage:not(.hron-topbar-revealed) #hron-topbar.hron-topbar,
body.front-page:not(.blog):not(.hron-topbar-revealed) #hron-topbar.hron-topbar {
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-100%) !important;
}

/* Homepage hero: Bootstrap `.row` needs horizontal gutters on `.container-fluid` */
@media (min-width: 992px) {
    body.page-template-page-homepage .main-content .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* Homepage: tight top rhythm while the sticky brand bar is absent */
body.page-template-page-homepage:not(.hron-topbar-revealed) .main-content {
    padding-top: 20px !important;
}

body.page-template-page-homepage.hron-topbar-revealed .main-content {
    padding-top: calc(var(--header-height) + 8px) !important;
}

.main-content .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    background: transparent !important;
}

.section {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow-y: visible !important;
    padding-top: 52px !important;
    padding-bottom: 52px !important;
    z-index: 1 !important;
    background: transparent !important;
}

body.page-template-page-homepage #home.home-section.section,
body.page-template-page-homepage .main-content > section#home.home-section.section {
    padding-top: 0 !important;
}

.section + .section {
    border-top: 1px solid var(--bg-panel);
}

/* Parent reapse/css/reapse.css hides .tabs-main at max-width: 992px
   — match that breakpoint exactly so display:none cannot win between
   991px and 992px. Higher specificity beats parent when load order differs. */
@media (max-width: 992px) {
    /* Side nav: off-canvas drawer (was display:none — unreachable on phones). */
    body.hron-side-nav-open {
        overflow: hidden;
    }

    #hron-side-nav.tabs-main {
        display: flex !important;
        flex-direction: column;
        justify-content: flex-start;
        /* Full-height overlay rail; `--hron-side-nav-inset-top` (homepage tablet/phone only)
           is set in child-scripts.js to the viewport bottom edge of `#home.home-section`,
           keeping the drawer below the hero card while that section intersects the viewport. */
        position: fixed !important;
        left: 0 !important;
        top: var(--hron-side-nav-inset-top, 0) !important;
        bottom: 0 !important;
        height: auto !important;
        max-height: none !important;
        width: min(280px, 88vw) !important;
        padding-top: 12px !important;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(-100%);
        transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 8px 0 28px rgba(0, 0, 0, 0.12);
        z-index: 104 !important;
    }

    /*
     * While open, soften vertical reflow when the hero inset measurement changes mid-scroll.
     */
    body.hron-side-nav-open #hron-side-nav.tabs-main {
        transition:
            transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
            top 0.16s ease-out;
    }

    html[data-theme='dark'] #hron-side-nav.tabs-main {
        box-shadow: 8px 0 28px rgba(0, 0, 0, 0.45);
    }

    body.hron-side-nav-open #hron-side-nav.tabs-main {
        transform: translateX(0);
    }

    .hron-side-nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 90;
        background: rgba(0, 0, 0, 0.35);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            opacity 200ms ease,
            visibility 0s linear 200ms;
    }

    body.hron-side-nav-open .hron-side-nav-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition:
            opacity 200ms ease,
            visibility 0s linear 0s;
    }

    .main-content,
    #primary,
    .content-area {
        margin-left: 0 !important;
        margin-right: auto !important;
        width: 100% !important;
        max-width: min(var(--hron-content-column-max), 100%) !important;
        padding-top: var(--header-height) !important;
        padding-left: 14px !important;
        padding-right: 16px !important;
    }

    body.page-template-page-homepage:not(.hron-topbar-revealed) .main-content,
    body.page-template-page-homepage:not(.hron-topbar-revealed) #primary,
    body.page-template-page-homepage:not(.hron-topbar-revealed) .content-area {
        padding-top: 24px !important;
    }

    .hron-topbar {
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-width: none !important;
    }
}

/* Below desktop only — drawer controls (hamburger, first column in sticky header) */
.hron-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    line-height: 0;
    font-size: 0;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 500;
    color: var(--text-quiet);
    background: transparent;
    border: 1px solid var(--bg-panel);
    cursor: pointer;
    vertical-align: middle;
    transition:
        border-color 0.18s ease,
        color 0.18s ease;
}

.hron-nav-toggle-bars {
    display: grid;
    grid-auto-rows: 2px;
    row-gap: 5px;
    width: 20px;
    align-content: center;
    justify-items: stretch;
    pointer-events: none;
}

.hron-nav-toggle-bar {
    display: block;
    width: 100%;
    height: 2px;
    margin: 0;
    padding: 0;
    background: currentColor;
    transition:
        opacity 0.2s ease,
        transform 0.22s cubic-bezier(.4, 0, .2, 1);
}

/* Open drawer → morph to × */
body.hron-side-nav-open .hron-nav-toggle-bars {
    display: block;
    position: relative;
    width: 20px;
    height: 14px;
}

body.hron-side-nav-open .hron-nav-toggle-bar {
    width: 20px;
}

body.hron-side-nav-open .hron-nav-toggle-bar:nth-child(1),
body.hron-side-nav-open .hron-nav-toggle-bar:nth-child(3) {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -1px;
}

body.hron-side-nav-open .hron-nav-toggle-bar:nth-child(2) {
    opacity: 0;
    height: 0;
    margin: 0;
    overflow: hidden;
}

body.hron-side-nav-open .hron-nav-toggle-bar:nth-child(1) {
    transform: rotate(45deg);
}

body.hron-side-nav-open .hron-nav-toggle-bar:nth-child(3) {
    transform: rotate(-45deg);
}

.hron-nav-toggle:hover,
.hron-nav-toggle:focus-visible {
    color: var(--accent-wink);
    border-color: var(--accent-wink);
}

.hron-nav-toggle:focus-visible {
    outline: 2px solid var(--accent-wink);
    outline-offset: 2px;
}

@media (max-width: 992px) {
    .hron-topbar-nav-toggle {
        display: inline-flex;
    }

    .hron-nav-toggle.hron-hero-nav-toggle {
        display: inline-flex;
    }
}

/* min-width 993 avoids overlap at exactly 992 with the mobile drawer
   block below (same applies to viewport width 992). */
@media (min-width: 993px) {
    .hron-side-nav-backdrop {
        display: none !important;
    }
}


/* Legacy: earlier child builds output #hron-floating-toggle (duplicate control on the right). */
#hron-floating-toggle {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* ============================================================
   6.  HERO — portrait + name + tagline, flat
   ============================================================ */
.home-section {
    position: relative !important;
    padding: 12px 0 24px !important;
    border-bottom: 1px solid var(--bg-panel);
    margin-bottom: 28px;
    background: transparent !important;
}

/* Homepage hero: menu + theme sit in-flow above the portrait block until the
   sticky top bar appears (then `.hron-hero-chrome` is hidden). */
.hron-hero-chrome {
    display: none;
}

body.page-template-page-homepage:not(.hron-topbar-revealed) .hron-hero-chrome {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    padding: 8px 26px 14px 8px;
    position: relative;
    z-index: 2;
}

body.page-template-page-homepage.hron-topbar-revealed .hron-hero-chrome {
    display: none !important;
}

@media (max-width: 992px) {
    body.page-template-page-homepage:not(.hron-topbar-revealed) .hron-hero-chrome {
        justify-content: space-between;
        align-items: center;
        padding-inline-start: max(0px, env(safe-area-inset-left, 0px));
    }

    body.page-template-page-homepage:not(.hron-topbar-revealed) .hron-hero-chrome .hron-nav-toggle.hron-hero-nav-toggle {
        margin-inline: 0 !important;
        order: unset !important;
    }
}

@media (max-width: 600px) {
    body.page-template-page-homepage:not(.hron-topbar-revealed) .hron-hero-chrome {
        padding: 6px 14px 10px max(0px, env(safe-area-inset-left, 0px));
    }
}

body.page-template-page-homepage:not(.hron-topbar-revealed) .home-section:has(.hron-hero-chrome) .intro-footer {
    top: 50px !important;
}

@media (max-width: 600px) {
    body.page-template-page-homepage:not(.hron-topbar-revealed) .home-section:has(.hron-hero-chrome) .intro-footer {
        top: 44px !important;
        right: 12px !important;
    }
}

.home-section,
.home-section > .container-fluid,
.home-section .v-align,
.home-section .v-align > .inner {
    height: auto !important;
    width: auto !important;
    display: block !important;
    text-align: left !important;
}

.home-section .intro-text {
    display: grid !important;
    grid-template-columns: 120px 1fr !important;
    column-gap: 24px !important;
    row-gap: 0 !important;
    align-items: center !important;
    text-align: left !important;
    padding: 26px 28px !important;
    margin: 0 !important;
    background: #FFFFFF !important;
    border: 1px solid var(--bg-panel) !important;
}

[data-theme='dark'] .home-section .intro-text {
    background: #1A2432 !important;
    border-color: #243344 !important;
}

.home-section .person-img {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 120px;
    height: 120px;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center;
}

.home-section .person-img img {
    width: 120px !important;
    height: 120px !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border: 1px solid var(--bg-panel) !important;
    display: block;
}

/* Name — plain h1 (same stack as in-content titles like #research-focus > h1) */
.home-section .intro-text > h1 {
    grid-column: 2;
    grid-row: 1;
    margin: 0 !important;
    padding: 0 !important;
    align-self: end;
}

/* Tagline — IBM Plex, blue accent; sized so the name does not read as a caption */
.home-section .intro-text > h2 {
    grid-column: 2;
    grid-row: 2;
    font-family: var(--font-secondary-body) !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    font-style: normal !important;
    letter-spacing: 0.015em !important;
    line-height: 1.25 !important;
    color: var(--hero-tagline-color) !important;
    text-transform: none !important;
    text-shadow: none !important;
    opacity: 1 !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    align-self: start;
}

/* Hero lede */
.home-section .intro-text > p {
    grid-column: 2;
    grid-row: 3;
    font-family: var(--font-secondary-body) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: var(--text-secondary) !important;
    max-width: 580px;
    margin: 22px 0 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.home-section .intro-text .portfolio-link {
    display: none !important;
}

/* Social icons — top-right of hero */
.home-section .intro-footer {
    position: absolute !important;
    top: 36px !important;
    right: 24px !important;
    left: auto !important;
    bottom: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    width: auto !important;
    background: transparent !important;
}

.home-section .intro-footer .container-fluid,
.home-section .intro-footer .row,
.home-section .intro-footer .col-xs-8 {
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    float: none !important;
    background: transparent !important;
}

.home-section .intro-footer .col-xs-4,
.home-section .hire-me {
    display: none !important;
}

.home-section .footer-social {
    list-style: none;
    display: inline-flex;
    gap: 8px;
    padding: 0;
    margin: 0;
}

.home-section .footer-social li {
    margin: 0;
    padding: 0;
    display: inline-flex;
}

.home-section .footer-social a {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: transparent;
    border-radius: 0;
    text-decoration: none;
    font-size: 16px;
    transition: color 180ms ease;
    box-shadow: none !important;
}

.home-section .footer-social a:hover {
    background: transparent;
    color: var(--accent-wink);
}

@media (max-width: 600px) {
    .home-section .intro-text {
        grid-template-columns: 80px 1fr !important;
        column-gap: 16px !important;
    }

    .home-section .person-img,
    .home-section .person-img img {
        width: 80px !important;
        height: 80px !important;
    }

    .home-section .intro-text > h2 { font-size: 17px !important; }

    .home-section .intro-footer {
        top: 28px !important;
        right: 12px !important;
    }
}

.v-align > .inner {
    display: block !important;
    vertical-align: top !important;
    height: auto !important;
}


/* ============================================================
   7.  SIDEBAR NAVIGATION — typographic only, accent on hover
   ============================================================ */
.tabs a {
    border-left: none !important;
    padding: 7px 20px !important;
    font-size: 11px !important;
    color: var(--text-quiet) !important;
    margin-bottom: 4px !important;
    display: block;
    text-decoration: none;
    background: transparent !important;
}

.tabs a:hover {
    color: var(--accent-wink) !important;
    border-left: none !important;
    background: transparent !important;
}

.tabs a.active {
    color: var(--text-primary) !important;
    border-left: none !important;
    background: transparent !important;
}

.menu-person-img {
    padding: 20px 20px 10px !important;
}

.menu-person-img > img {
    max-width: 70px !important;
    width: 70px !important;
    box-shadow: none !important;
    border: 1px solid var(--bg-panel) !important;
    border-radius: 999px;
}


/* ============================================================
   8.  TOP BAR — flat monolith strip with panel underline
   ============================================================ */
.hron-topbar {
    position: fixed;
    top: 0;
    left: var(--hron-sidebar-width);
    right: auto;
    width: min(var(--hron-content-column-max), calc(100vw - var(--hron-sidebar-width)));
    max-width: 100%;
    box-sizing: border-box;
    height: var(--header-h);
    z-index: 110;
    font-family: var(--font-secondary-body);

    /* Hidden by default — the JS toggles `.hron-topbar-revealed`
       on <body> once the user scrolls past the hero section. */
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    transition:
        transform 280ms ease,
        opacity 220ms ease,
        visibility 0s linear 280ms;
}

/* Logged-in WordPress toolbar offset */
body.admin-bar .hron-topbar {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar .hron-topbar {
        top: 46px;
    }
}

.hron-topbar.hron-topbar--with-back {
    height: calc(var(--header-h) + 28px);
}

body.hron-topbar-revealed .hron-topbar {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition:
        transform 280ms ease,
        opacity 220ms ease,
        visibility 0s linear 0s;
}

body.page-template-page-section .hron-topbar,
body.single-post .hron-topbar,
body.archive .hron-topbar,
body.blog .hron-topbar,
body.search .hron-topbar,
body.error404 .hron-topbar {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Legacy compact-mode rule — kept as a no-op so the parent-theme
   JS that toggles this class doesn't cause any visual change.
   The actual visibility is now driven by .hron-topbar-revealed. */
body.hron-topbar-compact .hron-topbar { /* no-op */ }

.hron-topbar-inner {
    height: var(--header-h);
    width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 8px 28px;
    position: relative;
    /*
     * Never pair overflow-x: clip with overflow-y: visible — the cascade
     * forces overflow-y to compute to "auto", which clips the tall
     * day/night control (icons + dot appear torn across the bar).
     */
    overflow: visible;
    pointer-events: auto;
    background: var(--bg-bookend) !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid var(--bg-panel);
    box-shadow: none !important;
    transition: padding 220ms ease;
}

/* Mobile summon button MUST stay visually left — this block sits after the base
   flex rule above so grid wins (later + !important beats earlier media queries). */
@media (max-width: 992px) {
    .hron-topbar-inner {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto;
        justify-content: unset !important;
        column-gap: 10px;
        align-items: center;
        width: 100%;
        padding: 8px 20px 8px max(10px, env(safe-area-inset-left));
    }

    /* Menu opener: column 1, hard-left column */
    .hron-nav-toggle.hron-topbar-nav-toggle {
        justify-self: start;
        grid-column: 1;
        margin-inline: 0 !important;
        order: unset !important;
    }

    .hron-topbar-brand {
        justify-self: center;
        grid-column: 2;
        min-width: 0;
    }

    .hron-topbar-actions {
        justify-content: flex-end;
        justify-self: end;
        grid-column: 3;
    }
}

.hron-topbar-subline {
    height: 28px;
    display: flex;
    align-items: center;
    padding: 0 28px;
    border-bottom: 1px solid var(--bg-panel);
    background: var(--bg-bookend);
}

/* Kill the parent texture overlay */
.hron-topbar-inner::after {
    content: none !important;
    background: none !important;
    background-image: none !important;
    opacity: 0 !important;
}

.hron-topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: var(--text-primary);
    text-decoration: none;
    box-shadow: none !important;
    position: relative;
    z-index: 1;
}

.hron-topbar-brand:hover {
    color: var(--text-primary);
    text-decoration: none;
}

.hron-topbar-brand:hover .hron-topbar-name { color: var(--accent-wink); }

.hron-topbar-portrait {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid var(--bg-panel);
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    transition: width 220ms ease, height 220ms ease, flex-basis 220ms ease;
}

.hron-topbar-copy {
    display: inline-flex;
    align-items: baseline;
    min-width: 0;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    line-height: 1.2;
}

.hron-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 14px;
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
}

.hron-topbar-name {
    font-family: var(--font-secondary-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-primary);
    line-height: 1.2;
    font-style: normal;
    transition: color 160ms ease;
}

.hron-topbar-tagline {
    font-family: var(--font-secondary-body);
    font-size: 12px;
    font-weight: 300;
    font-style: normal;
    letter-spacing: 0;
    color: var(--text-muted);
    line-height: 1.3;
}

.hron-topbar-kicker { display: none; }

.hron-topbar-social {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    margin: 0;
}

.hron-topbar-social li {
    margin: 0;
    padding: 0;
    display: inline-flex;
}

.hron-topbar-social a,
a.hron-topbar-contact {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    color: var(--text-muted) !important;
    background: transparent !important;
    border-radius: 0;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    letter-spacing: 0 !important;
    transition: color 180ms ease;
    box-shadow: none !important;
}

a.hron-topbar-contact {
    flex: 0 0 auto;
    margin: 0;
    padding: 0 !important;
    text-transform: none !important;
    border: 0;
    font-size: 15px !important;
    line-height: 1;
}

.hron-topbar-social a i::before,
a.hron-topbar-contact i::before {
    color: inherit !important;
}

.hron-topbar-social a:hover,
.hron-topbar-social a:focus-visible,
a.hron-topbar-contact:hover,
a.hron-topbar-contact:focus-visible {
    background: transparent !important;
    color: var(--accent-wink) !important;
}

a.hron-topbar-contact i::before {
    font-size: 15px !important;
    line-height: 1 !important;
}

.hron-topbar-back {
    font-size: 11px;
    color: var(--text-muted);
    text-decoration: none;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-right: 2px;
    line-height: 1;
}

.hron-topbar-back:hover {
    color: var(--accent-wink);
}

/* Persistent footer bar — visual mirror of top bar */
.hron-bottombar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 48px;
    z-index: 100;
    background: var(--bg-bookend);
    border-top: 1px solid var(--bg-panel);
}

.hron-bottombar-inner {
    height: 100%;
    box-sizing: border-box;
    max-width: min(var(--hron-content-column-max), calc(100vw - var(--hron-sidebar-width)));
    margin-left: var(--hron-sidebar-width);
    margin-right: auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

@media (max-width: 992px) {
    .hron-bottombar-inner {
        max-width: min(var(--hron-content-column-max), 100%);
        margin-left: 0;
        margin-right: auto;
    }
}

.hron-bottombar-copy,
.hron-bottombar-top {
    font-family: var(--font-secondary-body);
    font-size: 11px;
    color: var(--text-muted);
    text-decoration: none;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.hron-bottombar-top:hover {
    color: var(--accent-wink);
}

@media (max-width: 767px) {
    .hron-topbar { height: 56px; }
    .hron-topbar.hron-topbar--with-back { height: 80px; }
    .hron-topbar-subline { height: 24px; padding: 0 18px; }

    .hron-topbar-inner {
        gap: 12px;
        padding: 8px max(14px, env(safe-area-inset-right, 0px)) 8px max(6px, env(safe-area-inset-left, 0px));
    }

    .hron-topbar-portrait {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .hron-topbar-tagline { display: none; }

    a.hron-topbar-contact {
        width: 28px;
        height: 28px;
        font-size: 14px !important;
    }

    .hron-topbar-actions { gap: 8px; }

    .hron-bottombar {
        height: 44px;
    }

    .hron-bottombar-inner {
        padding: 0 18px;
    }

    .hron-bottombar-copy,
    .hron-bottombar-top {
        font-size: 10px;
    }
}


/* ============================================================
   8b. DAY / NIGHT — compact horizontal switch (settings-style)
   Thumb left = day, right = dark. State from <html data-theme="dark">.
   ============================================================ */
.hron-theme-toggle,
#mode-toggle {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    padding: 2px 2px !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    cursor: pointer;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: 0 !important;
    color: inherit !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: 400 !important;
    font-style: normal !important;
    -webkit-appearance: none;
    appearance: none;
}

.hron-theme-toggle-icons {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.hron-theme-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    font-size: 15px;
    line-height: 1;
    flex: 0 0 auto;
    color: var(--text-muted);
    opacity: 0.42;
    transition: opacity 0.18s ease, color 0.18s ease;
}

.hron-theme-symbol i::before {
    font-size: 15px !important;
    line-height: 1 !important;
}

html:not([data-theme='dark']) .hron-theme-symbol--sun {
    opacity: 1;
    color: var(--text-primary);
}

html[data-theme='dark'] .hron-theme-symbol--moon {
    opacity: 1;
    color: rgba(237, 242, 247, 0.95);
}

.hron-theme-toggle:focus-visible {
    outline: 2px solid var(--accent-wink);
    outline-offset: 3px;
    border-radius: 4px !important;
}

.hron-theme-switch {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 22px;
    box-sizing: border-box;
    flex: 0 0 auto;
    background: #D1D5DB;
    border: 1px solid rgba(26, 36, 50, 0.14);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.hron-theme-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid rgba(26, 36, 50, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    transition: transform 0.22s cubic-bezier(.4, 0, .2, 1),
                border-color 0.2s ease;
    pointer-events: none;
}

html[data-theme='dark'] .hron-theme-switch-thumb {
    transform: translateX(18px);
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* “On” tint in dark mode — discrete orange edge like a real switch */
html[data-theme='dark'] .hron-theme-switch {
    background: color-mix(in srgb, var(--accent-wink) 42%, rgba(255, 255, 255, 0.12));
}

@supports not (color: color-mix(in srgb, red, blue)) {
    html[data-theme='dark'] .hron-theme-switch {
        background: rgba(255, 80, 40, 0.35);
        border-color: rgba(255, 80, 40, 0.45);
    }
}

@media (max-width: 992px) {
    .hron-theme-toggle-icons {
        gap: 5px;
    }

    .hron-theme-symbol {
        font-size: 14px;
    }

    .hron-theme-symbol i::before {
        font-size: 14px !important;
    }

    .hron-theme-switch {
        width: 36px;
        height: 20px;
    }

    .hron-theme-switch-thumb {
        width: 14px;
        height: 14px;
        top: 2px;
        left: 2px;
    }

    html[data-theme='dark'] .hron-theme-switch-thumb {
        transform: translateX(16px);
    }
}


/* ============================================================
   9.  ENTRY CONTENT — body & in-content headings
   ============================================================ */
.entry-content p,
.content-block p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin-bottom: var(--space-paragraph) !important;
    color: var(--text-secondary) !important;
}

.entry-content h1,
.content-block h1 {
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em !important;
    color: var(--text-primary) !important;
    margin-top: var(--space-6) !important;
    margin-bottom: var(--space-heading-after) !important;
}
.entry-content h2,
.content-block h2 {
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.005em !important;
    color: var(--text-primary) !important;
    margin-top: var(--space-5) !important;
    margin-bottom: var(--space-heading-after) !important;
}
.entry-content h3,
.content-block h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--text-primary) !important;
    margin-top: var(--space-4) !important;
    margin-bottom: var(--space-heading-after) !important;
}
.entry-content h4,
.content-block h4 {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    color: var(--text-primary) !important;
    margin-top: var(--space-4) !important;
    margin-bottom: var(--space-heading-after) !important;
}

/* h6 — eyebrow/kicker (UI element, not a primary heading) */
.entry-content h6,
.content-block h6 {
    font-family: var(--font-secondary-body) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--text-quiet) !important;
    font-style: normal !important;
    margin-bottom: 6px !important;
    margin-top: var(--space-5) !important;
}

blockquote {
    font-family: var(--font-secondary-body) !important;
    font-weight: 300 !important;
    font-style: normal !important;
    line-height: 1.6 !important;
    border-left: 2px solid var(--bg-panel) !important;
    color: var(--text-muted) !important;
    padding: var(--space-1) 0 var(--space-1) var(--space-3) !important;
    margin: var(--space-4) 0 !important;
    background: transparent !important;
}


/* ============================================================
   10. HOMEPAGE template
   ============================================================ */
.homepage-wrap {
    max-width: 880px;
    padding: 40px 40px 80px;
    background: transparent !important;
}

/* Biography + section previews: same left edge as hero text column,
   capped to hero lede width (580px) so body copy isn’t edge-to-edge. */
body.page-template-page-homepage .homepage-wrap {
    padding-top: 40px;
    padding-bottom: 80px;
    padding-right: 28px;
    padding-left: calc(28px + 120px + 24px);
    box-sizing: border-box !important;
}

body.page-template-page-homepage .homepage-wrap > .homepage-intro,
body.page-template-page-homepage .homepage-wrap > .homepage-sections {
    max-width: min(var(--homepage-reading-max, 580px), 100%);
}

@media (max-width: 600px) {
    body.page-template-page-homepage .homepage-wrap {
        padding-left: calc(28px + 80px + 16px);
    }
}

@media (min-width: 992px) {
    body.page-template-page-homepage .homepage-wrap {
        padding-right: calc(28px + 15px);
        padding-left: calc(15px + 28px + 120px + 24px);
    }
}

.homepage-intro {
    margin-bottom: 48px;
}

.homepage-intro p {
    font-family: var(--font-secondary-body) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: var(--text-secondary) !important;
}

.homepage-sections {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.homepage-section-item {
    border-top: 1px solid var(--bg-panel);
    padding: var(--space-4) 0;
    background: transparent !important;
}

.homepage-section-title {
    font-family: var(--font-primary-heading) !important;
    font-style: normal !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.005em !important;
    text-transform: none !important;
    color: var(--text-primary) !important;
    margin: 0 0 var(--space-heading-after) 0 !important;
}

.homepage-section-preview {
    font-family: var(--font-secondary-body) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: var(--text-secondary) !important;
    margin-bottom: var(--space-2) !important;
}

.homepage-section-link {
    font-family: var(--font-secondary-body) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    text-decoration: none;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--text-primary) !important;
    padding-bottom: 2px;
    transition: color 160ms ease, border-color 160ms ease;
}

.homepage-section-link:hover {
    color: var(--accent-wink) !important;
    border-bottom-color: var(--accent-wink) !important;
}


/* ============================================================
   11. SECTION page template
   ============================================================ */
.section-page-wrap {
    max-width: 880px;
    padding: 36px 40px 80px;
    background: transparent !important;
}

.section-page-back {
    margin-bottom: 28px;
}

.section-page-back a {
    font-size: 11px;
    color: var(--text-quiet);
    text-decoration: none;
    box-shadow: none !important;
}

.section-page-back a:hover {
    color: var(--accent-wink);
}

.section-page-title {
    font-family: var(--font-primary-heading) !important;
    font-style: normal !important;
    font-size: clamp(2rem, 3vw, 2.75rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.1 !important;
    color: var(--text-primary) !important;
    text-transform: none !important;
    margin: 0 0 var(--space-5) 0 !important;
}

.section-page-body {
    font-family: var(--font-secondary-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ------------------------------------------------------------
   Resume / CV — timeline rail + hollow square markers (readable in
   Industrial Monolith). Re-specify pseudo-elements so the vertical
   rail survives theme resets and `height:100%` quirks on `::before`.

   CPT shortcodes now append `.hron-timeline-body` from each post’s
   editor so employment blurbs match education dissertation copy.

   ------------------------------------------------------------ */
.section-page-body .timeline,
.entry-content .timeline {
    position: relative !important;
    overflow: visible !important;
    list-style: none !important;
    margin-top: var(--space-4);
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: var(--space-2);
}

/* Shortcode wrapper must not clip the rail / markers. */
.section-page-body .content-block:has(.timeline),
.entry-content .content-block:has(.timeline) {
    overflow: visible !important;
}

/* Vertical rail — top/bottom anchors fill the list reliably. */
.section-page-body .timeline::before,
.entry-content .timeline::before {
    content: '' !important;
    position: absolute !important;
    width: 1px !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 6px !important;
    height: auto !important;
    background: var(--bg-panel) !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.section-page-body .timeline > li,
.entry-content .timeline > li {
    position: relative !important;
    z-index: 1 !important;
    padding-left: 2.75rem;
    padding-bottom: var(--space-5);
}

.section-page-body .timeline > li:last-of-type,
.entry-content .timeline > li:last-of-type {
    padding-bottom: 0;
}

/* Hollow square nodes on the rail (sharp corners = on-brand). */
.section-page-body .timeline > li::before,
.entry-content .timeline > li::before {
    content: '' !important;
    position: absolute !important;
    width: 12px !important;
    height: 12px !important;
    left: 0 !important;
    top: 0.2rem !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    background: var(--bg-primary) !important;
    border: 2px solid var(--text-muted) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.section-page-body .timeline > li > *:first-child,
.entry-content .timeline > li > *:first-child {
    margin-top: 0 !important;
}

.section-page-body .timeline > li > *:last-child,
.entry-content .timeline > li > *:last-child {
    margin-bottom: 0 !important;
}

/* Kill accidental giant top margins from global `* + h4` inside items. */
.section-page-body .content-block .timeline > li > h4,
.entry-content .content-block .timeline > li > h4,
.section-page-body .timeline > li > h4,
.entry-content .timeline > li > h4 {
    margin-top: 0.35rem !important;
    margin-bottom: 0.35rem !important;
    font-family: var(--font-primary-heading) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    color: var(--text-primary) !important;
}

/* Date lines — match legibility of education rows. */
.section-page-body .timeline > li > strong,
.entry-content .timeline > li > strong {
    display: block;
    font-family: var(--font-secondary-body) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--text-secondary) !important;
    margin-bottom: 0.35rem;
}

/* Org / degree subtitle — never shrink below body copy. */
.section-page-body .timeline > li > span,
.entry-content .timeline > li > span {
    display: block;
    font-family: var(--font-secondary-body) !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: var(--text-secondary) !important;
}

.section-page-body .timeline > li > span small,
.entry-content .timeline > li > span small {
    font-size: 1em !important;
    color: inherit !important;
}

.section-page-body .timeline > li > span:empty,
.entry-content .timeline > li > span:empty {
    display: none;
}

/* Editor copy under each CPT row — same paragraph contract as the rest
   of `.content-block` (education dissertation vs employment summary). */
.section-page-body .timeline .hron-timeline-body,
.entry-content .timeline .hron-timeline-body {
    margin-top: var(--space-2);
    font-family: var(--font-secondary-body) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: var(--text-secondary) !important;
}

.section-page-body .timeline .hron-timeline-body p,
.entry-content .timeline .hron-timeline-body p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: var(--text-secondary) !important;
    margin: 0 0 var(--space-paragraph) 0 !important;
}

.section-page-body .timeline .hron-timeline-body p:last-child,
.entry-content .timeline .hron-timeline-body p:last-child {
    margin-bottom: 0 !important;
}

.section-page-body .timeline .hron-timeline-body small,
.entry-content .timeline .hron-timeline-body small {
    font-size: 16px !important;
    color: var(--text-secondary) !important;
}

/* Legacy Reapse markup: dates lived in .row > .col-sm-4 (employment vs
   education could diverge when Bootstrap gutters floated). Force one
   column and reuse the same type rules as flat list items. */
.section-page-body .timeline > li > .row,
.entry-content .timeline > li > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.section-page-body .timeline > li > .row > [class*="col-"],
.entry-content .timeline > li > .row > [class*="col-"] {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.section-page-body .timeline li [class*="col-"] strong,
.entry-content .timeline li [class*="col-"] strong {
    display: block;
    font-family: var(--font-secondary-body) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--text-secondary) !important;
    margin-bottom: 0.35rem;
}

.section-page-body .timeline li [class*="col-"] span,
.entry-content .timeline li [class*="col-"] span {
    font-family: var(--font-secondary-body) !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: var(--text-secondary) !important;
}

.section-page-body .timeline li [class*="col-"] span:empty,
.entry-content .timeline li [class*="col-"] span:empty {
    display: none;
}

.section-page-body .timeline p,
.entry-content .timeline p {
    font-size: 16px;
    line-height: 1.6 !important;
    margin: var(--space-2) 0 0 0;
}


/* ============================================================
   12. FINAL HARDENING — no glow, no float, anywhere
   ============================================================ */
.main-container,
.main-content,
.section,
.home-section,
.tabs-main,
.homepage-wrap,
.section-page-wrap,
.entry-content,
.content-block,
.hron-topbar-inner,
.hron-topbar-brand,
.hron-topbar-portrait,
.hron-topbar-social a,
.menu-person-img > img,
.home-section .person-img img,
.home-section .footer-social a {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}


/* ============================================================
   13. BLOG THUMBNAILS — Strict 1:1 industrial geometry
       Targets the WordPress post thumbnail used inside the
       blog list / archive cards. The Reapse parent wraps the
       <img> in <a class="post-thumbnail"> on list views and in
       <div class="post-thumbnail"> on singular views. We crop
       only the LIST thumbnails (the card images) to a perfect
       square; singular hero images are left untouched.
   ============================================================ */

/* --- The Perfect Crop ---------------------------------------
   Force the thumbnail container into a perfect square and let
   the image cover it without stretching or distortion. */
a.post-thumbnail,
article.post a.post-thumbnail,
.blog a.post-thumbnail,
.archive a.post-thumbnail,
.search a.post-thumbnail {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 0 var(--space-3) 0 !important;
    overflow: hidden !important;
    background: var(--bg-panel);
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

a.post-thumbnail img,
article.post a.post-thumbnail img,
.blog a.post-thumbnail img,
.archive a.post-thumbnail img,
.search a.post-thumbnail img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center center !important;

    /* --- The Razor Edge — no softness ---------------------- */
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;

    /* --- Industrial Control hover state -------------------- */
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    transition: filter 220ms ease-out, -webkit-filter 220ms ease-out;
    -webkit-transition: -webkit-filter 220ms ease-out;
}

/* On hover/focus of the card link the image snaps to full
   colour — the mechanical "on-switch". */
a.post-thumbnail:hover img,
a.post-thumbnail:focus img,
article.post:hover a.post-thumbnail img,
article.post:focus-within a.post-thumbnail img {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    opacity: 1 !important; /* defeat parent theme's .post-thumbnail:hover { opacity:.85 } */
}


/* ============================================================
   14. ADDENDUM — THE WINK (Functional Color)
       Surgical, mechanical applications of --accent-wink.
       No glow, no fade. The orange is a switch, not a mood.
   ============================================================ */

/* ---- 14.1  Text selection — black ink on neon orange ------- */
::selection {
    background-color: var(--accent-wink);
    color: #000000;
    text-shadow: none;
}

::-moz-selection {
    background-color: var(--accent-wink);
    color: #000000;
    text-shadow: none;
}

/* ---- 14.2  Kinetic link hover — the mechanical snap --------
   Strip the parent/section-9 underline treatment and replace
   it with a hairline bottom rule that snaps to orange on
   hover. 0.1s ease-in-out — a switch, not a fade. The rule
   colour uses --link-rule so it flips between dark-on-light
   (Day) and light-on-dark (Night) automatically. */
a {
    text-decoration: none !important;
    border-bottom: 1px solid var(--link-rule) !important;
    transition: color 0.1s ease-in-out, border-bottom-color 0.1s ease-in-out, border-bottom-width 0.1s ease-in-out !important;
}

a:hover,
a:focus {
    color: var(--accent-wink) !important;
    border-bottom: 2px solid var(--accent-wink) !important;
}

/* Exemptions — links that are structural UI, not inline text.
   These already carry their own border / icon treatment and
   must not pick up the hairline rule. */
.tabs a,
.tabs-main a,
.hron-topbar-brand,
.hron-topbar-social a,
a.hron-topbar-contact,
.home-section .footer-social a,
.homepage-section-link,
.section-page-back a,
a.post-thumbnail,
a.btn,
a.btn-custom {
    border-bottom: 0 !important;
}

.tabs a:hover,
.tabs-main a:hover,
.hron-topbar-brand:hover,
.hron-topbar-social a:hover,
a.hron-topbar-contact:hover,
a.hron-topbar-contact:focus-visible,
.home-section .footer-social a:hover,
.section-page-back a:hover,
a.post-thumbnail:hover {
    border-bottom: 0 !important;
}

/*
 * §14.2 sets `a:focus { color: accent !important; }` globally; without this,
 * the top-bar Ionicons revert to neon on focus while Twitter/LinkedIn/mail look dim.
 */
.hron-topbar-social a:focus,
a.hron-topbar-contact:focus {
    color: var(--text-muted) !important;
    border-bottom: 0 !important;
}

.hron-topbar-social a:focus:hover,
a.hron-topbar-contact:focus:hover {
    color: var(--accent-wink) !important;
}

/* ---- 14.3  The Tombstone — end-of-article square mark ------
   Append a filled square (■, U+25A0) sized just under the
   cap-height so its top aligns with the x-line and its base
   sits cleanly on the baseline. Mechanical period, not glyph. */
.tombstone::after {
    content: "\25A0";
    color: var(--accent-wink);
    font-size: 0.72em;
    line-height: 1;
    margin-left: 0.35em;
    display: inline-block;
    vertical-align: baseline;
    transform: translateY(-0.04em);
}


/* ============================================================
   15. BLOG ARCHIVE — RESPONSIVE CARD GRID
       Used by /blog/ (home.php), /category/*, /tag/*, /YYYY/MM/
       (archive.php) and the shared template-parts/content-card.
       Each post renders ONCE, as a card, with one featured image
       cropped to a uniform 3:2 ratio. The whole card is the link.
   ============================================================ */

/* 15.1  Layout — widen the content column for the grid only.
   The normal narrow reading column (88ch + 80px) is for single
   articles. Archives need a 1200-wide canvas to host two columns,
   so we override the column geometry but only when the inner
   wrapper carries .hron-blog-archive. */
body.blog #primary.content-area.hron-blog-archive,
body.archive #primary.content-area.hron-blog-archive {
    margin-left: var(--hron-sidebar-width) !important;
    margin-right: auto !important;
    max-width: min(1200px, calc(100vw - var(--hron-sidebar-width))) !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
}

@media (max-width: 992px) {
    body.blog #primary.content-area.hron-blog-archive,
    body.archive #primary.content-area.hron-blog-archive {
        margin-left: 0 !important;
        margin-right: auto !important;
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

@media (max-width: 480px) {
    body.blog #primary.content-area.hron-blog-archive,
    body.archive #primary.content-area.hron-blog-archive {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}


/* 15.2  Page header — "Blog" title, restrained editorial. */
.hron-blog-archive__header {
    margin: 0 0 var(--space-5) 0;
    padding: 0 0 var(--space-3) 0;
    border-bottom: 1px solid var(--bg-panel);
}

.hron-blog-archive__title {
    margin: 0;
    font-family: var(--font-primary-heading);
    font-weight: 600;
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.hron-blog-archive__desc {
    margin-top: var(--space-2);
    font-family: var(--font-secondary-body);
    color: var(--text-muted);
    max-width: 60ch;
}


/* 15.3  Grid — one column on phones, two on tablets+ desktop. */
.hron-card-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

.hron-card-grid__item {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hron-card-grid__item::before { content: none !important; }

@media (min-width: 768px) {
    .hron-card-grid {
        grid-template-columns: 1fr 1fr;
        gap: 48px 40px;
    }
}


/* 15.4  Card — hairline border, no shadow, whitespace separation.
   The article itself carries the border so the focus-ring sits on
   the outer edge. The <a> inside is full-bleed and clickable. */
.hron-card {
    margin: 0;
    padding: 0;
    background: var(--bg-primary);
    border: 1px solid var(--bg-panel);
    border-radius: 0;
    overflow: hidden;
    transition: transform 220ms ease-out, border-color 220ms ease-out;
    box-shadow: none !important;
}

.hron-card__link,
.hron-card__link:link,
.hron-card__link:visited,
.hron-card__link:hover,
.hron-card__link:focus,
.hron-card__link:active {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    color: inherit !important;
    text-decoration: none !important;
    /* Defeat section 14.2's global a { border-bottom: 1px ... } */
    border: 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
}

.hron-card__link:focus-visible {
    outline: 2px solid var(--accent-wink);
    outline-offset: 4px;
}


/* 15.5  Image — uniform 3:2 crop, object-fit: cover.
   Defeats section 13's `.archive a.post-thumbnail { aspect-ratio: 1/1 }`
   by being more specific (.hron-card__image is not a.post-thumbnail). */
.hron-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--bg-panel);
    margin: 0;
}

.hron-card__image img,
.hron-card__image .hron-card__img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    aspect-ratio: 3 / 2 !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    transition: filter 220ms ease-out, transform 320ms ease-out, -webkit-filter 220ms ease-out;
}

.hron-card__image-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(
            45deg,
            transparent 0,
            transparent 12px,
            rgba(0, 0, 0, 0.03) 12px,
            rgba(0, 0, 0, 0.03) 13px
        ),
        var(--bg-panel);
}


/* 15.6  Body — date, title, excerpt. */
.hron-card__body {
    padding: 22px 26px 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
}

.hron-card__date {
    margin: 0;
    font-family: var(--font-secondary-body);
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.2;
}

.hron-card__date time {
    color: inherit;
}

/* 15.7  Title — h2, weight 600, ~1.5rem. The visual anchor. */
.hron-card__title {
    margin: 0;
    font-family: var(--font-primary-heading);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.25;
    letter-spacing: -0.005em;
    color: var(--text-primary);
    transition: color 180ms ease-out;
    /* Long titles must wrap, never overflow on narrow viewports. */
    overflow-wrap: anywhere;
    word-wrap: break-word;
    hyphens: auto;
}

.hron-card__excerpt {
    margin: 4px 0 0 0;
    font-family: var(--font-secondary-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-secondary);
}


/* 15.8  Hover state — subtle. A 2px lift, the title flips to the
   accent, and the grayscale on the image releases. No glow, no
   shadow, true to the rest of the system. */
.hron-card:hover,
.hron-card:focus-within {
    transform: translateY(-2px);
    border-color: var(--text-primary);
}

.hron-card:hover .hron-card__title,
.hron-card:focus-within .hron-card__title {
    color: var(--accent-wink);
}

.hron-card:hover .hron-card__image img,
.hron-card:focus-within .hron-card__image img {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
}


/* 15.9  Mobile tightening — keep titles readable, never overflow. */
@media (max-width: 480px) {
    .hron-card-grid {
        gap: 28px;
    }

    .hron-card__body {
        padding: 18px 20px 22px;
        gap: 8px;
    }

    .hron-card__title {
        font-size: 1.25rem;
        line-height: 1.3;
    }

    .hron-card__excerpt {
        font-size: 0.9375rem;
    }
}


/* 15.10  Pagination — centered editorial pager below the grid.
   Targets the markup output by the_posts_pagination():
   <nav class="navigation pagination">
     <div class="nav-links">
       <a class="prev page-numbers"> ... <span class="page-numbers current"> ... <a class="next page-numbers">
     </div>
   </nav>                                                       */
.hron-pagination {
    margin: var(--space-6) 0 var(--space-4);
    display: flex;
    justify-content: center;
}

.hron-pagination .navigation,
.hron-pagination .pagination {
    width: 100%;
}

.hron-pagination .nav-links {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 14px;
}

.hron-pagination .screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.hron-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    font-family: var(--font-secondary-body);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary) !important;
    background: transparent;
    /* Defeat section 14.2's global a { border-bottom: 1px ... }
       so non-current pager items don't get an accidental rule. */
    border: 0 !important;
    border-bottom: 1px solid transparent !important;
    transition: color 0.12s ease-out, border-bottom-color 0.12s ease-out;
    text-decoration: none !important;
}

.hron-pagination a.page-numbers:hover,
.hron-pagination a.page-numbers:focus-visible {
    color: var(--accent-wink) !important;
    border-bottom: 2px solid var(--accent-wink) !important;
}

.hron-pagination .page-numbers.current {
    color: var(--accent-wink) !important;
    border-bottom: 2px solid var(--accent-wink) !important;
}

.hron-pagination .page-numbers.dots {
    color: var(--text-muted) !important;
    border-bottom: 0 !important;
}

.hron-pagination .prev.page-numbers,
.hron-pagination .next.page-numbers {
    padding: 0 16px;
}


/* 15.11  Belt and braces — when the redesign is live, make sure
   any leftover .entry-content / .readbtn / .post-thumbnail markup
   from the parent (in case a cached page or plugin re-injects it)
   does NOT render inside an .hron-card. */
.hron-card .entry-content,
.hron-card .readbtn,
.hron-card .metaa,
.hron-card > .post-thumbnail,
.hron-card > a.post-thumbnail {
    display: none !important;
}


/* ============================================================
   16. SINGLE POST + BLOG LIST
       Rendered by child single.php, index.php and archive.php
       inside the same .section-page-wrap shell as Section pages,
       so they inherit the 88ch reading column, the persistent
       sidebar and the bright white bookends.
   ============================================================ */

/* 16.1  Single post — header meta line under the title.
   Sits directly below .section-page-title. Small caps, muted. */
.single-post-header {
    margin: 0 0 var(--space-5) 0;
}

.single-post-header .section-page-title {
    margin-bottom: var(--space-2) !important;
}

.single-post-meta {
    margin: 0 !important;
    font-family: var(--font-secondary-body) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: var(--text-quiet) !important;
    line-height: 1.4 !important;
}

.single-post-byline {
    color: var(--text-quiet);
}

.single-post-author {
    color: var(--text-muted);
}

.single-post-dot {
    display: inline-block;
    margin: 0 0.5em;
    color: var(--text-quiet);
}

.single-post-date {
    color: var(--text-muted);
}

/* 16.2  Single post body — body copy already styled by
   .section-page-body + .entry-content, just add a top rule
   so the article feels grounded after the meta line. */
.single-post-body {
    margin-top: 0;
    padding-top: 0;
}

/* 16.3  WordPress wp_link_pages output (paginated posts). */
.single-post-pagination {
    margin: var(--space-5) 0 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--bg-panel);
    font-family: var(--font-secondary-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.single-post-pagination-label {
    color: var(--text-quiet);
    margin-right: 6px;
}

.single-post-pagination a,
.single-post-pagination > span {
    color: var(--text-primary);
    text-decoration: none;
}

.single-post-pagination a:hover {
    color: var(--accent-wink);
}

/* 16.4  Comments — restrained editorial container. */
.single-post-comments {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--bg-panel);
}


/* 16.5  Blog list — header + cards.
   Markup: <header class="post-list-header"> .section-page-title
           <article class="post-list-item"> title / meta / excerpt / link
*/
.post-list-header {
    margin: 0 0 var(--space-5) 0;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--bg-panel);
}

.post-list-header .section-page-title {
    margin: 0 !important;
}

.post-list-description {
    margin-top: var(--space-2);
    color: var(--text-muted);
    max-width: 60ch;
}

.post-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.post-list-item {
    padding: var(--space-4) 0;
    border-top: 1px solid var(--bg-panel);
}

.post-list-item:first-child {
    border-top: 0;
    padding-top: var(--space-2);
}

.post-list-title {
    font-family: var(--font-primary-heading) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.005em !important;
    text-transform: none !important;
    color: var(--text-primary) !important;
    margin: 0 0 var(--space-1) 0 !important;
}

.post-list-title a {
    color: inherit !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
    transition: color 0.1s ease-in-out;
}

.post-list-title a:hover,
.post-list-title a:focus {
    color: var(--accent-wink) !important;
    border-bottom: 0 !important;
}

.post-list-meta {
    margin: 0 0 var(--space-2) 0 !important;
    font-family: var(--font-secondary-body) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: var(--text-quiet) !important;
    line-height: 1.4 !important;
}

.post-list-excerpt {
    margin-bottom: var(--space-2);
    color: var(--text-secondary);
}

.post-list-excerpt p {
    margin: 0 0 var(--space-1) 0;
}

.post-list-link {
    font-family: var(--font-secondary-body) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    text-decoration: none !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid var(--text-primary) !important;
    padding-bottom: 2px;
    transition: color 160ms ease, border-color 160ms ease;
}

.post-list-link:hover {
    color: var(--accent-wink) !important;
    border-bottom-color: var(--accent-wink) !important;
}

.post-list-empty {
    color: var(--text-muted);
}

/* 16.6  Pagination wrapper — inherits the same look as the
   archive grid pager from section 15.10 without duplicating it. */
.post-list-pagination {
    margin: var(--space-6) 0 var(--space-4);
    display: flex;
    justify-content: center;
}

.post-list-pagination .nav-links {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 14px;
}

.post-list-pagination .screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.post-list-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    font-family: var(--font-secondary-body);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary) !important;
    background: transparent;
    border: 0 !important;
    border-bottom: 1px solid transparent !important;
    transition: color 0.12s ease-out, border-bottom-color 0.12s ease-out;
    text-decoration: none !important;
}

.post-list-pagination a.page-numbers:hover,
.post-list-pagination a.page-numbers:focus-visible {
    color: var(--accent-wink) !important;
    border-bottom: 2px solid var(--accent-wink) !important;
}

.post-list-pagination .page-numbers.current {
    color: var(--accent-wink) !important;
    border-bottom: 2px solid var(--accent-wink) !important;
}

.post-list-pagination .page-numbers.dots {
    color: var(--text-muted) !important;
    border-bottom: 0 !important;
}

.post-list-pagination .prev.page-numbers,
.post-list-pagination .next.page-numbers {
    padding: 0 16px;
}


/* ============================================================
   17. DOCUMENT LAYOUT — large desktop fine-tuning
       From 1200 px up, inner pages reuse the same left-anchored
       column as section 5 (no widening, no secondary margin stripe).
       Homepage deliberately omitted from blockquote pulls and rhythm
       bumps that would fight the homepage hero/module stack.
   ============================================================ */
@media (min-width: 1200px) {

    /* 17.2  Locked to global column geometry (duplicate for clarity on XL). */
    body:not(.page-template-page-homepage) .main-content,
    body:not(.page-template-page-homepage) #primary:not(.hron-blog-archive),
    body:not(.page-template-page-homepage) .content-area:not(.hron-blog-archive) {
        margin-left: var(--hron-sidebar-width) !important;
        margin-right: auto !important;
        max-width: min(var(--hron-content-column-max), calc(100vw - var(--hron-sidebar-width))) !important;
        padding-right: 40px !important;
    }

    /* Hairline column removed — reserve right edge stays content padding only. */
    body:not(.page-template-page-homepage) .main-content::after,
    body:not(.page-template-page-homepage) #primary:not(.hron-blog-archive)::after,
    body:not(.page-template-page-homepage) .content-area:not(.hron-blog-archive)::after {
        content: none !important;
        display: none !important;
    }

    /* 17.4  Direct children of .main-content stack above any decoration. */
    body:not(.page-template-page-homepage) .main-content > *,
    body:not(.page-template-page-homepage) #primary:not(.hron-blog-archive) > *,
    body:not(.page-template-page-homepage) .content-area:not(.hron-blog-archive) > * {
        position: relative;
        z-index: 1;
    }

    /* 17.5  Inner reading wrappers */
    .section-page-wrap {
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 17.6  Quotes stay inside the reading column */
    body:not(.page-template-page-homepage) .entry-content blockquote,
    body:not(.page-template-page-homepage) .section-page-body blockquote,
    body:not(.page-template-page-homepage) .content-block blockquote,
    body:not(.page-template-page-homepage) .single-post-body blockquote {
        margin-right: 0 !important;
        padding-right: var(--space-3) !important;
    }

    body:not(.page-template-page-homepage) .entry-content details blockquote,
    body:not(.page-template-page-homepage) .section-page-body details blockquote,
    body:not(.page-template-page-homepage) .content-block details blockquote,
    body:not(.page-template-page-homepage) .single-post-body details blockquote {
        margin-right: 0 !important;
        padding-right: var(--space-2) !important;
    }

    /* 17.7  Footer aligns via section ~8 `.hron-bottombar-inner`; no XL override */

    /* 17.8  Section rhythm */
    .section:not(.home-section) {
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }

    /* 17.9  Heading register */
    body:not(.page-template-page-homepage) .entry-content h1,
    body:not(.page-template-page-homepage) .entry-content h2,
    body:not(.page-template-page-homepage) .section-page-body h1,
    body:not(.page-template-page-homepage) .section-page-body h2,
    body:not(.page-template-page-homepage) .content-block h1,
    body:not(.page-template-page-homepage) .content-block h2 {
        margin-top: 4rem !important;
    }
    body:not(.page-template-page-homepage) .entry-content h1:first-child,
    body:not(.page-template-page-homepage) .entry-content h2:first-child,
    body:not(.page-template-page-homepage) .section-page-body h1:first-child,
    body:not(.page-template-page-homepage) .section-page-body h2:first-child,
    body:not(.page-template-page-homepage) .content-block h1:first-child,
    body:not(.page-template-page-homepage) .content-block h2:first-child {
        margin-top: 0 !important;
    }

    /* 17.10  Margin notes — no flank column anymore; inline only */
    body:not(.page-template-page-homepage) .entry-content .margin-note,
    body:not(.page-template-page-homepage) .entry-content .margin-keyword,
    body:not(.page-template-page-homepage) .section-page-body .margin-note,
    body:not(.page-template-page-homepage) .section-page-body .margin-keyword,
    body:not(.page-template-page-homepage) .content-block .margin-note,
    body:not(.page-template-page-homepage) .content-block .margin-keyword,
    body:not(.page-template-page-homepage) aside.margin-note {
        float: none !important;
        clear: none !important;
        display: inline !important;
        width: auto !important;
        max-width: 100%;
        margin: 0 0 var(--space-2) 0 !important;
        padding: 0 !important;
        font-family: var(--font-secondary-body) !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
        color: var(--text-quiet) !important;
        text-align: left;
        border: 0 !important;
        background: transparent !important;
    }
}

/* ============================================================
   18. ACCORDIONS — <details> / WordPress Details block
       Bauhaus-ish: square hinge marker (no browser triangle),
       panel lift from page, strong night-mode readability.
   ============================================================ */
:root {
    --accordion-surface:           #FFFFFF;
    --accordion-surface-muted:     #FBFBFB;
}

[data-theme='dark'] {
    --accordion-surface:           #1A1F28;
    --accordion-surface-muted:     #151922;
}

.entry-content details,
.section-page-body details,
.content-block details,
.wp-block-details {
    margin: var(--space-3) 0 !important;
    padding: 0 !important;
    border: 1px solid var(--bg-panel) !important;
    background: linear-gradient(
        165deg,
        var(--accordion-surface) 0%,
        var(--accordion-surface-muted) 100%
    ) !important;
    color: var(--text-primary) !important;
    /* Let flex/grid ancestors shrink the panel; avoids horizontal overflow */
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.entry-content details > *,
.section-page-body details > *,
.content-block details > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Summary row — typography + flex hinge -------------------------------- */
.entry-content details > summary,
.section-page-body details > summary,
.content-block details > summary,
.wp-block-details summary.wp-block-details__summary,
.wp-block-details > summary {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    cursor: pointer !important;
    list-style: none !important;
    font-family: var(--font-secondary-body) !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.55px !important;
    text-transform: uppercase !important;
    line-height: 1.45 !important;
    color: var(--text-primary) !important;
    padding: 14px 16px !important;
    margin: 0 !important;
    background: transparent !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

.entry-content details > summary *,
.section-page-body details > summary *,
.content-block details > summary *,
.wp-block-details summary * {
    min-width: 0 !important;
}

.entry-content details > summary::-webkit-details-marker,
.section-page-body details > summary::-webkit-details-marker,
.content-block details > summary::-webkit-details-marker,
.wp-block-details summary::-webkit-details-marker {
    display: none !important;
}

.entry-content details > summary::marker,
.section-page-body details > summary::marker,
.content-block details > summary::marker,
.wp-block-details summary::marker {
    content: none !important;
}

/* Square hinge: outline when closed; solid accent when open ("switch") --- */
.entry-content details > summary::before,
.section-page-body details > summary::before,
.content-block details > summary::before,
.wp-block-details > summary.wp-block-details__summary::before,
.wp-block-details > summary::before {
    content: "" !important;
    flex: 0 0 11px !important;
    width: 11px !important;
    height: 11px !important;
    margin-top: 0.35em !important;
    border: 2px solid var(--text-primary) !important;
    background: transparent !important;
    box-sizing: border-box !important;
    transition:
        background-color 0.14s ease,
        border-color 0.14s ease,
        transform 0.14s ease !important;
}

.entry-content details[open] > summary::before,
.section-page-body details[open] > summary::before,
.content-block details[open] > summary::before,
.wp-block-details[open] > summary.wp-block-details__summary::before,
.wp-block-details[open] > summary::before {
    background: var(--accent-wink) !important;
    border-color: var(--accent-wink) !important;
    transform: rotate(45deg) !important;
}

.entry-content details > summary:hover::before,
.section-page-body details > summary:hover::before,
.content-block details > summary:hover::before,
.wp-block-details > summary:hover::before {
    border-color: var(--accent-wink) !important;
}

.entry-content details > summary:focus-visible,
.section-page-body details > summary:focus-visible,
.content-block details > summary:focus-visible,
.wp-block-details > summary:focus-visible {
    outline: 2px dotted var(--accent-wink) !important;
    outline-offset: 3px !important;
}

/* Body copy inside the accordion — lifts contrast in forged-iron ------- */
.wp-block-details__content,
.entry-content details .wp-block-details__content {
    padding: var(--space-2) var(--space-3) calc(var(--space-3) + 2px) !important;
    border-top: 1px solid var(--bg-panel) !important;
    margin: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

.wp-block-details__content p,
.entry-content details .wp-block-details__content p,
.wp-block-details__content li,
.entry-content details .wp-block-details__content li {
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: var(--text-secondary) !important;
}

[data-theme='dark'] .wp-block-details__content p,
[data-theme='dark'] .entry-content details .wp-block-details__content p,
[data-theme='dark'] .wp-block-details__content li,
[data-theme='dark'] .entry-content details .wp-block-details__content li {
    color: var(--text-secondary) !important;
}

.wp-block-details__content strong,
.wp-block-details__content b,
.entry-content details .wp-block-details__content strong {
    color: var(--text-primary) !important;
}

.wp-block-details__content hr,
.entry-content details .wp-block-details__content hr,
.entry-content details details hr {
    margin: var(--space-3) 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--bg-panel) !important;
}

/* Media — preserve intrinsic aspect ratio (slides, figures, embeds) */
.wp-block-details__content .wp-block-image,
.wp-block-details__content figure.wp-block-image,
.entry-content details .wp-block-details__content .wp-block-image,
.entry-content details .wp-block-details__content figure {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
}

.wp-block-details__content img,
.entry-content details .wp-block-details__content img {
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    vertical-align: middle !important;
}

.wp-block-details__content .wp-block-embed,
.wp-block-details__content .wp-block-embed__wrapper,
.entry-content details .wp-block-details__content .wp-block-embed,
.entry-content details .wp-block-details__content .wp-block-embed .wp-block-embed__wrapper {
    max-width: 100% !important;
}

.wp-block-details__content .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper iframe,
.entry-content details .wp-block-details__content .wp-block-embed.wp-has-aspect-ratio iframe {
    max-width: 100% !important;
}

.wp-block-details__content .wp-block-embed iframe,
.entry-content details .wp-block-details__content iframe {
    max-width: 100% !important;
}

.wp-block-details__content .wp-block-media-text__media img,
.wp-block-details__content .wp-block-gallery img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

.wp-block-details__content figure.wp-block-table,
.wp-block-details__content .wp-block-table {
    overflow-x: auto !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
}

.wp-block-details__content table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
}

.wp-block-details__content pre {
    overflow-x: auto !important;
    max-width: 100% !important;
    white-space: pre;
}

/* Full-bleed Gutenberg widths must stay inside the accordion gutter */
.wp-block-details__content .alignwide,
.wp-block-details__content .alignfull {
    max-width: 100% !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Nested blockquotes — legible, contained (no §17 pull into margin) */
.wp-block-details__content blockquote,
.entry-content details .wp-block-details__content blockquote,
.entry-content details blockquote {
    margin-right: 0 !important;
    margin-left: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
    border-left-width: 2px !important;
    color: var(--text-muted) !important;
    background: color-mix(in srgb, var(--accordion-surface-muted) 40%, transparent) !important;
    padding-left: var(--space-3) !important;
}