/* poddly.com — waitlist page. Rebuilt from Katelyn's design export as plain CSS.
   No inline styles anywhere: the site CSP is `style-src 'self'`. */

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/hanken-grotesk-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

:root {
  --beige: #e0d7c9;
  --ink: #111;
  --ink-soft: #444;
  --ring: #201f1d;
  --green: #86a01f;
  --footer: #424242;
  --error: #9b2c17;
  --sans: "Hanken Grotesk", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  color-scheme: light;
}

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

html, body { margin: 0; background: var(--beige); }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--sans);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--green); }

button:focus-visible, a:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}

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

[hidden] { display: none !important; }

/* ── Main (beige) ─────────────────────────────────────────────── */

.main {
  flex: 1 0 auto; /* short pages grow the beige, not a gap above the footer */
  background: var(--beige);
  padding: clamp(36px, 6vw, 64px) clamp(20px, 6vw, 48px) clamp(48px, 9vw, 128px);
}

/* One centred column: the logo sits on its centre line, and the title, copy and
   form all share its left and right edges (text stays left-aligned). */
.wrap {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.logo {
  display: block;
  align-self: center;
  width: clamp(130px, 17vw, 180px);
  height: auto;
  margin-bottom: clamp(36px, 6vw, 72px);
}

.title {
  margin: 0 0 clamp(14px, 2vw, 22px);
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.lede {
  margin: 0 0 clamp(28px, 4vw, 48px);
  font-weight: 500;
  font-size: clamp(19px, 2.4vw, 27px);
  line-height: 1.55;
  text-wrap: pretty;
}

.invite {
  margin: 0 0 clamp(32px, 5vw, 64px);
  font-weight: 400;
  font-size: clamp(19px, 2.4vw, 27px);
  line-height: 1.55;
  text-wrap: pretty;
}

/* ── Form: hand-drawn field + button art ─────────────────────── */

.form {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.6vw, 32px);
  font-family: var(--mono);
}

.field {
  display: flex;
  height: clamp(58px, 6.4vw, 76px);
  background: center / 100% 100% no-repeat;
  border-radius: 12px;
}
.field--name { flex: 30 1 0; min-width: 0; background-image: url("img/field-name.webp"); }
.field--email { flex: 50 1 0; min-width: 0; background-image: url("img/field-email.webp"); }

.field:focus-within {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}

.field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: clamp(20px, 2.2vw, 26px);
  color: var(--ink);
  padding: 0 1.4em;
}
.field input::placeholder { color: #555; opacity: 1; }
.field input:focus { outline: none; }

.submit {
  flex: 0 0 auto;
  height: clamp(50px, 5.4vw, 62px);
  padding: 0 0.75em;
  border: 0;
  cursor: pointer;
  background: url("img/field-button.webp") center / 100% 100% no-repeat;
  color: #fff;
  font: inherit;
  font-size: clamp(20px, 2.2vw, 26px);
  transition: transform 120ms ease, filter 120ms ease;
}
.submit:hover { transform: rotate(-1.5deg) scale(1.03); filter: brightness(1.06); }
.submit:active { transform: scale(0.97); filter: brightness(0.92); }
.submit:disabled { cursor: progress; transform: none; filter: saturate(0.6) brightness(0.95); }

/* Honeypot: off-screen, never seen or focused by people. */
.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-error {
  margin: clamp(14px, 2vw, 20px) 0 0;
  font-family: var(--mono);
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.45;
  color: var(--error);
}

/* Phones: stack the fields full width with even gaps; the button keeps the
   hand-drawn art at its natural proportions and closes the form on the right,
   the same edge it ends on in the one-row desktop layout. */
@media (max-width: 639px) {
  .form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .submit {
    justify-self: end;
    height: 56px;
    padding: 0 0.8em;
    font-size: 22px;
  }
}

/* ── Thank-you state ──────────────────────────────────────────── */

@keyframes poddly-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.thanks { animation: poddly-rise 420ms ease-out both; }
.thanks:focus { outline: none; }

.thanks h2 {
  margin: 0 0 10px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.2;
}

.thanks p {
  margin: 0;
  font-size: clamp(19px, 2.4vw, 27px);
  line-height: 1.55;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

.thanks .back {
  margin-top: clamp(20px, 3vw, 32px);
  font-family: var(--mono);
  font-size: clamp(16px, 1.8vw, 20px);
}

/* ── Illustration band (white) ────────────────────────────────── */

.band {
  background: #fff;
  padding: clamp(24px, 5vw, 60px) clamp(12px, 6vw, 48px) clamp(28px, 7vw, 100px);
  overflow: hidden;
}

.band svg {
  display: block;
  width: 100%;
  max-width: 1640px;
  height: auto;
  margin: 0 auto;
  font-family: var(--mono);
}

/* Narrow screens: the band gives the art nearly the full width, and the SVG
   text is sized up via CSS (font-size beats the presentation attributes).
   The arc text would hit the travel arrows at that size, so both arcs are
   scaled about the frame's centre (1032,315) to hug it at the same radius
   (~250 user units); the text stays on its own textPath. Effective glyph
   size ~54 (top) and ~50 (bottom) units for the arcs and 78 for the "From" labels (was 38 / 60). */
@media (max-width: 639px) {
  .band { padding-left: 8px; padding-right: 8px; }
  .band .arc-text { font-weight: 500; letter-spacing: 1px; transform-origin: 1032px 315px; }
  .band .arc-text--top { font-size: 57px; transform: scale(0.943); }
  .band .arc-text--bottom { font-size: 58px; letter-spacing: 0.5px; transform: scale(0.862); }
  .band .from-text { font-size: 78px; letter-spacing: 1px; }
}

/* ── Footer ───────────────────────────────────────────────────── */

.footer {
  margin-top: auto;
  background: var(--footer);
  color: #fff;
  padding: 30px 20px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6em;
  font-family: var(--mono);
  font-size: clamp(16px, 1.8vw, 20px);
}
.footer a { color: #fff; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer a:focus-visible { outline-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .thanks { animation: none; }
  .submit { transition: none; }
  .submit:hover, .submit:active { transform: none; }
}

/* ── Secondary pages (joined/, 404) ───────────────────────────── */

.logo-link { align-self: center; border-radius: 8px; }
.logo-link .logo { align-self: auto; }
.back {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(16px, 1.8vw, 20px);
}