.teaching-intro{min-height:85svh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(3rem,10vw,10rem);align-items:center;padding:clamp(2rem,7vw,7rem);background:#fbf9f5}
.teaching-copy{text-align:center;translate:-1vw 2.5vh}.teaching-copy #about-title{color:inherit;font:400 clamp(1.3rem,2.6vw,2.6rem)/1.2 "Avenir Next Condensed","Arial Narrow",sans-serif;letter-spacing:.075em;margin:0 0 1.3rem}.teaching-copy p{font:400 clamp(1.35rem,2.35vw,2.5rem)/1.22 "Bodoni 72",Didot,Georgia,serif;margin:0;text-wrap:pretty}
.teaching-card{position:relative;display:grid;place-items:center;aspect-ratio:1;width:100%;margin:0;align-self:start;border:0;padding:1.6rem;background:#ead1d2;color:inherit;cursor:pointer;isolation:isolate}
.teaching-card:focus-visible{outline:2px solid #955469;outline-offset:5px}.teaching-card img{width:100%;height:100%;position:absolute;inset:0;object-fit:contain;z-index:1;transition:transform .48s cubic-bezier(.2,.7,.3,1),opacity .4s}
.teaching-caption{opacity:0;transform:translateY(8px);transition:.4s ease;font:400 clamp(.9rem,1.4vw,1.35rem)/1.35 "Avenir Next Condensed","Arial Narrow",sans-serif;display:grid;gap:.55em}
.teaching-card:is(:focus-visible,[aria-pressed=true]) img{transform:translate(7%,-5%) scale(1.035);opacity:.16}.teaching-card:is(:focus-visible,[aria-pressed=true]) .teaching-caption{opacity:1;transform:none}
@media(hover:hover){.teaching-card:hover img{transform:translate(7%,-5%) scale(1.035);opacity:.16}.teaching-card:hover .teaching-caption{opacity:1;transform:none}}
.teaching-frame{padding:clamp(1.2rem,9vmin,7rem);background:#ead1d2}.teaching-scene{position:relative;isolation:isolate;display:grid;align-items:center;min-height:0;aspect-ratio:1800/1198}
.teaching-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:-2}.teaching-scene::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 48%,#21130e70 57%,#21130ee8 100%);z-index:-1}
.teaching-notes{width:33%;margin:0 5% 0 auto;color:#fff4e7;font:400 clamp(.9rem,1.42vw,1.45rem)/1.4 "Avenir Next Condensed","Arial Narrow",sans-serif;text-align:justify;hyphens:auto}
@media(max-width:700px){.teaching-intro{grid-template-columns:1fr;gap:2.5rem}.teaching-copy{translate:none}.teaching-card{width:min(90%,24rem);justify-self:center}.teaching-scene{display:block;aspect-ratio:auto;background:#33231e}.teaching-scene img{position:static;display:block;height:auto}.teaching-scene::before{display:none}.teaching-notes{width:auto;margin:0;padding:1rem}}
@media(prefers-reduced-motion:reduce){.teaching-card img,.teaching-caption{transition:none}}


.teaching-frame{padding-bottom:clamp(1.2rem,9vmin,7rem)}
.hero{min-height:100svh}
.scroll-ready .teaching-intro,.scroll-ready .teaching-frame{overflow:clip}
.scroll-ready .scroll-step{
  opacity:var(--reveal,0);
  translate:0 calc((1 - var(--reveal,0)) * 20px);
}
.scroll-ready .teaching-card.scroll-step{
  clip-path:inset(0 0 calc((1 - var(--reveal,0)) * 100%) 0);
  translate:calc((1 - var(--reveal,0)) * 28px) 0;
}
.scroll-ready .teaching-scene img.scroll-step{
  clip-path:inset(0 0 calc((1 - var(--reveal,0)) * 100%) 0);
  translate:none;
}
.scroll-ready .teaching-scene::before{opacity:var(--photo-reveal,0)}
@media(prefers-reduced-motion:reduce){
 .scroll-ready .scroll-step,.scroll-ready .teaching-scene::before{opacity:1;translate:none;clip-path:none}
}

.teaching-card{overflow:hidden}.teaching-copy :lang(zh-Hans),.teaching-caption:lang(zh-Hans),.teaching-notes:lang(zh-Hans){font-family:var(--studio-chinese);font-weight:300}

.teaching-ending{white-space:nowrap}
html:lang(zh-Hans) .teaching-copy #teaching-opening{
  font-size:clamp(.85rem,1.14vw,1.05rem);
  letter-spacing:.02em;
  text-wrap:balance;
}

html:lang(zh-Hans) #about .teaching-copy #about-title{
  font-family:var(--studio-chinese) !important;
  font-weight:300 !important;
  font-size:clamp(1.28rem,1.68vw,1.58rem);
  letter-spacing:.065em;
  transform:none !important;
  scale:.82 1;
}