/* ------------------------------------------------------------------
   Pariter — waitlist landing page
   Self-hosted fonts (no Google requests → no GDPR issue, no cookie banner)
------------------------------------------------------------------- */
@font-face {
  font-family: "Cormorant";
  src: url("../fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant";
  src: url("../fonts/cormorant-garamond-latin-300-italic.woff2") format("woff2");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --bg: #fefefe;          /* = background of the photo */
  --ink: #111111;
  --ink-soft: #3a3a3a;
  --muted: #8c8c8c;
  --line: #111111;
  --error: #9b1c1c;

  --serif: "Cormorant", "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --sans: "Jost", "Futura", "Helvetica Neue", Arial, sans-serif;

  --gutter: 16px;
  --pill-h: 52px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body {
  font-family: var(--serif);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------
   Mobile (< 768px): logo → image → headline → subline → form
------------------------------------------------------------------- */
.page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.brand {
  padding: 14px calc(var(--gutter) + env(safe-area-inset-left)) 6px;
  position: relative;
  z-index: 2;
}
.logo { width: 104px; height: auto; }

.hero {
  margin: 0 auto;
  width: 100%;
  height: 55vh;
  height: 55svh;
  max-width: calc(55svh * 0.92);   /* keeps the crop sane on wide phones */
  overflow: hidden;
}
.hero picture, .hero img { display: block; width: 100%; height: 100%; }
.hero img {
  object-fit: cover;
  object-position: 42% 100%;       /* feet anchored, figure centred, jeans first */
}

.content {
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
  padding: 14px calc(var(--gutter) + env(safe-area-inset-right)) 0 calc(var(--gutter) + env(safe-area-inset-left));
}

h1 {
  font-weight: 300;
  font-size: clamp(1.9rem, 8.4vw, 2.3rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 0 0 0.4rem;
}

.subline {
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}

/* ------------------------------------------------------------------
   Form + success share one slot → no layout jump on success
------------------------------------------------------------------- */
.slot { display: grid; }
.slot > * { grid-area: 1 / 1; }

.waitlist { display: grid; gap: 10px; transition: opacity .25s; }

.pill {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: var(--pill-h);
  border-radius: 999px;
  border: 1px solid var(--line);
  margin: 0;
  font-family: var(--sans);
}

.pill--input {
  background: transparent;
  color: var(--ink);
  font-size: 16px;               /* ≥16px stops iOS from zooming on focus */
  letter-spacing: 0.02em;
  padding: 0 22px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.pill--input::placeholder { color: var(--muted); opacity: 1; }
.pill--input:focus { box-shadow: 0 0 0 3px rgba(17,17,17,.12); }
.pill--input[aria-invalid="true"] { border-color: var(--error); }
.pill--input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(155,28,28,.14); }

.pill--button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 0 22px;
  transition: background-color .2s, opacity .2s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.pill--button:hover { background: #2b2b2b; }
.pill--button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.pill--button[disabled] { opacity: .6; cursor: progress; }

.spinner {
  display: none;
  width: 12px; height: 12px;
  border: 1.5px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.is-loading .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.status {
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--error);
  margin: -2px 10px 0;
}
.status:empty { display: none; }

.fineprint {
  font-family: var(--sans);
  font-size: 0.6875rem;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin: 2px 10px 0;
}
.fineprint a { color: var(--muted); text-underline-offset: 2px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.success {
  align-self: start;
  visibility: hidden;
  opacity: 0;
  outline: none;
  transition: opacity .3s;
}
.success-text {
  font-size: 1.375rem;
  line-height: 1.3;
  font-style: italic;
  margin: 0;
  padding: 12px 2px 0;
  border-top: 1px solid var(--line);
}
.slot.is-done .waitlist { visibility: hidden; opacity: 0; }
.slot.is-done .success { visibility: visible; opacity: 1; }

/* ------------------------------------------------------------------
   Footer
------------------------------------------------------------------- */
.footer {
  margin-top: auto;
  padding: 2rem var(--gutter) 1.25rem;
  display: flex;
  gap: 1.25rem;
  font-family: var(--sans);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer a { text-decoration: none; }
.footer a:hover { color: var(--ink); }

/* short phones (iPhone SE / mini, in-app browsers with big chrome) */
@media (max-width: 767px) and (max-height: 700px) {
  .hero { height: 48svh; max-width: calc(48svh * 0.92); }
  .content { padding-top: 10px; }
  .subline { margin-bottom: .75rem; }
}

/* ------------------------------------------------------------------
   Two columns — tablet 768–1023 (image 55%) · desktop ≥1024 (image 60%)
   Text left, image right, image fills full hero height
------------------------------------------------------------------- */
@media (min-width: 768px) {
  .page {
    display: grid;
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    grid-template-rows: auto 1fr auto;
  }

  .brand {
    grid-column: 1; grid-row: 1;
    padding: clamp(24px, 3vw, 48px) clamp(24px, 4vw, 64px) 0;
  }
  .logo { width: clamp(110px, 9vw, 170px); }

  .content {
    grid-column: 1; grid-row: 2;
    align-self: center;
    max-width: none;
    margin: 0;
    padding: 4svh clamp(24px, 3vw, 40px) 4svh clamp(24px, 4vw, 64px);
  }
  .content > * { max-width: 28rem; }

  h1 { font-size: clamp(2.25rem, 3.3vw, 3.25rem); margin-bottom: .6rem; }
  .subline { font-size: clamp(1.125rem, 1.3vw, 1.375rem); margin-bottom: 1.5rem; }

  .hero {
    grid-column: 2; grid-row: 1 / -1;
    position: sticky; top: 0;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100svh;
    margin: 0;
  }
  /* column narrower than the photo → fill height, crop the empty sides */
  .hero img { object-fit: cover; object-position: 42% 100%; }

  .footer {
    grid-column: 1; grid-row: 3;
    padding: 0 clamp(24px, 4vw, 64px) clamp(20px, 2.4vw, 36px);
  }
}

@media (min-width: 1024px) {
  .page { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); }
  .content { padding-left: clamp(40px, 6vw, 120px); }
}

/* column wider than the photo → show the whole photo, anchored right/bottom */
@media (min-width: 1024px) and (min-aspect-ratio: 4/3),
       (min-width: 768px) and (max-width: 1023px) and (min-aspect-ratio: 16/11) {
  .hero img { object-fit: contain; object-position: 100% 100%; }
}

/* landscape phones */
@media (orientation: landscape) and (max-height: 520px) {
  .brand { padding-top: 14px; }
  .logo { width: 96px; }
  .content { padding-top: 10px; padding-bottom: 10px; }
  h1 { font-size: 2rem; }
  .subline { margin-bottom: 1rem; }
}

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

/* ------------------------------------------------------------------
   Sub pages: confirmed / privacy / imprint
------------------------------------------------------------------- */
.subpage .page { display: flex; flex-direction: column; max-width: none; }
.subpage .brand { padding: clamp(18px, 3.2vw, 56px) clamp(20px, 4vw, 72px) 0; }
.subpage .logo { width: clamp(96px, 9vw, 160px); }
.eyebrow {
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.9rem;
}
.text {
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: clamp(40px, 9vh, 120px) clamp(20px, 5.5vw, 28px) 0;
}
.text h1 { font-size: clamp(2.35rem, 6vw, 4rem); margin-bottom: 1.5rem; }
.text h2 {
  font-family: var(--sans); font-weight: 400;
  font-size: .75rem; letter-spacing: .2em; text-transform: uppercase;
  margin: 2.4rem 0 .7rem;
}
.text p, .text li { font-size: 1.15rem; line-height: 1.5; color: var(--ink-soft); }
.text p { margin: 0 0 .9rem; }
.text ul { padding-left: 1.1rem; margin: 0 0 .9rem; }
.text .back {
  display: inline-block; margin-top: 1.5rem;
  font-family: var(--sans); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase;
  text-underline-offset: 4px; color: var(--ink);
}
.text .note { font-size: .95rem; color: var(--muted); }
.subpage .footer { padding: 3rem clamp(20px, 4vw, 72px) 1.5rem; }