/* ============================================================
   217 Products — corporate site (maximalist theme)
   Palette: brand yellow ground, warm ink, paper panels,
   one red sticker accent. Type: Archivo Black display +
   Space Grotesk body.
   ============================================================ */

:root {
  --yellow: #ffc20e;
  --ink: #0e0c05;
  --paper: #fffdf5;
  --red: #d9301f; /* dark enough for 4.5:1 with paper text at badge size */
  --pad: clamp(16px, 3.5vw, 56px);
}

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

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--yellow);
  color: var(--ink);
  font-family: "Space Grotesk", system-ui, sans-serif;
  line-height: 1.45;
  overflow-x: hidden;
}

::selection { background: var(--ink); color: var(--yellow); }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.display { font-family: "Archivo Black", "Space Grotesk", sans-serif; font-weight: 400; }

/* anchor targets clear the sticky header */
section[id], footer[id] { scroll-margin-top: 90px; }

/* ---------- marquee strips ---------- */
.marquee {
  overflow: hidden;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  background: var(--ink);
  color: var(--yellow);
  white-space: nowrap;
}
.marquee-track {
  display: inline-flex;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.18em;
  animation: slide 22s linear infinite;
}
.marquee-track span { display: inline-block; padding-right: 0.2em; }
.marquee.rev .marquee-track { animation-direction: reverse; }
.marquee.paper { background: var(--paper); color: var(--ink); }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- header ---------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px var(--pad);
  background: var(--yellow);
  border-bottom: 3px solid var(--ink);
}
.brand { font-family: "Archivo Black", sans-serif; font-size: 18px; }
.brand sup { font-size: 9px; }
.site-head nav { display: flex; gap: 10px; align-items: center; }
.site-head nav a,
.lang-toggle {
  font-family: "Space Grotesk", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s, color 0.12s;
}
.site-head nav a:hover,
.lang-toggle:hover {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--ink);
  background: var(--ink);
  color: var(--yellow);
}
.lang-toggle { background: var(--ink); color: var(--yellow); }
.lang-toggle:hover { background: var(--paper); color: var(--ink); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: clamp(48px, 8vh, 90px) var(--pad) 60px;
  overflow: hidden;
}
.hero h1 {
  display: flex;
  align-items: flex-end;
  font-size: clamp(88px, 22vw, 380px);
  line-height: 0.84;
  letter-spacing: -0.02em;
}
.hero h1 .ln-num {
  display: block;
  -webkit-text-stroke: 3px var(--ink);
  color: var(--paper);
  text-shadow: 0.04em 0.04em 0 var(--ink);
}
.hero h1 .ln-num em {
  font-style: normal;
  color: var(--ink);
  -webkit-text-stroke: 0;
  text-shadow: 0.04em 0.04em 0 var(--paper);
}
/* PRODUCTS tucks in at the bottom-right of the 7, same outline style as 217 */
.hero h1 .ln-word {
  display: block;
  font-size: clamp(22px, 4.2vw, 78px);
  margin: 0 0 0.14em -0.55em;
  -webkit-text-stroke: 2px var(--ink);
  color: var(--paper);
  text-shadow: 0.05em 0.05em 0 var(--ink);
}
/* browsers without text-stroke would show paper-on-yellow: fall back to solid ink */
@supports not (-webkit-text-stroke: 1px black) {
  .hero h1 .ln-num,
  .hero h1 .ln-word { color: var(--ink); text-shadow: 0.04em 0.04em 0 var(--paper); }
}
.hero-sub {
  margin-top: 36px;
  display: inline-block;
  font-size: clamp(14px, 2vw, 24px);
  font-weight: 600;
  letter-spacing: 0.14em;
  background: var(--ink);
  color: var(--yellow);
  padding: 12px 20px;
  transform: rotate(-1.6deg);
}
.sticker {
  position: absolute;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  padding: 12px 18px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--ink);
  animation: bob 3.2s ease-in-out infinite;
}
.st-1 { top: 14%; right: 6%; background: var(--red); color: var(--paper); transform: rotate(8deg); }
.st-2 { bottom: 18%; right: 18%; background: var(--paper); transform: rotate(-6deg); animation-delay: 1.1s; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* ---------- sections ---------- */
section { padding: clamp(70px, 10vh, 130px) var(--pad); }

.tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  background: var(--yellow);
  border: 2px solid var(--ink);
  padding: 6px 14px;
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-1deg);
}

/* manifesto on paper panel */
.manifesto {
  background: var(--paper);
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}
.manifesto h2 {
  margin-top: 36px;
  font-family: "Archivo Black", sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 5.4vw, 76px);
  line-height: 1.02;
  text-transform: uppercase;
  max-width: 20ch;
}
.manifesto h2 mark { background: var(--yellow); padding: 0 8px; color: inherit; }
.manifesto p { margin-top: 28px; font-size: 17px; font-weight: 600; max-width: 46ch; }

/* ---------- work: tilted poster cards ---------- */
.cards {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(24px, 4vw, 56px);
}
.card {
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 10px 10px 0 var(--ink);
  padding: clamp(24px, 3vw, 44px);
  transform: rotate(-1.2deg);
  transition: transform 0.15s, box-shadow 0.15s;
}
.card:nth-child(2) { transform: rotate(1.4deg); }
.card:hover { transform: rotate(0) scale(1.02); box-shadow: 16px 16px 0 var(--ink); }
.card .num {
  display: inline-block;
  font-family: "Archivo Black", sans-serif;
  font-size: 15px;
  background: var(--ink);
  color: var(--yellow);
  padding: 6px 12px;
}
.card h3 {
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1;
  margin-top: 20px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.card p { margin-top: 16px; font-weight: 600; }
.badge {
  display: inline-block;
  margin-top: 24px;
  margin-right: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 8px 16px;
}
.badge.live { background: var(--red); color: var(--paper); box-shadow: 3px 3px 0 var(--ink); }
a.badge { transition: background 0.12s, color 0.12s; }
a.badge:hover { background: var(--ink); color: var(--yellow); }

/* ---------- checkerboard divider ---------- */
.checker {
  height: 28px;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  background: repeating-conic-gradient(var(--ink) 0% 25%, var(--yellow) 0% 50%) 0 0 / 28px 28px;
}

/* ---------- principles ---------- */
.principles { background: var(--ink); color: var(--paper); }
.principles .tag { transform: rotate(1deg); }
.shout { margin-top: 40px; border-top: 2px dashed rgba(255, 253, 245, 0.4); }
.shout-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  align-items: start;
  padding: 32px 0;
  border-bottom: 2px dashed rgba(255, 253, 245, 0.4);
}
.shout-row b { font-family: "Archivo Black", sans-serif; font-weight: 400; font-size: 28px; color: var(--yellow); }
.shout-row h3 { font-size: clamp(22px, 3vw, 40px); text-transform: uppercase; }
.shout-row h3 em { font-style: normal; color: var(--yellow); }
.shout-row p { margin-top: 10px; color: rgba(255, 253, 245, 0.78); font-weight: 600; max-width: 60ch; }

/* ---------- footer ---------- */
footer { padding: clamp(70px, 10vh, 130px) var(--pad) 0; overflow: hidden; }
.mail {
  display: inline-block;
  margin-top: 32px;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(18px, 3.6vw, 56px);
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  padding: 16px 24px;
  max-width: 100%;
  overflow-wrap: break-word;
  transform: rotate(-1deg);
  transition: transform 0.15s, box-shadow 0.15s;
}
.mail:hover { transform: rotate(0); box-shadow: 12px 12px 0 var(--ink); }
.foot-links { margin-top: 40px; display: flex; gap: 24px; flex-wrap: wrap; }
.foot-links a {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  border-bottom: 3px solid var(--ink);
  padding-bottom: 3px;
}
.foot-links a:hover { background: var(--ink); color: var(--yellow); }
.giant {
  margin-top: 24px;
  font-size: clamp(32px, 11.4vw, 220px);
  line-height: 0.74;
  text-align: center;
  white-space: nowrap;
  color: var(--ink);
  margin-bottom: -0.1em;
  user-select: none;
}
.copyright { padding: 56px 0 0; font-weight: 600; font-size: 12px; letter-spacing: 0.14em; }

/* ---------- responsive ---------- */
@media (pointer: coarse) {
  .site-head nav a, .lang-toggle { padding: 12px 18px; }
}

@media (max-width: 800px) {
  .sticker { position: static; display: inline-block; margin: 24px 12px 0 0; animation: none; }
  .st-1 { transform: rotate(2deg); }
  .st-2 { transform: rotate(-2deg); }
  .shout-row { grid-template-columns: 40px 1fr; }
}

@media (max-width: 700px) {
  .site-head nav a { display: none; }
}

@media (max-width: 480px) {
  .hero { padding-bottom: 44px; }
  .hero-sub { margin-top: 24px; }
  .mail { padding: 12px 16px; box-shadow: 6px 6px 0 var(--ink); }
  .card { box-shadow: 7px 7px 0 var(--ink); }
  .card:hover { box-shadow: 10px 10px 0 var(--ink); }
  .foot-links { gap: 16px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .marquee-track, .sticker { animation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}