/* 随轩 · 看图 (assets/js/viewer.js)
   One dark room for looking at a picture: the picture whole in the middle, a thin bar of tools above, the caption below.
   It sits outside the page root, so it names its own typefaces. */

.sxv {
  position: fixed; inset: 0; z-index: 300; overflow: hidden;
  background: rgba(16, 13, 11, .985); color: #EDE4D3;
  font-family: "YH Gu Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  opacity: 0; transition: opacity .18s ease;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.sxv[hidden] { display: none; }
.sxv.is-in { opacity: 1; }
.sxv button { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.sxv :focus-visible { outline: 2px solid #E8A27A; outline-offset: 2px; }

/* the picture */
.sxv__stage { position: absolute; inset: 0; }
.sxv__img {
  position: absolute; left: 0; top: 0; max-width: none; max-height: none; transform-origin: 0 0;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55); background: rgba(255, 255, 255, .02);
  cursor: zoom-in; will-change: transform; transition: opacity .15s ease;
}
.sxv__img.is-wait { opacity: 0; }
.sxv__img[src$=".svg"], .sxv__img[src*=".svg?"] { background: #F5EEDD; }
.sxv.is-zoomed .sxv__img { cursor: grab; }
.sxv.is-dragging .sxv__img { cursor: grabbing; }

/* the bar of tools */
.sxv__bar {
  position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 54px;
  display: flex; align-items: center; gap: 14px; padding: 0 8px 0 20px;
  background: linear-gradient(rgba(16, 13, 11, .82), rgba(16, 13, 11, 0));
}
.sxv__n { flex: none; font-family: "EB Garamond", "YH Gu Serif", serif; font-size: 15px; color: rgba(237, 228, 211, .7); font-variant-numeric: lining-nums tabular-nums; }
.sxv__note { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; color: rgba(237, 228, 211, .55); }
.sxv__tools { flex: none; margin-left: auto; display: flex; align-items: center; gap: 2px; }
.sxv__b, .sxv__pct, .sxv__orig, .sxv__x {
  display: inline-grid; place-items: center; height: 38px; min-width: 38px; padding: 0 10px; border-radius: 19px;
  font-size: 14px; color: #EDE4D3; text-decoration: none; transition: background-color .15s;
}
.sxv__b:hover, .sxv__pct:hover, .sxv__orig:hover, .sxv__x:hover { background: rgba(255, 255, 255, .1); }
.sxv__pct { min-width: 64px; font-family: "EB Garamond", "YH Gu Serif", serif; font-size: 15px; font-variant-numeric: lining-nums tabular-nums; }
.sxv__orig { padding: 0 14px; color: rgba(237, 228, 211, .8); }
/* drawn signs: minus, plus, a cross */
.sxv__b i, .sxv__x i { position: relative; display: block; width: 16px; height: 16px; }
.sxv__b i::before, .sxv__b i::after, .sxv__x i::before, .sxv__x i::after {
  content: ""; position: absolute; left: 0; top: 7.25px; width: 16px; height: 1.5px; border-radius: 1px; background: currentColor;
}
.sxv__zo i::after { display: none; }
.sxv__zi i::after { transform: rotate(90deg); }
.sxv__x i::before { transform: rotate(45deg); }
.sxv__x i::after { transform: rotate(-45deg); }
.sxv__x { margin-left: 4px; }

/* the way to the next picture */
.sxv__nav { position: absolute; z-index: 2; top: 50%; width: 60px; height: 104px; margin-top: -52px; display: grid; place-items: center; color: rgba(255, 255, 255, .62); transition: color .15s; }
.sxv__nav:hover { color: #FFFFFF; }
.sxv__nav[hidden] { display: none; }
.sxv__nav i { width: 16px; height: 16px; border: solid currentColor; border-width: 0 0 2px 2px; transform: translateX(3px) rotate(45deg); }
.sxv__nav--next i { transform: translateX(-3px) rotate(-135deg); }
.sxv__nav--prev { left: 8px; }
.sxv__nav--next { right: 8px; }

/* the caption */
.sxv__foot {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 18px 24px 20px; text-align: center; pointer-events: none;
  background: linear-gradient(rgba(16, 13, 11, 0), rgba(16, 13, 11, .82) 46%);
}
.sxv__cap {
  max-width: 46em; margin: 0 auto; pointer-events: auto; -webkit-user-select: text; user-select: text;
  font-family: "YH Gu Serif", "Noto Serif SC", "Songti SC", "STSong", serif; font-size: 15px; line-height: 1.7; color: #E8DDC8;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sxv__cap:empty { display: none; }
.sxv__cap a { color: inherit; }
.sxv__cap .rb-fn { margin-right: .7em; font-weight: 700; letter-spacing: .04em; color: #E8A27A; }

@media (max-width: 760px) {
  .sxv__bar { height: 50px; padding-left: 16px; gap: 10px; }
  .sxv__b, .sxv__pct, .sxv__note { display: none; }
  .sxv__nav { top: auto; bottom: 6px; margin-top: 0; width: 56px; height: 56px; }
  .sxv__foot { padding: 14px 64px calc(16px + env(safe-area-inset-bottom)); }
  .sxv__cap { font-size: 14px; -webkit-line-clamp: 4; }
}
@media (prefers-reduced-motion: reduce) {
  .sxv, .sxv__img { transition: none; }
}

/* ---------- on the page: pictures that open, and the cover's button ---------- */
.prose img[data-sxv-pic], img.sxv-cover { cursor: zoom-in; }
.prose img[data-sxv-pic]:focus-visible { outline: 2px solid var(--acc, #9A3B2A); outline-offset: 4px; }
.sxv-host { position: relative; }
.sxv-zoom {
  position: absolute; z-index: 6; right: 10px; bottom: 10px;
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 10px; border: 0; border-radius: 15px;
  background: rgba(22, 19, 16, .64); color: #FFFFFF; font: 500 12.5px/1 var(--f-ui, system-ui, sans-serif); letter-spacing: .03em;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
  cursor: pointer; transition: background-color .2s;
}
.sxv-zoom:hover, .sxv-zoom:focus-visible { background: rgba(22, 19, 16, .86); }
.sxv-zoom i {
  width: 12px; height: 12px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M1 4.5V1h3.5M7.5 1H11v3.5M11 7.5V11H7.5M4.5 11H1V7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M1 4.5V1h3.5M7.5 1H11v3.5M11 7.5V11H7.5M4.5 11H1V7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* covers whose picture sits inside a mount or a slide: the button sits on the picture, not on the mount */
.w-phil .ah__fig > .sxv-zoom { right: 40px; bottom: 36px; }
.w-teach .ah__slide > .sxv-zoom { right: 20px; bottom: 20px; }
@container yh (max-width: 760px) {
  .w-phil .ah__fig > .sxv-zoom { right: 26px; bottom: 24px; }
}
@media print { .sxv, .sxv-zoom { display: none !important; } }