/* =====================================
   ✦ Cozy Reader (Config-driven variant)
   ===================================== */
:root{
  --bg:#0b0f19; --bg-tile:url('assets/backgrounds/stars.png');
  --paper:#101724; --paper-2:#0d1422;
  --line:#23324d; --text:#e6eeff; --muted:#a8b7d4;
  --accent:#7fb2ff; --accent-2:#2f4a80;
  --wrap-max:1700px; --wrap-pad:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.66 "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", "Trebuchet MS", "Verdana", sans-serif;
  color:var(--text);
  background:var(--bg);
  background-image:var(--bg-tile);
  background-size:96px 96px;
}
a{color:#bcd6ff;text-decoration:none} a:hover{text-decoration:underline}

/* Banner: smaller; panels start higher */
.site-banner{width:100%;margin:0}
.site-banner .banner-img{
  width:100%; height: clamp(140px, 18vw, 280px);
  object-fit:cover; display:block;
  border-bottom:4px solid var(--accent-2);
  box-shadow:0 3px 0 rgba(0,0,0,.35);
}

/* Wrapper */
.wrapper{
  width:min(var(--wrap-max),96vw);
  margin:8px auto 24px; /* less gap under banner */
  padding:0 var(--wrap-pad) 24px;
  display:grid; grid-template-columns: 300px 1fr 340px; gap:18px; align-items:start;
}

.panel{
  background:linear-gradient(180deg,var(--paper),var(--paper-2));
  border:4px solid var(--accent-2);
  border-image:url('assets/borders/pixel-border.png') 8 round;
  padding:14px;
  box-shadow:0 0 0 2px var(--line) inset, 0 4px 0 rgba(0,0,0,.35);
}
.panel h2, .panel h3{margin:0 0 12px;font-size:18px;letter-spacing:.3px}

/* Nav: prettier font */
.nav .menu{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.nav .menu a{
  display:flex;align-items:center;gap:10px;
  padding:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  font: 600 17px/1 "Quicksand", "Atkinson Hyperlegible", system-ui, sans-serif;
}
.nav .menu a:hover, .nav .menu a.active{background:rgba(123,178,255,.10);border-color:var(--accent)}
.nav .menu img.ico{width:18px;height:18px;image-rendering:pixelated}

/* Article reader */
.article{display:grid;gap:22px; }
.article h1{margin:0;font:700 30px/1.2 "Atkinson Hyperlegible",system-ui}
.article p{margin:0}
.article .lead{color:var(--muted)}
.article hr{border:0;border-top:1px solid var(--line);opacity:.7}
.panel-main{min-height:120vh;} /* longer center */

/* Right column: no headings */
.embed-rect{width:100%;aspect-ratio:16/9;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.embed-rect iframe{width:100%;height:100%;border:0;display:block}

/* Footer: no text */
.site-footer{width:min(var(--wrap-max),96vw);margin:0 auto 10px;text-align:center;color:var(--muted);font-size:13px}

/* Responsive */
@media (max-width:1200px){ .wrapper{grid-template-columns:260px 1fr 300px} }
@media (max-width:980px){ .wrapper{grid-template-columns:1fr} .panel-main{min-height:initial} }