
:root{
  --ink:#080908;
  --paper:#fff8e8;
  --paper-2:#fff2c2;
  --green:#006c35;
  --green-2:#0ca56c;
  --gold:#ffcc2f;
  --red:#d0181e;
  --blue:#163cff;
  --stone:#e8dec4;
  --muted:#5a5548;
  --shadow:7px 7px 0 var(--ink);
  --shadow-lg:12px 12px 0 var(--ink);
  --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{margin:0;background:
  radial-gradient(circle at 10% 0%,rgba(255,204,47,.28),transparent 28rem),
  radial-gradient(circle at 95% 15%,rgba(12,165,108,.24),transparent 32rem),
  linear-gradient(180deg,var(--paper),#fff);
 color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.55}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1220px,calc(100% - 32px));margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);padding:.8rem;z-index:999}
.skip:focus{left:1rem;top:1rem}
.ticker{background:var(--red);color:var(--paper);border-bottom:3px solid var(--ink);font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:.76rem}
.ticker-inner{display:flex;align-items:center;gap:1rem;padding:.55rem 0;overflow:hidden}
.live-pill{display:inline-flex;align-items:center;gap:.45rem;border:2px solid var(--paper);background:var(--red);padding:.25rem .55rem;box-shadow:4px 4px 0 var(--paper);white-space:nowrap}
.live-pill span{width:.55rem;height:.55rem;border-radius:999px;background:var(--gold);display:inline-block;animation:pulse 1.2s infinite}
.ticker-text{white-space:nowrap;animation:marquee 18s linear infinite}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 0}
.brand{display:inline-flex;align-items:center;gap:.75rem;font-weight:1000}
.brand-mark{display:grid;place-items:center;width:58px;height:58px;background:var(--green);color:#fff;border:4px solid var(--ink);box-shadow:var(--shadow);font-size:1.3rem;letter-spacing:-.08em;transform:rotate(-2deg)}
.brand-text{font-size:clamp(1.45rem,3vw,2.35rem);line-height:.9;letter-spacing:-.065em;text-transform:uppercase}
.brand-text span{color:var(--green);text-decoration:underline;text-decoration-thickness:.18em;text-decoration-color:var(--gold);text-underline-offset:.12em}
.brand-text small{font-size:.48em;letter-spacing:-.02em;color:var(--muted);margin-left:.1rem}
.masthead-actions{display:flex;align-items:center;gap:.75rem}
.searchbox{display:flex;align-items:center;gap:.5rem;border:3px solid var(--ink);background:#fff;padding:.65rem .8rem;box-shadow:var(--shadow);font-weight:800}
.searchbox input{border:0;background:transparent;outline:none;min-width:250px;font:inherit;font-size:.95rem}
.cta-chip,.nav-chip,.button,.tag{display:inline-flex;align-items:center;justify-content:center;border:3px solid var(--ink);background:var(--gold);font-weight:1000;text-transform:uppercase;letter-spacing:.04em;padding:.72rem .95rem;box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.cta-chip:hover,.nav-chip:hover,.button:hover,.card:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg)}
.main-nav{position:sticky;top:0;z-index:50;background:var(--paper);border-block:3px solid var(--ink)}
.nav-scroll{display:flex;gap:.65rem;overflow-x:auto;padding:.75rem 0;scrollbar-width:none}
.nav-scroll::-webkit-scrollbar{display:none}
.nav-chip{background:#fff;padding:.55rem .75rem;white-space:nowrap;font-size:.85rem;box-shadow:4px 4px 0 var(--ink)}
.nav-chip.active{background:var(--green);color:#fff}
.headline-strip{background:var(--green);color:#fff;border-bottom:3px solid var(--ink)}
.strip-inner{display:flex;align-items:center;gap:1rem;padding:.55rem 0;font-weight:900;text-transform:uppercase;letter-spacing:.06em;font-size:.85rem}
.strip-inner>span{background:var(--gold);color:var(--ink);border:2px solid var(--ink);padding:.2rem .5rem;box-shadow:4px 4px 0 var(--ink)}
.strip-links{display:flex;gap:1.2rem;overflow:auto;white-space:nowrap}
.strip-links a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.top-ad-wrap{padding:1.1rem 0 0}
.ad-shell{position:relative}
.ad-label{display:inline-block;font-size:.65rem;text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:var(--muted);margin-bottom:.3rem}
.ad{display:block;border:3px solid var(--ink);background:#fff;box-shadow:var(--shadow);overflow:hidden}
.ad img{width:100%;height:auto}
.ad-wide img{max-height:200px;object-fit:cover}
.ad-sidebar img{width:100%;object-fit:cover}
.hero{position:relative;overflow:hidden;border-bottom:4px solid var(--ink);background:var(--ink);color:#fff}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;opacity:.88}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:1.2rem;padding:3rem 0 2rem;min-height:560px;align-items:end}
.hero-copy{position:relative;z-index:2}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;border:3px solid var(--ink);background:var(--gold);color:var(--ink);padding:.3rem .55rem;font-weight:1000;text-transform:uppercase;letter-spacing:.08em;box-shadow:5px 5px 0 var(--ink);font-size:.78rem}
.eyebrow .dot{width:.55rem;height:.55rem;background:var(--red);display:inline-block;border-radius:99px}
.hero h1{font-size:clamp(3rem,8vw,7rem);line-height:.86;margin:.9rem 0 1rem;text-transform:uppercase;letter-spacing:-.08em;text-wrap:balance;text-shadow:6px 6px 0 #000}
.hero p{font-size:clamp(1.05rem,2vw,1.35rem);font-weight:800;max-width:740px;color:#fff7d3}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.3rem}
.hero-actions .button:nth-child(2){background:#fff;color:var(--ink)}
.stats-card{position:relative;z-index:2;background:var(--paper);color:var(--ink);border:4px solid var(--ink);box-shadow:var(--shadow-lg);padding:1rem;align-self:center}
.stats-card h2{font-size:1rem;text-transform:uppercase;letter-spacing:.08em;margin:.2rem 0 .7rem}
#fightRadar{width:100%;height:240px;background:linear-gradient(135deg,#fff7d1,#fff);border:3px solid var(--ink)}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:.75rem}
.stat{border:3px solid var(--ink);padding:.55rem;background:#fff;box-shadow:4px 4px 0 var(--ink)}
.stat b{font-size:1.6rem;display:block;line-height:1;color:var(--green)}
.stat span{font-size:.72rem;text-transform:uppercase;font-weight:900;letter-spacing:.06em}
.punch-cloud{position:absolute;inset:auto 2rem 1rem auto;display:flex;gap:.5rem;font-size:2rem;filter:drop-shadow(4px 4px #000)}
.punch-cloud span{animation:floatPunch 2.2s ease-in-out infinite}
.punch-cloud span:nth-child(2){animation-delay:.35s}
.punch-cloud span:nth-child(3){animation-delay:.7s}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1.4rem;align-items:start;padding:1.5rem 0 2.4rem}
.full-layout{padding:1.5rem 0 2.4rem}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin:1.2rem 0 1rem}
.section-head h2,.section-head h1{font-size:clamp(2rem,4vw,3.7rem);letter-spacing:-.07em;line-height:.9;margin:0;text-transform:uppercase}
.section-rule{height:6px;background:var(--ink);width:min(340px,60%);margin-top:.45rem}
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.card-grid.dense{grid-template-columns:repeat(4,minmax(0,1fr))}
.card,.rail-card,.article-shell,.page-card,.feature-card{border:4px solid var(--ink);background:var(--paper);box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease}
.card{overflow:hidden}
.card-image{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--stone);border-bottom:4px solid var(--ink)}
.card-image img{width:100%;height:100%;object-fit:cover;filter:saturate(1.06) contrast(1.05)}
.card-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.15));pointer-events:none}
.card-body{padding:1rem}
.card h3{font-size:1.25rem;line-height:1.05;margin:.5rem 0 .45rem;letter-spacing:-.035em}
.card p{color:var(--muted);font-weight:700;margin:.25rem 0}
.meta{display:flex;flex-wrap:wrap;gap:.35rem .55rem;align-items:center;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:1000}
.meta span:first-child{background:var(--gold);border:2px solid var(--ink);padding:.15rem .35rem;box-shadow:3px 3px 0 var(--ink)}
.feature-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);overflow:hidden;margin-bottom:1.2rem;background:#fff}
.feature-card .card-image{aspect-ratio:auto;min-height:420px;border-bottom:0;border-right:4px solid var(--ink)}
.feature-copy{padding:1.3rem}
.feature-copy h2{font-size:clamp(2.1rem,4vw,4.5rem);line-height:.88;margin:.75rem 0;letter-spacing:-.08em;text-transform:uppercase}
.feature-copy p{font-size:1.05rem;font-weight:800;color:#433f35}
.feature-mini{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;margin-top:1rem}
.right-rail{position:sticky;top:86px;display:grid;gap:1.1rem}
.rail-card{padding:1rem;background:#fff}
.rail-card h2{margin:.15rem 0 .75rem;text-transform:uppercase;letter-spacing:.08em;font-size:1rem}
.cat-list,.mini-list{display:grid;gap:.55rem}
.cat-row{display:flex;align-items:center;justify-content:space-between;border:3px solid var(--ink);padding:.6rem;background:var(--paper);font-weight:1000;box-shadow:4px 4px 0 var(--ink)}
.cat-row b{background:var(--green);color:#fff;border:2px solid var(--ink);padding:.05rem .35rem}
.mini-link{display:block;border-bottom:3px solid var(--ink);padding:.65rem 0;font-weight:1000;line-height:1.1}
.mini-link span{display:block;color:var(--green);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.3rem}
.blog-list{display:grid;gap:.95rem}
.list-card{display:grid;grid-template-columns:260px 1fr;border:4px solid var(--ink);background:#fff;box-shadow:var(--shadow);overflow:hidden}
.list-card .card-image{height:100%;min-height:180px;border-bottom:0;border-right:4px solid var(--ink)}
.list-card .card-body{padding:1rem 1.1rem}
.article-shell{background:#fff;overflow:hidden}
.article-hero-img{aspect-ratio:16/8;overflow:hidden;border-bottom:4px solid var(--ink);background:var(--stone)}
.article-hero-img img{width:100%;height:100%;object-fit:cover}
.article-head{padding:1.2rem clamp(1rem,4vw,2.4rem);background:var(--paper)}
.article-head h1{font-size:clamp(2.4rem,6vw,5.7rem);line-height:.86;letter-spacing:-.08em;text-transform:uppercase;margin:.7rem 0}
.article-summary{font-size:1.15rem;font-weight:800;color:#403c32;max-width:850px}
.article-body{padding:clamp(1rem,4vw,2.4rem);font-size:1.08rem}
.article-body p{margin:0 0 1.05rem;font-weight:650;color:#222}
.article-body h2{margin:1.8rem 0 .75rem;font-size:2rem;line-height:.95;letter-spacing:-.05em;text-transform:uppercase;border-left:12px solid var(--green);padding-left:.6rem}
.article-body ul{font-weight:750}
.takeaways{border:4px solid var(--ink);box-shadow:var(--shadow);background:var(--paper-2);padding:1rem;margin:0 0 1.3rem}
.takeaways h2{margin:.1rem 0 .6rem;border:0;padding:0;font-size:1.3rem}
.inline-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;margin:1.5rem 0}
.inline-gallery figure{margin:0;border:4px solid var(--ink);box-shadow:var(--shadow);background:var(--paper)}
.inline-gallery img{width:100%;aspect-ratio:16/10;object-fit:cover;border-bottom:4px solid var(--ink)}
.inline-gallery figcaption{padding:.55rem;font-weight:900;text-transform:uppercase;font-size:.75rem;letter-spacing:.06em}
.breadcrumbs{font-size:.78rem;text-transform:uppercase;font-weight:900;letter-spacing:.06em;margin-bottom:.8rem;color:var(--muted)}
.breadcrumbs a{text-decoration:underline;text-underline-offset:3px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.page-card{padding:1.2rem;background:#fff}
.keyword-ribbon{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.keyword-ribbon span{border:3px solid var(--ink);background:#fff;padding:.45rem .6rem;font-weight:1000;text-transform:uppercase;box-shadow:4px 4px 0 var(--ink);font-size:.8rem}
.footer{background:var(--ink);color:#fff;margin-top:2rem;border-top:4px solid var(--ink)}
.footer-grid{display:grid;grid-template-columns:1fr .65fr 1fr;gap:1.5rem;padding:2rem 0}
.footer p{color:#f7eecf;font-weight:700}
.brand-footer .brand-text small{color:#f7eecf}
.footer-links{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;align-content:start}
.footer-links a{border:2px solid #fff;padding:.45rem;background:rgba(255,255,255,.08);font-weight:900;text-transform:uppercase}
.footer-bottom{display:flex;justify-content:space-between;gap:1rem;border-top:2px solid rgba(255,255,255,.3);padding:1rem 0;color:#f7eecf;font-size:.85rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.footer .ad{border-color:#fff;box-shadow:6px 6px 0 #fff}
.filtered-out{display:none!important}
.no-results{display:none;border:4px solid var(--ink);box-shadow:var(--shadow);background:var(--gold);padding:1rem;font-weight:1000;text-transform:uppercase}
@keyframes pulse{50%{transform:scale(1.5);opacity:.55}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-32%)}}
@keyframes floatPunch{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-12px) rotate(8deg)}}
@media (max-width: 1020px){
  .hero-grid,.layout{grid-template-columns:1fr}
  .right-rail{position:relative;top:0;grid-template-columns:repeat(2,1fr)}
  .card-grid,.card-grid.dense{grid-template-columns:repeat(2,1fr)}
  .feature-card{grid-template-columns:1fr}
  .feature-card .card-image{border-right:0;border-bottom:4px solid var(--ink);min-height:320px}
  .footer-grid{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .container{width:min(100% - 20px,1220px)}
  .hide-sm,.searchbox{display:none}
  .masthead{align-items:flex-start}
  .brand-mark{width:48px;height:48px}
  .hero-grid{min-height:620px;padding:2rem 0}
  .stats-card{align-self:start}
  .stat-grid{grid-template-columns:1fr}
  .card-grid,.card-grid.dense,.feature-mini,.right-rail,.related-grid,.inline-gallery{grid-template-columns:1fr}
  .list-card{grid-template-columns:1fr}
  .list-card .card-image{border-right:0;border-bottom:4px solid var(--ink)}
  .article-hero-img{aspect-ratio:16/11}
  .footer-bottom{flex-direction:column}
}
