/* =========================================================
   Design tokens — the palette of the artwork itself.
   Tuned against the hero illustration: cream paper, deep
   navy ink, muted garden greens, low afternoon sun.
   ========================================================= */

:root {
  /* Paper & light */
  --paper:        #f6efe1;
  --paper-warm:   #f1e3c9;
  --paper-deep:   #e8d9bd;

  /* Ink */
  --ink:          #1c2b3a;
  --ink-soft:     #3a4c60;
  --ink-faint:    rgba(28, 43, 58, 0.68);

  /* Garden */
  --green:        #6e8b63;
  --green-deep:   #4c6349;

  /* Sun */
  --sun:          #e2a45c;
  --sun-deep:     #c97f3e;

  /* Page furniture (about page and beyond) */
  --spark:        #7aa84f;   /* the little green marks beside headings */
  --panel:        #fdfaf2;   /* cards, a shade lighter than the paper */
  --panel-note:   #f6ecce;   /* sticky notes */
  --panel-green:  #e4ecd9;   /* the closing band */
  --line:         rgba(28, 43, 58, 0.13);

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-hand:    "Caveat", "Bradley Hand", "Segoe Print", "Marker Felt", cursive;
  --font-body:    "Karla", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Motion — one place to slow the whole page down */
  --ease-soft:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  /* The crossfade between the resting and waving scenes. Slow on the
     way in so he seems to notice you, a little quicker on the way out. */
  --fade-in:      1150ms;
  --fade-out:     850ms;
  --fade-ui:      320ms;

  /* Composition — safe to retune per artwork -------------- */
  /* A gentle push-in on the whole scene. It leaves a margin the
     parallax can move within, so an edge is never revealed. */
  /* No scale on the scene. Any push > 1 shaves the edges off the
     artwork — at 1.03 that was ~29px a side on a wide screen, enough
     to cut the first letter off the book spines. The parallax that
     needed the margin is off for the same reason. */
  --hero-push: 1;

  --gutter: clamp(1.25rem, 4vw, 3.25rem);
  /* Widest the page content ever gets — header, footer and sections
     all share it, so they stay aligned with one another. */
  --measure: 84rem;
  /* Every capsule sits on this one line, left and right */
  --capsule-baseline: clamp(1.1rem, 2.8vh, 2rem);
}