/* Tokens mirror the Figma variables in "00 · Brand & Foundations"; site colors
   match the "Semantic · Light" collection in the Twentyish iOS Figma file. */
:root {
  color-scheme: light dark;

  /* brand */
  --brand-ink: #15181a;
  --brand-charcoal: #1b1f1d;
  --brand-creme: #ede6d3;
  --brand-creme-muted: #beb39a;
  --brand-dragon-red: #9e1b1b;
  --brand-ember: #d9553f;

  /* site */
  --site-canvas: #faeeda;
  --site-surface: #fffaf3;
  --site-raised: #ffffff;
  --site-muted: #f1efe8;
  --site-text-primary: #412402;
  --site-text-secondary: #68503b;
  --site-text-muted: #755e48;
  --site-border-subtle: #d5c7b5;
  --site-border-control: #86715b;
  --site-primary: #a73230;
  --site-on-primary: #faeeda;
  --site-link: #93302d;
  --site-accent: #ef9f27;
  --site-on-accent: #412402;
  --site-accent-text: #89500d;
  --site-success: #276845;

  /* cards */
  --card-face: #fffdf8;
  --card-main: #2f7d4f;
  --card-plus: #2d5f9e;
  --card-minus: #b8312f;
  --card-special: #b07a1c;

  /* type: Nunito scale (size / line-height / tracking) */
  --font-sans: "Nunito", system-ui, sans-serif;
  --text-display: 700 64px/68px var(--font-sans);
  --text-h1: 700 52px/56px var(--font-sans);
  --text-h2: 700 36px/42px var(--font-sans);
  --text-h3: 700 24px/30px var(--font-sans);
  --text-lead: 400 20px/30px var(--font-sans);
  --text-body: 400 17px/26px var(--font-sans);
  --text-small: 400 14px/20px var(--font-sans);
  --text-caption: 400 12px/16px var(--font-sans);
  --text-eyebrow: 700 13px/16px var(--font-sans);
  --text-button: 600 17px/22px var(--font-sans);
  --text-nav: 600 15px/20px var(--font-sans);

  /* layout (1440 desktop frame: 80px gutters; 393 mobile frame: 20px) */
  --container-max: 1440px;
  --gutter: 80px;
  --section-pad: 96px;
}

/* Dark theme: values from the "Semantic · Dark" collection in the
   Twentyish iOS Figma file, so the site matches the app. */
@media (prefers-color-scheme: dark) {
  :root {
    --site-canvas: #1f1a17;
    --site-surface: #2a231f;
    --site-raised: #362c25;
    --site-muted: #40332b;
    --site-text-primary: #faeeda;
    --site-text-secondary: #d7c7b5;
    --site-text-muted: #bea990;
    --site-border-subtle: #57483e;
    --site-border-control: #a18b71;
    --site-primary: #e86660;
    --site-on-primary: #1f1a17;
    --site-link: #ff9790;
    --site-accent: #fac775;
    --site-on-accent: #1f1a17;
    --site-accent-text: #f2b550;
    --site-success: #a6dbaf;

    --card-face: #fff8ec;
    --card-main: #4fa86f;
    --card-plus: #5b90d6;
    --card-minus: #e8625f;
    --card-special: #ef9f27;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { background: var(--site-canvas); color: var(--site-text-primary); font: var(--text-body); -webkit-text-size-adjust: 100%; }
h1, h2, h3, h4, p { margin: 0; }

.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-pad); }
.section--surface { background: var(--site-surface); }

/* header (lockup at the Figma "Size=Small" scale) */
/* Sticky, so it needs its own ground. Anchor jumps stop at the header's height
   without the Download button (63px); with it (83px) the header just covers
   some of the section's top padding. */
html { scroll-padding-top: 63px; }
.site-header { position: sticky; top: 0; z-index: 10; background: var(--site-canvas); border-bottom: 1px solid var(--site-border-subtle); }
.site-header__inner { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:16px; }
.site-header__lockup { display:flex; text-decoration:none; }
.site-header__lockup .lockup { gap:6px; }
.site-header__lockup .lockup__mark img { width:30px; height:30px; }
.site-header__lockup .lockup__name { font-size:24px; letter-spacing:-0.48px; }
.site-header__nav { display:flex; align-items:center; gap:28px; }
.site-header__link { font: var(--text-nav); color: var(--site-text-secondary); text-decoration:none; }
.site-header__link:hover { color: var(--site-text-primary); }
.site-header__button { padding: 14px 24px; border-radius: 14px; background: var(--site-primary); color: var(--site-on-primary); font: var(--text-button); text-decoration:none; white-space:nowrap; }

/* lockup */
.lockup { display:inline-flex; align-items:center; gap:10px; }
.lockup__mark { flex-shrink:0; display:flex; }
.lockup__name { font-weight:900; font-size:36px; letter-spacing:-0.72px; color:var(--site-text-primary); }

/* intro (placeholder until the hero is built) */
.intro__inner { display:flex; flex-direction:column; align-items:center; gap:1.5rem; text-align:center; max-width:48rem; }
.intro h1 { font: var(--text-display); letter-spacing: -1px; }
.lead { font: var(--text-lead); color: var(--site-text-secondary); }

/* four beats (how a game goes) */
.beats { display:flex; flex-direction:column; gap:48px; }
.beats__heading { display:flex; flex-direction:column; gap:8px; }
.beats__eyebrow { font: var(--text-eyebrow); letter-spacing: 1.5px; text-transform: uppercase; color: var(--site-accent-text); }
.beats__title { font: var(--text-h1); letter-spacing: -0.5px; }
.beats__list { display:flex; gap:32px; margin:0; padding:0; list-style:none; }
.beats__item { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:12px; }
.beats__num { flex-shrink:0; display:flex; align-items:center; justify-content:center; width:44px; height:44px; border:2px solid var(--site-text-primary); border-radius:50%; background: var(--site-accent); color: var(--site-on-accent); font: var(--text-h3); }
.beats__text { display:flex; flex-direction:column; gap:6px; }
.beats__name { font: var(--text-h3); }
.beats__body { font: var(--text-small); color: var(--site-text-secondary); }

/* game card art (matches the hand in the Figma phone mock) */
.game-card { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; width:60px; height:84px; border-radius:10px; color: var(--card-face); white-space:nowrap; }
.game-card--plus { background: var(--card-plus); }
.game-card--minus { background: var(--card-minus); }
.game-card--special { background: var(--card-special); }
.game-card__value { font: var(--text-h3); }

/* side deck (canvas ground so sections keep alternating after the reorder) */
.side-deck { background: var(--site-canvas); }
.side-deck__inner { display:flex; flex-direction:column; gap:48px; }
.side-deck__heading { display:flex; flex-direction:column; gap:8px; }
.side-deck__eyebrow { font: var(--text-eyebrow); letter-spacing: 1.5px; text-transform: uppercase; color: var(--site-accent-text); }
.side-deck__title { font: var(--text-h1); letter-spacing: -0.5px; }
.side-deck__lead { margin-top:8px; font: var(--text-lead); color: var(--site-text-secondary); }
.side-deck__list { display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; margin:0; padding:0; list-style:none; }
.side-deck__item { min-width:0; display:flex; flex-direction:column; gap:12px; padding:24px; background: var(--site-raised); border: 1px solid var(--site-border-subtle); border-radius: 20px; }
.side-deck__cards { display:flex; gap:10px; margin-bottom:4px; }
.side-deck__name { font: var(--text-h3); }
.side-deck__body { color: var(--site-text-secondary); }

/* FAQ */
.faq { display:flex; flex-direction:column; gap: 28px; }
.faq__title { font: var(--text-h1); letter-spacing: -0.5px; }
.faq__group { display:flex; flex-direction:column; gap:16px; }
.faq__group-title { font: var(--text-eyebrow); letter-spacing: 1.5px; text-transform: uppercase; color: var(--site-accent-text); }
.faq__list { background: var(--site-raised); border: 1px solid var(--site-border-subtle); border-radius: 20px; overflow: hidden; }
.faq__item { display:flex; flex-direction:column; gap:8px; padding: 20px 24px; }
.faq__item + .faq__item { border-top: 1px solid var(--site-border-subtle); }
.faq__question { font: var(--text-h3); }
.faq__answer { color: var(--site-text-secondary); }

/* closing CTA (same ground as the intro) */
.cta { background: var(--site-canvas); }
.cta__inner { display:flex; flex-direction:column; align-items:center; gap:24px; text-align:center; }
.cta__title { font: var(--text-h1); letter-spacing: -0.5px; }
.cta__badges { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
/* Apple requires clear space of 1/4 badge height; 50px badges get 12.5px+. */
.cta__badge { display:block; line-height:0; }
.cta__badge img { display:block; height:50px; width:auto; }

/* Rattledrake lockup (Rattledrake Brand: Logo / Lockup, Horizontal, Dark).
   Mark height = 1.6x wordmark height; gap = 0.3x mark height. Min 160px wide. */
.rd-lockup { --mark-h: 59px; display:inline-flex; align-items:center; gap: calc(var(--mark-h) * 0.3); color: var(--brand-creme); text-decoration:none; }
.rd-lockup__mark { position:relative; flex-shrink:0; height: var(--mark-h); width: calc(var(--mark-h) * 91.5 / 96); }
.rd-lockup__mark img { position:absolute; display:block; }
.rd-lockup__serpent { left:1.32%; top:1.2%; width:95.62%; height:97.48%; }
.rd-lockup__star { left:38.01%; top:40.82%; width:29.06%; height:25.65%; }
.rd-lockup__wordmark { display:flex; flex-direction:column; align-items:center; gap:0.15em; font-family:"Cinzel", Georgia, serif; font-size: calc(var(--mark-h) * 40 / 96); line-height:1; text-transform:uppercase; white-space:nowrap; }
.rd-lockup__name { font-weight:700; letter-spacing:0.1em; margin-right:-0.1em; }
.rd-lockup__sub { font-weight:400; font-size:0.35em; letter-spacing:1.3368em; margin-right:-1.3368em; }

/* footer (brand charcoal in both themes) */
.site-footer { background: var(--brand-charcoal); color: var(--brand-creme-muted); padding-block: 40px 32px; }
.site-footer__inner { display:flex; flex-direction:column; gap:12px; }
/* Brand clear space around the lockup = star height (~1/4 mark height). */
.site-footer__brand { display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.site-footer__credit { font: var(--text-small); }
.site-footer__rule { margin:0; border:0; height:1px; background: var(--brand-dragon-red); }
.site-footer__legal { font: var(--text-caption); }
/* Figma: brand left, links right, centered on the brand block. */
.site-footer__top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; }
.site-footer__nav { display:flex; flex-wrap:wrap; gap:8px 24px; }
.site-footer__link { font: var(--text-nav); color: var(--brand-creme); text-decoration:none; }
.site-footer__link:hover { text-decoration:underline; }

/* legal pages (Terms, Privacy): heading matches the section headings */
.legal__inner { display:flex; flex-direction:column; gap:48px; }
.legal__inner > * { max-width: 48rem; }
.legal__heading { display:flex; flex-direction:column; gap:8px; }
.legal__eyebrow { font: var(--text-eyebrow); letter-spacing: 1.5px; text-transform: uppercase; color: var(--site-accent-text); }
.legal__title { font: var(--text-h1); letter-spacing: -0.5px; }
.legal__updated { font: var(--text-small); color: var(--site-text-muted); }
.legal__body { display:flex; flex-direction:column; gap:16px; color: var(--site-text-secondary); }
.legal__body h2 { margin-top:24px; font: var(--text-h3); color: var(--site-text-primary); }
.legal__body ul { margin:0; padding-left:1.25em; display:flex; flex-direction:column; gap:6px; }
.legal__body a { color: var(--site-link); }


/* tablet */
@media (max-width: 1024px) {
  :root { --gutter: 40px; --section-pad: 72px; }
  .side-deck__list { grid-template-columns: repeat(2, 1fr); }
}

/* phone (393 mobile frame) */
@media (max-width: 640px) {
  :root { --gutter: 20px; --section-pad: 56px; }
  .site-header__link--wide { display:none; }
  .intro h1 { font: var(--text-h1); letter-spacing: -0.5px; }
  .beats { gap: 28px; }
  .beats__title { font: var(--text-h2); letter-spacing: 0; }
  .beats__list { flex-direction:column; gap:20px; }
  .beats__item { flex-direction:row; gap:16px; }
  .beats__text { flex:1 1 0; min-width:0; }
  .side-deck__inner { gap: 28px; }
  .side-deck__title { font: var(--text-h2); letter-spacing: 0; }
  .side-deck__list { grid-template-columns: 1fr; gap:16px; }
  .faq { gap: 28px; }
  .faq__title { font: var(--text-h2); }
  .cta__title { font: var(--text-h2); letter-spacing: 0; }
  .legal__inner { gap: 28px; }
  .legal__title { font: var(--text-h2); letter-spacing: 0; }
}