:root { --bronze-detail: #8a6546; --ease-arkhyz: cubic-bezier(.2,.65,.25,1); }

@media (min-width: 901px) {
  body > header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: rgb(255 255 255 / 94%);
    backdrop-filter: blur(12px);
  }
  main [id] { scroll-margin-block-start: 94px; }
}
.top nav a { position: relative; }
.top nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 -.42rem;
  height: 1px;
  background: var(--bronze-detail);
  transform: scaleX(0);
  transform-origin: left;
}
.top nav a:is(:hover,:focus-visible) { text-decoration: none; }
.top nav a:is(:hover,:focus-visible)::after { transform: scaleX(1); }
.hero-copy > .hero-line {
  border-inline-start: 1px solid var(--bronze-detail);
  padding-inline-start: .7em;
}
.hero-figure figcaption, .interlude figcaption, .operator-image figcaption {
  text-align: end;
  color: var(--muted);
}
.gallery figure > a { overflow: clip; }
.gallery figure > a:focus-visible { outline-offset: 3px; }
.gallery a:focus-visible img { filter: brightness(.94); }

@media (prefers-reduced-motion: no-preference) {
  .top nav a::after { transition: transform .25s var(--ease-arkhyz); }
  .button, .outline { transition: background-color .22s ease, transform .22s var(--ease-arkhyz); }
  .button:active, .outline:active { transform: translateY(1px); }
  .hero-copy { animation: arkhyz-entry .7s var(--ease-arkhyz) both; }
  .hero-figure { animation: arkhyz-entry .85s var(--ease-arkhyz) both; }
  @supports (animation-timeline: view()) {
    .landscape, .interlude figure, .operator-image, .catalog-card {
      animation: arkhyz-entry linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 85%;
    }
  }
  @media (hover: hover) and (pointer: fine) {
    .gallery figure > a img { transition: transform .65s var(--ease-arkhyz); }
    .gallery figure > a:hover img { transform: scale(1.035); }
    .button:hover, .outline:hover { transform: translateY(-2px); }
  }
}
@keyframes arkhyz-entry {
  from { opacity: .74; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
