/* ============================================================================
   kulipa.xyz - "changing home" page
   Dependency-free rebuild: no Webflow, no jQuery, no GSAP, no Swiper, no Lenis.
   Values below are the computed values measured on the live page.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Fonts */

@font-face {
  font-family: "KMR Apparat";
  src: url("assets/fonts/KMR-Apparat-Regular.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/Satoshi-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/Satoshi-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------- 2. Tokens */

:root {
  /* Brand */
  --wine-700: #3a0e1c;        /* body + headline text */
  --dark-red: #1f010b;        /* secondary text, links */
  --pink: #f60055;            /* headline accent */
  --red-300: #e80151;         /* logo, focus ring */
  --red-cta: #e7004f;         /* submit button */
  --red-cta-hover: #57001e;
  --neutral-500: #d1c9cc;
  --white: #fff;
  --hero-bg: #f8f6f7;
  --nav-border: #f8f7f7;
  --input-bg: #fbf9f9;
  --input-border: #f6f3f3;

  --font-sans: "Satoshi", "Helvetica Neue", Arial, sans-serif;
  --font-display: "KMR Apparat", "Helvetica Neue", Arial, sans-serif;

  --nav-height: 4rem;

  /* Fluid root font size (same curve as the live site).
     >=1440px: 16px flat | 767-1440px: 10.8px -> 16px | <=767px: 10.8px flat */
  --font-from: 16;
  --font-to: 16;
  --vw-from: calc(1440 / 100);
  --vw-to: calc(2113 / 100);
  --coefficient: calc((var(--font-to) - var(--font-from)) / (var(--vw-to) - var(--vw-from)));
  --base: calc((var(--font-from) - var(--vw-from) * var(--coefficient)) / 16);
}

@media screen and (max-width: 1440px) {
  :root {
    --font-from: 10.8;
    --font-to: 16;
    --vw-from: calc(767 / 100);
    --vw-to: calc(1440 / 100);
  }
}

@media screen and (max-width: 767px) {
  :root {
    --font-from: 10.8;
    --font-to: 10.8;
    --vw-from: calc(1 / 100);
    --vw-to: calc(767 / 100);
  }
}

/* -------------------------------------------------------------- 3. Reset */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: calc(var(--base) * 1rem + var(--coefficient) * 1vw);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--white);
  color: var(--wine-700);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, p { margin: 0; }

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 0.125rem solid var(--red-300);
  outline-offset: 0.125rem;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0.5rem; left: 0.5rem;
  z-index: 200;
  padding: 0.5rem 0.875rem;
  background: var(--white);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.2s ease;
}
.skip-link:focus-visible { transform: translateY(0); }

/* ----------------------------------------------------------------- 4. Nav */

.page { position: relative; }

.nav {
  position: sticky;
  top: 0; right: 0; left: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--nav-height);
  background-color: var(--white);
  border-bottom: 1px solid var(--nav-border);
}

.nav__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90vw;
  max-width: 1248px;
}

.nav__container--center { justify-content: center; }

.nav__brand {
  order: -9999;
  display: inline-block;
  line-height: 0;
}

/* 2rem square, matching the live site (the source mark is 32x40 and is
   intentionally rendered to a square box there). */
.nav__logo {
  width: 2rem;
  height: 2rem;
}

/* ---------------------------------------------------------------- 5. Hero */

.hero {
  height: 100vh;
  margin-inline: auto;
  background-color: var(--hero-bg);
}

/* Anchored to the top of .page, so it sits behind the nav exactly as it does
   on the live site. */
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: 1440px;
  height: 100vh;
  margin-inline: auto;
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
}

.hero__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.padding-global {
  display: block;
  width: 100%;
  height: 100%;
  padding-inline: 2.5rem;
}

.hero__content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  max-width: 780px;
  height: 100%;
  margin-inline: auto;
  text-align: center;
}

.heading-h1 {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.08rem;
  color: var(--wine-700);
}

.text-pink { color: var(--pink); }

.text-1-25 { font-size: 1.25rem; }

.text-1-25 a {
  color: var(--dark-red);
  text-decoration: none;
}
.text-1-25 a:hover { color: var(--pink); }

/* Pink pill, used by the 404 page's "Go Home" link. */
.button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  background-color: var(--red-cta);
  border-radius: 31.25rem;
  color: var(--white);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.button-primary:hover { background-color: #c10143; }

/* --------------------------------------------------------------- 6. Modal */

.modal {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: none;
  align-items: center;
  justify-content: center;
  padding-inline: 2.5rem;
}

.modal.is-open { display: flex; }

.modal__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(31, 1, 11, 0.12);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.modal__content {
  position: relative;
  z-index: 10;
  padding: 2rem;
  background-color: var(--white);
  border-radius: 1.25rem;
}

.modal__close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--dark-red);
  cursor: pointer;
  transform: rotate(45deg);
  transition: color 0.2s ease;
}
.modal__close:hover { color: var(--pink); }

.text-large { font-size: 1.5rem; }
.text-semibold { font-weight: 600; }
.text-large.text-semibold.text-pink { font-size: 2rem; }
.text-regular { font-size: 1rem; color: var(--dark-red); }
.text-tiny { font-size: 0.75rem; color: var(--dark-red); }
.text-tiny--hidden { display: none; }

.spacer-xsmall { width: 100%; padding-top: 0.5rem; }
.spacer-medium { width: 100%; padding-top: 1.5rem; }

.form__grid {
  display: grid;
  grid-template-columns: 1fr max-content;
  gap: 16px;
  align-items: stretch;
  justify-items: center;
}

.form__input {
  min-height: 2.15rem;
  max-height: 2.15rem;
  padding: 0 1rem;
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 2px;
  color: #000;
  font: inherit;
}
.form__input::placeholder { color: var(--dark-red); opacity: 1; }
.form__input:focus,
.form__input:active {
  border-style: solid;
  border-color: var(--neutral-500);
  outline: none;
}
.form__input[aria-invalid="true"] { border-color: var(--red-cta); }

.form__submit {
  padding: 0.75rem 1.5rem;
  background-color: var(--red-cta);
  border: 0;
  border-radius: 31.25rem;
  color: var(--white);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.form__submit:hover { background-color: var(--red-cta-hover); }
.form__submit[disabled] { opacity: 0.7; cursor: default; }

.form__message {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}
.form__message--success { background-color: #fff5f8; color: var(--dark-red); }
.form__message--error { background-color: #ffdede; color: var(--dark-red); }

/* ---------------------------------------------------------- 7. Breakpoints */

@media screen and (max-width: 991px) {
  .heading-h1 { font-size: 3.5rem; }
  .form__grid { justify-items: start; }
}

@media screen and (max-width: 767px) {
  .heading-h1 { font-size: 2.5rem; }
  .padding-global { padding-inline: 1.25rem; }
  .text-regular { font-size: 1.15rem; }
  .text-large { font-size: 1.25rem; }
  .spacer-medium { padding-top: 1.25rem; }
  .modal { padding-inline: 1.25rem; }
  .nav__container { width: 96vw; }
  .nav__brand { padding-left: 0; }
}

@media screen and (max-width: 479px) {
  .padding-global { padding-inline: 0.7rem; }
  .form__grid {
    grid-template-columns: 1fr;
    gap: 12px;
    justify-items: stretch;
  }
  .form__input { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}