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

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

    /* ===== Page header / hero strip ===== */
    .ax-pagehead {
      background: var(--ax-cream-deep);
      border-bottom: 1px solid var(--ax-line);
      padding: 56px 0 36px;
      position: relative;
      overflow: hidden;
    }
    .ax-pagehead::before {
      content: "";
      position: absolute;
      top: -100px; right: -80px;
      width: 360px; height: 360px;
      background: radial-gradient(circle, var(--ax-accent-soft) 0%, transparent 65%);
      pointer-events: none;
    }
    .ax-pagehead__inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
      position: relative;
      z-index: 2;
    }
    .ax-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ax-accent);
      margin-bottom: 14px;
    }
    .ax-eyebrow::before {
      content: "";
      width: 28px; height: 1px;
      background: var(--ax-accent);
    }
    .ax-pagehead h1 {
      font-family: var(--ax-serif);
      font-size: clamp(2rem, 4.5vw, 3.5rem);
      font-weight: 700;
      line-height: 1.05;
      letter-spacing: -0.025em;
      color: var(--ax-ink);
      margin: 0 0 12px;
    }
    .ax-pagehead h1 em {
      font-style: italic;
      color: var(--ax-accent);
      font-weight: 400;
    }
    .ax-pagehead p {
      font-size: 1.05rem;
      color: var(--ax-muted);
      max-width: 620px;
      margin: 0;
      line-height: 1.5;
    }

    /* ===== Sticky category bar ===== */
    .ax-stickynav {
      position: sticky;
      top: 64px; /* clears your fixed header */
      z-index: 40;
      background: rgba(255,255,255,.92);
      backdrop-filter: saturate(180%) blur(12px);
      -webkit-backdrop-filter: saturate(180%) blur(12px);
      border-bottom: 1px solid var(--ax-line);
    }
    .ax-stickynav__inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }
    .ax-cats {
      display: flex;
      gap: 6px;
      padding: 12px 0;
      overflow-x: auto;
      scroll-behavior: smooth;
      scrollbar-width: none;
      -ms-overflow-style: none;
      cursor: grab;
      user-select: none;
    }
    .ax-cats::-webkit-scrollbar { display: none; }
    .ax-cats.is-dragging { cursor: grabbing; }
    .ax-cat {
      display: inline-block;
      padding: 8px 16px;
      font-size: 13px;
      font-weight: 600;
      color: var(--ax-text);
      background: var(--ax-cream);
      border: 1px solid var(--ax-line);
      border-radius: 999px;
      text-decoration: none;
      white-space: nowrap;
      transition: all .15s ease;
      flex-shrink: 0;
    }
    .ax-cat:hover {
      background: #fff;
      border-color: var(--ax-ink);
      transform: translateY(-1px);
    }
    .ax-cat.is-active {
      background: var(--ax-ink);
      color: #fff;
      border-color: var(--ax-ink);
    }

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

    /* ===== Card ===== */
    .ax-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 220px;
      gap: 32px;
      padding: 28px 0;
      border-bottom: 1px solid var(--ax-line);
      animation: ax-fade-in .4s ease;
    }
    @keyframes ax-fade-in {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .ax-card:first-child { padding-top: 8px; }
    .ax-card__body { min-width: 0; }

    /* Author row */
    .ax-card__author {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }
    .ax-card__author > a {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      color: var(--ax-text);
    }
    .ax-card__avatar {
      width: 28px; height: 28px;
      border-radius: 50%;
      object-fit: cover;
      border: 1.5px solid var(--ax-line);
    }
    .ax-card__username {
      font-weight: 700;
      font-size: 14px;
      color: var(--ax-ink);
      transition: color .15s;
    }
    .ax-card__author:hover .ax-card__username { color: var(--ax-accent); }
    .ax-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px; height: 18px;
      flex-shrink: 0;
    }
    .ax-badge svg { width: 100%; height: 100%; }
    .ax-badge--verified svg { fill: #1f9eff; }
    .ax-badge--journalist {
      background: #f3e8ff;
      color: #7e22ce;
      border-radius: 50%;
      font-size: 9px;
    }

    .ax-follow-btn {
      margin-left: auto;
      padding: 4px 12px;
      font: 700 11px var(--ax-sans);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      background: var(--ax-ink);
      color: #fff;
      border: 1px solid var(--ax-ink);
      border-radius: 999px;
      cursor: pointer;
      transition: all .15s;
    }
    .ax-follow-btn:hover { background: var(--ax-accent); border-color: var(--ax-accent); }
    .ax-follow-btn.is-following {
      background: transparent;
      color: var(--ax-muted);
      border-color: var(--ax-line);
    }
    .ax-follow-btn.is-following:hover {
      color: #ef4444;
      border-color: #fca5a5;
    }

    /* Title block */
    .ax-card__link {
      text-decoration: none;
      color: inherit;
      display: block;
    }
    .ax-card__title {
      font-family: var(--ax-serif);
      font-size: 1.55rem;
      font-weight: 700;
      line-height: 1.18;
      letter-spacing: -0.018em;
      color: var(--ax-ink);
      margin: 0 0 10px;
      transition: color .2s;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .ax-card__link:hover .ax-card__title { color: var(--ax-accent); }
    .ax-card__excerpt {
      font-size: 0.95rem;
      line-height: 1.55;
      color: var(--ax-muted);
      margin: 0;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* Meta footer */
    .ax-card__meta {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 16px;
      font-size: 12px;
      color: var(--ax-muted);
      font-weight: 500;
    }
    .ax-card__meta time { font-weight: 600; }
    .ax-card__meta-dot {
      width: 3px; height: 3px;
      background: currentColor;
      border-radius: 50%;
      opacity: 0.5;
    }
    .ax-card__cat {
      display: inline-block;
      padding: 3px 10px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      background: var(--ax-cream);
      border: 1px solid var(--ax-line);
      border-radius: 999px;
      text-decoration: none;
      transition: all .15s;
    }
    .ax-card__cat:hover {
      background: var(--ax-ink);
      color: #fff !important;
      border-color: var(--ax-ink) !important;
    }
    .ax-card__bookmark {
      margin-left: auto;
      width: 36px; height: 36px;
      display: inline-flex;
      align-items: center; justify-content: center;
      background: transparent;
      border: 1px solid var(--ax-line);
      border-radius: 50%;
      color: var(--ax-muted);
      cursor: pointer;
      transition: all .15s;
    }
    .ax-card__bookmark:hover {
      border-color: var(--ax-ink);
      color: var(--ax-ink);
      background: var(--ax-cream);
    }
    .ax-card__bookmark.is-active {
      color: var(--ax-accent);
      border-color: var(--ax-accent);
      background: var(--ax-accent-soft);
    }
    .ax-card__bookmark svg { width: 18px; height: 18px; }

    /* Image */
    .ax-card__img {
      width: 220px; height: 150px;
       overflow: hidden;
      background: var(--ax-cream);
      display: block;
      position: relative;
    }
    .ax-card__img img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .4s ease;
    }
    .ax-card__link:hover .ax-card__img img,
    .ax-card__img:hover img { transform: scale(1.04); }

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

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

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

    /* Skeleton (shown briefly while loading) */
    .ax-skeleton {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 220px;
      gap: 32px;
      padding: 28px 0;
      border-bottom: 1px solid var(--ax-line);
    }
    .ax-skel-line {
      height: 14px;
      border-radius: 4px;
      background: linear-gradient(90deg, var(--ax-line-2) 25%, var(--ax-cream) 50%, var(--ax-line-2) 75%);
      background-size: 200% 100%;
      animation: ax-pulse 1.4s linear infinite;
      margin-bottom: 10px;
    }
    .ax-skel-img {
      width: 220px; height: 150px;
      border-radius: 12px;
      background: linear-gradient(90deg, var(--ax-line-2) 25%, var(--ax-cream) 50%, var(--ax-line-2) 75%);
      background-size: 200% 100%;
      animation: ax-pulse 1.4s linear infinite;
    }
    @keyframes ax-pulse {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    /* ===== Responsive ===== */
    @media (max-width: 980px) {
      .ax-wrap { grid-template-columns: 1fr; gap: 0; }
      .ax-sidebar { display: none; }
    }
    @media (max-width: 720px) {
      .ax-pagehead { padding: 40px 0 28px; }
      .ax-card {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 22px 0;
      }
      .ax-card__img,
      .ax-skel-img {
        width: 100%;
        height: 200px;
        order: -1;
      }
      .ax-card__title { font-size: 1.3rem; }
      .ax-stickynav { top: 60px; }
    }
    @media (max-width: 480px) {
      .ax-wrap { padding: 20px 18px 40px; }
      .ax-pagehead__inner,
      .ax-stickynav__inner { padding: 0 18px; }
      .ax-card__title { font-size: 1.2rem; }
    }
    @media (prefers-reduced-motion: reduce) {
      .ax-card, .ax-card__img img, .ax-cat,
      .ax-skel-line, .ax-skel-img, .ax-follow-btn,
      .ax-card__bookmark, .ax-card__cat {
        animation: none !important;
        transition: none !important;
      }
    }