@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  --ink: #151515;
  --paper: #eeece5;
  --surface-grey: #c9cdcc;
  --blue: #4f83ff;
  --ease: cubic-bezier(.22,.7,.25,1);
}

@font-face {
  font-family: "Blix";
  src: url("./assets/blix-regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

* { box-sizing: border-box; 
html { scroll-behavior: smooth; background: var(--surface-grey); }
body { margin: 0; color: var(--ink); font-family: "Avenir Next", "Helvetica Neue", Arial, "PingFang SC", sans-serif; overflow-x: hidden; }
body.entry-pending { overflow: hidden; }
button, a { font: inherit; color: inherit; }

.desk {
  position: fixed; inset: 0; z-index: -3;
  background: var(--surface-grey) url("https://pub-41c759b76d484ac4ae34f3f6e9598065.r2.dev/wzm-visual-archive/releases/a0bc4edc3c879bc1/assets/global-background-v3.png") center center / cover no-repeat;
}
.desk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(99,106,107,.035)); }
.grain { display: none; }

.sound-selection {
  position: fixed;
  z-index: 300;
  inset: 0;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: clamp(48px,7vw,96px);
  background: #e9e5dc;
  color: rgba(35,35,33,.86);
  opacity: 1;
  visibility: visible;
  transition: opacity .58s cubic-bezier(.22,.7,.25,1), visibility 0s linear .58s;
}
.sound-selection::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("https://pub-41c759b76d484ac4ae34f3f6e9598065.r2.dev/wzm-visual-archive/releases/a0bc4edc3c879bc1/assets/tracing-paper-background.png") center center / cover no-repeat;
  opacity: .34;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.sound-selection::after {
  content: "";
  position: absolute;
  inset: clamp(20px,1.7vw,28px);
  border: 1px solid rgba(61,60,56,.27);
  pointer-events: none;
}
.sound-selection[hidden] { display: none; }
.sound-selection.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.sound-selection.is-dissolving {
  --sound-dissolve-radius: -14vmax;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 50% 50%,
    transparent 0,
    transparent calc(var(--sound-dissolve-radius) - 13vmax),
    rgba(0,0,0,.16) calc(var(--sound-dissolve-radius) - 8vmax),
    rgba(0,0,0,.52) var(--sound-dissolve-radius),
    #000 calc(var(--sound-dissolve-radius) + 13vmax),
    #000 100%);
  mask-image: radial-gradient(circle at 50% 50%,
    transparent 0,
    transparent calc(var(--sound-dissolve-radius) - 13vmax),
    rgba(0,0,0,.16) calc(var(--sound-dissolve-radius) - 8vmax),
    rgba(0,0,0,.52) var(--sound-dissolve-radius),
    #000 calc(var(--sound-dissolve-radius) + 13vmax),
    #000 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  will-change: -webkit-mask-image, mask-image;
}
.sound-selection-paper {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100vw - clamp(56px,8vw,120px)));
  display: grid;
  justify-items: center;
  gap: clamp(34px,4.8vh,46px);
}
.sound-selection-copy {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: clamp(8px,1.2vh,13px);
  text-align: center;
  color: rgba(47,46,42,.76);
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-synthesis: none;
}
.sound-selection-copy h1,
.sound-selection-copy p {
  margin: 0;
  font: 600 clamp(23px,2.1vw,26px)/1.46 "Cormorant Garamond", Georgia, "Times New Roman", serif;
  letter-spacing: .015em;
}
.sound-selection-copy h1 { font-weight: 600; }
.sound-selection-copy p + p { margin: 0; }

@media (min-width: 900px) {
  .sound-selection-copy h1,
  .sound-selection-copy p { white-space: nowrap; }
}
.sound-selection-actions { display: flex; align-items: center; justify-content: center; gap: clamp(26px,5vw,54px); }
.sound-choice {
  position: relative;
  width: clamp(92px,7vw,100px);
  height: clamp(92px,7vw,100px);
  flex: 0 0 auto;
  display: grid;
  place-content: center;
  gap: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(49,50,48,.64);
  cursor: pointer;
  transform: translate3d(0,0,0) scale(1);
  transition: color .4s ease, transform .4s cubic-bezier(.22,.7,.25,1);
}
.sound-choice::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(64,65,62,.52);
  border-radius: inherit;
  pointer-events: none;
  transition: border-width .4s cubic-bezier(.22,.7,.25,1), border-color .4s ease;
}
.sound-choice span { color: rgba(86,87,84,.52); font: 400 10px/1 Georgia, "Times New Roman", serif; letter-spacing: .035em; transition: color .4s ease; }
.sound-choice strong { color: rgba(38,39,37,.76); font: 500 9px/1 "Avenir Next", "Helvetica Neue", Arial, sans-serif; letter-spacing: .17em; }
.sound-choice:hover { color: rgba(28,29,27,.9); transform: translate3d(0,0,0) scale(1.035); }
.sound-choice:hover::before { border-width: 3px; border-color: rgba(45,46,43,.68); }
.sound-choice:hover span { color: rgba(48,49,47,.76); }
.sound-choice:focus-visible { outline: 1px solid rgba(35,36,34,.72); outline-offset: 6px; }
.sound-choice:disabled { cursor: default; }

.archive-sound-toggle[hidden] { display: none; }
.archive-sound-toggle {
  position: fixed;
  z-index: 210;
  left: clamp(18px,2vw,30px);
  bottom: clamp(18px,2vw,28px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: rgba(31,31,29,.58);
  cursor: pointer;
  font: 500 clamp(7px,.55vw,9px)/1 "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .14em;
  transition: color .28s ease, opacity .28s ease;
}
.archive-sound-toggle::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  transition: background-color .28s ease, transform .28s ease;
}
.archive-sound-toggle strong { font: inherit; color: rgba(31,31,29,.82); }
.archive-sound-toggle:hover { color: rgba(24,24,22,.82); }
.archive-sound-toggle:hover::before { transform: scale(1.18); }
.archive-sound-toggle[aria-pressed="true"]::before { background: currentColor; }
.archive-sound-toggle:focus-visible { outline: 1px solid rgba(35,36,34,.6); outline-offset: 4px; }

.personal-entry {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: clamp(28px,6vh,72px) clamp(24px,7vw,108px);
  background: #20201e;
  color: #e7e5df;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  opacity: 1;
  visibility: visible;
  transform: translate3d(0,0,0);
  animation: personal-entry-in .52s ease both;
  will-change: opacity;
}
.personal-entry[hidden] { display: none; }
.personal-entry.is-leaving { pointer-events: none; animation: none; }
.personal-entry.is-revealing { opacity: 0; visibility: hidden; }
.personal-record {
  width: min(720px,78vw);
  display: grid;
  grid-template-columns: minmax(220px,2fr) minmax(280px,3fr);
  gap: clamp(40px,6vw,82px);
  align-items: center;
  opacity: 1;
  transform: scale(1);
}
.personal-record-portrait { margin: 0; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: #292927; }
.personal-record-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }
.personal-record-information { min-width: 0; opacity: 1; transition: opacity .22s ease; }
.personal-record-header { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-bottom: 13px; border-bottom: 1px solid rgba(231,229,223,.28); }
.personal-record-header h1, .personal-record-header p { margin: 0; font: 400 10px/1.3 "IBM Plex Mono", "SFMono-Regular", Consolas, monospace; letter-spacing: .12em; }
.personal-record-fields { margin: 0; }
.personal-record-fields > div { padding: 17px 0 16px; border-bottom: 1px solid rgba(231,229,223,.18); }
.personal-record-fields dt { margin: 0 0 8px; color: #898984; font-size: 9px; line-height: 1; letter-spacing: .12em; }
.personal-record-fields dd { margin: 0; font-size: 13px; line-height: 1.2; letter-spacing: .08em; }
.personal-record-fields .personal-record-name { font-size: clamp(20px,1.55vw,22px); font-weight: 500; letter-spacing: .035em; }
.personal-record-date { display: flex; align-items: baseline; width: max-content; }
.personal-record-date span { display: inline-block; min-width: .6em; text-align: center; }
.personal-record-date .is-obscured { filter: blur(3.5px); opacity: .72; transition: filter .3s ease, opacity .3s ease; }
.personal-record-date:hover .is-obscured { filter: blur(2.6px); opacity: .82; }
.personal-record-enter { position: relative; display: inline-flex; align-items: center; gap: 7px; margin-top: 28px; padding: 3px 0 7px; border: 0; background: transparent; color: rgba(231,229,223,.78); font: 500 12px/1 "IBM Plex Mono", "SFMono-Regular", Consolas, monospace; letter-spacing: .1em; cursor: pointer; transition: color .3s ease; }
.personal-record-enter::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(.72); transform-origin: left; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.personal-record-enter i { font-style: normal; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.personal-record-enter:hover { color: #f5f3ed; }
.personal-record-enter:hover::after { transform: scaleX(1); }
.personal-record-enter:hover i { transform: translate3d(3px,-3px,0); }
.personal-record-enter:focus-visible { outline: 1px solid rgba(231,229,223,.62); outline-offset: 5px; }
.personal-entry.is-leaving .personal-record-information { opacity: 0; }
@keyframes personal-entry-in { from { opacity: 0; } to { opacity: 1; } }

.entry-portrait-transition {
  position: fixed;
  z-index: 220;
  margin: 0;
  overflow: hidden;
  background: #292927;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.entry-portrait-transition img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }

body.entry-pending .archive-index { opacity: 0; visibility: hidden; transform: translate3d(calc(var(--index-offset-x, 0px) + 6px),0,0); pointer-events: none; }
.archive-index { transition: opacity .48s ease, transform .55s cubic-bezier(.22,1,.36,1), visibility 0s linear 0s; }

.archive-index {
  --index-step: 27px;
  --indicator-position: 0;
  --index-offset-x: clamp(34px,3.5vw,44px);
  position: fixed;
  z-index: 60;
  top: 23px;
  right: max(8px, calc(((100vw - min(77vw, calc(86vh * 1.55))) / 2) - 126px));
  width: 112px;
  padding: 0;
  color: rgba(21,21,21,.96);
  pointer-events: none;
  transform: translate3d(var(--index-offset-x),0,0);
}
.archive-index-title { margin: 0 0 10px; font: 500 10px/1 "Avenir Next", "Helvetica Neue", Arial, sans-serif; letter-spacing: .17em; }
.archive-index nav { position: relative; display: grid; grid-auto-rows: var(--index-step); }
.archive-index nav a {
  --chapter-weight: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  height: var(--index-step);
  padding: 0;
  color: inherit;
  text-decoration: none;
  opacity: calc(.48 + (var(--chapter-weight) * .52));
  transform: translate3d(calc(var(--chapter-weight) * -4px),0,0) scale(calc(1 + (var(--chapter-weight) * .17)));
  transform-origin: left center;
  transition: opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1);
  pointer-events: auto;
}
.archive-index nav a span { flex: 0 0 20px; font: 400 8px/1 Arial, sans-serif; letter-spacing: .1em; }
.archive-index nav a b { font: 400 10px/1 "Avenir Next", "Helvetica Neue", Arial, sans-serif; letter-spacing: .1em; white-space: nowrap; }
.archive-index nav a[aria-current="page"] b { font-weight: 500; }
.archive-index nav a:focus-visible { outline: 1px solid rgba(21,21,21,.5); outline-offset: 3px; }
.index-indicator {
  position: absolute;
  left: -10px;
  top: 8px;
  width: 1px;
  height: 11px;
  background: rgba(21,21,21,.76);
  transform: translate3d(0,calc(var(--indicator-position) * var(--index-step)),0);
  transition: transform .52s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}

.scene { height: 150vh; position: relative; }
.final-scene { height: 125vh; }
.stage { height: 100vh; position: sticky; top: 0; display: grid; place-items: center; overflow: hidden; perspective: 1200px; }
.physical-page { margin: 0; width: min(94vw, calc(91vh * 1.7777)); aspect-ratio: 16 / 9; position: relative; will-change: transform; transform: translate3d(0, var(--page-y, 0), 0) rotate(var(--page-r, 0deg)); filter: drop-shadow(0 0 7px rgba(36,43,45,.14)) drop-shadow(0 7px 8px rgba(36,43,45,.14)); }
.exact-art img, .paper-base { width: 100%; height: 100%; display: block; object-fit: contain; }
.scroll-cue { position: absolute; z-index: 80; bottom: 18px; left: 50%; transform: translateX(-50%); font-size: 8px; letter-spacing: .18em; color: rgba(20,15,10,.65); white-space: nowrap; }

.portfolio-stack-sequence { height: 520vh; position: relative; }
.portfolio-stack-stage { height: 100vh; position: sticky; top: 0; overflow: hidden; perspective: 1200px; }
.stack-sheet { position: absolute; left: 50%; top: 50%; will-change: transform, opacity, filter; }
.portfolio-stack-stage .stack-sheet { filter: none; }
.paper-only { width: min(77vw, calc(86vh * 1.55)); aspect-ratio: 1.55 / 1; overflow: hidden; background: var(--paper); }
.full-artwork { position: absolute; width: 121.951%; height: 106.383%; left: -10.976%; top: -2.766%; }
.full-artwork > .sheet-visual,
.full-artwork > .paper-base { width: 100%; height: 100%; object-fit: contain; }
.stack-about { z-index: 10; }
.stack-works { z-index: 20; }
.stack-travel { z-index: 30; }
.stack-notes { z-index: 40; overflow: visible; }
.about-artwork { position: absolute; inset: 0; }
.about-artwork-blank { opacity: 1; }
.about-artwork-final { opacity: 0; }
.about-portrait-target {
  position: absolute;
  z-index: 21;
  left: 2.6%;
  top: 6.93%;
  width: 22.15%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  pointer-events: none;
  visibility: visible;
  background: transparent;
}
.about-portrait-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  will-change: opacity;
}
.notes-paper-clip { position: absolute; inset: 0; overflow: hidden; background: var(--paper); }
.notes-gallery { z-index: 3; }
.tracing-material { position: absolute; z-index: 20; inset: 0; pointer-events: none; opacity: 0; background:
  linear-gradient(112deg, rgba(255,255,255,.16), transparent 28%, rgba(255,255,255,.08) 62%, transparent),
  repeating-radial-gradient(circle at 0 0, rgba(67,73,74,.05) 0 .36px, transparent .48px 3.2px),
  rgba(239,240,236,.78);
}
.tracing-material::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 34px rgba(71,78,80,.045); border: 1px solid rgba(65,72,73,.05); }
.stack-anchor { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }
.works-anchor { top: 33%; }
.travel-anchor { top: 66%; }
.notes-anchor { top: 99%; }

.paper-page { overflow: hidden; }
.paper-base { position: absolute; inset: 0; }
.paper-content { position: absolute; inset: 0; padding: 9.5% 9.3% 6.8%; }
.sheet-header { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 1.1%; font-size: clamp(7px,.62vw,11px); letter-spacing: .14em; border-bottom: 1px solid rgba(0,0,0,.55); }
.sheet-header > div { display: flex; gap: 20px; align-items: baseline; }
.sheet-header p { margin: 0; text-align: right; font: clamp(6px,.52vw,9px)/1.35 Georgia, serif; letter-spacing: .08em; }
.sheet-no { font-size: .78em; }
.sheet-footer { position: absolute; right: 9.3%; bottom: 5%; margin: 0; font: clamp(5px,.45vw,8px)/1 Arial, sans-serif; letter-spacing: .13em; }

.works-content { padding-top: 9.2%; }
.works-rule { position: absolute; left: 9.3%; right: 9.3%; top: 16.6%; height: 1px; background: rgba(0,0,0,.16); }
.projects { position: absolute; left: 9.3%; right: 9.3%; top: 19%; bottom: 11%; display: grid; grid-template-columns: repeat(5, 1fr); }
.project-item { position: relative; min-width: 0; padding: 0 7%; border: 0; border-right: 1px solid rgba(0,0,0,.36); background: transparent; text-align: left; }
.project-item:first-child { border-left: 1px solid rgba(0,0,0,.36); }
.project-number { position: absolute; top: 1%; right: 8%; font: clamp(7px,.75vw,13px)/1 Georgia, serif; transform: rotate(90deg); }
.project-print { position: absolute; left: 12%; width: 76%; height: 34%; display: block; padding: 0; border: 0; appearance: none; background-color: #d8d2c6; background-repeat: no-repeat; box-shadow: 0 4px 7px rgba(38,44,45,.20); transform: rotate(-1.2deg); transition: transform .38s var(--ease), box-shadow .38s var(--ease); }
.project-item:nth-child(odd) .project-print { top: 9%; }
.project-item:nth-child(even) .project-print { bottom: 5%; transform: rotate(1.1deg); }
.project-meta { position: absolute; left: 11%; right: 10%; display: block; }
.project-item:nth-child(odd) .project-meta { bottom: 9%; }
.project-item:nth-child(even) .project-meta { top: 10%; }
.project-meta b { display: block; padding-bottom: 12%; margin-bottom: 10%; border-bottom: 1px solid rgba(0,0,0,.6); font: 500 clamp(8px,1.02vw,18px)/.95 "Avenir Next", Arial, sans-serif; letter-spacing: -.035em; }
.project-meta small { font: clamp(5px,.48vw,8.5px)/1.55 Georgia, serif; }
.view-label { position: absolute; left: 12%; bottom: 2%; opacity: 0; font-size: clamp(5px,.48vw,8px); letter-spacing: .15em; transition: opacity .25s; }
.project-print[data-detail]:hover { transform: translateY(-3px) scale(1.015) rotate(0deg); box-shadow: 0 8px 11px rgba(38,44,45,.25); }
.project-item:has(.project-print[data-detail]:hover) .view-label { opacity: .72; }
.detail-trigger { cursor: pointer; }
.detail-trigger:focus { outline: none; }
.detail-trigger:focus-visible { outline: 1px solid rgba(30,30,28,.48); outline-offset: 2px; }
.muted { opacity: .88; }

.travel-content { display: flex; flex-direction: column; padding: 9.2% 9% 0; }
.travel-content > .sheet-header { flex: none; margin: 0 .3%; }
.travel-map-frame { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.travel-map-visual { position: absolute; left: 0; top: 0; margin: 0; overflow: visible; cursor: grab; touch-action: none; user-select: none; }
.travel-map-frame.is-map-active .travel-map-visual,
.travel-map-visual.is-dragging { will-change: transform; }
.travel-map-visual.is-dragging { cursor: grabbing; }
.travel-map-visual:focus { outline: none; }
.travel-map-visual:focus-visible { outline: 1px solid rgba(25,24,22,.45); outline-offset: -1px; }
.travel-map-image { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; user-select: none; }
.travel-drag-indicator[hidden] { display: none; }
.travel-drag-indicator { position: absolute; z-index: 4; right: clamp(20px,2vw,28px); top: 50%; display: flex; align-items: center; gap: 8px; color: rgba(27,27,25,.68); transform: translateY(-50%); pointer-events: none; }
.travel-drag-rail { display: flex; flex-direction: column; align-items: center; }
.travel-drag-arrow { height: 11px; font: 8px/1 Georgia, serif; }
.travel-drag-track { position: relative; width: 1px; height: clamp(38px,5vw,62px); margin: 3px 0; background: currentColor; opacity: .72; }
.travel-drag-dot { position: absolute; left: 50%; top: var(--drag-progress, 50%); width: 7px; height: 7px; transform: translate(-50%, -50%); }
.travel-drag-dot::before { content: ""; display: block; width: 5px; height: 5px; border: 1px solid currentColor; border-radius: 50%; background: rgba(239,236,226,.88); animation: travel-drag-guide 2.6s ease-in-out infinite; }
.travel-drag-label { writing-mode: vertical-rl; font: 500 clamp(6px,.48vw,9px)/1 "Avenir Next", Arial, sans-serif; letter-spacing: .1em; white-space: nowrap; }
.travel-map-frame.is-map-interacted .travel-drag-dot::before { animation: none; }
@keyframes travel-drag-guide { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }
.travel-location-layer { position: absolute; inset: 0; }
.travel-location-hit { position: absolute; width: 4.2%; min-width: 18px; max-width: 42px; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: transparent; transform: translate(-50%, -50%); cursor: default; }
.travel-location-hit:focus { outline: none; }
.travel-location-hit:focus-visible { box-shadow: 0 0 0 1px rgba(26,24,22,.55), 0 0 0 3px rgba(242,240,232,.64); }
.travel-location-tooltip { position: absolute; left: 50%; bottom: calc(100% + 5px); min-width: max-content; padding: 6px 8px 5px; color: #f4f1e8; background: rgba(24,23,22,.88); box-shadow: 0 3px 8px rgba(24,26,26,.12); text-align: left; pointer-events: none; opacity: 0; transform: translate(-50%, 3px); transition: opacity .16s ease, transform .16s ease; }
.travel-location-tooltip strong, .travel-location-tooltip span { display: block; white-space: nowrap; }
.travel-location-tooltip strong { font: 600 clamp(6px,.47vw,8px)/1.2 "Avenir Next", Arial, sans-serif; letter-spacing: .13em; }
.travel-location-tooltip span { margin-top: 2px; color: rgba(244,241,232,.72); font: clamp(5px,.37vw,6.5px)/1.2 Georgia, serif; letter-spacing: .1em; }
.travel-location-hit:hover .travel-location-tooltip,
.travel-location-hit:focus-visible .travel-location-tooltip { opacity: 1; transform: translate(-50%, 0); }
.travel-location-hit[data-location="shanghai"] .travel-location-tooltip { top: calc(100% + 5px); bottom: auto; }
.travel-location-hit[data-has-images="true"] { cursor: pointer; }

.travel-photo-viewer[hidden] { display: none; }
.travel-photo-viewer { position: absolute; z-index: 12; inset: 15.5% 6.5% 5.5%; display: grid; place-items: center; }
.travel-photo-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(236,234,225,.42); backdrop-filter: blur(1.5px); cursor: default; }
.travel-postcard { position: relative; z-index: 1; width: min(46%, 440px); max-height: 88%; margin: 0; padding: 1.4%; background: #f2efe6; box-shadow: 0 12px 28px rgba(30,33,33,.23); transform: rotate(-.35deg); animation: travel-postcard-in .42s var(--ease) both; }
.travel-postcard > img { display: block; width: 100%; max-height: 49vh; object-fit: contain; background: rgba(224,221,212,.6); }
.travel-postcard figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 3.5% 1% 1%; }
.travel-postcard figcaption strong { font: 600 clamp(6px,.52vw,9px)/1.2 "Avenir Next", Arial, sans-serif; letter-spacing: .12em; }
.travel-postcard figcaption span { font: clamp(5px,.42vw,7px)/1.2 Georgia, serif; letter-spacing: .08em; }
.travel-postcard-close { position: absolute; z-index: 2; right: 0; bottom: calc(100% + 7px); padding: 0; border: 0; background: transparent; color: rgba(20,20,18,.72); font: clamp(5px,.42vw,7px)/1 Arial, sans-serif; letter-spacing: .13em; cursor: pointer; }
.travel-postcard-nav { display: flex; justify-content: space-between; padding: 2% 1% 0; border-top: 1px solid rgba(20,20,18,.2); }
.travel-postcard-nav button { padding: 0; border: 0; background: transparent; font: clamp(5px,.4vw,7px)/1 Arial, sans-serif; letter-spacing: .12em; cursor: pointer; }
.travel-postcard-nav button:disabled { visibility: hidden; }
@keyframes travel-postcard-in { from { opacity: 0; transform: translateY(9px) rotate(-.8deg); } to { opacity: 1; transform: translateY(0) rotate(-.35deg); } }

.crop-autumn { background-image: url("https://pub-41c759b76d484ac4ae34f3f6e9598065.r2.dev/wzm-visual-archive/releases/a0bc4edc3c879bc1/assets/cover-cutout-v3.png"); background-size: 280% auto; background-position: 25% 47%; }
.crop-portrait { background-image: url("https://pub-41c759b76d484ac4ae34f3f6e9598065.r2.dev/wzm-visual-archive/releases/a0bc4edc3c879bc1/assets/about-cutout-v3.png"); background-size: 310% auto; background-position: 7% 43%; }
.crop-paper { background-image: url("https://pub-41c759b76d484ac4ae34f3f6e9598065.r2.dev/wzm-visual-archive/releases/a0bc4edc3c879bc1/assets/base-paper-cutout-v3.png"); background-size: 155% auto; background-position: 55% 48%; }
.crop-pink { background-image: url("https://pub-41c759b76d484ac4ae34f3f6e9598065.r2.dev/wzm-visual-archive/releases/a0bc4edc3c879bc1/assets/about-cutout-v3.png"); background-size: 330% auto; background-position: 15% 23%; }
.crop-blue { background-image: url("https://pub-41c759b76d484ac4ae34f3f6e9598065.r2.dev/wzm-visual-archive/releases/a0bc4edc3c879bc1/assets/cover-cutout-v3.png"); background-size: 240% auto; background-position: 71% 55%; }
.selected-cover { background-size: contain; background-position: center; }
.selected-liho { background-image: url("https://pub-41c759b76d484ac4ae34f3f6e9598065.r2.dev/wzm-visual-archive/releases/a0bc4edc3c879bc1/assets/selected-liho.png"); }
.selected-studio-coffee { background-image: url("https://pub-41c759b76d484ac4ae34f3f6e9598065.r2.dev/wzm-visual-archive/releases/a0bc4edc3c879bc1/assets/selected-studio-coffee.png"); }
.selected-things-disappear { background-image: url("https://pub-41c759b76d484ac4ae34f3f6e9598065.r2.dev/wzm-visual-archive/releases/a0bc4edc3c879bc1/assets/selected-things-disappear.jpg"); }
.selected-poster-studies { background-image: url("https://pub-41c759b76d484ac4ae34f3f6e9598065.r2.dev/wzm-visual-archive/releases/a0bc4edc3c879bc1/assets/selected-poster-studies.jpg"); }
.selected-beneath-beasts { background-image: url("https://pub-41c759b76d484ac4ae34f3f6e9598065.r2.dev/wzm-visual-archive/releases/a0bc4edc3c879bc1/assets/selected-beneath-beasts.jpg"); }

.intro-grid { display: grid; grid-template-columns: 35% 1fr; grid-template-rows: auto 1fr; column-gap: 8%; }
.intro-grid .sheet-header { grid-column: 1 / -1; }
.intro-copy { align-self: center; padding-left: 6%; }
.micro-label { font-size: clamp(5px,.48vw,8px); letter-spacing: .12em; margin: 0 0 18%; }
.intro-copy h1 { margin: 0 0 7%; font: 400 clamp(20px,3.4vw,62px)/.9 Georgia, serif; letter-spacing: -.035em; }
.concept { max-width: 30em; font: clamp(6px,.58vw,10px)/1.65 Georgia, serif; }
.intro-copy dl { margin-top: 16%; border-top: 1px solid rgba(0,0,0,.35); font-size: clamp(5px,.49vw,8.5px); }
.intro-copy dl div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,.22); }
.intro-copy dt, .intro-copy dd { margin: 0; }
.hero-print { align-self: center; height: 68%; margin: 4% 5% 0 0; position: relative; background-repeat: no-repeat; box-shadow: 0 7px 10px rgba(37,44,46,.22); transform: rotate(.6deg); }
.hero-print::after { content: "HARMONY"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(246,243,234,.88); font: italic 400 clamp(18px,3vw,52px)/1 Georgia, serif; letter-spacing: .04em; text-shadow: 0 1px 4px rgba(0,0,0,.25); }
.hero-print figcaption { position: absolute; left: 0; bottom: -18px; font-size: clamp(5px,.44vw,8px); letter-spacing: .12em; }

.detail-gallery { position: absolute; z-index: 2; left: 50%; top: 25%; bottom: 12%; width: 100vw; transform: translateX(-50%); overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.detail-gallery.is-dragging { cursor: grabbing; }
.detail-loop-track { height: 100%; display: flex; width: max-content; will-change: transform; }
.detail-loop-group { height: 100%; display: flex; align-items: center; gap: clamp(34px,4.8vw,76px); padding-right: clamp(34px,4.8vw,76px); }
.detail-card { --float-a: -3px; --float-b: 5px; --card-rotation: 0deg; --notes-photo-height: clamp(190px,34vh,390px); position: relative; isolation: isolate; flex: 0 0 auto; display: grid; grid-template-rows: var(--notes-photo-height) 42px; width: max-content; height: auto; margin: 0; overflow: hidden; background: rgba(238,236,229,.97); box-shadow: 0 5px 8px rgba(37,44,46,.21); transform: translateY(var(--float-a)) rotate(var(--card-rotation)); animation: process-card-float var(--float-duration, 4.8s) ease-in-out var(--float-delay, 0s) infinite; animation-play-state: paused; }
.detail-gallery.is-loop-visible .detail-card.is-loop-active { animation-play-state: running; will-change: transform; }
.detail-card span { display: block; width: 100%; height: 100%; min-height: 0; background-repeat: no-repeat; pointer-events: none; }
.detail-card img { display: block; width: auto; height: var(--notes-photo-height); max-width: none; object-fit: contain; object-position: center; pointer-events: none; }
.detail-card figcaption { position: relative; inset: auto; width: 100%; min-width: 0; padding: 8px 8px 5px 26px; background: rgba(238,236,229,.97); border-top: 1px solid rgba(54,45,34,.16); font: clamp(5px,.46vw,8px)/1.3 Georgia, serif; white-space: normal; pointer-events: none; text-shadow: none; }
.detail-card figcaption::before { content: ""; position: absolute; left: 15px; top: 7px; width: 1px; height: 19px; margin: 0; background: rgba(0,0,0,.48); }
.detail-a { --card-rotation: -.65deg; --float-duration: 5.2s; --float-delay: -.7s; }
.detail-b { --card-rotation: .55deg; --float-duration: 4.6s; --float-delay: -2.1s; }
.detail-c { --card-rotation: -.4deg; --float-duration: 5.6s; --float-delay: -3.4s; }
.detail-d { --card-rotation: .75deg; --float-duration: 4.9s; --float-delay: -1.5s; }
.detail-b figcaption, .detail-d figcaption { inset: auto; }
.detail-b figcaption::before, .detail-d figcaption::before { height: 19px; margin: 0; }
@keyframes process-card-float {
  0%, 100% { transform: translateY(var(--float-a)) rotate(var(--card-rotation)); }
  50% { transform: translateY(var(--float-b)) rotate(0deg); }
}

.notes-gallery .detail-card { --float-a: -1px; --float-b: 1.5px; --card-rotation: 0deg; display: block; grid-template-rows: none; overflow: visible; background: transparent; box-shadow: none; transform: translate3d(0,var(--float-a),0); animation-name: notes-card-float; animation-duration: var(--float-duration,10s); }
.notes-gallery .detail-card { cursor: pointer; }
.notes-gallery .detail-card:focus-visible { outline: none; }
.notes-gallery .detail-card:focus-visible .detail-card-surface { outline: 1px solid rgba(31,31,29,.72); outline-offset: 5px; }
.notes-gallery.is-viewer-paused .detail-card { animation-play-state: paused !important; }
.notes-gallery .detail-a { --float-duration: 9.8s; --float-delay: -1.4s; }
.notes-gallery .detail-b { --float-duration: 10.8s; --float-delay: -4.2s; }
.notes-gallery .detail-c { --float-duration: 11.6s; --float-delay: -7.1s; }
.notes-gallery .detail-d { --float-duration: 9.2s; --float-delay: -3.3s; }
.notes-gallery .detail-card-surface { display: grid; grid-template-rows: var(--notes-photo-height) 42px; width: max-content; overflow: hidden; background: rgba(238,236,229,.97); box-shadow: 0 5px 8px rgba(37,44,46,.21); transform: translate3d(0,0,0) scale(1); transform-origin: center center; transition: transform .42s cubic-bezier(.22,.7,.25,1), box-shadow .42s cubic-bezier(.22,.7,.25,1); }
.notes-gallery .detail-card.is-hovered { z-index: 3; }
.notes-gallery .detail-card.is-hovered .detail-card-surface { will-change: transform; transform: translate3d(0,-10px,0) scale(1.02); box-shadow: 0 11px 18px rgba(37,44,46,.27); }
@keyframes notes-card-float {
  0%, 100% { transform: translate3d(0,var(--float-a),0); }
  50% { transform: translate3d(0,var(--float-b),0); }
}

.miscellaneous-section { position: relative; height: 125vh; }
.edition-classic .miscellaneous-section,
.edition-classic .archive-index a[href="#miscellaneous"] { display: none !important; }
.miscellaneous-stage { position: sticky; top: 0; height: 100vh; min-height: 560px; overflow: hidden; perspective: 1500px; }
.miscellaneous-board { position: absolute; left: 50%; top: 50%; width: min(100vw, 177.778vh); aspect-ratio: 16 / 9; transform: translate(-50%,-50%); }
.misc-object {
  --misc-rotation: 0deg;
  --misc-ratio: 1;
  --misc-inspect-scale: 1.16;
  position: absolute;
  z-index: var(--misc-z,1);
  width: var(--misc-width);
  aspect-ratio: var(--misc-ratio);
  padding: 0;
  border: 0;
  background: transparent;
  appearance: none;
  cursor: pointer;
  transform: translate3d(0,0,0) rotate(var(--misc-rotation));
  transform-origin: center center;
  transition: transform .26s cubic-bezier(.22,.7,.25,1), filter .26s ease;
  filter: drop-shadow(0 4px 5px rgba(34,39,40,.16));
  -webkit-tap-highlight-color: transparent;
}
.misc-object:hover,
.misc-object:focus-visible,
.misc-object[aria-pressed="true"] { z-index: 30; }
.misc-object:hover { transform: translate3d(0,-5px,0) rotate(var(--misc-rotation)); filter: drop-shadow(0 9px 10px rgba(34,39,40,.23)); }
.misc-object[aria-pressed="true"]:hover,
.misc-object[aria-pressed="true"]:focus-visible { transform: translate3d(0,-5px,0) rotate(var(--misc-rotation)) scale(var(--misc-inspect-scale)); }
.misc-object:focus { outline: none; }
.misc-object:focus-visible::after { content: ""; position: absolute; z-index: 5; inset: -5px; border: 1px solid rgba(31,31,29,.64); pointer-events: none; }
.misc-flip { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(0deg); transition: transform .7s cubic-bezier(.65,0,.35,1); }
.misc-object[aria-pressed="true"] .misc-flip { transform: rotateY(180deg); }
.misc-face { position: absolute; inset: 0; display: block; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(.1px); }
.misc-face-front { pointer-events: none; }
.misc-front-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
.misc-face-back {
  color: rgba(36,35,32,.9);
  background: #eee9dd;
  transform: rotateY(180deg) translateZ(.12px);
  -webkit-mask-image: var(--misc-mask);
  mask-image: var(--misc-mask);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.misc-back-content { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0,64%) minmax(0,1fr); gap: 3%; padding: 8%; transform: rotate(var(--misc-content-rotation,0deg)) scale(var(--misc-back-scale,1)); transform-origin: center center; }
.misc-back-image { align-self: stretch; justify-self: stretch; min-width: 0; min-height: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(.96); }
.misc-back-copy { align-self: stretch; min-width: 0; min-height: 0; padding-top: 4%; border-top: 1px solid rgba(42,40,36,.25); text-align: left; overflow-wrap: anywhere; word-break: break-word; white-space: normal; }
.misc-back-copy small { display: block; margin-bottom: 3%; font: 500 clamp(2.2px,.23vw,4px)/1.2 "Avenir Next", Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.misc-back-copy p { margin: 0; font: clamp(3px,.31vw,5.4px)/1.38 Georgia, "Songti SC", serif; letter-spacing: .018em; }
.misc-object[data-misc-type="ticket"] .misc-back-content,
.misc-object[data-misc-type="photograph"] .misc-back-content,
.misc-object[data-misc-type="folded-photo"] .misc-back-content { grid-template-columns: 58% minmax(0,1fr); grid-template-rows: 1fr; gap: 6%; padding: 7%; }
.misc-object[data-misc-type="ticket"] .misc-back-copy,
.misc-object[data-misc-type="photograph"] .misc-back-copy,
.misc-object[data-misc-type="folded-photo"] .misc-back-copy { align-self: center; padding: 0 0 0 9%; border-top: 0; border-left: 1px solid rgba(42,40,36,.25); }
.misc-object[data-misc-type="receipt"] .misc-back-content,
.misc-object[data-misc-type="room-key"] .misc-back-content { gap: 3%; padding: 10%; }
.misc-object[data-misc-type="receipt"] .misc-back-copy p,
.misc-object[data-misc-type="room-key"] .misc-back-copy p { font-size: clamp(2.2px,.23vw,4px); line-height: 1.25; }
.misc-object[data-misc-id="asia-design"] { --misc-inspect-scale: 1.42; }
.misc-object[data-misc-id="asia-design"] .misc-back-content { grid-template-rows: minmax(0,44%) minmax(0,1fr); gap: 4%; padding: 8% 9%; }
.misc-object[data-misc-id="asia-design"] .misc-back-copy { display: flex; flex-direction: column; justify-content: flex-start; padding-top: 7%; }
.misc-object[data-misc-id="asia-design"] .misc-back-copy small { margin-bottom: 8%; font-size: clamp(4px,.42vw,7px); line-height: 1.15; }
.misc-object[data-misc-id="asia-design"] .misc-back-copy { justify-content: center; padding-bottom: 5%; }
.misc-object[data-misc-id="asia-design"] .misc-back-copy p { font-size: clamp(5.8px,.64vw,10px); line-height: 1.48; letter-spacing: .025em; }
.misc-object[data-misc-id="zhaohui"] .misc-back-copy p { font-size: clamp(3.8px,.4vw,6.4px); line-height: 1.3; }
.misc-object[data-misc-id="reddot"] .misc-back-content { grid-template-rows: minmax(0,54%) minmax(0,1fr); gap: 3%; padding: 9%; }
.misc-object[data-misc-id="reddot"] .misc-back-copy { display: flex; flex-direction: column; justify-content: center; }
.misc-object[data-misc-id="reddot"] .misc-back-copy p { font-size: clamp(5px,.56vw,9px); line-height: 1.42; }
.misc-object[data-misc-id="calendar"] .misc-back-content { grid-template-rows: minmax(0,62%) minmax(0,1fr); }
.misc-object[data-misc-id="calendar"] .misc-back-copy { display: flex; flex-direction: column; justify-content: center; }
.misc-object[data-misc-id="calendar"] .misc-back-copy p { font-size: clamp(4.8px,.52vw,8.5px); line-height: 1.4; }
.misc-object[data-misc-id="melaka"] { --misc-inspect-scale: 1.38; }
.misc-object[data-misc-id="melaka"] .misc-back-content { grid-template-rows: minmax(0,50%) minmax(0,1fr); gap: 2.5%; }
.misc-object[data-misc-id="melaka"] .misc-back-content { transform: translateX(5%) rotate(var(--misc-content-rotation,0deg)) scale(var(--misc-back-scale,1)); }
.misc-object[data-misc-id="melaka"] .misc-back-copy { display: flex; flex-direction: column; justify-content: center; }
.misc-object[data-misc-id="melaka"] .misc-back-copy p { font-size: clamp(4.4px,.48vw,7.6px); line-height: 1.35; }
.misc-object[data-misc-id="macau"] { --misc-inspect-scale: 1.8; }
.misc-object[data-misc-id="macau"] .misc-back-content { grid-template-rows: minmax(0,24%) minmax(0,1fr); gap: 3%; padding: 8%; }
.misc-object[data-misc-id="macau"] .misc-back-copy { display: flex; flex-direction: column; justify-content: center; padding-top: 7%; padding-bottom: 5%; }
.misc-object[data-misc-id="macau"] .misc-back-copy small { margin-bottom: 7%; font-size: clamp(2.5px,.25vw,4px); line-height: 1.12; }
.misc-object[data-misc-id="macau"] .misc-back-copy p { width: 100%; font-size: clamp(4px,.48vw,7.4px); line-height: 1.36; overflow-wrap: anywhere; word-break: break-all; }
.misc-object[data-misc-id="huixin"] .misc-back-content { grid-template-rows: minmax(0,56%) minmax(0,1fr); gap: 2.5%; }
.misc-object[data-misc-id="huixin"] .misc-back-copy { display: flex; flex-direction: column; justify-content: center; }
.misc-object[data-misc-id="huixin"] .misc-back-copy small { font-size: clamp(3.6px,.36vw,5.8px); }
.misc-object[data-misc-id="huixin"] .misc-back-copy p { font-size: clamp(4.8px,.5vw,8px); line-height: 1.38; }
.misc-object[data-misc-type="sign"] .misc-face-back { background: #ede8dc; clip-path: polygon(50% 0,100% 100%,0 100%); -webkit-mask-image: none; mask-image: none; }
.misc-object[data-misc-type="sign"] .misc-back-content { display: block; padding: 0; }
.misc-object[data-misc-type="sign"] .misc-back-image { position: absolute; left: 6%; top: 1.5%; width: 88%; height: 68%; clip-path: polygon(50% 0,100% 100%,0 100%); object-fit: cover; }
.misc-object[data-misc-type="sign"] .misc-back-copy { position: absolute; left: 18%; right: 18%; bottom: 7%; padding-top: 4.5%; text-align: center; }
.misc-object[data-misc-type="sign"] .misc-back-copy small { margin-bottom: 5%; font-size: clamp(3.6px,.36vw,6px); }
.misc-object[data-misc-type="sign"] .misc-back-copy p { font-size: clamp(6px,.64vw,10px); line-height: 1.35; }
.misc-object[data-misc-id="asia-design"] .misc-front-image,
.misc-object[data-misc-id="reddot"] .misc-front-image,
.misc-object[data-misc-id="melaka"] .misc-front-image,
.misc-object[data-misc-id="huixin"] .misc-front-image { object-fit: cover; }
.misc-object[data-misc-id="asia-design"] .misc-face-back,
.misc-object[data-misc-id="reddot"] .misc-face-back,
.misc-object[data-misc-id="melaka"] .misc-face-back,
.misc-object[data-misc-id="huixin"] .misc-face-back { -webkit-mask-size: cover; mask-size: cover; }
.misc-object[data-misc-id="childhood"] .misc-front-image { inset: -12% auto auto -22%; width: 144%; height: 124%; max-width: none; }
.misc-object[data-misc-id="childhood"] .misc-face-back { -webkit-mask-image: none; mask-image: none; }
.misc-object[data-misc-id="zhaohui"] .misc-front-image { inset: -8% auto auto -58%; width: 315%; height: 111%; object-fit: fill; max-width: none; }
.misc-object[data-misc-id="zhaohui"] .misc-face-back { -webkit-mask-image: none; mask-image: none; border-radius: 1.5%; }

@media (hover: none) {
  .misc-object:hover { transform: translate3d(0,0,0) rotate(var(--misc-rotation)); filter: drop-shadow(0 4px 5px rgba(34,39,40,.16)); }
}

.paper-stack { position: absolute; left: 25%; right: 25%; top: 23%; bottom: 12%; }
.stack-layer, .stack-hero { position: absolute; inset: 3% 1%; border: 1px solid rgba(0,0,0,.13); background: #e9e6de; box-shadow: 0 5px 8px rgba(37,44,46,.19); }
.layer-three { transform: translate(-3%, -2%) rotate(-1.8deg); }
.layer-two { transform: translate(3%, 1%) rotate(1.35deg); background-image: url("https://pub-41c759b76d484ac4ae34f3f6e9598065.r2.dev/wzm-visual-archive/releases/a0bc4edc3c879bc1/assets/base-paper-cutout-v3.png"); background-size: cover; }
.stack-hero { margin: 0; inset: 0; background-repeat: no-repeat; transform: translateY(var(--stack-y, 0)) rotate(-.2deg); transition: transform .1s linear; }
.stack-hero::after { content: ""; position: absolute; inset: 0; background: rgba(30,20,10,.08); }
.stack-hero figcaption { position: absolute; z-index: 2; left: 8%; bottom: 8%; color: #f2eee4; font: italic clamp(20px,3.8vw,68px)/.9 Georgia, serif; text-shadow: 0 1px 5px rgba(0,0,0,.3); }
.stack-hero small { font: clamp(5px,.47vw,8px)/1 Arial, sans-serif; letter-spacing: .17em; }
.final-note { position: absolute; left: 9.3%; bottom: 5%; margin: 0; font: clamp(5px,.45vw,8px)/1 Georgia, serif; letter-spacing: .1em; }

.contact-ending { position: relative; height: 190vh; }
.contact-stage { position: sticky; top: 0; height: 100vh; display: block; overflow: hidden; overflow: clip; }
.contact-composition { position: absolute; z-index: 1; left: 50%; top: 0; width: min(94vw, 149vh, 1100px); aspect-ratio: 1802 / 2252; transform: translate3d(-50%, 110vh, 0); will-change: transform; }
.contact-envelope-layer, .contact-letter-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.contact-envelope-layer { display: block; object-fit: contain; pointer-events: none; transition: transform .28s var(--ease), filter .28s ease; }
.contact-envelope-rear { z-index: 1; }
.contact-letter-layer { z-index: 2; transform: translate3d(0, 43%, 0); transition: transform 1.55s cubic-bezier(.45,0,.25,1); will-change: transform; backface-visibility: hidden; }
.contact-letter-layer > img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 8px rgba(36,43,45,.10)); pointer-events: none; }
.contact-envelope-front { z-index: 3; }
.contact-envelope-button { position: absolute; z-index: 4; left: 7%; right: 7%; top: 31.5%; bottom: 7%; padding: 0; border: 0; background: transparent; cursor: pointer; appearance: none; pointer-events: none; }
.contact-ending.is-ready .contact-envelope-button { pointer-events: auto; }
.contact-envelope-button:focus-visible { outline: 1px solid rgba(28,32,33,.45); outline-offset: 5px; }
.contact-ending.is-envelope-hovered:not(.is-opening):not(.is-opened):not(.is-closing) .contact-envelope-layer { transform: translateY(-10px); filter: drop-shadow(0 10px 13px rgba(28,34,36,.18)) drop-shadow(0 22px 30px rgba(28,34,36,.14)); }
.contact-ending.is-opening .contact-letter-layer,
.contact-ending.is-opened .contact-letter-layer { transform: translate3d(0, 0, 0); }
.contact-ending.is-opening .contact-envelope-button,
.contact-ending.is-opened .contact-envelope-button,
.contact-ending.is-closing .contact-envelope-button { pointer-events: none; }
.contact-hotspot { position: absolute; display: block; opacity: 0; pointer-events: none; border-bottom: 1px solid transparent; transition: opacity .2s ease, border-color .2s ease; }
.contact-email { left: 52.4%; top: 40.7%; width: 30.6%; height: 2.2%; }
.contact-phone { left: 52.4%; top: 43.6%; width: 18.8%; height: 2.2%; }
.contact-instagram { left: 52.4%; top: 46.5%; width: 13.1%; height: 2.2%; }
.contact-ending.is-opened .contact-hotspot { opacity: 1; pointer-events: auto; cursor: pointer; }
.contact-ending.is-opened .contact-hotspot:hover { border-color: rgba(24,28,29,.32); }

.transition-clone { position: fixed; z-index: 100; margin: 0; pointer-events: none; background-repeat: no-repeat; box-shadow: 0 0 24px rgba(35,42,44,.20), 0 12px 22px rgba(35,42,44,.20); transition: all .72s var(--ease); }

html.viewer-open, body.viewer-open-body { overflow: hidden; overscroll-behavior: none; }
html.note-viewer-open, body.note-viewer-open-body { overflow: hidden; overscroll-behavior: none; }
.detail-viewer { position: fixed; z-index: 100; inset: 0; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .32s ease, visibility 0s linear .32s; }
.detail-viewer.is-open { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .32s ease; }
.detail-backdrop { position: absolute; inset: 0; background: linear-gradient(rgba(29,34,35,.78), rgba(29,34,35,.78)), url("https://pub-41c759b76d484ac4ae34f3f6e9598065.r2.dev/wzm-visual-archive/releases/a0bc4edc3c879bc1/assets/global-background-v3.png") center center / cover no-repeat fixed; }
.detail-scroll { position: relative; z-index: 1; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.detail-close { position: fixed; z-index: 3; top: 25px; right: 28px; padding: 7px 0; border: 0; border-bottom: 1px solid rgba(245,242,234,.52); background: transparent; color: rgba(247,244,235,.92); font-size: 9px; letter-spacing: .16em; cursor: pointer; }
.detail-project-single { min-height: 100%; }
.detail-content { min-height: 100%; display: grid; place-items: center; padding: 8vh 7vw 7vh; }
.detail-hero { margin: 0; display: grid; justify-items: start; opacity: 0; transform: scale(.985) translateY(8px); transition: opacity .34s ease .08s, transform .42s var(--ease) .08s; }
.detail-viewer.is-open .detail-hero { opacity: 1; transform: scale(1) translateY(0); }
.detail-image { width: min(79vw, calc(77vh * 1.28)); aspect-ratio: 1.28 / 1; background-color: #e7e3da; background-repeat: no-repeat; box-shadow: 0 7px 16px rgba(0,0,0,.18); }
.detail-hero figcaption { margin-top: 11px; color: rgba(246,243,235,.54); font: 7px/1.3 Arial, sans-serif; letter-spacing: .14em; }
.detail-info { width: min(79vw, calc(77vh * 1.28)); margin-top: 18px; display: flex; align-items: flex-start; justify-content: space-between; color: rgba(248,245,236,.93); opacity: 0; transform: translateY(5px); transition: opacity .28s ease .16s, transform .34s ease .16s; }
.detail-viewer.is-open .detail-info { opacity: 1; transform: translateY(0); }
.detail-info h2 { margin: 0; font: 400 clamp(13px,1.35vw,22px)/1.1 Georgia, serif; letter-spacing: .02em; }
.detail-info p { margin: 0; text-align: right; font: clamp(7px,.58vw,10px)/1.45 Arial, sans-serif; letter-spacing: .12em; }

.detail-viewer.is-editorial { transition-duration: .48s; }
.detail-viewer.is-editorial.is-open { transition-duration: .48s; }
.detail-viewer.is-editorial .detail-backdrop { background: rgba(25,25,24,.88); backdrop-filter: blur(1px); }
.detail-viewer.is-editorial .detail-close { top: 22px; right: 27px; padding: 0; border: 0; color: rgba(247,244,235,.88); font: 300 27px/1 "Avenir Next", "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; }
.detail-project-editorial { min-height: 100%; color: rgba(246,244,238,.92); font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif; }
.editorial-project-intro { position: relative; min-height: 100vh; padding: clamp(64px,8vh,88px) 7.5vw clamp(76px,10vh,110px); display: grid; align-content: start; }
.editorial-project-index { width: min(72vw, 1180px); margin: 0 auto clamp(20px,3vh,32px); font-size: clamp(7px,.55vw,10px); letter-spacing: .18em; color: rgba(246,244,238,.62); }
.editorial-project-hero { width: min(72vw, 1180px); margin: 0 auto; opacity: 0; transform: translateY(8px); transition: opacity .42s ease .08s, transform .5s var(--ease) .08s; }
.detail-viewer.is-open .editorial-project-hero { opacity: 1; transform: translateY(0); }
.editorial-project-hero img { display: block; width: 100%; max-height: 56vh; object-fit: contain; object-position: left center; }
.editorial-project-meta { width: min(72vw, 1180px); margin: clamp(24px,3.5vh,38px) auto 0; display: grid; grid-template-columns: minmax(180px,1fr) minmax(120px,.55fr) minmax(300px,1.45fr); gap: clamp(28px,4vw,72px); align-items: start; opacity: 0; transform: translateY(8px); transition: opacity .36s ease .18s, transform .45s var(--ease) .18s; }
.detail-viewer.is-open .editorial-project-meta { opacity: 1; transform: translateY(0); }
.editorial-project-heading h2 { margin: 0; font: 500 clamp(19px,2.1vw,36px)/1 "Avenir Next", "Helvetica Neue", Arial, sans-serif; letter-spacing: -.02em; }
.editorial-project-heading p { margin: 9px 0 0; font: clamp(8px,.62vw,11px)/1.4 Arial, sans-serif; letter-spacing: .11em; color: rgba(246,244,238,.58); }
.editorial-project-facts { margin: 1px 0 0; font: clamp(8px,.64vw,11px)/1.65 Arial, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.editorial-project-description { max-width: 44em; }
.editorial-project-description p { margin: 0; font: 400 clamp(10px,.76vw,13px)/1.75 "Avenir Next", "Helvetica Neue", Arial, sans-serif; color: rgba(246,244,238,.78); }
.editorial-project-description p + p { margin-top: 14px; color: rgba(246,244,238,.58); font-family: "Blix", "PingFang SC", sans-serif; }
.editorial-scroll-indicator { position: absolute; left: 50%; bottom: 25px; margin: 0; transform: translateX(-50%); font-size: 7px; letter-spacing: .18em; color: rgba(246,244,238,.48); white-space: nowrap; }
.editorial-scroll-indicator span { display: inline-block; margin-left: 4px; animation: reader-cue-breathe 2.1s ease-in-out infinite; }
.editorial-project-gallery { width: min(68vw, 1100px); margin: 0 auto; padding: clamp(72px,10vh,110px) 0 clamp(90px,13vh,150px); border-top: 1px solid rgba(246,244,238,.16); }
.editorial-image-block { margin: 0 0 clamp(80px,9vw,120px); opacity: 0; transform: translateY(12px); transition: opacity .4s ease, transform .4s ease; }
.editorial-image-block:last-child { margin-bottom: 0; }
.editorial-image-block.is-visible { opacity: 1; transform: translateY(0); }
.editorial-image-block img,
.editorial-image-block video { display: block; width: 100%; height: auto; object-fit: contain; }
.detail-viewer[data-project-id="poster-studies"] .editorial-project-gallery { width: min(64vw, 900px); }
.detail-viewer[data-project-id="poster-studies"] .editorial-image-block { display: flex; justify-content: center; }
.detail-viewer[data-project-id="poster-studies"] .editorial-image-block img { width: auto; max-width: 100%; max-height: 72vh; object-fit: contain; }

.detail-project-harmony { min-height: calc(200vh - 154px); opacity: 0; transform: translateY(8px); transition: opacity .34s ease .08s, transform .42s var(--ease) .08s; }
.detail-viewer.is-open .detail-project-harmony:not([hidden]) { opacity: 1; transform: translateY(0); }

.note-viewer[hidden] { display: none; }
.note-viewer {
  position: fixed;
  z-index: 300;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto;
  padding: clamp(22px,3vw,42px) clamp(22px,3.5vw,54px) clamp(22px,3vw,38px);
  color: rgba(231,229,223,.88);
  font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  visibility: hidden;
  pointer-events: none;
}
.note-viewer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #20201e;
  opacity: 0;
  transition: opacity .42s ease;
}
.note-viewer.is-visible { visibility: visible; pointer-events: auto; }
.note-viewer.is-open::before { opacity: 1; }
.note-viewer-header,
.note-viewer-navigation,
.note-viewer-copy {
  position: relative;
  z-index: 2;
  opacity: 0;
  transition: opacity .3s ease .2s;
}
.note-viewer.is-open .note-viewer-header,
.note-viewer.is-open .note-viewer-navigation,
.note-viewer.is-open .note-viewer-copy { opacity: 1; }
.note-viewer-header { display: flex; align-items: flex-start; justify-content: space-between; }
.note-viewer-header p { margin: 0; font-size: clamp(8px,.62vw,10px); line-height: 1; letter-spacing: .16em; }
.note-viewer button {
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: 500 clamp(8px,.62vw,10px)/1 "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .14em;
  cursor: pointer;
  transition: color .25s ease, opacity .25s ease;
}
.note-viewer button:hover { color: #fff; }
.note-viewer button:focus-visible { outline: 1px solid rgba(231,229,223,.72); outline-offset: 5px; }
.note-viewer button:disabled { opacity: .24; cursor: default; }
.note-viewer-spread {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0,1.86fr) minmax(250px,1fr);
  gap: clamp(48px,7vw,120px);
  align-items: stretch;
  padding: clamp(22px,4vh,48px) clamp(16px,3vw,50px) clamp(18px,3vh,34px);
}
.note-viewer-figure {
  min-height: 0;
  margin: 0;
  display: grid;
  place-items: center;
  align-self: stretch;
}
.note-viewer-image-stage {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  touch-action: pan-y;
}
.note-viewer-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 170px);
  object-fit: contain;
  opacity: 0;
  transform: translate3d(0,0,0) scale(.985);
  transform-origin: center center;
  will-change: transform, opacity;
  transition: transform .62s cubic-bezier(.22,.7,.25,1), opacity .28s ease;
}
.note-viewer.is-opening .note-viewer-image {
  opacity: 1;
  transform: translate3d(var(--note-start-x,0),var(--note-start-y,0),0) scale(var(--note-start-scale,.985));
  transition: none;
}
.note-viewer.is-open .note-viewer-image { opacity: 1; transform: translate3d(0,0,0) scale(1); }
.note-viewer.is-closing .note-viewer-image {
  opacity: var(--note-close-opacity,0);
  transform: translate3d(var(--note-close-x,0),var(--note-close-y,0),0) scale(var(--note-close-scale,.985));
  transition-duration: .52s, .26s;
}
.note-viewer-copy {
  align-self: center;
  width: 100%;
  max-width: 340px;
  color: rgba(231,229,223,.76);
  text-align: left;
}
.note-viewer-number {
  margin: 0;
  font-size: clamp(8px,.58vw,10px);
  line-height: 1;
  letter-spacing: .18em;
  color: rgba(231,229,223,.46);
}
.note-viewer-metadata {
  margin-top: clamp(42px,6.5vh,74px);
}
.note-viewer-metadata p,
.note-viewer-metadata time {
  display: block;
  margin: 0;
  font-size: clamp(9px,.72vw,12px);
  line-height: 1.5;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.note-viewer-metadata time {
  margin-top: 9px;
  color: rgba(231,229,223,.45);
  font-size: clamp(8px,.61vw,10px);
}
.note-viewer-observation {
  margin: clamp(46px,7vh,82px) 0 0;
  max-width: 20em;
  color: rgba(231,229,223,.84);
  font-family: "Blix", "PingFang SC", "Noto Serif CJK SC", serif;
  font-size: clamp(14px,1.08vw,17px);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: .055em;
}
.note-viewer.is-changing .note-viewer-image {
  opacity: 0;
  transform: scale(.992);
  transition-duration: .16s;
}
.note-viewer.is-changing .note-viewer-copy {
  opacity: 0;
  transition-delay: 0s;
  transition-duration: .16s;
}
.note-viewer.is-change-entering .note-viewer-image {
  transition-duration: .18s;
}
.note-viewer.is-change-entering .note-viewer-copy {
  transition-delay: 0s;
  transition-duration: .18s;
}
.note-viewer-navigation { display: flex; align-items: flex-end; justify-content: space-between; }

.reader-page { min-height: 100vh; position: relative; display: grid; place-items: center; padding: 7vh 5vw; }
.reader-page + .reader-page { margin-top: -154px; }
.reader-paper { z-index: 1; width: min(88vw, calc(84vh * 1.55)); position: relative; left: auto; top: auto; transform: none; filter: drop-shadow(0 0 10px rgba(24,29,30,.18)) drop-shadow(0 9px 13px rgba(24,29,30,.20)); }
.reader-scroll-cue { position: fixed; z-index: 2; left: 50%; bottom: 50px; margin: 0; transform: translateX(-50%); color: rgba(247,244,235,.72); font: 7px/1 Arial, sans-serif; letter-spacing: .18em; white-space: nowrap; pointer-events: none; opacity: 1; transition: opacity .24s ease, transform .3s var(--ease); }
.reader-scroll-cue span { display: inline-block; margin-left: 4px; animation: reader-cue-breathe 2.1s ease-in-out infinite; }
.detail-viewer.reader-scrolled .reader-scroll-cue { opacity: 0; transform: translate(-50%, 5px); }
@keyframes reader-cue-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

@media (max-width: 760px) {
  .sound-selection { padding: 48px 34px; }
  .sound-selection::after { inset: 16px; }
  .sound-selection-paper { width: min(82vw,440px); gap: 38px; }
  .sound-selection-copy h1,
  .sound-selection-copy p { font-size: clamp(20px,6.2vw,25px); line-height: 1.42; }
  .sound-selection-actions { gap: 22px; }
  .sound-choice { width: 86px; height: 86px; }
  .personal-entry { padding: 20px 9vw; }
  .personal-record { width: min(82vw,360px); grid-template-columns: 1fr; gap: 20px; }
  .personal-record-portrait { width: min(54vw,210px); justify-self: center; }
  .personal-record-header { padding-bottom: 9px; }
  .personal-record-fields > div { padding: 10px 0 9px; }
  .personal-record-fields dt { margin-bottom: 5px; font-size: 8px; }
  .personal-record-fields dd { font-size: 11px; }
  .personal-record-fields .personal-record-name { font-size: 17px; }
  .personal-record-enter { margin-top: 16px; }
  .scene { height: 105vh; margin-top: 0; }
  .stage { align-items: center; }
  .portfolio-stack-sequence { height: 460vh; }
  .physical-page { width: 150vw; max-width: none; }
  .archive-index { --index-step: 24px; --index-offset-x: 0px; top: auto; right: 10px; bottom: 10px; left: 10px; width: auto; }
  .archive-index-title { display: none; }
  .archive-index nav { grid-template-columns: repeat(6,minmax(0,1fr)); grid-auto-rows: var(--index-step); }
  .archive-index nav a { justify-content: center; gap: 3px; height: var(--index-step); transform: translate3d(0,calc(var(--chapter-weight) * -3px),0) scale(calc(1 + (var(--chapter-weight) * .08))); transform-origin: center bottom; }
  .archive-index nav a span { flex-basis: auto; font-size: 6px; }
  .archive-index nav a b { font-size: 7px; letter-spacing: .06em; }
  .index-indicator { left: 2%; top: -3px; width: 12%; height: 1px; transform: translate3d(calc(var(--indicator-position) * 133.333%),0,0); }
  .scroll-cue { display: none; }
  .paper-content { padding-left: 9.3%; padding-right: 9.3%; }
  .travel-location-hit { width: 5.6%; min-width: 22px; }
  .travel-location-tooltip { padding: 5px 7px 4px; }
  .travel-postcard { width: 62%; }
  .detail-close { top: 14px; right: 16px; }
  .detail-content { padding: 11vh 5vw 6vh; }
  .detail-image, .detail-info { width: 90vw; }
  .detail-viewer.is-editorial .detail-close { top: 14px; right: 16px; font-size: 26px; }
  .editorial-project-intro { min-height: auto; padding: 62px 5vw 84px; }
  .editorial-project-index, .editorial-project-hero, .editorial-project-meta { width: 88vw; }
  .editorial-project-gallery { width: 86vw; }
  .editorial-project-hero img { max-height: none; object-position: center; }
  .editorial-project-meta { grid-template-columns: 1fr auto; gap: 24px 18px; }
  .editorial-project-description { grid-column: 1 / -1; }
  .editorial-project-description p { font-size: 10px; }
  .editorial-scroll-indicator { bottom: 28px; }
  .editorial-project-gallery { padding-top: 68px; padding-bottom: 92px; }
  .editorial-image-block { margin-bottom: 64px; }
  .detail-viewer[data-project-id="poster-studies"] .editorial-project-gallery { width: 88vw; }
  .detail-viewer[data-project-id="poster-studies"] .editorial-image-block img { max-height: 68vh; }
  .reader-page { min-height: 100vh; padding: 10vh 3vw 6vh; }
  .reader-page + .reader-page { margin-top: -122px; }
  .reader-paper { width: 94vw; max-width: none; }
  .reader-scroll-cue { bottom: 38px; font-size: 6px; }
  .detail-gallery { top: 24%; bottom: 14%; mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent); }
  .note-viewer { padding: 20px 18px 18px; }
  .note-viewer-header p,
  .note-viewer button { font-size: 8px; }
  .note-viewer-spread {
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: minmax(0,1fr) auto;
    gap: 18px;
    padding: 14px 0 18px;
  }
  .note-viewer-image { max-width: calc(100vw - 36px); max-height: min(48svh,460px); }
  .note-viewer-copy { align-self: start; max-width: none; padding: 0 4px; }
  .note-viewer-number { font-size: 8px; }
  .note-viewer-metadata { margin-top: 16px; }
  .note-viewer-metadata p,
  .note-viewer-metadata time { font-size: 8px; }
  .note-viewer-metadata time { margin-top: 5px; }
  .note-viewer-observation { margin-top: 18px; max-width: 30em; font-size: 13px; line-height: 1.72; }
  .contact-ending { height: 175vh; }
  .contact-composition { width: min(96vw, 145vh); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .portfolio-stack-sequence { height: auto; }
  .portfolio-stack-stage { height: auto; position: relative; display: grid; gap: 8vh; place-items: center; padding: 5vh 0; overflow: hidden; }
  .stack-sheet { position: relative; left: auto; top: auto; opacity: 1 !important; transform: none !important; filter: none !important; }
  .stack-works { filter: drop-shadow(0 3px 7px rgba(36,43,45,.035)) !important; }
  .tracing-material { display: none; }
  .scroll-cue { display: none; }
  .reader-scroll-cue span { animation: none; }
  .editorial-scroll-indicator span { animation: none; }
  .editorial-project-hero, .editorial-project-meta, .editorial-image-block { opacity: 1; transform: none; }
  .detail-card { animation: none; }
  .miscellaneous-section { height: 100vh; }
  .misc-object, .misc-flip { transition-duration: .01ms !important; }
  .personal-entry, .personal-record { transition-duration: .08s !important; }
  .sound-selection { transition-duration: .08s !important; }
  .sound-selection.is-dissolving { -webkit-mask-image: none; mask-image: none; }
  .sound-choice { transform: none !important; }
  .contact-ending { height: 125vh; }
  .contact-letter-layer { transition-duration: .01ms; }
  .travel-drag-dot::before { animation: none; }
}