/* V10 typography: formal titles, handwritten thoughts, lyrical Latin display. */
@font-face {
  font-family: "Mage Manuscript";
  src: url("assets/fonts/v10/mage-manuscript-sc.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Mage Display";
  src: url("assets/fonts/v10/mage-display-roman.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Mage Display";
  src: url("assets/fonts/v10/mage-display-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 500;
  font-display: swap;
}
:root {
  --hand: "Mage Manuscript", "Kaiti SC", "KaiTi", var(--serif);
  --display: "Mage Display", "Baskerville", "Times New Roman", serif;
  --editorial-label: "Arial", "Helvetica Neue", var(--sans);
}

/* The work title, section titles, navigation and body retain their existing faces. */
.pv-poetry h2,
.hero-prelude,
.hero-poetry,
.chapter-calligraphy,
.wish-lettering h2,
.character-info blockquote,
.notes-heading > p > em,
.folio-copy h3,
.memory-strip > p,
.footer-quote {
  font-family: var(--hand);
  font-weight: 400;
  font-style: normal;
  font-synthesis: none;
  font-kerning: normal;
}
.pv-poetry h2 {
  font-size: clamp(20px, 2.1vw, 31px);
  line-height: 1.65;
  letter-spacing: .085em;
}
.pv-poetry h2 > em { letter-spacing: .12em; }
.hero-prelude { font-size: 17px; line-height: 1.85; letter-spacing: .09em; }
.hero-poetry { letter-spacing: .14em; }
.chapter-calligraphy { letter-spacing: .02em; }
.wish-lettering h2 { letter-spacing: .055em; line-height: 1.72; }
.wish-lettering h2 > em { letter-spacing: .105em; }
.character-info blockquote {
  font-size: clamp(23px, 2.2vw, 33px);
  line-height: 1.83;
  letter-spacing: .025em;
  text-wrap: pretty;
}
.character-info blockquote::before {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
}
.folio-copy h3 { letter-spacing: .055em; }
.footer-quote { letter-spacing: .08em; line-height: 1.65; }

/* Real italic drawings replace browser-slanted Georgia on the large art words. */
.title-english > span,
.title-english > strong,
.prologue-stills > span,
.prologue-stills > span > em,
.chapter-english,
.stage-word,
.wish-outline,
.character-latin,
.character-word,
.character-memory-label,
.character-memory-label > em,
.film-label > .film-english,
.folio-watermark,
.gallery-display {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-synthesis: none;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures discretionary-ligatures;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
.title-english > span { letter-spacing: .025em; line-height: 1.07; }
.title-english > strong { letter-spacing: -.04em; line-height: 1; }
.prologue-stills > span { letter-spacing: .015em; line-height: .97; }
.prologue-stills > span > em { letter-spacing: -.025em; }
.chapter-english { letter-spacing: -.025em; line-height: .91; }
.stage-word { letter-spacing: -.035em; line-height: .98; }
.wish-outline { letter-spacing: -.035em; }
.character-latin { font-size: 25px; letter-spacing: .085em; line-height: 1.2; }
.character-memory-label { letter-spacing: -.025em; line-height: .96; }
.film-label > .film-english { letter-spacing: -.025em; line-height: .95; }
.folio-watermark { letter-spacing: -.04em; }
.gallery-display { letter-spacing: -.035em; }

/* Upright display numerals read as printed chapter folios. */
.chapter-number,
.character-number,
.folio-number {
  font-family: var(--display);
  font-style: normal;
  font-weight: 500;
  font-synthesis: none;
  font-variant-numeric: lining-nums proportional-nums;
}

/* Small captions form a quiet, consistent counterpoint to expressive titles. */
.eyebrow,
.hero-tag,
.title-note,
.brand small,
.desktop-nav small,
.hero-orbit > span,
.hero-poetry > i,
.hero-vignettes figure > span,
.hero-coordinate > span:first-child,
.pv-kicker > span,
.pv-page-number,
.pv-marginalia,
.pv-poetry > span,
.pv-continue small,
.world-eyebrow,
.world-topline,
.stage-footnote,
.stage-arch .layer-reveal > span,
.spell-foreground > b,
.scene-main figcaption,
.wish-lettering > .eyebrow,
.wish-side,
.character-info > .eyebrow,
.character-art-caption,
.film-play > span,
.film-caption > span,
.film-still > span,
.film-scroll-note > span,
.film-bottom,
.folio-spine,
.folio-main figcaption > span,
.folio-category,
.memory-strip small,
.gallery-item > span > small,
.footer-bottom {
  font-family: var(--editorial-label);
  font-style: normal;
  font-weight: 400;
  font-kerning: normal;
  letter-spacing: .16em;
}
.brand small { font-size: 7px; letter-spacing: .18em; }
.desktop-nav small { font-size: 8px; letter-spacing: .1em; }
.hero-poetry > i { letter-spacing: .2em; }
.pv-page-number { font-variant-numeric: tabular-nums; }
.pv-poetry > span { font-size: 8px; line-height: 1.8; letter-spacing: .17em; }
.stage-footnote, .scene-main figcaption { font-size: 8px; }
.character-art-caption { letter-spacing: .15em; }
.footer-bottom { letter-spacing: .08em; }

@media (max-width: 1100px) and (min-width: 761px) {
  .character-info blockquote { font-size: 23px; line-height: 1.8; letter-spacing: .005em; }
  .hero-prelude { font-size: 15px; }
}
@media (max-width: 760px) {
  .pv-poetry h2 { font-size: clamp(18px, 5vw, 24px); line-height: 1.65; letter-spacing: .065em; }
  .pv-poetry > span { font-size: 7px; letter-spacing: .12em; }
  .pv-marginalia { letter-spacing: .11em; }
  .hero-prelude { font-size: 14px; line-height: 1.85; letter-spacing: .075em; }
  .hero-poetry { letter-spacing: .11em; }
  .title-english > span { letter-spacing: .015em; }
  .wish-lettering h2 { letter-spacing: .035em; }
  .wish-lettering h2 > em { letter-spacing: .065em; }
  .character-info blockquote { font-size: clamp(21px, 5.7vw, 25px); line-height: 1.88; letter-spacing: .01em; }
  .character-latin { font-size: 23px; letter-spacing: .055em; }
  .folio-copy h3 { letter-spacing: .03em; }
  .footer-quote { font-size: clamp(28px, 8.3vw, 35px); letter-spacing: .055em; }
  .footer-bottom { letter-spacing: .045em; }
  .brand small { font-size: 6px; letter-spacing: .14em; }
  .stage-footnote { font-size: 6px; letter-spacing: .1em; }
}
@media (max-height: 580px) and (min-width: 620px) {
  .pv-poetry h2 { font-size: 19px; }
  .pv-poetry > span { font-size: 6px; }
}
