/* Shared ground for every page on molier.net. */

:root {
  --ground:    #13100E;
  --glow:      #241D17;
  --panel:     #1B1713;
  --line:      #2E2720;
  --ink:       #EDE6DB;
  --ink-muted: #C2B7A7;
  --ink-faint: #8C8171;   /* 4.96:1 on ground, 4.66:1 on panel */
  --rule:      #C8A24A;
  --accent:    #C8102E;
}

@media (prefers-color-scheme: light) {
  :root {
    --ground:    #F6F2EA;
    --glow:      #FFFDF8;
    --panel:     #FFFFFF;
    --line:      #E2DACB;
    --ink:       #211C16;
    --ink-muted: #4E463B;
    --ink-faint: #746C60; /* 4.64:1 on ground, 5.18:1 on panel */
    --rule:      #A9822E;
    --accent:    #A8122B;
  }
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--ground);
  color: var(--ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
               "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

/* Small caps-ish label used for eyebrows and meta lines. */
.eyebrow {
  font-size: .72rem;
  letter-spacing: .28em;
  text-indent: .28em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

:where(a, button, input, summary):focus-visible {
  outline: 2px solid var(--rule);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Visually hidden, still read aloud. */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}