/* ═══════════════════════════════════════════════════════
   Kick Ass News — Global Stylesheet
   Dark editorial / high-contrast news aesthetic
═══════════════════════════════════════════════════════ */

/* ─── Variables ─────────────────────────────────────── */
:root {
  --black:      #0a0a0a;
  --surface:    #111111;
  --surface2:   #1a1a1a;
  --border:     #2a2a2a;
  --border2:    #333333;
  --text:       #f0ece4;
  --text-muted: #888880;
  --text-dim:   #555550;
  --red:        #e03030;
  --red-dark:   #b82020;
  --red-glow:   rgba(224,48,48,.15);
  --white:      #ffffff;

  --serif:      'Bebas Neue', 'Impact', sans-serif;
  --body-font:  'DM Sans', 'Segoe UI', sans-serif;
  --mono:       'JetBrains Mono', monospace;

  --ease:       cubic-bezier(.4,0,.2,1);
  --max-w:      1200px;
  --side-pad:   24px;
}

/* ─── Reset ──────────────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--body-font);
  background: var(--black);
  color: var(--text);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
}
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font-family:var(--body-font); cursor:pointer; border:none; background:none; }

/* ─── Layout helpers ────────────────────────────────── */
.container { max-width:var(--max-w); margin:0 auto; padding:0 var(--side-pad); }

/* ─── Animations ──────────────────────────────────────*/
@keyframes spin   { to { transform:rotate(360deg); } }
@keyframes fadeUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulse  { 0%,100% { opacity:1; } 50% { opacity:.5; } }
.fade-up { animation:fadeUp .4s var(--ease) both; }

/* ─── Loading ────────────────────────────────────────── */
.state-loading {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:80px 24px; gap:16px;
}
.loader {
  width:28px; height:28px;
  border:2px solid var(--border2);
  border-top-color:var(--red);
  border-radius:50%;
  animation:spin .7s linear infinite;
}
.state-loading p {
  font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--text-muted);
}

/* ─── HEADER ─────────────────────────────────────────── */
.site-header {
  background:var(--black);
  border-bottom:2px solid var(--red);
  position:sticky; top:0; z-index:300;
}
.header-top {
  display:flex; align-items:center; justify-content:center;
  padding:14px var(--side-pad) 12px;
  position:relative;
}
.brand-link {
  font-family:var(--serif);
  font-size:clamp(1.6rem,4vw,2.8rem);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--white);
  cursor:pointer;
  display:inline-block;
  line-height:1;
}
.brand-link span { color:var(--red); }

.site-nav {
  background:var(--surface);
  border-top:1px solid var(--border);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.site-nav::-webkit-scrollbar { display:none; }
.nav-inner {
  max-width:var(--max-w); margin:0 auto;
  padding:0 var(--side-pad);
  display:flex; gap:0;
  white-space:nowrap;
}
.nav-btn {
  font-size:.68rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-muted);
  padding:11px 16px;
  border-bottom:2px solid transparent;
  border-top:none; border-left:none; border-right:none;
  transition:all .22s var(--ease);
  flex-shrink:0;
}
.nav-btn:hover { color:var(--text); }
.nav-btn.active { color:var(--red); border-bottom-color:var(--red); }

/* ─── FOOTER ─────────────────────────────────────────── */
.site-footer {
  background:var(--surface);
  border-top:2px solid var(--red);
  padding:44px var(--side-pad);
  margin-top:60px;
}
.footer-inner {
  max-width:var(--max-w); margin:0 auto;
  display:flex; flex-direction:column;
  align-items:center; gap:20px;
  text-align:center;
}
.footer-brand {
  font-family:var(--serif);
  font-size:1.6rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--white);
  cursor:pointer;
}
.footer-brand span { color:var(--red); }
.footer-cats {
  display:flex; gap:6px; flex-wrap:wrap;
  justify-content:center;
}
.footer-cat {
  font-size:.62rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-muted); cursor:pointer;
  padding:4px 10px;
  border:1px solid var(--border);
  transition:all .2s var(--ease);
}
.footer-cat:hover { color:var(--red); border-color:var(--red); }
.footer-links { display:flex; gap:20px; }
.footer-link {
  font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-dim);
  cursor:pointer; transition:color .2s;
}
.footer-link:hover { color:var(--text-muted); }
.footer-copy {
  font-size:.6rem; letter-spacing:.08em;
  color:var(--text-dim);
}

/* ─── Section header ─────────────────────────────────── */
.section-head {
  display:flex; align-items:center; gap:16px;
  margin-bottom:24px; padding-top:8px;
}
.section-label {
  font-family:var(--serif);
  font-size:1.1rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--red);
  white-space:nowrap;
}
.section-rule { flex:1; height:1px; background:var(--border); }

/* ─── Category badge ─────────────────────────────────── */
.cat-badge {
  display:inline-block;
  font-size:.58rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--black); background:var(--red);
  padding:3px 8px;
  cursor:pointer;
}
.cat-badge:hover { background:var(--red-dark); }

/* ─── Article Card ───────────────────────────────────── */
.card { cursor:pointer; }
.card-img {
  overflow:hidden;
  aspect-ratio:16/10;
  background:var(--surface2);
  margin-bottom:12px;
  position:relative;
}
.card-img img {
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .55s var(--ease);
  filter:brightness(.95);
}
.card:hover .card-img img { transform:scale(1.05); filter:brightness(1.05); }
.card-meta { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.card-date {
  font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-dim);
}
.card-title {
  font-family:var(--serif);
  font-size:1.15rem; letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--text); line-height:1.2;
  margin-bottom:8px;
  transition:color .2s;
}
.card:hover .card-title { color:var(--red); }
.card-desc {
  font-size:.82rem; color:var(--text-muted);
  line-height:1.55;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.card-author {
  font-size:.65rem; letter-spacing:.08em;
  color:var(--text-dim); margin-top:8px;
  text-transform:uppercase;
}

/* ─── Cards Grid ─────────────────────────────────────── */
.cards-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px,1fr));
  gap:32px 24px;
}

/* ═══════════════════════════════════════════════════════
   HOME PAGE
═══════════════════════════════════════════════════════ */
.home-wrap { padding-bottom:64px; }
.home-wrap .container { padding-top:36px; }

/* Banner */
.banner {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  background:var(--surface);
  border:1px solid var(--border);
  overflow:hidden;
  cursor:pointer;
  margin-bottom:48px;
}
.banner-img { overflow:hidden; min-height:420px; max-height:560px; }
.banner-img img {
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .7s var(--ease);
  filter:brightness(.9);
}
.banner:hover .banner-img img { transform:scale(1.03); filter:brightness(1); }
.banner-body {
  padding:40px 44px;
  display:flex; flex-direction:column; justify-content:center;
  background:var(--surface);
  border-left:1px solid var(--border);
}
.banner-kicker {
  display:flex; align-items:center; gap:10px;
  margin-bottom:20px;
}
.live-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--red);
  animation:pulse 1.5s ease infinite;
}
.banner-kicker-text {
  font-size:.62rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--red);
}
.banner-title {
  font-family:var(--serif);
  font-size:clamp(1.8rem,2.8vw,2.8rem);
  letter-spacing:.03em; text-transform:uppercase;
  line-height:1.1; color:var(--white);
  margin-bottom:16px;
}
.banner-desc {
  font-size:.9rem; color:var(--text-muted);
  line-height:1.65; margin-bottom:24px;
}
.banner-meta {
  font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-dim);
}
.banner-cta {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.65rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--red); margin-top:20px;
  transition:gap .22s var(--ease);
}
.banner-cta svg { transition:transform .22s var(--ease); }
.banner:hover .banner-cta { gap:14px; }
.banner:hover .banner-cta svg { transform:translateX(4px); }

/* Ticker strip */
.ticker-wrap {
  background:var(--red);
  overflow:hidden;
  height:36px;
  display:flex; align-items:center;
  margin-bottom:48px;
}
.ticker-label {
  font-family:var(--serif);
  font-size:.8rem; letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--white);
  background:var(--red-dark);
  padding:0 16px;
  height:100%; display:flex; align-items:center;
  flex-shrink:0;
  border-right:1px solid rgba(255,255,255,.2);
}
.ticker-inner {
  display:flex; gap:60px;
  animation:ticker 30s linear infinite;
  white-space:nowrap;
  padding-left:30px;
}
@keyframes ticker { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.ticker-item {
  font-size:.7rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--white); opacity:.9;
  cursor:pointer;
}
.ticker-item:hover { opacity:1; }
.ticker-sep { color:rgba(255,255,255,.4); }

/* ═══════════════════════════════════════════════════════
   LIST PAGE
═══════════════════════════════════════════════════════ */
.list-wrap { padding-bottom:64px; }

.cat-hero {
  background:var(--surface);
  border-bottom:2px solid var(--red);
  padding:40px var(--side-pad) 32px;
  margin-bottom:40px;
}
.cat-hero-inner {
  max-width:var(--max-w); margin:0 auto;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
.cat-hero-name {
  font-family:var(--serif);
  font-size:clamp(2.5rem,6vw,5rem);
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--white); line-height:1;
}
.cat-hero-name span { color:var(--red); }
.cat-hero-count {
  font-size:.65rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--text-dim);
}

.list-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px,1fr));
  gap:36px 24px;
}

/* Pagination */
.pagination {
  display:flex; align-items:center; justify-content:center;
  gap:8px; margin-top:52px; flex-wrap:wrap;
}
.pg-btn {
  font-size:.65rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  padding:10px 20px;
  border:1px solid var(--border2);
  color:var(--text-muted); background:transparent;
  cursor:pointer; transition:all .2s var(--ease);
}
.pg-btn:not(:disabled):hover {
  border-color:var(--red); color:var(--red);
  background:var(--red-glow);
}
.pg-btn:disabled { opacity:.3; cursor:not-allowed; }
.pg-info {
  font-size:.65rem; letter-spacing:.1em;
  color:var(--text-dim); padding:0 8px;
}

/* ═══════════════════════════════════════════════════════
   DETAIL PAGE
═══════════════════════════════════════════════════════ */
.detail-wrap { padding-bottom:80px; }
.article-outer {
  max-width:var(--max-w); margin:0 auto;
  padding:40px var(--side-pad);
  display:grid;
  grid-template-columns:1fr 340px;
  gap:48px; align-items:start;
}
.article-main {}
.article-sidebar {}

/* Back */
.back-btn {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.62rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-dim); cursor:pointer;
  margin-bottom:32px; border:none; background:none;
  transition:color .2s;
}
.back-btn:hover { color:var(--red); }
.back-btn svg { transition:transform .2s; }
.back-btn:hover svg { transform:translateX(-3px); }

/* Article head */
.art-meta-row { display:flex; align-items:center; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.art-cat { font-size:.6rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--red); cursor:pointer; }
.art-cat:hover { text-decoration:underline; }
.meta-sep { width:3px; height:3px; border-radius:50%; background:var(--border2); }
.art-date { font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); }

.art-title {
  font-family:var(--serif);
  font-size:clamp(2rem,4.5vw,3.8rem);
  letter-spacing:.03em; text-transform:uppercase;
  line-height:1.08; color:var(--white);
  margin-bottom:20px;
}
.art-lead {
  font-size:1.05rem; color:var(--text-muted);
  line-height:1.65; margin-bottom:28px;
  padding-bottom:24px;
  border-bottom:1px solid var(--border);
}
.author-row {
  display:flex; align-items:center; gap:12px;
  margin-bottom:32px;
}
.author-av {
  width:36px; height:36px; border-radius:0;
  background:var(--red);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:1rem; font-weight:700;
  color:var(--white); flex-shrink:0;
}
.author-name { font-size:.72rem; font-weight:600; letter-spacing:.06em; color:var(--text); }
.author-role { font-size:.6rem; color:var(--text-dim); letter-spacing:.04em; }
.read-time { margin-left:auto; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); }

.art-cover {
  width:100%; max-height:520px;
  object-fit:cover; margin-bottom:36px;
  filter:brightness(.95);
}

/* Body */
.art-body { font-size:1rem; line-height:1.82; color:var(--text-muted); }
.art-body p { margin-bottom:1.5em; }
.art-body h2,.art-body h3 {
  font-family:var(--serif); letter-spacing:.04em; text-transform:uppercase;
  color:var(--white); margin:1.8em 0 .65em; line-height:1.2;
}
.art-body h2 { font-size:1.7rem; }
.art-body h3 { font-size:1.3rem; }
.art-body figure { margin:2em -8px; }
.art-body figure img { width:100%; max-height:480px; object-fit:cover; filter:brightness(.9); }
.art-body figcaption { font-size:.72rem; color:var(--text-dim); margin-top:8px; padding:0 8px; font-style:italic; }
.art-body ul,.art-body ol { padding-left:1.6em; margin-bottom:1.4em; }
.art-body li { margin-bottom:.4em; }
.art-body strong { font-weight:700; color:var(--text); }
.art-body a { color:var(--red); text-decoration:underline; }

/* Sidebar */
.sidebar-block { margin-bottom:36px; }
.sidebar-title {
  font-family:var(--serif); font-size:.9rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--red);
  margin-bottom:16px; padding-bottom:10px;
  border-bottom:1px solid var(--border);
}
.sidebar-card { display:flex; gap:12px; margin-bottom:16px; cursor:pointer; }
.sidebar-card-img {
  width:72px; height:54px; flex-shrink:0;
  overflow:hidden; background:var(--surface2);
}
.sidebar-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.sidebar-card:hover .sidebar-card-img img { transform:scale(1.1); }
.sidebar-card-title {
  font-family:var(--serif); font-size:.8rem;
  letter-spacing:.02em; text-transform:uppercase;
  color:var(--text); line-height:1.25;
  transition:color .2s;
}
.sidebar-card:hover .sidebar-card-title { color:var(--red); }

/* Related */
.related-section { border-top:1px solid var(--border); margin-top:52px; padding-top:40px; }
.related-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px,1fr));
  gap:24px; margin-top:20px;
}

/* ═══════════════════════════════════════════════════════
   PRIVACY POLICY PAGE
═══════════════════════════════════════════════════════ */
.privacy-wrap { padding-bottom:80px; }
.privacy-hero {
  background:var(--surface);
  border-bottom:2px solid var(--red);
  padding:48px var(--side-pad) 40px;
  margin-bottom:48px;
}
.privacy-hero-inner { max-width:800px; margin:0 auto; }
.privacy-hero-label {
  font-size:.62rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--red); margin-bottom:12px;
}
.privacy-hero-title {
  font-family:var(--serif);
  font-size:clamp(2.4rem,5vw,4.5rem);
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--white); line-height:1.05;
}
.privacy-body {
  max-width:800px; margin:0 auto;
  padding:0 var(--side-pad);
}
.privacy-body h2 {
  font-family:var(--serif); font-size:1.4rem;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--white); margin:2.4em 0 .8em;
  padding-bottom:10px; border-bottom:1px solid var(--border);
}
.privacy-body h2:first-child { margin-top:0; }
.privacy-body p {
  font-size:.95rem; color:var(--text-muted);
  line-height:1.8; margin-bottom:1.2em;
}
.privacy-body ul {
  padding-left:1.4em; margin-bottom:1.4em;
}
.privacy-body li {
  font-size:.95rem; color:var(--text-muted);
  line-height:1.75; margin-bottom:.5em;
}
.privacy-body a { color:var(--red); }
.privacy-updated {
  font-size:.65rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-dim);
  margin-top:52px; padding-top:20px;
  border-top:1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — Tablet ≤ 960px
═══════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  :root { --side-pad: 20px; }

  .banner { grid-template-columns: 1fr; }
  .banner-img { min-height: 260px; max-height: 380px; }
  .banner-body { padding: 28px 24px 32px; border-left: none; border-top: 1px solid var(--border); }
  .banner-title { font-size: 1.9rem; }

  .article-outer { grid-template-columns: 1fr; }
  .article-sidebar { display: none; }

  .cards-grid { grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); }
  .list-grid  { grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); }
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — Mobile ≤ 600px
═══════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  :root { --side-pad: 16px; }

  /* Header */
  .header-top { padding: 10px 16px 8px; }
  .nav-btn { padding: 9px 12px; font-size: .62rem; letter-spacing: .12em; }

  /* Banner */
  .banner { margin-bottom: 32px; }
  .banner-img { min-height: 200px; max-height: 260px; }
  .banner-body { padding: 20px 16px 24px; }
  .banner-title { font-size: 1.45rem; }
  .banner-desc { font-size: .82rem; }
  .banner-kicker { margin-bottom: 12px; }

  /* Ticker */
  .ticker-wrap { height: 32px; }
  .ticker-label { font-size: .7rem; padding: 0 10px; }
  .ticker-item { font-size: .65rem; }

  /* Grids → single col */
  .cards-grid { grid-template-columns: 1fr; gap: 24px; }
  .list-grid  { grid-template-columns: 1fr; gap: 24px; }
  .related-grid { grid-template-columns: 1fr 1fr; gap: 16px; }

  /* Category hero */
  .cat-hero { padding: 28px 16px 22px; margin-bottom: 28px; }
  .cat-hero-name { font-size: 2.2rem; }
  .cat-hero-inner { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Detail */
  .article-outer { padding: 28px 16px; }
  .art-title { font-size: 1.8rem; }
  .art-lead { font-size: .95rem; }
  .art-cover { max-height: 240px; margin-bottom: 24px; }
  .back-btn { margin-bottom: 20px; }
  .author-row { margin-bottom: 20px; }
  .read-time { display: none; }

  /* Privacy */
  .privacy-hero { padding: 32px 16px 28px; }
  .privacy-hero-title { font-size: 2rem; }
  .privacy-body { padding: 0 16px; }

  /* Section */
  .section-head { margin-bottom: 18px; }

  /* Pagination */
  .pagination { gap: 6px; margin-top: 36px; }
  .pg-btn { padding: 9px 14px; }

  /* Footer */
  .site-footer { padding: 32px 16px; margin-top: 40px; }
}

/* ─── Very small ≤ 380px ─────────────────────────────── */
@media (max-width: 380px) {
  .brand-link { font-size: 1.4rem; }
  .banner-img { min-height: 160px; }
  .related-grid { grid-template-columns: 1fr; }
}