/* CukesChips waitlist page.
   Palette is sampled from the logo artwork per the brand guidelines, which state the
   logo files win over the older website brief's approximations.

   Type discipline: the hero carries exactly three text styles (wordmark, lede, and the
   body/action pair). More than that turns the hierarchy to mud. */

@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/instrumentserif-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/spacegrotesk-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --green: #084926;
  --deep-green: #003b19;
  --cream: #faf6dc;
  --sage: #3f6f50;
  --pistachio: #c0ccb2;

  --display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --body: "Space Grotesk", system-ui, -apple-system, sans-serif;

  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-6: 3rem;
  --s-8: 4rem;

  --gutter: clamp(1.5rem, 6vw, 6rem);
}

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

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

/* A plain anchor jump, eased. This is not scroll-jacking: the scrollbar stays the
   visitor's, and anyone who asks for reduced motion gets an instant jump. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--green);
  color: var(--cream);
  font-family: var(--body);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  line-height: 1.6;
}

/* Announcement ---------------------------------------------------------
   Carries the offer. It is the only place the offer appears. */

.announce {
  margin: 0;
  padding: var(--s-2) var(--gutter);
  border-bottom: 1px solid rgb(192 204 178 / 0.28);
  color: var(--pistachio);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
}

/* Hero ------------------------------------------------------------------ */

main {
  flex: 1;
  /* The mascot below is deliberately allowed to run past the right edge. Clip it here,
     at full width, so the bleed never adds horizontal scroll. `clip` is preferred over
     `hidden` because it does not create a scroll container, and it does not break a
     `position: sticky` descendant the way `hidden` would; `hidden` is the fallback. */
  overflow-x: hidden;
  overflow-x: clip;
}

.hero {
  position: relative;
  display: grid;
  gap: var(--s-6);
  align-items: center;
  padding: clamp(3rem, 9vw, 7rem) var(--gutter) clamp(4rem, 10vw, 8rem);
  max-width: 78rem;
  margin-inline: auto;
}

.hero__text {
  position: relative;
  z-index: 1;
}

/* Style 1 of 3 */
.wordmark {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3.25rem, 13vw, 8.5rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
}

/* Style 2 of 3 */
.lede {
  margin: var(--s-2) 0 0;
  font-family: var(--display);
  font-size: clamp(1.5rem, 4.5vw, 2.75rem);
  line-height: 1.1;
  font-style: italic;
  color: var(--pistachio);
}

/* Style 3 of 3, shared by the supporting line and the action */
.support {
  margin: var(--s-4) 0 0;
  max-width: 32ch;
  color: rgb(250 246 220 / 0.86);
}

.cta {
  display: inline-block;
  margin-block-start: var(--s-4);
  padding: 0.9em 1.6em;
  border: 1px solid var(--cream);
  border-radius: 100px;
  color: var(--cream);
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  transition:
    background-color 160ms cubic-bezier(0.215, 0.61, 0.355, 1),
    color 160ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Hover makes the action pop, never recede. */
.cta:hover,
.cta:focus-visible {
  background: var(--cream);
  color: var(--green);
}

/* The mascot is real brand artwork, cropped and bled past the edge rather than an
   abstract decorative shape. */
.hero__mark {
  position: relative;
  z-index: 0;
  justify-self: start;
  margin-inline-start: calc(var(--gutter) * -0.5);
}

.hero__mark img {
  display: block;
  inline-size: clamp(11rem, 62vw, 26rem);
  block-size: auto;
  max-inline-size: none;
}

@media (min-width: 52rem) {
  .hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--s-4);
  }

  .hero__mark {
    justify-self: end;
    align-self: center;
    margin-inline-start: 0;
    /* Crop against the viewport edge rather than floating as a whole medallion.
       (78rem - 100vw) / 2 is the distance from the hero's border box to the viewport
       edge, and --gutter is the hero's own inline padding, which also has to be crossed.
       The trailing 6rem is the amount actually trimmed, and it stays constant at every
       width instead of drifting. min() keeps the value negative below 78rem. */
    margin-inline-end: min(
      -2rem,
      calc((78rem - 100vw) / 2 - var(--gutter) - 6rem)
    );
  }

  .hero__mark img {
    inline-size: clamp(20rem, 38vw, 34rem);
  }
}

/* Waitlist --------------------------------------------------------------
   The cream surface is the other half of the brand's core pair, so the page turns over
   once rather than staying one flat field. Same three type styles as the hero. */

.waitlist {
  padding: clamp(3rem, 8vw, 5.5rem) var(--gutter);
  background: var(--cream);
  color: var(--green);
}

.waitlist__heading {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.waitlist__line {
  margin: var(--s-2) 0 0;
  max-width: 32ch;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  line-height: 1.2;
  color: var(--sage);
}

.waitlist__form {
  margin-block-start: var(--s-4);
  padding-block-start: var(--s-3);
  border-block-start: 1px solid rgb(8 73 38 / 0.22);
  max-width: 34rem;
}

/* Hidden until the script reveals it, so a visitor with JavaScript off sees the fallback
   link rather than an empty 351px frame. */
.waitlist__form iframe {
  display: none;
  color-scheme: light;
}

.waitlist__form.is-ready iframe {
  display: block;
}

.waitlist__fallback {
  margin: 0;
  font-size: 1rem;
}

.waitlist__fallback a {
  color: var(--green);
  text-underline-offset: 0.25em;
}

/* Footer ---------------------------------------------------------------- */

footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  align-items: baseline;
  justify-content: space-between;
  padding: var(--s-4) var(--gutter);
  border-block-start: 1px solid rgb(192 204 178 / 0.28);
  background: var(--deep-green);
  font-size: 0.8125rem;
}

.copyright {
  margin: 0;
  letter-spacing: 0.06em;
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.links a {
  color: var(--pistachio);
  text-decoration-color: rgb(192 204 178 / 0.4);
  text-underline-offset: 0.25em;
}

.links a:hover {
  color: var(--cream);
  text-decoration-color: currentColor;
}

/* Focus ------------------------------------------------------------------ */

a:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}