/* Palette sampled from the opening film. */
:root {
  --ink: #400300;          /* the hand-drawn outline */
  --vermilion: #e54235;    /* the border bands */
  --pink: #f44292;
  --crimson: #ec2e41;
  --gold: #f2c14e;         /* the coins and the sticker outline */
  --paper: #f8efe4;
  --paper-deep: #f1e1cf;

  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body[data-phase='intro'],
body[data-phase='transition'] {
  overflow: hidden;
}

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Background pictures load only once their section is near the screen (scripts/lib/lazyBackgrounds.js). */
.jack.is-near { --painting: url('../assets/jack/kathakali.webp'); }
.rug.is-near { --rug: url('../assets/tools/rug.webp'); }
.flock__sky.is-near { --clouds: url('../assets/birds/clouds-blue.webp'); }