*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: var(--step-0); line-height: 1.6; text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}
.skip {
  position: absolute; left: -9999px;
}
/* Clip-based visually-hidden: stays in the accessibility tree (unlike
   display:none / visibility:hidden, which remove it entirely) while taking
   up no visual space. Use for content that must be announced/read but has
   no visible design slot yet, e.g. the page's single required <h1>. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip:focus {
  left: var(--gutter); top: 1rem; z-index: 10;
  background: var(--ink); color: var(--paper); padding: 0.6rem 1rem;
}
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }

/* Motion is opt-in, never opt-out. Entries are visible by default; the
   reveal is an enhancement applied only when motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  .entry { animation: rise 0.7s ease-out both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
  @keyframes rise { from { opacity: 0; transform: translateY(2rem); } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}