:root {
      --sx-ink: #0a0e1a;
      --sx-text: #1e293b;
      --sx-muted: #64748b;
      --sx-muted-soft: #94a3b8;
      --sx-paper: #ffffff;
      --sx-cream: #fafaf7;
      --sx-canvas: #f7f5f0;
      --sx-line: #e8e4d9;
      --sx-line-2: #f1efe8;
      --sx-accent: #ff5a1f;
      --sx-accent-soft: #ffe8dc;
      --sx-press: #b91c1c;
      --sx-press-soft: #fee2e2;
      --sx-verified: #1f9eff;
      --sx-radius: 14px;
      --sx-shadow-sm: 0 1px 2px rgba(15,23,42,.05);
      --sx-shadow-md: 0 8px 24px rgba(15,23,42,.08);
      --sx-shadow-lg: 0 20px 50px rgba(15,23,42,.12);
      --sx-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
      --sx-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    .sx-page, .sx-page * { box-sizing: border-box; }
    .sx-page {
      font-family: var(--sx-sans);
      color: var(--sx-text);
      background: var(--sx-paper);
      -webkit-font-smoothing: antialiased;
    }

    /* ===== Newspaper-style masthead ===== */
    .sx-masthead {
      background: var(--sx-ink);
      color: #fff;
      padding: 60px 0 48px;
      position: relative;
      overflow: hidden;
      border-bottom: 4px double rgba(255,255,255,.15);
    }
    .sx-masthead::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--sx-accent) 50%, transparent);
    }
    .sx-masthead::after {
      content: "";
      position: absolute;
      top: -150px; left: -100px;
      width: 500px; height: 500px;
      background: radial-gradient(circle, rgba(255,90,31,.1) 0%, transparent 60%);
      pointer-events: none;
    }
    .sx-masthead__inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
      position: relative;
      z-index: 2;
    }
    .sx-masthead__top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 18px;
      margin-bottom: 28px;
      border-bottom: 1px solid rgba(255,255,255,.12);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      color: rgba(255,255,255,.5);
      font-weight: 600;
    }
    .sx-masthead__date {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .sx-masthead__date::before {
      content: "";
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--sx-accent);
      box-shadow: 0 0 0 3px rgba(255,90,31,.3);
    }
    .sx-masthead__edition { font-style: italic; letter-spacing: 0.1em; }

    .sx-masthead__title {
      font-family: var(--sx-serif);
      font-weight: 900;
      font-size: clamp(2.5rem, 6vw, 4.5rem);
      line-height: 0.95;
      letter-spacing: -0.035em;
      color: #fff;
      margin: 0 0 14px;
    }
    .sx-masthead__title em {
      font-style: italic;
      color: var(--sx-accent);
      font-weight: 400;
    }
    .sx-masthead__sub {
      font-family: var(--sx-serif);
      font-style: italic;
      font-size: 1.2rem;
      line-height: 1.4;
      color: rgba(255,255,255,.7);
      max-width: 640px;
      margin: 0;
      font-weight: 400;
    }
    .sx-masthead__pillrow {
      display: flex;
      gap: 10px;
      margin-top: 28px;
      flex-wrap: wrap;
    }
    .sx-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 6px 14px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      color: rgba(255,255,255,.85);
    }
    .sx-pill i { color: var(--sx-accent); font-size: 11px; }

    /* ===== Sticky category bar ===== */
    .sx-stickynav {
      position: sticky;
      top: 64px;
      z-index: 40;
      background: rgba(255,255,255,.95);
      backdrop-filter: saturate(180%) blur(12px);
      -webkit-backdrop-filter: saturate(180%) blur(12px);
      border-bottom: 1px solid var(--sx-line);
    }
    .sx-stickynav__inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }
    .sx-cats {
      display: flex;
      gap: 4px;
      padding: 12px 0;
      overflow-x: auto;
      scroll-behavior: smooth;
      scrollbar-width: none;
      cursor: grab;
      user-select: none;
    }
    .sx-cats::-webkit-scrollbar { display: none; }
    .sx-cats.is-dragging { cursor: grabbing; }
    .sx-cat {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      font-size: 13px;
      font-weight: 600;
      color: var(--sx-text);
      background: transparent;
      border: 1px solid transparent;
      border-radius: 6px;
      text-decoration: none;
      white-space: nowrap;
      transition: all .15s ease;
      flex-shrink: 0;
      letter-spacing: 0.01em;
    }
    .sx-cat:hover {
      color: var(--sx-ink);
      background: var(--sx-cream);
    }
    .sx-cat.is-active {
      color: var(--sx-ink);
      border-bottom: 2px solid var(--sx-accent);
      border-radius: 0;
      padding-bottom: 6px;
      font-weight: 700;
    }

    /* ===== Layout ===== */
    .sx-wrap {
      max-width: 1200px;
      margin: 0 auto;
      padding: 36px 24px 60px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: 60px;
      background: var(--sx-paper);
    }
    .sx-feed { min-width: 0; }

    /* ===== STORY CARD — newspaper-inspired ===== */
    .sx-card {
      display: grid;
      grid-template-columns: 280px minmax(0, 1fr);
      gap: 32px;
      padding: 32px 0;
      border-bottom: 1px solid var(--sx-line);
      animation: sx-fade-in .4s ease;
    }
    @keyframes sx-fade-in {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .sx-card:first-child { padding-top: 8px; }

    /* Featured image (left side, contrast with articles which has it on the right) */
    .sx-card__img {
      width: 280px; height: 200px;
      border-radius: 4px;
      overflow: hidden;
      background: var(--sx-cream);
      display: block;
      position: relative;
    }
    .sx-card__img img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .5s ease;
      filter: saturate(1.05);
    }
    .sx-card__img:hover img { transform: scale(1.04); }
    /* Newsroom-style "EXCLUSIVE" / category overlay */
    .sx-card__cat-overlay {
      position: absolute;
      top: 12px; left: 12px;
      background: var(--sx-press);
      color: #fff;
      font-family: var(--sx-sans);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 3px;
      box-shadow: var(--sx-shadow-sm);
    }

    .sx-card__body { min-width: 0; display: flex; flex-direction: column; }

    /* Topic kicker (above headline — magazine convention) */
    .sx-card__kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      margin-bottom: 12px;
    }
    .sx-card__kicker::after {
      content: "";
      flex: 0 0 24px;
      height: 1px;
      background: currentColor;
      opacity: .5;
    }

    /* Headline */
    .sx-card__link {
      text-decoration: none;
      color: inherit;
      display: block;
    }
    .sx-card__title {
      font-family: var(--sx-serif);
      font-size: 1.85rem;
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -0.022em;
      color: var(--sx-ink);
      margin: 0 0 10px;
      transition: color .2s;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .sx-card__link:hover .sx-card__title { color: var(--sx-press); }

    /* Lede / dek */
    .sx-card__lede {
      font-family: var(--sx-serif);
      font-size: 1.02rem;
      line-height: 1.55;
      color: var(--sx-text);
      margin: 0 0 14px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* Byline row — journalist-style "By Username · Date · Read time" */
    .sx-card__byline {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      font-size: 13px;
      color: var(--sx-muted);
      margin-top: auto;
      padding-top: 12px;
      border-top: 1px solid var(--sx-line-2);
    }
    .sx-card__byline a {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      text-decoration: none;
      color: var(--sx-text);
      font-weight: 600;
      transition: color .15s;
    }
    .sx-card__byline a:hover { color: var(--sx-press); }
    .sx-card__avatar {
      width: 24px; height: 24px;
      border-radius: 50%;
      object-fit: cover;
      border: 1px solid var(--sx-line);
    }
    .sx-card__by-label {
      color: var(--sx-muted-soft);
      font-style: italic;
      font-family: var(--sx-serif);
      font-size: 12px;
    }
    .sx-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px; height: 16px;
      flex-shrink: 0;
    }
    .sx-badge svg { width: 100%; height: 100%; }
    .sx-badge--verified svg { fill: var(--sx-verified); }
    .sx-badge--journalist {
      background: #f3e8ff;
      color: #7e22ce;
      border-radius: 50%;
      font-size: 9px;
    }
    .sx-card__byline-sep {
      width: 3px; height: 3px;
      background: var(--sx-muted-soft);
      border-radius: 50%;
      opacity: .6;
    }

    .sx-card__bookmark {
      margin-left: auto;
      width: 32px; height: 32px;
      display: inline-flex;
      align-items: center; justify-content: center;
      background: transparent;
      border: 1px solid var(--sx-line);
      border-radius: 50%;
      color: var(--sx-muted);
      cursor: pointer;
      transition: all .15s;
    }
    .sx-card__bookmark:hover {
      border-color: var(--sx-ink);
      color: var(--sx-ink);
      background: var(--sx-cream);
    }
    .sx-card__bookmark.is-active {
      color: var(--sx-press);
      border-color: var(--sx-press);
      background: var(--sx-press-soft);
    }
    .sx-card__bookmark svg { width: 16px; height: 16px; }

    /* AdSense card */
    .sx-ad-card {
      text-align: center;
      background: var(--sx-cream);
      margin: 12px 0;
      padding: 28px 20px;
      border-radius: 8px;
      border: 1px dashed var(--sx-line);
    }
    .sx-ad-label {
      display: block;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--sx-muted-soft);
      margin-bottom: 12px;
    }

    /* Sidebar */
    .sx-sidebar {
      position: sticky;
      top: 140px;
      align-self: start;
      max-height: calc(100vh - 160px);
      overflow-y: auto;
      scrollbar-width: thin;
    }
    .sx-sidebar__label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--sx-press);
      margin-bottom: 18px;
      padding-bottom: 12px;
      border-bottom: 2px solid var(--sx-press);
    }

    /* Loader / end */
    .sx-loader {
      text-align: center;
      padding: 40px 16px;
      color: var(--sx-muted);
      font-size: 14px;
      font-weight: 600;
    }
    .sx-loader i {
      font-size: 22px;
      color: var(--sx-press);
    }
    .sx-end {
      text-align: center;
      padding: 40px 16px;
      color: var(--sx-muted);
      font-family: var(--sx-serif);
      font-style: italic;
      font-size: 1rem;
    }

    /* Empty state */
    .sx-empty {
      padding: 60px 24px;
      text-align: center;
    }
    .sx-empty h3 {
      font-family: var(--sx-serif);
      font-size: 1.4rem;
      color: var(--sx-ink);
      margin: 0 0 8px;
    }
    .sx-empty p { color: var(--sx-muted); }

    /* ===== Responsive ===== */
    @media (max-width: 980px) {
      .sx-wrap { grid-template-columns: 1fr; gap: 0; }
      .sx-sidebar { display: none; }
    }
    @media (max-width: 720px) {
      .sx-masthead { padding: 40px 0 32px; }
      .sx-card {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 24px 0;
      }
      .sx-card__img {
        width: 100%; height: 220px;
        order: -1;
      }
      .sx-card__title { font-size: 1.4rem; }
      .sx-card__lede { font-size: 0.95rem; -webkit-line-clamp: 2; }
      .sx-stickynav { top: 60px; }
    }
    @media (max-width: 480px) {
      .sx-wrap { padding: 24px 18px 40px; }
      .sx-masthead__inner,
      .sx-stickynav__inner { padding: 0 18px; }
      .sx-masthead__top { font-size: 10px; flex-direction: column; gap: 6px; align-items: flex-start; }
      .sx-card__title { font-size: 1.25rem; -webkit-line-clamp: 3; }
    }
    @media (prefers-reduced-motion: reduce) {
      .sx-card, .sx-card__img img, .sx-cat,
      .sx-card__bookmark, .sx-card__title {
        animation: none !important;
        transition: none !important;
      }
    }