/* Editorial content stays readable at every scroll position. Motion belongs to
   the headings, photographs and connecting rules, rather than whole text blocks. */
body[data-motion=on] :is(.editorial,.swift-chapter,.contact-chapter) :is([data-method-reveal],[data-scroll-reveal]){opacity:1;transform:none}
body[data-motion=on] .swift-record{clip-path:none}
body[data-motion=on] :is(.method-introduction,.swift-introduction,.contact-introduction) h2,
body[data-motion=on] :is(.swift-studies-heading,.swift-direction) h3{transform:translateY(calc((1 - var(--chapter-reveal,1))*12px))}
body[data-motion=on] :is(.editorial,.swift-chapter,.contact-chapter) :is(h2,h3):focus-within{transform:none}
/* Keep the warmer photo grade and the existing 3.5% image movement. Captions,
   observation controls, record facts and development notes remain stationary. */
body[data-motion=on] .atlas-figure figcaption{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
 :is(.method-introduction,.swift-introduction,.contact-introduction) h2,
 :is(.swift-studies-heading,.swift-direction) h3{transform:none!important}
}

/* Shared reading sizes. Keep the existing ink colours and editorial scale. */
:root{--reading-label:11px;--reading-note:13px}
.editorial-index,.swift-index,.contact-index,
.swift-index>span:last-child,.contact-index>span:last-child,
.swift-kicker,.swift-record-index,.swift-status,.swift-identity>p,
.swift-year-label,.swift-project-facts dt,.swift-study-title>span,
.swift-direction-status,.study-caption-index,.principle-subject,
.method-film .film-mark,.film-observation,
.method-close>span,.swift-close>span,.contact-bottom>span,.footer-meta>span{
 font-size:var(--reading-label);line-height:1.6;letter-spacing:.06em;
}
.editorial-index,.swift-index,.contact-index{gap:20px;align-items:baseline}
.editorial-index>span:first-child,.swift-index>span:first-child,.contact-index>span:first-child{display:flex;align-items:baseline;gap:20px;white-space:nowrap}
.editorial-index b,.swift-index b,.contact-index b{margin-right:0;font-variant-numeric:tabular-nums}
.swift-index>span:last-child,.contact-index>span:last-child{text-align:right;max-width:none}
.atlas-photo-label{font-size:var(--reading-label);line-height:1.5;letter-spacing:.04em;max-width:calc(100% - 26px);padding:8px 10px}
.atlas-credit,.atlas-study-note,.atlas-instruction,.swift-record-caption{font-size:var(--reading-note);line-height:1.75}
.atlas-observations button>span,.method-principles .principle-number,.film-observation>span:first-child{font-size:var(--reading-label)}
.method-header .chapter-menu .chapter-position{font-size:var(--reading-label)}
.eyebrow,.observation-index,.site-header .header-descriptor,.scroll-cue{font-size:var(--reading-label)}
body[data-motion=on] .turn-controls>div,.chapters a{font-size:var(--reading-label)}
body[data-motion=on] .detail-copy .eyebrow{font-size:var(--reading-label)}

/* The photo introduction uses the same columns as the photographs beneath it. */
.atlas-heading{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);column-gap:4.5%;align-items:end}
.atlas-heading>p{max-width:40ch;margin-bottom:0}
.swift-study-title{min-width:0}
.method-introduction h2,.swift-introduction h2,.contact-introduction h2,
.atlas-heading h3,.atlas-notes h4,.swift-studies-heading h3,.swift-direction h3{text-wrap:balance}
.method-film figcaption p{text-wrap:balance}
.method-lede p,.swift-introduction>p>span,.atlas-heading>p,.atlas-notes p,
.swift-studies-heading>p:last-child,.swift-study-body p,.swift-direction>div>p,
.contact-invitation>p,.method-principles p{text-wrap:pretty}

@media(max-width:760px){
 .atlas-heading{grid-template-columns:minmax(0,1fr);row-gap:20px}
 .atlas-heading>p{margin-top:0;max-width:42ch}
 .editorial-index,.swift-index,.contact-index{column-gap:16px;row-gap:8px;flex-wrap:wrap}
 .editorial-index>span:first-child,.swift-index>span:first-child,.contact-index>span:first-child{gap:16px}
 .swift-index>span:last-child,.contact-index>span:last-child{margin-left:auto}
 .swift-record-index{flex-wrap:wrap;align-items:baseline;gap:10px 20px}
 .swift-record-index>span:first-child{max-width:none}
 .swift-status{max-width:none;white-space:nowrap}
 .swift-project-facts dd{font-size:14px}
 .atlas-photo-label{max-width:calc(100% - 18px);padding:7px 9px}
 .swift-study summary{grid-template-columns:20px minmax(0,1fr) 28px;gap:12px}
 .swift-study-toggle{width:28px;height:28px}
 .swift-study-body{padding-left:32px}
 .method-close>span,.swift-close>span,.contact-bottom>span{max-width:15ch;text-wrap:balance}
 .swift-close>span i{display:none}
 .swift-close>span{max-width:18ch;line-height:1.7}
 .footer-meta>span{max-width:16ch}
}
@media(max-width:480px){
 .swift-introduction h2{font-size:clamp(42px,12vw,58px);line-height:1.04}
 .atlas-heading h3{font-size:clamp(36px,10.75vw,45px)}
 .swift-studies-heading h3{font-size:clamp(38px,10.5vw,45px);line-height:1.06}
 .swift-studies-heading h3 br{display:initial}
 .swift-direction h3{font-size:clamp(37px,10.5vw,45px);line-height:1.06}
 .atlas-notes h4{font-size:clamp(27px,7.7vw,32px);line-height:1.15}
 .swift-study-title{font-size:clamp(25px,7.5vw,31px)}
 .method-film figcaption{min-height:72px}
 .swift-close{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
 .swift-close>span{max-width:none}
 .swift-close>span i{display:inline;margin-inline:6px}
 .swift-close .circle-link[data-go=contact]{justify-self:end;max-width:none}
}
@media(max-width:380px){
 .method-header{padding-inline:7%;gap:8px}
 .method-header .header-tools{gap:8px}
 .method-header .chapter-menu summary{gap:5px}
 .swift-index>span:last-child,.contact-index>span:last-child{max-width:120px}
 .swift-project-facts>div{grid-template-columns:minmax(0,.9fr) minmax(0,1.15fr);gap:12px}
 .method-close,.swift-close,.contact-bottom{gap:16px;align-items:center}
 .method-close>span,.swift-close>span,.contact-bottom>span{max-width:12ch}
 .swift-close>span{max-width:none}
 .method-close .circle-link,.swift-close .circle-link,.contact-bottom .circle-link{font-size:12px}
 .site-header{gap:12px}
 .site-header .header-descriptor{letter-spacing:.06em}
 .site-header .text-link{white-space:nowrap;gap:8px}
}

/* Fit the METHOD headline above the phone's car view. Anchor the degree
   readout to the controls so longer copy cannot cross it. */
@media(max-width:480px){
 .observation h3{font-size:clamp(32px,8.8vw,40px);line-height:1.02;text-wrap:balance}
 .observation h3 br{display:none}
 body[data-motion=on] .turn-copy .angle-display{top:auto;bottom:14px;right:0;font-size:32px}
 body[data-motion=on] .turn-copy .turn-controls,
 body[data-motion=on] .turn-copy .observation-track{width:68%;max-width:68%}
 body[data-motion=on] .turn-controls>div{gap:8px}
 body[data-motion=on] .turn-controls>div>span{white-space:nowrap;letter-spacing:.02em}
}