/* A gentle reconstruction of the visible image; connections keep fixed positions. */
.portfolio .pf-header { column-gap: clamp(8px, 1.5vw, 24px); }
.portfolio .wm-global-motion {
  margin-left: auto; flex: 0 0 auto; border: 1px solid var(--ww-line, #d3d4ca);
  padding: 6px 10px; background: transparent; color: var(--ww-muted, #626860);
  font: 11px/1.6 var(--ww-sans, sans-serif); white-space: nowrap; cursor: pointer;
}
.portfolio .wm-global-motion[aria-pressed="true"] { color: var(--ww-accent, #a72e24); }
.portfolio .wm-global-motion:disabled { cursor: default; opacity: .75; }
.wm-enabled #scene-shanshui .ww-scene-art { position: relative; }
.wm-fragment-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 650ms ease; }
.wm-fragment { position: absolute; display: block; background-repeat: no-repeat; opacity: .78; }
.wm-fragment-layer[data-wm-started="true"] .wm-fragment { animation: wm-image-arrival var(--wm-duration, 6s) ease-in-out var(--wm-delay, 0s) 1 both; animation-play-state: paused; }
body[data-wm-motion="running"] .wm-fragment-layer[data-wm-ready="true"][data-wm-active="true"] { opacity: 1; }
body[data-wm-motion="running"] .wm-fragment-layer[data-wm-active="true"] .wm-fragment { animation-play-state: running; }
.wm-fragment-layer[data-wm-finished="true"] { opacity: 0 !important; }
.wm-fragment-layer[data-wm-gather="true"] { opacity: 0 !important; }
.wm-fragment-layer[data-wm-gather="true"] .wm-fragment { animation-play-state: paused !important; }
.ww-looking-close .wm-fragment-layer { display: none; }
@keyframes wm-image-arrival {
  0%, 100% { transform: translate(0, 0); }
  28% { transform: translate(var(--wm-dx), var(--wm-dy)); }
  58% { transform: translate(calc(var(--wm-dx) * -.62), calc(var(--wm-dy) * .55)); }
  80% { transform: translate(calc(var(--wm-dx) * .35), calc(var(--wm-dy) * -.7)); }
}

[data-wm-explorer] { --wm-accent: var(--ww-accent, #a72e24); --wm-line: var(--ww-line, #d3d4ca); --wm-paper: var(--ww-paper, #f7f5ef); --wm-ink: var(--ww-ink, #1c1f1d); --wm-muted: var(--ww-muted, #626860); color: var(--wm-ink); }
.wm-interactive { margin: 0; }
.wm-explorer-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 16px 24px; border-top: 1px solid var(--wm-line); border-bottom: 1px solid var(--wm-line); padding: 24px 0; }
.wm-explorer-controls>label { flex: 1 1 260px; max-width: 580px; font-size: 11px; line-height: 1.7; color: var(--wm-muted); }
.wm-explorer-controls select { display: block; margin-top: 9px; width: 100%; min-height: 42px; padding: 7px 32px 7px 0; border: 0; border-bottom: 1px solid var(--wm-line); border-radius: 0; background-color: transparent; color: var(--wm-ink); font: 17px/1.7 var(--ww-sans, sans-serif); }
.wm-explorer-controls select option { background: var(--wm-paper); color: var(--wm-ink); }
.wm-explorer-controls button { min-height: 42px; padding: 8px 15px; border: 1px solid var(--wm-line); background: transparent; color: var(--wm-ink); font: 12px/1.7 var(--ww-sans, sans-serif); cursor: pointer; }
.wm-explorer-controls button:disabled { color: var(--wm-muted); opacity: .42; cursor: default; }
.wm-explorer-controls [data-wm-back] { margin-left: auto; }
.wm-stage { position: relative; min-height: 820px; margin: 25px 0 0; isolation: isolate; }
.wm-stage[data-wm-neighbors="0"] { min-height: 440px; }
.wm-thread-svg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wm-connection-line,.wm-connection-thread { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.wm-connection-line { stroke: var(--wm-muted); stroke-width: 1; opacity: .39; transition: opacity 180ms ease, stroke 180ms ease; }
.wm-connection-thread { stroke: var(--wm-accent); stroke-width: 1.6; stroke-dasharray: 5 14; opacity: 0; animation: wm-line-travel 18s linear infinite; animation-play-state: paused; }
.wm-connection-line.wm-is-highlighted { stroke: var(--wm-accent); stroke-width: 1.3; opacity: .92; }
.wm-connection-thread.wm-is-highlighted { opacity: .8; }
body[data-wm-motion="running"] .wm-stage[data-wm-active="true"] .wm-connection-thread { opacity: .12; animation-play-state: running; }
body[data-wm-motion="running"] .wm-stage[data-wm-active="true"] .wm-connection-thread.wm-is-highlighted { animation-play-state: running; }
body[data-wm-motion="running"] .wm-stage[data-wm-active="true"] .wm-connection-thread.wm-is-highlighted { opacity: .8; }
.wm-stage.wm-has-highlight .wm-connection-line:not(.wm-is-highlighted) { opacity: .18; }
@keyframes wm-line-travel { to { stroke-dashoffset: -114; } }
.wm-node { position: absolute; box-sizing: border-box; background: var(--wm-paper); color: var(--wm-ink); }
.wm-node--source { left: 50%; top: 50%; width: 26%; max-width: 320px; min-width: 205px; transform: translate(-50%, -50%); padding: 17px 18px 19px; border: 1px solid var(--wm-line); }
.wm-node--neighbor { width: 24%; max-width: 245px; min-width: 174px; transform: translate(-50%, -50%); border-bottom: 1px solid var(--wm-line); padding-bottom: 11px; }
.wm-node--neighbor[data-wm-slot="0"] { left: 15%; top: 15%; }
.wm-node--neighbor[data-wm-slot="1"] { left: 85%; top: 15%; }
.wm-node--neighbor[data-wm-slot="2"] { left: 15%; top: 50%; }
.wm-node--neighbor[data-wm-slot="3"] { left: 85%; top: 50%; }
.wm-node--neighbor[data-wm-slot="4"] { left: 15%; top: 85%; }
.wm-node--neighbor[data-wm-slot="5"] { left: 85%; top: 85%; }
.wm-node-eyebrow { margin: 0 0 12px; color: var(--wm-accent); font-size: 10px; letter-spacing: .045em; line-height: 1.8; }
.wm-node-image { display: block; background: var(--ww-image, #e5e4dc); overflow: hidden; }
.wm-node-image img { display: block; width: 100%; height: auto; aspect-ratio: 1.65; object-fit: contain; }
.wm-node-document { display: grid; place-items: center; min-height: 118px; padding: 20px; box-sizing: border-box; font-size: 11px; letter-spacing: .06em; color: var(--wm-muted); }
.wm-source-title { font: 400 clamp(20px, 2vw, 29px)/1.55 var(--ww-reading, Georgia, serif); letter-spacing: -.02em; margin: 14px 0 8px !important; overflow-wrap: anywhere; }
.wm-source-title:focus { outline: 2px solid var(--wm-accent); outline-offset: 5px; }
.wm-node-meta { font-size: 11px; line-height: 1.9; color: var(--wm-muted); margin: 0 0 15px; }
.wm-node-open { display: inline-block; color: var(--wm-muted); font-size: 10px; line-height: 1.85; text-decoration: none; border-bottom: 1px solid var(--wm-line); }
.wm-node--neighbor>.wm-node-open { margin: 5px 0 0; }
.wm-node-open:hover { color: var(--wm-accent); border-color: var(--wm-accent); }
.wm-node-switch { display: block; width: 100%; text-align: left; padding: 0; margin: 0; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; }
.wm-node-body { display: block; padding-top: 9px; }
.wm-node-date { display: block; font-size: 10px; color: var(--wm-muted); line-height: 1.8; }
.wm-node-title { display: block; font: 400 18px/1.55 var(--ww-sans, sans-serif); letter-spacing: -.02em; margin-top: 3px; overflow-wrap: anywhere; }
.wm-node-title::after { content: " ↗"; color: var(--wm-accent); font-size: .72em; white-space: nowrap; }
.wm-node-relation { display: block; font-size: 10px; color: var(--wm-muted); line-height: 1.8; margin-top: 5px; }
.wm-node.wm-is-highlighted { border-color: var(--wm-accent); }
.wm-node.wm-is-highlighted .wm-node-title { color: var(--wm-accent); }
.wm-node-switch:focus-visible,.wm-node-open:focus-visible,.wm-explorer-controls :focus-visible { outline: 2px solid var(--wm-accent); outline-offset: 5px; }
.wm-reason { position: relative; margin: 28px 0 0; padding: 23px 0 28px 25px; border-top: 1px solid var(--wm-line); min-height: 145px; box-sizing: border-box; max-width: 920px; }
.wm-reason::before { content: ""; position: absolute; left: 0; top: 31px; width: 6px; height: 6px; background: var(--wm-accent); }
.wm-reason-title { font-size: 18px; line-height: 1.8; font-weight: 450; margin: 0 0 9px; }
.wm-reason-arrival { font-size: 11px; line-height: 1.8; color: var(--wm-accent); margin: 0 0 8px; }
.wm-reason-copy { font: 400 18px/1.95 var(--ww-reading, Georgia, serif); margin: 0; }
.wm-reason-prompt { color: var(--wm-muted); font-size: 14px; line-height: 1.95; margin: 0; max-width: 54em; }
[data-wm-fallback] { margin-top: 50px; }

@media (min-width: 761px) and (max-width: 1000px) {
  .wm-stage { min-height: 810px; }
  .wm-node--source { width: 27%; min-width: 0; padding: 13px; }
  .wm-node--neighbor { width: 25%; min-width: 0; }
  .wm-node--neighbor[data-wm-slot="0"],.wm-node--neighbor[data-wm-slot="2"],.wm-node--neighbor[data-wm-slot="4"] { left: 14%; }
  .wm-node--neighbor[data-wm-slot="1"],.wm-node--neighbor[data-wm-slot="3"],.wm-node--neighbor[data-wm-slot="5"] { left: 86%; }
  .wm-node-title { font-size: 16px; }
  .wm-source-title { font-size: 20px; }
  .wm-node-meta { font-size: 10px; }
}
@media (max-width: 900px) {
  .portfolio .wm-global-motion { margin-left: auto; padding: 5px 8px; font-size: 10px; }
  .portfolio .pf-header>.menu-button { flex: 0 0 40px; }
}
@media (max-width: 760px) {
  .wm-explorer-controls { gap: 14px; padding: 20px 0; }
  .wm-explorer-controls>label { flex-basis: 100%; max-width: none; }
  .wm-explorer-controls select { font-size: 16px; }
  .wm-explorer-controls [data-wm-back] { margin-left: 0; }
  .wm-explorer-controls button { min-height: 40px; font-size: 11px; padding: 7px 12px; }
  .wm-stage,.wm-stage[data-wm-neighbors="0"] { display: flex; flex-direction: column; gap: 26px; min-height: 0; margin-top: 27px; padding: 0 0 0 27px; }
  .wm-node--source,.wm-node--neighbor { position: relative; top: auto !important; left: auto !important; transform: none; width: 100%; min-width: 0; max-width: none; box-sizing: border-box; }
  .wm-node--source { padding: 17px; margin-bottom: 3px; }
  .wm-node--source .wm-node-image img { max-height: 240px; aspect-ratio: 1.8; }
  .wm-source-title { font-size: 25px; margin-top: 15px !important; }
  .wm-node-meta { font-size: 11px; margin-bottom: 12px; }
  .wm-node-switch { display: grid; grid-template-columns: 112px 1fr; gap: 15px; align-items: start; }
  .wm-node--neighbor .wm-node-image img { width: 112px; height: 88px; aspect-ratio: auto; object-fit: contain; }
  .wm-node--neighbor .wm-node-document { min-height: 88px; padding: 8px; font-size: 9px; }
  .wm-node--neighbor .wm-node-body { padding-top: 0; }
  .wm-node-title { font-size: 18px; line-height: 1.6; margin-top: 2px; }
  .wm-node-relation { font-size: 10px; margin-top: 6px; }
  .wm-node--neighbor>.wm-node-open { margin-left: 127px; margin-top: 6px; }
  .wm-connection-line { opacity: .32; }
  .wm-reason { min-height: 150px; margin-top: 29px; padding-left: 20px; }
  .wm-reason-title { font-size: 17px; }
  .wm-reason-copy { font-size: 17px; }
  .wm-reason-prompt { font-size: 13px; }
}
@media (max-width: 380px) {
  .portfolio .pf-header { column-gap: 8px; }
  .portfolio .wm-global-motion { padding: 5px 6px; font-size: 9px; }
  .wm-node-switch { grid-template-columns: 88px 1fr; gap: 12px; }
  .wm-node--neighbor .wm-node-image img { width: 88px; height: 76px; }
  .wm-node--neighbor>.wm-node-open { margin-left: 100px; }
  .wm-node-title { font-size: 16px; }
  .wm-node-relation { font-size: 9px; }
  .wm-node--source { padding: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .wm-fragment-layer { display: none !important; }
  .wm-fragment,.wm-connection-thread { animation: none !important; }
  .wm-fragment-layer,.wm-connection-line { transition: none !important; }
}
@media print {
  .wm-global-motion,.wm-interactive,.wm-fragment-layer { display: none !important; }
  [data-wm-fallback] { display: block !important; margin-top: 0; }
}