/* Inside the Cable Temple: soot, aged paper, and restrained woodcut borders.
   Album reference: https://music.apple.com/album/1545534900
   All treatments are scoped to the dark palette. */
html[data-theme="dark"] {
  color-scheme: dark;
}

[data-theme="dark"] body.theme-luka {
  --luka-bg: #10100e;
  isolation: isolate;
  background-image: url("../img/paper-grain.svg");
}

/* Fixed print sits behind every interactive element; lettering is decorative. */
.woodcut-background {
  display: none;
}

[data-theme="dark"] .woodcut-background {
  display: block;
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  background-color: #10100e;
}

[data-theme="dark"] .woodcut-background::before {
  content: "";
  position: absolute;
  inset: 60px auto 0 0;
  width: min(76vw, 1100px);
  /* Crop the printed outer frame and fade the two horizontal plate rules. */
  background: url("../img/cable-temple-column-texture.png") center / 104% 104% no-repeat;
  opacity: 0.76;
  mask-image:
    linear-gradient(to right, #000 88%, transparent),
    linear-gradient(to bottom, #000 28%, transparent 30.9%, #000 34%, #000 67%, transparent 70.4%, #000 74%);
  mask-composite: intersect;
}

[data-theme="dark"] .woodcut-qilin {
  position: absolute;
  left: 0;
  top: calc(50% + 30px);
  width: min(76vw, 1100px);
  aspect-ratio: 2 / 1;
  transform: translateY(-50%);
  /* Preserve the accepted drawing; hide only its narrow printed frame. */
  background: url("../img/cable-temple-qilin-reference.png") center / 104% 104% no-repeat;
  opacity: 0.76;
  mask-image:
    linear-gradient(to right, #000 88%, transparent),
    linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent);
  mask-composite: intersect;
}

[data-theme="dark"] .woodcut-landscape {
  position: absolute;
  inset: 60px 0 0 auto;
  width: min(28vw, 420px, 40vh);
  /* Reuse only the first artwork's right-hand mountains, pines and clouds. */
  background: url("../img/cable-temple-woodcut.png") right center / auto 100% no-repeat;
  opacity: 0.76;
  mask-image:
    linear-gradient(to right, transparent, #000 80%),
    linear-gradient(to bottom, #000 38%, transparent 40.6%, #000 43%, #000 71%, transparent 73.7%, #000 76%);
  mask-composite: intersect;
}

[data-theme="dark"] .woodcut-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(16, 16, 14, 0.18), rgba(16, 16, 14, 0.6) 34%, rgba(16, 16, 14, 0.88) 46%, rgba(16, 16, 14, 0.83) 83%, rgba(16, 16, 14, 0.24));
}

/* Exact windows onto the user's original artwork, not re-typeset lettering.
   Source dimensions: 378 x 651. Keep every title's individual arrangement.
   Sharpen only at render time; preserve the original source and glyph shapes. */
.woodcut-lettering {
  --print-scale: 1.5;
  position: absolute;
  z-index: 1;
  width: calc(var(--crop-w) * var(--print-scale));
  height: calc(var(--crop-h) * var(--print-scale));
  background-image: url("../img/cable-temple-reference.png");
  background-size: calc(378px * var(--print-scale)) calc(651px * var(--print-scale));
  background-position: calc(var(--crop-x) * var(--print-scale)) calc(var(--crop-y) * var(--print-scale));
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  filter: url("#woodcut-ink-sharpen") contrast(1.32) brightness(1.5);
  opacity: 0.93;
  color: transparent;
  font-size: 0;
  animation: woodcut-drift 28s ease-in-out infinite alternate;
}

.woodcut-lettering-temple {
  --crop-x: -5px; --crop-y: -168px; --crop-w: 31px; --crop-h: 108px;
  left: 7%; top: 12%;
  animation-duration: 33s; animation-delay: -8s;
}

.woodcut-lettering-qilin {
  --crop-x: -40px; --crop-y: -195px; --crop-w: 95px; --crop-h: 81px;
  left: 12%; bottom: 8%;
  animation-duration: 38s; animation-delay: -19s;
}

.woodcut-lettering-detour {
  --crop-x: -138px; --crop-y: -171px; --crop-w: 22px; --crop-h: 93px;
  left: 2%; top: 37%;
  animation-duration: 31s; animation-delay: -15s;
}

.woodcut-lettering-bird {
  --crop-x: -166px; --crop-y: -169px; --crop-w: 34px; --crop-h: 107px;
  right: 3%; top: 11%;
  animation-duration: 35s; animation-delay: -6s;
}

.woodcut-lettering-mountain {
  --crop-x: -202px; --crop-y: -197px; --crop-w: 31px; --crop-h: 79px;
  right: 6%; top: 42%;
  animation-duration: 29s; animation-delay: -17s;
}

.woodcut-lettering-mist {
  --crop-x: -240px; --crop-y: -197px; --crop-w: 21px; --crop-h: 78px;
  right: 2%; bottom: 7%;
  animation-duration: 34s; animation-delay: -12s;
}

.woodcut-lettering-river {
  --crop-x: -263px; --crop-y: -169px; --crop-w: 36px; --crop-h: 107px;
  left: 33%; bottom: 24%;
  opacity: 0.65;
  animation-duration: 38s; animation-delay: -8s;
}

.woodcut-lettering-dawn {
  --crop-x: -304px; --crop-y: -241px; --crop-w: 19px; --crop-h: 34px;
  right: 13%; top: 74%;
  opacity: 0.65;
  animation-duration: 32s; animation-delay: -22s;
}

@keyframes woodcut-drift {
  from { translate: 0 0; }
  to { translate: 8px -22px; }
}

@media (max-width: 1192px) {
  [data-theme="dark"] .woodcut-background::before,
  [data-theme="dark"] .woodcut-qilin {
    width: 100%;
  }

  [data-theme="dark"] .woodcut-background::after {
    background: linear-gradient(90deg, rgba(16, 16, 14, 0.36), rgba(16, 16, 14, 0.58) 17%, rgba(16, 16, 14, 0.86) 26%, rgba(16, 16, 14, 0.82) 90%, rgba(16, 16, 14, 0.44));
  }

  .woodcut-lettering { --print-scale: 1; opacity: 0.72; }
  .woodcut-lettering-temple { left: 2%; }
  .woodcut-lettering-qilin { left: 2%; bottom: 4%; }
  .woodcut-lettering-detour { left: 3%; top: 30%; }
  .woodcut-lettering-river { left: 3%; bottom: 25%; }
  .woodcut-lettering-dawn { right: 4%; top: 69%; }
}

@media (prefers-reduced-motion: reduce) {
  .woodcut-lettering { animation: none; }
}

[data-theme="dark"] body.theme-luka .top-nav {
  background-image: url("../img/paper-grain.svg");
  border-bottom: 3px double var(--luka-border);
}

[data-theme="dark"] body.theme-luka :is(.site-name, .section-title, .nav-left a) {
  font-family: Georgia, "Times New Roman", "Songti SC", SimSun, serif;
  font-weight: 400;
  letter-spacing: 0.035em;
}

[data-theme="dark"] body.theme-luka .section-title {
  border-bottom: 3px double var(--luka-border);
  color: var(--luka-text);
}

[data-theme="dark"] body.theme-luka .image.avatar img {
  padding: 7px;
  border: 1px solid var(--luka-accent);
  border-radius: 2px;
  background: var(--luka-social-bg);
  box-shadow: 0 0 0 4px var(--luka-bg), 0 0 0 5px var(--luka-border);
  filter: sepia(0.25) saturate(0.72);
}

[data-theme="dark"] body.theme-luka :is(.social-icons a, .cursor-swatch) {
  border: 1px solid var(--luka-border);
  border-radius: 2px;
  box-shadow: none;
}

[data-theme="dark"] body.theme-luka .social-icons a:hover {
  color: var(--luka-bg) !important;
}

[data-theme="dark"] body.theme-luka .visitor-card {
  border-style: solid;
  border-radius: 2px;
  background: rgba(192, 173, 141, 0.025);
}

[data-theme="dark"] body.theme-luka .visitor-card :is(img, iframe, .visitor-map) {
  border-radius: 0;
  filter: grayscale(0.85) sepia(0.25) brightness(0.8);
}

[data-theme="dark"] body.theme-luka .timeline-item::before {
  width: 1px;
  background: var(--luka-border);
}

[data-theme="dark"] body.theme-luka .publications ol.bibliography li {
  border-left: 1px solid var(--luka-border);
}

[data-theme="dark"] body.theme-luka .pub-cover img {
  border-radius: 2px;
}

[data-theme="dark"] body.theme-luka .section-body a {
  text-decoration: underline;
  text-decoration-color: var(--luka-border);
  text-underline-offset: 3px;
}

[data-theme="dark"] body.theme-luka a:hover {
  text-decoration-color: var(--luka-accent);
}

[data-theme="dark"] body.theme-luka :is(a, button):focus-visible {
  outline: 2px solid var(--luka-accent);
  outline-offset: 4px;
}

[data-theme="dark"] ::selection {
  background: #c0ad8d;
  color: #191814;
}