@font-face {
  font-family: "U8Web";
  src: url("fonts/U8Web-Regular.woff2") format("woff2"),
       url("fonts/U8Web-Regular.woff")  format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "U8Web";
  src: url("fonts/U8Web-Black.woff2") format("woff2"),
       url("fonts/U8Web-Black.woff")  format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================================
   DESIGN TOKENS — single source of truth for color / type / spacing / layout.
   Note: CSS doesn't allow custom properties as @media query conditions, so
   breakpoints (720px, 1024px) live inline in the @media rules at the bottom.
   The BREAKPOINTS block at the bottom of :root documents them; keep in sync.
   ========================================================================= */
:root {
  color-scheme: light;

  /* ---------------- COLOR ---------------- */
  --ink:           #111111;
  --ink-muted:     #1a1a1a;
  --ink-subtle:    #444;
  --paper:         #ffffff;
  --card-bg:       rgba(255, 255, 255, 0.62);
  --card-blur:     blur(18px) saturate(140%);
  --red:           #F4424F;
  --red-hover:     #e23744;
  --success-bg:    #eafaf0;
  --success-text:  #0f5132;

  /* ---------------- TYPE — sizes ---------------- */
  /* Body / signup / signature share --text-m; mobile lock pins to --text-m-min. */
  --text-m:         clamp(14px, 1.2vw, 17px);
  --text-m-min:     14px;
  --text-headline:  26px;
  --text-input-min: 16px;          /* iOS Safari auto-zooms inputs <16px on focus */
  --text-footer:    clamp(12px, 1vw, 14px);

  /* ---------------- TYPE — weight, leading, tracking ---------------- */
  /* U8Web ships only at 400 and 900. --text-stroke fakes a SemiBold weight via
     -webkit-text-stroke (crisp, no blur). Replace with a real U8Web-SemiBold
     @font-face when David sends the OTF. */
  --weight:             400;
  --text-stroke:        0.35px;
  --leading-card:       1.45;
  --leading-headline:   1.05;
  --tracking-headline:  -0.02em;
  --paragraph-gap:      1.1em;

  /* ---------------- SPACING — base scales ---------------- */
  --pad-x:       clamp(20px, 4vw, 56px);   /* page horizontal gutter */
  --pad-main-y:  clamp(24px, 6vh, 80px);
  --card-pad:    clamp(14px, 2vw, 22px);   /* unit for all derived card paddings */

  /* ---------------- SPACING — gaps ---------------- */
  --gap-stack:              24px;                            /* headline ↔ combined */
  --gap-combined:           calc(var(--card-pad) * 1.30);    /* body ↔ form ↔ signature */
  --gap-signup:             10px;                            /* input ↔ arrow ↔ button */
  --gap-footer:             clamp(8px, 2vw, 24px);
  --gap-footer-mobile-row:  5px;

  /* ---------------- SPACING — card paddings (proportional to --card-pad) ---------------- */
  --pad-headline-y:           calc(var(--card-pad) * 0.281);
  --pad-headline-x:           var(--card-pad);
  --pad-combined-y:           calc(var(--card-pad) * 0.225);
  --pad-combined-x:           calc(var(--card-pad) * 1.15);
  --pad-footer-cell-mobile-y: calc(var(--card-pad) * 0.30);

  /* ---------------- SPACING — explicit ---------------- */
  --pad-input:    4px 0;
  --pad-button:   10px 16px;
  --pad-footer:   12px var(--pad-x) 18px;

  /* ---------------- LAYOUT — caps & widths ---------------- */
  --width-stack:           640px;
  --width-body:            560px;
  --width-logo-desktop:    min(1600px, 96vw);
  --width-logo-mobile:     96vw;
  --width-scene-mobile:    118vw;          /* overflows the viewport edges for generous coverage behind the card */
  --width-combined-cap:    78vw;
  --width-combined-mobile: 80vw;
  --ratio-logo-landscape:  3212 / 1679;    /* landscape SVG viewBox aspect */
  --ratio-logo-portrait:   1 / 1;

  /* ---------------- EFFECTS ---------------- */
  /* Layered neutral shadow + soft brand-red aura — elegant lift off the logo. */
  --shadow-card:
    0 1px 1px      rgba(20, 20, 30, 0.02),
    0 14px 40px    rgba(20, 20, 30, 0.04),
    0 40px 100px   rgba(20, 20, 30, 0.04),
    0 0 80px       rgba(244, 66, 79, 0.06);

  --focus-ring:        2px solid var(--ink);
  --focus-offset:      2px;
  --underline-offset:  3px;
  --motion-bg:         .15s ease;
  --motion-press:      .1s ease;
  --press-translate:   1px;

  /* ---------------- BREAKPOINTS (documentation — values live inline in @media) ---------------- */
  /*  720px   collapses footer 4→2 cols, expands combined card, widens logo scene */
  /*  1024px  locks headline + body to mobile sizes through phone landscape       */
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  /* Prevent iOS Safari from auto-enlarging text on orientation change. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: "U8Web", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  font-weight: var(--weight);
  -webkit-text-stroke: var(--text-stroke) currentColor;
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============ STAGE ============ */
.stage {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* ============ BACKGROUND LOGO ============ */
/* z-index: -1 keeps the logo behind every sibling inside .main, but the stacking
   context is .main's own (.main has z-index: 1, position: relative) so the logo
   doesn't escape to behind .main itself. */
.logo-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: visible;        /* parallax layers extend into the footer's vertical area */
  display: grid;
  place-items: center;
}

/* ============ PARALLAX SCENE — logo ============ */
/* parallax-js overrides any transform on the scene itself, so the centering
   transform lives on .scene-wrap (one layer up). aspect-ratio swaps with
   orientation so portrait & landscape SVGs both fill the wrapper without
   distortion. */
.scene-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--width-logo-desktop);
  aspect-ratio: var(--ratio-logo-landscape);
}
@media (orientation: portrait) {
  .scene-wrap { aspect-ratio: var(--ratio-logo-portrait); }
}

.scene {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* parallax-js inlines `position: relative; display: block` on each layer.
   For the logo scene we want all 6 layers stacked at the same coords so the
   composition recomposes — !important overrides the inline styles. */
#scene-logo .layer {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
/* .layer owns parallax-js's translate transform; .layer__inner owns our custom
   rotation transform — two boxes so the transforms don't overwrite each other. */
#scene-logo .layer__inner {
  width: 100%;
  height: 100%;
  transform-origin: center;
  will-change: transform;
}
#scene-logo .layer__inner picture,
#scene-logo .layer__inner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  display: block;
  /* Where shapes overlap during parallax, colors multiply pigment-style
     (red × blue → dark purple) — like layered transparent inks. */
  mix-blend-mode: multiply;
}
/* isolation: isolate scopes the multiply blend so it only mixes between logo
   layers, not against the page background. */
#scene-logo {
  isolation: isolate;
}

/* ============ MAIN CONTENT ============ */
.main {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  padding: var(--pad-main-y) var(--pad-x);
}

.stack {
  position: relative;
  z-index: 1;       /* paint above sibling .logo-bg (absolute, z-index -1) */
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: var(--width-stack);
  width: 100%;
}
.stack > * + *      { margin-top: var(--gap-stack); }

/* Combined card holds body + signup + signature as one unified box. */
.combined {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-combined);
  text-align: center;
  padding: var(--pad-combined-y) var(--pad-combined-x);
  box-sizing: border-box;
  max-width: var(--width-combined-cap);
}
/* Center each child horizontally regardless of its intrinsic width. */
.combined > * {
  margin-left: auto;
  margin-right: auto;
}

/* White cards overlay the logo so text stays legible. Per-variant overrides
   (.headline, .combined) override .card's uniform padding explicitly. */
.card {
  background: var(--card-bg);
  -webkit-backdrop-filter: var(--card-blur);
          backdrop-filter: var(--card-blur);
  color: var(--ink);
  padding: var(--card-pad);
  line-height: var(--leading-card);
  box-shadow: var(--shadow-card);
}

.headline {
  font-size: var(--text-headline);
  font-weight: var(--weight);    /* <h1> UA default is 700; explicit prevents bold inheritance */
  -webkit-text-stroke: var(--text-stroke) currentColor;
  letter-spacing: var(--tracking-headline);
  line-height: var(--leading-headline);
  margin: 0;
  padding: var(--pad-headline-y) var(--pad-headline-x);
}

.body {
  font-size: var(--text-m);
  text-align: center;
  max-width: var(--width-body);
}
.body p              { margin: 0; }
.body p + p          { margin-top: var(--paragraph-gap); }

/* ============ EMAIL SIGNUP ============ */
/* Inputs/buttons inherit body's font-size (--text-m). iOS Safari may briefly
   auto-zoom on focus when font < 16px — accepted trade-off for visual consistency. */
.signup {
  font-size: var(--text-m);
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}
.signup__fields {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;        /* button stays on the same line as the input — input shrinks instead */
  gap: var(--gap-signup);
  width: 100%;
}
.signup input[type="email"] {
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  -webkit-text-stroke: var(--text-stroke) currentColor;   /* form elements don't inherit text-stroke reliably */
  color: var(--ink);
  /* field-sizing: content auto-grows the input with typed content; flex: 0 1 auto
     + min-width: 0 lets it shrink back when the row would overflow, keeping the
     button on the same line. */
  field-sizing: content;
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  max-width: 100%;
  padding: var(--pad-input);
  text-align: right;
}
.signup input[type="email"]::placeholder {
  color: var(--ink);
  font: inherit;
  font-family: inherit;   /* defensive: some Safari versions ignore `font: inherit` on ::placeholder */
  -webkit-text-stroke: var(--text-stroke) currentColor;
  opacity: 1;
}

/* Safari's contacts/autofill key icon overlaps narrow inputs — hide it.
   Form-autofill via keyboard suggestions still works. */
.signup input[type="email"]::-webkit-contacts-auto-fill-button,
.signup input[type="email"]::-webkit-credentials-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  position: absolute;
  right: 0;
}
.signup__arrow   { color: var(--ink-subtle); }
.signup__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
}
.btn {
  appearance: none;
  border: 0;
  background: var(--red);
  color: var(--paper);
  font: inherit;
  -webkit-text-stroke: var(--text-stroke) currentColor;
  padding: var(--pad-button);
  cursor: pointer;
  transition: background var(--motion-bg), transform var(--motion-press);
  white-space: nowrap;
  flex: 0 0 auto;           /* never shrinks/grows inside the signup row */
}
.btn:hover         { background: var(--red-hover); }
.btn:active        { transform: translateY(var(--press-translate)); }
.btn:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* Form state: success / already-subscribed. Both hidden by default; root
   classes (set by the pre-paint script in <head>) reveal them. */
.signup__success,
.signup__already {
  display: none;
  margin: 0;
  padding: 0;
  background: var(--success-bg);
  color: var(--success-text);
  font-family: inherit;
}
.is-subscribed         .signup__fields  { display: none; }
.is-subscribed         .signup__success { display: block; }
.is-already-subscribed .signup__fields  { display: none; }
.is-already-subscribed .signup__success { display: none; }
.is-already-subscribed .signup__already { display: block; }
/* If both flags fire (returning visitor signs up again), just-subscribed wins. */
.is-subscribed.is-already-subscribed .signup__already { display: none; }
.is-subscribed.is-already-subscribed .signup__success { display: block; }

.signature {
  font-size: var(--text-m);
  color: var(--ink-muted);
}

/* ============ FOOTER ============ */
/* Positioned above .main (z-index 3 vs 1) so footer text paints over the logo
   parallax that extends into the footer area via overflow: visible on .logo-bg.
   Transparent background lets the logo show through. */
.footer {
  position: relative;
  z-index: 3;
  background: transparent;
  padding: var(--pad-footer);
  font-size: var(--text-footer);
  color: var(--ink);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-footer);
  align-items: start;
  text-align: left;
}
.footer > * {
  padding: var(--card-pad);
  word-break: break-word;
}
.footer a {
  color: inherit;
  text-decoration: none;
}
.footer a:hover {
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}
.footer__label { color: var(--ink); }

/* ============ RESPONSIVE ============ */
/* Below 1024px: lock headline + body to their mobile sizes so rotating to
   landscape (or loading directly in landscape) doesn't enlarge them. */
@media (max-width: 1024px) {
  .headline { font-size: var(--text-headline); }
  .body     { font-size: var(--text-m-min); }
}

/* Below 720px: copyright dominates the top (full width); ontmoet spans the
   left column while bel + schrijf stack on the right column. Zero row-gap so
   bel↔schrijf read as a continuous 2-line block; ontmoet's 2 wrapped lines
   align top-to-top and bottom-to-bottom with that block. */
@media (max-width: 720px) {
  .footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "copy    copy"
      "ontmoet bel"
      "ontmoet schrijf";
    row-gap: 0;
  }
  .footer > * { padding: var(--pad-footer-cell-mobile-y) var(--card-pad); }
  .footer > :nth-child(1) { grid-area: copy;    margin-bottom: var(--card-pad); }
  .footer > :nth-child(2) { grid-area: bel;     padding-bottom: 0; }
  .footer > :nth-child(3) { grid-area: ontmoet; }
  .footer > :nth-child(4) { grid-area: schrijf; padding-top: 0; }

  .scene-wrap { width: var(--width-scene-mobile); }
  .combined   { max-width: var(--width-combined-mobile); }
}