/* === Global Landing Header System === */
:root{
  --header-h: 64px;     /* JS measures & updates this */
  --header-gap: 34px;   /* constant breathing room */
  --subnav-h: 48px;     /* optional: only if page has sticky subnav */
  --padX: clamp(16px,3vw,24px);

  /* Brand accents (page may override) */
  --accent-start:#d8b4fe;
  --accent-end:#8b5cf6;
}

/* Mobile-first sensible defaults to reduce CLS before JS runs */
@media (max-width:780px){
  :root{
    --header-h: 56px;   /* closer mobile estimate */
    --header-gap: 22px; /* slightly tighter by default */
  }
}

/* Layout helpers */
.container{ max-width:1200px; margin:0 auto; padding: calc(var(--header-h) + var(--header-gap)) var(--padX) 72px; }
.container--topless{ max-width:1200px; margin:0 auto; padding: 0 var(--padX) 72px; } /* use for the hero wrapper */

/* Global hero */
.landing-hero{
  text-align:center; margin-top:0;
  /* Default vertical offset for hero H1 (menu→H1 gap). Tweakable per page. */
  padding-top: 96px;
}
@media (max-width:780px){ .landing-hero{ padding-top:72px; } }

/* Global heading visuals */
.landing-header{
  font-family:'Satoshi', Inter, system-ui, sans-serif; font-weight:700; line-height:1.18; letter-spacing:-.3px;
  margin:0 auto 12px; padding-bottom:.18em; max-width:760px;
  font-size:clamp(2.2rem,5vw,3rem);
  background:linear-gradient(90deg,var(--accent-start),var(--accent-end));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.landing-subtitle{ font-family:'Manrope',system-ui,sans-serif; font-weight:400; font-size:clamp(1.05rem,2.5vw,1.25rem); color:#ccc; margin:0 auto 28px; max-width:720px; }
.landing-divider{
  height:2px; width:90%; max-width:860px; margin:0 auto 48px;
  background:linear-gradient(90deg,var(--accent-start),var(--accent-end)); border-radius:4px;
  box-shadow:0 0 10px color-mix(in oklab, var(--accent-end) 28%, transparent);
}

/* Optional sticky subnav shell that uses global vars */
.subnav-wrap{ position:sticky; top:var(--header-h); z-index:20; background:linear-gradient(#000 70%, rgba(0,0,0,.82)); backdrop-filter:saturate(120%) blur(6px); border-bottom:1px solid #111; }
section{ scroll-margin-top: calc(var(--header-h) + var(--subnav-h) + 12px); }

/* Safety with GeneratePress */
.site-header, .inside-header{ margin:0 !important; padding:0 !important; }

.scroll-scrim{
  position: fixed; top: 0; left: 0; right: 0;
  height: 0; background:#000;
  z-index: 19; pointer-events: none;
  transition: height .2s ease;
}/* ================================
   Archive Vault Color Scheme
   Purple → Gold POP
   ================================ */

:root{
  --accent-start:#a855f7;   /* vivid purple */
  --accent-end:#facc15;     /* gold */

  --card-bd:#1d1d22;
  --card-bd-hover:#2a2a33;
  --copy:#cfcfd2;

  --wash: rgba(250,204,21,.16);
  --wash-hover: rgba(250,204,21,.22);

  --padX: clamp(16px,3vw,24px);
}

/* ----------------
   HERO HEADER
   ---------------- */
.landing-header{
  background:linear-gradient(90deg,var(--accent-start),var(--accent-end),var(--accent-start));
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  font-weight:800;
  animation:shine 8s linear infinite;
}
@keyframes shine{ to{ background-position:-200% center; } }

/* Subtitle */
.landing-subtitle{
  color:#cccccc;
}

/* Divider Glow */
.landing-divider{
  background:linear-gradient(90deg,var(--accent-start),var(--accent-end));
  border-radius:4px;
  height:2px; width:90%; max-width:860px; margin:0 auto 14px;
  box-shadow:
    0 0 12px rgba(250,204,21,.55),
    0 0 18px rgba(168,85,247,.45);
}

/* ----------------
   BUTTONS
   ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:10px 14px;
  border-radius:10px; font-weight:700; text-decoration:none;
  font-size:.96rem; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

/* Primary: gradient + glow */
.btn.primary{
  color:#111;
  background:linear-gradient(90deg,var(--accent-start),var(--accent-end));
  border:0;
  box-shadow:
    0 6px 18px rgba(0,0,0,.45),
    0 0 14px rgba(250,204,21,.4),
    0 0 18px rgba(168,85,247,.35);
}
.btn.primary:hover{ transform:translateY(-2px); }

/* Secondary: subtle with gradient borders */
.btn.secondary{
  color:#f2f2f2; background:#17171b;
  border:1px solid var(--accent-start);
}
.btn.secondary:hover{
  border-color: var(--accent-end);
  background:#1b1b20;
  transform:translateY(-2px);
}/* =========================================================
   ARCHIVE VAULT (AV POP) — Shared Styles
   Pages: NPC Map, Validators/Hoverers, Scroll of the Probes, Field Systems Manual
   ========================================================= */

/* --- Base / Variables --- */
html, body {
  background:#0d0d10 !important;
  color:#f2f2f2;
  margin:0;
}
* { box-sizing:border-box }

:root{
  /* AV POP palette */
  --accent-start:#a855f7;   /* vivid purple */
  --accent-end:#facc15;     /* gold */

  /* layout */
  --maxw: 1200px;
  --padX: clamp(16px, 3vw, 24px);

  /* measured by JS (safe defaults) */
  --header-h: 64px;
  --toc-h: 48px;            /* sticky pills bar */
  --anchor-offset: calc(var(--header-h) + var(--toc-h) + 12px);

  /* cards */
  --card-bg:#0f0f13;
  --card-bd:#1d1d22;
  --card-bd-hover:#2a2a33;
  --copy:#cfcfd2;

  /* depth washes */
  --wash: rgba(250,204,21,.16);
  --wash-hover: rgba(250,204,21,.22);

  /* type scale (tweakable) */
  --size-body:    clamp(1.00rem, 2.1vw, 1.10rem);
  --size-lead:    clamp(1.04rem, 2.4vw, 1.16rem);
  --size-card-h3: clamp(1.02rem, 2.3vw, 1.18rem);
  --size-pill:    clamp(.92rem,  1.9vw, 1.02rem);
  --lh-body: 1.76;
  --lh-tight:1.22;
}

/* Global anchors behave like text by default */
a { color: inherit; text-decoration: none; }

/* Container */
.container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--padX) 80px;
}

/* ---------------------------------------------------------
   HERO — gradient header shimmer + divider glow
   --------------------------------------------------------- */
.landing-hero{ text-align:center; margin-top:0; padding-top:96px; }
@media (max-width:780px){ .landing-hero{ padding-top:72px; } }

.landing-header{
  font-family:'Satoshi', Inter, system-ui, sans-serif;
  font-weight:800;
  letter-spacing:-.2px;
  line-height:1.14;
  margin:0 auto 10px;
  max-width:860px;
  font-size:clamp(2.2rem,5vw,3rem);

  background:linear-gradient(90deg,var(--accent-start),var(--accent-end),var(--accent-start));
  background-size:200% auto;
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
          color:transparent;
  animation:av-shine 8s linear infinite;
}
@keyframes av-shine{ to{ background-position:-200% center; } }

.landing-subtitle{ color:#cccccc; margin:0 auto 12px; max-width:820px; }

.landing-divider{
  height:2px; width:90%; max-width:860px; margin:0 auto 6px;
  background:linear-gradient(90deg,var(--accent-start),var(--accent-end));
  border-radius:4px;
  box-shadow:
    0 0 12px rgba(250,204,21,.55),
    0 0 18px rgba(168,85,247,.45);
}

/* ---------------------------------------------------------
   Sticky TOC (pills) — smart centering + edge fades
   --------------------------------------------------------- */
.toc-wrap{
  position:-webkit-sticky; position:sticky;
  top: var(--header-h, 64px);
  z-index:25;
  background:#0d0d10 !important;
  border-bottom:1px solid #111;
  width:100%;
  margin-top:0;
  padding:6px 0 10px;
  overflow:visible; /* no hover clipping */
}
.toc-inner{ max-width: var(--maxw); margin:0 auto; padding:0 var(--padX); }

.toc{
  display:flex; gap:10px; align-items:center;
  justify-content:flex-start;
  margin:0 auto; max-width:980px;
  overflow-x:auto; overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  scrollbar-width:none;
  padding-top:1px;
  position:relative; z-index:2;
}
.toc::-webkit-scrollbar{ display:none; }

/* Center on desktop when there is NO overflow */
@media (min-width:900px){
  .toc.is-centered{ justify-content:center; }
}

/* Edge fades ONLY when overflowing (use page bg for fade) */
.toc.overflowing{
  -webkit-mask-image: linear-gradient(to right, transparent 0, #0d0d10 32px, #0d0d10 calc(100% - 32px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #0d0d10 32px, #0d0d10 calc(100% - 32px), transparent 100%);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
@media (min-width:1200px){
  .toc.overflowing{
    -webkit-mask-image: linear-gradient(to right, transparent 0, #0d0d10 40px, #0d0d10 calc(100% - 40px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #0d0d10 40px, #0d0d10 calc(100% - 40px), transparent 100%);
  }
}
/* Fallback if mask-image unsupported */
@supports not (mask-image: linear-gradient(#000, #000)){
  .toc.overflowing{ position:relative; }
  .toc.overflowing::before, .toc.overflowing::after{
    content:""; position:absolute; top:0; bottom:0; width:40px; pointer-events:none; z-index:5;
  }
  .toc.overflowing::before{ left:0;  background:linear-gradient(90deg, #0d0d10 0%, rgba(13,13,16,0) 100%); }
  .toc.overflowing::after{  right:0; background:linear-gradient(270deg, #0d0d10 0%, rgba(13,13,16,0) 100%); }
}

/* Pills — purple border intensifies; never darkens bg on hover */
.pill{
  display:inline-block; padding:8px 12px; border-radius:999px;
  color:#e9e9ed; text-decoration:none; font-weight:700; font-size:var(--size-pill);
  background:#17171b;
  border:1px solid rgba(216,180,254,.35);
  transition:transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
  white-space:nowrap; flex:0 0 auto;
}
.pill:link, .pill:visited, .pill:hover, .pill:focus, .pill:active{
  color:#e9e9ed !important; -webkit-text-fill-color:#e9e9ed; text-decoration:none;
}
.pill:hover{ transform:translateY(-0.5px); border-color:var(--accent-start); background:#17171b; }
.pill:focus{ outline:2px solid var(--accent-start); outline-offset:2px; }

/* ---------------------------------------------------------
   Sections / Typography
   --------------------------------------------------------- */
body.npc-map-page,
body.validators-hoverers-page,
body.scroll-of-the-probes-page,
body.field-systems-manual-page{
  font-size: var(--size-body);
  line-height: var(--lh-body);
}

.section{ margin:28px auto 0; max-width:1000px; padding:0 var(--padX); }
.section h2{
  font-family:"Satoshi", Inter, system-ui, sans-serif; font-weight:800;
  font-size:clamp(1.4rem,3.5vw,1.8rem); margin:0 0 12px;
  scroll-margin-top: var(--anchor-offset, 96px);
}
.lead{ color:var(--copy); font-size:var(--size-lead); margin:0 0 12px; }

/* Slightly larger pills on the Validators page for touch comfort */
.validators-hoverers-page .pill{
  font-size: var(--size-pill);
  padding: 9px 13px;
}

/* ---------------------------------------------------------
   Grid & Cards
   --------------------------------------------------------- */
.grid{ display:grid; gap:18px; grid-template-columns:repeat(1,minmax(0,1fr)); }
@media(min-width:820px){ .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(min-width:1100px){ .npc-map-page .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.card{
  position:relative; display:block; color:inherit; text-decoration:none;
  background:
    radial-gradient(140% 120% at 100% 100%, var(--wash), transparent 58%),
    var(--card-bg);
  border:1px solid var(--card-bd); border-radius:18px;
  padding:18px 18px 16px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  box-shadow:0 10px 30px rgba(0,0,0,.35); overflow:hidden; isolation:isolate;
  min-height: 180px;
}
.card:hover{
  transform:translateY(-3px); border-color:var(--card-bd-hover);
  background: radial-gradient(150% 130% at 100% 100%, var(--wash-hover), transparent 60%), var(--card-bg);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}

.card h3{
  margin:2px 0 10px; font-size:var(--size-card-h3); font-weight:800; letter-spacing:.25px;
  color:#f2f2f2; position:relative; line-height:var(--lh-tight);
}
.card h3::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px;
  background:linear-gradient(90deg,var(--accent-start),var(--accent-end));
  transition:width .28s ease;
}
.card:hover h3::after{ width:100%; }

.row{ margin:6px 0; color:var(--copy); font-size:var(--size-body); line-height:1.75; }
.row strong{ color:#f6f6f7; }

/* meta tags (FSM etc.) */
.meta{ display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 10px; }
.tag{
  display:inline-block; padding:5px 9px; border-radius:999px; font-size:.78rem; color:#a6a6ab;
  border:1px solid rgba(216,180,254,.3); background:rgba(216,180,254,.06);
}
/* callouts */
.callout{
  border:1px solid rgba(216,180,254,.35);
  background:#101116;
  border-radius:14px;
  padding:12px;
  color:#cccccc;
  font-size:.96rem;
}

/* ---------------------------------------------------------
   Buttons (AV POP)
   --------------------------------------------------------- */
.cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; justify-content:center; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px;
  padding:10px 14px;
  border-radius:10px;
  font-weight:700;
  font-size:.96rem;
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  border:0; /* ensure links don't look default */
}

.btn.primary{
  color:#111;
  background:linear-gradient(90deg,var(--accent-start),var(--accent-end));
  box-shadow:
    0 6px 18px rgba(0,0,0,.45),
    0 0 14px rgba(250,204,21,.4),
    0 0 18px rgba(168,85,247,.35);
}
.btn.secondary{
  color:#f2f2f2;
  background:#17171b;
  border:1px solid var(--accent-start);
}
.btn.secondary:hover{ border-color:var(--accent-end); background:#1b1b20; }
.btn:hover{ transform: translateY(-2px); }

/* hybrid style (FSM) can just use .secondary for consistency */

/* ---------------------------------------------------------
   Reveal-on-scroll hooks (JS adds .in)
   --------------------------------------------------------- */
@keyframes fadeInUp{ from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:translateY(0)} }
html.js-enabled .reveal{ opacity:0; transform:translateY(18px) }
html.js-enabled .reveal.in{ animation:fadeInUp .7s ease-out forwards }
.d1{ animation-delay:.10s } .d2{ animation-delay:.22s } .d3{ animation-delay:.34s } .d4{ animation-delay:.46s }

/* ---------------------------------------------------------
   Sticky scrim behind fixed header (+ sticky pills when stuck)
   --------------------------------------------------------- */
.scroll-scrim{
  position: fixed; top: 0; left: 0; right: 0;
  height: 0; background:#0d0d10;
  z-index: 19; pointer-events: none;
  transition: height .2s ease;
}

/* ---------------------------------------------------------
   Page-level rhythm tweaks to match NPC Map cadence
   (snug hero → pills spacing; keep layout consistent)
   --------------------------------------------------------- */
.npc-map-page .container:has(.landing-hero),
.validators-hoverers-page .container:has(.landing-hero),
.scroll-of-the-probes-page .container:has(.landing-hero),
.field-systems-manual-page .container:has(.landing-hero){
  padding-bottom:0 !important;
}
.npc-map-page .landing-hero,
.validators-hoverers-page .landing-hero,
.scroll-of-the-probes-page .landing-hero,
.field-systems-manual-page .landing-hero{
  margin-bottom:0 !important;
}
.npc-map-page .landing-divider,
.validators-hoverers-page .landing-divider,
.scroll-of-the-probes-page .landing-divider,
.field-systems-manual-page .landing-divider{
  margin-bottom:6px !important;
}

/* Slightly tighter pills spacing on FSM */
.field-systems-manual-page .toc-wrap{ padding-top:6px !important; padding-bottom:8px !important; }
/* Standard pills spacing for others */
.npc-map-page .toc-wrap,
.validators-hoverers-page .toc-wrap,
.scroll-of-the-probes-page .toc-wrap{
  padding-top:6px !important; padding-bottom:10px !important;
}

/* Theme safety: prevent hidden overflow inside theme wrappers */
.npc-map-page #content, .npc-map-page .site-content, .npc-map-page .content-area,
.validators-hoverers-page #content, .validators-hoverers-page .site-content, .validators-hoverers-page .content-area,
.scroll-of-the-probes-page #content, .scroll-of-the-probes-page .site-content, .scroll-of-the-probes-page .content-area,
.field-systems-manual-page #content, .field-systems-manual-page .site-content, .field-systems-manual-page .content-area{
  overflow:visible !important;
}
.site-header, .inside-header { margin:0 !important; padding:0 !important; }

/* ---------------------------------------------------------
   Small-screen comfort tweaks
   --------------------------------------------------------- */
@media (max-width:520px){
  .card{ padding:20px 18px 18px; }
}

/* ---------------------------------------------------------
   Optional: compact one-line subtitle helper
   --------------------------------------------------------- */
.subtitle-one-line{ white-space:normal; }
/* If you truly want one-line lock, swap to:
.subtitle-one-line{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
*/

.callout.inline {
  display: inline-block;   /* shrink to content */
  width: auto;             /* no forced width */
  max-width: 100%;         /* prevent overflow */
  margin: 0 auto 18px;     /* center + spacing */
  white-space: nowrap;     /* keep text on one line */
}