/* ============================================================
   UPLIFTD ATHLETICS — shared design system
   Palette: black / white, with light "studio" photo tiles
   Display: Archivo (900) — Body: Inter — Meta/mono: IBM Plex Mono
   ============================================================ */

:root{
  --bg:         #0A0A0A;   /* page background */
  --fg:         #F5F4F1;   /* primary text on bg */
  --fg-dim:     #9C998F;   /* secondary/grey text on bg */

  --surface:    #EDEBE6;   /* light "photo tile" background */
  --surface-1:  #D8D6CF;   /* studio gradient stop 1 */
  --surface-2:  #ADAA9F;   /* studio gradient stop 2 */
  --surface-fg: #111110;   /* dark text used ON light tiles */

  --line:       rgba(245,244,241,0.14);  /* hairline on dark bg */

  --display: 'Archivo', sans-serif;
  --body:    'Inter', sans-serif;
  --mono:    'IBM Plex Mono', monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  line-height:1.5;
  -webkit-font-smoothing: antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button, select{ font-family:inherit; cursor:pointer; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

:focus-visible{ outline:2px solid var(--fg); outline-offset:3px; }

.wrap{ max-width:1400px; margin:0 auto; padding:0 40px; }
@media (max-width:640px){ .wrap{ padding:0 20px; } }

/* ---------- Brand lockup ---------- */
.brand-lockup{ display:inline-flex; flex-direction:column; gap:3px; line-height:1; }
.brand-lockup .word{
  font-family: var(--display); font-weight:900; text-transform:uppercase;
  font-size:22px; letter-spacing:0.01em; color: var(--fg);
}
.brand-lockup .sub{
  font-family: var(--mono); font-weight:500; text-transform:uppercase;
  font-size:9.5px; letter-spacing:0.34em; color: var(--fg-dim); padding-left:1px;
}
.brand-lockup.lg .word{ font-size:32px; }
.brand-lockup.lg .sub{ font-size:12px; letter-spacing:0.36em; }

/* ---------- Nav ---------- */
header.site-nav{
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: sticky; top:0; z-index:60;
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 40px;
  max-width:1400px; margin:0 auto;
}
.nav-links{ display:flex; gap:38px; }
.nav-links a{
  font-family: var(--mono); font-size:12px; letter-spacing:0.06em;
  text-transform:uppercase; color: var(--fg);
  position:relative; padding: 4px 0;
}
.nav-links a::after{
  content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background: var(--fg); transform: scaleX(0); transform-origin:left;
  transition: transform .25s ease;
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ transform:scaleX(1); }

.nav-right{ display:flex; align-items:center; gap:22px; }
.nav-tag{
  font-family: var(--mono); font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; display:flex; align-items:center; gap:8px;
}
.nav-tag .dot{
  width:14px; height:14px; border-radius:50%; border:1.4px solid var(--fg);
  position:relative; flex-shrink:0;
}
.nav-tag .dot::after{
  content:''; position:absolute; inset:3.5px; border-radius:50%; background:var(--fg);
}
.cart-link{
  font-family: var(--mono); font-size:12px; display:flex; align-items:center; gap:6px;
  border:1px solid var(--line); border-radius:999px; padding:7px 13px;
  transition: border-color .2s ease;
}
.cart-link:hover{ border-color: var(--fg); }
.cart-count{
  background: var(--fg); color: var(--bg);
  font-size:10px; width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.menu-toggle{ display:none; width:26px; height:18px; position:relative; }
.menu-toggle span{
  position:absolute; left:0; width:100%; height:2px; background:var(--fg);
  transition: transform .25s ease, opacity .25s ease;
}
.menu-toggle span:nth-child(1){ top:0; }
.menu-toggle span:nth-child(2){ top:8px; }
.menu-toggle span:nth-child(3){ top:16px; }
.menu-toggle.open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity:0; }
.menu-toggle.open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

@media (max-width:900px){
  .nav-links{
    position:fixed; inset:65px 0 auto 0; flex-direction:column; gap:0;
    background: var(--bg); border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .nav-links.open{ max-height:260px; }
  .nav-links a{ padding:16px 40px; border-bottom:1px solid var(--line); }
  .menu-toggle{ display:block; }
  .nav-tag{ display:none; }
}

/* ---------- Buttons ---------- */
.btn{
  font-family: var(--mono); font-size:12px; letter-spacing:0.05em;
  text-transform:uppercase; padding:15px 30px; display:inline-block;
  transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}
.btn-solid{ background: var(--fg); color: var(--bg); }
.btn-solid:hover{ background:#DEDCD5; transform: translateY(-2px); }
.btn-outline{ border:1px solid var(--fg); color: var(--fg); }
.btn-outline:hover{ background: var(--fg); color: var(--bg); }

/* ---------- Studio photo tiles ---------- */
.studio{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 90% at 30% 0%, var(--surface-1), var(--surface-2) 70%);
}
.studio img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position: center 15%;
}
.studio .garment{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.studio .garment svg{ width:42%; height:42%; opacity:0.82; }
.studio .studio-tag{
  position:absolute; bottom:14px; left:14px;
  font-family: var(--mono); font-size:10px; letter-spacing:0.08em;
  color: #fff; text-transform:uppercase; text-shadow: 0 1px 6px rgba(0,0,0,0.55);
  z-index:2;
}

/* ---------- Numbered grid (shop) ---------- */
.grid-numbered{
  display:grid; grid-template-columns: repeat(3,1fr);
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
@media (max-width:900px){ .grid-numbered{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .grid-numbered{ grid-template-columns: 1fr; } }

.cell{
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  display:flex; flex-direction:column;
}
.cell-media{ aspect-ratio: 1/1.05; position:relative; }
.cell-media .idx{
  position:absolute; top:16px; left:16px;
  font-family: var(--mono); font-size:14px; color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
  z-index:2;
}
.cell-media .price{
  position:absolute; bottom:14px; right:14px;
  font-family: var(--mono); font-size:13px; color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
  z-index:2;
}
.cell-info{ padding:16px 18px 22px; }
.cell-info .name{ font-size:15px; font-weight:600; margin-bottom:3px; color: var(--fg); }
.cell-info .fit{ font-family: var(--mono); font-size:11px; color: var(--fg-dim); text-transform:uppercase; letter-spacing:0.04em; }
.cell a.cell-link{ display:flex; flex-direction:column; height:100%; }
.cell a.cell-link:hover .cell-media{ filter:brightness(0.94); }

/* ---------- Footer ---------- */
footer.site-foot{
  background: var(--bg); color: var(--fg);
}
.foot-full{ border-top:1px solid var(--line); }
.foot-grid{
  max-width:1400px; margin:0 auto; padding: 56px 40px 0;
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:32px;
}
@media (max-width:760px){ .foot-grid{ grid-template-columns:1fr 1fr; padding:40px 20px 0; } }
.foot-grid h4{
  font-family: var(--mono); font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; color: var(--fg-dim); margin-bottom:16px;
}
.foot-grid a{ display:block; font-size:14px; padding:6px 0; color: var(--fg); }
.foot-grid a:hover{ color: var(--surface-1); }
.foot-grid p{ color: var(--fg-dim); font-size:13px; max-width:240px; margin-top:14px; }

.foot-bar{
  max-width:1400px; margin:0 auto; padding: 22px 40px;
  display:flex; justify-content:space-between; align-items:center;
  font-family: var(--mono); font-size:11px; letter-spacing:0.06em;
  text-transform:uppercase; flex-wrap:wrap; gap:10px; color: var(--fg-dim);
}
@media (max-width:640px){ .foot-bar{ padding:22px 20px; justify-content:center; text-align:center; } }