/* The same painting and words remain readable before the gallery enhances them. */
a.chip { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
a.tile, a.lang__opt { text-decoration: none; }
.work-page-nav { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-block-start: 22px; }
.work-page-nav__link { font: 14px/1.5 var(--sans); text-underline-offset: 4px; }
html[data-viewer-ready="true"] .work-page-nav { display: none; }
html[data-viewer-hydrating="true"] :is(.app, .story, .label, .art__layer, .nav, .time) { transition: none !important; }

html[data-work-id]:not([data-viewer-ready="true"]) .app {
  height: auto; min-height: 100svh; overflow: visible; padding-block-end: 32px;
}
html[data-work-id]:not([data-viewer-ready="true"]) .bar {
  position: relative; height: auto; min-height: var(--bar-h); display: flex;
  flex-wrap: wrap; justify-content: space-between; gap: 20px 32px; padding-block: 20px;
}
html[data-work-id]:not([data-viewer-ready="true"]) .bar__end { flex-wrap: wrap; align-items: center; }
html[data-work-id]:not([data-viewer-ready="true"]) .views,
html[data-work-id]:not([data-viewer-ready="true"]) .nav,
html[data-work-id]:not([data-viewer-ready="true"]) .time,
html[data-work-id]:not([data-viewer-ready="true"]) .story-open,
html[data-work-id]:not([data-viewer-ready="true"]) .label__frames,
html[data-work-id]:not([data-viewer-ready="true"]) .story__bar,
html[data-work-id]:not([data-viewer-ready="true"]) .story__count,
html[data-work-id]:not([data-viewer-ready="true"]) .story__title,
html[data-work-id]:not([data-viewer-ready="true"]) .story__meta,
html[data-work-id]:not([data-viewer-ready="true"]) .lang__toggle { display: none; }
html[data-work-id]:not([data-viewer-ready="true"]) .lang { margin: 0; }
html[data-work-id]:not([data-viewer-ready="true"]) .lang__menu[hidden] {
  display: flex; position: static; flex-wrap: wrap; min-width: 0; padding: 0;
  background: none; box-shadow: none; border-radius: 0; gap: 0 2px;
}
html[data-work-id]:not([data-viewer-ready="true"]) .lang__opt {
  width: auto; height: 32px; min-height: 32px; max-height: 32px;
  padding: 0 7px; font-size: 13px; color: var(--ink-2);
}
html[data-work-id]:not([data-viewer-ready="true"]) .lang__opt[aria-selected="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
html[data-work-id]:not([data-viewer-ready="true"]) .lang__opt::before { display: none; }
html[data-work-id]:not([data-viewer-ready="true"]) .hall {
  position: relative; inset: auto; display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  grid-template-rows: auto 1fr;
  gap: 26px clamp(28px, 4vw, 72px); align-items: start;
  max-width: 1480px; margin-inline: auto; padding: 36px var(--side) 60px;
}
html[data-work-id]:not([data-viewer-ready="true"]) .hall__stage {
  position: sticky; inset: auto; top: 28px; grid-column: 1; grid-row: 1 / span 2;
  height: 72svh; min-height: 260px; max-height: 960px;
}
html[data-work-id]:not([data-viewer-ready="true"]) .art { cursor: default; touch-action: auto; }
html[data-work-id]:not([data-viewer-ready="true"]) .art__layer {
  inset: 0; width: 100%; height: 100%; transform: none; will-change: auto;
}
html[data-work-id]:not([data-viewer-ready="true"]) .label {
  position: static; grid-column: 2; width: auto; gap: 14px; opacity: 1; visibility: visible;
}
html[data-work-id]:not([data-viewer-ready="true"]) .label__title {
  max-inline-size: 18em; font-size: clamp(28px, 2.4vw, 48px); line-height: 1.12;
  overflow-wrap: anywhere;
}
html[data-work-id]:not([data-viewer-ready="true"]) .label__meta { max-inline-size: 30em; }
html[data-work-id]:not([data-viewer-ready="true"]) .story {
  position: static; inset: auto; grid-column: 2; width: auto; height: auto; padding: 0;
  background: none; border-radius: 0; box-shadow: none; overflow: visible;
  visibility: visible; transform: none; transition: none;
}
html[data-work-id]:not([data-viewer-ready="true"]) .story__body { padding: 0; }
html[data-work-id]:not([data-viewer-ready="true"]) .story__text {
  max-inline-size: 32em; font-size: clamp(16px, .4vw + 14px, 19px); line-height: 1.65;
  overflow-wrap: break-word;
}

/* The index uses the gallery's established fonts, colors and actual paintings. */
.catalog-page { min-height: 100svh; background: #161412; }
.catalog__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px var(--side); border-bottom: 1px solid var(--line);
}
.catalog__enter { font-size: var(--t-small); text-underline-offset: 4px; }
.catalog { max-width: 1920px; margin-inline: auto; padding: 48px var(--side) 80px; }
.catalog__intro { max-inline-size: 44em; margin-block-end: 30px; }
.catalog__title {
  font: 400 clamp(34px, 4vw, 72px)/1.1 var(--serif); max-inline-size: 17em; text-wrap: balance;
}
.catalog__summary { margin-block-start: 16px; max-inline-size: 36em; font-size: var(--t-body); line-height: 1.6; color: var(--ink-2); }
.catalog__languages, .catalog__years { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.catalog__languages { margin-block: 24px; }
.catalog__language { font-size: 14px; line-height: 1.5; color: var(--ink-2); text-underline-offset: 5px; }
.catalog__language[aria-current="page"] { color: var(--ink); text-decoration-thickness: 2px; }
.catalog__years { padding-block: 18px; border-block: 1px solid var(--line); }
.catalog__years a { font-size: 15px; line-height: 1.6; text-underline-offset: 5px; }
.catalog__year { margin-block-start: clamp(44px, 5vw, 80px); scroll-margin-top: 24px; }
.catalog__year-title { font: 400 clamp(36px, 4.2vw, 76px)/1 var(--serif); margin-block-end: 24px; }
.catalog__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 34px 18px; }
.catalog__item { display: flex; flex-direction: column; text-decoration: none; min-inline-size: 0; }
.catalog__image { width: 100%; height: 260px; object-fit: contain; object-position: center bottom; }
.catalog__caption { display: grid; gap: 6px; margin-block-start: 14px; min-inline-size: 0; }
.catalog__name { font: 400 20px/1.25 var(--serif); max-inline-size: 24em; min-inline-size: 0; overflow-wrap: anywhere; }
.catalog__meta { font-size: 13px; line-height: 1.5; color: var(--ink-2); max-inline-size: 30em; min-inline-size: 0; overflow-wrap: anywhere; }
.catalog__item:hover .catalog__name { text-decoration: underline; text-underline-offset: 4px; }
.catalog__item:focus-visible, .work-page-nav__link:focus-visible, .catalog a:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 6px;
}

@media (max-width: 900px) {
  html[data-work-id]:not([data-viewer-ready="true"]) .hall { grid-template-columns: 1fr; grid-template-rows: auto; max-width: 780px; padding-block-start: 16px; }
  html[data-work-id]:not([data-viewer-ready="true"]) .hall__stage { position: relative; top: auto; grid-column: 1; grid-row: auto; height: 58svh; min-height: 240px; }
  html[data-work-id]:not([data-viewer-ready="true"]) .label,
  html[data-work-id]:not([data-viewer-ready="true"]) .story { grid-column: 1; }
  html[data-work-id]:not([data-viewer-ready="true"]) .label__title { max-inline-size: 22em; }
}
@media (max-width: 520px) {
  html[data-work-id]:not([data-viewer-ready="true"]) .bar { gap: 16px; }
  html[data-work-id]:not([data-viewer-ready="true"]) .bar__end { justify-content: start; }
  html[data-work-id]:not([data-viewer-ready="true"]) .lang__menu[hidden] { gap: 0; }
  .catalog { padding-block-start: 32px; }
  .catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  .catalog__image { height: 190px; }
  .catalog__name { font-size: 18px; }
}