/* KUMIHAN language gateway (index.html, top-*.html). Generated pages: tools/build_gateways.py */

    :root {
      color-scheme: light;
      --paper: #f4f1e9;
      --panel: #eae5db;
      --ink: #252421;
      --sub: #55514b;
      --muted: #726d65;
      --rule: #d5d0c6;
      --red: #b12f31;
      --red-dark: #882326;
      --serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif CJK JP", serif;
      --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
      --shell: min(1216px, calc(100% - 96px));
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.8 var(--sans); line-break: strict; -webkit-font-smoothing: antialiased; }
    a { color: inherit; }
    a:focus-visible { outline: 3px solid var(--red); outline-offset: 5px; border-radius: 2px; }
    button { font: inherit; }
    img { display: block; max-width: 100%; height: auto; }
    .shell { width: var(--shell); margin-inline: auto; }
    .skip-link { position: absolute; inset: -160px auto auto 12px; z-index: 10; padding: 10px 18px; background: var(--ink); color: #fff; }
    .skip-link:focus { inset-block-start: 12px; }
    .site-header { border-bottom: 1px solid var(--rule); }
    .header-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 100px; }
    .brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; min-width: 0; }
    .brand img { width: 56px; height: 56px; object-fit: cover; border: 1px solid var(--rule); border-radius: 2px; background: #fff; }
    .brand-word { font: 850 26px/1.1 Arial, Helvetica, sans-serif; letter-spacing: -.05em; }
    .brand-caption { display: block; margin-top: 5px; color: var(--muted); font: 700 10px/1.5 Arial, sans-serif; letter-spacing: .14em; }
    .header-side { display: flex; gap: 22px; align-items: center; color: var(--muted); font: 700 11px/1.6 Arial, sans-serif; letter-spacing: .14em; text-align: right; }
    .header-side .red-line { display: inline-block; width: 42px; height: 2px; background: var(--red); }
    .intro { position: relative; padding: clamp(76px, 8.2vw, 128px) 0 110px; }
    .intro-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(48px, 6vw, 108px); align-items: center; }
    .eyebrow { display: flex; align-items: center; gap: 13px; margin: 0; color: var(--red-dark); font: 800 11px/1.65 Arial, sans-serif; letter-spacing: .17em; }
    .eyebrow::before { content: ""; width: 27px; height: 2px; background: var(--red); flex: 0 0 auto; }
    h1 { max-width: 730px; margin: 32px 0 32px; font-size: clamp(43px, 4.7vw, 72px); line-height: 1.38; font-weight: 790; letter-spacing: -.065em; word-break: normal; text-wrap: wrap; }
    h1 em { display: block; color: var(--red); font-style: normal; }
    .intro-lead { max-width: 570px; margin: 0; color: var(--sub); font-size: clamp(15px, 1.3vw, 17px); line-height: 2.16; }
    .intro-lead strong, .approach-copy strong { color: var(--ink); font-weight: 760; }
    .intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 23px; margin-top: 42px; }
    .primary-action { min-height: 62px; display: inline-flex; align-items: center; justify-content: space-between; gap: 38px; padding: 15px 21px 15px 24px; color: #fff; background: var(--red-dark); text-decoration: none; font-size: 13px; font-weight: 740; transition: background .18s ease, transform .18s ease; }
    .primary-action:hover { background: #681c1f; transform: translateY(-2px); }
    .minor-action { text-decoration: none; border-bottom: 1px solid var(--ink); padding: 9px 0; font-size: 12px; font-weight: 720; }
    .primary-action span:last-child { font: 400 20px Arial, sans-serif; }
    .type-art { position: relative; min-width: 0; padding: 27px; background: var(--panel); border: 1px solid var(--rule); }
    .type-art::after { content: "TYPE / LANGUAGE STUDIES"; position: absolute; right: -25px; top: 18px; writing-mode: vertical-rl; color: var(--muted); font: 700 10px Arial, sans-serif; letter-spacing: .18em; }
    .type-art-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font: 700 10px/1.6 Arial, sans-serif; letter-spacing: .16em; margin-bottom: 20px; }
    .type-art-top strong { font-weight: 790; color: var(--red-dark); }
    /* Every sample uses the same cell size. An incomplete row is centered;
       adding another .glyph needs no nth-child layout changes. */
    .glyph-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
    .glyph { flex: 0 0 calc((100% - 14px) / 3); aspect-ratio: 1 / 1.25; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 8px 3px; background: #f7f4ef; border: 1px solid #d6d0c7; }
    .glyph .character { color: var(--ink); font-family: var(--serif); font-size: clamp(50px, 6vw, 90px); line-height: 1.12; font-weight: 540; }
    .glyph .character[lang^="zh-"] { color: var(--red-dark); }
    .glyph .character[lang="ko"] { font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", var(--sans); }
    .glyph .character[lang="th"] { font-family: "Thonburi", "Tahoma", "Noto Sans Thai", sans-serif; }
    .glyph-label { min-height: 2.8em; display: flex; align-items: center; justify-content: center; color: var(--muted); font: 750 clamp(8px, .73vw, 10px)/1.35 Arial, sans-serif; letter-spacing: .04em; text-align: center; overflow-wrap: anywhere; }
    .art-bottom { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font: 700 10px/1.7 Arial, sans-serif; letter-spacing: .11em; padding-top: 19px; }
    .language-section { border-top: 1px solid var(--ink); padding: 92px 0 118px; }
    .section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 46px; }
    .section-heading h2 { margin: 15px 0 0; font-size: clamp(31px, 3.2vw, 48px); font-weight: 760; letter-spacing: -.055em; line-height: 1.35; }
    .section-note { max-width: 345px; margin: 0 0 3px; color: var(--muted); font-size: 13px; line-height: 1.85; }
    /* Uniform, content-safe cards; extra language editions fill the next cell. */
    .language-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); grid-auto-rows: 1fr; gap: 15px; }
    .lang-card { display: flex; min-width: 0; height: 100%; flex-direction: column; min-height: 300px; padding: 32px 28px 30px; background: #eeebe5; border: 1px solid #dcd6cb; }
    .lang-card.available { background: var(--ink); color: #f8f4eb; border-color: var(--ink); }
    .lang-card-head { display: flex; justify-content: space-between; align-items: start; gap: 15px; }
    .lang-index { color: var(--muted); font: 800 11px/1.6 Arial, sans-serif; letter-spacing: .13em; }
    .available .lang-index { color: #bab5ac; }
    .state { font: 750 10px/1.5 Arial, sans-serif; letter-spacing: .12em; color: var(--red-dark); text-align: right; }
    .available .state { color: #e9aaa6; }
    .lang-title { margin: 26px 0 10px; font-size: clamp(27px, 2.7vw, 40px); font-weight: 770; line-height: 1.38; letter-spacing: -.055em; }
    .lang-title [lang="ko"] { font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", var(--sans); }
    .lang-title [lang="th"] { font-family: "Thonburi", "Tahoma", "Noto Sans Thai", sans-serif; }
    .lang-sub { margin: 0; color: var(--muted); font: 710 11px/1.5 Arial, sans-serif; letter-spacing: .07em; }
    .available .lang-sub { color: #bab5ac; }
    .lang-desc { margin: 16px 0 28px; color: var(--sub); font-size: 13px; line-height: 1.9; }
    .available .lang-desc { color: #d7d3cc; }
    .lang-action { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-top: 17px; border-top: 1px solid #cfc8bc; font-size: 13px; font-weight: 740; text-decoration: none; }
    a.lang-action:hover { color: var(--red-dark); }
    .available .lang-action { border-color: #68635b; }
    .available a.lang-action:hover { color: #f1aaa6; }
    .action-arrow { font: 400 22px/1 Arial, sans-serif; }
    .lang-action.unavailable { color: var(--muted); cursor: default; font-weight: 610; }
    .about-section { border-top: 1px solid var(--rule); padding: 80px 0 105px; }
    .about-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 7vw, 116px); }
    .about-section h2 { max-width: 680px; margin: 18px 0 25px; font-size: clamp(29px, 3.2vw, 46px); font-weight: 740; line-height: 1.55; letter-spacing: -.055em; }
    .about-section h2 em { display: block; font-style: normal; }
    .about-section p:not(.eyebrow) { margin: 0; max-width: 640px; font-size: 14px; color: var(--sub); line-height: 2.05; }
    .about-section p.approach-copy + p.approach-copy { margin-top: 1.2em; }
    .principles { display: grid; gap: 0; border-top: 1px solid var(--ink); align-content: start; }
    .principle { display: flex; gap: 25px; align-items: baseline; padding: 21px 0; border-bottom: 1px solid var(--rule); }
    .principle-index { color: var(--red-dark); flex: 0 0 26px; font: 800 11px Arial, sans-serif; }
    .principle-text { font-size: 15px; font-weight: 730; letter-spacing: -.02em; }
    .principle-small { display: block; font-size: 12px; font-weight: 460; color: var(--muted); margin-top: 5px; }
    @media (max-width: 990px) {
      :root { --shell: calc(100% - 56px); }
      .intro-grid { gap: 42px; }
      .type-art { padding: 19px; }
      .type-art::after { display: none; }

      .lang-card { padding: 26px; }
    }
    @media (max-width: 760px) {
      :root { --shell: calc(100% - 40px); }
      .header-inner { min-height: 88px; }
      .brand img { width: 48px; height: 48px; }
      .brand-word { font-size: 23px; }
      .header-side { gap: 12px; font-size: 10px; }
      .header-side .red-line { width: 24px; }
      .intro { padding: 64px 0 72px; }
      .intro-grid { grid-template-columns: 1fr; gap: 56px; }
      h1 { max-width: 660px; font-size: clamp(41px, 9vw, 61px); }
      .intro-lead { max-width: 680px; }
      .type-art { width: min(100%, 540px); justify-self: center; }
      .glyph { aspect-ratio: 1 / 1.22; }
      .glyph .character { font-size: clamp(50px, 10vw, 83px); }
      .language-section { padding: 75px 0 85px; }
      .section-heading { align-items: start; flex-direction: column; gap: 18px; margin-bottom: 30px; }
      .language-grid { grid-template-columns: 1fr; }
      .lang-card { min-height: 265px; }
      .about-layout { grid-template-columns: 1fr; gap: 46px; }
    }
    @media (max-width: 440px) {
      :root { --shell: calc(100% - 34px); }
      .header-inner { gap: 10px; }
      .brand { gap: 9px; }
      .brand img { width: 42px; height: 42px; }
      .brand-word { font-size: 21px; }
      .brand-caption { font-size: 8px; }
      .header-side { font-size: 8px; gap: 7px; }
      .header-side .red-line { width: 14px; }
      .intro { padding-top: 50px; }
      h1 { font-size: clamp(34px, 9.6vw, 44px); line-height: 1.45; }
      .intro-actions { align-items: stretch; flex-direction: column; gap: 16px; }
      .minor-action { align-self: flex-start; }
      .glyph-grid { gap: 5px; }
      .glyph { flex-basis: calc((100% - 10px) / 3); aspect-ratio: 1 / 1.45; gap: 5px; padding: 6px 2px; }
      .glyph .character { font-size: clamp(42px, 13vw, 59px); }
      .glyph-label { font-size: 8px; letter-spacing: .025em; }
      .lang-card { padding: 24px 22px; }
      .art-bottom { font-size: 9px; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .primary-action { transition: none; }
    }

.edition-switch{display:flex;gap:3px;flex-wrap:wrap;justify-content:flex-end;align-items:center;}.edition-switch a{color:var(--sub);font:700 11px/1.4 var(--sans);text-decoration:none;padding:8px 10px;border-bottom:2px solid transparent;}.edition-switch a[aria-current=page]{color:var(--red-dark);border-bottom-color:var(--red);font-weight:800;}.edition-switch a:hover{text-decoration:underline;}@media(max-width:950px){.header-inner{flex-wrap:wrap;padding:14px 0;gap:10px}.edition-switch{order:3;flex:1 0 100%;justify-content:center;border-top:1px solid var(--rule);padding-top:9px}.header-side{display:none}}@media(max-width:390px){.edition-switch a{padding:7px 6px;font-size:10px}}
/* Enlarged text: captions wrap instead of widening the page. */
.type-art-top,.art-bottom{flex-wrap:wrap;gap:4px 12px;}.type-art,.glyph,.intro-grid>*{min-width:0;}.glyph-label{overflow-wrap:anywhere;}html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3{overflow-wrap:anywhere;}
/* Script-appropriate glyphs per page language (fallback stacks, not a palette). */
html[lang="zh-Hant-TW"]{--sans:"PingFang TC","Noto Sans TC","Microsoft JhengHei","Noto Sans CJK TC",system-ui,sans-serif;--serif:"Songti TC","Noto Serif TC","PMingLiU","Noto Serif CJK TC",serif;}
html[lang="zh-Hans-CN"]{--sans:"PingFang SC","Noto Sans SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;--serif:"Songti SC","Noto Serif SC","SimSun","Noto Serif CJK SC",serif;}
html[lang="ko-KR"]{--sans:"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;}
html[lang="ko-KR"] body{word-break:keep-all;overflow-wrap:break-word;}
html[lang="th-TH"]{--sans:"Noto Sans Thai",Thonburi,"Leelawadee UI",Tahoma,system-ui,sans-serif;}
html[lang="th-TH"] body,html[lang="en"] body{line-break:auto;}
[lang="zh-Hant-TW"].character,.lang-title[lang="zh-Hant-TW"]{font-family:"Songti TC","Noto Serif TC","PMingLiU",serif;}
[lang="zh-Hans-CN"].character,.lang-title[lang="zh-Hans-CN"]{font-family:"Songti SC","Noto Serif SC","SimSun",serif;}

/* Language menu: a disclosure dropdown (works without JavaScript). */
.lang-menu { position: relative; }
.lang-menu summary { list-style: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 9px 14px; border: 1px solid var(--rule); background: #f8f5ee; cursor: pointer; font: 800 12px/1.4 var(--sans); letter-spacing: .02em; color: var(--ink); white-space: nowrap; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }
.lang-menu[open] summary::after { transform: translateY(2px) rotate(225deg); }
.lang-menu summary:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.lang-menu ul { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 20; min-width: min(230px, calc(100vw - 32px)); margin: 0; padding: 6px 0; list-style: none; background: #fbf9f4; border: 1px solid var(--rule); box-shadow: 0 18px 40px rgba(37,36,33,.12); }
.lang-menu li a { display: block; padding: 10px 16px; white-space: nowrap; color: var(--sub); text-decoration: none; font: 700 13px/1.5 var(--sans); }
.lang-menu li a .code { color: var(--muted); font: 800 12px/1.5 Arial, sans-serif; letter-spacing: .04em; }
.lang-menu li a:hover, .lang-menu li a:focus-visible { background: #ede8de; color: var(--ink); }
.lang-menu li a[aria-current="page"] { color: var(--red-dark); }
/* Edition menu under the CHOOSE YOUR LANGUAGE title: rounded, with a faint "choose a language" prompt. */
.edition-menu { display: block; width: min(300px, 100%); margin-top: 22px; }
.edition-menu summary { display: flex; justify-content: space-between; width: 100%; padding: 10px 18px; border-radius: 12px; color: var(--muted); font-weight: 600; letter-spacing: .01em; white-space: normal; }
.lang-menu:not([open]) ul { display: none; }
/* Header language menu: 27 languages; the list scrolls inside the menu instead of running off the screen. */
.header-inner .lang-menu ul { max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.edition-menu ul { inset-inline: 0 auto; min-width: 100%; max-height: min(50vh, 360px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; border-radius: 12px; }
.edition-menu li a { white-space: normal; }
.edition-menu li a.current, .edition-menu li a.current .code { color: var(--red-dark); }
.lang-menu li a[aria-current="page"] .code { color: var(--red-dark); }
.lang-menu li a [lang="th"], .lang-menu summary [lang="th"] { font-family: "Noto Sans Thai", Thonburi, Tahoma, sans-serif; }
.lang-menu li a [lang="ko"], .lang-menu summary [lang="ko"] { font-family: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; }

/* Hero: two rows of language cards sliding in language-code order. */
.glyph-marquee { display: grid; gap: 7px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.glyph-row { display: flex; width: max-content; gap: 7px; animation: glyph-slide var(--duration, 36s) linear infinite; }
.glyph-row.reverse { animation-direction: reverse; }
.glyph-marquee:hover .glyph-row, .glyph-marquee:focus-within .glyph-row { animation-play-state: paused; }
.glyph-row .glyph { flex: 0 0 auto; width: clamp(118px, 11.4vw, 158px); }
@keyframes glyph-slide { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 3.5px)); } }
.glyph .character[lang="ar"] { font-family: "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", serif; }
.glyph .character[lang="es"], .glyph .character[lang="fr"], .glyph .character[lang="pt"] { font-family: Georgia, "Times New Roman", serif; }
@media (prefers-reduced-motion: reduce) {
  .glyph-row { animation: none; }
  .glyph-marquee { overflow-x: auto; }
}
@media (max-width: 760px) { .glyph-row .glyph { width: clamp(104px, 28vw, 150px); } }
@media (max-width: 440px) { .glyph-row .glyph { width: 31vw; } }

/* Language edition cards: current page language first and dark; the rest light. */
.lang-card { background: #eeebe5; color: inherit; border-color: #dcd6cb; }
.lang-card.current { background: var(--ink); color: #f8f4eb; border-color: var(--ink); }
.current .lang-index, .current .lang-sub { color: #bab5ac; }
.current .state { color: #e9aaa6; }
.current .lang-desc { color: #d7d3cc; }
.current .lang-action { border-color: #68635b; }
.current a.lang-action:hover { color: #f1aaa6; }
.lang-title[lang="ar"] { font-family: "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", serif; letter-spacing: 0; }
.lang-title[lang="th"] { font-family: "Noto Sans Thai", Thonburi, Tahoma, sans-serif; letter-spacing: 0; }
.lang-title[lang="ko"] { font-family: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; }
.lang-card[hidden] { display: none; }
.more-row { display: flex; justify-content: center; margin-top: 34px; }
.more-languages { min-height: 52px; padding: 13px 26px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font: 760 13px/1.4 var(--sans); cursor: pointer; }
.more-languages:hover { background: #e8e3da; }
.more-languages:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
.header-inner .lang-menu { flex: 0 0 auto; }
@media (max-width: 950px) { .header-inner { flex-wrap: nowrap; } .header-side { display: none; } }
@media (max-width: 440px) { .lang-menu summary { padding: 8px 10px; font-size: 11px; } .lang-menu ul { min-width: 210px; } }

/* ---- Typesetting per page language ------------------------------------------
   Typefaces come from assets/kumihan-fonts.css (tools/web_fonts.py): system fonts
   first, the script's Google Fonts family only when none is installed. */
html:is([lang="es"], [lang="fr"], [lang="pt"], [lang="vi"], [lang="hi"], [lang="sa"], [lang="bn"], [lang="de"], [lang="pl"], [lang="id"], [lang="it"], [lang="ru"], [lang="sw"], [lang="zu"]) body { line-break: auto; }
html:is([lang="en"], [lang="es"], [lang="fr"], [lang="pt"], [lang="de"], [lang="pl"], [lang="id"], [lang="it"], [lang="ru"], [lang="sw"], [lang="zu"]) h1 { line-height: 1.16; letter-spacing: -.045em; }
/* Vietnamese stacks diacritics above and below: more leading, lighter tracking. */
html[lang="vi"] h1 { line-height: 1.32; letter-spacing: -.03em; }
html[lang="vi"] :is(.section-heading h2, .about-section h2) { line-height: 1.38; letter-spacing: -.025em; }
/* Devanagari: no negative tracking, room for matras above and below. */
html:is([lang="hi"], [lang="sa"]) :is(h1, h2, h3, .lang-title, .principle-text) { letter-spacing: 0; }
html:is([lang="hi"], [lang="sa"]) h1 { line-height: 1.5; }
html:is([lang="hi"], [lang="sa"]) :is(.section-heading h2, .about-section h2) { line-height: 1.55; }
/* Bangla: the same, with room for vowel signs and conjuncts (kumihan-bn-web). */
html[lang="bn"] :is(h1, h2, h3, .lang-title, .principle-text) { letter-spacing: 0; }
html[lang="bn"] h1 { line-height: 1.5; }
html[lang="bn"] :is(.section-heading h2, .about-section h2) { line-height: 1.55; }
html[lang="bn"] :is(p, .principle-small, .lang-desc) { line-height: 1.85; }
/* Khmer: no negative tracking, room for subscript consonants and vowel signs. */
html[lang="km"] :is(h1, h2, h3, .lang-title, .principle-text) { letter-spacing: 0; }
html[lang="km"] h1 { line-height: 1.55; }
html[lang="km"] :is(.section-heading h2, .about-section h2) { line-height: 1.6; }
html[lang="km"] :is(p, .principle-small, .lang-desc) { line-height: 1.9; }
html:is([lang="en"], [lang="es"], [lang="fr"], [lang="pt"], [lang="de"], [lang="pl"], [lang="id"], [lang="it"], [lang="ru"], [lang="sw"], [lang="zu"]) :is(.section-heading h2, .about-section h2) { line-height: 1.22; letter-spacing: -.04em; }
html:is([lang="en"], [lang="es"], [lang="fr"], [lang="pt"], [lang="de"], [lang="pl"], [lang="id"], [lang="it"], [lang="ru"], [lang="sw"], [lang="zu"]) .lang-title { letter-spacing: -.03em; }
html:is([lang="es"], [lang="fr"], [lang="pt"], [lang="vi"], [lang="hi"], [lang="sa"], [lang="bn"], [lang="de"], [lang="pl"], [lang="id"], [lang="it"], [lang="ru"], [lang="sw"], [lang="zu"]) :is(h1, h2, h3, .lang-desc, .principle-text) { overflow-wrap: break-word; }
html:is([lang="vi"], [lang="hi"], [lang="sa"], [lang="bn"], [lang="de"], [lang="pl"], [lang="id"], [lang="it"], [lang="ru"], [lang="sw"], [lang="zu"]) :is(.intro-grid, .section-heading) > * { min-width: 0; max-width: 100%; }
/* Arabic (kumihan-ar): Naskh for reading, no letter-spacing on Arabic text,
   generous line height; the decorative specimen strip keeps its own direction. */
html:is([lang="ar"], [lang="fa"]) body { line-break: auto; line-height: 1.95; }
html:is([lang="ar"], [lang="fa"], [lang="he"]) :is(h1, h2, h3, p, .principle-text, .principle-small, .primary-action, .minor-action, .more-languages, .lang-action, .lang-menu summary, .lang-menu li a) { letter-spacing: 0; }
html[lang="ar"] h1 { font-family: var(--serif); font-weight: 700; line-height: 1.6; }
html[lang="ar"] :is(.section-heading h2, .about-section h2) { font-family: var(--serif); font-weight: 700; line-height: 1.6; }
html:is([lang="ar"], [lang="fa"], [lang="he"]) :is(.header-side, .state) { text-align: end; }
html:is([lang="ar"], [lang="fa"], [lang="he"]) .type-art::after { right: auto; left: -25px; }
html:is([lang="ar"], [lang="fa"], [lang="he"]) .glyph-marquee { direction: ltr; }
/* A Latin word inside an Arabic heading (KUMIHAN) may wrap only when it cannot fit at large text sizes. */
html[lang="fa"] h1 { font-weight: 800; line-height: 1.55; }
html[lang="fa"] :is(.section-heading h2, .about-section h2) { font-weight: 800; line-height: 1.6; }
html:is([lang="ar"], [lang="fa"], [lang="he"]) :is(h1, h2, h3) { overflow-wrap: break-word; }
html:is([lang="ar"], [lang="fa"], [lang="he"]) .section-heading > * { min-width: 0; max-width: 100%; }
/* Names of languages, wherever they appear, in their own script's fonts. */
:is(.lang-menu, .lang-title, .glyph) [lang="ja"], .lang-title[lang="ja"] { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif; }
:is(.lang-menu, .lang-title) [lang="zh-Hant-TW"] { font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif; }
:is(.lang-menu, .lang-title) [lang="zh-Hans-CN"] { font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif; }
:is(.lang-menu, .lang-title) [lang="ar"], .lang-title[lang="ar"] { font-family: "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", Tahoma, serif; letter-spacing: 0; }
.lang-menu [lang="ar"] { font-size: 1.08em; }
.lang-title[lang="fa"] { font-family: "Vazirmatn", "Geeza Pro", "Segoe UI", Tahoma, sans-serif; letter-spacing: 0; }
:is(.lang-menu) :is([lang="es"], [lang="fr"], [lang="pt"], [lang="en"]), .lang-title:is([lang="es"], [lang="fr"], [lang="pt"], [lang="de"], [lang="pl"], [lang="id"], [lang="it"], [lang="ru"], [lang="sw"], [lang="zu"], [lang="vi"]) { font-family: "Helvetica Neue", Helvetica, "Segoe UI", Roboto, Arial, sans-serif; }
/* Hindi edition: preserve Indic shaping and normal tracking in the existing card. */
@font-face { font-family: "Kumihan Devanagari"; src: url("fonts/NotoSansDevanagari.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
.glyph .character:is([lang="hi"], [lang="sa"]), .lang-title:is([lang="hi"], [lang="sa"]), .lang-title:is([lang="hi"], [lang="sa"]) + .lang-sub {
  font-family: "Kumihan Devanagari", "Noto Sans Devanagari", sans-serif;
  letter-spacing: normal;
}
.glyph .character[lang="bn"], .lang-title[lang="bn"] {
  font-family: "Kohinoor Bangla", "Nirmala UI", Vrinda, "Noto Sans Bengali", sans-serif;
  letter-spacing: normal;
}
/* Long words (German compounds, Polish inflections) at large text sizes: the approach
   column shrinks with the page and headings wrap a word only when it cannot fit. */
.about-layout > * { min-width: 0; max-width: 100%; }
.about-section h2 { overflow-wrap: break-word; }
/* German (kumihan-satzbild-web): long compounds hyphenate with the browser's German
   dictionary instead of overflowing; no break-all, anywhere or clipping. */
html[lang="de"] :is(h1, h2, h3, p, .lang-action) { hyphens: auto; }