/* ==========================================================================
   Studio Escaut — Coming soon
   Figma: Coming-Soon / node 1:2 (desktop 1440×1024) + node 6:198 (mobile 393×1704)
   Base styles below are the mobile frame; the desktop frame starts at 1280px.
   ========================================================================== */

/* --- Metropolis (SIL OFL 1.1) ------------------------------------------- */
@font-face {
  font-family: Metropolis;
  font-style: normal;
  font-weight: 200;                       /* Extra Light */
  font-display: swap;
  src: url(../fonts/metropolis-latin-200.woff2) format("woff2");
}
@font-face {
  font-family: Metropolis;
  font-style: normal;
  font-weight: 400;                       /* Regular */
  font-display: swap;
  src: url(../fonts/metropolis-latin-400.woff2) format("woff2");
}
@font-face {
  font-family: Metropolis;
  font-style: normal;
  font-weight: 500;                       /* Medium */
  font-display: swap;
  src: url(../fonts/metropolis-latin-500.woff2) format("woff2");
}
@font-face {
  font-family: Metropolis;
  font-style: normal;
  font-weight: 600;                       /* Semi Bold */
  font-display: swap;
  src: url(../fonts/metropolis-latin-600.woff2) format("woff2");
}

/* --- Tokens ------------------------------------------------------------- */
:root {
  --cream: #fcffdd;
  --ink: #050305;
  --lime: #f8ffa2;
  --black: #000;
  --error: #f55;

  --ink-hover: rgba(5, 3, 5, .8);
  --rule: rgba(0, 0, 0, .4);

  --font: Metropolis, "Helvetica Neue", Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, p { margin: 0; }

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

[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }

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

/* --- Type styles (Figma text styles) ------------------------------------
   The shared Figma styles report letterSpacing: 0, but the frames render
   wider than Metropolis' own advances. The values below were measured off
   the exported 1440×1024 and 393×1704 frames so line widths and line breaks
   land where the design puts them. Placeholder and footer need none. */
.t-h1 {                                                           /* SE - H1  */
  font-size: 42px; line-height: 48px; font-weight: 200;
  letter-spacing: .0173em;
}
.t-p1 {                                                           /* SE - P1  */
  font-size: 18px; line-height: 24px; font-weight: 400;
  letter-spacing: .0324em;
}
.t-p2 {                                                           /* SE - P2  */
  font-size: 16px; line-height: 24px; font-weight: 400;
  letter-spacing: .0324em;
}
.t-h4 {                                                           /* SE - H4  */
  font-size: 20px; line-height: 26px; font-weight: 600;
  letter-spacing: .004em;
  text-transform: uppercase;
}

/* ==========================================================================
   Layout shell
   ========================================================================== */
.stage { display: block; }

.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 852px;
  overflow: hidden;
}

/* --- Photo panel -------------------------------------------------------- */
.panel--photo { padding: 64px 16px 92px; }

.panel__photo {
  position: absolute;
  inset: 0;
  container-type: size;
  overflow: hidden;
}
.panel__photo picture { display: contents; }

/* Figma crop: image 152.76% × 105.66% of the frame, offset −26.29% left.
   max() of the two axes keeps the frame covered at any aspect ratio; the
   translate is a share of the image's own width, so the crop never drifts. */
.panel__photo-img {
  position: absolute;
  top: 0;
  left: 0;
  width: max(152.749cqw, 70.409cqh);
  height: auto;
  aspect-ratio: 2731 / 4096;
  max-width: none;
  transform: translateX(-17.209%);
}

.panel__scrim {
  position: absolute;
  inset: 0;
  background: var(--ink);
  opacity: .2;
}

.logo { position: relative; }
.logo img { width: 191px; height: 22px; }

.intro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: 100%;
  max-width: 361px;
  margin-top: auto;                 /* content block sits 92px off the bottom */
  color: var(--cream);
}

.intro__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  min-height: 211px;                /* Figma frame 6:225 */
}

.intro__title { max-width: 357px; }

/* --- Cream panel -------------------------------------------------------- */
.panel--cream {
  padding: 64px 16px 32px;
  background: var(--cream);
}

.swirl { position: absolute; pointer-events: none; }
.swirl img { max-width: none; }

.swirl--desktop { display: none; }

.swirl--mobile {
  top: 26px;
  left: -195px;
  width: 832.848px;
  height: 854.716px;
}
.swirl--mobile img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 854.716px;
  height: 832.848px;
  transform: translate(-50%, -50%) rotate(90deg);
}

.pillars {
  position: relative;
  width: 100%;
  max-width: 358px;
  color: var(--black);
}
.pillars--desktop { display: none; }

/* --- Signup ------------------------------------------------------------- */
.signup {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: 100%;
  max-width: 361px;
  margin: 62px 0 32px;   /* the footer below takes the rest of the panel */
}

.signup__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  /* The Figma frame, as a floor rather than a fixed height. A phone narrower
     than the 393px frame gives the title or the body an extra line, and a
     fixed height let that line run over the form below it. */
  min-height: 233px;                /* Figma frame 13:448 */
}

.signup--done .signup__head { min-height: 0; }

.signup__kicker { width: 100%; color: var(--black); }
.signup__title  { width: 100%; max-width: 357px; }
.signup__body   { width: 100%; }

/* --- Signup fields ------------------------------------------------------ */
.field {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: 100%;
}

/* Voornaam and achternaam sit next to each other, the address takes the full
   width under them. The 36px row gap is the smallest step that keeps a line
   clear of the message above it: the message sits 42px down a 30px row and is
   one 14px line tall, so it ends 26px below the rule. */
.field__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px 16px;
  width: 100%;
  max-width: 354px;      /* the Figma field width, now shared by two cells */
}
.field__row--wide { grid-column: 1 / -1; }

/* Rule states, per the Figma frames: 40% black when empty and idle, solid
   black on focus or once filled, error red when the address is rejected. */
.field__row {
  position: relative;
  width: 100%;
  height: 30px;
  border-bottom: 1px solid var(--rule);
  transition: border-color .15s ease;
}
.field__row:focus-within,
.field__row.is-filled { border-bottom-color: var(--black); }
.field__row.is-invalid { border-bottom-color: var(--error); }

.field__input {
  display: block;
  width: 100%;
  height: 14px;
  padding: 0;
  border: 0;
  margin: 0;
  background: none;
  color: var(--black);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 200;
  line-height: 14px;
  appearance: none;
}
.field__input:focus { outline: none; }
.field__input::placeholder { color: var(--black); opacity: .4; }

.field__check {
  position: absolute;
  top: -1px;
  right: 0;
  width: 16px;
  height: 16px;
  opacity: 0;
  transition: opacity .15s ease;
}
.field__check img {                  /* 13.17×9.83 glyph inset in its 16px box */
  position: absolute;
  top: 2.75px;
  left: 1.4167px;
  width: 13.1667px;
  height: 9.8333px;
}
.field__row.is-valid .field__check { opacity: 1; }

.field__error {
  position: absolute;
  top: 42px;
  left: 1px;
  width: 100%;
  color: var(--error);
  font-size: 14px;
  font-weight: 200;
  line-height: normal;
  text-align: center;
}
.field__row--wide .field__error { width: 192px; }   /* Figma box 13:462 */
.field__error[hidden] { display: none; }

/* The button and the opt-in line move together, so .field's own 48/28px
   rhythm stays on the row above them. */
.field__submit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

/* Shown only when the call to Club Planner fails, so the visitor is never
   told they are on the list while they are not. */
.field__notice {
  max-width: 354px;
  color: var(--error);
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: .0324em;
  text-align: center;
}
.field__notice a { text-decoration: underline; text-underline-offset: 2px; }

.field__consent {
  max-width: 354px;
  color: var(--ink-hover);
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: .0324em;
  text-align: center;
}
.field__consent a { text-decoration: underline; text-underline-offset: 2px; }
.field__consent a:hover { color: var(--ink); }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 24px 40px;
  border: 0;
  border-radius: 50px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: .006em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.btn:disabled { cursor: default; opacity: .5; }   /* while the signup is in flight */

.btn__arrow {
  position: relative;
  flex: none;
  width: 16px;
  height: 16.468px;
}
.btn__arrow::before {                /* 16.468×16 arrow, rotated −90° */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16.4675px;
  height: 16px;
  transform: translate(-50%, -50%) rotate(-90deg);
  background: no-repeat center / 100% 100%;
}

.btn--ink { background: var(--ink); color: var(--cream); }
.btn--ink .btn__arrow::before { background-image: url(../img/arrow-cream.svg); }
.btn--ink:hover { background: var(--ink-hover); }
.btn--ink:active { background: var(--lime); color: var(--black); }
.btn--ink:active .btn__arrow::before { background-image: url(../img/arrow-dark.svg); }

/* --- Footer ------------------------------------------------------------- */
.footer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 135px;
  margin: auto 0 0 auto;            /* flush right, 32px off the bottom */
  text-align: right;
}

.footer__item {
  font-size: 9px;
  font-weight: 500;
  line-height: 8px;                 /* Figma text boxes are 8px tall */
  text-transform: uppercase;
  color: var(--ink);
}
.footer__item:hover { text-decoration: underline; }

/* ==========================================================================
   Desktop — Figma frame 1:2 (1440×1024)
   ========================================================================== */
@media (min-width: 1280px) {

  .t-h1 { font-size: 62px; line-height: 68px; }
  .t-p1 { font-size: 24px; line-height: 36px; }

  /* --- Split stage -------------------------------------------------------
     --split is the photo panel's share of the stage. main.js drives it every
     frame; without the script it stays at .5, which is the Figma frame.
     --swirl says how much wider the cream panel is than at rest.
     Each offset below reads off the panel's own free space (--free), so the
     content keeps its proportions while the panel grows and shrinks. */
  .stage {
    display: flex;
    min-height: max(100vh, 1024px);

    --split: .5;
    --content: 508px;
    --free: calc(100% - var(--content));
    --base: 168px;     /* both content blocks hang this far off the bottom */
  }

  .panel {
    flex: 0 1 0%;
    min-width: 0;
    min-height: 0;
    display: block;
    padding: 0;
  }
  .panel--photo { flex-grow: var(--split); }
  .panel--cream { flex-grow: calc(1 - var(--split)); }

  /* The photo holds still and the panel is a window over it, so the divider
     travels across the image instead of stretching it. Every length here
     reads off the panel height, which does not change while the split moves.
     Reading off the panel width is what made the old crop scale with every
     breath of the line.

     The crop is the Figma one. The design draws the photo 85.944cqh wide and
     starts it 15.516cqh left of the panel, and hero-desktop.jpg carries that
     same photo in its left 48.2% — so the file goes 85.944 / .482 = 178.307
     wide and keeps the offset. The extension to the right is the travel the
     line needs.

     It runs out on a frame wider than 2.63 times its height, where the panel
     at its widest (62% of the stage) would reach past the image. The second
     term covers that case. */
  .panel__photo-img {
    width: max(178.307cqh, calc(63vw + 15.516cqh));
    aspect-ratio: 2000 / 1447;
    transform: translateX(-15.516cqh);
  }

  .logo { position: absolute; top: 64px; left: calc(var(--free) * .45283); }

  /* The two H1s read as one line across the split, so they start at the same
     height. Both blocks hang off the bottom, and the signup block carries
     258px more under its title than the intro does (a 72px body against
     101px, but two field lines, a button and the opt-in line below it). The
     intro rises by that difference. Re-measure it if either block gains or
     loses a line: a body line is worth 24px, a field line 66px — its own
     30px plus the 36px gap above it. */
  .intro {
    position: absolute;
    left: calc(var(--free) * .45283);   /* 96px of 212px free at the rest split */
    bottom: calc(var(--base) + 258px);
    align-items: flex-start;
    width: var(--content);
    max-width: none;
    margin-top: 0;
  }
  .intro__text { min-height: 0; }
  .intro__title { max-width: none; }
  .intro__body { height: 101px; }   /* Figma text box 5:101 */

  .swirl--mobile { display: none; }

  /* The SVG clips itself to its own box (clipPath 1025×1003), so that box
     has to stay wider than the panel or the clip edge shows up as a straight
     cut. The box tracks the panel instead of holding a fixed pixel size:
     139.306% of the resting panel width, and tall enough to cover the stage.
     On the 1440 frame that comes out at the Figma 1003×1025. Opening the
     panel makes it wider than its resting width, and --swirl grows the box
     by the same amount. The swirl keeps its corner on the panel corner, so
     it travels with the line rather than drifting off it. */
  .swirl--desktop {
    display: block;
    top: 0;
    left: 0;
    --sw: max(69.6528vw, calc(.979474 * max(100vh, 1024px)));
    --sh: calc(var(--sw) * 1.021934);
    width: var(--sw);
    height: var(--sh);
    transform: scale(var(--swirl, 1));
    transform-origin: 0 0;
  }
  .swirl--desktop img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--sh);        /* swapped — the image turns a quarter turn */
    height: var(--sw);
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .pillars--mobile { display: none; }
  .pillars--desktop {
    display: block;
    position: absolute;
    top: 68px;
    left: 50%;
    width: 508px;
    max-width: none;
    transform: translateX(-50%);
    text-align: center;
    white-space: pre;
  }

  .signup {
    position: absolute;
    left: calc(var(--free) * .25943);   /* 55px of 212px free at the rest split */
    bottom: var(--base);
    align-items: flex-start;
    gap: 28px;
    width: var(--content);
    max-width: none;
    margin: 0;
  }
  /* The confirmation hangs higher than the form. Its body is two lines, so
     the block is 7px taller than the Figma box and the offset drops by that
     much to keep the title on the spot the design gives it. */
  .signup--done { bottom: 452px; }

  .signup__head {
    align-items: flex-start;
    min-height: 0;
  }
  .signup__title { max-width: none; }
  /* The 508px column holds the confirmation title on one line. A phone does
     not, so the line only stays whole here. */
  .signup__title--nowrap { white-space: nowrap; }
  /* The Figma text box, as a floor. Longer copy takes a third line and the
     block grows instead of running over the first field row. */
  .signup__body { min-height: 41px; }   /* Figma text box 3:70 */

  .field { align-items: flex-start; gap: 43px; }
  .field__submit { align-items: flex-start; }
  /* The block reads off one left edge here, so the messages line up with the
     field they belong to instead of sitting centred under it. */
  .field__error { text-align: left; }
  .field__notice { text-align: left; }
  .field__consent { text-align: left; }

  .footer {
    position: absolute;
    right: calc((100% - 354px) * .2623);
    bottom: 64px;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    width: max-content;    /* the row grows to the left; the right edge stays put */
    margin: 0;
    text-align: center;
  }
  /* Figma text boxes. Facebook came after the design, so it takes the width
     of its own label. */
  .footer__item--mail      { width: 113px; }
  .footer__item--instagram { width: 58px; }
  .footer__item--legal     { width: 135px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }
}