:root{
  --bg:#101012; --bg2:#17171a; --card:#1c1c20; --line:#2a2a30;
  --txt:#e9e9ec; --muted:#9a9aa3; --gold:#e0b24c; --gold-dim:#caa043;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
a{color:var(--gold); text-decoration:none}
a:hover{color:#fff}
img{display:block; max-width:100%}

header.site{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  padding:18px 22px; background:var(--bg2); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:5;
}
header.site .brand{font-size:22px; font-weight:700; letter-spacing:.5px; color:var(--gold)}
header.site .tagline{color:var(--muted); font-size:14px}

main{max-width:1200px; margin:0 auto; padding:24px 18px 60px}

.intro{margin:8px 4px 26px}
.intro h1{margin:0 0 6px; font-size:26px}
.intro p{margin:0; color:var(--muted)}

.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:20px; align-items:start}
.card{
  min-width:0;
  display:flex; flex-direction:column; background:var(--card);
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  transition:transform .15s,border-color .15s;
}
.card:hover{transform:translateY(-3px); border-color:var(--gold-dim)}
.card a.cover{display:block}
.card-img{display:block; aspect-ratio:4/3; background:#000; overflow:hidden}
.card-img img{width:100%; height:100%; object-fit:cover}
.card-body{padding:14px 16px}
.card-body a.title{text-decoration:none; display:inline-block}
.card-body a.title:hover h2{color:#fff}
.card-body h2{margin:0 0 4px; font-size:18px; color:var(--gold)}
.card-body .meta{color:var(--muted); font-size:13px; margin-bottom:8px}
.card-body p{margin:0; font-size:14px; color:#cfcfd6; overflow-wrap:break-word; word-break:break-word}
.card-body p a{color:var(--gold)}

.ghead{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:4px 4px 22px}
.ghead .back{font-size:15px}
.ghead h1{margin:0; font-size:24px; color:var(--gold)}
.ghead .meta{color:var(--muted); font-size:14px}
.ghead .dl{margin-left:auto; display:flex; gap:10px; flex-wrap:wrap}
.ghead .dl a{
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  padding:7px 12px; font-size:13px;
}
.ghead .dl a:hover{border-color:var(--gold-dim); color:#fff}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px}
.grid a{display:block; aspect-ratio:1/1; background:#000; border-radius:4px; overflow:hidden}
.grid img{width:100%; height:100%; object-fit:cover; transition:transform .2s,opacity .2s}
.grid a:hover img{transform:scale(1.06); opacity:.85}

footer.site{
  border-top:1px solid var(--line); color:var(--muted);
  text-align:center; padding:22px; font-size:13px;
}
@media(max-width:560px){
  header.site{padding:14px 16px}
  main{padding:18px 12px 48px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(108px,1fr))}
}