@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Noto+Sans+SC:wght@400;500;700;900&family=Space+Mono:wght@400;700&display=swap");

:root {
  --paper: #f4f0e7;
  --ink: #141414;
  --red: #ed3d2e;
  --blue: #2470dc;
  --yellow: #f5c929;
  --line: 2px solid var(--ink);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Noto Sans SC", sans-serif;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

.noise {
  position: fixed;
  inset: 0;
  z-index: 20;
  opacity: .055;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.site-header {
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4vw;
  border-bottom: var(--line);
  position: relative;
  z-index: 10;
}

.brand,
.footer-brand {
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  letter-spacing: -.06em;
}

.brand span { color: var(--red); }

nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 48px); font-weight: 700; }
nav a:not(.nav-pill):hover { color: var(--red); }
.nav-pill { border: var(--line); padding: 10px 18px; transition: .2s ease; }
.nav-pill:hover { background: var(--ink); color: var(--paper); }

.hero {
  min-height: calc(100vh - 84px);
  padding: clamp(28px, 4vw, 58px) 4vw 4vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hero-kicker, .eyebrow, .issue {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .11em;
}

.hero-kicker { display: flex; align-items: center; gap: 16px; }
.kicker-line { height: 2px; width: 70px; background: var(--ink); }

.hero-title {
  margin: 0;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(7rem, 21vw, 20rem);
  line-height: .67;
  letter-spacing: -.095em;
  display: flex;
  flex-direction: column;
  padding: 6vw 0 5vw;
}

.hero-title span { display: block; }
.hero-title .hello { align-self: flex-start; }
.hero-title .men { align-self: flex-end; color: var(--red); padding-right: .03em; }
.hero-face {
  display: inline-grid !important;
  place-items: center;
  width: .64em;
  height: .64em;
  border-radius: 50%;
  margin: 0 .02em;
  vertical-align: .04em;
  background: var(--yellow);
  color: var(--ink);
  font-family: sans-serif;
  font-size: .45em;
  letter-spacing: 0;
  box-shadow: inset 0 0 0 .035em var(--ink);
}

.hero-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 24px; }
.hero-copy { margin: 0; font-size: clamp(1rem, 1.5vw, 1.3rem); font-weight: 700; line-height: 1.7; }
.hero-copy span { background: var(--yellow); padding: 0 .25em; }

.hero-stamp {
  width: 112px;
  height: 112px;
  border: var(--line);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotate(-8deg);
  font-family: "Space Mono", monospace;
  font-size: .58rem;
}
.hero-stamp strong { font-size: 2.2rem; line-height: 1.15; }

.scroll-cue { justify-self: end; display: flex; align-items: center; gap: 18px; font-weight: 700; }
.scroll-cue .arrow { font-size: 1.8rem; animation: bounce 1.5s infinite; }

.ticker { overflow: hidden; background: var(--ink); color: var(--paper); transform: rotate(-1.2deg) scale(1.02); }
.ticker-track { display: flex; width: max-content; animation: marquee 22s linear infinite; }
.ticker span { padding: 17px 0; white-space: nowrap; font-family: "Archivo Black", sans-serif; font-size: clamp(1.1rem, 2.4vw, 2rem); }

.section { padding: clamp(90px, 12vw, 180px) 6vw; }
.manifesto { padding-top: clamp(130px, 15vw, 220px); }
.eyebrow { margin: 0 0 48px; color: var(--red); }
.manifesto-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 9vw; }
.issue { display: inline-block; border: var(--line); padding: 8px 12px; margin-bottom: 30px; }

.manifesto h2, .domain h2 {
  font-size: clamp(3.4rem, 7.5vw, 8rem);
  line-height: .99;
  letter-spacing: -.075em;
  margin: 0;
  font-weight: 900;
}
.manifesto h2 em { font-style: normal; color: var(--red); }
.manifesto-body { padding-top: 90px; max-width: 640px; }
.manifesto-body p { font-size: 1.05rem; line-height: 2; }
.manifesto-body .big-copy { font-size: clamp(1.45rem, 2.2vw, 2.15rem); font-weight: 900; line-height: 1.75; margin-top: 0; }
.signature { margin-top: 50px; font-family: Georgia, serif; font-style: italic; font-size: 2.3rem; transform: rotate(-4deg); }

.voices { display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--line); border-bottom: var(--line); }
.voice-card { min-height: 620px; padding: 36px; display: flex; flex-direction: column; border-right: var(--line); }
.voice-card:last-child { border-right: 0; }
.voice-card--yellow { background: var(--yellow); }
.voice-card--blue { background: var(--blue); color: #fff; }
.voice-card--red { background: var(--red); }
.card-number { font-family: "Space Mono", monospace; font-weight: 700; }
.card-icon { height: 240px; display: grid; place-items: center; font-size: 9rem; }
.voice-card h3 { font-family: "Archivo Black", "Noto Sans SC", sans-serif; font-size: clamp(2.5rem, 4.6vw, 5.4rem); line-height: .88; letter-spacing: -.06em; margin: auto 0 26px; }
.voice-card p { line-height: 1.8; font-weight: 700; margin: 0; }
.face-icon { display: flex; align-items: center; justify-content: center; gap: 50px; }
.face-icon i { width: 28px; height: 70px; background: currentColor; border-radius: 50%; }

.domain { min-height: 100vh; position: relative; overflow: hidden; }
.domain-mark { position: absolute; right: -3vw; top: 1vw; font-family: "Archivo Black", sans-serif; font-size: clamp(15rem, 36vw, 40rem); letter-spacing: -.15em; color: transparent; -webkit-text-stroke: 2px rgba(20,20,20,.1); line-height: 1; z-index: -1; }
.domain-mark span { color: rgba(237,61,46,.06); }
.domain h2 { max-width: 900px; }
.domain h2 span { color: var(--red); }
.domain-copy { max-width: 680px; margin: 50px 0; font-size: clamp(1.1rem, 1.7vw, 1.5rem); line-height: 1.8; }
.domain-copy strong { font-family: "Space Mono", monospace; }

.contact-button {
  max-width: 670px;
  border: var(--line);
  background: var(--yellow);
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
  box-shadow: 8px 8px 0 var(--ink);
  transition: transform .2s, box-shadow .2s;
}
.contact-button:hover { transform: translate(4px, 4px); box-shadow: 4px 4px 0 var(--ink); }
.contact-button strong { font-size: 1.15rem; }
.contact-button i { font-style: normal; font-size: 2rem; }

footer {
  background: var(--ink);
  color: var(--paper);
  min-height: 230px;
  padding: 55px 4vw;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 50px;
  align-items: end;
}
.footer-brand { font-size: clamp(2.5rem, 7vw, 7rem); color: var(--red); }
.footer-meta { font-family: "Space Mono", monospace; font-size: .75rem; line-height: 1.6; }
.back-top { width: 50px; height: 50px; border: 1px solid var(--paper); color: var(--paper); background: none; font-size: 1.5rem; cursor: pointer; }
.back-top:hover { background: var(--paper); color: var(--ink); }

.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.hero-title .men { transition-delay: .12s; }

@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes bounce { 50% { transform: translateY(7px); } }

@media (max-width: 760px) {
  .site-header { height: 68px; }
  nav a:not(.nav-pill) { display: none; }
  .nav-pill { padding: 8px 12px; font-size: .82rem; }
  .hero { min-height: calc(100svh - 68px); padding-top: 24px; }
  .hero-title { font-size: clamp(6rem, 29vw, 10rem); line-height: .72; padding: 16vw 0; }
  .hero-title .men { align-self: flex-start; }
  .hero-bottom { grid-template-columns: 1fr auto; }
  .hero-stamp { width: 82px; height: 82px; grid-column: 2; grid-row: 1; }
  .hero-stamp strong { font-size: 1.6rem; }
  .scroll-cue { display: none; }
  .manifesto-grid { grid-template-columns: 1fr; gap: 40px; }
  .manifesto-body { padding-top: 0; }
  .voices { grid-template-columns: 1fr; }
  .voice-card { min-height: 520px; border-right: 0; border-bottom: var(--line); }
  .voice-card:last-child { border-bottom: 0; }
  .card-icon { height: 190px; }
  .contact-button { grid-template-columns: 1fr auto; }
  .contact-button span { grid-column: 1 / -1; }
  footer { grid-template-columns: 1fr auto; gap: 25px; }
  .footer-meta { grid-column: 1; grid-row: 2; }
  .back-top { grid-column: 2; grid-row: 1 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-track, .scroll-cue .arrow { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}