/* ==========================================================================
   Story Hour — main.css
   2026 | 11ty + Web Awesome Pro (shoelace / natural)
   Fonts via WA kit: Figtree · Fraunces · Chivo Mono
   ========================================================================== */

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

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--wa-color-neutral-0);
  color: var(--wa-color-neutral-900);
  font-family: var(--wa-font-family-body);
  font-size: var(--wa-font-size-m);
  line-height: var(--wa-line-height-normal);
}

/* --------------------------------------------------------------------------
   Page wrapper
   -------------------------------------------------------------------------- */

.site-wrap {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.site-main { flex: 1; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  padding: var(--wa-space-l) var(--wa-space-xl);
}

.site-header__inner {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wa-space-m);
}

.wordmark {
  font-family: var(--wa-font-family-longform);
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  color: var(--wa-color-neutral-900);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.wordmark:hover { color: var(--wa-color-brand-700); }

.site-header__location {
  font-size: var(--wa-font-size-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wa-color-neutral-400);
  margin: 0;
}

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

.hero {
  padding: clamp(var(--wa-space-3xl), 12vw, 140px) var(--wa-space-xl) var(--wa-space-3xl);
}

.hero__inner {
  max-width: 680px;
  margin: 0 auto;
}

.hero__headline {
  font-family: var(--wa-font-family-longform);
  font-size: clamp(2.75rem, 6vw + 1rem, 5.5rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--wa-color-neutral-950);
  margin: 0 0 var(--wa-space-xl);
}

.hero__body {
  font-family: var(--wa-font-family-longform);
  font-weight: var(--wa-font-weight-longform);
  font-size: clamp(1.05rem, 1.5vw + 0.75rem, 1.25rem);
  line-height: 1.75;
  color: var(--wa-color-neutral-700);
  margin: 0;
  max-width: 56ch;
}

/* --------------------------------------------------------------------------
   Signup
   -------------------------------------------------------------------------- */

.signup {
  padding: var(--wa-space-2xl) var(--wa-space-xl) clamp(var(--wa-space-3xl), 10vw, 120px);
}

.signup__inner {
  max-width: 680px;
  margin: 0 auto;
}

.signup__heading {
  font-family: var(--wa-font-family-body);
  font-weight: var(--wa-font-weight-heading);
  font-size: clamp(1.25rem, 2vw + 0.5rem, 1.75rem);
  color: var(--wa-color-neutral-900);
  margin: 0 0 var(--wa-space-l);
}

.signup__fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wa-space-s);
  align-items: flex-end;
}

.signup__fields wa-input { flex: 1 1 180px; }
.signup__fields wa-button { flex-shrink: 0; }

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

.site-footer {
  padding: var(--wa-space-l) var(--wa-space-xl);
  border-top: 1px solid var(--wa-color-neutral-100);
  margin-top: auto;
}

.site-footer__inner {
  max-width: 680px;
  margin: 0 auto;
}

.site-footer__tagline {
  font-family: var(--wa-font-family-longform);
  font-weight: var(--wa-font-weight-longform);
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-neutral-500);
  margin: 0 0 var(--wa-space-2xs);
  font-style: italic;
}

.site-footer__legal {
  font-size: var(--wa-font-size-xs);
  color: var(--wa-color-neutral-400);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 500px) {
  .signup__fields { flex-direction: column; }
  .signup__fields wa-input,
  .signup__fields wa-button { width: 100%; }
}

/* --------------------------------------------------------------------------
   Logo mark
   -------------------------------------------------------------------------- */

.wordmark {
  display: flex;
  align-items: center;
  gap: var(--wa-space-xs);
  text-decoration: none;
}

.wordmark__logo {
  width: 32px;
  height: 32px;
  border-radius: var(--wa-border-radius-s);
  display: block;
  flex-shrink: 0;
}

.wordmark__text {
  font-family: var(--wa-font-family-longform);
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  color: var(--wa-color-neutral-900);
  letter-spacing: -0.01em;
  transition: color var(--wa-transition-fast);
}

.wordmark:hover .wordmark__text { color: var(--wa-color-brand-700); }