@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================================================
   MAKTOWN FLYERS — DESIGN SYSTEM v2  (base.css)
   Language: EXAGGERATED MINIMALISM — full-bleed tiles, one-word statements,
   oversized type, giant numbers, immense whitespace. Black/white with ONE
   accent (team green). Gold reserved for the championship star only.
   Fusion: Apple.com (calm precision, tiles, chevron links) × NBA 2K League
   (dark broadcast energy, verbs-with-periods, big leaderboard numbers).
   ----------------------------------------------------------------------------
   RE-SKIN: change --brand / --brand-ink (+ --gold) and the crest SVG. Done.
   The green below is a Nigeria-rooted placeholder — confirm the club's hex.
   ========================================================================== */

:root{
  /* Neutrals — Apple-grade */
  --ink:#0A0A0A;            /* near-black — dark tiles / nav            */
  --ink-soft:#151515;       /* elevated dark surface                    */
  --ink-line:rgba(255,255,255,.14);
  --paper:#FFFFFF;          /* white tiles                              */
  --paper-soft:#F5F5F7;     /* Apple light-gray surface                 */
  --paper-line:#E4E4E7;

  --text:#1D1D1F;           /* text on light (Apple)                    */
  --text-soft:#6E6E73;      /* secondary on light                       */
  --text-inv:#F5F5F7;       /* text on dark                             */
  --text-inv-soft:#A1A1A6;  /* secondary on dark                        */

  /* Single accent (SWAP PER TEAM) */
  --brand:#E2261C;          /* team green — accents on dark             */
  --brand-ink:#B4160E;      /* deeper green — text/links/fills on light */
  --gold:#E9B23C;           /* championship gold — star only            */

  /* Type */
  --f-disp:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --f-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --fs-giant:clamp(4rem,15vw,13.5rem);
  --fs-statement:clamp(2.6rem,7.5vw,6.5rem);
  --fs-h2:clamp(1.9rem,4vw,3.25rem);
  --fs-h3:clamp(1.25rem,2vw,1.6rem);
  --fs-bignum:clamp(3rem,9vw,8.5rem);
  --fs-lede:clamp(1.15rem,0.95rem+1vw,1.7rem);
  --fs-body:1.0625rem;
  --fs-small:0.8125rem;

  --container:1180px;
  --wide:1360px;
  --gutter:clamp(1.25rem,5vw,3.5rem);
  --pad-tile:clamp(4.5rem,12vw,10rem);
  --r:22px;
  --r-sm:14px;
  --ease:cubic-bezier(.16,1,.3,1);
  --z-nav:100;
}

*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:var(--f-body); font-size:var(--fs-body); line-height:1.55;
  color:var(--text-inv); background:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:none; }
ul{ list-style:none; padding:0; }
:focus-visible{ outline:2.5px solid var(--brand); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--brand); color:#fff; }

/* ---------- Typography utilities ---------- */
h1,h2,h3,h4{ line-height:1; font-weight:700; }
.disp{ font-family:var(--f-disp); font-weight:800; text-transform:uppercase; line-height:.86; letter-spacing:-.01em; }
.statement{ font-family:var(--f-disp); font-weight:800; text-transform:uppercase; font-size:var(--fs-statement); line-height:.85; letter-spacing:-.01em; }
.statement .dot{ color:var(--brand); }
.calm{ font-family:var(--f-body); font-weight:600; letter-spacing:-.025em; line-height:1.03; font-size:var(--fs-statement); text-transform:none; }
.bignum{ font-family:var(--f-disp); font-weight:800; font-size:var(--fs-bignum); line-height:.82; letter-spacing:-.015em; font-variant-numeric:tabular-nums; }
.kicker{ font-family:var(--f-disp); font-weight:600; text-transform:uppercase; letter-spacing:.22em; font-size:var(--fs-small); color:var(--brand); }
.on-light .kicker{ color:var(--brand-ink); }
.lede{ font-size:var(--fs-lede); font-weight:300; line-height:1.4; color:var(--text-inv-soft); letter-spacing:-.01em; }
.on-light .lede{ color:var(--text-soft); }
.tabular{ font-variant-numeric:tabular-nums; }
.measure{ max-width:56ch; }
.measure-tight{ max-width:30ch; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.container--wide{ max-width:var(--wide); }
.tile{ padding-block:var(--pad-tile); position:relative; overflow:hidden; }
.tile--sm{ padding-block:clamp(3rem,7vw,5rem); }
.on-dark{ background:var(--ink); color:var(--text-inv); }
.on-ink1{ background:var(--ink-soft); color:var(--text-inv); }
.on-light{ background:var(--paper); color:var(--text); }
.on-gray{ background:var(--paper-soft); color:var(--text); }
.center{ text-align:center; }
.center .lede{ margin-inline:auto; }
.stack>*+*{ margin-top:1.15rem; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--f-body); font-weight:500; font-size:1.02rem; line-height:1;
  padding:.95rem 1.6rem; border-radius:980px; border:1.5px solid transparent;
  transition:transform .25s var(--ease), background-color .25s, color .25s, border-color .25s, opacity .25s;
}
.btn:hover{ transform:scale(1.04); }
.btn:active{ transform:scale(.99); }
.btn--primary{ background:var(--brand); color:#fff; }
.btn--light{ background:var(--paper); color:var(--ink); }
.btn--dark{ background:var(--ink); color:#fff; }
.btn--outline{ border-color:var(--ink-line); color:var(--text-inv); }
.btn--outline:hover{ border-color:#fff; }
.on-light .btn--outline{ border-color:var(--paper-line); color:var(--text); }
.on-light .btn--outline:hover{ border-color:var(--ink); }
/* chevron text-link — the Apple "Learn more ›" pattern */
.chev{ display:inline-flex; align-items:center; gap:.35em; font-weight:500; font-size:1.02rem; color:var(--brand); }
.on-light .chev{ color:var(--brand-ink); }
.chev::after{ content:"›"; font-size:1.4em; line-height:0; transition:transform .25s var(--ease); }
.chev:hover::after{ transform:translateX(4px); }
.chev:hover{ text-decoration:underline; text-underline-offset:4px; }
/* legacy aliases (older pages still reference these) */
.btn--gold{ background:var(--brand); color:#fff; }
.btn--green{ background:var(--brand); color:#fff; }
.btn--ghost{ border-color:var(--ink-line); color:var(--text-inv); }
.on-light .btn--ghost{ border-color:var(--paper-line); color:var(--text); }
.btn--sm{ padding:.7rem 1.2rem; font-size:.92rem; }
.link-arrow{ display:inline-flex; align-items:center; gap:.4em; color:var(--brand); font-weight:500; }
.on-light .link-arrow{ color:var(--brand-ink); }
.link-arrow span{ transition:transform .25s var(--ease); }
.link-arrow:hover span{ transform:translateX(4px); }

/* ---------- Chips / tags (kept, quietened) ---------- */
.chip{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--f-disp); font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--text-inv-soft); }
.on-light .chip{ color:var(--text-soft); }
.chip--gold{ color:var(--gold); }
.chip--green{ color:var(--brand); }
.on-light .chip--green{ color:var(--brand-ink); }
.badge-w{ color:var(--brand); font-weight:700; }
.badge-l{ color:var(--text-inv-soft); font-weight:700; }
.eyebrow{ font-family:var(--f-disp); font-weight:600; text-transform:uppercase; letter-spacing:.22em; font-size:var(--fs-small); color:var(--brand); display:inline-block; }
.on-light .eyebrow{ color:var(--brand-ink); }
.eyebrow--center{ display:block; text-align:center; }

/* ---------- Crest ---------- */
.crest{ width:40px; height:40px; color:var(--brand); flex:none; }
.crest .star{ fill:var(--gold); }
.crest .ball{ stroke:currentColor; }

/* ============================ NAV ============================ */
.site-header{
  position:sticky; top:0; z-index:var(--z-nav);
  background:rgba(10,10,10,.7); backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--ink-line);
}
.nav{ display:flex; align-items:center; gap:1.5rem; height:98px; }
.brand{ display:flex; align-items:center; gap:.65rem; margin-right:auto; }
.brand-name{ font-family:var(--f-disp); font-weight:700; text-transform:uppercase; letter-spacing:.02em; font-size:1.12rem; line-height:.9; color:#fff; }
.brand-name small{ display:block; font-family:var(--f-body); font-size:.54rem; letter-spacing:.3em; color:var(--text-inv-soft); font-weight:500; margin-top:2px; }
.nav-links{ display:flex; align-items:center; gap:.15rem; }
.nav-links a{ font-size:.9rem; font-weight:400; color:var(--text-inv-soft); padding:.5rem .8rem; border-radius:8px; transition:color .2s; }
.nav-links a:hover{ color:#fff; }
.nav-links a[aria-current="page"]{ color:#fff; }
.nav-cta{ display:flex; align-items:center; gap:.6rem; }
.nav-toggle{ display:none; width:44px; height:44px; align-items:center; justify-content:center; color:#fff; }
.nav-toggle svg{ width:24px; height:24px; }
@media (max-width:940px){
  .nav-links, .nav-cta .btn{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .mobile-nav[hidden]{ display:none; }
  .mobile-nav{ position:fixed; inset:0 0 0 auto; width:min(84vw,340px); z-index:calc(var(--z-nav)+5);
    background:var(--ink-soft); border-left:1px solid var(--ink-line); padding:1.3rem; display:flex; flex-direction:column; gap:.1rem; animation:slideIn .3s var(--ease); }
  .mobile-nav a{ font-family:var(--f-disp); text-transform:uppercase; letter-spacing:.04em; font-size:1.2rem; padding:.85rem .3rem; border-bottom:1px solid var(--ink-line); color:var(--text-inv); }
  .mobile-nav a:last-of-type{ border-bottom:none; }
  .mobile-nav .btn{ margin-top:1rem; }
  .mobile-nav__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
  .scrim{ position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:calc(var(--z-nav)+4); backdrop-filter:blur(3px); }
  .scrim[hidden]{ display:none; }
}
@keyframes slideIn{ from{ transform:translateX(100%);} to{ transform:translateX(0);} }

/* ============================ FOOTER (Apple-style, light) ============================ */
.site-footer{ background:var(--paper-soft); color:var(--text-soft); border-top:1px solid var(--paper-line); padding-block:clamp(3rem,6vw,4.5rem) 2rem; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:2.5rem; }
.footer-brand .brand-name{ color:var(--text); }
.footer-brand .brand-name small{ color:var(--text-soft); }
.footer-brand .crest{ color:var(--brand-ink); }
.footer-col h4{ font-family:var(--f-disp); text-transform:uppercase; letter-spacing:.12em; font-size:.8rem; color:var(--text); margin-bottom:.9rem; }
.footer-col a{ display:block; padding:.3rem 0; font-size:.92rem; color:var(--text-soft); transition:color .2s; }
.footer-col a:hover{ color:var(--brand-ink); }
.socials{ display:flex; gap:.5rem; margin-top:1.1rem; }
.socials a{ width:40px; height:40px; border:1px solid var(--paper-line); border-radius:10px; display:grid; place-items:center; color:var(--text); transition:.2s; }
.socials a:hover{ border-color:var(--brand-ink); color:var(--brand-ink); }
.socials svg{ width:18px; height:18px; }
.footer-bottom{ margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid var(--paper-line); display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.8rem; color:var(--text-soft); }
.footer-note{ font-size:.74rem; color:#98989d; margin-top:.6rem; max-width:64ch; }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:2rem; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }

/* ============================ MARQUEE ============================ */
.marquee{ overflow:hidden; border-block:1px solid var(--ink-line); background:var(--ink); }
.marquee__track{ display:flex; width:max-content; animation:scrollX 40s linear infinite; }
.marquee__track span{ font-family:var(--f-disp); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(1.4rem,3vw,2.4rem); padding:.6rem 1.3rem; color:var(--text-inv); display:inline-flex; align-items:center; gap:1.3rem; }
.marquee__track span::after{ content:"●"; color:var(--brand); font-size:.34em; }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; } }
@keyframes scrollX{ to{ transform:translateX(-50%); } }

/* ============================ REVEAL ============================ */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.09s; }
.reveal[data-delay="2"]{ transition-delay:.18s; }
.reveal[data-delay="3"]{ transition-delay:.27s; }
.reveal[data-delay="4"]{ transition-delay:.36s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1!important; transform:none!important; transition:none; } }

/* ============================ SHARED BITS ============================ */
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.5rem,4vw,3rem); }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.5vw,2rem); }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2vw,1.6rem); }
@media (max-width:900px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } .grid-2{ grid-template-columns:1fr; } }
@media (max-width:560px){ .grid-3,.grid-4{ grid-template-columns:1fr; } }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; margin-bottom:2.6rem; flex-wrap:wrap; }
.hairline{ height:1px; background:var(--ink-line); border:0; }
.on-light .hairline{ background:var(--paper-line); }
.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }


/* ============================================================================
   ADD-ON v3 — real logo, hero video, bio pages, big-screen/TV
   ========================================================================== */
.brand .crest-img{ height:88px; width:auto; max-width:300px; object-fit:contain; flex:none; display:block; }
.footer-brand .crest-img{ height:50px; width:auto; }
.hero__logo{ width:clamp(270px,44vw,540px); height:auto; margin:.2rem 0 .1rem; filter:drop-shadow(0 14px 50px rgba(0,0,0,.6)); }

/* ---- Hero background video ---- */
.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%; z-index:0; background:var(--ink); }
.hero__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,10,10,.95) 0%, rgba(10,10,10,.70) 46%, rgba(10,10,10,.30) 100%),
    linear-gradient(0deg, var(--ink) 3%, transparent 54%); }
@media (prefers-reduced-motion:reduce){ .hero__video{ display:none; } }

/* ---- Player bio page ---- */
.phero{ position:relative; min-height:84vh; display:flex; align-items:flex-end; overflow:hidden; background:var(--ink); border-bottom:1px solid var(--ink-line); padding-block:7rem clamp(2rem,5vw,3.6rem); }
.phero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; z-index:0; }
.phero__scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(10,10,10,.93), rgba(10,10,10,.5) 55%, rgba(10,10,10,.18)), linear-gradient(0deg, var(--ink) 3%, transparent 56%); }
.phero__num{ position:absolute; right:0; top:3%; z-index:1; font-family:var(--f-disp); font-weight:800; font-size:clamp(11rem,38vw,32rem); line-height:.7; color:rgba(255,255,255,.055); pointer-events:none; }
.phero__in{ position:relative; z-index:2; width:100%; }
.phero .crumb{ font-size:.82rem; color:var(--text-inv-soft); } .phero .crumb a:hover{ color:var(--brand); }
.phero .pos{ font-family:var(--f-disp); text-transform:uppercase; letter-spacing:.2em; font-size:.92rem; color:var(--brand); margin-top:.9rem; }
.phero h1{ font-family:var(--f-disp); font-weight:800; text-transform:uppercase; font-size:clamp(3rem,11vw,7.5rem); line-height:.84; color:#fff; margin-top:.3rem; }
.pfacts{ display:flex; flex-wrap:wrap; gap:0; margin-top:1.5rem; }
.pfacts .f{ padding:.2rem 1.5rem; border-left:1px solid var(--ink-line); }
.pfacts .f:first-child{ padding-left:0; border-left:none; }
.pfacts .f b{ font-family:var(--f-disp); font-weight:800; font-size:1.45rem; color:#fff; display:block; line-height:1; }
.pfacts .f span{ font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-inv-soft); }
.pstats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
@media(max-width:720px){ .pstats{ grid-template-columns:repeat(2,1fr); } }
.pstat{ border:1px solid var(--ink-line); border-radius:var(--r-sm); background:var(--ink-soft); padding:1.3rem 1.4rem; }
.pstat b{ font-family:var(--f-disp); font-weight:800; font-size:clamp(1.9rem,4vw,2.7rem); color:var(--brand); line-height:.9; }
.pstat span{ display:block; margin-top:.35rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-inv-soft); }
.pbio-grid{ display:grid; grid-template-columns:1.5fr .6fr; gap:clamp(1.5rem,5vw,3.5rem); align-items:start; }
@media(max-width:820px){ .pbio-grid{ grid-template-columns:1fr; } }
.pmeta{ border-top:1px solid var(--ink-line); }
.pmeta .r{ display:flex; justify-content:space-between; gap:1rem; padding:.8rem 0; border-bottom:1px solid var(--ink-line); font-size:.92rem; }
.pmeta .r span{ color:var(--text-inv-soft); } .pmeta .r b{ color:#fff; font-weight:600; text-align:right; }

/* ---- Large screens / TV (scale up instead of stranding content) ---- */
@media (min-width:1800px){ :root{ --container:1480px; --wide:1740px; } body{ font-size:1.14rem; } }
@media (min-width:2400px){ :root{ --container:1860px; --wide:2160px; } body{ font-size:1.28rem; } }

@media (max-width:640px){ .nav{ height:76px; } .brand .crest-img{ height:62px; } }

/* NPBL stat table */
.stats-table{ width:100%; border-collapse:collapse; margin-top:2rem; font-variant-numeric:tabular-nums; min-width:520px; }
.stats-table th{ text-align:right; font-family:var(--f-disp); text-transform:uppercase; letter-spacing:.05em; font-size:.76rem; color:var(--text-inv-soft); padding:.7rem .7rem; border-bottom:1px solid var(--ink-line); }
.stats-table th:first-child{ text-align:center; width:2.4rem; } .stats-table th:nth-child(2){ text-align:left; }
.stats-table td{ text-align:right; padding:.72rem .7rem; border-bottom:1px solid var(--ink-line); color:var(--text-inv); font-size:.95rem; }
.stats-table td:first-child{ text-align:center; color:var(--text-inv-soft); font-family:var(--f-disp); }
.stats-table td:nth-child(2){ text-align:left; font-weight:600; }
.stats-table tr:hover td{ background:rgba(255,255,255,.03); }
.stats-table .lead td{ color:#fff; }
.stats-table .lead td:nth-child(2){ color:var(--brand); }

/* ===== PREVIEW PROTECTION — concept preview only; DELETE this block for production ===== */
*{ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-touch-callout:none; }
input,textarea,select{ -webkit-user-select:text; user-select:text; }
img,svg,video{ -webkit-user-drag:none; user-drag:none; pointer-events:none; }
a img,a svg,button svg,label,.field{ pointer-events:auto; }
body::after{ content:""; position:fixed; inset:0; z-index:9998; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='360'%20height='200'%3E%3Ctext%20x='10'%20y='115'%20transform='rotate(-28%20180%20100)'%20fill='%23808080'%20fill-opacity='0.10'%20font-family='Arial,sans-serif'%20font-size='18'%20font-weight='700'%3ECONFIDENTIAL%20PREVIEW%3C/text%3E%3C/svg%3E"); }
.pv-badge{ position:fixed; left:12px; bottom:12px; z-index:9999; pointer-events:none;
  font-family:var(--f-disp); text-transform:uppercase; letter-spacing:.14em; font-size:.62rem;
  color:var(--text-inv-soft); background:rgba(10,10,10,.72); border:1px solid var(--ink-line);
  padding:.35rem .6rem; border-radius:6px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
@media print{ body *{ visibility:hidden !important; } body::before{ content:"Confidential concept preview — printing is disabled."; visibility:visible; position:fixed; left:0; top:0; padding:2rem; font-family:Arial,sans-serif; color:#000; } }