/* The final five percent. No scripts, no gimmicks: micro-finish only.
   House tokens: paper #fbfaf5 · ink #1c1c19 · green #123a31. 2026-08-12. */

/* native cross-fade page transitions: three lines, zero JS, ignored by old browsers */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

::selection { background: #123a31; color: #fbfaf5; }
:focus-visible { outline: 2px solid #123a31; outline-offset: 2px; border-radius: 2px; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
section[id], h2[id] { scroll-margin-top: 4.5rem; }

h1, h2, h3 { text-wrap: balance; }
p, figcaption, blockquote, li { text-wrap: pretty; }

a { text-underline-offset: 3px; text-decoration-thickness: 1px;
    transition: text-decoration-thickness .15s ease; }
a:hover { text-decoration-thickness: 2px; }
@media (prefers-reduced-motion: reduce) { a { transition: none; } }

input, button, textarea, select { accent-color: #123a31; caret-color: #123a31; }
* { -webkit-tap-highlight-color: transparent; }

@media print {
  nav, .sub-nav, form, button, .btn, video, audio { display: none !important; }
  body { background: #fff !important; color: #000 !important; font: 11pt/1.55 Georgia, "Times New Roman", serif; }
  a { color: #000; text-decoration: none; }
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #444; }
  blockquote { border-left: 2pt solid #000; page-break-inside: avoid; }
  h1, h2, h3 { page-break-after: avoid; }
  figure, table { page-break-inside: avoid; }
}

/* tables: self-contained on narrow screens, never a page-wide scroll.
   Scroll shadows (pure CSS, background-attachment trick) show there is
   more to swipe; desktop is untouched. */
td, th { font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  table {
    display: block; max-width: 100%; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right, #fbfaf5 30%, rgba(251,250,245,0)),
      linear-gradient(to left,  #fbfaf5 30%, rgba(251,250,245,0)),
      radial-gradient(farthest-side at 0 50%,   rgba(28,28,25,.16), transparent),
      radial-gradient(farthest-side at 100% 50%, rgba(28,28,25,.16), transparent);
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}