/* Interim newsletter signup — simonhuesler.com
   Built from the Figma file "Life on Earth": D/Newsletter-Temp (1487:4919).
   Custom properties mirror the Figma variables 1:1 (names in comments). The Mobile mode
   (21 / 25.2 px, 44 px touch targets) follows the design system's mobile values.

   Shared assets (fonts, stamp) live in /web/assets — they belong to the whole site, not only this page.
   Font licence: Pangram Pangram, web licence up to 10k pageviews/month, licensed to Display Works (invoice PPF-#121392).
   Still to add:
     /assets/img/icon-at.svg — the icon left of the email field, export from Figma as SVG
     /assets/img/icon-arrow.svg — the "›" icon (Static/Icons, Arrow-Forward), export as SVG
   Until the icon files exist, the icons use the matching typeface glyphs (@ and ›);
   then replace each <span class="glyph"> with <img src="/assets/img/…svg" alt="">. */

@font-face {
  font-family: "PP Editorial New";
  src: url("/assets/fonts/PPEditorialNew-Light.woff2") format("woff2"),
       url("/assets/fonts/PPEditorialNew-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Editorial New";
  src: url("/assets/fonts/PPEditorialNew-LightItalic.woff2") format("woff2"),
       url("/assets/fonts/PPEditorialNew-LightItalic.woff") format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

:root {
  --font: "PP Editorial New", "Times New Roman", Georgia, serif; /* Typography/Primary/Typeface, Cut: Light */

  /* Mode: Desktop */
  --fontsize-x-large: 72px;        /* Typography/Fontsize/X-Large */
  --lineheight-x-large: 72px;      /* Typography/Lineheight/X-Large */
  --fontsize-x-small: 17px;        /* Typography/Fontsize/X-Small */
  --lineheight-x-small: 20.4px;    /* Typography/Lineheight/X-Small */
  --touch-min: 32px;               /* Spacing/Touch/Min-Targets */

  /* Colors */
  --background: #ffffff;               /* Background */
  --background-transparent: #ffffff00; /* Background-Transparent */
  --foreground: #000000;               /* Foreground */
  --foreground-muted-1: #a6a6a6;       /* Foreground-Muted-1 */
  --foreground-highlight: #ff0000;     /* Foreground-Highlight */
  --border: #d7d7d7;                   /* Border */
  --background-inverted: #000000;      /* Background-Inverted */
  --foreground-inverted: #ffffff;      /* Foreground-Inverted */

  /* Spacing */
  --spacing-0-5: 2px;   /* Spacing/0-5 */
  --spacing-1: 4px;     /* Spacing/1 */
  --spacing-1-5: 6px;   /* Spacing/1-5 */
  --spacing-2: 8px;     /* Spacing/2 */
  --spacing-4: 16px;    /* Spacing/4, Spacing/s */
  --spacing-sm: 32px;   /* Spacing/sm */

  --form-width: 800px;
  --footer-width: 880px;

  /* Height of the signup page's content (stamp to footer). Every page starts its stamp and
     title where the signup page has them when it is centred, so all pages share one top line.
     Update this if the signup page's content changes height. */
  --stage-height: 620px;
}

/* Mode: Mobile */
@media (max-width: 640px) {
  :root {
    --fontsize-x-small: 21px;
    --lineheight-x-small: 25.2px;
    --touch-min: 44px;
    --fontsize-x-large: clamp(52px, 17vw, 72px);
    --lineheight-x-large: 1;
    --stage-height: 780px;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font);
  font-weight: 300;
  font-size: var(--fontsize-x-small);
  line-height: var(--lineheight-x-small);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 0.5px; text-underline-offset: 3px; }

/* Gradien-Top / Gradien-Bottom: 44px fades from Background to Background-Transparent */
body::before, body::after {
  content: "";
  position: fixed;
  left: 0; right: 0;
  height: 44px;
  pointer-events: none;
  z-index: 2;
}
body::before { top: 0; background: linear-gradient(var(--background), var(--background-transparent)); }
body::after { bottom: 0; background: linear-gradient(var(--background-transparent), var(--background)); }

/* Section — anchored at the same top line on every page; longer pages scroll from there */
.section {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-4);
  padding-top: max(var(--spacing-4), calc((100svh - var(--stage-height)) / 2));
}

/* Static/Stamp — red */
.stamp { display: block; width: 35.815px; height: 51px; }
.stamp img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Copy → Primitives/Typography (Text X-Large) */
.title {
  width: 100%;
  padding-bottom: var(--spacing-sm);
  display: flex;
  justify-content: center;
}
.title h1 {
  flex: 1;
  margin: 0;
  padding-right: var(--spacing-sm);
  font: inherit;
  font-size: var(--fontsize-x-large);
  line-height: var(--lineheight-x-large);
  text-align: center;
}
@media (max-width: 640px) { .title h1 { padding-right: 0; } }

/* Input/Form */
form, .form {
  width: min(var(--form-width), 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-4);
}
.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-4);
  padding-bottom: var(--spacing-sm);
}
.copy { margin: 0; width: 100%; text-align: center; }
.copy.error { color: var(--foreground-highlight); }

/* Input/Form/Field → Interactive/Inputfield */
.inputfield {
  width: 100%;
  height: var(--touch-min);
  padding: var(--spacing-2) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
  border-bottom: 1px solid var(--border);
}
.inputfield:hover, .inputfield:focus-within { border-bottom-color: var(--foreground); }
.inputfield input {
  width: 100%;
  height: 100%;
  padding: 0;
  font: inherit;
  color: var(--foreground);
  text-align: center;
  background: transparent;
  border: 0;
  outline: none;
}
.inputfield input::placeholder { color: var(--foreground-muted-1); opacity: 1; }
.inputfield:hover input::placeholder { color: var(--foreground); }

/* Static/Icons, 16 × 16 */
.icon {
  flex: none;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--foreground-muted-1);
  line-height: 1;
}
.icon img { display: block; width: 16px; height: 16px; }
.icon .glyph { font-size: 14px; }

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

/* Checkboxes → Interactive/Checkitem — checkbox centred above the text */
.checkitem {
  width: 100%;
  max-width: min(100%, 34em);
  min-height: var(--touch-min);
  padding: 5.5px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
  opacity: 0.8;
}
.checkitem:hover, .checkitem:has(input:checked) { opacity: 1; }
.checkitem .icon-container { padding: var(--spacing-0-5) 0; display: flex; align-items: center; }
/* Static/Icons Check / Check-Filled: 1px box inset 6.25%, filled = 6px square at 5/5 */
.checkitem input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
}
.checkitem input::before {
  content: "";
  position: absolute;
  inset: 6.25%;
  border: 1px solid var(--foreground);
}
.checkitem input:checked::after {
  content: "";
  position: absolute;
  left: 5px; top: 5px;
  width: 6px; height: 6px;
  background: var(--foreground);
}
.checkitem input:focus-visible { outline: 1px solid var(--foreground); outline-offset: 2px; }
.checkitem label { cursor: pointer; text-align: center; }
.checkitem label a { text-decoration: underline; text-decoration-thickness: 0.5px; text-underline-offset: 3px; }

/* Honeypot: hidden from people, visible to naive bots. Must stay empty. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Controls → Interactive/Button (inverted pill, icons both sides) */
.controls { display: flex; gap: var(--spacing-2); }
button {
  height: var(--touch-min);
  padding: var(--spacing-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  color: var(--foreground-inverted);
  background: var(--background-inverted);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
button .label { padding: 0 var(--spacing-2); }
button .icon { color: var(--foreground-inverted); }
button:focus-visible { outline: 1px solid var(--foreground); outline-offset: 3px; }
button[disabled] { opacity: 0.5; cursor: default; }

/* Navigation/Footer */
.footer {
  width: min(var(--footer-width), 100%);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: var(--spacing-4);
}
.footer a { height: var(--touch-min); display: inline-flex; align-items: center; gap: var(--spacing-1); }

/* Legal pages: same structure, centred text. No italics.
   Section headers: two blank lines before, one after (in units of the line height). */
.legal .body { width: min(var(--form-width), 100%); padding-bottom: var(--spacing-sm); text-align: center; }
.legal .body p, .legal .body li { margin: 0; }
.legal .body p + p, .legal .body ul + p { margin-top: var(--spacing-2); }
.legal .body h2 { font: inherit; margin: calc(2 * var(--lineheight-x-small)) 0 var(--lineheight-x-small); }
.legal .body > h2:first-child { margin-top: 0; }
.legal .body ul { margin: 0; padding: 0; list-style: none; }
.legal .body strong { font-weight: 300; }