:root{
  --bg: #ffffff;
  --fg: #111111;
  --muted:#666;
  --card:#f6f6f6;
  --border:#e6e6e6;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5}
a{color:inherit;text-decoration:none}
header{padding:48px 20px 12px;max-width:1100px;margin:0 auto}
header h1{margin:0;font-size:28px;font-weight:700;letter-spacing:-0.01em}
header p{margin:6px 0 0;color:var(--muted)}

.main{max-width:1100px;margin:0 auto;padding:16px 20px 64px}

.grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:18px}
@media(min-width:640px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:980px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.card{position:relative;border:1px solid var(--border);background:#fff;border-radius:14px;overflow:hidden;transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,.06)}
.thumb{aspect-ratio: 16/10; width:100%; object-fit:cover; background:var(--card)}
.meta{padding:12px 14px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px}
.meta .title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta .kicker{font-size:12px;color:var(--muted)}

.badge{position:absolute;left:10px;top:10px;background:rgba(255,255,255,.85);backdrop-filter:saturate(140%) blur(6px);padding:6px 10px;border-radius:999px;border:1px solid var(--border);font-size:12px}

.article{max-width:780px;margin:0 auto;padding-bottom:80px}
.article .hero{width:100%;border-radius:16px;object-fit:cover;aspect-ratio: 16/9;background:var(--card);border:1px solid var(--border)}
.article h1{font-size:34px;margin:16px 0 6px}
.article .sub{color:var(--muted);margin:0 0 22px}

.gallery{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:10px;margin-top:24px}
@media(min-width:700px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gallery img{width:100%;aspect-ratio: 4/3;object-fit:cover;border:1px solid var(--border);border-radius:12px;background:var(--card)}

.footer{max-width:1100px;margin:0 auto;padding:24px 20px;color:var(--muted);border-top:1px solid var(--border)}

.center{display:flex;align-items:center;justify-content:center}

.controls{display:flex;gap:10px;align-items:center;margin:8px 0 16px}
button{border:1px solid var(--border);background:#fff;border-radius:10px;padding:8px 12px;cursor:pointer}
button:hover{background:var(--card)}

.small{font-size:12px;color:var(--muted)}