/* Kelv Knows — creator hub styles */
@font-face{font-family:"Anton";src:url(../assets/fonts/anton.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Montserrat";src:url(../assets/fonts/montserrat.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --ink:#03060f;         /* deepest band */
  --navy:#070d22;        /* main bg */
  --navy-2:#0b1533;      /* lighter band */
  --panel:#101c42;       /* cards */
  --line:rgba(120,170,255,.16);
  --blue:#1f6bff;
  --blue-2:#2a55d8;
  --cyan:#38d6ff;
  --text:#eef3ff;
  --muted:#a9b6d8;
  --display:"Anton",Impact,"Arial Narrow",sans-serif;
  --body:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --wrap:1240px;
  --pad:clamp(20px,4vw,40px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--navy);color:var(--text);font:500 16px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-999px;top:8px;background:var(--cyan);color:#001;padding:8px 14px;z-index:100}
.skip:focus{left:8px}
.muted{color:var(--muted)}

/* Type: condensed, uppercase, slanted */
.display,.title,.lane h3,.product h3,.rank h3,.feature__title{font-family:var(--display);font-weight:400;text-transform:uppercase;font-style:italic;letter-spacing:.01em;line-height:.95;margin:0}
.display{font-size:clamp(64px,10vw,150px)}
.display span{color:var(--cyan);display:block}
.display--md{font-size:clamp(44px,6vw,84px)}
.title{font-size:clamp(40px,5vw,64px)}
.title--center{text-align:center;margin-bottom:clamp(32px,4vw,56px)}
.kicker{margin:0 0 14px;font-weight:800;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan)}

/* Slanted button */
.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font:800 14px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:#02101c;background:var(--cyan);padding:15px 30px;clip-path:polygon(9% 0,100% 0,91% 100%,0 100%);transition:background .2s,transform .2s;white-space:nowrap}
.btn:hover{background:#fff;transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid #fff;outline-offset:4px}

/* NAV (overlays hero) */
.nav{position:absolute;inset:0 0 auto 0;z-index:20}
.nav__inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px var(--pad);max-width:1440px;margin:0 auto}
.nav__social{display:flex;gap:16px}
.nav__social a{opacity:.85;display:grid;place-items:center;width:34px;height:34px}
.nav__social a:hover{opacity:1;color:var(--cyan)}
.nav__logo{display:block;line-height:0}
.nav__logo img{width:28px;height:28px;border-radius:50%;box-shadow:0 0 14px rgba(56,214,255,.35)}
.nav__links{justify-self:end;display:flex;gap:28px}
.nav__links a{text-decoration:none;font-weight:700;font-size:14px;opacity:.85}
.nav__links a:hover{opacity:1;color:var(--cyan)}

/* HERO: see "HERO intro video" block at the end of this file */

/* Bands */
.band{padding:clamp(64px,8vw,110px) 0}
.band--light{background:var(--navy-2)}
.band--dark{background:var(--ink)}
.band--merch{background:linear-gradient(180deg,var(--navy),var(--navy-2))}
.head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:clamp(28px,4vw,48px);flex-wrap:wrap}

/* Latest video */
.feature{display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.feature__video video{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;background:#000;border-radius:18px;box-shadow:0 0 0 1px var(--line),0 25px 70px rgba(31,107,255,.35)}
.feature__title{font-size:clamp(36px,4.2vw,56px);margin-bottom:18px}
.feature__copy p{font-size:18px;max-width:52ch;margin:0 0 14px}
.feature__copy .kicker{font-size:13px}

/* Lanes */
.lanes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.lane{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;padding-bottom:24px;transition:transform .25s,border-color .25s}
.lane:hover{transform:translateY(-4px);border-color:rgba(56,214,255,.5)}
.lane__art{position:relative;aspect-ratio:16/9;display:grid;place-items:center;font-size:64px;margin-bottom:20px}
.lane__art[data-tone="1"]{background:radial-gradient(circle at 30% 30%,#2a7bff,#0a1a4a)}
.lane__art[data-tone="2"]{background:radial-gradient(circle at 70% 30%,#5b4bff,#0d1240)}
.lane__art[data-tone="3"]{background:radial-gradient(circle at 30% 70%,#00a6d6,#062544)}
.lane__art[data-tone="4"]{background:radial-gradient(circle at 70% 70%,#2b5cff,#151a46)}
.lane__art[data-tone="5"]{background:radial-gradient(circle at 50% 30%,#1fb5ff,#0a1f4f)}
.lane__art[data-tone="6"]{background:radial-gradient(circle at 40% 60%,#3d6dff,#0a1236)}
.lane__art span{filter:drop-shadow(0 8px 20px rgba(0,0,0,.5))}
.lane h3{font-size:30px;padding:0 24px;margin-bottom:8px}
.lane p{margin:0;padding:0 24px;color:var(--muted)}
.tag{position:absolute;top:14px;right:14px;font:800 11px/1 var(--body);font-style:normal;letter-spacing:.14em;text-transform:uppercase;background:var(--cyan);color:#021;padding:7px 10px;border-radius:999px}

/* Rankings */
.ranks{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rank{position:relative;background:var(--ink);border:1px solid var(--line);border-radius:16px;padding:28px}
.rank__num{font:400 italic 72px/1 var(--display);color:transparent;-webkit-text-stroke:2px var(--cyan);margin-bottom:12px}
.rank__cat{margin:0 0 6px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.rank h3{font-size:30px;margin-bottom:12px}
.rank__verdict{color:var(--muted);font-style:italic;margin:0 0 18px}
.meter{height:6px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:18px}
.meter span{display:block;height:100%;width:var(--w,50%);background:linear-gradient(90deg,var(--blue),var(--cyan))}
.rank__link{font-weight:800;font-size:14px;text-decoration:none;color:var(--cyan)}
.rank__link:hover{text-decoration:underline}
.rank.rank--real{padding:0;overflow:hidden;display:flex;flex-direction:column}
.rank__img{aspect-ratio:16/10;overflow:hidden;background:#000;border-bottom:1px solid var(--line)}
.rank__img img{display:block;width:100%;height:100%;object-fit:contain}
.rank__body{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px}
.rank--real h3{font-size:30px;margin-bottom:14px}
.rank__picks{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:6px}
.rank__picks li{display:flex;gap:12px;align-items:baseline;padding:9px 12px;border-radius:10px;background:rgba(255,255,255,.04);font-weight:600}
.rank__picks li span{flex:0 0 auto;min-width:40px;font:400 italic 20px/1 var(--display);color:var(--cyan)}
.rank__picks li.last span{color:#ff8a8a}
.rank--real .rank__link{margin-top:auto}

/* Merch */
.merch__sub{color:var(--muted);font-size:17px;max-width:46ch;margin:14px 0 0}
.products{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.product{background:#eef3ff;color:#0a1330;border-radius:12px;padding:8px 8px 16px;text-align:center;transition:transform .25s}
.product:hover{transform:translateY(-4px)}
.product__img{position:relative;aspect-ratio:4/5;border-radius:8px;overflow:hidden;margin-bottom:12px;background:#050a1c}
.product__img img{width:100%;height:100%;object-fit:cover}
.product h3{font-size:18px;margin-bottom:4px}
.product__price{margin:0;font-size:13px;font-weight:700;color:#4a5a86}
.product--teaser{background:#101c42;color:var(--text);border:1px solid rgba(56,214,255,.4)}
.product--teaser .product__price{color:var(--cyan)}

/* Follow CTA */
.follow{position:relative;overflow:hidden;text-align:center;padding:clamp(80px,10vw,140px) 0;background:var(--ink)}
.follow__bg{position:absolute;inset:0;background:url(../assets/banner.webp) center/cover no-repeat;opacity:.45}
.follow__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,6,15,.6),rgba(3,6,15,.85))}
.follow__inner{position:relative}
.follow p{font-size:18px;color:#d4defa;margin:18px 0 30px}

/* Footer */
.footer{background:var(--navy);border-top:1px solid var(--line);padding:48px 0 40px}
.footer__inner{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.footer__inner>img{border-radius:50%}
.footer__social a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line)}
.footer__social a:hover{color:var(--cyan);border-color:var(--cyan)}
.footer__links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px}
.footer__links a{text-decoration:none;font-size:14px;font-weight:600;color:var(--muted)}
.footer__links a:hover{color:var(--text)}
.footer__copy{margin:0;font-size:13px;color:var(--muted)}

/* Reveal on scroll (only when JS runs) */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.is-in{opacity:1;transform:none}

/* Tablet */
@media (max-width:1024px){
  .lanes,.ranks{grid-template-columns:repeat(2,1fr)}
  .products{grid-template-columns:repeat(3,1fr)}
}
/* Mobile */
@media (max-width:760px){
  .feature{grid-template-columns:1fr}
  .feature__video{max-width:340px;margin:0 auto;width:100%}
  .lanes,.ranks{grid-template-columns:1fr}
  .products{grid-template-columns:repeat(2,1fr);gap:12px}
  .merch__sub{margin-inline:auto}
  .head{justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
}

/* Newsletter */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.newsletter{position:relative;overflow:hidden;background:radial-gradient(50% 80% at 25% 60%,rgba(31,107,255,.45),transparent 70%),linear-gradient(135deg,#0a1a4f,#03060f 75%);border-block:1px solid var(--line)}
.newsletter__inner{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(24px,5vw,72px);align-items:center}
.newsletter__art img{width:min(360px,100%);margin:0 auto -110px;filter:drop-shadow(0 30px 60px rgba(0,0,0,.6))}
.newsletter .title span{color:var(--cyan)}
.newsletter__copy>p:not(.kicker):not(.newsletter__fine){font-size:19px;color:#d4defa;max-width:44ch;margin:20px 0 28px}
.nl-form{display:flex;flex-wrap:wrap;gap:12px;max-width:560px}
.nl-form input{flex:1 1 260px;min-width:0;font:600 16px var(--body);color:var(--text);background:rgba(3,6,15,.7);border:1px solid rgba(120,170,255,.35);border-radius:10px;padding:15px 18px}
.nl-form input::placeholder{color:#7d8bb3}
.nl-form input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(56,214,255,.25)}
.nl-form .btn{border:0;cursor:pointer;padding:16px 34px}
.nl-msg{flex-basis:100%;margin:0;min-height:0;font-size:14px;font-weight:700;color:var(--cyan)}
.nl-msg.is-error{color:#ff8a8a}
.newsletter__fine{font-size:13px;color:var(--muted);margin:2px 0 0}
.btn--sm{padding:12px 22px;font-size:12px}
.nl-form--compact{flex-direction:column;align-items:center;gap:10px;width:100%;max-width:440px;margin:6px 0}
.footer__nl-label{font:400 italic 22px/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.nl-row{display:flex;gap:10px;width:100%}
.nl-form--compact input{padding:12px 14px;font-size:15px;flex:1}
.nl-form--compact .nl-msg{text-align:center}
@media (max-width:760px){
  .newsletter__inner{grid-template-columns:1fr;text-align:center}
  .newsletter__art{order:2}
  .newsletter__art img{width:min(240px,64vw);margin-bottom:calc(-1 * clamp(64px,8vw,110px))}
  .newsletter__copy>p:not(.kicker){margin-inline:auto}
  .nl-form{margin:0 auto;justify-content:center}
  .nl-form .btn{flex:1 1 100%}
  .nl-form--compact .btn{flex:0 0 auto}
}

/* Mobile refinements */
.newsletter__fine{margin-top:12px!important}
@media (max-width:760px){
  .feature__video{max-width:280px}
  .lanes{grid-template-columns:repeat(2,1fr);gap:12px}
  .lane{padding-bottom:16px;border-radius:12px}
  .lane__art{aspect-ratio:4/3;font-size:40px;margin-bottom:12px}
  .lane h3{font-size:20px;padding:0 12px;margin-bottom:6px}
  .lane p{font-size:13px;line-height:1.45;padding:0 12px}
  .tag{top:8px;right:8px;font-size:9px;padding:5px 7px}
  .newsletter__art img{width:min(190px,50vw)}
  .rank{padding:22px}
  .rank__num{font-size:56px}
}

/* Social icon rows */
.social{display:flex;align-items:center;gap:6px}
.social a{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:var(--text);opacity:.85;transition:color .2s,opacity .2s,background .2s}
.social a:hover,.social a:focus-visible{opacity:1;color:var(--cyan);background:rgba(56,214,255,.1)}
.social svg{width:17px;height:17px}
.nav__social{gap:2px}
.follow__social{justify-content:center;margin-top:26px;gap:10px}
.follow__social a{width:44px;height:44px;border:1px solid var(--line);background:rgba(3,6,15,.5)}
.follow__social svg{width:20px;height:20px}
.footer__social{gap:8px}
.footer__social a{border:1px solid var(--line)}
.footer__inner>img{width:34px;height:34px}
.footer__contact{margin:0;font-size:14px;color:var(--muted)}
.footer__contact a{color:var(--cyan);font-weight:700;text-decoration:none}
.footer__contact a:hover{text-decoration:underline}
@media (max-width:760px){
}

/* Nav left group + menu button */
.nav__left{display:flex;align-items:center;gap:10px}
.nav__toggle{display:grid;gap:5px;place-content:center;width:40px;height:40px;margin-left:-8px;background:none;border:0;border-radius:50%;cursor:pointer;color:#fff}
.nav__toggle span{display:block;width:20px;height:2px;border-radius:2px;background:currentColor}
.nav__toggle:hover{color:var(--cyan);background:rgba(56,214,255,.1)}
.nav__toggle:focus-visible,.drawer__close:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.nav__links{grid-column:3}
.nav__x{display:none}
@media (max-width:760px){
  .nav__inner{grid-template-columns:44px 1fr 44px;padding:14px var(--pad)}
  .nav__social,.nav__links{display:none}
  .nav__logo{justify-self:center}
  .nav__x{display:grid;place-items:center;width:40px;height:40px;justify-self:end;opacity:.9}
  .nav__x svg{width:17px;height:17px}
}

/* Drawer */
body.drawer-open{overflow:hidden}
.drawer-overlay{position:fixed;inset:0;z-index:60;background:rgba(2,4,12,.6);backdrop-filter:blur(3px);opacity:0;transition:opacity .3s ease}
.drawer{position:fixed;top:0;left:0;bottom:0;z-index:61;width:min(380px,84vw);display:flex;flex-direction:column;gap:26px;padding:22px 26px 28px;overflow-y:auto;background:linear-gradient(180deg,#0b1533,#050a1c);border-right:1px solid var(--line);box-shadow:20px 0 60px rgba(0,0,0,.5);transform:translateX(-102%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.drawer.is-open{transform:none}
.drawer-overlay.is-open{opacity:1}
.drawer[hidden],.drawer-overlay[hidden]{display:none}
.drawer__top{display:flex;align-items:center;gap:14px}
.drawer__close{display:grid;place-items:center;width:40px;height:40px;margin-left:-8px;background:none;border:0;border-radius:50%;color:var(--text);cursor:pointer}
.drawer__close:hover{color:var(--cyan);background:rgba(56,214,255,.1)}
.drawer__logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:400 italic 22px/1 var(--display);letter-spacing:.02em}
.drawer__logo img{border-radius:50%}
.drawer__logo b{font-weight:400;color:var(--cyan)}
.drawer__links{display:flex;flex-direction:column}
.drawer__links a{padding:11px 0;text-decoration:none;font-weight:700;font-size:18px;border-bottom:1px solid rgba(120,170,255,.08);transition:color .2s,padding .2s}
.drawer__links a:hover,.drawer__links a:focus-visible{color:var(--cyan);padding-left:6px;outline:none}
.drawer__social{gap:4px;margin-left:-8px}
.drawer__nl{margin-top:auto;padding:18px;border:1px solid var(--line);border-radius:14px;background:rgba(3,6,15,.5)}
.drawer__nl-title{margin:0;font:400 italic 22px/1.05 var(--display);text-transform:uppercase}
.drawer__nl-sub{margin:6px 0 12px;font-size:13px;color:var(--muted)}
.nl-form--drawer .nl-row{display:flex;gap:8px}
.nl-form--drawer input{flex:1 1 auto;padding:11px 12px;font-size:14px}
.nl-form--drawer .btn{flex:0 0 auto;padding:11px 18px}
.nl-form--drawer .nl-msg{font-size:12px;margin-top:6px}
@media (prefers-reduced-motion:reduce){.drawer,.drawer-overlay{transition:none}}

/* Rank this box */
.rank-this{margin-top:clamp(28px,4vw,44px);padding:22px 24px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,rgba(31,107,255,.18),rgba(3,6,15,.6));display:grid;gap:12px}
.rank-this__label{font:400 italic 26px/1.05 var(--display);text-transform:uppercase}
.rank-this__row{display:flex;gap:12px;flex-wrap:wrap}
.rank-this input{flex:1 1 280px;min-width:0;font:600 16px var(--body);color:var(--text);background:rgba(3,6,15,.7);border:1px solid rgba(120,170,255,.35);border-radius:10px;padding:14px 16px}
.rank-this input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(56,214,255,.25)}
.rank-this .btn{border:0;cursor:pointer}
.rank-this__msg{margin:0;min-height:1.2em;font-weight:800;color:var(--cyan)}
.rank-this__msg.is-error{color:#ff8a8a}
@media (max-width:760px){.rank-this{padding:18px}.rank-this .btn{flex:1 1 100%}.rank-this__label{font-size:22px}}

/* Sub-pages */
.page-hero{position:relative;overflow:hidden;padding:clamp(120px,14vw,170px) 0 clamp(48px,6vw,80px);background:radial-gradient(55% 80% at 75% 40%,rgba(31,107,255,.45),transparent 70%),linear-gradient(180deg,#050b20,#03060f)}
.page-hero__inner{display:grid;grid-template-columns:1.3fr .7fr;gap:30px;align-items:center}
.page-hero .display{font-size:clamp(54px,8vw,112px)}
.page-hero p.lead{font-size:clamp(17px,1.6vw,20px);color:#d4defa;max-width:52ch;margin:20px 0 0}
.page-hero__art img{width:min(300px,100%);margin:0 auto;filter:drop-shadow(0 25px 50px rgba(0,0,0,.6))}
.banner-note{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:26px;padding:12px 18px;border:1px solid rgba(56,214,255,.45);border-radius:999px;background:rgba(56,214,255,.08);font-weight:800;font-size:14px;width:fit-content;max-width:100%}
.banner-note .tag{position:static}
@media (max-width:760px){.page-hero__inner{grid-template-columns:1fr;text-align:center}.page-hero__art{display:none}.page-hero p.lead{margin-inline:auto}.banner-note{margin-inline:auto;border-radius:16px;justify-content:center}}

/* Trivia */
.quiz{max-width:760px;margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:clamp(22px,4vw,40px);box-shadow:0 25px 70px rgba(0,0,0,.35)}
.quiz__meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.quiz__bar{height:6px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:24px}
.quiz__bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width .35s}
.quiz__q{font:400 italic clamp(28px,3.6vw,40px)/1.05 var(--display);text-transform:uppercase;margin:0 0 22px}
.quiz__opts{display:grid;gap:12px}
.quiz__opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font:700 16px/1.35 var(--body);color:var(--text);background:rgba(3,6,15,.55);border:1px solid rgba(120,170,255,.25);border-radius:12px;padding:15px 18px;cursor:pointer;transition:border-color .2s,background .2s,transform .15s}
.quiz__opt:hover:not(:disabled){border-color:var(--cyan);transform:translateX(3px)}
.quiz__opt:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.quiz__opt b{display:grid;place-items:center;flex:0 0 32px;height:32px;border-radius:50%;background:rgba(56,214,255,.12);color:var(--cyan);font-size:14px}
.quiz__opt.is-right{border-color:#3ee08f;background:rgba(62,224,143,.14)}
.quiz__opt.is-right b{background:#3ee08f;color:#022}
.quiz__opt.is-wrong{border-color:#ff6b6b;background:rgba(255,107,107,.12)}
.quiz__opt.is-wrong b{background:#ff6b6b;color:#200}
.quiz__opt:disabled{cursor:default}
.quiz__feedback{min-height:1.5em;margin:18px 0 0;font-weight:800}
.quiz__feedback.ok{color:#3ee08f}.quiz__feedback.no{color:#ff8a8a}
.quiz__note{margin:6px 0 0;color:var(--muted);font-size:14px}
.quiz__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.quiz__actions .btn{border:0;cursor:pointer}
.btn--ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 2px rgba(120,170,255,.4)}
.btn--ghost:hover{background:rgba(56,214,255,.12);color:var(--text)}
.quiz__result{text-align:center}
.quiz__score{font:400 italic clamp(72px,12vw,130px)/1 var(--display);color:var(--cyan);margin:6px 0}
.quiz__result .quiz__actions{justify-content:center}
.quiz__sample{max-width:760px;margin:16px auto 0;font-size:13px;color:var(--muted);text-align:center}

/* Rankings archive */
.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:28px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:800 13px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--text);background:rgba(3,6,15,.6);border:1px solid rgba(120,170,255,.3);border-radius:999px;padding:10px 16px;cursor:pointer}
.chip:hover{border-color:var(--cyan)}
.chip[aria-pressed="true"]{background:var(--cyan);color:#021;border-color:var(--cyan)}
.search{position:relative;flex:0 1 320px}
.search input{width:100%;font:600 15px var(--body);color:var(--text);background:rgba(3,6,15,.7);border:1px solid rgba(120,170,255,.35);border-radius:999px;padding:12px 18px 12px 42px}
.search input:focus{outline:none;border-color:var(--cyan)}
.search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted)}
.archive{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;align-items:stretch}
.acard{display:flex;flex-direction:column;background:var(--ink);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.acard__img{aspect-ratio:16/10;overflow:hidden;background:#000;border-bottom:1px solid var(--line)}
.acard__img img{display:block;width:100%;height:100%;object-fit:contain}
.acard__body{display:flex;flex-direction:column;flex:1;padding:22px 22px 24px}
.acard__top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px}
.acard__tag{font:800 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#021;background:var(--cyan);border-radius:999px;padding:6px 10px}
.acard__date{font-size:13px;color:var(--muted)}
.acard h3{font:400 italic 30px/1 var(--display);text-transform:uppercase;margin:0 0 16px}
.acard__list{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:6px}
.acard__list li{display:flex;gap:12px;align-items:baseline;padding:9px 12px;border-radius:10px;background:rgba(255,255,255,.04)}
.acard__n{flex:0 0 auto;min-width:40px;font:400 italic 20px/1 var(--display);color:var(--cyan)}
.acard__t{font-weight:600}
.acard__list li.first{background:rgba(56,214,255,.1)}
.acard__list li.last .acard__n{color:#ff8a8a}
.acard__note{margin:-4px 0 14px;font-size:14px;color:var(--muted)}
.acard__take{margin:0 0 18px;font-style:italic;color:var(--muted)}
.acard__link{margin-top:auto;font-weight:800;font-size:14px;color:var(--cyan);text-decoration:none}
.acard__link:hover{text-decoration:underline}
.filters[hidden],.chips[hidden]{display:none}
.archive__empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px 0}
.archive__count{font-size:13px;color:var(--muted);margin:-12px 0 18px}
@media (max-width:760px){.archive{grid-template-columns:1fr;gap:20px}.search{flex:1 1 100%}.acard__body{padding:18px 18px 20px}.acard h3{font-size:26px}}

/* Work with me */
.pitch{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:start}
.pitch p{font-size:18px;color:#d4defa;margin:0 0 16px}
.pitch ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.pitch li{padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:rgba(3,6,15,.45);font-weight:700}
.pitch li span{color:var(--cyan);margin-right:8px}
.deals{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.deal{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px}
.deal__icon{font-size:34px;margin-bottom:12px}
.deal h3{font:400 italic 26px/1 var(--display);text-transform:uppercase;margin:0 0 10px}
.deal p{margin:0;color:var(--muted)}
.stats-placeholder{margin-top:28px;padding:18px 20px;border:1px dashed rgba(120,170,255,.4);border-radius:14px;color:var(--muted);font-size:14px}
.cta-box{text-align:center;padding:clamp(36px,6vw,64px) 24px;border-radius:20px;border:1px solid rgba(56,214,255,.35);background:radial-gradient(60% 100% at 50% 0%,rgba(31,107,255,.35),transparent 70%),var(--ink)}
.cta-box p{color:#d4defa;font-size:18px;margin:16px auto 26px;max-width:46ch}
.cta-box .email{display:block;margin-top:16px;color:var(--muted);font-size:14px}
.cta-box .email a{color:var(--cyan);font-weight:700}
@media (max-width:1024px){.deals{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.pitch{grid-template-columns:1fr}.deals{grid-template-columns:1fr}}
.nav__links a[aria-current],.drawer__links a[aria-current]{color:var(--cyan);opacity:1}

/* Video cards */
.vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.vgrid--home{grid-template-columns:repeat(3,1fr)}
.vcard{display:flex;flex-direction:column;background:var(--ink);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .25s,border-color .25s}
.vcard:hover{transform:translateY(-4px);border-color:rgba(56,214,255,.5)}
.vcard__thumb{position:relative;display:block;aspect-ratio:4/5;background:#02050d;overflow:hidden}
.vcard__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.vcard:hover .vcard__thumb img{transform:scale(1.04)}
.vcard__brand{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;background:radial-gradient(circle at 50% 40%,#1f4fd0,#050a1c 75%);font:400 italic 26px/1 var(--display);text-transform:uppercase}
.vcard__brand img{width:96px;height:96px;border-radius:50%;object-fit:cover}
.vcard__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:rgba(56,214,255,.9);color:#021;box-shadow:0 0 30px rgba(56,214,255,.5);transition:transform .2s}
.vcard__thumb:hover .vcard__play{transform:translate(-50%,-50%) scale(1.08)}
.vcard__dur{position:absolute;right:10px;bottom:10px;font:800 12px/1 var(--body);background:rgba(0,0,0,.75);padding:6px 8px;border-radius:6px}
.vcard__body{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;flex:1}
.vcard__date{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.vcard__title{margin:0;font:700 16px/1.35 var(--body);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vcard__actions{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:6px}
.vcard__watch{font-weight:800;font-size:14px;color:var(--cyan);text-decoration:none}
.vcard__watch:hover{text-decoration:underline}
.vcard__here{font:700 13px var(--body);color:var(--muted);background:none;border:1px solid var(--line);border-radius:999px;padding:7px 12px;cursor:pointer}
.vcard__here:hover{color:var(--text);border-color:var(--cyan)}
.vcard.is-embed{background:transparent;border:0;grid-row:span 2}
.vcard__embed{min-height:300px}
.vcard__embed .twitter-tweet{margin:0!important}
.intro-feature{margin-bottom:clamp(40px,6vw,64px)}
@media (max-width:1024px){.vgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.vgrid,.vgrid--home{grid-template-columns:repeat(2,1fr);gap:12px}.vcard__body{padding:12px}.vcard__title{font-size:14px}.vcard__actions{flex-direction:column;align-items:flex-start}.vcard__play{width:46px;height:46px}}
@media (max-width:760px){
  .vgrid--home{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);gap:12px;margin:0 calc(-1 * var(--pad));padding:0 var(--pad) 8px;scrollbar-width:none}
  .vgrid--home::-webkit-scrollbar{display:none}
  .vgrid--home .vcard{flex:0 0 68%;scroll-snap-align:start}
}

/* ---- One-click follow buttons (home) ---- */
.follow-btns{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px}
.follow-btn--x{display:flex;align-items:center;justify-content:center}
.follow-btn--x a.twitter-follow-button{display:none}            /* raw anchor hidden; styled fallback shows */
.follow-btn--x.is-widget .fbtn--x{display:none}                 /* official widget rendered: hide fallback */
.follow-btn--x iframe{display:block}
.fbtn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:800 14px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;padding:15px 28px;clip-path:polygon(7% 0,100% 0,93% 100%,0 100%);transition:background .2s,transform .2s,color .2s;white-space:nowrap}
.fbtn svg{width:18px;height:18px;fill:currentColor;flex:none}
.fbtn:hover{transform:translateY(-2px)}
.fbtn:focus-visible{outline:3px solid #fff;outline-offset:4px}
.fbtn--x{background:var(--cyan);color:#02101c}
.fbtn--x:hover{background:#fff}
.fbtn--yt{background:var(--blue);color:#fff;padding:11px 24px;font-size:12px;box-shadow:0 0 18px rgba(56,214,255,.35)}
.fbtn--yt:hover{background:var(--cyan);color:#02101c}
@media (max-width:520px){.follow-btns{flex-direction:column;gap:12px}.fbtn--x{width:min(280px,84vw);justify-content:center}.fbtn--yt{width:auto}}

/* HERO intro video */
.hero{position:relative;overflow:hidden;background:radial-gradient(55% 70% at 70% 50%,rgba(31,107,255,.45),transparent 70%),linear-gradient(180deg,#050b20,#03060f)}
.hero__inner{max-width:1440px;margin:0 auto;min-height:min(760px,100svh);padding:96px var(--pad) 56px;display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:clamp(28px,4vw,64px)}
.hero__copy{position:relative;z-index:2}
.hero__copy .display{font-size:clamp(56px,7vw,108px)}
.hero__tag{font-size:clamp(17px,1.5vw,20px);color:#d4defa;max-width:32ch;margin:20px 0 30px}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero__ctas .btn{border:0;cursor:pointer}
.btn--ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 2px rgba(56,214,255,.6)}
.btn--ghost:hover{background:rgba(56,214,255,.15);color:#fff}
.hero__media{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:16/9;background:#000 url(../assets/video/intro-poster-wide.jpg) center/cover;box-shadow:0 0 0 1px rgba(56,214,255,.35),0 0 60px rgba(31,107,255,.45),0 30px 80px rgba(0,0,0,.6)}
.hero__video{display:block;width:100%;height:100%;object-fit:cover}
.hero__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;color:#02101c;background:var(--cyan);box-shadow:0 0 0 8px rgba(56,214,255,.25),0 10px 40px rgba(0,0,0,.5);opacity:.92;transition:transform .2s,opacity .2s,background .2s}
.hero__play svg{margin-left:4px}
.hero__media:hover .hero__play,.hero__play:focus-visible{opacity:1;background:#fff;transform:translate(-50%,-50%) scale(1.06)}
.hero__play:focus-visible{outline:3px solid #fff;outline-offset:6px}
.hero__badge{position:absolute;left:14px;bottom:14px;font:800 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;background:rgba(3,6,15,.72);color:var(--text);padding:8px 12px;border-radius:999px;border:1px solid var(--line)}
@media (max-width:1024px){.hero__inner{grid-template-columns:1fr;text-align:center;padding-top:90px;min-height:0}.hero__tag{margin-inline:auto}.hero__ctas{justify-content:center}.hero__media{max-width:860px;width:100%;margin:0 auto}}
@media (max-width:760px){.hero__inner{padding:84px var(--pad) 40px;gap:24px}.hero__media{border-radius:14px}.hero__play{width:62px;height:62px}.hero__tag{margin:14px auto 22px}}
/* Intro modal (voiced cut) */
.intro-modal{padding:0;border:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;overflow:hidden}
.intro-modal::backdrop{background:rgba(2,4,12,.9)}
.intro-modal__box{position:relative;width:100%;height:100%;display:grid;place-items:center;padding:56px 16px 24px;box-sizing:border-box}
.intro-modal video{display:block;max-width:min(1280px,100%);max-height:calc(100svh - 96px);width:auto;height:auto;border-radius:14px;background:#000;box-shadow:0 0 0 1px rgba(56,214,255,.35),0 0 80px rgba(31,107,255,.5)}
.intro-modal__close{position:absolute;top:10px;right:14px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(16,28,66,.9);color:var(--text);font-size:28px;line-height:1;cursor:pointer}
.intro-modal__close:hover,.intro-modal__close:focus-visible{background:var(--cyan);color:#02101c;outline:none}
body.modal-open{overflow:hidden}

/* Buy Me a Coffee: quiet text link (footer + drawer) */
.coffee-link{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;transition:color .2s}
.coffee-link svg{width:16px;height:16px;flex:none}
.coffee-link:hover,.coffee-link:focus-visible{color:var(--cyan)}
.coffee-link:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
.drawer__coffee{align-self:flex-start;margin-top:-14px}

/* Newsletter: popcorn Lucky pointing at the signup */
.newsletter__art img{height:auto}
@media (max-width:760px){
  .newsletter__art{order:0}
  .newsletter__art img{width:min(150px,40vw);margin:0 auto -8px;filter:drop-shadow(0 16px 30px rgba(0,0,0,.55))}
}