/* Shared responsive refinements. Keep content readable instead of stretching text. */
.site-body{--page-gutter:clamp(20px,3.5vw,40px)}
.site-body .container{padding-inline:var(--page-gutter)}
.site-body .page-hero{padding-block:clamp(38px,4.2vw,60px) clamp(30px,3.1vw,44px)}
.site-body .page-hero h1{font-size:clamp(32px,3.6vw,48px);line-height:1.18;max-width:900px;overflow-wrap:break-word}
.site-body.page-process .page-hero h1{max-width:22ch}
html:lang(zh-CN) .site-body .page-hero h1{font-size:clamp(30px,3.4vw,46px);line-height:1.4}
html:lang(zh-CN) .site-body.page-process .page-hero h1{max-width:20em}

/* Cards get a useful intermediate layout before switching to a phone column. */
@media(min-width:560px) and (max-width:767.98px){
 .site-body.page-products .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 22px}
 .site-body.page-products .card-image{aspect-ratio:1.2}
 .site-body.page-products .card-body h3{font-size:20px}
}
@media(min-width:600px) and (max-width:1100px){
 .site-body .journal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
 .site-body .journal-card-featured{grid-column:1/-1}
}
@media(max-width:980px){
 .site-body .reading-layout{grid-template-columns:minmax(0,1fr);gap:32px}
 .site-body .reading-aside{position:static;max-height:none;overflow:visible;border:1px solid var(--line);border-radius:8px;padding:20px 24px}
 .site-body .reading-main{max-width:100%;min-width:0}
}
/* A short landscape viewport must leave enough height to actually read details. */
@media(max-height:500px){
 .site-body .consent-dialog{height:calc(100dvh - 16px);max-height:calc(100dvh - 16px)}
 .site-body .consent-dialog-header{padding:12px 50px 12px 20px}
 .site-body .consent-dialog-header .consent-eyebrow{display:none}
 .site-body .consent-dialog-header h2{font-size:22px;line-height:1.25;margin:0 0 5px}
 .site-body .consent-dialog-header>p:last-of-type{font-size:11px;line-height:1.45;margin:0}
 .site-body .consent-dialog-header .consent-close{top:6px;right:6px}
 .site-body .consent-tabs button{min-height:44px;padding:10px 12px}
 .site-body .consent-panel-scroll{padding:20px;min-height:80px}
 .site-body .consent-dialog-footer{padding:9px 20px 12px}
 .site-body .consent-dialog-footer>p{font-size:10px;line-height:1.4;margin-bottom:7px}
 .site-body .consent-dialog-actions .consent-button{min-height:44px;padding:8px 10px}
 .site-body .consent-banner-inner{padding-top:16px;padding-bottom:16px}
}
@media(max-height:500px) and (min-width:560px) and (max-width:680px){
 .site-body .consent-banner-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
 .site-body .consent-banner-actions .consent-button{font-size:11px;padding-inline:8px}
}
@media(max-height:500px) and (max-width:1023.98px){
 .site-body .site-nav{padding-top:56px;padding-bottom:20px}
 .site-body .nav-links{gap:0}
 .site-body .nav-links a{font-size:16px;min-height:44px;padding-block:10px}
 .site-body .header-actions{margin-top:18px}
}
/* At very high zoom, use one scrollable panel rather than crushing its content. */
@media(max-height:320px){
 .site-body .consent-dialog[open]{display:block;overflow-y:auto}
 .site-body .consent-panel-scroll{overflow:visible;min-height:0}
 .site-body .consent-dialog-footer{position:sticky;bottom:0;z-index:1}
}