/* ==========================================================================
Japanese typography — Shippori Mincho
--------------------------------------------------------------------------
Loaded AFTER custom.css (lower Grav asset priority) so its font-family and
CJK tuning override the base Latin styles. The Shippori Mincho face itself is
pulled in via the Google Fonts in partials/base.html.twig.
Shippori Mincho is a classic, editorial mincho (serif) — elegant and literary,
a natural match for a French cultural institution and the site's fine-art hero
imagery. It pairs by contrast with the Latin Helvetica sans.
Scope:
- Fixed JA snippets that appear on every page (incl. the FR pages): the
"仙台" wordmark subtitle and the calendar's 年月 line.
- The whole page when the active language is Japanese ().
Weights: Shippori Mincho ships 400–800, so body text uses 400 and "bold" text
(headings, labels, ) uses a genuine 800 (ExtraBold) — no faux-bold.
Legibility also comes from ink + size (see the Readability block).
========================================================================== */
:root {
--font-ja: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho",
"MS Mincho", serif;
}
/* ── Fixed Japanese snippets shown on every page (French pages included) ── */
.logo-subtitle,
.month-nav .month-jp,
.hero-japanese {
font-family: var(--font-ja);
}
/* ── Whole page is Japanese ─────────────────────────────────────────────── */
html[lang="ja"] body {
font-family: var(--font-ja);
/* Regular 400 base — bold elements below step up to 600. */
font-weight: 400;
/* A hair more tracking suits Klee One's open, penned letterforms. */
letter-spacing: 0.01em;
}
/* Only ever use the real 400/800 cuts — never a browser-synthesised weight. */
html[lang="ja"] {
font-synthesis: none;
}
html[lang="ja"] b,
html[lang="ja"] strong,
html[lang="ja"] h1,
html[lang="ja"] h2,
html[lang="ja"] h3,
html[lang="ja"] h4,
html[lang="ja"] .hero-french,
html[lang="ja"] .nav-menu a,
html[lang="ja"] .presentation-text h2,
html[lang="ja"] .instagram-block h2,
html[lang="ja"] .content-section > h2,
html[lang="ja"] .event-card h3,
html[lang="ja"] .event-type-title,
html[lang="ja"] .class-band-title,
html[lang="ja"] .class-panel-title,
html[lang="ja"] .pricing-name,
html[lang="ja"] .contact-text h3,
html[lang="ja"] .form-label label,
html[lang="ja"] form .buttons button {
font-weight: 800;
}
/* ── Prose tuning for Japanese body copy ────────────────────────────────────
The base .prose uses justify + inter-word + auto hyphenation, which is a
French/Latin optimisation and does nothing useful for CJK. Switch to
left-aligned, CJK-aware line breaking with a little extra leading — Japanese
reads more comfortably with looser lines. */
html[lang="ja"] .prose {
line-height: 1.9;
}
html[lang="ja"] .prose p {
text-align: left;
hyphens: manual;
line-break: strict;
word-break: normal;
}
/* ── Readability ─────────────────────────────────────────────────────────────
The FR body copy is grey (#555), which is fine for Latin but leaves Klee One's
fine strokes looking faded in Japanese. On JA pages the main reading blocks
get near-black ink and a slightly larger size; the strokes also render a touch
fuller with standard (non-thinned) smoothing. Small captions/dates keep their
muted greys so the visual hierarchy survives. */
html[lang="ja"] {
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
}
html[lang="ja"] .prose,
html[lang="ja"] .prose p,
html[lang="ja"] .prose li,
html[lang="ja"] .presentation-text p,
html[lang="ja"] .event-types-intro p,
html[lang="ja"] .event-card p {
color: #1a1a1a;
}
html[lang="ja"] .prose,
html[lang="ja"] .presentation-text p,
html[lang="ja"] .event-types-intro p {
font-size: 15px;
}
/* Keep the tiny UI numerals (calendar dates, which are Latin digits) on the
base sans for clarity even on JA pages. */
html[lang="ja"] .calendar-dates,
html[lang="ja"] .calendar-days,
html[lang="ja"] .month-nav .month-en {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}