/* Separable publish polish patch
   Purpose: final visual cleanup before publishing.
   Scope is intentionally narrow: publish polish fixes for Works plus global abstract background softening.
*/

body.work-page.works-index-mode .works-index-title {
  max-width: 13ch;
  font-family: var(--mono, "Courier New", Courier, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace) !important;
  font-size: clamp(34px, 5vw, 68px) !important;
  line-height: 1.08 !important;
  font-weight: 400 !important;
  letter-spacing: -0.05em !important;
  text-transform: uppercase;
}

body.work-page.works-index-mode .works-index-item a {
  background: rgba(255, 255, 255, 0.52) !important;
  background-color: rgba(255, 255, 255, 0.52) !important;
  background-image: none !important;
  border-color: rgba(17, 17, 15, 0.24) !important;
  box-shadow: none !important;
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}

body.work-page.works-index-mode .works-index-item a:hover,
body.work-page.works-index-mode .works-index-item a:focus-visible {
  background: rgba(255, 255, 255, 0.72) !important;
  background-color: rgba(255, 255, 255, 0.72) !important;
}

html[data-theme="dark"] body.work-page.works-index-mode .works-index-item a,
body[data-theme="dark"].work-page.works-index-mode .works-index-item a,
html.theme-dark body.work-page.works-index-mode .works-index-item a,
body.theme-dark.work-page.works-index-mode .works-index-item a {
  background: rgba(5, 5, 5, 0.50) !important;
  background-color: rgba(5, 5, 5, 0.50) !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

html[data-theme="dark"] body.work-page.works-index-mode .works-index-item a:hover,
html[data-theme="dark"] body.work-page.works-index-mode .works-index-item a:focus-visible,
body[data-theme="dark"].work-page.works-index-mode .works-index-item a:hover,
body[data-theme="dark"].work-page.works-index-mode .works-index-item a:focus-visible,
html.theme-dark body.work-page.works-index-mode .works-index-item a:hover,
html.theme-dark body.work-page.works-index-mode .works-index-item a:focus-visible,
body.theme-dark.work-page.works-index-mode .works-index-item a:hover,
body.theme-dark.work-page.works-index-mode .works-index-item a:focus-visible {
  background: rgba(12, 12, 12, 0.64) !important;
  background-color: rgba(12, 12, 12, 0.64) !important;
}

/* V2: Work rail continuity + subtle animated background softening.
   The left rail is intended to stay as one calm paper surface on desktop.
   This prevents the animated field from showing through below the rail content while scrolling. */
@media (min-width: 901px) {
  body.work-page .work-rail {
    position: sticky !important;
    top: 0 !important;
    align-self: start !important;
    height: 100vh !important;
    height: 100svh !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
    background: rgba(255, 255, 255, 0.96) !important;
    background-color: rgba(255, 255, 255, 0.96) !important;
    background-image: none !important;
  }

  html[data-theme="dark"] body.work-page .work-rail,
  body[data-theme="dark"].work-page .work-rail,
  html.theme-dark body.work-page .work-rail,
  body.theme-dark.work-page .work-rail {
    background: rgba(5, 5, 5, 0.94) !important;
    background-color: rgba(5, 5, 5, 0.94) !important;
    background-image: none !important;
  }
}

/* V5: global animated background softening.
   The abstract canvas is part of the whole site, so the same breathing background treatment
   should apply consistently on index, Work, Journal, About, CV, Contact and 404 pages.
   This only softens the rendered canvas; it does not alter animation timing, shapes, opacity,
   page layout, gallery logic or theme behaviour.
   The !important flags are deliberate: older theme-specific dark-mode canvas filters have higher selector specificity. */
body #abstract-canvas {
  filter: blur(1.67px) !important;
  transform: scale(1.008) !important;
  transform-origin: center;
}

html[data-theme="dark"] body #abstract-canvas,
body[data-theme="dark"] #abstract-canvas,
html.theme-dark body #abstract-canvas,
body.theme-dark #abstract-canvas {
  filter: invert(1) blur(1.67px) !important;
}