/* Small screens show the complete desktop composition as one still image. */
.mobile-product{display:none}
@media(max-width:1100px){
 .product-rig{display:none}
 .mobile-product{display:block;position:relative;z-index:1;padding-top:32px}
 .mobile-product img{display:block;width:100%;height:auto;aspect-ratio:1229/820;object-fit:contain;border-radius:5px;box-shadow:0 24px 48px -18px #000a}
 .mobile-edition{position:absolute;right:2px;top:0;color:var(--muted);font-size:11px;line-height:20px;text-transform:uppercase;letter-spacing:.06em}
 .mobile-edition span{margin-left:8px;text-transform:none;letter-spacing:0}
 .hero-intro{padding-bottom:30px}
 .hero-sequence{padding-bottom:56px}
 .product-environment{height:calc(100% + 48px)}
 /* Editorial cards need a full reading column on tablets as well as phones. */
 .principle-grid{grid-template-columns:1fr;gap:24px}
 .principle-figure{padding:28px;grid-template-rows:auto 300px auto}
 .principle-drawing{position:relative;width:100%;max-width:360px;min-height:0;margin-inline:auto;overflow:hidden}
 .principle-drawing svg{position:absolute;inset:16px 0 20px;display:block;width:100%;height:calc(100% - 36px);overflow:hidden}
 .principle-figure figcaption{padding-top:20px}
 .principle-figure h3{min-height:0;font-size:24px;margin-bottom:16px}
 .principle-figure figcaption p{font-size:15px;line-height:1.75;max-width:60ch}
 .principle-figure figcaption .reasoning-handoff{padding-top:24px;font-size:12px;white-space:normal}
 .gallery-grid{grid-template-columns:1fr;gap:54px}
 .gallery-standard-wide{display:block}
 .gallery-standard-wide>header{margin-bottom:14px}
 .gallery-standard-wide .gallery-caption{margin-top:0;padding:15px 0 0}
 .gallery-feature .gallery-caption{flex-direction:column;gap:5px}
 .author-identity{flex-wrap:wrap}
}
@media(max-width:760px){
 .hero-intro{padding-block:36px 24px}
 .hero-intro .eyebrow{font-size:10px;line-height:1.8;max-width:34em}
 .hero-sequence{padding-bottom:36px}
 .principles{padding-block:56px 64px}
 .thinking-preface h2{font-size:clamp(30px,8.2vw,40px);line-height:1.17}
 .thinking-context{margin-top:24px}
 .principle-cycle{margin-top:34px}
 .principle-figure{padding:22px 22px 26px;grid-template-rows:auto 260px auto}
 .principle-figure h3{font-size:22px}
 .principle-figure figcaption p{font-size:14px}
 .principle-figure figcaption .reasoning-handoff{font-size:clamp(10px,3vw,12px)}
 .collection-heading{flex-direction:column;gap:18px}
 .collection-heading>p{max-width:none;text-align:left;padding:0}
 .collection-heading>p span{display:inline;font-size:14px;margin-right:8px}
 .author-identity{row-gap:10px}
}