/* Base / Reset / Typography */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { height:100%; }
body {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  background: var(--color-surface-0);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display:flex;
  flex-direction:column;
  min-height:100%;
}
main { flex:1 0 auto; width:100%; }
footer.site-footer, footer.site-footer { flex-shrink:0; }
img, svg { max-width: 100%; height: auto; vertical-align: middle; }
picture { display: contents; }
input, button, textarea, select { font: inherit; }
button { cursor: pointer; }
ul[role='list'], ol[role='list'] { list-style: none; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); }
strong { font-weight: 600; }

/* Headings */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-serif); line-height: var(--line-height-tight); font-weight: 700; margin: 0 0 var(--space-3); }
h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-md); }
h6 { font-size: var(--font-size-base); }

/* Skip link */
.skip-link { position: absolute; left: -999px; top: -999px; background: var(--color-accent); color: var(--color-text-inverse); padding: 8px 14px; border-radius: var(--radius-sm); z-index: 2000; }
.skip-link:focus { left: 12px; top: 12px; outline: var(--focus-ring); }

/* Focus outline normalization */
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* Selection */
::selection { background: var(--color-accent); color: var(--color-text-inverse); }