/* Layout: a night-cinema hero band holding the game's own timeline of cards,
   then quiet paper sections, closing on a marigold sign-up band. */
:root {
  --paper: #FFF8EC;
  --surface: #FFFFFF;
  --ink: #2A1420;
  --muted: #6E5560;
  --line: #E9DAC6;
  --accent: #C8402A;      /* vermilion */
  --marigold: #E9A21A;
  --night: #2B1233;       /* jamun, deepened */
  --night-ink: #FFF3DA;
  --night-muted: #D9C3B8;
  --ok: #2F6B2A;
  --err: #B3261E;
  --display: "Yatra One", "Rozha One", Georgia, serif;
  --body: "Hind", "Segoe UI", system-ui, -apple-system, sans-serif;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1C1016; --surface: #26161E; --ink: #F6E9D8; --muted: #BFA9AE;
    --line: #3D2A33; --accent: #F0714F; --night: #12070F; --ok: #8CC97F; --err: #FF8A80;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #1C1016; --surface: #26161E; --ink: #F6E9D8; --muted: #BFA9AE;
  --line: #3D2A33; --accent: #F0714F; --night: #12070F; --ok: #8CC97F; --err: #FF8A80;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--marigold); outline-offset: 3px; }
h1, h2 { font-family: var(--display); font-weight: 400; line-height: 1.1; text-wrap: balance; margin: 0; }
h2 { font-size: clamp(1.75rem, 4vw, 2.4rem); }
.wrap { max-width: 68rem; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(3rem, 8vw, 5.5rem); display: grid; gap: 1.5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Hero */
.hero {
  background:
    radial-gradient(120% 80% at 80% 0%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 60%),
    var(--night);
  color: var(--night-ink);
  padding-top: env(safe-area-inset-top, 0px);
  overflow: hidden;
}
.bar { display: flex; justify-content: space-between; align-items: center; padding-block: 1.1rem; }
.wordmark { font-family: var(--display); font-size: 1.6rem; color: var(--marigold); letter-spacing: .02em; }
.bar-link { font-weight: 600; font-size: .95rem; color: var(--night-ink); }
.hero-copy { padding-block: clamp(1.5rem, 6vw, 4rem) 2rem; display: grid; gap: 1.25rem; max-width: 68rem; }
.eyebrow { margin: 0; text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; font-weight: 600; color: var(--night-muted); }
.hero h1 { font-size: clamp(2.6rem, 9vw, 5.5rem); max-width: 14ch; }
.hero h1 span { color: var(--marigold); display: block; }
.lede { margin: 0; max-width: 36rem; font-size: 1.15rem; color: var(--night-muted); }

/* Waitlist form */
.waitlist { display: grid; gap: .6rem; max-width: 34rem; }
.field { display: flex; flex-wrap: wrap; gap: .5rem; }
.field input {
  flex: 1 1 14rem; min-width: 0;
  font: inherit; padding: .8rem 1rem; border-radius: 10px;
  border: 2px solid var(--line); background: var(--surface); color: var(--ink);
}
.hero .field input { border-color: transparent; background: #FFF8EC; color: #2A1420; }
.field button {
  flex: 0 0 auto; font: 600 1rem var(--body); padding: .8rem 1.3rem; border: 0; border-radius: 10px;
  background: var(--marigold); color: #241400; cursor: pointer;
}
.field button:hover { filter: brightness(1.06); }
.field button[disabled] { opacity: .6; cursor: progress; }
.status { margin: 0; min-height: 1.4em; font-weight: 600; }
.status.ok { color: var(--ok); }
.status.err { color: var(--err); }
.hero .status.ok { color: #B9E3A8; }
.hero .status.err { color: #FFB4A8; }
.consent { margin: 0; font-size: .85rem; color: var(--muted); }
.hero .consent { color: var(--night-muted); }

/* Timeline of cards: the game's own mechanic as the hero image */
.timeline-wrap { margin: 0; padding-block: 2rem 2.25rem; }
.timeline {
  --card: clamp(108px, 15vw, 168px);
  display: flex; align-items: flex-end; gap: clamp(.6rem, 1.6vw, 1.1rem);
  padding: calc(var(--card) * .85) var(--gutter) 1.25rem;
  width: max-content; margin-inline: auto; position: relative;
}
.timeline::after {
  content: ""; position: absolute; left: var(--gutter); right: var(--gutter); bottom: .5rem;
  height: 2px; background: color-mix(in srgb, var(--night-ink) 30%, transparent);
}
.timeline-wrap { overflow-x: auto; scrollbar-width: none; }
.timeline > img, .slot { width: var(--card); flex: 0 0 auto; }
.timeline > img { border-radius: 8px; box-shadow: 0 10px 24px rgb(0 0 0 / .35); }
.slot {
  aspect-ratio: 1; position: relative; border-radius: 8px;
  border: 2px dashed color-mix(in srgb, var(--marigold) 75%, transparent);
}
.slot-mark {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 400 calc(var(--card) * .5) var(--display); color: color-mix(in srgb, var(--marigold) 60%, transparent);
}
.mystery {
  position: absolute; left: 0; top: calc(var(--card) * -.62); width: 100%; z-index: 1;
  border-radius: 8px; box-shadow: 0 18px 30px rgb(0 0 0 / .45);
  transform: rotate(-6deg); animation: hover 3.2s ease-in-out infinite;
}
@keyframes hover { 50% { transform: rotate(-4deg) translateY(-6px); } }
.timeline-wrap figcaption { font: 400 clamp(1.3rem, 3.6vw, 1.9rem)/1.2 var(--display); color: var(--night-ink); text-align: center; text-wrap: balance; }

/* How a turn works: a real sequence, so the numbers stay */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.steps li { counter-increment: step; display: grid; gap: .35rem; padding-top: .9rem; border-top: 2px solid var(--line); min-width: 0; }
.steps li::before { content: counter(step); font: 400 2rem/1 var(--display); color: var(--accent); }
.steps strong { font-weight: 600; font-size: 1.1rem; }
.note { margin: 0; max-width: 40rem; color: var(--muted); }

/* At a glance */
.facts { border-block: 1px solid var(--line); }
.facts dl { margin-block: 0; padding-block: 1.75rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.facts div { display: grid; gap: .1rem; min-width: 0; }
.facts dt { text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; font-weight: 600; color: var(--muted); }
.facts dd { margin: 0; font: 400 clamp(1.4rem, 3.4vw, 2rem)/1.15 var(--display); font-variant-numeric: tabular-nums; }
@media (max-width: 40rem) { .facts dl { grid-template-columns: repeat(2, 1fr); } }

/* Who it's for, with a fan of cards */
.split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 2.5rem; }
.who { margin: 1.25rem 0 0; padding: 0; list-style: none; display: grid; gap: 1rem; max-width: 34rem; }
.who li { padding-left: 1.25rem; position: relative; }
.who li::before { content: ""; position: absolute; left: 0; top: .7em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--marigold); }
.fan { position: relative; height: clamp(220px, 30vw, 300px); }
.fan img { position: absolute; width: clamp(140px, 19vw, 190px); border-radius: 10px; box-shadow: 0 12px 26px rgb(0 0 0 / .22); left: 50%; top: 50%; }
.fan img:nth-child(1) { transform: translate(-95%, -50%) rotate(-12deg); }
.fan img:nth-child(2) { transform: translate(-50%, -58%) rotate(-1deg); z-index: 1; }
.fan img:nth-child(3) { transform: translate(-5%, -48%) rotate(11deg); }
@media (max-width: 46rem) { .split { grid-template-columns: 1fr; } }

/* FAQ */
.faq { display: grid; max-width: 44rem; border-bottom: 1px solid var(--line); }
.faq details { border-top: 1px solid var(--line); padding-block: .9rem; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 1.1rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 1.4rem/1 var(--display); color: var(--accent); }
.faq details[open] summary::after { content: "\2212"; }
.faq p { margin: .5rem 0 0; color: var(--muted); max-width: 38rem; }

/* Closing sign-up band */
.join { background: var(--marigold); color: #241400; padding-block: clamp(3rem, 8vw, 5rem); }
.join .wrap { display: grid; gap: 1rem; }
.join p { margin: 0; }
.join .field input { border-color: transparent; background: #FFF8EC; color: #2A1420; }
.join .field button { background: #2B1233; color: #FFF3DA; }
.join .consent { color: #4A3410; }
.join .status.ok { color: #1F4A1B; }
.join .status.err { color: #7A1A12; }

.foot { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; padding-block: 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); font-size: .9rem; color: var(--muted); }

/* Privacy page */
.doc { max-width: 42rem; padding-block: 2rem 4rem; }
.doc h1 { font-size: clamp(2rem, 6vw, 3rem); margin-block: 1rem; }
.doc h2 { font-size: 1.4rem; margin-top: 2rem; }
.doc-bar { background: var(--night); }
.doc-bar a { text-decoration: none; }

@media (prefers-reduced-motion: reduce) { .mystery { animation: none; } }