/* 珠宝设计馆 · Jewelry Design Atelier. A dark, quiet museum: warm black walls, ivory type, a line of gold. */

:root {
  --wall: #0c0b0a;
  --wall-2: #14120f;
  --panel: #171512;
  --ivory: #efe8dc;
  --quiet: #a59d90;
  /* The faintest type (small labels, the disclaimer): still 4.5:1 or more on the wall, a chip and a note. */
  --faint: #8c8476;
  --line: rgb(239 232 220 / 12%);
  --gold: #d9b469;
  --gold-soft: rgb(217 180 105 / 16%);
  --serif: 'Instrument Serif', 'Songti SC', 'STSong', Georgia, serif;
  --sans: 'DM Sans', -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei UI', sans-serif;
  --grotesk: 'Space Grotesk', 'DM Sans', sans-serif;
  /* The museum fills the window, to a point: its margins and its widest. */
  --gutter: clamp(18px, 3.4vw, 64px);
  --museum-max: 2240px;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--wall);
}

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(120% 70% at 50% -10%, #1d1915 0%, var(--wall) 55%) fixed, var(--wall);
  color: var(--ivory);
  font: 400 15px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

button {
  font: inherit;
}

[hidden] {
  display: none !important;
}

tipo-bar {
  --tipo-fg: #efe8dc;
  --tipo-muted: #a59d90;
  --tipo-line: rgb(239 232 220 / 14%);
  --tipo-accent: #e6c987;
  --tipo-accent-bg: rgb(217 180 105 / 15%);
  --tipo-lab: linear-gradient(100deg, #f3e2b8 10%, #d9b469 55%, #b88a4a);
  position: relative;
  z-index: 3;
  max-width: var(--museum-max);
}

/* On a wide screen the bar keeps the museum's margins, so its mark stands over the directory. */
@media (min-width: 961px) {
  tipo-bar {
    padding-right: var(--gutter);
    padding-left: var(--gutter);
  }
}

.top-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.crumb {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--quiet);
  font-size: 13px;
  text-decoration: none;
}

.crumb:hover {
  color: var(--ivory);
  border-color: rgb(217 180 105 / 40%);
}

/* Beside a hall the directory already leads back to the lobby. */
@media (min-width: 961px) {
  body[data-screen='hall'] .crumb {
    display: none;
  }
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--gold);
  font: 500 12px/1.4 var(--grotesk);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  font-weight: 400;
}

.screen {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 48px) 64px;
}

/* ---------- The lobby ---------- */

/* The first screen: the title at the left and the showcase filling the rest, as large as the window allows. The
   title may run over the dark edge of the showcase's light. Sizes follow the hero's width (cqi), not the window's. */
.lobby-hero {
  --stage: max(300px, min(calc(100svh - 168px), 60cqi, 1040px));
  position: relative;
  container-type: inline-size;
  display: grid;
  align-items: center;
  min-height: min(calc(100svh - 68px), 1120px);
  padding: 4px 0 20px;
  /* The showcase's light may spill onto the wall, not past the window's edge. */
  overflow-x: clip;
}

.lobby-hero > * {
  grid-area: 1 / 1;
}

.lobby-hero .eyebrow {
  margin-bottom: clamp(10px, 1cqi, 18px);
  font-size: clamp(12px, 0.85cqi, 14px);
  letter-spacing: 0.22em;
}

.lobby-hero h1 {
  margin: 0 0 clamp(18px, 1.8cqi, 30px);
  font: 400 clamp(52px, 8cqi, 148px)/0.98 var(--serif);
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, #fbf3df 20%, #e6c987 70%, #b8894a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lobby-hero h1 .en {
  font-style: italic;
}

.lede {
  max-width: 26em;
  margin: 0;
  color: var(--quiet);
  font-size: clamp(15px, 1.25cqi, 20px);
  line-height: 1.75;
  text-wrap: balance;
}

/* The showcase: a hall's hero piece in a pool of light, its name beneath it like a museum's label. Each hall has a
   picture of its own, stacked: the one asked for fades in over the last, which goes once it is covered. */
.hero-stage {
  position: relative;
  justify-self: end;
  display: grid;
  justify-items: center;
  width: var(--stage);
  color: inherit;
  text-decoration: none;
  outline: none;
}

/* The light spills a little past the picture onto the wall. */
.hero-stage::before {
  content: '';
  position: absolute;
  inset: -10% -10% 4%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(214 190 150 / 7%), rgb(214 190 150 / 2.5%) 55%, transparent);
  pointer-events: none;
}

.hero-frame {
  display: grid;
  width: 100%;
  aspect-ratio: 1;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 48%, transparent 70.5%);
  mask-image: radial-gradient(circle at 50% 50%, #000 48%, transparent 70.5%);
}

/* Until the first picture arrives, a pool of light breathes where it will stand. */
.hero-frame::before {
  content: '';
  grid-area: 1 / 1;
  background: radial-gradient(closest-side, rgb(214 190 150 / 10%), transparent 75%);
  animation: breathe 2.4s ease-in-out infinite alternate;
  transition: opacity 0.8s ease;
}

.hero-frame.is-loaded::before {
  opacity: 0;
  animation: none;
}

@keyframes breathe {
  from {
    opacity: 0.35;
  }
}

.hero-still {
  display: block;
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease 0.7s, transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hero-still.on {
  z-index: 1;
  opacity: 1;
  transition: opacity 0.7s ease, transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.hero-stage:hover .hero-still.on,
.hero-stage:focus-visible .hero-still.on {
  transform: scale(1.035);
}

.hero-caption {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  min-height: clamp(76px, 7cqi, 104px);
  margin-top: -9%;
  text-align: center;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.hero-stage.ready .hero-caption {
  opacity: 1;
}

.hero-caption.swap {
  animation: caption-in 0.6s ease both;
}

@keyframes caption-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
}

.hero-numeral {
  color: var(--gold);
  font: 500 clamp(11px, 0.8cqi, 13px)/1.4 var(--grotesk);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.hero-name {
  font: 400 clamp(25px, 2.2cqi, 38px)/1.2 var(--serif);
  transition: color 0.25s ease;
}

.hero-line {
  max-width: 30em;
  color: var(--quiet);
  font-size: clamp(13px, 0.95cqi, 15.5px);
  line-height: 1.5;
}

.hero-stage:hover .hero-name,
.hero-stage:focus-visible .hero-name {
  color: #f4dfae;
}

.hero-text {
  position: relative;
  z-index: 2;
  justify-self: start;
  max-width: max(300px, 44cqi);
  padding-bottom: 2cqi;
}

/* ---------- The museum: its halls down the left, and the lobby or a hall beside them ---------- */

.museum {
  display: grid;
  grid-template-columns: clamp(188px, 12.4vw, 268px) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    'dir hero'
    'dir main';
  column-gap: clamp(36px, 4.2vw, 104px);
  max-width: var(--museum-max);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(64px, 6vw, 120px);
}

.museum > .lobby-hero {
  grid-area: hero;
}

.museum > .lobby,
.museum > .hall {
  grid-area: main;
  min-width: 0;
}

/* The directory: a hall to a line, its numeral and its name, set like a museum's floor plan. A small gold lozenge
   marks the hall you are in (in the lobby, the hall in the showcase). It stays in view down a long hall. */
.directory {
  grid-area: dir;
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  margin-left: -16px;
  padding: clamp(19px, 2.4svh, 34px) 0 28px 16px;
  overflow-y: auto;
  scrollbar-width: none;
}

.directory::-webkit-scrollbar {
  display: none;
}

.dir-home {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  color: var(--quiet);
  font: 500 12px/1.4 var(--grotesk);
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: color 0.25s ease;
}

.dir-home::before {
  content: '';
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

.dir-home:hover,
.dir-home:focus-visible,
.dir-home[aria-current='page'] {
  color: var(--gold);
}

.dir-title {
  margin: 22px 0 8px;
  color: var(--faint);
  font: 500 11px/1.4 var(--grotesk);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.dir-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dir-item {
  position: relative;
  display: grid;
  grid-template-columns: clamp(32px, 2.2vw, 44px) minmax(0, 1fr);
  grid-template-areas: 'no name';
  align-items: baseline;
  align-content: center;
  min-height: clamp(34px, 3.7svh, 42px);
  color: #c4bcae;
  text-decoration: none;
  outline: none;
  transition: color 0.25s ease;
}

.dir-item::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -13px;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  background: var(--gold);
  box-shadow: 0 0 8px rgb(217 180 105 / 55%);
  opacity: 0;
  transform: rotate(45deg) scale(0.3);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.dir-item:hover,
.dir-item:focus-visible {
  color: var(--ivory);
}

.dir-item:focus-visible .dir-name {
  text-decoration: underline 1px rgb(217 180 105 / 60%);
  text-underline-offset: 5px;
}

.dir-item[aria-current='page'] {
  color: #ecd49c;
}

.dir-item[aria-current='page']::before {
  opacity: 1;
  transform: rotate(45deg);
}

/* In the lobby (on a wide screen), the hall in the showcase. */
@media (min-width: 961px) {
  body[data-screen='lobby'] .dir-item[data-shown] {
    color: #ecd49c;
  }

  body[data-screen='lobby'] .dir-item[data-shown] .dir-numeral {
    color: var(--gold);
  }

  body[data-screen='lobby'] .dir-item[data-shown]::before {
    opacity: 1;
    transform: rotate(45deg);
  }
}

.dir-item.is-soon {
  color: var(--faint);
}

/* A still of each hall's hero piece, and its count: a phone's list only (a wide screen has the showcase). */
.dir-art,
.dir-count {
  display: none;
}

.dir-still {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.dir-still.is-loaded {
  opacity: 1;
}

/* A frame waiting for its picture: a soft glint passes over the velvet until the picture fades in. */
.awaits {
  position: relative;
}

.awaits:not(.is-loaded, .is-missing)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgb(236 228 214 / 7%) 50%, transparent 70%) no-repeat;
  background-size: 250% 100%;
  animation: glint 1.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes glint {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: 0 0;
  }
}

.dir-emblem {
  width: 64%;
  height: 64%;
  fill: none;
  stroke: var(--tone);
  stroke-width: 3;
  opacity: 0.6;
}

.dir-numeral {
  grid-area: no;
  color: rgb(217 180 105 / 58%);
  font: 500 10.5px/1 var(--grotesk);
  letter-spacing: 0.14em;
  transition: color 0.25s ease;
}

.dir-item:hover .dir-numeral,
.dir-item:focus-visible .dir-numeral,
.dir-item[aria-current='page'] .dir-numeral {
  color: var(--gold);
}

.dir-item.is-soon .dir-numeral {
  color: var(--faint);
}

.dir-name {
  grid-area: name;
  font: 400 clamp(18px, 1.1vw, 22px)/1.3 var(--serif);
}

/* How the museum works: three short lines between hairlines, each with its longer note on hover (or a tap). */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(24px, 3vw, 56px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.pillar {
  padding: clamp(26px, 2.2vw, 44px) clamp(28px, 2.4vw, 52px) clamp(24px, 2vw, 40px);
  outline: none;
}

.pillar:first-child {
  padding-left: 0;
}

.pillar + .pillar {
  border-left: 1px solid var(--line);
}

.pillar-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 12px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pillar h2 {
  margin: 0 0 6px;
  font: 400 clamp(22px, 1.6vw, 30px)/1.25 var(--serif);
  transition: color 0.25s ease;
}

.pillar:hover h2,
.pillar:focus-visible h2,
.pillar[aria-describedby] h2 {
  color: #f4dfae;
}

.pillar p {
  margin: 0;
  color: var(--quiet);
  font-size: clamp(13.5px, 0.85vw, 15.5px);
}

.history {
  margin-top: clamp(64px, 6vw, 120px);
}

.history h2 {
  margin: 0 0 6px;
  font: 400 clamp(28px, 2.2vw, 42px)/1.2 var(--serif);
}

.history-lede {
  margin: 0;
  color: var(--quiet);
  font-size: clamp(14px, 0.85vw, 15.5px);
}

.hint {
  color: var(--faint);
}

/* Where a mouse is told to rest on something, a touch screen is told to tap it (html[data-touch], set by the page). */
html[data-touch='yes'] .hint-hover,
html:not([data-touch='yes']) .hint-tap {
  display: none;
}

/* The turning points on one line of gold; each tells its story on hover (or a tap). */
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0 clamp(18px, 1.6vw, 36px);
  margin: clamp(30px, 2.4vw, 48px) 0 0;
  padding: 0;
  list-style: none;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 5px;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(217 180 105 / 45%) 6%, rgb(217 180 105 / 45%) 94%, transparent);
}

.moment {
  position: relative;
  padding: 26px 0 6px;
  outline: none;
}

.moment::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 11px;
  height: 11px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--wall);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.moment:hover::before,
.moment:focus-visible::before,
.moment[aria-describedby]::before {
  background: var(--gold);
  box-shadow: 0 0 0 4px rgb(217 180 105 / 16%);
}

.moment-when {
  margin: 0;
  color: var(--gold);
  font: 500 12px/1.5 var(--grotesk);
  letter-spacing: 0.05em;
}

.moment h3 {
  margin: 4px 0 0;
  font: 400 clamp(20px, 1.3vw, 25px)/1.25 var(--serif);
  transition: color 0.25s ease;
}

.moment:hover h3,
.moment:focus-visible h3,
.moment[aria-describedby] h3 {
  color: #f4dfae;
}

.disclaimer {
  max-width: 76ch;
  margin: 34px 0 0;
  color: var(--faint);
  font-size: 12.5px;
  line-height: 1.6;
}

/* ---------- A collection's hall ---------- */

.hall-head {
  max-width: clamp(760px, 50vw, 1000px);
  padding: clamp(28px, 2.6svh, 44px) 0 clamp(30px, 2.4vw, 48px);
}

/* A hall fades in when it is chosen in the directory. */
.hall.arrive {
  animation: arrive 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes arrive {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

.hall-head h1 {
  margin: 0;
  font: 400 clamp(48px, 6.2vw, 128px)/1 var(--serif);
  background: linear-gradient(180deg, #fbf3df 20%, #e6c987 70%, #b8894a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hall-tagline {
  margin: 10px 0 20px;
  color: var(--gold);
  font: italic 400 clamp(21px, 1.5vw, 28px)/1.4 var(--serif);
}

.preface p {
  max-width: 50em;
  margin: 0 0 12px;
  color: #d9d1c4;
  font-size: clamp(15.5px, 0.95vw, 17px);
}

/* Text folded away under “Read on” (a hall's preface, a piece's inspiration). */
.more summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  font: 500 12.5px/1.8 var(--grotesk);
  letter-spacing: 0.06em;
  list-style: none;
  cursor: pointer;
}

.more summary::-webkit-details-marker {
  display: none;
}

.more summary::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1.3px solid currentColor;
  border-bottom: 1.3px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s ease;
}

.more[open] summary {
  margin-bottom: 10px;
}

.more[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.more summary:hover,
.more summary:focus-visible {
  color: #f4dfae;
}

.more:not([open]) .more-close,
.more[open] .more-open {
  display: none;
}

.vitrines {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(240px, 17vw, 420px), 1fr));
  gap: clamp(26px, 2.2vw, 44px) clamp(18px, 1.5vw, 30px);
}

.vitrine {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: start;
  gap: 0 10px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}

.vitrine-art {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  margin-bottom: 12px;
  border-radius: 8px;
  background: radial-gradient(56% 52% at 50% 47%, color-mix(in srgb, var(--velvet, #d9b469) 10%, #221d19) 0%, #0b0a09 82%);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.vitrine-still {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.vitrine-still.is-loaded {
  opacity: 1;
}

/* The piece's line, over the foot of its picture, while the pointer rests on the case. */
.vitrine-line {
  position: absolute;
  inset: auto 0 0;
  padding: 40px 16px 14px;
  background: linear-gradient(180deg, transparent, rgb(10 9 8 / 84%) 55%);
  color: #ece4d6;
  font-size: 13.5px;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.vitrine:hover .vitrine-art,
.vitrine:focus-visible .vitrine-art {
  box-shadow: 0 0 0 1px rgb(217 180 105 / 45%);
}

@media (hover: hover) {
  .vitrine:hover .vitrine-line,
  .vitrine:focus-visible .vitrine-line {
    opacity: 1;
    transform: none;
  }

  .vitrine:hover .vitrine-still,
  .vitrine:focus-visible .vitrine-still {
    transform: scale(1.04);
  }
}

@media (hover: none) {
  .vitrine-line {
    display: none;
  }
}

.vitrine-no {
  grid-row: span 2;
  color: var(--gold);
  font: 500 13px/1.9 var(--grotesk);
}

.vitrine-name {
  font: 400 clamp(22px, 1.45vw, 29px)/1.2 var(--serif);
}

.vitrine-kind {
  color: var(--faint);
  font: 500 11.5px/1.6 var(--grotesk);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pager {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 40px;
}

.back-link,
.pager a {
  color: var(--quiet);
  font: 500 13px/1.4 var(--grotesk);
  letter-spacing: 0.04em;
  text-decoration: none;
}

.back-link:hover,
.pager a:hover {
  color: var(--gold);
}

.hall-pager {
  margin-top: 48px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.hall-pager a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
}

.pager-no {
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0.14em;
}

/* ---------- A piece ---------- */

body[data-screen='piece'] .screen.piece {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  gap: 0 28px;
  max-width: none;
  padding-bottom: 0;
}

.stage {
  position: sticky;
  top: 0;
  height: calc(100vh - 72px);
  min-height: 420px;
  overflow: hidden;
  border-radius: 8px;
  background: #0a0908;
}

#scene {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
  outline: none;
}

#scene:active {
  cursor: grabbing;
}

#scene:focus-visible {
  box-shadow: inset 0 0 0 2px rgb(217 180 105 / 50%);
}

.stage[data-view='sketch'] #scene {
  cursor: default;
}

.sheet-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sheet-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sheet-svg line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 0.7;
}

.sheet-svg .ext {
  stroke-width: 0.5;
}

.sheet-svg .centre {
  stroke-dasharray: 9 3 2 3;
  stroke-width: 0.5;
  opacity: 0.7;
}

.sheet-svg .leader {
  stroke-width: 0.6;
}

.sheet-svg .arrow,
.sheet-svg .dot {
  fill: var(--ink);
}

.sheet-svg text {
  fill: var(--ink);
  font: 500 11px var(--sans);
  /* A rim of paper round each letter, so a label stays legible where it crosses the drawing. */
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.sheet-svg .view-t {
  font: italic 14px var(--serif);
  letter-spacing: 0.03em;
}

.sheet-svg .mark-t {
  font-size: 13px;
}

.sheet-note {
  position: absolute;
  right: 14px;
  bottom: calc(var(--dock, 52px) + 10px);
  max-width: 46ch;
  margin: 0;
  color: #6c645a;
  font-size: 11.5px;
  line-height: 1.45;
  text-align: right;
}

.stage[data-sketch='gouache'] .sheet-note {
  color: #d8d0c2;
}

/* Over a painting the callouts' leaders keep quiet; a number still names its stone on hover. */
.stage[data-sketch='gouache'] .sheet-svg .leader {
  opacity: 0.45;
}

.stage-top {
  position: absolute;
  top: 12px;
  right: 12px;
  left: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.stage-top > * {
  pointer-events: auto;
}

/* On the stage the link sits over the model and the mannequin, so it wears the icon buttons' dark glass to stay
   legible over a pale skin or a bright metal. */
.stage-top .back-link {
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgb(12 11 10 / 55%);
  color: var(--ivory);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.stage-top .back-link:hover {
  color: var(--gold);
}

.stage[data-view='sketch'] .stage-top .back-link {
  border-color: transparent;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #6c645a;
}

.stage[data-view='sketch'][data-sketch='gouache'] .stage-top .back-link {
  color: #e6dfd3;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgb(12 11 10 / 55%);
  color: var(--ivory);
  cursor: pointer;
}

.icon-btn svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-btn[aria-pressed='true'] .i-off {
  display: none;
}

.stage[data-view='sketch'] #spinBtn {
  visibility: hidden;
}

.stage-tools {
  display: flex;
  gap: 8px;
}

/* The lights as icons; the one in use says its name, the others theirs on hover. */
.seg-light button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
}

.seg-icon {
  flex: none;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.seg-light button[aria-checked='false'] .seg-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A stone callout on the drawing: its number answers the pointer with the stone's note. */
.sheet-svg .callout {
  pointer-events: auto;
  cursor: help;
}

.sheet-svg .hit {
  fill: transparent;
  stroke: none;
  pointer-events: all;
}

.sheet-svg .callout:hover .leader,
.sheet-svg .callout[aria-describedby] .leader {
  stroke-width: 1.3;
}

.sheet-svg .callout:hover .mark-t,
.sheet-svg .callout[aria-describedby] .mark-t {
  font-weight: 700;
}

.stage-status {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgb(12 11 10 / 70%);
  color: var(--quiet);
  font-size: 13px;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.stage-status.on {
  opacity: 1;
}

.stage-dock {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.seg {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgb(12 11 10 / 72%);
  backdrop-filter: blur(8px);
}

.seg button {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--quiet);
  font-size: 13px;
  cursor: pointer;
}

.seg button:hover {
  color: var(--ivory);
}

.seg button[aria-selected='true'],
.seg button[aria-checked='true'] {
  background: var(--gold-soft);
  color: #f4dfae;
}

.seg-small button {
  padding: 0 11px;
  font-size: 12.5px;
}

.fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--quiet);
  text-align: center;
}

.card {
  padding: 24px 4px 48px;
}

.card h1 {
  margin: 0 0 6px;
  font: 400 clamp(38px, 4.4vw, 54px)/1.05 var(--serif);
}

.card .line {
  margin: 0 0 16px;
  color: var(--gold);
  font: italic 400 19px/1.45 var(--serif);
}

.badge {
  display: inline-block;
  margin: 0 0 8px;
  padding: 2px 12px;
  border: 1px solid rgb(217 180 105 / 45%);
  border-radius: 999px;
  color: #e9cf95;
  font: 500 12px/1.8 var(--grotesk);
  letter-spacing: 0.08em;
}

.card section {
  padding: 18px 0 8px;
  border-top: 1px solid var(--line);
}

.card h2 {
  margin: 0 0 10px;
  color: var(--gold);
  font: 500 12px/1.4 var(--grotesk);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.card p {
  margin: 0 0 12px;
  color: #ddd5c8;
}

/* Metal, enamel and carving; techniques and settings: a row of chips each, every chip with its note on hover. */
.spec {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 8px 14px;
  margin: 2px 0 14px;
}

.spec:empty {
  display: none;
}

.spec > div {
  display: contents;
}

.spec dt {
  color: var(--faint);
  font: 500 11.5px/30px var(--grotesk);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.spec dd {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 3px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgb(255 255 255 / 2.5%);
  color: #e6ddcf;
  font-size: 13px;
  line-height: 1.35;
  outline: none;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.chip:hover,
.chip:focus-visible,
.chip[aria-describedby] {
  border-color: rgb(217 180 105 / 55%);
  background: var(--gold-soft);
  color: #f4dfae;
}

/* A word in a table with a note: underlined with dots. */
.term {
  border-bottom: 1px dotted rgb(217 180 105 / 55%);
  outline: none;
}

.term:hover,
.term:focus-visible,
.term[aria-describedby] {
  border-bottom-color: var(--gold);
  color: #f4dfae;
}

.table-wrap {
  overflow-x: auto;
}

.stones {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.stones th,
.stones td {
  padding: 6px 6px 6px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

.stones th {
  color: var(--faint);
  font: 500 11px/1.4 var(--grotesk);
  letter-spacing: 0.06em;
}

.stones .mark {
  color: var(--gold);
}

/* A long list shows its first six lines (STONE_LINES in main.mjs) until “Show all”. */
.stones.folded tbody tr:nth-child(n + 7) {
  display: none;
}

.unfold {
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gold);
  font: 500 12.5px/1.6 var(--grotesk);
  letter-spacing: 0.06em;
  cursor: pointer;
}

.unfold:hover,
.unfold:focus-visible {
  color: #f4dfae;
}

.total {
  margin-top: 8px !important;
  color: var(--quiet) !important;
  font-size: 13px;
}

.dims {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 0 0 8px;
}

.dims dt {
  color: var(--faint);
  font: 500 11.5px/1.5 var(--grotesk);
  letter-spacing: 0.06em;
}

.dims dd {
  margin: 2px 0 0;
  color: var(--ivory);
  font-size: 14px;
}

.fantasy {
  margin-top: 4px;
  padding: 16px 16px 8px !important;
  border: 1px solid rgb(217 180 105 / 30%) !important;
  border-radius: 8px;
  background: var(--gold-soft);
}

.missing {
  color: var(--quiet);
}

/* ---------- Notes on hover: one floating box for every .has-tip ---------- */

.has-tip {
  cursor: help;
}

@media (hover: none) {
  .has-tip {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
}

.seg button.has-tip,
.icon-btn.has-tip {
  cursor: pointer;
}

.tip-text {
  display: none;
}

.tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  width: max-content;
  max-width: min(320px, calc(100vw - 16px));
  padding: 10px 14px 11px;
  border: 1px solid rgb(217 180 105 / 28%);
  border-radius: 8px;
  background: rgb(24 21 18 / 97%);
  box-shadow: 0 14px 36px rgb(0 0 0 / 50%);
  color: #e6ddcf;
  font: 400 13px/1.6 var(--sans);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.tip[data-side='below'] {
  transform: translateY(-4px);
}

.tip.on {
  opacity: 1;
  transform: none;
}

.tip strong {
  display: block;
  margin-bottom: 3px;
  color: var(--gold);
  font: 500 12.5px/1.5 var(--grotesk);
  letter-spacing: 0.04em;
}

.tip .tip-row {
  display: block;
}

.tip .tip-row + .tip-row {
  margin-top: 3px;
}

.tip .tip-quiet {
  color: var(--quiet);
}

/* ---------- 中EN: the English under the Chinese, smaller and quieter ---------- */

html[data-lang='both'] .lede .en,
html[data-lang='both'] .vitrine-line .en,
html[data-lang='both'] .hall-tagline .en,
html[data-lang='both'] .card .line .en,
html[data-lang='both'] .history-lede .en,
html[data-lang='both'] .pillar p .en,
html[data-lang='both'] .hero-line .en,
html[data-lang='both'] .disclaimer .en,
html[data-lang='both'] .tip > .en {
  display: block;
  color: var(--faint);
  font-size: 0.92em;
}

html[data-lang='both'] .tip > .en {
  margin-top: 4px;
}

html[data-lang='both'] .tip .tip-row.en {
  margin-top: 0;
  color: var(--quiet);
}

html[data-lang='both'] h1 .en,
html[data-lang='both'] .vitrine-name .en,
html[data-lang='both'] .moment h3 .en,
html[data-lang='both'] .pillar h2 .en,
html[data-lang='both'] .history h2 .en {
  display: block;
  font-size: 0.62em;
  font-style: italic;
  opacity: 0.75;
}

/* A hall's name has its English beside it, smaller and in italic. */
html[data-lang='both'] .dir-name .en,
html[data-lang='both'] .hero-name .en {
  margin-left: 0.4em;
  font-size: 0.64em;
  font-style: italic;
  opacity: 0.7;
}

html[data-lang='both'] .hero-caption {
  min-height: 92px;
}

html[data-lang='both'] p.en {
  color: var(--faint);
  font-size: 0.93em;
}

html[data-lang='both'] .seg button .en,
html[data-lang='both'] .back-link .en,
html[data-lang='both'] .pager .en,
html[data-lang='both'] .dir-count .en,
html[data-lang='both'] .dir-home .en,
html[data-lang='both'] .dir-title .en,
html[data-lang='both'] .vitrine-kind .en,
html[data-lang='both'] .crumb .en,
html[data-lang='both'] .eyebrow .en,
html[data-lang='both'] .card h2 .en,
html[data-lang='both'] .stones .en,
html[data-lang='both'] .badge .en,
html[data-lang='both'] .dims dt .en,
html[data-lang='both'] .spec dt .en,
html[data-lang='both'] .chip .en,
html[data-lang='both'] .more summary .en,
html[data-lang='both'] .unfold .en,
html[data-lang='both'] .moment-when .en,
html[data-lang='both'] .tip strong .en,
html[data-lang='both'] .tip .tip-row:not(.zh, .en) .en {
  margin-left: 0.35em;
  opacity: 0.7;
}

html[data-lang='both'] .spec dt .en {
  display: block;
  margin-left: 0;
  line-height: 1.4;
}

/* ---------- Small screens ---------- */

@media (max-width: 960px) {
  .lobby-hero {
    min-height: 0;
    padding: 8px 0 0;
  }

  .lobby-hero > * {
    grid-area: auto;
  }

  .hero-text {
    justify-self: stretch;
    max-width: none;
    padding: 0;
  }

  .lobby-hero h1 {
    font-size: clamp(44px, 11cqi, 76px);
  }

  .lede {
    max-width: 34em;
    font-size: 15px;
  }

  /* On a phone the showcase holds the first hall's piece alone; the list of halls below names it. */
  .hero-stage {
    justify-self: center;
    width: min(90vw, 560px, 62svh);
    margin: -8px 0;
  }

  .hero-stage::before {
    display: none;
  }

  .hero-caption {
    display: none;
  }

  /* One column: the lobby's title, then its list of halls, then the rest. */
  .museum {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      'hero'
      'dir'
      'main';
  }

  .directory {
    position: static;
    max-height: none;
    margin-left: 0;
    padding: 0;
    overflow: visible;
  }

  body[data-screen='lobby'] .dir-home {
    display: none;
  }

  .dir-title {
    margin: 30px 0 6px;
    color: var(--ivory);
    font: 400 clamp(26px, 5vw, 32px)/1.2 var(--serif);
    letter-spacing: 0;
    text-transform: none;
  }

  /* The halls between hairlines: a still of each one's hero piece, its name and count, and its numeral. */
  .dir-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
  }

  .dir-item {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    grid-template-areas:
      'art name no'
      'art count no';
    align-items: center;
    gap: 1px 14px;
    min-height: 78px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    color: var(--ivory);
  }

  .dir-item::before {
    display: none;
  }

  .dir-art {
    display: grid;
    grid-area: art;
    place-items: center;
    width: 52px;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 42%, #2c2621, #13110f 72%);
  }

  .dir-name {
    align-self: end;
    font-size: 21px;
  }

  .dir-count {
    display: block;
    grid-area: count;
    align-self: start;
    color: var(--quiet);
    font: 500 11.5px/1.6 var(--grotesk);
    letter-spacing: 0.06em;
  }

  /* In a hall, the directory is a strip of halls along the top, the one you are in lit in gold. */
  body[data-screen='hall'] .directory {
    display: flex;
    gap: 8px;
    margin: 0 calc(-1 * clamp(18px, 4vw, 48px));
    padding: 10px clamp(18px, 4vw, 48px) 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  body[data-screen='hall'] .dir-title,
  body[data-screen='hall'] .dir-art,
  body[data-screen='hall'] .dir-count {
    display: none;
  }

  body[data-screen='hall'] .dir-list {
    display: flex;
    gap: 8px;
  }

  body[data-screen='hall'] .dir-home,
  body[data-screen='hall'] .dir-item {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: none;
    white-space: nowrap;
  }

  body[data-screen='hall'] .dir-home::before {
    display: none;
  }

  body[data-screen='hall'] .dir-name {
    align-self: center;
    font: 400 14px/1 var(--sans);
  }

  html[data-lang='both'] body[data-screen='hall'] .dir-name .en {
    margin-left: 0.35em;
    font-size: 0.9em;
    font-style: normal;
  }

  body[data-screen='hall'] .dir-numeral {
    align-self: center;
  }

  body[data-screen='hall'] .dir-item[aria-current='page'] {
    border-color: rgb(217 180 105 / 60%);
    background: rgb(217 180 105 / 12%);
    color: #f1dca8;
  }

  .hall-head {
    padding-top: 20px;
  }

  /* The turning points down a line of gold. */
  .timeline {
    grid-template-columns: 1fr;
    gap: 0;
    padding-left: 24px;
  }

  .timeline::before {
    top: 6px;
    right: auto;
    bottom: 10px;
    left: 5px;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, rgb(217 180 105 / 45%), rgb(217 180 105 / 45%) 90%, transparent);
  }

  .moment {
    padding: 0 0 16px;
  }

  .moment::before {
    top: 4px;
    left: -24px;
  }

  body[data-screen='piece'] .screen.piece {
    display: block;
    padding: 0;
  }

  .stage {
    position: relative;
    height: min(64vh, 620px);
    min-height: 360px;
    border-radius: 0;
  }

  .card {
    padding: 20px clamp(18px, 4vw, 48px) 48px;
  }

  .stage-dock {
    bottom: 10px;
  }

  .seg button {
    min-height: 32px;
    padding: 0 10px;
  }

  .sheet-note {
    display: none;
  }
}

@media (max-width: 720px) {
  .pillars {
    grid-template-columns: 1fr;
  }

  .pillar {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 14px;
    padding: 18px 0 17px;
  }

  .pillar + .pillar {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .pillar-icon {
    grid-row: span 2;
    margin: 3px 0 0;
  }
}

@media (max-width: 560px) {
  .dir-list {
    grid-template-columns: 1fr;
  }

  .vitrines {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
  }

  .vitrine-name {
    font-size: 20px;
  }

  .seg-small button {
    padding: 0 8px;
  }

  .dims {
    gap: 10px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dir-item,
  .dir-item::before,
  .hero-still,
  .hero-still.on,
  .hero-caption,
  .dir-still,
  .vitrine-still,
  .vitrine-line,
  .tip {
    transition: none;
  }

  .hall.arrive,
  .hero-caption.swap,
  .hero-frame::before,
  .awaits::after {
    animation: none;
  }
}