/* The image is a responsive picture, not a late-discovered CSS background. */
.photo-hero,.detail-hero.photo-hero{display:block;max-width:none;width:100%;padding:0;margin:0;gap:0;background:var(--paper);color:var(--ink)}
.photo-hero-stage{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:clamp(480px,48vw,640px);max-width:1920px;margin-inline:auto;overflow:hidden;background:#20231e}
.photo-hero-media{position:absolute;inset:0;display:block;margin:0;width:100%;height:100%;max-width:none;max-height:none}
.photo-hero-media>picture,.photo-hero-media>.photo-activation,.photo-hero-media .photo-activation>picture{display:block;width:100%;height:100%}
.photo-hero-media img,.detail-hero.photo-hero .photo-hero-media img{display:block;width:100%;height:100%;max-width:none!important;max-height:none;min-height:0;aspect-ratio:auto;object-fit:cover!important;object-position:var(--photo-hero-focal,50% 50%)!important}
/* Every text pixel sits over at least 62% black, including on a white source.
   The cap fades above the text zone; the photograph stays clear above it. */
.photo-hero-content{position:relative;z-index:1;flex:1;min-width:0;margin-top:160px;background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.82));color:#fff}
.photo-hero-content::before{content:"";position:absolute;inset-inline:0;bottom:100%;height:96px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.62));pointer-events:none}
.photo-hero-copy{position:relative;padding-top:32px;padding-bottom:40px}
.photo-hero-copy h1{max-width:24ch;margin:0;font:400 clamp(44px,5.5vw,84px)/1.09 var(--serif);letter-spacing:-.035em;color:#fff;overflow-wrap:anywhere;text-wrap:balance}
.photo-hero-copy h1 em{color:inherit}
.photo-hero-copy>.eyebrow{margin:0 0 18px;font-size:13px;line-height:1.6;letter-spacing:.11em;color:#fff}
.photo-hero-stage>.photo-save{z-index:3;top:20px;right:20px;background:var(--paper);color:var(--ink)}
.photo-hero-caption{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 16px;padding-top:10px;padding-bottom:12px;font-size:12px;line-height:1.65;overflow-wrap:anywhere}
.photo-hero-caption .photo-credit{min-height:32px}
.photo-hero-after{padding-top:24px;padding-bottom:32px}
.photo-hero-after>div{max-width:100%;min-width:0}
.photo-hero-after :is(.detail-deck,.hero-deck,.journal-excerpt){max-width:72ch;margin-top:0;font-size:16px;line-height:1.75;color:var(--ink)}
.photo-hero-after .hero-copy{padding:0;max-width:none}
.photo-hero-after .hero-bottom{max-width:72ch;margin-top:24px}
.photo-hero-after .detail-actions{margin-top:18px;flex-wrap:wrap}
.photo-hero-after .booking-action-context{max-width:72ch}
.photo-hero-after .museum-identity{margin-top:0}
.photo-hero-after .home-intro-text{max-width:none}
.photo-hero-after .home-intro-copy{margin-top:0}
.photo-hero-page{max-width:none!important;width:100%;padding:0!important;margin:0}
.photo-hero-reading{padding-top:24px;padding-bottom:32px}
.photo-hero-reading:empty{display:none}
.photo-hero[data-hero-state="no-approved-large-photo"] .photo-hero-stage{min-height:320px}
.photo-hero[data-hero-state="no-approved-large-photo"] .photo-hero-content{margin-top:80px}
html[lang="th"] .photo-hero-copy h1{font-family:var(--sans);line-height:1.4;letter-spacing:0}
@media(max-width:700px){
 .photo-hero-stage{min-height:480px}
 .photo-hero-copy{padding-top:24px;padding-bottom:28px}
 .photo-hero-copy h1{font-size:clamp(34px,9vw,48px);line-height:1.16;max-width:24ch}
 .photo-hero-copy>.eyebrow{font-size:12px;margin-bottom:12px}
 .photo-hero-after{padding-top:20px;padding-bottom:24px}
 .photo-hero-caption{font-size:11px;gap:2px 12px}
 .photo-hero-stage>.photo-save{top:14px;right:14px}
}

/* Museum cards keep their requested square crop; photographic heroes remain wide. */
.art-card .card-photo,.related-card .card-photo{aspect-ratio:1/1}