/* ============================================================
   en.css — English-locale layout overrides (Issue #205)

   WHAT THIS IS: the only stylesheet the English routes load in addition
   to main.css. Every EN page now uses the SAME page-specific component
   families as its Japanese counterpart (.hero, .profile, .engagement,
   .jl-*, .evidence/.theme-card/.case-item, .case-detail, .thinking__*,
   .contact) — main.css stays the single source of those components.

   WHAT THIS IS NOT: a second design system, and not a place for new
   components. Every rule below is scoped to html[lang="en"] and is
   limited to what English copy actually needs against a layout tuned
   for Japanese: writing direction in the Hero, reading measure,
   line-height / letter-spacing, wrapping, and the EN-only
   language-link treatment. Nothing here changes the Japanese site.

   The generic .en-page / .en-home-hero rules that used to carry EN page
   layout are deliberately left defined-but-unused in main.css (Issue
   #205 retires their layout duty without touching the shared file).
   ============================================================ */

/* ---- Shared reading measure ----------------------------------------
   main.css derives --prose (52rem) from Japanese line-breaking, where a
   character carries far more meaning per em. At that width English runs
   past a comfortable measure, so the EN routes narrow the same variable
   rather than re-declaring max-width on each component. */
html[lang="en"]{ --prose:44rem; }

/* Latin text has real word boundaries, so long unbroken tokens (URLs,
   hyphenated compounds) are the only overflow risk left once the JA
   .nowrap-jp spans are gone. */
html[lang="en"] main{ overflow-wrap:break-word; }

/* =========================================================
   1. Hero (index.html)

   The EN Hero reuses the JA .hero DOM verbatim — same boundary dots,
   same 1px boundary line, same scroll cue, same reveal sequence, same
   .band emphasis on the human clause. The one thing English cannot
   inherit is writing-mode:vertical-rl, so .hero__vertical becomes a
   stacked pair of horizontal clauses in the same centered composition
   and the same top-to-bottom reading order (AI clause, then the
   black-band human clause).
   ========================================================= */
html[lang="en"] .hero__vertical{
  flex-direction:column;
  align-items:center;
  gap:.45em;
}
html[lang="en"] .hero__vtext{
  writing-mode:horizontal-tb;
  text-orientation:mixed;
  font-size:clamp(1.35rem,4.4vw,2.15rem);
  line-height:1.3;
  letter-spacing:.005em;
  max-width:20ch;
  text-align:center;
  text-wrap:balance;
}
/* .hero__vtext .band's JA padding is tuned for vertical writing
   (.36em block / .15em inline). Swap the axes back for horizontal text
   so the band hugs the clause the same way it does in JA. */
html[lang="en"] .hero__vtext .band{ padding:.1em .32em .16em; }

html[lang="en"] .hero__close{
  letter-spacing:.01em;
  margin-top:.9rem;
}
html[lang="en"] .hero__sub{
  max-width:46ch;
  margin-inline:auto;
  letter-spacing:.005em;
  line-height:1.55;
}
html[lang="en"] .hero__sub-close{ letter-spacing:.02em; }

/* =========================================================
   2. Long-form prose

   main.css sets line-height:2 / letter-spacing:.02em-.04em on the body
   copy of the reading pages. Those values are calibrated for CJK glyph
   density; the same settings make English body text read as gapped and
   tracked-out. Tighten only the leading and tracking — measure, rhythm,
   margins, bands and dividers all stay exactly as main.css defines them.
   ========================================================= */
html[lang="en"] .engagement__inner p:not(.band),
html[lang="en"] .conduct__body,
html[lang="en"] #judgment-lineage p,
html[lang="en"] .case-item__body p,
html[lang="en"] .case-detail__body p,
html[lang="en"] .thinking__section > p,
html[lang="en"] .profile__text,
html[lang="en"] .profile__career-desc,
html[lang="en"] .profile__support,
html[lang="en"] .profile__closing-text,
html[lang="en"] .who__body,
html[lang="en"] .challenges__item,
html[lang="en"] .proof__row-desc{
  line-height:1.8;
  letter-spacing:0;
}

html[lang="en"] .theme-card__body,
html[lang="en"] .summary__lead,
html[lang="en"] .speaking__lead,
html[lang="en"] .qorum__body,
html[lang="en"] .principle__text{
  line-height:1.8;
  letter-spacing:0;
}

/* Display lines: keep the JA type scale, drop the CJK tracking and let
   the browser balance the ragged edge English produces. */
html[lang="en"] .engagement__title,
html[lang="en"] .engagement__inner p.engagement__headline,
html[lang="en"] .engagement__h3,
html[lang="en"] .evidence__title,
html[lang="en"] .evidence__subheading,
html[lang="en"] .theme-card__assertion,
html[lang="en"] .case-detail__lead,
html[lang="en"] #judgment-lineage .jl-eyebrow,
html[lang="en"] #judgment-lineage .jl-stage-title,
html[lang="en"] #judgment-lineage .jl-close-heading,
html[lang="en"] .thinking__eyebrow,
html[lang="en"] .thinking__heading,
html[lang="en"] .thinking__thesis,
html[lang="en"] .contact__heading,
html[lang="en"] .profile__name{
  letter-spacing:.01em;
  text-wrap:balance;
}

/* =========================================================
   3. Per-page wrapping fixes
   ========================================================= */

/* Engagement: the three-option comparison map needs room for English
   labels ("Executive hire") that are two to three times the width of
   their JA equivalents. */
html[lang="en"] .engagement-map__option{ min-width:10em; }
html[lang="en"] .engagement-map__label{ letter-spacing:.06em; }

/* Judgment Lineage: the intro/close band lines are set as one .band per
   row. English rows are longer than JA ones, so allow them to wrap
   inside their own band instead of forcing a single line. */
html[lang="en"] #judgment-lineage .jl-band-line{ line-height:1.45; }
html[lang="en"] #judgment-lineage .jl-band-row + .jl-band-row{ margin-top:.5em; }

/* Evidence: the case summaries carry a title and a pull-quote side by
   side; English titles are longer, so the quote needs its own leading. */
html[lang="en"] .case-item__title,
html[lang="en"] .case-item__quote{ letter-spacing:0; line-height:1.55; }
/* main.css wraps .case-item__quote in Japanese corner brackets. Swap the
   glyph — not the component — for the English quotation marks the same
   mark means in this locale. Content only; the JA rule is untouched. */
html[lang="en"] .case-item__quote::before{ content:"\201C"; }
html[lang="en"] .case-item__quote::after{ content:"\201D"; }

/* Thinking: the channel table's JA colgroup (15/45/40) leaves the first
   column too narrow for English channel names. */
html[lang="en"] .thinking__table td,
html[lang="en"] .thinking__table th{ letter-spacing:0; line-height:1.7; }
/* main.css pins the first column to white-space:nowrap, which is safe for
   the short JA channel labels but lets English values such as
   "note / serial writing" paint straight across the cell boundary into
   the Role column at narrow widths. Let that column wrap and keep the
   2rem gutter main.css already reserves to its right. */
html[lang="en"] .thinking__table th:first-child,
html[lang="en"] .thinking__table td:first-child{
  white-space:normal;
  overflow-wrap:break-word;
  padding-right:2rem;
}

/* Contact: the lede and the closing line are .band spans. English needs
   normal leading inside them so the black band does not read as a solid
   block of tightly stacked rows. */
html[lang="en"] .contact__lede,
html[lang="en"] .contact__closing{ letter-spacing:.01em; }
html[lang="en"] .contact__list-text{ letter-spacing:0; }

/* Profile / Privacy: dt/dd pairs and career periods are sized for
   Japanese labels. */
html[lang="en"] .profile__expertise dt,
html[lang="en"] .profile__career-period,
html[lang="en"] .profile__career-company{ letter-spacing:.01em; }
html[lang="en"] .profile__statement{ letter-spacing:.01em; text-wrap:pretty; }

/* =========================================================
   4. Language link (Issue #205)

   The EN routes carry no language selector in the primary navigation.
   What remains is a single, low-emphasis link back to the Japanese site
   in the mobile menu and in the footer. main.css's .lang-switch sizing
   and 44x44 tap targets are reused as-is; only the emphasis changes.
   The JA pages keep the full JA / EN switch and are untouched.
   ========================================================= */
html[lang="en"] .lang-switch--mobile .lang-switch__link,
html[lang="en"] .lang-switch--footer .lang-switch__link{
  opacity:.58;
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
html[lang="en"] .lang-switch--mobile .lang-switch__link:hover,
html[lang="en"] .lang-switch--footer .lang-switch__link:hover{ opacity:1; }