/* ==========================================================================
   PK DESIGNS — streetwear label. Red · Black · Bone. Drop-culture, product-forward.
   Display: Archivo Black (heavy grotesk) · Body/UI: Archivo. Motion: transform/opacity only.
   ========================================================================== */

:root{
  --red:#FF1E27;        /* brand red — the signal color */
  --red-hi:#FF4A4F;     /* hover lift */
  --red-deep:#C1121F;   /* depth / pressed */
  --black:#000000;
  --bg:#0A0A0A;         /* page */
  --raise:#111111;      /* ticker / bands */
  --card:#121212;       /* product cards */
  --line:#262626;       /* borders */
  --line-soft:#1B1B1B;  /* hairlines */
  --bone:#F2EFE9;       /* primary text */
  --bone-dim:#A5A19A;   /* secondary */
  --bone-faint:#6B6862; /* metadata */
  --display:"Archivo Black", system-ui, sans-serif;
  --body:"Archivo", system-ui, sans-serif;
  --maxw:1200px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--bone);
  font-family:var(--body); font-weight:400; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--red); color:#fff; }

/* subtle film grain over the whole page */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.05;
  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='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--body); font-weight:800; font-size:14px; letter-spacing:.06em;
  text-transform:uppercase; padding:15px 26px; border-radius:2px; cursor:pointer;
  border:2px solid transparent; transition:transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
  will-change:transform;
}
.btn:active{ transform:translateY(1px); }
.btn-red{ background:var(--red); color:#fff; border-color:var(--red); }
.btn-red:hover{ background:var(--red-hi); border-color:var(--red-hi); transform:translateY(-2px); }
.btn-line{ background:transparent; color:var(--bone); border-color:var(--line); }
.btn-line:hover{ border-color:var(--bone); transform:translateY(-2px); }
.btn-cop{ width:100%; background:transparent; color:var(--bone); border-color:var(--line); padding:12px 18px; font-size:12.5px; }
.btn-cop:hover{ background:var(--red); border-color:var(--red); color:#fff; }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:12px clamp(16px,4vw,40px);
  background:rgba(10,10,10,.82); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line-soft);
}
.brand{ display:flex; align-items:center; flex:0 0 auto; }
.brand-logo{ height:52px; width:auto; transition:transform .2s var(--ease); }
.brand:hover .brand-logo{ transform:scale(1.04) rotate(-1deg); }
.nav-links{ display:flex; gap:30px; margin-left:auto; }
.nav-links a{
  font-weight:700; font-size:13px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--bone-dim); position:relative; padding:4px 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:100%; height:2px; background:var(--red);
  transform:scaleX(0); transform-origin:left; transition:transform .22s var(--ease);
}
.nav-links a:hover{ color:var(--bone); }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-right{ display:flex; align-items:center; gap:14px; }
.nav-cta{
  font-weight:800; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  background:var(--red); color:#fff; padding:11px 18px; border-radius:2px;
  transition:transform .18s var(--ease), background .18s var(--ease);
}
.nav-cta:hover{ background:var(--red-hi); transform:translateY(-2px); }
.cart{
  position:relative; display:grid; place-items:center; width:42px; height:42px;
  background:transparent; border:1px solid var(--line); border-radius:2px; color:var(--bone);
  cursor:pointer; transition:border-color .18s var(--ease), color .18s var(--ease);
}
.cart:hover{ border-color:var(--red); color:var(--red); }
.cart-badge{
  position:absolute; top:-7px; right:-7px; min-width:18px; height:18px; padding:0 4px;
  display:grid; place-items:center; background:var(--red); color:#fff;
  font-size:10px; font-weight:800; border-radius:9px; border:2px solid var(--bg);
}

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(48px,9vw,110px) clamp(16px,4vw,40px) clamp(60px,8vw,90px);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  min-height:88vh; justify-content:center;
}
.hero-grid{
  position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 42%, #000 30%, transparent 78%);
          mask-image:radial-gradient(ellipse 75% 65% at 50% 42%, #000 30%, transparent 78%);
}
/* red glow behind the mark */
.hero::before{
  content:""; position:absolute; z-index:0; top:30%; left:50%; transform:translate(-50%,-50%);
  width:min(640px,80vw); height:min(640px,80vw);
  background:radial-gradient(circle, rgba(255,30,39,.22), transparent 62%);
  filter:blur(20px); pointer-events:none;
}
.hero-inner{ position:relative; z-index:1; max-width:940px; display:flex; flex-direction:column; align-items:center; }
.hero-tags{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:30px; }
.tag{
  font-weight:800; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:7px 13px; border:1px solid var(--line); border-radius:2px; color:var(--bone-dim);
}
.tag-red{ background:var(--red); border-color:var(--red); color:#fff; }
.hero-logo{
  width:min(720px,90vw); height:auto; margin:0 auto 30px;
  filter:drop-shadow(0 14px 40px rgba(0,0,0,.6));
  animation:heroRise .8s var(--ease) both;
}
@keyframes heroRise{ from{ opacity:0; transform:translateY(20px) scale(.98); } to{ opacity:1; transform:none; } }
.hero-title{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(15px,2.4vw,24px); letter-spacing:.12em; line-height:1.2; color:var(--bone);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center;
}
.hero-title .sep{ color:var(--bone-faint); }
.hero-title .red{ color:var(--red); }
.hero-lede{
  margin:22px auto 0; max-width:560px; color:var(--bone-dim); font-size:16px; line-height:1.6;
}
.hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:34px; }
.hero-foot{
  position:absolute; bottom:22px; left:0; right:0; z-index:1;
  display:flex; justify-content:space-between; padding:0 clamp(16px,4vw,40px);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-faint);
}

/* ---------- ticker ---------- */
.ticker{
  background:var(--red); color:#fff; overflow:hidden; white-space:nowrap;
  border-top:2px solid #000; border-bottom:2px solid #000; padding:12px 0;
}
.ticker-track{ display:inline-flex; animation:scroll 26s linear infinite; will-change:transform; }
.ticker-track span{
  font-family:var(--display); font-size:15px; letter-spacing:.05em; text-transform:uppercase;
  padding-right:0;
}
.ticker-track em{ font-style:normal; opacity:.6; padding:0 14px; }
@keyframes scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- section scaffolding ---------- */
section{ padding:clamp(60px,9vw,120px) clamp(16px,4vw,40px); }
.section-head{ max-width:var(--maxw); margin:0 auto clamp(34px,5vw,54px); }
.eyebrow{
  font-weight:800; font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone-dim); margin-bottom:14px;
}
.eyebrow.center{ text-align:center; }
.eyebrow .red{ color:var(--red); }
.section-title{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(34px,7vw,76px); line-height:.94; letter-spacing:-.01em; color:var(--bone);
}
.section-title .red{ color:var(--red); }
.section-note{ margin-top:18px; max-width:560px; color:var(--bone-dim); font-size:15px; }

/* ---------- lookbook plates ---------- */
.look-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  grid-auto-rows:200px;
}
.plate{
  position:relative; overflow:hidden; border:1px solid var(--line); border-radius:6px;
  display:flex; align-items:flex-end; padding:18px;
  background:#141414; transition:transform .3s var(--ease), border-color .3s var(--ease);
}
.plate:hover{ transform:translateY(-4px); border-color:var(--red); }
.plate-tall{ grid-row:span 2; }
.plate-wide{ grid-column:span 2; }
.p1{ background:
  repeating-linear-gradient(45deg,#1a1a1a 0 14px,#141414 14px 28px); }
.p2{ background:radial-gradient(circle at 70% 30%, rgba(255,30,39,.28), transparent 55%), #141414; }
.p3{ background:linear-gradient(135deg,#1c1c1c,#0e0e0e); }
.p4{ background:radial-gradient(circle at 30% 70%, rgba(255,30,39,.22), transparent 58%), #161616; }
.plate-tag{
  position:absolute; top:14px; left:14px; font-size:10px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone-faint);
}
.plate-cap{
  font-family:var(--display); font-size:clamp(15px,2vw,22px); text-transform:uppercase;
  letter-spacing:.01em; color:var(--bone); position:relative; z-index:1;
}

/* ---------- product grid ---------- */
.grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .28s var(--ease), border-color .28s var(--ease);
}
.card:hover{ transform:translateY(-6px); border-color:var(--red); }
.card-visual{
  position:relative; aspect-ratio:1/1; display:grid; place-content:center; text-align:center;
  border-bottom:1px solid var(--line);
  background:linear-gradient(160deg,#171717,#0e0e0e);
}
.card:hover .card-visual .visual-mark{ color:var(--red); transform:scale(1.05); }
.visual-mark{
  font-family:var(--display); font-size:clamp(34px,5vw,52px); text-transform:uppercase;
  color:var(--bone); letter-spacing:.02em; transition:transform .3s var(--ease), color .3s var(--ease);
}
.visual-sub{
  font-size:11px; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--bone-faint); margin-top:6px;
}
.card-flag{
  position:absolute; top:12px; right:12px; font-size:10px; font-weight:800; letter-spacing:.12em;
  background:var(--red); color:#fff; padding:4px 8px; border-radius:2px;
}
.v-tee.alt, .v-hoodie.alt, .v-cap.alt, .v-sticker.alt{ background:linear-gradient(160deg,#1c1416,#0e0e0e); }
.card-info{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:14px; flex:1; }
.card-line{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.card-info h3{
  font-family:var(--body); font-weight:800; font-size:15px; text-transform:uppercase;
  letter-spacing:.01em; line-height:1.25; color:var(--bone);
}
.price{ font-family:var(--display); font-size:15px; color:var(--red); white-space:nowrap; }

/* ---------- about ---------- */
.about{ background:var(--raise); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.about-inner{ max-width:var(--maxw); margin:0 auto; }
.about-title{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(30px,6vw,64px); line-height:.98; letter-spacing:-.01em; margin:8px 0 26px;
}
.about-title .red{ color:var(--red); }
.about-body{ max-width:620px; color:var(--bone-dim); font-size:16px; line-height:1.7; }
.about-stats{ display:flex; flex-wrap:wrap; gap:clamp(30px,6vw,80px); margin-top:44px; }
.about-stats > div{ display:flex; flex-direction:column; }
.stat-num{ font-family:var(--display); font-size:clamp(34px,5vw,54px); color:var(--red); line-height:1; }
.stat-label{ font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-faint); margin-top:8px; }

/* ---------- notify ---------- */
.notify{ text-align:center; position:relative; overflow:hidden; }
.notify::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:.9;
  background:radial-gradient(ellipse 60% 80% at 50% 0%, rgba(255,30,39,.14), transparent 60%);
}
.notify-inner{ position:relative; z-index:1; max-width:640px; margin:0 auto; }
.notify-title{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(32px,6vw,66px); line-height:.96; letter-spacing:-.01em; margin:10px 0 16px;
}
.notify-title .red{ color:var(--red); }
.notify-lede{ color:var(--bone-dim); font-size:16px; max-width:460px; margin:0 auto 30px; }
.notify-form{ display:flex; gap:10px; max-width:480px; margin:0 auto; }
.notify-form input[type=email]{
  flex:1; background:#0e0e0e; border:1px solid var(--line); border-radius:2px; color:var(--bone);
  padding:15px 16px; font-family:var(--body); font-size:15px; transition:border-color .2s var(--ease);
}
.notify-form input[type=email]::placeholder{ color:var(--bone-faint); }
.notify-form input[type=email]:focus{ outline:none; border-color:var(--red); }
.notify-form .btn-red{ white-space:nowrap; }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.notify-note{ margin-top:16px; font-size:13px; color:var(--bone-faint); letter-spacing:.02em; }
.notify-note.ok{ color:var(--red); font-weight:700; }
.notify-note.err{ color:#ff6b6b; font-weight:700; }

/* ---------- footer ---------- */
.footer{ border-top:1px solid var(--line-soft); padding:clamp(48px,7vw,80px) clamp(16px,4vw,40px) 40px; }
.footer-top{ max-width:var(--maxw); margin:0 auto clamp(30px,5vw,50px); display:flex; justify-content:center; }
.footer-logo{ height:clamp(70px,12vw,120px); width:auto; opacity:.95; }
.footer-row{
  max-width:var(--maxw); margin:0 auto; display:flex; flex-wrap:wrap; gap:20px;
  align-items:center; justify-content:space-between; border-top:1px solid var(--line-soft); padding-top:24px;
}
.footer-links{ display:flex; gap:24px; }
.footer-links a{
  font-weight:700; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--bone-dim);
  display:inline-flex; align-items:center; gap:8px; transition:color .18s var(--ease);
}
.footer-links a:hover{ color:var(--bone); }
.soon{ font-size:9px; font-weight:800; letter-spacing:.1em; background:var(--red); color:#fff; padding:3px 6px; border-radius:2px; }
.footer-meta{ font-size:12px; letter-spacing:.03em; color:var(--bone-faint); }

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .look-grid{ grid-template-columns:repeat(2,1fr); }
  .grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:720px){
  .nav-links{ display:none; }
  .hero-title{ font-size:13px; }
  .look-grid{ grid-auto-rows:160px; }
}
@media(max-width:480px){
  .grid{ grid-template-columns:1fr 1fr; }
  .notify-form{ flex-direction:column; }
  .hero-foot{ font-size:9px; }
}

@media(prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  .ticker-track{ animation:none; }
}