/* Stride.Co — Shoe Store | Neo-brutalist sneaker culture */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
:root{
  --ink:#0e0e0e; --paper:#f7f5ef; --orange:#ff5a1f; --line:#0e0e0e;
  --display:'Anton',sans-serif; --mono:'Roboto Mono',monospace;
}
body{background:var(--paper);color:var(--ink);font-family:var(--mono);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

.header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem clamp(1.2rem,4vw,3rem);border-bottom:4px solid var(--ink);position:sticky;top:0;background:var(--paper);z-index:40}
.logo{font-family:var(--display);font-size:1.6rem;letter-spacing:.02em}
.logo span{color:var(--orange)}
header nav{display:flex;gap:1.8rem;font-weight:700;font-size:.82rem;text-transform:uppercase}
header nav a{border-bottom:3px solid transparent}
header nav a:hover{border-color:var(--orange)}
.cart-btn{background:var(--ink);color:var(--paper);border:none;padding:.6rem 1rem;font-weight:700;font-size:.8rem}
.menu-btn{display:none;background:var(--orange);border:3px solid var(--ink);padding:.55rem 1rem;font-weight:700}
.mobile-nav{display:none;flex-direction:column;border-bottom:4px solid var(--ink)}
.mobile-nav.open{display:flex}
.mobile-nav a{padding:1rem 1.5rem;border-top:2px solid var(--ink);font-weight:700;text-transform:uppercase}

.hero{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;max-width:1320px;margin:0 auto;padding:2rem clamp(1.2rem,4vw,3rem);gap:1rem}
.hero h1{font-family:var(--display);font-size:clamp(3rem,10vw,7rem);line-height:.9}
.hero img{border:4px solid var(--ink);box-shadow:10px 10px 0 var(--ink)}
.hero-badge{position:absolute;top:1rem;right:clamp(1.2rem,4vw,3rem);background:var(--orange);border:3px solid var(--ink);padding:.7rem 1rem;font-family:var(--display);text-align:center;transform:rotate(6deg);font-size:.9rem}

.ticker{background:var(--ink);color:var(--paper);overflow:hidden;white-space:nowrap;padding:.8rem 0;border-top:4px solid var(--ink);border-bottom:4px solid var(--ink)}
.ticker-track{display:inline-flex;gap:2.5rem;font-family:var(--display);font-size:.95rem;animation:t 20s linear infinite}
.ticker-track span::after{content:"✕";margin-left:2.5rem;color:var(--orange)}
@keyframes t{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.shop{max-width:1320px;margin:0 auto;padding:clamp(3rem,6vw,5rem) 1.5rem}
.shop h2,.viewer h2,.drops h2{font-family:var(--display);font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:2rem}
.shoe-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.shoe-card{position:relative;border:3px solid var(--ink);background:#fff;padding:1rem;transition:transform .2s}
.shoe-card:hover{transform:translate(-4px,-4px);box-shadow:6px 6px 0 var(--ink)}
.shoe-card img{margin-bottom:.8rem;aspect-ratio:4/3;object-fit:cover}
.shoe-card h3{font-family:var(--display);font-size:1.15rem}
.shoe-card p{font-weight:700;color:var(--orange)}
.tag{position:absolute;top:.6rem;left:.6rem;background:var(--orange);color:var(--ink);font-weight:700;font-size:.7rem;padding:.25rem .5rem;border:2px solid var(--ink)}
.tag.alt{background:#111;color:#fff}

.viewer{max-width:1000px;margin:0 auto;padding:clamp(3rem,6vw,5rem) 1.5rem;text-align:center}
.viewer-stage{position:relative;border:4px solid var(--ink);background:#fff;padding:1rem;cursor:grab;user-select:none}
.viewer-stage img{margin:0 auto;max-height:420px}
.viewer-hint{position:absolute;bottom:.8rem;right:1.2rem;font-size:.8rem;font-weight:700;background:var(--paper);border:2px solid var(--ink);padding:.3rem .6rem}
.size-select{margin-top:2rem}
.option-label{font-weight:700;text-transform:uppercase;font-size:.8rem;margin-bottom:.8rem}
.size-grid{display:flex;gap:.6rem;justify-content:center;margin-bottom:1.6rem;flex-wrap:wrap}
.size-grid button{border:3px solid var(--ink);background:#fff;width:48px;height:48px;font-weight:700;font-size:1rem}
.size-grid button.active,.size-grid button:hover{background:var(--ink);color:var(--paper)}
.btn{background:var(--orange);border:3px solid var(--ink);padding:1rem 2rem;font-family:var(--display);font-size:1rem;letter-spacing:.02em}
.btn:hover{background:var(--ink);color:var(--paper)}
.form-note{margin-top:1rem;font-weight:700}

.drops{max-width:900px;margin:0 auto;padding:clamp(3rem,6vw,5rem) 1.5rem}
.drop-list{list-style:none;border:3px solid var(--ink)}
.drop-list li{display:grid;grid-template-columns:100px 1fr auto;gap:1rem;align-items:center;padding:1rem 1.2rem;border-bottom:3px solid var(--ink)}
.drop-list li:last-child{border-bottom:none}
.date{font-family:var(--display)}
.name{font-weight:700}
.status{font-size:.75rem;font-weight:700;padding:.3rem .6rem;border:2px solid var(--ink)}
.status.live{background:var(--orange)}

.about{max-width:1320px;margin:0 auto;padding:clamp(3rem,6vw,5rem) 1.5rem;display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center;border-top:4px solid var(--ink)}
.about img{border:4px solid var(--ink)}
.about h2{font-family:var(--display);font-size:clamp(1.8rem,4vw,2.4rem);margin-bottom:1rem}
.about p{margin-bottom:1.6rem}
.stat-row{display:flex;gap:2rem;flex-wrap:wrap}
.stat-row strong{display:block;font-family:var(--display);font-size:1.8rem;color:var(--orange)}
.stat-row span{font-size:.8rem;font-weight:700;text-transform:uppercase}

.footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;padding:2rem clamp(1.2rem,4vw,3rem);border-top:4px solid var(--ink)}
.footer p{font-size:.8rem}

@media (max-width:900px){
  header nav{display:none}
  .cart-btn{display:none}
  .menu-btn{display:block}
  .hero{grid-template-columns:1fr}
  .hero h1{font-size:3.2rem}
  .shoe-grid{grid-template-columns:repeat(2,1fr)}
  .about{grid-template-columns:1fr}
  .drop-list li{grid-template-columns:70px 1fr;grid-template-areas:"date name" "status status"}
}
@media (max-width:520px){
  .shoe-grid{grid-template-columns:1fr}
}