/* assets/rn/ja.css — Japanese typography for /ja/ (3-ja-bilingual). Loaded last on /ja/ pages only, after the page's
   own stylesheet; ja-fonts.css (after fonts.css) declares the families. Unlayered, so it beats the legacy layer at any
   specificity; against the rn files it wins ties by coming last.

   1. Families, scale and rhythm (tokens)   2. Body text   3. Headings: phrase-safe breaks   4. Labels
   5. The hero   6. Legacy literal families   7. Page details   8. Chrome */

/* 1. Tokens ──────────────────────────────────────────────────────────────────────────────────────────────────
   Each Japanese family sits behind the Latin one it pairs with (tokens.css --rn-font-*-ja): Latin words, numbers and
   the brand keep the site's type, Japanese takes Noto Sans JP (body, and labels at 500) and Zen Kaku Gothic New 700
   (display). Display and H2 sizes are smaller than the English: square, dense glyphs read larger at the
   same size. Measured against the copy, 90% left phrases wider than the narrow heading columns (FAQ, Approach), so the
   display role is 86% and the section H2 82% (the compact H2 stays at 90%). Japanese needs more leading and no
   negative tracking. */
html:lang(ja) {
  --rn-font-display: var(--rn-font-display-ja);
  --rn-font-body: var(--rn-font-body-ja);
  --rn-font-mono: var(--rn-font-mono-ja);
  --rn-fs-display: clamp(2.365rem, 1.376rem + 4.816vw, 5.418rem); /* 38 → 87 */
  --rn-fs-h2: clamp(2.05rem, 1.312rem + 2.378vw, 3.28rem);        /* 33 → 52 */
  --rn-fs-h2-sm: clamp(1.6875rem, 1.26rem + 1.35vw, 2.475rem);   /* 27 → 40 */
  --rn-lh-display: 1.22;
  --rn-lh-heading: var(--rn-lh-heading-ja);
  --rn-lh-title: 1.45;
  --rn-lh-lead: 1.75;
  --rn-lh-body: var(--rn-lh-body-ja);
  --rn-track-display: 0.01em;
  --rn-track-title: 0.02em;
  --rn-track-label: 0.04em;
  --rn-track-label-wide: 0.06em;
}

/* 2. Body text: generous leading, a little air between glyphs, strict kinsoku (no small kana or closing marks at a
   line start) and, where supported, the 1/8em gap between Japanese and Latin that typesetters add by hand. */
html:lang(ja) body {
  font-family: var(--rn-font-body-ja);
  line-height: var(--rn-lh-body-ja);
  letter-spacing: var(--rn-track-ja);
  line-break: strict;
  text-autospace: normal;
}

/* 3. Headings break only between phrases: tools/ja-wbr.mjs puts a <wbr> at every BudouX phrase boundary, and keep-all
   stops the browser breaking anywhere else. Kinetic headings split at the same <wbr>s, so each phrase rises in its own
   mask. overflow-wrap stays normal: with anywhere, text-wrap: balance (base.css) happily narrowed a heading until a
   phrase broke mid-word or a line began with 。, so instead every heading phrase is written to fit its column at 390
   and 1440 (overhaul/work/3ja/break-check.mjs). No palt: Zen Kaku Gothic New (as Google serves it) has no
   proportional forms, while the system fallback shown for the first few hundred milliseconds (Yu Gothic, Hiragino)
   does, so palt made headings narrower before the swap and reflowed them after it (CLS up to 0.16). Full-width, the
   fallback and the web font set the same lines. */
html:lang(ja) :is(h1, h2, h3) {
  word-break: keep-all;
  overflow-wrap: normal;
  line-break: strict;
}

/* Short display text outside the headings gets the same phrase breaks (the DISPLAY list in tools/ja-wbr.mjs; keep the
   two in step): readout titles, stat labels, the next-page titles and highlights on Work, the fee and turnaround
   terms, the FAQ questions, the stat and legal notes, and on Work and Books the JANBARI.TV on-screen line, its
   rundown lines and the Render Distance line, and the home hero's lede (on a phone it is part of the designed first
   screen, where セカンドオピニオン|を。 split a phrase). These sit in narrow cells, so break-word stays on as a last resort;
   unlike anywhere it leaves the min-content width alone. The JANBARI.TV programme names on Work are kept whole too,
   with no <wbr>s: each breaks only at its own space (ライターバトルX / 〜勝利への道〜), and names a link. */
html:lang(ja) :is(.rn-readout-finding, .wk-next-link strong, .rn-stat dt, .lux-proof span, .hm-camera dt,
  .hm-feature-facts dt, .au-oc-stats dt, .hm-terms dd, .wk-hl-what, .jb-link, .jb-what, .jb-onscreen,
  .bk-album-line, .rn-stat-note, .legal-ja-note, .rn-faq summary, .lux-hero-lede) {
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

/* A readout title is one short instruction: balanced, so its last phrase never sits alone (重複している広告セットを /
   停止). The reason under it is a sentence and only avoids a lone last phrase. */
html:lang(ja) .rn-readout-finding {
  text-wrap: balance;
}

html:lang(ja) .rn-readout-finding > :is(.hm-why, .au-why) {
  text-wrap: pretty;
}

/* A run that must stay on one line: a company name, a price or a day range (スクウェア・エニックスの, 3〜7日). */
.rn-nw {
  white-space: nowrap;
}

/* 4. Labels: Japanese is never uppercased (legacy and page rules set it at every specificity, and none of them with
   !important, so this one may). The hero's example account keeps its own English labels. */
html:lang(ja) body :not(.rm-world *) {
  text-transform: none !important; /* stylelint-disable-line declaration-no-important -- a language rule over every label rule */
}

/* 5. The hero (ran-morph.css names Manrope alone): the kinetic lines and the pill, the two parts in Japanese, take the
   Japanese stack behind Manrope, family only. The stage's labels are the example account's own English UI and keep the
   English faces (Manrope, IBM Plex Mono, the one Bricolage figure), as on the English page. The lines are cut by hand
   at phrase boundaries (assets/rn/ja-hero-config.js): the space between two phrase masks closes to under 3px at 34px,
   and the closing English line (one mask) keeps the English word spacing inside it. Every 。 and 、 in the lines ends
   a line, and a full-width stop is ink on its left half only, so a centred line sat visibly left of centre: halt sets
   them half-width (Noto Sans JP and the system fallbacks both have it), so each line centres on its ink. */
html:lang(ja) .ran-morph :is(.rm-line, .rm-pill) {
  font-family: var(--rn-font-body-ja);
}

html:lang(ja) .ran-morph .rm-line {
  word-spacing: -0.26em;
  font-feature-settings: "halt";
}

html:lang(ja) .ran-morph .rm-w {
  word-spacing: 0.12em;
}

/* Headings in Japanese need room between lines; a few page rules set English display leading (0.88-1.02) literally. */
html:lang(ja) :is(h1, h2) {
  line-height: var(--rn-lh-heading-ja);
}

html:lang(ja) :is(.studio-inner-hero, .audit-hero, .studio-brief-hero, .legal-hero) h1 {
  line-height: var(--rn-lh-display);
}

html:lang(ja) .rn-brief-form .brief-step h2 {
  line-height: var(--rn-lh-heading-ja);
}

/* The home H1 (lux.css and home-hero.css set Bricolage by name, at English display leading). Its second line,
   本当の働きを知る。, is nine characters that must stay on one line (a word joiner holds 本当の働き together), so on a
   phone and in the desktop split the size is set by the column: 9 characters plus tracking in the 358px phone column
   (9.9vw) and in the split copy column, which is 40% of the container (4.3cqi). Tablets set it on two wide lines. On
   phones in portrait the size is home-hero.css 9's --hh-fs, the same value except on the narrowest phones (under about
   356px), where the 2.2rem floor would no longer fit the column and it keeps to the column instead. */
html:lang(ja) .lux-home .lux-hero .lux-hero-copy h1 {
  font-family: var(--rn-font-display-ja);
  font-size: var(--hh-fs, clamp(2.2rem, 9.9vw, 2.88rem));
  line-height: 1.16;
  letter-spacing: 0.01em;
}

@media (min-width: 781px) {
  html:lang(ja) .lux-home .lux-hero .lux-hero-copy h1 {
    font-size: clamp(3.06rem, 6.48vw, 4.32rem);
  }
}

@media (min-width: 1024px) {
  html:lang(ja) .lux-home .lux-hero .lux-hero-copy h1 {
    font-size: clamp(2.4rem, 3.9vw, 3.6rem);
    font-size: clamp(2.4rem, 4.3cqi, 3.6rem);
  }
}

@media (min-width: 600px) and (max-width: 1023px) and (max-height: 560px) and (orientation: landscape) {
  html:lang(ja) .lux-home .lux-hero .lux-hero-copy h1 {
    font-size: clamp(1.575rem, 3.78cqi, 2.34rem);
  }
}

/* 6. Legacy literal families: rules that name a Latin family outright get its Japanese partner. */
html:lang(ja) :is(.ran-morph-caption, .ran-morph-toggle) {
  font-family: var(--rn-font-mono-ja);
}

/* legal.css scopes everything under .studio-legal-page; html:lang(ja) puts these one class above it. */
html:lang(ja) .studio-legal-page :is(.legal-hero-copy > p.legal-updated, .legal-hero-art span, .legal-index a) {
  font-family: var(--rn-font-mono-ja);
}

html:lang(ja) .studio-legal-page .legal-contact :is(p, a) {
  font-family: var(--rn-font-body-ja);
}

/* 7. Page details ───────────────────────────────────────────────────────────────────────────────────────────── */

/* The Square Enix credit never splits the company name: スクウェア・エニックスの is one no-wrap run (12 full-width
   characters) in both headings that carry it, and the only break after it is before 仕事。. So those two headings
   size to fit that run in their own column: 8cqi is 12 characters plus tracking with a little room. Where the column
   is wide the usual size wins; in the 390 phone column and the home feature's copy column it steps down about 10-25%.
   The home H3 drops its English 17ch measure, which was narrower than the name. */
html:lang(ja) :is(.hm-feature-copy, .wk-feature-head) {
  container-type: inline-size;
}

html:lang(ja) .hm-feature-copy > h3 {
  max-width: none;
  font-size: min(var(--rn-fs-h2-sm), 8cqi);
}

html:lang(ja) .wk-feature-head h2 {
  font-size: min(var(--rn-fs-h2), 8cqi);
}

/* The JANBARI.TV feature (janbari-books): ジャンバリ.TVで。 is one phrase of about nine full-width characters, so the
   headline sizes to fit it in its column (10cqi) on a phone; wider columns keep the usual size. The programme names in
   the rundown step down to the Japanese title scale (two-line names such as ライターバトルX 〜勝利への道〜 stay two
   lines at most). */
:lang(ja) .jb-head {
  --jb-h2-size: min(var(--rn-fs-h2), 10cqi);
  container-type: inline-size;
}

:lang(ja) .jb-name {
  --jb-name-size: var(--rn-fs-title);
  --jb-name-lh: 1.35;
}

/* Japanese sets no space after a highlighted word (スクウェア・エニックス|の), so the next glyph clears the lime block,
   which reaches 0.1em past the word (motion.js placeBlocks). */
html:lang(ja) [data-rn-kinetic="highlight"] em {
  margin-inline-end: 0.12em;
}

/* The same guard where a heading's column gets narrow between 900 and 1180px: the closing band's headline column
   (はっきりさせる。, 8 characters, at 305px on a 1024 screen), the Audits hero copy (第三者の目を。 and
   Google広告に、, about 7.3em) and the legal heroes (あなたの情報を、 and 大切に扱います。, 8 characters; at 1024
   they stacked four short lines). Wider columns keep the usual size. */
html:lang(ja) :is(.rn-band-card, .studio-cta-grid) > div:first-child,
html:lang(ja) :is(.au-hero-copy, .legal-hero-copy) {
  container-type: inline-size;
}

html:lang(ja) .legal-hero-copy > h1 {
  font-size: min(var(--rn-fs-display), 12cqi);
}

html:lang(ja) :is(.rn-band-card, .studio-cta-grid) > div:first-child > h2 {
  font-size: min(var(--rn-fs-h2), 12cqi);
}

html:lang(ja) .au-hero-copy > h1 {
  font-size: min(clamp(2.625rem, 1.3rem + 4.3vw, 5.25rem), 13.5cqi); /* audits.css .au-hero h1, capped */
}

/* English-only destinations (Prototypes, Insights, AI Alchemy) carry a small EN tag in the nav, Menu and footer.
   The label floor (11px) and 85% of the link's colour: quieter than the label beside it, still AA (about 7:1 on the
   ink header). It was 10px until 4-consolidation made the 10.5px text floor a gate. */
.rn-en-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 5px;
  padding: 2px 4px 1px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font: 500 var(--rn-fs-label)/1 var(--rn-font-mono);
  letter-spacing: 0.02em;
  opacity: 0.85;
}

/* The compact nav (901-1180px) with the longer Japanese labels and their EN tags: even with the nav between the
   brand and the end group (chrome.css), the language switch and the CTA ran into it below about 1040px (66px deep
   at 901). Here the brand shows its mark alone; the link keeps its name. (4-consolidation) */
@media (min-width: 901px) and (max-width: 1180px) {
  :lang(ja) .brand-word {
    display: none;
  }
}

/* The legal pages are reference translations: the note sits in the hero, above the fold. */
.legal-ja-note {
  max-width: 34rem;
  margin: 18px 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--rn-ink);
  background: rgba(9, 11, 13, 0.05);
  color: var(--rn-text-on-paper);
  font-size: var(--rn-fs-small);
  line-height: 1.7;
}

/* The English link takes its own line, so the sentence above it ends where it ends (no す。 left before the link). */
.legal-ja-note a {
  display: block;
  width: fit-content;
  margin-top: 4px;
  color: inherit;
  font-weight: 600;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* Short Japanese lines in cards and lists: no one-character last line (text-wrap: pretty, where supported). */
html:lang(ja) main :is(li, dd, dt, figcaption, .rn-readout-area, .rn-card-body > p, .rn-tl-role, .rn-tl-place, .rn-stat-note) {
  text-wrap-style: pretty; /* the longhand, so a figure's white-space: nowrap (below) still holds */
}

/* Section heading measures are set in ch for English (10-18ch, the width of about two to four words). A ch is the
   Latin "0", about 0.55em, so the same measure held a Japanese H2 to 6-9 characters and stacked short phrases on their
   own lines. Japanese H2s take their column's width; keep-all and balance still set the rag. The H1s keep their
   measures: their hero grids size a column from them (Work's is max-content). */
html:lang(ja) main h2 {
  max-width: none;
}

.legal-ja-note,
html:lang(ja) :is(.lux-hero-lede, .legal-index a) {
  text-wrap: pretty;
}

/* Japanese figures use 万/億 units (3.41万, 25.2億, 5,000万+): keep each figure on one line so a unit or "+" never
   drops to a line of its own. */
:lang(ja) :where(.lux-proof strong, dl:not(.hm-terms, .au-terms) dd) {
  white-space: nowrap;
}

/* The two strips where a Japanese figure outgrows its cell (5,000万+ in the Audits proof strip, which clips its
   overflow; the home EDAMAME facts at 320px): the figures scale with their cell instead. */
:lang(ja) :where(.au-proof, .hm-feature-facts > dl) > div {
  container-type: inline-size;
}

:lang(ja) :where(.au-proof) dd {
  font-size: min(var(--rn-fs-stat), 22cqi);
}

:lang(ja) :where(.hm-feature-facts) dd {
  font-size: min(var(--hm-fact-fs), 24cqi);
}