/* =========================================================================
   THE PICKLEBALL CIRCLE — Resort Microsite
   -------------------------------------------------------------------------
   Aesthetic direction: editorial hospitality. A magazine spread, not a
   startup landing page. Cormorant Garamond (display) + DM Sans (body).

   Layout architecture:
   - Hero is a SPLIT PANEL. Left side is the court photograph, right side
     is an ivory text panel. On mobile the panels stack (image on top,
     then text). Text is never placed over the image — this is a deliberate
     accessibility + readability choice, not an aesthetic one.
   - No background-attachment: fixed anywhere (iOS Safari breaks it).
   - No body-wide noise overlay (iOS Safari flashed the last one through
     the hero image).
   - Everything below the hero lives on a warm paper background with
     plenty of negative space.

   All color + spacing tokens live in :root for easy rebranding.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* Palette — warm paper + deep ink + terracotta + natural sage */
  --paper:         #F5EFE4;   /* primary background — letterpress cream */
  --paper-soft:    #FAF6EE;   /* raised cards, forms */
  --paper-deep:    #EAE1CE;   /* accents, dividers between sections */
  --ivory:         #FBF8F1;   /* purest cream — hero text panel */
  --ink:           #1E1B16;   /* body text, buttons */
  --ink-soft:      #3A342A;
  --stone:         #8A7F6A;   /* muted secondary text */
  --stone-dark:    #5F5643;   /* secondary text on light bg — AA pass */
  --clay:          #A7482D;   /* terracotta accent */
  --clay-deep:     #8A3A23;   /* darker clay — AA pass for small text */
  --sage:          #6B7A5D;   /* natural green accent */

  /* Semantic */
  --color-bg:         var(--paper);
  --color-surface:    var(--paper-soft);
  --color-text:       var(--ink);
  --color-text-muted: var(--stone-dark);
  --color-accent:     var(--clay);
  --color-line:       rgba(30, 27, 22, 0.14);
  --color-line-soft:  rgba(30, 27, 22, 0.06);

  /* Typography */
  --font-display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-body:    "DM Sans", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", sans-serif;

  /* Fluid type scale */
  --fs-overline: 0.75rem;
  --fs-sm:       0.875rem;
  --fs-body:     1rem;
  --fs-lead:     clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --fs-h3:       clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-h2:       clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem);
  --fs-display:  clamp(2.5rem, 1.6rem + 4.2vw, 4.75rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 5.5rem;
  --space-10: 7rem;

  /* Layout */
  --content-max:   72rem;
  --content-text:  38rem;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 10px;

  /* Motion */
  --ease:     cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 180ms;
  --dur-2: 320ms;
  --dur-3: 600ms;
}


/* -------------------------------------------------------------------------
   2. RESET & GLOBAL
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 72px; /* keeps anchored sections off the header */
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, picture { display: block; max-width: 100%; height: auto; }

::selection { background: var(--ink); color: var(--ivory); }


/* -------------------------------------------------------------------------
   3. TYPOGRAPHY
   ------------------------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.1;
  margin: 0;
  color: inherit;
}

h1 {
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

h2 { font-size: var(--fs-h2); line-height: 1.08; }
h3 { font-size: var(--fs-h3); line-height: 1.2;  }

/* Italic accent — Cormorant's italic is exceptional */
.display-italic {
  font-style: italic;
  color: var(--clay);
  font-weight: 400;
}

p { margin: 0 0 1em; max-width: 62ch; }

.overline {
  font-family: var(--font-body);
  font-size: var(--fs-overline);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--stone-dark);
  margin: 0 0 var(--space-4);
}

/* Decorative em-dash flanked overline — luxury editorial marker */
.mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-overline);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--stone-dark);
  margin: 0 0 var(--space-5);
}
.mark::before, .mark::after {
  content: "";
  display: inline-block;
  width: 1.75rem;
  height: 1px;
  background: var(--color-line);
}
.mark--left::after  { display: none; }
.mark--right::before { display: none; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--dur-1) var(--ease);
}
a:hover { text-decoration-color: currentColor; }


/* -------------------------------------------------------------------------
   4. ACCESSIBILITY UTILITIES
   ------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — first focusable element, visible when focused (a11y) */
.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  background: var(--ink);
  color: var(--ivory);
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  z-index: 100;
  transition: transform var(--dur-1) var(--ease);
}
.skip-link:focus {
  transform: translate(-50%, 0);
  outline: none;
}

/* Global visible focus ring on all interactive elements (a11y) */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}


/* -------------------------------------------------------------------------
   5. LAYOUT
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}


/* -------------------------------------------------------------------------
   6. HEADER
   -------------------------------------------------------------------------
   Always sits on the paper background (no transparent-over-image). Logo
   on the left, a single "Join the list" link on the right.
   ------------------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 10;
  padding-block: var(--space-5);
  background: var(--color-bg);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.site-header__logo {
  display: inline-block;
  max-width: 130px;
  text-decoration: none;
}
@media (min-width: 720px) { .site-header__logo { max-width: 160px; } }
.site-header__logo img { width: 100%; height: auto; }

.site-header__nav {
  font-family: var(--font-body);
  font-size: var(--fs-overline);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-line);
  transition: border-color var(--dur-1) var(--ease);
}
.site-header__nav:hover { border-bottom-color: var(--ink); }


/* -------------------------------------------------------------------------
   7. HERO — SPLIT PANEL
   -------------------------------------------------------------------------
   Mobile-first: image on top (fixed aspect), then the ivory text panel.
   Desktop (900px+): two columns side-by-side, each filling the viewport.
   The text panel uses --ivory so copy is always on a calm, light surface.
   ------------------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  background: var(--ivory);
}

.hero__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  background: var(--paper-deep); /* fallback while image loads */
}
@media (min-width: 720px) and (max-width: 899px) {
  .hero__image { aspect-ratio: 16 / 9; }
}
.hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

.hero__panel {
  padding: var(--space-8) clamp(1.5rem, 6vw, 3rem) var(--space-9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--ivory);
}

.hero__overline {
  margin-bottom: var(--space-4);
  animation: rise var(--dur-3) var(--ease-out) 0.1s both;
}
.hero__title {
  max-width: 14ch;
  margin: 0 0 var(--space-5);
  animation: rise var(--dur-3) var(--ease-out) 0.2s both;
}
.hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 34ch;
  margin: 0 0 var(--space-6);
  animation: rise var(--dur-3) var(--ease-out) 0.3s both;
}
.hero__cta {
  align-self: flex-start;
  animation: rise var(--dur-3) var(--ease-out) 0.4s both;
}

.hero__micro {
  font-size: var(--fs-sm);
  color: var(--stone-dark);
  margin: var(--space-5) 0 0;
  animation: rise var(--dur-3) var(--ease-out) 0.5s both;
  max-width: 34ch;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__overline, .hero__title, .hero__lead, .hero__cta, .hero__micro {
    animation: none;
  }
}

/* Desktop split */
@media (min-width: 900px) {
  .hero {
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: auto;
    min-height: 620px;
    min-height: min(88svh, 780px);
  }
  .hero__image {
    aspect-ratio: auto;
    height: 100%;
  }
  .hero__panel {
    padding-inline: clamp(3rem, 5vw, 5rem);
    padding-block: var(--space-9);
  }
}


/* -------------------------------------------------------------------------
   8. BUTTONS
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 1.85rem;
  min-height: 48px; /* a11y — touch target ≥ 44px */
  border: 1px solid currentColor;
  background: transparent;
  color: var(--ink);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease);
}

.btn--dark {
  color: var(--ivory);
  background: var(--ink);
  border-color: var(--ink);
}
.btn--dark:hover {
  background: transparent;
  color: var(--ink);
}

.btn--ghost {
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover {
  background: var(--ink);
  color: var(--ivory);
}

.btn[disabled],
.btn[aria-busy="true"] {
  cursor: not-allowed;
  opacity: 0.65;
  pointer-events: none;
}

.btn__arrow {
  transition: transform var(--dur-2) var(--ease);
  flex-shrink: 0;
}
.btn:hover .btn__arrow { transform: translateX(3px); }


/* -------------------------------------------------------------------------
   9. VALUE PROPOSITION — "The List in Brief"
   ------------------------------------------------------------------------- */
.value {
  padding-block: var(--space-9);
  background: var(--color-bg);
}
.value__header {
  text-align: center;
  margin-bottom: var(--space-8);
}

/* A refined 2-col → 4-col grid of what the list contains */
.value__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-5);
}
@media (min-width: 720px) {
  .value__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-7) var(--space-6); }
}
.value__item {
  position: relative;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
}
.value__marker {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--clay);
  display: block;
  margin-bottom: var(--space-3);
  letter-spacing: 0.02em;
}
.value__item h3 {
  margin-bottom: var(--space-3);
  font-size: var(--fs-h3);
}
.value__item p {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin: 0;
}


/* -------------------------------------------------------------------------
   10. SIGNUP SECTION
   ------------------------------------------------------------------------- */
.signup {
  padding-block: var(--space-9);
  background: var(--paper-deep);
  position: relative;
}
/* Soft top edge, so the transition from value section feels intentional */
.signup::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 4rem;
  height: 1px;
  background: var(--color-line);
}

.signup__header {
  text-align: center;
  margin-bottom: var(--space-7);
}

.signup__card {
  max-width: 32rem;
  margin: 0 auto;
  background: var(--paper-soft);
  border: 1px solid var(--color-line);
  padding: clamp(1.75rem, 5vw, 2.75rem);
  border-radius: var(--radius-lg);
  /* Subtle warm shadow, barely there */
  box-shadow:
    0 1px 0 rgba(30, 27, 22, 0.03),
    0 18px 40px -24px rgba(30, 27, 22, 0.15);
}


/* -------------------------------------------------------------------------
   11. FORM
   ------------------------------------------------------------------------- */
.form-field { margin-bottom: var(--space-4); }

.form-field__label {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-overline);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--space-2);
}
.form-field__label .optional {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--stone);
  font-weight: 400;
  text-transform: lowercase;
}

.form-field__input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem; /* 16px — prevents iOS zoom on focus */
  color: var(--ink);
  background: var(--paper-soft);
  border: 1px solid var(--color-line);
  padding: 0.875rem 1rem;
  min-height: 48px;
  border-radius: var(--radius-sm);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--dur-1) var(--ease),
              box-shadow var(--dur-1) var(--ease),
              background-color var(--dur-1) var(--ease);
}
.form-field__input::placeholder { color: var(--stone); opacity: 1; }
.form-field__input:hover { border-color: var(--stone); }
.form-field__input:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(30, 27, 22, 0.10);
  background: var(--ivory);
}
.form-field__input[aria-invalid="true"] {
  border-color: var(--clay-deep);
  box-shadow: 0 0 0 3px rgba(167, 72, 45, 0.12);
}

.form-field__error {
  display: block;
  font-size: var(--fs-sm);
  color: var(--clay-deep);
  margin-top: var(--space-2);
  min-height: 1.25em; /* reserved — prevents layout shift */
}

/* Honeypot — off-screen, not focusable */
.form-field--honeypot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.signup-form__submit {
  width: 100%;
  margin-top: var(--space-3);
}

.form-disclosure {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: var(--space-5) 0 0;
}

.form-status {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.form-status[data-state="idle"]    { display: none; }
.form-status[data-state="error"] {
  background: rgba(167, 72, 45, 0.08);
  color: var(--clay-deep);
  border: 1px solid rgba(167, 72, 45, 0.22);
}
.form-status[data-state="success"] {
  background: rgba(107, 122, 93, 0.1);
  color: var(--sage);
  border: 1px solid rgba(107, 122, 93, 0.28);
}

/* Button spinner */
.btn__spinner {
  display: none;
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.btn[aria-busy="true"] .btn__spinner { display: inline-block; }
.btn[aria-busy="true"] .btn__label   { opacity: 0.75; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn__spinner { animation: none; border-right-color: currentColor; opacity: 0.5; }
}


/* -------------------------------------------------------------------------
   12. PRIVACY REASSURANCE — brief, single line
   ------------------------------------------------------------------------- */
.trust {
  padding-block: var(--space-8);
  background: var(--color-bg);
  text-align: center;
}
.trust__line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.35rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 40ch;
  margin: 0 auto var(--space-3);
}
.trust__sub {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin: 0;
  letter-spacing: 0.04em;
}


/* -------------------------------------------------------------------------
   13. FOOTER
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--ivory);
  padding-block: var(--space-7) var(--space-5);
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
}
@media (min-width: 720px) {
  .site-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}
.site-footer__logo {
  display: block;
  max-width: 120px;
  text-decoration: none;
}
.site-footer__logo img { width: 100%; height: auto; }

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
}
.site-footer__links a {
  color: var(--paper);
  text-decoration: none;
  opacity: 0.82;
  transition: opacity var(--dur-1) var(--ease);
}
.site-footer__links a:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
.site-footer__links a:focus-visible { outline-color: var(--ivory); }

.site-footer__copy {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: rgba(245, 239, 228, 0.55);
  margin: 0;
}


/* -------------------------------------------------------------------------
   14. SUCCESS PAGE
   -------------------------------------------------------------------------
   Previous bug: logo anchor was display:inline → margin auto did nothing.
   Fix here: flex parent + block child + max-width on the image.
   ------------------------------------------------------------------------- */
.success {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ivory);
  padding: var(--space-7) var(--space-5);
}
.success__inner {
  max-width: 34rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.success__logo {
  display: block;
  margin-bottom: var(--space-6);
  text-decoration: none;
  line-height: 0; /* kills inline whitespace below image */
}
.success__logo img {
  width: auto;
  max-width: 140px;
  height: auto;
  display: block;
}
.success__mark {
  font-family: var(--font-body);
  font-size: var(--fs-overline);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--clay);
  margin: 0 0 var(--space-4);
}
.success h1 {
  font-size: clamp(2rem, 1.4rem + 2.5vw, 3rem);
  margin-bottom: var(--space-5);
}
.success__body {
  color: var(--color-text-muted);
  font-size: var(--fs-lead);
  line-height: 1.55;
  margin: 0 auto var(--space-7);
  max-width: 34ch;
}
.success__divider {
  width: 2.5rem;
  height: 1px;
  background: var(--color-line);
  border: 0;
  margin: 0 auto var(--space-6);
}


/* -------------------------------------------------------------------------
   15. PRINT
   ------------------------------------------------------------------------- */
@media print {
  .hero__image, .site-footer, .site-header { display: none; }
  .signup__card { border: 1px solid #000; box-shadow: none; }
  body { background: white; color: black; }
}