@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');

:root {
  color-scheme: light;
  --ui-paper: #ffffff;
  --ui-paper-raised: #ffffff;
  --ui-paper-deep: #f1f1ee;
  --ui-ink: #1c1c19;
  --ui-muted: #6f6e68;
  --ui-faint: #9a9890;
  --ui-rule: rgba(28, 28, 25, 0.42);
  --ui-rule-soft: rgba(28, 28, 25, 0.18);
  --ui-font-display: 'Instrument Serif', 'Iowan Old Style', Baskerville, 'Times New Roman', serif;
  --ui-font-sans: Arial, 'Helvetica Neue', 'Apple SD Gothic Neo', system-ui, sans-serif;
  --ui-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ui-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

html {
  background: var(--ui-paper);
}

body {
  font-family: var(--ui-font-sans);
  background: var(--ui-paper);
  color: var(--ui-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

a,
button,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

::selection {
  color: var(--ui-ink);
  background: var(--ui-paper-deep);
}

/* The counter behaves like a printed folio: one quiet rule, no card depth. */
.index-indicator {
  color: var(--ui-ink);
  background: var(--ui-paper-raised);
  border: 1px solid var(--ui-ink);
  border-radius: 0;
  box-shadow: none;
  font-family: var(--ui-font-display);
  font-weight: 400;
  font-variant-numeric: lining-nums tabular-nums;
}

.index-indicator {
  padding-top: 0;
  padding-bottom: 0;
}

.back-btn {
  color: var(--ui-ink);
  font-family: var(--ui-font-display);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: none;
  text-underline-offset: 5px;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

.credit {
  font-family: var(--ui-font-display);
}

@media (hover: hover) and (pointer: fine) {
  .back-btn:hover,
  .credit:hover {
    color: inherit;
    text-decoration-style: dotted;
    text-decoration-color: currentColor;
  }
}

.back-btn:focus-visible,
.credit:focus-visible,
.material-btn:focus-visible,
.credit-popup-close:focus-visible,
.interaction-guide-trigger:focus-visible,
.interaction-guide-tab:focus-visible,
.interaction-guide-close:focus-visible,
.interaction-guide-confirm:focus-visible,
.nav-half:focus-visible {
  outline: 1px dotted currentColor;
  outline-offset: 4px;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .back-btn { transition: none; }
}

/* Keep document changes continuous but subordinate to the content itself. */
@view-transition { navigation: auto; }
::view-transition-group(space-model) {
  animation-duration: 0.4s;
  animation-timing-function: var(--ui-ease-out);
}