/* Story shelf typography: one title face per original story, matched to its art style.
   Built with tools/build_stories.py. The faces are SIL OFL 1.1, subset to each title's letters by
   research/original_stories/styles/typography/tools/make_fonts.py (licences in assets/fonts/OFL-*.txt).
   Display faces are for titles only. Story words always stay in Andika (stories.css .st-words).
   Browsers fetch a face only when a title uses it, so a reader page loads just its own story's face. */

@font-face { font-family: "OSW Story Riso"; src: url("../fonts/story-riso.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "OSW Story Midcentury"; src: url("../fonts/story-midcentury.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "OSW Story Collage"; src: url("../fonts/story-collage.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "OSW Story Watercolor"; src: url("../fonts/story-watercolor-ink.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "OSW Story Linocut"; src: url("../fonts/story-linocut.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "OSW Story Clay"; src: url("../fonts/story-clay.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "OSW Story Pencil"; src: url("../fonts/story-colored-pencil.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "OSW Story Crayon"; src: url("../fonts/story-crayon-resist.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "OSW Story Pastel"; src: url("../fonts/story-pastel.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* Each style sets: the title face and weight, title ink, an accent for the words band's edge, and a paper tint for the band.
   Every ink below is at least 4.5:1 on the site's paper (#fffdf8). */
.st-type-riso { --st-title-face: "OSW Story Riso", var(--font-title); --st-title-weight: 800; --st-title-ink: #24479a; --st-title-track: -.01em;
  --st-accent: #e8508f; --st-band: #fffaf6; }
.st-type-midcentury { --st-title-face: "OSW Story Midcentury", var(--font-title); --st-title-weight: 700; --st-title-ink: #1f3d4a; --st-title-track: .015em;
  --st-accent: #d9822b; --st-band: #fffbf1; }
.st-type-collage { --st-title-face: "OSW Story Collage", var(--font-title); --st-title-weight: 800; --st-title-ink: #7a2f4f; --st-title-track: 0;
  --st-accent: #e2b33c; --st-band: #fffcf2; }
.st-type-watercolor-ink { --st-title-face: "OSW Story Watercolor", var(--font-title); --st-title-weight: 700; --st-title-ink: #24476b; --st-title-track: .01em;
  --st-accent: #6fa5cf; --st-band: #fbfdff; }
.st-type-linocut { --st-title-face: "OSW Story Linocut", var(--font-title); --st-title-weight: 400; --st-title-ink: #1d2a31; --st-title-track: .005em;
  --st-accent: #c4472c; --st-band: #fffaf0; }
.st-type-clay { --st-title-face: "OSW Story Clay", var(--font-title); --st-title-weight: 600; --st-title-ink: #8c3a26; --st-title-track: .005em;
  --st-accent: #d98a5f; --st-band: #fff9f4; }
.st-type-colored-pencil { --st-title-face: "OSW Story Pencil", var(--font-title); --st-title-weight: 600; --st-title-ink: #4f3a86; --st-title-track: 0;
  --st-accent: #9a7fd0; --st-band: #fbf8f1; }
.st-type-crayon-resist { --st-title-face: "OSW Story Crayon", var(--font-title); --st-title-weight: 700; --st-title-ink: #1f5784; --st-title-track: .01em;
  --st-accent: #d8453c; --st-band: #fffcf5; }
.st-type-pastel { --st-title-face: "OSW Story Pastel", var(--font-title); --st-title-weight: 400; --st-title-ink: #43507a; --st-title-track: .01em;
  --st-accent: #c9a2c4; --st-band: #fcfaff; --st-card-size: 24px; --st-title-scale: 1.14; }
/* Handwritten faces run small for their size; give them a little more. */
.st-type-watercolor-ink, .st-type-colored-pencil, .st-type-crayon-resist { --st-card-size: 22px; }

/* Title-page treatments, one per art style (page 1 of the reader only, and the shelf card titles where noted). */
/* Riso: a pink second ink printed slightly out of register. */
.st-type-riso .st-title cite, .st-type-riso.st-book .st-book-t cite { text-shadow: .045em .04em 0 rgba(232, 80, 143, .55); }
/* Linocut: the title is cut out of an ink block. */
.st-type-linocut.is-opening .st-title cite { display: inline; padding: .04em .34em .1em; line-height: 1.32; background: #1d2a31; color: #fff8ec;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; border-radius: 3px 5px 2px 4px; }
/* Collage: the title sits on a torn, tilted tissue-paper strip. */
.st-type-collage.is-opening .st-title cite { display: inline; padding: .02em .3em .08em; line-height: 1.38; background: #f6dc8f;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; border-radius: 2px 6px 3px 5px; }
.st-type-collage.is-opening .st-head { transform: rotate(-1.2deg); }
/* Watercolor: a soft wash pooled behind the title. */
.st-type-watercolor-ink.is-opening .st-title { margin-inline: -.4em; padding: .1em .4em; background: radial-gradient(60% 70% at 45% 55%, rgba(122, 176, 214, .28), rgba(122, 176, 214, 0) 72%); }
/* Mid-century: a short mustard bar above the title, like a printed book's rule. */
.st-type-midcentury.is-opening .st-eyebrow::after { content: ""; display: block; width: 44px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: #d9822b; }
/* Clay: a pressed, slightly raised title. */
.st-type-clay .st-title cite, .st-type-clay.st-book .st-book-t cite { text-shadow: 0 .05em 0 rgba(140, 58, 38, .18); }
/* Colored pencil: a hatched pencil stroke under the title. */
.st-type-colored-pencil.is-opening .st-title cite { background: repeating-linear-gradient(-58deg, rgba(154, 127, 208, .5) 0 2px, transparent 2px 6px) 0 92% / 100% .32em no-repeat; padding-bottom: .08em; }
/* Crayon resist: a waxy crayon underline. */
.st-type-crayon-resist.is-opening .st-title cite { background: linear-gradient(transparent 80%, rgba(216, 69, 60, .3) 80%, rgba(216, 69, 60, .3) 94%, transparent 94%); }
/* Pastel: a chalky haze of two soft colors behind the title. */
.st-type-pastel.is-opening .st-title { margin-inline: -.4em; padding: .08em .4em; background: radial-gradient(50% 80% at 30% 50%, rgba(201, 162, 196, .26), transparent 70%),
  radial-gradient(50% 80% at 72% 50%, rgba(150, 178, 214, .26), transparent 70%); }

/* Openly licensed books share one treatment: see .st-lic in stories.css. */