/* ===========================================================================
   PDF to Word - article design system
   First shipped 2026-08-13 with the /pdf-to-word/ section.

   WHY THIS IS A SHARED FILE, NOT INLINE <style>
   The BPM/MPC articles each carry ~800 lines of inline CSS. That was fine for
   one-off pilots. This section ships three articles at once with identical
   chrome, so the system lives in one cached file. Per-article overrides (the
   header kicker text, accent-tinted figures) stay inline in each page.

   IDENTITY - deliberately NOT the BPM article system.
   BPM articles are warm paper + Fraunces + orange. That is Batch PDF Merger's
   voice. This section has no product attached to it yet, so it reads as a
   technical publication instead of a product blog:
     Display  Bricolage Grotesque  (condensed optical sizing, drafting feel)
     Body     Newsreader           (shared with the rest of the site's articles,
                                    which is what keeps it recognisably Essex)
     Mono     JetBrains Mono       (coordinates, field names, diagram labels)

   PALETTE - cool bone paper, pine accent, clay for loss.
   Pine carries emphasis and "structure survived". Clay carries "structure
   lost". Those two are the ONLY accents on the page and they mean the same
   thing in every article. Neither is ever the sole carrier of meaning: every
   pine/clay element also has a text label or an icon, so the semantics survive
   greyscale printing and colour-blind readers.

   SHAPE - one radius, 4px, everywhere. Square-ish reads technical.

   SCOPING - everything hangs off body.p2w. Nothing here can leak into another
   page's Bootstrap, and the site's fixed-top navbar is re-tinted only on these
   pages so light and dark stay coherent top to bottom.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------------- */
body.p2w {
    --p2w-paper:        #eef1ee;
    --p2w-surface:      #f9fbf9;
    --p2w-surface-2:    #e7ece8;

    --p2w-ink:          #101512;
    --p2w-ink-2:        #2c342e;
    --p2w-muted:        #5b675f;
    /* --p2w-faint carries the mono meta labels (byline, contents heading,
       figure labels, diagram annotations). Those are small text, so it has to
       clear 4.5:1 on --p2w-surface, not just look like a soft grey. */
    --p2w-faint:        #616b65;

    --p2w-rule:         #d6ded8;
    --p2w-rule-soft:    #e5eae6;

    --p2w-accent:       #0e5c4a;
    --p2w-accent-hi:    #10745c;
    --p2w-accent-soft:  #dcebe4;
    --p2w-accent-wash:  #eef5f1;

    --p2w-loss:         #9d4227;
    --p2w-loss-soft:    #f3e3dc;
    --p2w-loss-wash:    #faf0ec;

    --p2w-r:            4px;

    --p2w-display: 'Bricolage Grotesque', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --p2w-body:    'Newsreader', Georgia, 'Times New Roman', serif;
    --p2w-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

    /* Only the page canvas is set at body level. Typography deliberately is
       NOT: nav.html and footer.html are shared site chrome that render on every
       other page in the site's own sans, and anything inherited from body
       leaks straight into them. Article typography lives on .p2w-wrap below. */
    background-color: var(--p2w-paper);
}

body.p2w { scroll-behavior: smooth; }

/* The site navbar is fixed-top and measures ~82px at desktop. Anchor jumps and
   the top of the page both have to clear it, so both offsets are derived from
   one variable rather than being guessed separately. */
body.p2w { --p2w-nav: 82px; }
html:has(body.p2w) { scroll-padding-top: calc(var(--p2w-nav, 82px) + 18px); }

body.p2w ::selection { background: var(--p2w-accent-soft); color: var(--p2w-ink); }

/* ---------------------------------------------------------------------------
   2. SITE CHROME RE-TINT
   The navbar is fixed-top and Bootstrap-light. Left alone it would sit as a
   bright bar above a dark article in dark mode, which is exactly the
   light-section-in-a-dark-page break we want to avoid. Scoped to .p2w only.
   --------------------------------------------------------------------------- */
body.p2w .navbar {
    background-color: var(--p2w-surface) !important;
    border-bottom: 1px solid var(--p2w-rule);
    box-shadow: none;
}
body.p2w .navbar .nav-link { color: var(--p2w-ink-2); font-family: var(--p2w-display); font-size: 0.95rem; }
body.p2w .navbar .nav-link:hover,
body.p2w .navbar .nav-link:focus { color: var(--p2w-accent); }
body.p2w .dropdown-menu {
    background-color: var(--p2w-surface);
    border: 1px solid var(--p2w-rule);
    border-radius: var(--p2w-r);
}
body.p2w .dropdown-item { color: var(--p2w-ink-2); }
body.p2w .dropdown-item:hover,
body.p2w .dropdown-item:focus { background-color: var(--p2w-accent-wash); color: var(--p2w-accent); }

/* ---------------------------------------------------------------------------
   3. MEASURE
   --------------------------------------------------------------------------- */
body.p2w .p2w-wrap {
    max-width: 730px;
    margin: 0 auto;
    padding: calc(var(--p2w-nav, 82px) + 3rem) 1.5rem 6rem;

    /* Article typography is scoped here rather than to body, so the shared
       navbar and footer keep the site's own styling. */
    color: var(--p2w-ink-2);
    font-family: var(--p2w-body);
    font-size: 18px;
    line-height: 1.72;
    font-feature-settings: "kern", "liga", "onum", "calt";
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 991px) {
    /* Below the lg breakpoint the navbar collapses to the toggler row. */
    body.p2w { --p2w-nav: 62px; }
    body.p2w .p2w-wrap { padding-top: calc(var(--p2w-nav) + 2rem); }
}

/* Figures and wide blocks break the measure without breaking the page.
   Centred with a negative margin rather than translateX(-50%) on purpose:
   the scroll-reveal in section 14 animates `transform`, and a transform set
   here would be overwritten the moment an element reveals, dumping every
   wide figure off the right edge of the page. Margin and transform stay in
   separate lanes so the two features cannot collide. */
body.p2w { --p2w-bleed-w: min(1040px, calc(100vw - 3rem)); }
body.p2w .p2w-bleed {
    width: var(--p2w-bleed-w);
    margin-left: calc(50% - var(--p2w-bleed-w) / 2);
}

/* ---------------------------------------------------------------------------
   4. MASTHEAD
   --------------------------------------------------------------------------- */
body.p2w .p2w-masthead {
    margin-bottom: 3.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--p2w-rule);
}

body.p2w .p2w-kicker {
    display: block;
    font-family: var(--p2w-mono);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--p2w-accent);
    margin-bottom: 1.5rem;
}

body.p2w .p2w-wrap h1 {
    font-family: var(--p2w-display);
    font-weight: 600;
    font-size: clamp(2.1rem, 5.2vw, 3.35rem);
    line-height: 1.08;
    letter-spacing: -0.024em;
    color: var(--p2w-ink);
    margin: 0 0 1.5rem;
    font-variation-settings: 'opsz' 42;
}

body.p2w .p2w-dek {
    font-size: 1.24rem;
    line-height: 1.62;
    color: var(--p2w-muted);
    margin: 0 0 2rem;
    max-width: 38ch;
}

body.p2w .p2w-byline {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    font-family: var(--p2w-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--p2w-faint);
}

/* ---------------------------------------------------------------------------
   5. BODY TYPE
   --------------------------------------------------------------------------- */
body.p2w .p2w-wrap h2 {
    font-family: var(--p2w-display);
    font-weight: 600;
    font-size: clamp(1.55rem, 3.4vw, 2.05rem);
    line-height: 1.16;
    letter-spacing: -0.018em;
    color: var(--p2w-ink);
    margin: 4rem 0 1.25rem;
    font-variation-settings: 'opsz' 24;
}

body.p2w .p2w-wrap h3 {
    font-family: var(--p2w-display);
    font-weight: 600;
    font-size: 1.18rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--p2w-ink);
    margin: 2.5rem 0 0.75rem;
}

body.p2w .p2w-wrap p { margin: 0 0 1.35rem; }

body.p2w .p2w-lead {
    font-size: 1.15rem;
    line-height: 1.65;
    color: var(--p2w-ink-2);
}

/* First paragraph after an h2 gets a touch more presence. */
body.p2w .p2w-wrap h2 + p { color: var(--p2w-ink-2); }

body.p2w .p2w-wrap strong { font-weight: 600; color: var(--p2w-ink); }
body.p2w .p2w-wrap em { font-style: italic; }

/* Prose links only. This MUST stay scoped to .p2w-wrap: the site navbar and
   footer live outside it, and an unscoped `body.p2w a` rule paints its
   underline across every nav item and the logo too. */
body.p2w .p2w-wrap a {
    color: var(--p2w-accent);
    text-decoration: none;
    background-image: linear-gradient(var(--p2w-accent), var(--p2w-accent));
    background-size: 100% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
    padding-bottom: 1px;
}
body.p2w .p2w-wrap a:hover,
body.p2w .p2w-wrap a:focus-visible {
    color: var(--p2w-accent-hi);
    background-size: 100% 2px;
}

/* Focus ring stays unscoped. Keyboard users need it on the nav too. */
body.p2w a:focus-visible {
    outline: 2px solid var(--p2w-accent);
    outline-offset: 3px;
    border-radius: 2px;
}

body.p2w .p2w-wrap code {
    font-family: var(--p2w-mono);
    font-size: 0.86em;
    background: var(--p2w-surface-2);
    color: var(--p2w-ink);
    padding: 0.12em 0.38em;
    border-radius: var(--p2w-r);
}

body.p2w .p2w-wrap ul, body.p2w .p2w-wrap ol { margin: 0 0 1.35rem; padding-left: 1.3rem; }
body.p2w .p2w-wrap li { margin-bottom: 0.5rem; }
body.p2w .p2w-wrap li::marker { color: var(--p2w-faint); }

/* ---------------------------------------------------------------------------
   6. CONTENTS
   A jump list, not a decorative sidebar. Two columns so it stays short.
   --------------------------------------------------------------------------- */
body.p2w .p2w-contents {
    margin: 0 0 3.5rem;
    padding: 1.5rem 1.6rem 1.25rem;
    background: var(--p2w-surface);
    border: 1px solid var(--p2w-rule);
    border-radius: var(--p2w-r);
}
body.p2w .p2w-contents h2 {
    font-size: 0.7rem;
    font-family: var(--p2w-mono);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--p2w-faint);
    margin: 0 0 1rem;
}
body.p2w .p2w-contents ol {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2;
    column-gap: 2rem;
}
body.p2w .p2w-contents li {
    margin-bottom: 0.55rem;
    break-inside: avoid;
    font-size: 0.95rem;
    line-height: 1.4;
}
body.p2w .p2w-contents a { background-image: none; color: var(--p2w-ink-2); }
body.p2w .p2w-contents a:hover { color: var(--p2w-accent); }

@media (max-width: 620px) {
    body.p2w .p2w-contents ol { columns: 1; }
}

/* ---------------------------------------------------------------------------
   7. FIGURES
   The diagrams are the argument in these articles, not decoration, so they get
   real width and a real caption rather than being squeezed into the measure.
   --------------------------------------------------------------------------- */
body.p2w .p2w-fig {
    /* margin-block, never the `margin` shorthand: every figure is also a
       .p2w-bleed, and the shorthand would reset the margin-left that centres
       it. Any component that can pair with .p2w-bleed follows this rule. */
    margin-block: 2.75rem 3rem;
}
body.p2w .p2w-fig svg {
    display: block;
    width: 100%;
    height: auto;
    background: var(--p2w-surface);
    border: 1px solid var(--p2w-rule);
    border-radius: var(--p2w-r);
}
body.p2w .p2w-fig figcaption {
    margin-top: 0.9rem;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--p2w-muted);
    max-width: 62ch;
}
body.p2w .p2w-fig figcaption b {
    font-family: var(--p2w-mono);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--p2w-faint);
    display: block;
    margin-bottom: 0.3rem;
}

/* Diagram internals. Kept here so all three articles draw identically. */
body.p2w .p2w-svg-paper   { fill: var(--p2w-surface); }
body.p2w .p2w-svg-panel   { fill: none; stroke: var(--p2w-rule); stroke-width: 1; }
body.p2w .p2w-svg-glyph   { fill: var(--p2w-ink-2); }
body.p2w .p2w-svg-dim     { fill: var(--p2w-rule); }
body.p2w .p2w-svg-accent  { fill: var(--p2w-accent); }
body.p2w .p2w-svg-loss    { fill: var(--p2w-loss); }
body.p2w .p2w-svg-box     { fill: none; stroke: var(--p2w-loss); stroke-width: 1; stroke-dasharray: 3 2; }
body.p2w .p2w-svg-okbox   { fill: none; stroke: var(--p2w-accent); stroke-width: 1; }
body.p2w .p2w-svg-rule    { stroke: var(--p2w-rule); stroke-width: 1; }
body.p2w .p2w-svg-label {
    font-family: var(--p2w-mono);
    font-size: 9px;
    letter-spacing: 0.06em;
    fill: var(--p2w-faint);
    text-transform: uppercase;
}
body.p2w .p2w-svg-title {
    font-family: var(--p2w-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
body.p2w .p2w-svg-title--ok   { fill: var(--p2w-accent); }
body.p2w .p2w-svg-title--loss { fill: var(--p2w-loss); }
body.p2w .p2w-svg-note {
    font-family: var(--p2w-mono);
    font-size: 8.5px;
    fill: var(--p2w-faint);
}

/* ---------------------------------------------------------------------------
   8. KEY POINT
   One per article, maximum. Marks the sentence the whole page exists to say.
   --------------------------------------------------------------------------- */
body.p2w .p2w-key {
    margin: 2.75rem 0;
    padding: 1.6rem 1.75rem;
    background: var(--p2w-accent-wash);
    border-left: 3px solid var(--p2w-accent);
    border-radius: 0 var(--p2w-r) var(--p2w-r) 0;
}
body.p2w .p2w-key p { margin: 0; font-size: 1.1rem; line-height: 1.6; color: var(--p2w-ink); }
body.p2w .p2w-key p + p { margin-top: 0.85rem; }

/* ---------------------------------------------------------------------------
   9. TWO-PATH BLOCK
   Used where the reader has to identify which of two situations they are in.
   Exactly two cells, always. Never a filler third.
   --------------------------------------------------------------------------- */
body.p2w .p2w-paths {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin: 2.5rem 0 3rem;
}
body.p2w .p2w-path {
    padding: 1.5rem 1.5rem 1.35rem;
    background: var(--p2w-surface);
    border: 1px solid var(--p2w-rule);
    border-top: 3px solid var(--p2w-accent);
    border-radius: var(--p2w-r);
}
body.p2w .p2w-path--hard { border-top-color: var(--p2w-loss); }
body.p2w .p2w-path h3 { margin: 0 0 0.6rem; font-size: 1.08rem; }
body.p2w .p2w-path p:last-child { margin-bottom: 0; }
body.p2w .p2w-path .p2w-tag { margin-bottom: 0.9rem; }

@media (max-width: 700px) {
    body.p2w .p2w-paths { grid-template-columns: 1fr; }
}

/* Inline status tag. Always carries a word, never colour alone. */
body.p2w .p2w-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--p2w-mono);
    font-size: 0.66rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 0.28rem 0.55rem;
    border-radius: var(--p2w-r);
    background: var(--p2w-accent-soft);
    color: var(--p2w-accent);
}
body.p2w .p2w-tag--loss { background: var(--p2w-loss-soft); color: var(--p2w-loss); }

/* ---------------------------------------------------------------------------
   10. METHOD BLOCKS
   Stacked, numbered by the tool's own name rather than "Step 1 / Step 2".
   --------------------------------------------------------------------------- */
body.p2w .p2w-method {
    margin: 2rem 0;
    padding: 1.75rem 1.75rem 1.5rem;
    background: var(--p2w-surface);
    border: 1px solid var(--p2w-rule);
    border-radius: var(--p2w-r);
}
body.p2w .p2w-method h3 { margin-top: 0; }
body.p2w .p2w-method > *:last-child { margin-bottom: 0; }

body.p2w .p2w-steps { counter-reset: p2wstep; list-style: none; padding: 0; margin: 1.25rem 0 0; }
body.p2w .p2w-steps li {
    counter-increment: p2wstep;
    position: relative;
    padding-left: 2.4rem;
    margin-bottom: 0.85rem;
}
body.p2w .p2w-steps li::before {
    content: counter(p2wstep);
    position: absolute;
    left: 0;
    top: 0.28em;
    width: 1.55rem;
    height: 1.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--p2w-mono);
    font-size: 0.72rem;
    color: var(--p2w-accent);
    background: var(--p2w-accent-soft);
    border-radius: var(--p2w-r);
}

/* Where a method has a real caveat, it is stated inline, not hidden. */
body.p2w .p2w-caveat {
    margin-top: 1.25rem;
    padding: 0.9rem 1.1rem;
    background: var(--p2w-loss-wash);
    border-left: 2px solid var(--p2w-loss);
    border-radius: 0 var(--p2w-r) var(--p2w-r) 0;
    font-size: 0.96rem;
    line-height: 1.55;
    color: var(--p2w-ink-2);
}
body.p2w .p2w-caveat p { margin: 0; }
body.p2w .p2w-caveat strong { color: var(--p2w-loss); }

/* ---------------------------------------------------------------------------
   11. GROUPED FACTS
   Replaces the 10-row spec table with a hairline under every row. Items are
   chunked into named groups, each group gets one divider.
   --------------------------------------------------------------------------- */
body.p2w .p2w-groups { margin: 2.5rem 0 3rem; }
body.p2w .p2w-group { padding: 1.4rem 0; border-top: 1px solid var(--p2w-rule); }
body.p2w .p2w-group:last-child { border-bottom: 1px solid var(--p2w-rule); }
body.p2w .p2w-group h3 { margin: 0 0 0.85rem; font-size: 1rem; }
body.p2w .p2w-group ul { margin: 0; padding-left: 1.15rem; }
body.p2w .p2w-group li { font-size: 0.98rem; margin-bottom: 0.4rem; }
body.p2w .p2w-group li:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   12. FAQ
   Bootstrap accordion markup, restyled. Bootstrap's own classes are left in
   place so the collapse JS keeps working.
   --------------------------------------------------------------------------- */
body.p2w .accordion { --bs-accordion-border-color: var(--p2w-rule); }
body.p2w .accordion-item {
    background: var(--p2w-surface);
    border: 1px solid var(--p2w-rule);
    border-radius: var(--p2w-r) !important;
    margin-bottom: 0.6rem;
    overflow: hidden;
}
body.p2w .accordion-button {
    background: var(--p2w-surface);
    color: var(--p2w-ink);
    font-family: var(--p2w-display);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.35;
    padding: 1.05rem 1.3rem;
    box-shadow: none;
}
body.p2w .accordion-button:not(.collapsed) {
    background: var(--p2w-accent-wash);
    color: var(--p2w-accent);
    box-shadow: none;
}
body.p2w .accordion-button:focus {
    box-shadow: 0 0 0 2px var(--p2w-accent-soft);
    border-color: var(--p2w-rule);
}
body.p2w .accordion-button::after { filter: grayscale(1) opacity(0.55); }
body.p2w .accordion-body {
    padding: 0.35rem 1.3rem 1.3rem;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--p2w-ink-2);
}

/* ---------------------------------------------------------------------------
   13. FURTHER READING
   --------------------------------------------------------------------------- */
body.p2w .p2w-next {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid var(--p2w-rule);
}
body.p2w .p2w-next h2 { margin-top: 0; font-size: 1.3rem; }
body.p2w .p2w-next-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}
body.p2w .p2w-next-item {
    display: block;
    padding: 1.15rem 1.25rem;
    background: var(--p2w-surface);
    border: 1px solid var(--p2w-rule);
    border-radius: var(--p2w-r);
    background-image: none;
    transition: border-color 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
body.p2w .p2w-next-item:hover { border-color: var(--p2w-accent); transform: translateY(-2px); }
body.p2w .p2w-next-item:active { transform: translateY(0); }
body.p2w .p2w-next-item span {
    display: block;
    font-family: var(--p2w-mono);
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--p2w-faint);
    margin-bottom: 0.45rem;
}
body.p2w .p2w-next-item strong {
    font-family: var(--p2w-display);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
    color: var(--p2w-ink);
}

/* ---------------------------------------------------------------------------
   14. MOTION
   MOTION_INTENSITY 4. One device: sections settle into place as they enter.
   It communicates reading order on a very long page. IntersectionObserver
   only, no scroll listener. Collapses completely under reduced motion, and
   under no-JS the .p2w-rise class is never added so nothing is ever hidden.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    body.p2w .p2w-rise {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    }
    body.p2w .p2w-rise.p2w-in { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    body.p2w, body.p2w * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------
   15. DARK MODE
   Same hierarchy, same two semantics. Pine and clay lift toward the light end
   so both still clear AA on the dark surface.
   --------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    body.p2w {
        --p2w-paper:        #0f1311;
        --p2w-surface:      #161b18;
        --p2w-surface-2:    #1f2622;

        --p2w-ink:          #e9eee9;
        --p2w-ink-2:        #c7d0ca;
        --p2w-muted:        #97a29b;
        --p2w-faint:        #949f98;

        --p2w-rule:         #2a322d;
        --p2w-rule-soft:    #212823;

        --p2w-accent:       #6ac9a7;
        --p2w-accent-hi:    #8ad9bd;
        --p2w-accent-soft:  #1b332b;
        --p2w-accent-wash:  #16241f;

        --p2w-loss:         #e0906d;
        --p2w-loss-soft:    #33201a;
        --p2w-loss-wash:    #241a16;
    }

    /* Knock the wordmark back to a flat light mark rather than inverting it.
       A plain invert() rotates the brand blue to pink, which is worse than
       losing the colour entirely. */
    body.p2w .navbar img { filter: brightness(0) invert(0.92); }
    body.p2w .navbar-toggler-icon { filter: invert(1) opacity(0.8); }
    body.p2w .accordion-button::after { filter: invert(1) grayscale(1) opacity(0.6); }
}

/* ---------------------------------------------------------------------------
   16. PRINT
   These pages get printed and passed around offices. Diagrams must survive it,
   which is the other reason pine and clay are never the only signal.
   --------------------------------------------------------------------------- */
@media print {
    body.p2w .navbar, body.p2w footer, body.p2w #btn-back-to-top, body.p2w .p2w-contents { display: none !important; }
    body.p2w { background: #fff; }
    body.p2w .p2w-wrap { max-width: none; padding: 0; font-size: 11pt; }
    body.p2w .p2w-bleed { width: auto; margin-left: 0; transform: none; }
    body.p2w .p2w-fig, body.p2w .p2w-key, body.p2w .p2w-path { break-inside: avoid; }
    body.p2w .accordion-collapse { display: block !important; height: auto !important; }
}