:root { --bg:#0b0f14; --fg:#e8f0fa; --muted:#9bb4cc; --accent:#50b6ff; --card:#121823; }
*{box-sizing:border-box} body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,Arial,sans-serif;background:var(--bg);color:var(--fg)}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
.header{padding:24px 20px;border-bottom:1px solid #1e2632}
.container{max-width:1080px;margin:0 auto;padding:20px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{background:var(--card);border:1px solid #1f2a38;border-radius:16px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,0.3)}
.card .pad{padding:14px}
.badge{display:inline-block;padding:2px 8px;border:1px solid #2b3646;border-radius:999px;color:var(--muted);font-size:12px;margin-right:6px}
.hdr{display:flex;align-items:center;gap:10px}
.hdr h1{font-size:28px;margin:0}
.filters{margin:10px 0 16px;display:flex;flex-wrap:wrap;gap:8px}
.filters button{background:#17202c;border:1px solid #2b3646;color:var(--fg);padding:6px 10px;border-radius:10px;cursor:pointer}
.filters button.active{border-color:var(--accent)}
.article{max-width:860px;margin:0 auto}
.section{margin:16px 0}
ul.linklist{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0}
ul.linklist li{background:#17202c;border:1px solid #2b3646;border-radius:10px;padding:4px 8px}
.small{color:var(--muted);font-size:14px}
.footer{padding:30px 20px;color:var(--muted);text-align:center}


/* AFTER — show square images without cropping */
.card img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1/1;      /* keep square */
  object-fit:contain;     /* no crop */
  background:#0a0f15;
}

/* make hero image square and centered */
.hero{
  display:block;
  width:100%;
  max-width:640px;        /* nice visual cap */
  height:auto;
  aspect-ratio:1/1;       /* keep square */
  object-fit:contain;     /* no crop */
  margin:0 auto;          /* center */
  border-radius:16px;
  border:1px solid #1f2a38;
  background:#0a0f15;
}