:root {
  color-scheme: light dark;
  --accent: #d6541b;      /* paprika / saffron-orange */
  --accent-2: #1b7d6b;    /* parsley */
  --ink: #2b2118;
}
* { box-sizing: border-box; }
body {
  font: 16px/1.6 system-ui, sans-serif;
  margin: 0 auto;
  max-width: 46rem;
  padding: 0 1rem;
  color: var(--ink);
}
@media (prefers-color-scheme: dark) { body { color: #ece3d8; } }
code { background: rgba(127,127,127,.18); padding: .1em .3em; border-radius: 3px; }
h1 { line-height: 1.15; }

/* --- Landing hero ------------------------------------------------------- */
.hero {
  min-height: 88vh;                 /* push the party CTA below the fold */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 2rem 0;
}
.kicker {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  font-size: .85rem;
  color: var(--accent);
  margin: 0 0 .5rem;
}
.hero h1 { font-size: clamp(2rem, 6vw, 3.2rem); margin: 0 0 .5rem; }
.lede { font-size: 1.2rem; opacity: .85; margin: 0 0 2rem; }
.hint { font-size: .95rem; opacity: .7; margin: .75rem 0 0; }
.scroll-cue {
  margin-top: auto;
  align-self: center;
  opacity: .55;
  letter-spacing: .3em;
  animation: bob 1.6s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-block;
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  padding: .8rem 1.6rem;
  border-radius: 999px;
  transition: transform .08s ease, filter .15s ease;
}
.btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-secondary { background: var(--accent-2); color: #fff; }

/* --- Party CTA (below the fold) ----------------------------------------- */
.party-cta {
  border-top: 2px dashed rgba(127,127,127,.3);
  padding: 3rem 0 4rem;
  text-align: center;
}
.party-cta h2 { font-size: 1.8rem; margin: 0 0 .5rem; }
.party-cta p { opacity: .8; margin: 0 0 1.5rem; }

/* --- Chat pages --------------------------------------------------------- */
.chat-back { margin: 1.5rem 0 .5rem; }
.chat-window {
  height: 70vh;
  min-height: 24rem;
  border: 1px solid rgba(127,127,127,.35);
  border-radius: 8px;
  overflow: hidden;
}
.error-msg { color: var(--accent); font-weight: 600; padding: 1rem; }