@import url('https://fonts.googleapis.com/css2?family=Anton&family=IBM+Plex+Mono:wght@400;500&display=swap');

@font-face {
  font-family: "Gagalin";
  src:
    local("Gagalin"),
    url("assets/fonts/gagalin-regular.woff2") format("woff2");
  font-display: swap;
}

:root {
  --paper: #eeeae2;
  --ink: #090909;
  --red: #a90000;
  --red-dark: #840000;
  --cream: #f4efe5;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { background: var(--paper); }
body {
  min-height: 100svh;
  overflow-x: hidden;
  color: var(--ink);
  background:
    linear-gradient(rgba(238,234,226,.03), rgba(238,234,226,.03)),
    url("assets/background-paper.png") center / cover no-repeat fixed;
  display: grid;
  grid-template-rows: 1fr auto;
  position: relative;
}

.language-switcher {
  position: fixed;
  z-index: 10;
  top: clamp(18px, 4.3vh, 46px);
  right: clamp(18px, 4vw, 64px);
  display: flex;
  gap: clamp(2px, .35vw, 7px);
  align-items: flex-start;
}
.lang-button {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  width: clamp(36px, 3.15vw, 52px);
  transform-origin: 50% 50%;
  opacity: .88;
  transition: transform 140ms ease, opacity 140ms ease, filter 140ms ease;
}
.lang-button img { display:block; width:100%; height:auto; }
.lang-button:hover,
.lang-button:focus-visible {
  opacity: 1;
  transform: translateY(-2px) rotate(-2deg);
  filter: drop-shadow(0 4px 3px rgba(0,0,0,.18));
}
.lang-button[aria-pressed="true"] {
  opacity: 1;
  transform: translateY(-2px) rotate(1deg);
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.15));
}
.lang-button:focus-visible { outline: 2px dashed var(--red); outline-offset: 4px; }

.hero {
  min-height: 100svh;
  padding: clamp(118px, 17vh, 190px) clamp(20px, 5vw, 90px) clamp(120px, 16vh, 170px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.logo {
  display:block;
  width:min(50vw, 700px);
  max-height:42vh;
  object-fit:contain;
}
.slogan {
  margin: clamp(22px, 2.8vh, 34px) auto 0;
  max-width: min(1100px, 88vw);
  font-family: "Gagalin", "Anton", Impact, "Arial Black", sans-serif;
  font-size: clamp(25px, 2.15vw, 38px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: .008em;
  text-transform: uppercase;
  text-wrap: balance;
}

.funding-strip {
  position: relative;
  isolation: isolate;
  width: min(71vw, 1080px);
  margin-top: clamp(24px, 3vh, 36px);
  padding: clamp(13px, 1.15vw, 18px) clamp(34px, 3.2vw, 62px);
  color: #fff;
  transform: rotate(-1.2deg);
  background:
    linear-gradient(180deg, #bc0707 0%, #a80000 22%, #8d0000 100%);
  clip-path: polygon(
    0% 38%, 1.2% 25%, 4% 17%, 8% 21%, 12% 16%, 18% 20%, 23% 13%,
    31% 18%, 39% 12%, 48% 17%, 56% 11%, 65% 17%, 73% 10%, 81% 15%,
    88% 9%, 94% 17%, 98% 13%, 100% 25%, 98.5% 39%, 100% 49%,
    98.2% 59%, 100% 73%, 97% 86%, 92% 80%, 87% 88%, 79% 82%,
    71% 90%, 61% 84%, 51% 91%, 42% 83%, 33% 90%, 24% 84%, 16% 89%,
    9% 81%, 4% 86%, 1.5% 73%, 0 57%, 1.1% 47%
  );
  box-shadow: 0 2px 0 rgba(0,0,0,.12);
}
.funding-strip::before,
.funding-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* paper-worn texture on the red strip */
.funding-strip::before {
  z-index: -1;
  opacity: .42;
  background:
    radial-gradient(circle at 12% 35%, rgba(255,255,255,.34) 0 3%, transparent 4%),
    radial-gradient(circle at 31% 72%, rgba(255,255,255,.18) 0 2.6%, transparent 3.4%),
    radial-gradient(circle at 66% 27%, rgba(255,255,255,.18) 0 2.2%, transparent 3.1%),
    radial-gradient(circle at 86% 63%, rgba(255,255,255,.22) 0 2.5%, transparent 3.2%),
    linear-gradient(0deg, rgba(0,0,0,.08), rgba(255,255,255,.06)),
    repeating-linear-gradient(
      96deg,
      rgba(255,255,255,.12) 0 1px,
      rgba(255,255,255,0) 1px 11px,
      rgba(0,0,0,.06) 11px 12px,
      rgba(255,255,255,0) 12px 23px
    ),
    repeating-linear-gradient(
      12deg,
      rgba(0,0,0,.07) 0 1px,
      rgba(0,0,0,0) 1px 14px
    );
  mix-blend-mode: screen;
}
/* rough brushy edges + tears */
.funding-strip::after {
  inset: -3px;
  background:
    radial-gradient(18px 7px at 3% 18%, rgba(255,255,255,.44) 0 40%, transparent 58%),
    radial-gradient(22px 8px at 12% 85%, rgba(120,0,0,.46) 0 44%, transparent 60%),
    radial-gradient(16px 7px at 29% 12%, rgba(255,255,255,.28) 0 44%, transparent 60%),
    radial-gradient(28px 10px at 49% 88%, rgba(120,0,0,.44) 0 42%, transparent 60%),
    radial-gradient(18px 8px at 73% 16%, rgba(255,255,255,.35) 0 40%, transparent 58%),
    radial-gradient(18px 8px at 96% 78%, rgba(120,0,0,.42) 0 44%, transparent 60%),
    repeating-linear-gradient(90deg,
      transparent 0 33px,
      rgba(255,255,255,.08) 33px 37px,
      transparent 37px 78px,
      rgba(0,0,0,.07) 78px 82px,
      transparent 82px 128px);
  opacity: .55;
  mix-blend-mode: multiply;
  clip-path: polygon(
    0.4% 40%, 2% 21%, 6% 11%, 11% 23%, 17% 16%, 24% 22%, 31% 13%, 39% 20%,
    47% 12%, 56% 18%, 64% 12%, 72% 18%, 80% 11%, 88% 19%, 95.5% 11%,
    100% 25%, 98% 42%, 100% 52%, 98% 61%, 100% 73%, 96.5% 91%,
    90% 81%, 84% 90%, 76% 82%, 68% 92%, 59% 84%, 49% 95%, 38% 84%,
    29% 92%, 20% 83%, 13% 90%, 6% 80%, 1.6% 87%, 0 63%, 1% 50%
  );
}
.funding-strip p {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: clamp(14px, 1.3vw, 21px);
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: .005em;
  transform: rotate(1.2deg);
  text-wrap: balance;
}

.footer {
  position: fixed;
  left: 0; right: 0;
  bottom: max(26px, env(safe-area-inset-bottom));
  z-index: 6;
  text-align:center;
  padding:0 18px;
}
.footer a {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: clamp(13px, 1vw, 16px);
  color: var(--ink);
  text-decoration:none;
  letter-spacing:.01em;
  border-bottom:1px solid transparent;
  transition: border-color 140ms ease, opacity 140ms ease;
}
.footer a:hover, .footer a:focus-visible { border-color: var(--red); }
.footer a:focus-visible { outline:none; }

@media (max-width: 900px) {
  body { background-attachment: scroll; }
  .hero { padding-top: clamp(118px, 16vh, 150px); }
  .logo { width: min(64vw, 540px); }
  .funding-label-wrap { width: min(84vw, 760px); }
}

@media (max-width: 600px) {
  .language-switcher {
    top: max(14px, env(safe-area-inset-top));
    right: 14px;
    gap: 1px;
  }
  .lang-button { width: 34px; }
  .hero {
    justify-content:flex-start;
    min-height:100svh;
    padding: clamp(110px, 15vh, 145px) 18px 112px;
  }
  .logo { width: min(82vw, 430px); max-height:none; }
  .slogan {
    margin-top: 22px;
    max-width: 92vw;
    font-size: clamp(24px, 8vw, 34px);
    line-height:1.03;
  }
  .funding-label-wrap {
    width: 94vw;
    margin-top: 28px;
    transform: rotate(-0.35deg);
  }
  .footer { bottom: max(22px, env(safe-area-inset-bottom)); }
  .footer a { font-size: 12px; }
}

@media (max-height: 660px) and (min-width: 601px) {
  .hero {
    padding-top: 72px;
    padding-bottom: 85px;
  }
  .logo { width: min(36vw, 470px); }
  .slogan { margin-top: 14px; }
  .funding-label-wrap { margin-top: 20px; }
  .footer { bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .lang-button, .footer a { transition: none; }
}


/* =========================================================
   V6 — FINAL SIZE CONTROL FOR THE VINTAGE RED LABEL
   ========================================================= */
.funding-label-wrap {
  width: min(50vw, 820px) !important;
  max-width: calc(100vw - 80px);
  margin-top: clamp(16px, 1.9vh, 24px) !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center;
  align-items: center;
  transform: rotate(-0.45deg);
  overflow: visible;
}

.funding-label {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.10));
}

@media (max-width: 900px) {
  .funding-label-wrap {
    width: min(64vw, 700px) !important;
  }
}

@media (max-width: 600px) {
  .funding-label-wrap {
    width: 88vw !important;
    max-width: 88vw !important;
    margin-top: 24px !important;
    transform: rotate(-0.25deg);
  }
}


/* V7 — spacing/readability refinements */
.footer a {
  font-size: clamp(14px, 1.08vw, 17px) !important;
}

@media (max-width: 600px) {
  .slogan {
    margin-top: 26px !important;
  }

  .funding-label-wrap {
    margin-top: 18px !important;
  }

  .footer a {
    font-size: 13px !important;
  }
}