* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: #111514;
  color: var(--ink);
  font-family: var(--sans);
}

body { overflow: hidden; }
body.detail-open { overflow: hidden; }
button, a { font: inherit; }
button { color: inherit; }
img { max-width: 100%; }

.screen { position: fixed; inset: 0; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #fff;
  color: #17221d;
  transform: translateY(-150%);
  transition: transform 180ms ease;
}

.skip-link:focus { transform: translateY(0); }

.quiet-button {
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  padding: 9px 15px;
  background: rgba(12, 14, 13, .5);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(14px);
  transition: background 180ms ease, transform 180ms ease;
}

.quiet-button:hover { background: rgba(12, 14, 13, .78); transform: translateY(-1px); }

:focus-visible { outline: 3px solid rgba(77, 112, 200, .68); outline-offset: 3px; }