:root {
  --bg: #f4ecdb;
  --ink: #111111;
  --muted: #252525;
  --line: #111111;
  --red: #ed2a25;
  color-scheme: light;
}

body {
  background-color: var(--bg);
  background-image: radial-gradient(#111 1px, transparent 1.4px);
  background-size: 8px 8px;
  color: var(--ink);
  font-family: Arial Black, Impact, Haettenschweiler, sans-serif;
}

body::before, body::after { display: none; }
.header { background: #f7d927; border-bottom: 4px solid #111; }
.header nav { font-family: Arial Black, Arial, sans-serif; text-transform: uppercase; font-size: 13px; letter-spacing: .04em; }
.header nav a { padding: 8px 11px; border: 2px solid transparent; }
.header nav a:hover { color: #111; background: #ed2a25; border-color: #111; }
.brand-logo { width: clamp(180px, 22vw, 290px); filter: invert(1); mix-blend-mode: multiply; }
.brand-logo img, .footer-logo img, .facebook-art img { mix-blend-mode: multiply; }

.hero { grid-template-columns: .92fr 1.08fr; min-height: 700px; }
.hero-copy { padding: 70px 0 46px; }
.hero-logo-mark { opacity: .11; filter: invert(1); mix-blend-mode: multiply; }
.eyebrow { font-family: Arial Black, Arial, sans-serif; font-size: 11px; color: #111; letter-spacing: .08em; }
h1, h2 { font-family: Arial Black, Impact, sans-serif; font-weight: 900; letter-spacing: -.08em; text-transform: uppercase; }
h1 { color: #ed2a25; text-shadow: 5px 5px 0 #1568d4, 10px 10px 0 #111; line-height: .87; }
.intro { font-family: Arial Black, Arial, sans-serif; font-size: 18px; line-height: 1.35; }
.button { border: 3px solid #111; background: #1568d4; color: white; box-shadow: 6px 6px 0 #111; font-family: Arial Black, Arial, sans-serif; text-transform: uppercase; }
.button:hover { background: #ed2a25; color: white; }
.hero-photo { margin: 30px 0 30px 30px; border: 4px solid #111; box-shadow: 12px 12px 0 #ed2a25; background: #1568d4; }
.hero-photo::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(rgba(255,255,255,.34) 1px, transparent 1.9px); background-size: 9px 9px; mix-blend-mode: overlay; }
.hero-photo figcaption { z-index: 4; background: #111; color: #f7d927; font-family: Arial Black, Arial, sans-serif; }
.hero-slide-controls { z-index: 5; }
.slide-arrow, .slide-dot { border-color: #111; color: #111; background: #f7d927; }
.slide-dot.is-active, .slide-arrow:hover, .slide-arrow:focus-visible { background: #ed2a25; color: white; }
.hero-note { font-family: Arial Black, Arial, sans-serif; color: #111; }
.rose { color: #1568d4; }

.manifesto { border-block: 4px solid #111; background: #ed2a25; color: white; font-family: Arial Black, Arial, sans-serif; }
.shop { background: var(--bg); }
.section-heading h2, .story h2, .lower h2, .facebook-copy h2 { text-shadow: 4px 4px 0 #f7d927; }
.products { gap: 40px; }
.product { background: #f7d927; border: 4px solid #111; padding: 14px; box-shadow: 9px 9px 0 #1568d4; }
.product-photo { border: 3px solid #111; background: #ed2a25; }
.product-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(rgba(255,255,255,.34) 1px, transparent 1.9px); background-size: 8px 8px; mix-blend-mode: overlay; }
.photo-label, .expand { border: 2px solid #111; background: #f7d927; color: #111; font-family: Arial Black, Arial, sans-serif; }
.product-heading, .product-meta, .buy, .checkout-note, .story-copy, .lower ul, .facebook-copy > p:not(.eyebrow) { font-family: Arial Black, Arial, sans-serif; color: #111; }
.buy { border-bottom: 3px solid #111; text-transform: uppercase; }
.buy:hover { color: #ed2a25; border-color: #ed2a25; }

.quote { background: #1568d4; border-block: 4px solid #111; padding-inline: 28px; color: white; }
.quote .eyebrow, .quote cite { color: #f7d927; font-family: Arial Black, Arial, sans-serif; }
.quote blockquote { font-family: Arial Black, Impact, sans-serif; font-style: normal; letter-spacing: -.055em; }
.story { background: #f7d927; border-bottom: 4px solid #111; padding-inline: 28px; }
.lower { background: #f4ecdb; }
.facebook-callout { border: 4px solid #111; background: #ed2a25; box-shadow: 12px 12px 0 #111; }
.facebook-art { border-right: 4px solid #111; background: #1568d4; }
.facebook-art::before { background: radial-gradient(#f7d927 1px, transparent 1.8px); background-size: 8px 8px; opacity: 1; }
.facebook-copy .eyebrow, .facebook-copy > p:not(.eyebrow) { color: white; }
.facebook-copy h2 { color: #f7d927; text-shadow: 4px 4px 0 #111; }
.footer { border-top: 4px solid #111; background: #111; color: #f7d927; width: 100%; padding-inline: 4%; }
.footer .eyebrow { color: #f7d927; }
.footer-logo { filter: invert(1); mix-blend-mode: screen; }

@media(max-width: 600px) {
  .header { border-bottom-width: 3px; }
  h1 { text-shadow: 3px 3px 0 #1568d4, 6px 6px 0 #111; }
  .hero-photo { margin: 10px 0 34px; box-shadow: 7px 7px 0 #ed2a25; }
  .product { box-shadow: 6px 6px 0 #1568d4; }
  .quote, .story { padding-inline: 18px; }
  .facebook-art { border-right: 0; border-bottom: 4px solid #111; }
}