/* HotMicHotWings - Articles
   Tokens, base, buttons, header, mobile menu and footer copied from the homepage's own <style>,
   plus article typography. Used by /articles/index.html and every article page. */
:root{
  --yellow:#FFC01E; --orange:#FF6A13; --red:#E63329;
  --amber:#B8470B; --red-deep:#B41E17; --ember:#FF8A3D;
  --flame:linear-gradient(90deg,#FFC01E,#FF6A13 50%,#E63329);
  --flame-v:linear-gradient(180deg,#FFC01E,#FF6A13 50%,#E63329);
  --ink:#1A1A1A; --ink-2:#5F5B54;
  --white:#FFFFFF; --cream:#FFF7EC; --cream-2:#FFF3E0;
  --line:#F0E4D2; --line-2:#EBDBC4;
  --charcoal:#171310; --charcoal-2:#221B15;
  --shadow-sm:0 2px 8px rgba(26,26,26,.06);
  --shadow-md:0 14px 40px -18px rgba(180,30,23,.30), 0 4px 14px rgba(26,26,26,.06);
  --shadow-lg:0 34px 70px -30px rgba(180,30,23,.38), 0 10px 30px rgba(26,26,26,.08);
  --r:18px; --r-lg:26px;
  --maxw:1200px;
  --ease:cubic-bezier(.16,.84,.3,1);
  --pad-x:clamp(20px,5vw,64px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:var(--red-deep); text-decoration:none}
h1,h2,h3,h4{margin:0; line-height:1.02; letter-spacing:-.01em}
p{margin:0 0 1em}
ul{margin:0; padding:0; list-style:none}
button{font-family:inherit; cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x)}
.eyebrow{
  font-family:"Bangers",system-ui,sans-serif; letter-spacing:.06em;
  color:var(--amber); font-size:clamp(15px,2.2vw,20px);
  display:inline-flex; align-items:center; gap:.5em; margin:0 0 .55em; text-transform:uppercase;
}
.eyebrow::before{content:""; width:30px; height:3px; border-radius:3px; background:var(--flame)}
.marquee{font-family:"Anton",Impact,"Arial Narrow Bold",sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:.005em; line-height:.94}
/* Defensive gradient-text: solid AA color first, upgraded only where background-clip:text is supported */
.flame-text{color:var(--red-deep)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .flame-text{background:var(--flame); -webkit-background-clip:text; background-clip:text; color:transparent}
}
.sec{padding:clamp(64px,9vw,120px) 0; position:relative}
.sec-head{max-width:720px}
.sec-head h2{font-size:clamp(34px,6vw,68px); margin-bottom:.3em}
.lead{font-size:clamp(17px,2.2vw,20px); color:var(--ink-2)}

.btn{
  --glow:rgba(255,106,19,.45);
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.55em; font-weight:700; font-size:16px; line-height:1;
  padding:16px 26px; min-height:52px; border:0; border-radius:999px;
  color:#fff; background:var(--flame); background-size:140% 140%;
  box-shadow:0 10px 24px -8px var(--glow), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-position .5s var(--ease);
  overflow:hidden; text-align:center; isolation:isolate;
}
.btn:hover,.btn:focus-visible{transform:translateY(-3px); box-shadow:0 18px 34px -10px var(--glow), inset 0 1px 0 rgba(255,255,255,.4); background-position:100% 0}
.btn:active{transform:translateY(-1px)}
.btn--ghost{background:#fff; color:var(--red-deep); box-shadow:inset 0 0 0 2px var(--line-2), var(--shadow-sm)}
.btn--ghost:hover,.btn--ghost:focus-visible{box-shadow:inset 0 0 0 2px var(--orange), 0 12px 26px -12px rgba(255,106,19,.4)}
.btn--sm{padding:12px 20px; min-height:46px; font-size:15px}
.btn--lg{padding:18px 32px; min-height:58px; font-size:17px}

:focus-visible{outline:3px solid var(--red); outline-offset:3px; border-radius:6px}

.skip{position:fixed; left:12px; top:-60px; z-index:200; background:#fff; color:var(--red-deep);
  padding:12px 18px; border-radius:10px; font-weight:700; box-shadow:var(--shadow-md); transition:top .2s}
.skip:focus{top:12px}

.site-header{position:sticky; top:0; z-index:120; background:rgba(255,255,255,.82); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid transparent; transition:box-shadow .3s, border-color .3s, background .3s;}
.site-header.stuck{box-shadow:0 8px 30px -18px rgba(26,26,26,.28); border-color:var(--line); background:rgba(255,255,255,.92)}
.header-bar{display:flex; align-items:center; gap:18px; height:74px}
.brand{display:flex; align-items:center; gap:12px; margin-right:auto; text-decoration:none}
.brand img{width:46px; height:46px; object-fit:contain}
.brand-name{font-family:"Bangers",sans-serif; font-size:22px; letter-spacing:.02em; line-height:.9; color:var(--ink)}
.brand-name b{display:block; font-weight:400}
.brand-name .b2{color:var(--amber)}
.nav-desk{display:none; align-items:center; gap:4px}
.nav-desk a{color:var(--ink); font-weight:600; font-size:15px; padding:9px 12px; border-radius:10px; position:relative; transition:color .2s}
.nav-desk a::after{content:""; position:absolute; left:12px; right:12px; bottom:5px; height:2px; background:var(--flame); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease)}
.nav-desk a:hover,.nav-desk a:focus-visible{color:var(--red-deep)}
.nav-desk a:hover::after,.nav-desk a:focus-visible::after{transform:scaleX(1)}
.header-cta{display:none}
.burger{display:inline-flex; flex-direction:column; gap:5px; width:48px; height:48px; align-items:center; justify-content:center; background:#fff; border:1px solid var(--line-2); border-radius:12px; box-shadow:var(--shadow-sm)}
.burger span{width:22px; height:2.5px; background:var(--ink); border-radius:3px}
@media(min-width:960px){.nav-desk{display:flex}.header-cta{display:inline-flex}.burger{display:none}}

.mobile-menu{position:fixed; inset:0; z-index:130; display:grid; grid-template-rows:auto 1fr auto; background:linear-gradient(160deg,var(--cream) 0%, #fff 40%, var(--cream-2) 100%); transform:translateY(-100%); transition:transform .42s var(--ease); visibility:hidden;}
.mobile-menu.open{transform:translateY(0); visibility:visible}
.mm-top{display:flex; align-items:center; justify-content:space-between; padding:16px var(--pad-x); border-bottom:1px solid var(--line)}
.mm-close{width:48px; height:48px; border-radius:12px; border:1px solid var(--line-2); background:#fff; font-size:22px; color:var(--ink); line-height:1}
.mm-links{display:flex; flex-direction:column; gap:6px; padding:28px var(--pad-x); overflow:auto}
.mm-links a{font-family:"Anton",sans-serif; text-transform:uppercase; font-size:clamp(30px,9vw,44px); color:var(--ink); letter-spacing:.01em; padding:6px 0; width:max-content}
.mm-links a:focus-visible,.mm-links a:hover{color:var(--red-deep)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .mm-links a:focus-visible,.mm-links a:hover{-webkit-background-clip:text; background-clip:text; color:transparent; background-image:var(--flame)}
}
.mm-foot{padding:20px var(--pad-x) calc(20px + env(safe-area-inset-bottom)); border-top:1px solid var(--line)}
.mm-foot .btn{width:100%}
footer{position:relative; background:var(--charcoal); color:#efe4d6; padding:clamp(70px,8vw,100px) 0 32px}
.foot-flames{position:absolute; top:-1px; left:0; right:0; height:26px; display:flex; overflow:hidden; pointer-events:none}
.foot-flames i{flex:1 0 26px; height:26px; background:var(--flame); border-radius:0 0 50% 50%; transform-origin:top; animation:footflame 2.2s ease-in-out infinite}
.foot-grid{display:grid; gap:36px}
@media(min-width:820px){.foot-grid{grid-template-columns:1.3fr 1fr 1fr}}
.foot-brand{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.foot-brand img{width:52px; height:52px}
.foot-brand .fn{font-family:"Bangers",sans-serif; font-size:26px; letter-spacing:.02em; line-height:.85}
.foot-brand .fn b{display:block; font-weight:400} .foot-brand .fn .b2{color:var(--ember)}
.foot-tag{font-family:"Permanent Marker",cursive; color:var(--ember); font-size:20px; margin:2px 0 14px}
footer p{color:#cdbfae; font-size:15px; max-width:36ch}
.foot-h{font-family:"Anton",sans-serif; text-transform:uppercase; letter-spacing:.06em; font-size:15px; color:#fff; margin-bottom:14px}
.foot-links a,.foot-contact a{color:#e2d5c5; display:inline-flex; align-items:center; gap:8px; padding:5px 0; transition:color .2s}
.foot-links a:hover,.foot-contact a:hover{color:var(--ember)}
.socials{display:flex; gap:10px; margin-top:14px}
.socials a{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#eee; transition:transform .2s, background .2s}
.socials a:hover{transform:translateY(-3px); background:rgba(255,106,19,.25)}
.socials svg{width:20px; height:20px}
.foot-cta{margin-top:20px}
.foot-bottom{margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; color:#a99b8b; font-size:14px}
.foot-bottom a{color:#cdbfae}
@keyframes footflame{0%,100%{transform:scaleY(.7)}50%{transform:scaleY(1.1)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}}

/* ---------- article ---------- */
.art-hero{position:relative;padding:clamp(40px,7vw,72px) 0 28px;overflow:hidden}
.art-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(80% 70% at 85% 0%,var(--cream-2) 0%,rgba(255,243,224,0) 70%),radial-gradient(60% 60% at 0% 100%,var(--cream) 0%,rgba(255,247,236,0) 70%)}
.art-hero .wrap,.art .wrap{max-width:860px}
.crumbs{font-size:14px;color:var(--ink-2);margin:0 0 14px}
.crumbs a{color:var(--red-deep)}
.art-hero h1{font-family:"Anton",Impact,"Arial Narrow Bold",sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(38px,7.4vw,72px);line-height:.98;color:var(--ink);margin:6px 0 16px;overflow-wrap:break-word}
.byline{color:var(--ink-2);font-size:15px}
.byline b{color:var(--ink)}
.cover{max-width:1000px;margin:0 auto;padding-inline:var(--pad-x)}
.cover img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}
.art{padding:36px 0 80px}
.prose{font-size:18px;color:#2b2722;overflow-wrap:break-word}
.prose p{margin:0 0 1.1em}
.prose h2{font-family:"Anton",Impact,"Arial Narrow Bold",sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(28px,4.6vw,40px);line-height:1.02;color:var(--ink);margin:1.6em 0 .5em}
.prose h3{font-family:"Bangers",system-ui,sans-serif;font-weight:400;letter-spacing:.04em;font-size:clamp(22px,3vw,26px);color:var(--amber);margin:1.3em 0 .4em}
.prose ul,.prose ol{margin:0 0 1.2em 1.3em;padding:0}
.prose ul{list-style:disc}.prose ol{list-style:decimal}
.prose li{margin:.35em 0}
.prose li::marker{color:var(--orange)}
.prose b,.prose strong{color:var(--ink)}
.prose a{color:var(--red-deep);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px}
.prose a:hover{color:var(--red)}
.prose blockquote{margin:1.4em 0;padding:18px 22px;border-left:5px solid var(--orange);background:var(--cream);border-radius:0 var(--r) var(--r) 0;font-family:"Permanent Marker",cursive;font-size:20px;color:var(--ink)}
.prose table{width:100%;border-collapse:collapse;margin:0 0 1.3em;font-size:16px;display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--line-2);padding:10px 12px;text-align:left;vertical-align:top}
.prose th{background:var(--cream-2);color:var(--ink)}
.ask{margin:40px 0 28px;padding:28px 26px;border-radius:var(--r-lg);background:var(--charcoal);color:#fff;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.ask::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--flame)}
.ask .eyebrow{color:var(--ember)}
.ask p{font-family:"Anton",Impact,sans-serif;text-transform:uppercase;font-size:clamp(24px,4vw,34px);line-height:1.05;margin:0;color:#fff}
.art-cta{text-align:center;margin:8px 0 44px}
.more-art{border-top:1px solid var(--line);padding-top:28px}
.more-art h2{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:30px;margin-bottom:12px}
.more-art li{padding:12px 0;border-bottom:1px solid var(--line)}
.more-art a{color:var(--ink);font-weight:700}
.more-art a:hover{color:var(--red-deep)}
.tle{margin-top:26px;color:var(--ink-2);font-size:15px}
.tle a{color:var(--red-deep)}
/* index */
.alist{display:grid;gap:18px;padding:8px 0 80px}
.acard{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:22px;align-items:center;padding:16px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-md);color:var(--ink);transition:transform .25s var(--ease)}
.acard:hover{transform:translateY(-3px)}
.acard img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r)}
.acard h2{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(24px,3.2vw,32px);line-height:1.02;margin:6px 0 8px}
.acard p{color:var(--ink-2);font-size:16px;margin:0}
.acard time{font-family:"Bangers",sans-serif;letter-spacing:.06em;color:var(--amber)}
.acard .go{display:inline-block;margin-top:10px;font-weight:700;color:var(--red-deep)}
@media(max-width:640px){.acard{grid-template-columns:1fr}}