/* ==========================================================================
   Kure — Design tokens
   ========================================================================== */

:root {
  /* Colour */
  --color-stone: #F7F6F2;
  --color-pine: #1F3A3D;
  --color-pine-soft: rgba(31, 58, 61, 0.72);
  --color-pine-muted: rgba(31, 58, 61, 0.55);
  --color-pine-faint: rgba(31, 58, 61, 0.12);
  --color-pine-hover: #16292b;
  --color-white: #FFFFFF;

  /* Type */
  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* 8px spacing grid */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;
  --space-10: 80px;

  /* Layout */
  --side-padding: 24px;
  --max-width: 420px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 200ms;
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

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

body {
  margin: 0;
}

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

button,
input {
  font: inherit;
  color: inherit;
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
  background: var(--color-stone);
  color: var(--color-pine);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.page {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-4) var(--side-padding) var(--space-4);
  text-align: center;
}

/* ==========================================================================
   Wordmark
   ========================================================================== */

.wordmark {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 0 0 var(--space-3);
}

.wordmark-link {
  color: inherit;
  text-decoration: none;
}

.site-logo {
  display: inline-block;
  height: 16px;
  width: auto;
  margin: 0 0 var(--space-4);
}

/* ==========================================================================
   Legal pages (privacy)
   ========================================================================== */

.page--legal {
  text-align: left;
  padding-top: var(--space-6);
}

.page--legal .wordmark {
  text-align: center;
}

.legal-heading {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.75rem;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
}

.legal-subheading {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  margin: var(--space-5) 0 var(--space-2);
}

.legal-text {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 var(--space-3);
}

.legal-link {
  color: var(--color-pine);
}

.legal-meta {
  font-size: 0.8125rem;
  color: var(--color-pine-muted);
  margin: 0 0 var(--space-4);
}

/* ==========================================================================
   Headline & subtext
   ========================================================================== */

.headline {
  font-family: var(--font-serif);
  font-weight: 500;
  /* These two lines are full sentences, much longer than the old short
     punchy phrases, so they need a smaller size than before to avoid
     overflow/wrapping on an iPhone 15: measured the longer line
     ("Everyone you ask is guessing.") in real Fraunces and sized so it
     never exceeds about 24px there, with comfortable margin. */
  font-size: clamp(1.375rem, 6.2vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-1);
}

.subtext {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-pine-soft);
  /* Trimmed from space-3 to space-2: the mockup below grew 20% larger,
     so this gives some of that height back to keep the email input
     comfortably clear of the fold on an iPhone 15. */
  margin: 0 0 var(--space-2);
}

/* ==========================================================================
   Phone mockup
   ========================================================================== */

.phone-mockup-media {
  /* Height capped, not width: the frame is tall and narrow (861x1722),
     so height is what threatens to push the signup form below the fold
     on short viewports like an iPhone 15. The image carries its own
     rounded corners and shadow, so it sits directly on the Stone
     background with no container, no radius, no shadow of our own.
     Margin trimmed from space-3 to space-2 for the same reason as the
     subtext above: the 20%-larger mockup needs the room given back. */
  display: block;
  height: 276px;
  width: auto;
  max-width: 100%;
  margin: 0 auto var(--space-2);
}

/* ==========================================================================
   Signup
   ========================================================================== */

.signup {
  width: 100%;
}

.signup-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}

.email-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-pine-faint);
  border-radius: 10px;
  background: var(--color-white);
  font-size: 1rem;
  color: var(--color-pine);
  transition: border-color var(--duration) var(--ease);
}

.email-input::placeholder {
  color: var(--color-pine-muted);
}

.email-input:focus {
  outline: none;
  border-color: var(--color-pine);
}

.email-input.has-error {
  border-color: #B3453E;
}

.submit-button {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: 10px;
  background: var(--color-pine);
  color: var(--color-stone);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--duration) var(--ease), opacity var(--duration) var(--ease);
}

.submit-button:hover:not(:disabled) {
  background: var(--color-pine-hover);
}

.submit-button:disabled {
  opacity: 0.6;
  cursor: default;
}

.submit-button.is-loading {
  position: relative;
  color: transparent;
}

.submit-button.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid var(--color-stone);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.form-error {
  margin: 0;
  font-size: 0.8125rem;
  color: #B3453E;
  text-align: left;
}

.fine-print {
  margin: var(--space-2) 0 0;
  font-size: 0.8125rem;
  color: var(--color-pine-muted);
}

.signup-success {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-pine);
  padding: var(--space-3) 0;
  margin: 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  padding: var(--space-4) var(--side-padding) var(--space-5);
  text-align: center;
}

.footer p {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-pine-muted);
}

.footer-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .submit-button,
  .email-input {
    transition: none;
  }
  .submit-button.is-loading::after {
    animation-duration: 1400ms;
  }
}

/* ==========================================================================
   Tablet and up
   ========================================================================== */

@media (min-width: 640px) {
  .page {
    padding-top: var(--space-6);
    padding-bottom: var(--space-5);
  }

  .phone-mockup-media {
    height: 360px;
  }
}