/* ============================================================
   FOOTBALL DAILY DOSE — broadcast brutalism design system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700;800;900&family=Archivo+Narrow:wght@400;500;600;700&display=swap');

:root{
  /* palette — stadium night */
  --ink:        #0a0e14;   /* near-black base */
  --ink-2:      #0f1620;   /* raised surface */
  --ink-3:      #161f2c;   /* card */
  --line:       #1f2a3a;   /* hairline borders */
  --fog:        #2a3645;
  --paper:      #f4f1ea;   /* warm off-white text */
  --paper-dim:  #9aa7b8;   /* muted text */
  --paper-faint:#5e6b7d;

  /* accents — WC2026-inspired multicolor identity */
  --gold:       #ff2d78;   /* primary = vivid magenta-pink (mapped to --gold so all refs update) */
  --gold-deep:  #d81b60;
  --pink:       #ff2d78;
  --teal:       #00c2c7;   /* co-star teal */
  --orange:     #ff7a18;   /* co-star orange */
  --lime:       #c4ff3d;   /* electric accent */
  --pitch:      #00c2c7;   /* repurpose pitch->teal for W badges */
  --blood:      #ff3b5c;   /* live red-pink */

  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 64px);

  --font-display: 'Anton', sans-serif;
  --font-cond:    'Archivo Narrow', sans-serif;
  --font-body:    'Archivo', sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:#0a0e14}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  line-height:1.5;
  overflow-x:hidden;
  font-feature-settings:"kern" 1, "liga" 1;
  -webkit-font-smoothing:antialiased;
}

/* grain overlay for atmosphere */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter)}

/* ---------- type ---------- */
.display{font-family:var(--font-display); font-weight:400; line-height:.9; letter-spacing:-.01em; text-transform:uppercase}
.kicker{font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.28em; font-size:.72rem; color:var(--gold); font-weight:600}
.eyebrow{font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.2em; font-size:.8rem; color:var(--paper-dim)}

/* ---------- nav ---------- */
.nav{position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gutter); mix-blend-mode:difference}
.nav.scrolled{mix-blend-mode:normal; background:rgba(10,14,20,.82); backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.brand{font-family:var(--font-display); font-size:1.15rem; letter-spacing:.02em; display:flex; align-items:center; gap:10px}
.brand .ball{width:32px; height:32px; flex:none; display:block; object-fit:contain}
.foot .brand .ball{width:38px; height:38px}
.nav-links{display:flex; gap:28px; font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.12em; font-size:.82rem; font-weight:600}
.nav-links a{color:var(--paper-dim); transition:color .2s}
.nav-links a:hover{color:var(--gold)}
@media(max-width:760px){ .nav-links{display:none} }

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--font-cond); text-transform:uppercase;
  letter-spacing:.14em; font-weight:700; font-size:.85rem; padding:14px 24px; border:1.5px solid var(--gold);
  color:var(--ink); background:var(--gold); transition:.22s; cursor:pointer}
.btn:hover{background:transparent; color:var(--gold)}
.btn.ghost{background:transparent; color:var(--paper); border-color:var(--line)}
.btn.ghost:hover{border-color:var(--gold); color:var(--gold)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line); margin-top:120px; padding:60px 0 40px}
.foot-grid{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap}
.foot .brand{font-size:1.4rem; margin-bottom:14px}
.foot-tag{color:var(--paper-dim); max-width:320px; font-size:.92rem}
.foot-links{display:flex; gap:40px; flex-wrap:wrap}
.foot-col h4{font-family:var(--font-cond); text-transform:uppercase; letter-spacing:.18em; font-size:.74rem; color:var(--gold); margin-bottom:14px}
.foot-col a{display:block; color:var(--paper-dim); font-size:.9rem; padding:5px 0; transition:color .2s}
.foot-col a:hover{color:var(--paper)}
.foot-base{margin-top:48px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between;
  gap:20px; flex-wrap:wrap; color:var(--paper-faint); font-size:.82rem; font-family:var(--font-cond); letter-spacing:.08em}

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}

/* ===== transparency fixes — solid backdrop behind symbol art ===== */
#hero{background:radial-gradient(ellipse at 50% 40%, #14202e 0%, var(--ink) 70%)}
#gl{background:radial-gradient(ellipse at 50% 45%, #16243340 0%, var(--ink) 75%)}
.t-hero{background:radial-gradient(ellipse at 60% 35%, #16242f 0%, var(--ink) 72%)}
.team-card{background:radial-gradient(ellipse at 50% 30%, #16242f 0%, var(--ink-3) 80%)}
/* team grid: symbol art centered, not cover-cropped, so it reads as a crest */
.team-card img{object-fit:contain; object-position:center 38%; opacity:.85; padding:8px}
.team-card:hover img{opacity:1}