/* ============================================================
   ja-type.css — 日本語版（/ja/）専用 見出し組版レイヤー
   ------------------------------------------------------------
   Linked ONLY from /ja/*.html, and always as the LAST stylesheet
   in <head> so it wins over each page's inline <style> block.
   The English pages never link this file, so /en/ is untouched.

   Why this exists
   ---------------
   Every headline size on this site was tuned for English: short
   words, ~0.5em average advance width, spaces to break at. Japanese
   has none of that — a kana/kanji glyph is a full em, so the same
   `font-size` produces a line roughly twice as long, and there are
   no spaces, so the browser breaks between any two characters.
   Result: giant headlines that shatter mid-word.

   This file does four things:
     1. A single CJK headline scale with hard `clamp()` ceilings.
     2. Line-height floors (CJK needs more leading than latin).
     3. Kinsoku (禁則処理) via `line-break: strict` so 。、）などが
        行頭に落ちない。
     4. `.ja-phrase` — an opt-in utility that makes a headline break
        only at meaning boundaries.

   Editing note: `!important` is used deliberately throughout. The
   page-level rules this overrides are themselves `!important` in
   several places (index.html), and this sheet is an override layer.
   ============================================================ */

:root {
  /* CJK headline scale. Ceilings are the important part — the
     `vw` term is fine, the missing max was the bug. */
  --ja-display:  clamp(2.6rem, 5.2vw + 0.6rem, 5.5rem);  /*  88px cap — one-word page titles */
  --ja-hero:     clamp(1.9rem, 2.6vw + 0.9rem, 3.5rem);  /*  56px cap — hero sentences        */
  --ja-h1:       clamp(1.75rem, 2.2vw + 0.8rem, 3rem);   /*  48px cap                          */
  --ja-h2:       clamp(1.45rem, 1.6vw + 0.75rem, 2.3rem);/*  37px cap — section headings       */
  --ja-h3:       clamp(1.2rem, 0.9vw + 0.7rem, 1.6rem);  /*  26px cap                          */
  --ja-quote:    clamp(1.2rem, 1.1vw + 0.7rem, 1.85rem); /*  30px cap — pull quotes            */

  /* Leading. Japanese wants noticeably more than the 1.0–1.1 the
     latin headlines shipped with. Larger type → tighter ratio. */
  --ja-lh-display: 1.28;
  --ja-lh-hero:    1.38;
  --ja-lh-head:    1.45;
  --ja-lh-quote:   1.75;
}

/* ------------------------------------------------------------
   1. Global break + leading rules for every headline element
   ------------------------------------------------------------
   `line-break: strict` is the kinsoku switch: it stops 。 、 ） 」
   ・ ー and small kana from being pushed to the start of a line,
   and stops （ 「 from being stranded at the end of one.
   `overflow-wrap: normal` undoes any inherited `anywhere`/
   `break-word`, which is what allows a break *inside* a latin run
   like "(JAXA)".
   ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6,
.hero-headline, .projects-headline, .discover-headline,
.projects-hero-title, .moon-cta-title, .project-card-title,
.gd2-hero-title, .approach-title, .detail-block-title,
.ai-hero-headline, .careers-hero-headline, .hero-slide-headline,
.mindset-hero-headline, .chapter-title, .principle-title,
.cs-headline, .contact-hero-headline, .inquiry-headline,
.locations-headline, .quote-text, .quote-body,
.project-meta-title, .project-meta-deck,
.svc-box-title, .svc-sub-title, .wwd-title {
  /* Leading floor for every heading. The latin side shipped 1.0–1.2,
     which makes two-line Japanese lines touch. Anything that needs a
     different value gets it from the per-page rules further down —
     those come later in the file and so win the specificity tie. */
  line-height: 1.45 !important;
  line-break: strict !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  /* Positive tracking. Every headline on the latin side carries
     -0.01em to -0.025em, which visually collides CJK glyphs. */
  letter-spacing: 0.01em !important;
  /* Even out ragged multi-line headlines where supported. */
  text-wrap: balance;
}

/* No italics anywhere on /ja/ — see docs/ja/fonts.md. Each page
   already has a no-jp-italics block, but it matches by class name
   ([class*="title"], [class*="headline"]) and so misses .quote-text,
   .quote-body, .project-meta-deck, .who-support and friends, which
   were still being synthesised into obliques. */
body :where(*) { font-style: normal !important; }

/* Body copy keeps kinsoku too, but not the balance/tracking. */
p, li, dd, dt, .meta-list-item, .faq-a-inner {
  line-break: strict;
  overflow-wrap: normal;
}

/* ------------------------------------------------------------
   2. `.ja-phrase` — meaning-aware line breaking
   ------------------------------------------------------------
   Wrap each clause of a headline in <span class="ja-phrase"> and
   separate the clauses with <wbr>:

   <h1>
     <span class="ja-phrase">まだ存在しない世界を、</span><wbr
     ><span class="ja-phrase">つくる。</span>
   </h1>

   `word-break: keep-all` switches off the default "break between
   any two CJK characters" behaviour, so nothing inside a clause can
   be split. `<wbr>` then reintroduces a break opportunity at each
   clause boundary — and only there. The result: the headline breaks
   where a Japanese reader would break it, or not at all.

   Note the `><` line-wrapping in the markup above: real whitespace
   between the tags would render as a visible space inside Japanese
   text, so the tags must stay butted together.

   `overflow-wrap: break-word` is the safety valve. `keep-all` alone
   would let a clause that is wider than its container overflow the
   page; this lets an over-long clause break internally as a last
   resort rather than push the layout sideways.

   (An earlier version used butted `display: inline-block` spans.
   That is a common suggestion, but adjacent atomic inlines with no
   intervening text give the line-breaker nothing to break on, so
   long headlines simply overflowed. Do not go back to it.)
   ------------------------------------------------------------ */
.ja-phrase {
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

/* A run that must never break at all — proper nouns, 「JAXA」, etc. */
.ja-nobr {
  display: inline-block;
  white-space: nowrap;
}

/* `.ja-oneline` — headlines the brief requires on a single line
   (L-1 homepage hero, L-2 graphics title). Held to one line from
   the tablet breakpoint up; below that the `.ja-phrase` clauses are
   allowed to stack, because a forced single line would otherwise
   overflow a 390px screen. */
@media (min-width: 861px) {
  /* `white-space: nowrap` alone is not enough — Chrome still honours a
     `<wbr>` inside a nowrap box. Taking the element out of the flow
     removes the break opportunity itself. */
  .ja-oneline wbr { display: none; }
  .ja-oneline { white-space: nowrap !important; }
}

/* ------------------------------------------------------------
   3. Per-page headline sizing
   ------------------------------------------------------------ */

/* --- index.html ------------------------------------------- */
.hero-headline {
  font-size: var(--ja-hero) !important;
  line-height: var(--ja-lh-hero) !important;
}
.projects-headline {
  font-size: var(--ja-h2) !important;
  line-height: var(--ja-lh-head) !important;
}
.discover-headline {
  font-size: var(--ja-h3) !important;
  line-height: var(--ja-lh-head) !important;
}

/* --- moongate-projects.html -------------------------------- */
/* Was clamp(5.2rem, 17vw + 1.3rem, 20.8rem) — 333px for a
   six-character word. This is the single worst offender. */
.projects-hero-title {
  font-size: var(--ja-display) !important;
  line-height: var(--ja-lh-display) !important;
}
.moon-cta-title {
  font-size: var(--ja-h1) !important;
  line-height: var(--ja-lh-hero) !important;
}
.project-card-title {
  font-size: clamp(1.3rem, 1.4vw + 0.6rem, 2rem) !important;
  line-height: var(--ja-lh-head) !important;
}

/* --- moongate-graphics.html -------------------------------- */
.gd2-hero-title {
  font-size: var(--ja-hero) !important;
  line-height: var(--ja-lh-hero) !important;
}
.approach-header h2 { font-size: var(--ja-h2) !important; line-height: var(--ja-lh-head) !important; }
/* Carousel cards are ~112px of content width. At 18px a seven-glyph
   label wrapped mid-word (グリッ / ドと構成). 15px plus keep-all holds
   every label on one line. */
.gd2-ql-card-title {
  font-size: 15px !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
}
.approach-title { font-size: var(--ja-h3) !important; line-height: var(--ja-lh-head) !important; }
.detail-block-title { font-size: var(--ja-h3) !important; line-height: var(--ja-lh-head) !important; }
/* Was clamp(4rem, 10vw + 1rem, 13rem) / 0.92 — 208px, three stacked
   lines that overran the viewport and touched each other. */
.purpose-line {
  font-size: var(--ja-display) !important;
  line-height: var(--ja-lh-display) !important;
  letter-spacing: 0.01em !important;
  line-break: strict !important;
  overflow-wrap: normal !important;
}

/* --- moongate-ai.html -------------------------------------- */
/* Was up to 7rem (112px) inside an 820px column: ~7 glyphs a line
   on desktop, 1–2 on mobile. */
.ai-hero-headline {
  font-size: var(--ja-hero) !important;
  line-height: var(--ja-lh-hero) !important;
}
.ai-closing h2,
.ai-framing-left h2 {
  font-size: var(--ja-h2) !important;
  line-height: var(--ja-lh-head) !important;
}

/* --- moongate-careers.html --------------------------------- */
.careers-hero-headline {
  font-size: var(--ja-hero) !important;
  line-height: var(--ja-lh-hero) !important;
}
.careers-intro-left h2,
.careers-roles-header h2,
.careers-cta h2 {
  font-size: var(--ja-h2) !important;
  line-height: var(--ja-lh-head) !important;
}

/* --- moongate-consulting.html ------------------------------ */
.hero-slide-headline {
  font-size: var(--ja-hero) !important;
  line-height: var(--ja-lh-hero) !important;
}
.wwd-title,
.who-left h2,
.when-right h3 {
  font-size: var(--ja-h2) !important;
  line-height: var(--ja-lh-head) !important;
}
.quote-text {
  font-size: var(--ja-quote) !important;
  line-height: var(--ja-lh-quote) !important;
}

/* --- moongate-about.html / moongate-mindset.html ----------- */
.mindset-hero-headline {
  font-size: var(--ja-hero) !important;
  line-height: var(--ja-lh-hero) !important;
}
.chapter-title {
  font-size: var(--ja-h2) !important;
  line-height: var(--ja-lh-head) !important;
}
.principle-title {
  font-size: var(--ja-h3) !important;
  line-height: var(--ja-lh-head) !important;
}
/* Pull quote — the worst of the leading problems (lines touching). */
.pull-quote p {
  font-size: var(--ja-quote) !important;
  line-height: var(--ja-lh-quote) !important;
  line-break: strict !important;
  overflow-wrap: normal !important;
  letter-spacing: 0.01em !important;
}

/* --- moongate-design.html ---------------------------------- */
.cs-headline {
  font-size: var(--ja-h2) !important;
  line-height: var(--ja-lh-head) !important;
}
.brand-spacer-title { line-height: var(--ja-lh-hero) !important; }

/* --- moongate-contact.html --------------------------------- */
.contact-hero-headline {
  font-size: var(--ja-hero) !important;
  line-height: var(--ja-lh-hero) !important;
}
.inquiry-headline {
  font-size: var(--ja-h2) !important;
  line-height: var(--ja-lh-head) !important;
}
.locations-headline { line-height: var(--ja-lh-head) !important; }
.locations-headline-main { font-size: var(--ja-h3) !important; }
.locations-headline-line { font-size: var(--ja-h3) !important; }

/* --- project-*.html (16 case studies) ---------------------- */
/* `.project-meta` is only clamp(400px, 42vw, 620px) wide, and the
   title was allowed up to 5.5rem (88px). "ホテルニューアワジグループ"
   is 13 glyphs = 1144px of text in a ~400px column → three lines
   of four characters. Shared with /en/ via Assets/project.css, so
   it can only be corrected here. */
.project-meta-title {
  font-size: clamp(1.7rem, 1.9vw + 0.8rem, 2.6rem) !important;
  line-height: var(--ja-lh-hero) !important;
}
.project-meta-deck {
  line-height: var(--ja-lh-head) !important;
  /* The page-level no-jp-italics rule matches [class*="title"] and
     [class*="headline"], which this class is neither — so it was
     still being synthesised into an oblique. */
  font-style: normal !important;
}

/* ------------------------------------------------------------
   4. Consulting accordion (L-3)
   ------------------------------------------------------------ */

/* The collapsed tab label used `writing-mode: vertical-rl` *plus*
   `rotate(180deg)`. The rotation is a latin idiom — it turns the
   vertical column upside-down so English reads bottom-to-top.
   Applied to Japanese it produces inverted glyphs, and because the
   column now grows upward, `align-items: flex-start` aligns the
   *bottoms*, which is the uneven-start bug. Dropping the rotation
   fixes both at once: vertical-rl alone is already correct
   top-to-bottom Japanese. */
.svc-box:not(.active) .svc-box-title {
  transform: none !important;
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  letter-spacing: 0.06em !important;   /* vertical CJK wants air */
}
/* `.svc-box-title` is itself a flex container, so its text must stay
   a single anonymous item — do not wrap parts of it in spans. Latin
   runs ("IP") therefore render sideways, which is standard vertical
   Japanese setting for two-letter acronyms. */

/* Number labels inside the open panel sat at different heights: the
   square `aspect-ratio` card overflows once a Japanese title wraps
   to three lines, which collapses the `margin-bottom: auto` that
   was holding 01–04 at the top. Give the card room instead. */
.svc-sub-card {
  aspect-ratio: auto !important;
  min-height: 200px !important;
}
.svc-sub-num {
  margin-bottom: 14px !important;
}
.svc-sub-title {
  margin-top: auto !important;
  font-size: clamp(1rem, 0.5vw + 0.75rem, 1.2rem) !important;
  line-height: var(--ja-lh-head) !important;
}

/* ------------------------------------------------------------
   5. Careers intro two-column (L-4)
   ------------------------------------------------------------
   `.careers-intro-right` is styled but was never in the markup, so
   the section rendered as one 480px text column against an empty
   half-viewport. Made a real two-column layout: heading left,
   body right. No new imagery required.
   ------------------------------------------------------------ */
/* `.careers-intro-body` is new markup, so it needs the paragraph
   treatment `.careers-intro-left p` used to supply. */
.careers-intro-body p {
  font-family: var(--sans);
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 300;
  color: var(--charcoal);
  line-height: 1.9;
  margin-bottom: 20px;
  max-width: 640px;
}
.careers-intro-body p:last-child { margin-bottom: 0; }
.careers-intro-left h2 { margin-bottom: 0 !important; }

@media (min-width: 861px) {
  .careers-intro {
    display: grid;
    grid-template-columns: minmax(260px, 0.8fr) 1.2fr;
    gap: clamp(48px, 6vw, 104px);
    align-items: start;
  }
  .careers-intro-left { grid-column: 1; }
  .careers-intro-body { grid-column: 2; }
}
@media (max-width: 860px) {
  .careers-intro-body { margin-top: 28px; }
  .careers-intro-body p { max-width: 100%; }
}

/* ------------------------------------------------------------
   6. Mobile
   ------------------------------------------------------------
   Several pages re-raise headline sizes inside their own
   max-width queries (e.g. .projects-hero-title →
   clamp(3.5rem, 18vw, 5.5rem) = 88px on a 390px screen, i.e. four
   glyphs per line). Re-cap them here.
   ------------------------------------------------------------ */
@media (max-width: 860px) {
  :root {
    --ja-display: clamp(2.2rem, 11vw, 3.4rem);
    --ja-hero:    clamp(1.6rem, 6.4vw, 2.3rem);
    --ja-h1:      clamp(1.5rem, 5.8vw, 2.1rem);
    --ja-h2:      clamp(1.3rem, 5vw, 1.75rem);
    --ja-h3:      clamp(1.1rem, 4.2vw, 1.4rem);
    --ja-quote:   clamp(1.1rem, 4.4vw, 1.5rem);
    --ja-lh-hero: 1.45;
  }
  .projects-hero-title { font-size: var(--ja-display) !important; }
  .moon-cta-title      { font-size: var(--ja-h1) !important; }
  .project-card-title  { font-size: var(--ja-h3) !important; }
  .quote-text          { font-size: var(--ja-quote) !important; }
  .project-meta-title  { font-size: clamp(1.5rem, 6vw, 2.1rem) !important; }
  /* `.ja-phrase` clauses may not fit a phone line box; let the
     longest ones break internally rather than push the page wide. */
  .ja-phrase { max-width: 100%; }
}

/* AI process timeline. Below 768px `.process-step` becomes a
   `56px 1fr` grid holding four children, so auto-placement drops the
   step title back into the 56px column — 「課題を / 定義 / する」.
   Let the title and description span the full row. */
@media (max-width: 768px) {
  .process-step-title,
  .process-step-desc { grid-column: 1 / -1; }
}
