/* ════════════════════════════════════════════════════════
     ACT 1 — HERO. Two-zone split: identity left, map right.
     Full viewport, dark and cinematic. Works across all three
     map-rendering modes (Living Atlas iframe / img_bg / emblem-only).
     ════════════════════════════════════════════════════════ */
  .nh-hero2 {
    position: relative; min-height: clamp(640px, 96svh, 1180px);
    display: flex; overflow: hidden;
    border-bottom: 1px solid var(--border); background: #05070d;
  }
  .nh-hero2-id {
    position: relative; z-index: 3; flex: 0 0 40%; max-width: 560px;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    padding: 0 clamp(28px, 5vw, 76px);
  }
  /* Warm radial glow behind the medallion — no frame, no ring */
  .nh-hero2-glow {
    position: absolute; z-index: -1;
    width: clamp(280px, 32vw, 460px); aspect-ratio: 1;
    left: clamp(0px, 2vw, 40px); top: 50%; transform: translateY(-58%);
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent) 0%, transparent 68%);
    filter: blur(6px); pointer-events: none;
  }
  .nh-hero2-crest { margin-bottom: 30px; opacity: 0; transform: translateY(10px); animation: nhUp 0.8s 0.1s var(--ease-out) both; }
  .nh-hero2-crest .nsigil-art { object-fit: contain; }
  .nh-hero2-eyebrow {
    font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.42em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 16px; opacity: 0; animation: nhUp 0.7s 0.25s both;
    display: flex; align-items: center; gap: 16px;
  }
  .nh-hero2-eyebrow::before { content: ''; width: 30px; height: 1px; background: var(--accent); opacity: 0.7; flex-shrink: 0; }
  .nh-hero2-name {
    font-family: 'Cinzel', serif; font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 700;
    letter-spacing: 0.03em; text-transform: uppercase; line-height: 0.98; margin: 0;
    /* Metallic gradient text — falls back to plain accent colour where
       background-clip:text isn't supported. */
    color: var(--accent);
    background: linear-gradient(155deg, var(--gold-bright) 0%, var(--gold-bright) 22%, var(--accent) 62%, color-mix(in srgb, var(--accent) 55%, var(--gold-dim)) 100%);
    background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    text-shadow: 0 4px 60px rgba(0,0,0,0.7);
    opacity: 0; transform: translateY(14px); animation: nhUp 0.9s 0.4s both;
  }
  @supports not (background-clip: text) {
    .nh-hero2-name { -webkit-text-fill-color: initial; color: var(--accent); }
  }
  .nh-hero2-motto {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--text-muted); margin: 24px 0 0; max-width: 400px; line-height: 1.8;
    opacity: 0; animation: nhUp 0.7s 0.6s both;
  }
  .nh-hero2-save { margin-top: 22px; opacity: 0; animation: nhUp 0.7s 0.75s both; }
  @keyframes nhUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

  /* ── Right zone — the map, bled to the edge with no frame ── */
  .nh-hero2-map {
    position: relative; flex: 1 1 60%; overflow: hidden;
    min-height: clamp(420px, 96svh, 1180px);
  }
  .nh-hero2-map iframe.nh-hero-map,
  .nh-hero2-map .nh-hero-bg,
  .nh-hero2-map .nh-hero-atmo {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
  }
  .nh-hero-map { pointer-events: none; filter: brightness(0.55) saturate(0.88) contrast(1.04); }
  .nh-hero-bg { background-size: cover; background-position: center; will-change: transform;
    transform: translateY(var(--hero-par, 0)); inset: -40px -20px; }
  .nh-hero2-map--emblem .nh-hero-bg { inset: -160px; background-position: center 30%;
    filter: blur(40px) brightness(0.5) saturate(0.92);
    transform: translateY(var(--hero-par, 0)) scale(1.26); }
  .nh-hero-atmo {
    background:
      linear-gradient(rgba(130,110,60,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(130,110,60,0.035) 1px, transparent 1px),
      radial-gradient(ellipse 80% 60% at 30% 30%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%),
      var(--bg);
    background-size: 64px 64px, 64px 64px, auto, auto;
  }
  /* Mask the map into darkness — no visible frame/border. Left edge blends
     into the identity column; top/bottom fade toward the ambient bg. */
  .nh-hero2-map::before {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background:
      linear-gradient(to right, #05070d 0%, rgba(5,7,13,0.72) 12%, transparent 34%),
      linear-gradient(to bottom, rgba(5,7,13,0.55) 0%, transparent 18%, transparent 74%, rgba(5,7,13,0.7) 100%);
  }
  .nh-hero2-map--loud::before { opacity: 0.55; } /* feature mode: veil handles most of the darkening already */

  /* ── Bottom-center scroll indicator ── */
  .nh-hero2-scroll {
    position: absolute; z-index: 4; left: 50%; bottom: clamp(20px, 4vh, 36px); transform: translateX(-50%);
    width: 26px; height: 44px; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--gold-light) 45%, transparent);
    display: flex; justify-content: center; padding-top: 8px;
    opacity: 0.75; animation: nhUp 0.8s 1.1s both;
  }
  .nh-hero2-scroll span {
    width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent);
    animation: nhScrollDot 1.8s ease-in-out infinite;
  }
  @keyframes nhScrollDot {
    0% { transform: translateY(0); opacity: 1; }
    70% { transform: translateY(18px); opacity: 0; }
    71% { transform: translateY(0); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .nh-hero2-scroll span { animation: none; }
    .nh-hero2-crest, .nh-hero2-eyebrow, .nh-hero2-name, .nh-hero2-motto, .nh-hero2-save, .nh-hero2-scroll { animation: none; opacity: 1; transform: none; }
  }

  @media (max-width: 860px) {
    .nh-hero2 { flex-direction: column; min-height: auto; }
    .nh-hero2-id { flex: 0 0 auto; max-width: none; width: 100%; align-items: center; text-align: center;
      padding: clamp(48px, 9vh, 72px) var(--page-pad) clamp(28px, 5vh, 44px); }
    .nh-hero2-glow { left: 50%; top: 40%; transform: translate(-50%, -50%); }
    .nh-hero2-eyebrow { justify-content: center; }
    .nh-hero2-eyebrow::before { display: none; }
    .nh-hero2-motto { max-width: 320px; }
    .nh-hero2-map { flex: 1 1 auto; min-height: 42vh; height: 42vh; }
  }

  /* ════════════════════════════════════════════════════════
     FEATURE MODE — Living Atlas veil/interaction chrome (kept
     from the previous hero; the title/rail/stats overlay was
     removed — that identity now lives in .nh-hero2-id).
     ════════════════════════════════════════════════════════ */
  .nmap { position: absolute; inset: 0; }
  .nmap-stage { position: absolute; inset: 0; }
  /* The atlas fades up once its first frame is painted (no hard pop-in). */
  .nmap-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
    z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1.1s ease;
    filter: brightness(0.6) saturate(0.9) contrast(1.02); }
  .nmap.is-loaded .nmap-frame { opacity: 1; }
  .nmap.engaged .nmap-frame { pointer-events: auto; }
  .nmap-veil { position: absolute; inset: 0; z-index: 5; pointer-events: auto; cursor: pointer; }
  .nmap.engaged .nmap-veil { pointer-events: none; }
  .nmap.hinting .nmap-veil { cursor: none; }
  .nmap-cursor { position: fixed; left: 0; top: 0; z-index: 8; pointer-events: none; width: 0; height: 0;
    opacity: 0; transition: opacity 0.35s ease; }
  .nmap.hinting .nmap-cursor { opacity: 1; }
  .nmap-cursor-btn { position: absolute; left: 0; top: 0; width: 52px; height: 52px; transform: translate(-50%, -50%); display: grid; place-items: center; }
  .nmap-ring { position: absolute; inset: 0; width: 52px; height: 52px; transform: rotate(-90deg); }
  .nmap-ring circle { fill: none; stroke-width: 2; }
  .nmap-ring .track { stroke: rgba(196,185,152,0.22); }
  .nmap-ring .prog { stroke: var(--accent); stroke-linecap: round;
    filter: drop-shadow(0 0 6px color-mix(in oklab, var(--accent) 60%, transparent)); }
  .nmap-cursor-btn .glyph { width: 14px; height: 14px; color: var(--accent); filter: drop-shadow(0 0 5px rgba(0,0,0,0.55)); }
  .nmap-cursor-lbl { position: absolute; left: 0; top: 36px; transform: translateX(-50%); white-space: nowrap;
    font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--gold-light); text-shadow: 0 1px 6px rgba(0,0,0,0.7); }
  .nmap-explore { position: absolute; z-index: 7; left: 50%; bottom: clamp(20px, 4vh, 36px); transform: translateX(-50%) translateY(8px);
    display: inline-flex; align-items: center; gap: 12px; padding: 9px 18px; border: 1px solid rgba(196,185,152,0.26);
    border-radius: 999px; background: rgba(6,8,16,0.5); backdrop-filter: blur(6px);
    font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-light);
    opacity: 0; pointer-events: none; transition: opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s; }
  .nmap.engaged .nmap-explore { opacity: 0.92; transform: translateX(-50%) translateY(0); }
  .nmap-release { position: absolute; z-index: 7; top: 20px; right: 20px;
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; cursor: pointer;
    border: 1px solid rgba(196,185,152,0.3); background: rgba(6,8,16,0.55); backdrop-filter: blur(6px);
    font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-light);
    opacity: 0; pointer-events: none; transition: opacity 0.6s ease; }
  .nmap.engaged .nmap-release { opacity: 1; pointer-events: auto; }
  .nmap-release:hover { color: var(--gold-bright); border-color: var(--gold-light); }
  @keyframes fnPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.82); } }

  /* ── ACT 1.5 — NARRATIVE BLOCK ─────────────────────────── */
  .nh-narrative {
    padding: clamp(56px, 9vh, 88px) var(--page-pad);
    border-bottom: 1px solid var(--border);
  }
  .nh-narrative-inner {
    max-width: 68ch; margin: 0 auto; position: relative;
  }
  .nh-narrative-inner.nh-narrative-capped {
    max-height: 340px; overflow: hidden;
  }
  .nh-narrative-fade {
    position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
    background: linear-gradient(to bottom, transparent, var(--bg) 88%);
    pointer-events: none;
  }
  .nh-narrative-more {
    display: block; margin: 18px auto 0; text-align: center;
    font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--accent); background: none; border: none; cursor: pointer; padding: 6px 12px;
    transition: color 0.2s;
  }
  .nh-narrative-more:hover { color: var(--gold-bright); }

  /* ── SHARED INFO SECTIONS (every mode) ────────────────── */
  .nh-body { max-width: 760px; }
  .nh-body p { font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: 1.95; color: var(--text); margin: 0 0 22px; text-wrap: pretty; }
  .nh-body p:first-of-type::first-letter { font-family: 'Cinzel', serif; font-size: 3.4em; font-weight: 700; color: var(--accent); float: left; line-height: 0.78; margin: 6px 14px 0 0; }
  .nh-narrative .nh-body { max-width: none; }

  /* ── FAITHS ──────────────────────────────────────────── */
  .nh-faiths { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 340px)); gap: 12px; }
  .nh-faith {
    display: flex; flex-direction: column; text-decoration: none; padding: 0;
    background: var(--bg2); border: none;
    border-left: 3px solid var(--fc, var(--gold-dim));
    position: relative; overflow: hidden;
    transition: background 0.28s, border-left-color 0.25s, transform 0.25s, box-shadow 0.28s;
  }
  .nh-faith::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 90% 110% at 0% 60%, color-mix(in srgb, var(--fc, var(--gold-dim)) 11%, transparent), transparent 65%);
    opacity: 0; transition: opacity 0.35s; z-index: 0;
  }
  .nh-faith::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
    background: var(--fc, var(--gold-dim));
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.38s cubic-bezier(0.2,0,0.2,1); z-index: 0;
  }
  .nh-faith:hover {
    background: var(--bg3); border-left-color: var(--fc, var(--gold-light));
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.28), 0 0 30px color-mix(in srgb, var(--fc, var(--gold-dim)) 10%, transparent);
  }
  .nh-faith:hover::before { opacity: 1; }
  .nh-faith:hover::after { transform: scaleX(1); }
  /* Atmospheric visual header — sacred/ritualistic feel */
  .nh-faith-visual {
    height: 128px; position: relative; overflow: hidden; flex-shrink: 0;
    background:
      radial-gradient(ellipse 70% 100% at 30% 80%, color-mix(in srgb, var(--fc, var(--gold-dim)) 16%, transparent), transparent 58%),
      radial-gradient(ellipse 80% 120% at 88% 40%, color-mix(in srgb, var(--fc, var(--gold-dim)) 10%, transparent), transparent 60%),
      linear-gradient(160deg, color-mix(in srgb, var(--fc, var(--gold-dim)) 8%, var(--bg)), var(--bg) 72%);
    border-bottom: 1px solid color-mix(in srgb, var(--fc, var(--gold-dim)) 18%, transparent);
    transition: filter 0.3s;
  }
  /* Concentric ring pattern — evokes ritual / sacred geometry */
  .nh-faith-visual::before {
    content: ''; position: absolute; inset: 0;
    background-image:
      radial-gradient(circle at 82% 52%, color-mix(in srgb, var(--fc, var(--gold-dim)) 11%, transparent) 22px, transparent 22px),
      radial-gradient(circle at 82% 52%, transparent 30px, color-mix(in srgb, var(--fc, var(--gold-dim)) 7%, transparent) 31px, transparent 31px),
      radial-gradient(circle at 82% 52%, transparent 42px, color-mix(in srgb, var(--fc, var(--gold-dim)) 5%, transparent) 43px, transparent 43px),
      radial-gradient(circle at 82% 52%, transparent 56px, color-mix(in srgb, var(--fc, var(--gold-dim)) 3%, transparent) 57px, transparent 57px),
      linear-gradient(color-mix(in srgb, var(--fc, var(--gold-dim)) 5%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, var(--fc, var(--gold-dim)) 4%, transparent) 1px, transparent 1px);
    background-size: auto, auto, auto, auto, 28px 28px, 28px 28px;
    -webkit-mask-image: linear-gradient(120deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 45%, transparent 75%);
    mask-image: linear-gradient(120deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 45%, transparent 75%);
  }
  .nh-faith-vis-role {
    position: absolute; top: 14px; left: 18px; z-index: 1;
    font-family: 'Cinzel', serif; font-size: 7.5px; letter-spacing: 0.44em; text-transform: uppercase;
    color: var(--fc, var(--gold)); opacity: 0.92;
    display: flex; align-items: center; gap: 9px;
  }
  .nh-faith-vis-role::before { content: ''; width: 14px; height: 1px; background: currentColor; opacity: 0.55; flex-shrink: 0; }
  .nh-faith-vis-initial {
    position: absolute; right: 10px; bottom: -22px; z-index: 0;
    font-family: 'Cinzel', serif; font-size: 96px; font-weight: 700; line-height: 1;
    color: color-mix(in srgb, var(--fc, var(--gold-dim)) 8%, transparent);
    user-select: none; pointer-events: none; transition: color 0.38s, transform 0.38s;
  }
  .nh-faith:hover .nh-faith-vis-initial {
    color: color-mix(in srgb, var(--fc, var(--gold-dim)) 18%, transparent);
    transform: translateY(-4px) scale(1.03);
  }
  /* Faith text body — padded area below the visual header */
  .nh-faith-body { padding: 20px 22px 18px; flex: 1; display: flex; flex-direction: column; position: relative; z-index: 1; }
  .nh-faith-name { font-family: 'Cinzel', serif; font-size: 19px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold-bright); line-height: 1.2; }
  .nh-faith-epithet { font-family: 'Inter', sans-serif; font-style: italic; font-size: 13px; color: var(--fc, var(--gold)); margin-top: 6px; opacity: 0.9; line-height: 1.5; }
  .nh-faith-role { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.22em; text-transform: uppercase; color: color-mix(in srgb, var(--fc, var(--gold)) 75%, transparent); margin-top: 8px; }
  .nh-faith-note { font-family: 'Inter', sans-serif; font-size: 12.5px; color: var(--text-sub); margin-top: 10px; line-height: 1.65; flex: 1; }

  /* ── NATIONAL IDENTITY CALLOUT — motto / posture highlight ── */
  .nh-identity-callout {
    margin-top: 32px; padding-top: 28px;
    border-top: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  }
  .nh-ic-line {
    width: 32px; height: 1px; background: var(--accent); opacity: 0.6; margin-bottom: 18px;
  }
  .nh-ic-quote {
    font-family: 'Cinzel', serif; font-style: italic;
    font-size: clamp(15px, 2vw, 18px); line-height: 1.65;
    color: var(--gold-light); margin: 0 0 18px; padding: 0;
    quotes: none;
  }
  .nh-ic-posture {
    display: flex; align-items: center; gap: 10px;
  }
  .nh-ic-posture-label {
    font-family: 'JetBrains Mono', monospace; font-size: 7px;
    letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-muted);
    flex-shrink: 0;
  }
  .nh-ic-posture-val {
    font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--accent); opacity: 0.9;
  }

  /* ── PROVINCES — card grid (see .nh-prov-cards in card section above) ─ */

  /* ── NOTABLE FIGURES — portrait-first gallery cards ──── */
  .nh-figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2px; }
  .nh-figure {
    --rim: var(--accent);
    position: relative; display: flex; flex-direction: column; align-items: stretch;
    text-decoration: none; background: var(--bg2); overflow: hidden;
    border: 1px solid var(--border);
    transition: background 0.2s, border-color 0.3s, transform 0.22s, box-shadow 0.3s;
    min-height: 340px;
  }
  .nh-figure:hover, .nh-figure:focus-visible {
    background: var(--bg3);
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    box-shadow: 0 18px 56px rgba(0,0,0,0.52), 0 0 28px -6px color-mix(in srgb, var(--accent) 45%, transparent);
    z-index: 1;
  }
  /* Hover-only tapered top glint (same language as the Neighbouring Lands
     plates) — no resting accent bars, and nothing at the card's bottom edge. */
  .nh-figure::before {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--accent), transparent) top center / 72% 2px no-repeat;
    filter: drop-shadow(0 0 9px color-mix(in srgb, var(--accent) 55%, transparent));
    opacity: 0; transition: opacity 0.3s ease;
  }
  .nh-figure:hover::before, .nh-figure:focus-visible::before { opacity: 1; }
  /* Portrait area — full-width, tall */
  .nh-fig-img {
    width: 100%; min-width: 0; align-self: auto;
    min-height: 280px; flex-shrink: 0;
    border-right: none;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
    background: color-mix(in srgb, var(--accent) 12%, var(--bg));
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    font-family: 'Cinzel', serif; font-size: 40px; font-weight: 700;
    color: var(--accent); letter-spacing: 0.06em;
    position: relative;
  }
  /* Bottom gradient over portrait */
  .nh-fig-img::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 42%, color-mix(in srgb, var(--bg2) 68%, transparent));
    pointer-events: none;
  }
  .nh-fig-img img {
    width: 100%; height: 100%; object-fit: cover; object-position: center top;
    filter: brightness(0.85);
    transition: transform 0.7s var(--ease-out), filter 0.5s ease;
  }
  .nh-figure:hover .nh-fig-img img { transform: scale(1.05); filter: brightness(1); }
  /* No-image character placeholder — atmospheric, not blank */
  .nh-fig-img-atmo {
    position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(ellipse 70% 90% at 50% 30%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 65%),
      radial-gradient(ellipse 100% 60% at 50% 100%, color-mix(in srgb, var(--bg) 90%, transparent), transparent);
  }
  .nh-fig-img-grid {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
      linear-gradient(color-mix(in srgb, var(--accent) 5%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, var(--accent) 5%, transparent) 1px, transparent 1px);
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, black 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, black 30%, transparent 75%);
  }
  .nh-fig-img-mono {
    position: relative; z-index: 1;
    font-family: 'Cinzel', serif; font-size: 52px; font-weight: 700;
    color: color-mix(in srgb, var(--accent) 60%, var(--gold-bright));
    text-shadow: 0 0 40px color-mix(in srgb, var(--accent) 50%, transparent);
    letter-spacing: 0.04em;
  }
  .nh-fig-body { flex: 1; min-width: 0; padding: 18px 20px 20px; }
  .nh-fig-name {
    font-family: 'Cinzel', serif; font-size: 16px; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold-bright);
    line-height: 1.1;
  }
  .nh-fig-title {
    font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--accent); margin-top: 6px; opacity: 0.9;
  }
  .nh-fig-summary {
    font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-sub);
    margin-top: 9px; line-height: 1.65;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .nh-fig-link {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
    font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--accent);
    opacity: 0; transform: translateY(4px); transition: opacity 0.35s, transform 0.35s;
  }
  .nh-figure:hover .nh-fig-link { opacity: 1; transform: none; }
  .nh-fig-link svg { transition: transform 0.25s; }
  .nh-figure:hover .nh-fig-link svg { transform: translateX(4px); }

  /* ── IN THE ARCHIVE (related lore entries) ────────────── */
  .nh-archive { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 2px; }
  .nh-arc-entry {
    position: relative; display: block; text-decoration: none;
    padding: 20px 20px 18px; background: var(--bg2);
    border-left: 2px solid var(--arc, var(--gold-dim));
    transition: background 0.2s, border-left-color 0.2s, transform 0.18s;
    overflow: hidden;
  }
  .nh-arc-entry::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 80% at 0% 50%, color-mix(in srgb, var(--arc, var(--gold-dim)) 5%, transparent), transparent);
    pointer-events: none;
    transition: opacity 0.3s; opacity: 0;
  }
  .nh-arc-entry:hover { background: var(--bg3); transform: translateY(-2px); }
  .nh-arc-entry:hover::after { opacity: 1; }
  .nh-arc-cat {
    font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--arc, var(--gold-dim)); margin-bottom: 8px;
  }
  .nh-arc-title {
    font-family: 'Cinzel', serif; font-size: 16px; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold-bright); line-height: 1.1;
  }
  .nh-arc-title em { font-style: italic; font-weight: 400; color: var(--gold); }
  .nh-arc-sub {
    font-family: 'Inter', sans-serif; font-size: 12px; color: var(--text-sub);
    margin-top: 8px; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .nh-arc-read {
    margin-top: 14px; font-family: 'Cinzel', serif; font-size: 8px;
    letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-dim);
    transition: color 0.2s;
  }
  .nh-arc-entry:hover .nh-arc-read { color: var(--gold-light); }

  /* Archive entry accent by category */
  .nh-arc-entry[data-cat="Artifact"]   { --arc: var(--gold-light); }
  .nh-arc-entry[data-cat="Power"]      { --arc: var(--accent-purple); }
  .nh-arc-entry[data-cat="Phenomenon"] { --arc: var(--accent-moss); }
  .nh-arc-entry[data-cat="History"]    { --arc: var(--nation-frysia); }
  .nh-arc-entry[data-cat="Location"]   { --arc: var(--nation-britannia); }

  /* ── TIMELINE STRIP ───────────────────────────────────── */
  .nh-timeline { display: flex; flex-direction: column; gap: 0; position: relative; }
  .nh-timeline::before {
    content: ''; position: absolute; left: 15px; top: 20px; bottom: 20px; width: 1px;
    background: linear-gradient(to bottom,
      transparent,
      color-mix(in srgb, var(--accent) 55%, transparent) 12%,
      color-mix(in srgb, var(--accent) 35%, transparent) 88%,
      transparent);
  }
  .nh-tl-event {
    display: flex; gap: 26px; align-items: flex-start; padding: 18px 0;
    position: relative; border-bottom: 1px solid transparent;
    transition: border-color 0.25s;
  }
  .nh-tl-event:last-child { border-bottom: none; }
  .nh-tl-event:hover { border-bottom-color: color-mix(in srgb, var(--accent) 12%, transparent); }
  .nh-tl-dot {
    width: 32px; min-width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--accent) 48%, transparent);
    background: radial-gradient(circle at 40% 36%, color-mix(in srgb, var(--accent) 14%, var(--bg)), var(--bg));
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; position: relative; z-index: 1;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 5%, transparent);
    transition: border-color 0.28s, box-shadow 0.28s;
  }
  .nh-tl-event:hover .nh-tl-dot {
    border-color: color-mix(in srgb, var(--accent) 80%, transparent);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 8%, transparent), 0 0 22px color-mix(in srgb, var(--accent) 22%, transparent);
  }
  .nh-tl-dot::after {
    content: ''; width: 9px; height: 9px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 28%, transparent);
    transition: transform 0.25s;
  }
  .nh-tl-event:hover .nh-tl-dot::after { transform: scale(1.3); }
  .nh-tl-content { flex: 1; padding-top: 5px; }
  .nh-tl-era {
    font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 4px; opacity: 0.85;
  }
  .nh-tl-title {
    font-family: 'Cinzel', serif; font-size: 15px; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold-bright);
    line-height: 1.2; margin-bottom: 8px; transition: color 0.2s;
  }
  .nh-tl-title em { font-style: italic; font-weight: 400; color: var(--gold); }
  .nh-tl-body {
    font-family: 'Inter', sans-serif; font-size: 13px; color: var(--text-sub);
    line-height: 1.78; max-width: 640px;
  }
  .nh-tl-era-header {
    display: flex; align-items: center; gap: 16px;
    padding: 28px 0 8px; margin-left: 58px;
    font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.44em; text-transform: uppercase;
    color: var(--accent);
  }
  .nh-tl-era-header::before {
    content: ''; width: 14px; height: 1px;
    background: var(--accent); opacity: 0.55; flex-shrink: 0;
  }
  .nh-tl-era-header::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(to right, color-mix(in srgb, var(--accent) 48%, transparent), transparent);
  }
  .nh-tl-era-label { flex-shrink: 0; }
  /* Archive CTA link */
  .nh-arc-cta {
    text-align: right; padding: 14px 0 0;
  }
  .nh-arc-cta-link {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'Cinzel', serif; font-size: 8.5px; letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--gold-dim); text-decoration: none;
    transition: color 0.2s, gap 0.2s;
  }
  .nh-arc-cta-link:hover { color: var(--gold-light); gap: 14px; }

  /* ── NEIGHBOURING POWERS (emblem-forward badge cards) ───
     Each nation reads as its own sealed plate: a crest centred at the top,
     the name beneath it, everything else quiet until hover. */
  .nh-other {
    position: relative; min-height: 216px; display: flex; flex-direction: column;
    align-items: center; text-align: center; justify-content: flex-start;
    padding: 30px 16px 20px; text-decoration: none; overflow: hidden;
    background: var(--bg2);
    border: 1px solid var(--border);
    transition: border-color 0.28s, box-shadow 0.4s;
  }
  .nh-other:hover, .nh-other:focus-visible {
    border-color: color-mix(in srgb, var(--oc, var(--gold-dim)) 60%, var(--border));
    box-shadow: 0 18px 56px rgba(0,0,0,0.52), 0 0 28px -6px color-mix(in srgb, var(--oc, var(--gold-light)) 48%, transparent);
    z-index: 1;
  }
  .nh-other-bg {
    position: absolute; inset: 0; background-size: cover; background-position: center top;
    opacity: 0.22; transition: opacity 0.45s, transform 0.7s var(--ease-out);
  }
  .nh-other:hover .nh-other-bg, .nh-other:focus-visible .nh-other-bg { opacity: 0.34; transform: scale(1.06); }
  /* rim-glow — top+bottom tapered lines that fade out before the corners
     (not a hard full-width border), with a light blur so it reads as a
     glow, not a color block. Side bleed is baked into the ::after
     scrim (very low opacity) so it isn't hidden under its dark gradient. */
  .nh-other::before {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background:
      linear-gradient(90deg, transparent, var(--oc, var(--gold-light)), transparent) top center / 72% 2px no-repeat,
      linear-gradient(90deg, transparent, var(--oc, var(--gold-light)), transparent) bottom center / 72% 2px no-repeat;
    filter: drop-shadow(0 0 7px color-mix(in srgb, var(--oc, var(--gold-light)) 55%, transparent));
    opacity: 0.68; transition: opacity 0.3s ease, filter 0.3s ease;
  }
  .nh-other:hover::before, .nh-other:focus-visible::before {
    opacity: 1;
    filter: drop-shadow(0 0 13px color-mix(in srgb, var(--oc, var(--gold-light)) 75%, transparent));
  }
  .nh-other::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(to bottom, rgba(8,8,8,0.5) 0%, rgba(8,8,8,0.76) 60%, rgba(8,8,8,0.9) 100%),
      radial-gradient(ellipse 90% 30% at 50% 100%, color-mix(in srgb, var(--oc, var(--gold-light)) 12%, transparent), transparent 75%);
    transition: background 0.4s ease;
  }
  .nh-other:hover::after, .nh-other:focus-visible::after {
    background:
      linear-gradient(to bottom, rgba(8,8,8,0.44) 0%, rgba(8,8,8,0.68) 60%, rgba(8,8,8,0.84) 100%),
      radial-gradient(ellipse 90% 30% at 50% 100%, color-mix(in srgb, var(--oc, var(--gold-light)) 22%, transparent), transparent 75%);
  }
  .nh-other-inner {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center;
  }
  /* Each nation's emblem, crowning its card — clean, no frame/halo added
     around it (matches the ONE-emblem rule; the crest itself carries identity). */
  .nh-other-emblem { margin-bottom: 14px; }
  .nh-other-region {
    font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.3em; text-transform: uppercase;
    color: color-mix(in srgb, var(--oc, var(--gold-dim)) 70%, transparent);
    margin-bottom: 6px;
  }
  .nh-other-name {
    font-family: 'Cinzel', serif; font-size: clamp(15px, 1.4vw, 18px); font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--oc, var(--gold-bright)); line-height: 1.2;
    text-shadow: 0 2px 24px rgba(0,0,0,0.7);
  }
  .nh-other-epithet {
    font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-muted); margin-top: 6px; opacity: 0.85;
  }
  .nh-other-tagline {
    font-family: 'Inter', sans-serif; font-size: 11px; font-style: italic;
    color: var(--text-sub); line-height: 1.5; margin-top: 8px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .nh-other-arrow {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
    font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--oc, var(--gold-dim)); opacity: 0; transform: translateY(4px);
    transition: opacity 0.26s, transform 0.26s;
  }
  .nh-other:hover .nh-other-arrow, .nh-other:focus-visible .nh-other-arrow { opacity: 1; transform: none; }

  /* Neighbouring-lands rail cards use a fixed width rather than the old grid;
     the .nh-other badge-plate markup stays as-is (reused verbatim, Act 4 Pass 3). */
  .nh-rail-card--land { width: clamp(200px, 20vw, 220px); }
  .nh-rail-card--land .nh-other { min-height: 216px; height: 100%; }

  .nh-info .char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
  .nh-info .story-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }

  /* ── SECTION ACCENT IDENTITY ──────────────────────────── */
  /* Em text inside section headings picks up the nation accent color */
  .nh-info .sec-head-title em { color: var(--accent); }

  /* Section-head divider on nation pages reads as a CONTAINED accent underline —
     anchored under the title and fading out well before the right edge — rather
     than a full-width line that looks like a loading bar running off to the right.
     We also drop the travelling "glint" so nothing sweeps across to the far right. */
  .nh-info .sec-head-rule {
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 60%, transparent) 0%,
      color-mix(in srgb, var(--accent) 24%, transparent) 24%,
      transparent 60%);
  }
  .nh-info .sec-head-rule::after { display: none; }

  /* Subtle atmospheric radial glow at the top of each content section */
  .nh-info .section { position: relative; }
  .nh-info .section::before {
    content: ''; pointer-events: none; z-index: 0;
    position: absolute; top: 0; left: 50%; width: 100vw; height: 300px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse 30% 100% at 15% 0%,
      color-mix(in srgb, var(--accent) 5%, transparent), transparent 70%);
  }
  /* Section-specific atmospheric differentiation */
  #nh-people.section::before {
    background:
      radial-gradient(ellipse 38% 120% at 15% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 62%),
      radial-gradient(ellipse 20% 55% at 82% 100%, color-mix(in srgb, var(--accent) 4%, transparent), transparent 68%);
  }
  #nh-codex.section::before {
    background: radial-gradient(ellipse 55% 100% at 50% 0%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 65%);
  }
  #nh-others.section::before {
    background:
      radial-gradient(ellipse 25% 80% at 15% 0%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 65%),
      radial-gradient(ellipse 25% 80% at 85% 0%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 65%);
  }

  /* ── FIGURE FAITH CHIPS ────────────────────────────────── */
  .nh-fig-faiths { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
  .nh-fig-faith-chip {
    font-family: 'Cinzel', serif; font-size: 7px; letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--fc, var(--gold-dim));
    border: 1px solid color-mix(in srgb, var(--fc, var(--gold-dim)) 32%, transparent);
    padding: 2px 8px;
    background: color-mix(in srgb, var(--fc, var(--gold-dim)) 7%, transparent);
    white-space: nowrap;
    transition: border-color 0.2s, background 0.2s;
  }
  .nh-figure:hover .nh-fig-faith-chip {
    border-color: color-mix(in srgb, var(--fc, var(--gold-dim)) 55%, transparent);
    background: color-mix(in srgb, var(--fc, var(--gold-dim)) 12%, transparent);
  }

  /* ── FAITH-GROUP HEADERS (spans full grid width as section dividers) ── */
  .nh-fg-header {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 10px;
    padding: 28px 0 10px;
    font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--text-muted);
  }
  .nh-fg-header::after {
    content: ''; flex: 1;
    height: 1px; background: var(--border); opacity: 0.6;
  }
  .nh-fg-header:first-child { padding-top: 0; }
  .nh-fg-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--fgc, var(--gold-dim));
    flex-shrink: 0;
    box-shadow: 0 0 8px var(--fgc, var(--gold-dim));
  }
  .nh-fg-label { color: var(--fgc, var(--gold-dim)); }

  @media (max-width: 700px) {
    .nh-body p:first-of-type::first-letter { font-size: 2.8em; }
    .nh-other { min-height: 200px; padding: 24px 12px 18px; }
    .nh-feat-story { min-height: 300px; }
    .nh-feat-body { padding: 0 20px 24px; }
    .nh-feat-title { font-size: clamp(17px, 4.5vw, 22px); }
  }

  /* ── SECTION SEPARATOR ───────────────────────────────── */
  .nh-section-div {
    display: flex; align-items: center; gap: 18px;
    padding: 0 var(--page-pad); max-width: 1180px; margin: 0 auto;
    margin-top: 48px; margin-bottom: 0;
  }
  .nh-section-div::before, .nh-section-div::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(to right, transparent, color-mix(in srgb, var(--accent) 25%, var(--border)), transparent);
  }
  .nh-section-div-glyph {
    width: 6px; height: 6px; border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 45%, transparent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 25%, transparent);
    flex-shrink: 0;
  }

  /* ── SECTION INTRO TEXT ──────────────────────────────── */
  .nh-section-intro {
    font-family: 'Inter', sans-serif; font-style: italic; font-weight: 300;
    font-size: clamp(14px, 1.7vw, 18px); color: var(--text-sub);
    line-height: 1.85; max-width: 640px; margin: 0 0 32px;
    opacity: 0.9;
  }

  /* ── PROVINCE CAPITAL DISTINCTION ────────────────────── */
  .nh-prov-card--capital {
    border-left-color: color-mix(in srgb, var(--accent) 65%, transparent);
  }
  .nh-pc-capital-indicator {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 10px; position: relative; z-index: 1;
  }
  .nh-pc-capital-indicator::before {
    content: ''; width: 4px; height: 4px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 7px var(--accent); flex-shrink: 0;
  }

  /* ── CONTINUE THE JOURNEY ─────────────────────────────── */
  .nh-journey {
    position: relative; overflow: hidden;
    padding: 84px var(--page-pad) 80px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-top: 56px;
    text-align: center;
  }
  .nh-journey-atmo {
    position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(ellipse 70% 90% at 50% 100%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 65%),
      radial-gradient(ellipse 35% 55% at 8% 50%, color-mix(in srgb, var(--accent) 4%, transparent), transparent 70%),
      radial-gradient(ellipse 35% 55% at 92% 50%, color-mix(in srgb, var(--accent) 4%, transparent), transparent 70%);
  }
  .nh-journey-title {
    font-family: 'Cinzel', serif; font-size: clamp(20px, 3vw, 36px); font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--gold-bright); margin-bottom: 12px; position: relative; z-index: 1;
  }
  .nh-journey-title em { font-style: italic; font-weight: 400; color: var(--accent); }
  .nh-journey-sub {
    font-family: 'Inter', sans-serif; font-style: italic; font-weight: 300;
    font-size: 14px; color: var(--text-sub); max-width: 460px; margin: 0 auto 32px;
    line-height: 1.8; position: relative; z-index: 1;
  }
  @media (max-width: 700px) {
    .nh-journey { padding: 60px var(--page-pad) 56px; margin-top: 40px; }
  }

  /* ── PROVINCE CARDS (redesigned from numbered list) ──── */
  .nh-prov-cards {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 3px;
  }
  .nh-prov-card {
    position: relative; padding: 28px 28px 24px;
    background: var(--bg2);
    border-top: 1px solid var(--border);
    border-left: 3px solid color-mix(in srgb, var(--accent) 25%, transparent);
    overflow: hidden;
    transition: background 0.22s, border-left-color 0.25s;
  }
  .nh-prov-card:hover { background: var(--bg3); border-left-color: color-mix(in srgb, var(--accent) 70%, transparent); }
  /* ::before suppressed — initial letter now lives inside .nh-prov-visual */
  .nh-prov-card::before { content: ''; display: none; }
  .nh-pc-name {
    font-family: 'Cinzel', serif; font-size: 17px; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold-bright);
    line-height: 1; margin-bottom: 12px; position: relative; z-index: 1;
  }
  .nh-pc-desc {
    font-family: 'Inter', sans-serif; font-size: 13px; color: var(--text-sub);
    line-height: 1.72; margin-bottom: 14px; position: relative; z-index: 1;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .nh-pc-cities { display: flex; flex-wrap: wrap; gap: 5px; position: relative; z-index: 1; }
  .nh-pc-city {
    font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-muted); border: 1px solid var(--border); padding: 3px 9px;
    transition: border-color 0.2s, color 0.2s;
  }
  .nh-prov-card:hover .nh-pc-city { border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
  .nh-pc-city.cap { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
  .nh-pc-city.cap::after { content: ' · Capital'; }

  /* ── PROVINCE CARD VISUAL HEADER ─────────────────────── */
  /* Remove top padding so the visual butts up to the card edge */
  .nh-prov-card { padding-top: 0; }
  .nh-prov-card-body { padding: 22px 28px 24px; position: relative; z-index: 1; }
  .nh-prov-visual {
    height: 116px; position: relative; overflow: hidden; flex-shrink: 0;
    border-bottom: 1px solid rgba(74,58,30,0.14);
    background:
      radial-gradient(ellipse 70% 120% at 84% 50%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%),
      linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--accent) 10%, var(--bg)));
  }
  /* Diagonal hatching — geographic/territorial, distinct from the faith grid pattern */
  .nh-prov-visual::before {
    content: '';
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(
      -45deg,
      color-mix(in srgb, var(--accent) 7%, transparent),
      color-mix(in srgb, var(--accent) 7%, transparent) 1px,
      transparent 1px,
      transparent 16px
    );
    -webkit-mask-image: linear-gradient(115deg, rgba(0,0,0,0.7) 0%, transparent 55%);
    mask-image: linear-gradient(115deg, rgba(0,0,0,0.7) 0%, transparent 55%);
  }
  /* Large decorative initial from province name */
  .nh-prov-visual-initial {
    position: absolute; right: 6px; bottom: -20px;
    font-family: 'Cinzel', serif; font-size: 88px; font-weight: 700; line-height: 1;
    color: color-mix(in srgb, var(--accent) 9%, transparent);
    user-select: none; pointer-events: none; transition: color 0.28s;
  }
  .nh-prov-card:hover .nh-prov-visual-initial { color: color-mix(in srgb, var(--accent) 16%, transparent); }
  /* Capital badge inside visual header */
  .nh-prov-visual-badge {
    position: absolute; bottom: 10px; left: 14px;
    font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--accent); display: flex; align-items: center; gap: 5px;
  }
  .nh-prov-visual-badge::before {
    content: ''; width: 4px; height: 4px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 6px var(--accent); flex-shrink: 0;
  }
  /* Province terrain SVG art — geographic illustration per terrain type */
  .nh-prov-visual[data-terrain="Coastal"]   { --ptc: var(--nation-britannia); }
  .nh-prov-visual[data-terrain="Forest"]    { --ptc: var(--accent-moss); }
  .nh-prov-visual[data-terrain="Highland"]  { --ptc: var(--nation-icegaard); }
  .nh-prov-visual[data-terrain="Arid"]      { --ptc: var(--nation-solmara); }
  .nh-prov-visual[data-terrain="Trade Hub"] { --ptc: var(--gold-light); }
  .nh-prov-visual[data-terrain="Riverland"] { --ptc: var(--nation-atlantia); }
  .nh-prov-visual[data-terrain="Plains"]    { --ptc: var(--gold-dim); }
  .nh-pv-art {
    position: absolute; right: 0; top: 0; bottom: 0; width: 58%;
    color: var(--ptc, var(--accent));
    stroke: currentColor; fill: currentColor;
    fill-opacity: 0.09; stroke-opacity: 0.45;
    pointer-events: none; overflow: hidden;
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.82) 20%, transparent 88%);
    mask-image: linear-gradient(to left, rgba(0,0,0,0.82) 20%, transparent 88%);
    transition: stroke-opacity 0.3s, fill-opacity 0.3s;
  }
  .nh-prov-card:hover .nh-pv-art { stroke-opacity: 0.68; fill-opacity: 0.14; }
  .nh-pv-art svg { width: 100%; height: 100%; display: block; }
  /* Capital province: stronger accent on the visual header */
  .nh-prov-card--capital .nh-prov-visual {
    background:
      radial-gradient(ellipse 70% 120% at 84% 50%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
      linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--accent) 16%, var(--bg)));
  }
  /* Per-card hatch variety — rotate angle so cards feel territorially distinct */
  .nh-prov-cards > .nh-prov-card:nth-child(2) .nh-prov-visual::before {
    background-image: repeating-linear-gradient(
      30deg,
      color-mix(in srgb, var(--accent) 7%, transparent),
      color-mix(in srgb, var(--accent) 7%, transparent) 1px,
      transparent 1px, transparent 18px
    );
  }
  .nh-prov-cards > .nh-prov-card:nth-child(3) .nh-prov-visual::before {
    background-image: repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--accent) 6%, transparent),
      color-mix(in srgb, var(--accent) 6%, transparent) 1px,
      transparent 1px, transparent 14px
    );
  }
  .nh-prov-cards > .nh-prov-card:nth-child(4) .nh-prov-visual::before {
    background-image: repeating-linear-gradient(
      -20deg,
      color-mix(in srgb, var(--accent) 7%, transparent),
      color-mix(in srgb, var(--accent) 7%, transparent) 1px,
      transparent 1px, transparent 20px
    );
  }
  .nh-prov-cards > .nh-prov-card:nth-child(5) .nh-prov-visual::before {
    background-image: repeating-linear-gradient(
      60deg,
      color-mix(in srgb, var(--accent) 6%, transparent),
      color-mix(in srgb, var(--accent) 6%, transparent) 1px,
      transparent 1px, transparent 12px
    );
  }
  .nh-prov-cards > .nh-prov-card:nth-child(6) .nh-prov-visual::before {
    background-image: repeating-linear-gradient(
      10deg,
      color-mix(in srgb, var(--accent) 7%, transparent),
      color-mix(in srgb, var(--accent) 7%, transparent) 1px,
      transparent 1px, transparent 16px
    );
  }
  /* Capital always gets crosshatch for map-like density */
  .nh-prov-card--capital .nh-prov-visual::before {
    background-image:
      repeating-linear-gradient(
        -45deg,
        color-mix(in srgb, var(--accent) 9%, transparent),
        color-mix(in srgb, var(--accent) 9%, transparent) 1px,
        transparent 1px, transparent 14px
      ),
      repeating-linear-gradient(
        45deg,
        color-mix(in srgb, var(--accent) 6%, transparent),
        color-mix(in srgb, var(--accent) 6%, transparent) 1px,
        transparent 1px, transparent 14px
      );
  }

  /* Terrain-specific atmospheric tints on province visual headers */
  .nh-prov-visual[data-terrain="Coastal"] {
    background:
      radial-gradient(ellipse 70% 120% at 84% 50%, color-mix(in srgb, var(--nation-britannia) 20%, transparent), transparent 62%),
      linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--nation-britannia) 12%, var(--bg)));
  }
  .nh-prov-visual[data-terrain="Forest"] {
    background:
      radial-gradient(ellipse 70% 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) 14%, var(--bg)));
  }
  .nh-prov-visual[data-terrain="Highland"] {
    background:
      radial-gradient(ellipse 70% 120% at 84% 50%, color-mix(in srgb, var(--nation-icegaard) 18%, transparent), transparent 62%),
      linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--nation-icegaard) 11%, var(--bg)));
  }
  .nh-prov-visual[data-terrain="Arid"] {
    background:
      radial-gradient(ellipse 70% 120% at 84% 50%, color-mix(in srgb, var(--nation-solmara) 22%, transparent), transparent 62%),
      linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--nation-solmara) 14%, var(--bg)));
  }
  .nh-prov-visual[data-terrain="Trade Hub"] {
    background:
      radial-gradient(ellipse 70% 120% at 84% 50%, color-mix(in srgb, var(--gold-light) 22%, transparent), transparent 62%),
      linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--gold-light) 14%, var(--bg)));
  }
  .nh-prov-visual[data-terrain="Riverland"] {
    background:
      radial-gradient(ellipse 70% 120% at 84% 50%, color-mix(in srgb, var(--nation-atlantia) 22%, transparent), transparent 62%),
      linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--nation-atlantia) 14%, var(--bg)));
  }
  .nh-prov-visual[data-terrain="Plains"] {
    background:
      radial-gradient(ellipse 70% 120% at 84% 50%, color-mix(in srgb, var(--gold-dim) 60%, transparent), transparent 62%),
      linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--gold-dim) 36%, var(--bg)));
  }
  /* Capital always wins over terrain tint */
  .nh-prov-card--capital .nh-prov-visual[data-terrain] {
    background:
      radial-gradient(ellipse 70% 120% at 84% 50%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
      linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--accent) 16%, var(--bg)));
  }

  /* Province section intro sentence */
  .nh-prov-intro {
    font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.7;
    color: var(--text-muted); margin: 0 0 28px; max-width: 640px;
  }
  /* Muted fallback for empty province cards */
  .nh-pc-desc--muted {
    opacity: 0.38; font-style: italic;
  }

  /* ── FEATURED STORY — full-bleed cinematic banner ─────── */
  /* ── STORIES — chapter eyebrow + "More from" separator ───── */
  .nh-story-chapter-eyebrow {
    display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
  }
  .nh-sce-num {
    font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.08em;
    color: var(--accent); opacity: 0.7; flex-shrink: 0;
  }
  .nh-sce-line { flex: 1; height: 1px; background: var(--border); }
  .nh-sce-label {
    font-family: 'Cinzel', serif; font-size: 8.5px; letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--text-muted); flex-shrink: 0;
  }
  .nh-more-stories-head {
    display: flex; align-items: center; gap: 16px; margin: 28px 0 0;
  }
  .nh-msh-line { flex: 1; height: 1px; background: var(--border); }
  .nh-msh-label {
    font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--text-muted); white-space: nowrap; flex-shrink: 0;
  }

  .nh-feat-story {
    display: block; position: relative; text-decoration: none; overflow: hidden;
    min-height: 520px;
    background: color-mix(in srgb, var(--accent) 10%, var(--bg));
    border-bottom: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
    margin-bottom: 14px;
    transition: border-bottom-color 0.3s, box-shadow 0.4s;
  }
  .nh-feat-story:hover {
    border-bottom-color: var(--accent);
    box-shadow: 0 18px 56px rgba(0,0,0,0.46);
  }
  /* Full-bleed poster — covers the entire card */
  .nh-feat-poster {
    position: absolute; inset: 0; overflow: hidden;
    background: color-mix(in srgb, var(--accent) 14%, var(--bg));
  }
  .nh-feat-poster img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.9s var(--ease-out); }
  .nh-feat-story:hover .nh-feat-poster img { transform: scale(1.04); }
  .nh-feat-poster-mono {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: 'Cinzel', serif; font-size: 120px; font-weight: 700;
    color: color-mix(in srgb, var(--accent) 16%, transparent); letter-spacing: 0.04em;
    user-select: none;
  }
  /* Gradient overlay — protects text readability at the bottom */
  .nh-feat-story::before {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      color-mix(in srgb, var(--bg) 5%, transparent) 28%,
      color-mix(in srgb, var(--bg) 55%, transparent) 58%,
      color-mix(in srgb, var(--bg) 84%, transparent) 82%,
      var(--bg2) 100%
    );
  }
  /* Text content — overlaid at the bottom */
  .nh-feat-body {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
    padding: 0 36px 36px;
    display: flex; flex-direction: column; justify-content: flex-end;
  }
  .nh-feat-badge {
    font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 12px; opacity: 0.9;
  }
  .nh-feat-title {
    font-family: 'Cinzel', serif; font-size: clamp(22px, 3.2vw, 38px); font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold-bright); line-height: 1.1;
    margin-bottom: 12px; text-shadow: 0 2px 20px rgba(0,0,0,0.7);
  }
  .nh-feat-title em { font-style: italic; font-weight: 400; color: var(--gold); }
  .nh-feat-log {
    font-family: 'Inter', sans-serif; font-size: 13.5px; color: var(--text-sub); line-height: 1.7;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-bottom: 18px; max-width: 640px;
    text-shadow: 0 1px 12px rgba(0,0,0,0.8);
  }
  .nh-feat-cta {
    font-family: 'Cinzel', serif; font-size: 8.5px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--gold-dim); transition: color 0.22s; display: inline-flex; align-items: center; gap: 8px;
  }
  .nh-feat-story:hover .nh-feat-cta { color: var(--gold-light); }

  /* ── FAITH BELIEVER CHIP ──────────────────────────────── */
  .nh-faith-believers {
    margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 6px;
  }
  .nh-faith-bcount {
    font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 300;
    letter-spacing: -0.01em; color: var(--fc, var(--gold-dim));
    transition: color 0.2s;
  }
  .nh-faith-blabel {
    font-family: 'Cinzel', serif; font-size: 7.5px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--text-muted);
  }
  .nh-faith:hover .nh-faith-bcount { color: var(--fc, var(--gold-light)); }

  /* ── ARCHIVE ENTRIES — codex-style visual header ─────── */
  .nh-arc-entry .nh-arc-visual {
    margin: -20px -20px 14px;
    height: 72px; position: relative; overflow: hidden;
    background: var(--bg); border-bottom: 1px solid rgba(74,58,30,0.14);
    flex-shrink: 0;
  }
  .nh-arc-entry[data-cat="Artifact"]   .nh-arc-visual { background: radial-gradient(ellipse 80% 120% at 84% 50%, color-mix(in srgb, var(--gold-light) 11%, transparent), transparent 64%), linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--gold-dim) 16%, var(--bg))); }
  .nh-arc-entry[data-cat="Power"]      .nh-arc-visual { background: radial-gradient(ellipse 80% 120% at 84% 50%, color-mix(in srgb, var(--accent-purple) 10%, transparent), transparent 64%), linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--accent-purple) 8%, var(--bg))); }
  .nh-arc-entry[data-cat="Phenomenon"] .nh-arc-visual { background: radial-gradient(ellipse 80% 120% at 84% 50%, color-mix(in srgb, var(--accent-moss) 10%, transparent), transparent 64%), linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--accent-moss) 8%, var(--bg))); }
  .nh-arc-entry[data-cat="History"]    .nh-arc-visual { background: radial-gradient(ellipse 80% 120% at 84% 50%, color-mix(in srgb, var(--nation-frysia) 10%, transparent), transparent 64%), linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--nation-frysia) 8%, var(--bg))); }
  .nh-arc-entry[data-cat="Location"]   .nh-arc-visual { background: radial-gradient(ellipse 80% 120% at 84% 50%, color-mix(in srgb, var(--nation-britannia) 10%, transparent), transparent 64%), linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--nation-britannia) 8%, var(--bg))); }
  .nh-arc-visual::before {
    content: ''; position: absolute; inset: 0;
    background-image:
      linear-gradient(color-mix(in srgb, var(--arc, var(--gold-dim)) 4%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, var(--arc, var(--gold-dim)) 4%, transparent) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: linear-gradient(115deg, rgba(0,0,0,0.7) 0%, transparent 55%);
    mask-image: linear-gradient(115deg, rgba(0,0,0,0.7) 0%, transparent 55%);
  }
  .nh-arc-vis-cat {
    position: absolute; top: 10px; left: 14px; z-index: 1;
    font-family: 'Cinzel', serif; font-size: 7px; letter-spacing: 0.44em; text-transform: uppercase;
    color: var(--arc, var(--gold)); opacity: 0.82;
    display: flex; align-items: center; gap: 8px;
  }
  .nh-arc-vis-cat::before { content: ''; width: 12px; height: 1px; background: currentColor; opacity: 0.5; flex-shrink: 0; }
  .nh-arc-vis-initial {
    position: absolute; right: 6px; bottom: -14px; z-index: 0;
    font-family: 'Cinzel', serif; font-size: 72px; font-weight: 700; line-height: 1;
    color: color-mix(in srgb, var(--arc, var(--gold-dim)) 8%, transparent);
    user-select: none; pointer-events: none; transition: color 0.35s;
  }
  .nh-arc-entry:hover .nh-arc-vis-initial { color: color-mix(in srgb, var(--arc, var(--gold-dim)) 15%, transparent); }

  /* ── PROVINCE CITY-COUNT BAR ──────────────────────────── */
  .nh-pc-citybar {
    margin-top: 12px; height: 2px; background: var(--border); border-radius: 1px; overflow: hidden;
    position: relative; z-index: 1;
  }
  .nh-pc-citybar-fill {
    height: 100%; border-radius: 1px;
    background: color-mix(in srgb, var(--accent) 55%, transparent);
    transition: width 0.8s 0.3s cubic-bezier(0.2,0,0.2,1);
    width: 0;
  }

  /* ── IMPROVED SECTION DIVIDERS ───────────────────────── */
  .nh-section-div {
    display: flex; align-items: center; gap: 18px;
    padding: 0 var(--page-pad); max-width: 1180px; margin: 0 auto;
    margin-top: 64px; margin-bottom: 0;
  }
  .nh-section-div::before, .nh-section-div::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(to right, transparent, color-mix(in srgb, var(--accent) 32%, var(--border)), transparent);
  }

  /* Atmospheric band behind the neighbouring-lands section — full-width
     100vw ::after behind a centred .section (same pattern as Faiths/Territory;
     see the note there). Negative section margins used to break centring. */
  .nh-info #nh-others::after {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
    background:
      linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 35%, var(--border)), transparent) top center / 70% 1px no-repeat,
      radial-gradient(ellipse 80% 60% at 50% 0%,
        color-mix(in srgb, var(--accent) 4%, var(--bg2)),
        var(--bg) 55%);
  }

  /* ── LORE/CODEX ENTRY VISUAL HEADER ON NATION PAGE ───── */
  .nh-arc-entry .nh-arc-visual { height: 80px; }
  .nh-arc-vis-initial { font-size: 80px; }

  /* ── FAITH RELATIONSHIP INFLUENCE BAR ────────────────── */
  .nh-faith-influence {
    height: 2px; background: var(--border); margin-top: 14px; border-radius: 1px; overflow: hidden;
  }
  .nh-faith-influence-fill {
    height: 100%; border-radius: 1px;
    background: color-mix(in srgb, var(--fc, var(--gold-dim)) 65%, transparent);
    transition: width 0.9s 0.25s cubic-bezier(0.15,0,0.2,1); width: 0;
  }

  /* ── POSTURE INDICATOR CHIP ──────────────────────────── */
  .nh-other-posture-chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: 'JetBrains Mono', monospace; font-size: 7.5px; letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--oc, var(--gold-light)) 88%, var(--gold-bright));
    border: 1px solid color-mix(in srgb, var(--oc, var(--gold-dim)) 38%, transparent);
    background: color-mix(in srgb, var(--oc, var(--gold-dim)) 10%, transparent);
    padding: 3px 8px; margin-top: 8px;
  }
  .nh-other-posture-chip::before {
    content: ''; width: 5px; height: 5px; border-radius: 50%;
    background: var(--oc, var(--gold-dim));
    box-shadow: 0 0 7px color-mix(in srgb, var(--oc, var(--gold-dim)) 55%, transparent);
    flex-shrink: 0;
  }
  /* Posture semantic colors: allied = teal, hostile = warm red, rival = purple */
  .nh-other-posture-chip.pc-allied {
    color: var(--accent-moss);
    border-color: color-mix(in srgb, var(--accent-moss) 42%, transparent);
    background: color-mix(in srgb, var(--accent-moss) 9%, transparent);
  }
  .nh-other-posture-chip.pc-allied::before {
    background: var(--accent-moss);
    box-shadow: 0 0 7px color-mix(in srgb, var(--accent-moss) 55%, transparent);
  }
  .nh-other-posture-chip.pc-hostile {
    color: var(--nation-frysia);
    border-color: color-mix(in srgb, var(--nation-frysia) 42%, transparent);
    background: color-mix(in srgb, var(--nation-frysia) 9%, transparent);
  }
  .nh-other-posture-chip.pc-hostile::before {
    background: var(--nation-frysia);
    box-shadow: 0 0 7px color-mix(in srgb, var(--nation-frysia) 55%, transparent);
  }
  .nh-other-posture-chip.pc-rival {
    color: var(--accent-purple);
    border-color: color-mix(in srgb, var(--accent-purple) 42%, transparent);
    background: color-mix(in srgb, var(--accent-purple) 9%, transparent);
  }
  .nh-other-posture-chip.pc-rival::before {
    background: var(--accent-purple);
    box-shadow: 0 0 7px color-mix(in srgb, var(--accent-purple) 55%, transparent);
  }

  /* ── JOURNEY CTA — more cinematic ────────────────────── */
  .nh-journey {
    margin-top: 0; /* neighbors are now above this */
    border-top: none; /* neighbors section ends with its own divider visual */
  }

  /* §nation-compact: the figure-preview face-row + the section-navigator strip
     were removed from the markup; their styles used to live here. */

  /* ── CONNECTIONS OF {NATION} — one contained panel, facet columns
     side by side with hairline rules between them (Pass 3, calmer
     than the old card-grid constellation). ── */
  .nh-connections {
    padding: 72px 0 80px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    position: relative;
  }
  .nh-connections-inner {
    max-width: 1180px; margin: 0 auto; padding: 0 var(--page-pad);
  }
  .nh-connections-header { margin-bottom: 32px; }
  .nh-connections-title {
    font-family: 'Cinzel', serif; font-size: clamp(22px, 3.2vw, 36px); font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold-bright);
    line-height: 1.1;
  }
  .nh-connections-title em { font-style: italic; font-weight: 400; color: var(--accent); }
  .nh-connections-panel {
    display: flex; flex-wrap: wrap;
    background: var(--bg2); border: 1px solid var(--border);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 3%, transparent),
      inset 0 40px 60px -40px color-mix(in srgb, var(--accent) 8%, transparent);
  }
  .nhcg-col {
    flex: 1 1 190px; min-width: 190px;
    padding: 26px 24px 28px;
    border-right: 1px solid var(--border);
  }
  .nhcg-col:last-child { border-right: none; }
  .nhcg-col-head {
    font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--gold-light);
    margin-bottom: 16px;
  }
  .nhcg-col-count { color: var(--text-muted); letter-spacing: 0.05em; }
  .nhcg-list {
    list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  }
  .nhcg-item { border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
  .nhcg-item:first-child { border-top: none; }
  .nhcg-link {
    display: flex; flex-direction: column; padding: 9px 0; text-decoration: none; gap: 2px;
  }
  .nhcg-link:hover .nhcg-item-name { color: var(--accent); }
  .nhcg-item-name {
    font-family: 'Cinzel', serif; font-size: 12px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold-light);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color 0.15s;
  }
  .nhcg-item-sub {
    font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .nhcg-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .nhcg-fact {
    display: flex; flex-direction: column; gap: 2px; padding: 9px 0;
    border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  }
  .nhcg-fact:first-child { border-top: none; }
  .nhcg-fact-label {
    font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-muted);
  }
  .nhcg-fact-value {
    font-family: 'Cinzel', serif; font-size: 12px; font-weight: 600;
    letter-spacing: 0.03em; color: var(--gold-light);
  }
  @media (max-width: 640px) {
    .nh-connections-panel { flex-direction: column; }
    .nhcg-col { border-right: none; border-bottom: 1px solid var(--border); }
    .nhcg-col:last-child { border-bottom: none; }
  }

  /* ── ARCHIVE — featured first entry spans full grid width ── */
  .nh-archive .nh-arc-entry:first-child {
    grid-column: 1 / -1;
  }
  .nh-archive .nh-arc-entry:first-child .nh-arc-visual {
    height: 170px;
    margin: -20px -20px 18px;
  }
  .nh-archive .nh-arc-entry:first-child .nh-arc-title {
    font-size: 20px; line-height: 1.15;
  }
  .nh-archive .nh-arc-entry:first-child .nh-arc-sub {
    -webkit-line-clamp: 4; font-size: 13px;
  }
  .nh-archive .nh-arc-entry:first-child .nh-arc-vis-initial {
    font-size: 110px;
  }
  .nh-arc-time {
    font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--text-muted); margin-top: 6px;
  }

  /* ════════════════════════════════════════════════════════════
     COHESION PASS — quiet the page so it reads like the rest of the site.
     ════════════════════════════════════════════════════════════ */
  .nh-faith { border-left: 1px solid var(--border); }
  .nh-faith:hover { border-left-color: var(--border); } /* no coloured stripe on hover */
  .nh-faith::after { display: none; }
  .nh-faith-influence { display: none; } /* drop the rust "influence" bar — reads as a weird blocky line */

  .nh-feat-story { border-bottom: 1px solid var(--border); min-height: 560px; }
  .nh-feat-story:hover { border-bottom-color: var(--gold-dim); }

  .nh-prov-card { border-left: 1px solid var(--border); }
  .nh-prov-card:hover { border-left-color: var(--gold-dim); }
  .nh-prov-card--capital { border-left-color: var(--gold-dim); }

  .nh-arc-entry { border-left: 1px solid var(--border); }

  /* ════════════════════════════════════════════════════════════════════════
     §nation-compact — cohesion & compaction pass
     The constellation is the centrepiece; everything below it should read as
     ONE tight, organised system, not a stack of separate experiments. So:
       · hide the extra glyph dividers — each section head already draws its own
         hairline, so the page needs ONE separator system, not two;
       · pull the sections closer together (the global 100px section gap left the
         page feeling loose and "spread out");
       · calm the long italic intros into short, even subtitles.
     ════════════════════════════════════════════════════════════════════════ */
  .nh-section-div { display: none; }
  .nh-info .section { padding-bottom: 60px; }
  .nh-section-intro {
    margin: 2px 0 22px; max-width: 560px; line-height: 1.6;
    font-size: clamp(13px, 1.4vw, 15px); opacity: 0.82;
  }
  @media (max-width: 700px) {
    .nh-info .section { padding-bottom: 46px; }
  }

  /* ── SECTION VISUAL DIFFERENTIATION — full-width tinted bands ──
     Each major section gets a subtle identity via an alternating background
     tint. The tint is a FULL-WIDTH band painted by a 100vw ::after pinned
     BEHIND a normally-centred .section (body has overflow-x:hidden, so the
     100vw bleed never adds a horizontal scrollbar).
     Why a pseudo-element and NOT margins on the section: the band used to be
     applied to the .section itself with negative left/right margins, which
     cancelled the section's own `margin:0 auto`. On wide screens that stranded
     People / Faiths / Territory / Nations hard against the left edge with dead
     space on the right — the "some sections go left instead of centre" bug.
     Painting the band on ::after leaves the section perfectly centred like
     every other section, while the tint still spans edge to edge. */
  .nh-info #nh-people::after,
  .nh-info #nh-codex::after {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  }
  .nh-info #nh-people::after {
    background:
      linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 40%, var(--border)), transparent) top center / 70% 1px no-repeat,
      color-mix(in srgb, var(--accent) 2%, var(--bg2));
  }
  .nh-info #nh-codex::after {
    background:
      linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 40%, var(--border)), transparent) top center / 70% 1px no-repeat,
      var(--bg2);
  }

  /* ── STANCE NOTE TEXT ────────────────────────────────── */
  .nh-other-stance-note {
    font-family: 'Inter', sans-serif; font-size: 10px; font-style: italic;
    color: var(--text-muted); margin-top: 8px;
    line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }

  /* ── OVERVIEW EDITORIAL TREATMENT ───────────────────────────
     Drop-cap on the first paragraph gives the overview section
     a magazine-editorial quality, signalling this is a document
     worth reading rather than a data dump.
     ─────────────────────────────────────────────────────────── */
  .nh-body > p:first-child::first-letter {
    font-family: 'Cinzel', serif; font-weight: 700;
    font-size: 4.2em; line-height: 0.78;
    float: left; margin-right: 0.11em; margin-top: 0.06em;
    color: var(--accent);
    text-shadow: 0 0 30px color-mix(in srgb, var(--accent) 38%, transparent);
  }

  /* ── SECTION CONTEXTUAL SUBTITLES ─────────────────────────── */
  .nh-section-sub {
    font-family: 'Inter', sans-serif; font-size: 13px; font-style: italic;
    color: var(--text-sub); max-width: 600px;
    margin: -6px 0 28px; line-height: 1.55;
  }

  /* ── TIMELINE ERA HEADERS — full-width chapter break ────── */
  .nh-tl-era-header {
    display: flex; align-items: center; gap: 14px;
    padding: 18px var(--page-pad) 14px;
    margin: 8px calc(-1 * var(--page-pad)) 0;
    background: color-mix(in srgb, var(--accent) 5%, var(--bg2));
    border-top: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 10%, var(--border));
    font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.44em; text-transform: uppercase;
    color: var(--accent);
  }
  .nh-tl-era-header::before {
    content: ''; width: 18px; height: 1px;
    background: var(--accent); opacity: 0.65; flex-shrink: 0;
  }
  .nh-tl-era-header::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(to right, color-mix(in srgb, var(--accent) 55%, transparent), transparent);
  }
  .nh-tl-era-label { flex-shrink: 0; }

  /* ── PROVINCE TERRAIN BADGE ──────────────────────────────── */
  .nh-prov-terrain {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: 'JetBrains Mono', monospace; font-size: 7px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--text-muted);
    margin-top: 8px;
  }
  .nh-prov-terrain::before {
    content: ''; width: 4px; height: 4px; border-radius: 50%;
    background: var(--text-muted); flex-shrink: 0; opacity: 0.7;
  }

  /* ── NEIGHBOURING NATION STANCE TINT ─────────────────────── */
  .nh-other[data-tone="ally"] {
    background: color-mix(in srgb, var(--bg2) 94%, var(--accent-moss));
  }
  .nh-other[data-tone="enemy"] {
    background: color-mix(in srgb, var(--bg2) 94%, var(--nation-frysia));
  }
  .nh-other[data-tone="rival"] {
    background: color-mix(in srgb, var(--bg2) 94%, var(--accent-purple));
  }
  .nh-other[data-tone="ally"]:hover {
    background: color-mix(in srgb, var(--bg3) 88%, var(--accent-moss));
  }
  .nh-other[data-tone="enemy"]:hover {
    background: color-mix(in srgb, var(--bg3) 88%, var(--nation-frysia));
  }
  .nh-other[data-tone="rival"]:hover {
    background: color-mix(in srgb, var(--bg3) 88%, var(--accent-purple));
  }

  /* ── GLIMPSES — owner-authored image + text panels ──────────
     One reused image field, shown clean and big: a wide unframed
     image beside a slim prose column, sides alternating per row.  */
  .nh-glimpses { padding-top: 26px; }
  .nh-glimpse-list { display: flex; flex-direction: column; gap: 72px; }
  .nh-glimpse {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(24px, 4vw, 56px); align-items: center;
  }
  .nh-glimpse--flip .nh-glimpse-media { order: 2; }
  .nh-glimpse--flip .nh-glimpse-body { order: 1; }
  .nh-glimpse-media { margin: 0; position: relative; }
  .nh-glimpse-media img {
    display: block; width: 100%; height: auto; max-height: 560px; object-fit: cover;
    filter: brightness(0.92);
    transition: filter 0.5s ease;
  }
  .nh-glimpse:hover .nh-glimpse-media img { filter: brightness(1); }
  /* Soft floor shadow so the image sits IN the page, not pasted on it */
  .nh-glimpse-media::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    box-shadow: inset 0 0 60px rgba(0,0,0,0.35);
  }
  .nh-glimpse-title {
    font-family: 'Cinzel', serif; font-size: clamp(18px, 2vw, 26px); font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-bright);
    line-height: 1.2; margin: 0 0 14px;
  }
  .nh-glimpse-text p {
    font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 300;
    color: var(--text-sub); line-height: 1.85; margin: 0 0 14px;
  }
  .nh-glimpse-text p:last-child { margin-bottom: 0; }
  .nh-glimpse-body--full { max-width: 720px; margin: 0 auto; grid-column: 1 / -1; }
  @media (max-width: 860px) {
    .nh-glimpse, .nh-glimpse--flip { grid-template-columns: 1fr; gap: 20px; }
    .nh-glimpse--flip .nh-glimpse-media { order: 0; }
    .nh-glimpse--flip .nh-glimpse-body { order: 0; }
    .nh-glimpse-list { gap: 52px; }
  }

  /* ── CHARACTER NARRATIVE ROLE BADGE ───────────────────────
     Keyword-inferred archetype shown as a tiny monospace tag
     above the character name — communicates narrative ROLE,
     not just faction membership.                              */
  .nh-fig-role {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 7.5px; letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--role-color, var(--accent)); opacity: 0.85;
    margin-bottom: 4px;
  }
  .nh-fig-role::before {
    content: '◆ '; font-size: 6px; opacity: 0.7;
  }
  /* Role-specific accent colors — each archetype reads distinctly at a glance */
  .nh-fig-role[data-role="Ruler"]     { --role-color: var(--gold-light); }
  .nh-fig-role[data-role="Prophet"]   { --role-color: oklch(68% 0.12 54); }
  .nh-fig-role[data-role="Commander"] { --role-color: var(--nation-frysia); }
  .nh-fig-role[data-role="Scholar"]   { --role-color: var(--nation-britannia); }
  .nh-fig-role[data-role="Merchant"]  { --role-color: oklch(66% 0.11 148); }
  .nh-fig-role[data-role="Rebel"]     { --role-color: var(--accent-rust); }
  .nh-fig-role[data-role="Founder"]   { --role-color: var(--gold-bright); }
  .nh-fig-role[data-role="Shadow"]    { --role-color: oklch(60% 0.06 280); }

  /* ── PROVINCE STRATEGIC ROLE ────────────────────────────────
     Replaces the bare terrain label with a richer strategic
     role classification rendered as an accent-tinted badge.   */
  .nh-prov-role {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 7.5px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    padding: 2px 8px; margin-top: 8px;
    align-self: flex-start;
  }

  /* ── ARCHIVE-PENDING — sparse nation graceful empty state ── */
  .nh-archive-pending {
    max-width: 680px; margin: 0 auto 72px; padding: 0 var(--page-pad);
    display: flex; flex-direction: column; align-items: center; gap: 24px;
    text-align: center;
  }
  .nh-ap-rule {
    width: 100%; height: 1px; position: relative;
    background: linear-gradient(to right, transparent, var(--border) 20%, var(--border) 80%, transparent);
  }
  .nh-ap-rule::before {
    content: ''; position: absolute; top: -4px; left: 50%; transform: translateX(-50%) rotate(45deg);
    width: 9px; height: 9px;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    background: var(--bg);
  }
  .nh-ap-inner {
    padding: 16px 0 8px; display: flex; flex-direction: column; align-items: center; gap: 16px;
  }
  .nh-ap-glyph {
    width: 36px; height: 36px; position: relative;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    transform: rotate(45deg);
  }
  .nh-ap-glyph::before {
    content: ''; position: absolute; inset: 5px;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  }
  .nh-ap-text {
    font-family: 'Inter', sans-serif; font-size: 15px; font-style: italic;
    color: var(--text-muted); line-height: 1.72; max-width: 460px;
  }
  .nh-ap-explore {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
    font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--accent); text-decoration: none; transition: gap 0.2s;
  }
  .nh-ap-explore:hover { gap: 14px; }

  /* ════════════════════════════════════════════════════════
     ACT 2 / ACT 4 — SHARED SCROLL-SNAP CAROUSEL RAIL
     Horizontal rail of cards with floating arrow buttons and
     dot pagination beneath. Reused by Notable Figures (Act 2)
     and Neighbouring Powers (Act 4, Pass 3). The JS helper
     that drives it (initNhCarousel) lives in the scripts stack below.
     ════════════════════════════════════════════════════════ */
  .nh-carousel { position: relative; margin: 0 -4px; }
  .nh-rail {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 4px 4px 8px; margin: 0; list-style: none;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .nh-rail::-webkit-scrollbar { display: none; }
  .nh-rail-card {
    flex: 0 0 auto; width: clamp(210px, 22vw, 240px);
    scroll-snap-align: start;
  }
  /* First (featured) card — accent border + soft outer glow (no heavy
     bottom bar; the tint alone marks it as the lead). */
  .nh-rail-card--lead .nh-figure {
    border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent),
      0 14px 44px color-mix(in srgb, var(--accent) 16%, transparent);
  }
  /* Rail cards use a fixed 3:4 portrait rather than the grid's tall min-height */
  .nh-rail-card .nh-figure { min-height: 0; height: 100%; }
  .nh-rail-card .nh-fig-img { aspect-ratio: 3 / 4; min-height: 0; height: auto; }
  .nh-rail-card .nh-fig-body { padding: 16px 18px 18px; }
  .nh-rail-card .nh-fig-name { font-size: 14.5px; }
  .nh-rail-card .nh-fig-summary { -webkit-line-clamp: 3; font-size: 11.5px; }

  /* ── Prev/next arrow buttons — floating at the rail's outer edges ── */
  .nh-carousel-arrow {
    position: absolute; top: 40%; transform: translateY(-50%); z-index: 2;
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s, opacity 0.2s;
  }
  .nh-carousel-arrow:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: var(--bg2); }
  .nh-carousel-arrow[disabled] { opacity: 0.25; pointer-events: none; }
  .nh-carousel-arrow--prev { left: -20px; }
  .nh-carousel-arrow--next { right: -20px; }
  @media (max-width: 900px) {
    .nh-carousel-arrow { display: none; }
  }

  /* ── Dot pagination — centred beneath the rail ── */
  .nh-carousel-dots {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin-top: 18px;
  }
  .nh-carousel-dot {
    width: 6px; height: 6px; border-radius: 999px; padding: 0;
    border: none; background: color-mix(in srgb, var(--text-muted) 35%, transparent);
    cursor: pointer; transition: width 0.25s, background 0.25s, opacity 0.25s;
  }
  .nh-carousel-dot:hover { background: color-mix(in srgb, var(--accent) 60%, transparent); }
  .nh-carousel-dot.active { width: 20px; background: var(--accent); }

  /* ════════════════════════════════════════════════════════
     ACT 3 — TABBED CODEX
     Centred tab bar (Cinzel headers, gold active state, muted
     steel-blue inactive) driving four content panels sharing
     one container so switching tabs doesn't shift page width.
     ════════════════════════════════════════════════════════ */
  .nh-codex { position: relative; }
  .nh-codex-tabs {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: clamp(20px, 4vw, 48px);
    margin: 0 0 40px; padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    position: relative;
  }
  .nh-codex-tab {
    position: relative; background: none; border: none; cursor: pointer;
    font-family: 'Cinzel', serif; font-size: clamp(11px, 1.3vw, 13px);
    letter-spacing: 0.16em; text-transform: uppercase;
    color: color-mix(in oklch, var(--accent-blue) 45%, var(--text-muted));
    padding: 4px 2px 14px;
    transition: color 0.25s;
  }
  .nh-codex-tab::after {
    content: ''; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%);
    width: 0; height: 2px; background: var(--gold-light);
    box-shadow: 0 0 10px color-mix(in srgb, var(--gold-light) 55%, transparent);
    transition: width 0.3s var(--ease-out);
  }
  .nh-codex-tab:hover { color: var(--text-sub); }
  .nh-codex-tab[aria-selected="true"] {
    color: var(--gold-light);
  }
  .nh-codex-tab[aria-selected="true"]::after { width: 100%; }

  .nh-codex-panels { max-width: 1180px; margin: 0 auto; }
  .nh-codex-panel {
    opacity: 0; transform: translateY(10px);
    transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
  }
  .nh-codex-panel.nh-codex-panel--in { opacity: 1; transform: none; }
  .nh-codex-panel[hidden] { display: none; }

  /* Chronicle panel: lore grid, then the timeline beneath with breathing room */
  .nh-codex-chronicle-timeline { margin-top: 44px; }

  /* Compact modifiers — tighten Land/Faiths panels so they read curated, not sprawling */
  .nh-prov-cards--compact .nh-prov-visual { height: 84px; }
  .nh-prov-cards--compact .nh-prov-visual-initial { font-size: 64px; }
  .nh-prov-cards--compact .nh-prov-card-body { padding: 16px 22px 18px; }
  .nh-prov-cards--compact .nh-pc-name { font-size: 15px; margin-bottom: 8px; }
  .nh-prov-cards--compact .nh-pc-desc { font-size: 12.5px; margin-bottom: 10px; -webkit-line-clamp: 2; }
  .nh-faiths--compact .nh-faith-visual { height: 92px; }
  .nh-faiths--compact .nh-faith-vis-initial { font-size: 72px; }
  .nh-faiths--compact .nh-faith-body { padding: 16px 20px 15px; }
  .nh-faiths--compact .nh-faith-name { font-size: 16px; }
  .nh-faiths--compact .nh-faith-note { font-size: 12px; }

  @media (prefers-reduced-motion: reduce) {
    .nh-codex-panel, .nh-codex-tab::after, .nh-carousel-dot { transition: none; }
    .nh-other, .nh-other-bg, .nh-other::before, .nh-other::after, .nh-other-arrow {
      transition: none;
    }
    .nh-other:hover .nh-other-bg { transform: none; }
  }