/*
 * The Japanese pages' type (ALE-221): /ja, /ja/blog and every Japanese
 * article. Loaded after style.css and, on /ja, after home-3.css, and it only
 * ever acts on text marked :lang(ja) - so it changes nothing an English page
 * could reach. The rules are DESIGN.md §26, set for the web:
 *
 * - **Headings in Mincho, never left to Courier's fallback.** Courier Prime has
 *   no Japanese, and a browser's per-glyph fallback picks whatever it likes.
 *   Hiragino Mincho ProN on Apple devices - the app's own Japanese display
 *   face - then Yu Mincho on Windows, then any Mincho, then serif. Nothing is
 *   downloaded: a Japanese web font is megabytes, and the site makes no
 *   third-party request to fetch one, for the reason §26 gives for not
 *   bundling one in the app.
 * - **Headings at 0.875 of the English size** - font.displayJa.scale. A kanji
 *   fills its em where Courier's capitals reach 0.58 of it, so at the same
 *   size a Japanese heading reads a size larger.
 * - **W3 where the English is regular, W6 where it is bold**, as the app maps
 *   them; in CSS that is 400 and 600.
 * - **Body text in the system's Japanese sans** - Hiragino Sans on Apple, Yu
 *   Gothic or Meiryo on Windows - at a looser 1.8 leading, which Japanese
 *   text sets more open than Latin.
 *
 * Text that stays English keeps Courier: the wordmark and anything marked
 * lang="en" is outside :lang(ja), and the step numerals are drawn by CSS
 * counters in home-3.css's own face.
 *
 * Immutable in the Caddyfile like every stylesheet here, so a change to this
 * file is a new file, ja-2.css, and the pages' <link> moves with it.
 */

body:lang(ja) {
  font-family:
    -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic',
    YuGothic, Meiryo, 'Noto Sans JP', sans-serif;
  line-height: 1.8;
  line-break: strict;
}

h1:lang(ja),
h2:lang(ja),
.tiles h3:lang(ja),
.store:lang(ja) {
  font-family:
    'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Yu Mincho', YuMincho, 'BIZ UDPMincho',
    'Noto Serif JP', serif;
  letter-spacing: 0.02em;
  /* Breaks a heading between phrases rather than mid-word, where the browser
     knows how; elsewhere it is simply ignored. */
  word-break: auto-phrase;
}

/*
 * ⚠️ **Short lines break only where the markup says they may.** Japanese can
 * break between any two characters, which is right for a paragraph and wrong
 * for a line of ten: the hero printed 「タイ／マー。」 and 「何もな／い。」.
 * `keep-all` stops the breaks between characters, and the pages put a <wbr>
 * at each phrase boundary - after a 、, before a particle-led phrase - so
 * these lines break there or not at all. It is the one technique Safari
 * honours; `auto-phrase` above is Chromium's and does nothing in Safari, and
 * the site of an iPhone app is read on iPhones. Prose is left alone: running text
 * breaking anywhere is ordinary Japanese typesetting.
 *
 * An article's title is the one heading that cannot carry a <wbr>: it comes
 * from Sanity as text. Under keep-all it breaks after its own 、 and ： -
 * which every title in seo/articles/ja/ has - and `anywhere` catches a phrase
 * too long for the line, so nothing overflows on a narrow phone.
 */
.holding p:lang(ja),
.stamp:lang(ja),
.steps li:lang(ja),
.tiles h3:lang(ja),
h1:lang(ja),
h2:lang(ja) {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

h1:lang(ja) {
  font-size: 1.75rem; /* 2rem x 0.875 */
  font-weight: 400;
}

h2:lang(ja) {
  font-size: 1.0625rem; /* 1.1875rem x 0.875, to the nearest 1/16 */
  font-weight: 400;
}

.tiles h3:lang(ja) {
  font-size: 0.9375rem;
  font-weight: 600;
}

/* The store button's label: Courier Prime Bold in English, Mincho W6 here,
   as the app's PillButton sets a Japanese label (familyOf in tokens.ts). */
.store:lang(ja) {
  font-weight: 600;
  font-size: 1.0625rem;
}

@media (max-width: 30rem) {
  h1:lang(ja) {
    font-size: 1.4375rem; /* style.css's phone 1.625rem x 0.875 */
  }
}