:root {
  --bg: #0a0a0b;
  --ink: #ece7dd;
  --ink-dim: rgba(236, 231, 221, 0.62);
  --ink-faint: rgba(236, 231, 221, 0.32);
  --hair: rgba(236, 231, 221, 0.14);
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --pad: clamp(18px, 4vw, 56px);
}

* { box-sizing: border-box; }

html { background: var(--bg); color-scheme: dark; height: 100%; }

body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  touch-action: none;
}

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible { outline: 1px solid var(--ink-dim); outline-offset: 6px; }

/* ---------- stage ---------- */

#stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}
#stage:active { cursor: grabbing; }
#stage.is-hover { cursor: pointer; }

#grain {
  position: fixed;
  inset: -50%;
  z-index: 3;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  mix-blend-mode: screen;
}
@media (prefers-reduced-motion: no-preference) {
  #grain { animation: grain 0.9s steps(4) infinite; }
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-4%, 3%); }
  50% { transform: translate(3%, -5%); }
  75% { transform: translate(-2%, -2%); }
  100% { transform: translate(4%, 4%); }
}

/* ---------- loader ---------- */

#loader {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: var(--bg);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  transition: opacity 1200ms var(--ease-out), visibility 0s linear 1200ms;
}
#loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-mark {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: var(--ink-dim);
}
.loader-bar { width: 160px; height: 1px; background: var(--hair); overflow: hidden; }
#loader-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--ease-out);
}
.loader-hint {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- overlay UI ---------- */

.mark, .legend, .card, .controls {
  position: fixed;
  z-index: 4;
  opacity: 0;
  transform: translateY(10px);
}
.is-ready .mark, .is-ready .legend, .is-ready .controls {
  animation: rise 1000ms var(--ease-out) forwards;
}
.is-ready .mark { animation-delay: 300ms; }
.is-ready .legend { animation-delay: 700ms; }
.is-ready .controls { animation-delay: 900ms; }
@keyframes rise { to { opacity: 1; transform: none; } }

.mark { top: var(--pad); left: var(--pad); pointer-events: none; }
.mark-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(28px, 3.2vw, 44px);
  letter-spacing: 0.22em;
  line-height: 1;
}
.mark-sub {
  margin: 8px 0 0 0.1em;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 19px);
  color: var(--ink-dim);
}

.legend {
  left: var(--pad);
  bottom: var(--pad);
  display: grid;
  gap: 6px;
}
.legend-item {
  display: grid;
  grid-template-columns: 26px auto;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
  text-align: left;
  color: var(--ink-faint);
  transition: color 300ms var(--ease-out);
}
.legend-item:hover { color: var(--ink-dim); }
.legend-item[aria-pressed="true"] { color: var(--ink); }
.legend-num { font-family: var(--serif); font-size: 15px; letter-spacing: 0.05em; }
.legend-name {
  font-family: var(--serif);
  font-size: clamp(19px, 1.9vw, 26px);
  font-weight: 300;
  position: relative;
}
.legend-name::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--ease-out);
}
.legend-item[aria-pressed="true"] .legend-name::after { transform: scaleX(1); }

.card {
  right: var(--pad);
  bottom: var(--pad);
  width: min(360px, calc(100vw - 2 * var(--pad)));
  padding-top: 14px;
  border-top: 1px solid var(--hair);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
  pointer-events: none;
}
.card.is-on { opacity: 1; transform: none; }
.card-label {
  display: flex;
  gap: 14px;
  align-items: baseline;
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.card-label span:first-child { font-family: var(--serif); font-size: 15px; color: var(--ink); }
.card-text {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.45;
}
.card-details { display: flex; gap: 28px; margin: 0; }
.card-details div { display: grid; gap: 2px; }
.card-details dt { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); }
.card-details dd { margin: 0; font-size: 13px; color: var(--ink-dim); }

.controls {
  right: var(--pad);
  top: var(--pad);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 6px 6px 18px;
  border-radius: 6px;
  background: rgba(10, 10, 11, 0.42);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
}
.hint {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-dim);
}
.hint-touch { display: none; }
@media (pointer: coarse) {
  .hint-mouse { display: none; }
  .hint-touch { display: inline; }
}
.controls-sep { width: 1px; height: 16px; background: var(--hair); }
.zoom { display: flex; gap: 4px; }
.zoom button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--ink-dim);
  transition: color 250ms var(--ease-out), background-color 250ms var(--ease-out), border-color 250ms var(--ease-out), transform 150ms var(--ease-out);
}
.zoom button svg { width: 12px; height: 12px; display: block; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
.zoom button:hover { color: var(--ink); background: rgba(236, 231, 221, 0.08); border-color: var(--hair); }
.zoom button:active { transform: scale(0.94); }
.zoom button:focus-visible { outline: none; border-color: var(--ink-dim); color: var(--ink); }

/* ---------- small screens ---------- */

@media (max-width: 720px) {
  /* scrims so the overlays stay readable over the sculptures */
  body::before, body::after {
    content: "";
    position: fixed;
    left: 0; right: 0;
    height: 42vh;
    z-index: 3;
    pointer-events: none;
  }
  body::before { top: 0; background: linear-gradient(to bottom, rgba(10, 10, 11, 0.9), rgba(10, 10, 11, 0)); }
  body::after { bottom: 0; background: linear-gradient(to top, rgba(10, 10, 11, 0.92), rgba(10, 10, 11, 0)); }
  .card { bottom: auto; top: calc(var(--pad) + 76px); right: var(--pad); left: var(--pad); width: auto; }
  .card-text { font-size: 16px; }
  .legend { gap: 2px; }
  .legend-name { font-size: 18px; }
  .controls { top: auto; bottom: var(--pad); padding: 5px; gap: 0; }
  .hint, .controls-sep { display: none; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .is-ready .mark, .is-ready .legend, .is-ready .controls { animation: none; opacity: 1; transform: none; }
  .card { transition: opacity 300ms var(--ease-out); transform: none; }
}