/* ══════════════════════════════════════════════════════════
   COMBO-DAY · shared styles for content pages
   ══════════════════════════════════════════════════════════ */
:root{
  color-scheme:dark;
  --ink:#080808; --grey:#171717; --grey2:#2b2b2b;
  --pink:#FF1E6E; --cyan:#00E8FF; --yellow:#FFE600; --purple:#C150FF;
  --white:#fff; --dim:rgba(255,255,255,.62); --dimmer:rgba(255,255,255,.35);
  --checker:linear-gradient(45deg,#111 25%,transparent 25%,transparent 75%,#111 75%);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;background-color:#080808;color-scheme:dark;
  overflow-x:hidden;-webkit-text-size-adjust:100%;
}
body{
  background-color:#080808;color:#fff;
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.65;min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.backstop{position:fixed;inset:0;background-color:#080808;z-index:-1;pointer-events:none}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
img{display:block;max-width:100%}

/* ── nav ── */
nav{
  position:sticky;top:0;z-index:60;background:var(--ink);
  border-bottom:2px solid var(--grey2);height:52px;padding:0 18px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.logo{font-family:'Bangers',cursive;font-size:1.45rem;letter-spacing:.07em;line-height:1;white-space:nowrap;color:#fff}
.logo:hover{text-decoration:none}
.logo .a{color:var(--cyan)} .logo .b{color:var(--pink)} .logo .s{color:var(--yellow);font-size:.85rem}
.nav-btn{
  background:var(--pink);color:#fff;border:none;cursor:pointer;display:inline-block;
  font-family:'Bangers',cursive;font-size:.92rem;letter-spacing:.1em;
  padding:8px 15px;white-space:nowrap;transition:background .15s;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
}
.nav-btn:hover{background:var(--purple);text-decoration:none}

/* ── ticker ── */
.tick{position:relative;z-index:1;overflow:hidden;white-space:nowrap;padding:6px 0;
  background:var(--yellow);border-top:2px solid var(--yellow);border-bottom:2px solid var(--yellow)}
.tick-in{display:inline-block;animation:tick 24s linear infinite;white-space:nowrap}
.tick-in b{font-family:'Bangers',cursive;font-weight:400;font-size:.92rem;letter-spacing:.14em;color:var(--ink);padding:0 20px}
.tick-in i{color:var(--pink);font-style:normal;font-size:1rem}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── layout ── */
.wrap{display:block;position:relative;z-index:1}
.main{min-width:0}
.page{padding:30px 20px 50px;max-width:720px}

/* ── type ── */
.kicker{
  display:inline-block;color:var(--cyan);border:2px solid var(--cyan);
  font-family:'Bangers',cursive;font-size:.72rem;letter-spacing:.2em;
  padding:3px 11px;margin-bottom:14px;
  clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);
}
h1{font-family:'Bangers',cursive;font-weight:400;letter-spacing:.04em;
  font-size:clamp(2.2rem,8.5vw,3.2rem);line-height:.95;margin-bottom:14px}
h1 .p{color:var(--pink)} h1 .c{color:var(--cyan)} h1 .y{color:var(--yellow)}
h2{font-family:'Bangers',cursive;font-weight:400;letter-spacing:.04em;
  font-size:clamp(1.5rem,5.5vw,2rem);line-height:1;margin:34px 0 12px;color:var(--yellow)}
h3{font-family:'Bangers',cursive;font-weight:400;letter-spacing:.04em;
  font-size:1.25rem;margin:24px 0 8px;color:var(--cyan)}
p{margin-bottom:15px;color:var(--dim)}
p strong,li strong{color:#fff;font-weight:700}
.lead{font-size:1.06rem;color:rgba(255,255,255,.78)}
ul,ol{margin:0 0 16px 20px;color:var(--dim)}
li{margin-bottom:7px}
hr{border:none;border-top:2px solid var(--grey2);margin:32px 0}
.small{font-size:.82rem;color:var(--dimmer)}

/* ── pull quote / callout ── */
.callout{
  background:var(--grey);border-left:4px solid var(--pink);
  padding:16px 18px;margin:22px 0;
}
.callout p:last-child{margin-bottom:0}
.callout.cyan{border-left-color:var(--cyan)}
.callout.yellow{border-left-color:var(--yellow)}

/* ── combo cards (articles) ── */
.combo{
  background:var(--grey);border:2px solid var(--grey2);
  margin:0 0 18px;position:relative;overflow:hidden;
}
.combo-hd{
  background-color:#fff;background-image:var(--checker),var(--checker);
  background-size:16px 16px;background-position:0 0,8px 8px;
  border-bottom:3px solid var(--pink);padding:11px 15px;
}
.combo-hd span{
  font-family:'Bangers',cursive;font-size:1.25rem;letter-spacing:.05em;color:var(--pink);
  text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000;
}
.combo-bd{padding:16px 16px 18px}
.combo-who{font-family:'Bangers',cursive;font-size:1.05rem;letter-spacing:.05em;color:#fff;margin-bottom:2px}
.combo-dob{font-size:.78rem;color:var(--dimmer);margin-bottom:14px}
.combo-date{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border-top:1.5px solid var(--grey2);padding-top:13px;margin-bottom:12px;
}
.combo-num{font-family:'Bangers',cursive;font-size:2.6rem;line-height:1;color:var(--yellow);flex-shrink:0}
.combo-when{flex:1;min-width:150px}
.combo-when .d{font-weight:800;font-size:.98rem;color:var(--cyan)}
.combo-when .w{font-size:.76rem;color:var(--dimmer);text-transform:uppercase;letter-spacing:.08em;margin-top:1px}
.combo-note{font-size:.86rem;color:var(--dim);margin:0}
.tagline{
  display:inline-block;background:var(--purple);color:#fff;
  font-family:'Bangers',cursive;font-size:.7rem;letter-spacing:.12em;
  padding:2px 9px;margin-bottom:10px;
}
.passed{display:inline-block;background:var(--grey2);color:var(--dimmer);
  font-family:'Bangers',cursive;font-size:.65rem;letter-spacing:.1em;padding:1px 8px;margin-left:6px}

/* ── article list ── */
.art-list{display:flex;flex-direction:column;gap:12px;margin:20px 0}
.art{
  background:var(--grey);border-left:4px solid var(--cyan);padding:16px 18px;
  transition:transform .15s;display:block;
}
.art:hover{transform:translateX(3px);text-decoration:none}
.art:nth-child(2n){border-left-color:var(--pink)}
.art:nth-child(3n){border-left-color:var(--yellow)}
.art .t{font-family:'Bangers',cursive;font-size:1.2rem;letter-spacing:.04em;color:#fff;margin-bottom:3px}
.art .d{font-size:.85rem;color:var(--dim)}

/* ── CTA strip ── */
.cta-strip{
  background:var(--pink);padding:26px 20px;text-align:center;margin:36px 0 0;
  position:relative;overflow:hidden;
}
.cta-strip h2{color:#fff;margin:0 0 8px;font-size:clamp(1.5rem,6vw,2.1rem)}
.cta-strip p{color:rgba(255,255,255,.88);margin-bottom:16px}
.cta-strip .nav-btn{background:var(--ink);font-size:1.05rem;padding:13px 24px}
.cta-strip .nav-btn:hover{background:var(--purple)}

/* ── ads ── */
.ad-side{display:none}
.ad{background:var(--grey);border:2px dashed var(--grey2);display:flex;align-items:center;
  justify-content:center;color:rgba(255,255,255,.18);font-family:'Bangers',cursive;
  letter-spacing:.1em;font-size:.78rem;position:relative}
.ad::before{content:'ADVERTISEMENT';position:absolute;top:7px;font-size:.56rem;
  letter-spacing:.18em;color:rgba(255,255,255,.13)}
.ad-mob{padding:14px 20px 18px;border-top:2px solid var(--grey2)}
.ad-mob .ad{width:100%;height:100px}

/* ── footer ── */
footer{position:relative;z-index:1;border-top:2px solid var(--grey2);padding:22px 20px}
.foot-links{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:12px}
.foot-links a{font-size:.85rem;color:var(--dim)}
.foot-links a:hover{color:var(--cyan)}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.foot-logo{font-family:'Bangers',cursive;font-size:1.1rem;letter-spacing:.07em;color:#fff}
.foot-logo .a{color:var(--cyan)} .foot-logo .b{color:var(--pink)} .foot-logo .s{color:var(--yellow)}
footer small{font-size:.7rem;color:rgba(255,255,255,.25);letter-spacing:.04em}

@media (prefers-reduced-motion:reduce){
  .tick-in{animation:none}
  .art:hover{transform:none}
}

@media (min-width:700px){
  .page{padding:38px 32px 60px}
  .ad-mob{padding:16px 32px 20px}
  footer{padding:24px 32px}
  .cta-strip{padding:32px}
}
@media (min-width:1024px){
  .wrap{display:grid;grid-template-columns:minmax(0,1fr) 328px;align-items:start;max-width:1280px;margin:0 auto}
  .main{border-right:2px solid var(--grey2)}
  .ad-side{display:block;padding:22px 18px;position:sticky;top:52px}
  .ad-side .k{font-family:'Bangers',cursive;font-size:.62rem;letter-spacing:.2em;
    color:rgba(255,255,255,.2);text-align:center;margin-bottom:10px}
  .ad-side .ad+.ad{margin-top:14px}
  .ad-300{width:292px;height:250px}
  .ad-600{width:292px;height:300px}
  .ad-mob{display:none}
}