/* Tokens, reset and element defaults. Components are named with BEM in the other stylesheets.

   One light falls on everything, from the upper left and fairly high (azimuth 225° in the SVG
   textures): highlights sit on top and left edges, and shadows fall down and a little to the
   right. The paper, linen, card, photo, slits and mandarins all follow it; so should new art. */
@font-face {
  font-family: 'Bodoni Moda';
  src: url('/fonts/bodoni-moda.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 900;
  /* Preloaded, so waiting briefly for it beats flashing a fallback face on every refresh. */
  font-display: block;
}
/* The names' ampersand is Bodoni's italic. */
@font-face {
  font-family: 'Bodoni Moda';
  src: url('/fonts/bodoni-moda-italic.woff2') format('woff2');
  font-style: italic;
  font-weight: 400 900;
  font-display: block;
}
/* The text face: Gelasio, drawn to Georgia's measurements, so every device sets the same type
   (Android has no Georgia) and the print art matches the screen. Georgia stands in while it
   loads, at the same size, so swapping causes no shift. Accented letters load only if used. */
@font-face {
  font-family: 'Gelasio';
  src: url('/fonts/gelasio-latin-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Gelasio';
  src: url('/fonts/gelasio-latin-ext-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Gelasio';
  src: url('/fonts/gelasio-latin-italic.woff2') format('woff2');
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Gelasio';
  src: url('/fonts/gelasio-latin-ext-italic.woff2') format('woff2');
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
:root {
  --paper: #ebe0f3;
  --ink: #390d2b;
  --red: #f98832;
  --line: #cfbcd6;
  --surface: #f6eff8;
  --serif: 'Bodoni Moda', 'Times New Roman', serif;
  --text: 'Gelasio', Georgia, 'Times New Roman', serif;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--text);
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
}
a {
  color: inherit;
  text-underline-offset: 5px;
}
button,
input,
textarea,
select {
  font: inherit;
}
button,
a,
input,
textarea,
select {
  touch-action: manipulation;
}
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 5px;
}

/* Forms */
form label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin: 18px 0 8px;
}
input,
textarea,
select {
  display: block;
  width: 100%;
  padding: 12px;
  background: #fdf9fd;
  color: var(--ink);
  border: 1px solid #a88ca7;
  border-radius: 4px;
  margin: 8px 0 18px;
  font-size: 16px;
}
textarea {
  resize: vertical;
}
form input:disabled,
form select:disabled,
form textarea:disabled {
  color: #594854;
  background: #eee4f1;
}
button {
  cursor: pointer;
  background: var(--ink);
  color: #fcf6ff;
  border: 1px solid var(--ink);
  padding: 13px 20px;
  border-radius: 5px;
  text-decoration: none;
  display: inline-block;
}
button:disabled {
  opacity: 0.6;
}
fieldset {
  margin: 25px 0;
  min-width: 0;
}
legend {
  font: 25px var(--serif);
  padding: 0 10px;
}

/* Data */
table {
  border-collapse: collapse;
  width: 100%;
  text-align: left;
}
td,
th {
  border-bottom: 1px solid var(--line);
  padding: 15px 12px;
  vertical-align: top;
  font-size: 14px;
  overflow-wrap: anywhere;
}
th {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #eee4f1;
  padding: 16px;
  font-size: 12px;
}
summary {
  cursor: pointer;
  min-height: 30px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
}