/* Archie's Adventures: shared brand styles for the marketing page and the online coloring pages.
   Layout concept: the site is a clean coloring sheet. Ink and white paper everywhere, and color shows up
   only where Archie's world (or the reader) puts it: the red of his collar, Rocky Mountain sky, aspen gold. */
:root {
  --paper: #fcfcfa;        /* page ground: clean paper, a hair warm */
  --surface: #f3f2ee;      /* bands and panels */
  --sheet: #ffffff;        /* artwork always sits on white paper, in both themes */
  --ink: #1d1b1a;          /* Archie black */
  --muted: #65605a;
  --rule: #e2dfd8;
  --collar: #d23a2e;       /* Archie's red collar: the one brand accent */
  --collar-ink: #ffffff;
  --sky: #2d6aa8;          /* Rocky Mountain sky, for links */
  --aspen: #f1b52c;        /* aspen gold, for small highlights */
  --shadow: 0 1px 2px rgba(29, 27, 26, .08), 0 8px 28px rgba(29, 27, 26, .10);

  --display: "Young Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --hand: "Patrick Hand", "Comic Sans MS", "Marker Felt", cursive;

  --step--1: .875rem;
  --step-0: 1rem;
  --step-1: 1.1875rem;
  --step-2: 1.5rem;
  --step-3: 2rem;
  --step-4: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);
  --radius: 14px;
  --wrap: 1120px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #141312; --surface: #1c1b19; --sheet: #ffffff; --ink: #f2f0eb; --muted: #a59f97;
    --rule: #2e2c29; --collar: #ec5a4b; --collar-ink: #1a0f0d; --sky: #7db3ea; --aspen: #f4c556;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #141312; --surface: #1c1b19; --sheet: #ffffff; --ink: #f2f0eb; --muted: #a59f97;
  --rule: #2e2c29; --collar: #ec5a4b; --collar-ink: #1a0f0d; --sky: #7db3ea; --aspen: #f4c556;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--step-0)/1.6 var(--body);
}
img { max-width: 100%; display: block; }
a { color: var(--sky); text-underline-offset: .18em; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.12; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--aspen); outline-offset: 3px; border-radius: 4px; }

.wrap {
  max-width: var(--wrap); margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* brand: a single-stroke Rocky Mountain ridge whose line ends in a red dot (Archie's collar tag) */
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; }
.brand svg { width: 42px; height: 26px; flex: none; }
.brand .ridge { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.brand .tag { fill: var(--collar); }
.brand b { font: 400 1.25rem/1 var(--display); letter-spacing: -.01em; }
.brand small { display: block; font: 600 .6875rem/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: .2rem; }

.eyebrow { font: 700 .75rem/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--collar); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .65rem 1.15rem; border-radius: 999px;
  font: 600 var(--step-0)/1 var(--body); text-decoration: none; cursor: pointer; white-space: nowrap;
  border: 2px solid var(--ink); background: transparent; color: var(--ink);
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn.primary { background: var(--collar); border-color: var(--collar); color: var(--collar-ink); }
.btn.ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn.soon { background: transparent; border-color: var(--rule); color: var(--muted); cursor: default; }
.btn.soon:hover { transform: none; }
.btn svg { width: 18px; height: 18px; }

.sheet { background: var(--sheet); border-radius: 6px; box-shadow: var(--shadow); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}