*, *::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:   #0369a1;
            --theme-secondary: #0284c7;
            /* 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:    #0369a1;
            --font-heading:    'Crimson Text', serif;
            --font-body:       Inter, 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: #0ea5e9;
        }

        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:      #f9fcff; --c-bg2:     #f5f4f2; --c-bg3:     #eeede9;
            --c-surface: #ffffff; --c-border:  rgba(0,0,0,0.08);
            --c-text:    #0c1a2e; --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:   #8b9cad;
            --c-text4:   #64748b; --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; }
        }


        /* Mobile: brand on its own row, then link columns as a tight
           two-up grid. The old uniform 2rem gap let short columns float
           in a field of whitespace on phones. */
        .footer-layout { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2rem 1.5rem; margin-bottom: 2rem; align-items: start; }
        .footer-layout > div { min-width: 0; }
        .footer-col-title { margin-bottom: .6rem; }
        .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; }


        /* 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.xai6-anchor-open.anchor-at-bottom .back-to-top { bottom: calc(2rem + var(--xai6-anchor-h, 0px)); }

        /* 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%; }

        @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); }


        .prose { color: var(--c-text2); line-height: 1.8; }
        .prose h1,.prose h2,.prose h3,.prose h4 { color:var(--c-text) !important; font-family:var(--font-heading) !important; margin-top:2rem; margin-bottom:.75rem; line-height:1.25; }
        .prose h1 { font-size:2rem; font-weight:700; }
        .prose h2 { font-size:1.4rem; font-weight:700; border-bottom:2px solid var(--theme-primary); padding-bottom:.4rem; margin-top:2.5rem; }
        .prose h3 { font-size:1.15rem; font-weight:700; }
        .prose p  { margin-bottom:1.2rem; }
        .prose ul,.prose ol { margin:0 0 1.2rem 1.5rem; }
        .prose li { margin-bottom:.4rem; }
        .prose strong { color:var(--c-text); font-weight:700; }
        .prose a  { color:var(--theme-accent); text-decoration:underline; text-underline-offset:2px; }
        .prose a:hover { opacity:.8; }
        .prose blockquote { border-left:4px solid var(--theme-primary); padding:.75rem 1.25rem; margin:1.5rem 0; background-color:var(--c-bg2); border-radius:0 .5rem .5rem 0; }
        .prose hr { border:none; border-top:1px solid var(--c-border); margin:2rem 0; }
        .prose code { background-color:var(--c-bg3); padding:.1em .4em; border-radius:.3rem; font-size:.9em; }
        .prose input[type="text"],.prose input[type="email"],.prose textarea { border-radius:.5rem !important; }
        .prose input[type="submit"] { background-color:var(--theme-primary) !important; border-radius:9999px !important; font-weight:700 !important; letter-spacing:.05em !important; text-transform:uppercase !important; font-size:.8rem !important; padding:.75rem 2rem !important; }
        .prose label { color:var(--c-text3) !important; }
    
        /* Dark-mode correctness for the theme colour. --theme-primary is a
           DARK hue (navy, wine, forest): perfect as light-mode text and as
           a fill under white type, invisible as dark-mode text — that is
           the "ghost row" bug. In dark it becomes the lightened accent,
           and the fills that kept white type flip to ink type instead. */
        html.dark { --theme-primary: #0ea5e9; }
        html.dark .xai6-cat-chip:hover, html.dark .xai6-cat-chip.is-current { color:#0d1117 !important; }
        html.dark .xai6-ad-fallback a { color:#0d1117 !important; }
        
        /* Sidebar widgets — editorial ranking. The rank digits are set in
           the display face like a print "most read" column, hairline-ruled
           to the item, accent on hover. */
        .side-item { display:flex; gap:.9rem; align-items:flex-start; }
        .side-rank { flex:0 0 auto; font-family:var(--font-heading); font-style:italic; font-size:1.7rem; font-weight:700; line-height:1; color:var(--theme-accent); opacity:.4; min-width:2.2rem; text-align:right; padding-top:.1rem; transition:opacity .2s; }
        .side-item:hover .side-rank { opacity:1; }
        .side-body { min-width:0; flex:1 1 auto; }
        .side-kicker { display:inline-block; font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:var(--theme-accent); text-decoration:none; margin-bottom:.3rem; }
        .side-kicker:hover { text-decoration:underline; }
        .side-title { margin-bottom:.35rem; font-family:var(--font-heading); }
        .side-title a { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; color:var(--c-text); text-decoration:none; }
        .side-title a:hover { color:var(--theme-accent); }
        .side-meta { font-size:.72rem; color:var(--c-text4); }