/* ── HERO ─────────────────────────────────────────────── */
  .lore-hero {
    position: relative; min-height: 56vh;
    display: flex; align-items: stretch;
    overflow: hidden; border-bottom: 1px solid var(--border);
  }
  .lore-hero-bg {
    position: absolute; inset: -20px;
    background: radial-gradient(ellipse 90% 60% at 50% 20%, rgba(147,115,65,0.09), transparent 65%),
                radial-gradient(ellipse 60% 40% at 20% 90%, rgba(60,30,20,0.20), transparent 70%),
                radial-gradient(ellipse 70% 50% at 80% 70%, rgba(40,30,50,0.13), transparent 70%);
    animation: loSlowZoom 24s ease-in-out infinite alternate;
  }
  @keyframes loSlowZoom { from { transform: scale(1); } to { transform: scale(1.055); } }
  .lore-hero-veil {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(10,10,12,0.5) 0%, transparent 30%, transparent 62%, rgba(10,10,12,1) 100%);
  }
  .lore-hero-divider {
    position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
    background: linear-gradient(to bottom, transparent 5%, var(--border) 30%, var(--border) 70%, transparent 95%);
    pointer-events: none; z-index: 3;
  }
  .lore-scan {
    position: absolute; left: 0; right: 0; height: 1px;
    background: linear-gradient(to right, transparent, rgba(196,185,152,0.28), transparent);
    top: 50%; z-index: 3; pointer-events: none;
    animation: loScan 2s 0.2s cubic-bezier(0.4,0,0.2,1) both;
  }
  @keyframes loScan {
    from { transform: translateY(-30vh); opacity: 0; }
    20%  { opacity: 1; }
    to   { transform: translateY(30vh); opacity: 0; }
  }
  /* Hero search bar — primary discovery entry point in the hero */
  .lh-hero-search {
    position: relative; margin-bottom: 32px; max-width: 420px;
    border: 1px solid rgba(196,185,152,0.22);
    background: rgba(10,10,12,0.55); backdrop-filter: blur(8px);
    display: flex; align-items: center;
    transition: border-color 0.25s;
  }
  .lh-hero-search:focus-within { border-color: rgba(196,185,152,0.5); }
  .lh-hero-search-icon {
    padding: 0 12px; color: var(--gold-dim); flex-shrink: 0; pointer-events: none;
    display: flex; align-items: center;
  }
  .lh-hero-search-input {
    flex: 1; background: none; border: none; outline: none;
    padding: 12px 12px 12px 0;
    font-family: 'Cinzel', serif; font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--gold-bright);
  }
  .lh-hero-search-input::placeholder { color: var(--gold-dim); letter-spacing: 0.2em; font-size: 9px; }
  .lh-hero-search-kbd {
    padding: 0 12px; color: var(--text-muted); flex-shrink: 0;
    font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 0.1em;
    white-space: nowrap;
  }
  /* Two-column inner layout */
  .lore-hero-inner {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1fr 1fr;
    width: 100%; max-width: 1440px; margin: 0 auto;
    padding: 0 56px;
    gap: 0;
  }
  .lore-hero-left {
    display: flex; flex-direction: column; justify-content: center;
    padding: 72px 56px 72px 0;
    animation: loFadeUp 0.8s cubic-bezier(0.2,0,0.2,1) both;
  }
  .lh-eyebrow {
    display: flex; align-items: center; gap: 18px;
    margin-bottom: 24px;
  }
  .lh-eyebrow::before {
    content: ''; flex-shrink: 0; height: 1px; width: 28px; background: var(--gold-dim); opacity: 0.7;
  }
  .lh-eyebrow span { font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.52em; text-transform: uppercase; color: var(--gold); }
  .lore-hero-left h1 {
    font-family: 'Cinzel', serif;
    font-size: clamp(52px, 7vw, 96px);
    font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--gold-bright); line-height: 0.92;
    text-shadow: 0 0 70px rgba(196,185,152,0.15);
    margin-bottom: 20px;
  }
  .lore-hero-left h1 em { font-style: italic; font-weight: 400; color: var(--gold); }
  .lh-sub {
    font-family: 'Inter', sans-serif; font-size: 14px;
    font-weight: 300; font-style: italic;
    color: var(--text-sub); letter-spacing: 0.04em; line-height: 1.7;
    max-width: 400px; margin-bottom: 30px;
  }
  .lh-count-strip {
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  }
  .lh-count-num {
    font-family: 'JetBrains Mono', monospace; font-size: 24px; font-weight: 300;
    color: var(--gold-light); letter-spacing: -0.01em; line-height: 1;
  }
  .lh-count-label {
    font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 0.4em; text-transform: uppercase;
    color: var(--text-muted);
  }
  .lh-count-sep { width: 1px; height: 28px; background: var(--border); }
  /* Featured entry panel — right column */
  .lore-hero-right {
    display: flex; flex-direction: column; justify-content: center;
    padding: 72px 0 72px 56px;
    animation: loFadeUp 0.8s 0.18s cubic-bezier(0.2,0,0.2,1) both;
    position: relative;
    border-left: 1px solid color-mix(in srgb, var(--lhc, var(--gold-dim)) 20%, var(--border));
  }
  .lh-featured-eyebrow {
    display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
  }
  .lh-featured-eyebrow::before {
    content: ''; width: 20px; height: 1px; background: var(--gold-dim); opacity: 0.5; flex-shrink: 0;
  }
  .lh-featured-eyebrow span {
    font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 0.36em; text-transform: uppercase;
    color: var(--text-muted);
  }
  .lh-feat-cat {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
    padding: 4px 12px 4px 6px;
    border: 1px solid color-mix(in srgb, var(--lhc, var(--gold-dim)) 40%, transparent);
    background: color-mix(in srgb, var(--lhc, var(--gold-dim)) 7%, transparent);
  }
  .lh-feat-cat-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--lhc, var(--gold-dim)); flex-shrink: 0; box-shadow: 0 0 7px var(--lhc, var(--gold-dim)); }
  .lh-feat-cat-label { font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 0.44em; text-transform: uppercase; color: var(--lhc, var(--gold-light)); }
  .lh-feat-title {
    font-family: 'Cinzel', serif; font-size: clamp(22px, 3.2vw, 40px);
    font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--gold-bright); line-height: 1.05; margin-bottom: 14px;
    text-shadow: 0 2px 40px rgba(0,0,0,0.5);
  }
  .lh-feat-title em { font-style: italic; font-weight: 400; color: var(--gold); }
  .lh-feat-excerpt {
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 300; font-style: italic;
    color: var(--text-sub); line-height: 1.75; max-width: 480px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    margin-bottom: 14px;
  }
  .lh-feat-time {
    font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: 20px;
  }
  .lh-feat-cta {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--lhc, var(--gold-dim)); text-decoration: none;
    padding-bottom: 2px; border-bottom: 1px solid color-mix(in srgb, var(--lhc, var(--gold-dim)) 35%, transparent);
    transition: color 0.2s, border-color 0.2s;
  }
  .lh-feat-cta:hover { color: var(--gold-bright); border-color: var(--gold-bright); }
  .lh-feat-cta svg { transition: transform 0.22s; }
  .lh-feat-cta:hover svg { transform: translateX(4px); }
  /* category color tokens for hero */
  .lore-hero-right[data-cat="Artifact"]   { --lhc: var(--gold-light); }
  .lore-hero-right[data-cat="Power"]      { --lhc: var(--accent-purple); }
  .lore-hero-right[data-cat="Phenomenon"] { --lhc: var(--accent-moss); }
  .lore-hero-right[data-cat="History"]    { --lhc: var(--nation-frysia); }
  .lore-hero-right[data-cat="Location"]   { --lhc: var(--nation-britannia); }
  /* ambient glow behind the featured panel */
  .lore-hero-right::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 80% 80% at 80% 50%, color-mix(in srgb, var(--lhc, var(--gold-dim)) 9%, transparent), transparent 68%);
  }
  @keyframes loFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes loLineGrow { from { width: 0; opacity: 0; } to { width: 40px; opacity: 1; } }
  /* mobile hero — stack featured panel below instead of hiding it */
  @media (max-width: 860px) {
    .lore-hero { min-height: auto; }
    .lore-hero-divider { display: none; }
    .lore-hero-inner { grid-template-columns: 1fr; padding: 0 20px; }
    .lore-hero-left { padding: 56px 0 32px; }
    .lore-hero-right {
      display: flex;
      border-left: none;
      border-top: 1px solid color-mix(in srgb, var(--lhc, var(--gold-dim)) 20%, var(--border));
      padding: 32px 0 40px;
      animation: none;
    }
  }

  /* ── CATEGORY PORTALS ─────────────────────────────────── */
  .codex-portals {
    max-width: 1440px; margin: 0 auto; padding: 0 56px;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 2px; margin-bottom: 0; padding-top: 2px;
    animation: loFadeUp 0.8s 0.15s cubic-bezier(0.2,0,0.2,1) both;
  }
  .cp-tile {
    position: relative; padding: 26px 24px 22px;
    background: var(--bg2); cursor: pointer;
    border: none; text-align: left; color: inherit;
    border-left: 2px solid var(--tc, var(--gold-dim));
    transition: background 0.25s, border-left-color 0.22s, transform 0.2s;
    overflow: hidden; min-height: 192px;
    display: flex; flex-direction: column;
  }
  /* Large decorative initial letter — atmospheric texture */
  .cp-tile::before {
    content: attr(data-initial);
    position: absolute; right: -6px; bottom: -16px;
    font-family: 'Cinzel', serif; font-size: 108px; font-weight: 700; line-height: 1;
    color: color-mix(in srgb, var(--tc, var(--gold-dim)) 8%, transparent);
    pointer-events: none; user-select: none;
    transition: color 0.38s, transform 0.48s cubic-bezier(0.2,0,0.2,1);
  }
  .cp-tile:hover::before {
    color: color-mix(in srgb, var(--tc, var(--gold-dim)) 17%, transparent);
    transform: translateY(-6px) scale(1.05);
  }
  .cp-tile.active::before { color: color-mix(in srgb, var(--tc, var(--gold-dim)) 12%, transparent); }
  .cp-tile::after {
    content: ''; position: absolute;
    bottom: 0; left: 0; right: 0; height: 2px;
    background: var(--tc, var(--gold-dim));
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.38s cubic-bezier(0.2,0,0.2,1);
  }
  .cp-tile:hover { background: var(--bg3); transform: translateY(-2px); }
  .cp-tile:hover::after { transform: scaleX(1); }
  .cp-tile.active { background: var(--bg3); border-left-color: var(--tc, var(--gold-light)); }
  .cp-tile.active::after { transform: scaleX(1); }
  /* Large entry count number */
  .cpt-bignum {
    font-family: 'JetBrains Mono', monospace;
    font-size: 40px; font-weight: 300; line-height: 1;
    letter-spacing: -0.02em; margin-bottom: 11px;
    color: color-mix(in srgb, var(--tc, var(--gold-dim)) 55%, transparent);
    transition: color 0.25s; position: relative; z-index: 1;
  }
  .cp-tile:hover .cpt-bignum,
  .cp-tile.active .cpt-bignum {
    color: color-mix(in srgb, var(--tc, var(--gold-dim)) 82%, transparent);
  }
  .cpt-name {
    font-family: 'Cinzel', serif; font-size: 14px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--tc, var(--gold-light));
    transition: color 0.2s; position: relative; z-index: 1;
  }
  .cp-tile:hover .cpt-name { color: var(--gold-bright); }
  .cp-tile.active .cpt-name { color: var(--gold-bright); }
  .cpt-count {
    font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--text-muted); margin-top: 3px;
    position: relative; z-index: 1;
  }
  .cpt-desc {
    font-family: 'Inter', sans-serif; font-size: 11px; font-style: italic;
    color: var(--text-sub); opacity: 0.92; margin-top: 10px;
    line-height: 1.6; letter-spacing: 0.01em;
    position: relative; z-index: 1; flex: 1;
  }
  .cpt-recent {
    list-style: none; margin: 10px 0 0; padding: 0;
    text-align: left; opacity: 0;
    max-height: 0; overflow: hidden;
    transition: opacity 0.3s 0.1s, max-height 0.4s var(--ease-out, cubic-bezier(0.2,0,0.2,1));
  }
  .cp-tile:hover .cpt-recent,
  .cp-tile:focus-visible .cpt-recent,
  .cp-tile[aria-selected="true"] .cpt-recent {
    opacity: 1; max-height: 120px;
  }
  .cpt-recent-item {
    font-family: 'Inter', sans-serif; font-size: 10px;
    color: var(--text-sub); line-height: 1.5;
    padding: 3px 0; border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .cpt-recent-item:first-child { border-top: none; }
  .cpt-recent-item em { font-style: italic; color: var(--gold); }

  /* portal color tokens */
  .cp-tile[data-cat="Artifact"]   { --tc: var(--gold-light); }
  .cp-tile[data-cat="Power"]      { --tc: var(--accent-purple); }
  .cp-tile[data-cat="Phenomenon"] { --tc: var(--accent-moss); }
  .cp-tile[data-cat="History"]    { --tc: var(--nation-frysia); }
  .cp-tile[data-cat="Location"]   { --tc: var(--nation-britannia); }

  /* Category color token for the banner (--ccat) */
  #codexCatBanner[data-active-cat="Artifact"]   { --ccat: var(--gold-light); }
  #codexCatBanner[data-active-cat="Power"]      { --ccat: var(--accent-purple); }
  #codexCatBanner[data-active-cat="Phenomenon"] { --ccat: var(--accent-moss); }
  #codexCatBanner[data-active-cat="History"]    { --ccat: var(--nation-frysia); }
  #codexCatBanner[data-active-cat="Location"]   { --ccat: var(--nation-britannia); }

  /* ── CATEGORY PORTAL VISUAL ZONE ────────────────────── */
  .cpt-visual {
    margin: -26px -24px 22px;
    height: 120px;
    position: relative; overflow: hidden; flex-shrink: 0;
    background: var(--bg);
    border-bottom: 1px solid rgba(74,58,30,0.14);
    transition: opacity 0.28s;
  }
  .cp-tile[data-cat="Artifact"]   .cpt-visual { background: radial-gradient(ellipse 80% 120% at 84% 50%, color-mix(in srgb, var(--gold-light) 18%, transparent), transparent 62%), linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--gold-dim) 28%, var(--bg))); }
  .cp-tile[data-cat="Power"]      .cpt-visual { background: radial-gradient(ellipse 80% 120% at 84% 50%, color-mix(in srgb, var(--accent-purple) 16%, transparent), transparent 62%), linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--accent-purple) 14%, var(--bg))); }
  .cp-tile[data-cat="Phenomenon"] .cpt-visual { background: radial-gradient(ellipse 80% 120% at 84% 50%, color-mix(in srgb, var(--accent-moss) 16%, transparent), transparent 62%), linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--accent-moss) 14%, var(--bg))); }
  .cp-tile[data-cat="History"]    .cpt-visual { background: radial-gradient(ellipse 80% 120% at 84% 50%, color-mix(in srgb, var(--nation-frysia) 16%, transparent), transparent 62%), linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--nation-frysia) 14%, var(--bg))); }
  .cp-tile[data-cat="Location"]   .cpt-visual { background: radial-gradient(ellipse 80% 120% at 84% 50%, color-mix(in srgb, var(--nation-britannia) 16%, transparent), transparent 62%), linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--nation-britannia) 14%, var(--bg))); }
  /* Subtle grid texture fades left-to-right (default — overridden per category) */
  .cpt-visual::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
      linear-gradient(color-mix(in srgb, var(--tc, var(--gold-dim)) 6%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, var(--tc, var(--gold-dim)) 6%, transparent) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(115deg, rgba(0,0,0,0.85) 0%, transparent 55%);
    mask-image: linear-gradient(115deg, rgba(0,0,0,0.85) 0%, transparent 55%);
  }
  /* Per-category portal texture — signals the nature of each discipline */
  .cp-tile[data-cat="Artifact"] .cpt-visual::before {
    background-image: repeating-linear-gradient(
      -45deg,
      color-mix(in srgb, var(--gold-light) 9%, transparent),
      color-mix(in srgb, var(--gold-light) 9%, transparent) 1px,
      transparent 1px, transparent 14px
    );
    background-size: auto;
  }
  .cp-tile[data-cat="Power"] .cpt-visual::before {
    background-image: radial-gradient(circle, color-mix(in srgb, var(--accent-purple) 22%, transparent) 1.5px, transparent 1.5px);
    background-size: 14px 14px;
  }
  .cp-tile[data-cat="Phenomenon"] .cpt-visual::before {
    background-image: repeating-linear-gradient(
      70deg,
      color-mix(in srgb, var(--accent-moss) 8%, transparent),
      color-mix(in srgb, var(--accent-moss) 8%, transparent) 1px,
      transparent 1px, transparent 20px
    );
    background-size: auto;
  }
  .cp-tile[data-cat="History"] .cpt-visual::before {
    background-image: linear-gradient(
      color-mix(in srgb, var(--nation-frysia) 10%, transparent) 1px, transparent 1px
    );
    background-size: 100% 12px;
  }
  .cp-tile[data-cat="Location"] .cpt-visual::before {
    background-image:
      linear-gradient(color-mix(in srgb, var(--nation-britannia) 6%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, var(--nation-britannia) 6%, transparent) 1px, transparent 1px),
      linear-gradient(-45deg, color-mix(in srgb, var(--nation-britannia) 3%, transparent) 1px, transparent 1px);
    background-size: 20px 20px, 20px 20px, 14px 14px;
  }

  /* Category-specific portal atmospheric headers */
  .cp-tile[data-cat="Artifact"]   .cpt-visual {
    background: linear-gradient(135deg, rgba(30,22,8,0.8) 0%, rgba(50,38,14,0.6) 40%, rgba(20,15,5,0.9) 100%),
                radial-gradient(ellipse 80% 80% at 80% 20%, rgba(196,155,60,0.22), transparent 65%);
  }
  .cp-tile[data-cat="Power"]      .cpt-visual {
    background: linear-gradient(135deg, rgba(18,10,30,0.8) 0%, rgba(40,20,60,0.5) 40%, rgba(10,5,20,0.9) 100%),
                radial-gradient(ellipse 80% 80% at 80% 20%, rgba(130,80,200,0.22), transparent 65%);
  }
  .cp-tile[data-cat="Phenomenon"] .cpt-visual {
    background: linear-gradient(135deg, rgba(8,22,12,0.8) 0%, rgba(20,50,24,0.5) 40%, rgba(5,15,8,0.9) 100%),
                radial-gradient(ellipse 80% 80% at 80% 20%, rgba(60,160,90,0.22), transparent 65%);
  }
  .cp-tile[data-cat="History"]    .cpt-visual {
    background: linear-gradient(135deg, rgba(28,12,8,0.8) 0%, rgba(60,24,14,0.5) 40%, rgba(18,6,4,0.9) 100%),
                radial-gradient(ellipse 80% 80% at 80% 20%, rgba(220,100,80,0.22), transparent 65%);
  }
  .cp-tile[data-cat="Location"]   .cpt-visual {
    background: linear-gradient(135deg, rgba(6,16,26,0.8) 0%, rgba(14,36,56,0.5) 40%, rgba(4,10,18,0.9) 100%),
                radial-gradient(ellipse 80% 80% at 80% 20%, rgba(80,160,220,0.22), transparent 65%);
  }
  /* Portal icons become accent-colored on active/hover */
  .cp-tile:hover .cpt-icon svg,
  .cp-tile.active .cpt-icon svg {
    stroke: var(--tc, var(--gold-light));
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--tc, var(--gold-light)) 40%, transparent));
    transition: stroke 0.25s, filter 0.25s;
  }
  .cpt-visual .cpt-icon {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 44px; height: 44px; opacity: 0.32;
    stroke: var(--gold-bright);
    transition: opacity 0.3s, transform 0.4s var(--ease-out, ease);
    pointer-events: none;
  }
  .cp-tile:hover .cpt-visual .cpt-icon { opacity: 0.58; transform: translate(-50%, -50%) scale(1.12); }
  .cp-tile[data-cat="Artifact"] .cpt-visual .cpt-icon { stroke: var(--gold-bright); }
  .cp-tile[data-cat="Power"]    .cpt-visual .cpt-icon { stroke: var(--accent-purple); opacity: 0.36; }
  .cp-tile[data-cat="Phenomenon"] .cpt-visual .cpt-icon { stroke: var(--accent-moss); opacity: 0.34; }
  .cp-tile[data-cat="History"] .cpt-visual .cpt-icon { stroke: var(--nation-frysia); opacity: 0.34; }
  .cp-tile[data-cat="Location"] .cpt-visual .cpt-icon { stroke: var(--nation-britannia); opacity: 0.34; }

  /* ── CENTRAL ENTRIES STRIP ─────────────────────────────── */
  .codex-key-strip {
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--gold-dim) 4%, var(--bg));
    padding: 36px 0;
  }
  .cks-inner {
    max-width: 1440px; margin: 0 auto; padding: 0 56px;
    display: grid; grid-template-columns: 200px 1fr;
    gap: 44px; align-items: start;
  }
  .cks-head { padding-top: 6px; }
  .cks-head-label {
    font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.44em; text-transform: uppercase;
    color: var(--gold); display: block; margin-bottom: 10px;
    display: flex; align-items: center; gap: 12px;
  }
  .cks-head-label::before {
    content: ''; flex-shrink: 0; height: 1px; width: 18px; background: var(--gold-dim); opacity: 0.6;
  }
  .cks-head-desc {
    font-family: 'Inter', sans-serif; font-size: 11px; font-style: italic;
    color: var(--text-muted); line-height: 1.7; display: block;
  }
  .cks-cards {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 3px;
  }
  .cks-card {
    background: var(--bg2); padding: 22px 24px 20px;
    text-decoration: none; display: flex; flex-direction: column;
    position: relative; overflow: hidden;
    border-top: 1px solid var(--border);
    transition: background 0.25s, box-shadow 0.35s;
  }
  .cks-card[data-cat="Artifact"]   { --cc: var(--gold-light); }
  .cks-card[data-cat="Power"]      { --cc: var(--accent-purple); }
  .cks-card[data-cat="Phenomenon"] { --cc: var(--accent-moss); }
  .cks-card[data-cat="History"]    { --cc: var(--nation-frysia); }
  .cks-card[data-cat="Location"]   { --cc: var(--nation-britannia); }
  .cks-card:hover { background: var(--bg3); box-shadow: 0 4px 32px rgba(0,0,0,0.22); }
  /* subtle radial glow on hover */
  .cks-card::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 90% 130% at 100% 0%, color-mix(in srgb, var(--cc, var(--gold-dim)) 9%, transparent), transparent 65%);
    opacity: 0; transition: opacity 0.35s;
  }
  .cks-card:hover::before { opacity: 1; }
  .cks-card-top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 10px; margin-bottom: 14px;
  }
  .cks-cat-pill {
    font-family: 'Cinzel', serif; font-size: 7.5px; letter-spacing: 0.36em; text-transform: uppercase;
    color: var(--cc, var(--gold-light));
    border: 1px solid color-mix(in srgb, var(--cc, var(--gold-dim)) 35%, transparent);
    padding: 3px 10px;
    background: color-mix(in srgb, var(--cc, var(--gold-dim)) 7%, transparent);
    flex-shrink: 0;
  }
  .cks-conn {
    font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 300;
    color: color-mix(in srgb, var(--cc, var(--gold-dim)) 45%, transparent);
    letter-spacing: -0.02em; line-height: 1; flex-shrink: 0;
    transition: color 0.25s;
  }
  .cks-card:hover .cks-conn { color: color-mix(in srgb, var(--cc, var(--gold-dim)) 70%, transparent); }
  .cks-title {
    font-family: 'Cinzel', serif; font-size: 15px; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--gold-bright); line-height: 1.1; margin-bottom: 10px;
  }
  .cks-title em { font-style: italic; font-weight: 400; color: var(--gold); }
  .cks-excerpt {
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 300; font-style: italic;
    color: var(--text-muted); line-height: 1.7;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-bottom: 16px; flex: 1;
  }
  .cks-read {
    font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--text-muted); margin-top: auto;
    display: inline-flex; align-items: center; gap: 7px;
    transition: color 0.2s;
  }
  .cks-read svg { opacity: 0; transform: translateX(-4px); transition: opacity 0.22s, transform 0.22s; }
  .cks-card:hover .cks-read { color: var(--cc, var(--gold-light)); }
  .cks-card:hover .cks-read svg { opacity: 1; transform: none; }
  @media (max-width: 900px) {
    .cks-inner { grid-template-columns: 1fr; gap: 20px; padding: 0 20px; }
    .cks-cards { grid-template-columns: 1fr; }
  }
  @media (max-width: 520px) {
    .cks-inner { padding: 0 16px; }
  }

  /* ── CONTENT SHELL ────────────────────────────────────── */
  .codex-shell {
    max-width: 1440px; margin: 0 auto; padding: 0 56px;
    display: grid; grid-template-columns: 240px 1fr;
    gap: 56px; align-items: start;
  }

  /* ── SIDEBAR ──────────────────────────────────────────── */
  .codex-sidebar {
    position: sticky; top: 72px;
    padding: 32px 0;
    animation: loFadeUp 0.9s 0.1s cubic-bezier(0.2,0,0.2,1) both;
  }
  .cs-eyebrow { font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.44em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
  .cs-count { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-sub); letter-spacing: 0.06em; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
  .cs-count strong { color: var(--gold-bright); font-weight: 400; }
  .cs-section-label { font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; margin-top: 4px; }

  /* search */
  .cs-search-wrap { position: relative; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
  .cs-search-input {
    width: 100%; background: var(--bg);
    border: 1px solid var(--border);
    padding: 10px 32px 10px 12px;
    font-family: 'Cinzel', serif; font-size: 10px;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--gold-bright); outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
  }
  .cs-search-input::placeholder { color: var(--gold-dim); letter-spacing: 0.16em; }
  .cs-search-input:focus { border-color: rgba(196,185,152,0.4); }
  .cs-search-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--gold-dim); pointer-events: none; }
  .cs-search-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 2px; display: none; transition: color 0.2s; }
  .cs-search-clear:hover { color: var(--gold-light); }
  .cs-search-clear.visible { display: block; }
  .cs-search-clear.visible + .cs-search-icon { display: none; }

  /* category filter chips (compact row, replaces the old .cs-btn column) */
  .cs-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--border); }
  .cs-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px;
    font-family: 'Cinzel', serif; font-size: 8.5px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--text-muted); background: var(--bg); border: 1px solid var(--border);
    cursor: pointer; transition: color 0.2s, background 0.2s, border-color 0.2s;
  }
  .cs-chip:hover { color: var(--gold-light); border-color: rgba(196,185,152,0.28); }
  .cs-chip.active { color: var(--gold-bright); background: var(--bg2); border-color: var(--ccc, var(--gold-dim)); }
  .cs-chip-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ccc, var(--gold-dim)); opacity: 0.5; flex-shrink: 0; transition: opacity 0.2s; }
  .cs-chip.active .cs-chip-dot { opacity: 1; }
  .cs-chip[data-cat="all"]         { --ccc: var(--gold-light); }
  .cs-chip[data-cat="Artifact"]    { --ccc: var(--gold-light); }
  .cs-chip[data-cat="Power"]       { --ccc: var(--accent-purple); }
  .cs-chip[data-cat="Phenomenon"]  { --ccc: var(--accent-moss); }
  .cs-chip[data-cat="History"]     { --ccc: var(--nation-frysia); }
  .cs-chip[data-cat="Location"]    { --ccc: var(--nation-britannia); }
  .cs-chip-n { font-family: 'JetBrains Mono', monospace; font-size: 7.5px; color: var(--gold-dim); }

  .cs-back { font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); text-decoration: none; display: flex; align-items: center; gap: 8px; transition: color 0.2s; }
  .cs-back:hover { color: var(--gold-light); }

  /* Reading stats */
  .cs-stats { margin-bottom: 20px; padding: 16px 14px; background: color-mix(in srgb, var(--gold-dim) 8%, var(--bg)); border: 1px solid var(--border); border-left: 2px solid var(--gold-dim); }
  .cs-stat-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px dashed rgba(74,58,30,0.35); }
  .cs-stat-row:last-child { border-bottom: none; padding-bottom: 0; }
  .cs-stat-label { font-family: 'Cinzel', serif; font-size: 7.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-muted); }
  .cs-stat-val { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--gold-bright); letter-spacing: 0.04em; }

  /* Explore links */
  .cs-explore { display: flex; flex-direction: column; gap: 1px; }
  .cs-explore-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg2); font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-sub); text-decoration: none; border-left: 2px solid transparent; transition: color 0.2s, background 0.2s, border-left-color 0.2s; }
  .cs-explore-link:hover { color: var(--gold-light); background: var(--bg3); border-left-color: var(--gold-dim); }
  .cs-explore-link svg { flex-shrink: 0; opacity: 0.6; }
  button.cs-explore-link { border: none; width: 100%; text-align: left; cursor: pointer; border-left: 2px solid transparent; }
  .cs-discover-btn:hover { color: var(--gold); border-left-color: var(--gold-dim); }
  .cs-discover-btn:hover svg { opacity: 1; }

  /* ── CATEGORY ACTIVE BANNER ───────────────────────────── */
  .codex-cat-banner {
    display: none;
    min-height: 80px;
    padding: 28px 32px 22px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
    background:
      radial-gradient(ellipse 70% 160% at 0% 50%, color-mix(in srgb, var(--ccat, var(--gold-dim)) 12%, transparent), transparent 65%),
      color-mix(in srgb, var(--ccat, var(--gold-dim)) 5%, var(--bg));
    position: relative;
    overflow: hidden;
    flex-direction: column;
    gap: 6px;
    animation: ccbIn 0.35s cubic-bezier(0.2,0,0.2,1) both;
  }
  @keyframes ccbIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
  .codex-cat-banner::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--ccat, var(--gold-dim));
    box-shadow: 0 0 20px color-mix(in srgb, var(--ccat, var(--gold-dim)) 55%, transparent);
  }
  .codex-cat-banner::after {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background-image: repeating-linear-gradient(
      -45deg,
      color-mix(in srgb, var(--ccat, var(--gold-dim)) 3%, transparent),
      color-mix(in srgb, var(--ccat, var(--gold-dim)) 3%, transparent) 1px,
      transparent 1px, transparent 22px
    );
    -webkit-mask-image: linear-gradient(to right, transparent, rgba(0,0,0,0.5) 40%, transparent);
    mask-image: linear-gradient(to right, transparent, rgba(0,0,0,0.5) 40%, transparent);
  }
  .codex-cat-banner.visible { display: flex; }
  .ccb-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; position: relative; z-index: 1; }
  .ccb-label {
    font-family: 'Cinzel', serif; font-size: 22px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ccat, var(--gold-bright)); line-height: 1;
    text-shadow: 0 0 30px color-mix(in srgb, var(--ccat, var(--gold-dim)) 35%, transparent);
  }
  .ccb-count {
    font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--text-muted);
    align-self: flex-end; padding-bottom: 2px;
  }
  .ccb-desc {
    font-family: 'Inter', sans-serif; font-size: 12px; font-style: italic;
    color: var(--text-sub); line-height: 1.6;
    position: relative; z-index: 1; margin-top: 2px; max-width: 520px;
  }

  /* ── CONTINUE READING — localStorage-powered recent entries ── */
  .codex-continue {
    border-left: 2px solid color-mix(in srgb, var(--gold-dim) 45%, transparent);
    background: color-mix(in srgb, var(--gold-dim) 4%, var(--bg2));
    padding: 14px 16px 12px; margin-bottom: 0;
    border-bottom: 1px solid var(--border);
  }
  .cco-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
  }
  .cco-eyebrow {
    font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 0.36em; text-transform: uppercase;
    color: var(--gold-dim);
    display: flex; align-items: center; gap: 10px;
  }
  .cco-eyebrow::before { content: ''; width: 14px; height: 1px; background: var(--gold-dim); opacity: 0.5; flex-shrink: 0; }
  .cco-dismiss {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); padding: 2px; line-height: 1;
    transition: color 0.2s;
  }
  .cco-dismiss:hover { color: var(--gold-light); }
  .cco-items {
    display: flex; flex-wrap: wrap; gap: 4px;
  }
  .cco-item {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 11px; text-decoration: none;
    border: 1px solid var(--border); background: var(--bg2);
    transition: background 0.2s, border-color 0.2s;
  }
  .cco-item:hover {
    background: var(--bg3);
    border-color: color-mix(in srgb, var(--gold-dim) 35%, transparent);
  }
  .cco-item-cat {
    font-family: 'JetBrains Mono', monospace; font-size: 7px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--cco-c, var(--gold-dim)); flex-shrink: 0;
  }
  .cco-item-title {
    font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-sub); max-width: 180px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    transition: color 0.2s;
  }
  .cco-item:hover .cco-item-title { color: var(--gold-light); }
  .cco-item[data-cat="Artifact"]   { --cco-c: var(--gold-light); }
  .cco-item[data-cat="Power"]      { --cco-c: var(--accent-purple); }
  .cco-item[data-cat="Phenomenon"] { --cco-c: var(--accent-moss); }
  .cco-item[data-cat="History"]    { --cco-c: var(--nation-frysia); }
  .cco-item[data-cat="Location"]   { --cco-c: var(--nation-britannia); }

  /* ── NO RESULTS ───────────────────────────────────────── */
  .codex-no-results { display: none; padding: 48px 36px; text-align: center; grid-column: 1 / -1; }
  .codex-no-results.visible { display: block; }
  .cnr-label { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
  .cnr-query { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--gold-dim); letter-spacing: 0.06em; }

  /* ── EMPTY ARCHIVE STATE ─────────────────────────────── */
  .codex-archive-empty {
    display: flex; flex-direction: column; align-items: center;
    padding: 96px 40px 80px; text-align: center;
    max-width: 680px; margin: 0 auto;
  }
  .cae-glyph {
    width: 64px; height: 64px; margin-bottom: 40px;
    border: 1px solid var(--border); position: relative;
    display: flex; align-items: center; justify-content: center;
    transform: rotate(45deg);
  }
  .cae-glyph::before, .cae-glyph::after {
    content: ''; position: absolute;
    width: 10px; height: 10px;
    border: 1px solid color-mix(in srgb, var(--gold-dim) 60%, transparent);
  }
  .cae-glyph::before { top: -6px; left: -6px; border-right: none; border-bottom: none; }
  .cae-glyph::after { bottom: -6px; right: -6px; border-left: none; border-top: none; }
  .cae-glyph-inner {
    transform: rotate(-45deg);
    font-family: 'Cinzel', serif; font-size: 22px; font-weight: 700;
    color: var(--gold-dim); line-height: 1;
  }
  .cae-eyebrow {
    font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.44em;
    text-transform: uppercase; color: var(--gold-dim); margin-bottom: 20px;
    display: flex; align-items: center; gap: 14px;
  }
  .cae-eyebrow::before, .cae-eyebrow::after {
    content: ''; flex: 1; max-width: 48px; height: 1px;
    background: linear-gradient(to right, transparent, var(--gold-dim));
  }
  .cae-eyebrow::after { background: linear-gradient(to left, transparent, var(--gold-dim)); }
  .cae-title {
    font-family: 'Cinzel', serif; font-size: clamp(26px, 3.5vw, 44px);
    font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--gold-bright); line-height: 1.1; margin-bottom: 20px;
  }
  .cae-title em { font-style: italic; font-weight: 400; color: var(--gold); }
  .cae-body {
    font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 300;
    color: var(--text-sub); line-height: 1.85; max-width: 480px; margin-bottom: 52px;
  }
  .cae-links {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 2px; width: 100%;
  }
  .cae-link {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 28px 20px; background: var(--bg2); text-decoration: none;
    border-bottom: 2px solid var(--border);
    transition: background 0.22s, border-bottom-color 0.22s;
  }
  .cae-link:hover { background: var(--bg3); border-bottom-color: var(--gold-dim); }
  .cae-link-label {
    font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.26em;
    text-transform: uppercase; color: var(--gold-light);
  }
  .cae-link-sub {
    font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 300;
    color: var(--text-muted); letter-spacing: 0.02em;
  }

  /* ── ENTRIES ──────────────────────────────────────────── */
  .codex-entries {
    padding: 28px 0 120px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
  }

  /* Standard entry card */
  .lore-entry {
    background: var(--bg2); position: relative;
    border: 1px solid rgba(74,58,30,0.10);
    padding: 28px 32px;
    text-decoration: none; display: block;
    opacity: 0; transform: translateY(16px);
    transition: opacity 0.6s cubic-bezier(0.2,0,0.2,1),
                transform 0.6s cubic-bezier(0.2,0,0.2,1),
                background 0.3s, box-shadow 0.5s;
  }
  .lore-entry:hover { background: var(--bg3); box-shadow: 0 6px 28px rgba(0,0,0,0.22), inset 0 0 0 1px color-mix(in srgb, var(--ec, var(--gold-dim)) 22%, transparent); }
  .lore-entry::before {
    content: ''; position: absolute;
    left: 0; top: 0; width: 3px; height: 0;
    transition: height 0.8s 0.1s cubic-bezier(0.2,0,0.2,1);
    background: var(--gold-light);
  }
  .lore-entry[data-cat="Artifact"]::before   { background: var(--gold-light); }
  .lore-entry[data-cat="Power"]::before      { background: var(--accent-purple); }
  .lore-entry[data-cat="Phenomenon"]::before { background: var(--accent-moss); }
  .lore-entry[data-cat="History"]::before    { background: var(--nation-frysia); }
  .lore-entry[data-cat="Location"]::before   { background: var(--nation-britannia); }
  .lore-entry[data-cat="Artifact"]:hover   { box-shadow: inset 8px 0 50px rgba(196,185,152,0.09); }
  .lore-entry[data-cat="Power"]:hover      { box-shadow: inset 8px 0 50px rgba(130,100,200,0.08); }
  .lore-entry[data-cat="Phenomenon"]:hover { box-shadow: inset 8px 0 50px rgba(60,140,90,0.08); }
  .lore-entry[data-cat="History"]:hover    { box-shadow: inset 8px 0 50px rgba(232,128,106,0.08); }
  .lore-entry[data-cat="Location"]:hover   { box-shadow: inset 8px 0 50px rgba(122,184,232,0.08); }
  /* Left accent bar glow on hover — category color radiates out */
  .lore-entry[data-cat="Artifact"]:hover::before   { box-shadow: 3px 0 18px color-mix(in srgb, var(--gold-light) 50%, transparent); }
  .lore-entry[data-cat="Power"]:hover::before      { box-shadow: 3px 0 18px color-mix(in srgb, var(--accent-purple) 50%, transparent); }
  .lore-entry[data-cat="Phenomenon"]:hover::before { box-shadow: 3px 0 18px color-mix(in srgb, var(--accent-moss) 50%, transparent); }
  .lore-entry[data-cat="History"]:hover::before    { box-shadow: 3px 0 18px color-mix(in srgb, var(--nation-frysia) 50%, transparent); }
  .lore-entry[data-cat="Location"]:hover::before   { box-shadow: 3px 0 18px color-mix(in srgb, var(--nation-britannia) 50%, transparent); }
  /* Category pill glow on hover */
  .lore-entry:hover .le-cat-pill {
    border-color: color-mix(in srgb, var(--ec, var(--gold-dim)) 60%, transparent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--ec, var(--gold-dim)) 22%, transparent);
  }
  /* Title text glow on hover */
  .lore-entry:hover .le-title { text-shadow: 0 0 32px rgba(196,185,152,0.16); }
  .lore-entry.vis { opacity: 1; transform: none; }
  .lore-entry.vis::before { height: 100%; }
  .lore-entry .le-meta, .lore-entry .le-body { opacity: 0; transform: translateY(8px); transition: opacity 0.65s 0.28s ease, transform 0.65s 0.28s ease; }
  .lore-entry.vis .le-meta, .lore-entry.vis .le-body { opacity: 1; transform: none; }
  .lore-entry.filtering-out { opacity: 0 !important; transform: translateY(8px) scale(0.99) !important; pointer-events: none; transition: opacity 0.24s ease, transform 0.24s ease !important; }
  .lore-entry.filtering-in { animation: loFadeUp 0.42s cubic-bezier(0.2,0,0.2,1) both !important; }
  .lore-entry.hidden { display: none !important; }

  /* Staggered scroll-in for entry cards — items feel discovered, not dumped */
  .lore-entry:nth-child(1)  { transition-delay: 0s, 0s, 0s, 0s; }
  .lore-entry:nth-child(2)  { transition-delay: 0.06s, 0.06s, 0s, 0s; }
  .lore-entry:nth-child(3)  { transition-delay: 0.12s, 0.12s, 0s, 0s; }
  .lore-entry:nth-child(4)  { transition-delay: 0.18s, 0.18s, 0s, 0s; }
  .lore-entry:nth-child(5)  { transition-delay: 0.24s, 0.24s, 0s, 0s; }
  .lore-entry:nth-child(6)  { transition-delay: 0.30s, 0.30s, 0s, 0s; }
  .lore-entry:nth-child(7)  { transition-delay: 0.36s, 0.36s, 0s, 0s; }
  .lore-entry:nth-child(8)  { transition-delay: 0.38s, 0.38s, 0s, 0s; }
  .lore-entry.filtering-out, .lore-entry.filtering-in { transition-delay: 0s !important; }

  .le-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }

  /* ── ARCHIVE PROGRESS ────────────────────────────── */
  .codex-progress-bar {
    padding: 12px 0 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
  }
  .cpb-inner {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  }
  .cpb-label {
    font-family: 'JetBrains Mono', monospace; font-size: 8px;
    letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-muted);
    flex-shrink: 0;
  }
  .cpb-track {
    flex: 1; min-width: 80px; height: 2px; background: var(--border);
    position: relative; overflow: hidden;
  }
  .cpb-fill {
    position: absolute; left: 0; top: 0; bottom: 0; width: 0;
    background: linear-gradient(to right, var(--gold-dim), var(--gold-light));
    transition: width 0.8s cubic-bezier(0.2,0,0.2,1);
  }
  .cpb-pct {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    color: var(--gold-light); flex-shrink: 0;
  }
  .cpb-count {
    font-family: 'Inter', sans-serif; font-size: 11px; font-style: italic;
    color: var(--text-muted); flex-shrink: 0;
  }

  /* Category pill */
  .le-cat-pill {
    font-family: 'Cinzel', serif; font-size: 8px;
    letter-spacing: 0.35em; text-transform: uppercase;
    padding: 3px 10px;
    border: 1px solid color-mix(in srgb, var(--ec, var(--gold-dim)) 38%, transparent);
    color: var(--ec, var(--gold-light));
    background: color-mix(in srgb, var(--ec, var(--gold-dim)) 8%, transparent);
  }
  .lore-entry[data-cat="Artifact"]   .le-cat-pill { --ec: var(--gold-light); }
  .lore-entry[data-cat="Power"]      .le-cat-pill { --ec: var(--accent-purple); }
  .lore-entry[data-cat="Phenomenon"] .le-cat-pill { --ec: var(--accent-moss); }
  .lore-entry[data-cat="History"]    .le-cat-pill { --ec: var(--nation-frysia); }
  .lore-entry[data-cat="Location"]   .le-cat-pill { --ec: var(--nation-britannia); }

  /* Reading time */
  .le-time {
    font-family: 'JetBrains Mono', monospace; font-size: 8px;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--gold-dim); margin-left: auto;
  }

  .le-title { font-family: 'Cinzel', serif; font-size: clamp(18px, 2vw, 22px); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold-bright); line-height: 1.1; margin-bottom: 14px; }
  .le-title em { font-style: italic; font-weight: 400; color: var(--gold); }
  .le-rule { width: 0; height: 1px; background: var(--gold-dim); margin-bottom: 16px; transition: width 0.55s 0.25s cubic-bezier(0.2,0,0.2,1); }
  .lore-entry.vis .le-rule { width: 40px; }

  /* Body text — shows 4 lines by default, expands to 7 on hover */
  .le-body {
    font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 300; line-height: 1.8;
    color: var(--text-sub); max-width: 680px;
    overflow: hidden;
    max-height: calc(4 * 1.8 * 14px); /* 4 lines */
    transition: max-height 0.4s cubic-bezier(0.2,0,0.2,1);
  }
  .lore-entry:hover .le-body { max-height: calc(7 * 1.8 * 14px); /* 7 lines */ }

  .le-read { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-dim); transition: color 0.25s; }
  .lore-entry:hover .le-read { color: var(--gold-light); }
  .le-read svg { opacity: 0; transform: translateX(-4px); transition: opacity 0.25s, transform 0.25s; }
  .lore-entry:hover .le-read svg { opacity: 1; transform: none; }

  /* Reading depth bar — width proportional to reading time vs longest entry */
  .le-depth-bar {
    position: absolute; bottom: 0; left: 0;
    height: 1px; width: var(--dp, 0%);
    background: var(--ec, var(--gold-dim));
    opacity: 0;
    transition: opacity 0.4s, width 1.1s 0.1s cubic-bezier(0.15,0,0.2,1);
  }
  .lore-entry[data-cat="Artifact"]   .le-depth-bar { background: var(--gold-light); }
  .lore-entry[data-cat="Power"]      .le-depth-bar { background: var(--accent-purple); }
  .lore-entry[data-cat="Phenomenon"] .le-depth-bar { background: var(--accent-moss); }
  .lore-entry[data-cat="History"]    .le-depth-bar { background: var(--nation-frysia); }
  .lore-entry[data-cat="Location"]   .le-depth-bar { background: var(--nation-britannia); }
  .lore-entry.vis .le-depth-bar { opacity: 0.5; }
  .lore-entry:hover .le-depth-bar { opacity: 1 !important; }

  /* ── SPOTLIGHT ENTRY (first in the all-view) ──────────── */
  .lore-entry.spotlight {
    grid-column: 1 / -1;
    padding: 40px 40px;
    border-top: 1px solid var(--border);
    position: relative; overflow: hidden;
  }
  .lore-entry.spotlight::before { height: 2px !important; width: 100% !important; top: 0; left: 0; z-index: 5; transition: none !important; }
  .lore-entry.spotlight .spot-atmo {
    position: absolute; inset: 0; pointer-events: none;
    opacity: 0.55; transition: opacity 0.4s;
  }
  .lore-entry.spotlight:hover .spot-atmo { opacity: 0.8; }
  .lore-entry.spotlight .spot-inner { position: relative; z-index: 1; }
  .lore-entry.spotlight .le-title { font-size: clamp(26px, 4vw, 48px); margin-bottom: 20px; }
  .lore-entry.spotlight .le-body {
    max-height: none; font-size: 14px; line-height: 1.9;
    -webkit-line-clamp: unset; overflow: visible;
    color: var(--text);
  }
  .lore-entry.spotlight .le-body-inner { max-width: 620px; }
  .le-spotlight-badge {
    font-family: 'JetBrains Mono', monospace; font-size: 8px;
    letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--ec, var(--gold-dim)); padding: 5px 12px;
    border: 1px solid color-mix(in srgb, var(--ec, var(--gold-dim)) 55%, transparent);
    background: color-mix(in srgb, var(--ec, var(--gold-dim)) 7%, transparent);
    display: inline-block; margin-bottom: 16px;
  }
  /* Ambient tint on spotlight by category */
  .lore-entry.spotlight[data-cat="Artifact"]   .spot-atmo { background: radial-gradient(ellipse 85% 130% at 100% 50%, color-mix(in srgb, var(--gold-light) 13%, transparent), transparent 70%); }
  .lore-entry.spotlight[data-cat="Power"]      .spot-atmo { background: radial-gradient(ellipse 85% 130% at 100% 50%, color-mix(in srgb, var(--accent-purple) 13%, transparent), transparent 70%); }
  .lore-entry.spotlight[data-cat="Phenomenon"] .spot-atmo { background: radial-gradient(ellipse 85% 130% at 100% 50%, color-mix(in srgb, var(--accent-moss) 13%, transparent), transparent 70%); }
  .lore-entry.spotlight[data-cat="History"]    .spot-atmo { background: radial-gradient(ellipse 85% 130% at 100% 50%, color-mix(in srgb, var(--nation-frysia) 13%, transparent), transparent 70%); }
  .lore-entry.spotlight[data-cat="Location"]   .spot-atmo { background: radial-gradient(ellipse 85% 130% at 100% 50%, color-mix(in srgb, var(--nation-britannia) 13%, transparent), transparent 70%); }

  /* ── ENTRY CATEGORY COLOR on parent (for visual area + hover effects) ── */
  .lore-entry[data-cat="Artifact"]   { --ec: var(--gold-light); }
  .lore-entry[data-cat="Power"]      { --ec: var(--accent-purple); }
  .lore-entry[data-cat="Phenomenon"] { --ec: var(--accent-moss); }
  .lore-entry[data-cat="History"]    { --ec: var(--nation-frysia); }
  .lore-entry[data-cat="Location"]   { --ec: var(--nation-britannia); }

  /* ── HUB ENTRIES — highly connected entries get elevated treatment ── */
  .lore-entry.le-hub {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ec, var(--gold-dim)) 18%, transparent);
  }
  .lore-entry.le-hub:hover {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ec, var(--gold-dim)) 38%, transparent),
                0 6px 28px color-mix(in srgb, var(--ec, var(--gold-dim)) 9%, transparent);
  }
  .lore-entry.le-hub .le-visual {
    height: 220px;
  }
  .lore-entry.le-hub .le-visual::after {
    content: 'Network Hub';
    position: absolute; bottom: 10px; right: 12px; z-index: 2;
    font-family: 'JetBrains Mono', monospace; font-size: 7px;
    letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--ec, var(--gold-dim));
    border: 1px solid color-mix(in srgb, var(--ec, var(--gold-dim)) 38%, transparent);
    background: color-mix(in srgb, var(--bg) 80%, transparent);
    padding: 3px 8px;
  }
  .lore-entry.le-hub .le-vis-initial {
    font-size: 148px; bottom: -28px;
    color: color-mix(in srgb, var(--ec, var(--gold-dim)) 13%, transparent);
  }
  .lore-entry.le-hub:hover .le-vis-initial {
    color: color-mix(in srgb, var(--ec, var(--gold-dim)) 24%, transparent);
  }
  .lore-entry.le-hub .le-title { font-size: clamp(20px, 2.4vw, 26px); }
  .lore-entry.le-hub::before { background: var(--ec, var(--gold-dim)); width: 100% !important; }

  /* ── ENTRY VISUAL HEADER (atmospheric illustration zone) ── */
  .le-visual {
    margin: -28px -32px 22px;
    height: 172px;
    position: relative; overflow: hidden;
    background: var(--bg);
    border-bottom: 1px solid rgba(74,58,30,0.16);
    flex-shrink: 0;
  }
  .lore-entry[data-cat="Artifact"]   .le-visual { background: radial-gradient(ellipse 80% 120% at 84% 50%, color-mix(in srgb, var(--gold-light) 24%, transparent), transparent 62%), linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--gold-dim) 34%, var(--bg))); }
  .lore-entry[data-cat="Power"]      .le-visual { background: radial-gradient(ellipse 80% 120% at 84% 50%, color-mix(in srgb, var(--accent-purple) 22%, transparent), transparent 62%), linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--accent-purple) 18%, var(--bg))); }
  .lore-entry[data-cat="Phenomenon"] .le-visual { background: radial-gradient(ellipse 80% 120% at 84% 50%, color-mix(in srgb, var(--accent-moss) 22%, transparent), transparent 62%), linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--accent-moss) 18%, var(--bg))); }
  .lore-entry[data-cat="History"]    .le-visual { background: radial-gradient(ellipse 80% 120% at 84% 50%, color-mix(in srgb, var(--nation-frysia) 22%, transparent), transparent 62%), linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--nation-frysia) 18%, var(--bg))); }
  .lore-entry[data-cat="Location"]   .le-visual { background: radial-gradient(ellipse 80% 120% at 84% 50%, color-mix(in srgb, var(--nation-britannia) 22%, transparent), transparent 62%), linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--nation-britannia) 18%, var(--bg))); }
  /* Grid pattern overlay */
  .le-visual::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
      linear-gradient(color-mix(in srgb, var(--ec, var(--gold-dim)) 5%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, var(--ec, var(--gold-dim)) 5%, transparent) 1px, transparent 1px);
    background-size: 30px 30px;
    -webkit-mask-image: linear-gradient(115deg, rgba(0,0,0,0.8) 0%, transparent 55%);
    mask-image: linear-gradient(115deg, rgba(0,0,0,0.8) 0%, transparent 55%);
  }
  .le-vis-cat {
    position: absolute; top: 14px; left: 18px; z-index: 1;
    font-family: 'Cinzel', serif; font-size: 7.5px; letter-spacing: 0.48em; text-transform: uppercase;
    color: var(--ec, var(--gold)); opacity: 0.88;
    display: flex; align-items: center; gap: 9px;
  }
  .le-vis-cat::before {
    content: ''; width: 14px; height: 1px; background: currentColor; opacity: 0.5; flex-shrink: 0;
  }
  .le-vis-initial {
    position: absolute; right: 10px; bottom: -22px; z-index: 0;
    font-family: 'Cinzel', serif; font-size: 120px; font-weight: 700; line-height: 1;
    color: color-mix(in srgb, var(--ec, var(--gold-dim)) 15%, transparent);
    user-select: none; pointer-events: none;
    transition: color 0.38s;
  }
  .lore-entry:hover .le-vis-initial { color: color-mix(in srgb, var(--ec, var(--gold-dim)) 30%, transparent); }
  .le-vis-glow {
    position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(to right, transparent 8%, var(--ec, var(--gold-dim)) 48%, transparent 92%);
    opacity: 0.65;
  }
  /* Category-specific SVG art — placed right of the visual header */
  .le-vis-art {
    position: absolute; right: 0; top: 0; bottom: 0;
    width: 52%; pointer-events: none;
    color: var(--ec, var(--gold-dim));
    stroke: currentColor; fill: currentColor;
    fill-opacity: 0.16; stroke-opacity: 0.68;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.85) 30%, transparent 90%);
    mask-image: linear-gradient(to left, rgba(0,0,0,0.85) 30%, transparent 90%);
    transition: stroke-opacity 0.3s, fill-opacity 0.3s;
  }
  .lore-entry:hover .le-vis-art { stroke-opacity: 0.90; fill-opacity: 0.26; }
  .le-vis-art svg { width: 100%; height: 100%; display: block; }
  /* Subtitle teaser — subtle at rest, fully revealed on hover */
  .le-vis-teaser {
    position: absolute; bottom: 13px; left: 18px; right: 14px; z-index: 2;
    font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 300; font-style: italic;
    color: var(--gold-light); opacity: 0.22; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    transition: opacity 0.35s; pointer-events: none;
    text-shadow: 0 1px 10px rgba(0,0,0,0.95), 0 0 20px rgba(0,0,0,0.7);
  }
  .lore-entry:hover .le-vis-teaser { opacity: 0.88; }

  /* ── CATEGORY-SPECIFIC VISUAL PATTERNS ─────────────────── */
  /* Each category gets a distinct overlay texture that signals its nature */

  /* Artifact: diagonal hatching — physical, hand-crafted */
  .lore-entry[data-cat="Artifact"] .le-visual::before {
    background-image: repeating-linear-gradient(
      -45deg,
      color-mix(in srgb, var(--gold-light) 7%, transparent),
      color-mix(in srgb, var(--gold-light) 7%, transparent) 1px,
      transparent 1px, transparent 16px
    );
    background-size: auto;
  }
  /* Power: dot matrix — networked, systemic */
  .lore-entry[data-cat="Power"] .le-visual::before {
    background-image: radial-gradient(circle, color-mix(in srgb, var(--accent-purple) 20%, transparent) 1.5px, transparent 1.5px);
    background-size: 16px 16px;
  }
  /* Phenomenon: angled scan lines — disruptive, anomalous */
  .lore-entry[data-cat="Phenomenon"] .le-visual::before {
    background-image: repeating-linear-gradient(
      70deg,
      color-mix(in srgb, var(--accent-moss) 6%, transparent),
      color-mix(in srgb, var(--accent-moss) 6%, transparent) 1px,
      transparent 1px, transparent 22px
    );
    background-size: auto;
  }
  /* History: horizontal archival lines — recorded, documented */
  .lore-entry[data-cat="History"] .le-visual::before {
    background-image: linear-gradient(
      color-mix(in srgb, var(--nation-frysia) 8%, transparent) 1px,
      transparent 1px
    );
    background-size: 100% 14px;
  }
  /* Location: crosshatch — mapped, geographic coordinates */
  .lore-entry[data-cat="Location"] .le-visual::before {
    background-image:
      linear-gradient(color-mix(in srgb, var(--nation-britannia) 5%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, var(--nation-britannia) 5%, transparent) 1px, transparent 1px),
      linear-gradient(-45deg, color-mix(in srgb, var(--nation-britannia) 3%, transparent) 1px, transparent 1px);
    background-size: 22px 22px, 22px 22px, 16px 16px;
  }
  /* ── SPOTLIGHT VISUAL HEADER ─────────────────────────── */
  .lore-entry.spotlight .spot-visual {
    margin: -40px -40px 28px;
    height: 190px;
    position: relative; overflow: hidden;
    background: var(--bg);
    border-bottom: 1px solid rgba(74,58,30,0.20);
  }
  .lore-entry.spotlight[data-cat="Artifact"]   .spot-visual { background: radial-gradient(ellipse 75% 120% at 80% 50%, color-mix(in srgb, var(--gold-light) 14%, transparent), transparent 60%), linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--gold-dim) 22%, var(--bg))); }
  .lore-entry.spotlight[data-cat="Power"]      .spot-visual { background: radial-gradient(ellipse 75% 120% at 80% 50%, color-mix(in srgb, var(--accent-purple) 13%, transparent), transparent 60%), linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--accent-purple) 10%, var(--bg))); }
  .lore-entry.spotlight[data-cat="Phenomenon"] .spot-visual { background: radial-gradient(ellipse 75% 120% at 80% 50%, color-mix(in srgb, var(--accent-moss) 13%, transparent), transparent 60%), linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--accent-moss) 10%, var(--bg))); }
  .lore-entry.spotlight[data-cat="History"]    .spot-visual { background: radial-gradient(ellipse 75% 120% at 80% 50%, color-mix(in srgb, var(--nation-frysia) 13%, transparent), transparent 60%), linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--nation-frysia) 10%, var(--bg))); }
  .lore-entry.spotlight[data-cat="Location"]   .spot-visual { background: radial-gradient(ellipse 75% 120% at 80% 50%, color-mix(in srgb, var(--nation-britannia) 13%, transparent), transparent 60%), linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--nation-britannia) 10%, var(--bg))); }
  .lore-entry.spotlight .spot-visual::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
      linear-gradient(color-mix(in srgb, var(--ec, var(--gold-dim)) 5%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, var(--ec, var(--gold-dim)) 5%, transparent) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: linear-gradient(115deg, rgba(0,0,0,0.8) 0%, transparent 55%);
    mask-image: linear-gradient(115deg, rgba(0,0,0,0.8) 0%, transparent 55%);
  }
  .lore-entry.spotlight .spot-vis-initial {
    position: absolute; right: -10px; bottom: -55px; z-index: 0;
    font-family: 'Cinzel', serif; font-size: 320px; font-weight: 700; line-height: 1;
    color: color-mix(in srgb, var(--ec, var(--gold-dim)) 7%, transparent);
    user-select: none; pointer-events: none; transition: color 0.38s;
  }
  .lore-entry.spotlight:hover .spot-vis-initial { color: color-mix(in srgb, var(--ec, var(--gold-dim)) 13%, transparent); }
  .lore-entry.spotlight .spot-vis-cat {
    position: absolute; top: 18px; left: 24px; z-index: 1;
    font-family: 'Cinzel', serif; font-size: 7.5px; letter-spacing: 0.48em; text-transform: uppercase;
    color: var(--ec, var(--gold)); opacity: 0.88;
    display: flex; align-items: center; gap: 9px;
  }
  .lore-entry.spotlight .spot-vis-cat::before {
    content: ''; width: 14px; height: 1px; background: currentColor; opacity: 0.5; flex-shrink: 0;
  }
  .lore-entry.spotlight .spot-vis-glow {
    position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(to right, transparent 8%, var(--ec, var(--gold-dim)) 40%, transparent 92%);
    opacity: 0.45;
  }

  /* Reading progress bar (inside sidebar visited stat row) */
  #csReadRow { flex-direction: column; align-items: stretch; gap: 6px; }
  .cs-read-bar-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  .cs-read-bar { height: 2px; background: var(--border); border-radius: 1px; overflow: hidden; }
  .cs-read-bar-fill {
    height: 100%;
    background: linear-gradient(to right, color-mix(in srgb, var(--gold-dim) 60%, transparent), var(--gold-light));
    width: 0%; transition: width 1.1s 0.3s cubic-bezier(0.15,0,0.2,1);
  }

  /* ── READING PROGRESS (localStorage-tracked visited entries) ── */
  .lore-entry.le-read .le-visual::after {
    content: 'visited';
    position: absolute; top: 10px; right: 12px; z-index: 2;
    font-family: 'JetBrains Mono', monospace; font-size: 7px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--ec, var(--gold-dim)); opacity: 0.5;
    transition: opacity 0.2s;
  }
  .lore-entry.le-read:hover .le-visual::after { opacity: 0.85; }

  /* ── DYNAMIC FILTER-SPOTLIGHT ────────────────────────── */
  /* Applied by JS to the first visible entry when filtering by category */
  .lore-entry.filter-spotlight {
    grid-column: 1 / -1;
    padding: 36px 40px;
  }
  .lore-entry.filter-spotlight .le-title {
    font-size: clamp(22px, 3.2vw, 40px);
    margin-bottom: 18px;
  }
  .lore-entry.filter-spotlight .le-body {
    max-height: calc(6 * 1.8 * 14px);
  }
  .lore-entry.filter-spotlight .le-visual {
    margin: -36px -40px 26px;
    height: 168px;
  }
  @media (max-width: 900px) {
    .lore-entry.filter-spotlight { padding: 26px 18px; }
    .lore-entry.filter-spotlight .le-visual { margin: -26px -18px 20px; height: 120px; }
  }

  /* ── CONNECTION COUNT CHIP ────────────────────────────── */
  .le-connections {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: 'JetBrains Mono', monospace; font-size: 8px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--gold-dim); border: 1px solid rgba(74,58,30,0.3); padding: 2px 8px;
    transition: color 0.2s, border-color 0.2s;
  }
  .lore-entry:hover .le-connections { color: var(--ec, var(--gold-dim)); border-color: color-mix(in srgb, var(--ec, var(--gold-dim)) 35%, transparent); }
  .le-connections-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

  /* ── TOP CONNECTIONS LEADERBOARD (sidebar) ───────────── */
  .cs-top-entries { display: flex; flex-direction: column; gap: 1px; margin-bottom: 16px; }
  .cs-top-entry {
    display: flex; align-items: center; gap: 9px; padding: 7px 6px;
    text-decoration: none; border-left: 2px solid color-mix(in srgb, var(--tec, var(--gold-dim)) 28%, transparent);
    background: var(--bg);
    transition: background 0.2s, border-left-color 0.22s;
  }
  .cs-top-entry:hover { background: var(--bg2); border-left-color: var(--tec, var(--gold-light)); }
  .cs-te-rank {
    font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 400;
    color: var(--gold-dim); min-width: 12px; text-align: center; flex-shrink: 0;
  }
  .cs-te-info { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
  .cs-te-title {
    font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-sub); line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: color 0.2s;
  }
  .cs-top-entry:hover .cs-te-title { color: var(--gold-light); }
  .cs-te-title em { font-style: italic; font-weight: 400; color: var(--gold); }
  .cs-te-cat {
    font-family: 'JetBrains Mono', monospace; font-size: 7px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--tec, var(--gold-dim)); opacity: 0.75;
  }
  .cs-te-conn {
    font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 300;
    color: color-mix(in srgb, var(--tec, var(--gold-dim)) 55%, transparent);
    flex-shrink: 0; min-width: 18px; text-align: right;
    transition: color 0.2s;
  }
  .cs-top-entry:hover .cs-te-conn { color: var(--tec, var(--gold-light)); }

  /* ── NATION ASSOCIATION CHIPS ─────────────────────────── */
  .le-nation-chips {
    display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px;
  }
  .le-nation-chip {
    font-family: 'Cinzel', serif; font-size: 7px; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--nc, var(--gold-dim));
    border: 1px solid color-mix(in srgb, var(--nc, var(--gold-dim)) 30%, transparent);
    background: color-mix(in srgb, var(--nc, var(--gold-dim)) 7%, transparent);
    padding: 2px 8px; white-space: nowrap;
    transition: border-color 0.2s, background 0.2s;
  }
  .lore-entry:hover .le-nation-chip {
    border-color: color-mix(in srgb, var(--nc, var(--gold-dim)) 50%, transparent);
    background: color-mix(in srgb, var(--nc, var(--gold-dim)) 12%, transparent);
  }

  /* ── BROWSE BY NATION STRIP (above entry grid) ──────────── */
  .codex-nation-strip {
    display: flex; align-items: flex-start; gap: 12px;
    margin-bottom: 18px; padding: 14px 0;
    border-bottom: 1px solid var(--border);
  }
  .cns-label {
    font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--text-muted); white-space: nowrap; flex-shrink: 0; padding-top: 6px;
  }
  .cns-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
  }
  .cns-chip {
    font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase;
    padding: 6px 12px 6px 10px;
    border: 1px solid var(--border);
    border-left: 2px solid color-mix(in srgb, var(--nc, var(--gold-dim)) 50%, transparent);
    background: transparent; color: var(--text-sub);
    cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s, border-left-color 0.2s;
    display: flex; align-items: center; gap: 7px;
  }
  .cns-chip:hover {
    border-color: color-mix(in srgb, var(--nc, var(--gold-dim)) 40%, transparent);
    border-left-color: var(--nc, var(--gold-dim));
    color: var(--nc, var(--gold-bright));
    background: color-mix(in srgb, var(--nc, var(--gold-dim)) 8%, transparent);
  }
  .cns-chip.cs-an-active {
    background: color-mix(in srgb, var(--nc, var(--gold-dim)) 12%, var(--bg));
    border-color: color-mix(in srgb, var(--nc, var(--gold-dim)) 40%, transparent);
    border-left-color: var(--nc, var(--gold-dim));
    color: var(--nc, var(--gold-bright));
  }
  .cns-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--nc, var(--gold-dim)); flex-shrink: 0; opacity: 0.7;
  }
  .cns-chip.cs-an-active .cns-dot { opacity: 1; }
  .cns-count {
    font-family: 'JetBrains Mono', monospace; font-size: 7.5px; letter-spacing: 0.1em;
    color: var(--text-muted); transition: color 0.2s; margin-left: 1px;
  }
  .cns-chip:hover .cns-count,
  .cns-chip.cs-an-active .cns-count { color: color-mix(in srgb, var(--nc, var(--gold-dim)) 80%, transparent); }
  @media (max-width: 700px) {
    .codex-nation-strip { flex-direction: column; gap: 8px; }
    .cns-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  }

  /* Nation chips in entry cards — hover cue that they're clickable */
  .le-nation-chip[data-nation-id] { cursor: pointer; }
  .le-nation-chip[data-nation-id]:hover {
    border-color: color-mix(in srgb, var(--nc, var(--gold-dim)) 60%, transparent);
    background: color-mix(in srgb, var(--nc, var(--gold-dim)) 16%, transparent);
    color: var(--nc, var(--gold-bright));
  }
  .le-nation-chip[data-nation-id].cs-an-active {
    background: color-mix(in srgb, var(--nc, var(--gold-dim)) 18%, transparent);
    border-color: color-mix(in srgb, var(--nc, var(--gold-dim)) 65%, transparent);
    color: var(--nc, var(--gold-bright));
  }

  /* ── SIDEBAR — WORLDS IN THIS ARCHIVE ─────────────────── */
  .cs-archive-nations {
    display: flex; flex-direction: column; gap: 1px;
    margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border);
  }
  .cs-an-row {
    display: flex; align-items: center; gap: 10px; padding: 7px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-left: 2px solid color-mix(in srgb, var(--nc, var(--gold-dim)) 40%, transparent);
    text-decoration: none; transition: background 0.2s, border-color 0.2s, border-left-color 0.2s;
    cursor: pointer;
  }
  .cs-an-row:hover {
    background: color-mix(in srgb, var(--nc, var(--gold-dim)) 8%, var(--bg));
    border-color: color-mix(in srgb, var(--nc, var(--gold-dim)) 18%, transparent);
    border-left-color: var(--nc, var(--gold-dim));
  }
  .cs-an-row.cs-an-active {
    background: color-mix(in srgb, var(--nc, var(--gold-dim)) 10%, var(--bg));
    border-color: color-mix(in srgb, var(--nc, var(--gold-dim)) 25%, transparent);
    border-left-color: var(--nc, var(--gold-dim));
  }
  .cs-an-dot {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
    background: var(--nc, var(--gold-dim));
    box-shadow: 0 0 6px var(--nc, var(--gold-dim));
  }
  .cs-an-name {
    font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--gold-light); flex: 1;
    transition: color 0.2s;
  }
  .cs-an-row:hover .cs-an-name { color: var(--nc, var(--gold-bright)); }
  .cs-an-count {
    font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 0.08em;
    color: var(--text-muted);
  }

  /* ── RESPONSIVE ───────────────────────────────────────── */
  .codex-entry-area { min-width: 0; }

  @media (max-width: 900px) {
    .codex-shell { grid-template-columns: 1fr; gap: 0; padding: 0 20px; }
    .codex-sidebar { position: static; padding: 24px 0 0; }
    .cs-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
    .cs-btn { padding: 7px 10px; }
    .codex-entries { grid-template-columns: 1fr; }
    .lore-entry { padding: 22px 18px; }
    .le-visual { margin: -22px -18px 18px; height: 108px; }
    .lore-entry.spotlight { padding: 26px 18px; grid-column: 1 / -1; }
    .lore-entry.spotlight .spot-visual { height: 130px; margin: -26px -18px 20px; }
    .lore-entry.spotlight .le-body { overflow: hidden; max-height: calc(5 * 1.8 * 14px); }
    .codex-portals { padding: 0 20px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  }
  @media (max-width: 520px) {
    .lore-hero { min-height: 44vh; }
    .codex-shell { padding: 0 16px; }
    .codex-portals { padding: 0 16px; grid-template-columns: repeat(3, 1fr); }
    .cpt-desc { font-size: 10px; }
  }

  /* ── START HERE — numbered reading path suggestions ─────── */
  .cs-paths { display: flex; flex-direction: column; gap: 2px; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
  .cs-path-btn {
    display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; padding: 12px 12px;
    background: var(--bg2); border: none; border-left: 2px solid var(--border);
    cursor: pointer; transition: background 0.2s, border-left-color 0.2s;
  }
  .cs-path-btn:hover { background: var(--bg3); }
  .cs-path-num {
    font-family: 'JetBrains Mono', monospace; font-size: 17px; font-weight: 300; line-height: 1;
    color: color-mix(in srgb, var(--pcc, var(--gold-dim)) 42%, transparent);
    flex-shrink: 0; margin-top: 2px;
    transition: color 0.2s;
  }
  .cs-path-btn:hover .cs-path-num { color: color-mix(in srgb, var(--pcc, var(--gold-dim)) 75%, transparent); }
  .cs-path-content { flex: 1; min-width: 0; }
  .cs-path-question {
    font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--gold-light); display: block; margin-bottom: 4px;
  }
  .cs-path-answer {
    font-family: 'Inter', sans-serif; font-size: 10px; font-style: italic;
    color: var(--text-muted); line-height: 1.5;
  }
  .cs-path-btn[data-cat="History"] { --pcc: var(--nation-frysia); border-left-color: color-mix(in srgb, var(--nation-frysia) 38%, transparent); }
  .cs-path-btn[data-cat="History"]:hover { border-left-color: var(--nation-frysia); }
  .cs-path-btn[data-cat="Artifact"] { --pcc: var(--gold-light); border-left-color: color-mix(in srgb, var(--gold-light) 38%, transparent); }
  .cs-path-btn[data-cat="Artifact"]:hover { border-left-color: var(--gold-light); }
  .cs-path-btn[data-cat="Phenomenon"] { --pcc: var(--accent-moss); border-left-color: color-mix(in srgb, var(--accent-moss) 38%, transparent); }
  .cs-path-btn[data-cat="Phenomenon"]:hover { border-left-color: var(--accent-moss); }
  .cs-path-btn[data-cat="Power"] { --pcc: var(--accent-purple); border-left-color: color-mix(in srgb, var(--accent-purple) 38%, transparent); }
  .cs-path-btn[data-cat="Power"]:hover { border-left-color: var(--accent-purple); }
  .cs-path-btn[data-cat="Location"] { --pcc: var(--nation-britannia); border-left-color: color-mix(in srgb, var(--nation-britannia) 38%, transparent); }
  .cs-path-btn[data-cat="Location"]:hover { border-left-color: var(--nation-britannia); }

  /* ── SORT CONTROL ─────────────────────────────────────── */
  .cs-sort-wrap {
    margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border);
  }
  .cs-sort-lbl {
    display: block; font-family: 'Cinzel', serif; font-size: 7.5px; letter-spacing: 0.28em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: 9px;
  }
  .cs-sort-pills { display: flex; flex-wrap: wrap; gap: 5px; }
  .cs-sort-pill {
    font-family: 'Cinzel', serif; font-size: 7px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--text-muted); background: transparent;
    border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
    padding: 4px 9px; cursor: pointer; line-height: 1.6;
    transition: color 0.18s, border-color 0.18s, background 0.18s;
  }
  .cs-sort-pill:hover {
    color: var(--gold-light);
    border-color: color-mix(in srgb, var(--gold-dim) 50%, transparent);
    background: color-mix(in srgb, var(--gold-dim) 5%, transparent);
  }
  .cs-sort-pill.active {
    color: var(--gold-light);
    border-color: color-mix(in srgb, var(--gold-dim) 65%, transparent);
    background: color-mix(in srgb, var(--gold-dim) 11%, transparent);
  }

  /* ── NETWORK HUBS (top 3 most-connected entries) ─────── */
  .cs-hubs-head {
    font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 10px;
  }
  .cs-hub-item {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 0; border-bottom: 1px dashed rgba(74,58,30,0.22);
    text-decoration: none; cursor: pointer;
  }
  .cs-hub-item:last-child { border-bottom: none; }
  .cs-hub-rank {
    font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 0.04em;
    color: var(--text-muted); width: 14px; flex-shrink: 0; text-align: center;
  }
  .cs-hub-bar {
    width: 2px; border-radius: 1px; background: var(--hbc, var(--gold-dim));
    flex-shrink: 0; min-height: 10px; max-height: 34px;
    transition: background 0.2s;
  }
  .cs-hub-name {
    font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-sub); transition: color 0.2s; flex: 1; min-width: 0;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  .cs-hub-conn {
    font-family: 'JetBrains Mono', monospace; font-size: 8px;
    color: var(--gold-dim); white-space: nowrap; flex-shrink: 0;
  }
  .cs-hub-item:hover .cs-hub-name { color: var(--gold-light); }
  .cs-hubs-wrap { margin-bottom: 24px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }

  /* ── CONNECTION STRENGTH BAR (right edge of entry) ──── */
  .le-conn-bar {
    position: absolute; right: 0; top: 0; width: 2px;
    background: var(--ec, var(--gold-dim));
    height: var(--cb, 0%);
    opacity: 0;
    transition: opacity 0.4s, height 1.3s 0.18s cubic-bezier(0.15,0,0.2,1);
  }
  .lore-entry.vis .le-conn-bar { opacity: 0.45; }
  .lore-entry:hover .le-conn-bar { opacity: 0.9 !important; }

  /* Hide sort + hubs on very small screens */
  @media (max-width: 900px) {
    .cs-sort-wrap { flex-wrap: wrap; }
    .cs-hubs-wrap { display: none; }
  }

  /* ── ARCHIVE CONSTELLATION — ambient hero visualization ── */
  .lore-constellation {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    width: 100%; height: 100%;
    opacity: 0; animation: loFadeUp 2.4s 1.0s ease both;
  }
  /* Individual node links are interactive — clicking goes to that entry */
  .lore-constellation .lc-node-link { pointer-events: auto; cursor: pointer; }
  .lore-constellation .lc-node-link circle { transition: fill-opacity 0.2s, r 0.2s; }
  .lore-constellation .lc-node-link:hover circle { fill-opacity: 0.88; }
  .lc-node { fill-opacity: 0.42; }
  .lc-line { stroke-opacity: 0.16; stroke-width: 0.65; }
  .lc-node-artifact,   .lc-line-artifact   { fill: var(--gold-light);       stroke: var(--gold-light); }
  .lc-node-power,      .lc-line-power       { fill: var(--accent-purple);    stroke: var(--accent-purple); }
  .lc-node-phenomenon, .lc-line-phenomenon  { fill: var(--accent-moss);      stroke: var(--accent-moss); }
  .lc-node-history,    .lc-line-history     { fill: var(--nation-frysia);    stroke: var(--nation-frysia); }
  .lc-node-location,   .lc-line-location    { fill: var(--nation-britannia); stroke: var(--nation-britannia); }
  /* Enhanced constellation atmosphere */
  .lore-constellation { opacity: 0.55; }
  .lc-node-link:hover circle { opacity: 1; filter: drop-shadow(0 0 4px currentColor); }
  @media (prefers-reduced-motion: reduce) {
    .lore-constellation .lc-node-link circle { transition: none; }
  }

  /* Nation row — active filter state & as button */
  button.cs-an-row {
    border: 1px solid transparent;
    border-left: 2px solid color-mix(in srgb, var(--nc, var(--gold-dim)) 40%, transparent);
    width: 100%; text-align: left; cursor: pointer; background: transparent;
  }
  .cs-an-row.cs-an-active {
    background: color-mix(in srgb, var(--nc, var(--gold-dim)) 11%, var(--bg));
    border-color: color-mix(in srgb, var(--nc, var(--gold-dim)) 28%, transparent);
    border-left-color: var(--nc, var(--gold-dim));
  }
  .cs-an-row.cs-an-active .cs-an-name { color: var(--nc, var(--gold-bright)); }
  .cs-an-link {
    margin-left: auto; flex-shrink: 0;
    font-family: 'Cinzel', serif; font-size: 9px; color: var(--text-muted);
    text-decoration: none; transition: color 0.2s;
    padding: 0 2px;
  }
  .cs-an-link:hover { color: var(--gold-light); }

  /* Nation filter active banner */
  .codex-nation-banner {
    display: none; padding: 14px 0 10px;
    border-bottom: 1px solid var(--border); margin-bottom: 0;
    align-items: baseline; gap: 14px; flex-wrap: wrap;
  }
  .codex-nation-banner.visible { display: flex; }
  .cnb-label {
    font-family: 'Cinzel', serif; font-size: 16px; font-weight: 700;
    letter-spacing: 0.07em; text-transform: uppercase; color: var(--gold-bright); line-height: 1;
  }
  .cnb-sub { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
  .cnb-clear { font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--text-muted); background: none; border: 1px solid var(--border); padding: 3px 10px;
    cursor: pointer; margin-left: auto; transition: color 0.2s, border-color 0.2s; }
  .cnb-clear:hover { color: var(--gold-light); border-color: rgba(196,185,152,0.35); }

  /* ── VIEW TOGGLE ─────────────────────────────────────── */
  .cw-view-bar {
    display: flex; align-items: center; gap: 6px; margin-bottom: 14px;
  }
  .cw-toggle {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px;
    border: 1px solid var(--border); background: transparent;
    font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--text-muted); cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
  }
  .cw-toggle.is-active {
    color: var(--gold-light);
    border-color: color-mix(in srgb, var(--gold-dim) 50%, transparent);
    background: color-mix(in srgb, var(--gold-dim) 7%, transparent);
  }
  .cw-toggle:hover:not(.is-active) { color: var(--text-sub); }

  /* ── WEB (NETWORK) VIEW ──────────────────────────────── */
  .codex-web {
    position: relative; width: 100%; overflow: hidden;
    border: 1px solid var(--border);
    background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(147,115,65,0.04), transparent);
  }
  .cw-svg { display: block; width: 100%; height: auto; cursor: crosshair; }
  .cw-link { stroke: rgba(196,185,152,0.07); stroke-width: 1; fill: none; transition: stroke 0.2s; }
  .cw-link.is-lit { stroke: rgba(196,185,152,0.38); stroke-width: 1.3; }
  .cw-node-group { cursor: pointer; }
  .cw-node {
    fill: color-mix(in srgb, var(--ncol, rgba(196,185,152,0.3)) 15%, transparent);
    stroke: color-mix(in srgb, var(--ncol, rgba(196,185,152,0.4)) 55%, transparent);
    stroke-width: 1; transition: fill 0.15s, stroke 0.15s, opacity 0.2s;
  }
  .cw-node.is-dim { opacity: 0.1; }
  .cw-node-initial {
    font-family: 'Cinzel', serif; font-size: 6px; font-weight: 700;
    fill: color-mix(in srgb, var(--ncol, var(--gold-dim)) 85%, transparent);
    text-anchor: middle; dominant-baseline: central; pointer-events: none;
  }
  .cw-node-label {
    font-family: 'Cinzel', serif; font-size: 5.5px; fill: rgba(196,185,152,0.45);
    text-anchor: middle; pointer-events: none; transition: fill 0.15s, opacity 0.2s;
  }
  .cw-node-label.is-dim { opacity: 0.1; }
  .cw-node-group:hover .cw-node {
    fill: color-mix(in srgb, var(--ncol, var(--gold-dim)) 30%, transparent);
    stroke: color-mix(in srgb, var(--ncol, var(--gold-dim)) 90%, transparent); stroke-width: 1.5;
  }
  .cw-node-group:hover .cw-node-label { fill: var(--gold-light); }
  /* Tooltip */
  .cw-tooltip {
    position: absolute; z-index: 10; pointer-events: none;
    background: var(--bg3, #18181c); border: 1px solid var(--border);
    padding: 7px 11px; min-width: 120px; max-width: 210px;
    transform: translate(-50%, -100%) translateY(-10px);
    animation: cwTtIn 0.12s ease both;
  }
  @keyframes cwTtIn { from { opacity:0; transform:translate(-50%,-100%) translateY(-5px); } }
  .cw-tt-cat {
    font-family: 'Cinzel', serif; font-size: 7px; letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--ttcol, var(--gold)); margin-bottom: 5px;
  }
  .cw-tt-title {
    font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--gold-bright); line-height: 1.3;
  }
  /* Legend */
  .cw-legend {
    position: absolute; bottom: 10px; left: 14px;
    display: flex; flex-wrap: wrap; gap: 10px; pointer-events: none;
  }
  .cw-leg-item { display: flex; align-items: center; gap: 5px; }
  .cw-leg-dot { width: 6px; height: 6px; border-radius: 50%; }
  .cw-leg-label {
    font-family: 'Cinzel', serif; font-size: 7px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--text-muted);
  }
  .cw-hint {
    position: absolute; bottom: 10px; right: 14px;
    font-family: 'JetBrains Mono', monospace; font-size: 7px; letter-spacing: 0.06em;
    color: color-mix(in srgb, var(--text-muted) 55%, transparent); pointer-events: none;
  }

  /* ── WHERE TO START — editorial reading-path strip ────── */
  .codex-paths-strip {
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 86%, var(--bg2));
    padding: 44px var(--page-pad);
    position: relative; overflow: hidden;
  }
  .codex-paths-strip::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 70% 120% at 50% 50%, rgba(196,185,152,0.04), transparent 65%);
  }
  .cps-inner { position: relative; max-width: 1200px; margin: 0 auto; }
  .cps-head {
    display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px;
    margin-bottom: 28px;
  }
  .cps-head-label {
    font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.44em; text-transform: uppercase;
    color: var(--gold);
  }
  .cps-head-desc {
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 300; font-style: italic;
    color: var(--text-muted); letter-spacing: 0.02em;
  }
  .cps-cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2px;
  }
  .cps-card {
    display: flex; flex-direction: column; gap: 10px;
    padding: 22px 24px; background: var(--bg2);
    border: none; text-align: left; cursor: pointer;
    position: relative; overflow: hidden;
    border-left: 2px solid color-mix(in srgb, var(--cps-c, var(--gold-dim)) 60%, transparent);
    transition: background 0.22s, border-left-color 0.22s;
  }
  .cps-card::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 100% 160% at 0% 80%, color-mix(in srgb, var(--cps-c, var(--gold-dim)) 8%, transparent), transparent 60%);
    opacity: 0; transition: opacity 0.3s;
  }
  .cps-card:hover { background: var(--bg3); border-left-color: var(--cps-c, var(--gold-light)); }
  .cps-card:hover::before { opacity: 1; }
  .cps-card[data-cat="History"]    { --cps-c: var(--nation-frysia); }
  .cps-card[data-cat="Artifact"]   { --cps-c: var(--gold-light); }
  .cps-card[data-cat="Phenomenon"] { --cps-c: var(--accent-moss); }
  .cps-card[data-cat="Power"]      { --cps-c: var(--accent-purple); }
  .cps-card[data-cat="Location"]   { --cps-c: var(--nation-britannia); }
  .cps-num {
    font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.16em;
    color: color-mix(in srgb, var(--cps-c, var(--gold-dim)) 70%, transparent);
  }
  .cps-question {
    font-family: 'Cinzel', serif; font-size: 14px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--gold-bright); line-height: 1.3;
  }
  .cps-answer {
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 300; font-style: italic;
    color: var(--text-sub); line-height: 1.55;
  }
  .cps-cta {
    margin-top: auto; padding-top: 12px;
    display: flex; align-items: center; gap: 8px;
    font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 0.3em; text-transform: uppercase;
    color: color-mix(in srgb, var(--cps-c, var(--gold-dim)) 80%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--cps-c, var(--gold-dim)) 20%, transparent);
    transition: color 0.2s;
  }
  .cps-card:hover .cps-cta { color: var(--cps-c, var(--gold-light)); }
  @media (max-width: 700px) { .cps-cards { grid-template-columns: 1fr; } }

  /* ── RECENTLY VISITED ──────────────────────────────────── */
  .cs-recently-visited { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
  .cs-rv-item {
    display: flex; align-items: baseline; gap: 8px; padding: 7px 0;
    border-bottom: 1px dashed rgba(74,58,30,0.18); text-decoration: none;
  }
  .cs-rv-item:last-child { border-bottom: none; }
  .cs-rv-cat {
    font-family: 'JetBrains Mono', monospace; font-size: 7px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-muted); flex-shrink: 0; white-space: nowrap;
  }
  .cs-rv-title {
    font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-sub); flex: 1; min-width: 0;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    transition: color 0.2s;
  }
  .cs-rv-item:hover .cs-rv-title { color: var(--gold-light); }

  /* ── NETWORK VIEW INVITE ────────────────────────────────── */
  .codex-web-invite {
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--gold-dim) 3%, var(--bg));
    position: relative; overflow: hidden;
  }
  .codex-web-invite::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 55% 120% at 78% 50%, rgba(147,115,65,0.06), transparent 65%);
  }
  .cwi-inner {
    max-width: 1440px; margin: 0 auto; padding: 40px 56px 36px;
    display: flex; flex-direction: column; gap: 32px; position: relative;
  }
  .cwi-head {
    display: grid; grid-template-columns: 1fr auto;
    gap: 48px; align-items: center;
  }
  .cwi-eyebrow {
    font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 0.44em; text-transform: uppercase;
    color: var(--gold); display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
  }
  .cwi-eyebrow::before { content: ''; width: 18px; height: 1px; background: var(--gold-dim); opacity: 0.6; flex-shrink: 0; }
  .cwi-title {
    font-family: 'Cinzel', serif; font-size: clamp(18px, 2.2vw, 28px); font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold-bright); line-height: 1.1; margin-bottom: 12px;
  }
  .cwi-title em { font-style: italic; font-weight: 400; color: var(--gold); }
  .cwi-desc {
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 300; font-style: italic;
    color: var(--text-sub); line-height: 1.7; max-width: 480px; margin-bottom: 22px;
  }
  .cwi-btn {
    display: inline-flex; align-items: center; gap: 10px; padding: 9px 22px;
    font-family: 'Cinzel', serif; font-size: 8.5px; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--gold-light); border: 1px solid color-mix(in srgb, var(--gold-dim) 45%, transparent);
    background: color-mix(in srgb, var(--gold-dim) 6%, transparent); cursor: pointer;
    transition: color 0.22s, border-color 0.22s, background 0.22s;
  }
  .cwi-btn:hover { color: var(--gold-bright); border-color: var(--gold-light); background: color-mix(in srgb, var(--gold-dim) 12%, transparent); }
  .cwi-btn svg { transition: transform 0.22s; }
  .cwi-btn:hover svg { transform: translateX(3px); }
  .cwi-preview {
    width: 200px; height: 110px; flex-shrink: 0; opacity: 0.48;
    animation: loFadeUp 1.2s 0.6s ease both;
  }
  .cwi-preview-link { stroke: rgba(196,185,152,0.16); stroke-width: 0.8; }
  .cwi-preview-node { fill: none; stroke: var(--gold-dim); stroke-width: 0.9; }
  .cwi-preview-core { fill: color-mix(in srgb, var(--gold-dim) 22%, transparent); stroke: var(--gold-light); stroke-width: 0.8; }
  .cwi-live-wrap {
    width: 100%; height: 320px; position: relative; overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--gold-dim) 16%, transparent);
    background: color-mix(in srgb, var(--bg) 82%, rgba(0,0,0,0.5));
  }
  .cwi-live-svg { width: 100%; height: 100%; display: block; }
  .cwi-live-tip {
    position: absolute; pointer-events: none; z-index: 10;
    background: color-mix(in srgb, var(--bg) 94%, var(--gold-dim));
    border: 1px solid var(--border); padding: 8px 14px;
    font-family: 'Inter', sans-serif; font-size: 11px; color: var(--text-sub);
    line-height: 1.55; max-width: 240px; white-space: nowrap;
    transform: translate(-50%, calc(-100% - 10px));
  }
  .cwi-live-caption {
    position: absolute; bottom: 10px; left: 12px;
    font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.26em;
    text-transform: uppercase; color: var(--text-muted); opacity: 0.45;
    pointer-events: none; user-select: none;
  }
  .cwi-expand-btn {
    background: none; border: none; cursor: pointer; padding: 0;
    font-family: 'Cinzel', serif; font-size: 7.5px; letter-spacing: 0.28em;
    text-transform: uppercase; color: var(--gold-light); text-decoration: underline;
    text-underline-offset: 2px; transition: color 0.2s; pointer-events: auto;
  }
  .cwi-expand-btn:hover { color: var(--gold-bright); }
  .cwi-live-wrap.is-expanded {
    height: 520px !important;
  }
  .cwi-live-wrap.is-expanded + .cwi-live-legend { display: block; }
  .cwi-live-legend {
    position: absolute; bottom: 10px; right: 12px;
    display: flex; gap: 14px; flex-wrap: wrap;
  }
  .cwi-ll-item {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--text-muted);
  }
  .cwi-ll-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
  @media (max-width: 860px) {
    .cwi-inner { padding: 28px 20px; gap: 20px; }
    .cwi-head { grid-template-columns: 1fr; gap: 20px; }
    .cwi-preview { display: none; }
    .cwi-live-wrap { height: 180px; }
  }

  /* ── HERO SPOTLIGHT TRANSITION ────────────────────────── */
  .lore-hero-right {
    transition: opacity 0.18s, transform 0.18s;
  }
  .lore-hero-right.hero-fading {
    opacity: 0; transform: translateY(8px); pointer-events: none;
  }
  .lore-hero-right.hero-in {
    opacity: 1; transform: translateY(0);
    transition: opacity 0.32s cubic-bezier(0.2,0,0.2,1), transform 0.32s cubic-bezier(0.2,0,0.2,1);
  }

  /* ── PORTAL TILE — per-category read progress ─────────── */
  .cpt-progress {
    margin-top: auto; padding-top: 10px;
    display: flex; align-items: center; gap: 7px;
    border-top: 1px solid color-mix(in srgb, var(--tc, var(--gold-dim)) 18%, transparent);
  }
  .cpt-progress-wrap {
    flex: 1; height: 2px; overflow: hidden;
    background: color-mix(in srgb, var(--tc, var(--gold-dim)) 15%, transparent);
  }
  .cpt-progress-fill {
    height: 100%; width: 0;
    background: var(--tc, var(--gold-dim));
    transition: width 0.9s 0.3s cubic-bezier(0.2,0,0.2,1);
  }
  .cpt-progress-label {
    font-family: 'JetBrains Mono', monospace; font-size: 7.5px; letter-spacing: 0.08em;
    color: var(--text-muted); white-space: nowrap; flex-shrink: 0;
    transition: color 0.2s;
  }
  .cp-tile:hover .cpt-progress-label,
  .cp-tile.active .cpt-progress-label { color: color-mix(in srgb, var(--tc, var(--gold-dim)) 80%, var(--text-muted)); }

  /* ── CATEGORY PORTAL SVG ICON ────────────────────────── */
  .cpt-icon {
    position: absolute; top: 28px; right: 22px; z-index: 2;
    width: 34px; height: 34px;
    color: color-mix(in srgb, var(--tc, var(--gold-dim)) 38%, transparent);
    transition: color 0.38s, transform 0.52s cubic-bezier(0.2,0,0.2,1);
    pointer-events: none;
  }
  .cp-tile:hover .cpt-icon,
  .cp-tile.active .cpt-icon {
    color: color-mix(in srgb, var(--tc, var(--gold-dim)) 72%, transparent);
    transform: translateY(-5px) scale(1.14);
  }

  /* ── READING TRAIL — personalised returning-visitor strip ── */
  .codex-trail {
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--gold-dim) 5%, var(--bg));
    position: relative; overflow: hidden;
  }
  .codex-trail::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 40% 200% at 0% 50%, color-mix(in srgb, var(--gold-dim) 8%, transparent), transparent 65%);
  }
  .ct-inner {
    max-width: 1440px; margin: 0 auto; padding: 18px 56px;
    display: flex; align-items: center; gap: 28px;
    position: relative; z-index: 1;
    animation: loFadeUp 0.5s cubic-bezier(0.2,0,0.2,1) both;
  }
  .ct-head { flex-shrink: 0; min-width: 120px; }
  .ct-eyebrow {
    font-family: 'JetBrains Mono', monospace; font-size: 7.5px; letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--gold-dim); margin-bottom: 2px;
  }
  .ct-title {
    font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--gold-light);
  }
  .ct-divider { width: 1px; height: 32px; background: var(--border); flex-shrink: 0; }
  .ct-items { display: flex; gap: 6px; flex: 1; overflow: hidden; }
  .ct-item {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 13px; text-decoration: none;
    background: var(--bg2); border: 1px solid var(--border);
    max-width: 200px; flex-shrink: 0;
    transition: background 0.22s, border-color 0.22s;
  }
  .ct-item:hover { background: var(--bg3); border-color: color-mix(in srgb, var(--gold-dim) 40%, transparent); }
  .ct-item-cat {
    font-family: 'JetBrains Mono', monospace; font-size: 7px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ctc, var(--gold-dim)); flex-shrink: 0;
  }
  .ct-item-title {
    font-family: 'Cinzel', serif; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-sub); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    transition: color 0.2s;
  }
  .ct-item:hover .ct-item-title { color: var(--gold-bright); }
  .ct-dismiss {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 16px; line-height: 1; padding: 4px 8px;
    flex-shrink: 0; transition: color 0.2s; margin-left: auto;
  }
  .ct-dismiss:hover { color: var(--gold-light); }
  @media (max-width: 860px) {
    .ct-inner { padding: 14px 20px; gap: 14px; }
    .ct-items { overflow-x: auto; scrollbar-width: none; }
    .ct-items::-webkit-scrollbar { display: none; }
  }

  /* ── RECENTLY ADDED RAIL ─────────────────────────────────── */
  .codex-new-rail {
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg2) 80%, var(--bg));
    position: relative; overflow: hidden;
  }
  .codex-new-rail::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 50% 100% at 100% 50%, rgba(196,185,152,0.04), transparent 65%);
  }
  .cnr-inner {
    max-width: 1440px; margin: 0 auto; padding: 36px 56px;
    display: grid; grid-template-columns: 180px 1fr; gap: 44px; align-items: start;
  }
  .cnr-head { padding-top: 4px; }
  .cnr-eyebrow {
    font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--gold-dim); margin-bottom: 8px; display: flex; align-items: center; gap: 10px;
  }
  .cnr-eyebrow::before { content: ''; width: 14px; height: 1px; background: var(--gold-dim); opacity: 0.5; flex-shrink: 0; }
  .cnr-head-title {
    font-family: 'Cinzel', serif; font-size: 16px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--gold-bright); margin-bottom: 6px;
  }
  .cnr-head-desc {
    font-family: 'Inter', sans-serif; font-size: 11px; font-style: italic;
    color: var(--text-muted); line-height: 1.6;
  }
  .cnr-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
  .cnr-card {
    background: var(--bg2); text-decoration: none;
    display: flex; flex-direction: column;
    position: relative; overflow: hidden;
    border-left: 2px solid color-mix(in srgb, var(--cnrc, var(--gold-dim)) 45%, transparent);
    transition: background 0.25s, border-left-color 0.22s, transform 0.2s;
    padding: 0;
  }
  .cnr-card:hover { background: var(--bg3); border-left-color: var(--cnrc, var(--gold-light)); transform: translateY(-2px); }
  .cnr-card[data-cat="Artifact"]   { --cnrc: var(--gold-light); }
  .cnr-card[data-cat="Power"]      { --cnrc: var(--accent-purple); }
  .cnr-card[data-cat="Phenomenon"] { --cnrc: var(--accent-moss); }
  .cnr-card[data-cat="History"]    { --cnrc: var(--nation-frysia); }
  .cnr-card[data-cat="Location"]   { --cnrc: var(--nation-britannia); }
  /* Visual header zone — mirrors lore entry card */
  .cnr-card-visual {
    height: 72px; position: relative; overflow: hidden; flex-shrink: 0;
    border-bottom: 1px solid rgba(74,58,30,0.14);
    background: linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--cnrc, var(--gold-dim)) 14%, var(--bg)));
  }
  .cnr-card-visual::before {
    content: ''; position: absolute; inset: 0;
    background-image: repeating-linear-gradient(-45deg,
      color-mix(in srgb, var(--cnrc, var(--gold-dim)) 7%, transparent),
      color-mix(in srgb, var(--cnrc, var(--gold-dim)) 7%, transparent) 1px,
      transparent 1px, transparent 14px);
    -webkit-mask-image: linear-gradient(115deg, rgba(0,0,0,0.85) 0%, transparent 55%);
    mask-image: linear-gradient(115deg, rgba(0,0,0,0.85) 0%, transparent 55%);
  }
  .cnr-badge {
    position: absolute; top: 10px; right: 12px; z-index: 2;
    font-family: 'JetBrains Mono', monospace; font-size: 7px; letter-spacing: 0.26em;
    text-transform: uppercase; color: var(--cnrc, var(--gold-dim));
    border: 1px solid color-mix(in srgb, var(--cnrc, var(--gold-dim)) 45%, transparent);
    background: color-mix(in srgb, var(--cnrc, var(--gold-dim)) 8%, transparent);
    padding: 2px 7px;
    display: flex; align-items: center;
  }
  .cnr-badge-dot {
    display: inline-block; width: 5px; height: 5px; border-radius: 50%;
    background: currentColor; margin-right: 5px; vertical-align: middle;
    animation: cnrBadgePulse 1.8s ease-in-out infinite;
  }
  @keyframes cnrBadgePulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%       { opacity: 1; transform: scale(1.3); }
  }
  .cnr-card-body { padding: 18px 22px 16px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
  .cnr-cat {
    font-family: 'Cinzel', serif; font-size: 7.5px; letter-spacing: 0.38em; text-transform: uppercase;
    color: var(--cnrc, var(--gold-dim));
  }
  .cnr-card-title {
    font-family: 'Cinzel', serif; font-size: 14px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--gold-bright); line-height: 1.1;
  }
  .cnr-card-title em { font-style: italic; font-weight: 400; color: var(--gold); }
  .cnr-card-read {
    margin-top: auto; padding-top: 10px;
    display: inline-flex; align-items: center; gap: 7px;
    font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--text-muted); transition: color 0.2s;
  }
  .cnr-card:hover .cnr-card-read { color: var(--cnrc, var(--gold-light)); }
  @media (max-width: 900px) {
    .cnr-inner { grid-template-columns: 1fr; gap: 20px; padding: 28px 20px; }
    .cnr-cards { grid-template-columns: 1fr; }
  }

  /* ── ENTRY OF THE DAY ─────────────────────────────────────── */
  .codex-eod {
    border-left: 2px solid var(--eod-c, var(--gold-dim));
    background: color-mix(in srgb, var(--eod-c, var(--gold-dim)) 4%, var(--bg2));
    padding: 14px 20px 14px 22px;
    border-bottom: 1px solid var(--border);
    text-decoration: none; display: block;
    transition: background 0.22s, border-left-color 0.22s;
    position: relative; overflow: hidden;
  }
  .codex-eod::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 55% 140% at 0% 50%, color-mix(in srgb, var(--eod-c, var(--gold-dim)) 7%, transparent), transparent 60%);
  }
  .codex-eod:hover { background: color-mix(in srgb, var(--eod-c, var(--gold-dim)) 8%, var(--bg2)); }
  .codex-eod[data-cat="Artifact"]   { --eod-c: var(--gold-light); }
  .codex-eod[data-cat="Power"]      { --eod-c: var(--accent-purple); }
  .codex-eod[data-cat="Phenomenon"] { --eod-c: var(--accent-moss); }
  .codex-eod[data-cat="History"]    { --eod-c: var(--nation-frysia); }
  .codex-eod[data-cat="Location"]   { --eod-c: var(--nation-britannia); }
  .codex-eod-head {
    display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
    position: relative; z-index: 1;
  }
  .codex-eod-badge {
    font-family: 'JetBrains Mono', monospace; font-size: 7px; letter-spacing: 0.32em;
    text-transform: uppercase; color: var(--eod-c, var(--gold-dim));
    border: 1px solid color-mix(in srgb, var(--eod-c, var(--gold-dim)) 48%, transparent);
    background: color-mix(in srgb, var(--eod-c, var(--gold-dim)) 9%, transparent);
    padding: 2px 8px; flex-shrink: 0;
  }
  .codex-eod-date {
    font-family: 'JetBrains Mono', monospace; font-size: 7px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--text-muted); margin-left: auto; flex-shrink: 0;
  }
  .codex-eod-body { position: relative; z-index: 1; }
  .codex-eod-cat {
    font-family: 'Cinzel', serif; font-size: 7.5px; letter-spacing: 0.38em; text-transform: uppercase;
    color: var(--eod-c, var(--gold-dim)); margin-bottom: 4px;
  }
  .codex-eod-title {
    font-family: 'Cinzel', serif; font-size: clamp(14px, 2vw, 19px); font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold-bright);
    line-height: 1.1; margin-bottom: 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .codex-eod-title em { font-style: italic; font-weight: 400; color: var(--gold); }
  .codex-eod-excerpt {
    font-family: 'Inter', sans-serif; font-size: 11.5px; font-style: italic; font-weight: 300;
    color: var(--text-sub); line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-bottom: 9px;
  }
  .codex-eod-cta {
    font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--gold-dim); transition: color 0.2s;
    display: inline-flex; align-items: center; gap: 7px;
  }
  .codex-eod:hover .codex-eod-cta { color: var(--eod-c, var(--gold-light)); }

  /* Improved EOD visual treatment */
  .codex-eod { position: relative; overflow: hidden; }
  .codex-eod::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 100% at 0% 50%, rgba(196,155,60,0.06), transparent 65%);
    pointer-events: none;
  }
  .codex-eod[data-cat="Power"]::before      { background: radial-gradient(ellipse 60% 100% at 0% 50%, rgba(130,80,200,0.06), transparent 65%); }
  .codex-eod[data-cat="Phenomenon"]::before { background: radial-gradient(ellipse 60% 100% at 0% 50%, rgba(60,160,90,0.06), transparent 65%); }
  .codex-eod[data-cat="History"]::before    { background: radial-gradient(ellipse 60% 100% at 0% 50%, rgba(220,100,80,0.06), transparent 65%); }
  .codex-eod[data-cat="Location"]::before   { background: radial-gradient(ellipse 60% 100% at 0% 50%, rgba(80,160,220,0.06), transparent 65%); }

  /* ── ENTRY OF THE DAY — full-width spotlight band ───────── */
  .codex-day-band {
    position: relative; overflow: hidden;
    background: color-mix(in srgb, var(--bg2) 80%, var(--bg));
    border-top: 1px solid color-mix(in srgb, var(--cdb-c, var(--gold-dim)) 22%, var(--border));
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
    border-left: 4px solid color-mix(in srgb, var(--cdb-c, var(--gold-dim)) 70%, transparent);
    margin-bottom: 0;
  }
  .codex-day-band[data-cat="Artifact"]   { --cdb-c: var(--gold-light); }
  .codex-day-band[data-cat="Power"]      { --cdb-c: var(--accent-purple); }
  .codex-day-band[data-cat="Phenomenon"] { --cdb-c: var(--accent-moss); }
  .codex-day-band[data-cat="History"]    { --cdb-c: var(--nation-frysia); }
  .codex-day-band[data-cat="Location"]   { --cdb-c: var(--nation-britannia); }
  .codex-day-band:not([data-cat]) { --cdb-c: var(--gold-dim); }
  .cdb-glow {
    position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(ellipse 55% 120% at 8% 50%,
        color-mix(in srgb, var(--cdb-c, var(--gold-dim)) 9%, transparent), transparent 60%),
      radial-gradient(ellipse 30% 80% at 92% 50%,
        color-mix(in srgb, var(--cdb-c, var(--gold-dim)) 5%, transparent), transparent 60%);
  }
  .cdb-inner {
    position: relative; z-index: 1;
    max-width: 1180px; margin: 0 auto;
    padding: 52px var(--page-pad, 40px);
    display: flex; gap: 56px; align-items: center;
  }
  .cdb-left { flex: 1; min-width: 0; }
  .cdb-meta {
    display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  }
  .cdb-badge {
    font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--cdb-c, var(--gold-dim));
    border: 1px solid color-mix(in srgb, var(--cdb-c, var(--gold-dim)) 48%, transparent);
    background: color-mix(in srgb, var(--cdb-c, var(--gold-dim)) 9%, transparent);
    padding: 3px 10px;
  }
  .cdb-sep {
    width: 1px; height: 12px; flex-shrink: 0;
    background: color-mix(in srgb, var(--cdb-c, var(--gold-dim)) 35%, var(--border));
  }
  .cdb-date {
    font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--text-muted);
  }
  .cdb-cat {
    font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--cdb-c, var(--gold-dim)); margin-bottom: 8px;
    opacity: 0.85;
  }
  .cdb-title {
    font-family: 'Cinzel', serif; font-weight: 700;
    font-size: clamp(26px, 3.5vw, 44px);
    letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--gold-bright); margin: 0 0 16px; line-height: 1.2;
  }
  .cdb-title em { font-style: italic; font-weight: 400; color: var(--cdb-c, var(--gold-light)); }
  .cdb-excerpt {
    font-family: 'Inter', sans-serif; font-size: 14px;
    font-style: italic;
    line-height: 1.72; color: var(--text-sub);
    max-width: 580px; margin: 0 0 24px;
    border-left: 2px solid color-mix(in srgb, var(--cdb-c, var(--gold-dim)) 30%, transparent);
    padding-left: 16px;
  }
  .cdb-cta {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.22em;
    text-transform: uppercase; text-decoration: none;
    color: var(--cdb-c, var(--gold-light));
    border: 1px solid color-mix(in srgb, var(--cdb-c, var(--gold-light)) 45%, transparent);
    padding: 9px 20px; transition: background 0.2s, color 0.2s;
  }
  .cdb-cta:hover {
    background: color-mix(in srgb, var(--cdb-c, var(--gold-light)) 12%, transparent);
    color: var(--gold-bright);
  }
  .cdb-vis {
    flex-shrink: 0; width: clamp(100px, 12vw, 140px); height: clamp(100px, 12vw, 140px); position: relative;
    background: color-mix(in srgb, var(--cdb-c, var(--gold-dim)) 6%, var(--bg2));
    border: 1px solid color-mix(in srgb, var(--cdb-c, var(--gold-dim)) 24%, transparent);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    overflow: hidden;
  }
  .cdb-vis-glow {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 80% 80% at 50% 50%, color-mix(in srgb, var(--cdb-c, var(--gold-dim)) 14%, transparent), transparent 70%);
    animation: cdbGlowPulse 3s ease-in-out infinite alternate;
  }
  @keyframes cdbGlowPulse {
    from { opacity: 0.6; }
    to   { opacity: 1; }
  }
  .cdb-vis-icon {
    position: relative; z-index: 1;
    width: 36px; height: 36px; flex-shrink: 0;
    color: color-mix(in srgb, var(--cdb-c, var(--gold-dim)) 70%, var(--gold-bright));
  }
  .cdb-vis-icon svg { width: 100%; height: 100%; }
  .cdb-vis-initial {
    position: relative; z-index: 1;
    font-family: 'Cinzel', serif; font-size: clamp(22px, 4vw, 32px); font-weight: 700; line-height: 1;
    color: color-mix(in srgb, var(--cdb-c, var(--gold-dim)) 40%, transparent);
  }
  .cdb-vis-time {
    position: relative; z-index: 1;
    font-family: 'JetBrains Mono', monospace; font-size: 7.5px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--text-muted);
  }
  @media (max-width: 640px) {
    .cdb-inner { flex-direction: column; gap: 22px; padding: 28px 20px; }
    .cdb-vis { width: 72px; height: 72px; }
    .cdb-vis-icon { width: 26px; height: 26px; }
    .cdb-vis-initial { font-size: 20px; }
  }

  /* ── DISCOVER CTA ─────────────────────────────────── */
  .codex-discover-cta {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    padding: 14px 0 10px; margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
  }
  .cdc-btn {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--gold-dim);
    background: var(--bg2); border: 1px solid var(--border);
    padding: 10px 20px; cursor: pointer;
    transition: color 0.25s, background 0.25s, border-color 0.25s;
  }
  .cdc-btn:hover {
    color: var(--gold-bright); background: var(--bg3);
    border-color: color-mix(in srgb, var(--gold-dim) 50%, transparent);
  }
  .cdc-btn svg { opacity: 0.7; transition: opacity 0.25s; }
  .cdc-btn:hover svg { opacity: 1; }
  .cdc-hint {
    font-family: 'Inter', sans-serif; font-size: 12px; font-style: italic;
    color: var(--text-muted);
  }
  @media (max-width: 600px) { .cdc-hint { display: none; } }

  /* ── ALPHABET JUMP BAR ────────────────────────────────────── */
  .codex-az-bar {
    display: flex; flex-wrap: wrap; align-items: center;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--gold-dim) 2%, var(--bg));
    padding: 3px 6px; margin-bottom: 0;
    gap: 0;
  }
  .caz-btn {
    min-width: 26px; height: 26px;
    background: none; border: none; cursor: pointer;
    font-family: 'JetBrains Mono', monospace; font-size: 8.5px;
    text-transform: uppercase; color: var(--text-muted);
    transition: color 0.15s, background 0.15s;
    display: flex; align-items: center; justify-content: center;
    border-radius: 2px;
  }
  .caz-btn:hover:not(:disabled) {
    color: var(--gold-light);
    background: color-mix(in srgb, var(--gold-dim) 12%, transparent);
  }
  .caz-btn.caz-active {
    color: var(--gold-bright);
    background: color-mix(in srgb, var(--gold-dim) 16%, transparent);
    box-shadow: inset 0 -1px 0 var(--gold-dim);
  }
  .caz-btn:disabled { color: var(--text-muted); opacity: 0.2; cursor: default; pointer-events: none; }
  .caz-divider { width: 1px; height: 14px; background: var(--border); margin: 0 4px; flex-shrink: 0; align-self: center; }
  @media (max-width: 600px) {
    .caz-btn { min-width: 20px; height: 24px; font-size: 7.5px; }
  }

  /* ── HERO SEARCH AUTO-SUGGEST ──────────────────────────── */
  .lh-search-wrap { position: relative; }
  .lh-suggest {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    background: var(--bg2); border: 1px solid var(--border);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    z-index: 120; max-height: 280px; overflow-y: auto;
    opacity: 0; pointer-events: none; transform: translateY(-4px);
    transition: opacity 0.18s, transform 0.18s;
  }
  .lh-suggest.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .lh-suggest-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 16px; cursor: pointer;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
    text-decoration: none; transition: background 0.15s;
  }
  .lh-suggest-item:last-child { border-bottom: none; }
  .lh-suggest-item:hover,
  .lh-suggest-item.is-focused { background: color-mix(in srgb, var(--gold-dim) 8%, var(--bg2)); }
  .lh-suggest-cat {
    font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ec, var(--gold-dim));
    flex-shrink: 0; white-space: nowrap;
  }
  .lh-suggest-title {
    font-family: 'Inter', sans-serif; font-size: 12px;
    color: var(--gold-light); line-height: 1.3; flex: 1;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  .lh-suggest-title mark { background: none; color: var(--gold-bright); font-weight: 600; }
  .lh-suggest-empty {
    padding: 14px 16px;
    font-family: 'Inter', sans-serif; font-size: 12px; font-style: italic;
    color: var(--text-muted);
  }

  /* ── DEPTH TIER BADGE ON ENTRY CARDS ───────────────────── */
  .le-tier {
    position: absolute; bottom: 8px; left: 10px;
    font-family: 'JetBrains Mono', monospace; font-size: 7px;
    letter-spacing: 0.14em; text-transform: uppercase;
    padding: 3px 8px; border: 1px solid currentColor;
    color: var(--text-muted); opacity: 0.75;
    pointer-events: none; z-index: 2;
    background: color-mix(in srgb, var(--bg) 70%, transparent);
  }
  .le-tier--foundation { color: var(--gold-light); background: color-mix(in srgb, var(--gold-dim) 18%, transparent); padding: 1px 5px; }
  .le-tier--core       { color: var(--ec, var(--gold-dim)); }
  .le-tier--lore       { color: var(--text-muted); }
  .le-tier--hidden     { color: var(--gold-dim); opacity: 0.55; }
  /* Spotlight tier is a bit different (larger visual header) */
  .lore-entry.spotlight .le-tier,
  .lore-entry.filter-spotlight .le-tier { font-size: 8px; }
  /* Foundation entries — gold left accent, richer visual header, subtle glow */
  .lore-entry.le-entry--foundation {
    border-left: 3px solid color-mix(in srgb, var(--gold) 72%, transparent);
    box-shadow: -4px 0 24px color-mix(in srgb, var(--gold-dim) 8%, transparent),
                inset 0 0 0 0 transparent;
    background: color-mix(in srgb, var(--bg2) 96%, var(--gold-dim) 4%);
  }
  .lore-entry.le-entry--foundation .le-visual {
    border-bottom: 1px solid color-mix(in srgb, var(--ec, var(--gold-dim)) 18%, transparent);
  }
  .lore-entry.le-entry--foundation .le-tier--foundation {
    background: color-mix(in srgb, var(--gold-dim) 22%, transparent);
    color: var(--gold-light); border: 1px solid color-mix(in srgb, var(--gold-dim) 32%, transparent);
    padding: 2px 7px;
  }

  /* ── CONNECTION COUNT BADGE (top-right of visual header) ── */
  .le-vis-conn {
    position: absolute; top: 8px; right: 8px; z-index: 3;
    display: flex; align-items: center; gap: 4px;
    font-family: var(--font-mono); font-size: 7px;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ec, var(--gold-dim)); opacity: 0.55;
    padding: 3px 7px 3px 5px;
    border: 1px solid color-mix(in srgb, var(--ec, var(--gold-dim)) 22%, transparent);
    background: color-mix(in srgb, var(--bg) 68%, transparent);
    backdrop-filter: blur(4px);
    pointer-events: none; transition: opacity 0.22s;
  }
  .le-vis-conn svg { flex-shrink: 0; }
  .lore-entry:hover .le-vis-conn { opacity: 1; }

  /* ── READING JOURNEY BADGE ─────────────────────────────── */
  .le-journey-badge {
    position: absolute; bottom: 8px; right: 10px; z-index: 3;
    display: flex; align-items: center; gap: 4px;
    font-family: var(--font-mono); font-size: 7px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--gold-light); opacity: 0.62;
    padding: 2px 8px; border: 1px solid color-mix(in srgb, var(--gold-light) 26%, transparent);
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    pointer-events: none; transition: opacity 0.2s;
  }
  .lore-entry:hover .le-journey-badge { opacity: 1; }

  /* ── PORTAL DESCRIPTIONS — more readable and visible ─── */
  .cpt-desc { font-size: 12px; line-height: 1.65; margin-top: 12px; opacity: 1; }
  .cp-tile { min-height: 240px; }

  /* ── WHERE TO START — more editorial card treatment ─────── */
  .cps-card { padding: 28px 26px 24px; min-height: 220px; }
  .cps-question { font-size: 15px; line-height: 1.25; }
  .cps-answer { font-size: 12.5px; line-height: 1.7; margin-top: 8px; }
  .cps-num { font-size: 11px; letter-spacing: 0.12em; margin-bottom: 12px; }
  .cps-cta { margin-top: 20px; font-size: 9px; }

  /* ── ENTRY OF THE DAY — larger visual accent ────────────── */
  .cdb-vis { width: clamp(120px, 14vw, 160px); height: clamp(120px, 14vw, 160px); }
  .cdb-vis-icon { width: 44px; height: 44px; }
  .cdb-vis-initial { font-size: clamp(28px, 5vw, 40px); }
  .cdb-inner { padding: 52px 56px; gap: 64px; }
  @media (max-width: 640px) {
    .cdb-inner { padding: 32px 20px; gap: 28px; }
    .cdb-vis { width: 78px; height: 78px; }
    .cdb-vis-icon { width: 28px; height: 28px; }
    .cdb-vis-initial { font-size: 22px; }
  }

  .lh-network-cta {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
    font-family: 'Cinzel', serif; font-size: 8.5px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--gold-dim); text-decoration: none;
    transition: color 0.22s;
  }
  .lh-network-cta:hover { color: var(--gold-light); }
  .lh-network-cta svg { flex-shrink: 0; color: var(--gold-dim); transition: color 0.22s; }
  .lh-network-cta:hover svg { color: var(--gold-light); }

  /* ── NEW READER GUIDE — subtle guide below search ──────── */
  .lh-new-reader {
    display: flex; align-items: center; gap: 10px;
    margin: 12px 0 8px; flex-wrap: wrap;
  }
  .lh-nr-text {
    font-family: 'Inter', sans-serif; font-size: 11px; font-style: italic;
    color: var(--text-muted); flex-shrink: 0;
  }
  .lh-nr-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--gold-dim); text-decoration: none;
    transition: color 0.2s;
  }
  .lh-nr-link:hover { color: var(--gold-light); }

  /* ── ENTRY BODY — always show on touch/mobile ──────────── */
  @media (hover: none) {
    .lore-entry .le-body { max-height: calc(4 * 1.8 * 14px); }
    .lore-entry .le-read { color: var(--gold-dim); }
    .lore-entry .le-read svg { opacity: 0.7; transform: none; }
  }

  /* ── CURATED READING JOURNEYS ──────────────────────────────── */
  .codex-journeys {
    padding: 72px 0 80px;
    background: color-mix(in srgb, var(--bg2) 75%, var(--bg));
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
  }
  .codex-journeys .cj-head,
  .codex-journeys .cj-cards {
    max-width: 1200px; margin: 0 auto;
    padding-left: var(--page-pad, 56px);
    padding-right: var(--page-pad, 56px);
  }
  .cj-head {
    display: flex; align-items: baseline; gap: 20px; margin-bottom: 32px;
  }
  .cj-head-label {
    font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.44em; text-transform: uppercase;
    color: var(--gold); white-space: nowrap;
  }
  .cj-head-line {
    flex: 1; height: 1px;
    background: linear-gradient(to right, var(--border), transparent);
  }
  .cj-head-desc {
    font-family: 'Inter', sans-serif; font-size: 12px; font-style: italic;
    color: var(--text-muted); white-space: nowrap;
  }
  .cj-cards {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 2px;
  }
  .cj-card {
    background: var(--bg2); padding: 0;
    border-top: 3px solid var(--cj-accent, var(--gold-dim));
    display: flex; flex-direction: column;
    transition: background 0.22s, border-top-color 0.22s;
    position: relative; overflow: hidden;
  }
  .cj-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100px; pointer-events: none;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--cj-accent, var(--gold-dim)) 10%, transparent), transparent);
  }
  /* Large decorative numeral — watermark in top-right corner */
  .cj-card::after {
    content: attr(data-n);
    position: absolute; right: 18px; top: 8px; z-index: 0; pointer-events: none; user-select: none;
    font-family: 'Cinzel', serif; font-size: 88px; font-weight: 700; line-height: 1;
    color: color-mix(in srgb, var(--cj-accent, var(--gold-dim)) 7%, transparent);
    letter-spacing: -0.02em; transition: color 0.4s;
  }
  .cj-card:hover { background: var(--bg3); }
  .cj-card:hover::after { color: color-mix(in srgb, var(--cj-accent, var(--gold-dim)) 13%, transparent); }
  .cj-card-top { padding: 26px 28px 0; position: relative; z-index: 1; }
  .cj-number {
    font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 0.36em; text-transform: uppercase;
    color: var(--cj-accent, var(--gold-dim)); margin-bottom: 12px;
    display: flex; align-items: center; gap: 10px;
  }
  .cj-number::before { content: ''; width: 16px; height: 1px; background: var(--cj-accent, var(--gold-dim)); opacity: 0.5; flex-shrink: 0; }
  .cj-title {
    font-family: 'Cinzel', serif; font-size: 20px; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold-bright);
    line-height: 1.15; margin-bottom: 10px;
  }
  .cj-desc {
    font-family: 'Inter', sans-serif; font-size: 13px; font-style: italic;
    line-height: 1.65; color: var(--text-sub); padding-bottom: 18px;
  }
  .cj-steps {
    display: flex; flex-direction: column; gap: 0;
    border-top: 1px solid var(--border);
    padding: 18px 28px 0;
    position: relative; z-index: 1;
  }
  /* Vertical path connector between step dots */
  .cj-steps::before {
    content: '';
    position: absolute; left: calc(28px + 20px + 14px + 2px); top: 18px; bottom: 24px; width: 1px;
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--cj-accent, var(--gold-dim)) 40%, transparent),
      color-mix(in srgb, var(--cj-accent, var(--gold-dim)) 15%, transparent) 80%,
      transparent);
    pointer-events: none;
  }
  .cj-step {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
    text-decoration: none;
    transition: background 0.18s;
  }
  .cj-step:last-child { border-bottom: none; padding-bottom: 0; }
  .cj-step-num {
    font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.1em;
    color: var(--gold-dim); flex-shrink: 0; width: 20px; text-align: right;
  }
  .cj-step-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--sc, var(--gold-dim)); flex-shrink: 0;
    box-shadow: 0 0 8px color-mix(in srgb, var(--sc, var(--gold-dim)) 65%, transparent);
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative; z-index: 1;
  }
  .cj-step:hover .cj-step-dot {
    transform: scale(1.6);
    box-shadow: 0 0 12px color-mix(in srgb, var(--sc, var(--gold-dim)) 80%, transparent);
  }
  .cj-step-info { flex: 1; min-width: 0; }
  .cj-step-title {
    font-family: 'Cinzel', serif; font-size: 13px; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold-bright);
    line-height: 1.2; transition: color 0.18s;
  }
  .cj-step-title em { font-style: italic; font-weight: 400; color: var(--gold-light); }
  .cj-step:hover .cj-step-title { color: var(--gold-bright); text-decoration: underline; text-decoration-color: var(--gold-dim); }
  .cj-step-cat {
    font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--sc, var(--gold-dim)); margin-top: 2px;
  }
  .cj-step-arr {
    color: var(--gold-dim); flex-shrink: 0; opacity: 0; transition: opacity 0.18s;
  }
  .cj-step:hover .cj-step-arr { opacity: 1; }
  /* Start Journey CTA at card base */
  .cj-start {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 28px 22px; margin-top: auto;
    text-decoration: none; gap: 12px;
    border-top: 1px solid color-mix(in srgb, var(--cj-accent, var(--gold-dim)) 30%, var(--border));
    background: color-mix(in srgb, var(--cj-accent, var(--gold-dim)) 4%, transparent);
    transition: background 0.22s;
  }
  .cj-start:hover { background: color-mix(in srgb, var(--cj-accent, var(--gold-dim)) 10%, transparent); }
  .cj-start-label {
    font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--cj-accent, var(--gold-dim)); transition: color 0.18s;
  }
  .cj-start:hover .cj-start-label { color: var(--gold-bright); }
  .cj-start-arr {
    color: var(--cj-accent, var(--gold-dim)); flex-shrink: 0; transition: transform 0.22s, color 0.18s;
  }
  .cj-start:hover .cj-start-arr { transform: translateX(5px); color: var(--gold-bright); }

  /* Category dot colors for steps */
  .cj-step[data-cat="Artifact"]   { --sc: var(--gold-light); }
  .cj-step[data-cat="Power"]      { --sc: var(--accent-purple); }
  .cj-step[data-cat="Phenomenon"] { --sc: var(--accent-moss); }
  .cj-step[data-cat="History"]    { --sc: var(--nation-frysia); }
  .cj-step[data-cat="Location"]   { --sc: var(--nation-britannia); }

  /* Journey accent colors */
  .cj-card[data-journey="origins"]           { --cj-accent: var(--gold-light); }
  .cj-card[data-journey="weight-of-history"] { --cj-accent: var(--nation-frysia); }
  .cj-card[data-journey="what-lies-beneath"] { --cj-accent: var(--accent-moss); }

  /* ── JOURNEY VISUAL HEADER ──────────────────────────────── */
  .cj-visual {
    height: 112px; position: relative; overflow: hidden;
    display: flex; align-items: flex-end; padding: 16px 28px;
    flex-shrink: 0; border-bottom: 1px solid color-mix(in srgb, var(--cj-accent, var(--gold-dim)) 18%, var(--border));
  }
  .cj-visual::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(145deg,
      color-mix(in srgb, var(--cj-accent, var(--gold-dim)) 22%, transparent),
      color-mix(in srgb, var(--cj-accent, var(--gold-dim)) 8%, transparent) 45%,
      transparent 75%);
  }
  /* Fine dot grid — like aged paper with a coordinate system */
  .cj-visual::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
      radial-gradient(circle, color-mix(in srgb, var(--cj-accent, var(--gold-dim)) 50%, transparent) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.18;
  }
  /* Journey completion progress row */
  .cj-progress-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 20px 6px; border-bottom: 1px solid var(--border);
  }
  .cj-progress-bar {
    flex: 1; height: 2px; background: var(--border); border-radius: 1px; overflow: hidden;
  }
  .cj-progress-fill {
    height: 100%; width: 0; border-radius: 1px;
    background: color-mix(in srgb, var(--gold-light) 70%, transparent);
    transition: width 0.6s cubic-bezier(0.15,0,0.2,1);
  }
  .cj-progress-pct {
    font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--text-muted); white-space: nowrap; flex-shrink: 0;
  }
  .cj-vis-big-num {
    position: relative; z-index: 1;
    font-family: 'Cinzel', serif; font-size: 64px; font-weight: 700; line-height: 0.85;
    color: color-mix(in srgb, var(--cj-accent, var(--gold-dim)) 28%, transparent);
    letter-spacing: -0.02em; user-select: none; margin-right: auto; pointer-events: none;
  }
  .cj-vis-steps {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; gap: 5px; align-items: flex-end; padding-bottom: 2px;
  }
  .cj-vis-step {
    position: relative;
    width: 7px; height: 7px; border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--cj-accent, var(--gold-dim)) 45%, transparent);
    background: transparent; transition: background 0.35s, box-shadow 0.35s;
  }
  .cj-vis-step.is-visited {
    background: var(--cj-accent, var(--gold-dim));
    border-color: var(--cj-accent, var(--gold-dim));
    box-shadow: 0 0 8px color-mix(in srgb, var(--cj-accent, var(--gold-dim)) 65%, transparent);
  }
  /* Connecting line between waypoint dots */
  .cj-vis-step + .cj-vis-step::before {
    content: ''; position: absolute; top: 50%; left: -16px;
    width: 12px; height: 1px;
    background: linear-gradient(to right, color-mix(in srgb, var(--gold-dim) 35%, transparent), color-mix(in srgb, var(--gold-dim) 55%, transparent));
    transform: translateY(-50%);
  }
  .cj-vis-step.is-visited + .cj-vis-step.is-visited::before {
    background: linear-gradient(to right, var(--accent), var(--accent));
    opacity: 0.7;
  }
  /* Suppress the old ::before gradient — .cj-visual now owns that role */
  .cj-card::before { display: none; }
  /* Tighten card-top since visual header already has top breathing room */
  .cj-card-top { padding-top: 18px; }

  @media (max-width: 700px) {
    .cj-cards { grid-template-columns: 1fr; }
    .cj-head-desc { display: none; }
    .cj-visual { height: 90px; }
  }

  /* On wider screens, keep the teaser subtitle always visible (not just on hover)
     — reduces friction for discovering what each entry is about */
  @media (min-width: 900px) {
    .le-vis-teaser { opacity: 0.72; }
    .lore-entry:hover .le-vis-teaser { opacity: 1; }
  }

  /* ── FIRST READS — curated starting point for new visitors ── */
  .codex-first-reads {
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--gold-dim) 3%, var(--bg));
  }
  .cfr-inner {
    max-width: 1200px; margin: 0 auto;
    padding: 56px var(--page-pad, 40px);
  }
  .cfr-head { margin-bottom: 36px; }
  .cfr-eyebrow {
    font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.5em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 10px;
    display: flex; align-items: center; gap: 14px;
  }
  .cfr-eyebrow::before { content: ''; flex-shrink: 0; width: 22px; height: 1px; background: var(--gold-dim); }
  .cfr-title {
    font-family: 'Cinzel', serif; font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--gold-bright); margin: 0 0 10px; line-height: 1.1;
  }
  .cfr-title em { font-style: italic; font-weight: 400; color: var(--gold-light); }
  .cfr-desc {
    font-family: 'Inter', sans-serif; font-style: italic; font-size: 14px;
    color: var(--text-sub); line-height: 1.65; max-width: 460px;
  }
  .cfr-cards {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  }
  .cfr-card {
    display: flex; flex-direction: column; gap: 0;
    background: var(--bg2); padding: 0;
    text-decoration: none; position: relative; overflow: hidden;
    border-bottom: 2px solid var(--border);
    transition: background 0.22s, border-color 0.22s, transform 0.22s;
  }
  .cfr-card:hover { background: var(--bg3); border-color: var(--gold-dim); transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.35); }
  /* Visual header — atmospheric, per-category */
  .cfr-card-visual {
    position: relative; height: 110px; overflow: hidden; flex-shrink: 0;
    background: var(--bg);
    border-bottom: 1px solid color-mix(in srgb, var(--cfrc, var(--gold-dim)) 15%, transparent);
  }
  .cfr-card[data-cat="Artifact"]   .cfr-card-visual { background: linear-gradient(135deg, rgba(30,22,8,0.9), rgba(48,36,12,0.7) 50%, rgba(20,15,5,0.95)), radial-gradient(ellipse 70% 80% at 75% 30%, rgba(196,155,60,0.28), transparent 62%); }
  .cfr-card[data-cat="Power"]      .cfr-card-visual { background: linear-gradient(135deg, rgba(18,10,30,0.9), rgba(38,18,58,0.6) 50%, rgba(10,5,20,0.95)), radial-gradient(ellipse 70% 80% at 75% 30%, rgba(130,80,200,0.28), transparent 62%); }
  .cfr-card[data-cat="Phenomenon"] .cfr-card-visual { background: linear-gradient(135deg, rgba(8,22,12,0.9), rgba(18,48,22,0.6) 50%, rgba(5,15,8,0.95)), radial-gradient(ellipse 70% 80% at 75% 30%, rgba(60,160,90,0.28), transparent 62%); }
  .cfr-card[data-cat="History"]    .cfr-card-visual { background: linear-gradient(135deg, rgba(28,12,8,0.9), rgba(58,22,12,0.6) 50%, rgba(18,6,4,0.95)), radial-gradient(ellipse 70% 80% at 75% 30%, rgba(220,100,80,0.28), transparent 62%); }
  .cfr-card[data-cat="Location"]   .cfr-card-visual { background: linear-gradient(135deg, rgba(6,16,26,0.9), rgba(12,34,54,0.6) 50%, rgba(4,10,18,0.95)), radial-gradient(ellipse 70% 80% at 75% 30%, rgba(80,160,220,0.28), transparent 62%); }
  /* Grid texture overlay on visual header */
  .cfr-card-visual::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
      linear-gradient(color-mix(in srgb, var(--cfrc, var(--gold-dim)) 6%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, var(--cfrc, var(--gold-dim)) 6%, transparent) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, transparent 60%);
    mask-image: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, transparent 60%);
  }
  /* Category eyebrow label in visual header */
  .cfr-card-vis-num {
    font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 0.44em; text-transform: uppercase;
    color: var(--cfrc, var(--gold-dim)); opacity: 0.9;
    position: absolute; top: 14px; left: 18px; z-index: 1;
  }
  .cfr-card-vis-initial {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    font-family: 'Cinzel', serif; font-size: 52px; font-weight: 700; line-height: 1;
    color: var(--cfrc, var(--gold-dim)); opacity: 0.14;
    text-transform: uppercase; letter-spacing: -0.02em;
    user-select: none; pointer-events: none;
  }
  .cfr-card:hover .cfr-card-vis-initial { opacity: 0.22; }
  .cfr-card-body { flex: 1; padding: 22px 24px 18px; }
  .cfr-cat {
    font-family: 'Cinzel', serif; font-size: 7.5px; letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--cfrc, var(--gold-dim)); margin-bottom: 8px;
  }
  .cfr-card-title {
    font-family: 'Cinzel', serif; font-size: clamp(14px, 1.5vw, 18px); font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold-bright);
    line-height: 1.2; margin-bottom: 10px;
  }
  .cfr-card-title em { font-style: italic; font-weight: 400; color: var(--gold-light); }
  .cfr-card-sub {
    font-family: 'Inter', sans-serif; font-style: italic; font-size: 12px;
    color: var(--text-sub); line-height: 1.6; margin-bottom: 12px;
  }
  .cfr-card-meta {
    font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--text-muted);
  }
  .cfr-card-cta {
    display: flex; align-items: center; gap: 8px; margin-top: 20px; padding-top: 16px;
    border-top: 1px solid var(--border);
    font-family: 'Cinzel', serif; font-size: 8.5px; letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--gold-dim); transition: color 0.18s, gap 0.18s;
  }
  .cfr-card:hover .cfr-card-cta { color: var(--gold-light); gap: 12px; }
  @media (max-width: 720px) {
    .cfr-cards { grid-template-columns: 1fr; }
    .cfr-card-visual { height: 80px; }
  }

  /* ── READING PROGRESS — visited entry indicator ──────── */
  .lore-entry.le--visited { position: relative; }
  .lore-entry.le--visited::before {
    content: '';
    position: absolute; top: 12px; right: 12px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--gold-dim);
    box-shadow: 0 0 8px var(--gold-dim);
    z-index: 2;
  }