:root {
      --bg:        #0A1A2F;
      --bg-2:      #071422;
      --bg-3:      #0D1F38;
      --surface:   #102444;
      --s2:        #152D50;
      --border:    rgba(255,255,255,0.07);
      --border-2:  rgba(255,255,255,0.13);
      --border-3:  rgba(255,111,48,0.22);
      --accent:    #FF6F30;
      --accent-lt: #FF8C57;
      --accent-dim:rgba(255,111,48,0.10);
      --text:      #F4F1EC;
      --text-2:    #8A9AAD;
      --text-3:    #3D5069;
      --ease:      cubic-bezier(0.22, 1, 0.36, 1);
      --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
      --max:       1160px;
      --r:         22px;
      --r-sm:      13px;
      --r-xs:      9px;
      --cat-risk:  #FF6F30;
      --cat-market:#5B9BD5;
      --cat-options:#2CB5A0;
      --cat-macro: #9B72CF;
      --cat-strat: #E8A838;
    }

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

    html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
      background: var(--bg); color: var(--text);
      -webkit-font-smoothing: antialiased; overflow-x: hidden;
    }

    /* SCROLL BAR */
    #bar { position:fixed;top:0;left:0;height:2px;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent-lt));z-index:9999;pointer-events:none;transition:width 0.08s linear; }

    /* LAYOUT */
    .inner { max-width: var(--max); margin: 0 auto; }

    /* FADE IN */
    .fi { opacity:0;transform:translateY(16px);transition:opacity 0.62s var(--ease-out),transform 0.62s var(--ease-out); }
    .fi.in { opacity:1;transform:none; }

    /* NAV */
    nav {
      position: sticky; top: 0; z-index: 500;
      height: 76px; display: flex; align-items: center; justify-content: space-between;
      padding: 0 2.5rem;
      background: rgba(10,26,47,0.94);
      backdrop-filter: blur(28px) saturate(200%);
      -webkit-backdrop-filter: blur(28px) saturate(200%);
      border-bottom: 1px solid var(--border);
    }
    .logo { display:flex;align-items:center;gap:0.7rem;text-decoration:none;flex-shrink:0; }
    .logo-icon { width:44px;height:44px;object-fit:contain;display:block;transition:transform .25s,filter .25s; }
    .logo:hover .logo-icon { transform:scale(1.05); filter: drop-shadow(0 0 12px rgba(255,140,87,.45)); }
    .logo-text { font-size:1.15rem;font-weight:800;color:var(--text);letter-spacing:-0.03em; }
    .logo-text span { color:var(--accent-lt); }
    .nav-links { list-style:none;display:flex;gap:0.2rem; }
    .nav-links a { padding:0.44rem 0.85rem;border-radius:7px;font-size:0.835rem;font-weight:500;color:var(--text-2);text-decoration:none;transition:color 0.15s,background 0.15s;white-space:nowrap; }
    .nav-links a:hover { color:var(--text);background:rgba(255,255,255,0.06); }
    .nav-links a.active { color:var(--accent-lt); }
    .nav-btns { display:flex;gap:0.55rem;align-items:center; }
    .btn { display:inline-flex;align-items:center;gap:0.38rem;padding:0.58rem 1.3rem;border-radius:999px;font-size:0.87rem;font-weight:700;text-decoration:none;cursor:pointer;border:none;font-family:inherit;letter-spacing:-0.01em;transition:all 0.22s var(--ease);white-space:nowrap;line-height:1; }
    .btn-primary { background:var(--accent);color:#fff;box-shadow:0 2px 6px rgba(0,0,0,0.35),0 4px 18px rgba(255,111,48,0.35); }
    .btn-primary:hover { background:#e85d20;transform:translateY(-2px);box-shadow:0 8px 28px rgba(255,111,48,0.5); }
    .btn-ghost { background:transparent;color:var(--text-2);border:1px solid var(--border-2); }
    .btn-ghost:hover { color:var(--text);border-color:rgba(255,255,255,0.3);background:rgba(255,255,255,0.06); }

    /* HAMBURGER */
    .hamburger { display:none;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:6px;border-radius:7px;transition:background 0.15s; }
    .hamburger:hover { background:rgba(255,255,255,0.06); }
    .hamburger span { display:block;width:22px;height:1.5px;background:var(--text-2);border-radius:2px;transition:transform 0.28s var(--ease),opacity 0.2s; }
    .hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity:0; }
    .hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }
    .mobile-nav { display:none;position:fixed;top:76px;left:0;right:0;background:rgba(10,26,47,0.98);backdrop-filter:blur(28px);border-bottom:1px solid var(--border);z-index:499;padding:1.25rem 1.5rem 1.75rem;flex-direction:column;gap:0.25rem;transform:translateY(-12px);opacity:0;transition:transform 0.3s var(--ease),opacity 0.25s var(--ease);pointer-events:none; }
    .mobile-nav.open { transform:translateY(0);opacity:1;pointer-events:all; }
    .mobile-nav a { display:block;padding:0.72rem 0.65rem;font-size:0.92rem;font-weight:500;color:var(--text-2);text-decoration:none;border-radius:8px;transition:color 0.15s,background 0.15s; }
    .mobile-nav a:hover { color:var(--text);background:rgba(255,255,255,0.05); }
    .mobile-nav .mobile-cta { margin-top:0.85rem;padding-top:0.85rem;border-top:1px solid var(--border);display:flex;gap:0.6rem; }

    /* BREADCRUMB */
    .breadcrumb { padding: 1rem 2.5rem; background: var(--bg-2); border-bottom: 1px solid var(--border); }
    .breadcrumb nav { position:static;height:auto;background:none;border:none;backdrop-filter:none;padding:0;justify-content:flex-start; }
    .breadcrumb ol { list-style:none;display:flex;gap:0.5rem;align-items:center;font-size:0.72rem;color:var(--text-3); }
    .breadcrumb li + li::before { content:"/";margin-right:0.5rem;opacity:0.4; }
    .breadcrumb a { color:var(--text-3);text-decoration:none;transition:color 0.15s; }
    .breadcrumb a:hover { color:var(--accent-lt); }
    .breadcrumb li:last-child { color:var(--text-2); }

    /* BLOG HERO */
    .blog-hero { background:var(--bg-2);padding:4.5rem 2rem 3.5rem;border-bottom:1px solid var(--border);position:relative;overflow:hidden; }
    .blog-hero::before { content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 100% at 50% 0%,rgba(255,111,48,0.06) 0%,transparent 70%); }
    .blog-hero .inner { position:relative;z-index:1; }
    .blog-hero-label { display:inline-block;font-size:0.67rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent-lt);margin-bottom:0.85rem; }
    .blog-hero h1 { font-size:clamp(2.4rem,5vw,4.2rem);font-weight:800;letter-spacing:-0.05em;line-height:1.03;margin-bottom:0.9rem;max-width:680px; }
    .blog-hero p { font-size:1rem;color:var(--text-2);max-width:500px;line-height:1.75;margin-bottom:2rem; }

    /* SEARCH */
    .search-wrap { display:flex;gap:0.7rem;max-width:480px; }
    .search-input { flex:1;padding:0.72rem 1rem;background:var(--bg-3);border:1.5px solid var(--border-2);border-radius:var(--r-sm);color:var(--text);font-size:0.9rem;font-family:inherit;outline:none;transition:border-color 0.18s,box-shadow 0.18s; }
    .search-input::placeholder { color:var(--text-3); }
    .search-input:focus { border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,111,48,0.12); }

    /* FILTERS */
    .filters-row { padding:1.5rem 2rem;display:flex;gap:0.5rem;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--border);background:var(--bg); }
    .filter-btn { background:none;border:1px solid var(--border-2);color:var(--text-3);padding:0.4rem 1rem;border-radius:999px;font-size:0.75rem;font-weight:600;cursor:pointer;font-family:inherit;letter-spacing:0.02em;transition:all 0.2s var(--ease); }
    .filter-btn:hover { color:var(--text);border-color:rgba(255,255,255,0.26); }
    .filter-btn.active { background:var(--accent-dim);border-color:var(--border-3);color:var(--accent-lt); }
    .filter-count { margin-left:auto;font-size:0.72rem;color:var(--text-3); }

    /* BLOG GRID */
    .blog-section { padding:3.5rem 2rem 5rem; }
    .featured-post { margin-bottom:2.5rem; }
    .post-card { background:var(--bg-3);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:border-color 0.28s var(--ease),transform 0.28s var(--ease),box-shadow 0.28s var(--ease); }
    .post-card:hover { border-color:rgba(255,111,48,0.3);transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,0.4); }
    .post-card.featured { flex-direction:row;gap:0; }
    .post-card-img { background:linear-gradient(135deg,var(--bg-2) 0%,var(--surface) 100%);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden; }
    .post-card.featured .post-card-img { width:42%;flex-shrink:0; }
    .post-card:not(.featured) .post-card-img { height:160px; }
    .post-card-img-inner { font-size:0.75rem;font-weight:800;letter-spacing:0.12em;opacity:0.35;color:var(--text);font-family:-apple-system,sans-serif; }
    .post-card-img::after { content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,111,48,0.06),transparent); }
    .post-body { padding:2rem;display:flex;flex-direction:column;flex:1; }
    .post-card.featured .post-body { padding:2.5rem 2.5rem; }
    .cat-tag { display:inline-flex;align-items:center;gap:0.4rem;font-size:0.62rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;padding:0.28rem 0.75rem;border-radius:999px;margin-bottom:0.9rem;align-self:flex-start; }
    .cat-risk    { background:rgba(255,111,48,0.12);color:#FF8C57;border:1px solid rgba(255,111,48,0.22); }
    .cat-market  { background:rgba(91,155,213,0.12);color:#7DB5E8;border:1px solid rgba(91,155,213,0.22); }
    .cat-options { background:rgba(44,181,160,0.12);color:#4ECFB8;border:1px solid rgba(44,181,160,0.22); }
    .cat-macro   { background:rgba(155,114,207,0.12);color:#B890E0;border:1px solid rgba(155,114,207,0.22); }
    .cat-strat   { background:rgba(232,168,56,0.12);color:#F0C060;border:1px solid rgba(232,168,56,0.22); }
    .post-title { font-size:1.15rem;font-weight:700;letter-spacing:-0.02em;line-height:1.3;color:var(--text);margin-bottom:0.65rem;transition:color 0.18s; }
    .post-card.featured .post-title { font-size:1.55rem; }
    .post-card:hover .post-title { color:var(--accent-lt); }
    .post-excerpt { font-size:0.86rem;color:var(--text-2);line-height:1.75;flex:1;margin-bottom:1.4rem; }
    .post-meta { display:flex;align-items:center;gap:1rem;font-size:0.68rem;color:var(--text-3);margin-bottom:1.2rem;flex-wrap:wrap; }
    .post-meta span { display:flex;align-items:center;gap:0.35rem; }
    .post-read-btn { align-self:flex-start;font-size:0.78rem;font-weight:700;color:var(--accent-lt);text-decoration:none;letter-spacing:0.04em;display:inline-flex;align-items:center;gap:0.4rem;transition:gap 0.2s var(--ease),color 0.15s; }
    .post-read-btn:hover { color:var(--accent);gap:0.65rem; }
    .post-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem; }
    .no-results { text-align:center;padding:4rem 0;color:var(--text-3);font-size:0.9rem;display:none; }
    .no-results.show { display:block; }

    /* CTA BANNER */
    .blog-cta { background:var(--bg-2);padding:4rem 2rem;border-top:1px solid var(--border);border-bottom:1px solid var(--border);position:relative;overflow:hidden; }
    .blog-cta::before { content:"";position:absolute;inset:0;background:radial-gradient(ellipse 50% 100% at 50%,rgba(255,111,48,0.06),transparent 70%);pointer-events:none; }
    .blog-cta-inner { max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;position:relative;z-index:1; }
    .blog-cta p { font-size:0.7rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent-lt);margin-bottom:0.5rem; }
    .blog-cta h2 { font-size:clamp(1.3rem,2.5vw,1.9rem);font-weight:800;letter-spacing:-0.03em;color:var(--text); }
    .blog-cta-actions { display:flex;gap:0.8rem;flex-shrink:0;flex-wrap:wrap; }

    /* FAQ */
    .blog-faq { padding:5rem 2rem; }
    .faq-inner { max-width:680px;margin:0 auto;text-align:center; }
    .sec-label { display:inline-flex;align-items:center;gap:0.55rem;font-size:0.67rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent-lt);margin-bottom:1.1rem; }
    .sec-label::before { content:"";width:20px;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-lt));border-radius:2px;flex-shrink:0; }
    .sec-title { font-size:clamp(2.2rem,4vw,3.8rem);font-weight:800;letter-spacing:-0.05em;line-height:1.04;color:var(--text); }
    .sec-sub { font-size:1.05rem;color:var(--text-2);line-height:1.84;margin-top:1rem; }
    .faq-list { margin-top:2.75rem;text-align:left;border:1px solid var(--border);border-radius:var(--r);overflow:hidden; }
    .faq-row { border-bottom:1px solid var(--border); }
    .faq-row:last-child { border-bottom:none; }
    .faq-q { width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.3rem 1.5rem;background:var(--bg-3);border:none;cursor:pointer;font-family:inherit;font-size:0.9rem;font-weight:600;color:var(--text);text-align:left;transition:background 0.15s;line-height:1.4; }
    .faq-q:hover { background:var(--surface); }
    .faq-ico { width:22px;height:22px;border-radius:50%;background:var(--bg-2);border:1px solid var(--border-2);display:flex;align-items:center;justify-content:center;font-size:0.85rem;color:var(--text-3);flex-shrink:0;font-weight:300;transition:transform 0.26s var(--ease),background 0.2s,color 0.2s,border-color 0.2s; }
    .faq-row.open .faq-ico { transform:rotate(45deg);background:var(--accent-dim);color:var(--accent-lt);border-color:rgba(255,111,48,0.3); }
    .faq-a { max-height:0;overflow:hidden;background:var(--bg-3);transition:max-height 0.38s var(--ease-out); }
    .faq-row.open .faq-a { max-height:400px; }
    .faq-a-inner { padding:0 1.5rem 1.3rem;font-size:0.87rem;color:var(--text-2);line-height:1.74; }

    /* FOOTER */
    footer { background:var(--bg-2);border-top:none;padding:2.75rem 2rem;position:relative; }
    footer::before { content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(255,111,48,0.28) 30%,rgba(255,111,48,0.28) 70%,transparent 100%); }
    .footer-inner { max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.2rem; }
    .footer-logo { font-size:0.95rem;font-weight:700;color:var(--text-2);letter-spacing:-0.02em; }
    .footer-logo span { color:var(--accent-lt); }
    .footer-links { display:flex;gap:1.6rem;flex-wrap:wrap; }
    .footer-links a { font-size:0.76rem;color:var(--text-3);text-decoration:none;transition:color 0.15s; }
    .footer-links a:hover { color:var(--text-2); }
    .footer-copy { font-size:0.7rem;color:var(--text-3); }

    /* SCROLL TO TOP */
    #scrolltop { position:fixed;bottom:28px;right:28px;z-index:400;width:42px;height:42px;border-radius:50%;background:var(--surface);border:1px solid var(--border-2);color:var(--text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.3s var(--ease),transform 0.3s var(--ease),background 0.2s;transform:translateY(8px); }
    #scrolltop.show { opacity:1;pointer-events:all;transform:translateY(0); }
    #scrolltop:hover { background:var(--accent);color:#fff;border-color:var(--accent); }
    #scrolltop:focus-visible { outline:2px solid var(--accent-lt);outline-offset:3px; }

    /* RESPONSIVE */
    @media(max-width:900px) {
      .post-card.featured { flex-direction:column; }
      .post-card.featured .post-card-img { width:100%;height:180px; }
      .post-grid { grid-template-columns:repeat(2,1fr); }
    }
    @media(max-width:620px) {
      nav { padding:0 1.35rem; }
      .nav-links { display:none; }
      .hamburger { display:flex; }
      .mobile-nav { display:flex; }
      .nav-btns .btn { display:none; }
      .post-grid { grid-template-columns:1fr; }
      .blog-hero { padding:3rem 1.35rem 2.5rem; }
      .post-card.featured .post-body { padding:1.75rem 1.35rem; }
      .filter-btn { padding:0.38rem 0.75rem; font-size:0.78rem; }
      .blog-section { padding:2.5rem 1.35rem 4rem; }
      .blog-faq { padding:3.5rem 1.35rem; }
      .blog-cta { padding:3rem 1.35rem; }
      .blog-cta-inner { flex-direction:column; }
      .filters-row { padding:1.25rem 1.35rem; }
      .breadcrumb { padding:0.85rem 1.35rem; }
    }

    .meta-date,.meta-read,.meta-author { font-size:0.78rem;color:var(--text-3); }


    /* ─── SVG THUMBNAILS (added) ─── */
    .post-card-img-inner { display: none; }
    .thumb-wrap {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
    }
    .thumb-svg {
      width: 100%; height: 100%;
      display: block;
      transition: transform 0.6s var(--ease-out);
    }
    .post-card:hover .thumb-svg { transform: scale(1.04); }
    .post-card-img { position: relative; }
    .post-card-img::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(180deg, transparent 60%, rgba(7,20,34,0.55) 100%);
      pointer-events: none;
    }

    /* per-category coloring via currentColor */
    .post-card[data-cat="risk"]     .thumb-wrap { color: var(--cat-risk); }
    .post-card[data-cat="market"]   .thumb-wrap { color: var(--cat-market); }
    .post-card[data-cat="options"]  .thumb-wrap { color: var(--cat-options); }
    .post-card[data-cat="macro"]    .thumb-wrap { color: var(--cat-macro); }
    .post-card[data-cat="strategy"] .thumb-wrap { color: var(--cat-strat); }

    /* tinted background per category */
    .post-card[data-cat="risk"]     .post-card-img { background: linear-gradient(135deg, rgba(255,111,48,0.14) 0%, var(--bg-3) 100%); }
    .post-card[data-cat="market"]   .post-card-img { background: linear-gradient(135deg, rgba(91,155,213,0.14) 0%, var(--bg-3) 100%); }
    .post-card[data-cat="options"]  .post-card-img { background: linear-gradient(135deg, rgba(44,181,160,0.14) 0%, var(--bg-3) 100%); }
    .post-card[data-cat="macro"]    .post-card-img { background: linear-gradient(135deg, rgba(155,114,207,0.14) 0%, var(--bg-3) 100%); }
    .post-card[data-cat="strategy"] .post-card-img { background: linear-gradient(135deg, rgba(232,168,56,0.14) 0%, var(--bg-3) 100%); }

    /* taller standard thumbnail; let featured stay full-height */
    .post-card:not(.featured) .post-card-img { height: 200px; }


    /* ─── STICKY FILTER + SEARCH BAR (added) ─── */
    .filters-row { display: none; }
    .filters-bar {
      position: sticky; top: 76px; z-index: 400;
      background: rgba(10,26,47,0.92);
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      border-bottom: 1px solid var(--border);
      padding: 0.85rem 2rem;
    }
    .filters-inner {
      max-width: var(--max); margin: 0 auto;
      display: flex; align-items: center; gap: 1.5rem;
      flex-wrap: wrap;
    }
    .filters-pills {
      display: flex; gap: 0.4rem; flex-wrap: wrap;
      flex: 1; min-width: 0;
    }
    .filter-btn {
      background: none; border: 1px solid var(--border-2);
      color: var(--text-3);
      padding: 0.42rem 0.95rem; border-radius: 999px;
      font-size: 0.74rem; font-weight: 600;
      cursor: pointer; font-family: inherit;
      letter-spacing: 0.02em;
      transition: all 0.18s var(--ease);
      white-space: nowrap;
    }
    .filter-btn:hover { color: var(--text); border-color: rgba(255,255,255,0.26); }
    .filter-btn.active {
      background: var(--accent-dim);
      border-color: var(--border-3);
      color: var(--accent-lt);
    }
    .filters-search {
      position: relative; display: flex; align-items: center;
      background: var(--bg-3);
      border: 1px solid var(--border-2);
      border-radius: 999px;
      padding: 0 0.4rem 0 2rem;
      transition: border-color 0.18s, box-shadow 0.18s;
      min-width: 260px;
    }
    .filters-search:focus-within {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(255,111,48,0.12);
    }
    .filters-search-ico {
      position: absolute; left: 0.7rem; top: 50%;
      transform: translateY(-50%);
      width: 14px; height: 14px;
      color: var(--text-3); pointer-events: none;
    }
    .filters-search .search-input {
      flex: 1; padding: 0.5rem 0.4rem;
      background: none; border: none;
      color: var(--text); font-size: 0.85rem;
      font-family: inherit; outline: none;
    }
    .filter-count {
      flex-shrink: 0;
      font-size: 0.7rem; font-weight: 700;
      letter-spacing: 0.05em;
      color: var(--accent-lt);
      background: var(--accent-dim);
      padding: 0.28rem 0.7rem;
      border-radius: 999px;
      font-variant-numeric: tabular-nums;
    }

    /* ─── FEATURED CARD UPGRADE ─── */
    .featured-tag-row {
      display: flex; align-items: center; gap: 0.6rem;
      flex-wrap: wrap;
      margin-bottom: 1rem;
    }
    .post-card.featured .featured-tag-row .cat-tag { margin-bottom: 0; }
    .featured-pick {
      font-size: 0.6rem; font-weight: 700;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: #F0C060;
      padding: 0.28rem 0.65rem;
      border-radius: 999px;
      border: 1px solid rgba(232,168,56,0.3);
      background: rgba(232,168,56,0.08);
    }
    .featured-pull {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 1.5rem; font-style: italic;
      line-height: 1.4;
      color: var(--accent-lt);
      letter-spacing: -0.01em;
      margin-bottom: 1.4rem;
      padding-left: 1rem;
      border-left: 3px solid var(--accent);
    }
    .featured-byline {
      display: flex; align-items: center; gap: 0.7rem;
      padding: 0.85rem 0;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      margin-bottom: 1rem;
    }
    .byline-avatar {
      width: 34px; height: 34px;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(255,111,48,0.22), rgba(255,111,48,0.08));
      border: 1px solid rgba(255,111,48,0.35);
      color: var(--accent-lt);
      font-size: 0.7rem; font-weight: 800;
      letter-spacing: 0.02em;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .byline-meta { display: flex; flex-direction: column; gap: 0.1rem; line-height: 1.3; }
    .byline-name { font-size: 0.82rem; font-weight: 700; color: var(--text); }
    .byline-role { font-size: 0.7rem; color: var(--text-3); }

    /* ─── NEW PILL ─── */
    .new-pill {
      display: inline-flex; align-items: center;
      font-size: 0.58rem; font-weight: 800;
      letter-spacing: 0.18em;
      color: #4ECFB8;
      padding: 0.22rem 0.55rem;
      border-radius: 999px;
      border: 1px solid rgba(44,181,160,0.4);
      background: rgba(44,181,160,0.1);
      margin-left: 0.5rem;
      vertical-align: middle;
      position: relative;
    }
    .new-pill::before {
      content: ""; width: 5px; height: 5px;
      border-radius: 50%; background: #4ECFB8;
      margin-right: 0.4rem;
      box-shadow: 0 0 0 0 rgba(78,207,184,0.6);
      animation: newPulse 1.8s var(--ease) infinite;
    }
    @keyframes newPulse {
      0%   { box-shadow: 0 0 0 0 rgba(78,207,184,0.5); }
      70%  { box-shadow: 0 0 0 6px rgba(78,207,184,0); }
      100% { box-shadow: 0 0 0 0 rgba(78,207,184,0); }
    }

    /* ─── EMAIL CAPTURE ─── */
    .blog-subscribe {
      padding: 5rem 2rem;
      background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      position: relative; overflow: hidden;
    }
    .blog-subscribe::before {
      content: ""; position: absolute; inset: 0;
      background: radial-gradient(ellipse 50% 80% at 50% 0%, rgba(255,111,48,0.08), transparent 70%);
      pointer-events: none;
    }
    .blog-subscribe-inner {
      max-width: 720px; margin: 0 auto;
      text-align: center;
      position: relative; z-index: 1;
    }
    .subscribe-copy .sec-label {
      justify-content: center;
      margin-bottom: 1rem;
    }
    .blog-subscribe h2 {
      font-size: clamp(1.6rem, 3vw, 2.4rem);
      font-weight: 800;
      letter-spacing: -0.04em;
      line-height: 1.15;
      color: var(--text);
      max-width: 580px;
      margin: 0 auto 1rem;
    }
    .blog-subscribe p {
      font-size: 0.98rem;
      color: var(--text-2);
      line-height: 1.7;
      max-width: 500px;
      margin: 0 auto 2rem;
    }
    .subscribe-form {
      display: flex; gap: 0.5rem;
      max-width: 460px; margin: 0 auto;
      flex-wrap: wrap; justify-content: center;
    }
    .subscribe-input {
      flex: 1; min-width: 220px;
      padding: 0.85rem 1.1rem;
      background: var(--bg-3);
      border: 1.5px solid var(--border-2);
      border-radius: 999px;
      color: var(--text);
      font-size: 0.9rem;
      font-family: inherit;
      outline: none;
      transition: border-color 0.18s, box-shadow 0.18s;
    }
    .subscribe-input::placeholder { color: var(--text-3); }
    .subscribe-input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(255,111,48,0.12);
    }
    .subscribe-btn {
      padding: 0.85rem 1.6rem;
      font-size: 0.85rem;
    }
    .subscribe-note {
      flex-basis: 100%;
      font-size: 0.72rem;
      color: var(--text-3);
      margin-top: 0.85rem;
      letter-spacing: 0.02em;
    }

    /* mobile */
    @media (max-width: 760px) {
      .filters-bar { padding: 0.7rem 1.1rem; top: 76px; }
      .filters-inner { gap: 0.7rem; }
      .filters-search { width: 100%; min-width: 0; }
      .filter-btn { padding: 0.36rem 0.75rem; font-size: 0.72rem; }
      .featured-pull { font-size: 1.15rem; }
      .blog-subscribe { padding: 3.5rem 1.35rem; }
      .subscribe-input { min-width: 0; }
    }


    /* ─── UI/UX FIXES ─── */
    /* featured card: SVG was overflowing because thumb-wrap was absolute inside a flex column. lock the thumb area. */
    .post-card.featured .post-card-img {
      width: 42%;
      align-self: stretch;
      min-height: 100%;
      position: relative;
    }
    .post-card.featured .thumb-wrap {
      position: absolute; inset: 0;
    }
    .post-card.featured .thumb-svg {
      width: 100%; height: 100%;
      object-fit: cover;
    }

    /* sticky filter bar: prevent stacking under the page nav and keep search input usable below 700px */
    .filters-bar { top: 76px; }
    @media (max-width: 700px) {
      .filters-bar { padding: 0.65rem 1.1rem; }
      .filters-inner { flex-direction: column; align-items: stretch; gap: 0.6rem; }
      .filters-pills { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.25rem; -webkit-overflow-scrolling: touch; }
      .filters-pills::-webkit-scrollbar { display: none; }
      .filters-search { width: 100%; min-width: 0; }
    }

    /* featured pull-quote: tighten on mid widths so it doesn't overflow the 42% column */
    @media (max-width: 1100px) {
      .featured-pull { font-size: 1.2rem; }
      .post-card.featured .post-title { font-size: 1.35rem; }
    }

    /* search input: kill default browser clear cross/spinner that broke alignment */
    .search-input::-webkit-search-decoration,
    .search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

    /* NEW pill: prevent line-break inside title row */
    .post-title { display: block; }
    .new-pill { vertical-align: 0.15em; }

    /* fix focus-visible ring on filter pills */
    .filter-btn:focus-visible {
      outline: 2px solid var(--accent-lt);
      outline-offset: 2px;
    }

    /* subscribe form: stop iOS auto-zoom on focus */
    .subscribe-input, .filters-search .search-input {
      font-size: 16px;
    }


/* ─────────────────────────────
   MOBILE UI/UX REFINEMENT v3
───────────────────────────── */

/* Hide wordmark on small phones — logo mark alone */
@media (max-width: 480px) {
  .logo-text { display: none; }
  .logo-icon { width: 38px !important; height: 38px !important; }
  nav, .post-site-nav { padding: 0 1.1rem !important; height: 64px !important; }
  html { scroll-padding-top: 64px; }
}

/* Comfortable tap targets everywhere */
@media (max-width: 760px) {
  .btn, .filter-btn, .post-read-btn, .nav-back, .footer-links a, .related-link, .faq-q {
    min-height: 44px;
  }

  /* Hero — tighter type, balanced */
  .hero h1 {
    font-size: clamp(2rem, 9vw, 2.6rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -.035em !important;
  }
  .hero p, .hero-sub {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }
  .hero-cta {
    margin-top: 1.8rem !important;
    width: 100%;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .7rem !important;
  }
  .hero-cta .btn { width: 100%; justify-content: center; padding: .95rem 1.1rem; font-size: .92rem; }
  .hero-cta-note { text-align: center; margin-top: .15rem; }

  /* Section spacing tightened */
  section { padding: 4rem 0 !important; }
  .inner { padding: 0 1.35rem; }
  .sec-title { font-size: clamp(1.55rem, 6.5vw, 2rem) !important; line-height: 1.15 !important; }
  .sec-sub { font-size: .94rem !important; line-height: 1.65; }

  /* Recent calls — full-width stacked */
  .calls-list { border-radius: 14px; }
  .call-row {
    padding: 1.15rem 1.1rem !important;
    gap: .85rem !important;
  }
  .call-date { padding-right: .85rem !important; margin-right: 0 !important; }
  .call-thesis { font-size: .88rem !important; }

  /* Why cards */
  .why-track { padding: 1.6rem 1.4rem; }
  .why-num { font-size: 2.4rem !important; }
  .why-card { padding: 1.4rem 1.3rem; }

  /* Voices */
  .voice { padding: 1.4rem 1.3rem; }
  .voice blockquote p { font-size: 1rem; }

  /* CTA / form */
  .cta-wrap input, .cta-wrap select, .cta-wrap textarea, .subscribe-input {
    font-size: 16px !important; /* prevent iOS zoom */
    padding: .95rem 1rem !important;
  }
  .cta-wrap .btn { width: 100%; }

  /* Footer */
  footer .footer-inner, .post-site-footer .footer-inner {
    text-align: center;
  }
  .footer-links { justify-content: center; gap: 1rem 1.25rem !important; }

  /* Scroll-to-top — bigger touch target, repositioned */
  #scrolltop {
    width: 46px !important; height: 46px !important;
    right: 1rem !important; bottom: 1rem !important;
  }

  /* Tables horizontally scrollable inside articles */
  .scenario-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Article content tighter */
  .article-wrap { padding: 1.5rem 1.35rem 0 !important; }
  .article-title { margin-top: .5rem !important; }
  .article-body p { font-size: 1rem !important; }
  .article-body h2 { font-size: 1.35rem !important; margin-top: 2.25rem !important; }
  .article-body blockquote { font-size: 1.05rem !important; padding-left: 1rem !important; margin: 1.5rem 0 !important; }
  .callout { padding: 1.2rem 1.25rem !important; margin: 1.75rem 0 !important; }
  .cta-box { padding: 1.6rem 1.3rem !important; margin: 2.25rem 0 1rem !important; }
  .cta-box .btn { display: block; margin: .5rem 0 !important; }

  /* Breadcrumb — single-line, scrollable */
  .breadcrumb { padding: 1rem 1.35rem 0 !important; }
  .breadcrumb ol { display: flex; gap: .5rem; flex-wrap: nowrap; overflow-x: auto; }
  .breadcrumb ol::-webkit-scrollbar { display: none; }

  /* Blog hero on phone */
  .blog-hero { padding: 2.5rem 1.35rem 2rem !important; }
  .blog-hero h1 { font-size: clamp(1.8rem, 7.5vw, 2.4rem) !important; line-height: 1.1 !important; }
  .blog-hero p { font-size: .98rem !important; }

  /* Blog featured card on phone */
  .post-card.featured { border-radius: 16px !important; }
  .post-card.featured .post-body { padding: 1.5rem 1.3rem !important; }
  .featured-pull {
    font-size: 1.05rem !important;
    padding-left: .85rem !important;
    margin-bottom: 1rem !important;
  }
  .featured-byline { padding: .7rem 0 !important; margin-bottom: .8rem !important; }
  .featured-pick { font-size: .55rem !important; padding: .22rem .55rem !important; }

  /* Post cards: tighter */
  .post-card { border-radius: 16px !important; }
  .post-body { padding: 1.4rem 1.3rem !important; }
  .post-card:not(.featured) .post-card-img { height: 168px !important; }
  .post-title { font-size: 1.05rem !important; }
  .post-excerpt { font-size: .85rem !important; line-height: 1.6 !important; }

  /* Filter pills row scroll */
  .filters-pills { -webkit-overflow-scrolling: touch; padding-bottom: .15rem; }

  /* Email subscribe */
  .blog-subscribe h2 { font-size: 1.5rem !important; }
  .blog-subscribe p { font-size: .92rem !important; }
  .subscribe-form { gap: .55rem !important; }
  .subscribe-input { width: 100%; min-width: 0 !important; }
  .subscribe-btn { width: 100%; }

  /* Related links */
  .related-link { padding: .85rem 1rem !important; font-size: .9rem !important; }

  /* FAQ tighter */
  .faq-q { padding: 1.05rem 1.15rem !important; font-size: .94rem !important; gap: .85rem !important; }
  .faq-a-inner { font-size: .9rem !important; padding: 0 1.15rem !important; }
  .faq-row.open .faq-a-inner { padding: 0 1.15rem 1.15rem !important; }
  .faq-ico { width: 26px !important; height: 26px !important; }
}

/* Phone — tightest */
@media (max-width: 380px) {
  .hero h1 { font-size: 1.85rem !important; }
  .sec-title { font-size: 1.45rem !important; }
  .post-card.featured .post-title { font-size: 1.15rem !important; }
  nav, .post-site-nav { padding: 0 .9rem !important; }
}

/* Honor reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .001ms !important; }
  .fi { opacity: 1 !important; transform: none !important; }
}