@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;600;800&display=swap');

:root{
  --black:#080808;
  --white:#f2f0ea;
  --grey:#b9b7b1;
  --acid:#d9ff00;
  --red:#e31b23;
  --border:2px solid var(--black);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--black);font-family:Inter,Arial,sans-serif}
a{color:inherit}
.topbar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:16px 4vw;background:var(--black);color:var(--white);border-bottom:3px solid var(--acid)}
.brand{font:34px/1 'Archivo Black',Impact,sans-serif;text-decoration:none;letter-spacing:-2px}
nav{display:flex;gap:26px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:1px}
nav a{text-decoration:none}
nav a:hover{color:var(--acid)}

.hero{min-height:calc(100vh - 69px);display:grid;grid-template-columns:1.15fr .85fr;background:var(--black);color:var(--white)}
.hero-image{position:relative;min-height:620px;overflow:hidden;border-right:3px solid var(--acid)}
.hero-image img{width:100%;height:100%;min-height:620px;object-fit:cover;filter:grayscale(1) contrast(1.18);display:block}
.hero-image:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(255,255,255,.035) 6px 7px);mix-blend-mode:screen;pointer-events:none}
.stamp{position:absolute;right:4%;bottom:5%;background:var(--acid);color:var(--black);padding:12px 16px;font:20px/1 'Archivo Black',Impact,sans-serif;transform:rotate(-4deg);box-shadow:8px 8px 0 var(--black)}

.hero-copy{display:flex;flex-direction:column;justify-content:center;padding:7vw}
.eyebrow,.section-number{font-size:11px;font-weight:800;letter-spacing:2px;margin:0 0 20px}
.eyebrow{color:var(--acid)}
h1,h2{font-family:'Archivo Black',Impact,sans-serif;text-transform:uppercase;line-height:.86;letter-spacing:-3px;margin:0}
h1{font-size:clamp(70px,9vw,150px)}
h1 em{font-style:normal;color:var(--acid);-webkit-text-stroke:1px var(--acid)}
.intro{max-width:430px;font-size:18px;line-height:1.5;color:#c9c9c9;margin:32px 0}
.button{display:inline-block;width:max-content;padding:15px 20px;background:var(--acid);color:var(--black);font-weight:800;text-decoration:none;text-transform:uppercase;font-size:12px;border:2px solid var(--acid);transition:.2s}
.button:hover{background:transparent;color:var(--acid)}
.section{padding:110px 8vw;border-bottom:var(--border)}
.section-number{margin-bottom:55px}
.manifesto-grid{display:grid;grid-template-columns:1fr 1fr;gap:8vw}
h2{font-size:clamp(50px,7vw,105px)}
h2 span{color:transparent;-webkit-text-stroke:2px var(--black)}
.text{font-size:18px;line-height:1.65;max-width:580px}
.big-quote{font:36px/1 'Archivo Black',Impact,sans-serif;text-transform:uppercase;margin-top:55px}

.poster{background:var(--acid)}
.poster-card{background:var(--black);color:var(--white);min-height:430px;padding:35px;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;overflow:hidden;box-shadow:14px 14px 0 var(--white)}
.top-label{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:2px;color:var(--acid)}
.poster-word{font:clamp(65px,13vw,190px)/.8 'Archivo Black',Impact,sans-serif;letter-spacing:-8px;transform:skew(-5deg);margin-top:40px}
.poster-sub{font:clamp(20px,3vw,38px)/1 'Archivo Black',Impact,sans-serif;letter-spacing:3px;margin-top:25px}
.poster-mark{margin-top:45px;letter-spacing:14px;color:var(--acid)}

.contact{background:var(--white);min-height:70vh}
.contact h2{font-size:clamp(60px,10vw,150px)}
.contact p:not(.section-number){font-size:18px;margin:35px 0}
.button.dark{background:var(--black);color:var(--white);border-color:var(--black)}
.button.dark:hover{background:transparent;color:var(--black)}

footer{display:flex;justify-content:space-between;gap:20px;padding:24px 4vw;background:var(--black);color:var(--white);font-size:11px;text-transform:uppercase;letter-spacing:1px}
footer strong{color:var(--acid)}

@media(max-width:800px){
  nav{display:none}
  .hero{display:block}
  .hero-image,.hero-image img{min-height:auto;height:auto}
  .hero-image img{aspect-ratio:4/3}
  .hero-copy{padding:70px 7vw}
  .manifesto-grid{grid-template-columns:1fr;gap:50px}
  .section{padding:80px 7vw}
  .poster-card{min-height:330px;padding:22px}
  .poster-word{letter-spacing:-4px}
  footer{flex-wrap:wrap}
}