/* CrushAmour — shared design language.
   Duplicated into each variant's style.css on purpose: layouts.lander links
   exactly one stylesheet per landing, and a second request for ~110 lines of
   tokens would cost more than the duplication does.

   Nouvelle-vague film-poster brutalism: Anton poster caps colliding with the
   photography, Space Grotesk for everything a visitor must read or act on
   (17px minimum), chalk white ground, near-black ink, Klein ultramarine as
   the single accent. Zero border-radius anywhere — including the modal. */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Space+Grotesk:wght@400;500;700&display=swap');

:root {
  --ink: #17150F;
  --ink-soft: #56513F;
  --ground: #F2F2EE;
  --blue: #1F3CC4;
  --display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --body: 'Space Grotesk', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --keyline: 3px solid var(--ink);
  --wrap: 1200px;
}

* { box-sizing: border-box; }

body.lander {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

.cru-display {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: .96;
  letter-spacing: .01em;
  margin: 0;
}

.cru-slug {
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0;
}

/* Perforation strip: ticket-stub holes punched through whatever it sits on,
   showing the page ground. Pure CSS — the motif never ships as an image. */
.cru-perf {
  display: block;
  height: 12px;
  background-image: radial-gradient(circle at 8px 6px, var(--ground) 3.5px, transparent 4.2px);
  background-size: 26px 12px;
  background-repeat: repeat-x;
}

/* Hard-bordered film frame for every photograph. No gradient overlays — the
   caption is printed on a plate under the image, never over it. */
.cru-frame { border: var(--keyline); background: var(--ground); margin: 0; }
.cru-frame img { width: 100%; object-fit: cover; }
.cru-frame figcaption { padding: 12px 14px 14px; border-top: var(--keyline); }

/* Chunky black rectangle, ultramarine hover inversion. The layout rewires
   every a.btn to open the signup modal, so a CTA is a link, never a button. */
a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: var(--ink);
  color: var(--ground);
  text-decoration: none;
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  min-height: 56px;
  padding: 0 30px;
  border: var(--keyline);
  border-radius: 0;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
/* color: inherit is load-bearing: every CTA label sits in a <p>, so a section
   rule would beat the colour inherited from a.btn and leave grey text on a
   black button. Covers the submit too, which carries .btn on a <button>. */
.btn p { margin: 0; color: inherit; }
a.btn:hover { background: var(--blue); border-color: var(--blue); color: #fff; }

/* The submit is a <button>, so the a.btn rules above never reach it and
   form.css supplies layout without colour — an unstyled grey button on the
   actual submit is the most expensive place to leave a default. */
.signup-form__submit {
  background: var(--ink);
  color: var(--ground);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: background .12s ease, color .12s ease;
}
.signup-form__submit:hover { background: var(--blue); color: #fff; }
.signup-modal__title {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--ink);
}

/* Footer under a thin rule, deliberately quiet. form.css only supplies
   zero-specificity defaults here. */
footer.legal { border-top: 1px solid var(--ink); margin-top: 56px; color: var(--ink-soft); opacity: 1; }

/* ── Variant C: "Marquee" ────────────────────────────────────────────────
   Full-height EARLY/LATE split poster under a marquee band; the ask is the
   default 5s modal, dressed as a box-office ticket window. */

.m-fold { min-height: 100dvh; display: flex; flex-direction: column; border-bottom: var(--keyline); }

.m-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  border-bottom: var(--keyline);
}
/* logo.svg is authored WHITE for dark heroes; this page is chalk, so tint it
   to ink. Sized by height — the lockup is ~6:1, a width constraint shrinks
   the wordmark to nothing. */
.m-bar__logo { height: 34px; width: auto; max-width: calc(100vw - 40px); filter: brightness(0); }
.m-bar__note { margin: 0; font-weight: 700; font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; }

/* Marquee band: ink ground, rows of ultramarine marquee bulbs, poster caps. */
.m-marquee {
  background: var(--ink);
  color: var(--ground);
  text-align: center;
  padding: 10px 20px 12px;
  border-bottom: var(--keyline);
}
.m-marquee::before,
.m-marquee::after {
  content: '';
  display: block;
  height: 10px;
  background-image: radial-gradient(circle at 7px 5px, var(--blue) 3px, transparent 3.6px);
  background-size: 22px 10px;
  background-repeat: repeat-x;
}
.m-marquee::before { margin-bottom: 10px; }
.m-marquee::after { margin-top: 10px; }
.m-marquee__title { font-size: clamp(2rem, 5.6vw, 3.6rem); }
.m-marquee__sub { margin: 6px 0 0; font-size: 1.05rem; font-weight: 500; }

/* The split: two full-height poster halves; hover (or first tap, via .is-open)
   grows the choice to ~70% and reveals its synopsis plate. */
.m-split { flex: 1; display: flex; min-height: 58vh; }
.m-half {
  position: relative;
  flex: 1 1 0;
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: flex-grow .4s ease;
}
.m-half + .m-half { border-left: var(--keyline); }
.m-half:hover,
.m-half.is-open { flex-grow: 2.333; }
.m-half img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.m-half__word {
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: clamp(3rem, 8vw, 6.5rem);
  color: var(--ground);
  /* Hard offset shadow, not a gradient scrim — photos stay full-frame. */
  text-shadow: 4px 4px 0 var(--ink);
}
.m-half__plate {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  background: var(--ink);
  color: var(--ground);
  border-top: var(--keyline);
  padding: 14px 18px 16px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s ease .1s, transform .3s ease .1s;
}
.m-half:hover .m-half__plate,
.m-half.is-open .m-half__plate { opacity: 1; transform: none; }
.m-half__syn { display: block; font-size: 1.02rem; }
.m-half__go {
  display: inline-block;
  margin-top: 8px;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 4px 10px;
}

/* ── Lobby cards ── */

.m-lobby { max-width: var(--wrap); margin: 0 auto; padding: 56px 20px 8px; }
.m-lobby__title { font-size: clamp(1.8rem, 4.6vw, 3rem); margin-top: 8px; }
.m-lobby__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 28px;
}
.m-card { cursor: pointer; }
.m-card img { aspect-ratio: 4 / 5; }
.m-card__name { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.15rem; margin: 6px 0 0; }
.m-card__line { margin: 2px 0 0; font-size: 1rem; }
.m-crowd { display: block; margin-top: 18px; }
.m-crowd img { aspect-ratio: 16 / 10; }

/* Recovery path two: the pinned BOX OFFICE tab. */
.m-tab {
  position: fixed;
  right: 0;
  bottom: 26px;
  z-index: 45;
  border-right: none;
  box-shadow: -6px 6px 0 var(--blue);
}

.m-hidden-cta { position: fixed; left: -9999px; top: 0; }

@media (max-width: 900px) {
  .m-lobby__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

@media (max-width: 760px) {
  .m-bar { padding: 10px 16px; }
  .m-bar__logo { height: 30px; }
  .m-bar__note { display: none; }
  .m-marquee__sub { font-size: 1rem; }

  /* The split stacks; plates are always visible since there is no hover, and
     the first tap grows the half before the second commits. */
  .m-split { flex-direction: column; }
  .m-half { min-height: 32vh; }
  .m-half + .m-half { border-left: none; border-top: var(--keyline); }
  .m-half__plate { opacity: 1; transform: none; }
  .m-half__word { font-size: clamp(2.6rem, 14vw, 4rem); }

  .m-tab { bottom: 16px; min-height: 50px; padding: 0 18px; }
}

/* ── The box-office ticket window ────────────────────────────────────────
   The shared modal, restyled from THIS stylesheet only. The body.lander
   prefix is what outranks form.css, which loads after this file and repaints
   the modal dark for every other brand. Zero radius, keyline, hard offset
   shadow, dashed booth-window rule inside. */
body.lander #signup-modal.container-modal {
  position: relative;
  background: var(--ground);
  color: var(--ink);
  border: var(--keyline);
  border-radius: 0;
  box-shadow: 10px 10px 0 var(--blue);
  padding: 28px 24px 24px;
}
body.lander #signup-modal.container-modal::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 2px dashed var(--blue);
  pointer-events: none;
}
/* form.css inverts the close icon white for its dark card; undo on chalk. */
body.lander #signup-modal.container-modal a.close-modal { filter: none; top: 12px; right: 12px; }
/* The white logo again, this time inside the modal. */
body.lander #signup-modal .signup-modal__logo { filter: brightness(0); height: 28px; }
body.lander #signup-modal .signup-modal__title {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--ink);
  font-size: 1.45rem;
}
body.lander #signup-modal .signup-modal__sub { color: var(--ink-soft); font-size: 1rem; }
body.lander #signup-modal .signup-form__email {
  border: var(--keyline);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
}
body.lander #signup-modal .signup-form__email:focus { border-color: var(--blue); }
body.lander #signup-modal .signup-form__submit {
  background: var(--ink);
  color: var(--ground);
  border: var(--keyline);
  min-height: 56px;
}
body.lander #signup-modal .signup-form__submit:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
body.lander #signup-modal .signup-form__error { color: #A1140A; }
body.lander #signup-modal .signup-form__fineprint { color: var(--ink-soft); }
body.lander #signup-modal .signup-modal__call { color: var(--ink-soft); }
body.lander #signup-modal .signup-modal__call-link { color: var(--ink); }

/* The booth dressing the script inserts after the logo. */
.m-booth { margin: 0 0 12px; }
.m-booth__slug {
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0;
}
.m-booth__photo {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border: var(--keyline);
  display: block;
  margin: 10px auto 0;
}
.m-booth__offer { margin: 10px 0 0; font-size: 1rem; color: inherit; }
.m-booth__stamp {
  display: none;
  width: fit-content;
  margin: 10px auto 0;
  background: var(--blue);
  color: #fff;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 12px;
}
.m-booth__stamp.is-on { display: block; }

/* Full-screen signup modal on phones.
   At 375x667 the shared card is a letterbox floating in an overlay with the
   page showing round the edges. Edge to edge gives the field and the submit
   room at the moment of the ask. */
@media (max-width: 640px) {
  .blocker { padding: 0; }

  body.lander #signup-modal.container-modal {
    width: 100%;
    max-width: none;
    margin: 0;
    /* dvh so mobile browser chrome does not crop the submit. */
    min-height: 100vh;
    min-height: 100dvh;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    /* Two traps in one line.
       !important: jquery-modal opens the dialog with .show(), which writes
       `display: inline-block` as an INLINE style — no selector outranks that,
       and without this the box goes full screen while its contents stay pinned
       to the top.
       inline-flex, not flex: .blocker centres its child against a full-height
       inline-block ::before spacer. A block-level flex box cannot share that
       line box, so it lands one whole viewport further down the page. */
    display: inline-flex !important;
    flex-direction: column;
    justify-content: center;
    padding: 30px 24px calc(30px + env(safe-area-inset-bottom));
  }

  body.lander #signup-modal.container-modal a.close-modal {
    top: 14px;
    right: 14px;
  }

  body.lander #signup-modal .signup-modal__logo { height: 32px; margin-bottom: 20px; }
  body.lander #signup-modal .signup-modal__title { font-size: 1.5rem; }
}