/* Slow Tide "Monday list" sign-up (the site's orange CTA band, its stickers and type), dressing
   focus-underline-field (the email line) + form-button-states (Join > Sending > Sent). */
:root {
  --cream: #F4EAD3; --green: #1D3A2C; --green-deep: #16291F; --orange: #D9531C; --ink: #20180F;
  --ease: cubic-bezier(.44, 0, .56, 1);
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--orange); color: var(--cream); font: 400 16px/24px Archivo, system-ui, sans-serif; overflow-x: hidden; }
img { display: block; }

.cta { position: relative; overflow: hidden; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 64px 24px; text-align: center; }
.cta-in { position: relative; z-index: 2; width: 640px; max-width: 100%; display: flex; flex-direction: column; align-items: center; }
.mark { width: 150px; height: auto; margin-bottom: 40px; filter: brightness(0) invert(93%) sepia(14%) saturate(380%) hue-rotate(330deg); }
.script { font: 500 40px/1 Caveat, cursive; margin-bottom: 14px; }
h1 { font: 400 92px/.98 Anton, Impact, sans-serif; text-transform: uppercase; }
.cta-p { max-width: 30em; margin-top: 26px; text-wrap: balance; font-size: 19px; line-height: 28px; }

/* the form: a cream hairline that brightens on focus, and the site's green button with the hard ink shadow */
.join { width: 100%; margin-top: 52px; display: flex; flex-direction: column; gap: 34px; text-align: left; transition: opacity .3s var(--ease); }
.join.is-resetting { opacity: 0; }
.fuf {
  --fuf-line: rgba(244, 234, 211, .5); --fuf-line-focus: var(--cream); --fuf-line-error: #FFE08A;
  --fuf-w: 2px; --fuf-w-focus: 3px; --fuf-ink: var(--cream); --fuf-placeholder: rgba(244, 234, 211, .55); --fuf-label: var(--cream);
  --fuf-font: 500 30px/38px Archivo, system-ui, sans-serif; --fuf-tracking: -.01em; --fuf-pad: 14px;
  --fuf-label-font: 700 14px/14px Archivo, system-ui, sans-serif; --fuf-gap: 8px;
}
.fuf__label { letter-spacing: 1px; }
.fbs-btn {
  --fbs-bg: var(--green); --fbs-bg-hover: #24473a; --fbs-bg-press: var(--green-deep); --fbs-bg-success: var(--cream);
  --fbs-ink: var(--cream); --fbs-spin-color: var(--cream); --fbs-spin-size: 26px; --fbs-spin-w: 3px; --fbs-h: 72px; --fbs-radius: 999px;
  box-shadow: 6px 6px 0 var(--ink); font: 700 19px/1 Archivo, system-ui, sans-serif; text-transform: uppercase; letter-spacing: .5px;
}
.fbs-btn[data-state="success"] { color: var(--green); box-shadow: 3px 3px 0 var(--ink); transform: translate(3px, 3px); }
.fbs-btn { transition: background-color var(--fbs-dur) var(--fbs-ease), color var(--fbs-dur) var(--fbs-ease), box-shadow .25s var(--ease), transform .25s var(--ease); }
.fine { margin-top: 22px; font-size: 15px; opacity: .85; }

/* stickers, placed like the site's CTA */
.deco { position: absolute; z-index: 1; pointer-events: none; }
.deco img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(32, 24, 15, .22)); }
.d-mug { left: 3%; top: 90px; width: 150px; height: 204px; transform: rotate(-6deg); }
.d-burst { left: 20%; top: 46px; width: 74px; height: 74px; }
.d-roundel { right: 4%; top: 70px; width: 170px; height: 162px; transform: rotate(11deg); }
.d-scallop { right: 3%; top: 520px; width: 150px; height: 154px; }
.d-bean { right: 8%; bottom: 120px; width: 120px; height: 120px; transform: rotate(70deg); }
.d-word { left: 2%; bottom: 70px; width: 300px; height: 136px; transform: rotate(-4deg); }

@media (max-width: 760px) {
  .cta { padding: 48px 16px; }
  .mark { width: 120px; margin-bottom: 28px; }
  .script { font-size: 30px; }
  h1 { font-size: 48px; line-height: 52px; }
  .cta-p { font-size: 16px; line-height: 24px; }
  .join { margin-top: 36px; gap: 28px; }
  .fuf { --fuf-font: 500 22px/28px Archivo, system-ui, sans-serif; }
  .fbs-btn { --fbs-h: 60px; font-size: 16px; }
  .deco { display: none; }
}