:root{
  --bg: #0d0d0f;
  --paper: #1a1a1e;
  --paper-hi: #232328;
  --ink: #ffffff;
  --muted: #a8a3b0;
  --hot: #ff2e63;
  --acid: #ffe14d;
  --cool: #4dd8ff;
  --display: 'Anton', sans-serif;
  --body: 'Work Sans', sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
body{ background:var(--bg); color:var(--ink); font-family:var(--body); line-height:1.55; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }

/* ---------- Ticker ---------- */
.ticker-wrap{
  background: var(--hot); overflow:hidden; white-space:nowrap;
  border-bottom: 3px solid var(--ink);
}
.ticker{
  display:inline-block; padding: 8px 0;
  font-family: var(--display); font-size: 15px; letter-spacing:0.02em;
  color: var(--ink); text-transform: uppercase;
  animation: scroll-left 32s linear infinite;
}
.ticker span{ display:inline-block; }
@keyframes scroll-left{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

/* ---------- Header ---------- */
header{ background:var(--bg); border-bottom:3px solid var(--paper-hi); position:sticky; top:0; z-index:10; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:20px 24px; flex-wrap:wrap; gap:16px; }
.logo{ font-family:var(--display); font-size:34px; letter-spacing:0.01em; text-transform:uppercase; }
.logo span{ color: var(--hot); }
.filters{ display:flex; gap:10px; flex-wrap:wrap; }
.filters button{
  font-family:var(--display); font-size:13px; letter-spacing:0.03em; text-transform:uppercase;
  padding:9px 18px; border:2px solid var(--paper-hi); background:transparent; color:var(--muted);
  border-radius:30px; cursor:pointer; transition: all .15s ease;
}
.filters button:hover{ border-color:var(--hot); color:var(--ink); }
.filters button.active{ background:var(--hot); border-color:var(--hot); color:var(--ink); }

main{ padding:44px 24px 90px; }

/* ---------- Page layout with ad rails ---------- */
.page-body{
  display:grid; grid-template-columns: 160px minmax(0, 1fr) 160px;
  gap:24px; max-width:1500px; margin:0 auto; padding:0 24px;
}
.content-col{ min-width:0; padding:44px 0 90px; }
.ad-rail{ display:flex; justify-content:center; padding-top:44px; }
.ad-rail ins{ position:sticky; top:100px; }

/* ---------- Featured hero story (compact) ---------- */
.featured-card{
  position:relative; display:flex; align-items:center; gap:24px; border-radius:10px; overflow:hidden;
  margin-bottom:40px; min-height:0; background:var(--paper);
  border: 2px solid var(--paper-hi); padding: 20px;
}
.featured-card img{
  position:static; width:180px; height:180px; flex-shrink:0; border-radius:6px;
  object-fit:cover; opacity:1;
  transition: transform .3s ease;
}
.featured-card:hover img{ transform:scale(1.04); }
.featured-card::after{ content:none; }
.featured-body{ position:relative; z-index:2; padding:0; display:block; height:auto; min-height:0; }
.featured-tag{
  display:inline-block; background:var(--acid); color:#1a1a1e; font-family:var(--display);
  font-size:12px; letter-spacing:0.04em; text-transform:uppercase; padding:4px 12px; border-radius:20px;
  margin-bottom:10px; width:fit-content;
}
.featured-body h1{
  font-family:var(--display); font-size:clamp(20px, 2.4vw, 28px); text-transform:uppercase;
  line-height:1.05; max-width:640px; text-shadow:none;
}
.featured-body p{ color:var(--muted); margin-top:8px; max-width:560px; font-size:14.5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.featured-meta{ margin-top:10px; font-family:var(--display); font-size:12px; letter-spacing:0.03em; text-transform:uppercase; color:var(--cool); }

/* ---------- Grid ---------- */
.grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:26px; }
.loading{ grid-column: 1/-1; color:var(--muted); font-style:italic; text-align:center; padding:40px 0; }

.card{
  background:var(--paper); border:2px solid var(--paper-hi); border-radius:8px; overflow:hidden;
  display:flex; flex-direction:column; transition: transform .2s ease, border-color .2s ease;
}
.card:hover{ transform: translateY(-6px) rotate(-0.4deg); border-color:var(--hot); }
.card-img-wrap{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--paper-hi); }
.card-img-wrap img{ width:100%; height:100%; object-fit:cover; transition: transform .35s ease; }
.card:hover .card-img-wrap img{ transform:scale(1.08); }
.card-cat-badge{
  position:absolute; top:12px; left:12px; font-family:var(--display); font-size:11.5px;
  letter-spacing:0.03em; text-transform:uppercase; padding:5px 12px; border-radius:20px; color:#1a1a1e;
}
.badge-celebrity{ background:var(--hot); color:#fff; }
.badge-entertainment{ background:var(--acid); }
.badge-sports{ background:var(--cool); }
.badge-politics{ background:#b455ff; color:#fff; }
.badge-news{ background:#e5e5e5; color:#1a1a1e; }

.card-body{ padding:22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.card h2{ font-family:var(--display); font-size:21px; line-height:1.1; text-transform:uppercase; }
.card p{ color:var(--muted); font-size:14px; flex:1; }
.card-meta{ font-size:12.5px; color:var(--muted); border-top:1px solid var(--paper-hi); padding-top:12px; margin-top:auto; font-family:var(--display); letter-spacing:0.02em; text-transform:uppercase; }
.card-meta a{ color:var(--hot); }

footer{ border-top:2px solid var(--paper-hi); padding:36px 24px; }
.footer-inner{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.foot-logo{ font-family:var(--display); font-size:20px; text-transform:uppercase; }
.foot-logo span{ color:var(--hot); }
footer p{ color:var(--muted); font-size:13px; max-width:520px; }

@media (max-width: 1100px){
  .page-body{ grid-template-columns: 1fr; }
  .ad-rail{ display:none; }
}
@media (max-width: 900px){
  .grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .grid{ grid-template-columns: 1fr; }
  .header-inner{ flex-direction:column; align-items:flex-start; }
  .featured-card{ flex-direction:column; align-items:flex-start; }
  .featured-card img{ width:100%; height:180px; }
}