/*
  Shared physical finish for the archive system.
  This layer deliberately avoids layout, sizing and project-specific colour.
*/

:root {
  --archive-patina-ink: rgba(34, 31, 25, .16);
  --archive-patina-shadow: rgba(13, 17, 17, .18);
}

html {
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

body {
  text-rendering: optimizeLegibility;
}

html::after {
  content: "";
  position: fixed;
  z-index: 2147483000;
  inset: 0;
  pointer-events: none;
  opacity: .055;
  color: #5a5044;
  background-image:
    radial-gradient(circle at 13px 17px, currentColor 0 .45px, transparent .72px),
    radial-gradient(circle at 61px 43px, currentColor 0 .34px, transparent .66px),
    radial-gradient(circle at 29px 79px, currentColor 0 .42px, transparent .7px),
    linear-gradient(97deg, transparent 0 48%, rgba(255,255,255,.3) 49%, transparent 50%);
  background-size: 83px 97px, 101px 89px, 109px 113px, 173px 157px;
  mix-blend-mode: soft-light;
}

html:has(body.archive-index)::after {
  display: none;
}

::selection {
  color: #f2eee2;
  background: #294d57;
}

:where(.topbar, .file-nav, .record-nav, .archive-return, .page-nav) {
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

:where(.topbar, .file-nav, .record-nav, .archive-return, .page-nav) a {
  text-decoration-thickness: 1px;
  text-underline-offset: .32em;
}

:where(.topbar, .file-nav, .record-nav, .archive-return, .page-nav) a:hover {
  text-decoration-line: underline;
}

:where(.photo, .still, .frame) {
  box-shadow: 3px 4px 0 var(--archive-patina-shadow) !important;
}

:where(.photo, .still, .frame) img {
  filter: saturate(.94) contrast(1.025);
}

:where(.photo, .still, .frame):hover,
:where(.photo, .still, .frame):focus-visible {
  box-shadow: 4px 7px 0 rgba(13, 17, 17, .22) !important;
}

:where(button, a, input, [tabindex]) {
  -webkit-tap-highlight-color: transparent;
}

:where(button, a, input, [tabindex]):focus-visible {
  outline-width: 1px !important;
  outline-style: solid !important;
}

dialog::backdrop {
  backdrop-filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html::after { opacity: .035; }
}

@media print {
  html::after { display: none; }
}