/* Typography for Japanese and English text. Loaded after each page's inline styles.
   Parameters follow the site-copy-naturalization skill (evidence notes there).
   Japanese rules apply only under html[lang="ja"]; English keeps the page defaults. */

/* ---- Japanese ---- */
html[lang="ja"] body{
  font-family:'Archivo','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic Medium','Yu Gothic','Noto Sans JP','Meiryo',sans-serif;
  line-height:1.8;            /* body: 1.7 to 1.8 */
  line-break:strict;
}
/* Phrase-aware wrapping keeps words such as 一つひとつ whole. Browsers without support fall back to normal wrapping. */
html[lang="ja"] :is(p,li,dd,h1,h2,h3,figcaption,.jtc-title){word-break:auto-phrase;}
/* Headings: 1.3 to 1.5, no negative tracking, proportional kana. */
html[lang="ja"] :is(h1,h2,h3,.jtc-title,.entry-card h2){line-height:1.38; letter-spacing:0; font-feature-settings:"palt";}
/* Japanese has no italic. Synthetic slant on kanji and kana is a rendering artifact. */
html[lang="ja"] :is(.quote,#why p.lead,em,i,cite){font-style:normal;}

/* Reading column: about 35 full-width characters per line (30 to 35 target, 40 max). */
html[lang="ja"] .article-body p{font-size:16px; max-width:35em; margin-bottom:1.35em;}
html[lang="ja"] .article-body + *{margin-top:2.2em;}
html[lang="ja"] main > .wrap > h1{font-size:clamp(23px,4.2vw,30px);}
html[lang="ja"] .entry-card p{font-size:14px; line-height:1.7; max-width:38em; -webkit-line-clamp:3;}
html[lang="ja"] .entry-card h2{font-size:16.5px; margin-bottom:5px;}
html[lang="ja"] .pv-list li{line-height:1.8;}

/* ---- English ---- */
html[lang="en"] .article-body p{line-height:1.7; max-width:66ch;}

/* ---- Line breaking (all pages) ----
   Balanced short lines and no one-character last lines, where the browser supports it. */
:is(h1,h2,h3,.lead,.sub,.jtc-title,.entry-card h2){text-wrap:balance;}
:is(p,li,dd,figcaption){text-wrap:pretty;}


/* ================= Spacing and scale (rhythm) =================
   Two schemes. Both use Fibonacci steps for space; type sizes follow a golden-ratio derived scale.
   Phone   (<768px):  space 13 / 21 / 34 / 55; type 16 body, 18 lead, 20 sub-heading, 26 h1 and home h2, 33 hero
                      (steps of about 1.27 = sqrt(phi)).
   Desktop (>=768px): space 21 / 34 / 55 / 89 / 144; type 16 body, 21 lead and sub-heading, 34 h1 and home h2, 55 hero
                      (steps of phi).
   Evidence level: [運用]. The golden section has real but fragile effects in the literature (Green, 1995),
   so this is a consistent system, not a proven optimum. */
:root{--f1:5px; --f2:8px; --f3:13px; --f4:21px; --f5:34px; --f6:55px; --f7:89px; --f8:144px;}

/* Hero subtitle: no forced line break. It breaks between its two clauses when the width is short (phones)
   and stays on one line on desktop; the break opportunity is written into the text (phrase.py). */
html[lang="ja"] .hero p.sub{max-width:none; text-wrap:wrap;}

/* Japanese measures are in em (1em = one full-width character). The old ch values (56ch, 58ch)
   meant about 28 characters and broke leads in the middle of a phrase on desktop. */
html[lang="ja"] main .lead{max-width:36em; line-height:1.8;}
html[lang="ja"] main > .wrap > section p, html[lang="ja"] main > .wrap > .role-card p{max-width:35em;}
html[lang="ja"] .custodian-lead, html[lang="ja"] .how-lead{max-width:35em;}

/* Sub pages: one scale. */
main > .wrap .eyebrow, .fy-eyebrow-row{margin-bottom:var(--f3);}
main > .wrap > h1, main .rp-hero-bg h1{margin-bottom:var(--f4);}
main > .wrap .lead, main .rp-hero-bg .lead{font-size:18px;}
main > .wrap h2:not(.entry-card h2):not(.role-card h2){margin-bottom:var(--f3);}
main > .wrap > section p{font-size:15px;}
html[lang="ja"] main > .wrap > section p{font-size:15px; line-height:1.85;}
/* One eyebrow size everywhere (13, a Fibonacci step); the home page had 12 and 15 mixed. */
p.eyebrow, .section-head p.eyebrow{font-size:13px;}
main > .wrap > section{margin-bottom:var(--f6);}
main > .wrap > .lead{margin-bottom:var(--f5);}
.sec-cta{margin-top:var(--f4);}
/* sub pages only (the home page main has no direct .wrap; the Return Place hero is full-bleed) */
main:has(> .wrap):not(:has(> .rp-hero-bg)){padding-top:var(--f6); padding-bottom:var(--f7);}
@media (max-width:767px){
  main:has(> .wrap):not(:has(> .rp-hero-bg)){padding-top:var(--f5); padding-bottom:var(--f6);}
  main > .wrap > h1, main .rp-hero-bg h1{font-size:26px;}
  main > .wrap h2:not(.entry-card h2):not(.role-card h2){font-size:20px;}
}
@media (min-width:768px){
  .eyebrow, main > .wrap .eyebrow, .fy-eyebrow-row{margin-bottom:var(--f4);}
  main > .wrap > h1, main .rp-hero-bg h1{font-size:34px;}
  main > .wrap h2:not(.entry-card h2):not(.role-card h2){font-size:21px;}
  main > .wrap .lead, main .rp-hero-bg .lead{font-size:21px;}
  html[lang="ja"] main > .wrap > section p{font-size:16px;}
}

/* Display text wraps only at the break opportunities written into it (see phrase.py), so Safari, iOS and Firefox,
   which lack word-break:auto-phrase, wrap like Chrome. overflow-wrap keeps an unusually long unbroken run inside the box. */
html[lang="ja"] :is(h1,h2,h3,.lead,.sub,.jtc-title,.custodian-lead,.how-lead){word-break:keep-all; overflow-wrap:anywhere; line-break:strict;}

#contact p.eyebrow{color:rgba(0,0,0,0.7);}

/* Article titles are long sentences: keep them at the phone h1 size (26) on desktop too, so they stay within two lines. */
main:has(.article-body) > .wrap > h1{font-size:26px;}