/* Down the Chain — dark, calm, structured. No build step; tokens below are the theme.
   Brand palette: near-black #0A0E14 + ops-amber #F0A500 (never #515B64 text on navy). */
:root {
  --bg: #0a0e14;
  --bg-raise: #131926;
  --bg-raise2: #1a2233;
  --line: #283349;
  --text: #d7dce6;
  --text-dim: #98a2b6;
  --accent: #f0a500;
  --accent-bright: #ffbe2e;
  --accent-soft: #3a2f10;
  --link: #7fb8f0;
  --display: "Michroma", "Segoe UI", system-ui, sans-serif;
  --grade-a: #3fb27f;
  --grade-b: #5aa9e6;
  --grade-c: #d9a441;
  --grade-v: #b085f5;
  --warn-bg: #2b2313;
  --warn-line: #6e5a1e;
  --em: #4d9de0;
  --therm: #e15554;
  --kin: #9aa5b1;
  --exp: #e1a144;
  --radius: 8px;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 system-ui, "Segoe UI", Roboto, sans-serif;
  /* faint starfield + one amber nebula breath at the top — calm, not a light show */
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(215,220,230,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 62%, rgba(215,220,230,.22) 50%, transparent 51%),
    radial-gradient(1px 1px at 57% 31%, rgba(215,220,230,.30) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 71% 74%, rgba(215,220,230,.20) 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 12%, rgba(215,220,230,.28) 50%, transparent 51%),
    radial-gradient(1px 1px at 23% 88%, rgba(215,220,230,.18) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 93% 51%, rgba(215,220,230,.22) 50%, transparent 51%),
    radial-gradient(ellipse 80% 40% at 50% -10%, rgba(240,165,0,.06), transparent 60%);
  background-size: 520px 520px, 520px 520px, 520px 520px, 520px 520px,
                   520px 520px, 520px 520px, 520px 520px, 100% 900px;
  background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, repeat, no-repeat;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; }
h1 { font-size: 1.9rem; margin: .4em 0; }
h2 { font-size: 1.25rem; margin: 1.6em 0 .5em; border-bottom: 1px solid var(--line); padding-bottom: .3em; }
h3 { font-size: 1.02rem; margin: 1.2em 0 .4em; color: var(--text); }
.h2-note { font-weight: 400; font-size: .8rem; margin-left: .6em; }
.wrap { max-width: 62rem; margin: 0 auto; padding: 0 1rem; }
.mono { font-family: var(--mono); font-size: .92em; }
.muted { color: var(--text-dim); font-size: .92em; }

/* header / nav */
.topbar { background: var(--bg-raise); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.topbar-inner { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; padding-top: .55rem; padding-bottom: .55rem; }
.brand { font-family: var(--display); font-weight: 400; font-size: .98rem; color: var(--text);
         letter-spacing: .04em; text-transform: uppercase; }
.brand:hover { text-decoration: none; color: var(--text); }
.brand-accent { color: var(--accent); }
.nav { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: .98rem; }
.nav a { color: var(--text-dim); padding: .1rem 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--text); text-decoration: none; }
.nav a.active { color: var(--text); border-bottom-color: var(--accent); }

/* Atlas section sub-nav (rendered under the top bar on Atlas pages only) */
.subnav { background: var(--bg-raise2, var(--bg-raise)); border-bottom: 1px solid var(--line); }
.subnav-inner { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding-top: .35rem; padding-bottom: .35rem; font-size: .9rem; }
.subnav a { color: var(--text-dim); }
.subnav a:hover { color: var(--text); text-decoration: none; }
.subnav-home { font-weight: 600; color: var(--text); }

main { min-height: 60vh; padding-bottom: 3rem; }

/* pagefind search — restyle its UI vars to the theme */
.search { margin-left: auto; min-width: 14rem; flex: 0 1 18rem;
  --pagefind-ui-scale: .8;
  --pagefind-ui-primary: var(--accent);
  --pagefind-ui-text: var(--text);
  --pagefind-ui-background: var(--bg-raise2);
  --pagefind-ui-border: var(--line);
  --pagefind-ui-tag: var(--bg-raise2);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 6px;
  --pagefind-ui-font: inherit;
}
.search .pagefind-ui__drawer { position: absolute; right: 1rem; left: 1rem; max-width: 40rem;
  margin-left: auto; background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .6rem 1rem; max-height: 70vh; overflow-y: auto;
  box-shadow: 0 8px 30px rgba(0,0,0,.5); }
@media (max-width: 640px) { .search { flex-basis: 100%; margin-left: 0; } }

/* hero + stats */
.hero { padding: 2.8rem 0 .8rem; }
.hero h1 { font-size: 2.4rem; letter-spacing: .01em; }
.kicker { font-family: var(--mono); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
          color: var(--accent); margin: 0 0 .4rem; }
.lede { font-size: 1.12rem; color: var(--text-dim); max-width: 46rem; }
.lede strong, .lede a { color: var(--text); }
.stats { display: flex; gap: .8rem; flex-wrap: wrap; margin: 1.2rem 0; }
.stat { background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--radius);
        padding: .6rem 1rem; min-width: 8.5rem; display: flex; flex-direction: column; }
.stat-v { font-size: 1.45rem; font-weight: 700; font-family: var(--mono); color: var(--accent); }
.stat-k { font-size: .78rem; color: var(--text-dim); }

/* hero finder-seek box + intent paths */
.heroseek { display: flex; gap: .5rem; max-width: 34rem; margin: 1.4rem 0 .9rem; }
.heroseek input { flex: 1; background: var(--bg-raise); color: var(--text); font: inherit;
  font-size: 1.05rem; border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem 1rem; }
.heroseek input:focus { outline: none; border-color: var(--accent); }
.heroseek button { font: inherit; font-weight: 600; cursor: pointer; color: var(--bg);
  background: var(--accent); border: 0; border-radius: var(--radius); padding: .7rem 1.2rem; }
.heroseek button:hover { background: var(--accent-bright); }
.paths { display: flex; gap: .6rem; flex-wrap: wrap; margin: .4rem 0 1rem; }
.pathbtn { border: 1px solid var(--line); border-radius: 99px; padding: .4rem 1rem;
  color: var(--text-dim); background: var(--bg-raise); font-size: .95rem; }
.pathbtn:hover { border-color: var(--accent); color: var(--text); text-decoration: none; }

/* cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1rem; }
.card { background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--radius);
        padding: 1.1rem 1.2rem; color: var(--text); display: block;
        transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; }
.card:hover { border-color: var(--accent); text-decoration: none; background: var(--bg-raise2);
        transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.card h3 { margin: 0 0 .35em; font-size: 1.08rem; }
.card p { margin: 0; color: var(--text-dim); font-size: .92rem; }
.card .card-note { font-size: .9rem; margin-bottom: .5rem; line-height: 1.5; }
.card .card-go { color: var(--accent); font-size: .9rem; }

/* site lists */
.sitelist { display: flex; flex-direction: column; gap: 2px; margin-bottom: 1rem; }
.siterow { display: flex; align-items: baseline; gap: .8rem; padding: .45rem .7rem;
           background: var(--bg-raise); border: 1px solid var(--line); border-radius: 4px; color: var(--text); }
.siterow:hover { border-color: var(--accent); background: var(--bg-raise2); text-decoration: none; }
.siterow-class { font-family: var(--mono); font-size: .8rem; color: var(--text-dim); min-width: 4.5rem; }
.siterow-title { flex: 1; }
.siterow-meta { display: flex; gap: .6rem; align-items: baseline; font-size: .85rem; color: var(--text-dim); }

/* badges */
.badge { display: inline-flex; align-items: baseline; gap: .25em; font-family: var(--mono);
         font-size: .78rem; font-weight: 700; padding: .12em .55em; border-radius: 99px;
         border: 1px solid; vertical-align: middle; }
.badge-sm .badge-label, .badge-sm .badge-label { display: none; }
.badge.badge-sm { font-size: .72rem; padding: .05em .5em; }
.badge-sm .badge-label { display: none; }
.grade-a { color: var(--grade-a); border-color: var(--grade-a); background: rgba(63,178,127,.08); }
.grade-b { color: var(--grade-b); border-color: var(--grade-b); background: rgba(90,169,230,.08); }
.grade-c { color: var(--grade-c); border-color: var(--grade-c); background: rgba(217,164,65,.08); }
.grade-v { color: var(--grade-v); border-color: var(--grade-v); background: rgba(176,133,245,.1); }
.badge-label { font-weight: 500; }
@media (max-width: 640px) { .badge-label { display: none; } }

/* site page */
.crumbs { font-size: .85rem; color: var(--text-dim); margin-top: 1rem; }
.site-head { margin-bottom: .6rem; }
.chips { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.chip { font-size: .78rem; padding: .15em .7em; border-radius: 99px; background: var(--bg-raise2);
        border: 1px solid var(--line); color: var(--text-dim); }
.chip-class { color: var(--accent); border-color: var(--accent-soft); font-family: var(--mono); font-weight: 700; }
.chip-highsec { color: #57c7e8; }
.chip-lowsec { color: #e8a457; }
.chip-nullsec { color: #e85f5f; }
.chip-wormhole { color: #8fd3b6; }
.chip-abyssal { color: #b085f5; }

.banner { border-radius: var(--radius); padding: .7rem 1rem; margin: 1rem 0; font-size: .95rem; }
.banner-warn { background: var(--warn-bg); border: 1px solid var(--warn-line); }
.banner-verified { background: rgba(176,133,245,.08); border: 1px solid var(--grade-v); }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1.2rem; margin: .6rem 0; }
.facts dt { color: var(--text-dim); }
.facts dd { margin: 0; }

/* tables */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); margin: .4rem 0 1rem; }
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
th, td { text-align: left; padding: .4rem .7rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { background: var(--bg-raise); color: var(--text-dim); font-weight: 600; font-size: .78rem;
     text-transform: uppercase; letter-spacing: .04em; }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-family: var(--mono); }
.trigger-row { background: rgba(217,164,65,.06); }
.trig { font-size: .68rem; font-weight: 700; color: var(--grade-c); border: 1px solid var(--grade-c);
        border-radius: 3px; padding: 0 .35em; margin-left: .4em; letter-spacing: .05em; }
.ewar { color: var(--text-dim); font-size: .82rem; }

/* damage bar */
.dmgbar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; max-width: 30rem;
          border: 1px solid var(--line); }
.dmg, .dot { display: inline-block; }
.dmg-em { background: var(--em); }
.dmg-therm { background: var(--therm); }
.dmg-kin { background: var(--kin); }
.dmg-exp { background: var(--exp); }
.dmgkey { display: flex; gap: 1rem; margin-top: .4rem; font-size: .82rem; color: var(--text-dim); flex-wrap: wrap; }
.dmgkey .dot { width: .7em; height: .7em; border-radius: 50%; margin-right: .35em; }

/* collapsible category boxes */
.catbox { border: 1px solid var(--line); border-radius: var(--radius); margin: .6rem 0;
  background: var(--bg-raise); overflow: hidden; }
.catbox > summary { cursor: pointer; padding: .55rem .9rem; display: flex; gap: .7rem;
  align-items: baseline; list-style: none; user-select: none; }
.catbox > summary::-webkit-details-marker { display: none; }
.catbox > summary::before { content: '▸'; color: var(--text-dim); font-size: .8em; }
.catbox[open] > summary::before { content: '▾'; }
.catbox > summary:hover { background: var(--bg-raise2); }
.cat-title { font-weight: 600; }
.catbox .count { font-family: var(--mono); color: var(--accent); font-size: .85rem; }
.cat-all { margin-left: auto; font-size: .8rem; }
.catbox .sitelist { padding: .3rem .5rem .6rem; }

/* anomaly family rows + variant chips */
.varchip { font-size: .74rem; font-family: var(--mono); border: 1px solid var(--line);
  border-radius: 4px; padding: .05em .5em; color: var(--text-dim); margin-left: .25rem; }
.varchip:hover { border-color: var(--accent); color: var(--text); text-decoration: none; }
.varchip-here { border-color: var(--accent); color: var(--accent); }
.family-nav { margin: .4rem 0 0; color: var(--text-dim); font-size: .9rem; }
.chip-esc { color: var(--grade-c); font-size: .78rem; margin-left: .4rem; }

/* anomaly ladder matrix */
.matrix td, .matrix th { white-space: normal; font-size: .82rem; vertical-align: top; }
.matrix a { display: inline; }
.varmini { margin-left: .3rem; }
.varmini a { font-family: var(--mono); font-size: .72rem; color: var(--text-dim);
  border: 1px solid var(--line); border-radius: 3px; padding: 0 .3em; margin-right: .15rem; }
.varmini a:hover { color: var(--text); border-color: var(--accent); text-decoration: none; }
.chip-mini { font-size: .68rem; padding: .05em .45em; margin-right: .2rem; }

/* space hub quick-nav + filter */
.quicknav { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: 1rem 0 1.4rem; }
.chip-jump { color: var(--text); border-color: var(--accent-soft); }
.chip-jump:hover { border-color: var(--accent); text-decoration: none; }
.chip-jump .count { color: var(--accent); font-family: var(--mono); margin-left: .35em; }
.rowfilter { margin-left: auto; flex: 0 1 16rem; background: var(--bg-raise2); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: .35rem .7rem; font: inherit; }
.rowfilter:focus { outline: none; border-color: var(--accent); }
.activity-head { color: var(--accent); }
.cat-head { display: flex; gap: .6rem; align-items: baseline; }

/* finder */
.finder-controls { display: flex; flex-direction: column; gap: .6rem; margin: 1.2rem 0;
  background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; }
.fgroup { display: flex; gap: .4rem; align-items: baseline; flex-wrap: wrap; }
.flabel { color: var(--text-dim); font-size: .8rem; min-width: 5.5rem; text-transform: uppercase; letter-spacing: .05em; }
.fbtn { background: var(--bg-raise2); color: var(--text-dim); border: 1px solid var(--line);
  border-radius: 99px; padding: .25rem .8rem; font: inherit; font-size: .85rem; cursor: pointer; }
.fbtn:hover { border-color: var(--accent); color: var(--text); }
.fbtn.active { border-color: var(--accent); color: var(--accent); background: rgba(240,165,0,.1); }
.finder-controls .rowfilter { margin-left: 0; flex-basis: auto; }
.cta { display: inline-block; margin-top: .4rem; padding: .55rem 1.1rem; border: 1px solid var(--accent);
  border-radius: var(--radius); background: rgba(240,165,0,.09); color: var(--accent); font-weight: 600; }
.cta:hover { background: rgba(240,165,0,.18); text-decoration: none; }

.detail-list { padding-left: 1.2rem; }
.detail-list li { margin-bottom: .3rem; font-size: .92rem; }

/* methodology */
.grades-explained dt { margin-top: 1rem; }
.grades-explained dd { margin: .3rem 0 0 0; max-width: 46rem; }

/* imagery: faction logos, filament icons, ship render strips (images.evetech.net) */
.site-head.has-icon { display: flex; gap: 1rem; align-items: flex-start; }
.head-icon { border-radius: 8px; border: 1px solid var(--line); background: var(--bg-raise);
  margin-top: .5rem; }
.head-main { flex: 1; min-width: 0; }
.chip-fac { display: inline-flex; align-items: center; gap: .4em; }
.fac-logo { border-radius: 4px; vertical-align: middle; }
.filstrip { display: flex; gap: .5rem; flex-wrap: wrap; margin: .8rem 0 0; }
.filchip { display: inline-flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .4rem .6rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-raise); color: var(--text-dim); font-size: .75rem; }
.filchip:hover { border-color: var(--accent); color: var(--text); text-decoration: none; }
.filchip img { border-radius: 6px; }
.shipstrip { display: flex; gap: .8rem; flex-wrap: wrap; }
.shipcard { margin: 0; text-align: center; background: var(--bg-raise);
  border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .8rem .5rem; }
.shipcard img { display: block; border-radius: 8px; background: #060a10; }
.shipcard figcaption { font-size: .85rem; color: var(--text-dim); margin-top: .35rem; }

/* abyssal weather identity tints — a coloured band on the page, calm not neon */
.wx { border-left: 3px solid transparent; padding-left: 1rem; margin-left: -1rem; }
.wx-dark       { border-left-color: #5561a8; }
.wx-electrical { border-left-color: #57c7e8; }
.wx-exotic     { border-left-color: #5fbf87; }
.wx-firestorm  { border-left-color: #e0674d; }
.wx-gamma      { border-left-color: #e5b13f; }
.wxdot { display: inline-block; width: .65em; height: .65em; border-radius: 50%; margin-right: .45em; }
.wxdot-dark { background: #5561a8; } .wxdot-electrical { background: #57c7e8; }
.wxdot-exotic { background: #5fbf87; } .wxdot-firestorm { background: #e0674d; }
.wxdot-gamma { background: #e5b13f; }

/* episode / video cards with YouTube thumbnails */
.epgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.epcard { background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; color: var(--text); display: block;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; }
.epcard:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.epcard img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.epcard .epbody { padding: .8rem 1rem 1rem; }
.epcard h3 { margin: 0 0 .3em; font-size: 1rem; line-height: 1.35; }
.epcard .epmeta { color: var(--text-dim); font-size: .85rem; margin: 0; }
.epcard .epblurb { color: var(--text-dim); font-size: .9rem; margin: .35rem 0 0; line-height: 1.45; }

/* footer */
.footer { border-top: 1px solid var(--line); background: var(--bg-raise); margin-top: 3rem;
          padding: 1.2rem 0 1.6rem; }
.footer-brand { font-size: .9rem; }
.footer-legal { font-size: .78rem; color: var(--text-dim); margin: .3rem 0; }

@media (max-width: 640px) {
  h1 { font-size: 1.45rem; }
  .hero h1 { font-size: 1.6rem; }
  .facts { grid-template-columns: 1fr; gap: 0; }
  .facts dt { margin-top: .4rem; }
  .siterow { flex-wrap: wrap; }
}

/* ---- wormhole class-first hub ------------------------------------------ */
.wh-pick { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap;
  margin: 1.2rem 0 1.6rem; }
.wh-pick-label { color: var(--text-dim); font-size: .85rem; margin-right: .3rem; }
.wh-classchip { display: inline-flex; align-items: baseline; gap: .35em;
  font-family: var(--mono); font-weight: 700; font-size: .82rem;
  padding: .25em .8em; border-radius: 99px; border: 1px solid var(--line);
  background: var(--bg-raise2); color: var(--text); text-decoration: none; }
.wh-classchip:hover { border-color: currentColor; text-decoration: none; }
.wh-classchip .count { font-size: .72rem; color: var(--text-dim); font-weight: 400; }
.wh-classchip.is-current { background: var(--accent-soft); border-color: var(--accent); }
/* class colour ramp: cool and shallow through hot and deep */
.wh-c1 { color: #8fd3b6; }
.wh-c2 { color: #7fc9d8; }
.wh-c3 { color: #7fb8f0; }
.wh-c4 { color: #b7a6f0; }
.wh-c5 { color: #e8a457; }
.wh-c6 { color: #e85f5f; }
.wh-special { color: var(--text-dim); }
.wh-classbox > summary .cat-title { display: inline-flex; align-items: center; gap: .5em; }
.wh-classlede { font-size: .88rem; color: var(--text-dim); margin: .5rem .6rem .8rem;
  max-width: 68ch; }
.wh-typehead { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-dim); margin: 1rem .6rem .3rem; font-weight: 600; }
.wh-typehead .count { font-family: var(--mono); color: var(--accent); }
.wh-matrix td:first-child { white-space: nowrap; }
.wh-sysfacts { border: 1px solid var(--line); border-radius: var(--radius);
  padding: .2rem 1rem 1rem; margin: 1.4rem 0; background: var(--bg-raise); }
.statrow { display: flex; gap: 1.6rem; flex-wrap: wrap; margin: .4rem 0 1rem; }
.stat { display: flex; flex-direction: column; }
.stat-n { font-family: var(--mono); font-size: 1.5rem; color: var(--accent); font-weight: 700; }
.stat-l { font-size: .78rem; color: var(--text-dim); }
.whclasses { display: flex; align-items: baseline; gap: .4em; flex-wrap: wrap;
  font-size: .85rem; margin: .8rem 0 1rem; }
.whclasses .muted { flex-basis: 100%; font-size: .8rem; }

/* ---- J-space system pages ---------------------------------------------- */
.sys-head h1 { margin-bottom: .4rem; }
.sys-live { border: 1px solid var(--accent-soft); border-radius: var(--radius);
  padding: .2rem 1rem 1rem; margin: 1.4rem 0; background: var(--bg-raise); }
.sys-live h2 { margin-bottom: .2rem; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1.2rem;
  margin: .6rem 0 1rem; font-size: .9rem; }
.kv dt { color: var(--text-dim); }
.kv dd { margin: 0; }
.effect-ladder td.is-here, .effect-ladder th.is-here {
  background: var(--accent-soft); color: var(--accent-bright); font-weight: 700; }
.statics { list-style: none; padding: 0; margin: .6rem 0; }
.statics li { padding: .3rem 0; border-bottom: 1px solid var(--line); }
.chip.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-bright); }
.banner-sys { background: var(--bg-raise2); border: 1px solid var(--accent-soft);
  border-radius: var(--radius); padding: .6rem .9rem; margin: .6rem 0 1rem; font-size: .9rem; }
.sysseek-block .heroseek { margin-top: .8rem; }

/* ---- Guides + Fits: the two hand-written wings -------------------------- */
/* Freshness is a first-class visual. A guide that has outlived an expansion
   cycle says so at the top, in the open, rather than reading as current. */
.fresh { font-size: .82rem; margin: .6rem 0 0; display: flex; align-items: center;
  gap: .4rem; flex-wrap: wrap; }
.fresh-fresh  { color: var(--grade-a); }
.fresh-ageing { color: var(--grade-c); }
.fresh-stale  { color: var(--therm); }
.fresh-unknown { color: var(--text-dim); }
.banner-fresh { background: rgba(63,178,127,.07); border: 1px solid rgba(63,178,127,.4); }
.freshbar { font-size: .9rem; }

.guidecard { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.guidecard .guidethumb { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.guidecard h3 { margin: .9rem 1rem .35rem; }
.guidecard .card-note { margin: 0 1rem; }
.guidecard .fresh { margin: .7rem 1rem 1rem; }

.guide-head h1 { margin-bottom: .5rem; }
.guide-toc { background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .2rem 1.2rem 1rem; margin: 1.6rem 0; }
.guide-toc h2 { font-size: .95rem; color: var(--text-dim); margin-bottom: .2rem; }
.guide-toc ol { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: 2rem; }
.guide-toc li { margin: .25rem 0; break-inside: avoid; }

.guide-body { max-width: 46rem; }
.guide-body h2 { margin-top: 2.4rem; padding-top: .4rem; border-top: 1px solid var(--line); }
.guide-body h3 { margin-top: 1.8rem; }
.guide-body li { margin: .4rem 0; }
.guide-body blockquote { margin: 1.4rem 0; padding: .8rem 1.2rem; background: var(--bg-raise);
  border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; }
.guide-body blockquote p { margin: 0; }
.guide-body table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .93rem; }
.guide-body th, .guide-body td { text-align: left; padding: .45rem .7rem;
  border-bottom: 1px solid var(--line); }
.guide-body th { color: var(--text-dim); font-weight: 600; }
.guide-body em { color: var(--text-dim); }
.guide-rel { margin-top: 2.4rem; }
.epembed { position: relative; max-width: 46rem; aspect-ratio: 16/9; margin: 1.6rem 0;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.epembed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.ship-render { display: block; border-radius: 50%; background: var(--bg-raise2); }
.ship-render-lg { width: 192px; height: 192px; flex: none; }
.fit-inline { display: block; margin: 1.4rem 0; }
.fit-inline img { width: 160px; height: 160px; }
.fitcard { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.fitcard .ship-render { width: 96px; height: 96px; }

.fit-head { display: flex; gap: 1.6rem; align-items: flex-start; flex-wrap: wrap;
  margin: 1.4rem 0 .4rem; }
.fit-head .head-main { flex: 1 1 22rem; }
.fitvar { margin-top: 2.2rem; }
.fitvar h2 { border-top: 1px solid var(--line); padding-top: 1rem; }
.fitprice { margin: .2rem 0 .8rem; font-family: var(--mono); color: var(--accent); }
.fitprice .muted { font-family: system-ui, sans-serif; }
.eftwrap { position: relative; }
.eft { background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.2rem; overflow-x: auto; font-family: var(--mono); font-size: .88rem;
  line-height: 1.5; margin: 0; }
.eftcopy { position: absolute; top: .6rem; right: .6rem; z-index: 1; cursor: pointer;
  font: inherit; font-size: .8rem; padding: .25em .8em; border-radius: 99px;
  background: var(--bg-raise2); color: var(--text-dim); border: 1px solid var(--line); }
.eftcopy:hover { color: var(--accent); border-color: var(--accent); }
.eftcopy.ok { color: var(--grade-a); border-color: var(--grade-a); }
.chip-alpha { color: var(--grade-a); border-color: rgba(63,178,127,.45); }

/* the join nobody else can publish: this fit against the Atlas site list */
.clears { border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-raise); overflow: hidden; }
.clearrow { display: flex; gap: 1rem; align-items: baseline; padding: .6rem 1rem;
  border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.clearrow:last-child { border-bottom: 0; }
.clearsite { flex: 0 0 12rem; font-weight: 600; }
.clearnote { flex: 1 1 16rem; color: var(--text-dim); font-size: .9rem; }
@media (max-width: 620px) {
  .guide-toc ol { columns: 1; }
  .ship-render-lg { width: 120px; height: 120px; }
}
/* a guide that shares its video with another carries an icon card instead of a
   second copy of the same thumbnail. Needs .guidecard to out-specify the
   .guidecard .guidethumb cover rule above. */
.guidecard .guidethumb-icon { object-fit: contain; padding: 1.6rem 1.4rem;
  background: var(--bg-raise2); border-bottom: 1px solid var(--line); }

/* ---- home: latest-video row + trust strip ------------------------------ */
.latestrow { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: 1.6rem; align-items: start; }
.latestcard { display: block; }
.latestblurb p { margin: 0 0 1rem; color: var(--text-dim); max-width: 40rem; }
.latestblurb .chip-jump { margin-right: .5rem; }
.trustrow .card { cursor: default; }
.trustrow .card:hover { border-color: var(--line); background: var(--bg-raise);
  transform: none; }
@media (max-width: 720px) {
  .latestrow { grid-template-columns: 1fr; }
}

/* ---- corrections log --------------------------------------------------- */
.corr { margin-top: 2.4rem; }
.corr h2 { border-top: 1px solid var(--line); padding-top: 1rem; font-size: 1.25rem; }
.corrmeta { color: var(--text-dim); font-size: .88rem; margin: .2rem 0 1rem; }
.corritem { border-left: 3px solid var(--line); padding: .1rem 0 .1rem 1rem; margin: 1rem 0; }
.corrts { font-family: var(--mono); color: var(--accent); font-size: .85rem; margin: 0 0 .3rem; }
.corrlabel { display: inline-block; min-width: 4.4rem; font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-dim); }
.corrwrong { margin: .2rem 0; color: var(--text-dim); }
.corrright { margin: .2rem 0; }
.corrright .corrlabel { color: var(--grade-a); }

/* ---- ad slot (only renders when DTC_ADSENSE_ID is set at build time) ----- */
/* Below the content, never interleaved with it. The Content Creation ToU
   conditions ad revenue on not interfering with access to the content, and an
   in-article unit dropped into a threat table is exactly that interference. */
.adslot { max-width: 46rem; margin: 3rem auto 0; padding-top: 1.2rem;
  border-top: 1px solid var(--line); }
.adlabel { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim); margin: 0 0 .5rem; }

/* ---- static system indexes: the crawl path to the 2,604 system pages ----- */
.sysindex { margin-top: 2.4rem; }
.sysdetails { background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .8rem 1.2rem; }
.sysdetails summary { cursor: pointer; color: var(--accent); font-weight: 600; }
/* grid, not CSS multi-column: laying 506 items into balanced columns stalls
   the renderer visibly on expand, and grid gives the same result cheaply. */
.syslist { list-style: none; padding: 0; margin: 1rem 0 0; font-size: .9rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: .15rem 1.6rem; }
.syslist li { padding: .1rem 0; }
.syslist .muted { font-size: .8rem; }
.sysnear { margin-top: 2.4rem; }
.speclabel { display: inline-block; min-width: 12rem; color: var(--text-dim);
  font-size: .85rem; }
@media (max-width: 520px) { .syslist { grid-template-columns: 1fr; } }

/* ---- payout values: harvest vs blue loot ------------------------------- */
/* On a gas or ore site these are two different numbers and the gap between
   them can be 50x. Neither is ever rendered as a bare ISK figure. */
.val-harvest { color: var(--grade-a); }
.val-loot { color: var(--text-dim); }

/* loot/cargo annotation on an NPC row: its own text, not glued into the name */
.npcnote { display: block; color: var(--text-dim); font-size: .82rem; margin-top: .15rem; }

/* ---- sovereignty + FW leaderboard blocks ------------------------------- */
.sovblock, .fwboard { margin-top: 2.6rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.sovblock h3, .fwboard h3 { margin-top: 1.6rem; font-size: 1rem; color: var(--text-dim); }
.boardgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.6rem; }
.board { list-style: none; counter-reset: b; padding: 0; margin: .4rem 0 0; }
.board li { counter-increment: b; display: flex; align-items: baseline; gap: .6rem;
  padding: .35rem 0; border-bottom: 1px solid var(--line); font-size: .93rem; }
.board li::before { content: counter(b); font-family: var(--mono); font-size: .78rem;
  color: var(--text-dim); min-width: 1.2rem; }
.board-name { flex: 1; }
.board-n { color: var(--accent); }
.val-loss { color: var(--therm); }

/* alliance profiles */
.alliance-logo { width: 128px; height: 128px; flex: none; border-radius: var(--radius);
  background: var(--bg-raise2); }
.alliance-logo-sm { width: 32px; height: 32px; display: block; border-radius: 4px; }