/* Content-led layouts: scale with both viewport dimensions, keep artwork's
   aspect ratio, and let copy grow the page rather than cropping it to fit. */
:root{--auto-fit-gap:clamp(18px,3vw,40px);--auto-fit-pad:clamp(20px,3svh,32px)}

/* The five homepage chapters keep their shared content/art clearance. */
#chun-five-stops[data-desktop="flow"] .desktop-chapter .desktop-title{font-size:clamp(34px,min(3.5vw,6svh),52px);overflow-wrap:anywhere}
#chun-five-stops[data-desktop="flow"] .desktop-chapter .desktop-hero-copy{padding-top:clamp(24px,4svh,42px)}
#chun-five-stops[data-desktop="flow"] .desktop-chapter[data-discipline="creative"] .desktop-hero-copy{padding-top:var(--creative-copy-top,32px)}
#chun-five-stops #contact{min-height:0}

/* Collections use the same text frame; the scene/character sizing script
   measures these fluid dimensions after resize and CMS changes. */
body[data-category] #collection-opening[data-collection-frame] .hero-inner{max-width:none;margin-inline:0;padding-left:clamp(24px,4vw,96px);padding-right:6%}
body[data-category] #collection-opening[data-collection-frame] .hero-inner h1{font-size:clamp(42px,min(5.4vw,8svh),86px);overflow-wrap:anywhere}
body[data-category] #collection-opening[data-collection-frame] .hero-line{font-size:clamp(22px,min(2.2vw,3.6svh),26px)}
body[data-category] #collection-opening[data-collection-frame] .hero-character{height:clamp(180px,min(25vw,38svh),360px)}

/* Professional case studies keep the title and metadata in their own column. */
body[data-category] .story-hero{grid-template-columns:minmax(0,1fr) minmax(160px,min(28vw,40svh,360px));column-gap:var(--auto-fit-gap);padding-top:var(--auto-fit-pad);padding-bottom:clamp(40px,6svh,72px)}
body[data-category] .story-heading{padding-top:clamp(16px,3svh,32px)}
body[data-category] .story-heading h1{font-size:clamp(32px,min(4.7vw,7svh),68px);overflow-wrap:anywhere}
body[data-category] .story-heading .english-title{font-size:clamp(23px,min(2.8vw,4.5svh),36px);overflow-wrap:anywhere}
body[data-category] .story-artwork{padding-top:clamp(16px,3svh,32px)}
body[data-category] .story-hero .story-character{max-height:min(420px,48svh);object-fit:contain}
body[data-category] .project-info>div{min-width:0;max-width:100%}
body[data-category] .project-info dd{overflow-wrap:anywhere}
body[data-category] .story-body,body[data-category] .story-reading>div{min-width:0}
body[data-category] .publication-file iframe{height:clamp(300px,70svh,760px)}

/* Creative keeps its paper/table composition, with fluid gaps and type. */
.collection-landing .landing-intro{min-height:0;height:auto;gap:var(--auto-fit-gap);padding:clamp(22px,3svh,38px) clamp(22px,3vw,40px)}
.collection-landing .landing-intro h1{font-size:clamp(32px,min(4vw,7svh),70px);overflow-wrap:anywhere}
.collection-landing .landing-intro-copy,.collection-landing .landing-object,.collection-landing .featured-welcome,.collection-landing .featured-table{min-width:0}
.collection-landing .landing-object{max-width:100%}
.collection-landing .featured-hero{height:auto;min-height:0;gap:var(--auto-fit-gap);padding-block:clamp(12px,2svh,24px) clamp(24px,4svh,40px)}
.collection-landing .featured-headline{font-size:clamp(40px,min(5vw,8svh),74px);overflow-wrap:anywhere}
.collection-landing .featured-table{padding:clamp(16px,2svh,25px) 12px clamp(24px,3svh,36px)}
.collection-landing .creative-original{padding:clamp(22px,4vw,55px)}
.collection-landing .creative-original h1{font-size:clamp(30px,min(4vw,7svh),58px)}
.collection-landing .article-cover{max-height:min(460px,52svh);object-fit:contain}
.collection-landing :is(.landing-title-en,.article-title-en,.landing-card-en,.featured-story-en){overflow-wrap:anywhere}

@media(max-width:760px){
 body[data-category] #collection-opening[data-collection-frame] .hero-inner{padding-left:5%;padding-right:7%}
 body[data-category] #collection-opening[data-collection-frame] .hero-inner h1{font-size:clamp(34px,min(10vw,7svh),48px)}
 body[data-category] #collection-opening[data-collection-frame] .hero-line{font-size:18px}
 body[data-category] #collection-opening[data-collection-frame] .hero-inner>.hero-character{height:var(--mobile-actor-height,190px)}
 body[data-category] .story-hero{grid-template-columns:minmax(0,1fr)}
 body[data-category] .story-heading h1{font-size:clamp(30px,min(9vw,6.5svh),42px)}
 body[data-category] .story-heading .english-title{font-size:clamp(22px,6vw,28px)}
 body[data-category] .story-artwork{width:min(55%,220px);padding-top:20px}
 body[data-category] .story-hero .story-character{max-height:min(220px,32svh)}
 .collection-landing .landing-intro{padding:22px;gap:22px}
 .collection-landing .landing-intro h1{font-size:clamp(30px,min(9vw,7svh),48px)}
 .collection-landing .featured-headline{font-size:clamp(40px,min(11.8vw,8svh),65px)}
}