/* ============================================================
   56VICELANE — "DUSK MIX" DESIGN SYSTEM  v2.1
   Vice Frequency · Forged Oak Studios
   Neon sunset → deep purple · magenta + cyan · synthwave grid
   ============================================================ */

:root{
  --ink:      #0B0417;   /* near-black violet */
  --ink-2:    #170A2E;   /* raised surface */
  --panel:    #22103F;   /* card surface */
  --line:     rgba(255,46,154,.22);
  --coral:    #FF6B47;
  --peach:    #FF9A5A;
  --magenta:  #FF2E9A;
  --purple:   #7B2FF7;
  --cyan:     #00E5FF;
  --lav:      #C9A8F5;   /* secondary text */
  --sand:     #FDEFE4;   /* primary text */
  --horizon:  linear-gradient(90deg,var(--magenta),var(--coral) 35%,var(--peach) 55%,var(--cyan));
  --sky:      radial-gradient(120% 90% at 50% -10%, #5A1E7F 0%, #2A1245 38%, #0B0417 78%);
  --r:        16px;
  --r-sm:     10px;
  --shadow:   0 18px 50px -18px rgba(0,0,0,.7);
  --font-d:   "Fraunces", Georgia, serif;
  --font-b:   "Manrope", system-ui, sans-serif;
  --font-m:   "JetBrains Mono", ui-monospace, monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--sand);
  font-family:var(--font-b);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
img{max-width:100%;display:block}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}

/* ---------- sitewide broadcast scanline (subtle, always on) ---------- */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;
  background-image:repeating-linear-gradient(0deg,transparent 0 3px, rgba(253,239,228,.028) 3px 4px);
  mix-blend-mode:overlay;
}

/* ---------- type scale ---------- */
h1,h2,h3,.display{font-family:var(--font-d);font-weight:750;line-height:1.08;letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,7vw,4.6rem);color:var(--sand)}
/* chrome/neon gradient headline — the one bold signature move, h1 only */
@supports (background-clip:text) or (-webkit-background-clip:text){
  h1{
    background:linear-gradient(100deg,var(--magenta),var(--coral) 32%,var(--peach) 58%,var(--cyan) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 0 22px rgba(255,46,154,.28));
  }
}
h2{font-size:clamp(1.6rem,4vw,2.5rem);color:var(--sand)}
h3{font-size:clamp(1.15rem,2.6vw,1.45rem);color:var(--sand)}
.eyebrow{
  font-family:var(--font-m);font-size:.72rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);
  text-shadow:0 0 14px rgba(0,229,255,.35);
}
.lede{color:var(--lav);font-size:clamp(1rem,2.2vw,1.2rem);max-width:60ch}
.mono{font-family:var(--font-m)}

/* ---------- layout ---------- */
.wrap{width:min(1140px,92vw);margin-inline:auto}
.section{padding:clamp(56px,9vw,110px) 0}
.grid{display:grid;gap:clamp(16px,2.5vw,28px)}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

/* ---------- signature: horizon band ---------- */
.horizon{
  height:3px;border:0;background:var(--horizon);background-size:220% 100%;
  animation:hscan 7s linear infinite;border-radius:2px;
  box-shadow:0 0 16px rgba(255,46,154,.45);
}
@keyframes hscan{to{background-position:220% 0}}

/* ---------- header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(11,4,23,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;gap:20px;height:64px}
.brand{display:flex;align-items:baseline;gap:10px;font-family:var(--font-d);font-weight:800;font-size:1.25rem;color:var(--sand)}
.brand:hover{text-decoration:none}
.brand .freq{font-family:var(--font-m);font-size:.66rem;color:var(--cyan);letter-spacing:.18em}
.nav-links{display:flex;gap:6px;margin-left:auto;align-items:center}
.nav-links a{
  color:var(--lav);font-weight:600;font-size:.9rem;padding:8px 13px;border-radius:999px;
  transition:color .2s,background .2s;
}
.nav-links a:hover{color:var(--sand);background:rgba(255,46,154,.12);text-decoration:none}
.nav-links a[aria-current="page"]{color:var(--ink);background:var(--cyan)}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);color:var(--sand);
  border-radius:8px;padding:8px 12px;font-family:var(--font-m);font-size:.75rem;cursor:pointer}
@media(max-width:880px){
  .nav-toggle{display:block}
  .nav-links{
    display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;
    background:var(--ink-2);border-bottom:1px solid var(--line);padding:14px;gap:4px;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 16px;border-radius:10px}
}

/* ---------- ticker ---------- */
.ticker{
  border-bottom:1px solid var(--line);background:var(--ink-2);
  overflow:hidden;white-space:nowrap;font-family:var(--font-m);font-size:.74rem;
}
.ticker-track{display:inline-block;padding:9px 0;animation:tick 46s linear infinite}
.ticker-track span{color:var(--lav);margin-right:44px}
.ticker-track span::before{content:"◆";color:var(--magenta);margin-right:12px;font-size:.6rem}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker:hover .ticker-track{animation-play-state:paused}

/* ---------- hero ---------- */
.hero{
  position:relative;background:var(--sky);overflow:hidden;
  padding:clamp(70px,11vw,140px) 0 clamp(56px,8vw,100px);
}
/* synthwave grid horizon — signature #2, sits low in the hero, behind content */
.hero::before{
  content:"";position:absolute;left:0;right:0;bottom:-6%;height:44%;z-index:1;
  background-image:
    repeating-linear-gradient(90deg, rgba(0,229,255,.32) 0 2px, transparent 2px 64px),
    repeating-linear-gradient(0deg, rgba(255,46,154,.26) 0 2px, transparent 2px 44px);
  transform:perspective(280px) rotateX(58deg);
  transform-origin:bottom;
  -webkit-mask-image:linear-gradient(to top, black 8%, transparent 82%);
  mask-image:linear-gradient(to top, black 8%, transparent 82%);
  opacity:.6;pointer-events:none;
  animation:gridmove 4.5s linear infinite;
}
@keyframes gridmove{from{background-position:0 0,0 0}to{background-position:64px 0,0 44px}}
.hero::after{ /* broadcast grain */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;z-index:1;
  background-image:repeating-linear-gradient(0deg,transparent 0 2px,rgba(253,239,228,.5) 2px 3px);
}
.hero-sun{
  position:absolute;width:min(560px,80vw);aspect-ratio:1;border-radius:50%;
  right:-8%;top:-32%;filter:blur(2px);opacity:.9;pointer-events:none;z-index:1;
  background:radial-gradient(circle at 50% 60%,var(--peach),var(--magenta) 55%,transparent 74%);
  animation:sunrise 2.2s cubic-bezier(.2,.8,.2,1) both, bobsun 8s ease-in-out 2.2s infinite;
}
@keyframes sunrise{from{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:.9}}
@keyframes bobsun{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.hero .wrap{position:relative;z-index:2}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-weight:700;font-size:.92rem;border-radius:999px;
  padding:13px 26px;border:0;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-coral{background:linear-gradient(120deg,var(--magenta),var(--coral),var(--peach));color:#2A1023;
  box-shadow:0 10px 34px -10px rgba(255,46,154,.6)}
.btn-coral:hover{box-shadow:0 14px 40px -8px rgba(255,46,154,.75)}
.btn-cyan{background:var(--cyan);color:#04211D;box-shadow:0 10px 30px -12px rgba(0,229,255,.55)}
.btn-ghost{background:transparent;color:var(--sand);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}

/* ---------- cards ---------- */
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:24px;box-shadow:var(--shadow);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.card:hover{transform:translateY(-5px);border-color:rgba(0,229,255,.4);
  box-shadow:0 20px 50px -16px rgba(255,46,154,.25), var(--shadow)}
.card .eyebrow{display:block;margin-bottom:10px}
.card h3{margin-bottom:8px}
.card p{color:var(--lav);font-size:.94rem}
.card-link{display:inline-block;margin-top:14px;font-weight:700;font-size:.88rem}
.card-hero{
  aspect-ratio:16/9;border-radius:var(--r-sm);margin-bottom:16px;overflow:hidden;position:relative;
  background:linear-gradient(140deg,#3A1258,#170A2E);
}
.card-hero .art{position:absolute;inset:0}

/* article meta */
.meta{display:flex;gap:14px;align-items:center;font-family:var(--font-m);font-size:.7rem;color:var(--lav);letter-spacing:.06em}
.meta .dot{color:var(--magenta)}
.badge{
  display:inline-block;font-family:var(--font-m);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--lav);
}
.badge.confirmed{color:#7CF7B8;border-color:rgba(124,247,184,.45);box-shadow:0 0 12px rgba(124,247,184,.15)}
.badge.credible{color:var(--peach);border-color:rgba(255,154,90,.45);box-shadow:0 0 12px rgba(255,154,90,.15)}
.badge.fake{color:var(--magenta);border-color:rgba(255,46,154,.5);box-shadow:0 0 12px rgba(255,46,154,.2)}

/* ---------- countdown ---------- */
.countdown{display:flex;gap:clamp(10px,2.5vw,22px);flex-wrap:wrap}
.count-cell{
  min-width:86px;text-align:center;background:rgba(11,4,23,.55);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:16px 12px;box-shadow:0 0 20px rgba(255,46,154,.08) inset;
}
.count-cell b{display:block;font-family:var(--font-d);font-size:clamp(1.9rem,5vw,3rem);line-height:1;color:var(--sand)}
.count-cell small{font-family:var(--font-m);font-size:.62rem;letter-spacing:.2em;color:var(--cyan);text-transform:uppercase}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);background:var(--ink-2);padding:52px 0 34px;margin-top:40px}
.foot-grid{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.site-footer h4{font-family:var(--font-m);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin-bottom:14px}
.site-footer a{display:block;color:var(--lav);font-size:.88rem;padding:4px 0}
.site-footer a:hover{color:var(--sand)}
.foot-note{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);color:var(--lav);font-size:.76rem;font-family:var(--font-m)}

/* ---------- utilities ---------- */
.stack-s>*+*{margin-top:10px}
.stack-m>*+*{margin-top:20px}
.center{text-align:center}
.mt-1{margin-top:14px}.mt-2{margin-top:26px}.mt-3{margin-top:44px}
.hide{display:none!important}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}