/* ============================================================
   site.css — ONLY the rules that cannot be written inline.
   ------------------------------------------------------------
   Everything visual (colour, type, spacing, layout) is inline on the
   elements, so pages paint as they load. This file holds the three
   things inline styles genuinely cannot express: media queries,
   :focus-visible, and prefers-reduced-motion.

   Loaded from every page's <helmet>. Safe to edit.
   =========================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--text-strong); }
a:hover { color: var(--neutral-600); }

/* Visible keyboard focus everywhere, without a mouse-click ring. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Inputs inherit the type system rather than the browser's. */
input, button, select, textarea { font: inherit; color: inherit; }
input::placeholder { color: var(--neutral-400); }
summary { cursor: pointer; }
summary::-webkit-details-marker { display: none; }

/* --- responsive utilities ---------------------------------- */
.wide-only { display: flex; }
.narrow-only { display: none; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.six-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ex-row { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 32px; }
.plane-split { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 48px; align-items: start; }
.toc-split { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 64px; align-items: start; }
.rec-row { display: grid; grid-template-columns: 64px minmax(0,1fr) 120px 132px; gap: 20px; align-items: baseline; }

@media (max-width: 900px) {
  .wide-only { display: none !important; }
  .narrow-only { display: block; }
  .two-col, .three-col, .ex-row, .plane-split, .toc-split { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .six-col { grid-template-columns: repeat(2, 1fr); }
  .rec-row { grid-template-columns: 56px minmax(0,1fr); row-gap: 8px; }
  .sticky-toc { position: static !important; }
}
@media (max-width: 520px) {
  .six-col { grid-template-columns: 1fr; }
}

/* --- motion ------------------------------------------------- */
@keyframes fadeRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.reveal { animation: fadeRise 420ms cubic-bezier(.4,0,.2,1) both; }

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

@media print {
  .no-print { display: none !important; }
}