:root {
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --content-max: 1260px;
  --reading-max: 720px;
  --focus: #d48a24;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

html { scroll-padding-top: 64px; }
img { background: #e9e5db; }
a, button, input, select, textarea { transition: color .18s var(--ease-out), background-color .18s var(--ease-out), border-color .18s var(--ease-out), opacity .18s var(--ease-out); }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.skip-link:focus { z-index: 1000; }

.site-header { position: sticky; top: 0; z-index: 50; transition: box-shadow .2s var(--ease-out); }
.site-header.is-compact { box-shadow: 0 5px 18px rgb(18 31 27 / 10%); }
.site-header.is-compact .topline { display: none; }
.site-header.is-compact .masthead { min-height: 64px; }
.site-header.is-compact .brand-mark { width: 38px; height: 38px; font-size: 1.8rem; }
.site-header.is-compact .brand strong { font-size: 1.75rem; }
.site-header.is-compact .brand small, .site-header.is-compact .edition { display: none; }
.hero-photo img, .lead-art img, .card-art img, .archive-card-image img { object-fit: cover; }

@media (max-width: 900px) {
  body.nav-open { overflow: hidden; }
  .primary-nav.open { position: fixed; inset: 123px 0 0; z-index: 49; overflow-y: auto; padding: 1.5rem; background: var(--paper); border-top: 1px solid var(--ink); box-shadow: 0 16px 30px rgb(18 31 27 / 14%); }
  .site-header.is-compact .primary-nav.open { inset-block-start: 64px; }
  .primary-nav.open a { width: 100%; min-height: 44px; display: flex; align-items: center; border-bottom: 1px solid var(--line); font-size: .9rem; }
  .menu-toggle { min-width: 48px; min-height: 48px; justify-content: center; }
}

@media (max-width: 600px) {
  .site-header.is-compact .masthead { min-height: 60px; }
  .site-header.is-compact .primary-nav.open { inset-block-start: 60px; }
  .brand strong { font-size: clamp(1.45rem, 7vw, 2rem); }
}

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