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

        [style*="2147483647"] { display:none !important; pointer-events:none !important; }
        [style*="--rdata"]    { display:none !important; pointer-events:none !important; }

        :root {
            --theme-primary:   #581c87;
            --theme-secondary: #6b21a8;
            /* Accent = the primary made readable on a DARK background.
               In light mode they are the same colour; the .dark rule below
               swaps in the lightened one. Use --theme-accent wherever the
               colour is TEXT, and --theme-primary where it is a fill with
               white text on top — those two needs pull in opposite
               directions and a single variable cannot serve both. */
            --theme-accent:    #581c87;
            --font-heading:    Newsreader, serif;
            --font-body:       'Open Sans', sans-serif;
        }
        /* Dark mode swaps in the lightened accent. This rule MUST sit
           outside :root — it previously landed in the middle of the
           --font-heading declaration, which made the CSS parser discard
           the rest of the block: no --font-heading, no --font-body, and
           no dark accent either. Every page then rendered in fallback
           fonts. */
        html.dark {
            --theme-accent: #c3afd3;
        }

        body,   .bg-paper { font-family: var(--font-body)    !important; -webkit-font-smoothing: antialiased; margin: 0; }
        h1,h2,h3,h4,h5,h6,.font-serif,.card-title,
        .related-post-title,.newpost-post-title,
        .content h1,.content h2,.content h3 { font-family: var(--font-heading) !important; }


        :root {
            --c-bg:      #fdfdfc; --c-bg2:     #f5f4f2; --c-bg3:     #eeede9;
            --c-surface: #ffffff; --c-border:  rgba(0,0,0,0.08);
            --c-text:    #1a1818; --c-text2:   #374151; --c-text3:   #6b7280;
            --c-text4:   #9ca3af; --c-shadow:  rgba(0,0,0,0.06);
        }
        html.dark {
            --c-bg:      #0d1117; --c-bg2:     #161b22; --c-bg3:     #1e2431;
            --c-surface: #161b22; --c-border:  rgba(255,255,255,0.08);
            --c-text:    #e6edf3; --c-text2:   #b0bac6; --c-text3:   #7d8fa0;
            --c-text4:   #4d5f72; --c-shadow:  rgba(0,0,0,0.4);
        }


        .container { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }


        .nav-wrapper { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 1rem; }
        .desktop-nav { display: none !important; align-items: center; gap: 1.6rem; margin: 0; padding: 0; list-style: none; }
        .desktop-right { display: none !important; align-items: center; gap: 0.75rem; }
        .mobile-right { display: flex; align-items: center; gap: 0.5rem; }
        @media (min-width: 768px) {
            .desktop-nav { display: flex !important; }
            .desktop-right { display: flex !important; }
            .mobile-right { display: none !important; }
        }


        .footer-layout { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-bottom: 2rem; }
        .footer-col-brand { grid-column: span 2; }
        @media (min-width: 768px) {
            .footer-layout { grid-template-columns: 1.6fr repeat(4, 1fr); }
            .footer-col-brand { grid-column: span 1; }
        }


        /* The wordmark was the one piece of chrome still set in the body
           font at default weight, while every heading on the page is the
           display face. It now reads as the masthead it is: heading type,
           tight tracking, and the accent dot for punctuation. */
        .logo-text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            display: block;
            max-width: 100%;
            word-wrap: break-word;
            word-break: break-word;

            font-family: var(--font-heading, Georgia, serif);
            font-weight: 700;
            /* Fluid, so a long brand shrinks with the viewport rather than
               ellipsising at the first comfortable size. */
            font-size: clamp(0.9rem, 2.6vw, 1.35rem);
            letter-spacing: -0.02em;
            /* 1.1 clipped the descenders. A serif's p/g/y hang well below
               the baseline, and overflow:hidden (needed for the ellipsis)
               cuts whatever the line box does not cover — so the wordmark
               lost the tail of every descender. */
            line-height: 1.35;
            padding-bottom: 0.08em;
            color: var(--c-text);
        }
        /* The footer has a whole column to itself, so it can run larger
           than the nav — but on the same fluid curve, so a long brand
           still shrinks instead of wrapping into the description. */
        .footer-col-brand .logo-text {
            font-size: clamp(1.05rem, 4.2vw, 1.6rem);
            white-space: normal;
            overflow: visible;
            text-overflow: clip;
        }
        @media (max-width: 380px) {
            .logo-text { font-size: clamp(0.82rem, 4.4vw, 1rem); letter-spacing: -0.01em; }
        }
        /* The logo is a flex item; without min-width:0 it refuses to
           shrink below its text width and pushes the nav off the bar. */
        .nav-wrapper > a:first-child { min-width: 0; flex-shrink: 1; }
        /* Size is fluid now (clamp above) — a fixed step here would undo it. */
        .logo-dot { color:var(--theme-accent) !important; }
        .footer-col-brand p {
            word-wrap: break-word;
            overflow-wrap: break-word;
        }
        @media (max-width: 767px) {
            .footer-layout {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
        }


        body                    { background-color:var(--c-bg) !important; color:var(--c-text) !important; transition:background-color .2s,color .2s;  overflow-x:hidden; }
        h1,h2,h3,h4,h5,h6       { color:var(--c-text) !important; }

        .bg-white,.bg-\[\#fdfdfc\] { background-color:var(--c-surface) !important; }
        .bg-gray-50             { background-color:var(--c-bg2)  !important; }
        .bg-gray-100            { background-color:var(--c-bg3)  !important; }
        .border-gray-50         { border-color:var(--c-border) !important; }
        .border-gray-100,.border-gray-200,.border-gray-300 { border-color:var(--c-border) !important; }
        .text-gray-900,.text-gray-800 { color:var(--c-text)  !important; }
        .text-gray-700,.text-gray-600 { color:var(--c-text2) !important; }
        .text-gray-500,.text-gray-400 { color:var(--c-text3) !important; }
        .text-gray-300          { color:var(--c-text4) !important; }
        input,textarea,select   { background-color:var(--c-bg2) !important; border-color:var(--c-border) !important; color:var(--c-text) !important; }
        input::placeholder      { color:var(--c-text4) !important; }


        .header {
            background-color: rgba(253,253,252,0.97) !important;
            border-color: var(--c-border) !important;
        }
        html.dark .header { background-color: rgba(13,17,23,0.97) !important; }

        /* ── Floating header ────────────────────────────────────────────
           The bar sits flush while the page is at the top, then lifts
           into a rounded floating card once the reader scrolls. The
           chrome moves to the inner <nav>, not the <header>: the header
           stays a full-width sticky rail so the card can inset from the
           edges without the sticky positioning fighting the margins.

           Transitions live on the nav, so both directions animate. */
        /* One shared curve and one shared duration across everything that
           moves, so the bar reads as a single object settling rather than
           four properties arriving at different times. The card also
           lifts a hair as it detaches, which is what makes it look like
           it left the page rather than had a border removed. */
        .header {
            transition: background-color .36s cubic-bezier(.22,1,.36,1),
                        border-color .36s cubic-bezier(.22,1,.36,1),
                        padding .36s cubic-bezier(.22,1,.36,1);
            will-change: padding;
        }
        .header > nav {
            transition: max-width .36s cubic-bezier(.22,1,.36,1),
                        background-color .36s cubic-bezier(.22,1,.36,1),
                        border-radius .36s cubic-bezier(.22,1,.36,1),
                        box-shadow .36s cubic-bezier(.22,1,.36,1),
                        border-color .36s cubic-bezier(.22,1,.36,1),
                        padding .36s cubic-bezier(.22,1,.36,1),
                        transform .36s cubic-bezier(.22,1,.36,1);
            border: 1px solid transparent;
            transform: translateY(0);
        }
        .header.is-float > nav { transform: translateY(-1px); }
        .header.is-float {
            background-color: transparent !important;
            border-color: transparent !important;
            box-shadow: none !important;
            /* The template puts Tailwind's backdrop-blur-md on the <header>
               itself. Left on, it blurs the whole full-width rail, so the
               floating card sat inside a visible haze band spanning the
               window. The blur belongs to the card, and only the card. */
            -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
            padding-top: .5rem;
            padding-bottom: .5rem;
        }
        .header.is-float > nav {
            max-width: min(74rem, calc(100% - 1.75rem));
            padding-left: 1.5rem;
            padding-right: 1.5rem;
            /* Opaque enough that the blur reads as depth rather than as a
               smear: at .86 over a near-white page the backdrop showed
               through as grey haze. Radius matches the drop-down menu and
               the article figures (1rem) instead of a stadium pill — the
               rest of the site is editorial cards, not capsules. */
            background-color: rgba(255,255,255,.94);
            -webkit-backdrop-filter: saturate(150%) blur(10px);
            backdrop-filter: saturate(150%) blur(10px);
            border-color: var(--c-border);
            border-radius: 1rem;
            box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 6px 20px -6px rgba(15,23,42,.10);
        }
        html.dark .header.is-float > nav {
            background-color: rgba(17,22,29,.92);
            border-color: rgba(255,255,255,.09);
            box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 26px -8px rgba(0,0,0,.65);
        }

        /* Nav items use the same marker as the category strip below them:
           an accent underline, not a filled pill. One way of saying
           "you are here" across the whole site. */
        .desktop-nav { position: relative; }
        .desktop-nav a {
            position: relative;
            padding: .35rem .15rem;
            transition: color .2s ease;
        }
        .desktop-nav a::after {
            content: "";
            position: absolute;
            left: 0; right: 0; bottom: -.15rem;
            height: 2px;
            background-color: var(--theme-accent);
            transform: scaleX(0);
            transform-origin: center;
            transition: transform .22s cubic-bezier(.4,0,.2,1);
        }
        .desktop-nav a:hover::after { transform: scaleX(.55); }
        .desktop-nav a.nav-active::after { transform: scaleX(1); }

        /* Mobile: same card, and the drop-down insets to match it rather
           than spanning the full-width transparent header. */
        @media (max-width: 767px) {
            .header.is-float > nav { max-width: calc(100% - 1rem); padding-left: 1.1rem; padding-right: 1.1rem; }
            .header.is-float .nav-menu {
                left: .5rem; right: .5rem; margin-top: .5rem;
                border-radius: 1rem; border: 1px solid var(--c-border);
            }
        }
        .nav-menu { transition: left .3s ease, right .3s ease, border-radius .3s ease; }


        /* One rhythm for both heroes. The home page used Tailwind's
           py-10/14/20 while the index band carried its own padding, so
           the two pages opened with visibly different gaps under the
           navbar. Home also sits outside <main>; the index hero now does
           too, or main's own py-10 stacked another 40px on top of it. */
        .x9es-hero-band { padding: 2.25rem 0 2.5rem; overflow: hidden;
                         border-color: var(--c-border); background-color: var(--c-surface); }
        @media (min-width: 640px)  { .x9es-hero-band { padding: 3rem 0 3.25rem; } }
        @media (min-width: 1024px) { .x9es-hero-band { padding: 4rem 0 4.25rem; } }

        /* Card bylines link to the writer's page. Underline on hover only:
           a listing of forty cards with forty underlined names reads as a
           wall of links rather than as editorial credit. */
        .card-byline { color:var(--theme-primary); text-decoration:none;
                       border-bottom:1px solid transparent; transition:border-color .15s ease, color .15s ease; }
        .card-byline:hover { border-bottom-color:currentColor; color:var(--theme-accent); }

        /* Back-to-top. Article pages have had one; every other page is
           just as long once a listing paginates or a footer stacks five
           columns, so it belongs on all of them. */
        .back-to-top { opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease, transform .3s ease; }
        .back-to-top.visible { opacity:1; visibility:visible; }
        /* Clear the bottom-anchored ad when one is showing, so the button
           never sits on top of the creative. */
        body.x9es-anchor-open.anchor-at-bottom .back-to-top { bottom: calc(2rem + var(--x9es-anchor-h, 0px)); }

        /* ── Anchor ad ──────────────────────────────────────────────────
           The header ad used to sit inline at the top of <main>: it was
           seen once, if at all, and then scrolled away for the rest of
           the visit. Pinned to the bottom of the viewport it stays in
           view for the whole page — the same placement Google's anchor
           ad uses, and the same dismiss affordance, because an overlay a
           reader cannot close is the one they leave over. The dismissal
           is not remembered, so the next page view serves it again.

           The slot divs and their data-ad-slot attributes are unchanged,
           so ads.js and the per-domain slot resolver still fill exactly
           what they filled before. */

        /* Mobile width guard. body already had overflow-x:hidden, but a
           child wider than the viewport still stretches the layout before
           it is clipped — the ad slots carry a hard 728px leaderboard, and
           an unbounded one drags the page out with it. */
        html, body { max-width: 100%; }
        img, iframe, video, table { max-width: 100%; }
        .x9es-anchor-ad {
            position: fixed;
            left: 0; right: 0;
            z-index: 45;
            /* Block, not flex: the slot inside is width:100%, and as a flex
               ITEM its width would resolve against its own content — which
               is the 100% child — and collapse to zero. */
            display: block;
            /* No bar chrome. The creative brings its own background; a white
               plate behind it just added a band the page did not need. */
            background: transparent;
            border: none;
            box-shadow: none;
            pointer-events: none;
            transform: translateY(0);
            transition: transform .3s cubic-bezier(.4,0,.2,1);
        }
        /* Two homes, picked per page load. Bottom is the classic anchor;
           top sits directly under the navbar, which is the better half of
           the screen on a phone — a bottom bar there competes with the
           OS home indicator and the browser chrome. */
        .x9es-anchor-ad.at-bottom { bottom: 0; padding: 0 .5rem calc(.4rem + env(safe-area-inset-bottom, 0px)); }
        /* The gap is part of the offset, not padding: padding would be
           inside the bar's box and the creative would still start flush
           against the navbar's underside once the header floats away from
           the page edge. */
        .x9es-anchor-ad.at-top    { top: calc(var(--x9es-anchor-top, 4rem) + .75rem); padding: 0 .5rem; }
        .x9es-anchor-ad.at-bottom.is-closed, .x9es-anchor-ad.at-bottom.is-empty { transform: translateY(125%); }
        .x9es-anchor-ad.at-top.is-closed,    .x9es-anchor-ad.at-top.is-empty    { transform: translateY(-160%); }
        /* Hidden WITHOUT display:none. A display:none element measures 0
           forever and its ResizeObserver never fires, so once the bar hid
           itself it could never come back — and the creative arrives after
           ads.js runs, which is exactly when it needs to. */
        .x9es-anchor-ad.is-empty { opacity: 0; }
        /* fit-content so the box hugs the creative: the close button
           anchors to the AD's top-right corner, not to the window's. The
           slot's own width:100% has to be released for that to work, and
           the viewport cap keeps a 728px leaderboard from setting the
           width on a phone. */
        /* Centring via flex on a full-width row, not fit-content + auto
           margins: fit-content on a block whose child is itself sized from
           content resolves inconsistently, and the bar drifted off centre.
           The shrink-wrap moved to the box INSIDE, which is also what the
           close button anchors to. */
        .x9es-anchor-inner {
            width: 100%;
            display: flex;
            justify-content: center;
            pointer-events: none;
        }
        .x9es-anchor-box {
            position: relative;
            width: -moz-fit-content;
            width: fit-content;
            max-width: 100%;
            pointer-events: auto;
        }
        .x9es-anchor-box .x9es-slot-headers {
            width: auto;
            max-width: 100%;
            margin: 0 auto;
            padding: 0;
        }

        /* House fallback, sized like the creative it stands in for. The
           anchor bar shrink-wraps its contents, so an unfilled slot
           collapsed to a thin strip of text — smaller than any real ad,
           and obviously not one. A booked creative replaces this entirely
           (ads.js overwrites the slot), so these metrics only ever apply
           when nothing filled. */
        .x9es-anchor-box .x9es-ad-fallback {
            /* !important throughout: this unit carries inline styles from
               the template (width:100%, space-between), and an inline
               declaration outranks any selector without it. That is why
               the bar rendered full-width with the copy at one edge and
               the button at the other. */
            width: min(728px, calc(100vw - 2rem)) !important;
            min-height: 90px;
            /* Centred, not spread. The inline version of this unit sits in
               a full-width band where pushing the CTA to the far edge
               reads fine; inside a 728px card it left the copy stranded at
               one end and the button at the other. */
            justify-content: center !important;
            text-align: center;
            padding: 1rem 1.5rem !important;
            border: 1px solid var(--c-border);
            border-radius: .75rem;
            gap: 1.25rem !important;
            background: linear-gradient(135deg, var(--c-bg2) 0%, var(--c-surface) 100%) !important;
            box-shadow: 0 1px 2px rgba(15,23,42,.05);
        }
        @media (max-width: 767.98px) {
            .x9es-anchor-box .x9es-ad-fallback {
                width: calc(100vw - 1.5rem);
                min-height: 64px;
                padding: .7rem .9rem !important;
                gap: .75rem !important;
            }
        }
        /* The text block is flex:1 1 200px inline, so it grows to fill and
           shoves the CTA to the far edge no matter what the parent's
           justify-content says. Let it size to its content instead. */
        .x9es-anchor-box .x9es-ad-fallback > div { flex: 0 1 auto !important; }
        .x9es-anchor-close {
            position: absolute;
            top: 0; right: 0;
            transform: translate(35%, -35%);
            z-index: 1;
            width: 1.4rem; height: 1.4rem;
            display: inline-flex; align-items: center; justify-content: center;
            border: 1px solid var(--c-border);
            border-radius: 9999px;
            background-color: var(--c-surface);
            color: var(--c-text3);
            font-size: .78rem; line-height: 1;
            cursor: pointer;
            padding: 0;
            box-shadow: 0 1px 3px rgba(15,23,42,.18);
        }
        /* Anchored at the top, a button overhanging upward would sit on the
           navbar. Keep it on the ad's corner, just not above it. */
        .x9es-anchor-ad.at-top .x9es-anchor-close { transform: translate(35%, 0); }
        .x9es-anchor-close:hover { color: var(--c-text); }
        /* No layout offset. The bar is an overlay and behaves like one:
           reserving space for it reflowed the whole page the moment a
           creative arrived, which is the jump this placement was meant to
           get rid of. The only thing that steps aside is the back-to-top
           button, which would otherwise sit on the creative. */
        @media (prefers-reduced-motion: reduce) { .x9es-anchor-ad { transition: none; } }

        @media (prefers-reduced-motion: reduce) {
            .header, .header > nav, .nav-menu, .desktop-nav a, .desktop-nav a::after { transition: none !important; }
        }


        .nav-menu {
            background-color: var(--c-surface) !important;
            border-color: var(--c-border) !important;
            box-shadow: 0 8px 32px var(--c-shadow) !important;
        }
        .nav-list a,.nav-list li a { color:var(--c-text3) !important; }
        .nav-list a:hover           { color:var(--c-text)  !important; }
        .nav-active                 { color:var(--theme-accent) !important; }
        .nav-menu-active            { display:block !important; }


        .hamburger,.hamburger::before,.hamburger::after { background-color:var(--c-text) !important; }
        .nav-toggle-active .hamburger { background-color:transparent !important; }
        .nav-toggle-active .hamburger::before { transform:rotate(45deg);  top:0; }
        .nav-toggle-active .hamburger::after  { transform:rotate(-45deg); bottom:0; }


        .dm-btn {
            display:inline-flex; align-items:center; justify-content:center;
            width:34px; height:34px; border-radius:50%;
            border:1.5px solid var(--c-border); background:transparent;
            cursor:pointer; color:var(--c-text3);
            transition:border-color .2s,color .2s; flex-shrink:0; padding:0;
        }
        .dm-btn:hover { border-color:var(--theme-primary); color:var(--theme-accent); }
        .dm-btn .ico-sun  { display:none;  }
        .dm-btn .ico-moon { display:block; }
        html.dark .dm-btn .ico-sun  { display:block; }
        html.dark .dm-btn .ico-moon { display:none;  }


        .footer,footer { background-color:var(--c-surface) !important; border-color:var(--c-border) !important; }
        .footer-col-title {
            font-size:.65rem; font-weight:800; text-transform:uppercase;
            letter-spacing:.12em; color:var(--c-text4); margin-bottom:.75rem;
        }
        .footer-link {
            display:block; font-size:.82rem; color:var(--c-text3);
            text-decoration:none; padding:.2rem 0;
            transition:color .15s;
        }
        .footer-link:hover { color:var(--theme-accent); }

        /* CLS-safe leaderboard ad slot */
        .ad-leaderboard-box {
            width: 100%;
            min-height: 90px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background-color: transparent;
        }
        @media (max-width: 767px) {
            .ad-leaderboard-box { min-height: 250px; }
        }
        /* Sticky mobile footer bar */
        #sticky-mobile-bar {
            display: none;
            position: fixed;
            bottom: 0; left: 0; right: 0;
            z-index: 9000;
            background-color:var(--theme-primary);
            color: #fff;
            padding: 0.625rem 1.25rem;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            box-shadow: 0 -2px 12px rgba(0,0,0,0.15);
            font-family: var(--font-body);
            font-size: 0.82rem;
            font-weight: 600;
            transform: translateY(100%);
            transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
        }
        #sticky-mobile-bar.visible { transform: translateY(0); }
        #sticky-mobile-bar a {
            color: #fff;
            text-decoration: none;
            background: rgba(255,255,255,0.18);
            padding: 0.35rem 0.9rem;
            border-radius: 9999px;
            white-space: nowrap;
            font-size: 0.78rem;
        }
        #sticky-mobile-bar a:hover { background: rgba(255,255,255,0.3); }
        #sticky-mobile-bar-close {
            background: none; border: none; color: #fff;
            cursor: pointer; padding: 0.25rem; line-height: 1; flex-shrink: 0;
            opacity: 0.7;
        }
        #sticky-mobile-bar-close:hover { opacity: 1; }
        @media (min-width: 768px) { #sticky-mobile-bar { display: none !important; } }