/* ============================================================
   THE VILLAGE SPORT — shared stylesheet
   Retro athletic / varsity · Balmain · Est. 1980
   ============================================================ */

:root{
  --ink:#161310;
  --paper:#f3ead7;
  --paper-deep:#e7d8b8;
  --tiger:#e8551f;
  --tiger-deep:#bf3d12;
  --gold:#e8a838;
  --cream:#fbf7ec;
  --green:#16432e;
  --blue:#1e3a52;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;
  opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:var(--tiger);color:var(--paper)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---------- TICKER ---------- */
.ticker{
  background:var(--ink);color:var(--paper);
  font-family:'Bebas Neue',sans-serif;letter-spacing:.14em;font-size:.82rem;
  padding:8px 0;overflow:hidden;white-space:nowrap;
}
.ticker .run{display:inline-block;animation:scroll 28s linear infinite}
.ticker .run span{margin:0 1.6rem}
.ticker .run span::after{content:"\25CF";margin-left:1.6rem;color:var(--tiger)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- NAV ---------- */
nav{
  position:sticky;top:0;z-index:500;
  background:var(--paper);
  border-bottom:3px solid var(--ink);
  display:flex;align-items:center;justify-content:space-between;
  padding:.7rem 5vw;
}
.brand{display:flex;align-items:center;gap:.7rem}
.crest{
  width:46px;height:46px;flex:none;
  background:var(--ink);border-radius:50%;
  display:grid;place-items:center;
  border:3px solid var(--tiger);
}
.crest b{
  font-family:'Anton',sans-serif;color:var(--gold);
  font-size:1.5rem;line-height:1;transform:translateY(1px)}
.brand .name{font-family:'Anton',sans-serif;line-height:.92;font-size:1.05rem;letter-spacing:.01em}
.brand .name s{display:block;font-family:'Bebas Neue',sans-serif;
  color:var(--tiger-deep);font-size:.7rem;letter-spacing:.22em;text-decoration:none}
.navlinks{display:flex;gap:1.8rem;font-family:'Bebas Neue',sans-serif;
  font-size:1.05rem;letter-spacing:.1em}
.navlinks a{position:relative;padding:.2rem 0}
.navlinks a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:3px;
  background:var(--tiger);transition:width .25s ease}
.navlinks a:hover::after,.navlinks a.active::after{width:100%}
.navlinks a.active{color:var(--tiger-deep)}
.navcta{
  background:var(--tiger);color:var(--paper);
  font-family:'Bebas Neue',sans-serif;letter-spacing:.1em;font-size:1rem;
  padding:.5rem 1.1rem;border:3px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);transition:.12s;
}
.navcta:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.burger{display:none;font-family:'Bebas Neue';font-size:1.6rem;background:none;border:0;cursor:pointer}

/* ---------- BUTTONS ---------- */
.btn{
  font-family:'Bebas Neue',sans-serif;letter-spacing:.1em;font-size:1.15rem;
  padding:.85rem 1.7rem;border:3px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);transition:.12s;cursor:pointer;
  display:inline-flex;align-items:center;gap:.5rem;
}
.btn:hover{transform:translate(2.5px,2.5px);box-shadow:2.5px 2.5px 0 var(--ink)}
.btn-fill{background:var(--tiger);color:var(--paper)}
.btn-ghost{background:var(--paper)}
.btn-dark{background:var(--ink);color:var(--paper)}

/* ---------- SECTION SHELL ---------- */
section{padding:5.5vw 5vw}
.kicker{
  font-family:'Bebas Neue',sans-serif;letter-spacing:.24em;font-size:1rem;
  color:var(--tiger-deep);display:flex;align-items:center;gap:.7rem;margin-bottom:.7rem;
}
.kicker::before{content:"";width:34px;height:3px;background:var(--tiger);flex:none}
.h2{
  font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(2.2rem,6vw,4.6rem);line-height:.92;letter-spacing:-.01em;
}
.lead{max-width:620px;font-size:1.1rem;line-height:1.6;margin-top:1.4rem}

/* ---------- PAGE BANNER (interior pages) ---------- */
.banner{
  position:relative;padding:5vw 5vw 4vw;
  border-bottom:3px solid var(--ink);
  background:
    repeating-linear-gradient(0deg,transparent 0 38px,rgba(22,19,16,.04) 38px 39px),
    var(--paper);
}
.banner.dark{background:var(--ink);color:var(--paper)}
.banner.dark .crumb a,.banner.dark .crumb{color:var(--paper)}
.banner.tigerbg{background:var(--tiger);color:var(--ink)}
.banner.greenbg{background:var(--green);color:var(--paper)}
.banner.greenbg .crumb,.banner.greenbg .crumb a{color:var(--paper)}
.banner.bluebg{background:var(--blue);color:var(--paper)}
.banner.bluebg .crumb,.banner.bluebg .crumb a{color:var(--paper)}
.crumb{
  font-family:'Bebas Neue',sans-serif;letter-spacing:.16em;font-size:.92rem;
  margin-bottom:1.1rem;opacity:.8;
}
.crumb a:hover{color:var(--tiger)}
.banner h1{
  font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(2.8rem,9vw,7.5rem);line-height:.86;letter-spacing:-.01em;
}
.banner .out{color:transparent;-webkit-text-stroke:2.5px currentColor}
.banner .pop{color:var(--tiger)}
.banner.tigerbg .pop,.banner.dark .pop{color:var(--gold)}
.banner p.tag{
  max-width:560px;margin-top:1.5rem;font-size:1.1rem;line-height:1.55;
}

/* ---------- DEPT / CARD GRID ---------- */
.deptgrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1.4rem;margin-top:2.8rem;
}
.card{
  background:var(--cream);color:var(--ink);
  border:3px solid var(--ink);padding:1.7rem 1.6rem 1.8rem;
  position:relative;overflow:hidden;transition:.18s;
  box-shadow:6px 6px 0 var(--ink);
}
.card:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}
.card .no{
  font-family:'Anton',sans-serif;font-size:3.4rem;line-height:1;
  color:var(--paper-deep);position:absolute;right:.6rem;top:.1rem;
}
.card h3{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;letter-spacing:.04em;
  position:relative;margin-bottom:.4rem}
.card h3 em{font-style:normal;color:var(--tiger)}
.card p{font-size:.96rem;line-height:1.5;position:relative}
.card .tag{
  display:inline-block;margin-top:1rem;font-family:'Bebas Neue';letter-spacing:.1em;
  font-size:.82rem;background:var(--ink);color:var(--paper);padding:.22rem .65rem;
}
.card .golink{
  display:inline-block;margin-top:1.1rem;font-family:'Bebas Neue';
  letter-spacing:.1em;font-size:.95rem;color:var(--tiger-deep);
}
.card .golink:hover{color:var(--ink)}

/* ---------- FEATURE SPLIT ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:3.5vw;align-items:start}
.split.flip{grid-template-columns:.95fr 1.05fr}
.pull{
  font-family:'Anton',sans-serif;font-size:clamp(1.6rem,3.4vw,2.6rem);
  line-height:1;text-transform:uppercase;margin:2rem 0 .5rem;
  border-left:8px solid var(--tiger);padding-left:1rem;
}
.split p{font-size:1.06rem;line-height:1.66;margin-top:1.1rem}

/* ---------- INFO PANEL ---------- */
.panel{border:3px solid var(--ink);background:var(--cream);box-shadow:6px 6px 0 var(--ink)}
.panel .top{background:var(--ink);color:var(--paper);
  font-family:'Bebas Neue';letter-spacing:.16em;font-size:1.1rem;padding:.7rem 1.2rem}
.panel .row{display:flex;gap:1.1rem;padding:1.05rem 1.3rem;
  border-bottom:2px dashed rgba(22,19,16,.3)}
.panel .row:last-child{border-bottom:0}
.panel .row b{font-family:'Anton',sans-serif;font-size:1.4rem;color:var(--tiger-deep);
  flex:none;width:74px}
.panel .row p{font-size:.95rem;line-height:1.45}

/* ---------- BRAND WALL ---------- */
.brandwall{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.4rem}
.brandwall span{
  font-family:'Anton',sans-serif;font-size:clamp(1.3rem,3.4vw,2.4rem);
  text-transform:uppercase;background:var(--paper);
  border:3px solid var(--ink);padding:.35rem 1rem;
  box-shadow:4px 4px 0 var(--ink);transition:.13s;
}
.brandwall span:hover{background:var(--ink);color:var(--paper);transform:rotate(-2deg)}

/* ---------- CHECKLIST ---------- */
.checks{margin-top:1.6rem;list-style:none}
.checks li{
  display:flex;gap:.7rem;align-items:baseline;
  font-size:1.04rem;line-height:1.5;margin-bottom:.7rem;
}
.checks li::before{content:"\2605";color:var(--tiger);flex:none;font-size:.9rem}

/* ---------- CTA STRIP ---------- */
.ctastrip{
  background:var(--ink);color:var(--paper);text-align:center;
  padding:4.5vw 5vw;border-top:3px solid var(--ink);
}
.ctastrip h2{
  font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:clamp(2rem,5.5vw,4rem);line-height:.95;
}
.ctastrip h2 em{font-style:normal;color:var(--tiger)}
.ctastrip p{max-width:520px;margin:1.1rem auto 1.8rem;font-size:1.05rem;opacity:.9}
.ctastrip .btn-ghost{background:var(--paper);color:var(--ink)}

/* ---------- FOOTER ---------- */
footer{background:var(--ink);color:var(--paper);padding:4vw 5vw 2vw}
.foottop{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem}
.footbig{font-family:'Anton';font-size:clamp(2.4rem,7vw,5rem);
  text-transform:uppercase;line-height:.9}
.footbig em{font-style:normal;color:var(--tiger)}
.footcols{display:flex;gap:3rem;flex-wrap:wrap}
.footcol h4{font-family:'Bebas Neue';letter-spacing:.16em;color:var(--gold);
  font-size:.95rem;margin-bottom:.7rem}
.footcol a,.footcol p{display:block;font-size:.95rem;margin-bottom:.4rem;opacity:.85}
.footcol a:hover{color:var(--tiger);opacity:1}
.footrule{border:0;border-top:2px solid rgba(243,234,215,.2);margin:2.4rem 0 1.2rem}
.footbot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
  font-size:.82rem;opacity:.6;font-family:'Bebas Neue';letter-spacing:.1em}

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

/* ---------- RESPONSIVE ---------- */
@media(max-width:880px){
  .split,.split.flip{grid-template-columns:1fr}
  .panel{position:static}
  .navlinks,.navcta{display:none}
  .burger{display:block}
  .navlinks.open{
    display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;
    background:var(--paper);border-bottom:3px solid var(--ink);
    padding:1.2rem 5vw;gap:1.1rem;
  }
}