/* Polar Lapland: Japanese (/ja) and Chinese (/zh) pages only. _tools/build-i18n.mjs links this file right after
   site.css on those pages; the English and European pages never load it.

   Cormorant Garamond and Inter have no Japanese or Chinese characters, so each stack below keeps them first (they
   still draw the Latin letters, numbers and prices) and then names the system fonts that draw the rest:
   Mac/iPhone first, then Windows, then Android/Linux. */

:root:lang(ja) {
  --font-display: 'Cormorant Garamond', 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, 'Noto Serif JP', 'Noto Serif CJK JP', serif;
  --font-body: 'Inter', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', YuGothic, Meiryo, 'Noto Sans JP', 'Noto Sans CJK JP', sans-serif;
}
/* Chinese serif fonts are thin on Windows (SimSun), so there the headings use Microsoft YaHei instead */
:root:lang(zh) {
  --font-display: 'Cormorant Garamond', 'Songti SC', STSong, 'Noto Serif SC', 'Noto Serif CJK SC', 'Microsoft YaHei', sans-serif;
  --font-body: 'Inter', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', sans-serif;
}

/* Japanese and Chinese have no italics: never slant them artificially (the Latin words keep the real italic).
   Line breaks follow the strict rules of the language (no 。、」 at the start of a line); Japanese headlines break
   between phrases instead of in the middle of a word, where the browser can (Chrome, Edge). */
:is(:lang(ja), :lang(zh)) { font-synthesis-style: none; line-break: strict; }
:lang(ja) :is(h1, h2, h3, .lede, .eyebrow, .btn) { word-break: auto-phrase; }

/* Headlines: every Japanese or Chinese character is a full square, so at the English sizes a headline looks about a
   fifth bigger and fits only a few characters per line. The sizes below are about 80% of the English ones (same
   breakpoints as site.css), and the widths that site.css gives in "ch" (half a character here) are given in em.
   The plain h1/h2 sizes use :where() so they replace only site.css's plain h1/h2 rules, not the smaller sizes it
   gives headings inside components (.tour-main h2, .prose h2 ...). */
:is(:lang(ja), :lang(zh)) :is(h1, h2) { line-height: 1.25; letter-spacing: .02em; }
:where(:lang(ja), :lang(zh)) h1 { font-size: clamp(2rem, 4.8vw, 3.75rem); }
:where(:lang(ja), :lang(zh)) h2 { font-size: clamp(1.625rem, 3.4vw, 2.625rem); }
:is(:lang(ja), :lang(zh)) .article-head h1 { font-size: clamp(1.875rem, 4vw, 3rem); }
:is(:lang(ja), :lang(zh)) :is(.hero--mosaic, .hero--slash) h1 { font-size: clamp(1.875rem, 3.5vw, 3rem); max-width: 15em; }
@media (max-width: 899px) { :is(:lang(ja), :lang(zh)) .hero--mosaic h1 { font-size: clamp(1.75rem, 6.4vw, 2.25rem); } }
@media (min-width: 1024px) { :is(:lang(ja), :lang(zh)) .hero--slash h1 { font-size: clamp(1.875rem, 2.7vw, 2.625rem); } }
@media (max-width: 767px) { :is(:lang(ja), :lang(zh)) .hero--split .hero__content h1 { font-size: clamp(1.875rem, 8.8vw, 2.25rem); } }
:is(:lang(ja), :lang(zh)) .hero__content h1 { max-width: 12em; }
:is(:lang(ja), :lang(zh)) .page-hero h1 { max-width: 13em; }
:is(:lang(ja), :lang(zh)) .cta h2 { max-width: 14em; }
:is(:lang(ja), :lang(zh)) .carousel__text { font-size: clamp(1.25rem, 2.1vw, 1.75rem); line-height: 1.5; }

/* Running text needs a little more air between the lines than Latin text */
:is(:lang(ja), :lang(zh)) .prose { line-height: 1.85; }