/* playgigglewagon.com: Gigglewagon's marketing site (issue #463). Colours from
   the brand tokens (apps/admin/styles/tokens.css). No webfonts, trackers or
   third-party requests. */
:root {
  --felt: #0e3b3e;
  --felt-mid: #155a5c;
  --card: #fff7e8;
  --card-edge: #eadcc2;
  --ink: #1a1420;
  --ink-soft: #4e4252;
  --gold: #f6b82c;
  --tomato: #e4513a;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle at 50% 0%, var(--felt-mid), var(--felt) 70%);
  color: var(--card);
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.55;
}
main {
  flex: 1;
  width: min(44rem, 100% - 2rem);
  margin: 0 auto;
  padding: clamp(2.5rem, 8vw, 6rem) 0 3rem;
}
.hero { text-align: center; }
.logo {
  display: inline-block;
  margin: 0 0 1.25rem;
  padding: 0.35em 0.8em;
  border-radius: 0.6em;
  background: var(--tomato);
  color: var(--card);
  font-size: clamp(2.2rem, 9vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
  box-shadow: 0 0.35rem 0 var(--card-edge);
  overflow-wrap: anywhere;
}
.tagline {
  margin: 0 0 1rem;
  font-size: clamp(1.4rem, 5vw, 2rem);
  font-weight: 700;
  color: var(--gold);
}
.lead { margin: 0 auto 2rem; max-width: 34rem; font-size: clamp(1.05rem, 3.6vw, 1.2rem); }
.soon {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-weight: 700;
}
.card {
  background: var(--card);
  color: var(--ink);
  border-radius: 1rem;
  padding: clamp(1.25rem, 5vw, 2.5rem);
  box-shadow: 0 0.4rem 0 var(--card-edge);
  overflow-wrap: anywhere;
}
.card h1 { margin-top: 0; font-size: clamp(1.6rem, 6vw, 2.2rem); line-height: 1.2; }
.card p, .card li { color: var(--ink-soft); }
.card a { color: var(--felt-mid); }
footer {
  width: min(44rem, 100% - 2rem);
  margin: 0 auto;
  padding: 1.5rem 0 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: center;
  font-size: 0.95rem;
}
footer a { color: var(--card); }
a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }