/* Copyright (c) 2024-2026 Kilotronic LLC. All rights reserved. */

/* Spraoi — one-pager stylesheet
   Self-hosted fonts; all colors via /tokens.css design tokens.
   Hero: treatment C (full coral field, cream wordmark, spark confetti). */

/* ─── Fonts ──────────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* One variable face for every weight (see the matching note in
   ui/shared/shared.css — three single-weight declarations were three URLs for one
   byte-identical variable font). */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Real italic cut (see the matching note in ui/shared/shared.css). The demo
   frames inject the app's own play.css, whose placeholder rule is italic, so
   the marketing origin needs the face too or that text gets a synthesized
   oblique here as well. */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-italic-400.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ─── Reset & base ───────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-ink);
  background: var(--color-surface);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ─── Nav ────────────────────────────────────────────────────────────────── */
.nav {
  background: var(--color-accent);
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
}

.brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.025em;
  color: var(--color-on-accent);
}

/* Public-beta pill on the wordmark. The nav is a coral field with a white
   wordmark, so the pill inverts (white fill, coral text) to read cleanly
   against it. */
.brand .beta-badge {
  display: inline-block;
  margin-left: 0.4em;
  padding: 0.15em 0.5em;
  border-radius: 999px;
  background: var(--color-on-accent);
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  vertical-align: super;
}

/* ─── Hero (treatment C: full coral field) ───────────────────────────────── */
.hero {
  background: var(--color-accent);
  color: var(--color-on-accent);
  text-align: center;
  padding: 3.5rem 1.5rem 4.75rem;
  position: relative;
  overflow: hidden;
}

/* Marigold spark confetti — two 8-point star shapes via clip-path */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  background: var(--color-accent-2);
  clip-path: polygon(
    50% 0%,
    58% 37%,
    100% 50%,
    58% 63%,
    50% 100%,
    42% 63%,
    0% 50%,
    42% 37%
  );
}

.hero::before {
  width: 1.75rem;
  height: 1.75rem;
  top: 1.75rem;
  left: clamp(1rem, 14%, 6rem);
  opacity: 0.85;
}

.hero::after {
  width: 1.1rem;
  height: 1.1rem;
  top: 3.5rem;
  right: clamp(1rem, 18%, 7.5rem);
  opacity: 0.7;
}

.say {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-accent-2);
  display: block;
  margin-bottom: 0.875rem;
  letter-spacing: 0.04em;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.75rem, 9vw, 4.75rem);
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin-bottom: 1.125rem;
  color: var(--color-on-accent);
}

.lede {
  font-size: clamp(1rem, 2.8vw, 1.1rem);
  max-width: 30rem;
  margin: 0 auto 2.25rem;
  line-height: 1.6;
  opacity: 0.92;
}

.cta {
  display: inline-block;
  background: var(--color-ink);
  color: var(--color-surface);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.8rem 2rem;
  border-radius: 0.5rem;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: opacity 0.15s ease;
}

.cta:hover {
  opacity: 0.82;
}

/* Quiet reassurance under the CTA. "Beta" already rides the wordmark; this ties
   the perk to it without turning the hero into a pricing pitch. */
.free-note {
  margin: 0.85rem 0 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0.9;
}

.join-link {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-surface);
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.85;
}

.join-link:hover {
  opacity: 1;
}

/* ─── Content bands ──────────────────────────────────────────────────────── */
.band {
  padding: 3.5rem 1.5rem;
}

.band > * {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}

.band > * + * {
  margin-top: 1.25rem;
}

.band.alt {
  background: color-mix(in srgb, var(--color-ink) 5%, var(--color-surface));
}

/* ─── Typography ─────────────────────────────────────────────────────────── */
h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--color-ink);
}

.band p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-ink);
  opacity: 0.8;
}

/* ─── Steps list ─────────────────────────────────────────────────────────── */
.steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.25rem;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}

.steps li {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--color-ink);
  opacity: 0.8;
}

.steps li::before {
  content: "";
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--color-accent);
  border-radius: 50%;
  margin-top: 0.525rem;
}

.steps strong {
  font-weight: 600;
  opacity: 1;
  color: var(--color-ink);
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.foot {
  background: var(--color-ink);
  color: var(--color-surface);
  text-align: center;
  padding: 2.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.about {
  font-size: 0.95rem;
  opacity: 0.7;
  max-width: 28rem;
  line-height: 1.55;
}

.foot-links {
  display: flex;
  gap: 1.75rem;
  flex-wrap: wrap;
  justify-content: center;
}

.foot-links a {
  color: var(--color-surface);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0.75;
  transition: opacity 0.15s ease;
}

.foot-links a:hover {
  opacity: 1;
}

.copy {
  font-size: 0.78rem;
  opacity: 0.45;
}

.copy a {
  color: inherit;
  text-decoration: none;
}

.copy a:hover {
  text-decoration: underline;
}

/* ─── How-to-play pages (generated from core rules content) ──────────────── */
.howto {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

.howto h1 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 0.5rem;
}

.howto-objective {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 0.35rem;
}

.howto-aka {
  color: var(--color-ink);
  opacity: 0.65;
  font-size: 0.95rem;
  margin: 0 0 1rem;
}

/* Generated fact rows stay display-type but sit under the marketing h2 scale —
   they are the reference spine, not the reading surface. */
.howto-row h2,
.howto-ways h2,
.howto-deck h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 1.85rem 0 0.35rem;
}

/* Authored sections (quickstart / worked round / rulings) take the site's
   marketing h2 scale so the page can be skimmed; the size difference from the
   generated rows above is the authored-vs-generated tone cue. */
.howto-prose h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 2.25rem 0 0.55rem;
}

.howto-row p,
.howto-deck p {
  margin: 0;
  line-height: 1.65;
}

/* Long-form rules copy: paragraph rhythm, and Q&A subheads that read as
   questions rather than as another level of section. */
.howto-prose p {
  margin: 0 0 0.7rem;
  line-height: 1.65;
}

.howto-prose h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 1.25rem 0 0.35rem;
}

/* End-of-page way into the app — same CTA skin as the marketing hero, quiet
   beta note underneath so the page does not dead-end at Themes. */
.howto-cta {
  margin: 2.75rem 0 0;
  padding-top: 1.75rem;
  border-top: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent);
  text-align: center;
}

.howto-cta .cta {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.howto-cta-note {
  margin: 0.85rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0.75;
}

.howto-prose ol,
.howto-prose ul {
  margin: 0 0 0.7rem;
  padding-left: 1.35rem;
}

.howto-prose li {
  margin: 0.3rem 0;
  line-height: 1.6;
}

.howto-ways ul {
  margin: 0;
  padding-left: 1.15rem;
}

.howto-ways li {
  margin: 0.45rem 0;
  line-height: 1.6;
}

.howto-rec {
  display: inline-block;
  margin: 0 0.15em;
  padding: 0.1em 0.5em;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .hero {
    padding: 5rem 2rem 6rem;
  }

  .band {
    padding: 4.5rem 2rem;
  }
}