/* Campaign photography overrides */
.hero-image { background-image: url('assets/hero-v4.png'); background-position: center; }
.look:first-child { background-image: url('assets/off-duty-set-v4.png'); }
.look:last-child { background-image: url('assets/performance-v4.png'); }
.benefits { grid-template-columns: repeat(3, 1fr); }

/* Mobile-first refinements for the editorial storefront */
@media (max-width: 850px) {
  html { scroll-padding-top: 64px; }
  body { -webkit-text-size-adjust: 100%; }
  .top {
    height: 64px;
    padding: 0 max(18px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left));
    background: linear-gradient(#080808e8, #08080800);
  }
  .top.scrolled { height: 58px; }
  .brand { font-size: 13px; }
  .menu { gap: 0; }
  .menu a:last-child {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-left: 20px;
  }

  .hero { min-height: 100svh; height: auto; }
  .hero-copy {
    min-height: 100svh;
    height: auto;
    padding: max(124px, 17svh) 20px max(34px, env(safe-area-inset-bottom));
    background: linear-gradient(90deg, #080808eb 0%, #0808089c 48%, #08080825 100%);
  }
  .hero h1 {
    max-width: 6ch;
    font-size: clamp(60px, 18.5vw, 88px);
    line-height: .78;
  }
  .hero-meta { gap: 8px; margin-top: 42px; }
  .hero-meta p { margin: 0; }
  .hero-cta {
    width: 104px;
    height: 104px;
    right: 16px;
    bottom: max(20px, env(safe-area-inset-bottom));
  }
  .ticker { height: 40px; }

  .intro { padding: 82px 20px 88px; }
  .intro h2 { font-size: clamp(54px, 16vw, 70px); line-height: .8; }
  .intro p { font-size: 16px; line-height: 1.65; }

  .piece { min-height: 0; }
  .piece-visual { min-height: 54svh; }
  .piece-visual img { height: 54svh; padding: 12px; }
  .piece-info { min-height: 390px; padding: 42px 20px 36px; gap: 30px; }
  .piece-info h3 { font-size: clamp(44px, 14vw, 58px); }
  .piece-info p { font-size: 16px; margin: 0; }
  .piece-foot { align-items: center; gap: 18px; }
  .piece-button { min-height: 48px; padding: 14px 16px; }

  .look { min-height: 72svh; }
  .look-copy { left: 20px; right: 20px; bottom: 30px; }
  .look-copy h2 { font-size: clamp(50px, 15vw, 68px); }

  .varsity-copy { min-height: 68svh; padding: 76px 20px 48px; gap: 54px; }
  .varsity-copy h2 { font-size: clamp(58px, 18vw, 78px); }
  .varsity-copy p { font-size: 16px; }
  .varsity-product { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .varsity-product img { height: 46svh; min-width: 0; }

  .manifesto { padding: 96px 20px 104px; }
  .manifesto .num { font-size: min(44vw, 180px); margin-bottom: 64px; }
  .manifesto blockquote { font-size: clamp(40px, 12vw, 58px); }
  .manifesto p { font-size: 16px; }
  .benefit { min-height: 74px; display: grid; place-items: center; line-height: 1.45; }

  .footer-logo { font-size: clamp(62px, 20vw, 96px); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 42px 24px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-grid a { min-height: 36px; display: flex; align-items: center; font-size: 14px; }
  .legal { line-height: 2; }

  .modal {
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .modal-gallery {
    display: flex;
    min-height: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .modal-gallery::-webkit-scrollbar { display: none; }
  .modal-gallery img {
    flex: 0 0 100%;
    width: 100%;
    height: 56svh;
    scroll-snap-align: start;
    padding: 12px;
  }
  .modal-info { padding: 44px 20px max(88px, calc(64px + env(safe-area-inset-bottom))); overflow: visible; }
  .modal-info h2 { font-size: clamp(44px, 14vw, 62px); margin: 20px 0; }
  .modal .x, .cart .x {
    position: fixed;
    z-index: 4;
    top: max(14px, env(safe-area-inset-top));
    right: 14px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f3f1ebdd;
  }
  .label { font-size: 12px; margin-top: 26px; }
  .option { min-width: 52px; min-height: 48px; font-size: 14px; }
  .add, .checkout { min-height: 56px; font-size: 12px; }
  .details { font-size: 15px; }

  .cart {
    width: 100%;
    padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .cart-list { margin-top: 72px; }
  .cart-item { grid-template-columns: 76px 1fr 44px; align-items: center; }
  .cart-item img { width: 76px; height: 76px; }
  .cart-item button { width: 44px; height: 44px; border: 0; background: transparent; font-size: 24px; }
}

@media (hover: none) and (pointer: coarse) {
  .piece:hover .piece-visual img:first-child { opacity: 1; }
  .piece:hover .piece-visual img:last-child { opacity: 0; }
}

@media (max-width: 390px) {
  .hero h1 { font-size: 58px; }
  .hero-cta { width: 92px; height: 92px; }
  .intro h2 { font-size: 52px; }
  .piece-info h3 { font-size: 44px; }
  .piece-foot { align-items: flex-start; flex-direction: column; }
  .piece-button { width: 100%; }
  .varsity-copy h2 { font-size: 58px; }
  .benefits { grid-template-columns: 1fr; }
  .benefit { border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 850px) and (orientation: landscape) {
  .hero h1 { font-size: 15vh; }
  .hero-copy { padding-top: 92px; }
  .hero-cta { width: 88px; height: 88px; }
  .modal-gallery img { height: 82svh; }
}

/* Drop 001 motion and editorial system */
body::before,
body::after {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: #080808;
  animation: campaign-intro 1.8s cubic-bezier(.22,.61,.36,1) forwards;
}

body::before {
  content: "00";
  color: #eeeae0;
  font-size: clamp(130px, 26vw, 390px);
  font-weight: 700;
  letter-spacing: -.17em;
  line-height: .7;
  padding-right: .17em;
}

body::after {
  content: "DROP 001 · OFF DUTY";
  align-items: end;
  padding-bottom: 7vh;
  color: #817e77;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .34em;
}

.shell::before {
  content: "";
  position: fixed;
  top: 0;
  left: 64px;
  right: 0;
  height: 2px;
  z-index: 80;
  background: #7a202c;
  transform: scaleX(0);
  transform-origin: left;
  animation: reading-progress linear;
  animation-timeline: scroll(root block);
}

.hero h1 {
  animation: hero-type-in 1s .95s cubic-bezier(.16,1,.3,1) both;
}

.hero .kicker,
.hero-meta,
.hero-cta {
  animation: hero-detail-in .8s 1.25s ease both;
}

.hero-cta {
  transition: transform .35s cubic-bezier(.16,1,.3,1), background .35s;
}

.hero-cta:hover {
  transform: scale(1.055) rotate(4deg);
  background: #fffdf6;
}

.shop::before {
  content: "DROP 001     /     FIVE PIECES     /     NOW AVAILABLE";
  display: block;
  padding: 20px 4vw;
  border-bottom: 1px solid #bdbab2;
  color: #681c27;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: pre;
}

.piece {
  overflow: hidden;
}

.piece-visual::after {
  content: "FRONT  /  BACK";
  position: absolute;
  left: 22px;
  bottom: 20px;
  z-index: 3;
  padding: 10px 12px;
  border: 1px solid rgba(10,10,10,.58);
  background: rgba(238,236,230,.82);
  backdrop-filter: blur(10px);
  color: #111;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .17em;
}

.piece-visual img {
  transition: opacity .55s ease, transform .8s cubic-bezier(.16,1,.3,1);
}

.piece:hover .piece-visual img:first-child {
  transform: scale(.985);
}

.piece:hover .piece-visual img:last-child {
  transform: scale(1.025);
}

.piece-index {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0;
}

.piece-index::before {
  content: "";
  width: 38px;
  height: 1px;
  background: currentColor;
}

.piece-index::after { font-size: 10px; letter-spacing: .24em; }
.piece:nth-of-type(1) .piece-index::after { content: "001 / 005 · STATEMENT"; }
.piece:nth-of-type(2) .piece-index::after { content: "002 / 005 · ESSENTIAL"; }
.piece:nth-of-type(3) .piece-index::after { content: "003 / 005 · RECOVERY"; }
.piece:nth-of-type(4) .piece-index::after { content: "004 / 005 · TRAINING"; }

.manifesto {
  position: relative;
  min-height: 92vh;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.manifesto::before {
  content: "00";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  color: transparent;
  -webkit-text-stroke: 1px rgba(104,28,39,.7);
  font-size: min(48vw, 760px);
  font-weight: 700;
  letter-spacing: -.18em;
  line-height: .7;
  transform: translate(-52%,-50%);
  animation: zero-drift linear both;
  animation-timeline: view(block 90% 5%);
}

.manifesto .num {
  color: #681c27;
  text-shadow: 0 0 80px rgba(104,28,39,.22);
}

.modal,
.cart {
  backdrop-filter: blur(18px);
}

.add,
.checkout {
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, background .25s ease;
}

.add:hover,
.checkout:hover {
  background: #681c27;
}

.add:active,
.checkout:active {
  transform: scale(.985);
}

@keyframes campaign-intro {
  0% { opacity: 0; visibility: visible; }
  18%, 66% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes hero-type-in {
  from { opacity: 0; transform: translateY(44px); clip-path: inset(100% 0 0); }
  to { opacity: 1; transform: none; clip-path: inset(0); }
}

@keyframes hero-detail-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@keyframes reading-progress {
  to { transform: scaleX(1); }
}

@keyframes zero-drift {
  from { transform: translate(-58%,-50%) scale(.8); opacity: .15; }
  to { transform: translate(-48%,-50%) scale(1.18); opacity: 1; }
}

@media (max-width: 850px) {
  body::before { font-size: 48vw; }
  body::after { padding-bottom: max(6vh, env(safe-area-inset-bottom)); font-size: 8px; }
  .shell::before { left: 0; }
  .shop::before { padding: 17px 20px; font-size: 8px; letter-spacing: .17em; overflow: hidden; }
  .piece-visual::after { left: 14px; bottom: 14px; }
  .manifesto { min-height: 78svh; }
  .manifesto::before { font-size: 82vw; }
  .modal .add {
    position: sticky;
    bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 3;
    box-shadow: 0 12px 34px rgba(0,0,0,.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after { display: none; }
  .shell::before,
  .manifesto::before { animation: none; }
  .hero h1,
  .hero .kicker,
  .hero-meta,
  .hero-cta { animation: none; }
}