/* The album's look, shared by every place's page and the landing (docs/art/style.md, "What every place shares").
   Firelight and ochre (ADR-0054): a dark ground, chalk type, ochre for what is lit or chosen. Text is never pixels: it is
   set in the page's type over the pictures. Each place brings its own palette for its pictures, never its own type. */
:root {
  /* colour: the ground, the type on it, and the one warm accent */
  --ground: #0b0a09;    /* behind every picture: the dark a place's light comes out of */
  --ink: #17110e;       /* panels and the stroke round type set over pictures */
  --chalk: #f3ead6;     /* type */
  --bone: #d3c39d;      /* type of second rank */
  --muted: #c9bfab;     /* small type, captions */
  --ochre: #d1a23f;     /* what is lit, chosen or going on */
  --ochre-dim: #9c6e22;
  --rule: #f3ead62e;    /* hairlines */
  --panel: #120d0bb8;   /* an inset over a picture */
  /* type: a book face for names and what is said, a plain face for everything else */
  --display: "Alegreya", Georgia, "Times New Roman", serif;
  --body: "Alegreya Sans", "Gill Sans", "Trebuchet MS", sans-serif;
  --step--1: 0.78rem; --step-0: 1rem; --step-1: 1.25rem; --step-2: 1.6rem; --step-3: clamp(2rem, 5vw, 3.4rem);
  color-scheme: dark;
}
html { background: var(--ground); }
body { margin: 0; background: var(--ground); color: var(--chalk); font-family: var(--body); font-size: var(--step-0); line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; }

/* a picture in a place's own pixels: scaled only by whole pixels, never smoothed (ADR-0054) */
.pixels { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }

/* small capitals for what a thing is (an era, a place's kind, its tempo) */
.eyebrow { font-family: var(--body); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
/* a name, as a place, a moon or a rite is named */
.name { font-family: var(--display); font-style: italic; font-weight: 500; color: var(--chalk); text-wrap: balance; }
/* a caption across a picture, as the film says a rite's or a moon's name */
.caption { text-align: center; text-shadow: 0 2px 18px #000c; }
/* an inset over a picture: the film's calendar, a place's keys */
.inset { background: var(--panel); border: 1px solid var(--rule); border-radius: 3px; backdrop-filter: blur(2px); }
/* what is said, over who says it: the words in their own tongue, the gloss beneath (the film's `.say`) */
.say { font-family: var(--display); font-style: italic; color: var(--chalk); background: #120d0bcc; border-radius: 3px; padding: 2px 8px 3px; white-space: nowrap; }
.say .gl { display: block; font-family: var(--body); font-style: normal; font-size: 0.72em; color: var(--muted); }

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