/* Content/reading pages — lightweight, fast, dark celestial theme.
   Intentionally standalone (not the app's styles.css) so these pages stay
   tiny and score well on Core Web Vitals. */
:root{
  --bg-deep:#05070f; --bg-mid:#0d1230; --bg-glow:#1a2350;
  --ink:#e7ebff; --ink-soft:#c2c9ee; --ink-mut:#8f9bd6;
  --gold:#ffd76a; --accent:#9fb2ff; --line:rgba(150,170,255,.16);
  --card:rgba(20,26,64,.45);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; color:var(--ink); background:var(--bg-deep);
  background-image:radial-gradient(ellipse 100% 70% at 50% 0%, var(--bg-glow) 0%, var(--bg-mid) 34%, var(--bg-deep) 72%);
  background-attachment:fixed;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.7; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}

.site-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:16px 22px; border-bottom:1px solid var(--line);
  position:sticky; top:0; backdrop-filter:blur(8px);
  background:rgba(5,7,15,.72); z-index:10;
}
.site-header .brand{font-family:Georgia,serif; font-size:22px; font-weight:700; color:var(--ink); letter-spacing:-.3px;}
.site-header .brand .ask{color:var(--gold);}
.site-header nav a{margin-left:20px; color:var(--ink-soft); font-size:15px;}

main{max-width:760px; margin:0 auto; padding:34px 22px 80px;}
.breadcrumb{font-size:13px; color:var(--ink-mut); margin-bottom:18px;}
.breadcrumb a{color:var(--ink-mut);}
.breadcrumb span{margin:0 6px; opacity:.6;}

h1{font-family:Georgia,serif; font-size:clamp(30px,5vw,44px); line-height:1.15; margin:.1em 0 .35em; color:var(--ink);}
h1 .accent{color:var(--gold);}
.lead{font-size:19px; color:var(--ink-soft); font-style:italic; margin:0 0 30px;}
h2{font-family:Georgia,serif; font-size:24px; color:var(--gold); margin:44px 0 12px;}
article p{margin:0 0 18px; color:var(--ink-soft); font-size:17px;}

.cta{
  display:inline-block; margin:14px 0 8px; padding:14px 26px; border-radius:999px;
  background:linear-gradient(135deg,#ffe08a,#e8961f); color:#2a1800; font-weight:700;
  font-size:16px; box-shadow:0 6px 30px rgba(255,178,60,.28);
}
.cta:hover{text-decoration:none; filter:brightness(1.05);}
.cta-wrap{margin:38px 0; padding:26px; border:1px solid var(--line); border-radius:16px; background:var(--card); text-align:center;}
.cta-wrap p{margin:0 0 6px; color:var(--ink-soft);}

.related{margin-top:40px; border-top:1px solid var(--line); padding-top:26px;}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 26px;}
.chips a{
  display:inline-block; padding:6px 13px; border-radius:999px; font-size:14px;
  background:var(--card); border:1px solid var(--line); color:var(--ink-soft);
}
.chips a:hover{border-color:var(--gold); color:var(--ink); text-decoration:none;}

/* hub grids */
.hub-intro{color:var(--ink-soft); font-size:18px; margin-bottom:8px;}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin:10px 0 30px;}
.grid a{padding:9px 12px; border-radius:10px; background:var(--card); border:1px solid var(--line); color:var(--ink-soft); font-size:15px;}
.grid a:hover{border-color:var(--gold); color:var(--ink); text-decoration:none;}
.section-block{margin-bottom:18px;}

/* rich article elements (guides) */
article h3{font-size:19px; color:var(--ink); margin:26px 0 8px;}
article ul,article ol{margin:0 0 18px; padding-left:22px; color:var(--ink-soft); font-size:17px;}
article li{margin:0 0 8px;}
article strong{color:var(--ink);}
article a{color:var(--accent);}
.toc{margin:0 0 30px; padding:18px 22px; border:1px solid var(--line); border-radius:14px; background:var(--card);}
.toc p{margin:0 0 8px; color:var(--gold); font-weight:600; font-size:14px; letter-spacing:.4px; text-transform:uppercase;}
.toc ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:4px;}
.toc li{margin:0;}

/* FAQ */
.faq{margin-top:44px; border-top:1px solid var(--line); padding-top:20px;}
.faq-item{padding:16px 0; border-bottom:1px solid var(--line);}
.faq-item h3{margin:0 0 6px; font-size:18px; color:var(--ink);}
.faq-item p{margin:0; color:var(--ink-soft); font-size:16px;}

footer{max-width:760px; margin:0 auto; padding:26px 22px 50px; border-top:1px solid var(--line); color:var(--ink-mut); font-size:13px;}
footer a{color:var(--ink-mut);}