/* RenaSci question network — English pages (network/en/). Loaded after net.css / read.css / themes.css.
   Latin-first font stacks, reading rhythm for English, and English versions of the decorative labels. */

/* ---------- fonts: Latin first, CJK only as a fallback ---------- */
html[lang="en"] {
  --f-sans: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-serif: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
}
html[lang="en"][data-style="scroll"] { --f-sans: "EB Garamond", "Source Serif 4", Georgia, serif; --f-serif: "EB Garamond", "Source Serif 4", Georgia, serif; }
html[lang="en"][data-style="collage"] { --f-sans: "Archivo", Arial, sans-serif; --f-serif: "Source Serif 4", Georgia, serif; }
html[lang="en"][data-style="cyber"] { --f-sans: "Archivo", Arial, sans-serif; --f-serif: "Archivo", Arial, sans-serif; }
html[lang="en"][data-style="pixel"] { --f-sans: "Archivo", Arial, sans-serif; --f-serif: "Archivo", Arial, sans-serif; }
html[lang="en"][data-style="lab"] { --f-sans: "IBM Plex Sans", Arial, sans-serif; --f-serif: "IBM Plex Sans", Arial, sans-serif; }
html[lang="en"][data-style="fractal"] { --f-sans: "Archivo", Arial, sans-serif; --f-serif: "Fraunces", "Source Serif 4", Georgia, serif; }
html[lang="en"][data-style="line"] { --f-sans: "Archivo", Arial, sans-serif; --f-serif: "Source Serif 4", Georgia, serif; }

/* ---------- reading rhythm ---------- */
html[lang="en"] body { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
html[lang="en"] .card p { line-height: 1.62; letter-spacing: 0; }
html[lang="en"] .rdoc p, html[lang="en"] .lede p { line-height: 1.68; letter-spacing: 0; text-wrap: pretty; }
html[lang="en"] .card h2, html[lang="en"] .sec h2, html[lang="en"] .deeper h2 { letter-spacing: -.01em; text-wrap: balance; hyphens: manual; }
html[lang="en"] .card .card__q, html[lang="en"] .hero__q, html[lang="en"] .cover__q, html[lang="en"] .more__q { letter-spacing: 0; text-wrap: pretty; }
html[lang="en"] .qa__q { letter-spacing: 0; }
html[lang="en"] .hero__toc a, html[lang="en"] .toc2 a, html[lang="en"] .rtoc a { hyphens: manual; }
html[lang="en"] .refs p { hyphens: manual; overflow-wrap: anywhere; }
html[lang="en"] em { font-style: italic; }

/* ---------- titles: English titles are much longer than Chinese ones ---------- */
html[lang="en"] .hero h1 { font-size: clamp(40px, 6.2vw, 104px); line-height: 1; hyphens: manual; }
html[lang="en"] .cover h1 { font-size: clamp(36px, 5vw, 80px); line-height: 1.02; hyphens: manual; }
html[lang="en"] .map__intro h1 { font-size: clamp(40px, 5.6vw, 92px); line-height: 1; }
html[lang="en"] .hero__sub, html[lang="en"] .cover__sub { text-wrap: balance; }
html[lang="en"][data-style="pixel"] .hero h1 { font-size: clamp(28px, 4vw, 64px); line-height: 1.15; }
html[lang="en"][data-style="pixel"] .cover h1 { font-size: clamp(26px, 3.4vw, 52px); line-height: 1.2; }
html[lang="en"][data-style="cyber"] .hero h1, html[lang="en"][data-style="cyber"] .cover h1 { letter-spacing: .01em; }
html[lang="en"][data-style="collage"] .hero h1 { font-size: clamp(40px, 6vw, 100px); }
@media (max-width: 620px) {
  html[lang="en"] .hero h1 { font-size: clamp(34px, 10vw, 54px); }
  html[lang="en"] .cover h1 { font-size: clamp(32px, 9vw, 48px); }
  html[lang="en"][data-style="pixel"] .hero h1, html[lang="en"][data-style="pixel"] .cover h1 { font-size: clamp(22px, 6.4vw, 32px); }
}

/* ---------- per-theme typefaces that only exist for Chinese ---------- */
html[lang="en"][data-style="scroll"] .hero h1, html[lang="en"][data-style="scroll"] .cover h1,
html[lang="en"][data-style="scroll"] [data-variant="letter"] .card h2 { font-family: "EB Garamond", Georgia, serif; font-weight: 500; letter-spacing: 0; font-style: italic; }
html[lang="en"][data-style="scroll"] .card .card__q::before { content: "Q."; font-family: "EB Garamond", Georgia, serif; font-style: italic; }
html[lang="en"][data-style="scroll"] [data-variant="papyrus"] .card__idx em::after { content: " · papyrus"; }
html[lang="en"][data-style="scroll"] [data-variant="journal"] .card::before { content: "PHILOSOPHICAL · TRANSACTIONS · JOURNAL DES SÇAVANS"; }
html[lang="en"][data-style="collage"] .card h2, html[lang="en"][data-style="collage"] [data-variant="news"] .card h2 { font-family: "Anton", "Archivo", sans-serif; font-weight: 400; letter-spacing: .01em; }
html[lang="en"][data-style="collage"] [data-variant="news"] .card__idx em::after { content: " · EXTRA!"; }

/* ---------- decorative labels ---------- */
html[lang="en"][data-style="cyber"] .card .qs__h::before { content: "● LIVE CHAT · AUDIENCE QUESTIONS"; }
html[lang="en"][data-style="pixel"] .card .qs__h::after { content: " · WHAT WILL YOU ASK?"; }
html[lang="en"][data-style="lab"] .hero__hint::after { content: "  FIG. 0 — adjacency matrix of the question network: rows ask, columns answer."; }
html[lang="en"][data-style="line"] .hero h1::before { content: "WORK ORDER"; }
html[lang="en"][data-style="line"] .card__idx em::before { content: "STEP: "; }
html[lang="en"][data-style="line"] .card .card__q::before { content: "QUERY"; }
html[lang="en"][data-style="line"] .card .qs__h::after { content: " · TO FORWARD (TICK TO SEND)"; }
html[lang="en"][data-style="line"] .qa__to::before { content: "FORWARD → "; }

/* ---------- language switch ---------- */
.langsw[lang="zh-CN"] { font-family: "Noto Sans SC", var(--f-sans); }

/* ---------- alignment: no justification in English (it leaves rivers) ---------- */
html[lang="en"] .card p, html[lang="en"] .sec p, html[lang="en"] .lede p, html[lang="en"] .more__lede, html[lang="en"] .deeper__lede, html[lang="en"] .about__txt p { text-align: left; text-justify: auto; }
html[lang="en"] .more__lede, html[lang="en"] .deeper__lede { line-height: 1.68; }
html[lang="en"] .lede p { font-weight: 500; line-height: 1.6; }
html[lang="en"] .sec p { line-height: 1.7; }
html[lang="en"] .map__sub { font-weight: 500; line-height: 1.6; }
html[lang="en"] .map h1 { white-space: normal; font-size: clamp(40px, 4.6vw, 72px); line-height: 1; }
html[lang="en"] .about__txt p { line-height: 1.7; }
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3 { overflow-wrap: normal; word-break: normal; }
html[lang="en"] .map h1 { font-size: clamp(36px, 3.7vw, 58px); }
html[lang="en"][data-style="line"] .stamp { top: 12px; right: auto; left: 40%; font-size: 17px; }
@media (max-width: 760px) { html[lang="en"][data-style="line"] .stamp { left: auto; top: auto; } }
@media (max-width: 620px) {
  html[lang="en"] .nbar__nav a, html[lang="en"] .rbar__nav a { padding: 0 6px; letter-spacing: 0; font-size: 9.5px; }
  html[lang="en"] .nbar__brand, html[lang="en"] .rbar__brand { padding-right: 8px; }
}