/* Shared design tokens — "Travel journal at golden hour".
   Palette sampled from the episode 1 cover: dusk sky, ember sun, meadow, denim, barn red. */

@font-face { font-family: "Caprasimo"; src: url("/fonts/caprasimo-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/fonts/atkinson-hyperlegible-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/fonts/atkinson-hyperlegible-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Kalam"; src: url("/fonts/kalam-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --dusk: #150e10;
  --dusk-2: #22161a;
  --dusk-3: #33212a;
  --ember: #ff7a3d;
  --ember-deep: #c4501c;
  --gold: #ffc35c;
  --cream: #fbf1de;
  --paper: #f3e4c6;
  --paper-deep: #e6cfa3;
  --ink: #2a1a12;
  --ink-soft: #6b5040;
  --meadow: #5d8a3a;
  --denim: #3d5f8f;
  --barn: #a8322a;

  --font-display: "Caprasimo", "Georgia", serif;
  --font-body: "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-hand: "Kalam", "Comic Sans MS", cursive;

  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --radius: 6px;
  /* Film grain, inline SVG noise (allowed by CSP img-src data:). */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 400 1.0625rem/1.6 var(--font-body); color: var(--ink); }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.hand { font-family: var(--font-hand); font-weight: 400; }

/* Buttons */
.btn {
  --btn-bg: var(--ember); --btn-fg: var(--ink); --btn-edge: var(--ink);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: .85em 1.5em;
  white-space: nowrap;
  font: 700 1.02rem/1 var(--font-body); letter-spacing: .01em; text-decoration: none;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 2.5px solid var(--btn-edge); border-radius: 999px;
  box-shadow: 0 4px 0 var(--btn-edge);
  cursor: pointer; transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out), background .15s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--btn-edge); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--btn-edge); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--cream); --btn-edge: var(--cream); box-shadow: none; }
.btn--ghost:hover { --btn-bg: #fbf1de14; box-shadow: none; }
.btn--ink { --btn-bg: var(--ink); --btn-fg: var(--cream); --btn-edge: var(--ink); }

kbd {
  display: inline-grid; place-items: center; min-width: 1.9em; height: 1.9em; padding: 0 .45em;
  font: 700 .8rem/1 var(--font-body); color: var(--ink);
  background: var(--cream); border: 1.5px solid var(--ink); border-bottom-width: 3px; border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}