/* ============================================================
   Wild Chorus — site styles
   ============================================================ */

/* ---- Fonts ----------------------------------------------- */
@font-face {
  font-family: "GT Maru";
  src: url("fonts/GT-Maru-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GT Maru";
  src: url("fonts/GT-Maru-Medium-Oblique.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* ---- Design tokens --------------------------------------- */
:root {
  /* Colors — placeholders. Swap these out when you've got
     a real brand palette nailed down. */
  --color-bg: #ffffff;
  --color-ink: #1a1a1a;
  --color-muted: #6b6b6b;

--font-body: "GT Maru", -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, sans-serif;
--font-display: "GT Maru", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;

  /* Layout */
  --content-max: 600px;
}

/* ---- Base ------------------------------------------------- */
body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background-color: var(--color-bg);
}

/* ---- Page layout ----------------------------------------- */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-md) var(--space-sm);
  gap: var(--space-lg);
}

/* ---- Logo ------------------------------------------------- */
.logo img {
  /* Adjust this to match your logo's natural size.
     Using max-width so it scales down on small screens. */
  width: auto;
  max-width: 460px;
  height: auto;
}

/* ---- Signup section -------------------------------------- */
.signup {
  width: 100%;
  max-width: var(--content-max);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.tagline {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

p.blurb {
  color: var(--color-muted);
  font-size: 1.125rem;
  margin-bottom: 0px;
  margin-top: var(--space-sm)
}

/* ---- Embed wrapper --------------------------------------- */
/* The Substack iframe is fixed-size (480x320). On narrow
   screens we let it shrink horizontally; the iframe's
   max-width:100% from the reset handles the actual scaling. */
.embed-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

.embed-wrap iframe {
  width: 100%;
  max-width: 600px;
}

/* ---- Footer ---------------------------------------------- */
.footer {
  color: var(--color-muted);
  font-size: 0.875rem;
  text-align: center;
}

.footer img{
  max-width: 80px;
  text-align: center;
  margin:0 auto 10px;
}

/* ---- Mobile adjustments ---------------------------------- */
@media (max-width: 600px) {
  .logo img {
    max-width: 300px;
  }

  .tagline {
    /* Allow it to scale down further on small screens */
    font-size: clamp(1.5rem, 7vw, 2rem);
  }

  .page {
    /* Tighten the vertical gaps a bit on mobile */
    gap: var(--space-md);
  }
}