/* Thai Language Studio — shared CSS for the listening & speaking page group.
   Covers hero, footer, language-display logic, and reveal animation that are
   byte-identical across these pages.
   Used by every such page via <link rel="stylesheet" href="assets/listening-page.css">. */
body{background:var(--bg);color:var(--ivory);font-family:var(--font-cn);font-weight:300;line-height:1.75;min-height:100vh;overflow-x:hidden}
.page{position:relative;z-index:1}
.wrap{max-width:960px;margin:0 auto;padding:0 clamp(20px,5vw,52px)}
.nav-inner{max-width:960px;margin:0 auto;padding:0 clamp(20px,5vw,52px);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.hero{position:relative;overflow:hidden;padding:clamp(64px,10vw,110px) 0 clamp(52px,8vw,88px);border-bottom:1px solid var(--gold-line)}
.eyebrow{font-family:var(--font-en);font-size:11px;font-weight:500;letter-spacing:.38em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:18px;display:flex;align-items:center;gap:14px}
.eyebrow::before{content:'';width:28px;height:1px;background:var(--gold-dim);flex:none}
.hero h1{font-family:var(--font-display);font-style:normal;font-size:clamp(36px,7vw,72px);font-weight:700;color:var(--gold-soft);line-height:1.1;margin-bottom:14px}
.hero-sub{font-size:clamp(14px,2vw,16px);color:var(--ivory-sub);max-width:36em;line-height:1.75}
.hero-sub.lang-th{font-family:var(--font-th);font-weight:300}
.hero-sub.lang-en{font-family:var(--font-en);font-weight:300}
.hero-sub.lang-cn{font-family:var(--font-cn);font-weight:300}
footer{border-top:1px solid var(--gold-line);padding:44px 0 36px;text-align:center}
footer p{font-size:12px;color:var(--ivory-sub);letter-spacing:.1em}
[data-lang]{display:none}
body.lang-en [data-lang="en"],body.lang-th [data-lang="th"],body.lang-cn [data-lang="cn"]{display:block}
span[data-lang]{display:none}
body.lang-en span[data-lang="en"],body.lang-th span[data-lang="th"],body.lang-cn span[data-lang="cn"]{display:inline}
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}
  .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
}
[data-lang="th"],[lang="th"],.lang-th,.th{font-family:var(--font-th) !important;font-weight:300 !important;font-style:normal !important;}