:root{
--bg:#0c0c0e;
--panel:#17171b;
--accent:#d5a44b;
--wine:#471522;
--text:#f2ede7;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,sans-serif}
.topbar{display:flex;align-items:center;padding:18px 28px;border-bottom:1px solid #222}
.avatar{width:42px;height:42px;border-radius:50%;background:#777;display:grid;place-items:center;margin-right:14px}
.brand{font-size:34px;font-family:Georgia,serif;color:var(--accent)}
nav{margin-left:auto;display:flex;gap:24px}
nav a{color:#ddd;text-decoration:none}
nav .active{color:var(--accent)}
.hero{display:grid;grid-template-columns:1fr 360px;gap:40px;padding:70px;background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),url('https://picsum.photos/1600/700') center/cover}
.hero-text h1{font-size:64px;font-family:Georgia,serif;margin:0}
.hero-text p{font-size:24px;max-width:540px}
.wander-card{background:rgba(71,21,34,.93);padding:24px;border-radius:18px;border:1px solid #755}
.label{font-size:12px;color:var(--accent)}
.meta{display:flex;justify-content:space-between;margin-top:20px}
main{padding:30px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.card{background:var(--panel);border-radius:16px;overflow:hidden}
.card img{width:100%;height:190px;object-fit:cover}
.body{padding:14px}
.badge{display:inline-block;background:#222;color:var(--accent);padding:4px 8px;border-radius:20px;font-size:12px}
.comet{background:var(--wine);display:flex;align-items:center;justify-content:center;padding:30px;height:320px;font-size:34px;font-style:italic;text-align:center}
@media(max-width:900px){
nav{display:none}
.hero{grid-template-columns:1fr;padding:30px}
.hero-text h1{font-size:44px}
}