/* app/article.css
 *
 * The article page. Tokens and the shared components (category tags,
 * buttons, the visible-viewport layer) come from shared/ocm.css, loaded first.
 *
 * Floating UI (progress bar, contents, back-to-top, toasts, lightbox,
 * popovers) is position:absolute inside #ocm-vp, the layer shared/ocm-core.js
 * keeps over whatever part of the article the reader can see, so it sits on
 * screen whether the page is opened directly or embedded full-height in Framer.
 */
    /* Tokens come from shared/ocm.css. */

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; height: auto; background-color: transparent !important; }
    
    body {
      font-family: var(--font);
      background-color: transparent !important;
      color: var(--text-main);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      min-height: auto; 
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* Accessibility Overhaul Focus States */
    :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
    a:focus-visible, button:focus-visible { outline-offset: 2px; }


    /* Reading Progress Bar */

    .ambient-glow {
      position: fixed; top: -10%; left: 50%; transform: translateX(-50%);
      width: 900px; height: 600px;
      background: radial-gradient(ellipse at center, rgba(var(--ocm-accent-rgb), 0.05) 0%, transparent 65%);
      pointer-events: none; z-index: -1; filter: blur(80px);
    }

    /* Sticky Nav */
    .nav-header {
      width: 100%; padding: 28px 20px;
      display: flex; justify-content: space-between; align-items: center;
      z-index: 9000; animation: fadeInDown 0.6s ease both;
      position: sticky; top: 0;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      border-bottom: 1px solid transparent;
    }
    .nav-header.scrolled {
      padding: 12px 20px;
      background: rgba(10, 10, 14, 0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border-color);
      box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }
    .nav-header.scrolled .nav-logo img { height: 26px; width: 26px; transition: all 0.3s ease; }

    .back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--text-dim); text-decoration: none; font-size: 0.875rem; font-weight: 700; transition: color 0.2s ease; }
    .back-link:hover { color: var(--text-main); }
    .back-link svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.5; fill: none; transition: transform 0.2s; }
    .back-link:hover svg { transform: translateX(-3px); }

    .nav-logo { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; }
    .nav-logo img { height: 34px; width: 34px; border-radius: 50%; object-fit: cover; transition: all 0.3s ease; }

    .nav-actions { display: flex; gap: 10px; align-items: center; }
    .nav-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 10px; font-family: 'Satoshi', sans-serif; font-weight: 700; border: none; cursor: pointer; text-decoration: none; transition: all 0.2s ease; font-size: 0.82rem; padding: 9px 16px; }
    .nav-btn-ghost { background: var(--s2); border: 1px solid var(--border-color); color: var(--text-body); }
    .nav-btn-ghost:hover { background: var(--s3); color: var(--text-main); border-color: rgba(255,255,255,0.15); transform: translateY(-1px); }
    .nav-btn-saved { color: var(--red) !important; border-color: rgba(248, 113, 113, 0.3) !important; background: rgba(248, 113, 113, 0.05); }
    .nav-btn-saved svg { fill: var(--red); }

    .container { width: 100%; max-width: 1240px; padding: 0 20px 120px 20px; position: relative; z-index: 1; }

    .article-header { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 44px; }
    .tags-wrapper { display: flex; gap: 10px; margin-bottom: 26px; justify-content: center; flex-wrap: wrap; }
    .tag { display: inline-flex; align-items: center; padding: 5px 13px; border-radius: 7px; font-size: 0.7rem; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
    
    /* Category colours come from shared/ocm.css. */
    .tprem svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2.5; fill: none; margin-right: 5px; }

    .article-title { font-size: clamp(2.1rem, 4vw, 3.4rem); font-weight: 900; line-height: 1.15; letter-spacing: -1px; margin-bottom: 22px; color: #ffffff; max-width: 1000px; text-shadow: 0 4px 12px rgba(0,0,0,0.3); }
    .article-subtitle { font-size: 1.1rem; color: var(--text-body); max-width: 780px; line-height: 1.65; margin-bottom: 34px; font-weight: 400; }

    .author-meta { display: flex; align-items: center; gap: 14px; padding-top: 24px; border-top: 1px solid transparent; border-image: linear-gradient(90deg, transparent, rgba(var(--ocm-accent-rgb), 0.5), transparent) 1; width: 100%; max-width: 560px; justify-content: center; }
    .author-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-color); }
    .author-info { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
    .author-name { font-size: 1.1rem; font-weight: 800; color: #fff; }
    .article-date-time { font-size: 0.95rem; color: var(--text-dim); font-weight: 500; margin-top: 4px; }
    .dot { opacity: 0.4; margin: 0 6px; }
    .read-time { color: var(--accent); }

    .share-row { display: flex; gap: 10px; flex-wrap: wrap; row-gap: 12px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border-2); align-items: center; }
    
    .share-row.top-share { 
      justify-content: center; 
      margin-top: 24px; 
      padding-top: 0; 
      padding-bottom: 24px; 
      border-top: none; 
      border-bottom: 1px solid transparent; 
      border-image: linear-gradient(90deg, transparent, rgba(var(--ocm-accent-rgb), 0.5), transparent) 1; 
      width: 100%; 
      max-width: 560px; 
    }
    
    .share-row.bottom-share { justify-content: center; margin-top: 48px; padding-top: 48px; padding-bottom: 0; border-top: 1px solid transparent; border-image: linear-gradient(90deg, transparent, rgba(var(--ocm-accent-rgb), 0.5), transparent) 1; }
    
    .share-label { font-size: 0.78rem; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-right: 4px; }
    .share-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--s2); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; color: var(--text-body); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; text-decoration: none; flex-shrink: 0; }
    .share-btn:hover { background: rgba(var(--ocm-accent-rgb), 0.1); color: var(--accent); border-color: rgba(var(--ocm-accent-rgb), 0.3); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(var(--ocm-accent-rgb), 0.1); }
    .share-btn svg { width: 16px; height: 16px; transition: all 0.2s ease; }
    .share-btn.fill-icon svg { fill: currentColor; stroke: none; }
    .share-btn.stroke-icon svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

    /* Like Button — matches share-btn sizing, accent red when liked */
    .like-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--s2);
      border: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-body);
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;
      flex-shrink: 0;
      position: relative;
      padding: 0;
      font-family: inherit;
    }
    .like-btn:hover {
      background: rgba(248, 113, 113, 0.08);
      color: var(--red);
      border-color: rgba(248, 113, 113, 0.3);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(248, 113, 113, 0.1);
    }
    .like-btn svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .like-btn.liked {
      background: rgba(248, 113, 113, 0.1);
      color: var(--red);
      border-color: rgba(248, 113, 113, 0.35);
    }
    .like-btn.liked svg {
      fill: var(--red);
      stroke: var(--red);
      animation: likePop 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @keyframes likePop {
      0%   { transform: scale(1); }
      40%  { transform: scale(1.35); }
      100% { transform: scale(1); }
    }
    .like-count {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--text-dim);
      margin-left: -2px;
      margin-right: 4px;
      min-width: 14px;
      text-align: left;
      transition: color 0.2s ease;
      user-select: none;
    }
    .like-wrap.is-liked .like-count {
      color: var(--red);
    }
    .like-wrap {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    /* Sentiment Meter — exact port of the OCM Studio top-bar gauge, shares the same weekly poll */
    .ocm-sent {
      max-width: 680px;
      margin: 40px auto 0;
      padding: 22px;
      border-radius: 20px;
      background: linear-gradient(160deg, rgba(26,28,35,0.55), rgba(16,18,24,0.6));
      border: 1px solid var(--border-color);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      font-family: 'Satoshi', sans-serif;
    }
    .ocm-sent-head { display: flex; align-items: center; gap: 9px; margin-bottom: 3px; }
    .ocm-sent-dot {
      width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
      flex-shrink: 0; animation: ocmSentLive 1.8s ease-out infinite;
    }
    .ocm-sent-live {
      font-size: 0.72rem; font-weight: 800; letter-spacing: 0.6px;
      text-transform: uppercase; color: var(--accent);
    }
    .ocm-sent-q {
      font-size: 1.25rem; font-weight: 900; color: #fff;
      line-height: 1.2; letter-spacing: -0.3px; margin-top: 2px;
    }
    .ocm-sent-sub { font-size: 0.76rem; color: #64748b; margin-top: 4px; margin-bottom: 16px; }
    .ocm-sent-bar {
      display: flex; height: 46px; border-radius: 12px; overflow: hidden;
      border: 1px solid rgba(255,255,255,0.08); background: rgba(248,113,113,0.18);
    }
    .ocm-sent-bull {
      background: linear-gradient(90deg, rgba(var(--ocm-accent-rgb), 0.28), rgba(var(--ocm-accent-rgb), 0.45));
      display: flex; align-items: center; padding-left: 13px; color: var(--accent);
      font-weight: 900; font-size: 0.9rem; white-space: nowrap; overflow: hidden;
      transition: width 0.7s cubic-bezier(0.16,1,0.3,1);
    }
    .ocm-sent-bear {
      flex-grow: 1; display: flex; align-items: center; justify-content: flex-end;
      padding-right: 13px; color: var(--red); font-weight: 900; font-size: 0.9rem; white-space: nowrap;
    }
    .ocm-sent-btns { display: flex; gap: 10px; margin-top: 14px; }
    .ocm-sent-btn {
      flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
      padding: 13px 10px; border-radius: 13px; cursor: pointer;
      font-family: 'Satoshi', sans-serif; border: 1.5px solid transparent;
      background: transparent; transition: all 0.18s ease;
    }
    .ocm-sent-btn:disabled { cursor: default; }
    .ocm-sent-btn-top { display: flex; align-items: center; gap: 7px; font-size: 0.95rem; font-weight: 900; }
    .ocm-sent-btn-top svg { width: 16px; height: 16px; }
    .ocm-sent-btn-pct { font-size: 1.3rem; font-weight: 900; }
    .ocm-sent-btn.bull { background: rgba(var(--ocm-accent-rgb), 0.08); border-color: rgba(var(--ocm-accent-rgb), 0.27); color: var(--accent); }
    .ocm-sent-btn.bear { background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.27); color: var(--red); }
    .ocm-sent-btn.bull.active { background: linear-gradient(135deg, #4ade80, #22c55e); border-color: #4ade80; color: #05140a; }
    .ocm-sent-btn.bear.active { background: linear-gradient(135deg, #f87171, #ef4444); border-color: #f87171; color: #1a0606; }
    @keyframes ocmSentLive {
      0% { box-shadow: 0 0 0 0 rgba(var(--ocm-accent-rgb), 0.6); }
      70% { box-shadow: 0 0 0 7px rgba(var(--ocm-accent-rgb), 0); }
      100% { box-shadow: 0 0 0 0 rgba(var(--ocm-accent-rgb), 0); }
    }
    @media (max-width: 560px) { .ocm-sent-q { font-size: 1.1rem; } }

    /* Two-poll layout */
    .ocm-sent-section .ocm-sent-sub { margin-bottom: 12px; }
    .ocm-sent-divider { height: 1px; margin: 18px 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent); }

    /* Compact pill (top share row) — mirrors the Studio top-bar gauge */
    .ocm-sent-pill {
      display: inline-flex; align-items: center; gap: 8px; height: 36px;
      box-sizing: border-box; padding: 0 12px; border-radius: 10px;
      background: var(--s2); border: 1px solid var(--border-color);
      cursor: pointer; font-family: 'Satoshi', sans-serif; flex-shrink: 0;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .ocm-sent-pill:hover { background: rgba(var(--ocm-accent-rgb), 0.1); border-color: rgba(var(--ocm-accent-rgb), 0.3); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(var(--ocm-accent-rgb), 0.1); }
    .ocm-sent-pill-icon { display: flex; color: var(--accent); }
    .ocm-sent-pill-icon svg { width: 15px; height: 15px; display: block; }
    .ocm-sent-pill-bar { width: 46px; height: 6px; border-radius: 3px; overflow: hidden; display: flex; background: var(--red); flex-shrink: 0; }
    .ocm-sent-pill-bar > span { background: var(--accent); transition: width 0.7s cubic-bezier(0.16,1,0.3,1); }
    .ocm-sent-pill-pct { font-size: 0.8rem; font-weight: 800; color: var(--text-body); min-width: 28px; text-align: left; }

    /* Popover opened by the pill — anchored to the pill, not centered */
    .ocm-sent-pop-overlay { position: absolute; inset: 0; z-index: 9999; font-family: 'Satoshi', sans-serif; }
    .ocm-sent-pop-overlay[hidden] { display: none; }
    .ocm-sent-pop-backdrop { position: absolute; inset: 0; background: rgba(8,9,13,0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%); animation: ocmSentFade 0.2s ease-out; }
    .ocm-sent-pop-card {
      position: absolute; top: 80px; left: 50%; width: 360px; max-width: calc(100vw - 24px);
      max-height: calc(var(--vp-h, 100vh) - 24px); overflow-y: auto; padding: 20px;
      background: linear-gradient(160deg, rgba(22,24,30,0.99), rgba(12,14,18,0.99));
      border: 1px solid rgba(255,255,255,0.1); border-radius: 20px;
      box-shadow: 0 34px 90px rgba(0,0,0,0.65); animation: ocmSentPop 0.26s cubic-bezier(0.16,1,0.3,1);
    }
    .ocm-sent-pop-card .ocm-sent-head { margin-bottom: 14px; }
    .ocm-sent-pop-close {
      margin-left: auto; width: 28px; height: 28px; border: none; background: transparent;
      border-radius: 8px; display: flex; align-items: center; justify-content: center;
      cursor: pointer; color: var(--text-dim); transition: background 0.2s ease;
    }
    .ocm-sent-pop-close:hover { background: rgba(255,255,255,0.06); color: var(--text-body); }
    .ocm-sent-pop-close svg { width: 14px; height: 14px; }
    @keyframes ocmSentFade { from { opacity: 0; } to { opacity: 1; } }
    @keyframes ocmSentPop { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: none; } }
    @media (max-width: 600px) {
      .ocm-sent-pop-card { top: 12px !important; left: 12px !important; right: 12px; bottom: auto !important; width: auto; max-width: none; max-height: calc(var(--vp-h, 100vh) - 24px); }
    }

    /* Zoomable Images */
    .zoomable { cursor: zoom-in; transition: opacity 0.2s ease, transform 0.2s ease; }
    .zoomable:hover { opacity: 0.95; }
    
    /* Lightbox */
    #lightbox { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(10, 10, 15, 0.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); z-index: 10001; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; display: block; }
    #lightbox.active { opacity: 1; pointer-events: all; }
    
    #lightbox-wrapper { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.95); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); border-radius: 16px; overflow: hidden; box-shadow: 0 25px 80px rgba(0,0,0,0.8), 0 0 40px rgba(var(--ocm-accent-rgb), 0.15); width: min(92vw, 1400px); max-width: min(94vw, 1400px); background: #080808; border: 1px solid rgba(255,255,255,0.1); display: flex; }
    #lightbox.active #lightbox-wrapper { transform: translate(-50%, -50%) scale(1); }
    
    #lightbox-img { width: 100%; height: auto; max-width: 100%; object-fit: contain; display: block; position: relative; z-index: 2; }
    
    #lightbox-close { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; padding: 0; border-radius: 50%; background: rgba(12,12,17,0.55); border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 4px 16px rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10003; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1); }
    #lightbox-close svg { width: 18px; height: 18px; stroke: rgba(255,255,255,0.85); stroke-width: 2; stroke-linecap: round; fill: none; transition: stroke 0.25s ease; pointer-events: none; }
    #lightbox-close:hover { background: rgba(var(--ocm-accent-rgb), 0.14); border-color: rgba(var(--ocm-accent-rgb), 0.5); box-shadow: 0 6px 22px rgba(0,0,0,0.5), 0 0 18px rgba(var(--ocm-accent-rgb), 0.25); transform: scale(1.08) rotate(90deg); }
    #lightbox-close:hover svg { stroke: var(--accent); }
    #lightbox-close:active { transform: scale(0.94); }

    /* Scroll Reveals */
    .reveal { opacity: 0; transform: translateY(30px) scale(0.98); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; }
    .reveal.visible { opacity: 1; transform: translateY(0) scale(1); }

    /* Toast System */
    #toast-container { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 12px; pointer-events: none; }
    .toast { background: rgba(20,20,25,0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--border-hover); color: #fff; padding: 14px 28px; border-radius: 50px; font-size: 0.95rem; font-weight: 700; box-shadow: 0 15px 35px rgba(0,0,0,0.5), 0 0 20px rgba(var(--ocm-accent-rgb), 0.1); display: flex; align-items: center; gap: 10px; animation: toastSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
    .toast svg { flex-shrink: 0; }
    @keyframes toastSlideUp { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }

    /* Back to Top */
    /* The reading dock (progress bar, contents, progress ring): shared/ocm-dock.css. */
    /* It covers the reader's screen: only the dock's own controls take clicks.
       (#ocm-vp > * turns pointer events back on for the layer's other pieces.) */
    #ocm-vp > .ocm-dock-host { position: absolute; inset: 0; pointer-events: none; z-index: 9990; }

    .hero-img-wrapper { 
      width: 100%; border-radius: 24px; overflow: hidden; margin-bottom: 72px; background: #080808; border: 1px solid rgba(255,255,255,0.12); 
      border-top: 1px solid rgba(255,255,255,0.3); box-shadow: 0 40px 80px -20px rgba(0,0,0,0.8), 0 0 60px rgba(var(--ocm-accent-rgb), 0.06); 
      position: relative; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease;
    }
    .hero-img-wrapper:hover { transform: translateY(-4px); border-color: rgba(var(--ocm-accent-rgb), 0.4); box-shadow: 0 50px 90px -20px rgba(0,0,0,0.9), 0 0 50px rgba(var(--ocm-accent-rgb), 0.15); }
    .hero-img-wrapper::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; box-shadow: inset 0 0 120px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1); pointer-events: none; z-index: 2; }
    .hero-img { width: 100%; height: auto; object-fit: cover; display: block; position: relative; z-index: 1; }

    .content-grid { display: block; width: 100%; max-width: 900px; margin: 0 auto; }
    
    .article-body { color: var(--text-body); font-size: 1.14rem; line-height: 1.9; letter-spacing: 0.2px; }

    /* Gap Fixes & Empty Space Stripper (Fixed Header Gap with Negative Space) */
  .article-divider { width: 100%; height: 1px; margin: 32px 0 !important; background: linear-gradient(90deg, transparent, rgba(var(--ocm-accent-rgb), 0.5), transparent); }
    .article-body p { margin-bottom: 28px; }
    
    /* Aggressive clear of empty blocks to prevent layout shifts */
    .article-body p:empty, 
    .article-body p:has(br:only-child),
    .article-body h2:empty,
    .article-body h2:has(br:only-child) { display: none !important; }
    .article-body p br:first-child { display: none !important; }
    
    /* Uniform Header Spacing using Negative Margins */
    .article-body h2 { font-size: 2.8rem; font-weight: 900; color: #fff; margin: -24px 0 24px 0 !important; letter-spacing: -0.8px; line-height: 1.15; display: flex; align-items: center; gap: 18px; }
    .article-body h2:first-of-type { margin-top: 0 !important; }
    
    /* Fix: Reset negative pull when h2 follows a divider so spacing matches everywhere else */
    .article-body h2.after-divider { margin-top: 32px !important; }

    /* Headings pasted out of Google Docs arrive wrapped, as
       <h2><p>Title</p></h2>. That inner paragraph inherits the 28px body
       paragraph margin, and because the heading is a flex container the
       margin cannot collapse out of it, so it lands INSIDE the heading box
       and makes the gap under a heading far bigger than the gap above it.
       A heading owns its own spacing, so anything nested inside it has none. */
    .article-body h2 p, .article-body h2 div,
    .article-body h3 p, .article-body h3 div { margin: 0 !important; }
    
    .article-body h3 { font-size: 1.75rem; font-weight: 800; color: #fff; margin: 48px 0 20px 0; letter-spacing: -0.5px;}
    
    /* STRICT THEME ENFORCEMENT (Overrides pasted inline styles) */
    .article-body p *, .article-body h2 *, .article-body blockquote *, .insights-glance ul li * {
      background-color: transparent !important;
      font-size: inherit !important;
      font-family: inherit !important;
      line-height: inherit !important;
    }
    .article-body p span, .article-body blockquote span, .insights-glance ul li span,
    .article-body p font, .article-body blockquote font, .insights-glance ul li font {
      color: inherit !important;
    }
    
    /* Safeguard Bolds to prevent list bleed */
    .article-body b, .article-body strong { color: #fff !important; font-weight: 700 !important; }
    .article-body em, .article-body i { color: #e2e8f0 !important; font-style: italic !important; }
    /* ----------------------------------------------- */
    
    .article-body a:not(.share-btn):not(.related-card):not(.adv-open-btn):not(.adv-cta-btn):not(.adv-signin-btn):not(.qa-from):not(.ask-answered-link):not(.premium-action-btn):not(.gate-signin) { 
      color: #fff !important; text-decoration: none; border-bottom: 2px solid rgba(var(--ocm-accent-rgb), 0.4); 
      transition: all 0.2s; background: linear-gradient(to top, rgba(var(--ocm-accent-rgb), 0.15) 0%, transparent 40%) no-repeat;
      background-size: 100% 0; padding: 0 2px;
    }
    .article-body a:not(.share-btn):not(.related-card):not(.adv-open-btn):not(.adv-cta-btn):not(.adv-signin-btn):not(.qa-from):not(.ask-answered-link):not(.premium-action-btn):not(.gate-signin):hover { background-size: 100% 100%; border-color: var(--accent); color: var(--accent) !important; }

    .article-body blockquote { 
      margin: 48px 0; padding: 28px 32px; position: relative; overflow: hidden;
      background: linear-gradient(90deg, rgba(var(--ocm-accent-rgb), 0.08), rgba(var(--ocm-accent-rgb), 0.01)); 
      border-left: 4px solid var(--accent); border-radius: 0 16px 16px 0; 
      font-size: 1.25rem; font-weight: 500; color: #f8fafc; font-style: italic; line-height: 1.7; 
    }
    .article-body blockquote::before {
      content: '"'; position: absolute; top: -20px; left: 10px; font-size: 6rem; 
      font-family: Georgia, serif; color: rgba(var(--ocm-accent-rgb), 0.1); line-height: 1; pointer-events: none;
    }

    /* Standardized Lists (Bullets & Numbered aligned properly) */
    .article-body ul, .article-body ol { margin-bottom: 24px; padding-left: 0; list-style: none; counter-reset: custom-counter; }
    .article-body ul li, .article-body ol li { position: relative; margin-bottom: 6px !important; padding-left: 32px; line-height: 1.8; color: var(--text-body); font-weight: 400; }
    
    .article-body ul li::before { 
      content: ""; width: 8px; height: 2px; border-radius: 2px; 
      background: var(--accent); box-shadow: 0 0 6px var(--accent);
      position: absolute; left: 0; top: 14px; 
    }
    
    .article-body ol li::before {
      counter-increment: custom-counter;
      content: counter(custom-counter) ".";
      position: absolute; left: 0; top: 0px;
      line-height: 1.8; /* Ensures exact baseline match with list item text */
      color: var(--accent); font-weight: 900; font-family: 'JetBrains Mono', monospace; font-size: 0.95rem;
      text-shadow: 0 0 8px var(--accent-glow);
    }

    /* Premium Gate Mask */
    .premium-fade-gate {
      position: relative;
      mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
      -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
      padding-bottom: 120px;
      margin-bottom: -60px;
    }

    .hover-spotlight { position: relative; overflow: hidden; }
    .hover-spotlight::after {
      content: ''; position: absolute; top: var(--y, 0px); left: var(--x, 100%); 
      width: 350px; height: 350px; background: radial-gradient(circle, rgba(var(--ocm-accent-rgb), 0.12) 0%, transparent 60%);
      transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity 0.3s ease; z-index: 10; 
    }
    .hover-spotlight:hover::after { opacity: 1; }

    .insights-glance { background: linear-gradient(135deg, rgba(30,30,38,0.8), rgba(20,20,28,0.6)); border: 1px solid rgba(var(--ocm-accent-rgb), 0.12); border-radius: 16px; padding: 28px 32px; margin: 40px 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
    .insights-glance:hover { transform: translateY(-4px); border-color: rgba(var(--ocm-accent-rgb), 0.3); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.6), 0 0 30px rgba(var(--ocm-accent-rgb), 0.08); }
    .insights-glance h3 { font-size: 0.9rem !important; font-weight: 800 !important; color: var(--accent) !important; text-transform: uppercase !important; letter-spacing: 1.5px !important; margin: 0 0 18px 0 !important; position: relative; z-index: 2; }
    .insights-glance ul { margin-bottom: 0 !important; position: relative; z-index: 2; }

    /* Media Wrapper Smooth Loading Animation */
    .media-wrapper { 
      margin: 56px 0; border-radius: 20px; background: linear-gradient(180deg, #111116 0%, #0a0a0f 100%); 
      border: 1px solid rgba(255,255,255,0.06); border-top: 1px solid rgba(255,255,255,0.12);
      box-shadow: 0 24px 50px -10px rgba(0,0,0,0.6), 0 0 30px rgba(var(--ocm-accent-rgb), 0.03); 
      position: relative; overflow: hidden;
    }
    .media-wrapper.reveal {
      opacity: 0;
      transform: scale(0.96) translateY(20px);
      transition: opacity 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .media-wrapper.reveal.visible {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
    .media-wrapper:hover { border-color: rgba(var(--ocm-accent-rgb), 0.4); box-shadow: 0 30px 60px -10px rgba(0,0,0,0.8), 0 0 40px rgba(var(--ocm-accent-rgb), 0.12); }
    .media-wrapper::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02); pointer-events: none; z-index: 10; }
    
    .media-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px; background: rgba(255,255,255,0.02); border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent, rgba(var(--ocm-accent-rgb), 0.5), transparent) 1; position: relative; z-index: 5; }
    .media-title-group { display: flex; align-items: center; gap: 10px; }
    .media-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
    .media-title { font-family: 'JetBrains Mono', 'Satoshi', sans-serif; font-size: 0.75rem; font-weight: 700; color: var(--text-body); letter-spacing: 1.5px; text-transform: uppercase; }
    
    .premium-action-btn, .sub-btn-new { position: relative; overflow: hidden; }
    .premium-action-btn::after, .sub-btn-new::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent); transform: skewX(-20deg); transition: 0s; z-index: 1; }
    .premium-action-btn:hover::after, .sub-btn-new:hover::after { left: 200%; transition: 0.7s ease-in-out; }

    .media-badge { 
      font-size: 0.85rem; 
      font-weight: 700; 
      color: var(--accent); 
      background: transparent; 
      padding: 8px 12px; 
      text-decoration: none; 
      transition: all 0.25s ease; 
      display: inline-flex; 
      align-items: center; 
      justify-content: center;
      gap: 6px; 
      z-index: 2;
      white-space: nowrap; 
      flex-shrink: 0; 
    }
    .media-badge span, .media-badge svg { position: relative; z-index: 2; }
    .media-badge:hover { transform: translateX(2px); color: var(--accent-2); filter: drop-shadow(0 0 8px rgba(var(--ocm-accent-rgb), 0.4)); }
    .media-badge svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.5; fill: none; transition: transform 0.2s; }
    .media-badge:hover svg { transform: translateX(3px); }
    
    .img-caption { padding: 16px 24px; font-size: 0.85rem; font-style: italic; color: var(--text-body); text-align: center; background: rgba(255,255,255,0.02); border-top: 1px solid transparent; border-image: linear-gradient(90deg, transparent, rgba(var(--ocm-accent-rgb), 0.5), transparent) 1; position: relative; z-index: 5; }

    /* Interactive Stat Pills */
    .stats-row { display: flex; gap: 16px; margin: 40px 0; flex-wrap: wrap; }
    .stat-pill { flex: 1; min-width: 140px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 16px; padding: 24px 16px; text-align: center; backdrop-filter: blur(10px); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); cursor: default; }
    .stat-pill:hover { transform: translateY(-6px); border-color: rgba(var(--ocm-accent-rgb), 0.4); box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 20px rgba(var(--ocm-accent-rgb), 0.1); }
    .stat-val { font-size: 1.8rem; font-weight: 900; color: var(--accent); margin-bottom: 4px; transition: transform 0.3s ease; }
    .stat-pill:hover .stat-val { transform: scale(1.05); }
    .stat-lbl { font-size: 0.7rem; font-weight: 800; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }

    /* Text Selection Share Popover */
    #selection-share-tooltip { position: absolute; display: none; background: var(--s3); color: var(--text-main); border: 1px solid var(--border-color); padding: 8px 14px; border-radius: 8px; font-size: 0.85rem; font-weight: 700; cursor: pointer; z-index: 10000; box-shadow: 0 10px 25px rgba(0,0,0,0.5); align-items: center; gap: 8px; transition: background 0.2s, transform 0.2s; transform: translateY(0); backdrop-filter: blur(10px); }
    #selection-share-tooltip:hover { background: rgba(var(--ocm-accent-rgb), 0.15); border-color: rgba(var(--ocm-accent-rgb), 0.4); color: var(--accent); transform: translateY(-2px); }
    #selection-share-tooltip svg { width: 14px; height: 14px; fill: currentColor; }

    /* Related Articles Pro UI - Updated for Premium Look */
    .related-articles { margin-top: 56px; padding-top: 48px; border-top: 1px solid transparent; border-image: linear-gradient(90deg, transparent, rgba(var(--ocm-accent-rgb), 0.5), transparent) 1; }
    .related-title { font-size: 1.6rem; font-weight: 900; color: #ffffff; margin-bottom: 32px; letter-spacing: -0.5px; display: flex; align-items: center; gap: 14px; text-transform: uppercase; }
    .related-title::before { content: ''; display: block; width: 40px; height: 4px; background: linear-gradient(90deg, var(--accent), transparent); border-radius: 4px; box-shadow: -2px 0 12px rgba(var(--ocm-accent-rgb), 0.4); flex-shrink: 0; }
    
    .related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
    .related-card { display: flex; flex-direction: column; background: linear-gradient(145deg, rgba(26,26,34,0.6), rgba(16,16,22,0.8)); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; overflow: hidden; text-decoration: none; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); backdrop-filter: blur(10px); }
    .related-card:hover { transform: translateY(-6px); border-color: rgba(var(--ocm-accent-rgb), 0.4); box-shadow: 0 15px 35px rgba(0,0,0,0.4), 0 0 25px rgba(var(--ocm-accent-rgb), 0.1); }
    .related-card-img-wrap { width: 100%; height: 160px; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.06); }
    .related-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
    .related-card:hover img { transform: scale(1.08); }
    .related-card-content { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
    .related-card-content h4 { font-size: 1.1rem; font-weight: 800; color: #fff; line-height: 1.5; margin: 0; transition: color 0.3s ease; }
    .related-card:hover .related-card-content h4 { color: var(--accent); }
    .related-card-content .tag { align-self: flex-start; font-size: 0.65rem; padding: 5px 12px; }
    .related-date { font-size: 0.85rem; color: var(--text-dim); margin-top: auto; font-weight: 500; }

    .sign-off { margin-top: 48px; font-size: 1.05rem; color: var(--text-body); line-height: 1.7; }

    .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 16px; margin: 40px 0; border: 1px solid var(--border-color); box-shadow: 0 20px 40px rgba(0,0,0,0.5); }
    .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

    /* Updated Premium Block UI */
    .premium-block { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px 60px 20px; text-align: center; margin-top: 20px; }
    .premium-header { display: flex; flex-direction: column; align-items: center; margin-bottom: 3rem; position: relative; padding-bottom: 24px; }
    .premium-header::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: linear-gradient(90deg, transparent, var(--accent), transparent); border-radius: 2px; box-shadow: 0 0 12px var(--accent-glow); }
    .premium-title { font-weight: 900; font-size: clamp(2.2rem, 4vw, 3rem); margin: 0; letter-spacing: -0.5px; line-height: 1.2; background: linear-gradient(135deg, #ffffff 30%, var(--accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 10px 20px rgba(var(--ocm-accent-rgb), 0.15)); text-align: center; }
    .premium-subtitle { color: var(--text-body); font-size: 1.15rem; margin-top: 1.5rem; font-weight: 500; letter-spacing: 0.5px; max-width: 550px; line-height: 1.6; text-align: center; }
    .premium-button-group { display: flex; justify-content: center; gap: 20px; width: 100%; max-width: 600px; flex-wrap: wrap; }
    
    .premium-action-btn { display: flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(var(--ocm-accent-rgb), 0.2)); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); padding: 22px 32px; border-radius: 12px; text-decoration: none; color: #ffffff; font-family: 'Satoshi', sans-serif; font-weight: 700; font-size: 1.15rem; transition: all 0.3s ease; flex: 1; min-width: 200px; }
    .premium-action-btn span, .premium-action-btn svg { position: relative; z-index: 2; }
    .premium-action-btn:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 8px 20px -6px var(--accent-glow); background: linear-gradient(to bottom, rgba(255, 255, 255, 0.12), rgba(var(--ocm-accent-rgb), 0.3)); }
    
    /* Crisp White Icons on Buttons */
    .premium-btn-icon { width: 20px; height: 20px; fill: none; stroke: #ffffff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.3s ease; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); }
    .premium-action-btn:hover .premium-btn-icon { stroke: #ffffff; }

    /* New Primary Action Button Override (White Text/Icon, Bright Green Gradient) */
    .premium-action-btn.primary-btn {
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      color: #ffffff;
      border-color: rgba(255, 255, 255, 0.3);
      box-shadow: 0 4px 15px rgba(var(--ocm-accent-rgb), 0.2);
      text-shadow: 0 1px 3px rgba(0,0,0,0.4);
    }
    .premium-action-btn.primary-btn .premium-btn-icon {
      stroke: #ffffff;
    }
    .premium-action-btn.primary-btn:hover {
      background: linear-gradient(135deg, var(--accent-2), #16a34a);
      border-color: rgba(255, 255, 255, 0.5);
      box-shadow: 0 8px 25px rgba(var(--ocm-accent-rgb), 0.4);
      transform: translateY(-3px);
    }
    .premium-action-btn.primary-btn:hover .premium-btn-icon {
      stroke: #ffffff;
    }

    .author-signoff-card { display: flex; align-items: center; gap: 20px; margin-top: 32px; padding: 24px 32px; background: linear-gradient(145deg, rgba(26,26,34,0.6), rgba(16,16,22,0.8)); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); backdrop-filter: blur(10px); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
    .author-signoff-card:hover { transform: translateY(-4px); border-color: rgba(var(--ocm-accent-rgb), 0.4); box-shadow: 0 15px 35px rgba(0,0,0,0.4), 0 0 25px rgba(var(--ocm-accent-rgb), 0.1); }
    .author-signoff-img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(var(--ocm-accent-rgb), 0.3); box-shadow: 0 0 15px rgba(var(--ocm-accent-rgb), 0.1); }
    .author-signoff-text { display: flex; flex-direction: column; gap: 4px; }
    .author-signoff-name { font-size: 1.15rem; font-weight: 800; color: #fff; letter-spacing: -0.2px; }
    .author-signoff-bio { font-size: 0.9rem; color: var(--text-dim); font-weight: 500; }

    .article-footer { margin-top: 48px; padding-top: 48px; border-top: 1px solid transparent; border-image: linear-gradient(90deg, transparent, rgba(var(--ocm-accent-rgb), 0.4), transparent) 1; display: flex; justify-content: center; width: 100%; }

    /* Semantic Newsletter Link */
    .nlcard { display: block; text-decoration: none; color: inherit; background: linear-gradient(145deg, rgba(26,26,34,0.9), rgba(16,16,22,0.95)); border: 1px solid var(--border-color); border-radius: 20px; padding: 44px 40px; position: relative; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 24px 48px rgba(0,0,0,0.35); backdrop-filter: blur(12px); text-align: center; max-width: 580px; width: 100%; cursor: pointer; transition: border-color 0.3s ease, transform 0.3s ease; }
    .nlcard:hover { border-color: rgba(var(--ocm-accent-rgb), 0.3); transform: translateY(-2px); }
    .nlcard::before { content: ''; position: absolute; top: -60px; left: 50%; transform: translateX(-50%); width: 320px; height: 320px; background: radial-gradient(circle, rgba(var(--ocm-accent-rgb), 0.07) 0%, transparent 70%); pointer-events: none; }
    .nlcard-title { font-size: 1.6rem; font-weight: 900; margin-bottom: 10px; color: #fff; letter-spacing: -0.5px; }
    .nlcard-sub { font-size: 0.97rem; color: var(--text-body); line-height: 1.55; margin-bottom: 32px; }
    .nlchecks { display: flex; flex-direction: column; gap: 11px; margin-bottom: 28px; text-align: left; width: fit-content; margin-left: auto; margin-right: auto; }
    .nlcr { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: #d1d5db; font-weight: 500; }
    .nlchk { width: 17px; height: 17px; border-radius: 50%; background: var(--accent-dark); border: 1px solid rgba(var(--ocm-accent-rgb), 0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .nlchk svg { width: 9px; height: 9px; stroke: var(--accent); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
    .nlproof { font-size: 0.82rem; color: var(--text-dim); text-align: center; margin-top: 14px; }
    .nlproof strong { color: var(--text-main); font-weight: 700; }

    @keyframes pulse-glow { 0% { box-shadow: 0 0 0 0 rgba(var(--ocm-accent-rgb), 0.3); } 70% { box-shadow: 0 0 0 12px rgba(var(--ocm-accent-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--ocm-accent-rgb), 0); } }
    .sub-btn-new { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 36px; border-radius: 50px; background: rgba(255,255,255,0.04); color: #fff; font-family: 'Satoshi', sans-serif; font-size: 1rem; font-weight: 800; border: 1px solid rgba(255,255,255,0.1); text-decoration: none; transition: all 0.3s ease; box-shadow: 0 4px 20px rgba(0,0,0,0.15); backdrop-filter: blur(10px); animation: pulse-glow 2.5s infinite; }
    .sub-btn-new span, .sub-btn-new svg { position: relative; z-index: 2; }
    .nlcard:hover .sub-btn-new { background: rgba(var(--ocm-accent-rgb), 0.09); border-color: rgba(var(--ocm-accent-rgb), 0.5); color: var(--accent); animation: none; box-shadow: 0 8px 25px rgba(var(--ocm-accent-rgb), 0.25); }
    .sub-btn-new svg { transition: transform 0.3s ease; }
    .nlcard:hover .sub-btn-new svg { transform: translateX(4px); }

    @keyframes fadeInUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes fadeInDown { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: translateY(0); } }

    /* Enhanced Mobile Breakpoints */
    @media (max-width: 960px) { .article-title { font-size: 2.1rem; } }
    /* Section headings stay a step below the article title at every width
       (the title steps down at 960, 768 and 600px): on a phone a heading used
       to be bigger than the title and ran to three lines. */
    @media (max-width: 960px) { .article-body h2 { font-size: 1.9rem; letter-spacing: -0.5px; } }
    @media (max-width: 600px) { .article-body h2 { font-size: 1.45rem; letter-spacing: -0.3px; gap: 12px; } }
    @media (max-width: 768px) { 
      .ambient-glow { display: none; }
      .article-title { font-size: 2.2rem; }
      .content-grid { padding: 0 10px; }
      .media-wrapper { border-radius: 14px; margin: 36px calc(50% - 50vw + 8px); }
      .stat-pill { min-width: 120px; padding: 20px 12px; }
      .article-body { font-size: 1.08rem; line-height: 1.85; }
      
      /* Mobile Optimization Additions */
      .media-header { flex-direction: row; align-items: center; justify-content: space-between; padding: 7px 12px; gap: 8px; }
      .media-title-group { gap: 8px; min-width: 0; flex: 1; }
      .media-dot { width: 6px; height: 6px; flex-shrink: 0; }
      .media-badge { width: auto; background: transparent; padding: 5px 8px; font-size: 0.7rem; gap: 5px; }
      .media-badge svg { width: 13px; height: 13px; }
      .media-title { font-size: 0.62rem; letter-spacing: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .img-caption { padding: 10px 14px; font-size: 0.78rem; }
      .premium-button-group { flex-direction: column; width: 100%; gap: 14px; }
      .premium-action-btn { width: 100%; padding: 18px 24px; }
      .author-meta { flex-direction: column; gap: 12px; padding-top: 20px; margin-top: 10px; border-top: 1px solid transparent; border-image: linear-gradient(90deg, transparent, rgba(var(--ocm-accent-rgb), 0.5), transparent) 1; }
      .author-info { align-items: center; text-align: center; }
      .share-row.top-share { margin-top: 16px; padding-bottom: 16px; border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent, rgba(var(--ocm-accent-rgb), 0.5), transparent) 1; }
    }
    @media (max-width: 600px) { 
      .article-title { font-size: 1.8rem; letter-spacing: -0.5px; } 
      .article-subtitle { font-size: 1rem; } 
      .nlcard { padding: 32px 24px; } 
      .hide-on-mobile { display: none; } 
      .author-signoff-card { flex-direction: column; text-align: center; } 
      .nav-header { padding: 20px 15px; }
      #toast-container { bottom: 20px; width: 90%; }
      .toast { font-size: 0.85rem; padding: 12px 20px; }
      .sub-btn-new { width: 100%; } /* Mobile friendly newsletter button */
    }
    @media (max-width: 400px) {
      .article-title { font-size: 1.6rem; }
      .stat-pill { min-width: 100%; margin-bottom: 10px; }
      .stats-row { gap: 8px; margin: 24px 0; }
      .share-btn { width: 34px; height: 34px; }
      .like-btn { width: 34px; height: 34px; }
      .nlcard { padding: 24px 16px; }
    }

    /* Print Stylesheet */
    @media print {
      .nav-header, .share-row, .article-footer, #toast-container, #lightbox, .premium-block, .ambient-glow, .premium-fade-gate, #selection-share-tooltip, .related-articles { display: none !important; }
      body { background: #fff !important; color: #000 !important; }
      * { text-shadow: none !important; box-shadow: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
      .article-title, .article-subtitle, .article-body, .article-body h2, .article-body h3, .article-body strong { color: #000 !important; }
      .article-body a { color: #000 !important; border-bottom: 1px solid #000; }
      .hero-img-wrapper { border: none !important; margin-bottom: 30px !important; }
      .stat-val { color: #000 !important; }
      .article-divider { background: #ccc !important; height: 1px !important; }
      .tag { border: 1px solid #000 !important; color: #000 !important; background: transparent !important; }
      .container { padding: 0 !important; }
    }

    /* ==================================================================
       OCM READER ENHANCEMENTS (additive layer)
       (1) Cinematic entrance  (5) Living table of contents
       (6) Progress ring + resume  (13) Like burst
       Everything below is new; nothing above this banner was modified.
       ================================================================== */

    /* -- Category-tinted ambient glow -- */
    @property --glow-tint { syntax: '<color>'; inherits: true; initial-value: rgba(var(--ocm-accent-rgb), 0.05); }
    :root { --glow-tint: rgba(var(--ocm-accent-rgb), 0.05); }
    .ambient-glow {
      background: radial-gradient(ellipse at center, var(--glow-tint) 0%, transparent 65%);
      transition: --glow-tint 1.4s ease;
    }

    /* -- (6) Resume pill -- */
    #ocm-resume {
      position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(70px); z-index: 9996;
      display: flex; align-items: center; gap: 10px;
      padding: 12px 18px; border-radius: 26px; cursor: pointer;
      background: rgba(18,18,24,0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(var(--ocm-accent-rgb), 0.35);
      color: var(--text-main); font-family: 'Satoshi', sans-serif; font-size: 0.85rem; font-weight: 700;
      box-shadow: 0 18px 45px rgba(0,0,0,0.55), 0 0 25px rgba(var(--ocm-accent-rgb), 0.08);
      opacity: 0; pointer-events: none;
      transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
      max-width: 92vw; white-space: nowrap;
    }
    #ocm-resume.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
    #ocm-resume:hover { border-color: var(--accent); box-shadow: 0 18px 45px rgba(0,0,0,0.6), 0 0 30px rgba(var(--ocm-accent-rgb), 0.18); }
    #ocm-resume svg { width: 15px; height: 15px; stroke: var(--accent); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
    #ocm-resume .rs-pct { color: var(--accent); font-weight: 800; }

    /* -- (13) Like burst -- */
    .like-wrap { position: relative; }
    .lb-part {
      position: absolute; left: 50%; top: 50%; pointer-events: none; z-index: 6;
      display: flex; align-items: center; justify-content: center;
      animation: ocmLbFly var(--lbd, 0.75s) cubic-bezier(0.1, 0.75, 0.3, 1) forwards;
    }
    .lb-part svg { display: block; fill: currentColor; }
    .lb-dot { border-radius: 50%; }
    @keyframes ocmLbFly {
      0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.3) rotate(0deg); }
      70%  { opacity: 1; }
      100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(var(--sc)) rotate(var(--rr)); }
    }

    /* -- Responsive adjustments for the new layer -- */
    @media (max-width: 600px) {
      #ocm-resume { bottom: 74px; font-size: 0.8rem; padding: 11px 15px; }
    }

    /* -- Print: hide every floating enhancement -- */
    @media print {
      #ocm-resume, .ocm-dock-host { display: none !important; }
    }

    /* -- Reduced motion: everything lands instantly -- */
    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
      .article-header, .hero-img-wrapper, .content-grid { animation: none !important; opacity: 1 !important; }
      #ocm-resume { transition: none !important; }
      .lb-part { animation: none !important; display: none !important; }
    }

  
    /* ==================================================================
       OCM READER ENHANCEMENTS - LAYER 2 (additive)
       (A) Branded OCM quote cards   (B) Glossary hover (Studio port)
       (C) Glossy entrance pass (blur-free)
       Nothing above this block was modified; later rules win by cascade.
       ================================================================== */

    /* ── Studio palette aliases (byte-values from the Studio default theme,
          so the ported glossary styles compute identically here) ── */
    :root {
      --ocm-accent: var(--accent);
      --ocm-fg-rgb: 255,255,255;
      --ocm-text: #ffffff;
      --ocm-text-2: #e2e8f0;
      --ocm-text-3: #cbd5e1;
      --ocm-text-5: #64748b;
    }

    /* ── (A) Branded OCM quote cards ─────────────────────────────────
       Keeps the praised green fade + accent bar; swaps the serif
       quotation glyph for the OCM logo medallion and adds a faint
       clipped logo watermark. Both are pseudo-elements, so the
       renderer's <blockquote> output is untouched. */
    .article-body blockquote {
      padding: 84px 34px 30px 32px;
      background:
        radial-gradient(96px 96px at 51px 48px, rgba(var(--ocm-accent-rgb), 0.13), transparent 72%),
        linear-gradient(90deg, rgba(var(--ocm-accent-rgb), 0.08), rgba(var(--ocm-accent-rgb), 0.01));
      border-top: 1px solid rgba(var(--ocm-accent-rgb), 0.10);
      border-right: 1px solid rgba(var(--ocm-accent-rgb), 0.07);
      border-bottom: 1px solid rgba(var(--ocm-accent-rgb), 0.10);
      box-shadow: 0 18px 44px -22px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.03);
    }
    .article-body blockquote::before {
      content: '';
      top: 28px; left: 32px;
      width: 38px; height: 38px;
      border-radius: 50%;
      background: url('../ocm-logo-256.webp') center / cover no-repeat;
      box-shadow:
        0 0 0 1px rgba(var(--ocm-accent-rgb), 0.45),
        0 0 0 5px rgba(var(--ocm-accent-rgb), 0.07),
        0 0 22px rgba(var(--ocm-accent-rgb), 0.22),
        0 8px 18px rgba(0,0,0,0.45);
      font-size: 0; color: transparent;
    }
    .article-body blockquote::after {
      content: '';
      position: absolute;
      right: -44px; bottom: -50px;
      width: 190px; height: 190px;
      border-radius: 50%;
      background: url('../ocm-logo-256.webp') center / cover no-repeat;
      opacity: 0.05;
      -webkit-mask-image: radial-gradient(closest-side, #000 18%, transparent 90%);
      mask-image: radial-gradient(closest-side, #000 18%, transparent 90%);
      pointer-events: none;
    }
    @media (max-width: 600px) {
      .article-body blockquote { padding: 68px 22px 24px 22px; }
      .article-body blockquote::before { top: 22px; left: 22px; width: 32px; height: 32px; }
      .article-body blockquote { background:
        radial-gradient(80px 80px at 38px 38px, rgba(var(--ocm-accent-rgb), 0.13), transparent 72%),
        linear-gradient(90deg, rgba(var(--ocm-accent-rgb), 0.08), rgba(var(--ocm-accent-rgb), 0.01)); }
      .article-body blockquote::after { right: -36px; bottom: -40px; width: 130px; height: 130px; }
    }

    /* ── (B) Glossary - exact Studio Intel-Panel styling ─────────────── */
    .glossary-term {
      border-bottom: 1px dotted rgba(var(--ocm-accent-rgb), 0.55);
      cursor: help;
      color: inherit;
      transition: color 0.15s ease;
      -webkit-tap-highlight-color: transparent;
      position: relative;
    }
    /* Specificity lifted past the theme-enforcement span rules */
    .article-body .glossary-term:hover,
    .article-body .glossary-term.g-open {
      color: var(--ocm-accent) !important;
      border-bottom-color: var(--ocm-accent) !important;
    }

    #ocm-gt-tip {
      display: none;
      position: fixed;
      background-color: rgba(18, 20, 26, 0.98);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(var(--ocm-accent-rgb), 0.2);
      border-radius: 14px;
      padding: 14px 16px;
      z-index: 1100010;
      box-shadow: 0 20px 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(var(--ocm-fg-rgb),0.05);
      font-family: 'Satoshi', sans-serif;
      color: var(--ocm-text-2);
      pointer-events: auto;
      animation: glossary-fade-in 0.2s ease-out;
      font-style: normal;
      text-align: left;
    }
    #ocm-gt-tip .g-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 12px; }
    #ocm-gt-tip .g-t { font-size: 0.95rem; font-weight: 700; color: var(--ocm-text); letter-spacing: -0.2px; }
    #ocm-gt-tip .g-c { display: inline-block; font-size: 0.6rem; font-weight: 700; color: var(--ocm-accent); background-color: rgba(var(--ocm-accent-rgb),0.08); border: 1px solid rgba(var(--ocm-accent-rgb),0.15); padding: 2px 8px; border-radius: 999px; letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; }
    #ocm-gt-tip .g-s { font-size: 0.85rem; line-height: 1.55; color: var(--ocm-text-3); font-weight: 400; }
    #ocm-gt-tip .glossary-more-btn { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 0.72rem; font-weight: 700; color: var(--ocm-accent); cursor: pointer; letter-spacing: 0.2px; transition: color 0.15s ease; -webkit-tap-highlight-color: transparent; }
    .glossary-more-btn:hover { color: #86efac !important; }
    @keyframes glossary-fade-in { 0% { opacity: 0; transform: translateY(4px); } 100% { opacity: 1; transform: none; } }
    @keyframes glossary-slide-up { 0% { opacity: 0; transform: translateY(40px); } 100% { opacity: 1; transform: none; } }

    #ocm-gt-veil {
      display: none; position: absolute; inset: 0;
      background-color: rgba(0,0,0,0.55);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      z-index: 1100020;
      animation: glossary-fade-in 0.25s ease-out;
    }
    #ocm-gt-panel {
      display: none; position: absolute; z-index: 1100021;
      background-color: rgba(18, 20, 26, 0.98);
      backdrop-filter: blur(30px);
      -webkit-backdrop-filter: blur(30px);
      border: 1px solid rgba(var(--ocm-accent-rgb), 0.18);
      color: var(--ocm-text-2);
      font-family: 'Satoshi', sans-serif;
      box-shadow: 0 30px 60px rgba(0,0,0,0.7), inset 0 1px 0 rgba(var(--ocm-fg-rgb),0.04);
      top: 50%; right: 32px; transform: translateY(-50%);
      width: 420px; max-height: calc(var(--vp-h, 100vh) * 0.8); overflow-y: auto;
      border-radius: 20px; padding: 28px 30px;
      animation: glossary-fade-in 0.25s ease-out;
      font-style: normal; text-align: left;
    }
    #ocm-gt-panel.g-mob {
      top: auto; right: 0; left: 0; bottom: 0; transform: none;
      width: auto; max-height: calc(var(--vp-h, 100vh) * 0.8);
      border-radius: 24px 24px 0 0;
      padding: 24px 20px calc(28px + env(safe-area-inset-bottom, 0px)) 20px;
      animation: glossary-slide-up 0.35s cubic-bezier(0.16,1,0.3,1);
    }
    #ocm-gt-panel .g-ph { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
    #ocm-gt-panel .g-pw { flex-grow: 1; min-width: 0; }
    #ocm-gt-panel .g-pc { display: inline-block; font-size: 0.65rem; font-weight: 700; color: var(--ocm-accent); background-color: rgba(var(--ocm-accent-rgb),0.08); border: 1px solid rgba(var(--ocm-accent-rgb),0.15); padding: 3px 9px; border-radius: 999px; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 10px; }
    #ocm-gt-panel .g-pt { margin: 0; font-size: 1.5rem; font-weight: 700; color: var(--ocm-text); letter-spacing: -0.3px; line-height: 1.15; }
    #ocm-gt-panel.g-mob .g-pt { font-size: 1.35rem; }
    #ocm-gt-panel .g-pa { margin-top: 6px; font-size: 0.75rem; color: var(--ocm-text-5); font-style: italic; }
    #ocm-gt-panel .g-x { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background-color: rgba(var(--ocm-fg-rgb),0.04); border: 1px solid rgba(var(--ocm-fg-rgb),0.06); cursor: pointer; flex-shrink: 0; -webkit-tap-highlight-color: transparent; transition: background-color 0.15s ease, border-color 0.15s ease; }
    #ocm-gt-panel .g-x:hover { background-color: rgba(var(--ocm-fg-rgb),0.09); border-color: rgba(var(--ocm-fg-rgb),0.12); }
    #ocm-gt-panel .g-pd { font-size: 1rem; line-height: 1.7; color: var(--ocm-text-3); font-weight: 400; }
    #ocm-gt-panel.g-mob .g-pd { font-size: 0.95rem; }
    #ocm-gt-panel.custom-scroll::-webkit-scrollbar { width: 4px; display: block; }
    #ocm-gt-panel.custom-scroll::-webkit-scrollbar-track { background: transparent; }
    #ocm-gt-panel.custom-scroll::-webkit-scrollbar-thumb { background: rgba(var(--ocm-fg-rgb),0.1); border-radius: 4px; }

    /* -- (C) Entrance: one soft fade -------------------------------
       No per word reveal, no travel, no scale, no blur. Every element in
       the entrance now animates on opacity alone, the one property that
       cannot trigger layout or re-rasterise text, so the sequence stays
       glassy on any device. The layer-1 word cascade is unpicked in JS
       and neutralised here, which also covers the instant between that
       render and this script parsing. */
    @keyframes fadeInUp { from { opacity: 0; } to { opacity: 1; } }
    @keyframes fadeInDown { from { opacity: 0; } to { opacity: 1; } }
    @keyframes ocmImageIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes ocmGlowIn { from { opacity: 0; } to { opacity: 1; } }
    .nav-header { animation: fadeInDown 0.75s cubic-bezier(0.4, 0, 0.2, 1) both; will-change: opacity; }
    .ambient-glow { animation: ocmGlowIn 1.6s ease-out both; }
    /* The header, hero image and body appear at once: the hero image is the
       largest thing on screen and nothing holds it back. */

    /* -- Glossary parked --------------------------------------------
       The system above is intact but switched off in the script layer,
       which sets this class. Nothing glossary related can paint. */
    html.ocm-gloss-off #ocm-gt-tip,
    html.ocm-gloss-off #ocm-gt-veil,
    html.ocm-gloss-off #ocm-gt-panel { display: none !important; }
    html.ocm-gloss-off .glossary-term {
      border-bottom: none !important;
      color: inherit !important;
      cursor: inherit !important;
    }

    /* -- (D) v9 core-fix support: chart frames, premium teaser, gate proof -- */
    .chart-frame { position: relative; width: 100%; height: 550px; overflow: hidden; }
    @media (max-width: 768px) { .chart-frame { height: 470px; } }
    @media (max-width: 600px) { .chart-frame { height: 430px; } }
    @media (max-width: 400px) { .chart-frame { height: 390px; } }
    .chart-frame[data-pending] { background: linear-gradient(100deg, rgba(255,255,255,0.02) 35%, rgba(var(--ocm-accent-rgb), 0.06) 50%, rgba(255,255,255,0.02) 65%); background-size: 240% 100%; animation: ocmChartShimmer 1.8s linear infinite; }
    .chart-frame[data-pending]::after { content: 'Loading interactive chart'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 0.85rem; letter-spacing: 0.4px; }
    @keyframes ocmChartShimmer { from { background-position: 210% 0; } to { background-position: -30% 0; } }

    .ocm-premium-teaser {
      /* The overflow clip is pushed 22px past the text on every side (padding
         out, margin back) so the blur bleed falls off naturally instead of
         being sliced into a hard vertical edge at the start of each line.
         Text position is unchanged: 6.6em cap minus 0.9em top padding leaves
         the same 5.7em of visible content as before. */
      position: relative; max-height: 6.6em; overflow: hidden;
      padding: 0.9em 22px 0 22px; margin-left: -22px; margin-right: -22px;
      pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
      mask-image: linear-gradient(to bottom, black 0%, black 42%, transparent 98%);
      -webkit-mask-image: linear-gradient(to bottom, black 0%, black 42%, transparent 98%);
    }
    @media (max-width: 600px) {
      /* Tighter gutters on phones, and the blur is smaller there anyway. */
      .ocm-premium-teaser { padding-left: 14px; padding-right: 14px; margin-left: -14px; margin-right: -14px; }
    }
    /* Blurred hard enough that no word is recoverable, light enough that the
       shape of real paragraphs still reads. Static only: animating blur was
       removed suite-wide because it re-rasterises text every frame. The extra
       padding-top gives the blur bleed room inside the overflow clip. */
    .ocm-premium-teaser p {
      margin: 0;
      filter: blur(6px);
      -webkit-filter: blur(6px);
    }
    @media (max-width: 768px) { .ocm-premium-teaser p { filter: blur(5px); -webkit-filter: blur(5px); } }
    @media (max-width: 400px) { .ocm-premium-teaser p { filter: blur(4.4px); -webkit-filter: blur(4.4px); } }

    .ocm-gate-proof {
      width: 100%; max-width: 860px; margin: 46px auto 0; overflow: hidden;
      mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    }
    .ocm-gate-proof-track { display: flex; width: max-content; animation: ocmGateMarquee var(--gate-marquee-dur, 38s) linear infinite; will-change: transform; }
    .ocm-gate-proof:hover .ocm-gate-proof-track { animation-play-state: paused; }
    .ocm-gate-proof-row { display: flex; gap: 16px; padding-right: 16px; }
    .ocm-gate-review { width: 280px; flex: 0 0 auto; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 18px 20px; text-align: left; }
    .ocm-gate-stars { display: flex; gap: 3px; margin-bottom: 10px; }
    .ocm-gate-stars svg { width: 13px; height: 13px; fill: var(--accent); filter: drop-shadow(0 0 6px rgba(var(--ocm-accent-rgb), 0.35)); }
    .ocm-gate-quote { margin: 0 0 12px; font-size: 0.88rem; line-height: 1.55; color: var(--text-body); }
    .ocm-gate-who { font-size: 0.75rem; font-weight: 700; color: #fff; }
    .ocm-gate-who span { color: var(--text-dim); font-weight: 500; margin-left: 6px; }
    @keyframes ocmGateMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

    /* ── Print + reduced motion for everything in this layer ── */
    @media print {
      #ocm-gt-tip, #ocm-gt-veil, #ocm-gt-panel { display: none !important; }
      .article-body blockquote { padding: 20px 24px; }
      .article-body blockquote::before, .article-body blockquote::after { display: none !important; }
      .glossary-term { border-bottom: none !important; }
      .ocm-gate-proof, .ocm-premium-teaser { display: none !important; }
      .chart-frame[data-pending] { background: none !important; }
      .chart-frame[data-pending]::after { display: none !important; }
    }
    @media (prefers-reduced-motion: reduce) {
      .nav-header, .ambient-glow {
        animation: none !important; opacity: 1 !important; will-change: auto !important;
      }
      #ocm-gt-tip, #ocm-gt-veil, #ocm-gt-panel { animation: none !important; }
      .ocm-gate-proof-track, .chart-frame[data-pending] { animation: none !important; }
    }

    /* =====================================================================
       ROTATING GRADIENT BORDER
       The same treatment as the featured card on the research page: a conic
       gradient swept around the frame by animating a registered angle, with
       everything but a 1.5px ring masked away. It goes on ::before because
       ::after is already spoken for on both wrappers (inner shadow on the
       hero, hairline on media blocks).

       An article can hold a dozen media blocks, and this repaints on the
       main thread, so unlike the single featured card it is only allowed to
       run while the block is on screen. initBorderGlow toggles .ocm-inview;
       with no IntersectionObserver the ring simply stays still.
       ===================================================================== */
    @property --ocm-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
    @keyframes ocmBorderRotate { to { --ocm-angle: 360deg; } }

    .hero-img-wrapper::before,
    .media-wrapper::before {
      content: ''; position: absolute; inset: 0; border-radius: inherit;
      padding: 1.5px;
      background: conic-gradient(from var(--ocm-angle),
        rgba(var(--ocm-accent-rgb),0) 0deg, rgba(var(--ocm-accent-rgb),0) 230deg,
        rgba(var(--ocm-accent-rgb),0.85) 300deg, rgba(var(--ocm-accent-rgb),0) 350deg);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
              mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude;
      opacity: 0.55; z-index: 11; pointer-events: none;
      animation: ocmBorderRotate 8s linear infinite;
      animation-play-state: paused;
    }
    .hero-img-wrapper.ocm-inview::before,
    .media-wrapper.ocm-inview::before { animation-play-state: running; }

    @media (prefers-reduced-motion: reduce) {
      .hero-img-wrapper::before, .media-wrapper::before { animation: none !important; }
    }
    @media print {
      .hero-img-wrapper::before, .media-wrapper::before { display: none !important; }
    }
  
    /* =====================================================================
       ADVANCED RESEARCH (gold tier)
       Category tag, header tier pill, and the PDF paper panel. Gold is
       #fbbf24 with #ffe9a8 highlights; sits alongside the suite palette the
       same way tbtc orange does. All motion is opt-out under reduced motion.
       ===================================================================== */

    /* The gold .tadv category tag lives in shared/ocm.css. */

    /* --- Header tier pill (sits beside the category tag on paper pages) --- */
    .adv-tier { display: inline-flex; align-items: center; gap: 5px; }
    .adv-tier svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2.5; fill: none; }
    .adv-tier-free  { background: rgba(var(--ocm-accent-rgb), 0.08);  color: var(--accent); border: 1px solid rgba(var(--ocm-accent-rgb), 0.15); }
    .adv-tier-prem  { background: rgba(255,255,255,0.06); color: #fff;          border: 1px solid rgba(255,255,255,0.12); }
    .adv-tier-whale {
      background: linear-gradient(120deg, rgba(251,191,36,0.14), rgba(251,191,36,0.24));
      color: #ffe9a8;
      border: 1px solid rgba(251,191,36,0.45);
      box-shadow: 0 0 18px rgba(251,191,36,0.12);
    }

    /* --- The paper panel --- */
    .adv-paper-panel {
      position: relative;
      margin: 46px 0 8px 0;
      padding: 34px 36px;
      border-radius: 22px;
      border: 1px solid rgba(251,191,36,0.35);
      background:
        radial-gradient(120% 160% at 0% 0%, rgba(251,191,36,0.10), transparent 55%),
        linear-gradient(150deg, rgba(38,31,14,0.72), rgba(17,15,10,0.85));
      box-shadow: 0 22px 44px rgba(0,0,0,0.35), 0 0 44px rgba(251,191,36,0.07), inset 0 1px 0 rgba(255,255,255,0.05);
      overflow: hidden;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .adv-paper-panel::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(115deg, transparent 35%, rgba(255,238,180,0.10) 50%, transparent 65%);
      transform: translateX(-140%);
      animation: advSheen 5.2s ease-in-out infinite;
      pointer-events: none;
    }
    .adv-spark {
      position: absolute;
      color: rgba(251,191,36,0.75);
      font-size: 0.85rem;
      pointer-events: none;
      user-select: none;
      animation: advTwinkle 3s ease-in-out infinite;
      z-index: 1;
    }
    .adv-spark.s1 { top: 16px; right: 26px; }
    .adv-spark.s2 { top: 42px; right: 58px; font-size: 0.6rem; animation-delay: 0.9s; }
    .adv-spark.s3 { bottom: 20px; left: 26px; font-size: 0.65rem; animation-delay: 1.7s; }

    .adv-paper-head { display: flex; align-items: center; gap: 22px; position: relative; z-index: 2; }

    /* The paper presentation. When there is cover art it carries the title,
       subtitle and issue line already, so it runs full width as the headline
       and everything else is centred beneath it. Without art the drawn sheet
       stays a portrait card and the title text comes back. */
    .adv-paper-cover { position: relative; perspective: 900px; z-index: 2; }
    .adv-paper-panel.has-art .adv-paper-cover { margin: 0 auto; max-width: 100%; }
    .adv-paper-panel:not(.has-art) .adv-paper-cover { width: 190px; margin: 0 auto; }
    .adv-paper-body { text-align: center; }
    .adv-paper-panel.has-art .adv-paper-body { margin-top: 24px; }
    .adv-paper-panel:not(.has-art) .adv-paper-body { margin-top: 22px; }
    .adv-cover-sheet {
      position: relative;
      aspect-ratio: 1 / 1.414;
      border-radius: 10px;
      padding: 18px 16px 14px 20px;
      display: flex; flex-direction: column;
      background: linear-gradient(160deg, #17150e 0%, #0d0c08 60%, #121009 100%);
      border: 1px solid rgba(251,191,36,0.45);
      box-shadow: 0 18px 38px rgba(0,0,0,0.55), 0 0 30px rgba(251,191,36,0.10), inset 0 1px 0 rgba(255,255,255,0.06);
      transform: rotate(-2.2deg);
      transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), box-shadow 0.35s;
    }
    /* The spine: the darker strip that makes it read as a bound document */
    .adv-cover-sheet::before {
      content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 9px;
      border-radius: 10px 0 0 10px;
      background: linear-gradient(90deg, rgba(251,191,36,0.55), rgba(251,191,36,0.06));
    }
    .adv-paper-panel:hover .adv-cover-sheet { transform: rotate(0deg) translateY(-3px); box-shadow: 0 24px 46px rgba(0,0,0,0.6), 0 0 40px rgba(251,191,36,0.16); }
    .adv-cover-kicker {
      font-size: 0.5rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
      color: rgba(251,191,36,0.85);
    }
    .adv-cover-rule { height: 1px; background: rgba(251,191,36,0.35); margin: 8px 0 12px 0; }
    .adv-cover-title {
      font-size: 0.82rem; font-weight: 900; line-height: 1.3; color: #ffe9a8;
      letter-spacing: -0.2px;
      display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
    }
    .adv-cover-lines { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
    .adv-cover-lines span { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.10); }
    .adv-cover-lines span:nth-child(2) { width: 88%; }
    .adv-cover-lines span:nth-child(3) { width: 94%; }
    .adv-cover-lines span:nth-child(4) { width: 72%; }
    .adv-cover-foot {
      margin-top: auto; padding-top: 12px;
      font-size: 0.5rem; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
      color: rgba(255,255,255,0.45);
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
    }
    .adv-paper-panel.has-art .adv-cover-badge { right: 14px; bottom: 14px; }
    .adv-cover-badge {
      position: absolute; right: -10px; bottom: 14px; z-index: 3;
      padding: 5px 10px; border-radius: 7px;
      font-size: 0.58rem; font-weight: 900; letter-spacing: 1.2px;
      color: #1a1405; background: linear-gradient(135deg, #fbbf24, #e9a819);
      box-shadow: 0 8px 20px rgba(233,168,25,0.35);
    }

    /* Tom's own cover art for a paper. It replaces the drawn sheet, which
       stays in the markup as the fallback: if the image 404s the onerror
       handler drops .has-cover-img and the drawn cover takes over, so a
       broken link can never leave an empty slot on the page. */
    .adv-cover-img {
      display: none;
      width: 100%; height: auto;
      border-radius: 14px;
      border: 1px solid rgba(251,191,36,0.42);
      box-shadow: 0 26px 54px rgba(0,0,0,0.6), 0 0 46px rgba(251,191,36,0.10);
      transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s;
    }
    .adv-paper-panel:hover .adv-cover-img {
      transform: translateY(-4px);
      box-shadow: 0 34px 64px rgba(0,0,0,0.66), 0 0 60px rgba(251,191,36,0.16);
    }
    .adv-paper-cover.has-cover-img .adv-cover-img { display: block; }
    .adv-paper-cover.has-cover-img .adv-cover-sheet { display: none; }
    .adv-paper-body { min-width: 0; }
    .adv-paper-file {
      margin-top: 14px;
      display: inline-flex; align-items: center; gap: 8px;
      max-width: 100%;
      padding: 6px 12px; border-radius: 8px;
      background: rgba(0,0,0,0.35); border: 1px solid rgba(251,191,36,0.22);
      font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: #ffe9a8;
    }
    .adv-paper-file svg { width: 12px; height: 12px; stroke: #fbbf24; stroke-width: 2.4; fill: none; flex: 0 0 auto; }
    .adv-paper-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .adv-paper-icon {
      flex: 0 0 auto;
      width: 62px; height: 62px;
      border-radius: 16px;
      display: flex; align-items: center; justify-content: center;
      background: rgba(251,191,36,0.10);
      border: 1px solid rgba(251,191,36,0.40);
      box-shadow: 0 0 26px rgba(251,191,36,0.15), inset 0 1px 0 rgba(255,255,255,0.08);
    }
    .adv-paper-icon svg { width: 28px; height: 28px; stroke: #fbbf24; stroke-width: 2; fill: none; }
    .adv-paper-kicker {
      position: relative; z-index: 2;
      font-size: 0.98rem;
      font-weight: 900;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: #fbbf24;
      margin-bottom: 20px;
      display: flex; align-items: center; gap: 10px;
      text-shadow: 0 0 22px rgba(251,191,36,0.25);
    }
    .adv-paper-kicker::before { content: '\2726'; font-size: 0.85em; }
    .adv-paper-title { font-size: 1.35rem; font-weight: 900; color: #fff; letter-spacing: -0.3px; line-height: 1.25; margin: 0; }
    .adv-paper-meta { margin-top: 8px; font-size: 0.95rem; font-weight: 700; color: var(--text-body); display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
    .adv-meta-i { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
    .adv-paper-meta .adv-dot { opacity: 0.4; }

    .adv-paper-action { position: relative; z-index: 2; margin-top: 24px; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
    .adv-paper-note { position: relative; z-index: 2; margin-top: 16px; font-size: 0.82rem; color: var(--text-dim); font-weight: 500; text-align: center; }
    .adv-paper-file { margin-left: auto; margin-right: auto; }

    /* --- Gold buttons: download when entitled, upgrade when not --- */
    .article-body .adv-cta-btn,
    .adv-cta-btn,
    .adv-dl-btn {
      position: relative;
      display: inline-flex; align-items: center; justify-content: center; gap: 10px;
      padding: 15px 30px;
      border: none; border-radius: 13px; cursor: pointer;
      font-family: 'Satoshi', sans-serif; font-size: 0.95rem; font-weight: 900; letter-spacing: 0.2px;
      color: #1a1206;
      background: linear-gradient(135deg, #ffe9a8 0%, #fbbf24 45%, #e9a819 100%);
      box-shadow: 0 12px 28px rgba(233,168,25,0.28), inset 0 1px 0 rgba(255,255,255,0.5);
      transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease, filter 0.25s ease;
      overflow: hidden;
      text-decoration: none;
    }
    .adv-cta-btn { color: #1a1206 !important; background-size: auto; border-bottom: none; }
    .adv-cta-btn svg,
    .adv-dl-btn svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 2.6; fill: none; }
    .adv-cta-btn::after,
    .adv-dl-btn::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.45) 50%, transparent 65%);
      transform: translateX(-140%);
      transition: transform 0.7s ease;
      pointer-events: none;
    }
    .article-body .adv-cta-btn:hover,
    .adv-cta-btn:hover,
    .adv-dl-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(233,168,25,0.38); filter: brightness(1.04); color: #1a1206 !important; border-bottom: none; }
    .adv-cta-btn:hover::after,
    .adv-dl-btn:hover::after { transform: translateX(140%); }
    .adv-cta-btn:active,
    .adv-dl-btn:active { transform: translateY(0); }
    .adv-dl-btn.is-busy { pointer-events: none; opacity: 0.75; }
    .adv-dl-btn.is-busy svg,
    .adv-open-btn.is-busy svg { animation: advSpin 0.9s linear infinite; }
    @keyframes advSpin { to { transform: rotate(360deg); } }

    /* --- Green open button: the same object as the download button, so the
       two read as equal choices rather than a button and an afterthought --- */
    .article-body .adv-open-btn,
    .article-body .adv-signin-btn,
    .adv-signin-btn,
    .adv-open-btn {
      position: relative;
      display: inline-flex; align-items: center; justify-content: center; gap: 10px;
      padding: 15px 30px;
      border: none; border-radius: 13px; cursor: pointer;
      font-family: 'Satoshi', sans-serif; font-size: 0.95rem; font-weight: 900; letter-spacing: 0.2px;
      color: #04240f !important;
      background: linear-gradient(135deg, #b8ffd4 0%, #2ee27a 45%, #00b84a 100%);
      background-size: auto;
      border-bottom: none;
      padding: 15px 30px;
      box-shadow: 0 12px 28px rgba(0,184,74,0.28), inset 0 1px 0 rgba(255,255,255,0.5);
      transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease, filter 0.25s ease;
      overflow: hidden;
      text-decoration: none;
    }
    .adv-signin-btn svg,
    .adv-open-btn svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 2.6; fill: none; }
    .adv-signin-btn::after,
    .adv-open-btn::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.45) 50%, transparent 65%);
      transform: translateX(-140%);
      transition: transform 0.7s ease;
      pointer-events: none;
    }
    .article-body .adv-open-btn:hover,
    .article-body .adv-signin-btn:hover,
    .adv-signin-btn:hover,
    .adv-open-btn:hover {
      transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0,184,74,0.38);
      filter: brightness(1.04); color: #04240f !important; border-bottom: none;
    }
    .adv-signin-btn:hover::after,
    .adv-open-btn:hover::after { transform: translateX(140%); }
    .adv-signin-btn:active,
    .adv-open-btn:active { transform: translateY(0); }

    /* --- Locked state --- */
    .adv-lock { position: relative; z-index: 2; margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
    .adv-lock-row { display: flex; align-items: center; justify-content: center; gap: 14px; text-align: left; }
    .adv-lock-ring {
      flex: 0 0 auto;
      width: 44px; height: 44px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      background: rgba(251,191,36,0.10);
      border: 1px solid rgba(251,191,36,0.45);
      box-shadow: 0 0 22px rgba(251,191,36,0.18);
    }
    .adv-lock-ring svg { width: 18px; height: 18px; stroke: #fbbf24; stroke-width: 2.2; fill: none; }
    .adv-lock-cta { font-size: 1.02rem; font-weight: 900; color: #fff; }
    .adv-lock-sub { font-size: 0.72rem; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: #fbbf24; margin-top: 3px; }
    .adv-lock .premium-button-group { margin-top: 4px; }
    .premium-action-btn.adv-gold-btn {
      color: #1a1206;
      background: linear-gradient(135deg, #ffe9a8 0%, #fbbf24 45%, #e9a819 100%);
      border: none;
      box-shadow: 0 12px 28px rgba(233,168,25,0.28), inset 0 1px 0 rgba(255,255,255,0.5);
    }
    .premium-action-btn.adv-gold-btn:hover { filter: brightness(1.05); transform: translateY(-2px); box-shadow: 0 16px 34px rgba(233,168,25,0.38); }
    .premium-action-btn.adv-gold-btn svg { stroke: #1a1206; }

    @media (max-width: 640px) {
      .adv-paper-panel { padding: 20px 14px 22px; border-radius: 18px; }
      .adv-paper-head { flex-direction: column; text-align: center; gap: 16px; }
      .adv-paper-grid { grid-template-columns: 1fr; gap: 22px; justify-items: center; text-align: center; }

      /* The kicker was running to two lines at desktop size and tracking */
      .adv-paper-kicker {
        font-size: 0.66rem; letter-spacing: 1.8px; gap: 7px;
        justify-content: center; margin-bottom: 14px;
      }

      /* Cover art fills the phone rather than sitting at 150px, which was a
         leftover from the old side-by-side layout */
      .adv-paper-panel.has-art .adv-paper-cover { width: 100%; }
      .adv-paper-panel:not(.has-art) .adv-paper-cover { width: 150px; }
      .adv-cover-img { border-radius: 10px; }
      .adv-cover-badge { right: 8px; bottom: 8px; padding: 3px 7px; font-size: 0.5rem; letter-spacing: 0.9px; }

      .adv-paper-panel.has-art .adv-paper-body { margin-top: 16px; }
      .adv-paper-meta { justify-content: center; font-size: 0.8rem; gap: 7px; }
      .adv-meta-i { gap: 7px; }
      /* The tier already headlines the lock block below, so it does not need
         to appear twice on a screen this narrow */
      .adv-paper-panel .adv-lock .adv-meta-tier { display: none; }

      .adv-paper-file { font-size: 0.62rem; padding: 5px 10px; max-width: 100%; }
      .adv-paper-action { justify-content: center; gap: 10px; margin-top: 18px; }
      .adv-paper-note { text-align: center; font-size: 0.74rem; margin-top: 12px; }

      .adv-lock { margin-top: 18px; gap: 12px; }
      .adv-lock-row { flex-direction: column; text-align: center; gap: 10px; }
      .adv-lock-ring { width: 52px; height: 52px; }
      .adv-lock-ring svg { width: 20px; height: 20px; }
      .adv-lock-cta { font-size: 1rem; }
      .adv-lock-sub { font-size: 0.66rem; letter-spacing: 0.4px; text-transform: none; font-weight: 700; }

      .adv-dl-btn, .adv-open-btn, .adv-cta-btn, .adv-signin-btn {
        width: 100%; justify-content: center;
        padding: 13px 18px; font-size: 0.9rem; border-radius: 11px;
      }
      .adv-spark { font-size: 0.7rem; }
    }

    @media (prefers-reduced-motion: reduce) {
      .adv-paper-panel::after, .adv-spark, .adv-dl-btn.is-busy svg { animation: none !important; }
      .adv-dl-btn::after { display: none; }
      .adv-dl-btn, .adv-cta-btn, .adv-signin-btn, .premium-action-btn.adv-gold-btn, .adv-cover-sheet, .adv-cover-img, .adv-open-btn { transition: none; }
      .adv-paper-panel:hover .adv-cover-sheet, .adv-paper-panel:hover .adv-cover-img { transform: rotate(-2.2deg); }
    }

    @media print {
      .adv-paper-panel { display: none !important; }
    }
  
  /* =====================================================================
     THE PAYWALL: what is still to come, what membership includes, and the
     free video a locked reader can watch right now.
     ===================================================================== */
  .gate-video { margin: 8px 0 28px; }
  .gate-video .video-container { margin: 12px 0 0; }
  .gate-video-label {
    display: flex; align-items: center; gap: 10px; justify-content: center;
    font-size: 0.78rem; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent);
  }
  .gate-video-label::before, .gate-video-label::after { content: ''; height: 1px; flex: 1; max-width: 120px; background: linear-gradient(90deg, transparent, rgba(var(--ocm-accent-rgb), 0.45)); }
  .gate-video-label::after { background: linear-gradient(90deg, rgba(var(--ocm-accent-rgb), 0.45), transparent); }

  .gate-inside {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    margin: -1.5rem 0 2rem; padding: 16px 22px; max-width: 600px; width: 100%;
    border: 1px solid rgba(var(--ocm-accent-rgb), 0.18); border-radius: 14px;
    background: linear-gradient(145deg, rgba(var(--ocm-accent-rgb), 0.06), rgba(var(--ocm-accent-rgb), 0.015));
  }
  .gate-inside-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-dim); }
  .gate-inside ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
  .gate-inside li { font-size: 1rem; color: var(--text-body); font-weight: 500; }
  .gate-inside li strong { color: var(--accent); font-weight: 900; font-variant-numeric: tabular-nums; }

  .gate-offer { margin: 18px 0 0; font-size: 0.95rem; font-weight: 700; color: var(--text-main); text-align: center; }

  .gate-perks {
    list-style: none; margin: 26px auto 0; padding: 0; display: flex; flex-direction: column; gap: 10px;
    width: fit-content; text-align: left;
  }
  .gate-perks li { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; color: var(--text-body); font-weight: 500; }
  .premium-action-btn { text-align: center; }
  /* The gate sits inside .article-body; its lists are not article lists. */
  .article-body .gate-inside li, .article-body .gate-perks li { padding-left: 0; margin-bottom: 0 !important; line-height: 1.5; }
  .article-body .gate-inside li::before, .article-body .gate-perks li::before { content: none; display: none; }

  @media (max-width: 600px) {
    .gate-inside { margin: -1rem 0 1.5rem; padding: 14px 16px; }
    .gate-inside ul { flex-direction: column; align-items: center; gap: 6px; }
    .gate-perks li { font-size: 0.86rem; }
  }
  @media print {
    .gate-inside, .gate-perks, .gate-video { display: none !important; }
  }

/* ---------------------------------------------------------------- loading and load errors
   Shown while an article's body is fetched (the header is already drawn from
   the index), and if the fetch fails after its retries. */
.ocm-skeleton { display: flex; flex-direction: column; gap: 14px; padding: 8px 0 40px; }
.ocm-skeleton .sk-line {
  display: block; height: 14px; border-radius: 7px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: ocmSkShimmer 1.4s ease-in-out infinite;
}
.ocm-skeleton .sk-gap { display: block; height: 18px; }
@keyframes ocmSkShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.ocm-load-error {
  display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center;
  padding: 48px 20px; color: var(--text-body); font-size: 1.05rem; line-height: 1.6;
}
button.premium-action-btn { cursor: pointer; }
.ocm-load-error .premium-action-btn { min-width: 160px; flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) {
  .ocm-skeleton .sk-line { animation: none; }
}

    /* ==================================================================
       ASK TOM: the question box at the end of an article, and the
       "Asked after reading" card on a Q&A question (shared/ocm-render.js)
       ================================================================== */
    .ask-tom {
      margin-top: 56px; padding-top: 48px;
      border-top: 1px solid transparent;
      border-image: linear-gradient(90deg, transparent, rgba(var(--ocm-accent-rgb), 0.5), transparent) 1;
      font-family: var(--font);
    }
    .ask-head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 22px; }
    .ask-avatar { position: relative; flex: none; width: 56px; height: 56px; }
    .ask-avatar img, .ask-avatar picture img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: block;
      box-shadow: 0 0 0 2px rgba(var(--ocm-accent-rgb), 0.35), 0 8px 22px rgba(0,0,0,0.45); }
    .ask-avatar-badge {
      position: absolute; right: -4px; bottom: -4px; width: 24px; height: 24px; border-radius: 50%;
      display: grid; place-items: center; background: var(--accent); box-shadow: 0 0 0 3px #0c0d11, 0 0 14px rgba(var(--ocm-accent-rgb), 0.5);
    }
    .ask-avatar-badge svg { width: 13px; height: 13px; fill: none; stroke: #07100a; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
    .ask-eyebrow { display: block; font-size: 0.68rem; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
    .article-body .ask-title { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.4px; line-height: 1.2; color: var(--text-main); margin: 0 0 8px; text-wrap: balance; }
    .article-body .ask-sub { font-size: 0.98rem; line-height: 1.6; color: var(--text-sub); margin: 0; max-width: 60ch; }

    .ask-answered { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 20px; }
    .ask-answered-label { font-size: 0.8rem; font-weight: 600; color: var(--text-dim); }
    .article-body .ask-answered a {
      display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 100px;
      font-size: 0.8rem; font-weight: 700; color: var(--accent); text-decoration: none;
      background: rgba(var(--ocm-accent-rgb), 0.08); border: 1px solid rgba(var(--ocm-accent-rgb), 0.25);
      transition: background 0.25s ease, border-color 0.25s ease;
    }
    .article-body .ask-answered a:hover { background: rgba(var(--ocm-accent-rgb), 0.14); border-color: rgba(var(--ocm-accent-rgb), 0.5); }
    .ask-answered svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

    .ask-card {
      position: relative; padding: 26px 24px;
      background: linear-gradient(145deg, rgba(24,24,29,0.7), rgba(16,16,22,0.85));
      border: 1px solid var(--border-color); border-radius: 16px;
      transition: border-color 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s cubic-bezier(0.16,1,0.3,1);
    }
    .ask-card:focus-within { border-color: rgba(var(--ocm-accent-rgb), 0.25); box-shadow: 0 15px 35px rgba(0,0,0,0.3), 0 0 25px rgba(var(--ocm-accent-rgb), 0.06); }
    .ask-field { margin-bottom: 16px; }
    .ask-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .ask-field label {
      display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: 1.4px; color: var(--text-dim); margin-bottom: 8px;
    }
    .ask-opt { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text-faint); margin-left: 4px; }
    .ask-field input, .ask-field textarea {
      width: 100%; padding: 13px 15px; box-sizing: border-box;
      font-family: var(--font); font-size: 1rem; font-weight: 500; color: var(--text-main);
      background: rgba(0, 0, 0, 0.3); border: 1px solid var(--border-color); border-radius: 10px;
      outline: none; transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
      -webkit-appearance: none; appearance: none;
    }
    .ask-field textarea { min-height: 116px; resize: vertical; line-height: 1.55; }
    .ask-field input::placeholder, .ask-field textarea::placeholder { color: rgba(148, 163, 184, 0.5); }
    .ask-field input:focus, .ask-field textarea:focus {
      border-color: var(--accent); background: rgba(var(--ocm-accent-rgb), 0.04); box-shadow: 0 0 0 3px var(--accent-glow);
    }
    .ask-field.invalid input, .ask-field.invalid textarea { border-color: var(--red); box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.1); }
    .ask-field-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 6px; min-height: 1em; }
    .ask-error { visibility: hidden; flex: 1 1 auto; min-width: 0; font-size: 0.8rem; font-weight: 500; color: var(--red); }
    .ask-field.invalid .ask-error { visibility: visible; }
    .ask-count { flex: none; white-space: nowrap; font-size: 0.72rem; font-weight: 600; color: var(--text-faint); font-variant-numeric: tabular-nums; }
    .ask-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
    .ask-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
    .ask-submit {
      display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 180px;
      padding: 14px 26px; font-family: var(--font); font-size: 0.98rem; font-weight: 800; color: #07100a;
      background: var(--accent); border: 1px solid var(--accent); border-radius: 10px; cursor: pointer;
      transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.2s ease;
    }
    .ask-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 15px 35px rgba(0,0,0,0.3), 0 0 25px rgba(var(--ocm-accent-rgb), 0.35); }
    .ask-submit:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
    .ask-submit:disabled { cursor: default; opacity: 0.75; }
    .ask-spinner { display: none; width: 16px; height: 16px; border: 2px solid rgba(7,16,10,0.25); border-top-color: #07100a; border-radius: 50%; animation: askSpin 0.7s linear infinite; }
    .ask-submit.loading .ask-spinner { display: block; }
    @keyframes askSpin { to { transform: rotate(360deg); } }
    .article-body .ask-note { font-size: 0.8rem; color: var(--text-dim); margin: 0; }
    .ask-banner {
      display: none; padding: 12px 16px; margin-bottom: 16px; font-size: 0.9rem; font-weight: 500; color: var(--red);
      background: rgba(248, 113, 113, 0.08); border: 1px solid rgba(248, 113, 113, 0.3); border-radius: 10px;
    }
    .ask-banner.visible { display: block; }

    .ask-done { display: none; flex-direction: column; align-items: center; text-align: center; padding: 18px 10px 8px; }
    .ask-tom.sent .ask-form { display: none; }
    .ask-tom.sent .ask-done { display: flex; }
    .ask-done-ring { width: 60px; height: 60px; margin-bottom: 16px; }
    .ask-done-ring circle { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 195; stroke-dashoffset: 195; animation: askDraw 0.6s ease forwards; }
    .ask-done-ring path { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: askDraw 0.4s ease 0.45s forwards; }
    @keyframes askDraw { to { stroke-dashoffset: 0; } }
    .article-body .ask-done-title { font-size: 1.3rem; font-weight: 900; color: var(--text-main); margin: 0 0 8px; letter-spacing: -0.4px; outline: none; }
    .article-body .ask-done p { font-size: 0.95rem; color: var(--text-sub); line-height: 1.6; margin: 0 0 16px; max-width: 420px; }
    .ask-again {
      font-family: var(--font); font-size: 0.85rem; font-weight: 700; color: var(--accent);
      background: none; border: none; cursor: pointer; padding: 8px 12px; border-radius: 8px; transition: background 0.25s ease;
    }
    .ask-again:hover { background: rgba(var(--ocm-accent-rgb), 0.08); }

    @media (max-width: 600px) {
      .ask-row { grid-template-columns: 1fr; gap: 0; }
      .ask-card { padding: 22px 16px; }
      .ask-head { gap: 14px; }
      .ask-avatar, .ask-avatar img, .ask-avatar picture img { width: 46px; height: 46px; }
      .article-body .ask-title { font-size: 1.25rem; }
      .ask-submit { width: 100%; }
    }

    /* A Q&A question that links back to the article it was asked on */
    .article-body blockquote.qa-question .qa-from {
      display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 10px 14px 10px 10px;
      border-radius: 12px; text-decoration: none; position: relative; z-index: 1;
      background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(var(--ocm-accent-rgb), 0.18);
      transition: border-color 0.25s ease, background 0.25s ease, transform 0.3s cubic-bezier(0.16,1,0.3,1);
    }
    .article-body blockquote.qa-question .qa-from:hover { border-color: rgba(var(--ocm-accent-rgb), 0.45); background: rgba(var(--ocm-accent-rgb), 0.05); transform: translateY(-1px); }
    /* The quote's theme rules make everything inside it inherit the quote's
       size and drop backgrounds (!important), so the card restates its own. */
    .article-body blockquote.qa-question .qa-from, .article-body blockquote.qa-question .qa-from * { font-style: normal !important; }
    .article-body blockquote.qa-question .qa-from { background-color: rgba(0, 0, 0, 0.25) !important; font-size: 1rem !important; line-height: 1.35 !important; }
    .article-body blockquote.qa-question .qa-from:hover { background-color: rgba(var(--ocm-accent-rgb), 0.06) !important; }
    .qa-from-img { flex: none; width: 72px; height: 45px; border-radius: 8px; overflow: hidden; }
    .article-body blockquote.qa-question .qa-from-img { background-color: rgba(255,255,255,0.04) !important; }
    .qa-from-img img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
    .qa-from-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
    .article-body blockquote.qa-question .qa-from-label { font-size: 0.64rem !important; line-height: 1.2 !important; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent) !important; }
    .article-body blockquote.qa-question .qa-from-title { font-size: 0.95rem !important; line-height: 1.35 !important; font-weight: 700; color: var(--text-main) !important; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .qa-from-go { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s ease; }
    .qa-from:hover .qa-from-go { transform: translateX(3px); }

    @media (prefers-reduced-motion: reduce) {
      .ask-done-ring circle, .ask-done-ring path { stroke-dashoffset: 0 !important; animation: none !important; }
      .ask-submit, .qa-from, .qa-from-go { transition: none !important; }
      .ask-submit:hover:not(:disabled), .qa-from:hover { transform: none; }
    }
    @media print { .ask-tom { display: none !important; } }

    /* ==================================================================
       THE LOCKED CARD ("Premium Content Locked"), shared/ocm-render.js
       lockedGateHTML. Scoped to [data-ocm-gate] so the "Premium Content
       Below" divider and the research papers' buttons are untouched.
       ================================================================== */
    .article-body .premium-block[data-ocm-gate] { display: block; padding: 0; margin: 12px 0 8px; text-align: center; }
    .premium-block[data-ocm-gate] .gate-card {
      position: relative; max-width: 700px; margin: 0 auto; padding: 46px 44px 38px; box-sizing: border-box;
      border-radius: 26px; overflow: hidden; isolation: isolate;
      background:
        radial-gradient(120% 60% at 50% 0%, rgba(var(--ocm-accent-rgb), 0.12), transparent 62%),
        linear-gradient(180deg, rgba(24, 26, 32, 0.94), rgba(12, 13, 17, 0.97));
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 50px 100px -50px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }
    .premium-block[data-ocm-gate] .gate-card::before {
      content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; z-index: -1;
      background: linear-gradient(90deg, transparent, rgba(var(--ocm-accent-rgb), 0.75), transparent);
    }
    .premium-block[data-ocm-gate] .gate-card::after {
      content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5;
      background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
      background-size: 18px 18px;
      -webkit-mask-image: radial-gradient(70% 55% at 50% 0%, #000, transparent);
      mask-image: radial-gradient(70% 55% at 50% 0%, #000, transparent);
    }

    .gate-emblem {
      width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center;
      background: radial-gradient(circle at 50% 35%, rgba(var(--ocm-accent-rgb), 0.24), rgba(var(--ocm-accent-rgb), 0.05) 70%);
      border: 1px solid rgba(var(--ocm-accent-rgb), 0.4);
      box-shadow: 0 0 0 8px rgba(var(--ocm-accent-rgb), 0.05), 0 0 44px rgba(var(--ocm-accent-rgb), 0.3);
    }
    .gate-emblem svg { width: 26px; height: 26px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(var(--ocm-accent-rgb), 0.5)); }
    .premium-block[data-ocm-state="unlocking"] .gate-emblem { animation: gatePulse 1.4s ease-in-out infinite; }
    @keyframes gatePulse { 0%, 100% { box-shadow: 0 0 0 8px rgba(var(--ocm-accent-rgb), 0.05), 0 0 30px rgba(var(--ocm-accent-rgb), 0.2); } 50% { box-shadow: 0 0 0 14px rgba(var(--ocm-accent-rgb), 0.08), 0 0 60px rgba(var(--ocm-accent-rgb), 0.45); } }

    .premium-block[data-ocm-gate] .premium-header { margin: 0 0 28px; padding: 0; align-items: center; }
    .premium-block[data-ocm-gate] .premium-header::after { content: none; }
    .gate-eyebrow { font-size: 0.7rem; font-weight: 800; letter-spacing: 2.2px; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
    .premium-block[data-ocm-gate] .premium-title {
      font-size: clamp(1.9rem, 3.6vw, 2.6rem); letter-spacing: -0.9px; line-height: 1.08; text-wrap: balance;
      background: linear-gradient(180deg, #ffffff 35%, #c9fadb 100%); -webkit-background-clip: text; background-clip: text;
      filter: none;
    }
    .article-body .premium-block[data-ocm-gate] .premium-subtitle {
      font-size: 1.04rem; line-height: 1.6; letter-spacing: 0; color: var(--text-sub); font-weight: 500;
      max-width: 46ch; margin: 14px auto 0; text-wrap: pretty;
    }

    /* still to come: three figures in one strip */
    .article-body .premium-block[data-ocm-gate] .gate-inside {
      margin: 0 auto 30px; padding: 0; max-width: 560px; border: none; background: none; gap: 12px;
    }
    .premium-block[data-ocm-gate] .gate-inside-label {
      display: flex; align-items: center; gap: 12px; width: 100%; justify-content: center;
      font-size: 0.66rem; letter-spacing: 1.8px; color: var(--text-dim);
    }
    .premium-block[data-ocm-gate] .gate-inside-label::before,
    .premium-block[data-ocm-gate] .gate-inside-label::after { content: ''; flex: 1; max-width: 90px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14)); }
    .premium-block[data-ocm-gate] .gate-inside-label::after { background: linear-gradient(90deg, rgba(255,255,255,0.14), transparent); }
    .article-body .premium-block[data-ocm-gate] .gate-stats {
      display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; width: 100%; align-items: stretch;
      list-style: none; margin: 0; padding: 0; gap: 0;
      border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; background: rgba(255, 255, 255, 0.025); overflow: hidden;
    }
    .article-body .premium-block[data-ocm-gate] .gate-stats li {
      display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: 16px 10px 15px;
      font-size: 0.78rem; color: var(--text-dim); font-weight: 600; line-height: 1.3;
    }
    .article-body .premium-block[data-ocm-gate] .gate-stats li + li { border-left: 1px solid rgba(255, 255, 255, 0.07); }
    .article-body .premium-block[data-ocm-gate] .gate-stats strong {
      font-size: 1.75rem !important; font-weight: 900 !important; line-height: 1.05; letter-spacing: -0.5px;
      color: #fff !important; font-variant-numeric: tabular-nums;
    }

    /* the call to action */
    .article-body .premium-block[data-ocm-gate] .premium-button-group { flex-direction: column; align-items: center; gap: 14px; max-width: 420px; margin: 0 auto; }
    .article-body .premium-block[data-ocm-gate] .premium-action-btn.primary-btn {
      width: 100%; min-width: 0; flex: none; height: 56px; padding: 0 26px; box-sizing: border-box; gap: 10px;
      border-radius: 15px; font-size: 1.05rem; font-weight: 800; letter-spacing: 0.1px; color: #04120a; text-shadow: none;
      background: linear-gradient(180deg, #64ec98 0%, #38cf74 100%);
      border: 1px solid rgba(255, 255, 255, 0.28);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 14px 34px -12px rgba(var(--ocm-accent-rgb), 0.65), 0 0 0 1px rgba(var(--ocm-accent-rgb), 0.25);
      backdrop-filter: none;
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, filter 0.3s ease;
    }
    .article-body .premium-block[data-ocm-gate] .premium-action-btn.primary-btn:hover {
      transform: translateY(-2px); filter: brightness(1.04);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 20px 40px -12px rgba(var(--ocm-accent-rgb), 0.75), 0 0 0 1px rgba(var(--ocm-accent-rgb), 0.35);
    }
    .premium-block[data-ocm-gate] .premium-action-btn.primary-btn .premium-btn-icon { stroke: #04120a; filter: none; width: 19px; height: 19px; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
    .premium-block[data-ocm-gate] .premium-action-btn.primary-btn:hover .premium-btn-icon { stroke: #04120a; transform: translateX(3px); }
    .premium-block[data-ocm-gate] .premium-action-btn.primary-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
    .article-body .premium-block[data-ocm-gate] .gate-signin-line { margin: 0; font-size: 0.92rem; color: var(--text-dim); }
    .article-body .premium-block[data-ocm-gate] a.gate-signin {
      color: var(--text-main); font-weight: 700; text-decoration: none; padding: 2px 1px;
      border-bottom: 1px solid rgba(var(--ocm-accent-rgb), 0.55); transition: color 0.2s ease, border-color 0.2s ease;
    }
    .article-body .premium-block[data-ocm-gate] a.gate-signin:hover { color: var(--accent); border-color: var(--accent); }
    .article-body .premium-block[data-ocm-gate] .gate-offer { margin: 14px 0 0; font-size: 0.88rem; font-weight: 600; color: var(--text-sub); }

    /* what Premium includes */
    .gate-perks-wrap { margin-top: 32px; padding-top: 26px; position: relative; }
    .gate-perks-wrap::before { content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent); }
    .gate-perks-label { display: block; font-size: 0.66rem; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: var(--text-dim); }
    .article-body .premium-block[data-ocm-gate] .gate-perks {
      display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%;
      list-style: none; margin: 16px 0 0; padding: 0; text-align: center;
    }
    .article-body .premium-block[data-ocm-gate] .gate-perks li {
      display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 12px 16px;
      border-radius: 16px; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.07);
      font-size: 0.8rem; color: var(--text-dim); line-height: 1.45; font-weight: 500;
      transition: border-color 0.3s ease, background 0.3s ease;
    }
    .article-body .premium-block[data-ocm-gate] .gate-perks li:hover { border-color: rgba(var(--ocm-accent-rgb), 0.25); background: rgba(var(--ocm-accent-rgb), 0.03); }
    .gate-perk-icon {
      width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none;
      background: rgba(var(--ocm-accent-rgb), 0.1); border: 1px solid rgba(var(--ocm-accent-rgb), 0.25);
    }
    .gate-perk-icon svg { width: 19px; height: 19px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .gate-perk-text { display: flex; flex-direction: column; gap: 3px; }
    .article-body .premium-block[data-ocm-gate] .gate-perk-text strong { font-size: 0.9rem !important; font-weight: 800 !important; color: #fff !important; }
    .premium-block[data-ocm-gate] .ocm-gate-proof { margin-top: 26px; }

    @media (max-width: 600px) {
      .premium-block[data-ocm-gate] .gate-card { padding: 34px 18px 26px; border-radius: 22px; }
      .gate-emblem { width: 56px; height: 56px; margin-bottom: 16px; }
      .gate-emblem svg { width: 23px; height: 23px; }
      .premium-block[data-ocm-gate] .premium-title { font-size: 1.75rem; }
      .article-body .premium-block[data-ocm-gate] .premium-subtitle { font-size: 0.96rem; }
      .article-body .premium-block[data-ocm-gate] .gate-stats li { padding: 13px 6px 12px; font-size: 0.72rem; }
      .article-body .premium-block[data-ocm-gate] .gate-stats strong { font-size: 1.4rem !important; }
      .article-body .premium-block[data-ocm-gate] .gate-perks { grid-template-columns: 1fr; gap: 8px; text-align: left; }
      .article-body .premium-block[data-ocm-gate] .gate-perks li { flex-direction: row; align-items: center; gap: 14px; padding: 13px 14px; }
      .article-body .premium-block[data-ocm-gate] .premium-action-btn.primary-btn { height: 54px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .premium-block[data-ocm-state="unlocking"] .gate-emblem { animation: none; }
      .article-body .premium-block[data-ocm-gate] .premium-action-btn.primary-btn:hover { transform: none; }
    }