/* ============================================================
   OFFICIALLY WILD — unified theme  (v2 palette: stone/tan, squared)
   Loaded AFTER each page's inline <style> so it overrides cleanly.
   Palette: black base, #949392 accent (the "LEVI" stone), #3a3a3d
   dark panels, army-tan buttons. No orange. Subtle concrete only.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Bebas+Neue&family=Oswald:wght@300;400;500;600&family=Caveat:wght@500;600;700&display=swap');

/* --- Custom fonts (files in /Fonts) --- */
@font-face{font-family:'Division Grotesk';src:url('Fonts/Division/WOFF2/DivisionGrotesk-Black.woff2') format('woff2'),url('Fonts/Division/DivisionGrotesk-Black.otf') format('opentype');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Division Grotesk';src:url('Fonts/Division/WOFF2/DivisionGrotesk-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Division Grotesk';src:url('Fonts/Division/WOFF2/DivisionGrotesk-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Division Grotesk';src:url('Fonts/Division/WOFF2/DivisionGrotesk-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Lust';src:url('Fonts/Lust/Lust-Regular.woff') format('woff'),url('Fonts/Lust/Lust-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}

/* ===== PALETTE (overrides each page's inline :root) ===== */
:root{
  --black:#070707;
  --charcoal:#141416;
  --metal:#1c1c1e;
  --ink:#3a3a3d;          /* dark panels / media player */
  --accent:#949392;       /* the stone-gray "LEVI" tone — replaces amber text */
  --tan:#b3a17e;          /* army tan — buttons */
  --tan-hi:#c5b491;
  --tan-line:#8a7c5e;
  /* remap legacy tokens so existing var() references shift automatically */
  --amber:#949392;
  --gold:#949392;
  --neon:#b3a17e;
  --neon-orange:#b3a17e;
  --brass:#949392;
  --text:#F2EDE4;
  --muted:#9a9389;
}

body{ background:#070707 !important; color:var(--text); }

/* Black stroke/outline on DISPLAY text only (painted BEHIND the fill so
   letters keep their weight and gain a crisp dark edge). Body/small text
   stays stroke-free — a universal stroke made small text look muddy. */
h1, h2, h3, .display, .h-sec, .ptitle, .ttl, .tquote, .navsig{
  -webkit-text-stroke:0.7px #000; paint-order:stroke fill;
}
/* large display text gets a fuller 1px edge */
h1, h2, h3, .display, .h-sec, .ptitle, .ttl,
.page-hero h1, .shero h1, .chero h1, .fhero h1, .shop-hero h1,
.sec h2, h2.sec, .shop h2, .ama h2,
.navsig, .tquote{
  -webkit-text-stroke:1px #000 !important;
}

/* Headlines -> heavy grotesque */
h1, h2, h3, .display, .h-sec, .ptitle, .ttl{
  font-family:'Division Grotesk', 'Archivo Black', sans-serif !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  line-height:1.12 !important;
}
/* EXCEPTION: small titles inside cards (song names, quotes, widget headings)
   were unreadable in the stroked display font — use clean Oswald instead */
.card h3, .fcard h3, .limited h3{
  font-family:'Oswald', sans-serif !important;
  font-weight:500 !important;
  -webkit-text-stroke:0 !important;
  letter-spacing:.3px !important;
  text-transform:none !important;
  line-height:1.4 !important;
}
.signature{ font-family:'Lust', cursive !important; text-transform:none !important; font-weight:400 !important; }
.navsig{ display:none !important; }
.navsig:hover{ color:var(--accent); }
/* header "Get Officially Wild" pill — no text stroke */
.follow{ -webkit-text-stroke:0 !important; }
.script{ font-family:'Oswald', sans-serif !important; font-style:italic; text-transform:none; }
.kicker, .kicker2, .eyebrow, .stencil, .clabel{ font-family:'Bebas Neue', sans-serif !important; }

/* Sticky nav -> dark glass, fades to black */
header.nav, nav.bar.scrolled{
  background:rgba(7,7,7,.9) !important;
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06) !important;
}

/* ===== ATMOSPHERE: flat black base (no full-page texture layer) =====
   A fixed concrete layer was getting hidden by the opaque heroes and then
   revealed at their bottom edge — that reveal read as a hard "line" on every
   page. Keeping the base flat black so heroes melt straight into the page.
   Grit now lives only inside cards/panels, which never butt against a hero. */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(130% 80% at 50% -12%, rgba(255,255,255,.025), transparent 52%);
}

/* Alternating sections = subtle FLAT tint over the concrete (no brick, no glow) */
.sec.alt, .shop.alt, section.ama{ background:rgba(58,58,61,.16) !important; }

/* ===== BUTTONS — charcoal body, tan text + border ("whiskey label").
   Replaced solid tan fill: black-on-tan text was hard to read. ===== */
.btn.solid,.btn2.solid,.cta.solid,.ccard .b.solid,.follow{
  background:linear-gradient(180deg,#2b2620,#1a1712) !important; color:var(--tan-hi) !important;
  border:1px solid var(--tan-line) !important; border-radius:4px !important;
  box-shadow:0 6px 16px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06) !important;
  font-weight:600 !important; text-shadow:none;
  letter-spacing:2.5px;
}
.btn.solid:hover,.btn2.solid:hover,.cta.solid:hover,.ccard .b.solid:hover,.follow:hover{
  background:linear-gradient(180deg,#342d24,#211c15) !important; transform:translateY(-1px);
  border-color:var(--tan-hi) !important; color:#f4ecd9 !important;
  box-shadow:0 10px 26px rgba(0,0,0,.5), 0 0 22px rgba(197,180,145,.28) !important;
}
.btn,.btn2,.cta,.ccard .b{ transition:all .2s ease !important; }
.btn:not(.solid),.btn2:not(.solid),.cta:not(.solid),.ccard .b:not(.solid){
  border:1px solid rgba(255,255,255,.22) !important; color:var(--text) !important;
  background:transparent !important; border-radius:4px !important;
}
.btn:not(.solid):hover,.btn2:not(.solid):hover,.cta:not(.solid):hover,.ccard .b:not(.solid):hover{
  border-color:var(--accent) !important; background:rgba(148,147,146,.12) !important;
  color:#fff !important; box-shadow:none !important; transform:translateY(-1px);
}

/* ===== UNIFIED CARD SYSTEM — flat dark, squared, story-image border ===== */
.perk,.qa,.askbox,.ccard,.card,.panel,.tier,.feat,.scard,.post,.composer,.rail .card{
  background:linear-gradient(180deg,#1d1d1f,#151517) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:8px !important;
  box-shadow:0 18px 44px rgba(0,0,0,.5) !important;
}
/* image panels: same squared frame, but keep their own cover image */
.about-img,.mbox{
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:8px !important;
  box-shadow:0 18px 44px rgba(0,0,0,.5) !important;
}
.perk,.qa,.post{ transition:transform .22s ease, border-color .22s ease !important; }
.perk:hover,.qa:hover,.post:hover{ transform:translateY(-4px); border-color:rgba(148,147,146,.55) !important; }

/* squared edges everywhere that mattered */
.shopnode img,.pcover,.prow .cv,.about-img,.mbox,.avatar{ border-radius:8px !important; }
input,textarea,select{ border-radius:6px !important; }
.reel{ border-radius:6px !important; }

/* ===== MEDIA PLAYER — warm tan glass tied to the header system ===== */
/* frosted glass, tan-lined; ambient album art glows through from .pamb */
.pcard{
  background:linear-gradient(180deg,rgba(28,25,20,.46),rgba(10,10,10,.62)) !important;
  backdrop-filter:blur(18px) saturate(1.15); -webkit-backdrop-filter:blur(18px) saturate(1.15);
  border:1px solid rgba(197,180,145,.30) !important;
  box-shadow:0 24px 60px rgba(0,0,0,.45), 0 0 44px rgba(179,161,126,.10), inset 0 1px 0 rgba(197,180,145,.14) !important;
}
.ptitle{ color:#fff !important; }
.pnl{ color:var(--tan-hi) !important; letter-spacing:3px; }
.partist,.ptimes{ color:#cfcecb !important; }
.pbar{ background:rgba(197,180,145,.18) !important; }
.pfill,.wave i{ background:linear-gradient(90deg,#8a7c5e,#c5b491) !important; }
.pctrls button{ color:#e8e6e3 !important; }
.pctrls button:hover{ color:var(--tan-hi) !important; }
.pctrls .big{ background:linear-gradient(180deg,#c5b491,#9d8b66) !important; color:#1d1a13 !important; box-shadow:0 6px 18px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.35) !important; }
.pctrls .big:hover{ filter:brightness(1.08); }
.pcard.playing .big{ box-shadow:0 0 0 6px rgba(179,161,126,.22), 0 6px 18px rgba(0,0,0,.4) !important; }
.prow.on{ background:rgba(179,161,126,.14) !important; border-left:2px solid var(--tan) !important; }
.prow.on .nm{ color:#efe9db !important; }
.pright{ border-left:1px solid rgba(197,180,145,.18) !important; }
@media(max-width:860px){ .pright{ border-left:0 !important; border-top:1px solid rgba(197,180,145,.18) !important; } }

/* ===== HEADINGS / HIERARCHY ===== */
.page-hero h1, .shero h1, .chero h1, .fhero h1, .shop-hero h1{
  font-size:clamp(56px,9.5vw,128px) !important; font-weight:900 !important;
  line-height:.98 !important; letter-spacing:.01em !important;
}
.sec h2, h2.sec, .h-sec, .shop h2, .ama h2{ font-size:clamp(40px,6.2vw,76px) !important; font-weight:900 !important; line-height:1.02 !important; margin-top:6px; }
.sec p, .lead{ font-size:17px; }
.amber{ color:var(--accent) !important; }
.shop h2 .amber, .sec h2 span, .fhero h1 .amber{ color:var(--accent) !important; }
.shop .lead, .fhero p, .lead{ color:#cfc6b8 !important; max-width:640px; line-height:1.6; }
.shop .lead{ margin-top:14px !important; }

/* Eyebrow kicker — stone accent, tick rule for hierarchy */
.kick, .shop .kick, .fhero .kick, .shop-hero .kick{
  font-family:'Bebas Neue',sans-serif !important; letter-spacing:5px !important;
  color:var(--accent) !important; font-size:14px !important; opacity:1 !important; display:inline-block; position:relative;
}
.shop .kick:not(.ctr)::after, .sec .kick:not(.ctr)::after{
  content:""; display:block; width:42px; height:2px; background:var(--accent); margin-top:10px; border-radius:2px; opacity:.95;
}
.kick.ctr::after, .kicker.ctr::after, .kicker2.ctr::after, .fhero .kick::after{
  content:""; display:block; width:44px; height:2px; background:var(--accent); margin:12px auto 0; border-radius:2px; opacity:.9;
}

/* ===== SECTION RHYTHM ===== */
.sec, section.shop, .fhero ~ section, .ama{ padding:100px 0 !important; position:relative; }
.sec + .sec{ border-top:1px solid rgba(255,255,255,.05); }
section.shop + section.shop{ border-top:1px solid rgba(255,255,255,.06); }
.shop .shopnode, .perks, .qas{ margin-top:40px !important; }
.perks{ gap:22px !important; margin-top:46px !important; }

/* ===== inner pages: nav + cinematic heroes ===== */
header.nav{ justify-content:space-between !important; padding:16px 32px !important; }
header.nav .links{ position:absolute !important; left:50% !important; transform:translateX(-50%) !important; }
@media(max-width:860px){ header.nav .links{ display:none !important; } }
.page-hero, .chero{ min-height:62vh; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:48px !important; }
.shero{ min-height:72vh; }
.page-hero .kicker, .chero .kicker, .shero .kicker{ font-family:'Bebas Neue',sans-serif !important; letter-spacing:5px !important; color:var(--accent) !important; }

/* ===== Heroes fade seamlessly into the black section below them ===== */
.stage, .page-hero, .chero, .shero, .fhero, .shop-hero{ position:relative; }
.stage::after, .page-hero::after, .chero::after, .shero::after, .fhero::after, .shop-hero::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:190px; pointer-events:none; z-index:1;
  background:linear-gradient(180deg, rgba(7,7,7,0) 0%, rgba(7,7,7,.65) 55%, #070707 100%);
}
/* keep hero headline/content above the fade (skip .stage — its cards manage their own z-index) */
.page-hero > *, .chero > *, .shero > *, .fhero > *, .shop-hero > *{ position:relative; z-index:2; }

/* ===== RED-BRUSH ACCENTS — small ties to the new cover-art era (Open Your Eyes style) ===== */
:root{ --red:#a8231a; --red-hi:#c73b2d; }
/* the play buttons are the red anchor — one bold element, not a paint job */
.pctrls .big{ background:linear-gradient(180deg,#c73b2d,#8a1d12) !important; color:#f4e9d8 !important; box-shadow:0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.22) !important; }
.pctrls .big:hover{ filter:brightness(1.12); }
.pcard.playing .big{ box-shadow:0 0 0 6px rgba(168,35,26,.20), 0 0 26px rgba(168,35,26,.35), 0 6px 18px rgba(0,0,0,.4) !important; }
.mini .mplay{ background:linear-gradient(180deg,#c73b2d,#8a1d12) !important; border-color:#6e150d !important; color:#f4e9d8 !important; }
/* now-playing label + active-track tick pick up the red */
.pnl{ color:var(--red-hi) !important; }
.prow.on{ border-left:2px solid var(--red) !important; background:rgba(168,35,26,.10) !important; }
.pright .prow:hover .pn::after{ color:var(--red-hi) !important; }
.pcta-k{ color:var(--red-hi) !important; }
/* ★ kicker marks — the "★ LEVI WILDER ★" treatment from the covers, centered kickers only */
.kick.ctr::before, .kick.ctr2::before{ content:"★ "; color:var(--red); }
.kick.ctr::after, .kick.ctr2::after{ content:" ★"; color:var(--red); }
/* selecting text bleeds red — tiny, hidden, on-brand */
::selection{ background:var(--red); color:#f4e9d8; text-shadow:none; }