/* One film, three ways of reading it. All explanations stay visible. */
.method-introduction{margin-bottom:44px}
.method-process{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:7%;align-items:start}
.method-film{max-width:none;min-width:0;background:var(--chalk);z-index:2}
.method-film-slot:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#171717a6,transparent 30%,transparent 65%,#171717aa)}
.method-film .film-mark{top:16px;bottom:auto;left:18px;z-index:1;font-size:10px;text-shadow:0 1px 3px #171717}
.film-observation{position:absolute;inset:auto 18px 18px;display:flex;align-items:center;gap:12px;z-index:1;color:var(--chalk);font-size:11px;letter-spacing:.08em;line-height:1.5}
.film-observation>span:first-child{font-variant-numeric:tabular-nums;border:1px solid #f1e8de60;width:28px;height:28px;display:grid;place-items:center;font-size:10px;letter-spacing:0}
.film-observation i{height:1px;width:42px;background:currentColor;opacity:.65}
.method-film figcaption{margin-top:16px;min-height:65px;letter-spacing:0}
.study-caption-index{font-size:10px;letter-spacing:.1em;color:var(--copy-ink)}
.method-film figcaption p{font:400 19px/1.3 Newsreader,Georgia,serif;color:var(--oxblood);letter-spacing:-.01em;margin:7px 0 0;max-width:38ch}
.method-film figcaption p[hidden]{display:none}
body[data-motion] .method-film .film-control{min-height:44px;margin-top:8px;font-size:11px}
.method-principles{grid-template-columns:1fr;gap:0}
.method-principles li,.method-principles li:first-child{position:relative;display:grid;grid-template-columns:25px minmax(0,1fr);gap:18px;border-top:1px solid #38141d30;padding:23px 0 25px;min-width:0}
.method-principles li:before{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--oxblood);transform:scaleX(0);transform-origin:left;transition:transform 280ms ease}
.method-principles li[data-active=true]:before{transform:scaleX(1)}
.method-principles .principle-number{padding-top:12px;font-size:11px}
.method-principles h3{font-size:clamp(30px,3.1vw,46px);line-height:1.08;margin:0 0 10px}
.principle-select{width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-height:44px;border:0;padding:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}
.principle-subject{display:flex;align-items:center;gap:14px;white-space:nowrap;font:400 10px/1.5 'IBM Plex Sans',Arial,sans-serif;letter-spacing:.04em;color:var(--copy-ink)}
.principle-subject i{font-style:normal;font-size:15px;transition:transform 180ms ease}
.principle-select:hover .principle-subject i,.principle-select:focus-visible .principle-subject i{transform:translate(2px,-2px)}
.principle-select:disabled{cursor:default}
.method-principles p{max-width:36ch;font-size:14px;line-height:1.7;color:var(--copy-ink)}
body[data-motion=on] .method-principles [data-method-reveal]{opacity:1;transform:none}
body[data-motion=on] .method-principles h3{transform:translateY(calc((1 - var(--chapter-reveal,1))*6px))}
.method-principles li:focus-within h3{transform:none!important}
.method-close{margin-top:38px}
@media(min-width:761px) and (min-height:650px){
 body[data-motion=on] .method-film{position:sticky;top:calc(var(--bar) + 22px)}
}
@media(min-width:761px) and (max-width:1000px){
 .method-process{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6%}
 .principle-select{display:block}
 .principle-subject{margin-top:5px}
 .method-principles li,.method-principles li:first-child{padding:16px 0 20px;gap:12px}
 .method-principles h3{font-size:32px}
 .method-film figcaption{min-height:88px}
}
@media(max-width:760px){
 .method-introduction{margin-bottom:28px}
 .method-process{display:block}
 .method-film{max-width:100%;margin-bottom:22px}
 .method-film figcaption{min-height:65px;margin-top:12px}
 .method-film figcaption p{font-size:18px}
 .method-film .film-mark{font-size:10px;left:14px;top:13px}
 .film-observation{left:14px;right:14px;bottom:13px;font-size:10px}
 .method-principles li,.method-principles li:first-child{padding:16px 0 20px;grid-template-columns:20px minmax(0,1fr);gap:12px}
 .method-principles h3{font-size:32px;margin-bottom:5px}
 .method-principles p{font-size:14px;max-width:38ch}
 .principle-subject{gap:8px;font-size:10px}
 .method-close{margin-top:22px}
}
@media(max-width:480px) and (min-height:620px){
 body[data-motion=on] .method-film{position:sticky;top:calc(var(--bar) + 8px);padding-bottom:10px}
 body[data-motion=on] .principle-select{scroll-margin-top:calc(var(--bar) + var(--study-height,327px) + 24px);scroll-margin-bottom:24px}
}
@media(max-width:360px){
 .method-principles h3{font-size:28px}
 .principle-select{gap:8px}
 .principle-subject{font-size:10px;letter-spacing:0;gap:5px}
 .method-principles .principle-number{font-size:10px}
}
@media(min-width:481px) and (max-width:760px) and (max-height:650px){
 .method-process{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:6%}
 .method-film{margin:0}
 .method-film figcaption{min-height:95px}
 .method-principles li,.method-principles li:first-child{grid-template-columns:16px minmax(0,1fr);gap:8px;padding:14px 0 18px}
 .method-principles h3{font-size:28px;margin-bottom:8px}
 .principle-select{display:block}
 .principle-subject{margin-top:4px}
 .method-film .film-mark{font-size:9px;left:12px}
 .film-observation{left:12px;gap:8px;font-size:9px}
 .film-observation i{width:22px}
}
@media(min-width:481px) and (max-width:760px) and (min-height:450px) and (max-height:650px){
 body[data-motion=on] .method-film{position:sticky;top:calc(var(--bar) + 18px)}
}
@media(prefers-reduced-motion:reduce){
 .method-film{position:static!important}
 .method-principles h3{transform:none!important}
}