/* ===================================================
   SINGLE POST (Naujienos — straipsnis)
   Handle: militra-single-post.
   Deps: militra-post-card, militra-pagination, militra-blog-archive
   -> this file always lands LAST and wins at equal specificity.

   OWNERSHIP: the ONLY .militra-post-card* rule permitted in this file is
   `.militra-single-related .militra-post-card__media { background-color:#fff }`
   (§9). Every other card rule lives in post-card.css. .militra-blog-grid is
   owned by blog-archive.css (a dependency — it always loads first).

   Token convention: ALWAYS the fallback form, var(--color-primary, #ff7544).
   NEVER --boltpress-*. Load-bearing layout numbers stay LITERAL px, because
   the live token scale does NOT equal the rem fallbacks (--spacing-4 renders
   ~12px, --spacing-16 ~64px).

   MEDIA-QUERY ORDER: max-1079 (the single-purpose TOC breakpoint) -> max-999
   -> max-768/min-428 -> max-480 -> prefers-reduced-motion -> print.

   !! NEVER set overflow-x:hidden (or any non-visible overflow) on
   <main>.militra-single, .militra-single__article, .militra-single__container
   or .militra-single__layout. overflow-x:hidden computes overflow-y to `auto`,
   turns the element into a scroll container, and SILENTLY kills position:sticky
   on .militra-toc with no error anywhere. That is why the head band and the
   related band are real full-bleed sections in normal flow (background on the
   section, max-width inner box) instead of a 100vw ::before.
   If a wide figure overflows, fix it with max-width:100% on the FIGURE.
   Never with overflow on a parent.

   The sticky chain, every link load-bearing:
     body
       -> main.militra-single                 (overflow: visible)
       -> article.militra-single__article     (overflow: visible)
       -> div.militra-single__container       (overflow: visible)
       -> div.militra-single__layout          (display:grid; align-items:start  <- MANDATORY)
       -> nav.militra-toc                     (position:sticky; align-self:start)
   No `contain:paint`, no `transform`, no `filter`, no `will-change` on any of
   those five — each creates a containing block and breaks or confines sticky.
   =================================================== */


/* ===================================================
   §0. ROOT VARS
   Declared here AND in blog-archive.css — either file may load alone.
   Identical text in both.
   =================================================== */

:root {
    /* The header is position:fixed, padding:39px 0, around an inner container of
       height: var(--header-height) = 49px  ->  127px painted at desktop. */
    --militra-header-total: calc(var(--header-height, 49px) + 78px); /* 127px */

    /* Prose + rail geometry. LITERAL px on purpose. */
    --militra-prose: 704px;
    --militra-rail: 240px;
    --militra-gutter: 64px;

    /* Prose palette. */
    --militra-prose-text: #3f4654;
    --militra-prose-head: var(--color-headings-general, #252a36);
    --militra-prose-muted: var(--color-text-muted, #797979);
    --militra-hairline: var(--color-neutral-200, #e5e7eb);
    --militra-tint: var(--color-background-alt, #f9f3ee);
}

@media (max-width: 768px) {
    :root {
        /* The mobile header padding drops to 27px -> 103px painted. */
        --militra-header-total: calc(var(--header-height, 49px) + 54px);
    }
}

/* Smooth scroll. NOTHING in the theme sets this today — we own it. Declared
   here only (never in blog-archive.css) to avoid a duplicate declaration.
   The anchor offset itself is scroll-margin-top on the headings (§7). */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

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


/* ===================================================
   §1. SHELL
   =================================================== */

.militra-single {
    background-color: var(--color-background, #ffffff);
    overflow: visible; /* see the header comment — never change this */
}

.militra-single__article {
    overflow: visible;
}

.militra-single__container {
    /* 704 prose + 2x240 rail + 2x64 gutter + 2x24 padding */
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 24px 96px;
    overflow: visible;
}


/* ===================================================
   §2. READING-PROGRESS BAR
   Welded to the fixed header's bottom edge. transform only — never `width`
   (no layout, no paint thrash).
   =================================================== */

.militra-progress {
    position: fixed;
    top: calc(var(--militra-notice-offset, 0px) + var(--militra-header-total, 127px));
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1001; /* the header is 1000 */
    pointer-events: none;
    background: transparent; /* no track — the bar is a hairline of ink, not a gauge */
    opacity: 0; /* JS-failure guard: a dead 0% line can never paint */
    transition: opacity 0.2s ease;
}

.militra-progress.is-ready {
    opacity: 1;
}

.militra-progress__bar {
    height: 100%;
    width: 100%;
    background-color: var(--color-primary, #ff7544);
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}

/* NOTE: JS REMOVES .militra-progress from the DOM when the article is shorter
   than the viewport. This CSS must not assume the element exists. */


/* ===================================================
   §3. HEAD BAND
   A REAL full-bleed section in normal flow (the .faq-section idiom).
   No ::before, no 100vw, no negative margins, no overflow guard.
   Tinted with or without a featured image.
   =================================================== */

.militra-single__head {
    background-color: var(--militra-tint, #f9f3ee);
    padding: 72px 24px 40px;
    border-bottom: 1px solid rgba(37, 42, 54, 0.06);
}

/* Room for the hero plate to pull up into. */
.militra-single__head--has-hero {
    padding-bottom: 104px;
}

.militra-single__head-inner {
    /* IDENTICAL to the prose measure — no "optical overhang". */
    max-width: var(--militra-prose, 704px);
    margin: 0 auto;
    /* MANDATORY. The head band's first two children — the back-link (inline-flex)
       and the kicker (inline-block) — are both INLINE-LEVEL. In a plain block
       container they share one anonymous line box, so the page would open with
       "<- Visos naujienos   KRAUJOSPUDIS" jammed onto a single row, the line box
       inflated by both of their bottom margins. A flex column is what the children
       already assume (the kicker has carried align-self:flex-start from the start).
       align-items:stretch — NOT flex-start — so the h1, the standfirst and the meta
       row keep the full measure and the meta's border-top still spans it. */
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* The two chips are shrink-to-fit; everything below them keeps the measure. */
.militra-single__back,
.militra-single__kicker {
    align-self: flex-start;
}

/* --- back-link: an <a>, never a <button>. Reversed arrow. --- */
.militra-single__back {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2, 0.5rem);
    font-family: var(--font-family-body);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--militra-prose-muted, #797979); /* beats the parent global a{color:#797979} explicitly */
    text-decoration: none;
    margin-bottom: 32px;
    transition: color 0.2s ease;
    font-variation-settings: 'opsz' 14;
}

.militra-single__back:hover {
    color: var(--color-primary, #ff7544);
}

.militra-single__back:hover .militra-single__back-arrow {
    transform: translateX(-4px);
}

.militra-single__back:focus-visible {
    outline: 2px solid var(--color-primary, #ff7544);
    outline-offset: 4px;
    border-radius: var(--border-radius-sm, 4px);
}

.militra-single__back-arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

/* --- kicker: the SAME pill as the card's, so the article announces itself
       in the card's own voice. Dark-on-peach ~11:1. --- */
.militra-single__kicker {
    display: inline-block;
    align-self: flex-start;
    max-width: 100%;
    font-family: var(--font-family-body);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.025em; /* the site's only letter-spacing */
    color: var(--color-accent, #252a36);
    background-color: rgba(255, 117, 68, 0.10);
    border-radius: var(--border-radius-full, 9999px);
    padding: var(--spacing-1, 0.25rem) var(--spacing-3, 0.75rem);
    margin: 0 0 20px 0;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

/* The bare <span> variant ("Straipsnis") inherits everything above and has no hover. */
a.militra-single__kicker:hover {
    background-color: rgba(255, 117, 68, 0.20);
}

a.militra-single__kicker:focus-visible {
    outline: 2px solid var(--color-primary, #ff7544);
    outline-offset: 3px;
}

.militra-single__title {
    font-family: var(--font-family-heading);
    font-size: 44px;
    line-height: 1.18;
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-headings-h1, #252a36);
    margin: 0;
    letter-spacing: -0.01em; /* the ONE place negative tracking is allowed — a 44px display line */
    overflow-wrap: break-word; /* long Lithuanian compounds */
    font-variation-settings: 'opsz' 14;
}

.militra-single__standfirst {
    font-family: var(--font-family-body);
    font-size: 20px;
    line-height: 1.7;
    font-weight: var(--font-weight-normal, 400);
    color: var(--militra-prose-muted, #797979);
    margin: 20px 0 0 0;
    max-width: 60ch;
    font-variation-settings: 'opsz' 14;
}

/* --- THE DATELINE. No pills, no icons, no clock glyph. --- */
.militra-single__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2, 0.5rem);
    margin: 28px 0 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--militra-hairline, #e5e7eb);
    font-family: var(--font-family-body);
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--militra-prose-muted, #797979);
    font-variation-settings: 'opsz' 14;
}

.militra-single__meta-item {
    white-space: nowrap;
}

.militra-single__meta-sep {
    color: var(--color-neutral-300, #d1d5db);
    user-select: none;
}

.militra-single__meta-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.militra-single__meta-link:hover {
    color: var(--color-primary, #ff7544);
    border-bottom-color: var(--color-primary, #ff7544);
}

.militra-single__meta-link:focus-visible {
    outline: 2px solid var(--color-primary, #ff7544);
    outline-offset: 3px;
    border-radius: var(--border-radius-sm, 4px);
}

/* The reading-time item carries title="Skaitymo trukmė" from PHP. It is a plain
   word — deliberately NO cursor:help and NO dotted underline. */


/* ===================================================
   §4. HERO PLATE
   Omitted entirely by PHP when there is no featured image. It pulls UP into
   the tinted band with a negative top margin in normal flow — no 100vw,
   no overflow guard.
   =================================================== */

.militra-single__hero {
    max-width: 1120px;
    margin: -64px auto 56px;
    padding: 0 24px;
}

.militra-single__hero-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1; /* the registered militra-post-hero is 1280x640 */
    object-fit: cover;
    border-radius: var(--border-radius-md, 15px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* the site's ONE canonical shadow. No second one. */
    background-color: var(--militra-tint, #f9f3ee);
}

@supports not (aspect-ratio: 2 / 1) {
    .militra-single__hero-img {
        height: auto;
    }
}

.militra-single__hero-caption {
    margin: 12px 0 0 0;
    font-family: var(--font-family-body);
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.6;
    color: var(--militra-prose-muted, #797979);
    text-align: center;
    font-variation-settings: 'opsz' 14;
}

/* No hero -> the container supplies its own top air. */
.militra-single__head:not(.militra-single__head--has-hero) + .militra-single__container {
    padding-top: 56px;
}

/* Defensive: the hero already carries 56px of bottom margin. */
.militra-single__hero + .militra-single__container {
    padding-top: 0;
}


/* ===================================================
   §5. THE JOURNAL SPREAD (the 3-track grid)
   =================================================== */

.militra-single__layout {
    display: grid;
    grid-template-columns:
        minmax(160px, 1fr)                     /* TRACK 1 — the TOC rail */
        minmax(0, var(--militra-prose, 704px)) /* TRACK 2 — the prose */
        minmax(160px, 1fr);                    /* TRACK 3 — INTENTIONALLY EMPTY */
    /* FIXED, not clamp(32px, 4vw, 64px). The gutter is the SINGLE SOURCE OF TRUTH
       for the figure pull in §7 (which must land flush against the rails, never
       under the sticky TOC). A viewport-relative gutter would let the pull and the
       gap drift apart at every width — the pull would overhang the rail by
       88 - gap px, and .militra-toc is position:sticky, i.e. a POSITIONED element,
       so it paints ON TOP of the figure. Pin them both to --militra-gutter. */
    column-gap: var(--militra-gutter, 64px);
    /* MANDATORY. Without it a grid item defaults to align-self:stretch, the
       stretched item has no room to move, and position:sticky does NOTHING —
       with no error anywhere. */
    align-items: start;
    overflow: visible; /* never touch this */
}

/* TRACK 3 is empty BY DESIGN: it exists so the prose is optically CENTRED on the
   page rather than shoved right by the rail. Do not put anything in it and do not
   delete it — the grid template supplies it and it costs zero markup.
   minmax(0, …) on every track is load-bearing: long Lithuanian compounds and a
   wide table blow out a bare 1fr / a fixed track. */

.militra-single__layout > .militra-toc {
    grid-column: 1;
}

.militra-single__body {
    grid-column: 2;
    min-width: 0;
}

/* NO-TOC COLLAPSE — one boolean, no empty rail.
   PHP adds --no-toc when count($toc) < 2, the exact condition on which
   militra_render_toc() emits nothing. No ghost gap, no visibility:hidden. */
.militra-single__layout--no-toc {
    grid-template-columns: minmax(0, var(--militra-prose, 704px));
    justify-content: center;
}

/* MANDATORY COMPANION to the rule above, and the reason the collapse is TWO rules
   and not one. The grid now has exactly ONE explicit track, but .militra-single__body
   still says `grid-column: 2` (0,1,0) — which would place the prose on column line
   2 -> 3, a track that does not exist, so the grid would fabricate an IMPLICIT auto
   column for it. The result at >=1080px: the 704px explicit track renders EMPTY on
   the left and the prose is squeezed into the remainder on the right, off-centre and
   far narrower than the measure the whole type scale is built around.
   (0,2,0) beats the base rule. It is a no-op at <=1079px, where the media query
   already forces grid-column:1 — the reason this bug is invisible on mobile and
   bites ONLY on desktop, on exactly the posts with 0 or 1 headings, i.e. the common
   short-news case. */
.militra-single__layout--no-toc > .militra-single__body {
    grid-column: 1;
}


/* ===================================================
   §6. THE TOC RAIL
   =================================================== */

.militra-toc {
    position: sticky;
    top: calc(var(--militra-header-total, 127px) + var(--militra-notice-offset, 0px) + 32px);
    align-self: start;  /* belt AND braces alongside the parent's align-items:start */
    justify-self: end;  /* the rail hugs the prose column, not the page edge */
    width: 100%;
    max-width: var(--militra-rail, 240px);
    min-width: 0;
    /* 20+ headings: the rail scrolls INTERNALLY. The page is never dragged. */
    max-height: calc(100vh - var(--militra-header-total, 127px) - var(--militra-notice-offset, 0px) - 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--color-neutral-300, #d1d5db) transparent;
    padding-bottom: 8px;
    /* NO bottom-fade mask. It was written for the 20-heading rail that actually
       scrolls, but CSS cannot ask "am I overflowing?" — so it applied at ALL times,
       and when the TOC FITS (3-6 headings: the normal case) the element's height IS
       its content height, so the 24px ramp fell on real content and washed out the
       LAST entry's baseline and descenders — the tails of g/p/ų/ž, which Lithuanian
       is full of. The last chapter read as disabled or truncated on every article.
       The `scrollbar-width: thin` + the ::-webkit-scrollbar thumb below already
       signal scrollability on the rare overflowing rail, without lying about the
       common one. (A mask can also create a containing block in some engines, which
       is a second, independent reason not to hang one on the sticky rail.) */
}

.militra-toc::-webkit-scrollbar {
    width: 4px;
}

.militra-toc::-webkit-scrollbar-thumb {
    background: var(--color-neutral-300, #d1d5db);
    border-radius: 4px;
}

/* It is an <h2>. This class selector in a later-loaded sheet already beats the
   parent's h2 globals — do NOT add !important. */
.militra-toc__title {
    font-family: var(--font-family-body);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--militra-prose-muted, #797979);
    /* the 16px left indent aligns it with the LINK TEXT, not the rail line */
    margin: 0 0 16px 16px;
    font-variation-settings: 'opsz' 14;
}

/* --- the hairline rail + the 2px orange tick: the only accent in the component --- */
.militra-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid var(--militra-hairline, #e5e7eb);
}

/* NO border on the sublist — the h3's tick reaches back to the MAIN rail. */
.militra-toc__sublist {
    list-style: none;
    margin: 0;
    padding: 0 0 0 16px;
}

.militra-toc__item {
    margin: 0;
}

.militra-toc__link {
    display: block;
    position: relative; /* the tick's containing block */
    padding: 8px 0 8px 16px;
    font-family: var(--font-family-body);
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.5;
    font-weight: var(--font-weight-normal, 400);
    color: var(--militra-prose-muted, #797979);
    text-decoration: none;
    overflow-wrap: break-word;
    transition: color 0.2s ease;
    font-variation-settings: 'opsz' 14;
}

.militra-toc__link::before {
    content: '';
    position: absolute;
    left: -1px; /* sits exactly ON the 1px rail */
    top: 6px;
    bottom: 6px;
    width: 2px;
    border-radius: 2px;
    background-color: transparent;
    transition: background-color 0.2s ease;
}

.militra-toc__item--h3 .militra-toc__link {
    padding-left: 16px;
    font-size: 13px;
}

/* 16px sublist indent + the 1px rail -> the tick lands back on the MAIN rail. */
.militra-toc__item--h3 .militra-toc__link::before {
    left: -17px;
}

.militra-toc__link:hover {
    color: var(--militra-prose-head, #252a36);
}

.militra-toc__link:focus-visible {
    outline: 2px solid var(--color-primary, #ff7544);
    outline-offset: 2px;
    border-radius: var(--border-radius-sm, 4px);
}

/* --- STATE. The ONLY two state classes JS sets on a link. --- */
.militra-toc__link.is-active {
    color: var(--militra-prose-head, #252a36);
    font-weight: var(--font-weight-semibold, 600);
}

.militra-toc__link.is-active::before {
    background-color: var(--color-primary, #ff7544);
}

.militra-toc__link.is-active-parent {
    color: var(--militra-prose-head, #252a36);
    font-weight: var(--font-weight-medium, 500);
}

/* is-active-parent gets COLOUR + WEIGHT ONLY. It NEVER gets a tick — exactly one
   tick is visible on the rail at any moment, and it marks where you ARE, not which
   chapter you are in. */
.militra-toc__link.is-active-parent::before {
    background-color: transparent;
}

/* JS also mirrors aria-current="location" on the .is-active link. Do NOT style
   [aria-current] — the class is the styling hook, the attribute is the a11y hook. */

/* --- THE TOGGLE BUTTON ---
   Ships display:none at ALL widths. Only `.militra-toc--enhanced` inside the
   <=1079px media query reveals it. Progressive enhancement in the correct order:
   no JS -> visible list, no dead button. */
.militra-toc__toggle {
    display: none;
}

/* PARENT-THEME ORANGE-BUTTON BLEED GUARD.
   A future boltpress paints `button:hover { background:#ff7544 }` at (0,1,1).
   These selectors are (0,2,0) and beat it. The compat bridge is disabled today;
   ship this anyway (CLAUDE.md §3). */
.militra-toc .militra-toc__toggle,
.militra-toc .militra-toc__toggle:hover,
.militra-toc .militra-toc__toggle:focus,
.militra-toc .militra-toc__toggle:active {
    background: transparent;
    background-color: transparent;
    border: 0;
    box-shadow: none;
    color: inherit;
    font: inherit;
    padding: 0;
    margin: 0;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.militra-toc .militra-toc__toggle:focus-visible {
    outline: 2px solid var(--color-primary, #ff7544);
    outline-offset: 4px;
    border-radius: var(--border-radius-sm, 4px);
}

.militra-toc__chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.militra-toc__toggle[aria-expanded="true"] .militra-toc__chevron {
    transform: rotate(180deg);
}

/* !! CSS MUST NOT SET `display` ON .militra-toc__list. JS collapses it with the
   `hidden` ATTRIBUTE, and ANY display declaration in a stylesheet beats [hidden]'s
   UA display:none — the mobile toggle would appear to do nothing. If a display is
   ever unavoidable it MUST be paired with `.militra-toc__list[hidden]{display:none}`
   in this same file. There is no data-collapsed attribute anywhere in this build. */


/* ===================================================
   §7. THE PROSE. THIS IS THE HEART OF THE PAGE.
   Measure ~74ch at 19px inside the 704px track — inside the 65-75ch target.
   =================================================== */

.militra-post-content {
    font-family: var(--font-family-body);
    font-size: 19px;
    line-height: 1.75; /* 33.25px baseline. THE vertical rhythm unit. */
    font-weight: var(--font-weight-normal, 400);
    color: var(--militra-prose-text, #3f4654);
    overflow-wrap: break-word;
    hyphens: manual;
    max-width: 100%;
    min-width: 0;
    font-variation-settings: 'opsz' 14;
}

/* --- VERTICAL RHYTHM: one rule, expressed as a flow. Everything below only
       OVERRIDES this baseline; nothing re-states it. --- */
.militra-post-content > * {
    margin-top: 0;
    margin-bottom: 28px;
}

.militra-post-content > *:first-child {
    margin-top: 0;
}

.militra-post-content > *:last-child {
    margin-bottom: 0;
}

/* --- HEADINGS: the anchor targets. The scroll-margin is the single most
       important declaration in this file. --- */
.militra-post-content h2[id],
.militra-post-content h3[id],
.militra-post-content h4[id],
.militra-post-content :target {
    scroll-margin-top: calc(var(--militra-header-total, 127px) + var(--militra-notice-offset, 0px) + 24px);
}

/* Use --militra-notice-OFFSET (the live, scroll-SHRINKING value sticky-header.js
   writes to :root), NEVER --militra-notice-height: during a mid-page anchor jump
   the page is already scrolled, the offset is 0, and adding the full notice height
   would overshoot by exactly the notice's height. */

.militra-post-content h2 {
    font-family: var(--font-family-heading);
    font-size: 30px;
    line-height: 1.3;
    font-weight: var(--font-weight-bold, 700);
    color: var(--militra-prose-head, #252a36);
    margin-top: 64px; /* a chapter break — nearly 2 baselines of air above */
    margin-bottom: 20px;
    padding-top: 28px;
    border-top: 1px solid var(--militra-hairline, #e5e7eb); /* NEUTRAL, NOT ORANGE (restraint ledger) */
    font-variation-settings: 'opsz' 14;
}

.militra-post-content > h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.militra-post-content h3 {
    font-family: var(--font-family-heading);
    font-size: 23px;
    line-height: 1.4;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--militra-prose-head, #252a36);
    margin-top: 44px;
    margin-bottom: 14px;
    font-variation-settings: 'opsz' 14;
}

.militra-post-content h4 {
    font-family: var(--font-family-body);
    font-size: 17px;
    line-height: 1.5;
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: 0.025em;
    text-transform: uppercase;
    color: var(--militra-prose-head, #252a36);
    margin-top: 36px;
    margin-bottom: 10px;
    font-variation-settings: 'opsz' 14;
}

.militra-post-content h5,
.militra-post-content h6 {
    font-family: var(--font-family-body);
    font-size: 16px;
    line-height: 1.6;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--militra-prose-head, #252a36);
    margin-top: 32px;
    margin-bottom: 8px;
}

/* A heading immediately after a heading must not double-space. */
.militra-post-content h2 + h3,
.militra-post-content h3 + h4 {
    margin-top: 20px;
}

/* --- PARAGRAPHS + INLINE --- */
.militra-post-content p {
    margin-bottom: 28px;
}

/* Bold gets DARKER, not just heavier — that is what makes it read as emphasis
   in a 19px grey-blue body. */
.militra-post-content strong,
.militra-post-content b {
    font-weight: var(--font-weight-semibold, 600);
    color: var(--militra-prose-head, #252a36);
}

.militra-post-content em,
.militra-post-content i {
    font-style: italic;
}

.militra-post-content mark {
    background-color: rgba(255, 117, 68, 0.16);
    color: inherit;
    padding: 0 0.15em;
    border-radius: 2px;
}

.militra-post-content small {
    font-size: 0.85em;
    color: var(--militra-prose-muted, #797979);
}

/* line-height:0 keeps sup/sub from breaking the 1.75 rhythm. */
.militra-post-content sub,
.militra-post-content sup {
    font-size: 0.72em;
    line-height: 0;
}

.militra-post-content abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
}

/* --- LINKS: a CONSIDERED underline. Not `text-decoration:underline` and not a
       border-bottom hack. The link is INK — orange is the INTERACTION, not the
       resting state. --- */
.militra-post-content a {
    color: var(--militra-prose-head, #252a36);
    text-decoration: underline;
    text-decoration-color: var(--color-primary, #ff7544);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px; /* clears the descenders of g/p/ų/ž — the whole point */
    text-decoration-skip-ink: auto;
    transition: color 0.2s ease, text-decoration-thickness 0.2s ease, background-color 0.2s ease;
}

.militra-post-content a:hover {
    color: var(--color-primary, #ff7544);
    text-decoration-thickness: 2px;
}

.militra-post-content a:focus-visible {
    outline: 2px solid var(--color-primary, #ff7544);
    outline-offset: 2px;
    border-radius: var(--border-radius-sm, 4px);
    text-decoration: none;
}

@supports not (text-underline-offset: 3px) {
    .militra-post-content a {
        text-decoration: none;
        border-bottom: 1px solid var(--color-primary, #ff7544);
    }
}

/* An <a> that only wraps an image must not get an underline. */
.militra-post-content a:has(> img) {
    text-decoration: none;
}

.militra-post-content figure a,
.militra-post-content .wp-block-image a {
    text-decoration: none;
}

/* --- LISTS. The bullets/counters are one of the six sanctioned uses of the accent.
       We draw our own markers so they can be coloured and sat on the 1.75 baseline. --- */
.militra-post-content ul,
.militra-post-content ol {
    margin-bottom: 28px;
    padding-left: 0;
    list-style: none;
}

.militra-post-content li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px; /* TIGHTER than the paragraph gap. A list is one thought, not four. */
    line-height: 1.75;
}

.militra-post-content li:last-child {
    margin-bottom: 0;
}

.militra-post-content ul > li::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 0.72em; /* optical centre of the first line at 19px/1.75 */
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-primary, #ff7544);
}

.militra-post-content ol {
    counter-reset: militra-ol;
}

.militra-post-content ol > li {
    counter-increment: militra-ol;
}

.militra-post-content ol > li::before {
    content: counter(militra-ol) '.';
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    text-align: right;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-primary, #ff7544);
    font-variant-numeric: tabular-nums; /* 9. and 10. align */
}

/* NESTED LISTS — must not inherit the parent's counter or re-open the top gap. */
.militra-post-content li > ul,
.militra-post-content li > ol {
    margin-top: 10px;
    margin-bottom: 0;
    padding-left: 4px;
}

.militra-post-content li > ol {
    counter-reset: militra-ol; /* a nested <ol> restarts at 1 */
}

/* Level-2 bullet = hollow ring. Level 3+ reuses it — three levels is already too many. */
.militra-post-content ul ul > li::before {
    background-color: transparent;
    box-shadow: inset 0 0 0 1.5px var(--color-primary, #ff7544);
}

.militra-post-content li > p {
    margin-bottom: 10px;
}

.militra-post-content li > p:last-child {
    margin-bottom: 0;
}

/* Definition lists — rare, but the editor can emit them. */
.militra-post-content dl {
    margin-bottom: 28px;
}

.militra-post-content dt {
    font-weight: var(--font-weight-semibold, 600);
    color: var(--militra-prose-head, #252a36);
    margin-top: 16px;
}

.militra-post-content dd {
    margin: 4px 0 0 0;
    padding-left: 16px;
    border-left: 1px solid var(--militra-hairline, #e5e7eb);
}

/* --- BLOCKQUOTE: a rule, not a card. The accent's second sanctioned use. --- */
.militra-post-content blockquote,
.militra-post-content .wp-block-quote {
    margin: 44px 0;
    padding: 4px 0 4px 28px;
    border-left: 2px solid var(--color-primary, #ff7544);
    background: none; /* NO peach card, NO shadow, NO quote glyph */
    font-family: var(--font-family-heading);
    font-size: 21px;
    line-height: 1.6;
    font-weight: var(--font-weight-normal, 400);
    font-style: normal; /* Lithuanian sets badly in a long italic run */
    color: var(--militra-prose-head, #252a36);
}

.militra-post-content blockquote p {
    margin-bottom: 16px;
}

.militra-post-content blockquote p:last-child {
    margin-bottom: 0;
}

.militra-post-content blockquote cite,
.militra-post-content .wp-block-quote cite {
    display: block;
    margin-top: 14px;
    font-family: var(--font-family-body);
    font-size: var(--font-size-sm, 0.875rem);
    font-style: normal;
    font-weight: var(--font-weight-medium, 500);
    color: var(--militra-prose-muted, #797979);
}

.militra-post-content .wp-block-pullquote {
    border-left: 0;
    border-top: 2px solid var(--color-primary, #ff7544);
    border-bottom: 2px solid var(--color-primary, #ff7544);
    padding: 28px 0;
    text-align: center;
}

/* --- IMAGES / FIGURES / CAPTIONS --- */
.militra-post-content img {
    display: block;
    /* THE overflow fix. Never `overflow:hidden` on a parent — it kills the sticky rail. */
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-md, 15px);
}

.militra-post-content figure,
.militra-post-content .wp-block-image {
    margin: 44px 0;
    max-width: 100%;
}

.militra-post-content figcaption,
.militra-post-content .wp-block-image figcaption,
.militra-post-content .wp-caption-text {
    margin: 12px 0 0 0;
    font-family: var(--font-family-body);
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.6;
    color: var(--militra-prose-muted, #797979);
    text-align: left; /* left, not centred — it reads as annotation, not as a title */
    font-variation-settings: 'opsz' 14;
}

/* THE FIGURE PULL — DIRECT CHILDREN ONLY, >=1080px ONLY. 704 -> 832.
   The pull is EXACTLY ONE GUTTER each side, read from the same --militra-gutter
   that §5 gives to the layout's column-gap. That is not a stylistic choice, it is
   a hard constraint: the LEFT rail is NOT empty — it holds the TOC, which is
   justify-self:end, so its right edge sits exactly one gutter from the prose. A
   pull WIDER than the gutter slides the figure UNDER the rail, and because
   .militra-toc is position:sticky (a positioned element) it paints ABOVE the
   non-positioned figure: long wrapped Lithuanian TOC labels would sit on top of
   the photograph. At exactly one gutter the figure lands flush against both rails
   and can never reach either. Do not re-widen it, and do not make the gutter
   viewport-relative — the two must move together or not at all. */
@media (min-width: 1080px) {
    .militra-post-content > figure,
    .militra-post-content > .wp-block-image,
    .militra-post-content > .wp-block-gallery,
    .militra-post-content > .wp-block-embed {
        width: calc(100% + (2 * var(--militra-gutter, 64px)));
        margin-inline: calc(-1 * var(--militra-gutter, 64px));
        max-width: none;
    }

    /* …and the alignment classes are EXPLICITLY reset. Full-bleed inside a grid
       track is a bug factory. */
    .militra-post-content > .alignwide,
    .militra-post-content > .alignfull,
    .militra-post-content > .alignleft,
    .militra-post-content > .alignright,
    .militra-post-content > .alignwide.wp-block-image,
    .militra-post-content > .alignfull.wp-block-image {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        float: none;
    }
}

.militra-post-content .alignwide,
.militra-post-content .alignfull,
.militra-post-content .alignleft,
.militra-post-content .alignright {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    float: none;
}

.militra-post-content .aligncenter,
.militra-post-content .wp-block-image.aligncenter {
    margin-inline: auto;
    text-align: center;
}

.militra-post-content .aligncenter figcaption {
    text-align: center;
}

/* Legacy classic-editor caption classes. */
.militra-post-content .wp-caption {
    max-width: 100%;
    margin: 44px 0;
}

.militra-post-content .wp-caption img {
    width: 100%;
}

.militra-post-content .alignnone {
    margin-inline: 0;
}

/* Galleries / embeds. */
.militra-post-content .wp-block-gallery {
    margin: 44px 0;
}

.militra-post-content .wp-block-embed__wrapper iframe,
.militra-post-content iframe,
.militra-post-content video {
    max-width: 100%;
    border-radius: var(--border-radius-md, 15px);
}

.militra-post-content .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper {
    position: relative;
}

/* --- TABLES: overflow handled in CSS, NEVER by wrapping in JS at init (that is a
       guaranteed CLS). THE BODY MUST NEVER SCROLL HORIZONTALLY — that is what the
       figure-level overflow-x:auto buys. --- */
.militra-post-content .wp-block-table,
.militra-post-content figure.wp-block-table {
    margin: 44px 0;
    overflow-x: auto; /* on the FIGURE — never on an ancestor of the sticky rail */
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.militra-post-content table {
    width: 100%;
    min-width: 480px; /* forces the scroller instead of crushing 4 columns to 40px */
    border-collapse: collapse;
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.6;
}

/* A bare <table> with no figure wrapper. */
.militra-post-content > table {
    display: block;
    overflow-x: auto;
}

.militra-post-content th,
.militra-post-content td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--militra-hairline, #e5e7eb);
    vertical-align: top;
}

.militra-post-content thead th {
    font-weight: var(--font-weight-semibold, 600);
    color: var(--militra-prose-head, #252a36);
    background-color: var(--militra-tint, #f9f3ee);
    border-bottom: 1px solid var(--color-neutral-300, #d1d5db);
    white-space: nowrap;
}

.militra-post-content tbody tr:last-child td {
    border-bottom: 0;
}

.militra-post-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background-color: rgba(249, 243, 238, 0.5);
}

/* --- CODE --- */
.militra-post-content code,
.militra-post-content kbd,
.militra-post-content samp {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.85em;
    background-color: var(--color-neutral-100, #f4f5f7);
    color: var(--militra-prose-head, #252a36);
    padding: 0.15em 0.4em;
    border-radius: var(--border-radius-sm, 4px);
    overflow-wrap: break-word;
}

.militra-post-content pre,
.militra-post-content .wp-block-code {
    margin: 36px 0;
    padding: 20px 24px;
    background-color: var(--color-neutral-100, #f4f5f7);
    border: 1px solid var(--militra-hairline, #e5e7eb);
    border-radius: var(--border-radius-md, 15px);
    overflow-x: auto; /* on the PRE itself */
    font-size: 14px;
    line-height: 1.6;
    tab-size: 4;
}

.militra-post-content pre code {
    background: none;
    padding: 0;
    font-size: inherit;
    border-radius: 0;
}

/* --- HR: a rest, not a divider. --- */
.militra-post-content hr,
.militra-post-content .wp-block-separator {
    margin: 56px auto;
    width: 64px;
    height: 1px;
    border: 0;
    background-color: var(--color-neutral-300, #d1d5db);
    opacity: 1;
}

.militra-post-content .wp-block-separator.is-style-wide {
    width: 100%;
}

/* --- wp_link_pages() output (a post split with <!--nextpage-->) ---
   It does NOT inherit pagination.css's pill, and it never could: every rule there
   is scoped to `.pagination .page-numbers`, but wp_link_pages() emits core's OTHER
   pager vocabulary — `<a class="post-page-numbers">` and
   `<span class="post-page-numbers current" aria-current="page">`. The shell
   (.pagination + .pagination .nav-links: the flex row, the gap, the hairline)
   DOES apply, because .militra-post-pages also carries the `pagination` class — so
   only the children need re-boxing. The declarations below are a deliberate,
   value-for-value mirror of pagination.css's `.page-numbers` box, so the three
   pagers on this site (search, archive, split post) stay pixel-identical.
   Do NOT "fix" this by touching pagination.css's shared rules.
   The `> a` / `> span` pair is written to element, not to `.post-page-numbers`, so
   it also holds on the pre-5.1 markup where the current span carried no class. */
.militra-post-pages {
    margin-top: 48px;
}

.militra-post-pages .nav-links > a,
.militra-post-pages .nav-links > span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
    border: 1px solid var(--color-neutral-200, #e5e7eb);
    border-radius: var(--border-radius-sm, 4px);
    font-family: var(--font-family-body);
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-text, #777e90);
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.militra-post-pages .nav-links > a:hover {
    border-color: var(--color-primary, #ff7544);
    color: var(--color-primary, #ff7544);
}

.militra-post-pages .nav-links > a:focus-visible {
    outline: 2px solid var(--color-primary, #ff7544);
    outline-offset: 2px;
}

/* The current page. (0,3,0) — beats the (0,2,1) box rule above.
   Same white-on-orange as pagination.css's `.current`, on purpose: the pagers must
   match. It carries the SAME inherited ~2.6:1 contrast failure, flagged to the
   owner and to be fixed on search + blog + this rule TOGETHER, in its own run. */
.militra-post-pages .nav-links > [aria-current] {
    background-color: var(--color-primary, #ff7544);
    border-color: var(--color-primary, #ff7544);
    color: #ffffff;
}


/* ===================================================
   §8. ARTICLE FOOT — tags / share / postnav
   =================================================== */

.militra-single__foot {
    margin-top: 64px;
    padding-top: 32px;
    border-top: 1px solid var(--militra-hairline, #e5e7eb);
}

/* No related band -> the foot must not sit on the footer's chin. */
.militra-single__article:last-child .militra-single__foot {
    margin-bottom: 32px;
}

.militra-single-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2, 0.5rem);
    margin-bottom: 24px;
}

.militra-single-tags__label,
.militra-single-share__label {
    font-family: var(--font-family-body);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--militra-prose-muted, #797979);
    margin-right: 4px;
    font-variation-settings: 'opsz' 14;
}

.militra-single-tags__tag {
    display: inline-block;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-accent, #252a36);
    background-color: var(--color-neutral-100, #f4f5f7);
    border-radius: var(--border-radius-full, 9999px);
    padding: 5px 14px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.militra-single-tags__tag:hover {
    background-color: rgba(255, 117, 68, 0.12);
    color: var(--color-primary, #ff7544);
}

.militra-single-tags__tag:focus-visible {
    outline: 2px solid var(--color-primary, #ff7544);
    outline-offset: 2px;
}

.militra-single-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2, 0.5rem);
    margin-bottom: 48px;
}

.militra-single-share__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--militra-hairline, #e5e7eb);
    border-radius: var(--border-radius-full, 9999px);
    color: var(--militra-prose-muted, #797979);
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.militra-single-share__link svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.militra-single-share__link:hover {
    color: var(--color-primary, #ff7544);
    border-color: var(--color-primary, #ff7544);
}

.militra-single-share__link:focus-visible {
    outline: 2px solid var(--color-primary, #ff7544);
    outline-offset: 2px;
}

/* COPY BUTTON — a <button>. Same (0,2,0) parent-orange neutralisation as the TOC
   toggle, then re-styled as a quiet outline chip.
   JS REMOVES this button entirely when navigator.clipboard is absent (http / old
   browser) — never a dead control. */
.militra-single-share .militra-single-share__copy,
.militra-single-share .militra-single-share__copy:hover,
.militra-single-share .militra-single-share__copy:focus,
.militra-single-share .militra-single-share__copy:active {
    background: transparent;
    background-color: transparent;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    cursor: pointer;
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--militra-hairline, #e5e7eb);
    border-radius: var(--border-radius-full, 9999px);
    font-family: var(--font-family-body);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--militra-prose-muted, #797979);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.militra-single-share .militra-single-share__copy:hover {
    color: var(--color-primary, #ff7544);
    border-color: var(--color-primary, #ff7544);
}

.militra-single-share .militra-single-share__copy:focus-visible {
    outline: 2px solid var(--color-primary, #ff7544);
    outline-offset: 2px;
}

/* .militra-single-share__status: .screen-reader-text does the work. Add nothing. */

/* --- POSTNAV: two cells, ALWAYS both rendered. --- */
.militra-postnav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 0;
}

.militra-postnav__link {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 24px;
    border: 1px solid var(--militra-hairline, #e5e7eb);
    border-radius: var(--border-radius-md, 15px);
    text-decoration: none;
    min-width: 0;
    transition: border-color 0.2s ease, box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.militra-postnav__link:hover {
    border-color: var(--color-primary, #ff7544);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* the site's canonical card shadow */
    transform: translateY(-2px);
}

.militra-postnav__link:focus-visible {
    outline: 2px solid var(--color-primary, #ff7544);
    outline-offset: 3px;
}

.militra-postnav__link--next {
    text-align: right;
    align-items: flex-end;
}

/* Keeps the track — the remaining link never jumps to full width. */
.militra-postnav__link--empty {
    visibility: hidden;
}

.militra-postnav__label {
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--militra-prose-muted, #797979);
}

.militra-postnav__title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.4;
    color: var(--militra-prose-head, #252a36);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    transition: color 0.2s ease;
}

.militra-postnav__link:hover .militra-postnav__title {
    color: var(--color-primary, #ff7544);
}


/* ===================================================
   §9. RELATED BAND
   A REAL full-bleed section in normal flow. Omitted entirely by PHP when there
   are 0 related posts. The grid inside it is .militra-blog-grid, owned by
   blog-archive.css (a dependency of this file — it always loads first).
   DECLARE NOTHING ABOUT THE GRID HERE.
   =================================================== */

.militra-single-related {
    background-color: var(--militra-tint, #f9f3ee);
    padding: 72px 0 80px;
    margin-top: 96px;
}

/* 1200px — the SAME box as the homepage .militra-posts-container, so the row
   reads as its continuation. */
.militra-single-related__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-4, 1rem);
}

.militra-single-related__title {
    font-family: var(--font-family-heading);
    font-size: 30px;
    line-height: 1.3;
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-headings-h1, #252a36);
    margin: 0 0 40px 0;
    font-variation-settings: 'opsz' 14;
}

/* THE ONE PERMITTED CARD RULE IN THIS FILE. Without it the cream placeholder tile
   disappears into the tinted band. No other .militra-post-card rule may be added
   here — that is a contract violation. */
.militra-single-related .militra-post-card__media {
    background-color: #ffffff;
}


/* ===================================================
   §10. BREAKPOINT: 1079px — THE RAIL COLLAPSES
   It collapses BEFORE the card grid does (a 240px rail dies long before a 3-up
   grid does). This block may touch ONLY .militra-single__layout, .militra-toc*
   and the figure pull. It must never leak into a card rule.
   =================================================== */

@media (max-width: 1079px) {
    .militra-single__layout,
    .militra-single__layout--no-toc {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
        max-width: var(--militra-prose, 704px);
        margin-inline: auto;
    }

    .militra-single__layout > .militra-toc {
        grid-column: 1;
    }

    .militra-single__body {
        grid-column: 1;
    }

    /* The rail becomes an IN-FLOW COLLAPSIBLE CARD. Not a FAB. Not a bottom sheet.
       Nothing floats over the header. */
    .militra-toc {
        position: static;
        justify-self: stretch;
        max-width: none;
        max-height: none;
        overflow: visible;
        margin: 0 0 40px 0;
        padding: 16px 20px;
        background-color: #ffffff;
        border: 1px solid var(--militra-hairline, #e5e7eb);
        border-radius: var(--border-radius-md, 15px);
    }

    /* The toggle carries the "Turinys" label once JS is alive, so the <h2> is hidden
       VISUALLY ONLY (clip, not display:none) — it is the aria-labelledby target of
       the <nav>. */
    .militra-toc--enhanced .militra-toc__title {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    /* THE reveal. Only here. Only when JS is alive. */
    .militra-toc--enhanced .militra-toc__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: var(--spacing-2, 0.5rem);
    }

    .militra-toc__toggle-label {
        font-family: var(--font-family-body);
        font-size: var(--font-size-sm, 0.875rem);
        font-weight: var(--font-weight-semibold, 600);
        text-transform: uppercase;
        letter-spacing: 0.025em;
        color: var(--militra-prose-head, #252a36);
    }

    .militra-toc--enhanced .militra-toc__list {
        margin-top: 16px;
    }

    /* NO `display` on .militra-toc__list anywhere — JS uses the `hidden` attribute. */
    .militra-toc__list {
        border-left: 1px solid var(--militra-hairline, #e5e7eb);
    }

    /* Figure pull OFF. */
    .militra-post-content > figure,
    .militra-post-content > .wp-block-image,
    .militra-post-content > .wp-block-gallery,
    .militra-post-content > .wp-block-embed {
        width: 100%;
        margin-inline: 0;
    }
}


/* ===================================================
   §11. max-999
   =================================================== */

@media (max-width: 999px) {
    .militra-single__head {
        padding: 56px 20px 36px;
    }

    .militra-single__head--has-hero {
        padding-bottom: 88px;
    }

    .militra-single__title {
        font-size: 36px;
    }

    .militra-single__standfirst {
        font-size: 18px;
    }

    .militra-single__hero {
        margin: -48px auto 44px;
        padding: 0 20px;
    }

    .militra-single__container {
        padding: 0 20px 72px;
    }

    .militra-post-content {
        font-size: 18px;
        line-height: 1.75;
    }

    .militra-post-content h2 {
        font-size: 27px;
        margin-top: 52px;
        padding-top: 24px;
    }

    .militra-post-content h3 {
        font-size: 21px;
        margin-top: 36px;
    }

    .militra-post-content blockquote {
        font-size: 19px;
        margin: 36px 0;
    }

    .militra-single__foot {
        margin-top: 52px;
    }

    .militra-single-related {
        padding: 56px 0 64px;
        margin-top: 72px;
    }

    .militra-single-related__title {
        font-size: 27px;
        margin-bottom: 32px;
    }
}


/* ===================================================
   §12. max-768 / min-428
   =================================================== */

@media (max-width: 768px) and (min-width: 428px) {
    .militra-single__head {
        padding: 44px 16px 32px;
    }

    .militra-single__head--has-hero {
        padding-bottom: 72px;
    }

    .militra-single__title {
        font-size: 32px;
    }

    .militra-single__hero {
        margin: -40px auto 36px;
        padding: 0 16px;
    }

    .militra-single__container {
        padding: 0 16px 64px;
    }

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

    .militra-postnav__link--next {
        text-align: left;
        align-items: flex-start;
    }

    /* At 1-up there is no track to preserve. */
    .militra-postnav__link--empty {
        display: none;
    }
}


/* ===================================================
   §13. max-480
   Note --militra-header-total is already 103px here (the <=768 override).
   =================================================== */

@media (max-width: 480px) {
    .militra-single__head {
        padding: 36px 12px 28px;
    }

    .militra-single__head--has-hero {
        padding-bottom: 60px;
    }

    .militra-single__back {
        margin-bottom: 24px;
    }

    .militra-single__title {
        font-size: 28px;
        line-height: 1.24;
    }

    .militra-single__standfirst {
        font-size: 17px;
    }

    .militra-single__meta {
        font-size: 13px;
        gap: 6px;
    }

    .militra-single__hero {
        margin: -32px auto 32px;
        padding: 0 12px;
    }

    .militra-single__hero-img {
        aspect-ratio: 3 / 2;
    }

    .militra-single__container {
        padding: 0 12px 56px;
    }

    .militra-post-content {
        font-size: 17px;
        line-height: 1.7;
    }

    .militra-post-content h2 {
        font-size: 24px;
        margin-top: 44px;
        padding-top: 20px;
    }

    .militra-post-content h3 {
        font-size: 19px;
    }

    .militra-post-content h4 {
        font-size: 15px;
    }

    .militra-post-content blockquote {
        font-size: 18px;
        padding-left: 20px;
        margin: 32px 0;
    }

    .militra-post-content li {
        padding-left: 24px;
    }

    .militra-post-content pre {
        padding: 16px;
        font-size: 13px;
    }

    .militra-post-content figure,
    .militra-post-content .wp-block-image {
        margin: 32px 0;
    }

    .militra-toc {
        padding: 14px 16px;
        margin-bottom: 32px;
    }

    .militra-single-share {
        gap: 8px;
    }

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

    .militra-postnav__link--next {
        text-align: left;
        align-items: flex-start;
    }

    .militra-postnav__link--empty {
        display: none;
    }

    .militra-single-related {
        padding: 44px 0 48px;
        margin-top: 56px;
    }

    .militra-single-related__container {
        padding: 0 var(--spacing-2, 0.5rem);
    }

    .militra-single-related__title {
        font-size: 24px;
    }

    .militra-progress {
        height: 2px;
    }
}


/* ===================================================
   §14. REDUCED MOTION
   Kill motion. KEEP colour and the one canonical shadow — they are information,
   not motion (the same doctrine as home-posts.css §14).
   =================================================== */

@media (prefers-reduced-motion: reduce) {
    .militra-single__back,
    .militra-single__back-arrow,
    .militra-single__kicker,
    .militra-single__meta-link,
    .militra-toc__link,
    .militra-toc__link::before,
    .militra-toc__chevron,
    .militra-toc__toggle,
    .militra-progress,
    .militra-progress__bar,
    .militra-post-content a,
    .militra-single-tags__tag,
    .militra-single-share__link,
    .militra-single-share__copy,
    .militra-post-pages .nav-links > a,
    .militra-post-pages .nav-links > span,
    .militra-postnav__link,
    .militra-postnav__title {
        transition: none;
    }

    .militra-single__back:hover .militra-single__back-arrow {
        transform: none;
    }

    .militra-postnav__link:hover {
        transform: none;
    }

    /* The chevron still communicates via aria-expanded. */
    .militra-toc__toggle[aria-expanded="true"] .militra-toc__chevron {
        transform: none;
    }

    /* The progress bar's scaleX is a READOUT, not an animation — it survives.
       It simply has no transition. */
}


/* ===================================================
   §15. PRINT
   Cheap, and a medical-supplies article WILL get printed.
   The !important here is documented and deliberate: print must beat the
   media-query display:flex the TOC toggle picks up at <=1079px.
   =================================================== */

@media print {
    .militra-progress,
    .militra-toc,
    .militra-single-share,
    .militra-postnav,
    .militra-single-related,
    .militra-single__back {
        display: none !important;
    }

    .militra-single__layout {
        display: block;
    }

    .militra-single__head {
        background: none;
        padding: 0 0 16pt;
    }

    .militra-post-content {
        font-size: 11pt;
        line-height: 1.5;
        color: #000000;
    }

    .militra-post-content a {
        color: #000000;
        text-decoration: underline;
    }
}