/* Text-first XERF introduction leading into an expanding video chapter. */
:is(#about,#about-en){position:relative;isolation:isolate;background:#FAE7E8}
:is(#about,#about-en)::before{content:'';position:absolute;z-index:-1;inset:0;pointer-events:none;background:url(/_xerf-assets/xerf-20260919-r1/assets/xerf-about/background.webp) right top/100% auto no-repeat;opacity:.45}
.about-story-intro{padding-bottom:clamp(32px,5vw,72px)}
.about-story-copy{max-width:1060px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:20px 44px}
.about-story-copy>.eyebrow,.about-story-copy>h2,.about-story-copy>.cred-row{grid-column:1/-1}
.about-story-copy>.eyebrow{margin:0}
.about-story-copy>h2{max-width:920px;margin:0 0 12px;font-size:clamp(28px,4vw,48px);line-height:1.35}
.about-story-copy>.sec-lead{font-size:17px;line-height:1.9;margin:0}
.about-story-copy>.cred-row{margin-top:10px}
.about-cinema-scroll{--cinema-progress:1;--cinema-header:82px;--cinema-panel:calc(100svh - 82px);position:relative;width:100%;margin:0 0 clamp(40px,6vw,80px)}
.about-cinema-scroll.is-scroll-ready{height:calc(var(--cinema-panel)*1.8)}
.about-cinema-pin{position:relative;height:var(--cinema-panel);width:100%;min-height:360px}
.is-scroll-ready>.about-cinema-pin{position:sticky;top:var(--cinema-header)}
.about-cinema-media{position:relative;margin:0;width:100%;height:100%;display:block}
.about-cinema-frame{position:absolute;inset:calc(72px*(1 - var(--cinema-progress))) calc(12vw*(1 - var(--cinema-progress))) calc(32px + 72px*(1 - var(--cinema-progress)));border-radius:calc(28px*(1 - var(--cinema-progress)));background:#17231D;overflow:hidden;isolation:isolate}
.about-cinema-ambient{position:absolute;z-index:-1;inset:-32px;width:calc(100% + 64px);height:calc(100% + 64px);object-fit:cover;filter:blur(24px) brightness(.36);opacity:calc(.35 + .65*var(--cinema-progress));pointer-events:none}
.about-cinema-frame>.xerf-device-video{position:relative;display:block;width:100%;height:100%;max-height:100%;object-fit:contain;aspect-ratio:auto;background:transparent;border:0;border-radius:0;box-shadow:none;opacity:calc(.58 + .42*var(--cinema-progress))}
.about-cinema-title{position:absolute;left:clamp(24px,5vw,80px);bottom:90px;color:#FAF7F0;font-size:clamp(28px,4vw,56px);line-height:1.1;opacity:calc(1 - min(1,var(--cinema-progress)*2));transform:translateY(calc(var(--cinema-progress)*-24px));pointer-events:none}
.about-cinema-toggle{position:absolute;z-index:2;right:18px;top:18px;border:1px solid #FAF7F0;border-radius:999px;background:#FAF7F0;color:#053525;padding:10px 18px;font:500 13px/1.4 var(--font-thai);cursor:pointer}
.about-cinema-toggle[hidden]{display:none}
.about-cinema-toggle:focus-visible,.xerf-device-video:focus-visible{outline:3px solid #F1E7D8;outline-offset:3px}
.about-cinema-media>figcaption{position:absolute;bottom:3px;left:20px;right:20px;font-size:11px;line-height:1.6;color:#65534D;text-align:center;margin:0}
.about-story-summary{padding-top:12px}
@media(max-width:680px){
 :is(#about,#about-en)::before{background-size:auto 900px;background-position:65% top;opacity:.22}
 .about-story-copy{grid-template-columns:1fr;gap:20px}
 .about-story-copy>.sec-lead{font-size:16px;line-height:1.8}
 .about-cinema-scroll{--cinema-panel:calc(100svh - 154px)}
 .about-cinema-scroll.is-scroll-ready{height:calc(var(--cinema-panel)*1.5)}
 .about-cinema-title{font-size:28px;left:22px;bottom:66px}
 .about-cinema-toggle{right:12px;top:12px;font-size:12px;padding:9px 14px}
 .about-cinema-ambient{filter:blur(20px) brightness(.32)}
}
@media(prefers-reduced-motion:reduce){
 .about-cinema-scroll.is-scroll-ready{height:auto}
 .is-scroll-ready>.about-cinema-pin{position:relative;top:auto}
 .about-cinema-frame{inset:0 0 32px;border-radius:0}
 .about-cinema-title{display:none}
 .about-cinema-frame>.xerf-device-video,.about-cinema-ambient{opacity:1}
}