/* Boiled Mashed n Stewed — site stylesheet */

@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/baloo2-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  --ink: #1a181c;
  --ink-2: #232025;
  --gold: #c8a44d;
  --gold-lit: #e0bc63;
  --cream: #eadfc4;
  --body: #b9b2a6;
  --parchment: #efe4cc;
  --parchment-lit: #f7f1e2;
  --parchment-ink: #2a241c;
  --parchment-muted: #8a7d67;
  --edge-dark: rgba(0, 0, 0, 0.5);
  --edge-gold: #8f7233;

  --font-display: 'Baloo 2', 'Segoe UI Rounded', 'Arial Rounded MT Bold', ui-rounded, system-ui,
    sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

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

html {
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.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;
}

a {
  color: var(--gold-lit);
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--gold-lit);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Layout */

.page {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 6vh 1.5rem;
}

/* Warm glow behind the cauldron */
.glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(900px, 130vw);
  height: min(900px, 130vw);
  transform: translate(-50%, -55%);
  background: radial-gradient(circle, rgba(200, 164, 77, 0.22) 0%, rgba(200, 164, 77, 0.08) 35%,
      rgba(26, 24, 28, 0) 70%);
  pointer-events: none;
  z-index: 0;
  animation: glow-pulse 6s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%,
  100% {
    opacity: 0.85;
    transform: translate(-50%, -55%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -55%) scale(1.05);
  }
}

/* Steam wisps */
.steam {
  position: absolute;
  z-index: 0;
  bottom: 52%;
  left: 50%;
  width: 10px;
  border-radius: 50%;
  background: rgba(234, 223, 196, 0.16);
  filter: blur(2px);
  pointer-events: none;
}

.steam-1 {
  height: 90px;
  margin-left: -70px;
  animation: rise 7s ease-in infinite;
}

.steam-2 {
  height: 70px;
  margin-left: -20px;
  animation: rise 8.5s ease-in infinite 1.5s;
}

.steam-3 {
  height: 60px;
  margin-left: 30px;
  animation: rise 6.5s ease-in infinite 3s;
}

@keyframes rise {
  0% {
    opacity: 0;
    transform: translateY(0) scaleX(1);
  }
  15% {
    opacity: 0.6;
  }
  80% {
    opacity: 0.15;
  }
  100% {
    opacity: 0;
    transform: translateY(-140px) scaleX(1.6);
  }
}

.hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 42rem;
}

/* Parchment plate the lockup sits on — the lockup was drawn for a light
   background, so it needs a warm light surface to stay legible on the
   dark page. */
.hero__plate {
  position: relative;
  display: inline-block;
  margin: 0 auto clamp(1.75rem, 4vw, 2.75rem);
  padding: clamp(1.1rem, 3.4vw, 2.1rem) clamp(1.4rem, 4.4vw, 2.75rem);
  max-width: min(88vw, 560px);
  background: linear-gradient(160deg, #f6efdf 0%, #efe4cc 55%, #ecdfc2 100%);
  border-radius: clamp(20px, 3.4vw, 32px);
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.5),
    0 2px 0 rgba(255, 255, 255, 0.35) inset,
    0 0 0 1px rgba(200, 164, 77, 0.55) inset;
}

.hero__logo {
  display: block;
  width: clamp(190px, 34vw, 420px);
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(26, 24, 28, 0.18));
}

.hero__tagline {
  font-family: var(--font-body);
  color: var(--body);
  font-size: clamp(1.05rem, 1.6vw + 0.7rem, 1.35rem);
  max-width: 36ch;
  margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
}

.hero__tagline strong {
  color: var(--cream);
  font-weight: 600;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 1vw + 0.9rem, 1.35rem);
  letter-spacing: 0.01em;
  color: var(--ink);
  background: var(--gold);
  padding: 0.95em 2.1em;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 6px 0 #8f7233, 0 14px 26px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn:hover {
  background: var(--gold-lit);
  transform: translateY(-3px);
  box-shadow: 0 9px 0 #8f7233, 0 20px 32px rgba(0, 0, 0, 0.5);
}

.btn:active {
  transform: translateY(1px);
  box-shadow: 0 3px 0 #8f7233, 0 8px 16px rgba(0, 0, 0, 0.4);
}

.hero__meta {
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  color: var(--body);
  opacity: 0.75;
}

.hero__cta-line {
  font-family: var(--font-body);
  color: var(--cream);
  font-weight: 600;
  font-size: clamp(1rem, 0.6vw + 0.85rem, 1.15rem);
  margin: 0 0 clamp(1.1rem, 2.6vw, 1.5rem);
}

/* Playtest signup form — email input + submit read as one unit */
.signup {
  display: flex;
  align-items: stretch;
  gap: 0.7rem;
  width: 100%;
  max-width: 32rem;
  margin: 0 auto;
}

/* The field is parchment, echoing the plate the logo sits on, and carries the
   same hard bottom edge as the button so the pair reads as one chunky unit
   rather than two unrelated pills in different visual languages. */
.signup__input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--parchment-ink);
  background: linear-gradient(170deg, var(--parchment-lit) 0%, var(--parchment) 100%);
  border: 0;
  border-radius: 999px;
  padding: 0.95em 1.5em;
  box-shadow:
    0 6px 0 var(--edge-dark),
    0 14px 26px rgba(0, 0, 0, 0.42),
    0 1px 0 rgba(255, 255, 255, 0.55) inset;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.signup__input::placeholder {
  color: var(--parchment-muted);
  opacity: 1;
}

.signup__input:hover {
  background: var(--parchment-lit);
}

.signup__input:focus {
  outline: none;
}

.signup__input:focus-visible {
  outline: 3px solid var(--gold-lit);
  outline-offset: 3px;
}

.signup .btn {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: clamp(1rem, 0.7vw + 0.8rem, 1.12rem);
  padding: 0.95em 1.8em;
}

/* Honeypot — present in the DOM to bait bots, invisible to sighted users,
   screen readers, and keyboard tab order. Not display:none/type=hidden so
   automated form-fillers still see and populate a normal-looking field. */
.signup__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 30rem) {
  .signup {
    flex-direction: column;
  }

  .signup__input {
    width: 100%;
    padding: 0.9em 1.4em;
  }

  .signup .btn {
    width: 100%;
  }
}

.site-footer {
  position: relative;
  z-index: 1;
  margin-top: clamp(2.5rem, 6vh, 4rem);
  text-align: center;
  font-size: 0.85rem;
  color: var(--body);
  opacity: 0.8;
}

.site-footer a {
  color: var(--body);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-footer a:hover {
  color: var(--gold-lit);
}

.site-footer p {
  margin: 0.25rem 0;
}

/* 404 page */
.error-code {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: clamp(3rem, 10vw, 5rem);
  margin: 0 0 0.25rem;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .glow,
  .steam-1,
  .steam-2,
  .steam-3 {
    animation: none !important;
  }

  .btn,
  .signup__input {
    transition: none;
  }
}