/* The Japanese (/ja/) and Simplified Chinese (/zh/) pages, on top of style.css.
   The pixel fonts (Press Start 2P, VT323) only have Latin letters, so Japanese and Chinese text uses the system's own
   fonts: no big font download, and nothing fetched from a font service that may be blocked. Latin text keeps the
   pixel look. Also: the language switcher at the top of these pages. */
html:lang(ja) { --cjk: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'YuGothic', 'Meiryo', 'Noto Sans JP', sans-serif; }
html:lang(zh) { --cjk: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Source Han Sans SC', sans-serif; }

html:lang(ja) body, html:lang(zh) body { font-family: var(--cjk); font-size: 17px; line-height: 1.8; }
html:lang(ja) :is(p, li, dd, summary, .faq__a, .tile__label, .crumbs, .ca-note, .disclaimer, .fine),
html:lang(zh) :is(p, li, dd, summary, .faq__a, .tile__label, .crumbs, .ca-note, .disclaimer, .fine) {
  font-family: var(--cjk); font-size: 17px; line-height: 1.8; line-break: strict; overflow-wrap: anywhere;
}
html:lang(ja) :is(.sign, h2, h3, .px-btn, .tile__value), html:lang(zh) :is(.sign, h2, h3, .px-btn, .tile__value) {
  font-family: var(--pixel), var(--cjk); line-height: 1.5;
}
html:lang(ja) .lede, html:lang(zh) .lede { font-size: 19px; }
/* small pixel-font sizes are fine for Latin letters but too small for kanji and hanzi: these use the CJK font, bold */
html:lang(ja) :is(.guide__step h2, .guide__step h3, .intl-chapters h3, .intl-legend b),
html:lang(zh) :is(.guide__step h2, .guide__step h3, .intl-chapters h3, .intl-legend b) { font: 700 18px/1.5 var(--cjk); }
html:lang(ja) :is(.px-btn, .nav__home), html:lang(zh) :is(.px-btn, .nav__home) { font-family: var(--cjk); font-weight: 700; font-size: 16px; letter-spacing: .02em; }
html:lang(ja) .px-btn--small, html:lang(zh) .px-btn--small { font-size: 14px; }
html:lang(ja) .faq summary h3, html:lang(zh) .faq summary h3 { font: 700 18px/1.5 var(--cjk); }
html:lang(ja) code, html:lang(zh) code { font-family: ui-monospace, monospace; font-size: 15px; word-break: break-all; }

/* page parts used only here */
.intl-hero { padding: 48px 20px 56px; background: var(--grass-4); }   /* keeps .section's 20px side gutter; the darker lawn keeps its light text at AA */
.intl-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.intl-hero__eyebrow { margin: 0 0 12px; color: var(--gold); }
.intl-hero h1 { margin: 0 0 12px; font: 28px/1.4 var(--pixel), var(--cjk); color: var(--cream); text-shadow: 3px 3px 0 var(--ink); }
.intl-hero__tag { margin: 0 0 16px; font-size: 26px; font-weight: 700; color: #c4f07a; }
:where(.intl-hero) p { color: var(--cream); }   /* lowest specificity, so .intl-notice (ink on paper), the eyebrow and the tag keep their own colors */
.intl-hero__cat { width: 100%; height: auto; image-rendering: pixelated; }
.intl-actions { display: flex; flex-wrap: wrap; gap: 12px 14px; margin: 22px 0 0; }
.intl-figure { margin: 24px 0 0; }
.intl-figure img { display: block; width: 100%; height: auto; box-shadow: var(--border); }
.intl-figure figcaption { margin-top: 8px; font-size: 15px; opacity: .85; }
.intl-list { margin: 16px 0 0; padding-left: 1.3em; }
.intl-list li + li { margin-top: 6px; }
.intl-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.intl-legend li { padding: 12px 14px; }
.intl-legend b { display: block; font: 12px/1.6 var(--pixel), var(--cjk); }
.intl-notice { margin: 20px 0 0; padding: 14px 16px; font-size: 16px; line-height: 1.75; color: var(--ink); background: var(--paper); box-shadow: var(--border); }
.intl-chapters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.intl-chapters article { padding: 18px 20px; }
.intl-chapters h3 { margin: 0 0 10px; font-size: 14px; }

/* four tiles instead of five (the Chinese page): one row of four on wide screens, a centered second row in between */
@media (min-width: 1100px) { .tiles--four { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 700px) and (max-width: 1099px) { .tiles--four .tile:nth-child(4) { grid-column: 3 / span 2; } }

@media (max-width: 820px) {
  .intl-hero__grid, .intl-chapters { grid-template-columns: 1fr; }
  .intl-hero__cat { max-width: 360px; margin: 0 auto; }
  .intl-hero h1 { font-size: 22px; }
}

/* the language switcher at the top of these pages (the English pages use the footer nav for it) */
.langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin: 18px 0 0; font-size: 18px; }
.langs a { color: var(--cream); }
.langs a[aria-current="page"] { color: var(--gold); text-decoration: none; font-weight: 700; }
.langs a:hover, .langs a:focus-visible { color: var(--gold); }