/* Open World Atlas — shared styles for /guides/ articles + index. Matches the main site's neon-glass theme. */
:root{
  --bg:#06080f; --bg-2:#080b16; --panel:rgba(18,24,40,.55);
  --line:rgba(120,150,200,.18); --line-2:rgba(120,150,200,.32);
  --ink:#eaf0ff; --muted:#90a4c6; --dim:#6b7da0;
  --cyan:#36e2ff; --mag:#ff4fd8; --grn:#39d98a; --amber:#ffb020;
  --radius:16px; --max:1120px; --prose:760px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; color:var(--ink); background:var(--bg);
  font:16px/1.7 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden}
body::before{content:""; position:fixed; inset:-20% -10% auto -10%; height:70vh; z-index:-2; pointer-events:none;
  background:radial-gradient(60% 60% at 15% 0%,rgba(54,226,255,.14),transparent 60%),radial-gradient(50% 50% at 92% 8%,rgba(255,79,216,.12),transparent 60%)}
a{color:var(--cyan); text-decoration:none} a:hover{color:#9af0ff}
.wrap{max-width:var(--max); margin:0 auto; padding:0 20px}
.neon{background:linear-gradient(90deg,var(--cyan),var(--mag)); -webkit-background-clip:text; background-clip:text; color:transparent}

/* nav */
header.nav{position:sticky; top:0; z-index:40; backdrop-filter:blur(14px) saturate(1.2);
  background:linear-gradient(180deg,rgba(6,8,15,.85),rgba(6,8,15,.4)); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; gap:16px; height:64px}
.brand{font-weight:800; letter-spacing:.3px; font-size:18px; display:flex; align-items:center; gap:9px; color:var(--ink)}
.brand .dot{width:11px; height:11px; border-radius:50%; background:radial-gradient(circle at 30% 30%,#bff4ff,var(--cyan)); box-shadow:0 0 20px rgba(54,226,255,.55)}
.nav nav{margin-left:auto; display:flex; gap:20px; font-size:14px}
.nav nav a{color:var(--muted)} .nav nav a:hover{color:var(--ink)}
@media(max-width:640px){.nav nav{display:none}}

/* article */
main.article{padding:36px 0 20px}
main.article .crumbs{font-size:13px; color:var(--dim); margin-bottom:14px}
main.article .crumbs a{color:var(--muted)}
main.article > h1{font-size:clamp(28px,5.2vw,46px); line-height:1.08; letter-spacing:-.02em; max-width:var(--prose); margin:0 0 10px}
main.article .meta{color:var(--dim); font-size:13px; letter-spacing:.02em; margin:0 0 28px}
article{max-width:var(--prose)}
article p{color:#cdd8ee; margin:0 0 18px}
article .lede{font-size:18px; color:#dbe6fb}
article h2{font-size:clamp(20px,3.4vw,27px); letter-spacing:-.01em; margin:34px 0 12px; padding-left:14px; border-left:3px solid var(--cyan)}
article h3{font-size:18px; margin:24px 0 8px}
article ul,article ol{color:#cdd8ee; margin:0 0 18px; padding-left:22px}
article li{margin:6px 0}
article strong{color:#fff}
article a{border-bottom:1px solid rgba(54,226,255,.35)}

/* callouts */
.callout{border-radius:12px; padding:14px 16px; margin:0 0 18px; font-size:15px; border:1px solid var(--line-2); background:var(--panel); backdrop-filter:blur(6px)}
.callout b{letter-spacing:.02em}
.callout.confirmed{border-color:rgba(57,217,138,.4); box-shadow:inset 0 0 22px rgba(57,217,138,.1)}
.callout.confirmed b{color:var(--grn)}
.callout.rumor{border-color:rgba(255,176,32,.4); box-shadow:inset 0 0 22px rgba(255,176,32,.1)}
.callout.rumor b{color:var(--amber)}

/* faq */
.faq{max-width:var(--prose); margin-top:40px}
.faq h2{font-size:24px; margin:0 0 14px}
.faq details{border:1px solid var(--line); border-radius:12px; background:var(--panel); backdrop-filter:blur(6px); padding:0 16px; margin-bottom:10px}
.faq summary{cursor:pointer; padding:14px 0; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--cyan); font-weight:800}
.faq details[open] summary::after{content:"−"}
.faq details p{color:var(--muted); margin:0 0 14px; font-size:15px}

/* related */
.related{max-width:var(--max); margin-top:48px}
.related h2{font-size:24px; margin:0 0 14px}
.rel-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media(max-width:760px){.rel-grid{grid-template-columns:1fr}}
.rel{display:block; padding:16px; border-radius:14px; border:1px solid var(--line); background:var(--panel); backdrop-filter:blur(8px); transition:transform .25s,border-color .25s}
.rel:hover{transform:translateY(-3px); border-color:var(--line-2)}
.rel b{display:block; color:var(--ink); font-size:15px; margin-bottom:4px}
.rel span{color:var(--muted); font-size:12.5px}

/* guides index */
.ghero{padding:56px 0 8px; max-width:var(--prose)}
.ghero h1{font-size:clamp(30px,6vw,52px); letter-spacing:-.025em; margin:0 0 10px}
.ghero p{color:var(--muted); font-size:18px}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:28px 0 10px}
@media(max-width:820px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cards{grid-template-columns:1fr}}
.gcard{display:block; padding:20px; border-radius:var(--radius); border:1px solid var(--line); background:var(--panel); backdrop-filter:blur(8px); transition:transform .25s,border-color .25s,box-shadow .25s}
.gcard:hover{transform:translateY(-4px); border-color:var(--line-2); box-shadow:0 16px 50px rgba(0,0,0,.45),0 0 30px rgba(54,226,255,.1)}
.gcard .k{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan)}
.gcard b{display:block; font-size:17px; margin:8px 0 6px; color:var(--ink)}
.gcard p{margin:0; color:var(--muted); font-size:14px}

/* footer */
footer{border-top:1px solid var(--line); margin-top:48px; padding:34px 0; color:var(--muted); font-size:13px; background:var(--bg-2)}
footer .row{display:flex; gap:16px; flex-wrap:wrap; align-items:center}
footer a{color:var(--muted)} footer a:hover{color:var(--ink)}
.disclaimer{font-size:12px; color:var(--dim); max-width:760px; margin-top:12px; line-height:1.6}

@media (prefers-reduced-motion: reduce){*{animation:none !important; scroll-behavior:auto}}