/* Shared page foundation. Colors remain owned by style.css :root. */
:root {
  --font-body: 'Inter', sans-serif;
  --font-heading: 'Saira', sans-serif;
  --type-body: 1rem;
  --type-small: .875rem;
  --type-h1: clamp(2rem, 5vw, 3.5rem);
  --type-h2: clamp(1.5rem, 3vw, 2.25rem);
  --type-h3: 1.25rem;
  --space-1: .5rem; --space-2: 1rem; --space-3: 1.5rem;
  --space-4: 2rem; --space-5: 3rem; --space-6: 4rem;
  --content-width: 72rem; --reading-width: 68ch;
  --panel-radius: .75rem;
  --panel-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.site-page { font-family: var(--font-body); font-size: var(--type-body); }
.site-page main { padding-block: 8rem var(--space-6); }
.site-page .page-container { width: min(calc(100% - 2rem), var(--content-width)); margin-inline: auto; }
.site-page h1, .site-page h2, .site-page h3 { font-family: var(--font-heading); line-height: 1.2; text-wrap: balance; }
.site-page h1 { font-size: var(--type-h1); }
.site-page h2 { font-size: var(--type-h2); }
.site-page h3 { font-size: var(--type-h3); }
.site-page .page-section { padding-block: var(--space-4); }
.site-page .page-copy { max-width: var(--reading-width); }
.site-page .page-copy > * + * { margin-top: var(--space-3); }
.site-page .page-card { padding: var(--space-4); background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: var(--panel-radius); box-shadow: var(--panel-shadow); }
.site-page .page-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.site-page main :focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 4px; }
.site-page .skip-link { position: absolute; top: -10rem; left: 1rem; z-index: 10000; background: var(--bg-primary); color: var(--text-primary); padding: var(--space-2); }
.site-page .skip-link:focus { top: 1rem; }
@media (prefers-reduced-motion: reduce) { .site-page { scroll-behavior: auto; } .site-page * { animation: none !important; transition: none !important; } }