/* cns.archive
   One long wall in a dark room. The walk moves the wall sideways; the only thing
   that changes color is the wall itself. Nothing here needs editing to add paintings. */

:root {
  color-scheme: dark;

  /* color */
  --ground: #161511; /* outside the wall, under the floor */
  --wall: #2b2a25; /* replaced live by the mood of the nearest paintings */
  --parchment: #e8dcc3; /* wall text */
  --muted: #b4a78d; /* small text */
  --amber: #f2b872; /* light */
  --bronze-hi: #b08a55;
  --bronze: #7c5b34;
  --bronze-lo: #4f3920;
  --focus: #f0c27f;

  /* type */
  --display:
    "Cormorant Garamond", Garamond, "Times New Roman", serif; /* titles */
  --text: "IBM Plex Mono", "Courier New", monospace; /* notes and small text */
  --fs-hero: clamp(40px, min(5.2vw, 9.4vh), 88px);
  --fs-wall-l: clamp(38px, 5.4vw, 88px);
  --fs-wall-m: clamp(19px, 1.8vw, 28px);
  --fs-closeup: clamp(34px, 4.1vw, 64px);
  --fs-note: clamp(15px, 1.1vw, 17px);
  --fs-label: clamp(19px, 1.4vw, 24px);
  --fs-small: 13px;

  --gutter-l: max(20px, env(safe-area-inset-left, 0px) + 12px);
  --gutter-r: max(20px, env(safe-area-inset-right, 0px) + 12px);
  --bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);

  --slow: cubic-bezier(0.45, 0, 0.2, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--ground);
  color: var(--parchment);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--parchment);
  font: 400 15px/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
}
::selection {
  background: rgba(242, 184, 114, 0.32);
  color: #fff6e6;
}
img {
  max-width: 100%;
}
[hidden] {
  display: none !important;
}
button {
  font: inherit;
  color: inherit;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
  border-radius: 2px;
}

.skip {
  position: fixed;
  left: var(--gutter-l);
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  z-index: 60;
  padding: 8px 14px;
  background: var(--ground);
  color: var(--parchment);
  font: 400 14px/1.2 var(--text);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus {
  transform: none;
}

.textbtn {
  appearance: none;
  background: none;
  border: 0;
  padding: 6px 2px;
  font: 400 14px/1.2 var(--text);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.3s ease;
}
.textbtn:hover {
  color: var(--parchment);
}
.textbtn[disabled] {
  opacity: 0.35;
  cursor: default;
}

/* ------------------------------------------------------------------
   Without JavaScript: a plain, quiet page.
   ------------------------------------------------------------------ */

html:not(.js) .walk,
html:not(.js) .hint,
html:not(.js) .finder,
html:not(.js) .allbtn,
html:not(.js) .overview,
html:not(.js) .closeup {
  display: none;
}

html:not(.js) body {
  background: #22211c;
}

html:not(.js) .walltext {
  max-width: 760px;
  margin: 0 auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
}
html:not(.js) .walltext--intro {
  padding-block: 16vh 10vh;
}
html:not(.js) .walltext--outro {
  width: min(300px, 70vw);
  padding: 0 0 22vh;
}

.fallback {
  max-width: 760px;
  margin: 0 auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
  display: grid;
  gap: 18vh;
}
.fallback:focus {
  outline: none;
}
.fallback__room {
  display: grid;
  gap: 14vh;
}
.fallback__room-name {
  margin: 0;
  font: 400 var(--fs-wall-l)/1 var(--display);
}
.fallback__item {
  display: grid;
  gap: 6px;
}
.fallback__frame {
  padding: 6px;
  margin-bottom: 18px;
  background: linear-gradient(
    155deg,
    var(--bronze-hi),
    var(--bronze) 35%,
    var(--bronze-lo) 60%,
    var(--bronze) 85%
  );
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.7);
  justify-self: start;
}
.fallback__frame img {
  display: block;
  height: auto;
}
.fallback__title {
  margin: 0;
  font: 400 26px/1.2 var(--display);
}
.fallback__meta {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--muted);
}
.fallback__note {
  margin: 14px 0 0;
  max-width: 52ch;
  font: 400 16px/1.75 var(--text);
}

.js .fallback,
.js body > .walltext,
.js body > .signoff {
  display: none;
}

/* Without JavaScript, the drawing and the signature close the plain list */
html:not(.js) .signoff {
  width: min(300px, 70vw);
  aspect-ratio: 1;
  margin: 12vh auto 0;
  opacity: 0.6;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 95%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 95%);
}

/* ------------------------------------------------------------------
   The walk
   ------------------------------------------------------------------ */

html.js {
  scrollbar-width: none;
  overscroll-behavior: none;
}
html.js::-webkit-scrollbar {
  display: none;
}
html.is-locked {
  overflow: hidden;
}

.walk {
  position: relative;
  height: 100vh;
  height: calc(var(--scroll, 0) * 1px + 100lvh);
}

/* The wall is pinned to the window while the page scrolls underneath it. It is fixed rather
   than sticky: Safari sometimes lost track of a sticky wall while the walk moved the page,
   and for a moment drew only part of it, or none, which flickered black. */
.stage {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  overflow: clip;
  touch-action: pan-y;
  background: var(--ground);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.wall,
.focusdim,
.vignette,
.veil,
.dark {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.wall {
  background: var(--wall);
}

/* The floor hangs on the wall's own layer, so walking up to a painting leaves it behind. */
.floor {
  position: absolute;
  background: linear-gradient(
    to bottom,
    rgba(6, 6, 4, 0.3),
    rgba(6, 6, 4, 0.58) calc(var(--fh, 120px) * 0.7),
    rgba(6, 6, 4, 0.66) var(--fh, 120px),
    rgba(6, 6, 4, 0.72)
  );
  border-top: 1px solid rgba(232, 220, 195, 0.075);
  pointer-events: none;
  transition: opacity 1.3s ease;
}
.is-close .floor {
  opacity: 0.12;
}

/* Looking closely: the room falls away into a soft spotlight around the painting. */
@property --vx {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 34%;
}
@property --vy {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 46%;
}
.focusdim {
  background: radial-gradient(
    ellipse 62% 66% at var(--vx) var(--vy),
    rgba(3, 4, 6, 0) 30%,
    rgba(3, 4, 6, 0.55) 70%,
    rgba(3, 4, 6, 0.9) 100%
  );
  opacity: 0;
  transition:
    opacity 1.2s ease,
    --vx 1s ease,
    --vy 1s ease;
}
.is-close .focusdim {
  opacity: 1;
}
.vignette {
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.3),
      rgba(0, 0, 0, 0.12) 18%,
      rgba(0, 0, 0, 0) 34%
    ),
    radial-gradient(
      ellipse 115% 95% at 50% 42%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0.2) 75%,
      rgba(0, 0, 0, 0.52) 100%
    );
}

/* Looking closely: the edge shading fades, so nothing darkens the painting */
.vignette {
  transition: opacity 1.2s ease;
}
.is-close .vignette {
  opacity: 0;
}

/* A faint, still film grain. It keeps the soft light free of banding. */
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
}

.veil {
  background: #0c0c0a;
  opacity: 0;
  transition: opacity 0.38s ease;
}
.veil.is-down {
  opacity: 1;
}

/* The first screen: a dark, empty wall. The light rises once. */
.dark {
  background: #0a0a08;
  opacity: 1;
}
.lit .dark {
  opacity: 0;
  transition: opacity 2.5s cubic-bezier(0.5, 0, 0.25, 1);
}

.track {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  transform-origin: 0 0;
  will-change: transform;
}

/* ------------------------------------------------------------------
   A painting on the wall
   ------------------------------------------------------------------ */

.piece {
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  transition:
    opacity 1.05s ease,
    filter 1.05s ease;
}
.is-close .piece {
  opacity: 0;
  filter: blur(6px);
}
.is-close .piece.is-active {
  opacity: 1;
  filter: none;
}

.pool {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--w) * 2.1 + 280px);
  height: calc(var(--h) * 2.5 + 320px);
  transform: translate(-50%, -56%);
  background:
    radial-gradient(
      ellipse 34% 26% at 50% 40%,
      rgba(255, 216, 168, 0.14),
      rgba(255, 216, 168, 0.1) 30%,
      rgba(255, 216, 168, 0.045) 62%,
      rgba(255, 216, 168, 0) 100%
    ),
    radial-gradient(
      closest-side,
      rgba(255, 200, 140, 0.17),
      rgba(255, 198, 136, 0.14) 22%,
      rgba(255, 196, 134, 0.095) 42%,
      rgba(255, 194, 132, 0.05) 62%,
      rgba(255, 192, 130, 0.018) 82%,
      rgba(255, 190, 128, 0) 100%
    );
  pointer-events: none;
}

.frame {
  position: absolute;
  left: calc(var(--w) / -2);
  top: calc(var(--h) / -2);
  width: var(--w);
  height: var(--h);
  padding: var(--f);
  background: linear-gradient(
    152deg,
    var(--bronze-hi) 0%,
    var(--bronze) 28%,
    var(--bronze-lo) 54%,
    #8d6a3c 78%,
    #5f4527 100%
  );
  box-shadow:
    0 0 0 1px rgba(18, 12, 6, 0.6),
    inset 0 1px 0 rgba(255, 228, 186, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 calc(var(--h) * 0.04 + 6px) calc(var(--h) * 0.08 + 10px) -4px
      rgba(0, 0, 0, 0.55),
    0 calc(var(--h) * 0.12 + 16px) calc(var(--h) * 0.3 + 34px) -12px
      rgba(0, 0, 0, 0.42);
}
.canvas {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #1c1b17;
}
.canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.5),
    inset 0 2px 6px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.ph {
  position: absolute;
  inset: -10%;
  background-size: 100% 100%;
  filter: blur(12px);
}
.canvas img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.is-loaded .canvas img {
  opacity: 1;
}

.look {
  position: absolute;
  left: calc(var(--w) / -2);
  top: calc(var(--h) / -2);
  width: var(--w);
  height: var(--h);
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.look:focus-visible {
  outline-offset: 10px;
}

.label {
  position: absolute;
  left: 0;
  top: calc(var(--h) / 2 + clamp(16px, 2.6vh, 28px));
  width: max-content;
  max-width: max(var(--w), 260px);
  transform: translateX(-50%);
  display: grid;
  gap: 8px;
  text-align: center;
  transition: opacity 0.6s ease;
}
.label__title {
  font: 400 var(--fs-label)/1.25 var(--display);
  color: var(--parchment);
  text-wrap: balance;
}
.label__meta {
  font: 400 11.5px/1.65 var(--text);
  color: var(--muted);
  opacity: 0.65;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.is-close .is-active .label {
  opacity: 0;
}

/* ------------------------------------------------------------------
   Words printed on the wall
   ------------------------------------------------------------------ */

.walltext {
  margin: 0;
}
.walltext > * {
  margin: 0;
}

.on-wall {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--tw);
  transform: translateY(-50%);
  transition: opacity 1s var(--slow);
}
.on-wall::before {
  content: "";
  position: absolute;
  left: 38%;
  top: 46%;
  width: 165%;
  height: 230%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    closest-side,
    rgba(255, 204, 146, 0.12),
    rgba(255, 202, 144, 0.09) 25%,
    rgba(255, 200, 140, 0.05) 52%,
    rgba(255, 198, 138, 0.018) 78%,
    rgba(255, 196, 136, 0)
  );
  z-index: -1;
  pointer-events: none;
}
.is-close .on-wall {
  opacity: 0;
}

.walltext__name {
  font: 400 var(--fs-hero)/0.95 var(--display);
  letter-spacing: -0.012em;
  color: var(--parchment);
}
.walltext__tagline {
  margin-top: 0.75em;
  font: 400 15px/1.5 var(--text);
  color: var(--parchment);
  opacity: 0.82;
}
.walltext__line {
  margin-top: 1.9em;
  max-width: 31ch;
  font: 400 clamp(13px, 0.95vw, 15px)/1.7 var(--text);
  color: var(--muted);
}
/* Cansu's signature (signature.svg, the same cream as the wall text) */
.walltext__signature {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.68;
}
/* the same spot as on the wall: the "C" along her left shoulder */
html:not(.js) .walltext__signature {
  width: 55.2%;
  margin: -25.4% 0 0 12.8%;
  transform: rotate(2deg);
  transform-origin: 0 0;
}
/* the email, centered under the drawing like a painting's label
   (change it in index.html, in two places) */
.walltext__contact {
  font: 400 11.5px/1.65 var(--text);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.js .track > .walltext--outro .walltext__signature {
  transform: rotate(var(--tilt, 0deg));
  transform-origin: 0 0;
}
.js .track > .walltext--outro .walltext__contact {
  position: absolute;
  left: var(--cx, 50%);
  top: var(--cy, calc(100% + 24px));
  transform: translateX(-50%);
}
html:not(.js) .walltext__contact {
  margin-top: 20px;
  text-align: center;
}
.walltext__contact a {
  color: var(--muted);
  opacity: 0.8;
  text-decoration: none;
  text-underline-offset: 4px;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.walltext__contact a:hover,
.walltext__contact a:focus-visible {
  color: var(--parchment);
  opacity: 1;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
.js .track > .walltext--outro {
  transform: none;
  opacity: var(--near, 1);
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.js .track > .walltext--outro a {
  pointer-events: auto;
}
.js .track > .walltext--outro::before {
  content: none;
}

/* The very end: the painter, drawn on the wall in pale chalk-like lines
   (woman-bun-brush.svg, its lines colored like the wall text) */
.js .track > .signoff {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  opacity: calc(var(--near, 1) * 0.62);
  transition: opacity 0.6s ease;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 95%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 95%);
  pointer-events: none;
}
.signoff img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
/* the same soft lamp light as the words beside her */
.js .track > .signoff::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    closest-side at 50% 42%,
    rgba(255, 204, 146, 0.16),
    rgba(255, 202, 144, 0.1) 35%,
    rgba(255, 200, 140, 0.04) 70%,
    rgba(255, 198, 138, 0)
  );
}
.is-close .track > .signoff,
.is-close .track > .walltext--outro {
  opacity: 0;
}

/* A room sign, printed on the wall where a new room begins. */
.roomsign > * {
  margin: 0;
}
.roomsign.on-wall {
  width: max-content;
  max-width: 80vw;
  transform: translate(-50%, -50%);
}
.roomsign__number {
  font: 400 13.5px/1.3 var(--text);
  color: var(--muted);
  letter-spacing: 0.08em;
}
.roomsign__name {
  margin-top: 0.25em;
  font: 400 clamp(26px, 2.8vw, 46px)/1.1 var(--display);
  color: var(--parchment);
  letter-spacing: -0.005em;
}
.roomsign__count {
  margin-top: 1em;
  padding-top: 0.8em;
  border-top: 1px solid rgba(232, 220, 195, 0.28);
  width: 3.2em;
  white-space: nowrap;
  font: 400 13.5px/1.3 var(--text);
  color: var(--muted);
}

/* Opening: the wall text waits for the light. */
.js .on-wall.walltext--intro::before {
  opacity: 0;
}
.lit .on-wall.walltext--intro::before {
  opacity: 1;
  transition: opacity 2.6s ease 0.5s;
}

/* ------------------------------------------------------------------
   Hint, finder line, all paintings
   ------------------------------------------------------------------ */

.hint {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bottom) + 92px);
  z-index: 20;
  margin: 0;
  transform: translateX(-50%);
  font: 400 14px/1 var(--text);
  color: var(--muted);
  letter-spacing: 0.04em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.4s ease;
}
.hint.is-shown {
  opacity: 0.9;
}
.hint.is-gone {
  opacity: 0;
  transition-duration: 0.9s;
}

.finder {
  position: fixed;
  left: 50%;
  bottom: var(--bottom);
  z-index: 20;
  width: min(380px, calc(100vw - 220px));
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 1.4s ease;
}
.finder__room {
  margin: 0 0 4px;
  text-align: center;
  font: 400 18px/1.2 var(--display);
  color: var(--parchment);
  transition: opacity 0.35s ease;
}
.finder__room.is-fading {
  opacity: 0;
}
.finder__line {
  position: relative;
  height: 30px;
}
.finder__line::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(232, 220, 195, 0.2);
}
.finder__marker {
  position: absolute;
  left: 0;
  top: calc(50% - 1px);
  width: var(--seg, 30px);
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    rgba(242, 184, 114, 0),
    rgba(242, 184, 114, 0.9),
    rgba(242, 184, 114, 0)
  );
  pointer-events: none;
}
.finder__dot {
  position: absolute;
  top: 0;
  height: 30px;
  width: var(--hit, 28px);
  margin-left: calc(var(--hit, 28px) / -2);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.finder__dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(232, 220, 195, 0.42);
  transform: translate(-50%, -50%);
  transition:
    transform 0.5s ease,
    background-color 0.5s ease;
}
.finder__dot:hover::before {
  background: rgba(232, 220, 195, 0.75);
}
.finder__dot[aria-current="true"]::before {
  background: var(--parchment);
  transform: translate(-50%, -50%) scale(1.6);
}
.finder__dot:focus-visible {
  outline-offset: 0;
}

.allbtn {
  position: fixed;
  right: var(--gutter-r);
  bottom: var(--bottom);
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  appearance: none;
  background: none;
  border: 1px solid rgba(232, 220, 195, 0.28);
  border-radius: 999px;
  padding: 7px 14px;
  font: 400 13px/1 var(--text);
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 1.4s ease,
    color 0.3s ease;
}
.allbtn:hover {
  color: var(--parchment);
  border-color: rgba(232, 220, 195, 0.6);
}
.allbtn__icon {
  width: 10px;
  height: 10px;
  fill: currentColor;
  opacity: 0.8;
}

.lit .finder,
.lit .allbtn {
  opacity: 1;
  transition-delay: 3.4s;
}
.lit.is-ready .finder,
.lit.is-ready .allbtn {
  transition-delay: 0s;
}
.is-close .finder,
.is-close .allbtn,
.is-close .hint {
  opacity: 0 !important;
  pointer-events: none;
  transition-delay: 0s;
}

@media (max-width: 719px) {
  .finder {
    left: var(--gutter-l);
    right: var(--gutter-r);
    width: auto;
    transform: none;
  }
  .finder__room {
    text-align: left;
    padding-right: 120px;
  }
  .allbtn {
    bottom: calc(var(--bottom) + 32px);
  }
  .hint {
    bottom: calc(var(--bottom) + 86px);
  }
}

/* ------------------------------------------------------------------
   Close-up
   ------------------------------------------------------------------ */

.closeup {
  position: fixed;
  inset: 0;
  z-index: 30;
  cursor: zoom-out;
}
.closeup__text {
  position: absolute;
  left: 60vw;
  top: 50%;
  width: 34vw;
  max-height: 84vh;
  overflow-y: auto;
  cursor: auto;
  opacity: 0;
  transform: translate(24px, -50%);
  transition:
    opacity 0.4s ease,
    transform 0.55s ease;
  -webkit-user-select: text;
  user-select: text;
  scrollbar-width: none;
}
.closeup__text::-webkit-scrollbar {
  display: none;
}
.is-shown .closeup__text {
  opacity: 1;
  transform: translate(0, -50%);
  transition:
    opacity 1s ease 0.05s,
    transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* a faint warm light on the wall behind the words */
.closeup::before {
  content: "";
  position: absolute;
  left: calc(var(--gx, 77vw) - var(--gw, 34vw) * 0.8);
  top: calc(var(--gy, 50vh) - 42vh);
  width: calc(var(--gw, 34vw) * 1.6);
  height: 84vh;
  background: radial-gradient(
    closest-side,
    rgba(242, 184, 114, 0.075),
    rgba(242, 184, 114, 0.03) 55%,
    rgba(242, 184, 114, 0)
  );
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.closeup.is-shown::before {
  opacity: 1;
  transition: opacity 1.2s ease;
}
.closeup__title {
  margin: 0;
  font: 400 var(--fs-closeup)/1.1 var(--display);
  color: #f0e4ca;
  text-wrap: balance;
  text-shadow: 0 0 34px rgba(242, 184, 114, 0.15);
}
.closeup__title:focus {
  outline: none;
}
.closeup__meta {
  margin: 18px 0 0;
  font: 400 14px/1.6 var(--text);
  color: var(--muted);
}
.closeup__note {
  margin: 30px 0 0;
  max-width: 48ch;
  font: 300 var(--fs-note)/1.75 var(--text);
  color: rgba(232, 220, 195, 0.78);
  letter-spacing: 0.03em;
  text-wrap: pretty;
}
.closeup__note:empty {
  display: none;
}
/* A round button with an icon (the x that closes) */
.iconbtn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--parchment);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.3s ease;
}
.iconbtn:hover,
.iconbtn:active {
  background-color: rgba(232, 220, 195, 0.1);
}
.xicon {
  display: block;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* the icons in the buttons show on phones only (see the phone close-up below) */
.navicon {
  display: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.closeup__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  margin-top: 34px;
}

.closeup.is-stacked .closeup__text {
  left: var(--gutter-l);
  right: var(--gutter-r);
  top: var(--cu-top, 58vh);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  width: auto;
  transform: translate(0, 16px);
  max-width: none;
  max-height: none;
  padding-bottom: 12px;
}
.closeup.is-stacked.is-shown .closeup__text {
  transform: none;
}
.closeup.is-stacked::before {
  left: -20vw;
  top: var(--cu-top, 58vh);
  width: 140vw;
  height: 50vh;
}
/* Phone close-up: the words below the painting, the buttons as a bar at the bottom */
.closeup.is-stacked .closeup__text {
  display: flex;
  flex-direction: column;
}
.closeup.is-stacked .closeup__meta {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.7;
}
.closeup.is-stacked .closeup__note {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.75;
}
.closeup.is-stacked .closeup__nav {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid rgba(232, 220, 195, 0.14);
  justify-content: space-between;
  align-items: center;
  gap: 0;
}
/* phone: icons only, in round buttons big enough for a thumb */
.closeup.is-stacked .closeup__nav .textbtn {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  color: var(--parchment);
  -webkit-tap-highlight-color: transparent;
}
.closeup.is-stacked .closeup__nav .textbtn:active {
  background: rgba(232, 220, 195, 0.1);
}
.closeup.is-stacked .navicon {
  display: block;
}
.closeup.is-stacked .navtext {
  display: none;
}
/* the x sits in the top right corner, on phones and wide screens alike */
.closeup__close {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: max(12px, env(safe-area-inset-right, 0px));
  z-index: 2;
  animation: fade-in 0.5s ease both;
}
.closeup__nav [data-act="back"] {
  display: none !important; /* the x in the corner does this now */
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
}
/* ------------------------------------------------------------------
   All paintings
   ------------------------------------------------------------------ */

.overview {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #14130f;
  color: var(--parchment);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.overview.is-open {
  opacity: 1;
}
.overview::backdrop {
  background: transparent;
}
.overview__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
  padding-block: calc(env(safe-area-inset-top, 0px) + 48px)
    calc(env(safe-area-inset-bottom, 0px) + 96px);
}
.overview__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}
.overview__inner:focus {
  outline: none;
}
.overview__close {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: max(12px, env(safe-area-inset-right, 0px));
  z-index: 2;
  background-color: rgba(20, 19, 15, 0.85);
}
.overview__title {
  margin: 0;
  font: 400 clamp(30px, 3.4vw, 46px)/1.05 var(--display);
}
.overview__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin-top: 26px;
}
.overview__filters .textbtn[aria-pressed="true"] {
  color: var(--parchment);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
.overview__room {
  margin-top: 54px;
}
.overview__room-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 26px;
}
.overview__room-name {
  margin: 0;
  font: 400 clamp(22px, 2.2vw, 30px)/1.15 var(--display);
}
.overview__count {
  font-size: var(--fs-small);
  color: var(--muted);
}
.overview__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 44px 30px;
  align-items: end;
  margin: 0;
  padding: 0;
  list-style: none;
}
.thumb {
  display: grid;
  justify-items: start;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.thumb__frame {
  display: block;
  position: relative;
  width: min(100%, calc(var(--ar) * 124px));
  aspect-ratio: var(--ar);
  max-width: 100%;
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.8);
}
.thumb__canvas {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #1c1b17;
}
.thumb__canvas picture {
  display: contents;
}
.thumb__canvas .ph {
  filter: blur(8px);
}
.thumb__canvas img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.thumb__canvas img.is-loaded {
  opacity: 1;
}
.thumb__text {
  display: grid;
  gap: 2px;
}
.thumb__title,
.thumb__date {
  display: block;
}
.thumb__title {
  font: 400 15px/1.3 var(--display);
  color: var(--parchment);
}
.thumb__date {
  font-size: 12.5px;
  color: var(--muted);
}
.thumb[aria-current="true"] .thumb__date::after {
  content: "you are here";
  display: block;
  margin-top: 2px;
  color: var(--amber);
}
.thumb.is-filtered {
  display: none;
}

/* ------------------------------------------------------------------
   Reduced motion: simple fades only
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .lit .dark {
    transition-duration: 1.2s;
  }
  .lit .walltext--intro .walltext__name,
  .lit .walltext--intro .walltext__tagline,
  .lit .walltext--intro .walltext__line {
    transition-duration: 0.8s;
    transition-delay: 1s;
  }
  .lit:not(.is-ready) .finder,
  .lit:not(.is-ready) .allbtn {
    transition-delay: 1.4s;
  }
  .veil {
    transition-duration: 0.22s;
  }
  .closeup__text,
  .is-shown .closeup__text {
    transform: translate(0, -50%);
    transition: opacity 0.35s ease;
  }
  .closeup.is-stacked .closeup__text,
  .closeup.is-stacked.is-shown .closeup__text {
    transform: none;
  }
  .finder__dot::before {
    transition: none;
  }
}

/* Entering straight into a painting (a #link): no opening sequence. */
.instant *,
.instant *::before,
.instant *::after {
  transition-delay: 0s !important;
  transition-duration: 0s !important;
}