:root {
  --bg: #f7f6f2;
  --panel: #ffffff;
  --ink: #1c1c1f;
  --quiet: #6b6b70;
  --line: #e3e1da;
  --mat: #ecebe5;
  --accent: #b45309;
  --shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 4px 16px rgb(0 0 0 / 6%);
  --serif: "Source Serif 4", "Noto Serif SC", Georgia, serif;
  --sans: "IBM Plex Sans", "Noto Sans SC", system-ui, sans-serif;
  --glass: rgb(255 255 255 / 72%); --glass-edge: rgb(0 0 0 / 8%); --glow: rgb(255 255 255 / 45%);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #18181b; --panel: #222226; --ink: #ececee; --quiet: #a1a1aa; --line: #34343a; --mat: #2a2a2f;
    --glass: rgb(46 46 52 / 80%); --glass-edge: rgb(255 255 255 / 14%); --glow: rgb(255 255 255 / 9%);
    --accent: #f59e0b; --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 16px rgb(0 0 0 / 30%);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--sans); }
a { color: inherit; }
button, select, input { font: inherit; color: inherit; }

.bar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font: 600 19px/1 var(--serif); }
/* each tab's own controls, top right (in today's look, at the end of the row of tabs) */
.tools { display: flex; align-items: center; gap: 8px; min-width: 0; margin-left: auto; }
.tool { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tool .count { margin-right: 4px; white-space: nowrap; }
.tool.mviews { margin: 0; }
.tool .bkind { margin-left: 2px; }
.views .tools { align-self: center; margin-bottom: 5px; }
/* search: a button that opens the box in its place */
.ibtn {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line);
  border-radius: 50%; background: var(--panel); color: var(--ink); cursor: pointer;
}
.ibtn:hover, .ibtn:focus-visible { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.bar > .brand + .ibtn { margin-left: auto; }
.bar.searching > .tools { display: none; }
.qx { flex: none; border: 0; background: none; color: var(--quiet); font-size: 18px; line-height: 1; padding: 0 2px; cursor: pointer; }
.qx:hover { color: var(--ink); }
.search input::-webkit-search-cancel-button { display: none; }
.search {
  flex: 1; max-width: 560px; margin-left: auto; display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--quiet);
}
.search { position: relative; }
.search:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); }
.suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 10; max-height: min(70vh, 560px); overflow: auto;
  padding: 6px 0; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  color: var(--ink); min-width: 320px;
}
.shead { padding: 8px 14px 4px; font-size: 11.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--quiet); }
.srow { display: flex; align-items: center; gap: 10px; padding: 6px 14px; text-decoration: none; cursor: pointer; }
.srow.on, .srow:hover { background: var(--mat); }
.si { flex: 0 0 38px; height: 38px; border-radius: 4px; background: var(--mat) center / cover no-repeat; }
.s-artist .si { border-radius: 50%; }
.s-museum .si { flex-basis: 52px; }
.sx { display: flex; flex-direction: column; min-width: 0; }
.st { font: 500 14.5px/1.3 var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm { font-size: 12.5px; color: var(--quiet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sall { margin-top: 4px; padding: 10px 14px; border-top: 1px solid var(--line); color: var(--accent); font-size: 14px; }
.snone { color: var(--quiet); cursor: default; }
.snone:hover { background: none; }
.pill {
  border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 6px 12px; cursor: pointer;
}

.views { display: flex; gap: 20px; padding: 10px 16px 0; border-bottom: 1px solid var(--line); }
.views a { text-decoration: none; color: var(--quiet); padding: 6px 0 9px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.views a[aria-current] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 500; }

.museum { margin: 12px 16px 0; padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.museum { display: flex; gap: 18px; align-items: flex-start; }
.m-text { flex: 1; min-width: 0; }
.m-photo { flex: 0 0 240px; margin: 0; }
.m-photo img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; background: var(--mat); }
.m-photo figcaption { margin-top: 4px; font-size: 11.5px; color: var(--quiet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.museum h1 { margin: 0; font: 600 22px/1.25 var(--serif); }
.m-place { margin: 2px 0 0; color: var(--quiet); }
.m-desc { margin: 8px 0 0; }
.m-desc:empty, .m-place:empty { display: none; }
.m-links { display: flex; flex-wrap: wrap; gap: 16px; margin: 10px 0 0; font-size: 14px; }
.m-links a { color: var(--accent); }
.m-parts { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 0; font-size: 14px; color: var(--quiet); }
.m-parts a { color: var(--accent); }

.museums { padding: 12px 16px 32px; }
.mviews { display: flex; gap: 6px; margin-bottom: 4px; }
.mviews .pill { margin-left: 0; }
/* An icon-only pill (the Museums tab's Cards, Map and Museums near me): round, the icon centred. */
.mviews .pill.ic { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; }
.mviews .pill[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.mgroup h2 { font: 600 20px/1.3 var(--serif); margin: 22px 0 10px; }
.mgroup h2 small { font: 400 13px var(--sans); color: var(--quiet); margin-left: 6px; }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.mcard { display: flex; flex-direction: column; gap: 4px; padding: 16px; text-decoration: none; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; }
.mcard:hover { box-shadow: var(--shadow); }
/* The Artists tab holds over a thousand cards, and the works grow by the hundred as they scroll: off screen, cards
   skip style and layout, so opening a menu over a long page (which restyles all of it) or an image arriving stays
   quick on a phone, instead of freezing it for seconds. (Touch screens only: it clips the lift and shadow a card
   gets under a mouse.) */
@media (hover: none) {
  .mgrid > .mcard { content-visibility: auto; contain-intrinsic-size: auto 340px; }
  .grid > .card { content-visibility: auto; contain-intrinsic-size: auto 280px; }
}
.mcard img, .mcard .ph { display: block; width: calc(100% + 32px); margin: -16px -16px 8px; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 10px 10px 0 0; background: var(--mat); }
.mcard .ph { display: grid; place-items: center; font: 500 44px var(--serif); color: var(--quiet); }
.mcard .t { font: 600 17px/1.3 var(--serif); }
.mcard .m, .mcard .n { color: var(--quiet); font-size: 13px; }
.mcard .d { font-size: 14px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mcard .d:empty { display: none; }
.mcard .n { margin-top: auto; padding-top: 4px; }

/* Museums near me (near.js): a popup asks where from; the museums then show by distance in the tab */
.near-open { display: inline-flex; align-items: center; gap: 6px; }
.near-open svg { color: var(--accent); }
.mviews .near-open[aria-pressed="true"] svg { color: inherit; }
dialog.near-pop { width: min(460px, calc(100vw - 32px)); }
dialog.near-pop[open] { display: block; }
dialog.near-pop::backdrop { background: rgb(0 0 0 / 35%); }
.near { padding: 4px 20px 18px; }
.near-intro { margin: 14px 0 16px; color: var(--quiet); font-size: 14px; }
.near .pill { margin-left: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--ink);
  font: inherit; font-size: 14px; }
.near .pill:disabled { opacity: .55; cursor: progress; }
.near-gps { width: 100%; padding: 10px 14px; border-color: var(--accent); }
.near-gps svg { color: var(--accent); }
.near-or { margin: 10px 0; text-align: center; color: var(--quiet); font-size: 13px; }
.near-form { display: flex; gap: 8px; }
.near-q { flex: 1; min-width: 0; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
  color: var(--ink); font: inherit; font-size: 14px; }
.near-msg { margin: 12px 0 0; font-size: 14px; }
.near-msg:empty { display: none; }
.near-msg.near-err { color: var(--accent); }
.near-credit { margin: 16px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--quiet); }
.near-credit a { color: inherit; }

.near-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 10px 0 4px; }
.near-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 5px 6px 5px 12px; border-radius: 999px;
  background: var(--ink); color: var(--panel); font-size: 14px; }
.near-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.near-chip.near-err { background: none; color: var(--quiet); border: 1px solid var(--line); }
.near-x { border: 0; background: none; color: inherit; font-size: 18px; line-height: 1; padding: 0 6px; cursor: pointer; opacity: .8; }
.near-bar .link { color: var(--accent); font-size: 14px; }
.near-note { margin: -4px 0 10px; color: var(--quiet); font-size: 14px; }
.near-item { display: flex; flex-direction: column; }
.near-item .mcard { flex: 1; border-radius: 10px 10px 0 0; }
.near-km { color: var(--ink); font-size: 13px; font-weight: 500; }
.near-links { display: flex; gap: 14px; padding: 7px 16px; font-size: 13.5px; background: var(--panel); border: 1px solid var(--line);
  border-top: 0; border-radius: 0 0 10px 10px; }
.near-links a, .near-olist a { color: var(--accent); }
.near-dir { position: relative; }
.near-dir summary { list-style: none; cursor: pointer; color: var(--accent); text-decoration: underline; }
.near-dir summary::-webkit-details-marker { display: none; }
.near-dir summary::after { content: " ▾"; font-size: 10px; text-decoration: none; display: inline-block; margin-left: 3px; }
.near-dirmenu { position: absolute; z-index: 5; left: -8px; top: calc(100% + 6px); display: flex; flex-direction: column; min-width: 170px;
  padding: 6px 0; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.near-dirmenu a { padding: 8px 14px; color: var(--ink) !important; text-decoration: none; font-size: 14px; }
.near-dirmenu a:first-child { font-weight: 500; }
.near-dirmenu a:hover { background: var(--mat); }
.near-olist .near-dir .near-dirmenu { left: auto; right: 0; }
.near-more { margin: 12px 0 0; color: var(--ink); font: inherit; font-size: 14px; }
.near-olist { list-style: none; margin: 0; padding: 0; columns: 2 340px; column-gap: 28px; }
.near-olist li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 7px 0; border-bottom: 1px solid var(--line);
  break-inside: avoid; font-size: 14px; }
.near-olist .near-oname { font-weight: 500; margin-right: auto; }
.near-olist a.near-oname { color: var(--ink); text-decoration: none; }
.near-olist a.near-oname:hover { text-decoration: underline; }
.near-olist .near-km { font-weight: 400; color: var(--quiet); }
.near-tag { font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--quiet); }
.acard .covers { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; width: calc(100% + 32px); margin: -16px -16px 8px;
  aspect-ratio: 3 / 1; border-radius: 10px 10px 0 0; overflow: hidden; background: var(--mat); }
.acard .covers img { display: block; width: 100%; height: 100%; margin: 0; aspect-ratio: auto; object-fit: cover; border-radius: 0; }
.acard .covers:empty { aspect-ratio: 6 / 1; }
.acard .ahead { display: flex; align-items: center; gap: 10px; }
.acard .face { flex: 0 0 auto; width: 44px; height: 44px; margin: -30px 0 0; border-radius: 50%; object-fit: cover; object-position: top;
  aspect-ratio: 1; border: 3px solid var(--panel); background: var(--mat); }
.names ul { columns: 4 200px; column-gap: 24px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.names li { break-inside: avoid; padding: 2px 0; }
.names li a { color: var(--accent); text-decoration: none; }
.names li small { color: var(--quiet); }
.names .note { margin: -4px 0 10px; color: var(--quiet); font-size: 13px; }
.a-photo { flex-basis: 160px; }
.a-photo img { aspect-ratio: 4 / 5; object-position: top; }
.a-from { margin: 4px 0 0; font-size: 12.5px; }
.a-from:empty { display: none; }
.a-from a { color: var(--quiet); }
.w-artist a { color: inherit; text-decoration-color: var(--line); text-underline-offset: 3px; }
.w-artist a:hover { color: var(--accent); }
.mmap { margin-top: 10px; height: calc(100vh - 190px); min-height: 420px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--mat); }
.alegend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; color: var(--quiet); font-size: 13px; }
.alegend ul { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; }
.alegend li { display: flex; align-items: center; gap: 5px; }
.alegend .dot { width: 10px; height: 10px; border-radius: 50%; }
.amap { height: calc(100vh - 220px); }
.mmap iframe { display: block; width: 100%; height: 100%; border: 0; }
.museums .empty { grid-column: 1 / -1; }

.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px 0; }
.fopen {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); cursor: pointer; font-weight: 500;
}
.fopen:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.badge { min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--panel); font-size: 12px; line-height: 18px; text-align: center; }
.active { display: contents; }
.achip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--accent) 14%, var(--panel)); font-size: 14px; max-width: 260px;
}
.achip .x { color: var(--quiet); font-size: 16px; line-height: 1; }
.achip:hover .x { color: var(--ink); }
.link { border: 0; background: none; color: var(--accent); cursor: pointer; padding: 6px 4px; }
.count { color: var(--quiet); font-size: 13px; }
/* the floating row of tabs, once the real one has scrolled away (today's look) */
.jump {
  position: fixed; left: 50%; bottom: calc(16px + var(--sb)); z-index: 15; transform: translateX(-50%); display: flex; align-items: center; gap: 2px;
  max-width: calc(100vw - 24px); padding: 4px; border: 1px solid var(--glass-edge); border-radius: 999px;
  /* frosted glass: a light, see-through bar that sharply blurs what passes under it */
  background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: 0 1px 0 rgb(255 255 255 / 12%) inset, 0 0 0 6px var(--glow), 0 0 36px 14px var(--glow),
    0 8px 24px rgb(0 0 0 / 22%), 0 1px 3px rgb(0 0 0 / 18%);
  font-size: 14px; white-space: nowrap;
}
.jump a { padding: 6px 12px; border-radius: 999px; text-decoration: none; color: color-mix(in srgb, var(--ink) 72%, transparent); }
.jump a:hover { color: var(--ink); background: var(--mat); }
.jump a[aria-current] { color: var(--panel); background: var(--ink); }
.jump-top { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--quiet); cursor: pointer; }
.jump-top:hover { color: var(--ink); background: var(--mat); }
.jump.near { display: none; }
:root:not(.look) .resume { bottom: 68px; }
@media (max-width: 720px) {
  .jump { bottom: calc(12px + var(--sb)); font-size: 13px; }
  .jump a { padding: 6px 8px; }
  .jump.near { display: flex; }
  .jump.near .jump-top { display: none; }
  /* on a phone the floating bar is the row of tabs; the row under the header keeps only this tab's controls */
  .views > a { display: none; }
  .views { padding-top: 8px; }
  .views .tools { margin-top: 0; }
}
.resume {
  position: fixed; left: 50%; bottom: calc(16px + var(--sb)); z-index: 20; transform: translateX(-50%); display: flex; align-items: center; gap: 8px;
  max-width: calc(100% - 32px); padding: 6px 8px 6px 16px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); box-shadow: var(--shadow); font-size: 13.5px; white-space: nowrap;
}
.sort select {
  padding: 5px 26px 5px 10px; border: 1px solid var(--line); border-radius: 8px; background-color: var(--panel); color: var(--ink);
  appearance: none; cursor: pointer; font-size: 13.5px;
  background-image: linear-gradient(45deg, transparent 50%, var(--quiet) 50%), linear-gradient(135deg, var(--quiet) 50%, transparent 50%);
  background-position: right 12px center, right 7px center; background-size: 5px 5px; background-repeat: no-repeat;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the filter panel: a drawer over the grid on wide screens, the whole screen on a phone */
dialog.fpanel {
  width: min(560px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; border-radius: 0;
}
dialog.fpanel[open] { display: flex; flex-direction: column; }
dialog.fpanel::backdrop { background: rgb(0 0 0 / 35%); }
.fp-head { display: flex; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.fp-head h2 { margin: 0; font: 600 20px/1.2 var(--serif); }
.fp-head .close { position: static; margin-left: auto; }
.fp-body { flex: 1; overflow: auto; padding: 4px 20px 20px; overscroll-behavior: contain; }
.fp-sec { padding: 18px 0 6px; border-bottom: 1px solid var(--line); }
.fp-sec:last-child { border-bottom: 0; }
.fp-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.fp-h h3 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--quiet); }
.fp-val { font: 600 15px/1.3 var(--serif); color: var(--accent); }
.fp-h .link { padding: 0; font-size: 13px; }
.fp-hint { margin: -6px 0 8px; color: var(--quiet); font-size: 12.5px; }
.fp-foot { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--line); }
.fp-show { margin-left: auto; padding: 9px 18px; border: 0; border-radius: 999px; background: var(--ink); color: var(--panel); font-weight: 500; cursor: pointer; }

.strip, .axis { display: grid; grid-template-columns: repeat(var(--n, 24), minmax(0, 1fr)); column-gap: 2px; }
.strip { height: 110px; align-items: end; touch-action: none; user-select: none; -webkit-user-select: none; }
.cbar { height: 100%; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: flex-end; min-width: 0; }
.cbar::before {
  content: ""; display: block; width: 100%; height: calc(var(--h) * 100%); min-height: 2px; border-radius: 2px 2px 0 0;
  background: color-mix(in srgb, var(--quiet) 45%, transparent); transition: background .1s;
}
.cbar:hover::before { background: color-mix(in srgb, var(--accent) 60%, transparent); }
.cbar.on::before { background: var(--accent); }
.cbar.none { cursor: default; }
.cbar.none::before { background: var(--line); }
.cbar:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.axis { margin-top: 3px; padding-top: 3px; border-top: 1px solid var(--line); color: var(--quiet); font-size: 11.5px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.axis span { border-left: 1px solid var(--line); padding-left: 3px; }
.eras { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.kind {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 6px; padding: 0 0 8px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); cursor: pointer; text-align: left; overflow: hidden;
}
.kind:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.kind[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.kimg { grid-column: 1 / -1; display: block; aspect-ratio: 4 / 3; margin-bottom: 4px; background: var(--mat) center / cover no-repeat; }
.kt { padding-left: 9px; font-size: 13.5px; line-height: 1.25; }
.kn { padding-right: 9px; color: var(--quiet); font-size: 12px; font-variant-numeric: tabular-nums; }

.fp-q { width: 100%; margin-bottom: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); outline: 0; }
.fp-q:focus { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.plist { max-height: 300px; overflow: auto; margin: 0 -6px; overscroll-behavior: contain; }
.prow {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 5px 6px; border: 0; border-radius: 6px;
  background: none; cursor: pointer; text-align: left;
}
.prow:hover { background: var(--mat); }
.prow[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 14%, var(--panel)); }
.prow[aria-selected="true"] .pt { color: var(--accent); font-weight: 500; }
.pimg { flex: 0 0 40px; height: 40px; border-radius: 4px; background: var(--mat) center / cover no-repeat; }
.px { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
.ps { font-size: 12.5px; color: var(--quiet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn { color: var(--quiet); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pnone { margin: 0; padding: 10px 6px; color: var(--quiet); font-size: 13px; }
.regions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.regionbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 10px 0 4px; }
.regionbar .regions, .regions.regionbar { margin-bottom: 0; }
#m-works { font-size: 13.5px; }
.chip {
  display: inline-flex; align-items: baseline; gap: 2px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); cursor: pointer; font-size: 13.5px; white-space: nowrap;
}
.chip small { color: var(--quiet); font-size: 12px; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.chip[aria-pressed="true"] small { color: inherit; opacity: .7; }

.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px 16px; padding: 12px 16px 32px;
}
.card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; min-width: 0; }
.card img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: contain; background: var(--mat); border-radius: 4px;
  transition: transform .15s ease;
}
.card:hover img { transform: translateY(-2px); box-shadow: var(--shadow); }
.card.noimg img { opacity: .4; }
.cap { display: flex; flex-direction: column; min-width: 0; }
.cap .t { font: 500 14px/1.3 var(--serif); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cap .m { font-size: 12.5px; color: var(--quiet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap .fame { color: var(--accent); font: 11px/1 var(--sans); letter-spacing: .5px; margin-right: 5px; vertical-align: 2px; }
/* A work with a story behind it (stories/): a small open book after the title, and in the Fame filter's "With a story". */
.cap .story { width: 12px; height: 12px; color: var(--accent); vertical-align: -1px; }
.kind .kt .story { width: 13px; height: 13px; vertical-align: -2px; }
.empty { text-align: center; color: var(--quiet); padding: 48px 16px; }

dialog {
  width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 10px;
  background: var(--panel); color: var(--ink); box-shadow: var(--shadow);
}
dialog[open] { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); }
dialog::backdrop { background: rgb(0 0 0 / 55%); }
.close {
  position: absolute; top: 8px; right: 10px; z-index: 1; width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: var(--panel); font-size: 22px; line-height: 1; cursor: pointer;
}
.w-figure { position: relative; margin: 0; background: var(--mat); display: flex; align-items: center; justify-content: center; min-height: 320px; }
/* previous / next: each edge of the image is a tall hit area whose arrow shows only while the pointer is over it */
.step {
  position: absolute; top: 0; bottom: 0; width: min(22%, 120px); padding: 0 10px; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; color: var(--ink); font-size: 34px; line-height: 1; opacity: 0; transition: opacity .15s;
  text-shadow: 0 0 6px var(--panel);
}
.step::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.step.prev { left: 0; justify-content: flex-start; }
.step.next { right: 0; justify-content: flex-end; }
.step.prev::before { background: linear-gradient(to right, color-mix(in srgb, var(--panel) 45%, transparent), transparent); }
.step.next::before { background: linear-gradient(to left, color-mix(in srgb, var(--panel) 45%, transparent), transparent); }
.step:hover, .step:focus-visible { opacity: 1; }
.step:focus-visible { outline: none; }
/* touch screens have no hover: keep the arrows faintly visible there */
@media (hover: none) { .step { opacity: .7; } .step::before { display: none; } }
.w-pos { position: absolute; left: 10px; bottom: 8px; padding: 2px 8px; border-radius: 999px; font-size: 12px;
  background: color-mix(in srgb, var(--panel) 80%, transparent); color: var(--quiet); font-variant-numeric: tabular-nums; }
#f-show:disabled { opacity: .5; cursor: default; }

/* slideshow: black stage, the work as large as it fits, a caption and controls below */
.show { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border-radius: 0;
  background: #0b0b0c; color: #ececee; box-shadow: none; }
.show[open] { display: flex; flex-direction: column; }
.show::backdrop { background: #0b0b0c; }
.sh-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 24px 24px 8px; }
.sh-stage img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: pointer; opacity: 0; transition: opacity .6s ease; }
.sh-stage img.in { opacity: 1; }
.sh-stage { overflow: hidden; }
.sh-stage img { will-change: transform; }
/* The Text switch (motion.js): a few lines about the work under the bar's first row, as wide as reads well. */
.sh-desc { flex-basis: 100%; order: 5; max-width: 76ch; margin: -4px 0 0; color: #c4c4cc; font-size: 14px; line-height: 1.5;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.sh-desc[hidden] { display: none; }
.sh-line { color: #fff; font-style: italic; }
.sh-mpos { display: none; }
@media (max-width: 1100px) and (min-width: 721px) { .sh-ctl .t-tog span { display: none; } }
.sh-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 10px 24px 14px; }
.sh-cap { flex: 1; min-width: 200px; display: flex; flex-direction: column; }
.sh-t { font: 500 18px/1.3 var(--serif); }
.sh-m { color: #a1a1aa; font-size: 13.5px; }
.sh-ctl { display: flex; align-items: center; gap: 6px; }
.sh-ctl button { display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid #34343a;
  border-radius: 999px; background: none; color: inherit; font-size: 18px; line-height: 1; white-space: nowrap; cursor: pointer; }
/* Icon buttons: drawn icons, centred in the circle (font glyphs like ‹ › ❚❚ × sat off centre, by font). Play and pause
   both live in the button; data-on says which shows. */
.sh-ctl button.ic { width: 38px; padding: 0; }
.sh-ctl [data-on="true"] .i-play, .sh-ctl [data-on="false"] .i-pause { display: none; }
.sh-ctl button:hover, .sh-ctl button:focus-visible { background: #222226; }
#sh-info { font-size: 14px; }
#sh-speed { height: 38px; padding: 0 30px 0 14px; border: 1px solid #34343a; border-radius: 999px; background-color: #0b0b0c; color: inherit;
  font-size: 14px; line-height: 1; cursor: pointer; color-scheme: dark; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #a1a1aa 50%), linear-gradient(135deg, #a1a1aa 50%, transparent 50%);
  background-position: right 15px center, right 10px center; background-size: 5px 5px; background-repeat: no-repeat; }
.sh-pos { margin-right: 6px; color: #a1a1aa; white-space: nowrap; font-size: 13px; font-variant-numeric: tabular-nums; }
.sh-time { height: 2px; background: #222226; }
.sh-time span { display: block; height: 100%; width: 0; background: var(--accent); }
@media (prefers-reduced-motion: reduce) { .sh-stage img { transition: none; } }
.w-figure img { max-width: 100%; max-height: calc(100vh - 32px); object-fit: contain; display: block; cursor: zoom-in; }
.zoom { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border-radius: 0;
  background: transparent; box-shadow: none; }
.zoom[open] { display: flex; align-items: center; justify-content: center; }
.zoom::backdrop { background: rgb(0 0 0 / 88%); }
.zoom img { max-width: 100vw; max-height: 100vh; object-fit: contain; cursor: zoom-out; }
.w-text { padding: 28px 24px 48px; overflow: auto; }
/* Side by side, the dialog keeps to the screen: a long text (a summary and a story) scrolls in its own column, and
   the picture stays beside it instead of stretching to the text's height. */
dialog[open] > .w-figure, dialog[open] > .w-text { max-height: calc(100vh - 32px); }
.w-text h1 { margin: 0 32px 4px 0; font: 600 24px/1.25 var(--serif); }
.w-kicker { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; color: var(--today-work); font-size: 13px;
  font-weight: 600; letter-spacing: .02em; }
.w-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.w-kicker[hidden] { display: none; }
.w-artist { margin: 0 0 16px; color: var(--quiet); font-size: 16px; }
.w-desc { margin: -10px 0 16px; color: var(--quiet); font-size: 14px; }
.w-desc:empty { display: none; }
.w-summary { margin: 0 0 16px; }
.w-summary p { margin: 0; }
.w-summary .w-summary-from { margin-top: 4px; font-size: 12.5px; }
.w-summary-from a { color: var(--quiet); }
.w-story { margin: 0 0 18px; padding: 14px 0 0; border-top: 1px solid var(--line); }
/* The story's heading is a badge, with the book the cards mark a story with. */
.w-story h2.w-story-badge { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 4px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font: 500 13.5px/1.3 var(--sans); }
.w-story p { margin: 0 0 10px; }
.w-story .w-story-from { margin: 2px 0 0; font-size: 12.5px; color: var(--quiet); }
.w-story-from a { color: var(--quiet); }
.w-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 16px; }
.w-facts dt { color: var(--quiet); font-size: 13px; padding-top: 1px; }
.w-facts dd { margin: 0; }
.w-about h2 { font-size: 13px; font-weight: 500; color: var(--quiet); margin: 0 0 6px; }
.w-about ul { margin: 0 0 16px; padding-left: 18px; }
.w-about a { color: var(--accent); }
.w-credit { font-size: 13px; color: var(--quiet); margin: 0 0 8px; }
.w-links { display: flex; gap: 16px; font-size: 14px; margin: 0; }
.w-links a { color: var(--accent); }

.foot { padding: 16px; color: var(--quiet); font-size: 12.5px; border-top: 1px solid var(--line); }

@media (max-width: 720px) {
  .bar { flex-wrap: wrap; row-gap: 8px; }
  .bar > .tools, .views .tools { order: 5; flex: 1 1 100%; margin: 0; }
  .views { flex-wrap: wrap; row-gap: 0; }
  .views .tools { margin: 4px 0 8px; }
  .tool { flex: 1 1 auto; }
  .tool .count { margin-right: auto; }
  .search { max-width: none; min-width: 0; }
  .bar > .ibtn { margin-left: auto; }
  .bar > .pill { margin-left: 0; }
  .tool .bkind { max-width: 8.5em; }
  .tool { gap: 5px; }
  .tool .pill, .tool .fopen { padding: 5px 10px; }
  .tool .count { font-size: 12px; margin-right: auto; }
  .tool select { font-size: 13px; }
  #f-show span { display: none; }   /* the slideshow button is its icon on a phone */
  .suggest { min-width: 0; max-height: 65vh; }
  .pill { margin-left: auto; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px 12px; }
  .fp-head, .fp-foot { padding-inline: 16px; }
  .fp-body { padding-inline: 16px; }
  .strip, .axis { column-gap: 1px; }
  .strip { height: 84px; }
  .kinds { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
  .museum { flex-direction: column; }
  .m-photo { flex-basis: auto; width: 100%; }
  .a-photo { width: 140px; }
}
/* On a phone held upright, a work and the slideshow stack (sideways, they keep the wide layout: the end of this file). */
@media (max-width: 720px) and (orientation: portrait), (max-width: 720px) and (min-height: 501px) {
  dialog[open] { grid-template-columns: 1fr; overflow: auto; }
  dialog[open] > .w-figure, dialog[open] > .w-text { max-height: none; }
  .w-figure { min-height: 240px; }
  .w-figure img { max-height: 60vh; }
  .sh-stage { padding: 12px 8px 4px; }
  /* Two rows: the caption with the count and the Voice and Music switches beside it, then the player's buttons
     spread across the width (the controls' box lets go of its children so they can sit in either row). */
  .sh-bar { gap: 5px 4px; justify-content: space-between; padding: 8px 12px 12px; }
  .sh-bar::after { content: ""; flex-basis: 100%; }
  .sh-cap { flex: 1 1 0; min-width: 0; }
  .sh-ctl { display: contents; }
  /* With the Text and Motion switches beside Voice and Music, the count moves under the title, after the date. */
  .sh-bar .sh-ctl > .sh-pos { display: none; }
  .sh-mpos { display: inline; font-variant-numeric: tabular-nums; }
  .sh-sound, .sh-view { order: 2; gap: 4px; margin: 0; }
  .sh-bar .t-sound .t-tog { min-width: 34px; width: 34px; height: 34px; padding: 0; }
  .sh-bar::after { order: 3; }
  .sh-desc { order: 3; margin: 2px 0 4px; font-size: 13.5px; -webkit-line-clamp: 4; line-clamp: 4; }
  .sh-bar:has(.sh-desc:not([hidden]))::after { display: none; }
  .sh-ctl > :is(button, select) { order: 4; }
  #sh-speed { padding: 0 24px 0 12px; background-position: right 13px center, right 8px center; }
}

/* Architecture */
.architecture .mviews { flex-wrap: wrap; align-items: center; }
.bkind { margin-left: auto; padding: 6px 28px 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--quiet) 50%), linear-gradient(135deg, var(--quiet) 50%, transparent 50%);
  background-position: right 13px center, right 8px center; background-size: 5px 5px; background-repeat: no-repeat; }
.bcard { position: relative; }
.bcard img { aspect-ratio: 4 / 3; }
.bcard .badge { position: absolute; top: 8px; right: 8px; padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 600;
  letter-spacing: .03em; color: #fff; background: rgb(0 0 0 / 55%); backdrop-filter: blur(4px); }
.s-building .si { flex-basis: 52px; }
.b-figure { position: relative; flex-direction: column; }
.b-figure img { width: 100%; max-height: calc(100vh - 64px); object-fit: contain; }
.b-figure figcaption { width: 100%; padding: 6px 12px; font-size: 11.5px; color: var(--quiet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-figure figcaption a { color: inherit; }
.b-works h2 { font-size: 13px; font-weight: 500; color: var(--quiet); margin: 0 0 8px; }
.b-works > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; margin: 0 0 16px; }
.bw { display: flex; flex-direction: column; gap: 4px; text-decoration: none; font-size: 12px; line-height: 1.3; min-width: 0; }
.bw img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; background: var(--mat); }
.bw span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (max-width: 720px) {
  .tool .bkind { margin-left: auto; }
  .b-figure img { max-height: 50vh; }
}

/* the new look (ways.js): no row of tabs; one quiet button for the ways to look, beside the name in the header */
.look .views { display: none; }
.ways {
  display: flex; align-items: center; gap: 7px; flex: none; padding: 6px 12px 6px 10px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--panel); font-size: 14px; cursor: pointer;
}
.ways::after { content: ""; width: 5px; height: 5px; margin: -3px 0 0 2px; border: solid var(--quiet); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.ways:hover, .ways:focus-visible { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.foot { padding-bottom: 72px; }
dialog.wpanel {
  width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 72px); margin: 60px auto auto 16px; overflow: auto;
}
dialog.wpanel[open] { display: block; }
dialog.wpanel::backdrop { background: rgb(0 0 0 / 25%); }
.ways-list { display: flex; flex-direction: column; padding: 8px; }
.way {
  display: flex; align-items: flex-start; gap: 14px; padding: 12px; border: 0; border-radius: 8px; background: none;
  text-align: left; cursor: pointer; color: var(--quiet);
}
.way svg { flex: none; margin-top: 3px; }
.way:hover, .way:focus-visible { background: var(--mat); outline: none; }
.way[aria-current] { color: var(--accent); }
.way-text { display: flex; flex-direction: column; }
.way-name { font: 600 17px/1.3 var(--serif); color: var(--ink); }
.way-line { font-size: 13px; color: var(--quiet); }
.wp-set { padding: 14px 20px 18px; border-top: 1px solid var(--line); }
/* Settings (the new look): a button at the end of the header, its panel dropping down at the right */
dialog.spanel { margin: 60px 16px auto auto; width: min(400px, calc(100vw - 32px)); }
.spanel .wp-set { border-top: 0; padding-top: 16px; }
.spanel .wp-row { justify-content: space-between; }
.spanel .wp-check { justify-content: flex-start; }
.bar > #settings { margin-left: 0; }
.bar.searching > #share { display: none; }
@media (max-width: 720px), (orientation: landscape) and (max-height: 500px) { .bar > #share + .ibtn { margin-left: 0; } }
.toast { padding: 8px 16px; z-index: 21; color: var(--ink); }
dialog .toast { bottom: 90px; }
/* the exhibition designs in the settings, each a small picture of itself */
.wp-design { margin: 4px 0 14px; }
.wp-design .wp-row { margin-bottom: 8px; }
.w-design { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.wd { display: flex; flex-direction: column; gap: 5px; padding: 0; border: 0; background: none; cursor: pointer; text-align: center; font-size: 12.5px; color: var(--quiet); }
.wd[aria-checked="true"] { color: var(--ink); font-weight: 600; }
.wd-mini { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; border: 2px solid transparent;
  outline: 1px solid var(--line); transition: border-color .2s ease; }
.wd:hover .wd-mini { outline-color: var(--quiet); }
.wd[aria-checked="true"] .wd-mini { border-color: var(--accent); outline-color: var(--accent); }
.wd-mini i { position: absolute; display: block; }
.wd-mini .bg { inset: 0; }
.wd-mini .pic { background: var(--wd-img, #888) center / cover; }
.wd-mini .peek { display: none; background: var(--wd-img, #888) center / cover; opacity: .45; }
.wd-mini .txt { display: flex; flex-direction: column; gap: 3px; }
.wd-mini .txt b { display: block; height: 3px; border-radius: 2px; background: currentColor; opacity: .55; }
.wd-mini .txt b:first-child { width: 70%; height: 4px; opacity: .9; }
.wd-mini .txt b:last-child { width: 85%; }
.wd-stage { color: #e4e4e7; }
.wd-stage .bg { background: #0b0b0c; }
.wd-stage .pic { left: 10%; top: 14%; width: 46%; height: 72%; }
.wd-stage .txt { right: 0; top: 0; bottom: 0; width: 30%; padding: 14% 8%; background: #1a1a1d; }
.wd-poster { color: #fff; }
.wd-poster .bg { inset: -8px; background: var(--wd-img, #333) center / cover; filter: blur(6px) brightness(.45); }
.wd-poster .pic { left: 28%; top: 8%; width: 44%; height: 84%; box-shadow: 0 4px 10px rgb(0 0 0 / 50%); }
.wd-poster .txt { left: 6%; bottom: 8%; width: 32%; padding: 5%; border-radius: 3px; background: rgb(14 14 16 / 78%); }
.wd-wall { color: #2a2621; }
.wd-wall .bg { background: radial-gradient(ellipse 60% 60% at 40% 40%, #f7f3ec, #e2dbcf); }
.wd-wall .pic { left: 22%; top: 16%; width: 36%; height: 64%; box-shadow: 0 4px 8px rgb(40 30 20 / 35%); }
.wd-wall .peek { display: block; top: 32%; width: 10%; height: 32%; }
.wd-wall .peek.a { left: -4%; }
.wd-wall .peek.b { left: 63%; }
.wd-wall .txt { right: 6%; top: 34%; width: 22%; padding-left: 4%; border-left: 1px solid #c9bfae; }
.wd-catalogue { color: #2b2722; }
.wd-catalogue .bg { background: linear-gradient(to right, #f6f1e6 50%, #f8f4eb 50%); }
.wd-catalogue .bg::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 8%; background: linear-gradient(to right, rgb(60 45 25 / 15%), transparent); }
.wd-catalogue .pic { left: 9%; top: 14%; width: 32%; height: 62%; border: 3px solid #fff; outline: 1px solid #ddd3c1; }
.wd-catalogue .txt { left: 58%; top: 22%; width: 34%; }
.wd-catalogue .txt b:first-child { width: 30%; height: 7px; background: #8b3a2b; }
@media (max-width: 720px) { .w-design { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wp-set h3 { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--quiet); }
.wp-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; margin-bottom: 8px; }
.wp-row select { padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.wp-set .fp-hint { margin: 0 0 12px; }
.wp-check { cursor: pointer; }
.wp-check input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
/* quiet controls: they fade after a few seconds of stillness and come back with any movement */
.look .close, .look .w-pos, .look .sh-bar, .look .sh-time { transition: opacity .6s ease; }
.quiet #work .close, .quiet #work .w-pos, .quiet #work .step, .quiet .sh-bar, .quiet .sh-time { opacity: 0; }
.quiet .show, .quiet .show * { cursor: none; }
@media (prefers-reduced-motion: reduce) { .look .close, .look .w-pos, .look .sh-bar, .look .sh-time { transition: none; } }
@media (max-width: 720px) {
  .ways { padding: 5px 10px 5px 8px; font-size: 13.5px; }
  dialog.wpanel { width: 100vw; max-width: 100vw; margin: 0 0 auto; border-radius: 0 0 14px 14px; max-height: 90dvh; }
}
/* Tours: the Tours tab, and the player: the work large on a dark stage, the story beside it, the life line below */
.tintro { max-width: 720px; margin: 6px 0 0; color: var(--quiet); }
.acard { position: relative; }
.acard > .badge, .tcard .badge { position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11px;
  font-weight: 600; letter-spacing: .03em; color: #fff; background: rgb(0 0 0 / 55%); backdrop-filter: blur(4px); }
.tcard .covers { aspect-ratio: 2 / 1; grid-auto-flow: row; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.tcard .covers img:first-child { grid-row: span 2; }
.tcard .covers img:nth-child(2) { grid-column: span 2; }
.tcard .d { -webkit-line-clamp: 4; }
.a-tour { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 8px 16px; border-radius: 999px;
  background: var(--ink); color: var(--panel); text-decoration: none; font-weight: 500; font-size: 14px; }
.a-tour:hover { background: color-mix(in srgb, var(--ink) 85%, var(--accent)); }
.a-tour-n { font-weight: 400; opacity: .75; }
.a-tour-n::before { content: "·"; margin-right: 8px; }

.tour { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border-radius: 0;
  background: #0b0b0c; color: #ececee; box-shadow: none; }
.tour[open] { display: grid; grid-template-columns: minmax(0, 1fr) min(400px, 36vw); grid-template-rows: minmax(0, 1fr) auto auto;
  grid-template-areas: "stage panel" "foot foot" "prog prog"; }
.tour::backdrop { background: #0b0b0c; }
.t-stage { grid-area: stage; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 28px 24px 12px; }
.t-stage img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; opacity: 0; transition: opacity .5s ease; }
.t-stage img.in { opacity: 1; }
.tour[data-mode="stop"] .t-stage { overflow: hidden; }
.tour[data-mode="cover"] .t-stage img { max-height: min(100%, 520px); border-radius: 6px; cursor: pointer; }
.t-panel { grid-area: panel; min-height: 0; overflow: auto; padding: 24px 28px 20px; border-left: 1px solid #222226; background: #111113; }
.t-head { position: relative; padding-right: 80px; }
.t-kicker { margin: 0 0 4px; font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.t-head h1 { margin: 0 0 18px; font: 600 20px/1.3 var(--serif); color: #a1a1aa; }
.t-x { position: absolute; top: -6px; right: -10px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none;
  color: inherit; font-size: 24px; line-height: 1; cursor: pointer; }
.t-x:hover, .t-x:focus-visible { background: #222226; }
.t-x:focus:not(:focus-visible) { outline: none; }
.t-when { margin: 0 0 6px; color: #a1a1aa; font-size: 14px; font-variant-numeric: tabular-nums; }
.t-work { display: block; margin: 0 0 14px; font: 600 25px/1.25 var(--serif); color: #fff; text-decoration: none; }
.t-work:hover { text-decoration: underline; text-decoration-color: #52525b; text-underline-offset: 4px; }
.t-text { margin: 0 0 18px; font: 17px/1.65 var(--serif); color: #e4e4e7; }
.t-story { margin: -2px 0 12px; font: italic 16px/1.5 var(--serif); color: #fff; }
.tour[data-mode="end"] .t-when { font: 600 22px/1.3 var(--serif); color: #fff; margin-bottom: 12px; }
.t-links { display: flex; flex-wrap: wrap; gap: 18px; margin: 0; font-size: 14px; }
.t-links a, .t-back { color: var(--accent); }
.t-begin { padding: 10px 20px; border: 0; border-radius: 999px; background: var(--accent); color: #18181b; font-weight: 600; cursor: pointer; }
.t-begin:hover { filter: brightness(1.1); }
.t-acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }
.t-acts .pill { background: none; border-color: #3f3f46; }
.t-list { margin: 20px 0 0; padding: 0; list-style: none; border-top: 1px solid #222226; }
.t-list button { display: flex; gap: 12px; width: 100%; padding: 9px 2px; border: 0; border-bottom: 1px solid #222226; background: none;
  text-align: left; cursor: pointer; font: 15px/1.35 var(--serif); }
.t-list button:hover { color: var(--accent); }
.t-list .y { flex: 0 0 auto; min-width: 3.4em; color: #71717a; font: 13px/1.6 var(--sans); font-variant-numeric: tabular-nums; }
.t-more { margin: 24px 0 0; font-size: 12px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: #71717a; }
.t-back { display: inline-block; margin-top: 18px; font-size: 14px; }
.t-note { margin: 18px 0 0; color: #71717a; font-size: 12px; }
.t-foot { grid-area: foot; display: flex; align-items: center; gap: 24px; padding: 10px 24px 14px; border-top: 1px solid #222226; }
.t-line { flex: 1; min-width: 0; padding: 0 6px; }
.t-track { position: relative; height: 22px; margin: 0 8px 18px; }
.t-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: #34343a; border-radius: 2px; }
.t-dot { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; padding: 0; border: 2px solid #71717a;
  border-radius: 50%; background: #0b0b0c; cursor: pointer; }
.t-dot.past { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 40%, #0b0b0c); }
.t-dot.on { width: 16px; height: 16px; margin: -8px 0 0 -8px; border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 4px rgb(245 158 11 / 25%); }
.t-dot::after { content: ""; position: absolute; inset: -8px; }
.t-y { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); color: #71717a; font-size: 11.5px; white-space: nowrap;
  font-variant-numeric: tabular-nums; pointer-events: none; }
.t-dot.on .t-y { top: 20px; color: var(--accent); }
.t-ctl button:disabled { opacity: .35; cursor: default; background: none; }
.t-time { grid-area: prog; }
@media (prefers-reduced-motion: reduce) { .t-stage img { transition: none; } }
@media (max-width: 720px) and (orientation: portrait), (max-width: 720px) and (min-height: 501px) {
  .tour[open] { grid-template-columns: 1fr; grid-template-rows: minmax(38vh, auto) auto auto auto; overflow: auto;
    grid-template-areas: "stage" "foot" "panel" "prog"; }
  .t-stage { height: 46vh; padding: 12px 8px 6px; }
  .tour[data-mode="cover"] .t-stage { height: 34vh; }
  .t-panel { border-left: 0; overflow: visible; padding: 18px 16px 28px; }
  .t-foot { flex-wrap: wrap; gap: 8px; padding: 8px 12px; position: sticky; top: 0; z-index: 1; background: #0b0b0c; }
  .t-line { flex-basis: 100%; }
  .t-ctl { width: 100%; justify-content: space-between; }
  .t-work { font-size: 22px; }
  .t-text { font-size: 16px; }
}
@media (max-width: 720px) and (orientation: portrait), (max-width: 720px) and (min-height: 501px) {
  .t-x { position: fixed; top: 8px; right: 8px; z-index: 2; background: rgb(0 0 0 / 55%); }
}
.t-panel:focus { outline: none; }
.acard .face.bldg { border-radius: 8px; object-position: center; }

/* the distance ladder in the room (room.js): Everything · Around it · The work · Closer */
.ladder { display: flex; gap: 2px; padding: 3px; border: 1px solid #34343a; border-radius: 999px; flex: none; transition: opacity .6s ease; }
.ladder button { padding: 6px 12px; border: 0; border-radius: 999px; background: none; color: #a1a1aa; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.ladder button:hover, .ladder button:focus-visible { color: #ececee; background: #222226; outline: none; }
.ladder button[aria-pressed="true"] { background: var(--accent); color: #1b1a14; }
/* Around it: rows of nearby works, beside the room's stage or under a work's label */
.t-around h3, .w-around h3 { margin: 18px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #a1a1aa; }
.t-around h3:first-child { margin-top: 4px; }
.ar-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ar-work { display: flex; flex-direction: column; gap: 4px; text-decoration: none; min-width: 0; }
.ar-work img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; background: #222226; transition: transform .2s ease; }
.ar-work:hover img, .ar-work:focus-visible img { transform: scale(1.03); }
.ar-cap { font-size: 11.5px; line-height: 1.3; color: #a1a1aa; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ar-none { color: #a1a1aa; }
.w-around { margin-top: 20px; padding-top: 4px; border-top: 1px solid var(--line); }
.w-around > h2 { margin: 14px 0 0; font: 600 16px/1.3 var(--serif); }
.w-around h3, .w-around .ar-cap, .w-around .ar-none { color: var(--quiet); }
.w-around .ar-work img { background: var(--mat); }
.w-around .ar-strip { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
.quiet .ladder, .quiet #tour .t-ctl, .quiet #tour .t-x { opacity: 0; }
.look #tour .t-ctl, .look #tour .t-x { transition: opacity .6s ease; }
@media (max-width: 720px) and (orientation: portrait), (max-width: 720px) and (min-height: 501px) {
  .ladder { order: -1; width: 100%; justify-content: space-between; }
  .ladder button { padding: 6px 8px; font-size: 13px; }
}
/* Install app (install.js): a pill beside the language switch, and the steps for browsers without a prompt */
.install { display: flex; align-items: center; gap: 6px; }
.install:not([hidden]) + .pill { margin-left: 0; }
@media (min-width: 721px), (orientation: landscape) and (max-height: 500px) { dialog.ipanel { margin: auto; } }
.ip-body { padding: 16px 20px 18px; }
.ip-body .fp-hint { margin: 0 0 12px; font-size: 13.5px; }
.i-steps { margin: 0 0 14px; padding-left: 22px; }
.i-steps li { margin-bottom: 8px; }
.ip-body .link { padding: 0; font-size: 13px; color: var(--quiet); }
.w-install { padding: 0; font-size: 14px; }
@media (max-width: 720px), (orientation: landscape) and (max-height: 500px) {
  .install span { display: none; }
  .install { padding: 6px 9px; }
}

/* Exhibition designs (room.js): #tour[data-design] is stage (the rules above), poster, wall or catalogue */
.t-glow, .t-peek, .t-plate { display: none; }

/* Poster: the work fills the screen over a glow of itself, the label floats over the lower corner */
.tour[data-design="poster"] .t-stage { position: relative; overflow: hidden; }
.tour[data-design="poster"] .t-glow { display: block; position: absolute; inset: -60px; background: center / cover no-repeat;
  filter: blur(48px) brightness(.42) saturate(1.25); transition: background-image .6s ease; }
.tour[data-design="poster"] .t-stage img { position: relative; box-shadow: 0 30px 90px rgb(0 0 0 / 55%); }
.tour[data-design="poster"] .t-glow.first { inset: 0; filter: brightness(.5) saturate(1.05); }
.tour[data-design="poster"][data-mode="cover"] .t-stage img { display: none; }
@media (min-width: 721px), (orientation: landscape) and (max-height: 500px) {
  .tour[data-design="poster"][open] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "foot" "prog"; }
  .tour[data-design="poster"] .t-stage { grid-row: 1; grid-column: 1; padding: 40px 40px 24px; }
  .tour[data-design="poster"] .t-panel { grid-row: 1; grid-column: 1; align-self: end; justify-self: start; z-index: 1;
    width: min(400px, 40vw); max-height: 58%; margin: 0 0 24px 28px; padding: 20px 22px 18px; border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 14px; background: rgb(14 14 16 / 74%); backdrop-filter: blur(14px); }
  .tour[data-design="poster"][data-mode="stop"] .t-head h1 { display: none; }
  .tour[data-design="poster"][data-mode="stop"] .t-work { font-size: 22px; margin-bottom: 10px; }
  .tour[data-design="poster"][data-mode="stop"] .t-text { font-size: 15.5px; line-height: 1.6; }
  /* the cover: the exhibition's name, large, over its first work */
  .tour[data-design="poster"][data-mode="cover"] .t-panel { align-self: center; justify-self: center; width: min(640px, 80vw); max-height: 86%;
    margin: 0; padding: 0; border: 0; background: none; backdrop-filter: none; text-align: center; text-shadow: 0 2px 24px rgb(0 0 0 / 60%); }
  .tour[data-design="poster"][data-mode="cover"] .t-head { padding: 0; }
  .tour[data-design="poster"][data-mode="cover"] .t-x { position: fixed; top: 12px; right: 16px; }
  .tour[data-design="poster"][data-mode="cover"] .t-kicker { letter-spacing: .24em; font-size: 12.5px; }
  .tour[data-design="poster"][data-mode="cover"] .t-head h1 { margin: 10px 0 18px; font: 600 clamp(38px, 6vw, 72px)/1.08 var(--serif); color: #fff; }
  .tour[data-design="poster"][data-mode="cover"] .t-when { font-size: 16px; color: #e4e4e7; }
  .tour[data-design="poster"][data-mode="cover"] .t-text { max-width: 34em; margin: 0 auto 26px; font-size: 18px; }
  .tour[data-design="poster"][data-mode="cover"] .t-list, .tour[data-design="poster"][data-mode="cover"] .t-note { display: none; }
  .tour[data-design="poster"][data-mode="cover"] .t-begin { padding: 13px 28px; font-size: 16px; }
  .tour[data-design="poster"] .t-foot { border-top: 0; background: #0b0b0c; }
}

/* Museum wall: a lit warm wall, the work hung with a shadow, its neighbours at the edges, a wall label beside it */
.tour[data-design="wall"], .tour[data-design="wall"]::backdrop { background: #e7e1d6; }
.tour[data-design="wall"] { color: #2a2621; }
.tour[data-design="wall"] .t-stage { position: relative; overflow: hidden; padding: 44px 140px 36px;
  background: radial-gradient(ellipse 60% 55% at 50% 38%, #f7f3ec, #e7e1d6 72%); }
.tour[data-design="wall"] .t-stage img { box-shadow: 0 1px 2px rgb(0 0 0 / 25%), 0 22px 44px -8px rgb(40 30 20 / 38%); }
.tour[data-design="wall"][data-mode="cover"] .t-stage img { border-radius: 2px; }
.tour[data-design="wall"] .t-peek { display: block; position: absolute; top: 50%; width: 120px; height: 46%; padding: 0; border: 0;
  background: none; cursor: pointer; opacity: .5; transform: translateY(-50%); transition: opacity .3s ease; }
.tour[data-design="wall"] .t-peek[hidden] { display: none; }
.tour[data-design="wall"] .t-peek:hover { opacity: .9; }
.tour[data-design="wall"] .t-peek img { width: 100%; height: 100%; object-fit: contain; opacity: 1; cursor: pointer;
  box-shadow: none; filter: drop-shadow(0 10px 14px rgb(40 30 20 / 30%)); }
.tour[data-design="wall"] .t-peek.prev { left: -40px; }
.tour[data-design="wall"] .t-peek.prev img { object-position: right center; }
.tour[data-design="wall"] .t-peek.next { right: -40px; }
.tour[data-design="wall"] .t-peek.next img { object-position: left center; }
.tour[data-design="wall"] .t-panel { align-self: center; max-height: 100%; border-left: 0; background: none; padding: 32px 40px 24px 8px; }
.tour[data-design="wall"] .t-kicker { color: #8a6a35; }
.tour[data-design="wall"] .t-head h1 { color: #7a7266; font-size: 16px; }
.tour[data-design="wall"] .t-when { color: #6f685d; font-size: 13px; }
.tour[data-design="wall"] .t-work { color: #1d1a16; font: 700 19px/1.3 var(--sans); }
.tour[data-design="wall"] .t-text { color: #3a352e; font: 15px/1.65 var(--sans); }
.tour[data-design="wall"] .t-story { color: #1d1a16; font: italic 15px/1.5 var(--sans); }
.tour[data-design="wall"] .t-body { border-left: 2px solid #c9bfae; padding-left: 16px; }
.tour[data-design="wall"] .t-links a, .tour[data-design="wall"] .t-back { color: #8a5a12; }
/* Catalogue: an open book on paper, the plate on the left page, the essay on the right */
.tour[data-design="catalogue"], .tour[data-design="catalogue"]::backdrop { background: #efe9dc; }
.tour[data-design="catalogue"] { color: #2b2722; }
.tour[data-design="catalogue"] .t-stage { flex-direction: column; gap: 14px; padding: 48px 56px 28px; background: #f6f1e6; }
.tour[data-design="catalogue"] .t-stage img { max-height: calc(100% - 40px); padding: 14px; background: #fff; border: 1px solid #ddd3c1;
  box-shadow: 0 1px 3px rgb(60 45 25 / 12%); }
.tour[data-design="catalogue"] .t-plate { display: block; margin: 0; color: #6e655a; font: italic 14px/1.4 var(--serif); text-align: center; }
.tour[data-design="catalogue"] .t-plate .n { font-style: normal; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: #8b6b3e; }
.tour[data-design="catalogue"] .t-panel { border-left: 0; padding: 48px 56px 32px 48px;
  background: linear-gradient(to right, rgb(60 45 25 / 13%), transparent 36px) #f8f4eb; }
.tour[data-design="catalogue"] .t-kicker { color: #8b6b3e; letter-spacing: .2em; font-size: 11px; }
.tour[data-design="catalogue"] .t-head h1 { color: #6e655a; font: italic 400 19px/1.35 var(--serif); }
.tour[data-design="catalogue"] .t-when { color: #7a7062; font-style: italic; }
.tour[data-design="catalogue"] .t-work { color: #1d1a16; font: 500 30px/1.2 var(--serif); }
.tour[data-design="catalogue"] .t-text { max-width: 34em; color: #2f2a24; font: 18px/1.75 var(--serif); hyphens: auto; }
.tour[data-design="catalogue"] .t-story { max-width: 34em; color: #8b3a2b; font: italic 18px/1.5 var(--serif); }
.tour[data-design="catalogue"][data-mode="stop"] .t-text::first-letter { float: left; margin: 8px 10px 0 0; font-size: 3.9em; line-height: .76; color: #8b3a2b; }
.tour[data-design="catalogue"] .t-links a, .tour[data-design="catalogue"] .t-back { color: #8b3a2b; }
@media (min-width: 721px), (orientation: landscape) and (max-height: 500px) {
  .tour[data-design="catalogue"][open] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* the light designs: the line, the controls, the ladder and Around it in dark ink */
.tour:is([data-design="wall"], [data-design="catalogue"]) .t-foot { border-top-color: #d3cab9; background: inherit; }
.tour:is([data-design="wall"], [data-design="catalogue"]) .t-track::before { background: #cfc5b3; }
.tour:is([data-design="wall"], [data-design="catalogue"]) .t-dot { border-color: #a0978a; background: #efe9dc; }
.tour:is([data-design="wall"], [data-design="catalogue"]) .t-dot.past { background: color-mix(in srgb, var(--accent) 45%, #efe9dc); border-color: var(--accent); }
.tour:is([data-design="wall"], [data-design="catalogue"]) .t-dot.on { background: var(--accent); border-color: var(--accent); }
.tour:is([data-design="wall"], [data-design="catalogue"]) .t-y { color: #7a7062; }
.tour:is([data-design="wall"], [data-design="catalogue"]) .t-dot.on .t-y { color: #8a5a12; }
.tour:is([data-design="wall"], [data-design="catalogue"]) :is(.sh-ctl button, .ladder) { border-color: #cfc5b3; }
.tour:is([data-design="wall"], [data-design="catalogue"]) .sh-ctl button:hover,
.tour:is([data-design="wall"], [data-design="catalogue"]) .t-x:hover { background: #ddd5c6; }
.tour:is([data-design="wall"], [data-design="catalogue"]) .sh-pos { color: #6f685d; }
.tour:is([data-design="wall"], [data-design="catalogue"]) .ladder button { color: #5f584e; }
.tour:is([data-design="wall"], [data-design="catalogue"]) .ladder button:hover { color: #1d1a16; background: #ddd5c6; }
.tour:is([data-design="wall"], [data-design="catalogue"]) .ladder button[aria-pressed="true"] { color: #1b1a14; background: var(--accent); }
.tour:is([data-design="wall"], [data-design="catalogue"]) :is(.t-list, .t-list button) { border-color: #d3cab9; }
.tour:is([data-design="wall"], [data-design="catalogue"]) :is(.t-list .y, .t-more, .t-note) { color: #7a7062; }
.tour:is([data-design="wall"], [data-design="catalogue"]) .t-acts .pill { border-color: #b9ae9b; color: inherit; }
.tour:is([data-design="wall"], [data-design="catalogue"]) :is(.t-around h3, .ar-cap, .ar-none) { color: #6f685d; }
.tour:is([data-design="wall"], [data-design="catalogue"]) .ar-work img { background: #ddd5c6; }
@media (max-width: 720px) and (orientation: portrait), (max-width: 720px) and (min-height: 501px) {
  .tour[data-design="wall"] .t-stage, .tour[data-design="catalogue"] .t-stage { padding: 16px 16px 10px; }
  .tour[data-design="wall"] .t-peek { display: none; }
  .tour[data-design="wall"] .t-panel, .tour[data-design="catalogue"] .t-panel { padding: 18px 16px 28px; }
  .tour:is([data-design="wall"], [data-design="catalogue"]) .t-foot { background: #efe9dc; }
  .tour[data-design="catalogue"] .t-work { font-size: 24px; }
}

/* Unrolling a long scroll (unroll.js): the work fills the screen across its short side and moves along the long one */
.pills { position: absolute; left: 50%; bottom: 18px; z-index: 3; transform: translateX(-50%); display: flex; gap: 8px; }
.unroll-pill, .details-pill { display: flex; align-items: center; gap: 7px;
  padding: 8px 16px; border: 1px solid rgb(255 255 255 / 25%); border-radius: 999px; background: rgb(14 14 16 / 72%); color: #fff;
  backdrop-filter: blur(8px); font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.unroll-pill:hover, .details-pill:hover { background: rgb(14 14 16 / 88%); }
.unroll-pill[hidden], .details-pill[hidden] { display: none; }
.t-stage, .w-figure { position: relative; }
.unroll { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: #0b0b0c; color: #ececee; }
.unroll[open] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.unroll::backdrop { background: #0b0b0c; }
.u-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px 8px 20px; }
.u-title { flex: 1; min-width: 0; margin: 0; font: 600 18px/1.3 var(--serif); color: #e4e4e7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-x, .u-share { width: 38px; height: 38px; border: 0; border-radius: 50%; background: none; color: inherit; font-size: 26px; line-height: 1; cursor: pointer; }
.u-x:hover, .u-share:hover { background: #222226; }
.u-track { display: flex; overflow: auto; scrollbar-width: none; cursor: grab; touch-action: none; overscroll-behavior: contain; }
.u-track::-webkit-scrollbar { display: none; }
.u-track.dragging { cursor: grabbing; }
.u-track:focus { outline: none; }
.u-track img { display: block; max-width: none; max-height: none; user-select: none; -webkit-user-drag: none; }
.u-track img { flex: none; margin: auto 0; }
.unroll.tall .u-track { flex-direction: column; }
.unroll.tall .u-track img { margin: 0 auto; }
.u-foot { display: flex; align-items: center; gap: 16px; padding: 10px 20px 14px; border-top: 1px solid #222226; }
.u-map { position: relative; flex: 1; min-width: 0; height: 44px; cursor: pointer; touch-action: none; }
.u-map img { width: 100%; height: 100%; object-fit: fill; opacity: .75; border-radius: 3px; }
.u-lens { position: absolute; box-sizing: border-box; border: 2px solid var(--accent); border-radius: 3px; background: rgb(245 158 11 / 12%);
  box-shadow: 0 0 0 9999px rgb(11 11 12 / 45%); pointer-events: none; }
.u-map { overflow: hidden; }
.unroll.tall .u-foot { position: absolute; right: 16px; top: 64px; bottom: 16px; flex-direction: column; justify-content: flex-end; padding: 0; border: 0; }
.unroll.tall .u-map { flex: 1; width: 44px; height: auto; }
.unroll.tall .u-bar { flex-direction: column; }
.u-dir { margin-right: 6px; color: #a1a1aa; font-size: 13px; white-space: nowrap; }
.unroll.tall .u-dir { display: none; }
.u-bar button { color: #ececee; }
.u-bar button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #18181b; }
.u-bar button:disabled { opacity: .35; cursor: default; }
@media (max-width: 720px) and (orientation: portrait), (max-width: 720px) and (min-height: 501px) {
  .u-foot { flex-wrap: wrap; gap: 8px; padding: 8px 12px 12px; }
  .u-map { flex-basis: 100%; height: 34px; }
  .u-bar { width: 100%; justify-content: center; }
  .u-dir { margin-right: auto; }
  .pills { bottom: 10px; }
  .unroll-pill, .details-pill { font-size: 13px; padding: 7px 13px; }
}
.tour:not([data-mode="stop"]) :is(#t-unroll, #t-details, .d-layer, .d-note) { display: none; }

/* Details (details.js): numbered spots on the picture, and a note with a close-up of the spot. */
.details-pill[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #18181b; }
.d-layer { position: absolute; z-index: 2; pointer-events: none; }
.d-layer[hidden], .d-note[hidden] { display: none; }
.d-dot { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; padding: 0; border: 2px solid #fff; border-radius: 50%;
  background: rgb(14 14 16 / 70%); color: #fff; font: 600 13px/24px system-ui, sans-serif; text-align: center; cursor: pointer;
  pointer-events: auto; box-shadow: 0 2px 10px rgb(0 0 0 / 45%); animation: d-in .35s ease backwards; transition: transform .15s ease; }
.d-dot:hover { transform: scale(1.12); }
.d-dot.on { background: var(--accent); border-color: var(--accent); color: #18181b; transform: scale(1.18);
  box-shadow: 0 0 0 6px rgb(255 255 255 / 30%), 0 2px 10px rgb(0 0 0 / 45%); }
.d-dot:nth-child(2) { animation-delay: .06s; } .d-dot:nth-child(3) { animation-delay: .12s; }
.d-dot:nth-child(4) { animation-delay: .18s; } .d-dot:nth-child(5) { animation-delay: .24s; }
@keyframes d-in { from { opacity: 0; transform: scale(.4); } }
.d-note { position: absolute; z-index: 4; right: 16px; bottom: 66px; width: min(460px, calc(100% - 32px)); max-height: calc(100% - 90px);
  overflow: auto; display: flex; gap: 14px; padding: 14px; border-radius: 14px; background: rgb(18 18 20 / 90%); color: #ececee;
  backdrop-filter: blur(10px); box-shadow: 0 16px 50px rgb(0 0 0 / 50%); text-align: left; animation: d-up .25s ease; }
@keyframes d-up { from { opacity: 0; transform: translateY(8px); } }
.d-crop { flex: 0 0 132px; height: 132px; border-radius: 10px; background: #222 no-repeat; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%); }
.d-body { min-width: 0; flex: 1; }
.d-head { display: flex; align-items: center; gap: 6px; }
.d-head h3 { order: -1; flex: 1; margin: 0; font-size: 16px; line-height: 1.3; }
.d-n { font-size: 12px; opacity: .6; white-space: nowrap; }
.d-head button { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / 10%); color: inherit;
  font-size: 16px; line-height: 28px; cursor: pointer; }
.d-head button:hover { background: rgb(255 255 255 / 22%); }
.d-text { margin: 8px 0; font-size: 14px; line-height: 1.5; }
.d-cite { margin: 0; font-size: 12px; opacity: .65; }
.d-cite a { color: inherit; }
.detailing img { cursor: default; }
@media (max-width: 720px) and (orientation: portrait), (max-width: 720px) and (min-height: 501px) {
  .d-note { position: fixed; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 45vh; gap: 10px; padding: 10px; }
  .d-crop { flex-basis: 84px; height: 84px; }
  .d-text { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .d-dot, .d-note { animation: none; } }

/* Share, beside each close button: whatever is on screen now. */
.x-share { margin-right: 42px; }
.x-share, .u-share, .sh-share { display: grid; place-items: center; }
[data-share][hidden] { display: none; }

/* Timeline: the grid in time order, a heading where each period starts. */
.grid[data-layout="timeline"] .period { grid-column: 1 / -1; margin: 18px 0 -4px; padding-top: 14px; border-top: 1px solid var(--line);
  font: 600 22px/1.2 var(--serif); }
.grid[data-layout="timeline"] .period:first-child { margin-top: 0; padding-top: 4px; border-top: 0; }
/* Wall: a small set hung together, each work at its own proportions, its label small beneath. */
.grid[data-layout="wall"] { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 40px 32px; padding: 40px clamp(16px, 4vw, 56px) 56px; }
.grid[data-layout="wall"]::after { content: ""; flex: 999 1 0; }
.grid[data-layout="wall"] .card { flex: calc(var(--r, .8) * 100) 1 calc(var(--r, .8) * 230px); max-width: calc(var(--r, .8) * 400px); }
.grid[data-layout="wall"] .card img { aspect-ratio: var(--r, .8); height: auto; object-fit: cover; border-radius: 1px; background: var(--mat);
  box-shadow: 0 1px 2px rgb(0 0 0 / 18%), 0 10px 28px rgb(0 0 0 / 16%); }
.grid[data-layout="wall"] .card:hover img { transform: translateY(-3px); box-shadow: 0 2px 4px rgb(0 0 0 / 18%), 0 16px 38px rgb(0 0 0 / 22%); }
.grid[data-layout="wall"] .cap .t { font-size: 13px; }
@media (max-width: 720px) {
  .grid[data-layout="wall"] { gap: 28px 16px; padding: 24px 16px 40px; }
  .grid[data-layout="wall"] .card { flex-basis: calc(var(--r, .8) * 140px); }
  .grid[data-layout="timeline"] .period { font-size: 18px; }
}

/* Today's (ways.js): a button after the ways button, an outline and a softly pulsing dot, in the colour of what it
   opens so each reads as its own thing: orange for today's exhibition, violet for today's masterpiece (Masterpieces),
   teal for today's museum (the Museums tab). */
:root { --today: #ea580c; --today-work: #7c3aed; --today-museum: #0f766e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --today: #f97316; --today-work: #a78bfa; --today-museum: #2dd4bf; } }
.today[data-kind="work"] { --today: var(--today-work); }
.today[data-kind="museum"] { --today: var(--today-museum); }
.today { display: flex; align-items: center; gap: 7px; flex: none; height: 34px; padding: 0 14px 0 12px; border: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--today) 10%, var(--panel)); color: var(--today); box-shadow: inset 0 0 0 1.5px var(--today);
  font: 600 14px/1 inherit; font-family: inherit; cursor: pointer; white-space: nowrap; transition: background .15s ease, transform .15s ease; }
.today:hover { background: color-mix(in srgb, var(--today) 18%, var(--panel)); }
.today:active { transform: scale(.97); }
.today[hidden] { display: none; }
.td-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--today); animation: td-pulse 2.2s ease-out infinite; }
@keyframes td-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--today) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
/* After its first minute of the day: no pulse, a quieter outline. */
.today.dim { background: var(--panel); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--today) 45%, var(--line));
  transition: background 1.2s ease, box-shadow 1.2s ease; }
.today.dim .td-dot { animation: none; opacity: .55; transition: opacity 1.2s ease; }
@media (prefers-reduced-motion: reduce) { .td-dot { animation: none; } }
.share-menu { position: fixed; z-index: 30; display: flex; flex-direction: column; min-width: 190px; padding: 6px; border-radius: 12px;
  background: var(--panel); color: var(--ink); box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.share-menu button { padding: 9px 12px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.share-menu button:hover, .share-menu button:focus-visible { background: color-mix(in srgb, var(--accent) 12%, transparent); outline: none; }

/* The header on a phone (the new look): one row (the name gives way to its icon; search, and a ⋯ menu holding share
   and settings), and the tab's controls one row that scrolls sideways rather than wrapping. */
.more { display: none; }
@media (max-width: 720px), (orientation: landscape) and (max-height: 500px) {
  .look .bar { column-gap: 8px; }
  .look .bar > .tools { overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .look .bar > .tools::-webkit-scrollbar { display: none; }
  .look .bar > .tools .tool { flex-wrap: nowrap; flex: none; }
  .look .bar > .tools .count { margin-right: 6px; }
  .look .bar > .search { order: 4; flex: 1 1 100%; }
  .look .bar > .ibtn { margin-left: 0; }
  .look .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .look .bar > #share, .look .bar > #settings { display: none; }
  .look .bar > #q-open { margin-left: auto; }
  .look .more { display: grid; font-size: 18px; line-height: 1; letter-spacing: .5px; }
}

/* How many works an exhibition shows (tours.js), on its cover: in the cover's own colours, whatever the design. */
.t-len { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 18px; }
.t-len-l { margin-right: 4px; opacity: .7; font-size: 13px; }
.t-len button { padding: 5px 12px; border: 1px solid currentColor; border-radius: 999px; background: none; color: inherit;
  font: 13px/1.3 var(--sans); cursor: pointer; opacity: .75; }
.t-len button:hover { opacity: 1; }
.t-len button.on { opacity: 1; background: var(--accent); border-color: var(--accent); color: #18181b; font-weight: 600; }
/* ...in a small panel behind one Customize button under the cover's buttons; it opens upward, over them, dark in every design. */
.t-cfoot { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 16px 0 0; }
.t-opt { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border: 1px solid currentColor; border-radius: 999px;
  background: none; color: inherit; font: 13px/1.3 var(--sans); opacity: .7; cursor: pointer; }
.t-opt:hover, .t-opt:focus-visible, .t-opt[aria-expanded="true"] { opacity: 1; }
.t-opts { position: absolute; z-index: 5; bottom: calc(100% + 10px); left: 0; width: max-content; max-width: min(460px, calc(100vw - 32px));
  padding: 16px 16px 4px; border: 1px solid rgb(255 255 255 / 12%); border-radius: 14px; background: rgb(20 20 23 / 96%);
  color: #e4e4e7; text-align: left; text-shadow: none; box-shadow: 0 18px 50px rgb(0 0 0 / 45%); backdrop-filter: blur(14px); }
.t-opts[hidden] { display: none; }
.t-opts .t-len { margin-bottom: 12px; }
.t-opts .t-len-l { flex: 0 0 100%; margin: 0 0 2px; }
.t-startup { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; opacity: .8; cursor: pointer; }
.t-startup input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); cursor: pointer; }
@media (min-width: 721px), (orientation: landscape) and (max-height: 500px) {
  .tour[data-design="poster"][data-mode="cover"] .t-cfoot { justify-content: center; color: #e4e4e7; }
  .tour[data-design="poster"][data-mode="cover"] .t-opts { left: 50%; transform: translateX(-50%); }
}
/* On a phone it rises from the bottom of the screen. */
@media (max-width: 720px) and (orientation: portrait), (max-width: 720px) and (min-height: 501px) {
  .t-opts { position: fixed; left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; padding: 18px 16px 6px; }
}
.t-text.t-quiet { opacity: .7; font-style: italic; }
.t-credit { margin: -6px 0 14px; font-size: 12.5px; opacity: .7; }
.t-credit a { color: inherit; }
/* Play mode's speed (tours.js), beside the play button. */
.t-speed { max-width: 9.5em; padding: 4px 6px; border: 1px solid currentColor; border-radius: 999px; background: none; color: inherit;
  font: 12.5px/1.3 var(--sans); opacity: .75; cursor: pointer; }
.t-speed:hover, .t-speed:focus-visible { opacity: 1; }
.t-speed option { color: #18181b; background: #fff; }
/* Once today's exhibition has been watched (its last work reached today): lowlit, grey, a tick for the dot. */
.today.seen { background: none; color: var(--quiet); box-shadow: inset 0 0 0 1px var(--line); font-weight: 500; }
.today.seen:hover { background: var(--panel); color: var(--ink); }
.today.seen .td-dot { width: auto; height: auto; border-radius: 0; background: none; animation: none; opacity: 1; font-size: 12px; line-height: 1; }
.today.seen .td-dot::before { content: "✓"; }

/* The exhibition's sound (audio.js): Voice and Music switches beside the player's buttons, the track's credit. */
.t-sound { display: flex; gap: 6px; margin-right: 6px; }
.t-ctl .sh-pos { white-space: nowrap; }
.sh-ctl .t-tog { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: #a1a1aa; }
.sh-ctl .t-tog[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.t-listen { margin-left: 8px; background: none; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.t-music { margin: 18px 0 0; color: #71717a; font-size: 12px; }
.w-sound { margin: -6px 0 16px; }
.w-sound .t-tog { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--line);
  border-radius: 999px; background: none; color: var(--quiet); font-size: 13px; cursor: pointer; }
.w-sound .t-tog:hover, .w-sound .t-tog:focus-visible { color: var(--accent); }
.w-sound .t-tog[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.w-sound .t-tog.t-none, .sh-sound .t-tog.t-none { opacity: .45; }
.w-music { margin: 0 0 8px; }
.sh-music { margin: 3px 0 0; }
.sh-music a { color: inherit; }
@media (max-width: 720px) { .t-tog span { display: none; } .t-listen { margin: 10px 0 0; } .sh-music { display: none; } }

/* The works' toolbar in the new look (Daiyi picked this of four designs): the count, a round play button, Filters,
   and View, which holds the order and the layout in one small panel (a sheet on a phone). */
.look .tool[data-for="works"] .sort { display: none; }
.look #f-show { justify-content: center; width: 34px; height: 34px; padding: 0 0 0 2px; }
.look #f-show span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#f-view[aria-expanded="true"] { border-color: var(--accent); }
.v-ic { display: grid; color: var(--quiet); }
#f-view .chev { color: var(--quiet); margin-left: -2px; }
.vpanel { position: fixed; z-index: 30; width: 360px; max-width: calc(100vw - 16px); padding: 8px 10px 10px; border-radius: 14px;
  background: var(--panel); color: var(--ink); box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.vpanel h3 { margin: 6px 4px 6px; color: var(--quiet); font: 600 11px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.vseg { display: flex; gap: 3px; margin-bottom: 8px; padding: 3px; border-radius: 10px; background: var(--mat); }
.vseg button { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px; border: 0;
  border-radius: 8px; background: none; color: var(--quiet); font-size: 13px; line-height: 1.2; cursor: pointer; }
.vseg button:hover { color: var(--ink); }
.vseg button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / 14%); }
.vseg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.vseg svg { opacity: .85; }
.vnote { margin: 2px 4px 0; color: var(--quiet); font-size: 12.5px; line-height: 1.4; }
@media (max-width: 720px) {
  .vpanel { top: auto !important; right: 0; bottom: 0; left: 0 !important; width: auto; max-width: none; border-radius: 20px 20px 0 0;
    padding: 8px 16px calc(18px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 40px rgb(0 0 0 / 25%), 0 0 0 1px var(--line); }
  .vpanel::before { content: ""; display: block; width: 36px; height: 4px; margin: 2px auto 8px; border-radius: 2px; background: var(--line); }
  .vseg button { padding: 9px 4px; font-size: 14px; }
}

/* The header on a phone, on the works (Daiyi's design): one row. Today's is its dot, Filters and View are icons before
   search; the count shows as a bubble when it changes, and play floats at the bottom right while the page scrolls. */
.fab, .bubble { display: none; }
@media (max-width: 720px), (orientation: landscape) and (max-height: 500px) {
  .look .bar { column-gap: 6px; }
  .look .bar > #ways { flex: 0 1 auto; min-width: 0; }
  .look .bar > #ways span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .look .today { justify-content: center; width: 34px; padding: 0; }
  .look .today .td-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .look .bar:has(.tool[data-for="works"]:not([hidden])):not(.searching) { flex-wrap: nowrap; }
  .look .bar:has(.tool[data-for="works"]:not([hidden])) > .tools { order: 0; flex: none; margin: 0 0 0 auto; padding: 0; overflow: visible; }
  .look .bar:has(.tool[data-for="works"]:not([hidden])) > #q-open { margin-left: 0; }
  .look .tool[data-for="works"] { gap: 6px; }
  .look .tool[data-for="works"] .count, .look .tool[data-for="works"] #f-show { display: none; }
  .look #f-open, .look #f-view { position: relative; justify-content: center; width: 34px; height: 34px; padding: 0; gap: 0; }
  .look #f-open > span[data-i18n], .look #f-view > span[data-i18n], .look #f-view .chev { display: none; }
  .look #f-view .v-ic { color: inherit; }
  .look #f-open .badge { position: absolute; top: -5px; right: -5px; min-width: 17px; padding: 0 4px; font-size: 11px; line-height: 17px; }

  /* low on the screen, three quarters of the way across: where a right thumb rests */
  .look .fab { position: fixed; left: calc(75% - 39px); top: calc(86dvh - 39px); z-index: 12; display: grid; place-items: center;
    width: 78px; height: 78px; padding: 0 0 0 5px; border: 1px solid var(--glass-edge); border-radius: 50%; color: var(--ink); cursor: pointer;
    background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8);
    /* a soft glow in the accent, as the floating bars have */
    box-shadow: 0 1px 0 rgb(255 255 255 / 12%) inset, 0 0 0 5px var(--glow), 0 0 26px 6px color-mix(in srgb, var(--accent) 32%, transparent),
      0 6px 18px rgb(0 0 0 / 18%);
    opacity: 0; transform: translateY(10px) scale(.92); pointer-events: none; transition: opacity .25s ease, transform .25s ease;
    -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: none; }
  .look .fab.on, .look .fab:focus-visible { opacity: 1; transform: none; pointer-events: auto; }
  .look .fab.hold { transform: scale(1.08); }
  .fab-ring { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); transform: rotate(-90deg); pointer-events: none; }
  .fab-ring circle { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; }
  .fab.hold .fab-ring circle { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.5s linear; }

  .look .bubble { position: fixed; z-index: 25; display: block; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: var(--bg);
    font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none;
    box-shadow: 0 6px 18px rgb(0 0 0 / 18%); animation: bubble-in .2s ease; transition: opacity .3s ease; }
  .look .bubble[hidden] { display: none; }
  .bubble::before { content: ""; position: absolute; top: -5px; left: calc(var(--tip, 50%) - 5px); width: 10px; height: 10px;
    background: inherit; transform: rotate(45deg); border-radius: 2px; }
  .bubble.up::before { top: auto; bottom: -5px; }
  .bubble.out { opacity: 0; }
}
@keyframes bubble-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .look .fab, .look .bubble { transition: none; animation: none; } .fab.hold .fab-ring circle { transition-duration: 1.5s; } }

/* The players' playing options (options.js): a button beside Next opens Voice, Music, Motion and the speed. */
.p-optw { position: relative; display: inline-flex; }
.p-opts { position: absolute; z-index: 6; bottom: calc(100% + 10px); right: 0; display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px; width: max-content; padding: 14px; border: 1px solid rgb(255 255 255 / 12%); border-radius: 14px;
  background: rgb(20 20 23 / 96%); color: #e4e4e7; text-shadow: none; box-shadow: 0 18px 50px rgb(0 0 0 / 45%); backdrop-filter: blur(14px); }
.p-opts[hidden] { display: none; }
.p-opts .t-sound { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.p-opts .t-sound[hidden] { display: none; }
.sh-ctl .p-opts .t-tog { width: auto; min-width: 0; padding: 0 12px; }
.sh-ctl .p-opts .t-tog span { display: inline; }
.p-opts .t-speed { opacity: 1; padding: 6px 10px; font-size: 13px; }
.p-opt[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
@media (max-width: 720px) and (orientation: portrait), (max-width: 720px) and (min-height: 501px) {
  .sh-ctl > .p-optw { order: 4; }
  .p-opts { position: fixed; z-index: 20; left: 12px; right: 12px; bottom: 12px; width: auto; background: #141417; }
  .p-opts > * { order: 0; }   /* not the bar's order for its switches (above) */
}

/* An iPhone turned sideways (Daiyi's ask, #69). viewport-fit=cover (index.html) lets the black players fill the whole
   screen, so the page, the panels and the players' controls keep clear of the notch and the home bar themselves.
   The insets are 0 everywhere else; --sl, --sr and --sb name them once. */
:root { --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px); --sb: env(safe-area-inset-bottom, 0px); }
body { padding-left: var(--sl); padding-right: var(--sr); }
dialog { width: min(1100px, calc(100vw - 32px - var(--sl) - var(--sr))); }
dialog.fpanel { padding-right: var(--sr); }
/* (On a phone held upright the ways and settings panels are full-width sheets: no side margin there.) */
@media (min-width: 721px) {
  dialog.wpanel { margin-left: calc(16px + var(--sl)); }
  dialog.spanel { margin-right: calc(16px + var(--sr)); }
}
.show, .tour, .unroll { padding: 0 var(--sr) var(--sb) var(--sl); }

/* Sideways, a phone is as wide as a small laptop but under 500px tall: the desktop layout, made short. The header is
   the phone's one row (the media queries above that also name this one); here, the players and the work. */
@media (orientation: landscape) and (max-height: 500px) {
  .look .fab { top: calc(100dvh - 90px - var(--sb)); left: auto; right: calc(20px + var(--sr)); width: 64px; height: 64px; }

  /* a work: the whole screen, picture left, text right */
  dialog#work, dialog.building { width: calc(100vw - var(--sl) - var(--sr)); max-height: 100dvh; height: 100dvh; border-radius: 0; }
  dialog[open] > .w-figure, dialog[open] > .w-text { max-height: 100dvh; }
  .w-figure img { max-height: calc(100dvh - 24px); }
  .b-figure img { max-height: calc(100dvh - 40px); }

  /* the slideshow: a slimmer caption and bar, so the work gets the height */
  .sh-stage { padding: 12px 16px 4px; }
  .sh-bar { gap: 10px; padding: 6px 16px 8px; }
  .sh-cap { min-width: 0; }   /* the caption gives way (one line each) so the controls stay on its row */
  .sh-t { font-size: 16px; }
  .sh-m { font-size: 12.5px; }
  .sh-t, .sh-m { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sh-desc { -webkit-line-clamp: 2; line-clamp: 2; font-size: 13px; }

  /* playing options: one row across, above the bar, rather than a tall column over the work */
  .p-opts { flex-direction: row; flex-wrap: wrap; align-items: center; max-width: calc(100vw - 32px - var(--sl) - var(--sr)); padding: 10px; }
  .p-opts .t-speed { max-width: none; }

  /* an exhibition: less padding round the line and its controls; with the ladder beside it the line is short, so
     its dots go without their years (each stop's label gives its year) */
  .t-foot { gap: 14px; padding: 6px 16px 8px; }
  .t-track { margin-bottom: 16px; }
  .t-foot:has(> .ladder:not([hidden])) .t-track { margin-bottom: 0; }
  .t-foot:has(> .ladder:not([hidden])) .t-y { display: none; }
  .ladder button { padding: 5px 9px; font-size: 12.5px; }
  .t-stage { padding: 14px 16px 8px; }
  .t-panel { padding: 16px 20px 14px; }
  .t-work { font-size: 21px; margin-bottom: 10px; }
  .t-text { font-size: 15.5px; line-height: 1.55; }
  .tour[data-design="wall"] .t-stage { padding: 20px 96px 16px; }
  .tour[data-design="wall"] .t-peek { width: 84px; }
  .tour[data-design="wall"] .t-panel { padding: 16px 20px 14px 4px; }
  .tour[data-design="catalogue"] .t-stage { padding: 16px 24px 10px; gap: 6px; }
  .tour[data-design="catalogue"] .t-stage img { max-height: calc(100% - 28px); padding: 10px; }
  .tour[data-design="catalogue"] .t-panel { padding: 18px 24px 14px; }
  .tour[data-design="catalogue"] .t-work { font-size: 24px; }
  .tour[data-design="catalogue"] .t-text, .tour[data-design="catalogue"] .t-story { font-size: 16px; line-height: 1.6; }

  /* the poster: a stop's label is a column down the left of the stage, as tall as it, and the work sits beside it */
  .tour[data-design="poster"] .t-stage { padding: 14px 20px 10px; }
  .tour[data-design="poster"][data-mode="stop"] .t-stage { padding-left: calc(min(340px, 42vw) + 28px); }
  .tour[data-design="poster"] .t-panel { width: min(340px, 42vw); max-height: calc(100% - 24px); margin: 12px 0 12px 14px; align-self: start;
    padding: 14px 16px 12px; }
  .tour[data-design="poster"][data-mode="stop"] .t-work { font-size: 19px; margin-bottom: 8px; }
  .tour[data-design="poster"][data-mode="stop"] .t-text { font-size: 14.5px; line-height: 1.55; }
  .tour[data-design="poster"][data-mode="stop"] .t-story { font-size: 14.5px; }
  /* its cover: the name smaller, the panel the stage's height, scrolling when the introduction runs long */
  .tour[data-design="poster"][data-mode="cover"] .t-panel { width: min(680px, 84vw); max-height: calc(100% - 16px); margin: 8px 0; align-self: center; padding: 0 8px; }
  .tour[data-design="poster"][data-mode="cover"] .t-x { top: 8px; right: calc(12px + var(--sr)); }
  .tour[data-design="poster"][data-mode="cover"] .t-head h1 { margin: 6px 0 10px; font-size: clamp(26px, 4vw, 36px); }
  .tour[data-design="poster"][data-mode="cover"] .t-when { font-size: 14px; }
  .tour[data-design="poster"][data-mode="cover"] .t-text { margin-bottom: 16px; font-size: 15.5px; line-height: 1.55; }
  .tour[data-design="poster"][data-mode="cover"] .t-begin { padding: 10px 22px; font-size: 15px; }
  .t-cfoot { margin-top: 10px; }

  /* the unrolled scroll: a thinner bar */
  .u-head { padding: 6px 10px 4px 16px; }
  .u-foot { padding: 6px 16px 8px; }
  .u-map { height: 34px; }
}
/* ...and on the smallest phones (667 wide) the ladder leaves the line too little room for ten dots: "3 of 10" says it */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 720px) {
  .t-foot:has(> .ladder:not([hidden])) .t-track { visibility: hidden; }
}

/* ---------- the evolution of art (river.js): top to bottom, a line per movement beside its card ---------- */
.river {
  --rv-europe: #b45309; --rv-west-asia: #0f766e; --rv-east-asia: #be123c; --rv-americas: #4d7c0f;
  --rv-grew: #8a8a90; --rv-against: #c2410c; --rv-borrowed: #2563eb; --rv-revived: #7c3aed;
  --rv-path: #18181b; --rv-on-ink: #fff;
  --track: 12px;
  max-width: 940px; margin: 0 auto; padding: 16px 16px 48px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .river {
    --rv-europe: #f59e0b; --rv-west-asia: #2dd4bf; --rv-east-asia: #fb7185; --rv-americas: #a3e635;
    --rv-grew: #8a8a93; --rv-against: #fb923c; --rv-borrowed: #60a5fa; --rv-revived: #c4b5fd;
    --rv-path: #f4f4f5; --rv-on-ink: #18181b;
  }
}
.river [data-lane="europe"] { --c: var(--rv-europe); }
.river [data-lane="west-asia"] { --c: var(--rv-west-asia); }
.river [data-lane="east-asia"] { --c: var(--rv-east-asia); }
.river [data-lane="americas"] { --c: var(--rv-americas); }
.rv-top h1 { font: 600 30px/1.15 var(--serif); margin: 4px 0 6px; letter-spacing: -.01em; }
.rv-intro { margin: 0 0 14px; color: var(--quiet); font: 16px/1.55 var(--serif); }
.rv-journeys, .rv-lanes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.rv-jl { color: var(--quiet); font-size: 13px; margin-right: 2px; white-space: nowrap; }
.rv-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--panel); cursor: pointer; font-size: 13px; color: var(--ink);
}
.rv-chip:hover, .rv-chip:focus-visible { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.rv-chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.rv-swatch { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.rv-lane-chip.on .rv-swatch { box-shadow: 0 0 0 1.5px var(--bg); }
.rv-card {
  margin: 4px 0 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel); box-shadow: var(--shadow);
}
.rv-card h2 { font: 600 20px/1.3 var(--serif); margin: 0 0 2px; }
.rv-when { margin: 0 0 6px; color: var(--quiet); font-size: 13px; }
.rv-go { display: inline-block; text-decoration: none; }
.rv-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 6px; font-size: 12px; color: var(--quiet); }
.rv-lg { display: inline-flex; align-items: center; gap: 6px; }
.rv-lg::before { content: ""; width: 18px; border-top: 2px solid currentColor; }
.rv-lg.rv-k-grew { color: var(--rv-grew); } .rv-lg.rv-k-against { color: var(--rv-against); }
.rv-lg.rv-k-borrowed { color: var(--rv-borrowed); } .rv-lg.rv-k-revived { color: var(--rv-revived); }
.rv-lg.rv-k-revived::before { border-top-style: dashed; }

.rv-flow { position: relative; padding-left: calc(var(--tracks, 6) * var(--track) + var(--rv-gap, 18px)); }
.rv-graph { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.rv-line { stroke: var(--c); stroke-width: 3; stroke-linecap: round; opacity: .85; transition: opacity .2s; }
.rv-line.on { stroke-width: 5; opacity: 1; }
.rv-node { fill: var(--panel); stroke: var(--c); stroke-width: 2.5; }
.rv-node.on { fill: var(--c); }
.rv-cap { fill: var(--c); opacity: .6; }
.rv-tie { stroke: var(--c); stroke-width: 1; opacity: .35; }
.rv-line.dim, .rv-node.dim, .rv-tie.dim { opacity: .18; }
.rv-link { fill: none; stroke-width: 1.5; opacity: .55; transition: opacity .2s; }
.rv-link.on { opacity: 1; stroke-width: 2.2; }
.rv-link.dim { opacity: .08; }
.rv-link.rv-k-grew { stroke: var(--rv-grew); } .rv-link.rv-k-against { stroke: var(--rv-against); }
.rv-link.rv-k-borrowed { stroke: var(--rv-borrowed); } .rv-link.rv-k-revived { stroke: var(--rv-revived); stroke-dasharray: 4 3; }
.rv-path { fill: none; stroke: var(--rv-path); stroke-width: 1.5; stroke-dasharray: 2 4; stroke-linecap: round; opacity: .7; }

.rv-era {
  position: sticky; top: var(--rv-top, 56px); z-index: 2; margin: 22px 0 8px; padding: 8px 0 6px;
  font: 600 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--quiet);
  background: var(--bg); box-shadow: 0 6px 6px -2px var(--bg);
}
.rv-sec:first-of-type .rv-era { margin-top: 6px; }
.rv-row { position: relative; margin: 0 0 10px; }
.rv-mv {
  padding: 10px 14px 12px; border: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: 10px;
  background: var(--panel); transition: opacity .2s, box-shadow .2s;
}
.rv-mv.open { box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--c) 45%, var(--line)); border-left-color: var(--c); }
.rv-mv.dim { opacity: .45; }
.rv-head {
  display: grid; grid-template-columns: auto 1fr; gap: 0 10px; width: 100%; padding: 0; border: 0; background: none;
  text-align: left; cursor: pointer; color: inherit;
}
.rv-yr { font-size: 12px; color: var(--quiet); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rv-ln { font-size: 12px; color: var(--c); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-name { grid-column: 1 / -1; font: 600 19px/1.3 var(--serif); margin-top: 1px; }
.rv-head:hover .rv-name, .rv-head:focus-visible .rv-name { color: var(--c); }
.rv-mv .rv-change { margin: 4px 0 0; font-size: 14px; line-height: 1.5; }
.rv-mv:not(.open) .rv-change { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rv-from { margin: 6px 0 0; font-size: 13px; color: var(--quiet); }
.rv-kind { color: var(--quiet); }
.rv-ref {
  padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 500; cursor: pointer;
  text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
.rv-ref.rv-k-grew { text-decoration-color: var(--rv-grew); } .rv-ref.rv-k-against { text-decoration-color: var(--rv-against); }
.rv-ref.rv-k-borrowed { text-decoration-color: var(--rv-borrowed); } .rv-ref.rv-k-revived { text-decoration-color: var(--rv-revived); text-decoration-style: dashed; }
.rv-thumbs { display: flex; gap: 6px; margin: 10px 0 0; overflow-x: auto; scrollbar-width: none; }
.rv-thumb { position: relative; flex: none; width: 64px; height: 64px; border-radius: 6px; overflow: hidden; background: var(--mat); }
.rv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rv-n {
  position: absolute; left: 4px; top: 4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--rv-path); color: var(--panel); font: 600 11px/18px var(--sans); text-align: center;
}
@media (min-width: 721px) {
  /* Room to spare: the works in a larger 2-by-2 block on the right of the card. */
  .rv-mv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 18px; }
  .rv-mv > * { grid-column: 1 / -1; }
  .rv-mv > .rv-main { grid-column: 1; }
  .rv-mv > .rv-thumbs { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(2, 84px); gap: 6px; margin: 2px 0 0; overflow: visible; align-self: start; }
  .rv-mv > .rv-thumbs .rv-thumb { width: 84px; height: 84px; }
  .rv-mv > .rv-thumbs:has(> :only-child) { grid-template-columns: 116px; }
  .rv-mv > .rv-thumbs:has(> :only-child) .rv-thumb { width: 116px; height: 116px; }
  .rv-mv:not(.open) .rv-change { display: block; }
}
.rv-rel h4 { margin: 14px 0 6px; font: 600 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--quiet); }
.rv-rel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rv-rel li { font-size: 14px; }
.rv-why { display: block; color: var(--quiet); font-size: 13px; margin-top: 1px; }
.rv-jrow { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.rv-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; }
.rv-ev { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; padding: 0 2px; font-size: 13px; color: var(--quiet); }
.rv-ev::before { content: ""; flex: none; align-self: center; width: 6px; height: 6px; transform: rotate(45deg); background: var(--c); opacity: .7; }
.rv-lone { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--quiet); }
.rv-note { color: var(--quiet); margin-top: 24px; }
.rv-link-in { font-weight: 500; }
@media (max-width: 720px) {
  .river { --track: 7px; --rv-gap: 12px; padding: 10px 12px 40px; }
  .rv-top h1 { font-size: 24px; }
  .rv-intro { font-size: 15px; }
  .rv-journeys, .rv-lanes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -12px; padding-right: 12px; }
  .rv-chip { flex: none; }
  .rv-mv { padding: 9px 11px 11px; }
  .rv-name { font-size: 17px; }
  .rv-thumb { width: 56px; height: 56px; }
}
.t-acts a.pill { display: inline-block; text-decoration: none; }

/* Back and Forward in the installed app (backforward.js): floating low on the screen, where a thumb rests, either side
   of play where the page has it (they close up where it doesn't); the same over an open work, exhibition or building */
.hist { position: fixed; z-index: 12; right: calc(20px + var(--sr)); bottom: calc(24px + var(--sb)); display: flex; align-items: center; gap: 8px; }
.hist[hidden] { display: none; }
.app .bar > .brand { display: none; }  /* in the app it only reloaded the page; the header keeps the room */
.hist > button:not(.fab) { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--glass-edge);
  border-radius: 50%; color: var(--ink); cursor: pointer; background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); box-shadow: 0 6px 18px rgb(0 0 0 / 18%); }
.hist > button:disabled { opacity: .4; cursor: default; }
.app .hist > .fab { position: relative; left: auto; right: auto; top: auto; flex: none; transition: opacity .25s ease, transform .25s ease, width .25s ease, margin .25s ease; }
.app .hist > .fab:not(.on):not(:focus-visible) { width: 0; margin: 0 -4px; border-width: 0; }
dialog .hist > .fab { display: none; }
.quiet dialog > .hist { opacity: 0; }
.look dialog > .hist { transition: opacity .6s ease; }
@media (max-width: 720px), (orientation: landscape) and (max-height: 500px) {
  /* centred where play sits, three quarters of the way across */
  .hist { right: auto; bottom: auto; left: min(75%, 100% - 107px - var(--sr)); top: calc(86dvh - 22px); transform: translateX(-50%); }
  .look .hist:has(> .fab.on) { top: calc(86dvh - 39px); }
}
@media (orientation: landscape) and (max-height: 500px) {
  .hist { left: auto; right: calc(20px + var(--sr)); top: auto; bottom: calc(24px + var(--sb)); transform: none; }
}