.article-page > header { position: sticky; top: 0; z-index: 900; }
.article-page main { background: #fff; }
.article-breadcrumb { display: flex; gap: 10px; padding: 24px 5%; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.article-breadcrumb a { color: inherit; }
.article-hero { height: auto; padding: 0; border: 0; align-items: center; display: grid; grid-template-columns: minmax(320px,43%) minmax(0,1fr); min-height: 760px; background: var(--article-accent,#111); color: var(--article-foreground,#fff); transition: background-color .35s ease,color .35s ease; }
.article-hero-media { position: relative; width: 100%; aspect-ratio: 1; background: #222; overflow: hidden; }
.article-hero-media img, .article-hero-media video { width: 100%; height: 100%; display: block; object-fit: contain; position: absolute; inset: 0; }
.article-hero-media.is-empty:after { content: 'CHAN'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 25px; font-weight: 900; letter-spacing: .18em; }
.article-hero-copy { padding: clamp(48px,7vw,110px); display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; }
.article-hero-copy .eyebrow { color: var(--article-eyebrow,#ff3028); }
.article-hero h1 { margin: 16px 0 24px; font-size: clamp(58px,8vw,128px); line-height: .84; letter-spacing: -.07em; overflow-wrap: anywhere; }
.article-date { margin: 0 0 32px; font-size: 13px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--article-muted,#bbb); }
.article-excerpt { max-width: 690px; margin: 0; font-size: clamp(18px,2vw,28px); line-height: 1.35; }
.article-body { width: min(880px,90%); margin: 0 auto; padding: clamp(70px,10vw,140px) 0; font-size: clamp(19px,2vw,26px); line-height: 1.62; }
.article-body p { margin: 0 0 1.3em; }
.article-gallery { padding: 0 5% clamp(80px,10vw,140px); }
.article-gallery-grid { position: relative; width: 100%; margin-top: 26px; transition: height .25s ease; }
.article-gallery-item { position: absolute; margin: 0; overflow: hidden; background: #eee; transition: left .25s ease,top .25s ease,width .25s ease,height .25s ease; }
.article-gallery-item img,.article-gallery-item video { width: 100%; height: 100%; display: block; object-fit: contain; background: #eee; transition: transform .45s cubic-bezier(.22,.8,.32,1); }
.article-gallery-item:hover img,.article-gallery-item:hover video { transform: scale(1.025); }
.article-gallery-open { position: absolute; inset: 0; width: 100%; border: 0; background: transparent; color: #fff; cursor: zoom-in; }
.article-gallery-open span { position: absolute; right: 14px; top: 14px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgba(17,17,17,.82); font-size: 18px; opacity: 0; transform: translateY(5px); transition: opacity .2s ease,transform .2s ease,background .2s ease; }
.article-gallery-item:hover .article-gallery-open span,.article-gallery-open:focus-visible span { opacity: 1; transform: translateY(0); }
.article-gallery-open:focus-visible { outline: 3px solid #e1251b; outline-offset: -3px; }
.media-lightbox[hidden] { display: none; }
.media-lightbox { position: fixed; z-index: 1000; inset: 0; box-sizing: border-box; width: 100vw; height: 100dvh; overflow: hidden; display: grid; grid-template-columns: 72px minmax(0,1fr) 72px; align-items: center; gap: 18px; padding: clamp(24px,4vw,64px); background: rgba(0,0,0,.94); }
.media-lightbox-stage { position: relative; min-width: 0; width: 100%; height: calc(100dvh - clamp(48px,8vw,128px)); overflow: hidden; }
.media-lightbox-stage img,.media-lightbox-stage video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; box-shadow: 0 18px 60px rgba(0,0,0,.35); }
.media-lightbox-close,.media-lightbox-nav { border: 1px solid #555; border-radius: 50%; background: #111; color: #fff; cursor: pointer; transition: background .2s ease,border-color .2s ease; }
.media-lightbox-close:hover,.media-lightbox-nav:hover { background: #e1251b; border-color: #e1251b; }
.media-lightbox-close { position: absolute; top: 22px; right: 22px; width: 50px; height: 50px; font-size: 34px; line-height: 1; }
.media-lightbox-nav { width: 54px; height: 54px; font-size: 23px; }
.lightbox-open { overflow: hidden; }
.related-articles { padding: clamp(70px,9vw,120px) 5%; border-top: 1px solid #ddd; }
.related-articles .section-head { align-items: end; }
.related-articles .section-head h2 { max-width: 760px; }
#related-articles-grid { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 16px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.related-article-card { flex: 0 0 clamp(210px,23vw,320px); color: #111; text-decoration: none; scroll-snap-align: start; }
.related-article-visual { position: relative; display: block; aspect-ratio: 9/16; overflow: hidden; background: #eee; }
.related-article-visual img,.related-article-visual video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.related-article-card:hover .related-article-visual img,.related-article-card:hover .related-article-visual video { transform: scale(1.04); }
.related-article-copy { display: grid; gap: 7px; padding-top: 14px; }
.related-article-copy small,.related-article-copy span { font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.related-article-copy small { color: #e1251b; }.related-article-copy span { color: #777; }
.related-article-copy strong { font-size: clamp(22px,2.2vw,32px); line-height: .96; letter-spacing: -.04em; }
.article-exhibitions { padding: clamp(70px,9vw,120px) 5%; background: #f5f5f3; color: #111; }
.article-exhibitions .exhibitions-head { border-color: #d4d4d0; }
.article-exhibitions .exhibitions-intro { color: #666; }
.article-exhibitions .exhibition-year { border-color: #d4d4d0; }
.article-exhibitions .exhibition-year-toggle { color: #111; }
.article-exhibitions .exhibition-year-icon { border-color: #999; color: #111; }
.article-exhibitions .exhibition-row { border-color: #dcdcd8; }
.article-exhibitions .exhibition-details p,.article-exhibitions .exhibition-date { color: #666; }
.article-not-found { min-height: 70vh; padding: 10vw 5%; }
.article-not-found h1 { font-size: clamp(52px,9vw,130px); max-width: 900px; line-height: .88; letter-spacing: -.06em; }
.article-not-found .button { display: inline-flex; margin-top: 24px; }
@media (max-width:800px) {
  .article-page > header nav { display: none; }
  .article-page > header { height: 78px; min-height: 78px; }
  .article-hero { grid-template-columns: 1fr; min-height: 0; }
  .article-hero-media { min-height: auto; aspect-ratio: 1; }
  .article-hero-copy { padding: 48px 6vw 58px; }
  .article-hero h1 { font-size: 57px; }
  .article-gallery { padding-inline: 4vw; }
  .article-gallery-open span { opacity: 1; transform: none; width: 34px; height: 34px; top: 10px; right: 10px; }
  .media-lightbox { grid-template-columns: 42px minmax(0,1fr) 42px; gap: 4px; padding: 64px 8px 16px; }
  .media-lightbox-stage { height: calc(100dvh - 80px); }
  .media-lightbox-nav { width: 42px; height: 42px; }
  .media-lightbox-close { top: 14px; right: 14px; width: 44px; height: 44px; }
  #related-articles-grid { margin-inline: -6vw; padding-inline: 6vw; scrollbar-width: none; }
  #related-articles-grid::-webkit-scrollbar { display: none; }
  .related-article-card { flex-basis: 63%; }
  .article-breadcrumb { padding-inline: 6vw; overflow: hidden; white-space: nowrap; }
  .article-page > header .selection { font-size: 12px; }
}

.article-body a { color: #d92820; text-decoration: underline; text-underline-offset: .18em; overflow-wrap: anywhere; }
.article-body a:hover { color: #111; }
.article-body a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }