/* ── GHOST CARD WIDTH CLASSES (required) ── */
.kg-width-wide{margin-left:-4vw;margin-right:-4vw}
.kg-width-full{margin-left:-2rem;margin-right:-2rem;width:calc(100% + 4rem)}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:#080808;
  color:#F0EDE6;
  font-family:'DM Sans',sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}

:root{
  --R:#C8102E;--O:#FF5C00;--Y:#FFD300;
  --G:#00A550;--B:#003DA5;--W:#F0EDE6;
  --bg:#080808;--surface:#101012;
  --border:#1F1F22;--dim:#555558;
}

/* ── STRIPE ── */
.stripe{display:flex;height:3px;position:fixed;top:0;left:0;right:0;z-index:400}
.stripe s{flex:1;text-decoration:none}

/* ── NAV ── */
.nav{
  position:fixed;top:3px;left:0;right:0;z-index:300;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1.25rem;height:54px;
  background:rgba(8,8,8,0.92);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.logo{
  font-family:'Anton',sans-serif;
  font-size:1.35rem;letter-spacing:0.02em;
  color:var(--W);display:flex;align-items:center;gap:8px;
}
.logo-cube{display:grid;grid-template-columns:repeat(3,5px);grid-template-rows:repeat(3,5px);gap:1.5px}
.logo-cube span{border-radius:1px}
.logo .o{color:var(--W)}
.nav-links{display:flex;gap:1.5rem;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.nav-links a:hover{color:var(--W)}
.burger{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;gap:5px;padding:4px}
.burger span{display:block;width:22px;height:1.5px;background:var(--W);border-radius:2px;transition:.25s}
.burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ── DRAWER ── */
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(320px,85vw);
  background:#0e0e10;border-left:1px solid var(--border);
  z-index:500;transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;padding:1.5rem;
}
.drawer.open{transform:none}
.drawer-top{display:flex;justify-content:flex-end;margin-bottom:2rem}
.dx{background:none;border:1px solid var(--border);color:var(--W);cursor:pointer;padding:.35rem .7rem;font-size:.85rem;border-radius:3px}
.drawer nav{display:flex;flex-direction:column;gap:0}
.drawer nav a{
  font-family:'Anton',sans-serif;font-size:1.6rem;letter-spacing:.03em;
  padding:.65rem 0;border-bottom:1px solid var(--border);
  transition:color .2s;
}
.drawer nav a:hover{color:var(--O)}
.dbg{
  position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:490;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.dbg.show{opacity:1;pointer-events:all}

/* ── TICKER ── */
.ticker-wrap{
  margin-top:57px;background:#0d0d0d;border-bottom:1px solid var(--border);
  display:flex;align-items:center;height:36px;overflow:hidden;
}
.ticker-label{
  flex-shrink:0;background:var(--R);color:#fff;
  font-family:'Anton',sans-serif;font-size:.75rem;letter-spacing:.1em;
  padding:0 .9rem;height:100%;display:flex;align-items:center;
}
.ticker-track{
  display:flex;gap:0;white-space:nowrap;
  animation:ticker 28s linear infinite;
}
.ticker-item{font-size:.75rem;color:#aaa;padding:0 2.5rem;display:flex;align-items:center;gap:.5rem}
.ticker-item span{font-size:.85rem}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── HERO GRID ── */
.hero{
  display:grid;grid-template-columns:1fr 1fr;
  min-height:calc(100vh - 93px);
  border-bottom:1px solid var(--border);
}
.hero-main{
  position:relative;overflow:hidden;
  background:#0a0a12;border-right:1px solid var(--border);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:2.5rem;min-height:480px;
}
.hero-feature-img{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:.25;
}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(8,8,12,.98) 0%, rgba(8,8,12,.4) 60%);
}
.hero-content{position:relative;z-index:2}
.category-tag{
  display:inline-block;font-size:.65rem;letter-spacing:.12em;
  text-transform:uppercase;padding:.25rem .6rem;
  border:1px solid var(--R);color:var(--R);margin-bottom:.8rem;
  border-radius:2px;
}
.hero-title{
  font-family:'Anton',sans-serif;font-size:clamp(1.8rem,3.5vw,2.8rem);
  line-height:1.05;letter-spacing:.01em;margin-bottom:.9rem;
}
.hero-excerpt{font-size:.9rem;color:#aaa;line-height:1.6;margin-bottom:1.2rem;max-width:520px}
.hero-meta{font-size:.75rem;color:var(--dim);display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.hero-meta .author{color:#ccc}
.dot{color:var(--border)}

/* side stack */
.side-stack{display:flex;flex-direction:column}
.side-card{
  position:relative;overflow:hidden;flex:1;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:1.5rem;border-bottom:1px solid var(--border);
  min-height:200px;cursor:pointer;background:#0d0d0e;
  transition:background .2s;
}
.side-card:hover{background:#111114}
.side-card:last-child{border-bottom:none}
.side-card-img{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:.2;transition:opacity .3s;
}
.side-card:hover .side-card-img{opacity:.3}
.side-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,8,.95) 0%,transparent 70%)}
.side-card-content{position:relative;z-index:2}
.side-card-title{font-family:'Anton',sans-serif;font-size:1.15rem;line-height:1.1;margin:.5rem 0 .4rem}
.side-card-meta{font-size:.72rem;color:var(--dim)}

/* ── REVEAL ANIMATION ── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .55s ease}
.reveal.in{opacity:1;transform:none}
.rv{opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .55s ease}
.rv.in{opacity:1;transform:none}

/* ── ARTICLES GRID ── */
.articles-section{padding:3rem 2rem;border-bottom:1px solid var(--border)}
.sec-label{font-family:'Anton',sans-serif;font-size:1.6rem;letter-spacing:.03em}
.articles-section .sec-label{margin-bottom:2rem;display:block}
.articles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1px;background:var(--border);border:1px solid var(--border)}
.article-card{
  background:#0e0e10;padding:1.5rem;
  display:flex;flex-direction:column;gap:.6rem;
  transition:background .2s;
}
.article-card:hover{background:#141418}
.article-cat{font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--O)}
.article-title{font-family:'Anton',sans-serif;font-size:1.1rem;line-height:1.15}
.article-excerpt{font-size:.82rem;color:#888;line-height:1.5}
.article-meta{font-size:.7rem;color:var(--dim);margin-top:auto;padding-top:.6rem;display:flex;gap:.5rem}
.article-arrow{font-size:.75rem;color:var(--O);margin-top:.3rem}

/* ── WORLD RECORDS ── */
.wr-section{background:#0a0a0a;border-bottom:1px solid var(--border);padding:3rem 2rem 2.5rem}
.wr-section-top{display:flex;align-items:baseline;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}
.wr-status{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:.4rem}
.wr-dot{width:6px;height:6px;border-radius:50%;background:#4ade80;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.wr-loading{display:flex;align-items:center;gap:.75rem;font-size:.85rem;color:var(--dim);padding:1.5rem 0}
.wr-spinner{width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--O);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.wr-fallback-note{font-size:.72rem;color:var(--dim);margin-top:.4rem}
.wr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1px;background:var(--border);border:1px solid var(--border)}
.wr-card{background:#0e0e10;padding:1.1rem 1rem;display:flex;flex-direction:column;gap:.3rem;transition:background .2s}
.wr-card:hover{background:#141418}
.wr-card-event{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.wr-card-time{font-family:'Anton',sans-serif;font-size:1.5rem;letter-spacing:.01em}
.wr-card-name{font-size:.78rem;color:#aaa}
.wr-card-date{font-size:.65rem;color:#444;margin-top:.2rem}
.c-r{color:#f87191}.c-o{color:#fb923c}.c-y{color:#fde047}.c-g{color:#4ade80}
.c-b{color:#60a5fa}.c-w{color:#e2e8f0}.c-p{color:#c084fc}.c-t{color:#2dd4bf}.c-pi{color:#f472b6}
.wr-source{font-size:.68rem;color:#333;margin-top:1.5rem;text-align:right}
.wr-source a{color:#444;text-decoration:underline}
.wr-source a:hover{color:var(--dim)}

/* ── NEWSLETTER ── */
.nl-section{padding:3.5rem 2rem;background:#0c0c0e;border-bottom:1px solid var(--border);text-align:center}
.nl-section h2{font-family:'Anton',sans-serif;font-size:2rem;letter-spacing:.03em;margin-bottom:.5rem}
.nl-section p{font-size:.88rem;color:#888;margin-bottom:1.5rem}
.nl-row{display:flex;max-width:400px;margin:0 auto;gap:.5rem}
.nl-in{flex:1;background:#161618;border:1px solid var(--border);color:var(--W);padding:.75rem 1rem;font-size:.9rem;outline:none;border-radius:2px}
.nl-in:focus{border-color:var(--O)}
.nl-btn{background:var(--O);color:#fff;border:none;font-family:'Anton',sans-serif;font-size:.9rem;letter-spacing:.05em;padding:.75rem 1.25rem;cursor:pointer;border-radius:2px;transition:background .2s}
.nl-btn:hover{background:#e04e00}

/* ── FOOTER ── */
footer{background:#050505;border-top:1px solid var(--border);padding:2.5rem 2rem 1.5rem}
.f-logo{font-family:'Anton',sans-serif;font-size:1.4rem;letter-spacing:.03em;margin-bottom:.4rem}
.f-logo span{color:var(--O)}
.f-sub{font-size:.8rem;color:var(--dim);margin-bottom:1.5rem}
.f-links{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-bottom:1.5rem}
.f-links a{font-size:.8rem;color:var(--dim);text-transform:uppercase;letter-spacing:.07em;transition:color .2s}
.f-links a:hover{color:var(--W)}
.f-base{display:flex;justify-content:space-between;font-size:.72rem;color:#333;border-top:1px solid var(--border);padding-top:1rem}
.f-stripe{display:flex;height:2px;margin-top:1rem}
.f-stripe s{flex:1;text-decoration:none}

/* ── POST PAGE ── */
.post-header{padding:5rem 2rem 3rem;max-width:740px;margin:0 auto;border-bottom:1px solid var(--border)}
.post-tag{font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--O);margin-bottom:1rem;display:block}
.post-title{font-family:'Anton',sans-serif;font-size:clamp(2rem,5vw,3.5rem);line-height:1.05;letter-spacing:.01em;margin-bottom:1.2rem}
.post-meta{font-size:.78rem;color:var(--dim);display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.post-meta .author{color:#ccc}
.post-feature-img{width:100%;max-height:500px;object-fit:cover;display:block;border-bottom:1px solid var(--border)}
.post-body{max-width:740px;margin:0 auto;padding:3rem 2rem 5rem;font-size:1rem;line-height:1.8;color:#ccc}
.post-body h2{font-family:'Anton',sans-serif;font-size:1.6rem;color:var(--W);margin:2.5rem 0 1rem;letter-spacing:.02em}
.post-body h3{font-family:'Anton',sans-serif;font-size:1.2rem;color:var(--W);margin:2rem 0 .75rem}
.post-body p{margin-bottom:1.4rem}
.post-body a{color:var(--O);text-decoration:underline}
.post-body img{width:100%;border-radius:2px;margin:1.5rem 0}
.post-body blockquote{border-left:3px solid var(--O);padding-left:1.2rem;color:#888;font-style:italic;margin:1.5rem 0}
.post-body ul,.post-body ol{padding-left:1.5rem;margin-bottom:1.4rem}
.post-body li{margin-bottom:.4rem}
.post-body pre{background:#0e0e10;border:1px solid var(--border);padding:1rem;overflow-x:auto;border-radius:3px;margin-bottom:1.4rem}
.post-body code{font-size:.85em;background:#0e0e10;padding:.15em .35em;border-radius:2px}

/* ── RESPONSIVE ── */
@media(max-width:760px){
  .hero{grid-template-columns:1fr}
  .side-stack{flex-direction:row}
  .side-card{min-height:160px;border-bottom:none;border-right:1px solid var(--border)}
  .side-card:last-child{border-right:none}
  .nav-links{display:none}
  .wr-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .side-stack{flex-direction:column}
  .side-card{border-right:none;border-bottom:1px solid var(--border)}
  .wr-grid{grid-template-columns:1fr 1fr}
  .nl-row{flex-direction:column}
}