:root {
  --black: #0a0a0a;
  --yellow: #f5e600;
  --white: #f5f5f0;
  --gray: #888;
  --dark-gray: #1a1a1a;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--black);
  color: var(--white);
  font-family: 'DM Mono', monospace;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* MANIFESTO */
.manifesto {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 8vw;
  position: relative;
  overflow: hidden;
}
.manifesto__inner { position: relative; z-index: 1; }
.manifesto__eyebrow {
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--yellow);
  margin-bottom: 40px;
  text-transform: uppercase;
}
.manifesto__headline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(72px, 14vw, 200px);
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--white);
  display: flex;
  flex-direction: column;
}
.manifesto__line--indent { padding-left: 8vw; }
.manifesto__line--accent { color: var(--yellow); }
.manifesto__sub {
  margin-top: 48px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--gray);
  max-width: 440px;
}
.manifesto__stripe {
  position: absolute;
  top: 0; right: 0;
  width: 6px;
  height: 100%;
  background: var(--yellow);
}

/* PRODUCT */
.product {
  background: var(--dark-gray);
  padding: 120px 8vw;
}
.product__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 48px;
}
.product__item { display: flex; flex-direction: column; gap: 20px; }
.product__mockup {
  aspect-ratio: 4/5;
  background: var(--black);
  border: 2px solid #2a2a2a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  position: relative;
  overflow: hidden;
}
.product__mockup::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    #111 10px,
    #111 12px
  );
  opacity: 0.3;
}
.product__mockup--hoodie { background: #111; }
.product__mockup--tee { background: #0d0d0d; }
.product__mockup--cap { background: #101010; }
.product__graphic {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 4vw, 48px);
  color: var(--yellow);
  letter-spacing: 0.1em;
  position: relative; z-index: 1;
}
.product__sub {
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--gray);
  position: relative; z-index: 1;
}
.product__name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 0.05em;
}
.product__desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--gray);
}

/* AESTHETIC */
.aesthetic {
  padding: 120px 8vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.aesthetic__label {
  font-size: 10px;
  letter-spacing: 0.4em;
  color: var(--yellow);
  display: block;
  margin-bottom: 32px;
}
.aesthetic__heading {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  color: var(--white);
  margin-bottom: 32px;
}
.aesthetic__body {
  font-size: 14px;
  line-height: 1.8;
  color: var(--gray);
  margin-bottom: 20px;
}
.aesthetic__visual {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 400px;
}
.aesthetic__block--yellow {
  flex: 1;
  background: var(--yellow);
}
.aesthetic__block--text {
  background: var(--black);
  border: 2px solid var(--yellow);
  flex: 1.5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 24px 32px;
  gap: 8px;
}
.aesthetic__block--text span {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px;
  color: var(--yellow);
  letter-spacing: 0.1em;
}
.aesthetic__block--diagonal {
  height: 60px;
  background: repeating-linear-gradient(
    -45deg,
    var(--yellow),
    var(--yellow) 8px,
    var(--black) 8px,
    var(--black) 16px
  );
}

/* CLOSING */
.closing {
  background: var(--yellow);
  padding: 120px 8vw;
  color: var(--black);
}
.closing__top { margin-bottom: 40px; }
.closing__tag {
  font-size: 10px;
  letter-spacing: 0.4em;
  font-weight: 400;
}
.closing__headline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1;
  color: var(--black);
  max-width: 800px;
  margin-bottom: 32px;
}
.closing__sub {
  font-size: 14px;
  color: #333;
}

/* FOOTER */
.footer {
  background: var(--black);
  border-top: 1px solid #1a1a1a;
  padding: 48px 8vw;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.footer__logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  color: var(--yellow);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.footer__tagline { font-size: 12px; color: var(--gray); }
.footer__copy { font-size: 11px; color: #444; }

/* RESPONSIVE */
@media (max-width: 768px) {
  .manifesto { padding: 60px 6vw; }
  .product { padding: 80px 6vw; }
  .aesthetic { grid-template-columns: 1fr; gap: 60px; padding: 80px 6vw; }
  .closing { padding: 80px 6vw; }
  .footer { flex-direction: column; gap: 24px; align-items: flex-start; }
}