:root {
  --canvas: #FDF8F2;
  --paper: #FAF6F0;
  --ink: #1A1A1A;
  --gold: #E8A04D;
  --pale-gold: #F5D9A8;
  --sand: #F2EBE0;
  --bone: #E0D6C5;
  --graphite: #4A4239;
  --stone: #7A7268;
}

html,
body {
  background: var(--canvas);
}

::selection {
  background: var(--pale-gold);
  color: var(--ink);
}

:focus-visible {
  outline: 0.1875rem solid var(--ink);
  outline-offset: 0.1875rem;
}

.skip-link {
  background: var(--ink);
  border-radius: 1.5rem;
  color: var(--paper);
}

.site-header {
  background: color-mix(in srgb, var(--canvas) 94%, transparent);
}

.precious-dot {
  animation: precious-pulse 1500ms ease-in-out infinite;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--gold) 18%, transparent);
}

.question-tabs {
  border-bottom: 0.0625rem solid var(--bone);
}

.question-tab {
  background: var(--sand);
  border: 0.0625rem solid transparent;
  border-radius: 999px;
  color: var(--graphite);
  transition: transform 250ms cubic-bezier(.2,.9,.25,1.2), background-color 180ms ease;
}

.question-tab:hover {
  background: var(--bone);
}

.question-tab:active,
.bottom-link:active,
.next-page:active,
.primary-button:active,
.print-button:active,
.reaction summary:active {
  transform: scale(0.88);
}

.question-tab[aria-current="page"] {
  background: var(--ink);
  color: var(--paper);
}

.editorial-photo {
  background: var(--sand);
  border-radius: 1rem;
  box-shadow: 0 0.8rem 2rem rgba(28, 20, 10, 0.10);
}

.answer-card,
.not-found-card {
  background: var(--paper);
  border: 0.03125rem solid var(--bone);
  border-radius: 1rem;
  box-shadow: 0 0.65rem 1.6rem rgba(28, 20, 10, 0.06);
}

.highlight-card {
  background: #FBF0DC;
  border: 0.0625rem solid var(--gold);
  border-top: 0.75rem solid var(--pale-gold);
  border-radius: 1.25rem;
  box-shadow: 0 1rem 2.5rem rgba(28, 20, 10, 0.13);
}

.source-note {
  text-decoration-color: var(--bone);
}

.source-note:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

.source-links a {
  background: var(--sand);
  border: 0.0625rem solid var(--bone);
  border-radius: 1rem;
  transition: transform 250ms cubic-bezier(.2,.9,.25,1.2), border-color 180ms ease;
}

.source-links a:hover {
  border-color: var(--graphite);
}

.source-links a:active {
  transform: scale(0.96);
}

.reaction summary {
  background: var(--ink);
  border-radius: 50%;
  color: var(--paper);
  cursor: pointer;
  transition: transform 250ms cubic-bezier(.2,.9,.25,1.2);
}

.reaction-message {
  background: var(--sand);
  border: 0.0625rem solid var(--bone);
  border-radius: 999px;
  box-shadow: 0 0.4rem 1rem rgba(28, 20, 10, 0.09);
  color: var(--graphite);
  opacity: 0;
  transform: scaleX(0.72);
  transform-origin: right center;
  transition: opacity 400ms ease, transform 400ms cubic-bezier(.2,.9,.25,1.05);
}

.reaction[open] .reaction-message {
  opacity: 1;
  transform: scaleX(1);
}

.reaction[open] summary {
  box-shadow: 0 0 0 0.35rem var(--pale-gold);
}

.chapter-recap {
  background: var(--sand);
  border-left: 0.25rem solid var(--ink);
  border-radius: 0 1rem 1rem 0;
}

.next-page,
.primary-button,
.print-button {
  background: var(--ink);
  border-radius: 1.75rem;
  color: var(--paper);
  transition: transform 250ms cubic-bezier(.2,.9,.25,1.2), box-shadow 180ms ease;
}

.next-page:hover,
.primary-button:hover,
.print-button:hover {
  box-shadow: 0 0.75rem 1.75rem rgba(28, 20, 10, 0.18);
}

.print-check {
  background: var(--sand);
  border: 0.125rem solid var(--graphite);
  border-radius: 0.4rem;
}

.site-footer {
  border-top: 0.0625rem solid var(--bone);
}

.site-footer nav a {
  color: var(--graphite);
  text-decoration-color: var(--bone);
}

.bottom-bar {
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  border-top: 0.0625rem solid var(--bone);
  box-shadow: 0 -0.4rem 1.4rem rgba(28, 20, 10, 0.08);
  backdrop-filter: blur(0.8rem);
}

.bottom-link {
  color: var(--graphite);
  transition: color 180ms ease, transform 250ms cubic-bezier(.2,.9,.25,1.2);
}

.bottom-link[aria-current="page"] {
  color: var(--ink);
}

.bottom-link[aria-current="page"]::after {
  background: var(--ink);
  border-radius: 999px;
}

@keyframes precious-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

@media (min-width: 48rem) {
  .bottom-bar {
    background: var(--paper);
    border: 0.0625rem solid var(--bone);
    border-radius: 1.25rem;
    box-shadow: 0 0.65rem 1.6rem rgba(28, 20, 10, 0.06);
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  html,
  body {
    background: var(--paper);
  }

  .answer-card,
  .chapter-recap {
    box-shadow: none;
  }
}