/* Zephyra English mirror typography and language-specific refinements · 2026-09-14 */
html[lang="en"] body{font-family:Georgia,"Times New Roman",Arial,sans-serif}
html[lang="en"] .prod-global-brand,
html[lang="en"] .sound-top-brand,
html[lang="en"] .brand,
html[lang="en"] .rf-brand,
html[lang="en"] .about2-brand,
html[lang="en"] .ze-site-footer-name{font-family:Georgia,"Times New Roman","Noto Serif SC",serif}
html[lang="en"] p,
html[lang="en"] .article-body p,
html[lang="en"] .scene-original p,
html[lang="en"] .scene-ai p,
html[lang="en"] .note-summary{hyphens:auto;overflow-wrap:anywhere}
html[lang="en"] .research-hero h1,
html[lang="en"] .notes-hero h1,
html[lang="en"] .article-hero h1{letter-spacing:-.025em}
html[lang="en"] .prod-global-nav,
html[lang="en"] .prod-global-actions,
html[lang="en"] .research-section-nav{letter-spacing:.08em}


/* =========================================================
   ENGLISH TYPOGRAPHY SYSTEM · 2026-09-14
   English has longer word groups than Chinese. Display sizes are deliberately
   reduced and line lengths widened so titles keep editorial rhythm instead of
   breaking into three or four oversized lines.
   ========================================================= */
html[lang="en"]{--en-display-tight:-.035em}
html[lang="en"] .site-lang-switch{order:99!important}

/* Opening / Crossing */
html[lang="en"] .cover-title{
  font-size:clamp(44px,7.2vw,88px);
  letter-spacing:.035em;
}
html[lang="en"] .cover-text{
  width:min(92%,640px);
  font-size:12.2px;
  line-height:1.82;
}

/* Golden arrival page: keep the complete English copy visible */
html[lang="en"] .arrival-copy{
  width:min(45%,510px);
  left:6.5%;
}
html[lang="en"] .arrival-copy h1{
  font-size:clamp(24px,2.55vw,35px);
  line-height:1.32;
  letter-spacing:-.025em;
  margin-bottom:13px;
}
html[lang="en"] .arrival-copy p{
  font-size:10.8px;
  line-height:1.72;
  margin-bottom:8px;
  max-width:100%;
  word-break:normal;
  overflow-wrap:normal;
  hyphens:none;
}
html[lang="en"] .arrival-copy-break{display:block}
html[lang="en"] .arrival-eyebrow{font-size:8px;letter-spacing:.14em;margin-bottom:14px}
html[lang="en"] .arrival-rule{margin:14px 0 14px}

/* Five homepage chapters */
html[lang="en"] .act-copy{max-width:520px}
html[lang="en"] .act h2{
  font-size:clamp(26px,2.65vw,39px);
  line-height:1.17;
  letter-spacing:-.025em;
  margin-bottom:20px;
}
html[lang="en"] .act-copy p{font-size:13px;line-height:1.8;margin-bottom:11px}
html[lang="en"] .act-copy .act-lead{font-size:13px;line-height:1.8}
html[lang="en"] .being-lines p{font-size:13px;line-height:1.8}
html[lang="en"] .act-meta{letter-spacing:.13em}

/* Sound section / opera displays */
html[lang="en"] .sound-hero h1{
  font-size:clamp(32px,3.9vw,56px);
  line-height:1.01;
  letter-spacing:-.035em;
}
html[lang="en"] .sound-hero h1 em{margin-left:10%}
html[lang="en"] .opera-hero h1,
html[lang="en"] .opera-works-head h1{
  font-size:clamp(34px,4.2vw,62px);
  line-height:.98;
  letter-spacing:-.045em;
}

/* Being Path pages: two-line hierarchy instead of oversized multi-line wrapping */
html[lang="en"] .page .hero h1{
  font-size:clamp(31px,4vw,54px);
  line-height:1.02;
  letter-spacing:-.04em;
}
html[lang="en"] .page .hero h1 .way-title-second{
  font-size:.68em;
  line-height:1.08;
  white-space:nowrap;
}
html[lang="en"] .notes-head h2{
  font-size:clamp(34px,4.2vw,58px);
  line-height:.98;
}
html[lang="en"] .empty-title{
  font-size:clamp(30px,3.6vw,48px);
  line-height:1.14;
}

/* Research: English display titles are smaller and wider */
html[lang="en"] .research-hero h1{
  font-size:clamp(34px,4vw,54px);
  line-height:1.04;
  letter-spacing:-.035em;
}
html[lang="en"] .research-hero h1 span{white-space:normal}
html[lang="en"] .research-hero h1 span+span{margin-left:.30em;font-size:.82em}
html[lang="en"] .notes-hero h1{
  font-size:clamp(33px,3.9vw,52px);
  line-height:1.04;
}
html[lang="en"] .notes-hero h1 span{white-space:normal}
html[lang="en"] .article-hero h1{
  font-size:clamp(27px,3vw,42px);
  line-height:1.26;
  letter-spacing:-.03em;
}
html[lang="en"] .note-copy h2{font-size:clamp(17px,1.45vw,22px);line-height:1.42}
html[lang="en"] .article-body h2{font-size:clamp(19px,1.7vw,24px);line-height:1.42}

/* About / Field / Contact */
html[lang="en"] .about2-hero h1,
html[lang="en"] #aboutChapter .about2-hero h1{
  font-size:clamp(34px,4.2vw,60px);
  line-height:.98;
}
html[lang="en"] .rf-sub-hero h1,
html[lang="en"] #fieldChapter .rf-sub-hero h1{
  font-size:clamp(29px,3.4vw,48px);
  line-height:1.05;
}
html[lang="en"] .prod-contact-card h1{
  font-size:clamp(28px,3.2vw,44px);
  line-height:1.08;
}

/* Top navigation in English: compact enough to remain one line on desktop */
html[lang="en"] .prod-global-nav,
html[lang="en"] .prod-global-actions,
html[lang="en"] .research-section-nav,
html[lang="en"] .sound-top-actions,
html[lang="en"] .rf-top-actions,
html[lang="en"] .about2-top-actions,
html[lang="en"] .nav,
html[lang="en"] .tools{
  font-size:9px!important;
  letter-spacing:.065em!important;
}


/* EN inner-page title scale v2 — intentionally more restrained than Chinese */
html[lang="en"] .page .hero h1{max-width:9.5em}
html[lang="en"] .page .hero h1 .being-title-accent{margin-left:.72em}
html[lang="en"] .page .hero h1 .way-title-second{font-size:.60em;line-height:1.12;white-space:normal}
html[lang="en"] .page .hero h1 .tao-title-accent{margin-left:.66em}
html[lang="en"] .note-reader-article h1{font-size:clamp(25px,2.8vw,38px)!important;line-height:1.34!important}
html[lang="en"] .note-reader-deck{font-size:14px}
html[lang="en"] .sound-hero h1 em{margin-left:7%}
html[lang="en"] .opera-hero h1 em{margin-left:8%}
html[lang="en"] .research-hero h1 span+span{font-size:.78em;margin-left:.18em}
html[lang="en"] .notes-hero h1 span+span{font-size:.84em}
html[lang="en"] .about2-hero h1 em,
html[lang="en"] #aboutChapter .about2-hero h1 em{margin-left:.85em}

@media(max-width:900px){
  html[lang="en"] .arrival-copy-break{display:none}
  html[lang="en"] .arrival-copy{width:auto;left:7%;right:7%}
  html[lang="en"] .arrival-copy h1{font-size:clamp(24px,6.3vw,31px);line-height:1.28}
  html[lang="en"] .arrival-copy p{font-size:9.4px;line-height:1.52;max-width:96%;word-break:normal;overflow-wrap:normal;hyphens:none}
  html[lang="en"] .act h2{font-size:clamp(25px,6.6vw,34px);line-height:1.18}
  html[lang="en"] .act-copy p,
  html[lang="en"] .act-copy .act-lead,
  html[lang="en"] .being-lines p{font-size:12px;line-height:1.7}
  html[lang="en"] .page .hero h1{font-size:clamp(32px,8.3vw,46px)}
  html[lang="en"] .research-hero h1,
  html[lang="en"] .notes-hero h1{font-size:clamp(31px,8vw,44px)}
}

@media(max-width:620px){
  html[lang="en"] .cover-title{font-size:clamp(42px,14vw,64px)}
  html[lang="en"] .cover-text{font-size:11.3px;line-height:1.72}
  html[lang="en"] .article-hero h1{font-size:27px;line-height:1.28}
  html[lang="en"] .page .hero h1 .way-title-second{white-space:normal}
}


/* =========================================================
   ENGLISH SOUND PATH · PAGE-BY-PAGE TITLE AUDIT · 2026-09-14
   Deliberately not a single global scale. Each dynamic subview gets its own
   display size according to title length and available composition space.
   ========================================================= */
html[lang="en"] .sound-growth-hero-restored h1{font-size:clamp(46px,4.7vw,64px)!important;line-height:.98!important;max-width:760px!important}
html[lang="en"] .sound-growth-hero-restored h1 em{margin-left:6%!important}
html[lang="en"] .sound-practice-head h2{font-size:clamp(34px,3.6vw,48px)!important;line-height:1.06!important;max-width:320px!important}
html[lang="en"] .sound-practice-head h2 em{margin-left:1.3em!important}

html[lang="en"] .sound-pagehead h1.sound-title-art{font-size:44px!important;line-height:1.08!important;max-width:640px!important}

html[lang="en"] .sound-stage-detail h1.stage-title-origin{font-size:48px!important;line-height:1.05!important}
html[lang="en"] .sound-stage-detail h1.stage-title-free{font-size:44px!important;line-height:1.07!important;max-width:650px!important}
html[lang="en"] .sound-stage-detail h1.stage-title-improv{font-size:39px!important;line-height:1.10!important;max-width:690px!important}

html[lang="en"] .opera-hero h1{font-size:clamp(44px,4.2vw,56px)!important;line-height:.98!important}
html[lang="en"] .opera-hero h1 em{font-size:.82em!important;margin-left:8%!important}
html[lang="en"] .opera-works-head h1{font-size:clamp(40px,3.8vw,50px)!important;line-height:1.00!important}
html[lang="en"] .opera-works-head h1 em{font-size:.78em!important;margin-left:1.3em!important;white-space:normal!important}
html[lang="en"] .narrative-gallery-head h1{font-size:clamp(39px,3.7vw,48px)!important;line-height:1.00!important;max-width:720px!important}
html[lang="en"] .narrative-gallery-head h1 em{font-size:.74em!important;margin-left:6%!important;white-space:normal!important}
html[lang="en"] .archive-head h1{font-size:clamp(40px,3.9vw,50px)!important;line-height:1.00!important;max-width:700px!important}
html[lang="en"] .archive-head h1 em{font-size:.78em!important;margin-left:7%!important;white-space:normal!important}
html[lang="en"] .lab-gallery-head h1{font-size:clamp(40px,3.9vw,50px)!important;line-height:1.00!important;max-width:700px!important}
html[lang="en"] .lab-gallery-head h1 em{font-size:.78em!important;margin-left:7%!important;white-space:normal!important}

html[lang="en"] .sound-detail-title{font-size:42px!important;line-height:1.14!important;max-width:780px!important}
html[lang="en"] .sound-detail-title.is-long{font-size:36px!important;line-height:1.18!important;max-width:820px!important}
html[lang="en"] .sound-detail-title.is-xlong{font-size:31px!important;line-height:1.22!important;max-width:860px!important}

@media(max-width:900px){
  html[lang="en"] .sound-growth-hero-restored h1{font-size:44px!important}
  html[lang="en"] .sound-pagehead h1.sound-title-art{font-size:36px!important}
  html[lang="en"] .sound-stage-detail h1.stage-title-origin{font-size:40px!important}
  html[lang="en"] .sound-stage-detail h1.stage-title-free{font-size:36px!important}
  html[lang="en"] .sound-stage-detail h1.stage-title-improv{font-size:33px!important}
  html[lang="en"] .opera-hero h1{font-size:42px!important}
  html[lang="en"] .opera-works-head h1{font-size:38px!important}
  html[lang="en"] .narrative-gallery-head h1{font-size:36px!important}
  html[lang="en"] .archive-head h1{font-size:37px!important}
  html[lang="en"] .lab-gallery-head h1{font-size:37px!important}
  html[lang="en"] .sound-detail-title{font-size:34px!important}
  html[lang="en"] .sound-detail-title.is-long{font-size:31px!important}
  html[lang="en"] .sound-detail-title.is-xlong{font-size:28px!important}
}

/* 2026-09-16 FINAL English homepage 3D module body-size lock */
html[lang="en"] .act .act-copy p,
html[lang="en"] .act .act-copy .act-lead,
html[lang="en"] .act .being-lines p{
  font-size:13px!important;
  line-height:1.8!important;
}
@media(max-width:900px){
  html[lang="en"] .act .act-copy p,
  html[lang="en"] .act .act-copy .act-lead,
  html[lang="en"] .act .being-lines p{
    font-size:12px!important;
    line-height:1.7!important;
  }
}


/* =========================================================
   ENGLISH SECTION DISPLAY COMPOSITION · 2026-09-16
   Large English section titles are treated as visual composition, not body copy.
   Desktop line breaks are intentional; copy is rebalanced around the title field.
   ========================================================= */
@media (min-width:901px){
  html[lang="en"] .sound-growth-hero-restored{
    grid-template-columns:minmax(0,1.24fr) minmax(360px,.76fr)!important;
    gap:5.8vw!important;
  }
  html[lang="en"] .sound-growth-hero-restored h1{
    max-width:880px!important;
    font-family:Georgia,"Times New Roman","Noto Serif SC",serif!important;
    font-size:clamp(72px,6.6vw,96px)!important;
    line-height:.91!important;
    letter-spacing:-.047em!important;
  }
  html[lang="en"] .sound-growth-hero-restored h1 em{
    margin-left:11%!important;
    margin-top:.08em!important;
    font-size:.94em!important;
  }
  html[lang="en"] .sound-growth-restored-copy{
    max-width:500px!important;
    padding-bottom:6px!important;
  }

  html[lang="en"] .page .hero h1{
    font-family:Georgia,"Times New Roman","Noto Serif SC",serif!important;
  }
  html[lang="en"] .page .hero h1 .being-title-accent,
  html[lang="en"] .page .hero h1 .way-title-second,
  html[lang="en"] .page .hero h1 .tao-title-base,
  html[lang="en"] .page .hero h1 .tao-title-accent{
    font-family:inherit!important;
  }

  html[lang="en"] .research-hero h1,
  html[lang="en"] .notes-hero h1{
    font-family:Georgia,"Times New Roman","Noto Serif SC",serif!important;
  }
}

/* =========================================================
   SOUND PATH HERO · TWO-LINE ENGLISH TITLE COMPOSITION · 2026-09-16
   Intentional line break: How Has / My Voice Grown?
   The second line is the gold visual anchor and is slightly indented.
   ========================================================= */
@media (min-width:901px){
  html[lang="en"] .sound-growth-hero-restored h1{
    max-width:940px!important;
    font-size:clamp(78px,7vw,104px)!important;
    line-height:.88!important;
    letter-spacing:-.052em!important;
  }
  html[lang="en"] .sound-growth-hero-restored h1 .sound-growth-question{
    display:block;
    font-size:.76em;
    line-height:.96;
    letter-spacing:-.035em;
  }
  html[lang="en"] .sound-growth-hero-restored h1 em{
    display:block;
    margin-left:8.5%!important;
    margin-top:.08em!important;
    font-size:1em!important;
    line-height:.90!important;
    color:#c99c5b!important;
    white-space:nowrap!important;
  }
  html[lang="en"] .sound-growth-restored-copy{
    align-self:end;
    max-width:510px!important;
    padding-bottom:4px!important;
  }
}
@media (max-width:900px){
  html[lang="en"] .sound-growth-hero-restored h1 .sound-growth-question{display:block;font-size:.82em;line-height:1}
  html[lang="en"] .sound-growth-hero-restored h1 em{display:block;margin-left:5%!important;font-size:1em!important;white-space:normal!important}
}


/* 2026-09-16 · English Sound Path practice chain: show full process in two rows */
@media (min-width:901px){
  html[lang="en"] .sound-practice-chain{
    flex-wrap:wrap!important;
    overflow-x:visible!important;
    white-space:normal!important;
    row-gap:10px!important;
  }
  html[lang="en"] .sound-practice-chain .sound-practice-chain-break{
    display:block!important;
    flex:0 0 100%!important;
    width:100%!important;
    height:0!important;
  }
  html[lang="en"] .sound-practice-chain span:not(.sound-practice-chain-break){
    white-space:nowrap!important;
  }
}
@media (max-width:900px){
  html[lang="en"] .sound-practice-chain{
    flex-wrap:wrap!important;
    overflow-x:visible!important;
    white-space:normal!important;
    row-gap:9px!important;
  }
  html[lang="en"] .sound-practice-chain .sound-practice-chain-break{
    display:none!important;
  }
  html[lang="en"] .sound-practice-chain span{
    white-space:normal!important;
  }
}


/* =========================================================
   LIGHT LANGUAGE VOCAL NARRATIVE · ENGLISH DISPLAY COMPOSITION · 2026-09-16
   Match the larger, intentional two-line English section-title system.
   ========================================================= */
@media (min-width:901px){
  html[lang="en"] .narrative-gallery-head{
    grid-template-columns:minmax(0,1.14fr) minmax(360px,.86fr)!important;
    gap:6.4vw!important;
  }
  html[lang="en"] .narrative-gallery-head h1{
    max-width:820px!important;
    font-family:Georgia,"Times New Roman","Noto Serif SC",serif!important;
    font-size:clamp(68px,6.1vw,90px)!important;
    line-height:.91!important;
    letter-spacing:-.047em!important;
  }
  html[lang="en"] .narrative-gallery-head h1 em{
    display:block!important;
    margin-left:9%!important;
    margin-top:.07em!important;
    font-size:.82em!important;
    line-height:.96!important;
    white-space:nowrap!important;
  }
  html[lang="en"] .narrative-gallery-copy{
    max-width:520px!important;
    padding-bottom:8px!important;
  }
}
@media (max-width:900px){
  html[lang="en"] .narrative-gallery-head h1{
    font-family:Georgia,"Times New Roman","Noto Serif SC",serif!important;
    font-size:clamp(48px,8vw,64px)!important;
    line-height:.94!important;
    letter-spacing:-.035em!important;
  }
  html[lang="en"] .narrative-gallery-head h1 em{
    margin-left:7%!important;
    font-size:.82em!important;
    white-space:normal!important;
  }
}
@media (max-width:620px){
  html[lang="en"] .narrative-gallery-head h1{
    font-size:clamp(42px,13vw,58px)!important;
  }
}

/* =========================================================
   LIGHT LANGUAGE MUSIC LAB · ENGLISH DISPLAY COMPOSITION · 2026-09-16
   Match the established large two-line English section-title system.
   ========================================================= */
@media (min-width:901px){
  html[lang="en"] .lab-gallery-head{
    grid-template-columns:minmax(0,1.14fr) minmax(360px,.86fr)!important;
    gap:6.4vw!important;
  }
  html[lang="en"] .lab-gallery-head h1{
    max-width:820px!important;
    font-family:Georgia,"Times New Roman","Noto Serif SC",serif!important;
    font-size:clamp(70px,6.25vw,92px)!important;
    line-height:.91!important;
    letter-spacing:-.047em!important;
  }
  html[lang="en"] .lab-gallery-head h1 em{
    display:block!important;
    margin-left:9%!important;
    margin-top:.07em!important;
    font-size:.84em!important;
    line-height:.96!important;
    white-space:nowrap!important;
  }
  html[lang="en"] .lab-gallery-copy{
    max-width:520px!important;
    padding-bottom:8px!important;
  }
}
@media (max-width:900px){
  html[lang="en"] .lab-gallery-head h1{
    font-family:Georgia,"Times New Roman","Noto Serif SC",serif!important;
    font-size:clamp(48px,8vw,64px)!important;
    line-height:.94!important;
    letter-spacing:-.035em!important;
  }
  html[lang="en"] .lab-gallery-head h1 em{
    margin-left:7%!important;
    font-size:.84em!important;
    white-space:normal!important;
  }
}
@media (max-width:620px){
  html[lang="en"] .lab-gallery-head h1{
    font-size:clamp(42px,13vw,58px)!important;
  }
}

/* =========================================================
   LIGHT LANGUAGE OPERA · ENGLISH VISUAL BREATHING RHYTHM · 2026-09-16
   Keep the four visual fields related to the four acts without mirroring text height.
   ========================================================= */
@media (min-width:981px){
  html[lang="en"] .opera-act-visual{
    min-height:0!important;
    height:clamp(270px,22vw,310px)!important;
  }
  html[lang="en"] .opera-act.act-2 .opera-act-visual{
    height:clamp(302px,24vw,342px)!important;
  }
  html[lang="en"] .opera-act.act-4 .opera-act-visual{
    height:clamp(290px,23vw,328px)!important;
  }
}


/* =========================================================
   LIGHT LANGUAGE VOICE ARCHIVE · ENGLISH DISPLAY COMPOSITION · 2026-09-17
   Match the established large two-line English section-title system used by
   Vocal Narrative and Music Lab.
   ========================================================= */
@media (min-width:901px){
  html[lang="en"] .archive-head{
    grid-template-columns:minmax(0,1.14fr) minmax(360px,.86fr)!important;
    gap:6.4vw!important;
  }
  html[lang="en"] .archive-head h1{
    max-width:820px!important;
    font-family:Georgia,"Times New Roman","Noto Serif SC",serif!important;
    font-size:clamp(70px,6.25vw,92px)!important;
    line-height:.91!important;
    letter-spacing:-.047em!important;
  }
  html[lang="en"] .archive-head h1 em{
    display:block!important;
    margin-left:9%!important;
    margin-top:.07em!important;
    font-size:.84em!important;
    line-height:.96!important;
    white-space:nowrap!important;
  }
  html[lang="en"] .archive-copy{
    max-width:520px!important;
    padding-bottom:8px!important;
  }
}
@media (max-width:900px){
  html[lang="en"] .archive-head h1{
    font-family:Georgia,"Times New Roman","Noto Serif SC",serif!important;
    font-size:clamp(48px,8vw,64px)!important;
    line-height:.94!important;
    letter-spacing:-.035em!important;
  }
  html[lang="en"] .archive-head h1 em{
    margin-left:7%!important;
    font-size:.84em!important;
    white-space:normal!important;
  }
}
@media (max-width:620px){
  html[lang="en"] .archive-head h1{
    font-size:clamp(42px,13vw,58px)!important;
  }
}


/* =========================================================
   LIGHT LANGUAGE OPERA · ENGLISH DISPLAY COMPOSITION · 2026-09-17
   Restore Opera to the same large two-line title hierarchy as Narrative,
   Music Lab, and Voice Archive.
   ========================================================= */
@media (min-width:901px){
  html[lang="en"] .opera-hero{
    grid-template-columns:minmax(0,1.14fr) minmax(340px,.86fr)!important;
    gap:6.4vw!important;
  }
  html[lang="en"] .opera-hero h1{
    max-width:820px!important;
    font-family:Georgia,"Times New Roman","Noto Serif SC",serif!important;
    font-size:clamp(70px,6.25vw,92px)!important;
    line-height:.91!important;
    letter-spacing:-.047em!important;
  }
  html[lang="en"] .opera-hero h1 em{
    display:block!important;
    margin-left:9%!important;
    margin-top:.07em!important;
    font-size:.84em!important;
    line-height:.96!important;
    white-space:nowrap!important;
  }
}
@media (max-width:900px){
  html[lang="en"] .opera-hero h1{
    font-family:Georgia,"Times New Roman","Noto Serif SC",serif!important;
    font-size:clamp(48px,8vw,64px)!important;
    line-height:.94!important;
    letter-spacing:-.035em!important;
  }
  html[lang="en"] .opera-hero h1 em{
    margin-left:7%!important;
    font-size:.84em!important;
    white-space:normal!important;
  }
}
@media (max-width:620px){
  html[lang="en"] .opera-hero h1{
    font-size:clamp(42px,13vw,58px)!important;
  }
}

/* 2026-09-17 · English homepage Sound Path copy flow
   Remove forced body-copy line breaks and use the available left column more naturally. */
@media (min-width:901px){
  html[lang="en"] .act-sound .act-copy{
    max-width:550px!important;
  }
  html[lang="en"] .act-sound .act-copy p{
    text-wrap:pretty;
  }
}