/* ═══════════════════════════════════════════════
         NOT RETIRED — Design System & Global Styles
         ═══════════════════════════════════════════════ */

      * { margin: 0; padding: 0; box-sizing: border-box; }

      :root {
        /* ─ Typography ─ */
        --ff: "Libre Franklin", system-ui, -apple-system, sans-serif;
        --fs: "Lora", Georgia, "Times New Roman", serif;
        --fm: "JetBrains Mono", "Fira Code", monospace;

        /* ─ Colour Palette ─ */
        --ink:    #1a1a1a;   /* Primary text */
        --ink2:   #333;      /* Secondary text */
        --ink3:   #666;      /* Tertiary text / subtitles */
        --ink4:   #999;      /* Meta text / timestamps */
        --ink5:   #bbb;      /* Divider accents */
        --ink6:   #d4d1cb;   /* Borders / rules */
        --ink7:   #eae8e3;   /* Lightest border */

        --bg:     #f7f6f3;   /* Page background (warm white) */
        --bg2:    #efede8;   /* Cream / card backgrounds */
        --bg3:    #e5e2dc;   /* Deeper cream for hover states */

        --accent:  #1a5c5a;  /* Teal accent — links, category labels */
        --accent2: #13756e;  /* Teal hover state */
        --accent3: #0d524f;  /* Teal active/pressed */
        --gold:    #8a7030;  /* Opinion column accent */
        --gold2:   #6d5926;  /* Gold hover */

        --success: #2d7a3a;  /* Positive / gains */
        --danger:  #a63d3d;  /* Negative / losses */

        /* ─ Footer / Dark UI ─ */
        --dark1:   #2c2c2c;  /* Footer background */
        --dark2:   #2f2f2f;  /* Topbar background */
        --dark3:   #3a3a3a;  /* Dark border */

        /* ─ Layout ─ */
        --w:  1260px;
        --px: clamp(28px, 5vw, 48px);
      }

      html {
        font-size: 15px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        scroll-behavior: smooth;
      }

      body {
        font-family: var(--ff);
        color: var(--ink);
        background: var(--bg);
        line-height: 1.5;
      }

      a { color: inherit; text-decoration: none; }
      button { font-family: var(--ff); cursor: pointer; }
      img { max-width: 100%; display: block; }

      /* ─ Container ─ */
      .w {
        max-width: var(--w);
        margin: 0 auto;
        padding-left: var(--px);
        padding-right: var(--px);
      }

      /* ─ Selection ─ */
      ::selection {
        background-color: var(--accent);
        color: #ffffff;
      }

      /* ─ Focus States ─ */
      :focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }

      /* ─ Custom Scrollbar ─ */
      ::-webkit-scrollbar { width: 8px; }
      ::-webkit-scrollbar-track { background: var(--bg); }
      ::-webkit-scrollbar-thumb { background: var(--ink5); border-radius: 4px; }
      ::-webkit-scrollbar-thumb:hover { background: var(--ink4); }

      /* ─ Smooth Transitions ─ */
      .transition-base { transition: all 0.15s ease; }
      .transition-slow { transition: all 0.3s ease; }

      /* ─ Topbar ─ */
      .tb { background: var(--dark2); font-size: .56rem; color: #8e8e8e; letter-spacing: .07em; text-transform: uppercase; font-weight: 400; }
      .tb-in { display: flex; justify-content: space-between; align-items: center; height: 28px; }
      .tk { display: flex; gap: 16px; font-family: var(--fm); font-size: .56rem; }
      .tku { color: var(--success); }
      .tkd { color: var(--danger); }

      /* ─ Header ─ */
      .hd { background: var(--bg); border-bottom: 1px solid var(--ink); position: sticky; top: 0; z-index: 999; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
      .hd-in { display: flex; align-items: center; justify-content: space-between; height: 56px; }
      .logo { font-family: var(--fs); font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; cursor: pointer; line-height: 1; color: var(--ink); }
      .logo i { color: var(--accent); font-style: normal; }
      .logo small { display: block; font-family: var(--ff); font-size: .44rem; text-transform: uppercase; letter-spacing: .28em; color: var(--ink4); font-weight: 500; margin-top: 2px; }
      .hd-r { display: flex; align-items: center; gap: 6px; }
      .hd-link { font-size: .6rem; font-weight: 600; color: var(--ink3); padding: 6px 10px; text-transform: uppercase; letter-spacing: .06em; background: none; border: none; transition: color .15s; display: flex; align-items: center; gap: 4px; }
      .hd-link:hover { color: var(--ink); }
      .sub-btn { font-size: .56rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; background: transparent; color: var(--ink); border: 1.5px solid var(--ink); padding: 7px 18px; transition: all .2s; }
      .sub-btn:hover { background: var(--ink); color: #fff; }

      /* ─ Nav ─ */
      .nv { border-bottom: 1px solid var(--ink6); background: var(--bg); overflow-x: auto; scrollbar-width: none; }
      .nv::-webkit-scrollbar { display: none; }
      .nav-list { display: flex; list-style: none; }
      .nav-list li { font-size: .64rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 9px 16px; color: var(--ink4); cursor: pointer; white-space: nowrap; transition: color .15s; position: relative; }
      .nav-list li:hover, .nav-list li.ac { color: var(--ink); }
      .nav-list li.ac::after { content: ''; position: absolute; bottom: -1px; left: 16px; right: 16px; height: 2px; background: var(--accent); }

      /* ─ Ads ─ */
      .ad-w { text-align: center; padding: 12px 0; border-bottom: 1px solid var(--ink6); }
      .ad-box { display: inline-flex; align-items: center; justify-content: center; background: var(--bg2); border: 1px dashed var(--ink6); color: var(--ink5); font-size: .48rem; text-transform: uppercase; letter-spacing: .12em; }
      .ad-lbl { font-size: .44rem; color: var(--ink5); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 2px; }

      /* ─ Shared Typography ─ */
      .cat { font-size: .56rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin-bottom: 5px; }
      .meta { font-size: .58rem; color: var(--ink4); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
      .meta b { color: var(--ink3); font-weight: 600; }
      .dot { width: 2.5px; height: 2.5px; border-radius: 50%; background: var(--ink5); flex-shrink: 0; }
      .pimg { position: relative; overflow: hidden; }

      /* ─ Section Title ─ */
      .sec { display: flex; align-items: center; gap: 10px; padding: 20px 0 14px; }
      .sec h2 { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; color: var(--ink3); }
      .sec::after { content: ''; flex: 1; height: 1px; background: var(--ink6); }

      /* ═══ HOMEPAGE ═══ */

      /* Hero 3-col */
      .hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) 260px; padding: 28px 0; }
      .hero > div:first-child { padding-right: 24px; border-right: 1px solid var(--ink6); }
      .hero > div:nth-child(2) { padding: 0 24px; border-right: 1px solid var(--ink6); }
      .hero > div:last-child { padding-left: 24px; }
      .lead h1 { font-family: var(--fs); font-size: 1.5rem; font-weight: 700; line-height: 1.2; margin-bottom: 8px; cursor: pointer; letter-spacing: -.01em; }
      .lead h1:hover { color: var(--accent); }
      .lead .sub { font-family: var(--fs); font-size: .84rem; color: var(--ink3); line-height: 1.55; margin-bottom: 8px; font-weight: 400; }

      /* Mid column items */
      .mid-col { display: flex; flex-direction: column; }
      .mi { padding: 10px 0; cursor: pointer; }
      .mi + .mi { border-top: 1px solid var(--ink6); }
      .mi h2 { font-family: var(--fs); font-size: .92rem; font-weight: 600; line-height: 1.24; margin-bottom: 3px; transition: color .15s; }
      .mi:hover h2 { color: var(--accent); }
      .mi .sub { font-size: .74rem; color: var(--ink3); line-height: 1.4; font-weight: 300; margin-bottom: 3px; }

      /* Most Read */
      .mr-hd { font-size: .56rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding-bottom: 6px; border-bottom: 2px solid var(--ink); margin-bottom: 8px; }
      .mr-row { display: flex; gap: 8px; padding: 6px 0; cursor: pointer; }
      .mr-row + .mr-row { border-top: 1px solid var(--ink6); }
      .mr-num { font-family: var(--fs); font-size: 1.05rem; font-weight: 700; color: var(--ink6); line-height: 1; min-width: 16px; transition: color .15s; }
      .mr-row:hover .mr-num { color: var(--accent); }
      .mr-row h4 { font-size: .68rem; font-weight: 600; line-height: 1.3; margin-bottom: 2px; transition: color .15s; }
      .mr-row:hover h4 { color: var(--accent); }

      /* 4-col grid */
      .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); padding-bottom: 24px; border-bottom: 1px solid var(--ink6); }
      .gc { padding: 0 16px; cursor: pointer; }
      .gc:first-child { padding-left: 0; }
      .gc:last-child { padding-right: 0; }
      .gc + .gc { border-left: 1px solid var(--ink6); }
      .gc h3 { font-family: var(--fs); font-size: .86rem; font-weight: 600; line-height: 1.24; margin-bottom: 4px; transition: color .15s; }
      .gc:hover h3 { color: var(--accent); }
      .gc .sub { font-size: .7rem; color: var(--ink3); line-height: 1.4; font-weight: 300; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

      /* Latest 2-col */
      .lg2 { display: grid; grid-template-columns: 1fr 300px; gap: 28px; padding-bottom: 28px; }
      .li { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--ink6); cursor: pointer; }
      .li:hover h3 { color: var(--accent); }
      .li h3 { font-family: var(--fs); font-size: .84rem; font-weight: 600; line-height: 1.26; margin-bottom: 3px; }
      .li .sub { font-size: .7rem; color: var(--ink3); font-weight: 300; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 3px; }

      /* Opinion */
      .os { background: var(--bg2); border-top: 1px solid var(--ink6); border-bottom: 1px solid var(--ink6); padding: 20px 0; }
      .og { display: grid; grid-template-columns: repeat(3, 1fr); }
      .oc { padding: 0 20px; cursor: pointer; }
      .oc:first-child { padding-left: 0; }
      .oc + .oc { border-left: 1px solid var(--ink6); }
      .oc h3 { font-family: var(--fs); font-size: .86rem; font-weight: 600; line-height: 1.24; margin-bottom: 4px; font-style: italic; transition: color .15s; }
      .oc:hover h3 { color: var(--accent); }

      /* ─ Newsletter ─ */
      .nl-bar { background: var(--ink); padding: 30px 0; text-align: center; }
      .nl-bar h3 { font-family: var(--fs); color: #fff; font-size: 1.1rem; margin-bottom: 4px; }
      .nl-bar p { color: #888; font-size: .76rem; margin-bottom: 14px; font-weight: 300; }
      .nl-f { display: flex; max-width: 400px; margin: 0 auto; }
      .nl-f input { flex: 1; padding: 9px 14px; border: 1px solid #444; background: #2a2a2a; color: #fff; font-family: var(--ff); font-size: .76rem; outline: none; transition: border-color .15s; }
      .nl-f input:focus { border-color: var(--accent2); }
      .nl-f button { background: var(--accent); color: #fff; border: none; padding: 9px 20px; font-size: .56rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; transition: background .15s; }
      .nl-f button:hover { background: var(--accent2); }

      /* ─ Footer ─ */
      .footer { background: var(--dark1); color: #999; padding: 40px 0 20px; font-size: .72rem; }
      .ftg { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 36px; }
      .ftb p { color: #777; line-height: 1.65; font-weight: 300; max-width: 290px; margin-top: 8px; font-size: .7rem; }
      .ftc h4 { font-size: .54rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #888; margin-bottom: 10px; }
      .ftc ul { list-style: none; }
      .ftc li { margin-bottom: 5px; }
      .ftc a { color: #777; font-weight: 300; font-size: .7rem; transition: color .15s; }
      .ftc a:hover { color: #ddd; }
      .ft2 { border-top: 1px solid var(--dark3); padding-top: 16px; display: flex; justify-content: space-between; font-size: .58rem; color: #666; }

      /* ═══ ARTICLE PAGE ═══ */

      .art-c { max-width: 720px; margin: 0 auto; padding: 0 var(--px); }
      .art-wide { max-width: 900px; margin: 0 auto; padding: 0 var(--px); }

      .back { font-size: .58rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink4); cursor: pointer; background: none; border: none; padding: 0; margin: 24px 0 16px; display: flex; align-items: center; gap: 4px; }
      .back:hover { color: var(--ink); }
      .art-t { font-family: var(--fs); font-size: 2rem; font-weight: 700; line-height: 1.16; margin-bottom: 10px; letter-spacing: -.02em; }
      .art-s { font-family: var(--fs); font-size: 1.02rem; color: var(--ink3); line-height: 1.5; margin-bottom: 18px; font-weight: 400; }

      /* NYT-style toolbar */
      .toolbar { display: flex; align-items: center; gap: 0; padding: 10px 0; border-top: 1px solid var(--ink6); border-bottom: 1px solid var(--ink6); margin-bottom: 16px; }
      .tb-listen { display: flex; align-items: center; gap: 6px; padding: 0 16px 0 0; border-right: 1px solid var(--ink6); margin-right: 12px; cursor: pointer; color: var(--ink2); }
      .tb-listen .tb-play { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s; }
      .tb-listen:hover .tb-play { background: var(--accent); }
      .tb-listen span { font-size: .7rem; font-weight: 500; color: var(--ink2); }
      .tb-listen small { font-size: .58rem; color: var(--ink4); font-weight: 400; }
      .tb-share { display: flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--ink6); font-size: .62rem; font-weight: 600; color: var(--ink2); background: none; transition: all .15s; height: 32px; }
      .tb-share:hover { border-color: var(--ink); }
      .tb-icons { display: flex; align-items: center; gap: 4px; margin-left: auto; }
      .tb-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--ink4); cursor: pointer; transition: color .15s; background: none; border: none; }
      .tb-icon:hover { color: var(--ink); }
      .tb-count { font-size: .62rem; color: var(--ink4); margin-left: -2px; }

      .art-cap { font-size: .6rem; color: var(--ink4); font-style: italic; margin-bottom: 24px; }

      /* Author block - NYT style */
      .art-auth { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 24px; }
      .art-auth .av { width: 44px; height: 44px; border-radius: 50%; background: var(--ink2); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; flex-shrink: 0; }
      .art-auth .an { font-size: .82rem; font-weight: 700; margin-bottom: 1px; }
      .art-auth .an span { font-weight: 400; color: var(--ink3); }
      .art-auth .al { font-size: .62rem; color: var(--ink4); font-weight: 400; }
      .art-auth .ad { font-size: .62rem; color: var(--ink4); }

      /* Article body */
      .body p { font-family: var(--fs); font-size: 1.05rem; line-height: 1.78; margin-bottom: 18px; color: #222; }
      .body h2 { font-family: var(--ff); font-size: 1.05rem; font-weight: 700; margin: 32px 0 12px; color: var(--ink); scroll-margin-top: 72px; }
      .body blockquote { border-left: 2px solid var(--ink); padding: 2px 0 2px 20px; margin: 24px 0 6px; font-family: var(--fs); font-size: 1.08rem; font-style: italic; color: var(--ink2); line-height: 1.55; }
      .body .qa { font-size: .7rem; color: var(--ink4); margin-bottom: 24px; padding-left: 22px; font-family: var(--ff); }
      .body .in-cap { font-size: .6rem; color: var(--ink4); font-style: italic; margin-bottom: 20px; }

      /* Embedded tweet */
      .tweet-embed { border: 1px solid var(--ink6); padding: 16px 18px; margin: 24px 0; background: #fff; transition: box-shadow .15s; }
      .tweet-embed:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }
      .tweet-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
      .tweet-av { width: 36px; height: 36px; border-radius: 50%; background: var(--ink6); }
      .tweet-name { font-size: .78rem; font-weight: 700; }
      .tweet-handle { font-size: .64rem; color: var(--ink4); }
      .tweet-body { font-size: .9rem; line-height: 1.55; color: var(--ink); margin-bottom: 8px; }
      .tweet-time { font-size: .58rem; color: var(--ink4); }
      .tweet-x { color: var(--ink); margin-left: auto; }

      /* Video placeholder */
      .vid-embed { position: relative; width: 100%; height: 280px; margin: 24px 0 6px; background: #1a1a2e; display: flex; align-items: center; justify-content: center; cursor: pointer; }
      .vid-play { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.9); display: flex; align-items: center; justify-content: center; color: var(--ink); transition: transform .15s; }
      .vid-embed:hover .vid-play { transform: scale(1.08); }
      .vid-cap { font-size: .6rem; color: var(--ink4); font-style: italic; margin-bottom: 20px; }

      /* TOC + Body grid */
      .art-lay { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 32px; }
      .toc { position: sticky; top: 72px; align-self: start; padding-top: 4px; }
      .toc h4 { font-size: .54rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); color: var(--ink3); }
      .toc ul { list-style: none; }
      .toc li { margin-bottom: 7px; }
      .toc a { font-size: .64rem; color: var(--ink4); font-weight: 500; text-decoration: none; transition: color .15s; display: block; line-height: 1.35; cursor: pointer; }
      .toc a:hover, .toc a.on { color: var(--ink); font-weight: 600; }
      .toc .sep { margin: 8px 0; border-top: 1px solid var(--ink6); }

      /* Key Takeaways */
      .kt-box { border: 1px solid var(--ink6); background: var(--bg2); padding: 22px 28px; margin-bottom: 28px; scroll-margin-top: 72px; }
      .kt-box h3 { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--ink6); color: var(--ink3); }
      .kt-box li { display: flex; gap: 12px; margin-bottom: 12px; font-size: .84rem; line-height: 1.5; color: var(--ink2); }
      .kt-num { font-family: var(--fs); font-size: 1rem; font-weight: 700; color: var(--ink6); min-width: 22px; flex-shrink: 0; }

      /* TLDR */
      .tldr-box { border: 1px solid var(--ink6); background: var(--bg2); padding: 22px 28px; margin: 32px 0; scroll-margin-top: 72px; }
      .tldr-box h3 { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; color: var(--ink3); }
      .tldr-box p { font-size: .88rem; line-height: 1.6; color: var(--ink2); }

      /* FAQ */
      .faq-sec { margin: 32px 0; scroll-margin-top: 72px; }
      .faq-sec h3 { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); color: var(--ink3); }
      .faq-item { border: 1px solid var(--ink6); margin-bottom: 6px; }
      .faq-q { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; cursor: pointer; font-size: .84rem; font-weight: 600; color: var(--ink); transition: background .15s; }
      .faq-q:hover { background: var(--bg2); }
      .faq-chev { font-size: .6rem; color: var(--ink4); transition: transform .2s; flex-shrink: 0; margin-left: 10px; }
      .faq-a { padding: 0 18px 16px; font-size: .8rem; line-height: 1.6; color: var(--ink3); border-top: 1px solid var(--ink6); padding-top: 14px; }

      /* Citations */
      .cite-sec { margin: 24px 0; padding: 18px 0; border-top: 1px solid var(--ink6); }
      .cite-sec h3 { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; color: var(--ink3); }
      .cite-sec ol { padding-left: 18px; }
      .cite-sec li { font-size: .7rem; color: var(--ink4); margin-bottom: 4px; line-height: 1.4; }
      .cite-sec a { color: var(--ink3); text-decoration: underline; text-underline-offset: 2px; }
      .cite-sec a:hover { color: var(--accent); }

      /* Tags */
      .tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 18px 0; }
      .tag { font-size: .52rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 4px 10px; border: 1px solid var(--ink6); color: var(--ink4); cursor: pointer; transition: all .15s; }
      .tag:hover { border-color: var(--ink3); color: var(--ink); }

      /* Author end box */
      .auth-end { display: flex; gap: 14px; padding: 20px 0; border-top: 1px solid var(--ink6); margin-top: 24px; align-items: flex-start; }
      .auth-end .av { width: 46px; height: 46px; border-radius: 50%; background: var(--ink2); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; flex-shrink: 0; }
      .auth-end h4 { font-size: .82rem; font-weight: 700; margin-bottom: 1px; }
      .auth-end .role { font-size: .6rem; color: var(--ink4); margin-bottom: 4px; }
      .auth-end .bio { font-size: .72rem; color: var(--ink3); line-height: 1.5; font-weight: 300; }

      /* Comments */
      .cmt-w { padding-bottom: 44px; }
      .cmt-hd { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--ink6); margin-bottom: 14px; }
      .cmt-hd h3 { font-size: .8rem; font-weight: 700; }
      .cm { padding: 12px 0; border-bottom: 1px solid var(--ink6); }
      .cm-top { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
      .cm-av { width: 24px; height: 24px; border-radius: 50%; background: var(--ink2); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .46rem; font-weight: 700; flex-shrink: 0; }
      .cm-n { font-size: .7rem; font-weight: 600; }
      .cm-t { font-size: .56rem; color: var(--ink4); }
      .cm-b { font-size: .78rem; line-height: 1.5; color: var(--ink3); margin-bottom: 5px; padding-left: 30px; }
      .cm-a { display: flex; gap: 12px; padding-left: 30px; font-size: .54rem; color: var(--ink4); }
      .cm-a span { cursor: pointer; }
      .cm-a span:hover { color: var(--ink); }
      .cm-rp { margin-left: 30px; border-left: 1px solid var(--ink6); padding-left: 14px; }

      /* ═══ RESPONSIVE ═══ */
      @media (max-width: 960px) {
        :root { --px: 28px; }
        .hero { grid-template-columns: 1fr; }
        .hero > div { padding: 16px 0 !important; border-right: none !important; border-bottom: 1px solid var(--ink6); }
        .grid4 { grid-template-columns: 1fr 1fr; }
        .gc + .gc { border-left: none; border-top: 1px solid var(--ink6); }
        .gc { padding: 12px 0 !important; }
        .og { grid-template-columns: 1fr; }
        .oc { padding: 12px 0 !important; border-left: none !important; }
        .oc + .oc { border-top: 1px solid var(--ink6); }
        .lg2 { grid-template-columns: 1fr; }
        .li { grid-template-columns: 130px 1fr; }
        .ftg { grid-template-columns: 1fr 1fr; }
        .art-t { font-size: 1.5rem; }
        .art-lay { grid-template-columns: 1fr; }
        .toc { position: relative; top: 0; padding: 14px 0; border-bottom: 1px solid var(--ink6); }
        .hd-link.hide-m { display: none; }
      }

      @media (max-width: 600px) {
        :root { --px: 24px; }
        .grid4 { grid-template-columns: 1fr; }
        .tk { display: none; }
        .ftg { grid-template-columns: 1fr; }
        .li { grid-template-columns: 1fr; }
        .li .pimg { display: none; }
        .ft2 { flex-direction: column; gap: 4px; }
      }

      /* ═══ GHOST-SPECIFIC ADDITIONS ═══ */

      /* Required Koenig width classes */
      .kg-width-wide { position: relative; width: 85vw; min-width: 100%; margin: auto calc(50% - 42.5vw); }
      .kg-width-full { position: relative; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
      .kg-width-full img, .kg-width-wide img { width: 100%; }

      /* Ghost card overrides - match Not Retired design */
      .gh-content .kg-callout-card { border: 1px solid var(--ink6) !important; background: var(--bg2) !important; padding: 22px 28px !important; margin: 28px 0 !important; border-radius: 0 !important; }
      .gh-content .kg-toggle-card { border: 1px solid var(--ink6) !important; margin-bottom: 6px !important; border-radius: 0 !important; }
      .gh-content .kg-bookmark-card { border: 1px solid var(--ink6) !important; border-radius: 0 !important; margin: 24px 0 !important; }
      .gh-content .kg-button-card a { background: var(--accent) !important; border-radius: 0 !important; }

      /* Ghost image cards */
      .gh-content .kg-image-card img { width: 100%; height: auto; }
      .gh-content .kg-image-card figcaption { font-size: .6rem; color: var(--ink4); font-style: italic; margin-top: 6px; text-align: center; }

      /* Ghost embed cards (YouTube, Twitter) */
      .gh-content .kg-embed-card { margin: 24px 0; }
      .gh-content .kg-embed-card iframe { width: 100%; }

      /* Pagination */
      .pagination { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 28px 0; font-size: .76rem; color: var(--ink4); }
      .pagination a { font-size: .64rem; font-weight: 600; color: var(--ink3); padding: 8px 18px; border: 1px solid var(--ink6); text-decoration: none; text-transform: uppercase; letter-spacing: .06em; transition: all .15s; }
      .pagination a:hover { border-color: var(--ink); color: var(--ink); }

      /* Ghost native comments */
      #ghost-comments-root { max-width: 100%; }

      /* Ghost search */
      .gh-search { z-index: 1000; }

      /* Navigation - style Ghost's default output */
      .nv .nav { display: flex; list-style: none; padding: 0; margin: 0; }
      .nv .nav li { font-size: .64rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 9px 16px; color: var(--ink4); white-space: nowrap; transition: color .15s; }
      .nv .nav li:hover, .nv .nav li.nav-current { color: var(--ink); }
      .nv .nav a { color: inherit; text-decoration: none; }
      /* Also style our custom nav-list class */
      .nv .nav-list { display: flex; list-style: none; padding: 0; margin: 0; }
      .nv .nav-list li { font-size: .64rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 9px 16px; color: var(--ink4); white-space: nowrap; transition: color .15s; }
      .nv .nav-list li:hover, .nv .nav-list li.ac { color: var(--ink); }
      .nv .nav-list a { color: inherit; text-decoration: none; }

      /* Author avatar size override (30% bigger than reference) */
      .art-auth .av { width: 56px !important; height: 56px !important; min-width: 56px; font-size: .82rem !important; }
      .art-auth .av img { width: 56px !important; height: 56px !important; }

      /* Logo spacing fix */
      .logo small { margin-top: 4px !important; }
      .logo { text-decoration: none !important; }

      /* Reading time in toolbar */
      .tb-reading { font-size: .64rem; color: var(--ink4); font-weight: 500; padding-right: 14px; border-right: 1px solid var(--ink6); margin-right: 10px; }

      /* Search button styling */
      .hd-link svg { flex-shrink: 0; }

      /* Newsletter form fix for Ghost */
      .nl-f form { display: flex; width: 100%; }
      .nl-f input[name="email"] { flex: 1; padding: 9px 14px; border: 1px solid #444; background: #2a2a2a; color: #fff; font-family: var(--ff); font-size: .76rem; outline: none; }
      .nl-f button[type="submit"] { background: var(--accent); color: #fff; border: none; padding: 9px 20px; font-size: .56rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; cursor: pointer; }

      /* Hide Ghost notification bar */
      .gh-notification-bar, .gh-portal-notification { display: none !important; }

      /* Print styles */
      @media print {
        .hd, .nv, .tb, .nl-bar, .footer, .toolbar, .toc, .ad-w, .ad-box, .tags, .auth-end, .cmt-w { display: none !important; }
        .art-c, .art-wide { max-width: 100%; padding: 0; }
        .art-lay { grid-template-columns: 1fr; }
      }

/* ═══ ADMIN API HTML CARD STYLES ═══ */
/* These target content uploaded via Ghost Admin API with kg-card HTML comments */
/* The JSON importer strips these, but the Admin API preserves them */

section[data-nr="tldr"], section[data-nr="kt"] {
  border: 1px solid var(--ink6);
  background: var(--bg2);
  padding: 22px 28px;
  margin: 28px 0;
}
section[data-nr="tldr"] h4, section[data-nr="kt"] h4, section[data-nr="faq"] h4, section[data-nr="cite"] h4 {
  font-family: var(--ff);
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink3);
  margin: 0 0 14px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--ink6);
}
section[data-nr="tldr"] p { font-size: .88rem; line-height: 1.6; color: var(--ink2); margin: 0; }
section[data-nr="kt"] ol { list-style: none; padding: 0; margin: 0; }
section[data-nr="kt"] li { display: flex; gap: 12px; margin-bottom: 14px; font-size: .84rem; line-height: 1.5; color: var(--ink2); }
section[data-nr="kt"] li b { font-family: var(--fs); font-size: 1rem; font-weight: 700; color: var(--ink6); min-width: 22px; flex-shrink: 0; }

section[data-nr="faq"] { background: transparent; border: none; padding: 0; margin: 32px 0; }
section[data-nr="faq"] h4 { border-bottom: 2px solid var(--ink); padding-bottom: 8px; }
section[data-nr="faq"] details { border: 1px solid var(--ink6); margin-bottom: 6px; }
section[data-nr="faq"] summary { padding: 14px 18px; font-size: .84rem; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; transition: background .15s; }
section[data-nr="faq"] summary:hover { background: var(--bg2); }
section[data-nr="faq"] summary::-webkit-details-marker { display: none; }
section[data-nr="faq"] summary::after { content: '▾'; font-size: .7rem; color: var(--ink4); transition: transform .2s; flex-shrink: 0; margin-left: 12px; }
section[data-nr="faq"] details[open] summary::after { transform: rotate(180deg); }
section[data-nr="faq"] details p { padding: 14px 18px 16px; font-size: .8rem; line-height: 1.6; color: var(--ink3); border-top: 1px solid var(--ink6); margin: 0; }

section[data-nr="cite"] { background: transparent; border: none; border-top: 1px solid var(--ink6); padding: 18px 0; margin: 24px 0; }
section[data-nr="cite"] h4 { border-bottom: none; padding-bottom: 0; }
section[data-nr="cite"] ol { padding-left: 18px; margin: 0; }
section[data-nr="cite"] li { font-size: .7rem; color: var(--ink4); margin-bottom: 4px; line-height: 1.4; }
section[data-nr="cite"] a { color: var(--ink3); text-decoration: underline; text-underline-offset: 2px; }
section[data-nr="cite"] a:hover { color: var(--accent); }

      /* Bigger logo */
      .logo { font-size: 1.9rem !important; }
      .logo small { font-size: .48rem !important; margin-top: 5px !important; }
      .logo img { max-height: 48px !important; }