/* The three catalog views share one white field and quiet black type. */
.homepage .catalog-directory {
  position: relative;
  padding: 0 0 28px;
  overflow: clip;
  background: #fff;
  color: #121212;
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
}
.catalog-letter-cover,
.catalog-index,
.catalog-gallery {
  position: relative;
}
.catalog-index,
.catalog-gallery {
  min-height: min(100svh, 960px);
}
.catalog-letter-cover {
  display: grid;
  justify-items: center;
  align-items: start;
  padding: clamp(68px, 11svh, 116px) 5vw 70px;
}
.catalog-signature {
  position: absolute;
  top: 28px;
  left: max(24px, 3.2vw);
  font-size: 14px;
  letter-spacing: .08em;
}
.catalog-letter-art {
  position: relative;
  width: min(100%, 1680px);
  height: min(76svh, 54vw);
}
.homepage .catalog-letter-art h2 {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  margin: 0;
  color: #141414;
  font: 400 clamp(44px, 13.7vw, 232px)/.81 Georgia, serif;
  text-align: center;
  letter-spacing: -.045em;
}
.catalog-letter-art h2 em {
  display: block;
  font-family: 'Snell Roundhand', 'Segoe Script', Georgia, serif;
  font-weight: 400;
}
.catalog-letter-art.has-glyphs h2 {
  clip-path: inset(50%);
}
.catalog-letter-art canvas,
.catalog-compose {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.catalog-compose {
  border: 0;
  background: transparent;
  cursor: ew-resize;
  touch-action: pan-y;
}
.catalog-down {
  position: absolute;
  right: max(22px, 3.2vw);
  bottom: 22px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 26px;
  text-decoration: none;
}
.catalog-index {
  display: grid;
  align-items: start;
  padding: clamp(36px, 5svh, 56px) max(20px, 4vw) 56px;
}
.catalog-typeset {
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
}
.catalog-trace {
  display: block;
  margin-bottom: 20px;
  text-align: center;
  font: 11px/1.4 ui-monospace, Menlo, monospace;
  letter-spacing: .28em;
}
.catalog-typeset h3 {
  margin: 0 0 8px;
  font-size: clamp(20px, 3.3vw, 48px);
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
}
#catalog-folders {
  display: grid;
  justify-items: start;
}
.catalog-category {
  position: relative;
  display: block;
  min-height: 44px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: clamp(19px, 2.8vw, 42px);
  font-weight: 400;
  line-height: 1.25;
  white-space: nowrap;
  text-align: left;
}
.catalog-category:nth-child(1) { margin-left: 0; }
.catalog-category:nth-child(2) { margin-left: clamp(10px, 7.7vw, 115px); }
.catalog-category:nth-child(3) { margin-left: clamp(4px, 2.5vw, 38px); }
.catalog-category:nth-child(4) { margin-left: clamp(16px, 10.8vw, 161px); }
.catalog-category:nth-child(5) { margin-left: clamp(7px, 4.6vw, 69px); }
.catalog-category:nth-child(6) { margin-left: clamp(12px, 8.3vw, 124px); }
.catalog-category::before {
  content: '↘';
  position: absolute;
  right: 100%;
  padding-right: 4px;
  opacity: 0;
  transition: opacity .2s;
}
.catalog-category:hover::before,
.catalog-category:focus-visible::before { opacity: 1; }
.catalog-category-label { display: block; }
.catalog-category-label, .catalog-typeset h3 { opacity: var(--catalog-row-ink, 1); }
.catalog-category:focus-visible .catalog-category-label { opacity: 1; }
.catalog-category-letter { position: relative; }
.catalog-category-code {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
}
.catalog-category-code::before {
  content: attr(data-code);
  color: #3a3a3a;
  font: 600 clamp(3px, .14em, 6px)/1.1 ui-monospace, Menlo, monospace;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .catalog-category:hover:not(.is-dissolving) .catalog-category-letter {
    animation: letter-resolve .24s ease-out var(--resolve-delay) both;
  }
  .catalog-category:hover:not(.is-dissolving) .catalog-category-code {
    animation: code-resolve .24s ease-out var(--resolve-delay) both;
  }
}
@keyframes letter-resolve {
  0%, 32% { color: transparent; }
  100% { color: inherit; }
}
@keyframes code-resolve {
  0% { opacity: 1; transform: translate(var(--code-x), var(--code-y)) rotate(var(--code-angle)); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
}
.catalog-category-bits {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: center;
  font: 14px/1.1 ui-monospace, Menlo, monospace;
  letter-spacing: .24em;
  opacity: 0;
  pointer-events: none;
}
.catalog-category.is-dissolving .catalog-category-label {
  animation: title-break .24s ease-in both;
}
.catalog-category.is-dissolving .catalog-category-bits {
  animation: bits-disperse .24s ease-out both;
}
.catalog-transfer {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  width: 100%;
  pointer-events: none;
}
@keyframes title-break {
  to { opacity: 0; transform: translateY(-5px); letter-spacing: .07em; }
}
@keyframes bits-disperse {
  35% { opacity: 1; }
  100% { opacity: 0; transform: translate(24px, -9px); }
}

/* The gallery is its own level, with one camera and solid, layered discs. */
html.catalog-gallery-open {
  overflow: hidden;
}
.catalog-gallery-open body > :is(main, .page-dots, .skip-link) {
  display: none;
}
.homepage .catalog-gallery {
  position: fixed;
  inset: 0;
  z-index: 18;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  background: #fff;
  color: #121212;
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
}
.catalog-gallery[hidden],
.gallery-disc[hidden] { display: none; }
.gallery-stage {
  position: absolute;
  inset: 0;
  perspective: clamp(720px, 105vw, 1720px);
  perspective-origin: 51% 46%;
  touch-action: pinch-zoom;
  user-select: none;
  cursor: grab;
}
.gallery-stage.is-dragging { cursor: grabbing; }
.gallery-disc {
  --disc-hole-mask: radial-gradient(circle closest-side, transparent 7.5%, #000 8%);
  position: absolute;
  display: block;
  border-radius: 50%;
  top: 52%;
  left: 50%;
  width: min(50vw, 81svh, 780px);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  transform: translate3d(
    calc(-50% + var(--x) + var(--drag-x, 0px)), calc(-50% + var(--y)), var(--depth)
  ) rotateZ(calc(var(--rotation) + var(--hover-roll, 0deg)))
    rotateX(calc(var(--pitch) + var(--hover-pitch, 0deg)))
    rotateY(calc(var(--yaw) + var(--hover-yaw, 0deg))) scale(var(--size));
  transition: transform .55s cubic-bezier(.2,.75,.24,1);
  -webkit-user-drag: none;
}
.gallery-disc.is-tilting { transition-duration: .24s; }
.gallery-stage.is-dragging .gallery-disc { transition-duration: .08s; }
.gallery-disc[data-slot='active'] {
  --x: 3vw;
  --y: 3svh;
  --depth: 14px;
  --size: 1;
  --disc-center-scale: 1.09;
  --rotation: -32deg;
  --pitch: 41deg;
  --yaw: 7deg;
  z-index: 2;
}
.gallery-disc[data-slot='previous'] {
  --x: -37vw;
  --y: 33svh;
  --depth: -60px;
  --size: .87;
  --rotation: -35deg;
  --pitch: 42deg;
  --yaw: 6deg;
}
.gallery-disc[data-slot='next'] {
  --x: 43vw;
  --y: -29svh;
  --depth: 10px;
  --size: 1.02;
  --rotation: -26deg;
  --pitch: 36deg;
  --yaw: 10deg;
}
.gallery-disc-body {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform-style: preserve-3d;
  scale: 1;
  transition: scale .48s ease-out;
}
.gallery-disc[data-slot='active'] .gallery-disc-body {
  scale: var(--disc-center-scale);
  transition: scale .66s cubic-bezier(.22,.84,.32,1.38);
  transition-timing-function: linear(0, .30 13%, .78 38%, 1.28 68%, .98 88%, 1);
}
.gallery-disc-art,
.gallery-disc-rim,
.gallery-disc-rim::before,
.gallery-disc-rim::after {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 50%;
}
.gallery-disc-rim {
  transform-style: preserve-3d;
}
.gallery-disc-rim::before,
.gallery-disc-rim::after {
  content: '';
  background: conic-gradient(from 100deg, #4c4e50, #eeeff0 15%, #7e8084 36%, #dfe1e2 63%, #5d5f61 85%, #4c4e50);
  mask-image: var(--disc-hole-mask);
}
.gallery-disc-rim::before { transform: translateZ(-3.2px); }
.gallery-disc-rim::after { transform: translateZ(-.9px); }
.gallery-disc-art {
  overflow: hidden;
  border: 2px solid #aeb0b2;
  background: #ececec;
  box-shadow: inset 0 0 0 2px #fff;
  transform: translateZ(2.3px);
  backface-visibility: hidden;
  mask-image: var(--disc-hole-mask);
}
.gallery-disc-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
}
.gallery-disc-art.is-card img {
  inset: -6.7% auto auto -17.52%;
  width: 133.12%;
  height: auto;
  max-width: none;
}
.gallery-disc-art::after {
  content: '';
  position: absolute;
  inset: 43.2%;
  border-radius: 50%;
  background: conic-gradient(#e6e7e8, #83868b, #eee, #9c9fa3, #f9fafb, #8e9096, #e6e7e8);
  box-shadow: 0 0 0 1px #a6a8a8;
}
.catalog-gallery.is-entering .gallery-disc[data-slot='active'] {
  animation: disc-arrive .58s cubic-bezier(.22,.72,.2,1) both;
}
@keyframes disc-arrive {
  from { opacity: .22; transform: translate3d(-47%, -43%, -90px) rotateZ(-49deg) rotateX(79deg) rotateY(-20deg) scale(.86); }
}
.catalog-gallery::before {
  --focus-falloff: radial-gradient(ellipse 68% 65% at 53% 56%,
    transparent 0 42%, #0003 60%, #0009 82%, #000 100%);
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  -webkit-backdrop-filter: blur(clamp(2px, .36vw, 3.8px));
  backdrop-filter: blur(clamp(2px, .36vw, 3.8px));
  -webkit-mask-image: var(--focus-falloff);
  mask-image: var(--focus-falloff);
}
.gallery-code-trail {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}
.gallery-code-trail span {
  position: absolute;
  top: var(--trail-y);
  left: var(--trail-x);
  color: #22354b;
  font: 600 clamp(7px, .8vw, 11px)/1 ui-monospace, Menlo, monospace;
  letter-spacing: .06em;
  white-space: nowrap;
  text-shadow: 0 0 2px #fff, 0 0 5px #fffd;
  animation: gallery-code-fade .46s ease-out forwards;
}
@keyframes gallery-code-fade {
  from {
    transform: translate(-50%, -50%) rotate(var(--trail-angle));
    opacity: .82;
    filter: blur(.25px);
  }
  to {
    transform: translate(calc(-50% + var(--trail-dx)), calc(-50% + var(--trail-dy))) rotate(var(--trail-angle));
    opacity: 0;
    filter: blur(3px);
  }
}
.gallery-info {
  position: absolute;
  z-index: 4;
  left: max(22px, 3.2vw);
  top: max(24px, 5svh);
  width: min(30%, 340px);
  background: #fff;
}
.gallery-back,
.gallery-controls button {
  border: 0;
  padding: 0;
  background: #fff;
  color: #161616;
  min-height: 44px;
  cursor: pointer;
}
.gallery-back { margin-bottom: 9px; font-size: 13px; }
.gallery-count { margin: 0 0 6px; font: 13px/1.3 ui-monospace, Menlo, monospace; }
.gallery-info h3 {
  margin: 0;
  font-size: clamp(14px, 1.55vw, 23px);
  font-weight: 400;
  line-height: 1.4;
}
.gallery-title { margin: 7px 0 12px; font-size: 12px; line-height: 1.5; }
.gallery-open {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  border-top: 1px solid #a6a6a6;
  font-size: 13px;
  text-decoration: none;
}
.gallery-open:hover { text-decoration: underline; }
.gallery-controls {
  position: absolute;
  z-index: 4;
  right: max(22px, 3.2vw);
  bottom: 22px;
  display: flex;
  gap: 10px;
}
.gallery-controls button {
  width: 44px;
  font-size: 21px;
  border-bottom: 1px solid #aaa;
}
.directory-footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  width: min(92%, 1200px);
  margin: 25px auto 0;
  padding-top: 15px;
  border-top: 1px solid #dedede;
  color: #555;
  font-size: 10px;
  line-height: 1.6;
}
.directory-footer-links { display: flex; gap: 14px; }
.directory-footer a { text-decoration: none; }
@media (max-width: 650px) {
  .catalog-index { min-height: 90svh; }
  .catalog-letter-cover { padding-top: clamp(90px, 16svh, 155px); }
  .catalog-letter-art { height: max(176px, 60vw); }
  .catalog-category { font-size: clamp(16px, 5vw, 28px); }
  .catalog-category:nth-child(2) { margin-left: 7vw; }
  .catalog-category:nth-child(4) { margin-left: 10vw; }
}
@media (max-width: 520px) {
  .catalog-gallery::before {
    --focus-falloff: radial-gradient(ellipse 77% 57% at 50% 60%,
      transparent 0 40%, #0003 59%, #0009 82%, #000 100%);
  }
  .gallery-info { width: min(70%, 255px); top: 20px; }
  .gallery-disc { top: 57%; width: min(76vw, 60svh); }
  .gallery-disc[data-slot='active'] { --x: 0vw; --y: 3svh; --disc-center-scale: 1.06; }
  .gallery-disc[data-slot='previous'] { --x: -61vw; --y: 25svh; }
  .gallery-disc[data-slot='next'] { --x: 64vw; --y: -19svh; }
}
@media (pointer: coarse) {
  .gallery-back, .gallery-open { min-width: 44px; min-height: 44px; }
  .gallery-controls {
    right: max(22px, env(safe-area-inset-right));
    bottom: max(22px, env(safe-area-inset-bottom));
  }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-code-trail { display: none; }
  :is(.catalog-directory, .catalog-gallery) *,
  :is(.catalog-directory, .catalog-gallery) *::before { animation: none !important; transition: none !important; }
}